/* themes.css — теми оформлення дашборда (ОДИН файл). Обираються селектором у шапці;
   вибір зберігається на сервері (ui_pref.theme). Активна тема — атрибут html[data-theme="..."].
   ДЕФОЛТНА тема ("default") — це БАЗОВІ монохромні токени у tokens.css; тут її НЕ перевизначаємо
   й НЕ видаляємо: коли data-theme відсутній або 'default', діють tokens.css/app.css як є.
   Нижче — лише перевизначення для НЕдефолтних тем, повністю обмежені префіксом html[data-theme="KEY"]. */

/* ================================================================
   THEME: tactical-dark — red-on-near-black HUD/tactical dossier
   All rules scoped under html[data-theme="tactical-dark"].
   ================================================================ */

/* ---- Semantic token overrides (cascade to components + ECharts) ---- */
html[data-theme="tactical-dark"] {
  --surface-page:    #0c0c0f;
  --surface-raised:  #141418;
  --surface-sunken:  #0e0e11;

  --text-primary:    #e8e8ea;
  --text-secondary:  #b7b7bc;
  --text-muted:      #8a8a90;

  --border-default:  #2b2b31;
  --border-strong:   rgba(255, 43, 43, 0.5);
  --focus-ring:      #ff2b2b;

  --font-family-base: "JetBrains Mono", "SFMono-Regular", ui-monospace, Consolas, "Roboto Mono", monospace;
  --radius-sm: 0px;

  --priority-crit: #ff4444;
  --priority-high: #ff7a1a;
  --priority-med:  #ffc400;
  --priority-low:  #58c26a;
  --priority-none: #9a9aa0;

  --state-danger:    #ff4444;
  --state-warning:   #ff7a1a;
  --state-attention: #ffc400;
  --state-ok:        #58c26a;
  --state-neutral:   #9a9aa0;
  --state-info:      #d8d8dc;

  /* Neutral scale remap so hard-coded neutral tokens stay on-theme */
  --color-neutral-0:   #e8e8ea;
  --color-neutral-50:  rgba(255, 43, 43, 0.06);
  --color-neutral-900: #ff2b2b;

  color-scheme: dark;
}

/* ---- Base ---- */
html[data-theme="tactical-dark"] body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 43, 43, 0.06), transparent 60%),
    var(--surface-page);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

html[data-theme="tactical-dark"] ::selection {
  background: rgba(255, 43, 43, 0.35);
  color: #fff;
}

