/* Mobile First – Lumen design concept "05 Mobile First" (studied in the Lumen reference, 2026-10-22) for phones and
   tablets (< 1024 px): touch sizes (controls 48 px, body 16 px), compact top bar with the page title, bottom tab bar
   with four main destinations + "More" (bottom sheet), floating action button for the page's main action, swipeable
   key figures and chip rows. Desktop (≥ 1024 px) keeps the sidebar layout. Tokens only (tokens.css). */

.mtop-title, .search-btn, .btabs { display: none; }

@media (max-width: 1023px) {
  :root {
    --d-ctl-h: 44px; --d-gap: var(--space-4);
    --d-radius-card: var(--radius-xl); --d-radius-ctl: var(--radius-lg);
    --d-top-h: 56px; --d-bottom-h: 68px;
  }
  body { -webkit-tap-highlight-color: transparent; }
  .table td .mono, .table td.mono { white-space: nowrap; }

  /* top bar: page title left, icon buttons right (44 px), translucent */
  .shell.has-tabs .menu-btn { display: none !important; }
  .topbar { position: sticky; top: 0; z-index: 40; height: var(--d-top-h); gap: 2px; padding: 0 var(--space-2) 0 var(--space-4);
    background: color-mix(in srgb, var(--color-background) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-divider); }
  .mtop-title { display: block; flex: 1 1 0%; min-width: 0; font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); }
  .topbar .search, .topbar .spacer, .topbar .help-btn, .topbar .support-btn, .topbar .theme-btn, .topbar .user-btn-text { display: none; }
  .topbar .search-btn { display: inline-flex; }
  .topbar .btn.icon, .topbar .user-btn { min-width: 44px; height: 44px; }
  .topbar .user-btn { padding: 0 4px; }
  .topbar .user-btn > .ic:last-child { display: none; }
  .topbar.search-open .search { display: block; position: absolute; inset: 6px 8px; max-width: none; z-index: 3; }
  .topbar.search-open .search input { height: 44px; border-radius: var(--radius-full); }

  /* content: room for the tab bar and the floating button */
  .content { padding: var(--space-3) var(--space-4) var(--space-6); }
  .shell.has-tabs .content { padding-bottom: calc(var(--d-bottom-h) + 88px + env(safe-area-inset-bottom)); }
  .page-head { margin-bottom: var(--space-4); }
  .page-head h1 { font-size: var(--font-size-2xl); line-height: 1.2; }
  /* the title is in the top bar already: the page-head h1 stays for screen readers only */
  .page-head.same-title h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .page-head.same-title .titles:not(:has(.sub, .crumbs)) { display: none; }
  .page-head.same-title:not(:has(.sub, .crumbs)) { margin-bottom: var(--space-3); }

  /* intro box: one line + "More" (expanded state remembered per page) */
  .intro-box { padding: var(--space-3); margin-bottom: var(--space-4); }
  .intro-box .intro-more { display: inline-flex; flex: none; align-self: center; padding: 0 var(--space-1); }
  .intro-box.collapsed { align-items: center; }
  .intro-box.collapsed .intro-ic { width: 28px; height: 28px; }
  .intro-box.collapsed .intro-body { min-width: 0; }
  .intro-box.collapsed .intro-body > :not(:first-child) { display: none; }
  .intro-box.collapsed .intro-body > :first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .intro-box .intro-close { align-self: center; }

  /* list toolbar: search + one "Filters" / "…" button; the rest is in the options sheet */
  .report .toolbar { flex-wrap: nowrap; }
  .report .toolbar > :not(.search-input):not(.tb-more):not(.tb-total):not(.tb-mode):not(.tb-export) { display: none; }
  .report .toolbar .tb-total { order: -1; flex-basis: 100%; }
  .report .toolbar .search-input { flex: 1 1 auto; min-width: 0; max-width: none; }
  .report .toolbar .tb-more { display: inline-flex; flex: none; margin-left: auto; }
  .tb-count { min-width: 20px; justify-content: center; }
  .bsheet-bg { z-index: 55; }                                   /* below modals (60) and menus (70) opened from the sheet */
  .bsheet-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
  .bsheet-head h2 { flex: 1; font-size: var(--font-size-lg); }
  .bsheet-body { display: grid; gap: var(--space-4); }
  .bsheet-sec, .bsheet-sec .tb-box, .bsheet-actions { display: grid; gap: var(--space-2); }
  .bsheet-sec .msheet-title { margin: 0; }
  .bsheet-sec .input, .bsheet-sec .date-range, .bsheet-actions .btn, .bsheet-body > .btn { width: 100%; max-width: none; min-width: 0; }
  .bsheet-actions .btn { justify-content: flex-start; }

  /* bottom tab bar */
  .shell.has-tabs .btabs { display: grid; }
  .btabs { grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: calc(var(--d-bottom-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--color-border); }
  .btabs a, .btabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
    border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.1;
    text-decoration: none !important; cursor: pointer; }
  .btab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .btab-pill { position: relative; display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--radius-full); transition: background .15s ease; }
  .btab-pill .ic { width: 24px; height: 24px; }
  .btabs [aria-current="page"] { color: var(--color-primary-text); }
  .btabs [aria-current="page"] .btab-pill { background: var(--color-primary-subtle); }
  .btabs a:active .btab-pill, .btabs button:active .btab-pill { background: var(--color-surface-secondary); }
  .btab-badge { position: absolute; left: calc(50% + 6px); top: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
  .btab-dot { position: absolute; top: 2px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); }

  /* floating action button: the first main (primary) action of the page head */
  .shell.has-tabs .page-head .actions > .btn.primary:not(.btn.primary ~ .btn.primary) {
    position: fixed; right: var(--space-4); bottom: calc(var(--d-bottom-h) + var(--space-4) + env(safe-area-inset-bottom)); z-index: 44;
    height: 56px; padding: 0 var(--space-5); border-radius: 18px; box-shadow: var(--shadow-3); font-size: 16px; }
  .shell.has-tabs .page-head .actions > .btn.primary:not(.btn.primary ~ .btn.primary):active { transform: scale(.96); }

  /* touch sizes: every control at least 44–48 px */
  .btn { min-height: var(--d-ctl-h); }
  .btn.sm { height: 44px; min-height: 44px; font-size: var(--font-size-md); }
  .btn.icon { min-width: 44px; }
  .input, select.input { min-height: var(--d-ctl-h); font-size: 16px; }            /* 16 px: no zoom on iOS */
  .seg-ctl button { min-height: 44px; }
  .menu button, .menu a { min-height: 44px; }
  a.link-btn, button.link-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .card { border-radius: var(--d-radius-card); }
  .dp-btn { width: 44px; height: 44px; right: 2px; }                       /* calendar button in date fields */
  .mx-cell { height: 40px; }                                                /* progress matrix */
  .color-row button { width: 40px; height: 40px; }                          /* colour swatches */

  /* key figures: swipeable row (carousel) instead of a tall grid */
  .kpi-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-3); padding-bottom: var(--space-1);
    margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); scrollbar-width: none; }
  .kpi-row::-webkit-scrollbar { display: none; }
  .kpi-row > * { flex: 0 0 min(72%, 260px); scroll-snap-align: start; }

  /* filter chips / segmented controls: one swipeable row */
  .seg-ctl { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg-ctl::-webkit-scrollbar { display: none; }
  .seg-ctl button { flex: none; white-space: nowrap; }

  /* toasts above the tab bar */
  .shell.has-tabs ~ .toasts, .toasts { bottom: calc(var(--d-bottom-h) + var(--space-3) + env(safe-area-inset-bottom)); }

  /* "More": bottom sheet with a 3-column grid */
  .msheet-bg { position: fixed; inset: 0; z-index: 80; background: var(--color-overlay); animation: msheet-fade .15s ease; }
  .msheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; background: var(--color-surface-raised);
    border-radius: 24px 24px 0 0; box-shadow: var(--shadow-3); padding: 0 var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    animation: msheet-up .22s ease-out; }
  .msheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--color-border-strong); margin: var(--space-2) auto var(--space-4); }
  .msheet-area { margin-bottom: var(--space-3); }
  .msheet-area .area-switch, .msheet-area .area-current { width: 100%; }
  .msheet-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-2); }
  .msheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .msheet-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: var(--space-3) var(--space-1);
    border: 0; border-radius: var(--radius-lg); background: var(--color-surface-secondary); color: var(--color-text); font: inherit;
    font-size: var(--font-size-sm); font-weight: 500; text-align: center; line-height: 1.2; cursor: pointer; }
  .msheet-tile.active { background: var(--color-primary-subtle); color: var(--color-primary-text); }
  .msheet-ic { position: relative; color: var(--color-primary); }
  .msheet-ic .ic { width: 24px; height: 24px; }
  .msheet-ic .btab-badge { left: calc(50% + 4px); top: -6px; }
}
/* phones: the full touch density of the concept (16 px text, 48 px controls, 64 px rows) */
@media (max-width: 640px) {
  :root { --d-font-body: 16px; --d-row-h: 64px; --d-ctl-h: 48px; }
  body { font-size: 16px; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .msheet, .msheet-bg { animation: none; } }
@media (min-width: 1024px) { .msheet-bg { display: none; } }
@keyframes msheet-up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes msheet-fade { from { opacity: 0; } to { opacity: 1; } }

/* Lists as touch cards (Lumen Mobile First): the first column is the card title, the other values in two columns
   ("label" over "value"), actions at the bottom right. Phones: one card per row, tablets: two. */
@media (max-width: 1023px) {
  .report .table, .report .table tbody { display: block; }
  .report .table thead { display: none; }
  .report .table tbody { display: grid; gap: var(--space-3); padding: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report .table tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3);
    padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--d-radius-card); background: var(--color-surface); box-shadow: var(--shadow-1); }
  .report .table tr:active { background: var(--color-surface-secondary); }
  .report .table td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; border: 0; padding: 0; white-space: normal; text-align: left; }
  .report .table td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 600; }
  .report .table td[data-label=""]::before { content: none; }
  /* card title: the first data column */
  .report .table tr > td:first-child:not(.sel-col), .report .table tr > td.sel-col + td { grid-column: 1 / -1; font-size: var(--font-size-md); font-weight: 600; padding-right: 40px; }
  .report .table tr > td:first-child:not(.sel-col)::before, .report .table tr > td.sel-col + td::before { content: none; }
  /* actions at the bottom, full width */
  .report .table tr > td[data-label=""]:last-child { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2);
    border-top: 1px solid var(--color-divider); padding-top: var(--space-3); margin-top: var(--space-1); }
  .report .table tr > td[data-label=""]:last-child:empty { display: none; }
  .report .table td.sel-col { position: absolute; top: var(--space-3); right: var(--space-3); }
  .report .table td.sel-col::before { content: none; }
  .report .table td.num { text-align: left; }
}
@media (max-width: 640px) {
  .report .table tbody { grid-template-columns: 1fr; padding: var(--space-3) 0; }
  .report .card-body:has(> .table), .report .table-wrap { padding-inline: 0; }
}
@media (max-width: 1023px) {
  .report .toolbar { flex-wrap: wrap; }
  .report .toolbar .search-input { flex: 1 1 140px; min-width: 140px; }
}