/* ─── Dark Mode Global Overrides ────────────────────────────────────── * Loaded directly via to bypass Tailwind 4 purging. * Transforms ALL hardcoded light-mode colors when .dark is on . * ──────────────────────────────────────────────────────────────────── */ /* === Backgrounds — solid whites and grays === */ .dark .bg-white, .dark .bg-white\/80, .dark .bg-white\/90 { background-color: #0f172a !important; } .dark [class*="bg-\[#f8fafc\]"] { background-color: #020617 !important; } .dark .bg-slate-50, .dark [class*="bg-slate-50\/"] { background-color: #1e293b !important; } .dark .bg-slate-100, .dark [class*="bg-slate-100\/"] { background-color: #1e293b !important; } .dark .bg-gray-50, .dark .bg-gray-100 { background-color: #1e293b !important; } /* === Backgrounds — tinted (keep hue, darken) === */ .dark .bg-indigo-50, .dark [class*="bg-indigo-50\/"] { background-color: rgba(49, 46, 129, 0.3) !important; } .dark .bg-blue-50, .dark [class*="bg-blue-50\/"] { background-color: rgba(30, 58, 138, 0.3) !important; } .dark .bg-green-50, .dark [class*="bg-green-50\/"] { background-color: rgba(20, 83, 45, 0.3) !important; } .dark .bg-emerald-50, .dark [class*="bg-emerald-50\/"] { background-color: rgba(6, 78, 59, 0.3) !important; } .dark .bg-red-50, .dark [class*="bg-red-50\/"] { background-color: rgba(127, 29, 29, 0.3) !important; } .dark .bg-amber-50, .dark [class*="bg-amber-50\/"] { background-color: rgba(120, 53, 15, 0.3) !important; } .dark .bg-orange-50, .dark [class*="bg-orange-50\/"] { background-color: rgba(124, 45, 18, 0.3) !important; } .dark .bg-purple-50, .dark [class*="bg-purple-50\/"] { background-color: rgba(88, 28, 135, 0.3) !important; } .dark .bg-cyan-50, .dark [class*="bg-cyan-50\/"] { background-color: rgba(21, 94, 117, 0.3) !important; } .dark .bg-violet-50, .dark [class*="bg-violet-50\/"] { background-color: rgba(76, 29, 149, 0.3) !important; } .dark .bg-yellow-50, .dark [class*="bg-yellow-50\/"] { background-color: rgba(113, 63, 18, 0.3) !important; } /* === Backgrounds — badge/pill 100-level === */ .dark .bg-indigo-100, .dark [class*="bg-indigo-100\/"] { background-color: rgba(99, 102, 241, 0.2) !important; color: #a5b4fc !important; } .dark .bg-blue-100, .dark [class*="bg-blue-100\/"] { background-color: rgba(59, 130, 246, 0.2) !important; color: #93c5fd !important; } .dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.2) !important; color: #86efac !important; } .dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.2) !important; color: #6ee7b7 !important; } .dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; } .dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; color: #fcd34d !important; } .dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.2) !important; color: #fdba74 !important; } .dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2) !important; color: #d8b4fe !important; } .dark .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.2) !important; color: #67e8f9 !important; } .dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.2) !important; color: #fde047 !important; } .dark .bg-pink-100 { background-color: rgba(236, 72, 153, 0.2) !important; color: #f9a8d4 !important; } /* === Text — headings and primary text === */ .dark .text-slate-900, .dark .text-gray-900 { color: #e2e8f0 !important; } .dark .text-slate-800, .dark .text-gray-800 { color: #cbd5e1 !important; } .dark .text-slate-700, .dark .text-gray-700 { color: #cbd5e1 !important; } /* === Text — secondary/muted === */ .dark .text-slate-600, .dark .text-gray-600 { color: #94a3b8 !important; } .dark .text-slate-500, .dark .text-gray-500 { color: #94a3b8 !important; } .dark .text-gray-400 { color: #64748b !important; } /* === Borders === */ .dark .border-slate-200, .dark [class*="border-slate-200\/"], .dark .border-gray-200 { border-color: #334155 !important; } .dark .border-slate-100, .dark [class*="border-slate-100\/"], .dark .border-gray-100 { border-color: rgba(51, 65, 85, 0.5) !important; } .dark .border-slate-300, .dark .border-gray-300 { border-color: #475569 !important; } /* Tinted borders */ .dark .border-indigo-200, .dark .border-indigo-300 { border-color: rgba(99, 102, 241, 0.35) !important; } .dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; } .dark .border-amber-100, .dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; } /* === Divide === */ .dark .divide-slate-200 > * + * { border-color: #334155 !important; } .dark .divide-slate-100 > * + * { border-color: rgba(51, 65, 85, 0.5) !important; } /* === Hover states === */ .dark .hover\:bg-slate-50:hover, .dark [class*="hover\:bg-slate-50\/"]:hover { background-color: #1e293b !important; } .dark .hover\:bg-slate-100:hover { background-color: #1e293b !important; } .dark .hover\:bg-gray-50:hover { background-color: #1e293b !important; } .dark .hover\:bg-white:hover { background-color: #1e293b !important; } .dark .hover\:border-slate-300:hover { border-color: #475569 !important; } .dark .hover\:border-indigo-200:hover { border-color: rgba(99, 102, 241, 0.4) !important; } .dark .hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important; } /* === Tables === */ .dark table { background-color: #0f172a; } .dark thead { background-color: #1e293b !important; } .dark thead tr { background-color: #1e293b !important; } .dark th { color: #94a3b8 !important; background-color: #1e293b !important; } .dark td { color: #cbd5e1; } .dark tbody tr { border-color: rgba(51, 65, 85, 0.5) !important; } .dark tbody tr:hover { background-color: rgba(30, 41, 59, 0.5) !important; } /* === Form elements === */ .dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .dark textarea, .dark select { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } .dark input::placeholder, .dark textarea::placeholder { color: #64748b !important; } .dark input:focus, .dark textarea:focus, .dark select:focus { border-color: #6366f1 !important; } .dark option { background-color: #1e293b; color: #e2e8f0; } /* === Buttons — outline/secondary (keep solid buttons like bg-indigo-600 as-is) === */ .dark button[class*="border-slate"], .dark a[class*="border-slate"] { border-color: #475569 !important; } /* === Shadows === */ .dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; } .dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !important; } .dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important; } .dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important; } /* === Ring === */ .dark .ring-indigo-100, .dark .ring-2.ring-indigo-100 { --tw-ring-color: rgba(99, 102, 241, 0.2) !important; } /* === Skeleton loaders === */ .dark .animate-pulse { opacity: 0.3; } /* === Card component (shadcn uses bg-card which maps to CSS var, but explicit bg-white on wrappers) === */ .dark [data-slot="card"] { background-color: #0f172a !important; border-color: #334155 !important; } /* === Specific patterns in this app === */ /* Gradient cards (onboarding banner etc.) — keep vivid */ .dark .bg-gradient-to-r { filter: brightness(0.9); } /* Funnel bars — keep readable */ .dark .bg-blue-400 { background-color: #3b82f6 !important; } .dark .bg-red-400 { background-color: #ef4444 !important; } .dark .bg-amber-400 { background-color: #f59e0b !important; } .dark .bg-indigo-400 { background-color: #818cf8 !important; } .dark .bg-emerald-400 { background-color: #34d399 !important; } .dark .bg-orange-400 { background-color: #fb923c !important; } .dark .bg-cyan-400 { background-color: #22d3ee !important; } .dark .bg-emerald-500 { background-color: #10b981 !important; } .dark .bg-indigo-500 { background-color: #6366f1 !important; } /* Page header text */ .dark h1 { color: #e2e8f0; } .dark h2 { color: #e2e8f0; } .dark h3 { color: #cbd5e1; } .dark p { color: #94a3b8; } /* Override p inside buttons/badges where text should stay specific */ .dark button p, .dark [class*="badge"] p { color: inherit; } .dark .text-white { color: #ffffff !important; } .dark .text-indigo-600 { color: #818cf8 !important; } .dark .text-indigo-700 { color: #a5b4fc !important; } .dark .text-emerald-600 { color: #34d399 !important; } .dark .text-emerald-500 { color: #10b981 !important; } .dark .text-red-500 { color: #f87171 !important; } .dark .text-red-600 { color: #ef4444 !important; } .dark .text-amber-600 { color: #f59e0b !important; } .dark .text-blue-600 { color: #60a5fa !important; } .dark .text-green-600 { color: #4ade80 !important; } .dark .text-orange-600 { color: #fb923c !important; } .dark .text-purple-600 { color: #c084fc !important; } .dark .text-cyan-600 { color: #22d3ee !important; } /* Ensure strong/bold text is visible */ .dark strong { color: #e2e8f0; } /* Links */ .dark a:not([class]) { color: #818cf8; } /* Badges with specific bg+text combos */ .dark .bg-emerald-50.text-emerald-700 { color: #6ee7b7 !important; } .dark .bg-red-50.text-red-700 { color: #fca5a5 !important; } .dark .bg-blue-50.text-blue-700 { color: #93c5fd !important; } .dark .bg-amber-50.text-amber-700 { color: #fcd34d !important; } .dark .bg-indigo-50.text-indigo-700 { color: #a5b4fc !important; }