/* ── 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
 * ─────────────────────────────────────────────────────────────────────────── */

@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,
  .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;
  }

}