/* ─────────────────────────────────────────────────────────────────
 * Dashboard responsive overrides.
 *
 * Above 1320 px the dashboard renders at native size.
 * Between 900 px and 1320 px it's scaled uniformly by Dashboard.html's
 * fit() script — no CSS layout change needed there.
 * Below 900 px the JS bails out of scaling and these rules kick in:
 * the sidebar becomes an off-canvas drawer, the topbar simplifies, and
 * every multi-column grid in the product collapses to a single column.
 * ──────────────────────────────────────────────────────────────── */

/* Hamburger button — hidden by default, surfaces on mobile via media query. */
.dash-hamburger {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--d-line);
  border-radius: 8px;
  color: var(--d-ink);
  cursor: pointer;
  flex: none;
  padding: 0;
}
.dash-hamburger:hover { border-color: var(--d-line-2); }
.dash-hamburger svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ───────── Mobile / small tablet ─────────────────────────────── */
@media (max-width: 900px) {
  html, body { height: auto; overflow: visible; }
  body { background: #05080f; }

  /* Bail out of the scale-transform stage — flow naturally instead. */
  .dashboard-stage {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
  }
  .dashboard.standalone {
    width: 100% !important;
  }
  .dashboard.standalone .dash-main {
    overflow-y: visible;
    padding-bottom: 32px;
  }

  /* Stack app: main fills the viewport, sidebar slides in as drawer */
  .dash-app {
    display: block !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* Let the whole column flow to its natural content height. The desktop
   * layout pins these to fixed/min 900px and gives .dash-main `flex:1 1 0`
   * so it fills a scrollable section. On mobile we drop the scaffolding so
   * the page itself scrolls — otherwise the tall Overview overflows past the
   * collapsed boxes and gets clipped off the bottom of the document.
   * !important is required to beat the higher-specificity landing-preview
   * overrides (`.dashboard-frame .dashboard.standalone .dash-section{min-height:900px}`). */
  .dash-section,
  .dash-main {
    min-height: 0 !important;
    height: auto !important;
  }
  .dash-main {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  /* Sidebar → off-canvas drawer */
  .dash-sidebar {
    position: fixed !important; top: 0; left: 0;
    width: 84vw; max-width: 320px;
    height: 100vh !important;
    z-index: 200;
    transform: translateX(-102%);
    transition: transform 260ms cubic-bezier(0.2,0.8,0.2,1);
    box-shadow: 24px 0 60px rgba(0,0,0,0.55);
  }
  .dash-app.nav-open .dash-sidebar { transform: translateX(0); }

  /* Backdrop behind the drawer */
  .dash-app.nav-open::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(2,5,12,0.55);
    backdrop-filter: blur(2px);
    z-index: 199;
  }

  /* Main section becomes the only column */
  .dash-section {
    height: auto !important;
    overflow: visible !important;
  }

  /* Topbar: hamburger + search + bell only */
  .dash-topbar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
  }
  .dash-hamburger { display: inline-flex; }
  .dash-topbar .status-pill { display: none; }
  .dash-topbar .dash-search {
    flex: 1; min-width: 0;
  }
  .dash-topbar .dash-search input {
    font-size: 0.78rem;
  }
  .dash-topbar .dash-search .kbd { display: none; }
  .dash-topbar .topbar-right { gap: 6px; }
  .dash-topbar .topbar-right .ms-pill { display: none; }

  /* Main content padding */
  .dash-main {
    padding: 14px 14px 28px !important;
  }

  /* ───── Overview screen ───── */
  .ov-header { padding: 4px 0 18px; }
  .ov-title { font-size: 1.45rem; letter-spacing: -0.035em; }
  .ov-sub { font-size: 0.82rem; max-width: none; }
  .ov-strip {
    grid-template-columns: 1fr 1fr;
    border-radius: 10px;
  }
  .ov-strip-item {
    border-right: none !important;
    border-bottom: 1px solid var(--d-line);
    padding: 14px 16px;
  }
  .ov-strip-item:nth-child(2) { border-right: none; }
  .ov-strip-item:nth-last-child(-n+2) { border-bottom: none; }
  .ov-strip-item:nth-child(odd) { border-right: 1px solid var(--d-line) !important; }
  .ov-strip-pct { font-size: 1.65rem; }

  .ov-half,
  .ov-split,
  .ov-decisions-body,
  .dash-row.mid,
  .dash-row.bot {
    grid-template-columns: 1fr !important;
  }
  .ov-decisions-body { gap: 14px; }
  .ov-pie-card,
  .ov-chart-section,
  .ov-decisions-section,
  .ov-live {
    min-width: 0;
  }
  .ov-chart-y { display: none; }
  .ov-chart-x { padding-left: 0 !important; gap: 6px; }
  .ov-chart-x::before { display: none; }
  .ov-chart-x span:nth-child(even) { display: none; } /* thin the labels */

  .ov-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ov-section-tools {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* KPI cards 2-up */
  .kpis { grid-template-columns: 1fr 1fr !important; }

  /* Tables → horizontal scroll, hide low-priority columns */
  .sess-table { font-size: 0.74rem; }
  .sess-table th, .sess-table td { padding-left: 8px; padding-right: 8px; }
  .sess-table thead th:nth-child(3),
  .sess-table tbody td:nth-child(3),
  .sess-table thead th:nth-child(6),
  .sess-table tbody td:nth-child(6) { display: none; }

  .pager {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ───── Sessions screen ───── */
  .sessions-screen,
  .se-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .sess-list, .se-list { height: auto; max-height: 60vh; }
  .se-quickstats { grid-template-columns: repeat(2, 1fr) !important; }

  .ds2-hero { padding: 14px 14px 18px; }
  .ds2-h1 { font-size: 1.55rem; letter-spacing: -0.035em; }
  .ds2-lede { font-size: 0.82rem; max-width: none; }

  /* ───── Rules screen ───── */
  .rules-row {
    grid-template-columns: 1fr auto auto;
    row-gap: 6px;
    column-gap: 10px;
    padding: 12px 14px;
  }
  .rules-row .trig { grid-column: 1 / -1; }
  .rules-row.head { display: none; } /* header row doesn't translate */
  .rules-row .last { display: none; }

  /* ───── Team / Billing / Settings ───── */
  .team-grid { grid-template-columns: 1fr !important; }
  .billing-grid,
  .settings-grid { grid-template-columns: 1fr !important; }
  .invoice-row {
    grid-template-columns: 90px 1fr auto;
    row-gap: 4px;
  }
  .invoice-row .stat,
  .invoice-row .dl { grid-row: 2; }
  .invoice-row .desc { grid-column: 2 / 4; }

  /* ───── Docs / Support ───── */
  .docs-grid { grid-template-columns: 1fr !important; }
  .ds2-grid,
  .ds2-grid-2,
  .ds2-grid-3,
  .ds2-grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Toast doesn't escape the viewport */
  .toast { right: 12px; left: 12px; max-width: none; }

  /* Notification dropdown sticks to viewport edge */
  .dropdown { width: 280px; }
}

/* ───────── Phones ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .dash-main { padding: 10px 10px 24px !important; }

  .ov-strip {
    grid-template-columns: 1fr !important;
  }
  .ov-strip-item {
    border-right: none !important;
    border-bottom: 1px solid var(--d-line);
  }
  .ov-strip-item:last-child { border-bottom: none; }

  .kpis { grid-template-columns: 1fr !important; }

  /* Tighter typography */
  .ov-title { font-size: 1.3rem; }
  .ds2-h1 { font-size: 1.35rem; }
  .ov-section-head h2 { font-size: 0.72rem; }
  .ov-section-sub { font-size: 0.74rem; }

  /* Sessions table: drop more columns on tiny screens */
  .sess-table thead th:nth-child(4),
  .sess-table tbody td:nth-child(4) { display: none; }

  /* Topbar: hide stats pills entirely */
  .dash-topbar .ms-pill { display: none; }
  .dash-topbar .bell { width: 36px; height: 36px; }

  /* Tabs and pills scroll horizontally if too many */
  .time-tabs,
  .region-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .time-tabs::-webkit-scrollbar,
  .region-tabs::-webkit-scrollbar { display: none; }
}