/*
 * mobile-v2.css — Torus mobile overhaul framework (2026-07-06).
 *
 * Loaded LAST so its scoped overrides win cascade ties. EVERY rule here lives
 * inside a media query (or under body.is-mobile / body.mob-nav-on, which
 * js/mobile.js only sets at ≤768px) — desktop rendering is untouched.
 *
 * Layers:
 *   1. Global mobile hygiene (≤768): tap targets, 16px inputs, no dbl-tap zoom
 *   2. Top-nav compression
 *   3. Sidebar → bottom tab bar (body.mob-nav-on, chrome built by js/mobile.js)
 *   4. Generic modal → bottom-sheet base for core shared modals
 *   5. Simplification: decorative layers off on phones
 *   6. Small-phone (≤480 / ≤360), landscape-short, tablet (769–1024) bands
 *
 * Per-tab refinements live as appended @media blocks in each tab's own CSS
 * file (same date stamp) — this file is only the shared framework.
 */

/* ═══ 1. Global mobile hygiene ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    -webkit-tap-highlight-color: transparent;
  }
  /* Kill the 300ms double-tap-zoom delay on everything interactive */
  button, [role="button"], a, .nav-tab, input, select, textarea, label {
    touch-action: manipulation;
  }
  /* iOS zooms the page when focusing any input under 16px — hard floor it. */
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Momentum + no scroll-chaining out of internal scrollers */
  .tab-panel, .tab-content {
    overscroll-behavior: contain;
  }
}

/* ═══ 2. Top nav compression (≤768) ═════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-top-row {
    padding: 6px 10px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  /* Icon cluster scrolls horizontally instead of wrapping into a second row */
  .nav-controls {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 6px;
    max-width: 100%;
  }
  .nav-controls::-webkit-scrollbar { display: none; }
  .nav-controls > * { flex: none; }

  /* Text labels → icon-only on phones */
  .nav-logout-btn span,
  .nav-help-btn .nav-help-label { display: none; }
  .nav-logout-btn { padding: 8px; }

  .nav-role-badge { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 600px) {
  .nav-clock { display: none; }
}
@media (max-width: 480px) {
  .nav-logo-text { display: none; }        /* keep the mark + dept badge */
  .nav-top-row { padding: 6px 8px; }
}

/* ═══ 3. Sidebar → bottom tab bar ═══════════════════════════════════════════ */
/* Only when js/mobile.js confirmed activation (body.mob-nav-on). If that JS
   ever fails, none of this applies and the legacy slide-out sidebar remains. */
@media (max-width: 768px) {
  body.mob-nav-on #side-nav-v2,
  body.mob-nav-on .sidenav-edge-toggle { display: none !important; }

  /* Beat the GSAP inline styles that reserve sidebar space */
  body.mob-nav-on .dept-dashboard { padding-left: 0 !important; }
  body.mob-nav-on .dept-dashboard #main-nav {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Reserve space for the bar (+ home indicator) at the bottom of content */
  body.mob-nav-on .dept-dashboard {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The bar */
  #mnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9500;
    display: flex;
    align-items: stretch;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: rgba(7, 10, 24, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(56, 189, 248, 0.18);
  }
  html[data-theme="light"] #mnav {
    background: rgba(244, 247, 255, 0.94);
    border-top-color: rgba(10, 16, 32, 0.12);
  }
  .mnav-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: 0;
    padding: 6px 2px;
    color: var(--text-muted, #66789e);
    font: 600 10px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
  }
  .mnav-btn span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mnav-btn .nav-tab-icon { width: 21px; height: 21px; }
  .mnav-btn.active { color: var(--accent-cyan, #38bdf8); }
  .mnav-btn.active .nav-tab-icon { filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.55)); }
  .mnav-btn:active { opacity: 0.7; }

  /* Keyboard open → get the bar out of the way */
  body.kb-open #mnav { display: none; }

  /* "More" sheet */
  #mnav-scrim {
    position: fixed; inset: 0; z-index: 9490;
    background: rgba(2, 4, 12, 0.6);
    opacity: 0; transition: opacity 0.2s ease;
  }
  #mnav-scrim.in { opacity: 1; }
  #mnav-sheet {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    z-index: 9495;
    background: rgba(10, 15, 33, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 18px 18px 0 0;
    padding: 10px 14px 16px;
    max-height: min(60dvh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.18s ease;
  }
  html[data-theme="light"] #mnav-sheet { background: rgba(244, 247, 255, 0.98); }
  #mnav-sheet.in { transform: none; opacity: 1; }
  .mnav-sheet-grab {
    width: 36px; height: 4px; border-radius: 999px;
    background: rgba(125, 211, 252, 0.35);
    margin: 0 auto 12px;
  }
  .mnav-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .mnav-sheet-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    min-height: 68px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #e6edff);
    font: 600 11px/1.2 Inter, system-ui, sans-serif;
    text-align: center;
    cursor: pointer;
  }
  html[data-theme="light"] .mnav-sheet-btn {
    background: rgba(10, 16, 32, 0.04);
    color: #0b1020;
  }
  .mnav-sheet-btn .nav-tab-icon { width: 20px; height: 20px; }
  .mnav-sheet-btn.active {
    border-color: rgba(56, 189, 248, 0.55);
    color: var(--accent-cyan, #38bdf8);
  }
}

