/* Viewport-scoped tablet and mobile styles. */
/* Phone layout polish: keep desktop dense, make mobile usable */
@media (max-width: 640px) {
  html,
  body {
    width: 100%;
    height: auto;
    min-height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    font-size: 13px;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-x pan-y;
  }

  body.modal-open {
    overflow: hidden;
  }

  .shell,
  .shell-topnav {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .shell-topnav {
    display: block;
  }

  .main,
  .shell-topnav .main {
    display: block;
    height: auto;
    min-height: 0;
    min-width: 0;
    overflow: visible;
  }

  /* One flex row: brand, menu, user. This was a two-column grid with the menu
     spanning both on a second row, which is a second row of navigation by
     construction whatever the menu itself does. */
  .primary-nav {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
  }

  .topnav-brand {
    min-width: 0;
    gap: 7px;
  }

  .topnav-logo {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .topnav-user {
    justify-self: end;
    min-width: 0;
  }

  .topnav-avatar,
  .topnav-user-copy {
    display: none;
  }

  .topnav-logout {
    min-height: 34px;
    padding: 7px 10px;
  }

  /* Flow is decided once, in pcm.css: nowrap, with App.fitNav moving the
     remainder into the overflow group. Nothing here may reintroduce wrapping
     or a hidden scroller - see section 8 for what both cost. */
  .topnav-menu {
    justify-content: flex-end;
    gap: 6px;
  }

  .topnav-group {
    flex: 0 0 auto;
  }

  .topnav-trigger {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
  }

  .topnav-group:hover .topnav-dropdown,
  .topnav-group:focus-within .topnav-dropdown {
    display: none;
  }

  .shell-topnav .topbar,
  .topbar {
    position: static;
    top: auto;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 9px 10px;
    gap: 8px;
  }

  #topbar-title {
    min-width: 0;
  }

  .topbar-left {
    width: 100%;
    max-width: 100%;
  }

  .page-title {
    font-size: 16px;
    line-height: 1.2;
  }

  .topbar-right,
  .topbar-actions {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .scope-select,
  .topbar-right .select,
  .topbar-right .btn,
  .topbar-actions .btn {
    min-height: 38px;
  }

  .shell-topnav .content,
  .content {
    flex: none;
    min-height: auto;
    padding: 10px;
    /* `clip`, not `hidden`. Both crop sideways overflow identically, but
       `hidden` makes the box a SCROLL CONTAINER - and per spec, `hidden` on
       one axis forces `visible` on the other to compute as `auto`, so the
       `overflow: visible` above was silently undone. See the block below for
       what that cost. */
    overflow: clip;
    overscroll-behavior: auto;
  }

  /*
   * THE ROW-COUNT STRIP HAD TO STOP SCROLLING OFF THE SCREEN.
   *
   * Owner, 2026-08-08, on the website opened in a phone browser. The rule from
   * 2026-07-24 is that the row counts, the Columns button and the pager must
   * never scroll out of sight; `.table-meta` is `position: sticky; bottom: 0`
   * to enforce it. On a phone it never engaged - measured off-screen at every
   * scroll position, the strip's natural place 3544px down a 915px screen.
   *
   * Sticky anchors to the nearest ancestor that is a scroll container. On a
   * phone the page itself scrolls (html), but THREE boxes in between were
   * scroll containers that never scrolled: `.content` and `body`/`#app`, the
   * last two carrying the desktop app-shell's `height: 100%; overflow: hidden`
   * into a layout where the shell no longer holds the scrollbar. The strip
   * dutifully pinned to the bottom of a 3464px box that never moved - a
   * permanent no-op that looked exactly like a broken sticky.
   *
   * Fixing only `.content` is not enough; it just hands the anchor to the next
   * dead container up the chain. Measured that way first, which is how the
   * other two were found.
   *
   * `body.modal-open { overflow: hidden }` is left alone deliberately - at
   * (0,1,1) it outranks the bare `body` here, so the modal scroll lock keeps
   * the behaviour it was written for.
   */
  body,
  #app {
    overflow: clip;
  }

  .section-head,
  .card-head,
  /* A wrapping ROW, not a column. A column gives every child its own line,
     which is right for a date box and wrong for "Clear filters", "Export CSV"
     and "Export Excel" - three secondary actions that were taking three full
     rows each 44px tall. Fields still claim a whole row (flex-basis 100%
     below); buttons size to their text and share one. */
  .filter-bar,
  .import-toolbar,
  .ledger-actions,
  .toolbar,
  .bulk-actions {
    flex-flow: row wrap;
    align-items: stretch;
  }

  .filter-bar,
  .topbar-actions {
    overflow: visible;
  }

  .search-box,
  .filter-bar .search-box,
  .filter-bar .input,
  .filter-bar .select {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  /* 0 0 auto, not 1 1 auto: a button must be as wide as its own label. Letting
     them shrink packed three onto one row and clipped "Export Website CSV" to
     "Export Website CS". They keep their width; the row wraps instead. */
  .filter-bar .btn {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .field-grid,
  .field-grid-2,
  .field-grid-3,
  .field-grid-4,
  .kpi-grid,
  .section-hub-grid,
  .dashboard-v2 .dashboard-hero,
  .dashboard-v2 .dashboard-layout,
  .dashboard-v2 .dash-metric-grid,
  .dashboard-v2 .dash-focus-grid,
  .dashboard-v2 .dash-command-stat-grid,
  .dashboard-v2 .dash-board-grid,
  .driver-hisab-workspace,
  .driver-hisab-form-grid.field-grid-3,
  .ledger-audit-panel {
    grid-template-columns: 1fr;
  }

  .field.col-2,
  .field.col-3 {
    grid-column: span 1;
  }

  .card,
  .section-hub-head,
  .section-hub-card,
  .kpi,
  .dashboard-v2 .dash-panel,
  .dashboard-v2 .dash-card {
    border-radius: 8px;
  }

  .table-card,
  .table-wrap,
  .table-scroll,
  .data-table-wrap,
  .ledger-table-wrap,
  .import-preview,
  .lr-preview-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  table,
  .data-table,
  .table-card table {
    min-width: 720px;
  }

  .row-actions {
    gap: 5px;
    justify-content: flex-start;
  }

  .btn,
  button,
  .input,
  .select,
  .textarea {
    min-height: 40px;
  }

  .input,
  .select,
  .textarea,
  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px;
  }

  .modal-bg {
    align-items: stretch;
    padding: 0;
  }

  .modal,
  .modal-md,
  .modal-lg {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: 0;
  }

  .modal-head {
    padding: 12px 14px;
  }

  .modal-title {
    font-size: 15px;
  }

  .modal-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
  }

  .modal-foot {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px 12px;
  }

  .modal-foot .btn {
    width: 100%;
    justify-content: center;
  }

  .lr-form-hero {
    align-items: flex-start;
    gap: 8px;
  }

  .lr-form-number {
    font-size: 18px;
  }

  .lr-goods-editor-top,
  .lr-goods-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .lr-goods-line {
    grid-template-columns: 1fr 1fr;
  }

  .lr-preview-wrap .lr-print-sheet {
    min-width: 760px;
    transform-origin: top left;
  }

  .toast {
    right: 10px;
    bottom: 10px;
    left: 10px;
    max-width: none;
  }
}

@media (max-width: 390px) {
  .topnav-trigger {
    padding-inline: 8px;
    font-size: 12px;
  }

  .shell-topnav .topbar,
  .topbar {
    top: auto;
  }

  .btn {
    padding-inline: 9px;
  }
}

/* --- 2. Laptops / landscape tablets (<=1366px) --- */
@media (max-width: 1366px) {
  .field-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 3. Tablets (<=1024px) --- */
@media (max-width: 1024px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar-right { flex-wrap: wrap; gap: 8px; }
  .field-grid-3, .field-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Side/main split layouts collapse to one column */
  .driver-hisab-side { position: static; }
  .dash-v5-hero { grid-template-columns: 1fr; }
  /* The nav menu is no longer a scroller - App.fitNav moves the remainder into
     the overflow group instead. The `overflow-x: auto` that used to live here
     also CLIPPED the dropdown panels, which are absolutely positioned children
     of this element (overflow-x: auto forces overflow-y to auto too), so on a
     tablet the section menus were cut off at the bar. */
  .topnav-group { flex: 0 0 auto; }
}

/* --- 4. Large phones / small tablets (<=768px) --- */
@media (max-width: 768px) {
  /* Topbar becomes a clean stacked header */
  .topbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .topbar-left { width: 100%; min-width: 0; gap: 10px; }
  /* Back button stays its own width; the title takes the rest and ellipsizes
     instead of collapsing to 0 and spilling its text off the right edge. */
  .topbar-left .topbar-back { flex: 0 0 auto; width: auto; align-self: center; }
  #topbar-title { flex: 1 1 auto; min-width: 0; }
  #topbar-title .page-title,
  #topbar-title .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right { width: 100%; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .scope-select { flex: 1 1 160px; }
  #topbar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  #topbar-actions > * { flex: 1 1 auto; }

  /* Filters take a full row each for easy thumb use; buttons share one. */
  .filter-bar { flex-flow: row wrap; align-items: stretch; gap: 8px; }
  .filter-bar > * { flex: 1 1 100%; width: 100%; }
  .filter-bar > .btn { flex: 0 0 auto; width: auto; }

  /* Toolbars of buttons scroll instead of overflowing */
  .table-meta, .table-pager { flex-wrap: wrap; gap: 6px; }

  /* Tables keep horizontal scroll with a comfortable min width */
  .data-table, .tracking-fast-table { min-width: 760px; }

  /* Generic form grids -> single column */
  .field-grid-2, .field-grid-3, .field-grid-4, .field-grid { grid-template-columns: 1fr; }
}

/* --- 5. Small phones (<=480px) --- */
@media (max-width: 480px) {
  .shell-topnav .content, .content { padding: 10px; }
  .card, .table-card, .kpi { border-radius: var(--radius); }
  .page-title h1, .page-title .title { font-size: 1.12rem; }
  .topnav-brand { gap: 6px; }
  .data-table, .tracking-fast-table { min-width: 640px; }
  /* Full-width primary actions in toolbars */
  /* The page's ONE dominant action spans the width, because that is the thing
     the screen is for. Everything beside it shares the next row rather than
     claiming its own. */
  #topbar-actions > .btn-primary { flex: 1 1 100%; }
  #topbar-actions > *:not(.btn-primary) { flex: 1 1 auto; }
  /* Slightly tighter KPI value so big numbers don't overflow */
  .kpi-value, .dash-v5-stat-copy b { font-size: 1.5rem; }
}

/* --- 6. Touch devices: bigger, finger-friendly tap targets --- */
@media (pointer: coarse) {
  .btn, .topnav-trigger, .topnav-link, .nav-item, .tab,
  .section-hub-card, .topnav-logout, .topnav-tool { min-height: 42px; }
  .btn-sm { min-height: 36px; }
  select, .select, .input,
  input[type="text"], input[type="number"], input[type="date"], input[type="month"],
  input[type="search"], input[type="password"], input[type="email"], input[type="tel"] { min-height: 42px; }
  /* But keep dense in-table editor inputs compact */
  .table-filter-input, .data-table td .input, .tracking-fast-table .input { min-height: 32px; }
  a, button { -webkit-tap-highlight-color: transparent; }
}

/* --- 7. Notched phones: respect the safe area --- */
@supports (padding: max(0px)) {
  .primary-nav {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .modal-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  @media (max-width: 768px) {
    .shell-topnav .content, .content {
      padding-left: max(10px, env(safe-area-inset-left));
      padding-right: max(10px, env(safe-area-inset-right));
    }
  }
}

/* --- 8. Landscape phones: shorter sticky header so content has room --- */
@media (max-width: 920px) and (orientation: landscape) {
  .shell-topnav { position: sticky; top: 0; z-index: 60; }
  .topnav-trigger { min-height: 34px; }
}

/* --- 9. Honour reduced-motion + reduced-data preferences --- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}

/* --- 8. Mobile navigation — every section reachable ---
   HISTORY, because it matters. The menu was once a no-wrap horizontal
   scroller with `scrollbar-width: none`, which hid Ledgers, Masters, Reports,
   Tools and Admin behind an edge with no cue that anything was there: people
   concluded the menu ended at Driver. The answer then was to wrap the triggers
   into chips so all of them were visible - correct about the requirement, but
   it cost three rows and 185px of navigation above every phone screen.

   Since 2026-08-06 App.fitNav moves whatever does not fit into the overflow
   group, which on a phone is the entire menu, under a trigger that reads
   "Menu". Every section is still reachable - that requirement has not moved -
   and the bar is one row high. Do NOT reintroduce flex-wrap here. */
@media (max-width: 768px) {
  .topnav-group { flex: 0 0 auto; }
  .topnav-trigger {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--sc-shadow-xs);
  }
  .topnav-group.active .topnav-trigger,
  .topnav-group:focus-within .topnav-trigger {
    background: var(--accent-soft);
    border-color: var(--accent);
    /* Not #fff on var(--accent): --accent is teal-400 in the dark theme, and
       white on it measures 1.86:1. Same trap as the primary button. */
    color: var(--accent);
  }
}

/* --- 9. Mobile data tables — one coherent strategy: horizontal scroll ---
   app.css (max-width:760px) tried to restack every table into label/value
   cards using `td::before { content: attr(data-label) }`, but the row cells
   never carried a data-label AND responsive.css simultaneously forces the
   table to min-width:760px. The two collided: the table rendered as blocks
   760px wide inside a ~366px viewport, so every value sat off-screen to the
   right and only bare labels showed — the table looked empty.

   The app's own design intent (see app.css LR comment) is a horizontally
   scrollable, Excel-like table where all columns stay reachable. Restore
   exactly that on phones: a real table, header visible, swipe sideways. --- */
@media (max-width: 768px) {
  .data-table { display: table; }
  .data-table thead { display: table-header-group; }
  .data-table tbody { display: table-row-group; }
  .data-table tr { display: table-row; padding: 0; }
  .data-table th,
  .data-table td { display: table-cell; width: auto; text-align: left; }
  .data-table td { padding: 8px 12px; }
  .data-table td::before { content: none; }
  /* Numeric columns keep their right alignment via the app's own classes. */

  /* Clear horizontal-scroll affordance on the table viewport. */
  .table-scroll {
    border-radius: var(--sc-radius);
    box-shadow: inset -14px 0 12px -12px rgba(15, 23, 42, .18);
  }
}

/* --- 10. Login — fill the viewport on mobile ---
   app.css later overrides `.login-page` from min-height:100vh to
   `height:100%; min-height:0`, so when #app isn't full height the brand
   backdrop collapsed to the card's height on phones — leaving the card
   top-stuck with a blank strip below. Restore the viewport floor (dvh so
   the mobile browser chrome is accounted for) so the gradient fills the
   screen and the card centres. --- */
.login-page {
  min-height: 100dvh;
}