/*
 * dark-theme.css — тёмная тема КластерМС
 * Стиль: Landing Klaster (#0A0A14, кобальтовый синий, Space Grotesk)
 * Применяется через класс html.dark
 * fix81
 */

/* ── CSS-переменные ──────────────────────────────────────────────────── */
html.dark {
  color-scheme: dark;
}

html.dark :root,
html.dark body {
  --bg:              #0A0A14;
  --surface:         rgba(12, 12, 30, 0.94);
  --surface-strong:  #10101F;
  --surface-soft:    #161625;
  --text:            #D4D4D0;
  --muted:           #7070A0;
  --border:          #1C1C32;
  --border-strong:   #222248;
  --accent:          #5468D4;
  --accent-soft:     rgba(84, 104, 212, 0.10);
  --success:         #22c55e;
  --danger:          #ef4444;
  --shadow:          0 8px 32px rgba(0, 0, 16, 0.5);
  --accent-2:        #8b5cf6;
  --surface-glass:   rgba(12, 12, 30, 0.80);
  --shadow-lg:       0 20px 50px rgba(0, 0, 24, 0.6);
}

/* ── Body & background ───────────────────────────────────────────────── */
html.dark body {
  background:
    radial-gradient(circle at top left,  rgba(84, 104, 212, 0.07), transparent 36%),
    radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.06), transparent 40%),
    linear-gradient(180deg, #0A0A14 0%, #0C0C18 100%);
  color: var(--text);
}

