/* Тёмная версия той же стеклянной палитры. Светлая тема не меняется. */

html[data-theme="dark"] {
  color-scheme: dark;

  --n-0: #122433;
  --n-25: #152a3b;
  --n-50: #1a3348;
  --n-100: #214058;
  --n-200: #2d5270;
  --n-300: #4d7090;
  --n-400: #7fa3bb;
  --n-500: #9bb8cc;
  --n-600: #c5d7e4;
  --n-700: #d7e6f0;
  --n-800: #e8f2f8;
  --n-900: #f4f9fc;
  --n-950: #ffffff;

  --bg: #07111c;
  --surface: rgba(16, 34, 50, 0.72);
  --surface-2: rgba(18, 40, 58, 0.55);
  --surface-3: rgba(28, 54, 76, 0.62);
  --line: rgba(125, 186, 214, 0.24);
  --line-soft: rgba(125, 186, 214, 0.14);
  --line-strong: rgba(148, 201, 224, 0.36);
  --sky-mesh:
    radial-gradient(920px 520px at 50% -8%, rgba(56, 189, 248, 0.16), transparent 62%),
    radial-gradient(720px 480px at 0% 100%, rgba(14, 116, 168, 0.2), transparent 58%),
    radial-gradient(720px 480px at 100% 100%, rgba(14, 116, 168, 0.2), transparent 58%),
    linear-gradient(180deg, #07111c 0%, #0c1c2c 52%, #08141f 100%);
  --ink-grad: linear-gradient(180deg, #f4fbff 0%, #bae6fd 46%, #38bdf8 100%);

  --ink: #f2f8fc;
  --ink-soft: #d5e4ee;
  --muted: #9bb6c8;
  --muted-2: #7f9eb4;

  --brand-50: #123044;
  --brand-100: #173a52;
  --brand-200: #3d7ea8;
  --brand-800: #9bd4ff;
  --brand-900: #e7f6ff;
  --brand-ink: #9bd4ff;

  --nav-bg: rgba(8, 20, 32, 0.78);
  --nav-bg-2: rgba(10, 24, 38, 0.66);
  --nav-fg: rgba(214, 230, 240, 0.74);
  --nav-fg-strong: #f4f9fc;
  --nav-fg-dim: rgba(155, 182, 200, 0.82);
  --nav-hover: rgba(22, 48, 70, 0.72);
  --nav-active: rgba(18, 52, 78, 0.88);
  --nav-border: rgba(125, 186, 214, 0.22);
  --nav-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --ok: #6ee7b7;
  --ok-bg: rgba(6, 78, 59, 0.55);
  --ok-line: rgba(52, 211, 153, 0.4);
  --warn: #fcd34d;
  --warn-bg: rgba(120, 53, 15, 0.5);
  --warn-line: rgba(251, 191, 36, 0.4);
  --bad: #fca5a5;
  --bad-bg: rgba(127, 29, 29, 0.5);
  --bad-line: rgba(248, 113, 113, 0.4);
  --info: #7dd3fc;
  --info-bg: rgba(12, 74, 110, 0.55);
  --info-line: rgba(56, 189, 248, 0.4);

  --seq-1: #0c2436;
  --seq-2: #12344c;
  --seq-3: #184868;
  --div-mid: #1c3348;

  --sh-xs: 0 2px 8px rgba(0, 0, 0, 0.28);
  --sh-sm: 0 6px 18px rgba(0, 0, 0, 0.32);
  --sh-md: 0 12px 32px -10px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
  --sh-focus: 0 0 0 4px rgba(56, 189, 248, 0.28);
  --sh-glass:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.28);

  --glass: rgba(12, 26, 40, 0.66);
  --glass-strong: rgba(16, 34, 50, 0.82);
  --glass-tint: rgba(14, 32, 48, 0.5);
  --glass-edge: rgba(125, 186, 214, 0.28);
}

html[data-theme="dark"] .sky-spot {
  background: radial-gradient(560px circle at var(--mx, 48vw) var(--my, 14vh), rgba(56, 189, 248, 0.14), transparent 58%);
}

html[data-theme="dark"] .card::after,
html[data-theme="dark"] .panel::after,
html[data-theme="dark"] .kpi::after,
html[data-theme="dark"] .dash-hero::after,
html[data-theme="dark"] .auth-card::after,
html[data-theme="dark"] .auth-visual::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%),
    radial-gradient(220px circle at var(--lx, 30%) var(--ly, 0%), rgba(125, 211, 252, 0.08), transparent 58%);
}

html[data-theme="dark"] .panel-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
}

html[data-theme="dark"] .sidebar-toggle,
html[data-theme="dark"] .app-tabbar {
  background: var(--glass-strong);
  border-color: var(--glass-edge);
}

html[data-theme="dark"] .analytics-tabs,
html[data-theme="dark"] .report-tabs {
  background: var(--glass-strong);
}

html[data-theme="dark"] a {
  color: #8ecfff;
}
html[data-theme="dark"] a:hover {
  color: #d7f0ff;
}
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] a.btn-primary:hover,
html[data-theme="dark"] a.btn-primary:focus,
html[data-theme="dark"] .analytics-tab.is-active,
html[data-theme="dark"] .analytics-tab.is-active:hover,
html[data-theme="dark"] .report-tab.active,
html[data-theme="dark"] .report-tab.active:hover,
html[data-theme="dark"] .nav-pills .nav-link.active {
  color: #fff;
}

html[data-theme="dark"] .btn-primary {
  --bs-btn-hover-bg: #0060a3;
  --bs-btn-active-bg: #055186;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

html[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #9bd4ff;
  --bs-btn-border-color: #3d7ea8;
  --bs-btn-hover-bg: #123044;
  --bs-btn-hover-color: #f4fbff;
  --bs-btn-active-color: #f4fbff;
}

html[data-theme="dark"] .auth-visual-copy .eyebrow {
  color: #7dd3fc;
}

html[data-theme="dark"] .app-nav .nav-link:hover,
html[data-theme="dark"] .app-nav .nav-link.active {
  color: #e7f6ff !important;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-edge);
  background: var(--glass-strong);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  box-shadow: var(--sh-xs);
}
.theme-toggle:hover {
  color: var(--brand-ink, var(--brand-700));
  background: var(--surface-2);
}
.theme-toggle--float {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 40;
}

@media print {
  html[data-theme="dark"] {
    --ink: #122230;
    --ink-soft: #314b5e;
    --muted: #5a7f98;
    --bg: #ffffff;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-theme="dark"] {
    --surface: #122230;
    --surface-2: #152a3b;
    --glass: #122230;
    --glass-strong: #152a3b;
    --nav-bg: #0e1c2a;
  }
  html[data-theme="dark"] .panel,
  html[data-theme="dark"] .kpi,
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .exec-card,
  html[data-theme="dark"] .admin-sidebar,
  html[data-theme="dark"] .app-header,
  html[data-theme="dark"] .app-nav,
  html[data-theme="dark"] .admin-topbar,
  html[data-theme="dark"] .auth-card,
  html[data-theme="dark"] .modal-content,
  html[data-theme="dark"] .analytics-tabs,
  html[data-theme="dark"] .filter-bar {
    background: #152a3b !important;
  }
}