/* ---- Header / brand ---- */
html[data-theme="tactical-dark"] .app-header {
  background: linear-gradient(180deg, #16161b, #101014);
  border-bottom: 1px solid rgba(255, 43, 43, 0.35);
  box-shadow: 0 1px 0 rgba(255, 43, 43, 0.12), 0 4px 18px rgba(0, 0, 0, 0.6);
}
html[data-theme="tactical-dark"] .brand,
html[data-theme="tactical-dark"] .app-title {
  color: #ff4444;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-shadow: 0 0 10px rgba(255, 43, 43, 0.45);
}
html[data-theme="tactical-dark"] .app-footer {
  background: linear-gradient(0deg, #16161b, #101014);
  border-top: 1px solid rgba(255, 43, 43, 0.28);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--font-size-sm);
}
html[data-theme="tactical-dark"] .user-chip {
  border-left: 1px solid rgba(255, 43, 43, 0.3);
}

/* ---- Navigation ---- */
html[data-theme="tactical-dark"] .app-nav button,
html[data-theme="tactical-dark"] .nav-group > summary {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s, background .12s;
}
html[data-theme="tactical-dark"] .app-nav button:hover,
html[data-theme="tactical-dark"] .nav-group > summary:hover {
  color: #ff6a6a;
  background: rgba(255, 43, 43, 0.06);
}
html[data-theme="tactical-dark"] .app-nav button[aria-current="page"] {
  color: #ff5c5c;
  font-weight: var(--font-weight-medium);
  border-color: transparent;
  border-bottom: 2px solid #ff2b2b;
  text-shadow: 0 0 8px rgba(255, 43, 43, 0.5);
  background: rgba(255, 43, 43, 0.05);
}
html[data-theme="tactical-dark"] .nav-group[open] > summary {
  color: #ff5c5c;
  border-color: rgba(255, 43, 43, 0.5);
}
html[data-theme="tactical-dark"] .nav-menu,
html[data-theme="tactical-dark"] .col-menu,
html[data-theme="tactical-dark"] .combo-list {
  background: #16161b;
  border: 1px solid rgba(255, 43, 43, 0.4);
  box-shadow: 0 0 0 1px #0c0c0f, 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 43, 43, 0.12);
}
html[data-theme="tactical-dark"] .nav-menu-item,
html[data-theme="tactical-dark"] .combo-item {
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
html[data-theme="tactical-dark"] .nav-menu-item:hover,
html[data-theme="tactical-dark"] .combo-item:hover {
  background: rgba(255, 43, 43, 0.12);
  color: #ff8080;
}

/* ---- Freshness pill ---- */
html[data-theme="tactical-dark"] .freshness {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid rgba(255, 43, 43, 0.45);
  background: rgba(255, 43, 43, 0.04);
}
html[data-theme="tactical-dark"] .freshness:hover {
  box-shadow: 0 0 8px rgba(255, 43, 43, 0.4);
  color: #ff6a6a;
}
html[data-theme="tactical-dark"] .freshness.stale {
  color: #ff5c5c;
  border-color: #ff2b2b;
  box-shadow: 0 0 10px rgba(255, 43, 43, 0.35);
}

/* ---- Buttons ---- */
html[data-theme="tactical-dark"] button.btn {
  background: #141418;
  color: #ff6a6a;
  border: 1px solid rgba(255, 43, 43, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: box-shadow .12s, background .12s, color .12s, border-color .12s;
}
html[data-theme="tactical-dark"] button.btn:hover {
  color: #ff5c5c;
  border-color: #ff2b2b;
  background: rgba(255, 43, 43, 0.08);
  box-shadow: 0 0 8px rgba(255, 43, 43, 0.4);
}
html[data-theme="tactical-dark"] button.btn.primary {
  background: linear-gradient(180deg, #ff3535, #e01e1e);
  color: #0c0c0f;
  border-color: #ff2b2b;
  font-weight: var(--font-weight-bold);
  text-shadow: none;
  box-shadow: 0 0 12px rgba(255, 43, 43, 0.4);
}
html[data-theme="tactical-dark"] button.btn.primary:hover {
  background: linear-gradient(180deg, #ff4b4b, #ff2b2b);
  color: #0c0c0f;
  box-shadow: 0 0 16px rgba(255, 43, 43, 0.6);
}
html[data-theme="tactical-dark"] button.btn.danger {
  color: #ff5c5c;
  border-color: #ff2b2b;
  background: rgba(255, 43, 43, 0.05);
}
html[data-theme="tactical-dark"] button.btn.danger:hover {
  background: rgba(255, 43, 43, 0.15);
  box-shadow: 0 0 10px rgba(255, 43, 43, 0.5);
}
html[data-theme="tactical-dark"] button.btn:disabled {
  opacity: .45;
  box-shadow: none;
}
html[data-theme="tactical-dark"] .btn-sm { letter-spacing: 0.06em; }

/* ---- Tables ---- */
html[data-theme="tactical-dark"] table.data {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
}
html[data-theme="tactical-dark"] table.data thead th,
html[data-theme="tactical-dark"] .reco-wrap thead th {
  background: #101014;
  color: #ff5c5c;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--font-weight-bold);
  border-bottom: 1px solid rgba(255, 43, 43, 0.4);
  box-shadow: inset 0 -1px 0 rgba(255, 43, 43, 0.4);
}
html[data-theme="tactical-dark"] table.data th,
html[data-theme="tactical-dark"] table.data td {
  border-bottom: 1px solid var(--border-default);
}
html[data-theme="tactical-dark"] table.data tbody td {
  color: var(--text-primary);
}
html[data-theme="tactical-dark"] table.data tbody tr:hover {
  background: rgba(255, 43, 43, 0.08);
}
html[data-theme="tactical-dark"] table.data th.has-help,
html[data-theme="tactical-dark"] .has-help {
  text-decoration-color: rgba(255, 43, 43, 0.6);
}
/* Priority row tints on dark */
html[data-theme="tactical-dark"] table.data tbody tr[data-priority="red"]         { background: rgba(255, 43, 43, 0.10); }
html[data-theme="tactical-dark"] table.data tbody tr[data-priority="orange"]      { background: rgba(255, 106, 0, 0.10); }
html[data-theme="tactical-dark"] table.data tbody tr[data-priority="yellow"]      { background: rgba(255, 196, 0, 0.10); }
html[data-theme="tactical-dark"] table.data tbody tr[data-priority="no_movement"] { background: rgba(122, 122, 128, 0.10); }

/* ---- Metric cards (with HUD corner ticks) ---- */
html[data-theme="tactical-dark"] .metric {
  position: relative;
  background: linear-gradient(180deg, #16161b, #121216);
  border: 1px solid rgba(255, 43, 43, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 43, 43, 0.05);
}
html[data-theme="tactical-dark"] .metric::before,
html[data-theme="tactical-dark"] .metric::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid #ff2b2b;
  pointer-events: none;
}
html[data-theme="tactical-dark"] .metric::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
}
html[data-theme="tactical-dark"] .metric::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
}
html[data-theme="tactical-dark"] .metric .value {
  color: #f2f2f4;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(255, 43, 43, 0.25);
}
html[data-theme="tactical-dark"] .metric .label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---- Badges ---- */
html[data-theme="tactical-dark"] .badge { letter-spacing: 0.04em; }
html[data-theme="tactical-dark"] .badge[data-level="red"] {
  color: #ff5c5c;
  text-shadow: 0 0 6px rgba(255, 43, 43, 0.4);
}
html[data-theme="tactical-dark"] .badge[data-status="failed"] { color: var(--state-danger); }
html[data-theme="tactical-dark"] .badge[data-status="partial"] { color: var(--state-warning); }

/* ---- Chart card (HUD corner ticks) ---- */
html[data-theme="tactical-dark"] .chart-card {
  position: relative;
  background: linear-gradient(180deg, #141418, #101014);
  border: 1px solid rgba(255, 43, 43, 0.22);
  padding: var(--space-4);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
html[data-theme="tactical-dark"] .chart-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 1px solid #ff2b2b;
  border-left: 1px solid #ff2b2b;
  pointer-events: none;
}
html[data-theme="tactical-dark"] .chart-card::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 14px; height: 14px;
  border-bottom: 1px solid #ff2b2b;
  border-right: 1px solid #ff2b2b;
  pointer-events: none;
}

/* ---- Cart panel ---- */
html[data-theme="tactical-dark"] .cart-panel {
  position: sticky;
  background: linear-gradient(180deg, #16161b, #101014);
  border: 1px solid rgba(255, 43, 43, 0.28);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
html[data-theme="tactical-dark"] .cart-panel.has-items {
  border-color: #ff2b2b;
  box-shadow: 0 0 0 1px rgba(255, 43, 43, 0.35), 0 0 18px rgba(255, 43, 43, 0.22);
}

/* ---- Inputs / selects ---- */
html[data-theme="tactical-dark"] .filters input,
html[data-theme="tactical-dark"] .filters select,
html[data-theme="tactical-dark"] input,
html[data-theme="tactical-dark"] select,
html[data-theme="tactical-dark"] form.stack input,
html[data-theme="tactical-dark"] form.stack select,
html[data-theme="tactical-dark"] .ff-input,
html[data-theme="tactical-dark"] .ff-note {
  background: #0e0e11;
  color: var(--text-primary);
  border: 1px solid rgba(255, 43, 43, 0.35);
  border-radius: 0;
  font-family: var(--font-family-base);
}
html[data-theme="tactical-dark"] .filters input:focus,
html[data-theme="tactical-dark"] .filters select:focus,
html[data-theme="tactical-dark"] input:focus,
html[data-theme="tactical-dark"] select:focus,
html[data-theme="tactical-dark"] form.stack input:focus,
html[data-theme="tactical-dark"] form.stack select:focus,
html[data-theme="tactical-dark"] .ff-input:focus,
html[data-theme="tactical-dark"] .ff-note:focus {
  outline: none;
  border-color: #ff2b2b;
  box-shadow: 0 0 8px rgba(255, 43, 43, 0.4);
}
html[data-theme="tactical-dark"] input::placeholder,
html[data-theme="tactical-dark"] textarea::placeholder { color: var(--text-muted); }

/* ---- States / toast / dialogs ---- */
html[data-theme="tactical-dark"] .state {
  color: var(--text-secondary);
  border: 1px dashed rgba(255, 43, 43, 0.3);
  background: rgba(255, 43, 43, 0.02);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
html[data-theme="tactical-dark"] .state.error {
  border-style: solid;
  border-color: #ff2b2b;
  color: #ff6a6a;
  box-shadow: inset 0 0 22px rgba(255, 43, 43, 0.08);
}
html[data-theme="tactical-dark"] .toast {
  background: #16161b;
  color: #ff6a6a;
  border: 1px solid #ff2b2b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 0 16px rgba(255, 43, 43, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6);
}
html[data-theme="tactical-dark"] .dialog-backdrop {
  background: rgba(6, 6, 8, 0.75);
  backdrop-filter: blur(1px);
}
html[data-theme="tactical-dark"] .dialog {
  background: linear-gradient(180deg, #16161b, #101014);
  color: var(--text-primary);
  border: 1px solid #ff2b2b;
  box-shadow: 0 0 0 1px rgba(255, 43, 43, 0.2), 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 43, 43, 0.18);
}

/* ---- Titles / headings ---- */
html[data-theme="tactical-dark"] h2.screen-title,
html[data-theme="tactical-dark"] .screen-title {
  color: #f2f2f4;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-left: 3px solid #ff2b2b;
  padding-left: var(--space-3);
  text-shadow: 0 0 10px rgba(255, 43, 43, 0.2);
}
html[data-theme="tactical-dark"] h3,
html[data-theme="tactical-dark"] .detail-group h3 {
  color: #ff6a6a;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(255, 43, 43, 0.3);
}

/* ---- Detail / kv / plan / notes ---- */
html[data-theme="tactical-dark"] .kv .k {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--font-size-sm);
}
html[data-theme="tactical-dark"] .plan-link {
  color: #ff6a6a;
  text-decoration-color: rgba(255, 43, 43, 0.6);
}
html[data-theme="tactical-dark"] .plan-link:hover { color: #ff8080; }
html[data-theme="tactical-dark"] .form-note,
html[data-theme="tactical-dark"] .ff-note ~ .form-note {
  color: var(--text-muted);
}

/* ---- Login ---- */
html[data-theme="tactical-dark"] .login-wrap {
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(255, 43, 43, 0.08), transparent 70%);
}
html[data-theme="tactical-dark"] .login-card {
  position: relative;
  background: linear-gradient(180deg, #16161b, #101014);
  color: var(--text-primary);
  border: 1px solid rgba(255, 43, 43, 0.4);
  box-shadow: 0 0 0 1px #0c0c0f, 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 43, 43, 0.15);
}
html[data-theme="tactical-dark"] .login-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 16px; height: 16px;
  border-top: 1px solid #ff2b2b;
  border-left: 1px solid #ff2b2b;
}
html[data-theme="tactical-dark"] .login-card::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 16px; height: 16px;
  border-bottom: 1px solid #ff2b2b;
  border-right: 1px solid #ff2b2b;
}

/* ---- Chart SVG helpers (fallback native charts) ---- */
html[data-theme="tactical-dark"] .chart-axis { stroke: rgba(255, 43, 43, 0.4); }
html[data-theme="tactical-dark"] .chart-label { fill: var(--text-primary); }
html[data-theme="tactical-dark"] .chart-value { fill: var(--text-secondary); }
html[data-theme="tactical-dark"] .chart-tick  { fill: var(--text-muted); }

/* ---- Focus visibility ---- */
html[data-theme="tactical-dark"] :focus-visible {
  outline: 2px solid #ff2b2b;
  outline-offset: 2px;
}


/* ============================================================================
   THEME: tactical-light — HUD/tactical aesthetic, LIGHT variant.
   White/near-white surfaces, RED accent, dark mono text. WCAG AA.
   Everything scoped under html[data-theme="tactical-light"].
   ============================================================================ */

/* --- Token overrides: cascade to all components AND ECharts (getComputedStyle) --- */
html[data-theme="tactical-light"] {
  --surface-page:    #f5f5f6;
  --surface-raised:  #ffffff;
  --surface-sunken:  #fafafa;

  --text-primary:    #17171a;
  --text-secondary:  #48484d;
  --text-muted:      #86868c;

  --border-default:  #dcdce0;
  --border-strong:   #d11a1a;
  --focus-ring:      #d11a1a;

  --font-family-base: "SF Mono", "JetBrains Mono", "Cascadia Mono", "Fira Mono", "Consolas", ui-monospace, "Menlo", monospace;
  --radius-sm: 0px;

  /* Priorities */
  --priority-crit: #d11a1a;
  --priority-high: #d35400;
  --priority-med:  #b8860b;
  --priority-low:  #2f7d33;
  --priority-none: #6b7280;

  /* States — semantic colors on the light tactical palette */
  --state-danger:    #d11a1a;
  --state-warning:   #d35400;
  --state-attention: #b8860b;
  --state-ok:        #2f7d33;
  --state-neutral:   #6b7280;
  --state-info:      #2f6db8;

  /* Local accents used across the theme */
  --tac-red:       #d11a1a;
  --tac-red-hot:   #ff2b2b;
  --tac-red-tint:  rgba(209, 26, 26, 0.06);
  --tac-red-line:  rgba(209, 26, 26, 0.35);
  --tac-grid:      rgba(209, 204, 204, 0.1);
}

/* --- Base --- */
html[data-theme="tactical-light"] body {
  background:
    linear-gradient(var(--tac-grid) 1px, transparent 1px) 0 0 / 100% 7px,
    linear-gradient(90deg, var(--tac-grid) 1px, transparent 1px) 0 0 / 7px 100%,
    var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
}

/* --- Header --- */
html[data-theme="tactical-light"] .app-header {
  background:
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-bottom: 2px solid var(--tac-red);
  box-shadow: 0 1px 0 rgba(209,26,26,0.15), 0 2px 8px rgba(23,23,26,0.04);
}
html[data-theme="tactical-light"] .brand {
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}
html[data-theme="tactical-light"] .brand::before {
  content: "\25AE ";
  color: var(--tac-red);
}
html[data-theme="tactical-light"] .user-chip {
  border-left: 1px solid var(--border-default);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85em;
}

/* --- Footer --- */
html[data-theme="tactical-light"] .app-footer {
  background: #fafafa;
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85em;
}

/* --- Nav --- */
html[data-theme="tactical-light"] .app-nav button {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 0;
  transition: color .12s, border-color .12s, background .12s;
}
html[data-theme="tactical-light"] .app-nav button:hover {
  color: var(--tac-red);
  background: var(--tac-red-tint);
}
html[data-theme="tactical-light"] .app-nav button[aria-current="page"] {
  color: var(--tac-red);
  font-weight: 700;
  border-color: transparent;
  border-bottom: 2px solid var(--tac-red);
  background: transparent;
}

/* Nav dropdown (Довідники) */
html[data-theme="tactical-light"] .nav-group > summary {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 0;
}
html[data-theme="tactical-light"] .nav-group > summary:hover { color: var(--tac-red); }
html[data-theme="tactical-light"] .nav-group[open] > summary {
  color: var(--tac-red);
  border-color: var(--tac-red);
  background: var(--tac-red-tint);
}
html[data-theme="tactical-light"] .nav-menu {
  background: var(--surface-raised);
  border: 1px solid var(--tac-red);
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(23,23,26,0.12), 0 0 0 1px rgba(209,26,26,0.08);
}
html[data-theme="tactical-light"] .nav-menu-item {
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85em;
  border-radius: 0;
  border-left: 2px solid transparent;
}
html[data-theme="tactical-light"] .nav-menu-item:hover {
  background: var(--tac-red-tint);
  border-left-color: var(--tac-red);
  color: var(--tac-red);
}

/* --- Freshness pill --- */
html[data-theme="tactical-light"] .freshness {
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85em;
}
html[data-theme="tactical-light"] .freshness.stale {
  color: var(--tac-red);
  border-color: var(--tac-red);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(209,26,26,0.15);
}

/* --- Buttons --- */
html[data-theme="tactical-light"] button.btn {
  background: var(--surface-raised);
  color: var(--tac-red);
  border: 1px solid var(--tac-red);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: var(--font-family-base);
  transition: background .12s, color .12s, box-shadow .12s;
}
html[data-theme="tactical-light"] button.btn:hover {
  background: var(--tac-red-tint);
  box-shadow: 0 0 0 1px rgba(209,26,26,0.25);
}
html[data-theme="tactical-light"] button.btn.primary {
  background: var(--tac-red);
  color: #ffffff;
  border-color: var(--tac-red);
}
html[data-theme="tactical-light"] button.btn.primary:hover {
  background: var(--tac-red-hot);
  border-color: var(--tac-red-hot);
  box-shadow: 0 0 0 1px rgba(255,43,43,0.3);
}
html[data-theme="tactical-light"] button.btn.danger {
  background: var(--surface-raised);
  color: #a30f0f;
  border-color: #a30f0f;
}
html[data-theme="tactical-light"] button.btn.danger:hover {
  background: rgba(163,15,15,0.08);
}

/* --- Tables --- */
html[data-theme="tactical-light"] table.data {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
}
html[data-theme="tactical-light"] table.data thead th {
  color: var(--tac-red);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  font-size: 0.85em;
  background: #fafafa;
  border-bottom: 2px solid var(--tac-red);
}
html[data-theme="tactical-light"] table.data th,
html[data-theme="tactical-light"] table.data td {
  border-bottom: 1px solid var(--border-default);
}
html[data-theme="tactical-light"] table.data tbody td {
  color: var(--text-primary);
}
html[data-theme="tactical-light"] table.data tbody tr:hover {
  background: var(--tac-red-tint);
  box-shadow: inset 2px 0 0 var(--tac-red);
}
/* Sticky reco header re-tinted */
html[data-theme="tactical-light"] .reco-wrap thead th {
  background: #fafafa;
  box-shadow: inset 0 -2px 0 var(--tac-red);
}

/* --- Metric cards --- */
html[data-theme="tactical-light"] .metric {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-top: 2px solid var(--tac-red-line);
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(23,23,26,0.05);
}
html[data-theme="tactical-light"] .metric::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 10px; height: 10px;
  border-top: 2px solid var(--tac-red);
  border-left: 2px solid var(--tac-red);
}
html[data-theme="tactical-light"] .metric::after {
  content: "";
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px;
  border-bottom: 2px solid var(--tac-red);
  border-right: 2px solid var(--tac-red);
}
html[data-theme="tactical-light"] .metric .value {
  color: var(--text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html[data-theme="tactical-light"] .metric .label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85em;
}

/* --- Badge --- */
html[data-theme="tactical-light"] .badge {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
  border-radius: 0;
}

/* --- Chart card --- */
html[data-theme="tactical-light"] .chart-card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-top: 2px solid var(--tac-red-line);
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(23,23,26,0.05);
}
html[data-theme="tactical-light"] .chart-card::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 12px; height: 12px;
  border-top: 2px solid var(--tac-red);
  border-right: 2px solid var(--tac-red);
}

/* --- Cart panel --- */
html[data-theme="tactical-light"] .cart-panel {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(23,23,26,0.06);
}
html[data-theme="tactical-light"] .cart-panel.has-items {
  border-color: var(--tac-red);
  box-shadow: 0 0 0 1px rgba(209,26,26,0.15), 0 1px 4px rgba(23,23,26,0.06);
}
html[data-theme="tactical-light"] .cart-panel.has-items::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px; background: var(--tac-red);
}

/* --- Inputs / selects (all variants) --- */
html[data-theme="tactical-light"] .filters input,
html[data-theme="tactical-light"] .filters select,
html[data-theme="tactical-light"] form.stack input,
html[data-theme="tactical-light"] form.stack select,
html[data-theme="tactical-light"] .dialog input,
html[data-theme="tactical-light"] .dialog select,
html[data-theme="tactical-light"] .ff-input,
html[data-theme="tactical-light"] .ff-note,
html[data-theme="tactical-light"] input,
html[data-theme="tactical-light"] select {
  background: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 0;
  font-family: var(--font-family-base);
}
html[data-theme="tactical-light"] .filters input:focus,
html[data-theme="tactical-light"] .filters select:focus,
html[data-theme="tactical-light"] form.stack input:focus,
html[data-theme="tactical-light"] form.stack select:focus,
html[data-theme="tactical-light"] .dialog input:focus,
html[data-theme="tactical-light"] .dialog select:focus,
html[data-theme="tactical-light"] .ff-input:focus,
html[data-theme="tactical-light"] .ff-note:focus,
html[data-theme="tactical-light"] input:focus,
html[data-theme="tactical-light"] select:focus {
  outline: none;
  border-color: var(--tac-red);
  box-shadow: 0 0 0 2px rgba(209,26,26,0.18);
}
html[data-theme="tactical-light"] form.stack label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-size: 0.85em;
}

