/* CS Tracker — mobile/tablet overlay v2 */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

#mobileNavBtn {
  display: none;
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  z-index: 1100;
  width: 42px; height: 42px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--sidebar-bg); color: #fff; font-size: 20px; line-height: 1;
  box-shadow: var(--shadow-md);
}

@media (max-width: 820px) {
  #mobileNavBtn { display: flex; align-items: center; justify-content: center; }

  /* Off-canvas drawer — hardened against the base #sidebar rules */
  #sidebar {
    position: fixed !important;
    left: 0 !important; top: 0 !important;
    width: min(62vw, 210px) !important;
    min-width: min(62vw, 210px) !important;
    height: 100vh !important; height: 100dvh !important;
    flex-direction: column;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    /* Installed as a standalone PWA, the notch/status bar and home
       indicator sit over fixed-position content unless padded for. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    z-index: 1000 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }
  body.nav-open #sidebar { transform: none !important; }
  body.nav-open::before {
    content: ''; position: fixed; inset: 0; z-index: 900;
    background: rgba(0,0,0,0.45);
  }
  /* The hamburger (z-index 1100) sits at the same top-left corner as the
     drawer's own logo (z-index 1000) — hide it while the drawer is open
     so it doesn't float on top of the sidebar header. Tapping the
     overlay or a nav item (wired in index.html) closes the drawer. */
  body.nav-open #mobileNavBtn { display: none !important; }
  #sidebar nav { display: block !important; padding-bottom: 24px; }
  .nav-btn { min-height: 44px; }

  body { display: block; }
  body > *:not(#sidebar):not(#mobileNavBtn) { width: 100%; }

  .card { overflow-x: auto; }
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
  .row { flex-wrap: wrap; }

  .btn, button { min-height: 40px; }
  input, select, textarea { font-size: 16px; }

  table { font-size: 12px; }
  th, td { padding: 6px !important; }
}

@media (min-width: 821px) and (max-width: 1024px) {
  :root { --sidebar-w: 180px; }

  /* iPad portrait: the persistent sidebar leaves less room than desktop,
     so 3-4 across inline field grids in modals are too tight — use 2. */
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}

/* ── v3: reach inline-styled layouts in app.js ─────────────────── */
@media (max-width: 820px) {
  /* Tighter page padding. No extra top offset needed here — #topbar is
     always shown once logged in (renderApp only hides it pre-login), so
     it already reserves real vertical space above #view; stacking a
     52px padding-top on top of that pushed content down needlessly. */
  #view { padding: 14px 10px 24px !important; }
  .card { padding: 12px !important; }
  h1 { font-size: 20px !important; }

  /* Inline-styled flex rows wrap instead of overflowing */
  #view div[style*="display:flex"], #view div[style*="display: flex"] { flex-wrap: wrap !important; }

  /* Inline-styled tiles share width sanely */
  #view div[style*="min-width:90px"], #view div[style*="min-width: 90px"] { flex: 1 1 44% !important; }

  /* Media and charts never exceed the viewport */
  canvas, img, svg { max-width: 100% !important; }

  /* Modals fit the screen */
  .modal, [class*="modal"] { max-width: 96vw !important; }
}

/* v4: cooperate with the app's own sidebar logic */
@media (max-width: 820px) {
  /* Hide the app's built-in toggle on phones (ours drives the drawer) */
  #toggle-sidebar { display: none !important; }
  /* Our button only appears once the app has shown the sidebar (logged in) */
  #sidebar[style*="display:none"] ~ #mobileNavBtn,
  #sidebar[style*="display: none"] ~ #mobileNavBtn { display: none !important; }
}

/* v5: a drawer is never "collapsed" — restore labels on phones.
   Below 768px, styles.css's own @media(max-width:768px) block shrinks
   #sidebar to a 60px rail and hides ".nav-btn span:not(.icon)" — but the
   rendered icon span is actually class "ni", not "icon", so that old
   selector matches (and blanks) BOTH the icon and the label span any
   time a phone-width sidebar isn't explicitly ".collapsed" — which is
   the default, since the collapse toggle is hidden on mobile (v4) and
   its state lives in localStorage per-device, so a phone almost never
   has it set. Cover both the collapsed and the (much more common)
   default case here. */
@media (max-width: 820px) {
  #sidebar,
  #sidebar.collapsed { width: min(62vw, 210px) !important; min-width: min(62vw, 210px) !important; }
  #sidebar .nav-btn span:not(.ni),
  #sidebar.collapsed .nav-btn span:not(.ni) { display: revert !important; }
  #sidebar .nav-group-label,
  #sidebar.collapsed .nav-group-label { display: revert !important; }
  #sidebar .sb-logo span,
  #sidebar.collapsed .sb-logo span { display: revert !important; }
  #sidebar .sb-logo h1,
  #sidebar.collapsed .sb-logo h1 { display: revert !important; }
  #sidebar .sb-uinfo,
  #sidebar.collapsed .sb-uinfo { display: revert !important; }
  #sidebar .nav-btn,
  #sidebar.collapsed .nav-btn { justify-content: flex-start !important; padding: 8px 10px !important; }
}

/* v7: topbar controls to the right; stack analytics grids */
@media (max-width: 820px) {
  /* Topbar: clear the hamburger, push controls right, and clear the
     notch/status bar in standalone PWA mode (landscape notch included). */
  #topbar {
    display: flex !important; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px;
    padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px calc(60px + env(safe-area-inset-left)) !important;
  }
  #topbar-right { margin-left: auto !important; display: flex !important; flex-wrap: wrap; justify-content: flex-end !important; gap: 6px; }
  .year-wrapper { order: 99; }  /* year selector goes to the far right */

  /* Any multi-column grid stacks vertically — not just inside #view;
     most forms/field-grids live in modals appended straight to
     document.body (showInterventionModal, currModal, addBoundaryOverride,
     showApplyTemplateModal, etc.), so an #view-scoped selector misses them. */
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* ...except the 9-across grade-boundary threshold grid, which is more
     usable as a compact 3x3 block than nine stacked rows. */
  div[style*="grid-template-columns:repeat(9,1fr)"],
  div[style*="grid-template-columns: repeat(9, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}