/* ═══════════════════════════════════════════════════════════════════════════
   Тёмная тема дашборда. Палитра взята с личного дашборда маркетплейсов (/root/lk),
   чтобы два наших интерфейса выглядели одинаково.

   Как это работает. Фронт собран Tailwind-ом, исходников нет: в разметке стоят
   утилитарные классы вроде bg-white и text-gray-500 с зашитыми светлыми цветами.
   Поэтому тема — не переменные в бандле, а слой поверх: под html[data-theme="dark"]
   те же утилиты переопределяются на тёмные значения. Селектор из двух частей
   всегда весомее одиночного класса Tailwind, так что порядок подключения не важен.

   Вторая половина файла — страницы, отдаваемые в iframe (встречи, задачи,
   сотрудники, CEO). Они написаны руками и делят один набор классов
   (.card, .badge, .note-*, .btn-*), поэтому им хватает общего блока.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  --bg:       #0f1115;
  --panel:    #171a21;
  --panel-2:  #1c202a;
  --panel-3:  #222735;
  --line:     #252a35;
  --line-2:   #2f3543;
  --text:     #e7e9ee;
  --dim:      #8b93a5;
  --faint:    #6b7385;

  --accent:   #3b6cf6;
  --accent-2: #7fa2ff;
  --ok:       #3ecf8e;
  --ok-2:     #5fd8a2;
  --warn:     #ffb454;
  --warn-2:   #f0b862;
  --bad:      #ff6b6b;
  --bad-2:    #ff8b84;
  --violet:   #7b61ff;
  --violet-2: #a892ff;

  color-scheme: dark;
}

/* ── основа ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"],
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Заставка до загрузки React написана инлайновым стилем — перекрываем адресно,
   иначе на секунду вспыхивает белый экран. */
html[data-theme="dark"] #root > div[style*="min-height:100vh"] { background: var(--bg) !important; }
html[data-theme="dark"] #root > div[style*="min-height:100vh"] > div { color: var(--dim) !important; }

html[data-theme="dark"] ::selection { background: rgba(59,108,246,.35); }
html[data-theme="dark"] ::placeholder { color: var(--faint); opacity: 1; }
html[data-theme="dark"] * { scrollbar-color: #39404f var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #333a48; border-radius: 6px; border: 3px solid var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #414a5c; }

/* ── поверхности ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .bg-white   { background-color: var(--panel); }
html[data-theme="dark"] .bg-gray-50 { background-color: var(--panel-2); }
html[data-theme="dark"] .bg-gray-100 { background-color: var(--panel-3); }
html[data-theme="dark"] .bg-gray-200 { background-color: #2b3040; }
html[data-theme="dark"] .bg-gray-300 { background-color: #333949; }
html[data-theme="dark"] .bg-gray-400 { background-color: #3d4455; }
html[data-theme="dark"] .bg-gray-500 { background-color: #4a5165; }
html[data-theme="dark"] .bg-gray-800,
html[data-theme="dark"] .bg-gray-900,
html[data-theme="dark"] .bg-gray-950,
html[data-theme="dark"] .bg-black    { background-color: #0b0d12; }
html[data-theme="dark"] .bg-slate-700 { background-color: #2b3243; }

/* ── текст ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700 { color: var(--text); }
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500 { color: var(--dim); }
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-300 { color: var(--faint); }

/* ── рамки ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .border-gray-50,
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-white  { border-color: var(--line); }
html[data-theme="dark"] .border-gray-300 { border-color: var(--line-2); }
html[data-theme="dark"] .divide-gray-100 > * + *,
html[data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--line); }

/* ── смысловые цвета: подложки ──────────────────────────────────────────── */
html[data-theme="dark"] .bg-red-50    { background-color: rgba(255,107,107,.10); }
html[data-theme="dark"] .bg-red-100   { background-color: rgba(255,107,107,.16); }
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(62,207,142,.10); }
html[data-theme="dark"] .bg-green-100,
html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(62,207,142,.16); }
html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-orange-50 { background-color: rgba(255,180,84,.10); }
html[data-theme="dark"] .bg-amber-100 { background-color: rgba(255,180,84,.16); }
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-indigo-50 { background-color: rgba(59,108,246,.12); }
html[data-theme="dark"] .bg-blue-100,
html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(59,108,246,.18); }
html[data-theme="dark"] .bg-violet-50,
html[data-theme="dark"] .bg-purple-50 { background-color: rgba(123,97,255,.12); }
html[data-theme="dark"] .bg-violet-100 { background-color: rgba(123,97,255,.18); }

/* Полупрозрачные варианты (bg-gray-50/60 и такие же) — отдельные классы,
   общим правилом не накрываются. */
