/* ============================================================
 * TEMA ESCURO — ProSST Control
 *
 * GERADO por scripts/gerar_dark_css.py. Nao edite a mao: rode o
 * script de novo. Nao passa pelo build do Tailwind (o binario nao
 * esta no repo e o CSS e commitado) — por isso e CSS puro.
 *
 * COMO FUNCIONA: o projeto ja tema por tenant via CSS vars
 * (--primary-*, --sidebar-*). Esta camada estende a mesma ideia aos
 * NEUTROS, que estavam como utilitario literal em ~36.000 pontos de
 * 809 templates. Em vez de anotar dark: em cada um, o utilitario e
 * redefinido no ponto de origem quando html[data-theme="dark"].
 *
 * NAO e filtro/invert por cima da tela: nao ha filter, nem overlay.
 *
 * Especificidade: html[data-theme="dark"] .x = (0,2,1) vence o
 * .x = (0,1,0) do Tailwind sem precisar de !important — o que
 * preserva overrides legitimos de tela.
 *
 * NAO REMAPEAR: text-white, bg-black, as cores 400-900 solidas e os
 * gradientes de marca. Sao usadas SOBRE fundo colorido (sidebar,
 * headers, badges solidos) e ja tem contraste nos dois modos.
 * ============================================================ */

/* Tudo daqui para baixo vale SOMENTE em tela. Ver comentario no gerador. */
@media screen {

html[data-theme="dark"] {
    --dk-bg: #0f172a;
    --dk-surface: #1e293b;
    --dk-surface-sunken: #172033;
    --dk-surface-2: #24304a;
    --dk-surface-3: #334155;
    --dk-border-subtle: #1f2a3f;
    --dk-border: #2c3a52;
    --dk-border-strong: #3b4a63;
    --dk-text-strong: #f1f5f9;
    --dk-text-800: #e2e8f0;
    --dk-text: #cbd5e1;
    --dk-text-600: #b6c2d3;
    --dk-text-muted: #94a3b8;
    --dk-text-faint: #7c8ba1;
    --dk-text-dim: #64748b;
    /* Faz o navegador escurecer scrollbar, date picker e controles nativos. */
    color-scheme: dark;
}

/* ---------- Base da pagina ---------- */
html[data-theme="dark"] body { background-color: var(--dk-bg); color: var(--dk-text); }

/* ---------- Superficies neutras ---------- */
html[data-theme="dark"] .bg-white { background-color: var(--dk-surface); }

/* ---------- Fundos neutros ---------- */
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-zinc-50,
html[data-theme="dark"] .bg-neutral-50,
html[data-theme="dark"] .bg-stone-50 {
    background-color: var(--dk-surface-sunken);
}
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-zinc-100,
html[data-theme="dark"] .bg-neutral-100,
html[data-theme="dark"] .bg-stone-100 {
    background-color: var(--dk-surface-2);
}
html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .bg-slate-200,
html[data-theme="dark"] .bg-zinc-200,
html[data-theme="dark"] .bg-neutral-200,
html[data-theme="dark"] .bg-stone-200 {
    background-color: var(--dk-surface-3);
}

/* ---------- Textos neutros ---------- */
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-zinc-900,
html[data-theme="dark"] .text-neutral-900,
html[data-theme="dark"] .text-stone-900 {
    color: var(--dk-text-strong);
}
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-zinc-800,
html[data-theme="dark"] .text-neutral-800,
html[data-theme="dark"] .text-stone-800 {
    color: var(--dk-text-800);
}
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-zinc-700,
html[data-theme="dark"] .text-neutral-700,
html[data-theme="dark"] .text-stone-700 {
    color: var(--dk-text);
}
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-zinc-600,
html[data-theme="dark"] .text-neutral-600,
html[data-theme="dark"] .text-stone-600 {
    color: var(--dk-text-600);
}
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-zinc-500,
html[data-theme="dark"] .text-neutral-500,
html[data-theme="dark"] .text-stone-500 {
    color: var(--dk-text-muted);
}
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-zinc-400,
html[data-theme="dark"] .text-neutral-400,
html[data-theme="dark"] .text-stone-400 {
    color: var(--dk-text-faint);
}
html[data-theme="dark"] .text-gray-300,
html[data-theme="dark"] .text-slate-300,
html[data-theme="dark"] .text-zinc-300,
html[data-theme="dark"] .text-neutral-300,
html[data-theme="dark"] .text-stone-300 {
    color: var(--dk-text-dim);
}

/* ---------- Bordas neutras ---------- */
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-zinc-100,
html[data-theme="dark"] .border-neutral-100,
html[data-theme="dark"] .border-stone-100 {
    border-color: var(--dk-border-subtle);
}
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-zinc-200,
html[data-theme="dark"] .border-neutral-200,
html[data-theme="dark"] .border-stone-200 {
    border-color: var(--dk-border);
}
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-zinc-300,
html[data-theme="dark"] .border-neutral-300,
html[data-theme="dark"] .border-stone-300 {
    border-color: var(--dk-border-strong);
}

/* ---------- Divisores e rings neutros ---------- */
html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dk-border);
}
html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dk-border);
}
html[data-theme="dark"] .divide-zinc-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-zinc-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dk-border);
}
html[data-theme="dark"] .divide-neutral-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dk-border);
}
html[data-theme="dark"] .divide-stone-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-stone-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dk-border);
}

/* ---------- Preto puro vira o texto forte (evita texto invisivel) ---------- */
html[data-theme="dark"] .text-black { color: var(--dk-text-strong); }
html[data-theme="dark"] .border-white { border-color: var(--dk-border); }

/* ---------- Hover neutro ---------- */
html[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--dk-surface-2); }
html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: var(--dk-surface-2);
}
html[data-theme="dark"] .hover\:text-gray-900:hover { color: var(--dk-text-strong); }
html[data-theme="dark"] .hover\:border-gray-300:hover { border-color: var(--dk-border-strong); }
html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover {
    background-color: var(--dk-surface-2);
}
html[data-theme="dark"] .hover\:text-slate-900:hover { color: var(--dk-text-strong); }
html[data-theme="dark"] .hover\:border-slate-300:hover { border-color: var(--dk-border-strong); }
html[data-theme="dark"] .hover\:bg-zinc-50:hover,
html[data-theme="dark"] .hover\:bg-zinc-100:hover {
    background-color: var(--dk-surface-2);
}
html[data-theme="dark"] .hover\:text-zinc-900:hover { color: var(--dk-text-strong); }
html[data-theme="dark"] .hover\:border-zinc-300:hover { border-color: var(--dk-border-strong); }
html[data-theme="dark"] .hover\:bg-neutral-50:hover,
html[data-theme="dark"] .hover\:bg-neutral-100:hover {
    background-color: var(--dk-surface-2);
}
html[data-theme="dark"] .hover\:text-neutral-900:hover { color: var(--dk-text-strong); }
html[data-theme="dark"] .hover\:border-neutral-300:hover { border-color: var(--dk-border-strong); }
html[data-theme="dark"] .hover\:bg-stone-50:hover,
html[data-theme="dark"] .hover\:bg-stone-100:hover {
    background-color: var(--dk-surface-2);
}
html[data-theme="dark"] .hover\:text-stone-900:hover { color: var(--dk-text-strong); }
html[data-theme="dark"] .hover\:border-stone-300:hover { border-color: var(--dk-border-strong); }

