/* Dark mode overrides — applied when is set */
html.dark body {
background-color: #111827;
color: #f3f4f6;
}
/* ── Backgrounds ── */
html.dark .bg-white { background-color: #1f2937 !important; }
html.dark .bg-gray-50 { background-color: #111827 !important; }
html.dark .bg-gray-100 { background-color: #374151 !important; }
html.dark .bg-gray-200 { background-color: #4b5563 !important; }
html.dark .bg-slate-50 { background-color: #1e293b !important; }
html.dark .bg-slate-100 { background-color: #1e293b !important; }
/* ── Nav ── */
html.dark nav {
background-color: #1f2937 !important;
border-color: #374151 !important;
}
html.dark nav a,
html.dark nav span { color: #e5e7eb; }
html.dark nav a:hover { color: #fca5a5; }
/* ── Text ── */
html.dark .text-gray-900 { color: #f9fafb !important; }
html.dark .text-gray-800 { color: #f3f4f6 !important; }
html.dark .text-gray-700 { color: #e5e7eb !important; }
html.dark .text-gray-600 { color: #d1d5db !important; }
html.dark .text-gray-500 { color: #9ca3af !important; }
html.dark .text-gray-400 { color: #6b7280 !important; }
html.dark .text-gray-300 { color: #4b5563 !important; }
/* ── Borders ── */
html.dark .border-gray-100 { border-color: #374151 !important; }
html.dark .border-gray-200 { border-color: #4b5563 !important; }
html.dark .border-gray-300 { border-color: #6b7280 !important; }
/* ── Inputs / Selects / Textareas ── */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.dark textarea,
html.dark select {
background-color: #374151 !important;
border-color: #4b5563 !important;
color: #f3f4f6 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
color: #6b7280 !important;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
border-color: #f87171 !important;
outline-color: #f87171;
}
/* ── Cards / Modals ── */
html.dark .rounded-3xl.bg-white,
html.dark .rounded-2xl.bg-white,
html.dark .rounded-xl.bg-white {
background-color: #1f2937 !important;
}
html.dark .shadow-xl,
html.dark .shadow-2xl,
html.dark .shadow-sm,
html.dark .shadow-lg,
html.dark .shadow-md {
box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}
/* ── Tables ── */
html.dark thead tr,
html.dark .bg-gray-50 { background-color: #1f2937 !important; }
html.dark tbody tr { border-color: #374151 !important; }
html.dark tbody tr:hover,
html.dark .hover\:bg-gray-50:hover { background-color: #374151 !important; }
/* ── Dropdown menus ── */
html.dark .group:hover .group-hover\:opacity-100 > div,
html.dark .group:hover div[class*="bg-white"] {
background-color: #1f2937 !important;
border-color: #374151 !important;
}
html.dark .hover\:bg-gray-50:hover { background-color: #374151 !important; }
html.dark .hover\:bg-red-50:hover { background-color: #450a0a !important; }
html.dark .bg-gray-50.px-4 { background-color: #111827 !important; }
/* ── Buttons (neutral) ── */
html.dark .bg-gray-100 { background-color: #374151 !important; color: #e5e7eb !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #374151 !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #4b5563 !important; }
html.dark .border-gray-200 { border-color: #4b5563 !important; }
/* ── Tags / Badges keep their colors ── */
/* ── Footer ── */
html.dark footer { background-color: #111827 !important; border-color: #1f2937 !important; }
/* ── Gradient hero backgrounds — keep them ── */
html.dark [class*="from-red-700"],
html.dark [class*="from-blue-800"] {
/* keep gradient as-is */
}
/* ── Dividers ── */
html.dark hr { border-color: #374151 !important; }
/* ── Focus ring ── */
html.dark *:focus { outline-color: #f87171; }
/* ── Scrollbar (Webkit) ── */
html.dark ::-webkit-scrollbar-track { background: #1f2937; }
html.dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; }