/* ============================================================ Dark Mode Overrides Applied when has class "dark" ============================================================ */ /* Body */ html.dark body { background-color: #111827 !important; color: #f9fafb !important; } /* 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: #1f2937 !important; } html.dark .bg-gray-200 { background-color: #374151 !important; } html.dark .bg-gray-800 { background-color: #0f172a !important; } html.dark .bg-gray-900 { background-color: #030712 !important; } /* Gradient body backgrounds */ html.dark .from-gray-50 { --tw-gradient-from: #111827 !important; } html.dark .to-green-50\/30 { --tw-gradient-to: #052e16 !important; } /* Text */ html.dark .text-gray-900 { color: #f9fafb !important; } html.dark .text-gray-800 { color: #f1f5f9 !important; } html.dark .text-gray-700 { color: #e2e8f0 !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-black { color: #f9fafb !important; } /* Borders */ html.dark .border-gray-100 { border-color: #1f2937 !important; } html.dark .border-gray-200 { border-color: #374151 !important; } html.dark .border-gray-300 { border-color: #4b5563 !important; } html.dark .divide-gray-200 > * + * { border-color: #374151 !important; } /* Shadows - darken on dark bg */ html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; } /* Form Inputs */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.dark textarea, html.dark select { background-color: #374151 !important; border-color: #4b5563 !important; color: #f9fafb !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #9ca3af !important; } /* Tables */ html.dark thead, html.dark thead th { background-color: #1f2937 !important; color: #f9fafb !important; } html.dark tbody tr { border-color: #374151; } html.dark tbody tr:hover { background-color: #1f2937 !important; } html.dark tbody tr:nth-child(even) { background-color: #1e293b !important; } html.dark td, html.dark th { border-color: #374151 !important; color: #e5e7eb; } /* Cards / Panels */ html.dark .rounded-xl, html.dark .rounded-2xl, html.dark .rounded-lg { border-color: #374151; } /* Hover states */ html.dark .hover\:bg-gray-100:hover { background-color: #374151 !important; } html.dark .hover\:bg-gray-50:hover { background-color: #1f2937 !important; } /* Scrollbar */ html.dark ::-webkit-scrollbar-track { background: #1f2937; } html.dark ::-webkit-scrollbar-thumb { background: #4b5563; } html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* Sticky headers keep bg */ html.dark header.sticky, html.dark header[class*="sticky"] { background-color: #1f2937 !important; } /* Sidebar */ html.dark aside, html.dark [class*="sidebar"] { background-color: #1f2937 !important; } /* Dropdown menus */ html.dark [class*="dropdown"], html.dark .absolute.bg-white { background-color: #1f2937 !important; border-color: #374151 !important; } /* Badges that are light */ html.dark .bg-green-50 { background-color: #052e16 !important; } html.dark .bg-blue-50 { background-color: #082f49 !important; } html.dark .bg-yellow-50 { background-color: #422006 !important; } html.dark .bg-red-50 { background-color: #450a0a !important; } html.dark .bg-orange-50 { background-color: #431407 !important; } html.dark .bg-purple-50 { background-color: #2e1065 !important; } /* Dark mode toggle button active state */ html.dark #themeToggleBtn { color: #fbbf24 !important; }