/* --- States --- */
html[data-theme="tactical-light"] .state {
  background: var(--surface-raised);
  border: 1px dashed var(--border-default);
  border-radius: 0;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
html[data-theme="tactical-light"] .state.error {
  border: 1px solid var(--tac-red);
  color: var(--tac-red);
  box-shadow: inset 0 0 0 1px rgba(209,26,26,0.08);
}

/* --- Toast --- */
html[data-theme="tactical-light"] .toast {
  background: #17171a;
  color: #ffffff;
  border: 1px solid var(--tac-red);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 16px rgba(23,23,26,0.25), 0 0 0 1px rgba(209,26,26,0.3);
}

/* --- Dialog --- */
html[data-theme="tactical-light"] .dialog-backdrop {
  background: rgba(23,23,26,0.45);
  backdrop-filter: blur(1px);
}
html[data-theme="tactical-light"] .dialog {
  position: relative;
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--tac-red);
  border-top: 2px solid var(--tac-red);
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(23,23,26,0.25), 0 0 0 1px rgba(209,26,26,0.1);
}
html[data-theme="tactical-light"] .dialog::before {
  content: "";
  position: absolute; top: -2px; left: -1px;
  width: 14px; height: 14px;
  border-top: 3px solid var(--tac-red);
  border-left: 3px solid var(--tac-red);
}

/* --- Titles / headings --- */
html[data-theme="tactical-light"] h2.screen-title,
html[data-theme="tactical-light"] .screen-title {
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  border-left: 4px solid var(--tac-red);
  padding-left: 12px;
}
html[data-theme="tactical-light"] h3 {
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}
html[data-theme="tactical-light"] .detail-group h3 {
  border-bottom: 1px solid var(--tac-red-line);
  color: var(--tac-red);
}

/* --- Detail key/value --- */
html[data-theme="tactical-light"] .kv .k {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85em;
}

/* --- Plan link / notes --- */
html[data-theme="tactical-light"] .plan-link {
  color: var(--tac-red);
  text-decoration-color: var(--tac-red-line);
}
html[data-theme="tactical-light"] .plan-link:hover { color: var(--tac-red-hot); }
html[data-theme="tactical-light"] .form-note,
html[data-theme="tactical-light"] .ff-note {
  color: var(--text-muted);
}
html[data-theme="tactical-light"] p.ff-note,
html[data-theme="tactical-light"] .plan-note {
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* --- Login --- */
html[data-theme="tactical-light"] .login-wrap {
  background:
    radial-gradient(circle at 50% 30%, rgba(209,26,26,0.05), transparent 60%);
}
html[data-theme="tactical-light"] .login-card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-top: 3px solid var(--tac-red);
  border-radius: 0;
  box-shadow: 0 10px 40px rgba(23,23,26,0.12), 0 0 0 1px rgba(209,26,26,0.06);
}
html[data-theme="tactical-light"] .login-card::before {
  content: "";
  position: absolute; bottom: 0; right: 0;
  width: 16px; height: 16px;
  border-bottom: 2px solid var(--tac-red);
  border-right: 2px solid var(--tac-red);
}


/* ============================================================
   THEME: hud-dark — Neon CYAN sci-fi HUD on deep navy-black.
   Everything scoped under html[data-theme="hud-dark"].
   ============================================================ */

/* ---- Token overrides (cascade to components + ECharts) ---- */
html[data-theme="hud-dark"] {
  --surface-page:    #04121a;
  --surface-raised:  rgba(10, 30, 45, 0.62);
  --surface-sunken:  rgba(4, 16, 24, 0.72);

  --text-primary:    #cdefff;
  --text-secondary:  #7fc9e0;
  --text-muted:      #8fb4c4;

  --border-default:  rgba(34, 224, 255, 0.32);
  --border-strong:   rgba(34, 224, 255, 0.72);
  --focus-ring:      #22e0ff;

  --font-family-base: ui-monospace, "SFMono-Regular", "Cascadia Code",
                      "JetBrains Mono", "Consolas", "Roboto Mono",
                      "Liberation Mono", Menlo, monospace;
  --radius-sm: 0px;

  /* Neon priorities */
  --priority-crit: #ff3b6b;
  --priority-high: #ff9d2b;
  --priority-med:  #ffe14d;
  --priority-low:  #35e08a;
  --priority-none: #38c6ff;

  /* States as neon signals */
  --state-danger:    #ff3b6b;
  --state-warning:   #ff9d2b;
  --state-attention: #ffe14d;
  --state-ok:        #35e08a;
  --state-neutral:   #7fc9e0;
  --state-info:      #22e0ff;
}

/* ---- Body: deep navy with faint HUD grid ---- */
html[data-theme="hud-dark"] body {
  background-color: #04121a;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(34, 224, 255, 0.045) 0px,
      rgba(34, 224, 255, 0.045) 1px,
      transparent 1px,
      transparent 40px),
    repeating-linear-gradient(90deg,
      rgba(34, 224, 255, 0.045) 0px,
      rgba(34, 224, 255, 0.045) 1px,
      transparent 1px,
      transparent 40px),
    radial-gradient(ellipse at 50% -10%, rgba(0, 184, 230, 0.14), transparent 60%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-family-base);
  letter-spacing: 0.01em;
}

/* ---- Header ---- */
html[data-theme="hud-dark"] .app-header {
  background: linear-gradient(180deg, rgba(10, 34, 50, 0.85), rgba(6, 20, 30, 0.7));
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 0 18px rgba(34, 224, 255, 0.28),
              inset 0 -1px 0 rgba(34, 224, 255, 0.4);
  backdrop-filter: blur(2px);
}

html[data-theme="hud-dark"] .brand,
html[data-theme="hud-dark"] .app-title {
  color: #eaffff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px rgba(34, 224, 255, 0.8),
               0 0 2px rgba(34, 224, 255, 0.9);
}

html[data-theme="hud-dark"] .user-chip {
  border-left: 1px solid var(--border-default);
  color: var(--text-secondary);
}

/* ---- Nav tabs (boxed cyan outline; active = filled glow) ---- */
html[data-theme="hud-dark"] .app-nav button {
  background: transparent;
  border: 1px solid rgba(34, 224, 255, 0.4);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-family-base);
  font-size: 12px;
  transition: box-shadow .15s ease, color .15s ease, background .15s ease;
}
html[data-theme="hud-dark"] .app-nav button:hover {
  color: #eaffff;
  border-color: var(--border-strong);
  box-shadow: 0 0 10px rgba(34, 224, 255, 0.4), inset 0 0 8px rgba(34, 224, 255, 0.15);
}
html[data-theme="hud-dark"] .app-nav button[aria-current="page"] {
  color: #04121a;
  font-weight: 700;
  background: linear-gradient(180deg, #45ecff, #00b8e6);
  border-color: #7ff2ff;
  text-shadow: none;
  box-shadow: 0 0 14px rgba(34, 224, 255, 0.7),
              inset 0 0 6px rgba(255, 255, 255, 0.35);
}

/* ---- Nav dropdown group ---- */
html[data-theme="hud-dark"] .nav-group > summary {
  border: 1px solid rgba(34, 224, 255, 0.4);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}
html[data-theme="hud-dark"] .nav-group > summary:hover {
  color: #eaffff;
  box-shadow: 0 0 10px rgba(34, 224, 255, 0.4);
}
html[data-theme="hud-dark"] .nav-group[open] > summary {
  border-color: var(--border-strong);
  color: #eaffff;
  box-shadow: 0 0 12px rgba(34, 224, 255, 0.5);
}
html[data-theme="hud-dark"] .nav-menu,
html[data-theme="hud-dark"] .col-menu {
  background: rgba(6, 22, 32, 0.96);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 20px rgba(34, 224, 255, 0.35),
              inset 0 0 12px rgba(34, 224, 255, 0.08);
  backdrop-filter: blur(3px);
}
html[data-theme="hud-dark"] .nav-menu-item {
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}
html[data-theme="hud-dark"] .nav-menu-item:hover {
  background: rgba(34, 224, 255, 0.14);
  color: #eaffff;
  box-shadow: inset 0 0 10px rgba(34, 224, 255, 0.2);
}

/* Вікно-в-вікні (картка SKU) і rich-тултіп: суцільний фон — вміст під ними не просвічує
   (--surface-raised у hud-dark напівпрозорий; правило: темні оверлеї — непрозорі). */
html[data-theme="hud-dark"] .fw,
html[data-theme="hud-dark"] .sku-tip {
  background: #061620;
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 22px rgba(34, 224, 255, 0.28), 0 14px 36px rgba(0, 0, 0, 0.72);
}
html[data-theme="hud-dark"] .fw-bar {
  background: #04121a;
  border-bottom: 1px solid rgba(34, 224, 255, 0.4);
}
html[data-theme="hud-dark"] .fw-title { text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- Freshness pill ---- */
html[data-theme="hud-dark"] .freshness {
  background: rgba(4, 16, 24, 0.6);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 0 8px rgba(34, 224, 255, 0.18);
}
html[data-theme="hud-dark"] .freshness.stale {
  color: var(--state-warning);
  border-color: var(--state-warning);
  box-shadow: 0 0 10px rgba(255, 157, 43, 0.45);
}

/* ---- Buttons ---- */
html[data-theme="hud-dark"] button.btn {
  background: rgba(10, 30, 45, 0.4);
  color: #a6e8ff;
  border: 1px solid var(--border-strong);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-family-base);
  font-size: 12px;
  box-shadow: 0 0 8px rgba(34, 224, 255, 0.2),
              inset 0 0 6px rgba(34, 224, 255, 0.06);
  transition: box-shadow .15s ease, color .15s ease;
}
html[data-theme="hud-dark"] button.btn:hover {
  color: #eaffff;
  border-color: #7ff2ff;
  box-shadow: 0 0 16px rgba(34, 224, 255, 0.6),
              inset 0 0 10px rgba(34, 224, 255, 0.18);
}
html[data-theme="hud-dark"] button.btn.primary {
  background: linear-gradient(180deg, #45ecff, #00b8e6);
  color: #04121a;
  border-color: #7ff2ff;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(34, 224, 255, 0.6),
              inset 0 0 6px rgba(255, 255, 255, 0.35);
}
html[data-theme="hud-dark"] button.btn.primary:hover {
  color: #04121a;
  box-shadow: 0 0 22px rgba(34, 224, 255, 0.85),
              inset 0 0 8px rgba(255, 255, 255, 0.45);
}
html[data-theme="hud-dark"] button.btn.danger {
  color: #ff89a9;
  border-color: var(--priority-crit);
  background: rgba(255, 59, 107, 0.08);
  box-shadow: 0 0 10px rgba(255, 43, 214, 0.35);
}
html[data-theme="hud-dark"] button.btn.danger:hover {
  color: #ff6ae0;
  border-color: #ff2bd6;
  box-shadow: 0 0 18px rgba(255, 43, 214, 0.65),
              inset 0 0 8px rgba(255, 43, 214, 0.2);
}
html[data-theme="hud-dark"] button.btn:disabled {
  opacity: .4;
  box-shadow: none;
}

/* ---- Tables ---- */
html[data-theme="hud-dark"] table.data {
  background: rgba(6, 22, 32, 0.5);
  border: 1px solid var(--border-default);
  box-shadow: 0 0 14px rgba(34, 224, 255, 0.12);
}
html[data-theme="hud-dark"] table.data thead th,
html[data-theme="hud-dark"] .reco-wrap thead th {
  background: linear-gradient(180deg, rgba(10, 40, 58, 0.95), rgba(6, 24, 36, 0.9));
  color: #b6efff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(34, 224, 255, 0.6);
  border-bottom: 1px solid var(--border-strong) !important;
  box-shadow: inset 0 -1px 0 var(--border-strong);
}
html[data-theme="hud-dark"] table.data th,
html[data-theme="hud-dark"] table.data td {
  border-bottom: 1px solid rgba(34, 224, 255, 0.16);
}
html[data-theme="hud-dark"] table.data tbody td {
  color: var(--text-primary);
}
html[data-theme="hud-dark"] table.data tbody tr:hover {
  background: rgba(34, 224, 255, 0.09);
  box-shadow: inset 0 0 12px rgba(34, 224, 255, 0.12);
}
/* Priority row tints — neon on dark */
html[data-theme="hud-dark"] table.data tbody tr[data-priority="red"]         { background: rgba(255, 59, 107, 0.12); }
html[data-theme="hud-dark"] table.data tbody tr[data-priority="orange"]      { background: rgba(255, 157, 43, 0.12); }
html[data-theme="hud-dark"] table.data tbody tr[data-priority="yellow"]      { background: rgba(255, 225, 77, 0.12); }
html[data-theme="hud-dark"] table.data tbody tr[data-priority="no_movement"] { background: rgba(56, 198, 255, 0.10); }

/* ---- Metric cards (corner brackets) ---- */
html[data-theme="hud-dark"] .metric {
  position: relative;
  background: rgba(10, 30, 45, 0.5);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 12px rgba(34, 224, 255, 0.28),
              inset 0 0 14px rgba(34, 224, 255, 0.06);
}
html[data-theme="hud-dark"] .metric::before,
html[data-theme="hud-dark"] .metric::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
}
html[data-theme="hud-dark"] .metric::before {
  top: -1px; left: -1px;
  border-top: 2px solid #45ecff;
  border-left: 2px solid #45ecff;
  box-shadow: -1px -1px 6px rgba(34, 224, 255, 0.6);
}
html[data-theme="hud-dark"] .metric::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid #45ecff;
  border-right: 2px solid #45ecff;
  box-shadow: 1px 1px 6px rgba(34, 224, 255, 0.6);
}
html[data-theme="hud-dark"] .metric .value {
  color: #45ecff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(34, 224, 255, 0.8),
               0 0 3px rgba(34, 224, 255, 0.9);
}
html[data-theme="hud-dark"] .metric .label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---- Badges ---- */
html[data-theme="hud-dark"] .badge {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
html[data-theme="hud-dark"] .badge[data-level="red"]      { color: var(--priority-crit); text-shadow: 0 0 6px rgba(255, 59, 107, 0.6); }
html[data-theme="hud-dark"] .badge[data-status="failed"]  { color: var(--state-danger); text-shadow: 0 0 6px rgba(255, 59, 107, 0.6); }
html[data-theme="hud-dark"] .badge[data-status="partial"] { color: var(--state-warning); }

/* ---- Chart cards (corner brackets) ---- */
html[data-theme="hud-dark"] .chart-card {
  position: relative;
  background: rgba(8, 26, 38, 0.45);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  padding: var(--space-4);
  box-shadow: 0 0 14px rgba(34, 224, 255, 0.22),
              inset 0 0 16px rgba(34, 224, 255, 0.05);
}
html[data-theme="hud-dark"] .chart-card::before,
html[data-theme="hud-dark"] .chart-card::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
}
html[data-theme="hud-dark"] .chart-card::before {
  top: -1px; left: -1px;
  border-top: 2px solid #45ecff;
  border-left: 2px solid #45ecff;
  box-shadow: -1px -1px 6px rgba(34, 224, 255, 0.6);
}
html[data-theme="hud-dark"] .chart-card::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid #45ecff;
  border-right: 2px solid #45ecff;
  box-shadow: 1px 1px 6px rgba(34, 224, 255, 0.6);
}