html[data-theme="dark"] .bg-gray-50\/50,
html[data-theme="dark"] .bg-gray-50\/60,
html[data-theme="dark"] .hover\:bg-gray-50\/60:hover { background-color: rgba(28,32,42,.65); }
html[data-theme="dark"] .bg-red-50\/50,
html[data-theme="dark"] .bg-red-50\/60      { background-color: rgba(255,107,107,.09); }
html[data-theme="dark"] .bg-amber-50\/50    { background-color: rgba(255,180,84,.09); }
html[data-theme="dark"] .bg-emerald-50\/40  { background-color: rgba(62,207,142,.09); }
html[data-theme="dark"] .bg-blue-50\/30,
html[data-theme="dark"] .bg-indigo-50\/40   { background-color: rgba(59,108,246,.10); }
html[data-theme="dark"] .bg-purple-50\/40   { background-color: rgba(123,97,255,.10); }
html[data-theme="dark"] .bg-black\/40       { background-color: rgba(0,0,0,.6); }

/* ── смысловые цвета: заливки кнопок и индикаторов ──────────────────────── */
html[data-theme="dark"] .bg-blue-400  { background-color: #4f7bf7; }
html[data-theme="dark"] .bg-blue-500  { background-color: #3f6ff6; }
html[data-theme="dark"] .bg-blue-600  { background-color: #3b6cf6; }
html[data-theme="dark"] .bg-blue-700  { background-color: #3560dd; }
html[data-theme="dark"] .bg-indigo-600 { background-color: #5a63e8; }
html[data-theme="dark"] .bg-indigo-700 { background-color: #4e57d2; }
html[data-theme="dark"] .bg-green-500,
html[data-theme="dark"] .bg-emerald-600 { background-color: #2fa872; }
html[data-theme="dark"] .bg-green-600  { background-color: #2b9d6a; }
html[data-theme="dark"] .bg-green-700,
html[data-theme="dark"] .bg-emerald-700 { background-color: #26895c; }
html[data-theme="dark"] .bg-green-800  { background-color: #1f6f4b; }
html[data-theme="dark"] .bg-teal-500   { background-color: #1f9c96; }
html[data-theme="dark"] .bg-teal-600   { background-color: #1c8d88; }
html[data-theme="dark"] .bg-teal-700   { background-color: #187a76; }
html[data-theme="dark"] .bg-teal-800   { background-color: #146664; }
html[data-theme="dark"] .bg-red-500    { background-color: #e6635b; }
html[data-theme="dark"] .bg-red-600    { background-color: #d9564e; }
html[data-theme="dark"] .bg-red-700    { background-color: #c04a43; }
html[data-theme="dark"] .bg-amber-400  { background-color: #e0a04a; }
html[data-theme="dark"] .bg-amber-500  { background-color: #d99236; }
html[data-theme="dark"] .bg-amber-600  { background-color: #c78230; }
html[data-theme="dark"] .bg-amber-700  { background-color: #ad6f28; }
html[data-theme="dark"] .bg-amber-800  { background-color: #915c21; }
html[data-theme="dark"] .bg-violet-500 { background-color: #7b61ff; }
html[data-theme="dark"] .bg-violet-600 { background-color: #6d55e6; }
html[data-theme="dark"] .bg-violet-700 { background-color: #5e49c9; }
html[data-theme="dark"] .bg-purple-500 { background-color: #8a5cf0; }
html[data-theme="dark"] .bg-sky-400    { background-color: #4aa6e8; }
html[data-theme="dark"] .bg-sky-600    { background-color: #2f88cc; }
html[data-theme="dark"] .bg-pink-400   { background-color: #e06a9c; }
html[data-theme="dark"] .from-emerald-500 { --tw-gradient-from: #2fa872; }
html[data-theme="dark"] .to-teal-600      { --tw-gradient-to: #1c8d88; }

/* ── смысловые цвета: текст ─────────────────────────────────────────────── */
html[data-theme="dark"] .text-red-500,
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700  { color: var(--bad-2); }
html[data-theme="dark"] .text-green-400,
html[data-theme="dark"] .text-green-500,
html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-green-700,
html[data-theme="dark"] .text-green-800,
html[data-theme="dark"] .text-green-900,
html[data-theme="dark"] .text-emerald-500,
html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-900 { color: var(--ok-2); }
html[data-theme="dark"] .text-amber-400,
html[data-theme="dark"] .text-amber-500,
html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-orange-700 { color: var(--warn-2); }
html[data-theme="dark"] .text-blue-300,
html[data-theme="dark"] .text-blue-400,
html[data-theme="dark"] .text-blue-500,
html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-indigo-400,
html[data-theme="dark"] .text-indigo-500,
html[data-theme="dark"] .text-indigo-600,
html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-indigo-800,
html[data-theme="dark"] .text-indigo-900,
html[data-theme="dark"] .text-sky-400,
html[data-theme="dark"] .text-sky-500,
html[data-theme="dark"] .text-sky-600  { color: var(--accent-2); }
html[data-theme="dark"] .text-violet-500,
html[data-theme="dark"] .text-violet-600,
html[data-theme="dark"] .text-violet-700,
html[data-theme="dark"] .text-violet-900,
html[data-theme="dark"] .text-purple-700,
html[data-theme="dark"] .text-purple-800 { color: var(--violet-2); }

/* ── смысловые цвета: рамки и кольца фокуса ─────────────────────────────── */
html[data-theme="dark"] .border-red-100,
html[data-theme="dark"] .border-red-200,
html[data-theme="dark"] .border-red-300 { border-color: rgba(255,107,107,.30); }
html[data-theme="dark"] .border-green-100,
html[data-theme="dark"] .border-green-200,
html[data-theme="dark"] .border-green-300,
html[data-theme="dark"] .border-emerald-50,
html[data-theme="dark"] .border-emerald-200 { border-color: rgba(62,207,142,.30); }
html[data-theme="dark"] .border-amber-50,
html[data-theme="dark"] .border-amber-100,
html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-amber-300,
html[data-theme="dark"] .border-amber-400 { border-color: rgba(255,180,84,.32); }
html[data-theme="dark"] .border-blue-50,
html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .border-blue-300,
html[data-theme="dark"] .border-blue-600,
html[data-theme="dark"] .border-indigo-100,
html[data-theme="dark"] .border-indigo-200,
html[data-theme="dark"] .border-indigo-300,
html[data-theme="dark"] .border-indigo-500,
html[data-theme="dark"] .border-sky-50 { border-color: rgba(59,108,246,.35); }
html[data-theme="dark"] .border-violet-100,
html[data-theme="dark"] .border-violet-200,
html[data-theme="dark"] .border-violet-300 { border-color: rgba(123,97,255,.35); }
html[data-theme="dark"] .ring-blue-200,
html[data-theme="dark"] .ring-blue-500,
html[data-theme="dark"] .ring-indigo-200 { --tw-ring-color: rgba(59,108,246,.45); }
html[data-theme="dark"] .ring-emerald-200,
html[data-theme="dark"] .ring-emerald-400 { --tw-ring-color: rgba(62,207,142,.45); }
html[data-theme="dark"] .ring-violet-500 { --tw-ring-color: rgba(123,97,255,.45); }

/* ── тени: на тёмном фоне мягкая чёрная вместо серой ────────────────────── */
html[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.45); }
html[data-theme="dark"] .shadow    { box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); }
html[data-theme="dark"] .shadow-md { box-shadow: 0 4px 10px rgba(0,0,0,.5); }
html[data-theme="dark"] .shadow-lg { box-shadow: 0 10px 24px rgba(0,0,0,.55); }
html[data-theme="dark"] .shadow-xl { box-shadow: 0 18px 40px rgba(0,0,0,.6); }

/* ── поля ввода: Tailwind их не красит, задаём сами ─────────────────────── */
html[data-theme="dark"] input, html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--panel-2); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] input[type=checkbox],
html[data-theme="dark"] input[type=radio] { accent-color: var(--accent); }
html[data-theme="dark"] option { background: var(--panel-2); color: var(--text); }

/* ── графики ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .recharts-cartesian-grid line,
html[data-theme="dark"] .recharts-cartesian-axis-line,
html[data-theme="dark"] .recharts-cartesian-axis-tick-line { stroke: var(--line-2); }
html[data-theme="dark"] .recharts-text { fill: var(--dim); }
html[data-theme="dark"] .recharts-default-tooltip {
  background: var(--panel) !important; border-color: var(--line) !important;
  color: var(--text) !important; }

/* ── боковая панель вкладок (стили лежат в index.html) ──────────────────── */
@media (min-width: 1024px) {
  html[data-theme="dark"][data-nav="side"] header > nav {
    background: var(--panel); border-right-color: var(--line); }
  html[data-theme="dark"][data-nav="side"] header > nav > button:hover {
    background: var(--panel-3); }
}
html[data-theme="dark"] header > nav > button[data-tab="dashgrp"]::after { color: var(--faint); }
html[data-theme="dark"][data-grp-dashgrp="off"] header > nav > button[data-tab="dashgrp"] {
  color: var(--accent-2); }
html[data-theme="dark"] #cco-nav-toggle,
html[data-theme="dark"] #cco-theme-toggle {
  background: var(--panel); border-color: var(--line); color: var(--dim); }
html[data-theme="dark"] #cco-nav-toggle:hover,
html[data-theme="dark"] #cco-theme-toggle:hover {
  color: var(--text); border-color: var(--accent); }

/* ═══ Страницы во внутренней рамке: встречи, задачи, сотрудники, CEO ═══════
   У них общий словарь классов, поэтому хватает одного блока на все четыре. */

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .card h3,
html[data-theme="dark"] h3 { color: var(--dim); }
html[data-theme="dark"] .muted,
html[data-theme="dark"] label.f > span,
html[data-theme="dark"] th { color: var(--dim); }
html[data-theme="dark"] .ts,
html[data-theme="dark"] .x { color: var(--faint); }

html[data-theme="dark"] button {
  background: var(--panel-2); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] button:hover:not(:disabled) { border-color: var(--accent); }
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:hover:not(:disabled),
html[data-theme="dark"] .tab.on, html[data-theme="dark"] .chip.on {
  background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: #3560dd; border-color: #3560dd; }
html[data-theme="dark"] .btn-danger { background: #d9564e; border-color: #d9564e; color: #fff; }
html[data-theme="dark"] .btn-danger:hover:not(:disabled) { background: #c04a43; border-color: #c04a43; }
html[data-theme="dark"] .btn-link { background: none; border: none; color: var(--accent-2); }
html[data-theme="dark"] .btn-link:hover { color: #a3bcff; }

html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=number],
html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: var(--panel-2); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { border-color: var(--accent); }
html[data-theme="dark"] input[type=date]:hover { border-color: var(--accent); }

html[data-theme="dark"] .item:hover { background: var(--panel-2); }
html[data-theme="dark"] .item.active { background: rgba(59,108,246,.14); border-color: rgba(59,108,246,.4); }
html[data-theme="dark"] .task { border-bottom-color: var(--line); }
html[data-theme="dark"] .task.done .task-text,
html[data-theme="dark"] .task.done .t-text { color: var(--faint); }
html[data-theme="dark"] .task.over { background: rgba(255,107,107,.10); }
html[data-theme="dark"] .t-meta { color: var(--dim); }
html[data-theme="dark"] td { border-bottom-color: var(--line); }
html[data-theme="dark"] th { border-bottom-color: var(--line-2); }

html[data-theme="dark"] .badge.b-gray,
html[data-theme="dark"] .badge.b-slate { background: var(--panel-3); color: var(--dim); }
html[data-theme="dark"] .badge.b-blue  { background: rgba(59,108,246,.18); color: var(--accent-2); }
html[data-theme="dark"] .badge.b-amber { background: rgba(255,180,84,.16); color: var(--warn-2); }
html[data-theme="dark"] .badge.b-violet { background: rgba(123,97,255,.18); color: var(--violet-2); }
html[data-theme="dark"] .badge.b-green { background: rgba(62,207,142,.16); color: var(--ok-2); }
html[data-theme="dark"] .badge.b-red   { background: rgba(255,107,107,.16); color: var(--bad-2); }

html[data-theme="dark"] .box { border-color: var(--line); }
html[data-theme="dark"] .box.risk { background: rgba(255,107,107,.10); border-color: rgba(255,107,107,.28); }
html[data-theme="dark"] .box.good { background: rgba(62,207,142,.10); border-color: rgba(62,207,142,.28); }
html[data-theme="dark"] .box.key  { background: rgba(59,108,246,.12); border-color: rgba(59,108,246,.32); }
html[data-theme="dark"] .stat { border-color: var(--line); }
html[data-theme="dark"] .stat.bad b  { color: var(--bad-2); }
html[data-theme="dark"] .stat.good b { color: var(--ok-2); }

html[data-theme="dark"] .note-info { background: var(--panel-2); border-color: var(--line); color: var(--dim); }
html[data-theme="dark"] .note-warn { background: rgba(255,180,84,.10); border-color: rgba(255,180,84,.30); color: var(--warn-2); }
html[data-theme="dark"] .note-err  { background: rgba(255,107,107,.10); border-color: rgba(255,107,107,.30); color: var(--bad-2); }
html[data-theme="dark"] .note-ok   { background: rgba(62,207,142,.10); border-color: rgba(62,207,142,.30); color: var(--ok-2); }

html[data-theme="dark"] .transcript {
  background: var(--panel-2); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .spk { color: var(--accent-2); }
html[data-theme="dark"] .hint-sug { color: var(--violet-2); }
html[data-theme="dark"] .spk-row { border-bottom-color: var(--line); }
html[data-theme="dark"] .level, html[data-theme="dark"] .bar { background: var(--panel-3); }
html[data-theme="dark"] .bar > i { background: var(--accent); }
html[data-theme="dark"] .level > i { background: var(--ok); }
html[data-theme="dark"] .spin { border-color: var(--line-2); border-top-color: var(--accent); }
html[data-theme="dark"] .overlay { background: rgba(0,0,0,.62); }