/* WCG Admin — phone & tablet layout (2026-09-11).
 * Loaded last. Desktop (> 900px) is untouched: every rule below sits inside a
 * media query, and the new controls (hamburger, bottom tabs, search button)
 * are hidden on desktop.
 * Baseline device: Galaxy Z Flip5 (the narrowest phone in use, ~338px CSS
 * wide). If it fits there it fits anything. Practices followed: 44px touch
 * targets, 16px form text (no zoom-on-focus), safe-area insets for installed
 * mode, no sideways page scroll (wide tables scroll inside their panel),
 * off-canvas menu + bottom tab bar for the thumb, full-screen sheets for
 * modals and drawers.
 */

/* Hidden on desktop */
.hamburger, .bottomnav, .nav-scrim, .topbar .m-search, .cmdk-close { display: none; }

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  img, video, svg, canvas { max-width: 100%; }
  body { -webkit-tap-highlight-color: rgba(235, 78, 45, 0.15); }

  /* ── Shell: no side column; menu slides in from the left ── */
  .app { display: block; min-height: 100dvh; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh;
    width: min(84vw, 300px); z-index: 70;
    transform: translateX(-105%); transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: 16px 0 40px rgba(0, 0, 0, 0.18);
    padding: calc(12px + env(safe-area-inset-top)) 10px calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  body.nav-open .sidebar { transform: none; }
  .nav-scrim { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.45); z-index: 69; }
  body.nav-open .nav-scrim { display: block; }
  body.nav-open { overflow: hidden; }
  .navitem { min-height: 44px; font-size: 14px; padding: 10px 12px; }
  .sidebar .group { font-size: 11px; margin-top: 14px; }

  /* ── Top bar: menu · page title · search · avatar ── */
  .topbar {
    height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 4px;
    gap: 6px; z-index: 30;
  }
  .topbar .hamburger, .topbar .m-search {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; background: transparent; font-size: 22px; color: var(--wf-ink);
    border-radius: 8px; flex: none;
  }
  .topbar .hamburger:active, .topbar .m-search:active { background: var(--wf-bg); }
  .topbar .crumb { flex: 1; min-width: 0; }
  .topbar .crumb > span { display: none; }
  .topbar .crumb b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .search, .topbar .role-pill, .topbar .actions .iconbtn { display: none; }
  .topbar .actions { gap: 4px; margin-left: 0; }
  body[data-role="sales"] .topbar .m-search { display: none; }

  /* ── Bottom tab bar ── */
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--wf-panel); border-top: 1px solid var(--wf-line);
  }
  body[data-role="preauth"] .bottomnav { display: none; }
  .bottomnav a {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--wf-ink-3); position: relative;
  }
  .bottomnav a .ico { font-size: 19px; line-height: 1; }
  .bottomnav a .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bottomnav a.active { color: var(--wf-accent); }
  .bottomnav a .badge {
    position: absolute; top: 5px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--wf-accent); color: #fff; font-size: 10px; line-height: 16px; text-align: center;
  }

  /* Things that sat at the bottom now sit above the tab bar */
  .main { padding: 14px 12px calc(96px + env(safe-area-inset-bottom)); overflow-x: hidden; min-width: 0; }
  /* "body #id" outranks the banner's own <style> block, which comes later in
     the page — without it the banner sat on top of the tab bar. */
  body #wcg-demo-banner { bottom: calc(58px + env(safe-area-inset-bottom)); font-size: 11px; line-height: 1.35; padding: 6px 10px; gap: 8px; }
  body #wcg-demo-banner button { width: 36px; height: 36px; }
  body.nav-open #wcg-demo-banner { display: none !important; }
  .navitem .mono { display: none; }   /* "⌘K" hint means nothing on a phone */
  #wcg-live-err { left: 0 !important; top: calc(52px + env(safe-area-inset-top)) !important; }
  .cop-fab { bottom: calc(70px + env(safe-area-inset-bottom)); right: 12px; height: 48px; padding: 0 14px; }
  .cop-fab-label { display: none; }
  .wf-toast-wrap { bottom: calc(78px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .wf-toast { max-width: 100%; }

  /* ── Page content ── */
  .pagehead { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 0; }
  .pagehead h1 { font-size: 32px; overflow-wrap: anywhere; }
  .pagehead .tools { flex-wrap: wrap; }
  .grid { gap: 10px; }
  .g-2 { grid-template-columns: minmax(0, 1fr); }
  .g-3, .g-4, .g-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-2, .col-3 { grid-column: auto; }
  .panel, .kpi { min-width: 0; }
  .panel-h { flex-wrap: wrap; gap: 6px; }
  /* Wide tables scroll inside their panel, never the page. */
  .panel-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 560px; }
  .tbl td, .tbl th { padding: 10px; }
  .filterbar .input { min-width: 0; flex: 1 1 100%; }

  /* Touch targets and form text */
  .btn { min-height: 40px; }
  .btn.sm { min-height: 34px; padding: 0 10px; }
  .chip { padding: 7px 12px; font-size: 12px; }
  input, select, textarea { font-size: 16px !important; }

  /* ── Modals and drawers become full-screen sheets ── */
  .wf-mask { padding: 0; align-items: stretch; }
  .wf-modal, .wf-modal.lg {
    width: 100%; min-height: 100dvh; border-radius: 0; border: 0;
    display: flex; flex-direction: column; animation: none;
  }
  .wf-mh { position: sticky; top: 0; z-index: 2; background: var(--wf-panel); padding-top: calc(12px + env(safe-area-inset-top)); }
  .wf-mx { width: 44px; height: 44px; font-size: 18px; }
  .wf-mb { flex: 1; overflow-y: auto; }
  .wf-mf {
    position: sticky; bottom: 0; background: var(--wf-panel); flex-wrap: wrap;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .wf-row { grid-template-columns: minmax(0, 1fr); }
  .wf-drawer { width: 100%; }
  .wf-drawer .wf-mh { padding-top: calc(12px + env(safe-area-inset-top)); }
  .drawer { width: 100%; }
  .wf-menu { max-width: calc(100vw - 16px); }
  .cop { width: 100%; height: 100dvh; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .cmdk-mask { padding-top: 0; align-items: stretch; }
  .cmdk { width: 100%; height: 100dvh; border-radius: 0; padding-top: env(safe-area-inset-top); }
  .cmdk .kbd { display: none; }
  .cmdk-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; font-size: 18px; color: var(--wf-ink-2); }
  #cmdk-results { max-height: none !important; }

  /* ── Settings (P1, 2026-09-12): one column; the tab list becomes a native
     <select> above the content — no sideways scroll, no second code path. ── */
  .settings-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .settings-grid > div:first-child { display: none; }
  .settings-grid [data-settings-select] { display: block !important; }
}

/* ── Phones ── */
@media (max-width: 600px) {
  .kpi { padding: 12px; }
  .kpi .v { font-size: 28px; overflow-wrap: anywhere; }
  .pagehead h1 { font-size: 28px; }
  /* Page templates set some grids inline (drawer stat boxes, forms, boards).
     On a phone those collapse to one column. */
  .main [style*="grid-template-columns"], .wf-mb [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* …except the KPI rows, which read fine two-up. */
  .main .grid.g-3[style*="grid-template-columns"], .main .grid.g-4[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Header rows and plain flex rows wrap on a phone instead of running off the
     edge (Launch HQ filter chips, commission tiers, integration buttons). */
  .panel-h, .panel-h > div, .main .row { flex-wrap: wrap; }
  .panel-h { gap: 8px; }
  /* Wide tables become one card per row (labels from index.html cardifyTables). */
  .tbl.m-cards { min-width: 0; }
  .tbl.m-cards thead { display: none; }
  .tbl.m-cards, .tbl.m-cards tbody, .tbl.m-cards tfoot, .tbl.m-cards tr { display: block; width: 100%; }
  .tbl.m-cards tbody tr { padding: 10px 12px; border-bottom: 8px solid var(--wf-bg); }
  .tbl.m-cards tbody tr:hover td { background: transparent; }
  .tbl.m-cards td {
    display: grid; grid-template-columns: minmax(84px, 36%) minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 5px 0; border: 0; text-align: left !important; overflow-wrap: anywhere; white-space: normal;
  }
  .tbl.m-cards td::before {
    content: attr(data-label); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--wf-ink-3); padding-top: 3px; font-family: "Montserrat", system-ui, sans-serif;
  }
  .tbl.m-cards td { background: transparent !important; }
  .tbl.m-cards td[data-label] > * { grid-column: 2; }   /* a cell's second line stays in the value column */
  /* Leads: the card keeps what you act on in the field; the rest is in the lead drawer. */
  table[data-table="leads"].m-cards td[data-label="Source"],
  table[data-table="leads"].m-cards td[data-label="Score"],
  table[data-table="leads"].m-cards td[data-label="Last"] { display: none; }
  .tbl.m-cards td:not([data-label])::before, .tbl.m-cards td[data-label=""]::before { content: none; }
  .tbl.m-cards td:not([data-label]), .tbl.m-cards td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .tbl.m-cards tfoot td { display: block; padding: 14px 12px; }
}