/* ============================================================
 * Tintas de paleta (bg-blue-50 + text-blue-800 e afins).
 * Sao os cards de alerta, badges e status espalhados pelo sistema.
 * O fundo vira a propria cor em baixa opacidade sobre o escuro, e o
 * texto sobe para o tom 300 — que tem contraste no fundo escuro.
 * ============================================================ */

/* red */
html[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.12); }
html[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.20); }
html[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.18); }
html[data-theme="dark"] .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.26); }
html[data-theme="dark"] .text-red-900,
html[data-theme="dark"] .text-red-800,
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-red-600 { color: #fca5a5; }
html[data-theme="dark"] .border-red-100,
html[data-theme="dark"] .border-red-200 { border-color: rgba(239, 68, 68, 0.30); }

/* orange */
html[data-theme="dark"] .bg-orange-50 { background-color: rgba(249, 115, 22, 0.12); }
html[data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.20); }
html[data-theme="dark"] .hover\:bg-orange-50:hover { background-color: rgba(249, 115, 22, 0.18); }
html[data-theme="dark"] .hover\:bg-orange-100:hover { background-color: rgba(249, 115, 22, 0.26); }
html[data-theme="dark"] .text-orange-900,
html[data-theme="dark"] .text-orange-800,
html[data-theme="dark"] .text-orange-700,
html[data-theme="dark"] .text-orange-600 { color: #fdba74; }
html[data-theme="dark"] .border-orange-100,
html[data-theme="dark"] .border-orange-200 { border-color: rgba(249, 115, 22, 0.30); }

/* amber */
html[data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12); }
html[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.20); }
html[data-theme="dark"] .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.18); }
html[data-theme="dark"] .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.26); }
html[data-theme="dark"] .text-amber-900,
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-600 { color: #fcd34d; }
html[data-theme="dark"] .border-amber-100,
html[data-theme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, 0.30); }

