/* ========================================================================== Happylife — Tema Escuro Premium (reskin) Aplica-se a páginas com . Converte as telas "claras" (Tailwind bg-white/gray) em navy + vidro + acento neon, sem reescrever o HTML. Os acentos de marca (brand=azul-marca escuro do tema dinâmico) são forçados para azul neon, visível sobre o navy. ========================================================================== */ body.hl-dark { color: #e5e7eb !important; background: #0a0f1e !important; background-image: linear-gradient(135deg, #0a0f1e 0%, #0f2540 50%, #0a0f1e 100%) !important; background-attachment: fixed !important; } /* ---- Superfícies claras -> vidro escuro ---- */ .hl-dark .bg-white, .hl-dark .bg-gray-50, .hl-dark .bg-gray-100, .hl-dark .bg-slate-50, .hl-dark .bg-slate-100, .hl-dark .bg-gray-50\/50, .hl-dark .bg-gray-50\/60 { background-color: rgba(255,255,255,0.045) !important; border-color: rgba(255,255,255,0.08) !important; } /* headers/navs translúcidos claros -> navy translúcido */ .hl-dark .bg-white\/80, .hl-dark .bg-white\/90, .hl-dark .bg-white\/70, .hl-dark .glass { background-color: rgba(10,15,30,0.72) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } /* ---- Texto ---- */ .hl-dark .text-gray-900, .hl-dark .text-slate-900, .hl-dark .text-gray-800, .hl-dark .text-slate-800 { color: #f1f5f9 !important; } .hl-dark .text-gray-700, .hl-dark .text-gray-600, .hl-dark .text-slate-700 { color: #cbd5e1 !important; } .hl-dark .text-gray-500, .hl-dark .text-gray-400, .hl-dark .text-slate-500, .hl-dark .text-slate-400 { color: #94a3b8 !important; } /* ---- Bordas / divisores ---- */ .hl-dark .border-gray-100, .hl-dark .border-gray-200, .hl-dark .border-gray-300, .hl-dark .border-slate-100, .hl-dark .border-slate-200, .hl-dark .border, .hl-dark .border-y, .hl-dark .border-b, .hl-dark .border-t { border-color: rgba(255,255,255,0.09) !important; } .hl-dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), .hl-dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,0.08) !important; } /* ---- Inputs / selects ---- */ .hl-dark input, .hl-dark select, .hl-dark textarea { background-color: rgba(255,255,255,0.05) !important; color: #f1f5f9 !important; border-color: rgba(255,255,255,0.14) !important; } .hl-dark input::placeholder, .hl-dark textarea::placeholder { color: #64748b !important; } .hl-dark select option { background: #0f2540; color: #f1f5f9; } /* ---- Tabelas ---- */ .hl-dark thead, .hl-dark thead tr, .hl-dark th { background-color: rgba(255,255,255,0.03) !important; color: #cbd5e1 !important; } .hl-dark tbody tr { border-color: rgba(255,255,255,0.06) !important; } .hl-dark tbody tr:hover, .hl-dark .hover\:bg-gray-50:hover, .hl-dark .hover\:bg-gray-100:hover { background-color: rgba(255,255,255,0.05) !important; } /* ---- Sombra -> profundidade ---- */ .hl-dark .shadow-sm, .hl-dark .shadow, .hl-dark .shadow-md, .hl-dark .shadow-lg, .hl-dark .shadow-xl { box-shadow: 0 10px 34px rgba(0,0,0,0.38) !important; } /* ---- Acento de MARCA (azul) forçado para neon, visível no navy ---- */ .hl-dark .text-brand-500, .hl-dark .text-brand-600, .hl-dark .text-brand-700, .hl-dark .text-brand-800 { color: #3b82f6 !important; } .hl-dark .bg-brand-500, .hl-dark .bg-brand-600, .hl-dark .bg-brand-700 { background-color: #0B63B6 !important; color: #fff !important; box-shadow: 0 6px 20px rgba(20,110,250,0.30) !important; } .hl-dark .bg-brand-50, .hl-dark .bg-brand-100 { background-color: rgba(20,110,250,0.14) !important; } .hl-dark .border-brand-100, .hl-dark .border-brand-200, .hl-dark .border-brand-300 { border-color: rgba(20,110,250,0.30) !important; } .hl-dark .ring-brand-100, .hl-dark .ring-brand-50 { --tw-ring-color: rgba(20,110,250,0.25) !important; } /* KPIs / números grandes com leve glow */ .hl-dark .text-brand-600.text-2xl, .hl-dark .text-brand-600.text-3xl, .hl-dark .text-2xl.font-bold, .hl-dark .text-3xl.font-bold { text-shadow: 0 0 22px rgba(59,130,246,0.22); } /* Acento LARANJA (accent) já é claro; só garante contraste em superfícies */ .hl-dark .bg-accent-50 { background-color: rgba(245,130,32,0.14) !important; } .hl-dark .border-accent-100, .hl-dark .border-accent-200 { border-color: rgba(245,130,32,0.30) !important; } /* Chips/badges muito claros que devem permanecer legíveis */ .hl-dark .bg-gray-200 { background-color: rgba(255,255,255,0.10) !important; } .hl-dark .text-white { color: #fff !important; } /* Scrollbar */ .hl-dark ::-webkit-scrollbar { width: 8px; height: 8px; } .hl-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; } /* ---- Gradientes CLAROS (from/to -50 ou -100) -> vidro; preserva gradientes escuros ---- */ .hl-dark [class*="bg-gradient-"][class*="-50"], .hl-dark [class*="bg-gradient-"][class*="-100"] { background-image: none !important; background-color: rgba(255,255,255,0.045) !important; border-color: rgba(255,255,255,0.08) !important; } /* Texto em gradiente (hero) -> azul claro visível no navy */ .hl-dark .text-gradient { background-image: linear-gradient(135deg, #60a5fa, #3b82f6) !important; } /* Grade de fundo some no escuro (linhas eram navy) -> pontos claros sutis */ .hl-dark .bg-grid { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) !important; } /* ===== Legibilidade no escuro: texto colorido -> tons claros ===== */ .hl-dark .text-blue-500, .hl-dark .text-blue-600, .hl-dark .text-blue-700, .hl-dark .text-blue-800, .hl-dark .text-blue-900, .hl-dark .text-sky-500, .hl-dark .text-sky-600, .hl-dark .text-sky-700, .hl-dark .text-sky-800, .hl-dark .text-sky-900, .hl-dark .text-cyan-500, .hl-dark .text-cyan-600, .hl-dark .text-cyan-700, .hl-dark .text-cyan-800, .hl-dark .text-cyan-900, .hl-dark .text-indigo-500, .hl-dark .text-indigo-600, .hl-dark .text-indigo-700, .hl-dark .text-indigo-800, .hl-dark .text-indigo-900, .hl-dark .text-violet-500, .hl-dark .text-violet-600, .hl-dark .text-violet-700, .hl-dark .text-violet-800, .hl-dark .text-violet-900, .hl-dark .text-purple-500, .hl-dark .text-purple-600, .hl-dark .text-purple-700, .hl-dark .text-purple-800, .hl-dark .text-purple-900, .hl-dark .text-teal-500, .hl-dark .text-teal-600, .hl-dark .text-teal-700, .hl-dark .text-teal-800, .hl-dark .text-teal-900, .hl-dark .text-brand-500, .hl-dark .text-brand-600, .hl-dark .text-brand-700, .hl-dark .text-brand-800, .hl-dark .text-brand-900 { color: #60a5fa !important; } .hl-dark .text-rose-500, .hl-dark .text-rose-600, .hl-dark .text-rose-700, .hl-dark .text-rose-800, .hl-dark .text-rose-900, .hl-dark .text-pink-500, .hl-dark .text-pink-600, .hl-dark .text-pink-700, .hl-dark .text-pink-800, .hl-dark .text-pink-900, .hl-dark .text-fuchsia-500, .hl-dark .text-fuchsia-600, .hl-dark .text-fuchsia-700, .hl-dark .text-fuchsia-800, .hl-dark .text-fuchsia-900, .hl-dark .text-orange-500, .hl-dark .text-orange-600, .hl-dark .text-orange-700, .hl-dark .text-orange-800, .hl-dark .text-orange-900, .hl-dark .text-accent-500, .hl-dark .text-accent-600, .hl-dark .text-accent-700, .hl-dark .text-accent-800, .hl-dark .text-accent-900 { color: #fb923c !important; } .hl-dark .text-emerald-600, .hl-dark .text-emerald-700, .hl-dark .text-emerald-800, .hl-dark .text-emerald-900, .hl-dark .text-green-600, .hl-dark .text-green-700, .hl-dark .text-green-800, .hl-dark .text-green-900, .hl-dark .text-lime-600, .hl-dark .text-lime-700, .hl-dark .text-lime-800, .hl-dark .text-lime-900 { color: #34d399 !important; } .hl-dark .text-amber-600, .hl-dark .text-amber-700, .hl-dark .text-amber-800, .hl-dark .text-amber-900, .hl-dark .text-yellow-600, .hl-dark .text-yellow-700, .hl-dark .text-yellow-800, .hl-dark .text-yellow-900 { color: #fbbf24 !important; } .hl-dark .text-red-600, .hl-dark .text-red-700, .hl-dark .text-red-800, .hl-dark .text-red-900 { color: #f87171 !important; } /* ===== Fundos claros (-50/-100) -> vidro ===== */ .hl-dark .bg-blue-50, .hl-dark .bg-blue-100, .hl-dark .bg-sky-50, .hl-dark .bg-sky-100, .hl-dark .bg-cyan-50, .hl-dark .bg-cyan-100, .hl-dark .bg-indigo-50, .hl-dark .bg-indigo-100, .hl-dark .bg-violet-50, .hl-dark .bg-violet-100, .hl-dark .bg-purple-50, .hl-dark .bg-purple-100, .hl-dark .bg-teal-50, .hl-dark .bg-teal-100, .hl-dark .bg-brand-50, .hl-dark .bg-brand-100, .hl-dark .bg-rose-50, .hl-dark .bg-rose-100, .hl-dark .bg-pink-50, .hl-dark .bg-pink-100, .hl-dark .bg-fuchsia-50, .hl-dark .bg-fuchsia-100, .hl-dark .bg-orange-50, .hl-dark .bg-orange-100, .hl-dark .bg-accent-50, .hl-dark .bg-accent-100, .hl-dark .bg-emerald-50, .hl-dark .bg-emerald-100, .hl-dark .bg-green-50, .hl-dark .bg-green-100, .hl-dark .bg-lime-50, .hl-dark .bg-lime-100, .hl-dark .bg-amber-50, .hl-dark .bg-amber-100, .hl-dark .bg-yellow-50, .hl-dark .bg-yellow-100, .hl-dark .bg-red-50, .hl-dark .bg-red-100, .hl-dark .bg-gray-50, .hl-dark .bg-gray-100, .hl-dark .bg-slate-50, .hl-dark .bg-slate-100, .hl-dark .bg-zinc-50, .hl-dark .bg-zinc-100, .hl-dark .bg-neutral-50, .hl-dark .bg-neutral-100, .hl-dark .bg-stone-50, .hl-dark .bg-stone-100 { background-color: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.09) !important; } /* ===== Fundos -200/-300 (claros) -> vidro mais forte; texto acompanhante já clareado ===== */ .hl-dark [class*="bg-"][class*="-200"]:not([class*="border-"]):not(input):not(select), .hl-dark .bg-gray-300, .hl-dark .bg-emerald-300, .hl-dark .bg-brand-300, .hl-dark .bg-blue-300 { background-color: rgba(255,255,255,0.10) !important; } /* ===== bg-white translúcido usado como SUPERFÍCIE (alta opacidade) -> navy vidro ===== */ .hl-dark .bg-white\/50, .hl-dark .bg-white\/60, .hl-dark .bg-white\/85, .hl-dark .bg-white\/95 { background-color: rgba(10,15,30,0.72) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* barras de progresso/trilhas cinza claro */ .hl-dark progress, .hl-dark .bg-gray-100.rounded-full, .hl-dark .bg-gray-200.rounded-full { background-color: rgba(255,255,255,0.10) !important; } /* ===== Fundos claros com sufixo de opacidade (bg-emerald-50/60 etc.) ===== */ .hl-dark [class*="bg-"][class*="-50/"], .hl-dark [class*="bg-"][class*="-100/"] { background-color: rgba(255,255,255,0.05) !important; } /* ===== MODAIS/PAINÉIS: vidro fino deixava ver através — agora fundo SÓLIDO ===== */ .hl-dark .fixed .bg-white, .hl-dark .fixed.inset-0 > div, .hl-dark [id^="modal"] > div { background-color: #0e1c36 !important; border-color: rgba(255,255,255,0.12) !important; } /* overlay do modal continua escurecendo o fundo */ .hl-dark .bg-black\/50, .hl-dark .bg-black\/40, .hl-dark .bg-black\/60 { background-color: rgba(0,0,0,0.65) !important; } /* dropdowns/popovers absolutos com fundo branco -> sólido */ .hl-dark .absolute.bg-white, .hl-dark .absolute .bg-white { background-color: #0e1c36 !important; } /* ===== CONTROLES NATIVOS em modo escuro (dropdown de select, date picker, scrollbar) ===== Sem isto o popup do