/* Dark mode — class on (or .dark on body for login) */
html.dark,
html.dark body,
.dark {
color-scheme: dark;
}
/* Scrollbar */
html.dark ::-webkit-scrollbar-thumb,
.dark ::-webkit-scrollbar-thumb {
background: #475569;
}
html.dark ::-webkit-scrollbar-thumb:hover,
.dark ::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
/* Page & surfaces */
html.dark .bg-gray-50,
.dark .bg-gray-50 { background-color: #0f172a !important; }
html.dark .bg-slate-50,
.dark .bg-slate-50 { background-color: #0f172a !important; }
html.dark .bg-white,
.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-white\/90,
.dark .bg-white\/90 { background-color: rgba(30, 41, 59, 0.9) !important; }
html.dark .bg-gray-100,
.dark .bg-gray-100 { background-color: #334155 !important; }
html.dark .bg-gray-50\/50,
.dark .bg-gray-50\/50 { background-color: rgba(30, 41, 59, 0.5) !important; }
html.dark .bg-gray-50\/80,
.dark .bg-gray-50\/80 { background-color: rgba(30, 41, 59, 0.8) !important; }
html.dark .bg-slate-50\/50,
.dark .bg-slate-50\/50 { background-color: rgba(30, 41, 59, 0.5) !important; }
html.dark .bg-slate-50\/80,
.dark .bg-slate-50\/80 { background-color: rgba(30, 41, 59, 0.85) !important; }
html.dark .bg-slate-50\/70,
.dark .bg-slate-50\/70 { background-color: rgba(30, 41, 59, 0.7) !important; }
html.dark .bg-slate-50\/90,
.dark .bg-slate-50\/90 { background-color: rgba(30, 41, 59, 0.9) !important; }
html.dark .bg-slate-100,
.dark .bg-slate-100 { background-color: #334155 !important; }
html.dark .bg-slate-200,
.dark .bg-slate-200 { background-color: #334155 !important; }
html.dark .bg-slate-200\/80,
.dark .bg-slate-200\/80 { background-color: rgba(51, 65, 85, 0.8) !important; }
html.dark .bg-slate-700\/50,
.dark .bg-slate-700\/50 { background-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .bg-slate-800,
.dark .bg-slate-800 { background-color: #1e293b !important; }
/* Primary action buttons — keep visible in dark mode */
html.dark .bg-slate-900.text-white,
html.dark a.bg-slate-900,
html.dark button.bg-slate-900,
.dark .bg-slate-900.text-white,
.dark a.bg-slate-900,
.dark button.bg-slate-900 {
background-color: #0284c7 !important;
border-color: #0284c7 !important;
}
html.dark a.bg-slate-900:hover,
html.dark button.bg-slate-900:hover,
html.dark .bg-slate-900.text-white.hover\:bg-slate-800:hover,
html.dark .hover\:bg-slate-800:hover.bg-slate-900,
.dark a.bg-slate-900:hover,
.dark button.bg-slate-900:hover,
.dark .bg-slate-900.text-white.hover\:bg-slate-800:hover,
.dark .hover\:bg-slate-800:hover.bg-slate-900 {
background-color: #0369a1 !important;
border-color: #0369a1 !important;
}
/* Tinted backgrounds */
html.dark .bg-primary-50,
.dark .bg-primary-50 { background-color: rgba(14, 165, 233, 0.12) !important; }
html.dark .bg-indigo-50,
.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12) !important; }
html.dark .bg-amber-50,
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; }
html.dark .bg-green-50,
.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; }
html.dark .bg-emerald-50,
.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
html.dark .bg-red-50,
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; }
html.dark .bg-rose-50,
.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12) !important; }
html.dark .bg-rose-100,
.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.18) !important; }
html.dark .bg-rose-50\/40,
.dark .bg-rose-50\/40 { background-color: rgba(244, 63, 94, 0.08) !important; }
html.dark .bg-rose-950\/20,
.dark .bg-rose-950\/20 { background-color: rgba(76, 5, 25, 0.35) !important; }
html.dark .bg-rose-950\/30,
.dark .bg-rose-950\/30 { background-color: rgba(76, 5, 25, 0.45) !important; }
html.dark .bg-rose-950\/40,
.dark .bg-rose-950\/40 { background-color: rgba(76, 5, 25, 0.5) !important; }
html.dark .bg-amber-950\/25,
.dark .bg-amber-950\/25 { background-color: rgba(69, 26, 3, 0.35) !important; }
html.dark .bg-slate-800\/60,
.dark .bg-slate-800\/60 { background-color: rgba(30, 41, 59, 0.6) !important; }
html.dark .bg-slate-800\/80,
.dark .bg-slate-800\/80 { background-color: rgba(30, 41, 59, 0.8) !important; }
html.dark .bg-blue-50,
.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; }
html.dark .bg-yellow-50,
.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; }
html.dark .bg-orange-50,
.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.12) !important; }
html.dark .bg-violet-50,
.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.12) !important; }
html.dark .bg-cyan-50,
.dark .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.12) !important; }
html.dark .bg-sky-50,
.dark .bg-sky-50 { background-color: rgba(14, 165, 233, 0.12) !important; }
html.dark .bg-teal-50,
.dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.12) !important; }
html.dark .bg-purple-50,
.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.12) !important; }
/* Tinted backgrounds with opacity */
html.dark .bg-amber-50\/50,
.dark .bg-amber-50\/50 { background-color: rgba(245, 158, 11, 0.1) !important; }
html.dark .bg-amber-50\/30,
.dark .bg-amber-50\/30 { background-color: rgba(245, 158, 11, 0.08) !important; }
html.dark .bg-amber-50\/70,
.dark .bg-amber-50\/70 { background-color: rgba(245, 158, 11, 0.12) !important; }
html.dark .bg-amber-50\/80,
.dark .bg-amber-50\/80 { background-color: rgba(245, 158, 11, 0.12) !important; }
html.dark .bg-amber-200\/80,
.dark .bg-amber-200\/80 { background-color: rgba(245, 158, 11, 0.22) !important; }
html.dark .bg-indigo-50\/30,
.dark .bg-indigo-50\/30 { background-color: rgba(99, 102, 241, 0.1) !important; }
html.dark .bg-indigo-50\/50,
.dark .bg-indigo-50\/50 { background-color: rgba(99, 102, 241, 0.12) !important; }
html.dark .bg-indigo-50\/70,
.dark .bg-indigo-50\/70 { background-color: rgba(99, 102, 241, 0.12) !important; }
html.dark .bg-indigo-200\/80,
.dark .bg-indigo-200\/80 { background-color: rgba(99, 102, 241, 0.25) !important; }
html.dark .bg-indigo-100,
.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.2) !important; }
html.dark .bg-indigo-50\/80,
.dark .bg-indigo-50\/80 { background-color: rgba(99, 102, 241, 0.12) !important; }
html.dark .bg-amber-100,
.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; }
html.dark .bg-rose-50\/30,
.dark .bg-rose-50\/30 { background-color: rgba(244, 63, 94, 0.1) !important; }
html.dark .bg-rose-50\/50,
.dark .bg-rose-50\/50 { background-color: rgba(244, 63, 94, 0.12) !important; }
html.dark .bg-emerald-50\/50,
.dark .bg-emerald-50\/50 { background-color: rgba(16, 185, 129, 0.12) !important; }
html.dark .bg-primary-50\/30,
.dark .bg-primary-50\/30 { background-color: rgba(14, 165, 233, 0.1) !important; }
html.dark .bg-red-50\/50,
.dark .bg-red-50\/50 { background-color: rgba(239, 68, 68, 0.12) !important; }
html.dark .bg-green-50\/50,
.dark .bg-green-50\/50 { background-color: rgba(34, 197, 94, 0.12) !important; }
/* Text */
html.dark .text-slate-900,
.dark .text-slate-900 { color: #f1f5f9 !important; }
html.dark .text-slate-800,
.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700,
.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600,
.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500,
.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-gray-700,
.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600,
.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-gray-500,
.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-slate-400,
.dark .text-slate-400 { color: #94a3b8 !important; }
html.dark .text-gray-400,
.dark .text-gray-400 { color: #94a3b8 !important; }
html.dark .text-gray-300,
.dark .text-gray-300 { color: #64748b !important; }
html.dark .text-sky-800,
.dark .text-sky-800 { color: #7dd3fc !important; }
html.dark .text-amber-800,
.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-rose-800,
.dark .text-rose-800 { color: #fda4af !important; }
html.dark .text-rose-700,
.dark .text-rose-700 { color: #fb7185 !important; }
html.dark .text-rose-600,
.dark .text-rose-600 { color: #fb7185 !important; }
html.dark .text-rose-300,
.dark .text-rose-300 { color: #fda4af !important; }
html.dark .text-rose-400,
.dark .text-rose-400 { color: #fb7185 !important; }
html.dark .text-indigo-900,
.dark .text-indigo-900 { color: #c7d2fe !important; }
html.dark .text-indigo-700,
.dark .text-indigo-700 { color: #a5b4fc !important; }
html.dark .text-indigo-600,
.dark .text-indigo-600 { color: #818cf8 !important; }
html.dark .text-emerald-700,
.dark .text-emerald-700 { color: #34d399 !important; }
html.dark .text-emerald-600,
.dark .text-emerald-600 { color: #34d399 !important; }
html.dark .text-emerald-400,
.dark .text-emerald-400 { color: #34d399 !important; }
html.dark .text-amber-600,
.dark .text-amber-600 { color: #fbbf24 !important; }
html.dark .text-amber-700,
.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .text-primary-700,
.dark .text-primary-700 { color: #38bdf8 !important; }
html.dark .text-primary-600,
.dark .text-primary-600 { color: #38bdf8 !important; }
html.dark .text-blue-600,
.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .text-amber-300\/90,
.dark .text-amber-300\/90 { color: rgba(252, 211, 77, 0.9) !important; }
/* Borders & rings */
html.dark .border-gray-100,
.dark .border-gray-100 { border-color: #334155 !important; }
html.dark .border-gray-100\/50,
.dark .border-gray-100\/50 { border-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .border-gray-200,
.dark .border-gray-200 { border-color: #334155 !important; }
html.dark .border-gray-300,
.dark .border-gray-300 { border-color: #475569 !important; }
html.dark .border-slate-200,
.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .border-slate-200\/50,
.dark .border-slate-200\/50 { border-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .border-slate-200\/60,
.dark .border-slate-200\/60 { border-color: rgba(51, 65, 85, 0.6) !important; }
html.dark .border-slate-200\/80,
.dark .border-slate-200\/80 { border-color: rgba(51, 65, 85, 0.8) !important; }
html.dark .border-slate-300,
.dark .border-slate-300 { border-color: #475569 !important; }
html.dark .border-slate-400,
.dark .border-slate-400 { border-color: #64748b !important; }
html.dark .border-slate-200\/60,
.dark .border-slate-200\/60 { border-color: rgba(51, 65, 85, 0.6) !important; }
html.dark .border-amber-200,
.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.35) !important; }
html.dark .border-sky-200,
.dark .border-sky-200 { border-color: rgba(14, 165, 233, 0.35) !important; }
html.dark .border-indigo-200,
.dark .border-indigo-200 { border-color: rgba(99, 102, 241, 0.35) !important; }
html.dark .border-emerald-200,
.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.35) !important; }
html.dark .border-rose-200,
.dark .border-rose-200 { border-color: rgba(244, 63, 94, 0.35) !important; }
html.dark .border-rose-100,
.dark .border-rose-100 { border-color: rgba(244, 63, 94, 0.25) !important; }
html.dark .border-indigo-100,
.dark .border-indigo-100 { border-color: rgba(99, 102, 241, 0.25) !important; }
html.dark .border-emerald-100,
.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.25) !important; }
html.dark .border-slate-100,
.dark .border-slate-100 { border-color: #334155 !important; }
html.dark .border-primary-100,
.dark .border-primary-100 { border-color: rgba(14, 165, 233, 0.25) !important; }
html.dark .border-rose-900\/50,
.dark .border-rose-900\/50 { border-color: rgba(136, 19, 55, 0.5) !important; }
html.dark .divide-slate-700,
.dark .divide-slate-700 { border-color: #334155 !important; }
html.dark .divide-slate-700\/80 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-700\/80 > :not([hidden]) ~ :not([hidden]) {
border-color: rgba(51, 65, 85, 0.8) !important;
}
html.dark .dark\:hover\:bg-slate-700\/40:hover,
.dark .dark\:hover\:bg-slate-700\/40:hover { background-color: rgba(51, 65, 85, 0.4) !important; }
html.dark .border-red-200,
.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.35) !important; }
html.dark .border-green-200,
.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.35) !important; }
html.dark .ring-gray-300,
.dark .ring-gray-300 { --tw-ring-color: #475569 !important; }
html.dark .ring-gray-200,
.dark .ring-gray-200 { --tw-ring-color: #334155 !important; }
html.dark .ring-slate-200,
.dark .ring-slate-200 { --tw-ring-color: #334155 !important; }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
border-color: #334155 !important;
}
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
border-color: #334155 !important;
}
/* Hover states */
html.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-50:hover { background-color: #334155 !important; }
html.dark .hover\:bg-gray-100:hover,
.dark .hover\:bg-gray-100:hover { background-color: #334155 !important; }
html.dark .hover\:bg-white:hover,
.dark .hover\:bg-white:hover { background-color: #334155 !important; }
html.dark .hover\:text-slate-900:hover,
.dark .hover\:text-slate-900:hover { color: #f1f5f9 !important; }
html.dark .hover\:border-primary-300:hover,
.dark .hover\:border-primary-300:hover { border-color: #0284c7 !important; }
html.dark .hover\:bg-primary-50\/30:hover,
.dark .hover\:bg-primary-50\/30:hover { background-color: rgba(14, 165, 233, 0.15) !important; }
html.dark .hover\:bg-rose-50:hover,
.dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.15) !important; }
html.dark .hover\:bg-rose-100:hover,
.dark .hover\:bg-rose-100:hover { background-color: rgba(244, 63, 94, 0.18) !important; }
html.dark .hover\:bg-indigo-100:hover,
.dark .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.18) !important; }
html.dark .hover\:bg-emerald-100:hover,
.dark .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.18) !important; }
html.dark .hover\:bg-white\/60:hover,
.dark .hover\:bg-white\/60:hover { background-color: rgba(51, 65, 85, 0.6) !important; }
html.dark .hover\:bg-amber-50\/80:hover,
.dark .hover\:bg-amber-50\/80:hover { background-color: rgba(245, 158, 11, 0.12) !important; }
html.dark .hover\:border-rose-300:hover,
.dark .hover\:border-rose-300:hover { border-color: rgba(244, 63, 94, 0.45) !important; }
html.dark .hover\:border-emerald-300:hover,
.dark .hover\:border-emerald-300:hover { border-color: rgba(16, 185, 129, 0.45) !important; }
html.dark .hover\:border-indigo-300:hover,
.dark .hover\:border-indigo-300:hover { border-color: rgba(99, 102, 241, 0.45) !important; }
html.dark .hover\:border-indigo-400:hover,
.dark .hover\:border-indigo-400:hover { border-color: rgba(99, 102, 241, 0.55) !important; }
html.dark .hover\:border-amber-400:hover,
.dark .hover\:border-amber-400:hover { border-color: rgba(245, 158, 11, 0.55) !important; }
html.dark .hover\:text-rose-600:hover,
.dark .hover\:text-rose-600:hover { color: #fb7185 !important; }
html.dark .hover\:text-rose-700:hover,
.dark .hover\:text-rose-700:hover { color: #fda4af !important; }
html.dark .hover\:bg-primary-50:hover,
.dark .hover\:bg-primary-50:hover { background-color: rgba(14, 165, 233, 0.15) !important; }
html.dark .hover\:bg-gray-50\/50:hover,
.dark .hover\:bg-gray-50\/50:hover { background-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .hover\:bg-gray-50\/80:hover,
.dark .hover\:bg-gray-50\/80:hover { background-color: rgba(51, 65, 85, 0.7) !important; }
html.dark .hover\:bg-slate-50\/50:hover,
.dark .hover\:bg-slate-50\/50:hover { background-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .hover\:bg-slate-50\/80:hover,
.dark .hover\:bg-slate-50\/80:hover { background-color: rgba(51, 65, 85, 0.7) !important; }
html.dark .hover\:bg-amber-50\/50:hover,
.dark .hover\:bg-amber-50\/50:hover { background-color: rgba(245, 158, 11, 0.12) !important; }
html.dark .hover\:bg-indigo-50:hover,
.dark .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.12) !important; }
html.dark .hover\:bg-indigo-50\/30:hover,
.dark .hover\:bg-indigo-50\/30:hover { background-color: rgba(99, 102, 241, 0.1) !important; }
html.dark .hover\:bg-indigo-50\/50:hover,
.dark .hover\:bg-indigo-50\/50:hover { background-color: rgba(99, 102, 241, 0.12) !important; }
html.dark .hover\:bg-emerald-50\/50:hover,
.dark .hover\:bg-emerald-50\/50:hover { background-color: rgba(16, 185, 129, 0.12) !important; }
html.dark .hover\:bg-rose-50\/50:hover,
.dark .hover\:bg-rose-50\/50:hover { background-color: rgba(244, 63, 94, 0.12) !important; }
html.dark .hover\:bg-slate-700:hover,
.dark .hover\:bg-slate-700:hover { background-color: #334155 !important; }
html.dark .hover\:bg-slate-800:hover,
.dark .hover\:bg-slate-800:hover { background-color: #1e293b !important; }
html.dark .hover\:text-slate-600:hover,
.dark .hover\:text-slate-600:hover { color: #cbd5e1 !important; }
html.dark .hover\:text-slate-300:hover,
.dark .hover\:text-slate-300:hover { color: #e2e8f0 !important; }
html.dark .hover\:border-primary-200:hover,
.dark .hover\:border-primary-200:hover { border-color: rgba(14, 165, 233, 0.4) !important; }
html.dark .hover\:border-indigo-200:hover,
.dark .hover\:border-indigo-200:hover { border-color: rgba(99, 102, 241, 0.4) !important; }
html.dark .hover\:border-amber-300:hover,
.dark .hover\:border-amber-300:hover { border-color: rgba(245, 158, 11, 0.45) !important; }
html.dark .hover\:border-slate-300:hover,
.dark .hover\:border-slate-300:hover { border-color: #475569 !important; }
html.dark .hover\:border-slate-400:hover,
.dark .hover\:border-slate-400:hover { border-color: #64748b !important; }
/* Checked state labels */
html.dark .has-\[\:checked\]\:bg-primary-50:has(:checked),
.dark .has-\[\:checked\]\:bg-primary-50:has(:checked) {
background-color: rgba(14, 165, 233, 0.15) !important;
}
html.dark .has-\[\:checked\]\:border-primary-500:has(:checked),
.dark .has-\[\:checked\]\:border-primary-500:has(:checked) {
border-color: #0284c7 !important;
}
/* Table stripes */
html.dark .odd\:bg-gray-50:nth-child(odd),
.dark .odd\:bg-gray-50:nth-child(odd) { background-color: rgba(30, 41, 59, 0.5) !important; }
html.dark .even\:bg-gray-50:nth-child(even),
.dark .even\:bg-gray-50:nth-child(even) { background-color: rgba(30, 41, 59, 0.5) !important; }
/* Form inputs */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.dark select,
html.dark textarea,
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.dark select,
.dark textarea {
background-color: #0f172a;
color: #f1f5f9;
border-color: #475569;
}
html.dark input::placeholder,
html.dark textarea::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
color: #64748b;
}
html.dark select option,
.dark select option {
background-color: #1e293b;
color: #f1f5f9;
}
/* Gradients (error pages & similar) */
html.dark body.bg-gradient-to-br,
.dark body.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a) !important;
}
/* Light gradient cards → dark tinted (transactions, transfers, selectors) */
html.dark .bg-gradient-to-br[class*="from-slate-50"],
html.dark .bg-gradient-to-br[class*="from-slate-100"],
html.dark .bg-gradient-to-br[class*="to-slate-50"],
html.dark .bg-gradient-to-br[class*="to-slate-100"],
.dark .bg-gradient-to-br[class*="from-slate-50"],
.dark .bg-gradient-to-br[class*="from-slate-100"],
.dark .bg-gradient-to-br[class*="to-slate-50"],
.dark .bg-gradient-to-br[class*="to-slate-100"] {
background-image: linear-gradient(to bottom right, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.75)) !important;
}
html.dark .bg-gradient-to-br[class*="from-rose-50"],
html.dark .bg-gradient-to-br[class*="to-white"][class*="from-rose"],
.dark .bg-gradient-to-br[class*="from-rose-50"],
.dark .bg-gradient-to-br[class*="to-white"][class*="from-rose"] {
background-image: linear-gradient(to bottom right, rgba(244, 63, 94, 0.14), rgba(30, 41, 59, 0.95)) !important;
}
html.dark .bg-gradient-to-br[class*="from-emerald-50"],
.dark .bg-gradient-to-br[class*="from-emerald-50"] {
background-image: linear-gradient(to bottom right, rgba(16, 185, 129, 0.14), rgba(30, 41, 59, 0.95)) !important;
}
html.dark .bg-gradient-to-br[class*="from-indigo-50"],
.dark .bg-gradient-to-br[class*="from-indigo-50"] {
background-image: linear-gradient(to bottom right, rgba(99, 102, 241, 0.14), rgba(30, 41, 59, 0.95)) !important;
}
html.dark .bg-gradient-to-br[class*="from-amber-50"],
.dark .bg-gradient-to-br[class*="from-amber-50"] {
background-image: linear-gradient(to bottom right, rgba(245, 158, 11, 0.14), rgba(30, 41, 59, 0.95)) !important;
}
html.dark .bg-gradient-to-br[class*="to-white"]:not([class*="from-rose"]):not([class*="from-emerald"]):not([class*="from-indigo"]):not([class*="from-amber"]):not([class*="from-slate"]),
.dark .bg-gradient-to-br[class*="to-white"]:not([class*="from-rose"]):not([class*="from-emerald"]):not([class*="from-indigo"]):not([class*="from-amber"]):not([class*="from-slate"]) {
background-image: linear-gradient(to bottom right, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.7)) !important;
}
/* Calculator buttons */
html.dark .number-btn,
.dark .number-btn {
background: #334155 !important;
color: #f1f5f9 !important;
border-color: #475569 !important;
}
html.dark .number-btn:hover,
.dark .number-btn:hover {
background: #475569 !important;
}
html.dark .function-btn,
.dark .function-btn {
background: #1e293b !important;
color: #cbd5e1 !important;
}
html.dark .function-btn:hover,
.dark .function-btn:hover {
background: #334155 !important;
}
html.dark .dashboard-calc-btn.number-btn,
.dark .dashboard-calc-btn.number-btn {
background: #334155 !important;
color: #f1f5f9 !important;
border-color: #475569 !important;
}
html.dark .dashboard-calc-btn.function-btn,
.dark .dashboard-calc-btn.function-btn {
background: #1e293b !important;
color: #cbd5e1 !important;
border-color: #475569 !important;
}
/* Toastify */
html.dark .toastify .toastify-content,
.dark .toastify .toastify-content {
background: #1e293b !important;
border-color: #334155 !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}
/* SweetAlert2 */
html.dark .swal2-popup,
.dark .swal2-popup {
background: #1e293b !important;
color: #f1f5f9 !important;
}
html.dark .swal2-title,
.dark .swal2-title { color: #f1f5f9 !important; }
html.dark .swal2-html-container,
.dark .swal2-html-container { color: #cbd5e1 !important; }
html.dark .swal2-input,
.dark .swal2-input {
background: #0f172a !important;
color: #f1f5f9 !important;
border-color: #475569 !important;
}
/* Dark mode toggle icons */
html.dark .dark-mode-icon-moon,
.dark .dark-mode-icon-moon { display: none !important; }
html.dark .dark-mode-icon-sun,
.dark .dark-mode-icon-sun { display: inline-block !important; }
.dark-mode-icon-sun { display: none !important; }
/* Landing nav scrolled */
html.dark #landing-nav.nav-scrolled,
.dark #landing-nav.nav-scrolled {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}
/* Auth register (app.css variables) */
html.dark {
--background: #0f172a;
--card-bg: #1e293b;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--border: #334155;
}
/* PDF access forms (custom CSS pages) */
html.dark body:has(.card),
.dark body:has(.card) {
background: #0f172a !important;
}
html.dark .card,
.dark .card {
background: #1e293b !important;
border-color: #334155 !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}
html.dark .card .title,
html.dark .card h1,
.dark .card .title,
.dark .card h1 { color: #f1f5f9 !important; }
html.dark .card .subtitle,
html.dark .card p,
.dark .card .subtitle,
.dark .card p { color: #94a3b8 !important; }
html.dark .pin-wrap input,
.dark .pin-wrap input {
background: #0f172a !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
html.dark .pin-wrap input.filled,
.dark .pin-wrap input.filled {
background: #1e293b !important;
border-color: #64748b !important;
}
html.dark .card .error,
.dark .card .error {
background: rgba(239, 68, 68, 0.15) !important;
border-color: rgba(239, 68, 68, 0.3) !important;
color: #fca5a5 !important;
}
/* Selection */
html.dark ::selection,
.dark ::selection {
background-color: rgba(14, 165, 233, 0.35);
color: #f1f5f9;
}
/* Shadow cards — softer in dark */
html.dark .shadow-card,
.dark .shadow-card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.15) !important;
}
/* Nav inactive links in dark */
html.dark nav a:not(.nav-link-active):not(.nav-link-active-mobile),
.dark nav a:not(.nav-link-active):not(.nav-link-active-mobile) {
color: #94a3b8;
}
/* Opacity sections stay readable */
html.dark .opacity-60,
.dark .opacity-60 { opacity: 0.7 !important; }
/* Ring offset for dark backgrounds */
html.dark .focus\:ring-offset-2:focus,
.dark .focus\:ring-offset-2:focus {
--tw-ring-offset-color: #0f172a;
}
/* Pagination active page */
html.dark .border-slate-900.bg-slate-900,
.dark .border-slate-900.bg-slate-900 {
background-color: #0284c7 !important;
border-color: #0284c7 !important;
}