html.dark body::before {
  background: radial-gradient(circle, rgba(84, 104, 212, 0.07), transparent 60%);
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
html.dark .topbar {
  background: linear-gradient(180deg,
    rgba(12, 12, 30, 0.96),
    rgba(8, 8, 20, 0.92));
  border: 1px solid rgba(26, 26, 56, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 24, 0.4);
}
html.dark .topbar::after {
  background: linear-gradient(90deg, transparent, rgba(84, 104, 212, 0.18), transparent);
}

/* ── Nav tabs ────────────────────────────────────────────────────────── */
html.dark .nav-tabs {
  background: rgba(12, 12, 30, 0.85);
  border-color: var(--border);
}

/* ── Кнопки ──────────────────────────────────────────────────────────── */
html.dark .primary-btn,
html.dark button.primary-btn,
html.dark .nav-btn.active,
html.dark .tab.active {
  background: linear-gradient(180deg, #5468D4 0%, #3040A8 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(84, 104, 212, 0.22);
  border-color: transparent;
}

html.dark .secondary-btn,
html.dark .tab,
html.dark .nav-btn {
  background: var(--surface-strong);
  color: var(--text);
  border-color: var(--border);
}

html.dark .secondary-btn:hover,
html.dark .tab:hover,
html.dark .nav-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

html.dark .nav-btn.active {
  background: linear-gradient(180deg, #5468D4 0%, #3040A8 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

html.dark .command-btn {
  background: linear-gradient(180deg, #10101F, #161625);
  border-color: #222248;
  color: #8595D8;
}

/* ── Формы ───────────────────────────────────────────────────────────── */
html.dark input,
html.dark select,
html.dark textarea {
  background: #10101F;
  color: var(--text);
  border-color: var(--border);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--muted);
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: rgba(61, 93, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(84, 104, 212, 0.09);
  background: #13132A;
}

html.dark label { color: var(--muted); }

/* ── Панели и карточки ───────────────────────────────────────────────── */
html.dark .auth-card,
html.dark .panel,
html.dark .list-item,
html.dark .modal-card,
html.dark .stat-card,
html.dark .board-column {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 24, 0.3);
}

html.dark .panel {
  background: rgba(12, 12, 30, 0.90);
  border-color: var(--border);
}

html.dark .stat-card {
  background: linear-gradient(180deg, #10101F 0%, #0E0E1E 100%);
}

html.dark .stat-card .label { color: var(--muted); }
html.dark .stat-card .value { color: var(--text); }

html.dark .workspace-panel {
  background: linear-gradient(180deg, #10101F 0%, #0E0E1E 100%);
}

html.dark .list-item .meta { color: var(--muted); }
html.dark .list-item .title { color: var(--text); }

/* ── Kanban доска ────────────────────────────────────────────────────── */
html.dark .board-column {
  background: linear-gradient(180deg, #10101F 0%, #0F0F1E 100%);
}

html.dark .board-card {
  background: var(--surface-strong);
  border-color: var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 24, 0.3);
}

html.dark .board-card .meta { color: var(--muted); }

html.dark .board-column.drag-over,
html.dark .board-column .drag-over {
  outline: 2px dashed var(--accent);
  background: rgba(84, 104, 212, 0.07);
}

/* ── Таблицы ──────────────────────────────────────────────────────────── */
html.dark .dashboard-table th {
  color: var(--muted);
  border-bottom-color: var(--border);
}

html.dark .dashboard-table td {
  border-bottom-color: var(--border);
  color: var(--text);
}

html.dark .dashboard-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

html.dark .mini-table th,
html.dark .mini-table td {
  border-bottom-color: var(--border);
  color: var(--text);
}

html.dark .mini-table th { color: var(--muted); }

/* ── Chips & badges ──────────────────────────────────────────────────── */
html.dark .chip {
  background: rgba(84, 104, 212, 0.09);
  color: #8595D8;
}
html.dark .chip.critical   { background: rgba(239, 68,  68,  0.15); color: #fca5a5; }
html.dark .chip.warning    { background: rgba(245, 158, 11,  0.15); color: #fcd34d; }
html.dark .chip.info       { background: rgba(61,  93,  255, 0.15); color: #93c5fd; }
html.dark .chip.ok         { background: rgba(34,  197, 94,  0.15); color: #86efac; }

html.dark .badge {
  background: rgba(84, 104, 212, 0.09);
  color: #8595D8;
  border-color: rgba(84, 104, 212, 0.18);
}

html.dark .info-chip {
  background: rgba(84, 104, 212, 0.09);
  color: #8595D8;
  border-color: rgba(84, 104, 212, 0.18);
}

html.dark .severity-pill.critical { background: rgba(239,68,68,.2);  color:#fca5a5; }
html.dark .severity-pill.warning  { background: rgba(245,158,11,.2); color:#fcd34d; }
html.dark .severity-pill.info     { background: rgba(61,93,255,.2);  color:#93c5fd; }
html.dark .severity-pill.ok       { background: rgba(34,197,94,.2);  color:#86efac; }

/* ── Процессы ────────────────────────────────────────────────────────── */
html.dark .process-canvas-free {
  background: linear-gradient(180deg, #0A0A14, #0E0E1E);
  border-color: var(--border);
}

html.dark .process-node {
  background: var(--surface-strong);
  border-color: var(--border);
  box-shadow: 0 8px 20px rgba(0, 0, 24, 0.3);
}

html.dark .process-edge { stroke: #222248; }

html.dark .lane-card {
  background: var(--surface-strong);
  border-color: var(--border);
}

html.dark .lane-step {
  background: var(--surface-soft);
  border-color: var(--border);
}

html.dark .lane-step .meta { color: var(--muted); }

/* ── Review banners ──────────────────────────────────────────────────── */
html.dark .review-banner.critical { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.3); }
html.dark .review-banner.warning  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); }
html.dark .review-banner.info     { background: rgba(84,104,212,.09);  border-color: rgba(61,93,255,.3); }
html.dark .review-banner.ok       { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.3); }

/* ── Focus cards ─────────────────────────────────────────────────────── */
html.dark .focus-card {
  background: var(--surface-strong);
  border-color: var(--border);
}
html.dark .focus-card .label { color: var(--muted); }
html.dark .focus-card .value { color: var(--text); }
html.dark .focus-card.critical { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); }
html.dark .focus-card.warning  { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); }

/* ── Quick actions ───────────────────────────────────────────────────── */
html.dark .quick-action {
  background: var(--surface-strong);
  color: var(--text) !important;
  border-color: var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 24, 0.3);
}
html.dark .quick-action:hover {
  border-color: var(--accent);
  color: #8595D8 !important;
}

/* ── Wizard & tabs ───────────────────────────────────────────────────── */
html.dark .wizard-step {
  background: var(--surface-strong);
  color: var(--muted);
}
html.dark .wizard-step.active {
  background: rgba(61, 93, 255, 0.2);
  color: #8595D8;
}

html.dark .tab-btn {
  background: var(--surface-strong);
  border-color: var(--border);
  color: var(--text);
}
html.dark .tab-btn.active {
  background: rgba(84, 104, 212, 0.11);
  border-color: #5468D4;
  color: #8595D8;
}

/* ── Misc ────────────────────────────────────────────────────────────── */
html.dark .check-chip {
  background: var(--surface-strong);
  border-color: var(--border);
  color: var(--text);
}

html.dark .wizard-step-card {
  background: var(--surface-strong);
  border-color: var(--border);
}

html.dark .wizard-step-card .meta { color: var(--muted); }

html.dark #current-user {
  background: var(--surface-strong);
  border-color: var(--border);
  color: var(--text);
}

html.dark #instrument-import-result {
  background: var(--surface-strong);
  border-color: var(--border);
  color: var(--text);
}

html.dark .action-row.ok       { background: rgba(34,197,94,.12); color: #86efac; }
html.dark .action-row.info     { background: rgba(84,104,212,.09); color: #93c5fd; }
html.dark .action-row.warning  { background: rgba(245,158,11,.12); color: #fcd34d; }
html.dark .action-row.critical { background: rgba(239,68,68,.12); color: #fca5a5; }

html.dark .modal { background: rgba(0, 0, 16, 0.65); }

html.dark .checkbox-grid.compact {
  background: var(--surface-soft);
  border-color: var(--border);
}

html.dark a { color: var(--text); }

/* ── Auth hero (страница входа) ──────────────────────────────────────── */
html.dark .auth-showcase-card {
  background: linear-gradient(145deg, #0A0A14 0%, #111130 42%, #3040A8 100%);
}

html.dark .auth-hero .auth-card {
  background: var(--surface);
  border-color: var(--border);
}

/* ── Кнопка переключения темы ────────────────────────────────────────── */
.theme-toggle {
  background: none !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--muted, #64748b) !important;
  transition: border-color .2s, background .2s !important;
  box-shadow: none !important;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent, #2563eb) !important;
  background: var(--accent-soft, #eff6ff) !important;
  transform: none !important;
}

html.dark .theme-toggle {
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

html.dark .theme-toggle:hover {
  border-color: var(--accent) !important;
  background: rgba(84, 104, 212, 0.09) !important;
}

/* ── Плавный переход ─────────────────────────────────────────────────── */
html.transitioning,
html.transitioning *,
html.transitioning *::before,
html.transitioning *::after {
  transition:
    background-color 0.25s ease,
    border-color     0.25s ease,
    color            0.20s ease,
    box-shadow       0.25s ease !important;
}

/* ── Fix: выделение строк в тёмной теме ─────────────────── */
html.dark .verif-row-checked td {
  background: rgba(84, 104, 212, 0.15) !important;
  color: var(--text) !important;
}
html.dark tr.row-issued td { background: rgba(34, 197, 94, 0.10) !important; }
html.dark tr.row-overdue td { background: rgba(239, 68, 68, 0.10) !important; }
html.dark tr.row-urgent td { background: rgba(245, 158, 11, 0.08) !important; }