/* ================================================================
 * LUMINSEA Dashboard — Shared Design Tokens + Universal Rules
 * ================================================================
 *
 * This file is loaded by every dashboard HTML page (dashboard.html,
 * home.html, map.html, marker-list.html, marker-analytics.html,
 * camera-feeds.html, text-display.html, light-visualizer-v2.html,
 * led-color-visualizer.html).
 *
 * Per-page `:root { ... }` blocks may override these tokens. See
 * `docs/BUILD_LEARNINGS.md` §2 for the visual style guide.
 *
 * Breakpoint system (shared across all pages):
 *   Desktop         >= 1280px
 *   Tablet landscape 1024 - 1279px
 *   Tablet portrait   768 - 1023px (PRIMARY PORTRAIT TARGET)
 *   Phone          < 768px
 *
 * Plus:
 *   @media (orientation: portrait) and (max-width: 1023px)
 *     -> portrait touch layouts
 *   @media (orientation: portrait) and (min-aspect-ratio: 9/16)
 *     -> tall-portrait extras (Galaxy Tab A9 800x1340, etc.)
 *   @media (hover: none)
 *     -> touch device hover suppression
 * ============================================================== */

:root {
  /* ── Color palette (Austin's signature neon, see BUILD_LEARNINGS §2) ── */
  --bg-primary: #050508;
  --bg-card: rgba(6, 8, 14, 0.45);
  --bg-card-hover: rgba(14, 16, 26, 0.75);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-accent: rgba(255, 255, 255, 0.12);
  --text-primary: #FFF;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.4);
  --text-dim: rgba(255, 255, 255, 0.22);

  --green: #2CFF00;
  --green-dim: rgba(44, 255, 0, 0.12);
  --green-glow: rgba(44, 255, 0, 0.5);
  --cyan: #00D4FF;
  --cyan-dim: rgba(0, 212, 255, 0.10);
  --cyan-glow: rgba(0, 212, 255, 0.4);
  --red: #FF4444;
  --red-dim: rgba(255, 68, 68, 0.10);
  --red-glow: rgba(255, 68, 68, 0.45);
  --orange: #FF9900;
  --orange-glow: rgba(255, 153, 0, 0.45);
  --yellow: #FFD600;
  --purple: #B44AFF;
  --purple-glow: rgba(180, 74, 255, 0.45);

  /* ── Type scale ── */
  --font-display: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Exo 2', sans-serif;

  /* ── Geometry ── */
  --card-radius: 14px;

  /* ── Layout heights (responsive-friendly tokens) ── */
  --header-height-d: 60px;   /* desktop */
  --header-height-t: 52px;   /* tablet */
  --header-height-m: 44px;   /* phone */
  --header-height: var(--header-height-d);

  /* ── Sidebar widths ── */
  --side-panel-w-d: 350px;   /* desktop controls panel */
  --side-panel-w-t: 280px;   /* tablet controls panel */

  /* ── Touch sizing ── */
  --touch-min: 44px;
}

/* ================================================================
 * Touch / hover / input behavior
 * ============================================================== */

/* Suppress iOS 300ms tap delay + double-tap zoom.
 * Does not affect pinch-zoom, which is preserved for accessibility. */
html, body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

/* Touch-first: raise all interactive targets to 44px in portrait tablet
 * and phone. Desktop landscape layouts intentionally keep denser controls. */
@media (orientation: portrait) and (max-width: 1023px),
       (max-width: 767px) {
  button,
  .btn,
  .nav-item,
  .info-panel-close,
  .filter-tab,
  .btn-view,
  .marker-type-toggle,
  .playlist-item .playlist-action {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
  }

  /* Select / input controls */
  select,
  input[type="text"],
  input[type="number"],
  input[type="search"] {
    min-height: var(--touch-min);
  }

  /* Range slider thumbs bumped up */
  input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }
  input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }
}

/* Touch device (no hover) — strip hover flicker effects */
@media (hover: none) {
  .nav-tooltip { display: none !important; }

  .nav-item:hover,
  .marker-row:hover,
  .tile:hover,
  .card:hover,
  .btn:hover,
  .btn-view:hover {
    transform: none !important;
  }
}

/* `data-label` fallback labels for icon-only buttons — each page opts in
 * by setting flex-direction: column on the button and letting the ::after
 * render the label under the icon in its own bottom-nav media query. */

/* iOS safe area helper — any .safe-area-bottom element gets home-bar padding. */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ================================================================
 * Breakpoint placeholders — documented homes for per-file overrides.
 * Per-file layout rules should use these ranges to stay consistent.
 * ============================================================== */

/* Desktop landscape ≥ 1280px — existing layouts (intentional no-op here) */
@media (min-width: 1280px) {
  /* reserved */
}

/* Tablet landscape 1024–1279px — intermediate shrink */
@media (max-width: 1279px) and (min-width: 1024px) {
  /* reserved */
}

/* Tablet portrait 768–1023px — PRIMARY PORTRAIT TARGET */
@media (orientation: portrait) and (max-width: 1023px) {
  /* reserved — per-file layouts should add their sidebar-collapse /
   * multi-col-reflow / bottom-nav rules here. */
}

/* Phone < 768px */
@media (max-width: 767px) {
  /* reserved */
}

/* Tall-portrait extras (Galaxy Tab A9 800x1340 and similar) */
@media (orientation: portrait)
  and (min-aspect-ratio: 9/16)
  and (max-width: 1023px) {
  /* reserved */
}

/* ================================================================
 * Backdrop-filter fallback — Samsung Internet Browser on Galaxy Tab
 * historically lags; give it a solid-ish background instead.
 * ============================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card,
  .header,
  .sidebar,
  .info-panel {
    background: rgba(6, 8, 14, 0.88);
  }
}