/* yellow */
html[data-theme="dark"] .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12); }
html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.20); }
html[data-theme="dark"] .hover\:bg-yellow-50:hover { background-color: rgba(234, 179, 8, 0.18); }
html[data-theme="dark"] .hover\:bg-yellow-100:hover { background-color: rgba(234, 179, 8, 0.26); }
html[data-theme="dark"] .text-yellow-900,
html[data-theme="dark"] .text-yellow-800,
html[data-theme="dark"] .text-yellow-700,
html[data-theme="dark"] .text-yellow-600 { color: #fde047; }
html[data-theme="dark"] .border-yellow-100,
html[data-theme="dark"] .border-yellow-200 { border-color: rgba(234, 179, 8, 0.30); }

/* lime */
html[data-theme="dark"] .bg-lime-50 { background-color: rgba(132, 204, 22, 0.12); }
html[data-theme="dark"] .bg-lime-100 { background-color: rgba(132, 204, 22, 0.20); }
html[data-theme="dark"] .hover\:bg-lime-50:hover { background-color: rgba(132, 204, 22, 0.18); }
html[data-theme="dark"] .hover\:bg-lime-100:hover { background-color: rgba(132, 204, 22, 0.26); }
html[data-theme="dark"] .text-lime-900,
html[data-theme="dark"] .text-lime-800,
html[data-theme="dark"] .text-lime-700,
html[data-theme="dark"] .text-lime-600 { color: #bef264; }
html[data-theme="dark"] .border-lime-100,
html[data-theme="dark"] .border-lime-200 { border-color: rgba(132, 204, 22, 0.30); }

/* green */
html[data-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.12); }
html[data-theme="dark"] .bg-green-100 { background-color: rgba(34, 197, 94, 0.20); }
html[data-theme="dark"] .hover\:bg-green-50:hover { background-color: rgba(34, 197, 94, 0.18); }
html[data-theme="dark"] .hover\:bg-green-100:hover { background-color: rgba(34, 197, 94, 0.26); }
html[data-theme="dark"] .text-green-900,
html[data-theme="dark"] .text-green-800,
html[data-theme="dark"] .text-green-700,
html[data-theme="dark"] .text-green-600 { color: #86efac; }
html[data-theme="dark"] .border-green-100,
html[data-theme="dark"] .border-green-200 { border-color: rgba(34, 197, 94, 0.30); }

/* emerald */
html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12); }
html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.20); }
html[data-theme="dark"] .hover\:bg-emerald-50:hover { background-color: rgba(16, 185, 129, 0.18); }
html[data-theme="dark"] .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.26); }
html[data-theme="dark"] .text-emerald-900,
html[data-theme="dark"] .text-emerald-800,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-600 { color: #6ee7b7; }
html[data-theme="dark"] .border-emerald-100,
html[data-theme="dark"] .border-emerald-200 { border-color: rgba(16, 185, 129, 0.30); }

/* teal */
html[data-theme="dark"] .bg-teal-50 { background-color: rgba(20, 184, 166, 0.12); }
html[data-theme="dark"] .bg-teal-100 { background-color: rgba(20, 184, 166, 0.20); }
html[data-theme="dark"] .hover\:bg-teal-50:hover { background-color: rgba(20, 184, 166, 0.18); }
html[data-theme="dark"] .hover\:bg-teal-100:hover { background-color: rgba(20, 184, 166, 0.26); }
html[data-theme="dark"] .text-teal-900,
html[data-theme="dark"] .text-teal-800,
html[data-theme="dark"] .text-teal-700,
html[data-theme="dark"] .text-teal-600 { color: #5eead4; }
html[data-theme="dark"] .border-teal-100,
html[data-theme="dark"] .border-teal-200 { border-color: rgba(20, 184, 166, 0.30); }

/* cyan */
html[data-theme="dark"] .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.12); }
html[data-theme="dark"] .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.20); }
html[data-theme="dark"] .hover\:bg-cyan-50:hover { background-color: rgba(6, 182, 212, 0.18); }
html[data-theme="dark"] .hover\:bg-cyan-100:hover { background-color: rgba(6, 182, 212, 0.26); }
html[data-theme="dark"] .text-cyan-900,
html[data-theme="dark"] .text-cyan-800,
html[data-theme="dark"] .text-cyan-700,
html[data-theme="dark"] .text-cyan-600 { color: #67e8f9; }
html[data-theme="dark"] .border-cyan-100,
html[data-theme="dark"] .border-cyan-200 { border-color: rgba(6, 182, 212, 0.30); }

/* sky */
html[data-theme="dark"] .bg-sky-50 { background-color: rgba(14, 165, 233, 0.12); }
html[data-theme="dark"] .bg-sky-100 { background-color: rgba(14, 165, 233, 0.20); }
html[data-theme="dark"] .hover\:bg-sky-50:hover { background-color: rgba(14, 165, 233, 0.18); }
html[data-theme="dark"] .hover\:bg-sky-100:hover { background-color: rgba(14, 165, 233, 0.26); }
html[data-theme="dark"] .text-sky-900,
html[data-theme="dark"] .text-sky-800,
html[data-theme="dark"] .text-sky-700,
html[data-theme="dark"] .text-sky-600 { color: #7dd3fc; }
html[data-theme="dark"] .border-sky-100,
html[data-theme="dark"] .border-sky-200 { border-color: rgba(14, 165, 233, 0.30); }

/* blue */
html[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12); }
html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.20); }
html[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.18); }
html[data-theme="dark"] .hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.26); }
html[data-theme="dark"] .text-blue-900,
html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-600 { color: #93c5fd; }
html[data-theme="dark"] .border-blue-100,
html[data-theme="dark"] .border-blue-200 { border-color: rgba(59, 130, 246, 0.30); }

/* indigo */
html[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12); }
html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.20); }
html[data-theme="dark"] .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.18); }
html[data-theme="dark"] .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.26); }
html[data-theme="dark"] .text-indigo-900,
html[data-theme="dark"] .text-indigo-800,
html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-indigo-600 { color: #a5b4fc; }
html[data-theme="dark"] .border-indigo-100,
html[data-theme="dark"] .border-indigo-200 { border-color: rgba(99, 102, 241, 0.30); }

/* violet */
html[data-theme="dark"] .bg-violet-50 { background-color: rgba(139, 92, 246, 0.12); }
html[data-theme="dark"] .bg-violet-100 { background-color: rgba(139, 92, 246, 0.20); }
html[data-theme="dark"] .hover\:bg-violet-50:hover { background-color: rgba(139, 92, 246, 0.18); }
html[data-theme="dark"] .hover\:bg-violet-100:hover { background-color: rgba(139, 92, 246, 0.26); }
html[data-theme="dark"] .text-violet-900,
html[data-theme="dark"] .text-violet-800,
html[data-theme="dark"] .text-violet-700,
html[data-theme="dark"] .text-violet-600 { color: #c4b5fd; }
html[data-theme="dark"] .border-violet-100,
html[data-theme="dark"] .border-violet-200 { border-color: rgba(139, 92, 246, 0.30); }

/* purple */
html[data-theme="dark"] .bg-purple-50 { background-color: rgba(168, 85, 247, 0.12); }
html[data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.20); }
html[data-theme="dark"] .hover\:bg-purple-50:hover { background-color: rgba(168, 85, 247, 0.18); }
html[data-theme="dark"] .hover\:bg-purple-100:hover { background-color: rgba(168, 85, 247, 0.26); }
html[data-theme="dark"] .text-purple-900,
html[data-theme="dark"] .text-purple-800,
html[data-theme="dark"] .text-purple-700,
html[data-theme="dark"] .text-purple-600 { color: #d8b4fe; }
html[data-theme="dark"] .border-purple-100,
html[data-theme="dark"] .border-purple-200 { border-color: rgba(168, 85, 247, 0.30); }

/* fuchsia */
html[data-theme="dark"] .bg-fuchsia-50 { background-color: rgba(217, 70, 239, 0.12); }
html[data-theme="dark"] .bg-fuchsia-100 { background-color: rgba(217, 70, 239, 0.20); }
html[data-theme="dark"] .hover\:bg-fuchsia-50:hover { background-color: rgba(217, 70, 239, 0.18); }
html[data-theme="dark"] .hover\:bg-fuchsia-100:hover { background-color: rgba(217, 70, 239, 0.26); }
html[data-theme="dark"] .text-fuchsia-900,
html[data-theme="dark"] .text-fuchsia-800,
html[data-theme="dark"] .text-fuchsia-700,
html[data-theme="dark"] .text-fuchsia-600 { color: #f0abfc; }
html[data-theme="dark"] .border-fuchsia-100,
html[data-theme="dark"] .border-fuchsia-200 { border-color: rgba(217, 70, 239, 0.30); }

/* pink */
html[data-theme="dark"] .bg-pink-50 { background-color: rgba(236, 72, 153, 0.12); }
html[data-theme="dark"] .bg-pink-100 { background-color: rgba(236, 72, 153, 0.20); }
html[data-theme="dark"] .hover\:bg-pink-50:hover { background-color: rgba(236, 72, 153, 0.18); }
html[data-theme="dark"] .hover\:bg-pink-100:hover { background-color: rgba(236, 72, 153, 0.26); }
html[data-theme="dark"] .text-pink-900,
html[data-theme="dark"] .text-pink-800,
html[data-theme="dark"] .text-pink-700,
html[data-theme="dark"] .text-pink-600 { color: #f9a8d4; }
html[data-theme="dark"] .border-pink-100,
html[data-theme="dark"] .border-pink-200 { border-color: rgba(236, 72, 153, 0.30); }

/* rose */
html[data-theme="dark"] .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12); }
html[data-theme="dark"] .bg-rose-100 { background-color: rgba(244, 63, 94, 0.20); }
html[data-theme="dark"] .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.18); }
html[data-theme="dark"] .hover\:bg-rose-100:hover { background-color: rgba(244, 63, 94, 0.26); }
html[data-theme="dark"] .text-rose-900,
html[data-theme="dark"] .text-rose-800,
html[data-theme="dark"] .text-rose-700,
html[data-theme="dark"] .text-rose-600 { color: #fda4af; }
html[data-theme="dark"] .border-rose-100,
html[data-theme="dark"] .border-rose-200 { border-color: rgba(244, 63, 94, 0.30); }

/* ============================================================
 * Componentes do projeto (classes @apply ja compiladas nos bundles)
 * ============================================================ */
html[data-theme="dark"] .card { background-color: var(--dk-surface); border-color: var(--dk-border-subtle); }
html[data-theme="dark"] .card-header { background: var(--dk-surface-sunken); border-color: var(--dk-border-subtle); }
html[data-theme="dark"] .btn-secondary {
    background-color: var(--dk-surface-2);
    color: var(--dk-text);
    border-color: var(--dk-border);
}
html[data-theme="dark"] .btn-secondary:hover { background-color: var(--dk-surface-3); }
html[data-theme="dark"] .btn-outline { color: var(--dk-text); border-color: var(--dk-border); }
html[data-theme="dark"] .btn-outline:hover { background-color: var(--dk-surface-2); }
html[data-theme="dark"] .glass { background-color: rgba(30, 41, 59, 0.8); }

/* ---------- Formularios ---------- */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--dk-surface-sunken);
    border-color: var(--dk-border-strong);
    color: var(--dk-text-strong);
}
html[data-theme="dark"] ::placeholder { color: var(--dk-text-faint); opacity: 1; }
/* option herda do SO em alguns navegadores; fixa para nao sair branco-no-branco */
html[data-theme="dark"] select option { background-color: var(--dk-surface); color: var(--dk-text-strong); }
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled {
    background-color: var(--dk-bg);
    color: var(--dk-text-faint);
}

/* Campo marcado na tela como transparente/sem borda continua assim.
   A regra generica acima tem a MESMA especificidade, entao quem decide e a
   ordem — por isso estas vem depois. Sem isto a busca da topbar, que e um
   input transparente dentro de um container ja colorido, ganhava um retangulo
   escuro por dentro. Decisao explicita de tela vence o padrao. */