/* ---- Cart panel (corner brackets) ---- */
html[data-theme="hud-dark"] .cart-panel {
  position: sticky;
  background: rgba(8, 26, 38, 0.85);
  border: 1px solid var(--border-default);
  box-shadow: 0 0 14px rgba(34, 224, 255, 0.2);
  backdrop-filter: blur(3px);
}
html[data-theme="hud-dark"] .cart-panel.has-items {
  border-color: var(--border-strong);
  box-shadow: 0 0 20px rgba(34, 224, 255, 0.5),
              inset 0 0 14px rgba(34, 224, 255, 0.08);
}
html[data-theme="hud-dark"] .cart-panel.has-items::before,
html[data-theme="hud-dark"] .cart-panel.has-items::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
}
html[data-theme="hud-dark"] .cart-panel.has-items::before {
  top: -1px; left: -1px;
  border-top: 2px solid #45ecff;
  border-left: 2px solid #45ecff;
  box-shadow: -1px -1px 6px rgba(34, 224, 255, 0.6);
}
html[data-theme="hud-dark"] .cart-panel.has-items::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid #45ecff;
  border-right: 2px solid #45ecff;
  box-shadow: 1px 1px 6px rgba(34, 224, 255, 0.6);
}

/* ---- Inputs / selects ---- */
html[data-theme="hud-dark"] .filters input,
html[data-theme="hud-dark"] .filters select,
html[data-theme="hud-dark"] input,
html[data-theme="hud-dark"] select,
html[data-theme="hud-dark"] textarea,
html[data-theme="hud-dark"] .ff-input,
html[data-theme="hud-dark"] form.stack input,
html[data-theme="hud-dark"] form.stack select {
  background: rgba(4, 16, 24, 0.8);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 0 8px rgba(34, 224, 255, 0.1);
  font-family: var(--font-family-base);
}
html[data-theme="hud-dark"] input:focus,
html[data-theme="hud-dark"] select:focus,
html[data-theme="hud-dark"] textarea:focus,
html[data-theme="hud-dark"] .ff-input:focus {
  outline: none;
  border-color: #45ecff;
  box-shadow: 0 0 12px rgba(34, 224, 255, 0.6),
              inset 0 0 8px rgba(34, 224, 255, 0.2);
}
html[data-theme="hud-dark"] input::placeholder,
html[data-theme="hud-dark"] textarea::placeholder { color: var(--text-muted); }
html[data-theme="hud-dark"] .combo-list,
html[data-theme="hud-dark"] .combo-item {
  background: rgba(6, 22, 32, 0.96);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
html[data-theme="hud-dark"] .combo-item:hover {
  background: rgba(34, 224, 255, 0.12);
  color: #eaffff;
}

/* ---- System states ---- */
html[data-theme="hud-dark"] .state {
  background: rgba(6, 22, 32, 0.4);
  color: var(--text-secondary);
  border: 1px dashed var(--border-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 20px rgba(34, 224, 255, 0.06);
}
html[data-theme="hud-dark"] .state.error {
  border-style: solid;
  border-color: var(--priority-crit);
  color: #ff89a9;
  box-shadow: 0 0 16px rgba(255, 59, 107, 0.35),
              inset 0 0 16px rgba(255, 59, 107, 0.08);
  text-shadow: 0 0 6px rgba(255, 59, 107, 0.5);
}

/* ---- Toast ---- */
html[data-theme="hud-dark"] .toast {
  background: rgba(6, 22, 32, 0.96);
  color: #eaffff;
  border: 1px solid var(--border-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 0 20px rgba(34, 224, 255, 0.5),
              inset 0 0 12px rgba(34, 224, 255, 0.1);
}

/* ---- Dialog ---- */
html[data-theme="hud-dark"] .dialog-backdrop {
  background: rgba(2, 8, 14, 0.7);
  backdrop-filter: blur(2px);
}
html[data-theme="hud-dark"] .dialog {
  position: relative;
  background: rgba(8, 26, 38, 0.97);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 28px rgba(34, 224, 255, 0.45),
              inset 0 0 18px rgba(34, 224, 255, 0.08);
  backdrop-filter: blur(4px);
}
html[data-theme="hud-dark"] .dialog::before,
html[data-theme="hud-dark"] .dialog::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
}
html[data-theme="hud-dark"] .dialog::before {
  top: -1px; left: -1px;
  border-top: 2px solid #45ecff;
  border-left: 2px solid #45ecff;
  box-shadow: -1px -1px 6px rgba(34, 224, 255, 0.6);
}
html[data-theme="hud-dark"] .dialog::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid #45ecff;
  border-right: 2px solid #45ecff;
  box-shadow: 1px 1px 6px rgba(34, 224, 255, 0.6);
}

/* ---- Titles / headings ---- */
html[data-theme="hud-dark"] h2.screen-title,
html[data-theme="hud-dark"] .screen-title {
  color: #eaffff;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-shadow: 0 0 10px rgba(34, 224, 255, 0.6),
               0 0 3px rgba(34, 224, 255, 0.8);
  border-bottom: 1px solid var(--border-default);
  padding-bottom: var(--space-2);
}
html[data-theme="hud-dark"] h3,
html[data-theme="hud-dark"] .detail-group h3,
html[data-theme="hud-dark"] .chart-card > h3 {
  color: #b6efff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-shadow: 0 0 6px rgba(34, 224, 255, 0.5);
  border-bottom: 1px solid var(--border-default);
}

/* ---- Footer ---- */
html[data-theme="hud-dark"] .app-footer {
  background: linear-gradient(0deg, rgba(10, 34, 50, 0.85), rgba(6, 20, 30, 0.5));
  border-top: 1px solid var(--border-strong);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  box-shadow: 0 0 18px rgba(34, 224, 255, 0.22),
              inset 0 1px 0 rgba(34, 224, 255, 0.4);
}

/* ---- Login ---- */
html[data-theme="hud-dark"] .login-wrap {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0, 184, 230, 0.14), transparent 60%);
}
html[data-theme="hud-dark"] .login-card {
  position: relative;
  background: rgba(8, 26, 38, 0.75);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 28px rgba(34, 224, 255, 0.4),
              inset 0 0 20px rgba(34, 224, 255, 0.08);
  backdrop-filter: blur(4px);
}
html[data-theme="hud-dark"] .login-card::before,
html[data-theme="hud-dark"] .login-card::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none;
}
html[data-theme="hud-dark"] .login-card::before {
  top: -1px; left: -1px;
  border-top: 2px solid #45ecff;
  border-left: 2px solid #45ecff;
  box-shadow: -1px -1px 8px rgba(34, 224, 255, 0.6);
}
html[data-theme="hud-dark"] .login-card::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid #45ecff;
  border-right: 2px solid #45ecff;
  box-shadow: 1px 1px 8px rgba(34, 224, 255, 0.6);
}

