/* ========================================================================= DARK MODE — sobrescreve as classes de cor do Tailwind quando tem a classe "dark". O projeto usa Tailwind via CDN sem build (não dá pra configurar darkMode:'class' e usar variantes dark: em cada elemento sem reescrever todas as páginas), então este arquivo intercepta as MESMAS classes utilitárias já usadas em todo o sistema (levantadas com uma varredura real dos templates, não adivinhadas) e troca a cor quando o tema escuro está ativo. Ligado/desligado via static/js/sidebar.js. ========================================================================= */ html.dark { color-scheme: dark; } /* ------------------------------------------------------------------- Base da página ------------------------------------------------------------------- */ html.dark body { background-color: #0f172a; /* slate-900 */ color: #e2e8f0; /* slate-200 */ } /* Portal do Cliente usa gradiente claro direto no (bg-gradient-to-br from-slate-50 via-slate-100 to-indigo-50) - as regras de bg-* sólido acima não cobrem background-image, então o gradiente claro continuava por cima da cor de fundo escura. Remove o gradiente e deixa só a cor sólida. */ html.dark body[class~="bg-gradient-to-br"] { background-image: none !important; } /* Card "Todos" do Portal do Cliente (efeito de vidro fosco) - o branco translúcido original ficava quase invisível sobre o fundo escuro, parecendo um "buraco" claro na tela. */ html.dark .glass-card { background: rgba(30, 41, 59, 0.75) !important; /* slate-800 translúcido */ border-color: rgba(51, 65, 85, 0.6) !important; /* slate-700 translúcido */ } /* Ícones em caixinhas com gradiente claro (ex.: ícone do card "Todos" e do estado vazio da Base de Conhecimento) - mesmo problema do gradiente do body, os tons das classes "from-" e "to-" não são cobertos pelas regras de bg-* sólido. */ html.dark [class~="from-indigo-100"][class~="to-indigo-50"] { background-image: linear-gradient(to bottom right, #232650, #1c1e3a) !important; } html.dark [class~="from-slate-100"][class~="to-slate-50"] { background-image: linear-gradient(to bottom right, #334155, #1e293b) !important; } /* Card "Última Interação Cliente" (Dashboard de Tickets) usa gradiente claro de destaque (from-cyan-50 to-blue-50) — sem cobertura acima, ficava branco no tema escuro enquanto os cards vizinhos (SLA) já escureciam certo. Aqui o pedido foi deixá-lo igual aos demais cards, sem gradiente/tint próprio. */ html.dark [class~="from-cyan-50"][class~="to-blue-50"] { background-image: none !important; background-color: #1e293b !important; } /* ------------------------------------------------------------------- Superfícies "claras" (cards, painéis, modais) -> tons escuros. Cobre slate e gray (milvus.html usa gray-* nas mesmas funções). ------------------------------------------------------------------- */ html.dark .bg-white, html.dark .bg-slate-50, html.dark .bg-gray-50, html.dark .bg-slate-100, html.dark .bg-gray-100 { background-color: #1e293b !important; /* slate-800 */ } html.dark .bg-slate-200, html.dark .bg-gray-200, html.dark .bg-slate-300, html.dark .bg-gray-300 { background-color: #334155 !important; /* slate-700 */ } html.dark .bg-gray-400 { background-color: #475569 !important; /* slate-600 */ } /* Fundos que JÁ são escuros no tema claro (sidebar, rodapés, headers dedicados) — mantém como estão, só reforça pra não caírem numa regra genérica de "clarear". */ html.dark .bg-slate-900, html.dark .bg-gray-900, html.dark .bg-slate-800, html.dark .bg-gray-800 { background-color: #0b1220 !important; } /* ------------------------------------------------------------------- "Tints" claros usados em badges, alertas e ícones (ex.: bg-cyan-50) -> versão escura e dessaturada da mesma cor, texto continua colorido. ------------------------------------------------------------------- */ html.dark .bg-cyan-50 { background-color: #0e2f3a !important; } html.dark .bg-cyan-100 { background-color: #113a47 !important; } html.dark .bg-amber-50 { background-color: #3a2f10 !important; } html.dark .bg-amber-100 { background-color: #453712 !important; } html.dark .bg-emerald-50 { background-color: #0f2e22 !important; } html.dark .bg-emerald-100 { background-color: #123a2b !important; } html.dark .bg-rose-50 { background-color: #3a1420 !important; } html.dark .bg-red-50 { background-color: #3a1414 !important; } html.dark .bg-red-100 { background-color: #451a1a !important; } html.dark .bg-red-200 { background-color: #542020 !important; } html.dark .bg-indigo-50 { background-color: #1c1e3a !important; } html.dark .bg-indigo-100 { background-color: #232650 !important; } html.dark .bg-blue-50 { background-color: #122236 !important; } html.dark .bg-blue-100 { background-color: #152b45 !important; } html.dark .bg-purple-50, html.dark .bg-violet-50 { background-color: #241c3a !important; } html.dark .bg-purple-100, html.dark .bg-violet-100 { background-color: #2c2248 !important; } html.dark .bg-teal-50 { background-color: #0e2f2e !important; } html.dark .bg-teal-100 { background-color: #123a38 !important; } html.dark .bg-orange-50 { background-color: #3a2510 !important; } html.dark .bg-yellow-50 { background-color: #3a3410 !important; } html.dark .bg-yellow-100 { background-color: #453e12 !important; } html.dark .bg-cyan-200 { background-color: #155166 !important; } html.dark .bg-rose-100 { background-color: #47182a !important; } /* ------------------------------------------------------------------- Bordas claras -> escuras. Mantém as bordas coloridas de destaque (cyan-500, blue-500 etc.) como estão, já funcionam nos dois temas. ------------------------------------------------------------------- */ html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300, html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300, html.dark .border-gray-400 { border-color: #334155 !important; /* slate-700 */ } html.dark .border-cyan-100, html.dark .border-cyan-200, html.dark .border-emerald-100, html.dark .border-emerald-200, html.dark .border-amber-100, html.dark .border-amber-200, html.dark .border-rose-100, html.dark .border-red-100, html.dark .border-red-200, html.dark .border-indigo-100, html.dark .border-blue-100, html.dark .border-blue-200, html.dark .border-purple-100, html.dark .border-purple-200, html.dark .border-violet-200, html.dark .border-orange-100, html.dark .border-orange-200 { border-color: #3f4a5e !important; } /* ------------------------------------------------------------------- Texto escuro (feito pra fundo claro) -> texto claro. text-white e as cores vivas (usadas em botões/badges) não mudam. ------------------------------------------------------------------- */ html.dark .text-slate-800, html.dark .text-slate-900, html.dark .text-gray-800, html.dark .text-gray-900 { color: #f1f5f9 !important; /* slate-100 */ } html.dark .text-slate-700, html.dark .text-slate-600, html.dark .text-gray-700, html.dark .text-gray-600 { color: #cbd5e1 !important; /* slate-300 */ } html.dark .text-slate-500, html.dark .text-gray-500, html.dark .text-gray-400 { color: #94a3b8 !important; /* slate-400 */ } /* slate-400/300 já tem contraste razoável num fundo escuro (é assim que a sidebar, que já é escura no tema claro, usa essas mesmas classes) — sem sobrescrever aqui de propósito, evita ficar claro demais/sem contraste. */ /* ------------------------------------------------------------------- Cores "vivas" de texto (ícones, links, badges) — versão um pouco mais clara pra manter contraste em fundo escuro. ------------------------------------------------------------------- */ html.dark .text-cyan-900 { color: #a5f3fc !important; } html.dark .text-cyan-800 { color: #67e8f9 !important; } html.dark .text-cyan-700 { color: #67e8f9 !important; } html.dark .text-emerald-900, html.dark .text-emerald-800, html.dark .text-emerald-700 { color: #6ee7b7 !important; } html.dark .text-amber-800, html.dark .text-amber-700 { color: #fcd34d !important; } html.dark .text-rose-800 { color: #fda4af !important; } html.dark .text-red-700 { color: #fca5a5 !important; } html.dark .text-indigo-800, html.dark .text-indigo-900 { color: #a5b4fc !important; } html.dark .text-purple-700, html.dark .text-violet-700 { color: #d8b4fe !important; } html.dark .text-teal-700 { color: #5eead4 !important; } html.dark .text-orange-600 { color: #fdba74 !important; } html.dark .text-yellow-700 { color: #fde047 !important; } /* ------------------------------------------------------------------- Inputs, selects e textareas — a maioria herda bg-slate-50/border-slate-200 (já cobertos acima), aqui só o essencial que falta: placeholder e autofill do navegador. ------------------------------------------------------------------- */ html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; /* slate-500 */ } html.dark input, html.dark select, html.dark textarea { color-scheme: dark; } /* ------------------------------------------------------------------- Scrollbar (complementa static/css/milvus.css, que fixa cores claras) ------------------------------------------------------------------- */ html.dark ::-webkit-scrollbar-thumb { background: #475569 !important; /* slate-600 */ } html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b !important; /* slate-500 */ } /* ------------------------------------------------------------------- Sombras: no tema claro usam preto translúcido, o que já funciona sobre fundo escuro — nada a fazer. Overlays de modal (bg-*-900/60 etc.) também já são escuros o bastante nos dois temas, sem sobrescrever. ------------------------------------------------------------------- */ /* ========================================================================= CLASSES COM MODIFICADOR DE OPACIDADE DO TAILWIND (ex.: bg-slate-50/50, bg-white/80, border-slate-200/60) — usadas em quase todo template do sistema (painéis de filtro, cards de status, cabeçalhos), mas invisíveis pras regras acima: o Tailwind trata "bg-slate-50/50" como uma classe totalmente diferente de "bg-slate-50", então nenhuma delas batia com os seletores .bg-slate-50 e ficavam com a cor clara original — era isso que deixava o tema escuro com aquele fundo "lavado"/acinzentado em vez de escuro de verdade (bem visível no painel de Tickets, mas o mesmo problema existe em todo o resto do sistema). Usa seletor de atributo [class~="..."] (equivalente a "tem exatamente esse token entre as classes", sem precisar escapar a barra "/") em vez de :contains/substring — assim uma classe como "hover:bg-slate-50/50" (token diferente) não é afetada por engano pela regra da versão sem "hover:". Levantado com uma varredura real de templates/ e static/js/, não adivinhado. Fidelidade exata à opacidade original não importa aqui, só parar de vazar a cor clara. ========================================================================= */ html.dark [class~="bg-white/80"], html.dark [class~="bg-white/95"], html.dark [class~="bg-white/25"], html.dark [class~="bg-white/30"], html.dark [class~="bg-slate-50/50"], html.dark [class~="bg-slate-50/80"], html.dark [class~="bg-slate-50/30"], html.dark [class~="bg-gray-100/50"] { background-color: #1e293b !important; } html.dark [class~="bg-slate-200/60"] { background-color: #334155 !important; } html.dark [class~="bg-cyan-50/50"], html.dark [class~="bg-cyan-50/30"] { background-color: #0e2f3a !important; } html.dark [class~="bg-cyan-100/50"] { background-color: #113a47 !important; } html.dark [class~="bg-cyan-200/50"] { background-color: #155166 !important; } html.dark [class~="bg-amber-50/50"] { background-color: #3a2f10 !important; } html.dark [class~="bg-amber-100/50"] { background-color: #453712 !important; } html.dark [class~="bg-emerald-50/50"], html.dark [class~="bg-emerald-50/40"], html.dark [class~="bg-emerald-50/60"] { background-color: #0f2e22 !important; } html.dark [class~="bg-rose-50/50"] { background-color: #3a1420 !important; } html.dark [class~="bg-red-50/50"], html.dark [class~="bg-red-50/60"] { background-color: #3a1414 !important; } html.dark [class~="bg-red-100/50"] { background-color: #451a1a !important; } html.dark [class~="bg-indigo-50/50"], html.dark [class~="bg-indigo-50/40"], html.dark [class~="bg-indigo-50/60"] { background-color: #1c1e3a !important; } html.dark [class~="bg-blue-50/50"], html.dark [class~="bg-blue-50/30"] { background-color: #122236 !important; } html.dark [class~="bg-purple-50/50"] { background-color: #241c3a !important; } html.dark [class~="bg-purple-100/50"] { background-color: #2c2248 !important; } html.dark [class~="bg-teal-100/50"] { background-color: #123a38 !important; } html.dark [class~="bg-orange-50/50"], html.dark [class~="bg-orange-50/40"], html.dark [class~="bg-orange-50/60"] { background-color: #3a2510 !important; } html.dark [class~="border-slate-200/60"], html.dark [class~="border-gray-200/60"], html.dark [class~="border-slate-100/70"], html.dark [class~="border-slate-100/50"] { border-color: #334155 !important; } /* ------------------------------------------------------------------- Mesmo problema, versão ":hover" — sem isso, qualquer botão/linha/menu com hover:bg- pisca com a cor clara original ao passar o mouse, mesmo no tema escuro. Reaproveita os mesmos tons já definidos acima (o do "próximo" tom da escala, quando existe) em vez de inventar uma paleta de hover paralela. ------------------------------------------------------------------- */ html.dark [class~="hover:bg-slate-50"]:hover, html.dark [class~="hover:bg-slate-100"]:hover, html.dark [class~="hover:bg-gray-50"]:hover, html.dark [class~="hover:bg-gray-100"]:hover, html.dark [class~="hover:bg-slate-50/50"]:hover, html.dark [class~="hover:bg-slate-50/80"]:hover { background-color: #334155 !important; } html.dark [class~="hover:bg-slate-200"]:hover, html.dark [class~="hover:bg-slate-300"]:hover, html.dark [class~="hover:bg-gray-200"]:hover, html.dark [class~="hover:bg-gray-300"]:hover { background-color: #475569 !important; } html.dark [class~="hover:bg-gray-400"]:hover { background-color: #55647d !important; } html.dark [class~="hover:bg-cyan-50"]:hover { background-color: #113a47 !important; } html.dark [class~="hover:bg-cyan-100"]:hover { background-color: #155166 !important; } html.dark [class~="hover:bg-cyan-200"]:hover { background-color: #1a5f77 !important; } html.dark [class~="hover:bg-amber-100"]:hover { background-color: #513f16 !important; } html.dark [class~="hover:bg-emerald-50"]:hover { background-color: #123a2b !important; } html.dark [class~="hover:bg-emerald-100"]:hover { background-color: #164a37 !important; } html.dark [class~="hover:bg-red-50"]:hover { background-color: #451a1a !important; } html.dark [class~="hover:bg-red-100"]:hover { background-color: #542020 !important; } html.dark [class~="hover:bg-red-200"]:hover { background-color: #642828 !important; } html.dark [class~="hover:bg-rose-50"]:hover { background-color: #47182a !important; } html.dark [class~="hover:bg-rose-100"]:hover { background-color: #551e33 !important; } html.dark [class~="hover:bg-blue-50"]:hover, html.dark [class~="hover:bg-blue-50/50"]:hover { background-color: #152b45 !important; } html.dark [class~="hover:bg-blue-100"]:hover { background-color: #1c3557 !important; } html.dark [class~="hover:bg-indigo-50"]:hover, html.dark [class~="hover:bg-indigo-50/40"]:hover { background-color: #232650 !important; } html.dark [class~="hover:bg-indigo-100"]:hover { background-color: #2c3163 !important; } html.dark [class~="hover:bg-purple-100"]:hover, html.dark [class~="hover:bg-violet-100"]:hover { background-color: #372a58 !important; } html.dark [class~="hover:bg-teal-100"]:hover { background-color: #164945 !important; } html.dark [class~="hover:bg-yellow-50"]:hover { background-color: #453e12 !important; }