/* ─── Responsive overrides ──────────────────────────────────── */
/* Base styles are mobile-first in base.css/components.css/panels.css.
   This file adds breakpoint-specific tweaks. */

@media (max-width: 599px) {
  :root { --fs-base: 0.88rem; }
  .v2-panel { padding: 12px; }
  .v2-panel-title { font-size: 0.94rem; }
  .v2-kpi-value { font-size: 1.2rem; }
  .v2-tab span { font-size: 0.88rem; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .v2-main { padding: 18px 16px calc(var(--bottom-tabs-h) + 32px); }
}

@media (min-width: 900px) {
  .v2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .v2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─── Narrow-phone topbar declutter (≤ 480px) ───────────────────
 * Keep the public header to brand, search, filters, and the essential slice
 * selectors. Internal Paper/V1/V2 chrome is intentionally absent. */
@media (max-width: 480px) {
  .v2-brand-sub { display: none; }
  .v2-topbar-actions { gap: 6px; }
  /* Brand title trims rather than wraps */
  .v2-brand-text { min-width: 0; flex: 1 1 auto; }
  .v2-brand-title { font-size: 0.92rem; }
}

/* ─── Additions: narrow mobile sweep ────────────────────────── */
@media (max-width: 599px) {
  /* 2-column KPI grid on small phones */
  .v2-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* tighter panel padding */
  .v2-panel { padding: 10px; }

  /* compact map height */
  .v2-map-wrap, [id$="-map"] { height: 280px !important; min-height: 220px; }

  /* hide low-priority tabulator columns */
  .tabulator .tabulator-col[tabulator-field="review_summary"],
  .tabulator .tabulator-cell[tabulator-field="review_summary"] { display: none !important; }

  /* ── Plotly: prevent charts overflowing the panel ── */
  .v2-plot, .js-plotly-plot, .plotly { max-width: 100% !important; overflow: hidden !important; }
  .v2-plot .svg-container, .js-plotly-plot .svg-container { width: 100% !important; }

  /* Force Plotly legend below chart on mobile (horizontal layout) */
  .v2-plot .legend { transform: none !important; }

  /* Plotly modebar — hide on mobile (takes horizontal space) */
  .v2-plot .modebar, .js-plotly-plot .modebar { display: none !important; }

  /* Panel title wraps instead of truncating */
  .v2-panel-title { white-space: normal; }

  /* Quick filter strip scrolls horizontally, no wrapping */
  .v2-qf-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .v2-qf-strip::-webkit-scrollbar { display: none; }

  /* Prevent any direct child of main from horizontal overflow */
  .v2-main > * { min-width: 0; max-width: 100%; }

  /* Tabulator: horizontal scroll within panel, no page overflow */
  .tabulator { overflow-x: auto !important; max-width: 100% !important; }
}

/* ─── Desktop: sidenav offset ────────────────────────────────── */
@media (min-width: 900px) {
  /* Bottom tabs must be hidden on desktop */
  .v2-bottom-tabs { display: none !important; }

  /* Main scroll-margin so anchor links clear the sticky topbar */
  .v2-main { scroll-margin-top: var(--topbar-h); }
}

/* ─── Touch tap-highlight + double-tap zoom prevention ──────── */
.v2-chip, .v2-btn, .v2-bot-tab, .v2-tab, .v2-icon-btn, .v2-bill-card,
.v2-mode-btn, .v2-preset, .v2-more-sheet-item {
  -webkit-tap-highlight-color: rgba(79, 158, 255, 0.12);
  touch-action: manipulation;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Focus visible */
.v2-tab:focus-visible, .v2-chip:focus-visible, .v2-btn:focus-visible,
.v2-bot-tab:focus-visible, .v2-icon-btn:focus-visible, .v2-bill-card:focus-visible,
.v2-preset:focus-visible, .v2-select:focus-visible, .v2-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}