/* ═══ 4. Core shared modals → phone sheets ══════════════════════════════════ */
@media (max-width: 768px) {
  /* Submit-Data + Add Back forms (.ftest-*) — the most-used mobile flow.
     Full-screen sheet: full width, dynamic viewport height, internal scroll. */
  .ftest-overlay { align-items: flex-end !important; padding: 0 !important; }
  .ftest-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Live Status (Data Stream) modal */
  #ns-modal-overlay .ns-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ═══ 5. Simplify: decorative layers off on phones ══════════════════════════ */
@media (max-width: 768px) {
  /* Giant background watermark words — pure decoration, costs paint + space */
  .overview-bg-text,
  .room-bg-text,
  .wip-bg-text { display: none !important; }

  /* Desktop-only cursor chrome (belt & suspenders — polish gates on hover) */
  .cursor-glow, .cursor-follower { display: none !important; }
}

/* ═══ 6a. Small phones (≤480) + fold covers (≤360) ══════════════════════════ */
@media (max-width: 480px) {
  .dashboard-header .page-title { font-size: clamp(20px, 6vw, 28px); }
  .room-subtab { width: 40px; height: 40px; font-size: 15px; }
}
@media (max-width: 360px) {
  .mnav-btn span { font-size: 9px; }
  .mnav-sheet-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ 6b. Landscape phones (short viewport) ═════════════════════════════════ */
@media (max-width: 900px) and (max-height: 480px) {
  #mnav { height: calc(44px + env(safe-area-inset-bottom, 0px)); }
  .mnav-btn span { display: none; }
  body.mob-nav-on .dept-dashboard {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ftest-modal { padding-bottom: 12px !important; }
}

/* ═══ 6c. Tablets (769–1024): desktop layout, touch-friendly fixes ══════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .ftest-modal { max-height: 92dvh; overflow-y: auto; }
  #ns-modal-overlay .ns-modal { max-height: 92dvh; overflow-y: auto; }
}

/* ═══ 7. Touch-input affordances (any touch device) ═════════════════════════ */
@media (pointer: coarse) {
  .mnav-btn, .mnav-sheet-btn { min-height: 44px; }
  .nav-bug-btn, .theme-toggle, .nav-help-btn,
  .nav-patchnotes-btn, .nav-review-queue-btn { min-width: 40px; min-height: 40px; }
}

/* Reduced motion: sheet appears without slide */
@media (prefers-reduced-motion: reduce) {
  #mnav-sheet { transition: opacity 0.15s ease; transform: none; }
}

/* ═══ 8. Shell-nav recon fixes (2026-07-06, from mobile audit) ══════════════ */
@media (max-width: 768px) {
  /* Fallback-only: if js/mobile.js ever fails (no mob-nav-on), the legacy
     drawer toggle was a ~14px sliver at mid-left. Make it a real FAB.
     Invisible whenever the bottom bar is active (sidebar chrome is hidden). */
  body:not(.mob-nav-on) .sidenav-edge-toggle,
  body:not(.mob-nav-on).sidebar-collapsed .sidenav-edge-toggle {
    left: 12px !important;
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    z-index: 1200;
  }
  body:not(.mob-nav-on) .sidenav-edge-toggle:active { transform: none !important; }

  /* Data Stream modal internals: scrollable body + big close + safe area */
  #ns-modal-overlay .ns-modal { display: flex; flex-direction: column; }
  #ns-modal-overlay .ns-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Account-switcher dropdown: pin to the viewport, not the badge */
  .nav-switch-dropdown {
    position: fixed !important;
    top: 56px !important;
    right: 8px !important;
    left: 8px !important;
    max-width: calc(100vw - 16px);
  }
  .nav-switch-scroll { max-height: 52dvh; }

  /* Heavy always-on backdrop blurs → solid fills on phones (big GPU win even
     outside lite tier). Light-theme mirrors below. */
  #main-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 13, 30, 0.96); }
  .nav-switch-dropdown, .nav-dept-dropdown, .ns-modal, .ns-tooltip {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-theme="light"] #main-nav { background: rgba(232, 238, 255, 0.97); }
}

/* Stale legacy token: mobile.css's 641–1194 band still sets --nav-h:86px from
   the two-row-nav era; the nav is one 46px row now → 40px dead band on iPads.
   This file loads last, so this override wins. Same band, desktop unaffected. */
@media (min-width: 641px) and (max-width: 1194px) {
  :root { --nav-h: 46px; }
}

@media (pointer: coarse) {
  #ns-modal-overlay .ns-modal-close { width: 44px; height: 44px; }
}