/* ══════════════ Тёмная тема Nova ══════════════
   Статический CSS (в public/, отдаётся как есть) — чтобы минификатор Tailwind v4
   НЕ вырезал переопределения (он непредсказуемо срезает html/:root/custom-prop
   правила из основного бандла). Тема включается тумблером: html[data-theme="dark"].
   Все селекторы имеют более высокую специфичность, чем базовые утилиты, поэтому
   порядок подключения не важен. */

/* ── Переключатели по теме (лого и т.п.) ── */
html[data-theme="dark"] .theme-light-only { display: none !important; }
html:not([data-theme="dark"]) .theme-dark-only { display: none !important; }

/* ── Фон страницы ──
   Тёмные радиалы теперь живут в общем токене --nv-wall и рисуются фиксированным
   слоем .nv-root::before (см. globals.css) — статично, без плывущих швов при
   скролле. html держит сплошную заливку как крайний фолбэк. */
html[data-theme="dark"] {
  color-scheme: dark;
  background: #0b1417;
  --nv-wall-base: #0b1417;
  --nv-wall:
    radial-gradient(80% 60% at 10% 6%, #1a2b24 0%, transparent 52%),
    radial-gradient(70% 60% at 94% 2%, #182a30 0%, transparent 48%),
    radial-gradient(90% 70% at 82% 100%, #241d1f 0%, transparent 52%),
    linear-gradient(160deg, #0f1a1d, #0b1417);
}
html[data-theme="dark"] body.nv-root { background: transparent; }

/* ── Нейтрали (частотные утилиты) ── */
html[data-theme="dark"] .bg-white { background-color: #16242a; }
html[data-theme="dark"] .bg-cream,
html[data-theme="dark"] .bg-cream\/95,
html[data-theme="dark"] .bg-cream\/90 { background-color: #14201f; }
html[data-theme="dark"] .bg-stone-50 { background-color: #172429; }
html[data-theme="dark"] .bg-stone-100 { background-color: #1c2a30; }
/* Канбан-колонки CRM: фон + счётчик. Раньше под карточками просвечивал светлый фон. */
html[data-theme="dark"] .nv-col { background-color: rgba(23, 36, 41, .5); }
html[data-theme="dark"] .nv-col--drag { background-color: color-mix(in srgb, var(--color-gold-400) 14%, #16242a); }
html[data-theme="dark"] .nv-col-count { background-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .bg-stone-200 { background-color: #2b3f45; }
html[data-theme="dark"] .bg-stone-300 { background-color: #394e54; }
html[data-theme="dark"] .hover\:bg-stone-50:hover,
html[data-theme="dark"] .hover\:bg-stone-100:hover,
html[data-theme="dark"] .hover\:bg-stone-200:hover { background-color: #223339; }
html[data-theme="dark"] .text-ink { color: #eef3f1; }
html[data-theme="dark"] .text-stone-300 { color: #64756f; }
html[data-theme="dark"] .text-stone-400 { color: #849490; }
html[data-theme="dark"] .text-stone-500 { color: #9aa8a3; }
html[data-theme="dark"] .text-stone-600 { color: #b4c0bb; }
html[data-theme="dark"] .text-stone-700 { color: #cdd8d3; }
html[data-theme="dark"] .border-stone-100 { border-color: #1f2f35; }
html[data-theme="dark"] .border-stone-200 { border-color: #2b3f45; }
html[data-theme="dark"] .border-stone-300 { border-color: #394e54; }

/* ── Зелёный (кнопки/текст) — светлее для читаемости ── */
html[data-theme="dark"] .bg-green-700 { background-color: #2f5a4f; }
html[data-theme="dark"] .bg-green-600 { background-color: #356b5c; }
html[data-theme="dark"] .bg-green-800 { background-color: #223f38; }
html[data-theme="dark"] .text-green-600 { color: #6fc0a4; }
html[data-theme="dark"] .text-green-700 { color: #63b295; }
html[data-theme="dark"] .text-green-800 { color: #59a88b; }
html[data-theme="dark"] .border-green-700 { border-color: #3f7a68; }
html[data-theme="dark"] .border-green-600 { border-color: #4a8a76; }
html[data-theme="dark"] .hover\:bg-green-700:hover { background-color: #356b5c; }
html[data-theme="dark"] .hover\:bg-green-600:hover { background-color: #3f7a68; }

/* ── Инпуты ── */
html[data-theme="dark"] .nv-search input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color: #eef3f1; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6c7d78; }

/* ── Дизайн-система ── */
html[data-theme="dark"] .nv-card { background: #16242a; border-color: #2b3f45; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.45); }
html[data-theme="dark"] .nv-topbar { background: rgba(16,26,29,.86); border-bottom-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .nv-search { background: #16242a; border-color: #2b3f45; color: #9aa8a3; }
html[data-theme="dark"] .nv-chip { background: #16242a; border-color: #2b3f45; color: #9aa8a3; }
html[data-theme="dark"] .nv-chip.on { background: #3f7a68; color: #fff; }
html[data-theme="dark"] .nv-btn-ghost { background: #16242a; border-color: #2b3f45; color: #eef3f1; }
html[data-theme="dark"] .nv-glass,
html[data-theme="dark"] .nv-glass-2 { background: rgba(16,26,29,.72); border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .nv-tabbar { background: rgba(16,26,29,.86); border-color: rgba(255,255,255,.10); }
/* Активные «мягко-зелёные» пилюли (nav/CRM) */
html[data-theme="dark"] .bg-\[color\:var\(--nv-green-soft\)\] { background-color: #22463d; }
/* Кнопки шапки */
html[data-theme="dark"] .nv-hbtn { background: rgba(255,255,255,.06); border-color: #2b3f45; color: #eef3f1; }
html[data-theme="dark"] .nv-hbtn-primary { background: #357a66; color: #f4f8f5; }
html[data-theme="dark"] .nv-hbtn-primary:hover { background: #3f8b76; }

/* ── Мобильные экраны (.nvm) ── */
html[data-theme="dark"] .nvm {
  --m-surface: #16242a; --m-surface2: #20323a; --m-inset: #101c21;
  --m-ink: #eef3f1; --m-muted: #9aa8a3; --m-faint: #6c7d78; --m-line: #2f444b;
  --m-green-500: #3f7a68; --m-green-soft: #20332f;
  --m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.45);
  --m-glass: rgba(20,34,40,.72); --m-glass-2: rgba(28,44,50,.82); --m-glass-line: rgba(255,255,255,.12);
  --m-wa-hd: #14332d; --m-wa-bg: #0f1f1c; --m-wa-in: #1a2a2c; --m-wa-out: #264a42; --m-wa-tick: #7fd0b8; --m-wa-meta: #8a9a94;
  --m-wall: radial-gradient(90% 60% at 12% 8%, #1a2b24 0%, transparent 55%),
            radial-gradient(80% 60% at 92% 4%, #182a30 0%, transparent 50%),
            radial-gradient(100% 70% at 80% 100%, #241d1f 0%, transparent 55%),
            linear-gradient(160deg, #0f1a1d, #0b1417);
}

/* ── Акцентные бейджи: приглушаем под тёмную палитру ──
   Пастельный bg-X-50/100 → тёмный тон того же оттенка; text-X-700/800/900 → светлый -300. */
html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .bg-emerald-100 { background-color: color-mix(in srgb, var(--color-emerald-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-emerald-400) 22%, transparent); }
html[data-theme="dark"] .text-emerald-600, html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-emerald-800, html[data-theme="dark"] .text-emerald-900 { color: var(--color-emerald-300); }
html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] .bg-amber-100 { background-color: color-mix(in srgb, var(--color-amber-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-amber-400) 22%, transparent); }
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-amber-900 { color: var(--color-amber-300); }
html[data-theme="dark"] .bg-sky-50, html[data-theme="dark"] .bg-sky-100 { background-color: color-mix(in srgb, var(--color-sky-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-sky-400) 22%, transparent); }
html[data-theme="dark"] .text-sky-600, html[data-theme="dark"] .text-sky-700, html[data-theme="dark"] .text-sky-800, html[data-theme="dark"] .text-sky-900 { color: var(--color-sky-300); }
html[data-theme="dark"] .bg-fuchsia-50, html[data-theme="dark"] .bg-fuchsia-100 { background-color: color-mix(in srgb, var(--color-fuchsia-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-fuchsia-400) 22%, transparent); }
html[data-theme="dark"] .text-fuchsia-600, html[data-theme="dark"] .text-fuchsia-700, html[data-theme="dark"] .text-fuchsia-800, html[data-theme="dark"] .text-fuchsia-900 { color: var(--color-fuchsia-300); }
html[data-theme="dark"] .bg-violet-50, html[data-theme="dark"] .bg-violet-100 { background-color: color-mix(in srgb, var(--color-violet-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-violet-400) 22%, transparent); }
html[data-theme="dark"] .text-violet-600, html[data-theme="dark"] .text-violet-700, html[data-theme="dark"] .text-violet-800, html[data-theme="dark"] .text-violet-900 { color: var(--color-violet-300); }
html[data-theme="dark"] .bg-indigo-50, html[data-theme="dark"] .bg-indigo-100 { background-color: color-mix(in srgb, var(--color-indigo-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-indigo-400) 22%, transparent); }
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 { color: var(--color-indigo-300); }
html[data-theme="dark"] .bg-red-50, html[data-theme="dark"] .bg-red-100 { background-color: color-mix(in srgb, var(--color-red-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-red-400) 22%, transparent); }
html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-red-800, html[data-theme="dark"] .text-red-900 { color: var(--color-red-300); }
html[data-theme="dark"] .bg-rose-50, html[data-theme="dark"] .bg-rose-100 { background-color: color-mix(in srgb, var(--color-rose-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-rose-400) 22%, transparent); }
html[data-theme="dark"] .text-rose-600, html[data-theme="dark"] .text-rose-700, html[data-theme="dark"] .text-rose-800, html[data-theme="dark"] .text-rose-900 { color: var(--color-rose-300); }
html[data-theme="dark"] .bg-teal-50, html[data-theme="dark"] .bg-teal-100 { background-color: color-mix(in srgb, var(--color-teal-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-teal-400) 22%, transparent); }
html[data-theme="dark"] .text-teal-600, html[data-theme="dark"] .text-teal-700, html[data-theme="dark"] .text-teal-800, html[data-theme="dark"] .text-teal-900 { color: var(--color-teal-300); }
html[data-theme="dark"] .bg-orange-50, html[data-theme="dark"] .bg-orange-100 { background-color: color-mix(in srgb, var(--color-orange-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-orange-400) 22%, transparent); }
html[data-theme="dark"] .text-orange-600, html[data-theme="dark"] .text-orange-700, html[data-theme="dark"] .text-orange-800, html[data-theme="dark"] .text-orange-900 { color: var(--color-orange-300); }
html[data-theme="dark"] .bg-lime-50, html[data-theme="dark"] .bg-lime-100 { background-color: color-mix(in srgb, var(--color-lime-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-lime-400) 22%, transparent); }
html[data-theme="dark"] .text-lime-600, html[data-theme="dark"] .text-lime-700, html[data-theme="dark"] .text-lime-800, html[data-theme="dark"] .text-lime-900 { color: var(--color-lime-300); }
html[data-theme="dark"] .bg-cyan-50, html[data-theme="dark"] .bg-cyan-100 { background-color: color-mix(in srgb, var(--color-cyan-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-cyan-400) 22%, transparent); }
html[data-theme="dark"] .text-cyan-600, html[data-theme="dark"] .text-cyan-700, html[data-theme="dark"] .text-cyan-800, html[data-theme="dark"] .text-cyan-900 { color: var(--color-cyan-300); }
html[data-theme="dark"] .bg-blue-50, html[data-theme="dark"] .bg-blue-100 { background-color: color-mix(in srgb, var(--color-blue-400) 15%, #16242a); border-color: color-mix(in srgb, var(--color-blue-400) 22%, transparent); }
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-blue-900 { color: var(--color-blue-300); }
html[data-theme="dark"] .bg-gold-50, html[data-theme="dark"] .bg-gold-100 { background-color: color-mix(in srgb, var(--color-gold-400) 16%, #16242a); }
html[data-theme="dark"] .text-gold-700, html[data-theme="dark"] .text-gold-800, html[data-theme="dark"] .text-gold-900 { color: #f0c765; }
html[data-theme="dark"] .bg-green-50, html[data-theme="dark"] .bg-green-100 { background-color: color-mix(in srgb, var(--color-green-500) 26%, #16242a); }

/* ── Бейдж задачи на карточке ── */
html[data-theme="dark"] .nv-task.overdue { background: color-mix(in srgb, #f87171 16%, #16242a); color: #fca5a5; border-color: color-mix(in srgb, #f87171 32%, transparent); }
html[data-theme="dark"] .nv-task.today { background: color-mix(in srgb, #fbbf24 16%, #16242a); color: #fcd34d; border-color: color-mix(in srgb, #fbbf24 32%, transparent); }
html[data-theme="dark"] .nv-task.soon { background: #22333a; color: #b4c0bb; border-color: #2b3f45; }

/* ── Скелетон-shimmer в тёмной ── */
html[data-theme="dark"] .nv-shimmer { background: linear-gradient(100deg, #1a2a30 30%, #23343a 50%, #1a2a30 70%); background-size: 200% 100%; }