/* Темная тема: то, что в светлой задано не токенами (a_tokens.css), а готовыми цветами.
   Все правила – под :root[data-theme="dark"], светлую тему файл не меняет. */

/* ---------- Переключатель темы (сайдбар, над кнопкой версии; виден в обеих темах) ---------- */
.theme-toggle { display: flex; align-items: center; gap: 10px; margin: 0 16px 8px; padding: 9px 12px; border: 0; border-radius: 12px;
  background: var(--surface-soft); color: var(--indigo); font-family: var(--font); font-size: 12.5px; font-weight: 800;
  cursor: pointer; text-align: left; }
.theme-toggle:hover { background: var(--indigo-soft); }
.theme-toggle__label { flex: 1; }
.theme-toggle__sw { position: relative; width: 30px; height: 17px; border-radius: 9px; background: var(--line); flex: none; transition: background .2s; }
.theme-toggle__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--muted); transition: left .2s, background .2s; }
:root[data-theme="dark"] .theme-toggle__sw { background: var(--indigo-fill); }
:root[data-theme="dark"] .theme-toggle__sw::after { left: 15px; background: #fff; }

/* ---------- Каркас ---------- */
:root[data-theme="dark"] .sidebar { box-shadow: none; border-right: 1px solid var(--line); }
:root[data-theme="dark"] .offcanvas .sidebar { border-right: 0; }
:root[data-theme="dark"] .side-card { background: linear-gradient(145deg, #34365a, #3a2e36); }

/* ---------- KPI: те же цвета OASK, чуть глубже, чтобы белый текст читался на темном ---------- */
:root[data-theme="dark"] .kpi::after { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .kpi--indigo   { background: linear-gradient(135deg, #5a5dc4, #4f52b8); }
:root[data-theme="dark"] .kpi--coral    { background: linear-gradient(135deg, #e8848e, #d96f7a); }
:root[data-theme="dark"] .kpi--orange   { background: linear-gradient(135deg, #eda65a, #db9244); }
:root[data-theme="dark"] .kpi--lavender { background: linear-gradient(135deg, #8a8fd0, #7d82c6); }
:root[data-theme="dark"] .kpi--teal     { background: linear-gradient(135deg, #58b3b0, #4a9e9b); }
:root[data-theme="dark"] .kpi--plum     { background: linear-gradient(135deg, #ab8abd, #9a76ad); }
:root[data-theme="dark"] .kpi--green    { background: linear-gradient(135deg, #58b283, #4a9d71); }
:root[data-theme="dark"] .dot--grey, :root[data-theme="dark"] .progress-bar.bar--none { background: #55555f; }

/* ---------- Кнопки и поля ---------- */
:root[data-theme="dark"] .btn-primary { box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .btn-outline-primary,
:root[data-theme="dark"] .btn-outline-secondary { border-color: var(--line); }
:root[data-theme="dark"] .btn-outline-primary:hover, :root[data-theme="dark"] .btn-outline-primary:focus,
:root[data-theme="dark"] .btn-check:checked + .btn-outline-primary,
:root[data-theme="dark"] .btn-outline-secondary:hover { border-color: #4a4c74; }
:root[data-theme="dark"] .form-select, :root[data-theme="dark"] .form-control { border-color: var(--line); }
:root[data-theme="dark"] .form-control::placeholder { color: #75757f; }
:root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-select:disabled { background-color: var(--surface-soft); color: var(--muted); }
:root[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--surface-soft); border-color: #55555f; }

/* ---------- Таблицы, бейджи, сообщения ---------- */
:root[data-theme="dark"] .tbl td, :root[data-theme="dark"] .mrow { border-bottom-color: #34343b; }
:root[data-theme="dark"] .th-arrow { color: #5f5f6b; }
:root[data-theme="dark"] .tbl .muted { color: #6f6f7b; }
:root[data-theme="dark"] .tbl .row-pos td { background: #213a2d !important; }
:root[data-theme="dark"] .tbl .row-neg td { background: #45262c !important; }
:root[data-theme="dark"] .tbl .row-me td, :root[data-theme="dark"] .mcard--me { background: #383b66 !important; }
:root[data-theme="dark"] .chip--tor { background: #34365a; }
:root[data-theme="dark"] .chip--svc { background: #1f3b3a; color: #6fcfcb; }
:root[data-theme="dark"] .chip--oth { background: #45351e; color: #f0b56c; }
:root[data-theme="dark"] .progress, :root[data-theme="dark"] .mini-progress__track { background: var(--line); }
:root[data-theme="dark"] .panel-msg--ok, :root[data-theme="dark"] .badge-soft--ok, :root[data-theme="dark"] .chk--ok { background: #1f3a2c; color: #7fd6a6; }
:root[data-theme="dark"] .panel-msg--err, :root[data-theme="dark"] .chk--bad { background: #45262c; color: #ff9aa7; }
:root[data-theme="dark"] .panel-msg--warn, :root[data-theme="dark"] .badge-soft--wait { background: #45351e; color: #f0b56c; }
:root[data-theme="dark"] .badge-soft--off, :root[data-theme="dark"] .fired-badge { background: var(--surface-soft); color: var(--muted); }

/* ---------- Окна, выезжающее меню, вкладки Bootstrap ---------- */
:root[data-theme="dark"] .modal-content { background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .offcanvas { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
:root[data-theme="dark"] .toast-stub { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] .help-md hr { opacity: .4; }
:root[data-theme="dark"] .help-md a, :root[data-theme="dark"] .modal a:not(.btn) { color: var(--indigo); }

/* ---------- Графики Plotly ----------
   Фигуры строятся на сервере в светлой палитре (charts/theme.py), а в темной теме их цвета подменяются здесь
   по точному значению во встроенном стиле SVG. Экспорт картинки в Excel берет фигуру, поэтому остается светлым.
   При смене цветов в theme.py / figures.py поправьте rgb(...) ниже. */
:root[data-theme="dark"] .js-plotly-plot [style*="fill: rgb(42, 44, 91)"] { fill: var(--text) !important; }          /* TEXT */
:root[data-theme="dark"] .js-plotly-plot [style*="fill: rgb(138, 141, 179)"] { fill: var(--muted) !important; }      /* MUTED */
:root[data-theme="dark"] .js-plotly-plot [style*="stroke: rgb(232, 234, 246)"] { stroke: var(--line) !important; }   /* GRID */
:root[data-theme="dark"] .js-plotly-plot .gridlayer path, :root[data-theme="dark"] .js-plotly-plot .zerolinelayer path { stroke: var(--line) !important; }
:root[data-theme="dark"] .js-plotly-plot [style*="stroke: rgb(255, 255, 255)"] { stroke: var(--surface) !important; } /* обводка секторов и точек */
:root[data-theme="dark"] .js-plotly-plot .scatterlayer [style*="stroke: rgb(61, 63, 158)"] { stroke: #8c90ea !important; } /* INDIGO-линии */
:root[data-theme="dark"] .js-plotly-plot .scatterlayer [style*="fill: rgb(61, 63, 158)"] { fill: #8c90ea !important; }
:root[data-theme="dark"] .js-plotly-plot .barlayer [style*="fill: rgb(61, 63, 158)"] { fill: #6266cf !important; } /* верхний столбик топа */
:root[data-theme="dark"] .js-plotly-plot .legend [style*="stroke: rgb(61, 63, 158)"] { stroke: #8c90ea !important; }
:root[data-theme="dark"] .js-plotly-plot [style*="stroke: rgb(75, 93, 112)"] { stroke: #b4c0cf !important; }          /* FACT_COLOR */
:root[data-theme="dark"] .js-plotly-plot [style*="fill: rgb(75, 93, 112)"] { fill: #b4c0cf !important; }
:root[data-theme="dark"] .js-plotly-plot [style*="fill: rgb(47, 91, 211)"] { fill: #7fa3f5 !important; }             /* DELTA_UP */
:root[data-theme="dark"] .js-plotly-plot .hoverlayer .hovertext path { fill: var(--surface-soft) !important; stroke: var(--line) !important; }
:root[data-theme="dark"] .js-plotly-plot .hoverlayer .hovertext text { fill: var(--text) !important; }

/* ---------- Страницы входа ---------- */
:root[data-theme="dark"] .auth-error { background: #45262c; color: #ff9aa7; }
:root[data-theme="dark"] .auth-input { background: var(--surface-soft); border-color: var(--line); }
:root[data-theme="dark"] .auth-btn { box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }