/* Оформление панели. Переключается атрибутом data-theme на <html>.
   Все компоненты в app.css используют только эти переменные. */

/* ── Telegram: цвета берутся из темы Telegram (светлая/тёмная — сама) ──── */
:root,
[data-theme="telegram"] {
  --tg-bg: var(--tg-theme-bg-color, #ffffff);
  --tg-text: var(--tg-theme-text-color, #000000);
  --tg-hint: var(--tg-theme-hint-color, #8e8e93);

  --bg: var(--tg-theme-secondary-bg-color, #efeff4);
  --surface: var(--tg-theme-section-bg-color, var(--tg-bg));
  --surface-2: color-mix(in srgb, var(--tg-text) 6%, var(--surface));
  --nav-bg: var(--tg-theme-bottom-bar-bg-color, var(--surface));
  --input-bg: var(--surface);
  --line: color-mix(in srgb, var(--tg-hint) 28%, transparent);
  --text: var(--tg-text);
  --muted: var(--tg-hint);
  --section-title: var(--tg-theme-section-header-text-color, var(--tg-hint));
  --section-border: 0;
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --board-time: var(--tg-text);

  --ok: #34b44a;
  --ok-glow: color-mix(in srgb, #34b44a 22%, transparent);
  --bad: var(--tg-theme-destructive-text-color, #e5484d);
  --bad-glow: color-mix(in srgb, var(--bad) 22%, transparent);
  --bad-bg: color-mix(in srgb, var(--bad) 14%, var(--surface));
  --bad-text: var(--bad);
  --warn: #e8a317;
  --warn-bg: color-mix(in srgb, #e8a317 16%, var(--surface));
  --warn-text: color-mix(in srgb, #e8a317 55%, var(--tg-text));
  --switch-off: color-mix(in srgb, var(--tg-hint) 45%, transparent);
  --toast-bg: color-mix(in srgb, var(--tg-text) 88%, var(--tg-bg));
  --toast-text: var(--tg-bg);

  --font: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: var(--font);
  --font-numbers: var(--font);
  --numbers-tracking: -0.02em;
  --radius-lg: 12px;
  --radius-sm: 10px;
}

/* ── Диспетчерская: тёмный экран радара, янтарь табло вылетов ─────────── */
[data-theme="dispatch"] {
  color-scheme: dark;
  --bg: #0f1a24;           /* глубокий сине-сланцевый */
  --surface: #162430;
  --surface-2: #1d3040;
  --nav-bg: #0c151d;
  --input-bg: #0f1a24;
  --line: #263b4d;
  --text: #dbe5ec;
  --muted: #8297a8;
  --section-title: #9fb3c3;
  --section-border: 1px solid #22374a;
  --accent: #f2a93b;       /* янтарь табло */
  --accent-text: #1a1206;
  --board-time: #f2a93b;

  --ok: #49c58a;
  --ok-glow: rgb(73 197 138 / .18);
  --bad: #f2665a;
  --bad-glow: rgb(242 102 90 / .2);
  --bad-bg: #3a1f22;
  --bad-text: #ffb0a8;
  --warn: #f2a93b;
  --warn-bg: #3a2c14;
  --warn-text: #ffd28c;
  --switch-off: #34495b;
  --toast-bg: #e6edf2;
  --toast-text: #0f1a24;

  --font: "Barlow", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --font-numbers: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --numbers-tracking: 0.01em;
  --radius-lg: 6px;
  --radius-sm: 4px;
}
[data-theme="dispatch"] .page-head h1 { font-weight: 600; letter-spacing: 0.01em; font-size: 28px; }
[data-theme="dispatch"] .board-time { font-size: 76px; text-shadow: 0 0 24px rgb(242 169 59 / .18); }
[data-theme="dispatch"] .nav a[aria-current="page"] { color: var(--accent); }
[data-theme="dispatch"] .lamp { border: 1px solid var(--line); background: var(--surface); }
[data-theme="dispatch"] .lamp i { box-shadow: 0 0 6px currentColor; }
[data-theme="dispatch"] .lamp.ok i { color: var(--ok); }
[data-theme="dispatch"] .lamp.mod i { color: var(--warn); }
[data-theme="dispatch"] .lamp.err i { color: var(--bad); }
[data-theme="dispatch"] .lamp:not(.ok):not(.mod):not(.err) i { box-shadow: none; }