html[data-theme="dark"] input.bg-transparent { background-color: transparent; }
html[data-theme="dark"] input.border-none { border: none; }
html[data-theme="dark"] input.border-0 { border-width: 0; }
html[data-theme="dark"] select.bg-transparent { background-color: transparent; }
html[data-theme="dark"] select.border-none { border: none; }
html[data-theme="dark"] select.border-0 { border-width: 0; }
html[data-theme="dark"] textarea.bg-transparent { background-color: transparent; }
html[data-theme="dark"] textarea.border-none { border: none; }
html[data-theme="dark"] textarea.border-0 { border-width: 0; }

/* ---------- Tabelas ---------- */
html[data-theme="dark"] table { color: var(--dk-text); }
html[data-theme="dark"] thead th { color: var(--dk-text-muted); }
html[data-theme="dark"] tbody tr { border-color: var(--dk-border-subtle); }
html[data-theme="dark"] tbody tr:hover { background-color: var(--dk-surface-2); }

/* ---------- Sombra: no escuro, sombra clara nao existe. Aprofunda. ---------- */
html[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6); }

/* ---------- Modais / dropdowns ---------- */
/* O overlay do modal ja e preto translucido nos dois modos; o que muda e o
   painel, que cai na regra de .bg-white acima. Aqui so o divisor interno. */
html[data-theme="dark"] [role="dialog"], html[data-theme="dark"] [role="menu"] {
    border-color: var(--dk-border);
}

/* ============================================================
 * LACUNA 1 — modificador de opacidade (bg-gray-50/50, bg-white/80).
 *
 * O Tailwind gera uma CLASSE SEPARADA para cada opacidade, entao a
 * regra de .bg-gray-50 nao alcanca .bg-gray-50\/50. Era o que deixava
 * as faixas "Ver todos os ..." claras no dashboard.
 *
 * bg-white/5 a /30 (1.823 usos) fica FORA de proposito: sao overlays
 * SOBRE header colorido, onde branco translucido e o efeito desejado.
 * So a partir de /40 (49 usos) o branco atua como superficie.
 * ============================================================ */