/* ---- Misc text elements ---- */
html[data-theme="hud-dark"] .form-note,
html[data-theme="hud-dark"] .ff-note {
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
html[data-theme="hud-dark"] .plan-link {
  color: #45ecff;
  text-shadow: 0 0 6px rgba(34, 224, 255, 0.5);
}
html[data-theme="hud-dark"] .plan-link:hover {
  color: #eaffff;
}
html[data-theme="hud-dark"] .kv .k {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}

/* ---- Focus ring ---- */
html[data-theme="hud-dark"] :focus-visible {
  outline: 2px solid #45ecff;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(34, 224, 255, 0.6);
}


html[data-theme="hud-light"] {
  /* ── Semantic token overrides (cascade to components + ECharts) ── */
  --surface-page:   #eef6f9;
  --surface-raised: #ffffff;
  --surface-sunken: #f4fbfd;

  --text-primary:   #072a35;
  --text-secondary: #2c6577;
  --text-muted:     #6a97a5;

  --border-default: #bfe0ea;
  --border-strong:  #0891b2;
  --focus-ring:     #0e7490;

  --font-family-base: "SFMono-Regular", "JetBrains Mono", "Cascadia Code", "Fira Mono", Consolas, "Roboto Mono", ui-monospace, monospace;
  --radius-sm: 2px;

  --priority-crit: #e11d48;
  --priority-high: #ea580c;
  --priority-med:  #ca8a04;
  --priority-low:  #059669;
  --priority-none: #0891b2;

  --state-danger:    #e11d48;
  --state-warning:   #ea580c;
  --state-attention: #ca8a04;
  --state-ok:        #059669;
  --state-neutral:   #6a97a5;
  --state-info:      #0891b2;
}

/* ── Page canvas: airy light + faint tactical grid ── */
html[data-theme="hud-light"] body {
  background-color: #eef6f9;
  background-image:
    linear-gradient(rgba(8, 145, 178, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 145, 178, 0.045) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  color: var(--text-primary);
  font-family: var(--font-family-base);
  letter-spacing: 0.01em;
}

/* ── Header ── */
html[data-theme="hud-light"] .app-header {
  background: linear-gradient(180deg, #ffffff, #f4fbfd);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 1px 0 rgba(8, 145, 178, 0.18), 0 2px 6px rgba(7, 42, 53, 0.05);
}
html[data-theme="hud-light"] .brand,
html[data-theme="hud-light"] .app-title {
  color: #0e7490;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}
html[data-theme="hud-light"] .user-chip {
  border-left: 1px solid var(--border-default);
  color: var(--text-secondary);
}

/* ── Footer ── */
html[data-theme="hud-light"] .app-footer {
  background: #f4fbfd;
  border-top: 1px solid var(--border-strong);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-sm);
}

/* ── Primary nav ── */
html[data-theme="hud-light"] .app-nav button {
  color: var(--text-secondary);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  border-radius: 2px;
}
html[data-theme="hud-light"] .app-nav button:hover {
  color: #0e7490;
  background: rgba(8, 145, 178, 0.08);
  border-color: var(--border-default);
}
html[data-theme="hud-light"] .app-nav button[aria-current="page"] {
  color: #ffffff;
  background: #0891b2;
  border-color: #0e7490;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(8, 145, 178, 0.35);
}

/* ── Nav dropdown group ── */
html[data-theme="hud-light"] .nav-group > summary {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  border-radius: 2px;
}
html[data-theme="hud-light"] .nav-group > summary:hover {
  color: #0e7490;
  background: rgba(8, 145, 178, 0.08);
}
html[data-theme="hud-light"] .nav-group[open] > summary {
  color: #ffffff;
  background: #0891b2;
  border-color: #0e7490;
}
html[data-theme="hud-light"] .nav-menu {
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(7, 42, 53, 0.14);
}
html[data-theme="hud-light"] .nav-menu-item {
  color: var(--text-primary);
  border-radius: 2px;
  letter-spacing: 0.04em;
}
html[data-theme="hud-light"] .nav-menu-item:hover {
  background: rgba(8, 145, 178, 0.12);
  color: #0e7490;
}

/* ── Freshness pill ── */
html[data-theme="hud-light"] .freshness {
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #f4fbfd;
}
html[data-theme="hud-light"] .freshness.stale {
  color: #b45309;
  border-color: var(--state-warning);
}

/* ── Buttons ── */
html[data-theme="hud-light"] button.btn {
  background: #ffffff;
  color: #0e7490;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
html[data-theme="hud-light"] button.btn:hover {
  background: rgba(8, 145, 178, 0.10);
  border-color: #0e7490;
  color: #072a35;
}
html[data-theme="hud-light"] button.btn.primary {
  background: #0891b2;
  color: #ffffff;
  border-color: #0e7490;
  box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);
}
html[data-theme="hud-light"] button.btn.primary:hover {
  background: #0e7490;
  color: #ffffff;
}
html[data-theme="hud-light"] button.btn.danger {
  background: #ffffff;
  border-color: var(--priority-crit);
  color: #be123c;
}
html[data-theme="hud-light"] button.btn.danger:hover {
  background: rgba(225, 29, 72, 0.10);
  color: #9f1239;
}

/* ── Data table ── */
html[data-theme="hud-light"] table.data {
  background: #ffffff;
  border: 1px solid var(--border-default);
}
html[data-theme="hud-light"] table.data thead th,
html[data-theme="hud-light"] table.data th {
  color: #0e7490;
  background: #f4fbfd;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
}
html[data-theme="hud-light"] table.data tbody td {
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
}
html[data-theme="hud-light"] table.data tbody tr:hover {
  background: rgba(8, 145, 178, 0.07);
}
/* sticky reco header keeps theme surface */
html[data-theme="hud-light"] .reco-wrap thead th {
  background: #f4fbfd;
}

/* ── Metric cards ── */
html[data-theme="hud-light"] .metric {
  position: relative;
  background: linear-gradient(180deg, #f4fbfd, #eafafd);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(7, 42, 53, 0.06);
}
html[data-theme="hud-light"] .metric::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 12px; height: 12px;
  border-top: 2px solid #0891b2;
  border-left: 2px solid #0891b2;
}
html[data-theme="hud-light"] .metric::after {
  content: "";
  position: absolute; bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-bottom: 2px solid #0891b2;
  border-right: 2px solid #0891b2;
}
html[data-theme="hud-light"] .metric .value {
  color: #072a35;
  font-weight: 700;
}
html[data-theme="hud-light"] .metric .label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Badge ── */
html[data-theme="hud-light"] .badge {
  letter-spacing: 0.03em;
  border-radius: 2px;
}

/* ── Chart card ── */
html[data-theme="hud-light"] .chart-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  padding: var(--space-4);
  box-shadow: 0 1px 4px rgba(7, 42, 53, 0.06);
}
html[data-theme="hud-light"] .chart-card::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 12px; height: 12px;
  border-top: 2px solid #0891b2;
  border-right: 2px solid #0891b2;
}
html[data-theme="hud-light"] .chart-card > h3 {
  color: #0e7490;
}

/* ── Cart panel ── */
html[data-theme="hud-light"] .cart-panel {
  position: sticky;
  background: linear-gradient(180deg, #f4fbfd, #eafafd);
  border: 1px solid var(--border-default);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(7, 42, 53, 0.07);
}
html[data-theme="hud-light"] .cart-panel.has-items {
  border-color: var(--border-strong);
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.2);
}
html[data-theme="hud-light"] .cart-panel.has-items::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 12px; height: 12px;
  border-top: 2px solid #0891b2;
  border-left: 2px solid #0891b2;
}

/* ── Inputs / selects ── */
html[data-theme="hud-light"] .filters input,
html[data-theme="hud-light"] .filters select,
html[data-theme="hud-light"] input,
html[data-theme="hud-light"] select,
html[data-theme="hud-light"] textarea,
html[data-theme="hud-light"] .ff-input,
html[data-theme="hud-light"] .ff-note,
html[data-theme="hud-light"] form.stack input,
html[data-theme="hud-light"] form.stack select {
  background: #f4fbfd;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
}
html[data-theme="hud-light"] .filters input:focus,
html[data-theme="hud-light"] .filters select:focus,
html[data-theme="hud-light"] input:focus,
html[data-theme="hud-light"] select:focus,
html[data-theme="hud-light"] textarea:focus,
html[data-theme="hud-light"] .ff-input:focus,
html[data-theme="hud-light"] .ff-note:focus {
  border-color: #0e7490;
  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2);
  outline: none;
}
html[data-theme="hud-light"] .ff-note {
  color: var(--text-muted);
  border-color: var(--border-default);
}

