/* ── mobile-overrides.css ──────────────────────────────────────────────────────
 * Shared mobile fixes for all app pages (sidebar layout).
 * Loaded after each page's inline <style> block so these rules take precedence.
 * Breakpoint: 800px matches the hamburger menu trigger in mobile-nav.js
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Global (all viewports) ────────────────────────────────────────────────── */

/* Sidebar: a slim, low-contrast scrollbar rather than none at all.
   This used to hide scrollbar chrome on every viewport as "distracting". That was
   fine while the nav fitted on one screen; it no longer does (app.css normalised
   zoom 0.8 -> 1, and the nav has grown past twenty items), so the hidden scrollbar
   became the only signal that the list continues below the fold. Without it the nav
   simply looks like it ends, and the tools past that point read as missing. */
.sidebar {
  scrollbar-width: thin;                                  /* Firefox */
  scrollbar-color: var(--color-border, rgba(17,17,17,.22)) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border, rgba(17,17,17,.22));
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--color-border, rgba(17,17,17,.38)); background-clip: content-box; }

/* ── Mobile only (≤800px) ───────────────────────────────────────────────────── */

@media (max-width: 800px) {

  /* 1. Reset the desktop zoom — without this, body text renders at ~10-13px */
  body {
    zoom: 1;
  }

  /* 2. Hide sidebar completely — navigation is handled by the hamburger drawer */
  .sidebar {
    display: none !important;
  }

  /* 3. Main content: remove sidebar compensation, use full width */
  .main-content {
    margin-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* 4. Reduce header height to reclaim screen space */
  :root {
    --header-height: 70px;
  }

  /* 5. Multi-column grid layouts → single column */
  .charts-grid,
  .method-selector,
  .stats-grid,
  .exp-stats-grid,
  .shock-inputs-grid,
  .var-notional-grid,
  .var-composition-grid,
  .scenario-notional-grid,
  .scenario-pnl-grid,
  .filters-row,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* 6. Flex rows → stack vertically */
  .config-row,
  .preset-buttons,
  .scenario-selector-row,
  .scenario-bar-inner {
    flex-direction: column !important;
  }

  /* 7. Tables: scroll horizontally rather than squishing */
  .table-container,
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 8. Page title: cap at readable size */
  .page-title {
    font-size: 20px !important;
  }

  /* 9. Content wrapper: full width on mobile */
  .content-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* 10. Cards and chart containers: prevent overflow */
  .chart-card,
  .stat-card,
  .card {
    overflow-x: auto;
  }

  /* 11. Header: hide auth section (email/My Account/Log Out) — redundant on mobile
         since account access is available through the hamburger drawer */
  #authSection {
    display: none !important;
  }

  /* 12. Entity switcher: keep visible but compact — hide org name text, show icon only */
  .entity-switcher #activeOrgName,
  .entity-switcher svg:last-of-type {
    display: none !important;
  }
  .entity-switcher {
    padding: 6px 8px !important;
    min-width: 0 !important;
  }

  /* 13. Theme toggle: hide label text, keep icon only */
  .theme-toggle .theme-label,
  #themeLabel {
    display: none !important;
  }

  /* 14. Header logo: reduce size on mobile */
  .logo-img {
    height: 40px !important;
  }

  /* 15. Logo text: hide tagline on mobile to save space */
  .logo-tagline {
    display: none !important;
  }

}