/* NEO mobile presentation layer.
   ADDITIVE ONLY: every rule lives inside a max-width media query, so desktop
   and tablet (>768px) are completely unaffected. No markup/logic changes.
   Loaded after each page's inline <style> so equal-specificity mobile rules win.
   Targets iOS Safari + Android Chrome. Breakpoints: 768 (tablet boundary),
   430 (standard phones), 360 (small phones). */

/* ── Tablet boundary and down ─────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* R2: never scroll the whole page sideways. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* R5: 16px form fields so iOS Safari doesn't auto-zoom on focus. */
  input, select, textarea, .in, .search-input, #big-search, #cmdk-input { font-size: 16px !important; }

  /* R12: media scales fluidly, never overflows. */
  img, svg, video, canvas { max-width: 100%; }

  /* R13: momentum scrolling on every scroll surface. */
  body, .modal-box, .pv-wrap, .sidebar-body, .cmdk-results, .table-wrap,
  .panel, .container { -webkit-overflow-scrolling: touch; }

  /* R4: comfortable tap targets + spacing for interactive controls. */
  .btn, button, .back, .hnav, .hlogout, .side-nav-btn, .recon-btn,
  .tab, .cc-add, .cc-x, .switch { min-height: 44px; }
  .btn.sm { min-height: 38px; }                 /* dense in-row actions: still tappable */
  .acts, .right, .modal-foot { gap: 10px; flex-wrap: wrap; }

  /* R7: wide data tables scroll horizontally instead of overflowing the screen,
     keeping every column. The table becomes its own horizontal scroll box. */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody, table tr { white-space: nowrap; }
  .pv-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* R9: modals/overlays fit the viewport, scroll if tall, clear the keyboard. */
  .modal { align-items: flex-start; padding: 12px 10px;
           padding-top: max(12px, env(safe-area-inset-top)); }
  .modal-box { width: 100% !important; max-width: 100%; max-height: 90vh; padding: 18px 16px; }
  .cmdk { padding-top: max(8vh, env(safe-area-inset-top)); }
  .cmdk-box { width: 94vw; max-width: 94vw; }
  .grid2, .deliver { grid-template-columns: 1fr; }   /* stack form columns */

  /* R8 + R3: header wraps gracefully and clears the notch. */
  .header { flex-wrap: wrap; row-gap: 8px;
            padding-left: max(14px, env(safe-area-inset-left));
            padding-right: max(14px, env(safe-area-inset-right)); }
  .header-right { gap: 12px; flex-wrap: wrap; }

  /* R3: fixed sidebar drawer respects the notch / home indicator. */
  .sidebar-head { padding-top: max(16px, env(safe-area-inset-top)); }
  .sidebar-body { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

  /* R10: comfortable one-hand reading; avoid cramped condition rows. */
  .cond { grid-template-columns: 1fr; gap: 6px; }
  .cond .op { padding-top: 0; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ── Standard phones (~390–430px) ─────────────────────────────────────────── */
@media (max-width: 430px) {
  /* Trim header chrome so the essentials fit one row comfortably. */
  .huser { display: none; }                      /* username hidden; Sign out stays */
  .pv-stats { gap: 12px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .modal-box { padding: 16px 14px; }
}

/* ── Small phones (~360px) ────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .hnav { display: none; }                        /* nav lives in the drawer; keep Sign out */
  .stats { grid-template-columns: 1fr; }
  .hero h1 { font-size: 20px; }
}