/* ============================================ Ligar-IT Dark Mode Activado via data-theme="dark" no ============================================ */ [data-theme="dark"] { /* Neutral Palette - invertida para fundos escuros */ --neutral-50: #0f172a; --neutral-100: #1e293b; --neutral-200: #334155; --neutral-300: #475569; --neutral-400: #64748b; --neutral-500: #94a3b8; --neutral-600: #cbd5e1; --neutral-700: #e2e8f0; --neutral-800: #f1f5f9; --neutral-900: #f8fafc; /* Success - ajustado para fundo escuro */ --success-50: #052e16; --success-100: #14532d; /* Warning - ajustado para fundo escuro */ --warning-50: #451a03; --warning-100: #78350f; /* Danger - ajustado para fundo escuro */ --danger-50: #450a0a; --danger-100: #7f1d1d; /* Shadows - mais subtis, com maior opacidade */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.3); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6); --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3); --shadow-glow-accent: 0 0 20px rgba(99, 102, 241, 0.3); } /* ============================================ BACKGROUND OVERRIDES ============================================ */ [data-theme="dark"], [data-theme="dark"] body, [data-theme="dark"] .bg-gray-50 { background-color: var(--neutral-50) !important; } [data-theme="dark"] .bg-white { background-color: var(--neutral-100) !important; } [data-theme="dark"] .bg-gray-100 { background-color: var(--neutral-100) !important; } [data-theme="dark"] .bg-gray-200 { background-color: var(--neutral-200) !important; } [data-theme="dark"] .bg-gray-300 { background-color: var(--neutral-300) !important; } [data-theme="dark"] .bg-gray-400 { background-color: var(--neutral-400) !important; } [data-theme="dark"] .bg-gray-500 { background-color: var(--neutral-500) !important; } [data-theme="dark"] .bg-slate-50 { background-color: var(--neutral-100) !important; } [data-theme="dark"] .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; } [data-theme="dark"] .bg-yellow-200 { background-color: rgba(234, 179, 8, 0.3) !important; } [data-theme="dark"] .bg-orange-50 { background-color: rgba(251, 146, 60, 0.12) !important; } [data-theme="dark"] .bg-green-200 { background-color: rgba(34, 197, 94, 0.25) !important; } [data-theme="dark"] .bg-red-200 { background-color: rgba(239, 68, 68, 0.25) !important; } [data-theme="dark"] .bg-pink-50 { background-color: rgba(236, 72, 153, 0.12) !important; } /* Opacity variants */ [data-theme="dark"] .bg-white\/90 { background-color: rgba(30, 41, 59, 0.9) !important; } [data-theme="dark"] .bg-white\/85 { background-color: rgba(30, 41, 59, 0.85) !important; } [data-theme="dark"] .bg-white\/80 { background-color: rgba(30, 41, 59, 0.8) !important; } [data-theme="dark"] .bg-white\/70 { background-color: rgba(30, 41, 59, 0.7) !important; } [data-theme="dark"] .bg-white\/60 { background-color: rgba(30, 41, 59, 0.6) !important; } [data-theme="dark"] .bg-white\/50 { background-color: rgba(30, 41, 59, 0.5) !important; } [data-theme="dark"] .bg-white\/40 { background-color: rgba(30, 41, 59, 0.4) !important; } [data-theme="dark"] .bg-white\/30 { background-color: rgba(30, 41, 59, 0.3) !important; } [data-theme="dark"] .bg-white\/20 { background-color: rgba(30, 41, 59, 0.2) !important; } [data-theme="dark"] .bg-white\/10 { background-color: rgba(30, 41, 59, 0.1) !important; } [data-theme="dark"] .bg-white\/5 { background-color: rgba(30, 41, 59, 0.05) !important; } [data-theme="dark"] .bg-gray-50\/85 { background-color: rgba(15, 23, 42, 0.85) !important; } [data-theme="dark"] .bg-gray-50\/50 { background-color: rgba(15, 23, 42, 0.5) !important; } /* ============================================ TEXT COLOR OVERRIDES ============================================ */ [data-theme="dark"] .text-gray-900 { color: var(--neutral-800) !important; } [data-theme="dark"] .text-gray-800 { color: var(--neutral-800) !important; } [data-theme="dark"] .text-gray-700 { color: var(--neutral-700) !important; } [data-theme="dark"] .text-gray-600 { color: var(--neutral-500) !important; } [data-theme="dark"] .text-gray-500 { color: var(--neutral-500) !important; } [data-theme="dark"] .text-gray-400 { color: var(--neutral-500) !important; } [data-theme="dark"] .text-gray-200 { color: var(--neutral-600) !important; } [data-theme="dark"] .text-gray-300 { color: var(--neutral-600) !important; } /* ============================================ BORDER OVERRIDES ============================================ */ [data-theme="dark"] .border-gray-50 { border-color: var(--neutral-100) !important; } [data-theme="dark"] .border-gray-100 { border-color: var(--neutral-200) !important; } [data-theme="dark"] .border-gray-200 { border-color: var(--neutral-300) !important; } [data-theme="dark"] .border-gray-300 { border-color: var(--neutral-400) !important; } /* ============================================ DIVIDE OVERRIDES ============================================ */ [data-theme="dark"] .divide-gray-50 > * + * { border-color: var(--neutral-200) !important; } [data-theme="dark"] .divide-gray-100 > * + * { border-color: var(--neutral-300) !important; } [data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--neutral-300) !important; } /* ============================================ RING OVERRIDES ============================================ */ [data-theme="dark"] .ring-gray-500 { --tw-ring-color: var(--neutral-400) !important; } /* ============================================ HOVER / FOCUS OVERRIDES ============================================ */ [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--neutral-200) !important; } [data-theme="dark"] .hover\:bg-gray-50\/80:hover { background-color: rgba(30, 41, 59, 0.8) !important; } [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--neutral-200) !important; } [data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--neutral-300) !important; } [data-theme="dark"] .hover\:text-gray-900:hover { color: var(--neutral-700) !important; } /* Missing hover text overrides */ [data-theme="dark"] .hover\:text-gray-600:hover { color: var(--neutral-700) !important; } [data-theme="dark"] .hover\:text-gray-700:hover { color: var(--neutral-800) !important; } [data-theme="dark"] .hover\:text-gray-500:hover { color: var(--neutral-600) !important; } [data-theme="dark"] .hover\:text-blue-600:hover, [data-theme="dark"] .hover\:text-blue-700:hover, [data-theme="dark"] .hover\:text-blue-800:hover { color: #93c5fd !important; } [data-theme="dark"] .hover\:text-indigo-600:hover, [data-theme="dark"] .hover\:text-indigo-700:hover { color: #a5b4fc !important; } /* Accent hover backgrounds - use semi-transparent accent colors */ [data-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.15) !important; } [data-theme="dark"] .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.15) !important; } [data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.15) !important; } [data-theme="dark"] .hover\:bg-green-50:hover, [data-theme="dark"] .hover\:bg-green-50\/50:hover { background-color: rgba(34, 197, 94, 0.15) !important; } [data-theme="dark"] .hover\:bg-purple-50:hover { background-color: rgba(168, 85, 247, 0.15) !important; } [data-theme="dark"] .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.15) !important; } [data-theme="dark"] .hover\:bg-white:hover { background-color: var(--neutral-200) !important; } [data-theme="dark"] .hover\:bg-white\/10:hover, [data-theme="dark"] .hover\:bg-white\/30:hover { background-color: rgba(30, 41, 59, 0.3) !important; } [data-theme="dark"] .focus\:bg-white:focus { background-color: var(--neutral-100) !important; } [data-theme="dark"] .focus\:bg-gray-50:focus { background-color: var(--neutral-200) !important; } /* ============================================ ACCENT BACKGROUND OVERRIDES (bg-*-50/100) ============================================ */ [data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; } [data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; } [data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1) !important; } [data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.2) !important; } [data-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; } [data-theme="dark"] .bg-green-100 { background-color: rgba(34, 197, 94, 0.2) !important; } [data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; } [data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.2) !important; } [data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.2) !important; } [data-theme="dark"] .bg-purple-50 { background-color: rgba(168, 85, 247, 0.1) !important; } [data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2) !important; } [data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; } [data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; } /* ============================================ ACCENT TEXT OVERRIDES (text-*-800/700) ============================================ */ [data-theme="dark"] .text-green-700, [data-theme="dark"] .text-green-800 { color: #86efac !important; } [data-theme="dark"] .text-red-700, [data-theme="dark"] .text-red-800 { color: #fca5a5 !important; } [data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-800 { color: #93c5fd !important; } [data-theme="dark"] .text-indigo-800 { color: #a5b4fc !important; } [data-theme="dark"] .text-yellow-800 { color: #fde68a !important; } /* ============================================ ACCENT TEXT MEDIUM (text-*-600) Usado em subtítulos como "4 conexoes encontradas", labels de stats ============================================ */ [data-theme="dark"] .text-teal-600 { color: #2dd4bf !important; } [data-theme="dark"] .text-indigo-600 { color: #818cf8 !important; } [data-theme="dark"] .text-green-600 { color: #4ade80 !important; } [data-theme="dark"] .text-blue-600 { color: #60a5fa !important; } [data-theme="dark"] .text-amber-600 { color: #fbbf24 !important; } [data-theme="dark"] .text-purple-600 { color: #a78bfa !important; } [data-theme="dark"] .text-red-600 { color: #f87171 !important; } [data-theme="dark"] .text-pink-600 { color: #f472b6 !important; } /* ============================================ ACCENT BORDER OVERRIDES (border-*-100/200) ============================================ */ [data-theme="dark"] .border-blue-100, [data-theme="dark"] .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; } [data-theme="dark"] .border-green-100, [data-theme="dark"] .border-green-200 { border-color: rgba(34, 197, 94, 0.3) !important; } [data-theme="dark"] .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; } [data-theme="dark"] .border-purple-100 { border-color: rgba(168, 85, 247, 0.3) !important; } [data-theme="dark"] .border-indigo-100 { border-color: rgba(99, 102, 241, 0.3) !important; } [data-theme="dark"] .border-amber-100 { border-color: rgba(245, 158, 11, 0.3) !important; } [data-theme="dark"] .border-amber-400 { border-color: rgba(245, 158, 11, 0.6) !important; } /* ============================================ CUSTOM CSS COMPONENT OVERRIDES ============================================ */ /* Cards */ [data-theme="dark"] .bg-white.rounded-2xl, [data-theme="dark"] .bg-white.rounded-lg, [data-theme="dark"] .excel-card, [data-theme="dark"] .wizard-radio-card { background: var(--neutral-100) !important; border-color: var(--neutral-200) !important; } [data-theme="dark"] .bg-white.rounded-2xl:hover, [data-theme="dark"] .bg-white.rounded-lg:hover { border-color: var(--primary-400) !important; } /* Aggressive: cualquier div com bg-white + rounded-xl + shadow + border (padrao de grelha) */ [data-theme="dark"] .bg-white.rounded-xl, [data-theme="dark"] .bg-white.rounded-2xl, [data-theme="dark"] .bg-white.rounded-lg, [data-theme="dark"] .bg-white.rounded-md { background-color: var(--neutral-100) !important; } /* tbody especifico - grelhas */ [data-theme="dark"] tbody.bg-white, [data-theme="dark"] tbody.bg-white { background-color: var(--neutral-100) !important; } /* Buttons */ [data-theme="dark"] .btn-secondary { background: var(--neutral-200) !important; color: var(--neutral-700) !important; border-color: var(--neutral-300) !important; } [data-theme="dark"] .btn-secondary:hover { background: var(--neutral-300) !important; border-color: var(--neutral-400) !important; } /* Tables */ [data-theme="dark"] table tbody tr { background-color: transparent !important; } [data-theme="dark"] table tbody tr:hover { background-color: rgba(59, 130, 246, 0.12) !important; } [data-theme="dark"] table thead { background-color: var(--neutral-100) !important; } /* Table bodies com classe bg-white */ [data-theme="dark"] table tbody.bg-white { background-color: var(--neutral-100) !important; } /* ============================================ TABLE ROW HOVER (overrides JS inline styles) :hover com !important ganha do style= inline ============================================ */ [data-theme="dark"] table tbody tr:hover { background-color: rgba(255, 255, 255, 0.04) !important; } /* Table/grid container patterns (border border-gray-200 is the common variant) */ [data-theme="dark"] div.bg-white.rounded-xl.shadow-sm.border-gray-200, [data-theme="dark"] div.bg-white.rounded-lg.shadow-sm.border-gray-200, [data-theme="dark"] div.bg-white.rounded-2xl.shadow-sm.border-gray-200 { background-color: var(--neutral-100) !important; } /* Table header gradient overrides */ [data-theme="dark"] thead tr, [data-theme="dark"] thead th, [data-theme="dark"] th { background: var(--neutral-100) !important; border-bottom: 1px solid var(--neutral-300) !important; } [data-theme="dark"] thead[style*="linear-gradient"] { background: var(--neutral-100) !important; } /* Table cell borders */ [data-theme="dark"] td, [data-theme="dark"] th { border-color: var(--neutral-200) !important; } /* Zebra striping and alternating row colors */ [data-theme="dark"] .bg-white[class*="even:"], [data-theme="dark"] .even\:bg-gray-50:nth-child(even) { background-color: var(--neutral-100) !important; } [data-theme="dark"] .even\:bg-gray-100:nth-child(even) { background-color: var(--neutral-200) !important; } /* Inputs */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--neutral-200) !important; color: var(--neutral-800) !important; border-color: var(--neutral-300) !important; } [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { background-color: var(--neutral-100) !important; border-color: var(--primary-500) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--neutral-500) !important; } /* Inputs with inline style overrides (JS onfocus) */ [data-theme="dark"] input[style*="background:#fff"], [data-theme="dark"] input[style*="background: #fff"], [data-theme="dark"] input[style*="background:white"], [data-theme="dark"] input[style*="background: white"] { background: var(--neutral-100) !important; } /* ============================================ CHAT WIDGET ============================================ */ [data-theme="dark"] .chat-window { background: var(--neutral-100) !important; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .chat-window-messages { background: var(--neutral-50) !important; } [data-theme="dark"] .chat-window-messages::-webkit-scrollbar-thumb { background: var(--neutral-400) !important; } [data-theme="dark"] .chat-window-empty-title { color: var(--neutral-700) !important; } [data-theme="dark"] .chat-window-empty-subtitle { color: var(--neutral-500) !important; } [data-theme="dark"] .chat-window-suggestion { background: var(--neutral-100) !important; border-color: var(--neutral-200) !important; color: var(--neutral-600) !important; } [data-theme="dark"] .chat-window-suggestion:hover { border-color: var(--primary-400) !important; background: rgba(59, 130, 246, 0.15) !important; color: var(--primary-300) !important; } [data-theme="dark"] .chat-window-bubble-assistant { background: var(--neutral-200) !important; color: var(--neutral-800) !important; border-color: var(--neutral-300) !important; } [data-theme="dark"] .chat-window-input-area { background: var(--neutral-100) !important; border-top-color: var(--neutral-200) !important; } [data-theme="dark"] .chat-window-input { background: var(--neutral-200) !important; border-color: var(--neutral-300) !important; color: var(--neutral-800) !important; } [data-theme="dark"] .chat-window-input:focus { background: var(--neutral-100) !important; border-color: var(--primary-500) !important; } [data-theme="dark"] .chat-window-input::placeholder { color: var(--neutral-500) !important; } [data-theme="dark"] .chat-bubble-tooltip { background: var(--neutral-200) !important; color: var(--neutral-700) !important; } [data-theme="dark"] .chat-bubble-tooltip::after { border-top-color: var(--neutral-200) !important; } [data-theme="dark"] .typing-dot { background: var(--neutral-500) !important; } [data-theme="dark"] .chat-window-empty-icon { background: rgba(59, 130, 246, 0.15) !important; } /* ============================================ PAGE TRANSITION OVERLAY ============================================ */ [data-theme="dark"] body.page-loading .page-transition-overlay, [data-theme="dark"] body.page-exiting .page-transition-overlay, [data-theme="dark"] .page-transition-overlay.is-active { background: rgba(15, 23, 42, 0.85) !important; backdrop-filter: blur(4px) saturate(120%); -webkit-backdrop-filter: blur(4px) saturate(120%); } /* ============================================ EXCEL PREVIEW MODAL (rgba white background) ============================================ */ [data-theme="dark"] div[style*="background:rgba(255,255,255"], [data-theme="dark"] div[style*="background: rgba(255,255,255"], [data-theme="dark"] div[style*="background:rgba(255, 255, 255"], [data-theme="dark"] div[style*="background: rgba(255, 255, 255"] { background: var(--neutral-100) !important; border-color: var(--neutral-300) !important; } /* Modal overlay semi-transparent white */ [data-theme="dark"] [style*="background:rgba(255,255,255,0.85)"], [data-theme="dark"] [style*="background: rgba(255,255,255,0.85)"] { background: rgba(15, 23, 42, 0.92) !important; } /* ============================================ SHIMMER ============================================ */ [data-theme="dark"] .shimmer { background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-300) 50%, var(--neutral-200) 75%) !important; } /* ============================================ PAGINATION OVERRIDES ============================================ */ [data-theme="dark"] .pagination a, [data-theme="dark"] nav[role="navigation"] a { color: var(--neutral-600) !important; } [data-theme="dark"] .pagination a:hover, [data-theme="dark"] nav[role="navigation"] a:hover { background-color: var(--neutral-200) !important; } [data-theme="dark"] .pagination span[aria-current="page"] span, [data-theme="dark"] nav[role="navigation"] span[aria-current="page"] { background-color: var(--primary-500) !important; color: white !important; } /* ============================================ SCROLLBAR GLOBALS ============================================ */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--neutral-100) !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--neutral-400) !important; border-radius: 10px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--neutral-500) !important; } /* ============================================ JS-GENERATED INLINE STYLES (onmouseover handlers) ============================================ */ /* Catch hover effects that set light backgrounds via JS */ [data-theme="dark"] tr[style*="background:#f0fdfa"], [data-theme="dark"] tr[style*="background: #f0fdfa"] { background: rgba(20, 184, 166, 0.12) !important; } [data-theme="dark"] tr[style*="background:#eff6ff"], [data-theme="dark"] tr[style*="background: #eff6ff"] { background: rgba(59, 130, 246, 0.1) !important; } [data-theme="dark"] tr[style*="background:#fef2f2"], [data-theme="dark"] tr[style*="background: #fef2f2"] { background: rgba(239, 68, 68, 0.1) !important; } /* ============================================ REVEAL-ON-SCROLL FIX (applies to sections) ============================================ */ [data-theme="dark"] .bg-gradient-to-r.from-blue-50 { background: linear-gradient(to right, var(--neutral-100), var(--neutral-100)) !important; } /* ============================================ EMPTY STATE ICONS ============================================ */ [data-theme="dark"] svg.text-gray-300 { color: var(--neutral-500) !important; } [data-theme="dark"] svg.text-gray-400 { color: var(--neutral-500) !important; } /* ============================================ MODAL OVERRIDES ============================================ */ [data-theme="dark"] .fixed.inset-0[style*="backdrop-filter"] > div, [data-theme="dark"] .fixed.inset-0[style*="backdrop-filter"] > [style*="background: white"], [data-theme="dark"] .fixed.inset-0[style*="backdrop-filter"] > [style*="border-radius"] { background: var(--neutral-100) !important; } [data-theme="dark"] [style*="background: white"][style*="border-radius"], [data-theme="dark"] div[style*="background: white"][style*="box-shadow"] { background: var(--neutral-100) !important; } [data-theme="dark"] [style*="border-top: 1px solid #f3f4f6"] { border-top-color: var(--neutral-200) !important; } [data-theme="dark"] [style*="border-top: 1px solid #f3f4f6"] button { background: var(--neutral-200) !important; color: var(--neutral-700) !important; border-color: var(--neutral-300) !important; } /* Modal header gradient backgrounds */ [data-theme="dark"] [style*="border-radius:1rem"][style*="overflow:hidden"] > div[style*="padding:1.5rem"] { background: var(--neutral-200) !important; } /* Modal body text */ [data-theme="dark"] [style*="color:#374151"] { color: var(--neutral-700) !important; } [data-theme="dark"] [style*="color: #374151"] { color: var(--neutral-700) !important; } /* Modal footer buttons */ [data-theme="dark"] button[style*="border:1px solid #d1d5db"] { border-color: var(--neutral-400) !important; color: var(--neutral-700) !important; background: var(--neutral-100) !important; } /* Confirm dialog (showConfirmDialog JS) */ [data-theme="dark"] div[style*="background:white"][style*="border-radius:1rem"] { background: var(--neutral-100) !important; } [data-theme="dark"] div[style*="background:white"][style*="border-radius:1rem"] p { color: var(--neutral-700) !important; } [data-theme="dark"] div[style*="border-top:1px solid #f3f4f6"] { border-top-color: var(--neutral-200) !important; } [data-theme="dark"] button[style*="border:1px solid #d1d5db"] { background: var(--neutral-200) !important; color: var(--neutral-700) !important; border-color: var(--neutral-300) !important; } /* Dropdown & select menus from JS */ [data-theme="dark"] div[style*="min-width"][style*="background:white"], [data-theme="dark"] div[style*="background:white"][style*="min-width"] { background: var(--neutral-100) !important; border-color: var(--neutral-300) !important; } /* Toast container - ensure visibility */ [data-theme="dark"] #global-toast-container > div { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; } /* Inline backgrounds - aplica a qualquer elemento, nao apenas div */ [data-theme="dark"] [style*="background: white"] { background: var(--neutral-100) !important; } [data-theme="dark"] [style*="background: #f9fafb"] { background: var(--neutral-200) !important; } /* ============================================ INLINE HEX BACKGROUND OVERRIDES Ordem importa: #fff primeiro, depois hex especificos ============================================ */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"] { background: var(--neutral-100) !important; } [data-theme="dark"] [style*="background: #f8fafc"], [data-theme="dark"] [style*="background:#f8fafc"] { background: var(--neutral-100) !important; } [data-theme="dark"] [style*="background: #f5f3ff"], [data-theme="dark"] [style*="background:#f5f3ff"] { background: var(--neutral-100) !important; } [data-theme="dark"] [style*="background: #eff6ff"], [data-theme="dark"] [style*="background:#eff6ff"], [data-theme="dark"] [style*="background: rgb(239, 246, 255)"] { background: rgba(59, 130, 246, 0.1) !important; } [data-theme="dark"] [style*="background: #eef2ff"], [data-theme="dark"] [style*="background:#eef2ff"], [data-theme="dark"] [style*="background: rgb(238, 242, 255)"] { background: rgba(99, 102, 241, 0.1) !important; } [data-theme="dark"] [style*="background: #f3f4f6"], [data-theme="dark"] [style*="background:#f3f4f6"] { background: var(--neutral-200) !important; } [data-theme="dark"] [style*="background: #f1f5f9"], [data-theme="dark"] [style*="background:#f1f5f9"] { background: var(--neutral-200) !important; } [data-theme="dark"] [style*="background: #fee2e2"], [data-theme="dark"] [style*="background:#fee2e2"], [data-theme="dark"] [style*="background: rgb(254, 226, 226)"] { background: rgba(239, 68, 68, 0.15) !important; } [data-theme="dark"] [style*="background: #fef2f2"], [data-theme="dark"] [style*="background:#fef2f2"], [data-theme="dark"] [style*="background: rgb(254, 242, 242)"] { background: rgba(239, 68, 68, 0.1) !important; } [data-theme="dark"] [style*="background: #fffbeb"], [data-theme="dark"] [style*="background:#fffbeb"] { background: rgba(245, 158, 11, 0.1) !important; } [data-theme="dark"] [style*="background: #faf5ff"], [data-theme="dark"] [style*="background:#faf5ff"] { background: rgba(168, 85, 247, 0.1) !important; } [data-theme="dark"] [style*="background: #ffedd5"], [data-theme="dark"] [style*="background:#ffedd5"] { background: rgba(251, 146, 60, 0.1) !important; } [data-theme="dark"] [style*="background: #f0fdfa"], [data-theme="dark"] [style*="background:#f0fdfa"], [data-theme="dark"] [style*="background: rgb(240, 253, 250)"] { background: rgba(20, 184, 166, 0.12) !important; } [data-theme="dark"] [style*="background: #f0fdf4"], [data-theme="dark"] [style*="background:#f0fdf4"] { background: rgba(34, 197, 94, 0.1) !important; } [data-theme="dark"] [style*="background: #f0f4ff"], [data-theme="dark"] [style*="background:#f0f4ff"] { background: rgba(59, 130, 246, 0.08) !important; } [data-theme="dark"] [style*="background: #f6f7fb"], [data-theme="dark"] [style*="background:#f6f7fb"] { background: var(--neutral-100) !important; } [data-theme="dark"] [style*="background: #e0f2fe"], [data-theme="dark"] [style*="background:#e0f2fe"] { background: rgba(59, 130, 246, 0.15) !important; } [data-theme="dark"] [style*="background: #cffafe"], [data-theme="dark"] [style*="background:#cffafe"] { background: rgba(6, 182, 212, 0.15) !important; } [data-theme="dark"] [style*="background: #dbeafe"], [data-theme="dark"] [style*="background:#dbeafe"], [data-theme="dark"] [style*="background: rgb(219, 234, 254)"] { background: rgba(59, 130, 246, 0.2) !important; } [data-theme="dark"] [style*="background: #dcfce7"], [data-theme="dark"] [style*="background:#dcfce7"] { background: rgba(34, 197, 94, 0.2) !important; } [data-theme="dark"] [style*="background: #bbf7d0"], [data-theme="dark"] [style*="background:#bbf7d0"] { background: rgba(34, 197, 94, 0.25) !important; } [data-theme="dark"] [style*="background: #fecaca"], [data-theme="dark"] [style*="background:#fecaca"] { background: rgba(239, 68, 68, 0.25) !important; } [data-theme="dark"] [style*="background: #c7d2fe"], [data-theme="dark"] [style*="background:#c7d2fe"] { background: rgba(99, 102, 241, 0.25) !important; } [data-theme="dark"] [style*="background: #e5e7eb"], [data-theme="dark"] [style*="background:#e5e7eb"] { background: var(--neutral-300) !important; } [data-theme="dark"] [style*="background: #e2e8f0"], [data-theme="dark"] [style*="background:#e2e8f0"] { background: var(--neutral-300) !important; } [data-theme="dark"] [style*="background: #ede9fe"], [data-theme="dark"] [style*="background:#ede9fe"], [data-theme="dark"] [style*="background: rgb(237, 233, 254)"] { background: rgba(99, 102, 241, 0.2) !important; } [data-theme="dark"] [style*="background: #e0e7ff"], [data-theme="dark"] [style*="background:#e0e7ff"], [data-theme="dark"] [style*="background: rgb(224, 231, 255)"] { background: rgba(99, 102, 241, 0.15) !important; } [data-theme="dark"] [style*="background: #fef3c7"], [data-theme="dark"] [style*="background:#fef3c7"] { background: rgba(245, 158, 11, 0.2) !important; } [data-theme="dark"] [style*="background: #fde68a"], [data-theme="dark"] [style*="background:#fde68a"] { background: rgba(245, 158, 11, 0.3) !important; } [data-theme="dark"] [style*="background: #fae8ff"], [data-theme="dark"] [style*="background:#fae8ff"] { background: rgba(168, 85, 247, 0.15) !important; } [data-theme="dark"] [style*="background: #fdf4ff"], [data-theme="dark"] [style*="background:#fdf4ff"] { background: rgba(168, 85, 247, 0.1) !important; } [data-theme="dark"] [style*="background: #ccfbf1"], [data-theme="dark"] [style*="background:#ccfbf1"], [data-theme="dark"] [style*="background: rgb(204, 251, 241)"] { background: rgba(20, 184, 166, 0.2) !important; } [data-theme="dark"] [style*="background: #e9d5ff"], [data-theme="dark"] [style*="background:#e9d5ff"] { background: rgba(168, 85, 247, 0.25) !important; } /* Background-color inline override */ [data-theme="dark"] [style*="background-color: #f8fafc"], [data-theme="dark"] [style*="background-color:#f8fafc"], [data-theme="dark"] [style*="background-color: #f3f4f6"], [data-theme="dark"] [style*="background-color:#f3f4f6"] { background-color: var(--neutral-100) !important; } [data-theme="dark"] [style*="background-color: #fef2f2"], [data-theme="dark"] [style*="background-color:#fef2f2"] { background-color: rgba(239, 68, 68, 0.1) !important; } [data-theme="dark"] [style*="background-color: #f5f3ff"], [data-theme="dark"] [style*="background-color:#f5f3ff"] { background-color: rgba(99, 102, 241, 0.1) !important; } [data-theme="dark"] [style*="background-color: #eff6ff"], [data-theme="dark"] [style*="background-color:#eff6ff"] { background-color: rgba(59, 130, 246, 0.1) !important; } [data-theme="dark"] [style*="background-color: #ecfdf5"], [data-theme="dark"] [style*="background-color:#ecfdf5"] { background-color: rgba(34, 197, 94, 0.1) !important; } [data-theme="dark"] [style*="background-color: #ffedd5"], [data-theme="dark"] [style*="background-color:#ffedd5"] { background-color: rgba(251, 146, 60, 0.1) !important; } /* ============================================ LOGIN PAGE OVERRIDES ============================================ */ [data-theme="dark"] div[style*="max-width: 26rem"][style*="background: white"] { background: var(--neutral-100) !important; } [data-theme="dark"] div[style*="padding: 2rem 2rem 1.5rem"] h2 { color: var(--neutral-800) !important; } [data-theme="dark"] div[style*="padding: 2rem 2rem 1.5rem"] p { color: var(--neutral-500) !important; } [data-theme="dark"] div[style*="background: #f9fafb"][style*="border-top"] { background: var(--neutral-200) !important; border-top-color: var(--neutral-100) !important; } [data-theme="dark"] div[style*="background: #f9fafb"][style*="border-top"] a { color: var(--primary-400) !important; } [data-theme="dark"] div[style*="background: #f9fafb"][style*="border-top"] p { color: var(--neutral-500) !important; } /* ============================================ SECTION HEADER GRADIENTS (Filtros, áreas de cabeçalho, info boxes) ============================================ */ /* Table header / filter area gradients */ [data-theme="dark"] div[style*="linear-gradient(135deg, #f8fafc"] { background: var(--neutral-100) !important; } [data-theme="dark"] div[style*="linear-gradient"][style*="#f0fdfa"], [data-theme="dark"] div[style*="linear-gradient"][style*="#ccfbf1"] { background: var(--neutral-100) !important; } [data-theme="dark"] div[style*="linear-gradient"][style*="#eef2ff"], [data-theme="dark"] div[style*="linear-gradient"][style*="#e0e7ff"] { background: var(--neutral-100) !important; } [data-theme="dark"] div[style*="linear-gradient"][style*="#eff6ff"], [data-theme="dark"] div[style*="linear-gradient"][style*="#dbeafe"] { background: var(--neutral-100) !important; } [data-theme="dark"] div[style*="linear-gradient"][style*="#f5f3ff"], [data-theme="dark"] div[style*="linear-gradient"][style*="#ede9fe"] { background: var(--neutral-100) !important; } [data-theme="dark"] div[style*="linear-gradient"][style*="#faf5ff"], [data-theme="dark"] div[style*="linear-gradient"][style*="#f3e8ff"] { background: var(--neutral-100) !important; } [data-theme="dark"] div[style*="linear-gradient"][style*="#fffbeb"], [data-theme="dark"] div[style*="linear-gradient"][style*="#fef3c7"] { background: var(--neutral-100) !important; } [data-theme="dark"] div[style*="linear-gradient"][style*="#f0fdf4"], [data-theme="dark"] div[style*="linear-gradient"][style*="#dcfce7"] { background: var(--neutral-100) !important; } /* ============================================ STAT CARDS (Dashboard, APIs, etc.) Qualquer card com bg gradiente claro + rounded + shadow + border ============================================ */ /* Cards com gradientes claros - abrange rounded-xl, rounded-2xl, rounded-lg, p-4, p-5, p-6 */ [data-theme="dark"] div[class*="rounded"][class*="shadow-sm"].border[style*="linear-gradient"] { background: var(--neutral-100) !important; } /* ============================================ ENLACES / LINKS ============================================ */ [data-theme="dark"] a.text-blue-600, [data-theme="dark"] a.text-indigo-600 { color: var(--primary-400) !important; } [data-theme="dark"] a.text-blue-600:hover, [data-theme="dark"] a.text-indigo-600:hover { color: var(--primary-300) !important; } /* ============================================ DROPDOWNS / SELECT MENUS ============================================ */ [data-theme="dark"] .bg-white.border.border-gray-300.rounded-md.shadow-lg, [data-theme="dark"] div[style*="background: white"][style*="min-width"], [data-theme="dark"] div[style*="min-width"][style*="background: white"] { background: var(--neutral-100) !important; border-color: var(--neutral-300) !important; } [data-theme="dark"] .border-b.border-gray-100 { border-bottom-color: var(--neutral-200) !important; } /* Dropdown menus com bg-white */ [data-theme="dark"] .bg-white.rounded-md.shadow-lg { background-color: var(--neutral-100) !important; } /* select com bg-white class */ [data-theme="dark"] select.bg-white { background-color: var(--neutral-200) !important; color: var(--neutral-800) !important; border-color: var(--neutral-300) !important; } /* ============================================ WIZARD STEP OVERRIDES ============================================ */ [data-theme="dark"] .bg-gradient-to-r.from-slate-50 { background: linear-gradient(to right, var(--neutral-100), var(--neutral-100)) !important; } /* Wizard-input: usado em step1, step2, step3, step4-api, step4-dbapi */ [data-theme="dark"] .wizard-input { background: var(--neutral-200) !important; color: var(--neutral-800) !important; border-color: var(--neutral-300) !important; } /* Wizard card/step generic classes */ [data-theme="dark"] .card, [data-theme="dark"] .step { background: var(--neutral-100) !important; } /* Wizard page-level backgrounds (linear-gradient(180deg,...)) */ [data-theme="dark"] [style*="background:linear-gradient(180deg,#f0f9ff"], [data-theme="dark"] [style*="background: linear-gradient(180deg, #f0f9ff"] { background: var(--neutral-50) !important; } /* ============================================ BG-GRADIENT-TO-* FROM-*-50 TO-*-50 OVERRIDES ============================================ */ [data-theme="dark"] [class*="from-blue-50"][class*="to-indigo-50"], [data-theme="dark"] [class*="from-blue-50"][class*="to-blue-100"], [data-theme="dark"] [class*="from-indigo-50"][class*="to-indigo-100"], [data-theme="dark"] [class*="from-purple-50"][class*="to-pink-50"], [data-theme="dark"] [class*="from-green-50"][class*="to-emerald-50"], [data-theme="dark"] [class*="from-amber-50"][class*="to-orange-50"], [data-theme="dark"] [class*="from-blue-50"][class*="to-indigo-50"] { background-image: none !important; background-color: var(--neutral-100) !important; } /* ============================================ SIDEBAR OVERRIDES O sidebar usa gradiente azul - o shadow precisa de ajuste ============================================ */ [data-theme="dark"] aside.fixed.left-0 { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important; } /* ============================================ INLINE STYLE OVERRIDES (genérico) ============================================ */ /* Input fields with #f9fafb background */ [data-theme="dark"] input[style*="background: #f9fafb"], [data-theme="dark"] input[style*="background:#f9fafb"] { background: var(--neutral-200) !important; color: var(--neutral-800) !important; border-color: var(--neutral-300) !important; } /* Labels with #374151 color */ [data-theme="dark"] label[style*="color: #374151"], [data-theme="dark"] label[style*="color:#374151"] { color: var(--neutral-700) !important; } /* Paragraphs with #6b7280 color */ [data-theme="dark"] p[style*="color: #6b7280"], [data-theme="dark"] span[style*="color: #6b7280"] { color: var(--neutral-400) !important; } /* Headings with #111827 color */ [data-theme="dark"] h2[style*="color: #111827"] { color: var(--neutral-800) !important; } /* Error messages */ [data-theme="dark"] p[style*="color: #dc2626"] { color: #f87171 !important; } /* Success messages */ [data-theme="dark"] div[style*="background: #f0fdf4"] { background: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.3) !important; } [data-theme="dark"] div[style*="background: #f0fdf4"] p { color: #86efac !important; } [data-theme="dark"] div[style*="background: #f0fdf4"] svg { color: #4ade80 !important; } /* ============================================ CSS CLASS OVERRIDES (de