html[data-theme="dark"] .bg-white\/40 { background-color: rgba(30, 41, 59, 0.40); }
html[data-theme="dark"] .bg-white\/50 { background-color: rgba(30, 41, 59, 0.50); }
html[data-theme="dark"] .bg-white\/60 { background-color: rgba(30, 41, 59, 0.60); }
html[data-theme="dark"] .bg-white\/70 { background-color: rgba(30, 41, 59, 0.70); }
html[data-theme="dark"] .bg-white\/75 { background-color: rgba(30, 41, 59, 0.75); }
html[data-theme="dark"] .bg-white\/80 { background-color: rgba(30, 41, 59, 0.80); }
html[data-theme="dark"] .bg-white\/90 { background-color: rgba(30, 41, 59, 0.90); }
html[data-theme="dark"] .bg-white\/95 { background-color: rgba(30, 41, 59, 0.95); }
html[data-theme="dark"] .bg-gray-50\/10 { background-color: rgba(23, 32, 51, 0.10); }
html[data-theme="dark"] .bg-gray-50\/20 { background-color: rgba(23, 32, 51, 0.20); }
html[data-theme="dark"] .bg-gray-50\/25 { background-color: rgba(23, 32, 51, 0.25); }
html[data-theme="dark"] .bg-gray-50\/30 { background-color: rgba(23, 32, 51, 0.30); }
html[data-theme="dark"] .bg-gray-50\/40 { background-color: rgba(23, 32, 51, 0.40); }
html[data-theme="dark"] .bg-gray-50\/50 { background-color: rgba(23, 32, 51, 0.50); }
html[data-theme="dark"] .bg-gray-50\/60 { background-color: rgba(23, 32, 51, 0.60); }
html[data-theme="dark"] .bg-gray-50\/70 { background-color: rgba(23, 32, 51, 0.70); }
html[data-theme="dark"] .bg-gray-50\/75 { background-color: rgba(23, 32, 51, 0.75); }
html[data-theme="dark"] .bg-gray-50\/80 { background-color: rgba(23, 32, 51, 0.80); }
html[data-theme="dark"] .bg-gray-50\/90 { background-color: rgba(23, 32, 51, 0.90); }
html[data-theme="dark"] .bg-gray-50\/95 { background-color: rgba(23, 32, 51, 0.95); }
html[data-theme="dark"] .bg-gray-100\/10 { background-color: rgba(36, 48, 74, 0.10); }
html[data-theme="dark"] .bg-gray-100\/20 { background-color: rgba(36, 48, 74, 0.20); }
html[data-theme="dark"] .bg-gray-100\/25 { background-color: rgba(36, 48, 74, 0.25); }
html[data-theme="dark"] .bg-gray-100\/30 { background-color: rgba(36, 48, 74, 0.30); }
html[data-theme="dark"] .bg-gray-100\/40 { background-color: rgba(36, 48, 74, 0.40); }
html[data-theme="dark"] .bg-gray-100\/50 { background-color: rgba(36, 48, 74, 0.50); }
html[data-theme="dark"] .bg-gray-100\/60 { background-color: rgba(36, 48, 74, 0.60); }
html[data-theme="dark"] .bg-gray-100\/70 { background-color: rgba(36, 48, 74, 0.70); }
html[data-theme="dark"] .bg-gray-100\/75 { background-color: rgba(36, 48, 74, 0.75); }
html[data-theme="dark"] .bg-gray-100\/80 { background-color: rgba(36, 48, 74, 0.80); }
html[data-theme="dark"] .bg-gray-100\/90 { background-color: rgba(36, 48, 74, 0.90); }
html[data-theme="dark"] .bg-gray-100\/95 { background-color: rgba(36, 48, 74, 0.95); }
html[data-theme="dark"] .bg-gray-200\/10 { background-color: rgba(51, 65, 85, 0.10); }
html[data-theme="dark"] .bg-gray-200\/20 { background-color: rgba(51, 65, 85, 0.20); }
html[data-theme="dark"] .bg-gray-200\/25 { background-color: rgba(51, 65, 85, 0.25); }
html[data-theme="dark"] .bg-gray-200\/30 { background-color: rgba(51, 65, 85, 0.30); }
html[data-theme="dark"] .bg-gray-200\/40 { background-color: rgba(51, 65, 85, 0.40); }
html[data-theme="dark"] .bg-gray-200\/50 { background-color: rgba(51, 65, 85, 0.50); }
html[data-theme="dark"] .bg-gray-200\/60 { background-color: rgba(51, 65, 85, 0.60); }
html[data-theme="dark"] .bg-gray-200\/70 { background-color: rgba(51, 65, 85, 0.70); }
html[data-theme="dark"] .bg-gray-200\/75 { background-color: rgba(51, 65, 85, 0.75); }
html[data-theme="dark"] .bg-gray-200\/80 { background-color: rgba(51, 65, 85, 0.80); }
html[data-theme="dark"] .bg-gray-200\/90 { background-color: rgba(51, 65, 85, 0.90); }
html[data-theme="dark"] .bg-gray-200\/95 { background-color: rgba(51, 65, 85, 0.95); }
html[data-theme="dark"] .bg-slate-50\/10 { background-color: rgba(23, 32, 51, 0.10); }
html[data-theme="dark"] .bg-slate-50\/20 { background-color: rgba(23, 32, 51, 0.20); }
html[data-theme="dark"] .bg-slate-50\/25 { background-color: rgba(23, 32, 51, 0.25); }
html[data-theme="dark"] .bg-slate-50\/30 { background-color: rgba(23, 32, 51, 0.30); }
html[data-theme="dark"] .bg-slate-50\/40 { background-color: rgba(23, 32, 51, 0.40); }
html[data-theme="dark"] .bg-slate-50\/50 { background-color: rgba(23, 32, 51, 0.50); }
html[data-theme="dark"] .bg-slate-50\/60 { background-color: rgba(23, 32, 51, 0.60); }
html[data-theme="dark"] .bg-slate-50\/70 { background-color: rgba(23, 32, 51, 0.70); }
html[data-theme="dark"] .bg-slate-50\/75 { background-color: rgba(23, 32, 51, 0.75); }
html[data-theme="dark"] .bg-slate-50\/80 { background-color: rgba(23, 32, 51, 0.80); }
html[data-theme="dark"] .bg-slate-50\/90 { background-color: rgba(23, 32, 51, 0.90); }
html[data-theme="dark"] .bg-slate-50\/95 { background-color: rgba(23, 32, 51, 0.95); }
html[data-theme="dark"] .bg-slate-100\/10 { background-color: rgba(36, 48, 74, 0.10); }
html[data-theme="dark"] .bg-slate-100\/20 { background-color: rgba(36, 48, 74, 0.20); }
html[data-theme="dark"] .bg-slate-100\/25 { background-color: rgba(36, 48, 74, 0.25); }
html[data-theme="dark"] .bg-slate-100\/30 { background-color: rgba(36, 48, 74, 0.30); }
html[data-theme="dark"] .bg-slate-100\/40 { background-color: rgba(36, 48, 74, 0.40); }
html[data-theme="dark"] .bg-slate-100\/50 { background-color: rgba(36, 48, 74, 0.50); }
html[data-theme="dark"] .bg-slate-100\/60 { background-color: rgba(36, 48, 74, 0.60); }
html[data-theme="dark"] .bg-slate-100\/70 { background-color: rgba(36, 48, 74, 0.70); }
html[data-theme="dark"] .bg-slate-100\/75 { background-color: rgba(36, 48, 74, 0.75); }
html[data-theme="dark"] .bg-slate-100\/80 { background-color: rgba(36, 48, 74, 0.80); }
html[data-theme="dark"] .bg-slate-100\/90 { background-color: rgba(36, 48, 74, 0.90); }
html[data-theme="dark"] .bg-slate-100\/95 { background-color: rgba(36, 48, 74, 0.95); }
html[data-theme="dark"] .bg-slate-200\/10 { background-color: rgba(51, 65, 85, 0.10); }
html[data-theme="dark"] .bg-slate-200\/20 { background-color: rgba(51, 65, 85, 0.20); }
html[data-theme="dark"] .bg-slate-200\/25 { background-color: rgba(51, 65, 85, 0.25); }
html[data-theme="dark"] .bg-slate-200\/30 { background-color: rgba(51, 65, 85, 0.30); }
html[data-theme="dark"] .bg-slate-200\/40 { background-color: rgba(51, 65, 85, 0.40); }
html[data-theme="dark"] .bg-slate-200\/50 { background-color: rgba(51, 65, 85, 0.50); }
html[data-theme="dark"] .bg-slate-200\/60 { background-color: rgba(51, 65, 85, 0.60); }
html[data-theme="dark"] .bg-slate-200\/70 { background-color: rgba(51, 65, 85, 0.70); }
html[data-theme="dark"] .bg-slate-200\/75 { background-color: rgba(51, 65, 85, 0.75); }
html[data-theme="dark"] .bg-slate-200\/80 { background-color: rgba(51, 65, 85, 0.80); }
html[data-theme="dark"] .bg-slate-200\/90 { background-color: rgba(51, 65, 85, 0.90); }
html[data-theme="dark"] .bg-slate-200\/95 { background-color: rgba(51, 65, 85, 0.95); }
html[data-theme="dark"] .bg-zinc-50\/10 { background-color: rgba(23, 32, 51, 0.10); }
html[data-theme="dark"] .bg-zinc-50\/20 { background-color: rgba(23, 32, 51, 0.20); }
html[data-theme="dark"] .bg-zinc-50\/25 { background-color: rgba(23, 32, 51, 0.25); }
html[data-theme="dark"] .bg-zinc-50\/30 { background-color: rgba(23, 32, 51, 0.30); }
html[data-theme="dark"] .bg-zinc-50\/40 { background-color: rgba(23, 32, 51, 0.40); }
html[data-theme="dark"] .bg-zinc-50\/50 { background-color: rgba(23, 32, 51, 0.50); }
html[data-theme="dark"] .bg-zinc-50\/60 { background-color: rgba(23, 32, 51, 0.60); }
html[data-theme="dark"] .bg-zinc-50\/70 { background-color: rgba(23, 32, 51, 0.70); }
html[data-theme="dark"] .bg-zinc-50\/75 { background-color: rgba(23, 32, 51, 0.75); }
html[data-theme="dark"] .bg-zinc-50\/80 { background-color: rgba(23, 32, 51, 0.80); }
html[data-theme="dark"] .bg-zinc-50\/90 { background-color: rgba(23, 32, 51, 0.90); }
html[data-theme="dark"] .bg-zinc-50\/95 { background-color: rgba(23, 32, 51, 0.95); }
html[data-theme="dark"] .bg-zinc-100\/10 { background-color: rgba(36, 48, 74, 0.10); }
html[data-theme="dark"] .bg-zinc-100\/20 { background-color: rgba(36, 48, 74, 0.20); }
html[data-theme="dark"] .bg-zinc-100\/25 { background-color: rgba(36, 48, 74, 0.25); }
html[data-theme="dark"] .bg-zinc-100\/30 { background-color: rgba(36, 48, 74, 0.30); }
html[data-theme="dark"] .bg-zinc-100\/40 { background-color: rgba(36, 48, 74, 0.40); }
html[data-theme="dark"] .bg-zinc-100\/50 { background-color: rgba(36, 48, 74, 0.50); }
html[data-theme="dark"] .bg-zinc-100\/60 { background-color: rgba(36, 48, 74, 0.60); }
html[data-theme="dark"] .bg-zinc-100\/70 { background-color: rgba(36, 48, 74, 0.70); }
html[data-theme="dark"] .bg-zinc-100\/75 { background-color: rgba(36, 48, 74, 0.75); }
html[data-theme="dark"] .bg-zinc-100\/80 { background-color: rgba(36, 48, 74, 0.80); }
html[data-theme="dark"] .bg-zinc-100\/90 { background-color: rgba(36, 48, 74, 0.90); }
html[data-theme="dark"] .bg-zinc-100\/95 { background-color: rgba(36, 48, 74, 0.95); }
html[data-theme="dark"] .bg-zinc-200\/10 { background-color: rgba(51, 65, 85, 0.10); }
html[data-theme="dark"] .bg-zinc-200\/20 { background-color: rgba(51, 65, 85, 0.20); }
html[data-theme="dark"] .bg-zinc-200\/25 { background-color: rgba(51, 65, 85, 0.25); }
html[data-theme="dark"] .bg-zinc-200\/30 { background-color: rgba(51, 65, 85, 0.30); }
html[data-theme="dark"] .bg-zinc-200\/40 { background-color: rgba(51, 65, 85, 0.40); }
html[data-theme="dark"] .bg-zinc-200\/50 { background-color: rgba(51, 65, 85, 0.50); }
html[data-theme="dark"] .bg-zinc-200\/60 { background-color: rgba(51, 65, 85, 0.60); }
html[data-theme="dark"] .bg-zinc-200\/70 { background-color: rgba(51, 65, 85, 0.70); }
html[data-theme="dark"] .bg-zinc-200\/75 { background-color: rgba(51, 65, 85, 0.75); }
html[data-theme="dark"] .bg-zinc-200\/80 { background-color: rgba(51, 65, 85, 0.80); }
html[data-theme="dark"] .bg-zinc-200\/90 { background-color: rgba(51, 65, 85, 0.90); }
html[data-theme="dark"] .bg-zinc-200\/95 { background-color: rgba(51, 65, 85, 0.95); }
html[data-theme="dark"] .bg-neutral-50\/10 { background-color: rgba(23, 32, 51, 0.10); }
html[data-theme="dark"] .bg-neutral-50\/20 { background-color: rgba(23, 32, 51, 0.20); }
html[data-theme="dark"] .bg-neutral-50\/25 { background-color: rgba(23, 32, 51, 0.25); }
html[data-theme="dark"] .bg-neutral-50\/30 { background-color: rgba(23, 32, 51, 0.30); }
html[data-theme="dark"] .bg-neutral-50\/40 { background-color: rgba(23, 32, 51, 0.40); }
html[data-theme="dark"] .bg-neutral-50\/50 { background-color: rgba(23, 32, 51, 0.50); }
html[data-theme="dark"] .bg-neutral-50\/60 { background-color: rgba(23, 32, 51, 0.60); }
html[data-theme="dark"] .bg-neutral-50\/70 { background-color: rgba(23, 32, 51, 0.70); }
html[data-theme="dark"] .bg-neutral-50\/75 { background-color: rgba(23, 32, 51, 0.75); }
html[data-theme="dark"] .bg-neutral-50\/80 { background-color: rgba(23, 32, 51, 0.80); }
html[data-theme="dark"] .bg-neutral-50\/90 { background-color: rgba(23, 32, 51, 0.90); }
html[data-theme="dark"] .bg-neutral-50\/95 { background-color: rgba(23, 32, 51, 0.95); }
html[data-theme="dark"] .bg-neutral-100\/10 { background-color: rgba(36, 48, 74, 0.10); }
html[data-theme="dark"] .bg-neutral-100\/20 { background-color: rgba(36, 48, 74, 0.20); }
html[data-theme="dark"] .bg-neutral-100\/25 { background-color: rgba(36, 48, 74, 0.25); }
html[data-theme="dark"] .bg-neutral-100\/30 { background-color: rgba(36, 48, 74, 0.30); }
html[data-theme="dark"] .bg-neutral-100\/40 { background-color: rgba(36, 48, 74, 0.40); }
html[data-theme="dark"] .bg-neutral-100\/50 { background-color: rgba(36, 48, 74, 0.50); }
html[data-theme="dark"] .bg-neutral-100\/60 { background-color: rgba(36, 48, 74, 0.60); }
html[data-theme="dark"] .bg-neutral-100\/70 { background-color: rgba(36, 48, 74, 0.70); }
html[data-theme="dark"] .bg-neutral-100\/75 { background-color: rgba(36, 48, 74, 0.75); }
html[data-theme="dark"] .bg-neutral-100\/80 { background-color: rgba(36, 48, 74, 0.80); }
html[data-theme="dark"] .bg-neutral-100\/90 { background-color: rgba(36, 48, 74, 0.90); }
html[data-theme="dark"] .bg-neutral-100\/95 { background-color: rgba(36, 48, 74, 0.95); }
html[data-theme="dark"] .bg-neutral-200\/10 { background-color: rgba(51, 65, 85, 0.10); }
html[data-theme="dark"] .bg-neutral-200\/20 { background-color: rgba(51, 65, 85, 0.20); }
html[data-theme="dark"] .bg-neutral-200\/25 { background-color: rgba(51, 65, 85, 0.25); }
html[data-theme="dark"] .bg-neutral-200\/30 { background-color: rgba(51, 65, 85, 0.30); }
html[data-theme="dark"] .bg-neutral-200\/40 { background-color: rgba(51, 65, 85, 0.40); }
html[data-theme="dark"] .bg-neutral-200\/50 { background-color: rgba(51, 65, 85, 0.50); }
html[data-theme="dark"] .bg-neutral-200\/60 { background-color: rgba(51, 65, 85, 0.60); }
html[data-theme="dark"] .bg-neutral-200\/70 { background-color: rgba(51, 65, 85, 0.70); }
html[data-theme="dark"] .bg-neutral-200\/75 { background-color: rgba(51, 65, 85, 0.75); }
html[data-theme="dark"] .bg-neutral-200\/80 { background-color: rgba(51, 65, 85, 0.80); }
html[data-theme="dark"] .bg-neutral-200\/90 { background-color: rgba(51, 65, 85, 0.90); }
html[data-theme="dark"] .bg-neutral-200\/95 { background-color: rgba(51, 65, 85, 0.95); }
html[data-theme="dark"] .bg-stone-50\/10 { background-color: rgba(23, 32, 51, 0.10); }
html[data-theme="dark"] .bg-stone-50\/20 { background-color: rgba(23, 32, 51, 0.20); }
html[data-theme="dark"] .bg-stone-50\/25 { background-color: rgba(23, 32, 51, 0.25); }
html[data-theme="dark"] .bg-stone-50\/30 { background-color: rgba(23, 32, 51, 0.30); }
html[data-theme="dark"] .bg-stone-50\/40 { background-color: rgba(23, 32, 51, 0.40); }
html[data-theme="dark"] .bg-stone-50\/50 { background-color: rgba(23, 32, 51, 0.50); }
html[data-theme="dark"] .bg-stone-50\/60 { background-color: rgba(23, 32, 51, 0.60); }
html[data-theme="dark"] .bg-stone-50\/70 { background-color: rgba(23, 32, 51, 0.70); }
html[data-theme="dark"] .bg-stone-50\/75 { background-color: rgba(23, 32, 51, 0.75); }
html[data-theme="dark"] .bg-stone-50\/80 { background-color: rgba(23, 32, 51, 0.80); }
html[data-theme="dark"] .bg-stone-50\/90 { background-color: rgba(23, 32, 51, 0.90); }
html[data-theme="dark"] .bg-stone-50\/95 { background-color: rgba(23, 32, 51, 0.95); }
html[data-theme="dark"] .bg-stone-100\/10 { background-color: rgba(36, 48, 74, 0.10); }
html[data-theme="dark"] .bg-stone-100\/20 { background-color: rgba(36, 48, 74, 0.20); }
html[data-theme="dark"] .bg-stone-100\/25 { background-color: rgba(36, 48, 74, 0.25); }
html[data-theme="dark"] .bg-stone-100\/30 { background-color: rgba(36, 48, 74, 0.30); }
html[data-theme="dark"] .bg-stone-100\/40 { background-color: rgba(36, 48, 74, 0.40); }
html[data-theme="dark"] .bg-stone-100\/50 { background-color: rgba(36, 48, 74, 0.50); }
html[data-theme="dark"] .bg-stone-100\/60 { background-color: rgba(36, 48, 74, 0.60); }
html[data-theme="dark"] .bg-stone-100\/70 { background-color: rgba(36, 48, 74, 0.70); }
html[data-theme="dark"] .bg-stone-100\/75 { background-color: rgba(36, 48, 74, 0.75); }
html[data-theme="dark"] .bg-stone-100\/80 { background-color: rgba(36, 48, 74, 0.80); }
html[data-theme="dark"] .bg-stone-100\/90 { background-color: rgba(36, 48, 74, 0.90); }
html[data-theme="dark"] .bg-stone-100\/95 { background-color: rgba(36, 48, 74, 0.95); }
html[data-theme="dark"] .bg-stone-200\/10 { background-color: rgba(51, 65, 85, 0.10); }
html[data-theme="dark"] .bg-stone-200\/20 { background-color: rgba(51, 65, 85, 0.20); }
html[data-theme="dark"] .bg-stone-200\/25 { background-color: rgba(51, 65, 85, 0.25); }
html[data-theme="dark"] .bg-stone-200\/30 { background-color: rgba(51, 65, 85, 0.30); }
html[data-theme="dark"] .bg-stone-200\/40 { background-color: rgba(51, 65, 85, 0.40); }
html[data-theme="dark"] .bg-stone-200\/50 { background-color: rgba(51, 65, 85, 0.50); }
html[data-theme="dark"] .bg-stone-200\/60 { background-color: rgba(51, 65, 85, 0.60); }
html[data-theme="dark"] .bg-stone-200\/70 { background-color: rgba(51, 65, 85, 0.70); }
html[data-theme="dark"] .bg-stone-200\/75 { background-color: rgba(51, 65, 85, 0.75); }
html[data-theme="dark"] .bg-stone-200\/80 { background-color: rgba(51, 65, 85, 0.80); }
html[data-theme="dark"] .bg-stone-200\/90 { background-color: rgba(51, 65, 85, 0.90); }
html[data-theme="dark"] .bg-stone-200\/95 { background-color: rgba(51, 65, 85, 0.95); }

