/* ============================================================
   MOBILE OVERRIDES — must be the LAST stylesheet loaded.
   These responsive rules deliberately load after components.css
   and pages.css so they win over the base grid/layout definitions
   defined there (equal specificity → later stylesheet wins).
   Do not move this <link> above the others in index.html.
   ============================================================ */

@media (max-width: 768px) {
  /* Stack multi-column dashboard / report grids into a single column on phones.
     Base definitions (2–5 columns) live in components.css. */
  /* !important is required: many of these grids set grid-template-columns
     via an INLINE style in the HTML, which beats a normal class selector. */
  .charts-row,
  .health-scores-row,
  .fin-grid,
  .ms-report-body,
  .pipeline-cols,
  .analytics-grid,
  .insights-grid { grid-template-columns: 1fr !important; }

  /* Monday board: stack the dark board-list sidebar ABOVE the board, full width,
     so the board area gets the full screen width (base rules in pages.css). */
  .mon-app { flex-direction: column; }
  .mon-sidebar { width: 100%; min-width: 0; max-height: 34vh; border-right: none; border-bottom: 1px solid #2A2B36; }
  .mon-board-content { padding: 14px; }

  /* Staff profile popup goes full-screen on phones (scrolls inside). */
  #staff-profile-overlay { padding: 0; }
  #staff-profile-modal { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
}

@media (max-width: 768px) {
  /* ── SOP LIBRARY ────────────────────────────────────────────
     The list page uses an inline flex layout with a fixed 220px category
     rail beside the cards — on a phone that shoved the cards off-screen.
     Stack it: category chips on top, full-width cards below. (!important is
     required because every dimension is set via inline style in sop.js.) */
  .sop-layout { flex-direction: column; height: auto !important; overflow: visible !important; }
  .sop-cats {
    width: 100% !important; min-width: 0 !important;
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    border-right: none !important; border-bottom: 1px solid var(--gray-100);
    padding: 10px 10px 8px !important; max-height: none !important;
  }
  .sop-cats-label { width: 100%; padding: 0 6px 4px !important; }
  .sop-cat-item {
    width: auto; border: 1px solid var(--gray-200) !important; border-radius: 10px;
    margin: 3px; padding: 8px 12px !important; gap: 8px;
  }
  .sop-manage { width: 100%; margin-top: 8px !important; }
  .sop-main { flex: none !important; padding: 14px 14px 28px !important; overflow: visible !important; }
  .sop-header { flex-direction: column; align-items: stretch !important; }
  .sop-search { width: 100% !important; box-sizing: border-box; }
  .sop-grid { grid-template-columns: 1fr !important; }

  /* ── SOP DOCUMENT (Google-Doc overlay) — TRUE full screen ───
     No floating "popup" card: the white page fills the whole phone and you
     simply scroll up and down. */
  .sop-doc-overlay { padding: 0 !important; background: white !important; }
  .sop-doc-page {
    max-width: 100% !important; width: 100%; margin: 0 !important;
    border-radius: 0 !important; box-shadow: none !important; min-height: 100vh;
  }
  .sop-doc-topbar { padding: 12px 14px !important; }
  .sop-doc-body { padding: 20px 18px 72px !important; }
  .sop-doc-title { font-size: 24px !important; }
  .sop-edit-meta { grid-template-columns: 1fr !important; }
  /* keep the doc's sticky top bar clear of the notch in the installed app */
  .sop-doc-topbar { padding-top: calc(12px + env(safe-area-inset-top)) !important; }

  /* ── SHARED MODALS fill the phone instead of a cramped 480px box ── */
  .modal {
    width: 96vw !important; max-width: 96vw !important;
    max-height: 92vh !important; padding: 20px !important;
  }
}

@media (max-width: 480px) {
  /* On the narrowest phones, also collapse the 2-up grids to a single column. */
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ── PHONES IN LANDSCAPE + SMALL TABLETS (769–1024px) ────────
   The slide-in ☰ menu previously existed only below 768px, so an iPhone held
   SIDEWAYS (~850–930px wide) got the squeezed desktop layout with NO way to
   open the tabs (Lamar, 2026-07-16). Same drawer + hamburger as portrait. */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 200;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
    padding-top: env(safe-area-inset-top);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .hamburger-btn { display: flex; align-items: center; justify-content: center; }
}

/* ── SAFE AREAS (installed home-screen app) ─────────────────
   When KB360 runs full-screen from the home-screen icon, the page extends
   under the iPhone notch/Dynamic Island and the bottom swipe bar
   (viewport-fit=cover in index.html). env(safe-area-inset-*) is 0 in a
   normal browser tab, so these rules are a no-op outside the installed app. */
@media (max-width: 768px) {
  .topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-h) + env(safe-area-inset-top));
  }
  .sidebar { padding-top: env(safe-area-inset-top); }
  .content { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  #login-screen { padding-top: env(safe-area-inset-top); }
}