/* ────────────────────────────────────────────────────────────────────────────
 * Dashboard theme variables
 *
 * Default ("home") theme is defined on :root. Alternate themes live in
 * [data-theme="<name>"] selectors and override any subset of these vars.
 * Set the active theme by toggling document.documentElement.dataset.theme.
 *
 * Convention: every palette color is provided as both a hex (#xxx) and an
 * RGB-triple (r, g, b) so per-call alpha works via rgba(var(--x-rgb), .N).
 * All glows, gradients, header tints, row treatments, fonts, and corner
 * radius are theme-overridable. Bevel borders are a stub used only by
 * Win95-style themes; default is transparent.
 * ──────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Base surfaces ─────────────────────────────────────────────────────── */
  --bg:         #07101d;
  --surface:    #0d1a2b;
  --surface-hi: #122033;
  --border:     #1a2e45;

  /* ── Palette: hex + RGB-triple (for arbitrary alphas) ──────────────────── */
  --green:      #10d97c;
  --green-rgb:  16, 217, 124;
  --red:        #f04438;
  --red-rgb:    240, 68, 56;
  --blue:       #60a5fa;
  --blue-rgb:   96, 165, 250;
  --amber:      #fbbf24;
  --amber-rgb:  251, 191, 36;
  --purple:     #c084fc;
  --purple-rgb: 192, 132, 252;

  /* ── Tinted derivatives (back-compat with existing usage) ──────────────── */
  --green-glow: rgba(var(--green-rgb), 0.15);
  --red-dim:    rgba(var(--red-rgb),   0.12);
  --amber-dim:  rgba(var(--amber-rgb), 0.12);

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --text-1: #dde8f5;
  --text-2: #6e8eae;
  --text-3: #2e4a66;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Consolas', 'SF Mono', 'Menlo', monospace;

  /* ── Sizing ────────────────────────────────────────────────────────────── */
  --r: 14px;

  /* ── Glow blur (the heavy text-shadow on stat numbers) ────────────────── */
  --glow-blur: 24px;

  /* ── Body ambient gradient (whole gradient overridable per theme) ─────── */
  --bg-glow: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(16, 60, 120, 0.35) 0%, transparent 70%);

  /* ── Body pattern overlay (themes drop in grids, scanlines, etc.) ─────── */
  --bg-pattern: none;

  /* ── Sticky header / modnav tints ─────────────────────────────────────── */
  --modnav-tint: rgba(8, 16, 28, 0.96);
  --header-tint: rgba(13, 26, 43, 0.93);

  /* ── Row treatments ────────────────────────────────────────────────────── */
  --row-zebra: rgba(255, 255, 255, 0.015);
  --row-hover: rgba(255, 255, 255, 0.03);

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-rgb: 0, 0, 0;

  /* ── On-accent text (e.g. white text sitting on a blue button) ───────── */
  --on-accent: #fff;

  /* ── Heat-cell text (high-contrast text over saturated heat fill) ─────── */
  --heat-cell-text: rgba(255, 255, 255, 0.8);

  /* ── Semantic one-off colors ──────────────────────────────────────────── */
  --up-color: #5eb4ff;  /* upload speed (kiosk header) */

  /* ── Bevel borders (used only by Win95-style themes; null by default) ─── */
  --bevel-light: transparent;
  --bevel-dark:  transparent;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Theme switcher UI (button + popover)
 * Injected by static/js/theme-switcher.js into .modnav (network/history/device)
 * or .hdr-meta (kiosk). Styles live here so they pick up the active theme's
 * surface/border/text colors automatically.
 * ════════════════════════════════════════════════════════════════════════════ */
.theme-switcher { position: relative; margin-left: auto; }
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-3);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  font-family: inherit;
}
.theme-btn:hover { background: var(--surface-hi); color: var(--text-1); border-color: var(--text-3); }
.theme-btn.open  { background: var(--surface-hi); color: var(--text-1); border-color: var(--text-2); }
.theme-btn svg   { width: 16px; height: 16px; }

.theme-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(var(--shadow-rgb), 0.5);
  z-index: 200;
  display: none;
  font-family: var(--font);
}
.theme-menu.open { display: block; }
.theme-menu-header {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 12px 6px;
}
.theme-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.theme-menu-item:hover { background: var(--surface-hi); color: var(--text-1); }
.theme-menu-item.active { background: rgba(var(--blue-rgb), 0.12); color: var(--blue); }
.theme-menu-item .check { float: right; opacity: 0; font-size: 14px; line-height: 1; }
.theme-menu-item.active .check { opacity: 1; }
.theme-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
  opacity: 0.7;
}

/* Kiosk: the .hdr-meta is column-flex right-aligned. Override margin-left:auto
   (which only matters in row-flex contexts) so the switcher sits compactly
   at the top of the meta column, right above the exit button. */
.hdr-meta .theme-switcher { margin-left: 0; }