/* ============================================================================
   mobile.css — CMS responsive layer (phone ~390px + tablet ~768px)
   v=1

   DESIGN RULE: every layout rule in this file lives inside a media query, so
   at desktop widths (>=769px) this stylesheet contributes NOTHING and the
   existing cascade is byte-for-byte unchanged. Loaded LAST in index.html so
   its mobile overrides win over per-page CSS.

   The only non-media rules are `display:none` defaults for two brand-new
   elements introduced for the nav drawer (.aq-nav-toggle, .aq-nav-scrim) —
   safe because they don't exist anywhere in the desktop layout.

   See docs/mobile-readiness-assessment.md for the full audit + rationale.
   ========================================================================== */

/* New elements are hidden by default; the media query below reveals them.
   This keeps the hamburger + scrim invisible on desktop. */
.aq-nav-toggle { display: none; }
.aq-nav-scrim  { display: none; }

/* ───────────────────────────────────────────────────────────────────────────
   PHONE + TABLET   (<= 768px)
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── App shell: edge-to-edge, full-bleed main panel ────────────────────── */
  .aq-app  { padding: 0 !important; gap: 0 !important; }
  .aq-main { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }

  /* ── Navigation drawer ─────────────────────────────────────────────────────
     The system sidebar (aside.aq-sidebar) becomes a slide-in drawer. Scoped to
     the <aside> element so the campaign editor's tools rail (div.aq-page-rail,
     which also carries .aq-sidebar) keeps its existing hidden/stacked behaviour
     and is untouched. */
  aside.aq-sidebar {
    display: flex !important;          /* override styles.css `display:none` */
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 264px !important;
    max-width: 84vw;
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    background: var(--aq-surface, #15192a);   /* opaque so page doesn't show through */
    border-right: 1px solid var(--aq-line);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* If the user left the sidebar collapsed, keep the drawer narrow (icon-only,
     matching the React compact render) rather than a wide empty panel. */
  aside.aq-sidebar.is-compact { width: 76px !important; }

  body.aq-nav-open aside.aq-sidebar {
    transform: translateX(0);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
  body.aq-nav-open { overflow: hidden; }     /* lock page scroll behind drawer */

  body.aq-nav-open .aq-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.5);
    animation: aqModalFade 0.18s ease-out;
  }

  /* Hamburger toggle in the topbar */
  .aq-nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 32px; height: 32px;
    margin-right: 6px;
    flex-shrink: 0;
    border: 0; border-radius: 7px;
    background: transparent;
    color: var(--aq-text-dim);
    cursor: pointer;
  }
  .aq-nav-toggle:hover { background: var(--aq-surface-2); color: var(--aq-text); }

  .aq-topbar  { padding: 0 10px !important; }
  .aq-crumbs  { font-size: 12px; min-width: 0; overflow: hidden; }

  /* ── Per-page scroll roots that bypass the global mobile padding rule ───── */
  .ss-content, .ds-content, .scs-content,
  .nf-content, .st-content, .us-content, .ob-content {
    padding: 14px 12px !important;
  }

  /* ── Dashboard ─────────────────────────────────────────────────────────── */
  .aq-stats  { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .aq-grid-2 { grid-template-columns: 1fr !important; }

  /* ── Single site ───────────────────────────────────────────────────────── */
  .ss-kpis       { grid-template-columns: repeat(2, 1fr) !important; }
  .ss-grid       { grid-template-columns: 1fr !important; }
  .ss-grid > *   { grid-column: auto !important; grid-row: auto !important; }
  .ss-zones-grid { grid-template-columns: 1fr !important; }
  .ss-hero       { flex-wrap: wrap; min-height: 0 !important; gap: 12px; }
  .ss-camp-table { display: block; width: 100%; overflow-x: auto; }

  /* ── Displays ──────────────────────────────────────────────────────────── */
  .ds-layout  { grid-template-columns: 1fr !important; }
  .ds-detail  { position: static !important; width: auto !important; top: auto !important; }
  .ds-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .ds-summary { flex-wrap: wrap; }
  /* Touch reachability: reveal hover-only affordances */
  .ds-tile-bulkbox          { opacity: 1 !important; }
  .ds-zone-edit, .ds-zone-delete { opacity: 1 !important; }
  .ds-hover-popup           { display: none !important; }  /* pointer-only, dead on touch */

  /* ── Single screen ─────────────────────────────────────────────────────── */
  .scs-toprow, .scs-bottom-row, .scs-stats, .scs-hw-grid {
    grid-template-columns: 1fr !important;
  }
  .scs-header        { flex-wrap: wrap; gap: 10px; }
  .scs-preview-title { font-size: 24px !important; }

  /* ── Errors ────────────────────────────────────────────────────────────── */
  .x-err-grid  { grid-template-columns: 1fr !important; height: auto !important; }
  .x-err-stage { padding: 20px !important; }

  /* ── Notifications ─────────────────────────────────────────────────────── */
  .nf-layout  { grid-template-columns: 1fr !important; }
  .nf-sidebar { position: static !important; top: auto !important; }
  .nf-toolbar { flex-wrap: wrap; }
  .nf-search  { width: 100% !important; }
  .nf-tabs    { overflow-x: auto; }

  /* ── Account / shared forms ────────────────────────────────────────────── */
  .x-form-field { grid-template-columns: 1fr !important; gap: 6px !important; }

  /* ── Settings ──────────────────────────────────────────────────────────── */
  .st-shell-grid        { grid-template-columns: 1fr !important; gap: 16px !important; }
  .st-shell-grid > aside { position: static !important; flex-direction: row !important; flex-wrap: wrap; }
  .st-grid-2 { grid-template-columns: 1fr !important; }
  .st-themes { grid-template-columns: repeat(2, 1fr) !important; }
  .st-events { display: block; overflow-x: auto; }

  /* ── Campaigns ─────────────────────────────────────────────────────────── */
  .cp-quickstart { grid-template-columns: repeat(2, 1fr) !important; }
  .cp-search     { width: 100% !important; }
  /* List view: drop the desktop header and reflow each rigid 8-col row into a
     compact stacked block so it no longer overflows. Gallery view (the default)
     is the recommended mobile view; this keeps list view usable as a fallback. */
  .cp-list-head { display: none !important; }
  .cp-list-row  { grid-template-columns: 1fr auto !important; row-gap: 4px; }

  /* ── Templates ─────────────────────────────────────────────────────────── */
  .x-tpl-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .x-tabs     { overflow-x: auto; }

  /* ── Media library ─────────────────────────────────────────────────────── */
  .x-media-split { grid-template-columns: 1fr !important; }
  .x-media-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .x-filter-bar  { flex-wrap: wrap; }

  /* ── Species library + editor ──────────────────────────────────────────── */
  .aq-lib-search { width: 100% !important; }
  .se-screen     { grid-template-columns: 1fr !important; }
  .se-panel      { width: auto !important; }
  .se-preview    { min-height: 200px; }
  .se-grid-2, .se-grid-3 { grid-template-columns: 1fr !important; }

  /* ── Analytics dashboard + detail ──────────────────────────────────────── */
  .x-analytics-log-row { grid-template-columns: auto 1fr !important; row-gap: 2px; }
  .x-hod-wrap    { overflow-x: auto; }
  .x-hod-heatmap { min-width: 560px; }            /* scrolls inside .x-hod-wrap */

  /* Alerts: make the tab strip horizontally scrollable instead of overflowing */
  .x-tabstrip       { overflow-x: auto; flex-wrap: nowrap !important; }
  .x-tabstrip > *   { flex: 0 0 auto; white-space: nowrap; }

  /* ── Platform analytics (Variant B — had zero responsive rules) ────────── */
  .aq-pa-kpis      { grid-template-columns: repeat(2, 1fr) !important; }
  .aq-pa-cards     { grid-template-columns: 1fr !important; }
  .aq-pa-conn-grid { grid-template-columns: 1fr !important; }
  .aq-pa-funnel    { grid-template-columns: repeat(2, 1fr) !important; }
  .aq-pa-leader-row { grid-template-columns: 22px minmax(0, 1fr) !important; row-gap: 2px; }

  /* ── Users directory ───────────────────────────────────────────────────── */
  .us-grid-head, .us-grid-row { grid-template-columns: 1fr auto 32px !important; gap: 10px !important; }
  /* Hide the Sites + Last-active columns on phone; keep user, role, kebab */
  .us-grid-head > :nth-child(3), .us-grid-head > :nth-child(4),
  .us-grid-row  > :nth-child(3), .us-grid-row  > :nth-child(4) { display: none !important; }
  .us-row-kebab { opacity: 1 !important; }          /* touch: always-visible actions */

  /* ── Organisations ─────────────────────────────────────────────────────── */
  .aq-orgs-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Billing ───────────────────────────────────────────────────────────── */
  .x-meters        { grid-template-columns: repeat(2, 1fr) !important; }
  .x-invoice-table { overflow-x: auto; }
  .x-invoice-row   { min-width: 520px; }

  /* ── Approvals (3-pane → stacked) ──────────────────────────────────────── */
  .x-approval      { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .x-approval-list { border-right: 0; border-bottom: 1px solid var(--aq-line); max-height: 260px; }
  .x-approval-side { border-left: 0; border-top: 1px solid var(--aq-line); }

  /* ── Audit log (6-col rigid grid → horizontal scroll) ──────────────────── */
  .x-audit-table { overflow-x: auto; }
  .x-audit-row   { min-width: 620px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   PHONE only   (<= 480px) — tighten the 2-up grids down to single column
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .aq-stats        { grid-template-columns: 1fr !important; }
  .ss-kpis         { grid-template-columns: repeat(2, 1fr) !important; }
  .ds-grid         { grid-template-columns: 1fr !important; }
  .x-tpl-grid      { grid-template-columns: 1fr !important; }
  .x-media-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .aq-species-grid { grid-template-columns: 1fr !important; }
  .aq-pa-kpis      { grid-template-columns: 1fr !important; }
  .aq-pa-funnel    { grid-template-columns: 1fr !important; }
  .aq-orgs-grid    { grid-template-columns: 1fr !important; }
  .x-meters        { grid-template-columns: repeat(2, 1fr) !important; }
  .st-themes       { grid-template-columns: repeat(2, 1fr) !important; }
}