/* ============================================================
 * LACUNA 2 — gradientes (bg-gradient-to-r from-gray-50 to-white).
 *
 * Gradiente e background-IMAGE montada a partir de custom properties
 * (--tw-gradient-from/to). Redefinir background-color nao muda nada:
 * era por isso que o cabecalho dos cards continuava claro, com o texto
 * ja clareado por cima — quase invisivel.
 * ============================================================ */
html[data-theme="dark"] .from-white {
    --tw-gradient-from: rgb(30, 41, 59) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(30, 41, 59, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-white {
    --tw-gradient-to: rgba(30, 41, 59, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(30, 41, 59) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-white { --tw-gradient-to: rgb(30, 41, 59) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-gray-50 {
    --tw-gradient-from: rgb(23, 32, 51) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(23, 32, 51, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-gray-50 {
    --tw-gradient-to: rgba(23, 32, 51, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(23, 32, 51) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-gray-50 { --tw-gradient-to: rgb(23, 32, 51) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-slate-50 {
    --tw-gradient-from: rgb(23, 32, 51) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(23, 32, 51, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-slate-50 {
    --tw-gradient-to: rgba(23, 32, 51, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(23, 32, 51) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-slate-50 { --tw-gradient-to: rgb(23, 32, 51) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-zinc-50 {
    --tw-gradient-from: rgb(23, 32, 51) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(23, 32, 51, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-zinc-50 {
    --tw-gradient-to: rgba(23, 32, 51, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(23, 32, 51) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-zinc-50 { --tw-gradient-to: rgb(23, 32, 51) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-neutral-50 {
    --tw-gradient-from: rgb(23, 32, 51) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(23, 32, 51, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-neutral-50 {
    --tw-gradient-to: rgba(23, 32, 51, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(23, 32, 51) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-neutral-50 { --tw-gradient-to: rgb(23, 32, 51) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-stone-50 {
    --tw-gradient-from: rgb(23, 32, 51) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(23, 32, 51, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-stone-50 {
    --tw-gradient-to: rgba(23, 32, 51, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(23, 32, 51) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-stone-50 { --tw-gradient-to: rgb(23, 32, 51) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-gray-100 {
    --tw-gradient-from: rgb(36, 48, 74) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(36, 48, 74, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-gray-100 {
    --tw-gradient-to: rgba(36, 48, 74, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(36, 48, 74) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-gray-100 { --tw-gradient-to: rgb(36, 48, 74) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-slate-100 {
    --tw-gradient-from: rgb(36, 48, 74) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(36, 48, 74, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-slate-100 {
    --tw-gradient-to: rgba(36, 48, 74, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(36, 48, 74) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-slate-100 { --tw-gradient-to: rgb(36, 48, 74) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-zinc-100 {
    --tw-gradient-from: rgb(36, 48, 74) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(36, 48, 74, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-zinc-100 {
    --tw-gradient-to: rgba(36, 48, 74, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(36, 48, 74) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-zinc-100 { --tw-gradient-to: rgb(36, 48, 74) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-neutral-100 {
    --tw-gradient-from: rgb(36, 48, 74) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(36, 48, 74, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-neutral-100 {
    --tw-gradient-to: rgba(36, 48, 74, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(36, 48, 74) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-neutral-100 { --tw-gradient-to: rgb(36, 48, 74) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-stone-100 {
    --tw-gradient-from: rgb(36, 48, 74) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(36, 48, 74, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-stone-100 {
    --tw-gradient-to: rgba(36, 48, 74, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(36, 48, 74) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-stone-100 { --tw-gradient-to: rgb(36, 48, 74) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-gray-200 {
    --tw-gradient-from: rgb(51, 65, 85) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-gray-200 {
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(51, 65, 85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-gray-200 { --tw-gradient-to: rgb(51, 65, 85) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-slate-200 {
    --tw-gradient-from: rgb(51, 65, 85) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-slate-200 {
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(51, 65, 85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-slate-200 { --tw-gradient-to: rgb(51, 65, 85) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-zinc-200 {
    --tw-gradient-from: rgb(51, 65, 85) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-zinc-200 {
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(51, 65, 85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-zinc-200 { --tw-gradient-to: rgb(51, 65, 85) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-neutral-200 {
    --tw-gradient-from: rgb(51, 65, 85) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-neutral-200 {
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(51, 65, 85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-neutral-200 { --tw-gradient-to: rgb(51, 65, 85) var(--tw-gradient-to-position); }
html[data-theme="dark"] .from-stone-200 {
    --tw-gradient-from: rgb(51, 65, 85) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .via-stone-200 {
    --tw-gradient-to: rgba(51, 65, 85, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(51, 65, 85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-stone-200 { --tw-gradient-to: rgb(51, 65, 85) var(--tw-gradient-to-position); }

/* ============================================================
 * LACUNA 3 — paleta `primary`, que e a MARCA do tenant.
 *
 * --primary-* vem do :root injetado por empresa (core/themes.py), entao
 * nao da para fixar hex aqui: cada cliente tem a sua cor. As tintas
 * claras (50/100) sao derivadas da propria cor da empresa com color-mix,
 * preservando a identidade em vez de trocar por um cinza generico.
 * Era o que deixava o botao "Kanban" branco no dashboard.
 * ============================================================ */
/* A 1a declaracao de cada bloco e o fallback neutro: se o navegador nao
   entender color-mix ele descarta so a 2a linha e fica com um tom escuro
   legivel — em vez de descartar tudo e voltar ao branco. */
html[data-theme="dark"] .bg-primary-50 {
    background-color: var(--dk-surface-2);
    background-color: color-mix(in srgb, var(--primary-500) 14%, transparent);
}
html[data-theme="dark"] .bg-primary-100 {
    background-color: var(--dk-surface-3);
    background-color: color-mix(in srgb, var(--primary-500) 22%, transparent);
}
html[data-theme="dark"] .hover\:bg-primary-50:hover {
    background-color: var(--dk-surface-3);
    background-color: color-mix(in srgb, var(--primary-500) 20%, transparent);
}
html[data-theme="dark"] .hover\:bg-primary-100:hover {
    background-color: var(--dk-surface-3);
    background-color: color-mix(in srgb, var(--primary-500) 30%, transparent);
}
html[data-theme="dark"] .text-primary-900,
html[data-theme="dark"] .text-primary-800,
html[data-theme="dark"] .text-primary-700,
html[data-theme="dark"] .text-primary-600 {
    color: var(--dk-text-strong);
    color: color-mix(in srgb, var(--primary-500) 45%, white);
}
html[data-theme="dark"] .hover\:text-primary-700:hover {
    color: var(--dk-text-strong);
    color: color-mix(in srgb, var(--primary-500) 30%, white);
}
html[data-theme="dark"] .border-primary-100,
html[data-theme="dark"] .border-primary-200 {
    border-color: var(--dk-border);
    border-color: color-mix(in srgb, var(--primary-500) 32%, transparent);
}

/* ============================================================
 * LACUNA 4 — valores arbitrarios do Tailwind: text-[#0B1E42].
 *
 * Hex cravado direto na classe. Nao passa por utilitario nomeado, entao
 * nenhuma regra acima o alcanca: era o que deixava os titulos do painel
 * Comando invisiveis (azul-marinho sobre fundo escuro).
 *
 * As cores sao varridas dos templates por scripts/auditar_dark_mode.py e
 * classificadas por luminancia WCAG — so entra aqui o que de fato quebra:
 * texto escuro demais, ou fundo/borda claros demais. Cada cor e convertida
 * preservando o MATIZ, de modo que #1E5CAD continue lendo como o azul da
 * Pro SST, so que legivel no escuro.
 *
 * Templates de PDF/impressao ficam fora: papel e branco.
 * ============================================================ */
html[data-theme="dark"] .bg-\[\#E8F5FE\] { background-color: hsl(205, 35%, 16%); }
html[data-theme="dark"] .border-\[\#9DD1F9\] { border-color: hsl(206, 35%, 28%); }
html[data-theme="dark"] .text-\[\#0B1E42\] { color: hsl(219, 65%, 78%); }
html[data-theme="dark"] .text-\[\#153060\] { color: hsl(218, 64%, 78%); }
html[data-theme="dark"] .text-\[\#1E5CAD\] { color: hsl(214, 65%, 78%); }
html[data-theme="dark"] .bg-\[\#C4E4FC\] { background-color: hsl(206, 35%, 16%); }
html[data-theme="dark"] .text-\[\#0E2248\] { color: hsl(219, 65%, 78%); }
html[data-theme="dark"] .from-\[\#E8F5FE\] {
    --tw-gradient-from: hsl(205, 35%, 16%) var(--tw-gradient-from-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-\[\#6DD5FA\] { --tw-gradient-to: hsl(196, 35%, 16%) var(--tw-gradient-to-position); }
html[data-theme="dark"] .to-\[\#E8F5FE\] { --tw-gradient-to: hsl(205, 35%, 16%) var(--tw-gradient-to-position); }
html[data-theme="dark"] .border-\[\#6DD5FA\] { border-color: hsl(196, 35%, 28%); }
html[data-theme="dark"] .to-\[\#C4E4FC\] { --tw-gradient-to: hsl(206, 35%, 16%) var(--tw-gradient-to-position); }
html[data-theme="dark"] .bg-\[\#6DD5FA\] { background-color: hsl(196, 35%, 16%); }
html[data-theme="dark"] .text-\[\#1e3a5f\] { color: hsl(214, 52%, 78%); }
html[data-theme="dark"] .bg-\[\#9DD1F9\] { background-color: hsl(206, 35%, 16%); }
html[data-theme="dark"] .border-\[\#C4E4FC\] { border-color: hsl(206, 35%, 28%); }
html[data-theme="dark"] .from-\[\#FFED00\] {
    --tw-gradient-from: hsl(56, 35%, 16%) var(--tw-gradient-from-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="dark"] .to-\[\#FDCB08\] { --tw-gradient-to: hsl(48, 35%, 16%) var(--tw-gradient-to-position); }
html[data-theme="dark"] .text-\[\#003882\] { color: hsl(214, 65%, 78%); }
html[data-theme="dark"] .bg-\[\#d9fdd3\] { background-color: hsl(111, 35%, 16%); }
html[data-theme="dark"] .bg-\[\#dcf8c6\] { background-color: hsl(94, 35%, 16%); }
html[data-theme="dark"] .text-\[\#00a5f4\] { color: hsl(199, 65%, 78%); }

/* ============================================================
 * Regras que valem nos DOIS modos (o arquivo carrega sempre).
 * ============================================================ */
/* Icone do alternador: lua no claro, sol no escuro. Feito em CSS puro
   porque variant arbitrario do Tailwind exigiria recompilar o bundle. */
[data-tema-icone="sol"] { display: none; }
html[data-theme="dark"] [data-tema-icone="sol"] { display: block; }
html[data-theme="dark"] [data-tema-icone="lua"] { display: none; }

}