/* ============================================================
   responsive.css — the breakpoints the application did not have.

   Desktop is the primary target. Below that the goal is to keep
   accounting tables *usable*, not to force them into cards: wide
   financial tables scroll horizontally inside their container,
   which is the correct behaviour for ledger data.
   ============================================================ */

/* ---------- laptop: tighten the shell ---------- */
@media (max-width: 1280px) {
  :root { --sidebar-w: 212px; }
  #main { padding: var(--space-lg) var(--space-lg) var(--space-3xl); }
}

/* ---------- small laptop / large tablet ---------- */
@media (max-width: 1100px) {
  :root {
    --text-page-title: 22px;
    --sidebar-w: 196px;
  }
  .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .section { padding: var(--space-lg); }

  /* Below full desktop width, any card containing a table wider than the
     column becomes its own horizontal scroll container. Accounting tables
     keep every column; the page body never scrolls sideways. */
  .section { overflow-x: auto; }
}

/* ---------- tablet: sidebar becomes a drawer ---------- */
@media (max-width: 900px) {
  #side {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 80;
    width: min(280px, 84vw);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  /* .nav-open is toggled on #app by the shell (Phase 3) */
  #app.nav-open #side { transform: translateX(0); }
  #app.nav-open::before {
    content: '';
    position: fixed; inset: 0; z-index: 79;
    background: rgba(16, 24, 40, .4);
  }
  /* a collapsed desktop sidebar has no meaning here */
  #app.side-collapsed #side { width: min(280px, 84vw); padding-inline: var(--space-sm); }
  #app.side-collapsed .nav a span.label,
  #app.side-collapsed .nav .grouplabel,
  #app.side-collapsed #side h2 span { display: revert; }
  #app.side-collapsed .nav a { justify-content: flex-start; padding-inline: var(--space-md); }

  #main { padding: var(--space-md) var(--space-lg) var(--space-2xl); }

  .topbar { gap: var(--space-sm); }
  .topbar h1 { font-size: 20px; width: 100%; order: -1; }

  /* menu button lives in the top bar; hidden on desktop */
  .nav-toggle { display: inline-flex !important; }

  .drawer, .drawer.wide { width: 100vw; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  :root {
    --text-page-title: 20px;
    --space-xl: 16px;
  }
  #main { padding: var(--space-md) var(--space-md) var(--space-2xl); }

  .section { padding: var(--space-md); border-radius: var(--radius-md); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-sm); }
  .stat { padding: var(--space-md); }
  .stat .v { font-size: 21px; }

  /* stack form rows */
  .row { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .row .field { flex: 1 1 auto; width: 100%; }
  .row > .btn { width: 100%; }

  .searchbox { max-width: none; width: 100%; min-width: 0; }

  /* company picker must stay reachable */
  .company-pick { width: 100%; }
  .company-pick select { max-width: none; flex: 1 1 140px; min-width: 0; }
  .company-pick #whoami { flex: 1 1 100%; }

  /* the top bar's own controls wrap onto their own line rather than
     pushing the page wider than the viewport */
  .topbar { flex-wrap: wrap; }
  #globalSearch { flex: 1 1 100% !important; max-width: none !important; margin: 0 !important; }

  /* Tables keep their columns and scroll — do not destroy ledger layout by
     collapsing accounting columns into cards. Most screens already wrap their
     table in an overflow-x container; for those that do not, the card itself
     becomes the scroll container so the page body never scrolls sideways. */
  .table-wrap { max-height: none; }
  table { font-size: var(--text-xs); }
  th, td { padding: var(--space-sm); }

  .tabbar { overflow-x: auto; flex-wrap: nowrap; }
  .tabbar button { white-space: nowrap; }

  .toast-stack { left: var(--space-md); right: var(--space-md); max-width: none; }

  .modal { max-width: none; }
  .modal-body, .modal-head, .modal-foot { padding-inline: var(--space-lg); }

  /* Tally reports: the two-column P&L stacks rather than crushing */
  .tally .cols { flex-direction: column; }
  .tally .side.left { border-right: none; border-bottom: 2px solid var(--tally-line); }
  .trow .amt, .trow .amt2 { min-width: 88px; }
}

/* ---------- the nav toggle is desktop-hidden by default ---------- */
.nav-toggle { display: none; }

/* ---------- very wide: keep line lengths sane ---------- */
@media (min-width: 1800px) {
  #main { margin-inline: auto; }
}