/* Mobile layout — hamburger nav + table handling for ≤768px viewports.
   Loaded by all pages; desktop layout untouched. */

/* ── hamburger button (hidden on desktop) ──────────────────────── */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  padding: 10px;
  color: var(--text-dim);
  -webkit-tap-highlight-color: transparent;
}
.hamburger svg { width: 24px; height: 24px; stroke-width: 1.8; }

@media (max-width: 768px) {
  /* ── shell: single-column, no rail in flow ───────────────── */
  .app {
    grid-template-columns: 1fr !important;
  }

  /* ── hamburger visible ───────────────────────────────────── */
  .hamburger { display: flex; align-items: center; justify-content: center; }

  /* ── rail: off-canvas overlay ────────────────────────────── */
  .rail {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 272px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .22s ease;
    border-right: 1px solid var(--hairline);
    background: var(--bg);
    flex-direction: column !important;
    overflow-y: auto;
    padding: 22px 16px !important;
    gap: 26px !important;
  }
  .rail.open { transform: translateX(0); }

  /* ── backdrop ────────────────────────────────────────────── */
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0,0,0,.5);
    -webkit-tap-highlight-color: transparent;
  }
  .nav-backdrop.open { display: block; }

  /* nav items: ensure tap targets */
  .rail nav a {
    flex-direction: row !important;
    min-height: 44px;
    padding: 10px 12px !important;
  }
  .rail nav a span.t { display: inline !important; }
  .nav-label { display: block !important; }

  /* ── topbar: tighter on mobile ───────────────────────────── */
  .topbar {
    padding: 12px 16px !important;
    gap: 10px !important;
    flex-wrap: wrap;
  }
  .topbar h1 { font-size: 17px !important; }

  /* ── summary strips: wrap ────────────────────────────────── */
  .summary, .hero .totals {
    flex-wrap: wrap !important;
    gap: 14px 24px !important;
    padding: 18px 16px !important;
  }

  /* ── hero: tighter ───────────────────────────────────────── */
  .hero { padding: 20px 16px 16px !important; }
  .hero .fig { font-size: 34px !important; }

  /* ── report section padding ──────────────────────────────── */
  .report { padding: 16px !important; }

  /* ── tables: horizontal scroll with sticky first col ─────── */
  .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .tbl-wrap table { min-width: 540px; }
  .tbl-wrap th:first-child,
  .tbl-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
  }
  .tbl-wrap tr:hover td:first-child {
    background: var(--surface-2);
  }

  /* ── lines table in AP detail ────────────────────────────── */
  .lines { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lines table { min-width: 440px; }

  /* ── report head: stack controls below title ─────────────── */
  .report-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* ── controls: full-width search ─────────────────────────── */
  .controls { width: 100%; }
  .ctl-search { width: 100% !important; }

  /* ── AP split panel: stack queue above detail ─────────────── */
  .work {
    grid-template-columns: 1fr !important;
  }
  .queue {
    border-right: none !important;
    border-bottom: 1px solid var(--hairline);
    max-height: 240px;
    overflow-y: auto;
  }
  .qitem { min-height: 44px; }

  /* ── tabs: scroll horizontally ───────────────────────────── */
  .tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px !important;
  }
  .tab { white-space: nowrap; min-height: 44px; }

  /* ── tenant profile two-column → single ──────────────────── */
  .profile-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── gates: tighter ──────────────────────────────────────── */
  .gate { padding: 12px !important; gap: 10px !important; flex-wrap: wrap; }
  .gate .st { margin-top: 4px; }

  /* ── approval chain: tighter ─────────────────────────────── */
  .step .who { font-size: 13px; }

  /* ── actions bar ─────────────────────────────────────────── */
  .actions { flex-wrap: wrap; }
  .actions .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; }

  /* ── brand picker: full-width ────────────────────────────── */
  .bldg-pick { font-size: 15px !important; }

  /* ── chips: tap-friendly ─────────────────────────────────── */
  .chip { min-height: 28px; padding: 4px 10px !important; }

  /* ── buttons: tap-friendly ───────────────────────────────── */
  .btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .rail { transition: none !important; }
}