/* ── System states ── */
html[data-theme="hud-light"] .state {
  color: var(--text-secondary);
  border: 1px dashed var(--border-strong);
  border-radius: 2px;
  background: rgba(8, 145, 178, 0.03);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
html[data-theme="hud-light"] .state.error {
  border-style: solid;
  border-color: var(--priority-crit);
  color: #be123c;
}

/* ── Toast ── */
html[data-theme="hud-light"] .toast {
  background: #0e7490;
  color: #ffffff;
  border: 1px solid #0891b2;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(7, 42, 53, 0.2);
}

/* ── Dialog ── */
html[data-theme="hud-light"] .dialog-backdrop {
  background: rgba(7, 42, 53, 0.4);
}
html[data-theme="hud-light"] .dialog {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  box-shadow: 0 8px 30px rgba(7, 42, 53, 0.22);
}

/* ── Headings ── */
html[data-theme="hud-light"] .screen-title,
html[data-theme="hud-light"] h2.screen-title {
  color: #072a35;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--border-default);
  padding-bottom: var(--space-2);
}
html[data-theme="hud-light"] h3 {
  color: #0e7490;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Login ── */
html[data-theme="hud-light"] .login-wrap {
  background-color: #eef6f9;
  background-image:
    linear-gradient(rgba(8, 145, 178, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 145, 178, 0.05) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
}
html[data-theme="hud-light"] .login-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(7, 42, 53, 0.1);
}
html[data-theme="hud-light"] .login-card::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px;
  border-top: 2px solid #0891b2;
  border-left: 2px solid #0891b2;
}
html[data-theme="hud-light"] .form-note {
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* ── Detail / KV / plan link ── */
html[data-theme="hud-light"] .plan-link {
  color: #0e7490;
}
html[data-theme="hud-light"] .kv .k {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--font-size-sm);
}
html[data-theme="hud-light"] .detail-group h3 {
  color: #0e7490;
  border-bottom: 1px solid var(--border-strong);
}



/* ================================================================
   FIX (hud-dark): непрозорі фони для ОВЕРЛЕЇВ. Поверхні теми напівпрозорі
   (--surface-raised: rgba(...)), тож спливні меню, модалки та липкі елементи
   просвічували контент під собою. Тут робимо їх суцільними (той самий відтінок).
   ================================================================ */
html[data-theme="hud-dark"] .nav-menu,
html[data-theme="hud-dark"] .hdr-dropdown,
html[data-theme="hud-dark"] .col-menu,
html[data-theme="hud-dark"] .combo-list,
html[data-theme="hud-dark"] .dialog {
  background: #061a26;
  box-shadow: 0 0 0 1px rgba(34, 224, 255, 0.22), 0 12px 34px rgba(0, 0, 0, 0.78), 0 0 18px rgba(34, 224, 255, 0.16);
}
html[data-theme="hud-dark"] .dialog-backdrop { background: rgba(2, 10, 16, 0.72); }
html[data-theme="hud-dark"] .cart-panel { background: #061a26; }
html[data-theme="hud-dark"] .reco-wrap thead th { background: #061a26; }
html[data-theme="hud-dark"] .toast { background: #061a26; }



/* ================================================================
   ТЕМА «МІНІМАЛ» — тиха розкіш / едиторіал: теплі нейтралі, засічковий
   дисплейний шрифт для заголовків, великі заокруглені картки-герої (KPI),
   кнопки-пігулки, тонкі бордюри, повітряні відступи, мʼякі тіні.
   Дві версії: minimal-light (тепла кістяна) і minimal-dark (тепла графітова).
   Усі селектори строго під html[data-theme="minimal-*"]. Оверлеї — НЕПРОЗОРІ
   від початку (урок hud-dark): жодних напівпрозорих --surface-raised.
   ================================================================ */

/* ---------- MINIMAL — LIGHT ---------- */
html[data-theme="minimal-light"] {
  --surface-page:   #f6f4ef;   /* тепла кістяна */
  --surface-raised: #ffffff;   /* картки — суцільний білий (оверлеї не просвічують) */
  --surface-sunken: #f1ede6;   /* поля вводу / доріжки */
  --text-primary:   #1c1a16;   /* тепла майже-чорна */
  --text-secondary: #55524b;
  --text-muted:     #8c8880;
  --border-default: #e7e2da;
  --border-strong:  #cfc8bc;
  --focus-ring:     #1c1a16;
  --state-danger:    #a6402f;
  --state-warning:   #b4622a;
  --state-attention: #a07b2e;
  --state-ok:        #4e7a4e;
  --state-neutral:   #9a958b;
  --state-info:      #55524b;
  --priority-crit: #a6402f;
  --priority-high: #b4622a;
  --priority-med:  #a07b2e;
  --priority-low:  #4e7a4e;
  --priority-none: #8c8880;
  --font-serif: "e-Ukraine Head", "e-Ukraine", Georgia, Cambria, "Times New Roman", serif;   /* e-Ukraine (Diia) — якщо встановлений у системі; далі — засічкові фолбеки */
}
html[data-theme="minimal-light"] body {
  background:
    radial-gradient(1200px 420px at 50% -8%, rgba(28, 26, 22, 0.05), transparent 70%),
    var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  letter-spacing: 0.005em;
}
html[data-theme="minimal-light"] ::selection { background: rgba(28, 26, 22, 0.12); }

/* Засічкові дисплейні заголовки */
html[data-theme="minimal-light"] .screen-title,
html[data-theme="minimal-light"] .app-title,
html[data-theme="minimal-light"] .metric .value,
html[data-theme="minimal-light"] .chart-card > h3,
html[data-theme="minimal-light"] .detail-group h3,
html[data-theme="minimal-light"] .dialog h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Шапка / бренд */
html[data-theme="minimal-light"] .app-header {
  background: #fbfaf7;
  border-bottom: 1px solid var(--border-default);
}
html[data-theme="minimal-light"] .brand {
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Навігація (вкладки + група «Довідники») */
html[data-theme="minimal-light"] .app-nav button,
html[data-theme="minimal-light"] .nav-group > summary {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  letter-spacing: 0.01em;
  list-style: none;
}
html[data-theme="minimal-light"] .nav-group > summary::-webkit-details-marker { display: none; }
html[data-theme="minimal-light"] .app-nav button:hover,
html[data-theme="minimal-light"] .nav-group > summary:hover {
  background: rgba(28, 26, 22, 0.05);
  color: var(--text-primary);
}
html[data-theme="minimal-light"] .app-nav button[aria-current="page"],
html[data-theme="minimal-light"] .nav-group[open] > summary {
  background: #ede9e1;
  color: var(--text-primary);
  font-weight: 600;
  border-color: var(--border-default);
}

/* Тригери меню шапки (система / користувач) */
html[data-theme="minimal-light"] .hdr-menu > summary {
  background: #ffffff;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  border-radius: 999px;
}
html[data-theme="minimal-light"] .hdr-menu > summary:hover,
html[data-theme="minimal-light"] .hdr-menu[open] > summary { background: #f1ede6; }
html[data-theme="minimal-light"] .hdr-info { color: var(--text-muted); border-bottom-color: var(--border-default); }

/* Спливні оверлеї (меню/списки/діалог) — НЕПРОЗОРІ, заокруглені, мʼяка тінь */
html[data-theme="minimal-light"] .hdr-dropdown,
html[data-theme="minimal-light"] .nav-menu,
html[data-theme="minimal-light"] .col-menu,
html[data-theme="minimal-light"] .combo-list,
html[data-theme="minimal-light"] .dialog {
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 18px 44px -24px rgba(28, 26, 22, 0.35), 0 2px 8px rgba(28, 26, 22, 0.05);
}
html[data-theme="minimal-light"] .hdr-item,
html[data-theme="minimal-light"] .nav-menu-item,
html[data-theme="minimal-light"] .combo-item {
  color: var(--text-primary);
  border-radius: 8px;
}
html[data-theme="minimal-light"] .hdr-item:hover,
html[data-theme="minimal-light"] .nav-menu-item:hover,
html[data-theme="minimal-light"] .combo-item:hover { background: rgba(28, 26, 22, 0.05); }

/* Футер */
html[data-theme="minimal-light"] .app-footer {
  background: #fbfaf7;
  border-top: 1px solid var(--border-default);
}
html[data-theme="minimal-light"] .footer-brand { color: var(--text-secondary); }
html[data-theme="minimal-light"] .footer-note { color: var(--text-muted); }

/* Кнопки-пігулки */
html[data-theme="minimal-light"] .btn {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
html[data-theme="minimal-light"] .btn:hover {
  background: #f1ede6;
  box-shadow: 0 2px 10px -4px rgba(28, 26, 22, 0.3);
}
html[data-theme="minimal-light"] .btn.primary {
  background: #1c1a16;
  color: #f6f4ef;
  border-color: #1c1a16;
}
html[data-theme="minimal-light"] .btn.primary:hover {
  background: #2a2620;
  color: #ffffff;
  box-shadow: 0 6px 18px -8px rgba(28, 26, 22, 0.55);
}
html[data-theme="minimal-light"] .btn.danger {
  background: #ffffff;
  color: var(--state-danger);
  border-color: var(--state-danger);
}
html[data-theme="minimal-light"] .btn.danger:hover { background: rgba(166, 64, 47, 0.08); }
html[data-theme="minimal-light"] .btn:disabled { opacity: 0.5; box-shadow: none; }
html[data-theme="minimal-light"] .btn-sm { padding: 4px 12px; }

/* Таблиці — повітряні, з тонкими роздільниками */
html[data-theme="minimal-light"] table.data { background: transparent; }
html[data-theme="minimal-light"] table.data thead th,
html[data-theme="minimal-light"] .reco-wrap thead th {
  background: var(--surface-page);   /* липкий заголовок — суцільний фон сторінки */
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-default);
  box-shadow: none;
}
html[data-theme="minimal-light"] table.data th,
html[data-theme="minimal-light"] table.data td { border-bottom: 1px solid var(--border-default); }
html[data-theme="minimal-light"] table.data tbody td { color: var(--text-primary); }
html[data-theme="minimal-light"] table.data tbody tr:hover { background: rgba(28, 26, 22, 0.035); }
html[data-theme="minimal-light"] table.data tbody tr[data-priority="red"]         { background: rgba(166, 64, 47, 0.08); }
html[data-theme="minimal-light"] table.data tbody tr[data-priority="orange"]      { background: rgba(180, 98, 42, 0.08); }
html[data-theme="minimal-light"] table.data tbody tr[data-priority="yellow"]      { background: rgba(160, 123, 46, 0.08); }
html[data-theme="minimal-light"] table.data tbody tr[data-priority="no_movement"] { background: rgba(140, 136, 128, 0.08); }

/* Картки-метрики (KPI) — фірмові темні заокруглені герої на кістяному тлі */
html[data-theme="minimal-light"] .metric {
  background: linear-gradient(158deg, #211e18 0%, #14120e 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 18px 20px;
  min-width: 160px;
  color: #efebe1;
  box-shadow: 0 26px 50px -30px rgba(20, 18, 14, 0.55), 0 2px 6px rgba(20, 18, 14, 0.08);
}
html[data-theme="minimal-light"] .metric .value { color: #f4f1ea; font-weight: 500; }
html[data-theme="minimal-light"] .metric .label {
  color: #a7a296;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}

/* Світлі картки (графіки / деталі / кошик / вхід / порожні стани) */
html[data-theme="minimal-light"] .chart-card {
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(28, 26, 22, 0.04);
}
html[data-theme="minimal-light"] .chart-card > h3 { color: var(--text-primary); }
html[data-theme="minimal-light"] .detail-group h3 { color: var(--text-primary); border-bottom-color: var(--border-default); }
html[data-theme="minimal-light"] .kv .k {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}
html[data-theme="minimal-light"] .cart-panel {
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28, 26, 22, 0.04);
}
html[data-theme="minimal-light"] .cart-panel.has-items {
  border-color: var(--border-strong);
  box-shadow: 0 10px 30px -20px rgba(28, 26, 22, 0.4);
}
html[data-theme="minimal-light"] .chip {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 2px 10px;
}
html[data-theme="minimal-light"] .login-card {
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: 22px;
  box-shadow: 0 30px 60px -34px rgba(28, 26, 22, 0.4);
}
html[data-theme="minimal-light"] .state { border-color: var(--border-default); color: var(--text-muted); border-radius: 16px; }
html[data-theme="minimal-light"] .state.error { border-color: var(--state-danger); color: var(--text-primary); }

/* Поля вводу */
html[data-theme="minimal-light"] input,
html[data-theme="minimal-light"] select,
html[data-theme="minimal-light"] textarea,
html[data-theme="minimal-light"] .filters input,
html[data-theme="minimal-light"] .filters select,
html[data-theme="minimal-light"] form.stack input,
html[data-theme="minimal-light"] form.stack select,
html[data-theme="minimal-light"] .hdr-theme select,
html[data-theme="minimal-light"] .ff-input,
html[data-theme="minimal-light"] .ff-note,
html[data-theme="minimal-light"] .cart-qty,
html[data-theme="minimal-light"] .combo-input {
  background: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 7px 10px;
}
html[data-theme="minimal-light"] input:focus,
html[data-theme="minimal-light"] select:focus,
html[data-theme="minimal-light"] textarea:focus,
html[data-theme="minimal-light"] .combo-input:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(28, 26, 22, 0.08);
}

/* Тост / затемнення / посилання / бейджі */
html[data-theme="minimal-light"] .toast {
  background: #1c1a16;
  color: #f6f4ef;
  border-radius: 999px;
  box-shadow: 0 16px 34px -18px rgba(20, 18, 14, 0.6);
}
html[data-theme="minimal-light"] .dialog-backdrop { background: rgba(28, 26, 22, 0.28); }
html[data-theme="minimal-light"] .plan-link { color: var(--text-secondary); text-decoration-color: var(--border-strong); }
html[data-theme="minimal-light"] .badge { letter-spacing: 0.02em; }


/* ---------- MINIMAL — DARK ---------- */
html[data-theme="minimal-dark"] {
  --surface-page:   #131110;   /* тепла майже-чорна */
  --surface-raised: #1c1915;   /* картки — суцільний графіт (оверлеї не просвічують) */
  --surface-sunken: #100e0c;
  --text-primary:   #ece7dc;
  --text-secondary: #b3ac9f;
  --text-muted:     #877f72;
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --focus-ring:     #e8e1d2;
  --state-danger:    #e07a66;
  --state-warning:   #e0925a;
  --state-attention: #d6b25a;
  --state-ok:        #84c084;
  --state-neutral:   #9a958b;
  --state-info:      #b3ac9f;
  --priority-crit: #e07a66;
  --priority-high: #e0925a;
  --priority-med:  #d6b25a;
  --priority-low:  #84c084;
  --priority-none: #9a958b;
  --font-serif: "e-Ukraine Head", "e-Ukraine", Georgia, Cambria, "Times New Roman", serif;   /* e-Ukraine (Diia) — якщо встановлений у системі; далі — засічкові фолбеки */
}
html[data-theme="minimal-dark"] body {
  background:
    radial-gradient(1200px 460px at 50% -10%, rgba(120, 96, 54, 0.10), transparent 68%),
    var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  letter-spacing: 0.005em;
}
html[data-theme="minimal-dark"] ::selection { background: rgba(232, 225, 210, 0.16); }

html[data-theme="minimal-dark"] .screen-title,
html[data-theme="minimal-dark"] .app-title,
html[data-theme="minimal-dark"] .metric .value,
html[data-theme="minimal-dark"] .chart-card > h3,
html[data-theme="minimal-dark"] .detail-group h3,
html[data-theme="minimal-dark"] .dialog h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

html[data-theme="minimal-dark"] .app-header {
  background: linear-gradient(180deg, rgba(30, 26, 20, 0.9), rgba(20, 17, 13, 0.8));
  border-bottom: 1px solid var(--border-default);
  backdrop-filter: blur(6px);
}
html[data-theme="minimal-dark"] .brand { color: #f1ece1; font-weight: 700; letter-spacing: 0.02em; }

html[data-theme="minimal-dark"] .app-nav button,
html[data-theme="minimal-dark"] .nav-group > summary {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  letter-spacing: 0.01em;
  list-style: none;
}
html[data-theme="minimal-dark"] .nav-group > summary::-webkit-details-marker { display: none; }
html[data-theme="minimal-dark"] .app-nav button:hover,
html[data-theme="minimal-dark"] .nav-group > summary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}
html[data-theme="minimal-dark"] .app-nav button[aria-current="page"],
html[data-theme="minimal-dark"] .nav-group[open] > summary {
  background: #2a2419;
  color: #f3eee3;
  font-weight: 600;
  border-color: var(--border-default);
}

html[data-theme="minimal-dark"] .hdr-menu > summary {
  background: #1c1915;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  border-radius: 999px;
}
html[data-theme="minimal-dark"] .hdr-menu > summary:hover,
html[data-theme="minimal-dark"] .hdr-menu[open] > summary { background: #262119; }
html[data-theme="minimal-dark"] .hdr-info { color: var(--text-muted); border-bottom-color: var(--border-default); }

html[data-theme="minimal-dark"] .hdr-dropdown,
html[data-theme="minimal-dark"] .nav-menu,
html[data-theme="minimal-dark"] .col-menu,
html[data-theme="minimal-dark"] .combo-list,
html[data-theme="minimal-dark"] .dialog {
  background: #201c16;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03);
}
html[data-theme="minimal-dark"] .hdr-item,
html[data-theme="minimal-dark"] .nav-menu-item,
html[data-theme="minimal-dark"] .combo-item {
  color: var(--text-primary);
  border-radius: 8px;
}
html[data-theme="minimal-dark"] .hdr-item:hover,
html[data-theme="minimal-dark"] .nav-menu-item:hover,
html[data-theme="minimal-dark"] .combo-item:hover { background: rgba(255, 255, 255, 0.06); }

html[data-theme="minimal-dark"] .app-footer {
  background: #16130f;
  border-top: 1px solid var(--border-default);
}
html[data-theme="minimal-dark"] .footer-brand { color: var(--text-secondary); }
html[data-theme="minimal-dark"] .footer-note { color: var(--text-muted); }

html[data-theme="minimal-dark"] .btn {
  background: #221e18;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
html[data-theme="minimal-dark"] .btn:hover { background: #2a251e; box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.5); }
html[data-theme="minimal-dark"] .btn.primary {
  background: #ede6d8;
  color: #1a1712;
  border-color: #ede6d8;
}
html[data-theme="minimal-dark"] .btn.primary:hover {
  background: #f5efe3;
  box-shadow: 0 8px 22px -10px rgba(237, 230, 216, 0.35);
}
html[data-theme="minimal-dark"] .btn.danger {
  background: transparent;
  color: var(--state-danger);
  border-color: rgba(224, 122, 102, 0.6);
}
html[data-theme="minimal-dark"] .btn.danger:hover { background: rgba(224, 122, 102, 0.12); }
html[data-theme="minimal-dark"] .btn:disabled { opacity: 0.45; box-shadow: none; }
html[data-theme="minimal-dark"] .btn-sm { padding: 4px 12px; }

html[data-theme="minimal-dark"] table.data { background: transparent; }
html[data-theme="minimal-dark"] table.data thead th,
html[data-theme="minimal-dark"] .reco-wrap thead th {
  background: var(--surface-page);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-default);
  box-shadow: none;
}
html[data-theme="minimal-dark"] table.data th,
html[data-theme="minimal-dark"] table.data td { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
html[data-theme="minimal-dark"] table.data tbody td { color: var(--text-primary); }
html[data-theme="minimal-dark"] table.data tbody tr:hover { background: rgba(255, 255, 255, 0.045); }
html[data-theme="minimal-dark"] table.data tbody tr[data-priority="red"]         { background: rgba(224, 122, 102, 0.12); }
html[data-theme="minimal-dark"] table.data tbody tr[data-priority="orange"]      { background: rgba(224, 146, 90, 0.12); }
html[data-theme="minimal-dark"] table.data tbody tr[data-priority="yellow"]      { background: rgba(214, 178, 90, 0.12); }
html[data-theme="minimal-dark"] table.data tbody tr[data-priority="no_movement"] { background: rgba(138, 133, 122, 0.10); }

html[data-theme="minimal-dark"] .metric {
  background: linear-gradient(158deg, #241f18 0%, #171310 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  padding: 18px 20px;
  min-width: 160px;
  color: #efe9dc;
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="minimal-dark"] .metric .value { color: #f5f0e4; font-weight: 500; }
html[data-theme="minimal-dark"] .metric .label {
  color: #a79f8f;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}

html[data-theme="minimal-dark"] .chart-card {
  background: #1c1915;
  border: 1px solid var(--border-default);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
html[data-theme="minimal-dark"] .chart-card > h3 { color: var(--text-primary); }
html[data-theme="minimal-dark"] .detail-group h3 { color: var(--text-primary); border-bottom-color: var(--border-default); }
html[data-theme="minimal-dark"] .kv .k {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}
html[data-theme="minimal-dark"] .cart-panel {
  background: #1c1915;
  border: 1px solid var(--border-default);
  border-radius: 16px;
}
html[data-theme="minimal-dark"] .cart-panel.has-items {
  border-color: var(--border-strong);
  box-shadow: 0 12px 34px -22px rgba(0, 0, 0, 0.7);
}
html[data-theme="minimal-dark"] .chip {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 2px 10px;
}
html[data-theme="minimal-dark"] .login-card {
  background: #1c1915;
  border: 1px solid var(--border-default);
  border-radius: 22px;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.75);
}
html[data-theme="minimal-dark"] .state { border-color: var(--border-default); color: var(--text-muted); border-radius: 16px; }
html[data-theme="minimal-dark"] .state.error { border-color: var(--state-danger); color: var(--text-primary); }

html[data-theme="minimal-dark"] input,
html[data-theme="minimal-dark"] select,
html[data-theme="minimal-dark"] textarea,
html[data-theme="minimal-dark"] .filters input,
html[data-theme="minimal-dark"] .filters select,
html[data-theme="minimal-dark"] form.stack input,
html[data-theme="minimal-dark"] form.stack select,
html[data-theme="minimal-dark"] .hdr-theme select,
html[data-theme="minimal-dark"] .ff-input,
html[data-theme="minimal-dark"] .ff-note,
html[data-theme="minimal-dark"] .cart-qty,
html[data-theme="minimal-dark"] .combo-input {
  background: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 7px 10px;
}
html[data-theme="minimal-dark"] input:focus,
html[data-theme="minimal-dark"] select:focus,
html[data-theme="minimal-dark"] textarea:focus,
html[data-theme="minimal-dark"] .combo-input:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(232, 225, 210, 0.14);
}

html[data-theme="minimal-dark"] .toast {
  background: #26221b;
  color: #ece7dc;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.7);
}
html[data-theme="minimal-dark"] .dialog-backdrop { background: rgba(8, 6, 4, 0.62); }
html[data-theme="minimal-dark"] .plan-link { color: var(--text-secondary); text-decoration-color: var(--border-strong); }
html[data-theme="minimal-dark"] .badge { letter-spacing: 0.02em; }


/* ---------- MINIMAL — фікси після адверсаріального рев'ю ---------- */

/* (1) Нативні чекбокси/радіо не мають отримувати оформлення полів вводу
   (заливка sunken + бордер + радіус + padding спотворюють контрол; у темній
   темі sunken майже-чорний і ховає стан). Повертаємо рідний вигляд + акцент. */
html[data-theme="minimal-light"] input[type="checkbox"],
html[data-theme="minimal-light"] input[type="radio"] {
  background: none; border: initial; border-radius: 0; padding: 0;
  accent-color: var(--text-primary);
}
html[data-theme="minimal-dark"] input[type="checkbox"],
html[data-theme="minimal-dark"] input[type="radio"] {
  background: none; border: initial; border-radius: 0; padding: 0;
  accent-color: var(--text-primary);
}

/* (3) Автодоповнення SKU (.combo-list) кріпиться під полем: квадратний верх,
   стик у 1px, щоб не «відриватися» заокругленим верхом. */
html[data-theme="minimal-light"] .combo-list,
html[data-theme="minimal-dark"] .combo-list {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -1px;
}

/* (4) Липкий заголовок «Огляду»: повертаємо роздільник inset-тінню — при
   border-collapse sticky-th не перемальовує border-bottom під час прокручування. */
html[data-theme="minimal-light"] .reco-wrap thead th { box-shadow: inset 0 -1px 0 var(--border-strong); }
html[data-theme="minimal-dark"]  .reco-wrap thead th { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14); }

/* (5) Контраст: мітки заголовків таблиць у світлій темі — з --text-muted (~3.2:1)
   до #6c685f (~5:1, WCAG AA), лишаючись тихо-приглушеними. */
html[data-theme="minimal-light"] table.data thead th,
html[data-theme="minimal-light"] .reco-wrap thead th { color: #6c685f; }


/* ---------- Фікс легібельності лічильників у фільтрах ---------- */
/* hud-light: --priority-med (#ca8a04) дає лише 2.94:1 на білій панелі .col-menu.
   Перевизначаємо токен ЛИШЕ в межах панелі фільтра (інлайн var(--priority-med)
   успадкує темніше значення), не чіпаючи колір пріоритету в таблиці. */
html[data-theme="hud-light"] .filter-menu { --priority-med: #a06a00; }


/* ================================================================
   THEME: boom-orange — чиста помаранчева платформа на майже-чорному
   (натхнено прототипом «BOOM SUPPLY AI»: помаранчевий акцент, uppercase-мітки з
    letter-spacing, чисті картки без HUD-кутиків, семантичні кольори лише на
    значеннях/гліфах — безбарвне кодування збережено). Scope: html[data-theme="boom-orange"].
   ================================================================ */
html[data-theme="boom-orange"] {
  --surface-page:    #0b0b0e;
  --surface-raised:  #15151a;
  --surface-sunken:  #0f0f13;

  --text-primary:    #ededf0;
  --text-secondary:  #b6b6bd;
  --text-muted:      #83838b;

  --border-default:  #26262c;
  --border-strong:   rgba(255, 122, 0, 0.45);
  --focus-ring:      #ff7a00;

  --font-family-base: "JetBrains Mono", "SFMono-Regular", ui-monospace, Consolas, "Roboto Mono", monospace;
  --radius-sm: 6px;                       /* м'які кути (чистіше за гострий tactical) */

  --priority-crit: #ff4d4d;
  --priority-high: #ff8a1f;
  --priority-med:  #ffc21f;
  --priority-low:  #55c06a;
  --priority-none: #9a9aa0;

  --state-danger:    #ff4d4d;
  --state-warning:   #ff8a1f;
  --state-attention: #ffc21f;
  --state-ok:        #55c06a;
  --state-neutral:   #9a9aa0;
  --state-info:      #d8d8dc;

  --color-neutral-0:   #ededf0;
  --color-neutral-50:  rgba(255, 122, 0, 0.06);
  --color-neutral-900: #ff7a00;

  color-scheme: dark;
}

/* ---- Base ---- */
html[data-theme="boom-orange"] body {
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255, 122, 0, 0.05), transparent 55%),
    var(--surface-page);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
html[data-theme="boom-orange"] ::selection { background: rgba(255, 122, 0, 0.32); color: #fff; }

/* ---- Header / brand / footer ---- */
html[data-theme="boom-orange"] .app-header {
  background: linear-gradient(180deg, #141418, #0e0e12);
  border-bottom: 1px solid rgba(255, 122, 0, 0.28);
  box-shadow: 0 1px 0 rgba(255, 122, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.55);
}
html[data-theme="boom-orange"] .brand,
html[data-theme="boom-orange"] .app-title {
  color: #ff8a1f;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-shadow: 0 0 8px rgba(255, 122, 0, 0.35);
}
html[data-theme="boom-orange"] .app-footer {
  background: linear-gradient(0deg, #141418, #0e0e12);
  border-top: 1px solid rgba(255, 122, 0, 0.22);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--font-size-sm);
}
html[data-theme="boom-orange"] .user-chip { border-left: 1px solid rgba(255, 122, 0, 0.28); }

/* ---- Navigation (активна вкладка — у помаранчевій рамці, як у прототипі) ---- */
html[data-theme="boom-orange"] .app-nav button,
html[data-theme="boom-orange"] .nav-group > summary {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: color .12s, border-color .12s, background .12s;
}
html[data-theme="boom-orange"] .app-nav button:hover,
html[data-theme="boom-orange"] .nav-group > summary:hover { color: #ff9a3d; background: rgba(255, 122, 0, 0.06); }
html[data-theme="boom-orange"] .app-nav button[aria-current="page"] {
  color: #ff8a1f;
  font-weight: var(--font-weight-medium);
  border-color: rgba(255, 122, 0, 0.55);
  background: rgba(255, 122, 0, 0.06);
}
html[data-theme="boom-orange"] .nav-group[open] > summary { color: #ff8a1f; border-color: rgba(255, 122, 0, 0.45); }
html[data-theme="boom-orange"] .nav-menu,
html[data-theme="boom-orange"] .col-menu,
html[data-theme="boom-orange"] .combo-list {
  background: #15151a;
  border: 1px solid rgba(255, 122, 0, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
}
html[data-theme="boom-orange"] .nav-menu-item:hover,
html[data-theme="boom-orange"] .combo-item:hover { background: rgba(255, 122, 0, 0.12); color: #ff9a3d; }

/* ---- Freshness pill ---- */
html[data-theme="boom-orange"] .freshness {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid rgba(255, 122, 0, 0.4);
  background: rgba(255, 122, 0, 0.04);
}
html[data-theme="boom-orange"] .freshness:hover { color: #ff9a3d; }
html[data-theme="boom-orange"] .freshness.stale { color: #ff8a1f; border-color: rgba(255, 122, 0, 0.7); }

/* ---- Inputs ---- */
html[data-theme="boom-orange"] input,
html[data-theme="boom-orange"] select,
html[data-theme="boom-orange"] textarea {
  background: #0f0f13;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}
html[data-theme="boom-orange"] input:focus,
html[data-theme="boom-orange"] select:focus,
html[data-theme="boom-orange"] textarea:focus { border-color: rgba(255, 122, 0, 0.7); }

/* ---- Buttons (primary — суцільний помаранчевий, як «Увійти») ---- */
html[data-theme="boom-orange"] button.btn {
  background: #15151a;
  color: #ff9a3d;
  border: 1px solid rgba(255, 122, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: box-shadow .12s, background .12s, color .12s, border-color .12s;
}
html[data-theme="boom-orange"] button.btn:hover { color: #ffab52; border-color: #ff7a00; background: rgba(255, 122, 0, 0.08); }
html[data-theme="boom-orange"] button.btn.primary {
  background: linear-gradient(180deg, #ff8f28, #ff7a00);
  color: #0b0b0e;
  border-color: #ff7a00;
  font-weight: var(--font-weight-bold);
  text-transform: none;
  letter-spacing: 0.02em;
  box-shadow: 0 0 12px rgba(255, 122, 0, 0.3);
}
html[data-theme="boom-orange"] button.btn.primary:hover {
  background: linear-gradient(180deg, #ffa040, #ff8a1f);
  color: #0b0b0e;
  box-shadow: 0 0 16px rgba(255, 122, 0, 0.5);
}
html[data-theme="boom-orange"] button.btn.danger { color: #ff6a6a; border-color: rgba(255, 77, 77, 0.6); background: rgba(255, 77, 77, 0.06); }
html[data-theme="boom-orange"] button.btn:disabled { opacity: .45; box-shadow: none; }

/* ---- Tables ---- */
html[data-theme="boom-orange"] table.data { background: var(--surface-raised); border: 1px solid var(--border-default); }
html[data-theme="boom-orange"] table.data thead th,
html[data-theme="boom-orange"] .reco-wrap thead th {
  background: #0f0f13;
  color: #ff9a3d;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: var(--font-weight-bold);
  border-bottom: 1px solid rgba(255, 122, 0, 0.35);
}
html[data-theme="boom-orange"] table.data th,
html[data-theme="boom-orange"] table.data td { border-bottom: 1px solid var(--border-default); }
html[data-theme="boom-orange"] table.data tbody tr:hover { background: rgba(255, 122, 0, 0.07); }
html[data-theme="boom-orange"] table.data tbody tr[data-priority="red"]         { background: rgba(255, 77, 77, 0.09); }
html[data-theme="boom-orange"] table.data tbody tr[data-priority="orange"]      { background: rgba(255, 138, 31, 0.09); }
html[data-theme="boom-orange"] table.data tbody tr[data-priority="yellow"]      { background: rgba(255, 194, 31, 0.09); }
html[data-theme="boom-orange"] table.data tbody tr[data-priority="no_movement"] { background: rgba(154, 154, 160, 0.08); }

/* ---- Metric / KPI cards — чисті, без HUD-кутиків ---- */
html[data-theme="boom-orange"] .metric {
  background: linear-gradient(180deg, #16161b, #121216);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}
html[data-theme="boom-orange"] .metric .value { color: #f2f2f4; }


/* ================================================================
   THEME: boom-orange-light — світла пара до boom-orange
   (помаранчевий акцент на теплому off-white; контраст-безпечні значення).
   Scope: html[data-theme="boom-orange-light"].
   ================================================================ */
html[data-theme="boom-orange-light"] {
  --surface-page:    #f7f6f3;
  --surface-raised:  #ffffff;
  --surface-sunken:  #f0efec;

  --text-primary:    #1b1b1f;
  --text-secondary:  #4c4c54;
  --text-muted:      #77777f;

  --border-default:  #e3e1db;
  --border-strong:   rgba(224, 110, 0, 0.55);
  --focus-ring:      #e06e00;

  --font-family-base: "JetBrains Mono", "SFMono-Regular", ui-monospace, Consolas, "Roboto Mono", monospace;
  --radius-sm: 6px;

  --priority-crit: #c0392b;
  --priority-high: #d35400;
  --priority-med:  #b8860b;
  --priority-low:  #3f7d3f;
  --priority-none: #6b7280;

  --state-danger:    #c0392b;
  --state-warning:   #d35400;
  --state-attention: #b8860b;
  --state-ok:        #3f7d3f;
  --state-neutral:   #6b7280;
  --state-info:      #4c4c54;

  --color-neutral-0:   #1b1b1f;
  --color-neutral-50:  rgba(224, 110, 0, 0.06);
  --color-neutral-900: #e06e00;

  color-scheme: light;
}
html[data-theme="boom-orange-light"] body {
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(224, 110, 0, 0.06), transparent 55%),
    var(--surface-page);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
html[data-theme="boom-orange-light"] ::selection { background: rgba(224, 110, 0, 0.20); color: #1b1b1f; }
html[data-theme="boom-orange-light"] .app-header {
  background: linear-gradient(180deg, #ffffff, #f6f4f0);
  border-bottom: 1px solid rgba(224, 110, 0, 0.35);
  box-shadow: 0 1px 0 rgba(224, 110, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.06);
}
html[data-theme="boom-orange-light"] .brand,
html[data-theme="boom-orange-light"] .app-title { color: #e06e00; text-transform: uppercase; letter-spacing: 0.16em; }
html[data-theme="boom-orange-light"] .app-footer {
  background: linear-gradient(0deg, #ffffff, #f6f4f0);
  border-top: 1px solid rgba(224, 110, 0, 0.28);
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--font-size-sm);
}
html[data-theme="boom-orange-light"] .user-chip { border-left: 1px solid rgba(224, 110, 0, 0.3); }
html[data-theme="boom-orange-light"] .app-nav button,
html[data-theme="boom-orange-light"] .nav-group > summary {
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.09em;
  border: 1px solid transparent; border-radius: 6px; transition: color .12s, border-color .12s, background .12s;
}
html[data-theme="boom-orange-light"] .app-nav button:hover,
html[data-theme="boom-orange-light"] .nav-group > summary:hover { color: #b85a00; background: rgba(224, 110, 0, 0.07); }
html[data-theme="boom-orange-light"] .app-nav button[aria-current="page"] {
  color: #b85a00; font-weight: var(--font-weight-medium);
  border-color: rgba(224, 110, 0, 0.55); background: rgba(224, 110, 0, 0.08);
}
html[data-theme="boom-orange-light"] .nav-group[open] > summary { color: #b85a00; border-color: rgba(224, 110, 0, 0.45); }
html[data-theme="boom-orange-light"] .nav-menu,
html[data-theme="boom-orange-light"] .col-menu,
html[data-theme="boom-orange-light"] .combo-list {
  background: #ffffff; border: 1px solid rgba(224, 110, 0, 0.3); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
html[data-theme="boom-orange-light"] .nav-menu-item:hover,
html[data-theme="boom-orange-light"] .combo-item:hover { background: rgba(224, 110, 0, 0.10); color: #b85a00; }
html[data-theme="boom-orange-light"] .freshness {
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid rgba(224, 110, 0, 0.4); background: rgba(224, 110, 0, 0.05);
}
html[data-theme="boom-orange-light"] .freshness.stale { color: #b85a00; border-color: rgba(224, 110, 0, 0.7); }
html[data-theme="boom-orange-light"] input,
html[data-theme="boom-orange-light"] select,
html[data-theme="boom-orange-light"] textarea { background: #ffffff; border: 1px solid var(--border-default); color: var(--text-primary); }
html[data-theme="boom-orange-light"] input:focus,
html[data-theme="boom-orange-light"] select:focus,
html[data-theme="boom-orange-light"] textarea:focus { border-color: rgba(224, 110, 0, 0.7); }
html[data-theme="boom-orange-light"] button.btn {
  background: #ffffff; color: #b85a00; border: 1px solid rgba(224, 110, 0, 0.5);
  text-transform: uppercase; letter-spacing: 0.08em; transition: box-shadow .12s, background .12s, color .12s, border-color .12s;
}
html[data-theme="boom-orange-light"] button.btn:hover { color: #9a4d00; border-color: #e06e00; background: rgba(224, 110, 0, 0.08); }
html[data-theme="boom-orange-light"] button.btn.primary {
  background: linear-gradient(180deg, #ff8a1f, #ef7500); color: #ffffff; border-color: #e06e00;
  font-weight: var(--font-weight-bold); text-transform: none; letter-spacing: 0.02em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
html[data-theme="boom-orange-light"] button.btn.primary:hover { background: linear-gradient(180deg, #ff9a3d, #ff7a00); color: #ffffff; }
html[data-theme="boom-orange-light"] button.btn.danger { color: #b03024; border-color: rgba(192, 57, 43, 0.55); background: rgba(192, 57, 43, 0.05); }
html[data-theme="boom-orange-light"] table.data { background: var(--surface-raised); border: 1px solid var(--border-default); }
html[data-theme="boom-orange-light"] table.data thead th,
html[data-theme="boom-orange-light"] .reco-wrap thead th {
  background: #faf8f4; color: #b85a00; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: var(--font-weight-bold); border-bottom: 1px solid rgba(224, 110, 0, 0.3);
}
html[data-theme="boom-orange-light"] table.data th,
html[data-theme="boom-orange-light"] table.data td { border-bottom: 1px solid var(--border-default); }
html[data-theme="boom-orange-light"] table.data tbody tr:hover { background: rgba(224, 110, 0, 0.05); }
html[data-theme="boom-orange-light"] table.data tbody tr[data-priority="red"]         { background: rgba(192, 57, 43, 0.06); }
html[data-theme="boom-orange-light"] table.data tbody tr[data-priority="orange"]      { background: rgba(211, 84, 0, 0.06); }
html[data-theme="boom-orange-light"] table.data tbody tr[data-priority="yellow"]      { background: rgba(184, 134, 11, 0.06); }
html[data-theme="boom-orange-light"] table.data tbody tr[data-priority="no_movement"] { background: rgba(107, 114, 128, 0.05); }
html[data-theme="boom-orange-light"] .metric {
  background: #ffffff; border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}