/* ============================================================ LUKINHA — TEMA CLARO / ESCURO Estratégia: variáveis CSS + overrides das classes Tailwind já usadas no app.js (sem precisar reescrever cada template). Ativado via atributo data-theme="dark" na tag . NÃO afeta os blocos de impressão (sempre brancos). ============================================================ */ :root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* ── Base da página ── */ html[data-theme="dark"] body { background-color: #0f172a; color: #e2e8f0; } /* ── Superfícies neutras (cards, modais, tabelas) ── */ html[data-theme="dark"] .bg-white { background-color: #1e293b !important; } html[data-theme="dark"] .bg-gray-50 { background-color: #172033 !important; } html[data-theme="dark"] .bg-gray-100 { background-color: #263449 !important; } html[data-theme="dark"] .bg-gray-200 { background-color: #334155 !important; } html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: #263449 !important; } html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #334155 !important; } /* ── Texto ── */ html[data-theme="dark"] .text-gray-900 { color: #f1f5f9 !important; } html[data-theme="dark"] .text-gray-800 { color: #e2e8f0 !important; } html[data-theme="dark"] .text-gray-700 { color: #cbd5e1 !important; } html[data-theme="dark"] .text-gray-600 { color: #94a3b8 !important; } html[data-theme="dark"] .text-gray-500 { color: #64748b !important; } html[data-theme="dark"] .text-gray-400 { color: #64748b !important; } html[data-theme="dark"] .text-gray-300 { color: #475569 !important; } html[data-theme="dark"] .placeholder-gray-400::placeholder { color: #475569 !important; } /* ── Bordas e sombras ── */ html[data-theme="dark"] .border-gray-100 { border-color: #263449 !important; } html[data-theme="dark"] .border-gray-200 { border-color: #334155 !important; } html[data-theme="dark"] .border-gray-300 { border-color: #475569 !important; } html[data-theme="dark"] .divide-gray-100 > * + * { border-color: #263449 !important; } html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow-md, html[data-theme="dark"] .shadow-lg, html[data-theme="dark"] .shadow-xl, html[data-theme="dark"] .shadow-2xl { --tw-shadow-color: rgba(0, 0, 0, 0.55); box-shadow: var(--tw-shadow) !important; } /* ── Inputs / formulários ── */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #172033; color: #e2e8f0; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #475569; } /* ── Sidebar / topo mobile: já são escuros no claro, ficam ainda mais neutros no escuro ── */ html[data-theme="dark"] #sidebar { background-color: #0f172a !important; } html[data-theme="dark"] #mobileTopBar { background-color: #1e293b !important; border-color: #334155 !important; } /* ============================================================ Cores semânticas (badges / cards com fundo claro + texto escuro viram "soft badges" com fundo translúcido + texto claro) ============================================================ */ /* primary (azul / marca) */ html[data-theme="dark"] .bg-primary-50 { background-color: rgba(59,130,246,0.12) !important; } html[data-theme="dark"] .bg-primary-100 { background-color: rgba(59,130,246,0.18) !important; } html[data-theme="dark"] .text-primary-600, html[data-theme="dark"] .text-primary-700, html[data-theme="dark"] .text-primary-800 { color: #60a5fa !important; } html[data-theme="dark"] .border-primary-100, html[data-theme="dark"] .border-primary-200, html[data-theme="dark"] .border-primary-300 { border-color: rgba(59,130,246,0.35) !important; } /* azul (usado também fora da escala primary em vários lugares) */ html[data-theme="dark"] .bg-blue-50 { background-color: rgba(59,130,246,0.12) !important; } html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59,130,246,0.18) !important; } html[data-theme="dark"] .text-blue-600, html[data-theme="dark"] .text-blue-700, html[data-theme="dark"] .text-blue-800 { color: #60a5fa !important; } html[data-theme="dark"] .border-blue-100, html[data-theme="dark"] .border-blue-200 { border-color: rgba(59,130,246,0.35) !important; } /* verde */ html[data-theme="dark"] .bg-green-50 { background-color: rgba(34,197,94,0.12) !important; } html[data-theme="dark"] .bg-green-100 { background-color: rgba(34,197,94,0.18) !important; } html[data-theme="dark"] .text-green-600, html[data-theme="dark"] .text-green-700, html[data-theme="dark"] .text-green-800 { color: #4ade80 !important; } html[data-theme="dark"] .border-green-100, html[data-theme="dark"] .border-green-200 { border-color: rgba(34,197,94,0.35) !important; } /* vermelho */ html[data-theme="dark"] .bg-red-50 { background-color: rgba(239,68,68,0.12) !important; } html[data-theme="dark"] .bg-red-100 { background-color: rgba(239,68,68,0.18) !important; } html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-red-800 { color: #f87171 !important; } html[data-theme="dark"] .border-red-100, html[data-theme="dark"] .border-red-200 { border-color: rgba(239,68,68,0.35) !important; } /* âmbar / amarelo */ html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] .bg-yellow-50 { background-color: rgba(245,158,11,0.12) !important; } html[data-theme="dark"] .bg-amber-100, html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(245,158,11,0.18) !important; } 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-yellow-600, html[data-theme="dark"] .text-yellow-700, html[data-theme="dark"] .text-yellow-800 { color: #fbbf24 !important; } html[data-theme="dark"] .border-amber-100, html[data-theme="dark"] .border-amber-200, html[data-theme="dark"] .border-yellow-100, html[data-theme="dark"] .border-yellow-200 { border-color: rgba(245,158,11,0.35) !important; } /* teal */ html[data-theme="dark"] .bg-teal-50 { background-color: rgba(20,184,166,0.12) !important; } html[data-theme="dark"] .bg-teal-100 { background-color: rgba(20,184,166,0.18) !important; } html[data-theme="dark"] .text-teal-600, html[data-theme="dark"] .text-teal-700, html[data-theme="dark"] .text-teal-800 { color: #2dd4bf !important; } html[data-theme="dark"] .border-teal-100, html[data-theme="dark"] .border-teal-200 { border-color: rgba(20,184,166,0.35) !important; } /* ciano */ html[data-theme="dark"] .bg-cyan-50 { background-color: rgba(6,182,212,0.12) !important; } html[data-theme="dark"] .bg-cyan-100 { background-color: rgba(6,182,212,0.18) !important; } html[data-theme="dark"] .text-cyan-600, html[data-theme="dark"] .text-cyan-700, html[data-theme="dark"] .text-cyan-800 { color: #22d3ee !important; } /* laranja */ html[data-theme="dark"] .bg-orange-50 { background-color: rgba(234,88,12,0.12) !important; } html[data-theme="dark"] .bg-orange-100 { background-color: rgba(234,88,12,0.18) !important; } html[data-theme="dark"] .text-orange-600, html[data-theme="dark"] .text-orange-700, html[data-theme="dark"] .text-orange-800 { color: #fb923c !important; } /* roxo — mantido apenas para a legenda de "Consumo de Produção" */ html[data-theme="dark"] .bg-purple-50 { background-color: rgba(168,85,247,0.12) !important; } html[data-theme="dark"] .bg-purple-100 { background-color: rgba(168,85,247,0.18) !important; } html[data-theme="dark"] .text-purple-600, html[data-theme="dark"] .text-purple-700, html[data-theme="dark"] .text-purple-800 { color: #c084fc !important; }