/* Mobile composition layer. It changes layout only; domain state and actions stay shared. */
.mobile-detail-back { display: none; }

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    min-width: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .signed-in-shell,
  .signed-in-shell > .os-stage,
  .signed-in-shell .workspace-page,
  .today-shell,
  .communication-shell,
  .time-shell,
  .task-workspace,
  .document-workspace-shell,
  .matter-view-container,
  .matter-workspace-layout {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .signed-in-shell > .os-stage {
    padding: 0 var(--bona-space-16) calc(88px + env(safe-area-inset-bottom));
  }

  .signed-in-shell .topbar {
    min-height: 52px;
    border-bottom: 1px solid var(--bona-color-border-subtle);
  }

  .signed-in-shell .topbar .logo { width: 96px; }
  .signed-in-shell .environment { font-size: 9px; }
  .signed-in-shell .footer { display: none; }

  .workspace-header,
  .today-header,
  .communication-header,
  .time-header,
  .task-workspace-header,
  .document-workspace-header,
  .matter-workspace-header,
  .client-directory-header,
  .client-workspace-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bona-space-16);
    align-items: start;
    padding-bottom: var(--bona-space-16);
  }

  .workspace-header h1,
  .today-header h1,
  .communication-header h1,
  .time-header h1,
  .task-workspace-header h1,
  .document-workspace-header h1,
  .matter-workspace-header h1,
  .client-directory-header h1,
  .client-workspace-header h1 {
    max-width: 100%;
    margin-block: var(--bona-space-8);
    font-size: 32px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .eyebrow { margin-bottom: var(--bona-space-4) !important; }
  .back-link { display: inline-flex; min-height: 44px; align-items: center; }

  .signed-in-shell button,
  [role="button"],
  input,
  select,
  textarea,
  summary,
  .primary-button,
  .secondary-button,
  .compact-button {
    box-sizing: border-box;
  }

  .signed-in-shell button,
  [role="button"],
  .primary-button,
  .secondary-button,
  .compact-button {
    min-height: 44px;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select {
    min-height: 48px;
    padding-inline: var(--bona-space-12);
  }

  textarea { min-height: 112px; padding: var(--bona-space-12); }

  dialog,
  .task-dialog,
  .communication-dialog,
  .matter-information-dialog {
    width: calc(100% - 24px);
    max-width: none;
    max-height: calc(100dvh - 24px);
    margin: 12px;
  }

  /* Registered GlobalNavigation, recomposed as a four-target bottom bar. */
  .os-primary-navigation > a,
  .os-primary-navigation > button,
  .os-mobile-navigation-more > summary {
    min-height: 62px;
    gap: var(--bona-space-4);
  }

  .os-primary-navigation > a > span[aria-hidden="true"],
  .os-primary-navigation > button > span[aria-hidden="true"],
  .os-mobile-navigation-more > summary > span:first-child {
    width: 21px;
    min-height: 21px;
    background: currentColor;
    color: transparent;
    font-size: 0;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 20px;
  }

  .os-primary-navigation > [data-os-nav="today"] > span {
    -webkit-mask-image: url("/static/icons/lucide/home.svg");
    mask-image: url("/static/icons/lucide/home.svg");
  }

  .os-primary-navigation > [data-os-nav="bonacore"] > span {
    -webkit-mask-image: url("/static/icons/lucide/sparkles.svg");
    mask-image: url("/static/icons/lucide/sparkles.svg");
  }

  .os-primary-navigation > [data-os-nav="clients"] > span,
  .os-primary-navigation > [data-os-nav="matters"] > span {
    -webkit-mask-image: url("/static/icons/lucide/users.svg");
    mask-image: url("/static/icons/lucide/users.svg");
  }

  .os-primary-navigation > button > span:not([aria-hidden="true"]) {
    width: 100%;
    min-width: 0;
    min-height: auto;
    overflow: hidden;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .os-mobile-navigation-more > summary > span:first-child {
    -webkit-mask-image: url("/static/icons/lucide/menu.svg");
    mask-image: url("/static/icons/lucide/menu.svg");
  }

  .os-mobile-navigation-panel {
    right: max(var(--bona-space-8), env(safe-area-inset-right));
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: max(var(--bona-space-8), env(safe-area-inset-left));
    max-height: min(520px, calc(100dvh - 92px - env(safe-area-inset-bottom)));
    overflow-y: auto;
    padding: var(--bona-space-8) var(--bona-space-12);
  }

  .os-mobile-navigation-panel > a,
  .os-mobile-navigation-panel > button,
  .os-mobile-navigation-panel > form > button { min-height: 48px; }

  /* Global Communication is opt-in on mobile and opens as a bottom sheet. */
  .global-communication-hub {
    inset: auto 0 calc(70px + env(safe-area-inset-bottom));
    width: 100%;
    max-height: min(68dvh, 560px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background: var(--bona-color-surface);
    box-shadow: var(--bona-shadow-modal);
  }

  .global-communication-hub > header {
    align-items: center;
    padding: var(--bona-space-12) var(--bona-space-16);
  }

  .global-communication-header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .global-communication-header-actions button,
  .global-communication-hub > header a { min-height: 44px; padding: 0 var(--bona-space-8); }

  .global-communication-hub-restore {
    display: none !important;
  }

  .global-message-overlay {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .global-message-overlay-header,
  .global-message-compose > header,
  .global-message-original > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .global-message-window-actions,
  .global-message-compose-actions { width: 100%; flex-wrap: wrap; }

  .global-message-window-actions button,
  .global-message-compose-actions button { flex: 1 1 auto; }

  /* Today: one scan column, compact actions, no desktop side rails. */
  .today-shell {
    display: block;
    padding: var(--bona-space-24) 0 var(--bona-space-48);
  }

  .today-nav,
  .today-context-rail { display: none; }

  .today-header { border-bottom: 1px solid var(--bona-color-border-strong); }

  .today-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--bona-space-8);
    justify-items: stretch;
  }

  .today-header-actions p {
    grid-column: 1 / -1;
    max-width: 28ch;
    text-align: left;
  }

  .today-primary-action {
    width: 100%;
  }

  .today-header-utilities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bona-space-8);
  }

  .today-header-utilities .context-time-action {
    margin-left: 0;
  }

  .today-header-actions > a,
  .today-header-utilities > a,
  .today-header-utilities > button {
    min-width: 0;
    justify-content: center;
    min-height: 44px;
    padding-inline: var(--bona-space-8);
    font-size: 12px;
  }

  .today-filter-bar {
    flex-wrap: nowrap;
    margin: var(--bona-space-12) 0 0;
    overflow-x: auto;
    padding: 0 0 var(--bona-space-8);
    scrollbar-width: none;
  }

  .segmented-control.segmented-control > button { min-height: 44px; }
  .today-filter-bar.segmented-control > button { min-height: 44px; flex: 0 0 auto; }
  .today-section,
  .today-attention { margin-top: var(--bona-space-24); }
  .today-section-heading { min-height: 52px; padding-inline: 0; }

  .today-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    padding-inline: 0;
  }

  .today-item > a {
    grid-template-areas: "main priority" "time status";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--bona-space-8) var(--bona-space-12);
    min-height: 96px;
    padding: var(--bona-space-12) 0;
  }

  .today-main strong { font-size: 16px; }
  .today-status,
  .today-priority { justify-self: end; text-align: right; }

  .today-quick-actions {
    justify-content: flex-end;
    opacity: 1;
    padding: 0 0 var(--bona-space-12);
  }

  .today-quick-actions button { min-height: 44px; padding-inline: var(--bona-space-12); }

  /* Client directory and Client workspace use ObjectRows instead of desktop matrices. */
  .client-directory,
  .client-workspace { padding: var(--bona-space-24) 0 var(--bona-space-48); }

  .client-directory-filters,
  .client-create-form,
  .client-matter-filters {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bona-space-8);
  }

  .client-directory-filters > *,
  .client-matter-filters > * { width: 100%; }

  .client-directory-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--bona-space-8) var(--bona-space-12);
    min-height: 84px;
    padding: var(--bona-space-12) 0;
  }

  .client-directory-identity { grid-column: 1 / -1; }

  .client-primary-layout,
  .client-work-grid,
  .client-secondary-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bona-space-24);
  }

  .client-context-rail {
    position: static;
    order: 2;
    border-top: 1px solid var(--bona-color-border-strong);
    border-left: 0;
    padding: var(--bona-space-16) 0 0;
  }

  .client-summary-strip,
  .client-finance-overview { grid-template-columns: minmax(0, 1fr); }

  .client-summary-strip > div,
  .client-finance-overview > div {
    min-height: 72px;
    padding: var(--bona-space-12) 0;
    border-right: 0;
    border-bottom: 1px solid var(--bona-color-border-subtle);
  }

  .client-matter-row,
  .client-matter-row.has-financials,
  .client-object-row,
  .client-invoice-row,
  .client-attention-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--bona-space-8) var(--bona-space-12);
    min-height: 76px;
    padding: var(--bona-space-12) 0;
  }

  .client-matter-primary-link,
  .client-matter-supporting-metrics,
  .client-invoice-row > span:first-child,
  .client-attention-row > span:nth-child(2) { grid-column: 1 / -1; }

  .client-matter-supporting-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .client-secondary-grid article {
    padding: var(--bona-space-16) 0;
    border-left: 0 !important;
    border-bottom: 1px solid var(--bona-color-border-subtle);
  }

  /* Tasks become a sequential list/detail workspace on small screens. */
  .task-workspace { padding: var(--bona-space-24) 0 var(--bona-space-48); }
  .task-summary-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-toolbar,
  .task-filters,
  .task-form-grid { grid-template-columns: minmax(0, 1fr); }
  .task-workspace-grid {
    display: block;
    margin-top: var(--bona-space-24);
    scroll-margin-top: calc(52px + var(--bona-space-12));
  }
  .task-detail-panel { display: none; }
  .task-workspace-grid.is-mobile-detail-open .task-list-panel { display: none; }
  .task-workspace-grid.is-mobile-detail-open .task-detail-panel { display: block; }

  .mobile-detail-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--bona-space-12);
    border: 0;
    background: transparent;
    color: var(--bona-color-action-primary);
    font: inherit;
    font-weight: var(--bona-weight-semibold);
  }

  .mobile-detail-back::before { margin-right: var(--bona-space-8); content: "←"; }

  .task-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--bona-space-8) var(--bona-space-12);
    min-height: 88px;
    padding: var(--bona-space-12) 0;
  }

  .task-row-main { grid-column: 1 / -1; }
  .task-detail-actions { align-items: stretch; flex-direction: column; }
  .task-detail-actions > * { width: 100%; }

  /* Communication: compact list first; reader/composer remain full-screen layers. */
  .communication-shell,
  .time-shell {
    display: block;
    padding: var(--bona-space-24) 0 var(--bona-space-48);
  }

  .communication-nav,
  .time-shell > .today-nav { display: none; }

  .communication-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .communication-stats span { min-width: 0; }
  .communication-controls { grid-template-columns: minmax(0, 1fr); }
  .communication-controls > * { width: 100%; }

  .communication-filter-bar,
  .communication-view-switch,
  .mailbox-navigation {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--bona-space-8);
    scrollbar-width: none;
  }

  .communication-filter-bar > *,
  .communication-view-switch > *,
  .mailbox-navigation > * { flex: 0 0 auto; min-height: 44px; }

  .communication-mailbox-frame,
  .communication-workspace,
  .communication-shell.is-context-collapsed .communication-workspace {
    display: block;
    margin-top: var(--bona-space-24);
  }

  .mailbox-navigation { position: static; width: 100%; }
  .communication-context-stack { display: none; }
  .communication-list-item { min-height: 92px; padding: var(--bona-space-12) 0; }

  .reader-overlay,
  .reply-composer {
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    resize: none !important;
  }

  .reader-overlay-header,
  .reply-composer-header { cursor: default !important; }

  /* Documents: structure and list remain sequential; content uses the full device. */
  .document-workspace-shell { padding: var(--bona-space-24) 0 var(--bona-space-48); }
  .document-workspace-main { gap: var(--bona-space-24); }
  .document-structure-panel .document-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-structure-panel .document-filter-bar button,
  .document-structure-actions .compact-button { min-height: 48px; }
  .document-list-viewport { max-height: none; }
  .document-list-item { min-height: 76px; }

  .document-reader-overlay {
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
  }

  .document-reader-overlay-bar {
    min-height: 52px;
    cursor: default !important;
    touch-action: auto !important;
  }

  .document-reader-overlay-bar button { min-width: 44px; }
  .document-reader-restore { display: none !important; }

  /* Time: compact filter controls and card-like rows without horizontal tables. */
  .time-mode-band { margin-top: 0; }
  .time-period-band { grid-template-columns: minmax(0, 1fr); }

  .time-filter-panel form,
  .time-filter-preset,
  .time-filter-custom-dates,
  .time-filter-entity,
  .time-filter-client,
  .time-filter-status,
  .time-filter-search {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .time-filter-panel form { gap: var(--bona-space-12); }
  .time-filter-custom-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-filter-listbox { width: 100%; max-width: 100%; }

  .time-view-controls,
  .time-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bona-space-8);
  }

  .time-view-controls > *,
  .time-filter-actions > * { width: 100%; }
  .time-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-summary span { min-height: 72px; padding: var(--bona-space-12); }
  .time-entry-group > summary { min-height: 52px; }
  .time-table-scroll { overflow: visible; }
  .time-data-table,
  .time-data-table tbody,
  .time-data-table tr,
  .time-data-table td { display: block; width: 100%; }
  .time-data-table thead { display: none; }

  .time-data-table tr {
    margin: 0;
    border-bottom: 1px solid var(--bona-color-border-strong);
    padding: var(--bona-space-12) 0;
  }

  .time-data-table td {
    min-height: 0;
    border: 0;
    padding: var(--bona-space-4) 0;
    overflow-wrap: anywhere;
  }

  .time-data-table td:nth-child(1)::before { content: "Datum · "; }
  .time-data-table td:nth-child(2)::before { content: "Person · "; }
  .time-data-table td:nth-child(3)::before { content: "Dauer · "; }
  .time-data-table td:nth-child(4)::before { content: "Akte · "; }
  .time-data-table td:nth-child(5)::before { content: "Beschreibung · "; }
  .time-data-table td:nth-child(6)::before { content: "Status · "; }
  .time-data-table td::before { color: var(--bona-color-text-secondary); font-size: 11px; }
  .time-action-cell { padding-top: var(--bona-space-8) !important; }
  .time-action-cell::before { content: none !important; }
  .time-action-cell button { width: 100%; }

  .time-detail-drawer {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
  }

  /* Matter: one legal-work column; context follows the primary content. */
  .matter-view-toolbar {
    margin-top: var(--bona-space-12);
    justify-content: stretch;
  }

  .matter-view-switch { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .matter-view-switch a { min-width: 0; min-height: 44px; padding-inline: var(--bona-space-4); }

  .matter-workspace-layout {
    display: block;
    padding: var(--bona-space-24) 0 var(--bona-space-48);
  }

  .minimal-sidebar { display: none; }
  .matter-workspace-surface .back-link { margin-bottom: var(--bona-space-16); }
  .matter-header-actions { justify-content: flex-start; flex-wrap: wrap; }
  .matter-primary-rows { margin-top: var(--bona-space-24); }

  .matter-primary-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--bona-space-8) var(--bona-space-12);
    min-height: 72px;
    padding: var(--bona-space-8) 0;
  }

  .matter-primary-row small { grid-column: 2; }
  .matter-information-brief > header { align-items: flex-start; flex-direction: column; }
  .matter-notes { margin-top: var(--bona-space-32); }
  .matter-notes textarea { min-height: 180px; }

  .matter-context-panel {
    position: static;
    margin-top: var(--bona-space-32);
    border-top: 1px solid var(--bona-color-border-strong);
    border-left: 0;
    padding: var(--bona-space-8) 0 0;
  }

  .document-list,
  .audit-list { margin-top: var(--bona-space-32); }
  .document-head { display: none; }
  .document-row,
  .audit-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bona-space-8);
    padding: var(--bona-space-12) 0;
  }

  .document-actions,
  .proposal-actions { min-width: 0; }
  .proposal-row { align-items: stretch; flex-direction: column; gap: var(--bona-space-12); }
  .command-bar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .signed-in-shell > .os-stage { padding-inline: var(--bona-space-12); }
  .workspace-header h1,
  .today-header h1,
  .communication-header h1,
  .time-header h1,
  .task-workspace-header h1,
  .document-workspace-header h1,
  .matter-workspace-header h1,
  .client-directory-header h1,
  .client-workspace-header h1 { font-size: 29px; }
  .os-primary-navigation > a,
  .os-primary-navigation > button,
  .os-mobile-navigation-more > summary { font-size: 10px; }
  .time-summary,
  .task-summary-band { grid-template-columns: minmax(0, 1fr); }
}