/* ===================================================== DARK MODE — Global overrides Activated when has class="dark" ===================================================== */ /* Card */ html.dark .card { background-color: #1f2937 !important; border-color: #374151 !important; color: #e5e7eb !important; } html.dark .card-header { background-color: #111827 !important; border-bottom-color: #374151 !important; color: #f3f4f6 !important; } html.dark .card-body { background-color: #1f2937 !important; color: #e5e7eb !important; } html.dark .card-footer { background-color: #111827 !important; border-top-color: #374151 !important; color: #d1d5db !important; } /* Tables */ html.dark .table { color: #e5e7eb !important; border-color: #374151 !important; --bs-table-bg: #1f2937 !important; --bs-table-striped-bg: rgba(55, 65, 81, 0.5) !important; --bs-table-hover-bg: rgba(75, 85, 99, 0.6) !important; } html.dark .table th, html.dark .table td { border-color: #374151 !important; color: #e5e7eb !important; } html.dark .table thead { border-color: #374151 !important; } html.dark .table thead th:not([style]) { background-color: #111827 !important; color: #f3f4f6 !important; border-color: #374151 !important; } html.dark .table-striped > tbody > tr:nth-of-type(odd) > *:not([style]) { background-color: rgba(55, 65, 81, 0.5) !important; color: #e5e7eb !important; } html.dark .table-hover > tbody > tr:hover > *:not([style]) { background-color: rgba(75, 85, 99, 0.6) !important; color: #f3f4f6 !important; } /* Form controls */ html.dark .form-control { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark .form-control:focus { background-color: #374151 !important; border-color: #6b7280 !important; color: #f3f4f6 !important; box-shadow: 0 0 0 0.25rem rgba(107, 114, 128, 0.25) !important; } html.dark .form-control::placeholder { color: #9ca3af !important; } html.dark .form-select { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark .form-check-label { color: #d1d5db !important; } /* Buttons */ html.dark .btn-outline-primary { color: #93c5fd !important; border-color: #93c5fd !important; } html.dark .btn-outline-primary:hover { background-color: #3b82f6 !important; color: #fff !important; } html.dark .btn-outline-danger { color: #fca5a5 !important; border-color: #fca5a5 !important; } html.dark .btn-outline-danger:hover { background-color: #ef4444 !important; color: #fff !important; } html.dark .btn-outline-secondary { color: #d1d5db !important; border-color: #6b7280 !important; } html.dark .btn-outline-secondary:hover { background-color: #4b5563 !important; color: #fff !important; } html.dark .btn-sm.btn-info { background-color: #0e7490 !important; border-color: #0e7490 !important; } html.dark .btn-sm.btn-warning { background-color: #b45309 !important; border-color: #b45309 !important; } html.dark .btn-sm.btn-success { background-color: #065f46 !important; border-color: #065f46 !important; } /* Spinner */ html.dark .spinner-border { color: #60a5fa !important; } /* Alerts */ html.dark .alert-warning { background-color: #78350f !important; border-color: #92400e !important; color: #fde68a !important; } html.dark .alert-danger { background-color: #7f1d1d !important; border-color: #991b1b !important; color: #fecaca !important; } html.dark .alert-info { background-color: #164e63 !important; border-color: #155e75 !important; color: #a5f3fc !important; } /* Modals */ html.dark .modal-content { background-color: #1f2937 !important; border-color: #374151 !important; color: #e5e7eb !important; } html.dark .modal-header { background-color: #111827 !important; border-bottom-color: #374151 !important; color: #f3f4f6 !important; } html.dark .modal-footer { background-color: #111827 !important; border-top-color: #374151 !important; } /* Input groups */ html.dark .input-group-text { background-color: #374151 !important; border-color: #4b5563 !important; color: #d1d5db !important; } /* Nav / tabs */ html.dark .nav-tabs { border-bottom-color: #374151 !important; } html.dark .nav-tabs .nav-link { color: #9ca3af !important; } html.dark .nav-tabs .nav-link:hover { color: #e5e7eb !important; border-color: #4b5563 !important; } html.dark .nav-tabs .nav-link.active { background-color: #1f2937 !important; border-color: #374151 #374151 #1f2937 !important; color: #f3f4f6 !important; } /* List groups */ html.dark .list-group-item { background-color: #1f2937 !important; border-color: #374151 !important; color: #e5e7eb !important; } html.dark .list-group-item-action:hover { background-color: #374151 !important; color: #f3f4f6 !important; } /* Border utility */ html.dark .border { border-color: #374151 !important; } /* Labels and text */ html.dark label { color: #d1d5db; } /* Generic container with border */ html.dark .col-span-1.border { border-color: #374151 !important; } /* Bootstrap badge */ html.dark .badge.bg-secondary { background-color: #4b5563 !important; } /* Blazorise DataGrid overrides */ html.dark .b-table { background-color: #1f2937 !important; color: #e5e7eb !important; border-color: #374151 !important; } html.dark .b-table th, html.dark .b-table td { background-color: inherit !important; color: #e5e7eb !important; border-color: #374151 !important; } html.dark .b-table thead th { background-color: #111827 !important; color: #f3f4f6 !important; } html.dark .b-table tbody tr:hover td { background-color: rgba(75, 85, 99, 0.5) !important; } html.dark .pagination .page-link { background-color: #374151 !important; border-color: #4b5563 !important; color: #d1d5db !important; } html.dark .pagination .page-link:hover { background-color: #4b5563 !important; color: #f3f4f6 !important; } html.dark .pagination .page-item.active .page-link { background-color: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; } /* ===================================================== Global Tailwind utility class overrides for dark mode These cover components that use Tailwind without dark: prefixes ===================================================== */ /* Background overrides */ html.dark [class~="bg-white"] { background-color: #1f2937 !important; } html.dark [class~="bg-gray-50"] { background-color: #111827 !important; } html.dark [class~="bg-gray-100"] { background-color: #1f2937 !important; } html.dark [class~="bg-gray-200"] { background-color: #374151 !important; } html.dark [class~="bg-indigo-50"] { background-color: #1e1b4b !important; } html.dark [class~="bg-blue-50"] { background-color: #172554 !important; } html.dark [class~="bg-blue-100"] { background-color: #1e3a5f !important; } html.dark [class~="bg-yellow-50"] { background-color: #451a03 !important; } html.dark [class~="bg-orange-50"] { background-color: #431407 !important; } html.dark [class~="bg-red-50"] { background-color: #450a0a !important; } html.dark [class~="bg-green-50"] { background-color: #052e16 !important; } /* Text color overrides */ html.dark [class~="text-gray-900"] { color: #f3f4f6 !important; } html.dark [class~="text-gray-800"] { color: #e5e7eb !important; } html.dark [class~="text-gray-700"] { color: #d1d5db !important; } html.dark [class~="text-gray-600"] { color: #9ca3af !important; } html.dark [class~="text-gray-500"] { color: #9ca3af !important; } html.dark [class~="text-gray-400"] { color: #6b7280 !important; } /* Colored text adjustments for dark backgrounds */ html.dark [class~="text-blue-900"] { color: #93c5fd !important; } html.dark [class~="text-blue-800"] { color: #93c5fd !important; } html.dark [class~="text-green-900"] { color: #6ee7b7 !important; } html.dark [class~="text-green-800"] { color: #6ee7b7 !important; } html.dark [class~="text-red-900"] { color: #fca5a5 !important; } html.dark [class~="text-red-800"] { color: #fca5a5 !important; } html.dark [class~="text-yellow-800"] { color: #fde68a !important; } html.dark [class~="text-yellow-700"] { color: #fde68a !important; } /* Border overrides */ html.dark [class~="border-gray-200"] { border-color: #374151 !important; } html.dark [class~="border-gray-300"] { border-color: #374151 !important; } html.dark [class~="border-blue-200"] { border-color: #1e3a5f !important; } html.dark [class~="border-green-200"] { border-color: #14532d !important; } html.dark [class~="border-red-200"] { border-color: #7f1d1d !important; } html.dark [class~="border-yellow-200"] { border-color: #78350f !important; } /* Divide color overrides */ html.dark [class~="divide-gray-200"] > * + * { border-color: #374151 !important; } /* Hover state overrides — use lower specificity to allow explicit dark: variants to win */ html.dark [class~="hover:bg-white"]:hover { background-color: #374151 !important; } html.dark [class~="hover:bg-gray-50"]:hover { background-color: #374151 !important; } html.dark [class~="hover:bg-gray-100"]:hover { background-color: #374151 !important; } html.dark [class~="hover:bg-gray-200"]:hover { background-color: #4b5563 !important; } html.dark [class~="hover:bg-indigo-50"]:hover { background-color: #312e81 !important; } html.dark [class~="hover:bg-blue-50"]:hover { background-color: #1e3a5f !important; } html.dark [class~="hover:bg-blue-100"]:hover { background-color: #1e40af !important; } html.dark [class~="hover:bg-green-50"]:hover { background-color: #14532d !important; } html.dark [class~="hover:bg-green-100"]:hover { background-color: #166534 !important; } html.dark [class~="hover:bg-red-50"]:hover { background-color: #7f1d1d !important; } html.dark [class~="hover:bg-red-100"]:hover { background-color: #991b1b !important; } html.dark [class~="hover:bg-yellow-50"]:hover { background-color: #78350f !important; } html.dark [class~="hover:bg-yellow-100"]:hover { background-color: #92400e !important; } html.dark [class~="hover:bg-orange-50"]:hover { background-color: #7c2d12 !important; } html.dark [class~="hover:bg-orange-100"]:hover { background-color: #9a3412 !important; } /* Input / textarea with Tailwind classes */ html.dark input[class~="border-gray-300"], html.dark input[class~="border-gray-200"], html.dark textarea[class~="border-gray-300"] { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark select[class~="border-gray-300"], html.dark select[class~="border-gray-200"] { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } /* Shadow/ring class containers */ html.dark [class~="shadow-sm"] { box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; } /* Flatpickr — global dark mode overrides */ html.dark .flatpickr-calendar { background: #1f2937 !important; border-color: #374151 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; color: #e5e7eb !important; } html.dark .flatpickr-months { background: #111827 !important; } html.dark .flatpickr-month { color: #f3f4f6 !important; fill: #f3f4f6 !important; } html.dark .flatpickr-prev-month svg, html.dark .flatpickr-next-month svg { fill: #9ca3af !important; } html.dark .flatpickr-weekdays { background: #111827 !important; } html.dark .flatpickr-weekday { color: #9ca3af !important; } html.dark .flatpickr-day { color: #e5e7eb !important; border-color: transparent; } html.dark .flatpickr-day:hover, html.dark .flatpickr-day:focus { background: #374151 !important; border-color: #4b5563 !important; } html.dark .flatpickr-day.selected, html.dark .flatpickr-day.startRange, html.dark .flatpickr-day.endRange { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; } html.dark .flatpickr-day.today { border-color: #6b7280 !important; } html.dark .flatpickr-day.flatpickr-disabled { color: #4b5563 !important; } html.dark .flatpickr-current-month input.cur-year { color: #f3f4f6 !important; background: transparent !important; } html.dark .flatpickr-current-month .flatpickr-monthDropdown-months { background: #1f2937 !important; color: #f3f4f6 !important; } html.dark .numInputWrapper:hover { background: #374151 !important; } html.dark .numInputWrapper span { border-color: #4b5563 !important; } /* Generic table text — covers tables that don't use Bootstrap .table class */ html.dark table { color: #e5e7eb; background-color: #1f2937; } html.dark table th { color: #f3f4f6; background-color: #111827; border-color: #374151; } html.dark table td { color: #e5e7eb; border-color: #374151; } /* Generic select/input elements without specific border-gray classes */ html.dark select { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark select option { background-color: #374151; color: #e5e7eb; } html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #9ca3af !important; } /* ===================================================== Scrollbar styling ===================================================== */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: #1f2937; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; } html.dark ::-webkit-scrollbar-corner { background: #1f2937; } html.dark { scrollbar-color: #4b5563 #1f2937; scrollbar-width: thin; } /* ===================================================== highlight-error dark mode — light pink unreadable on dark ===================================================== */ html.dark .highlight-error { background-color: #7f1d1d !important; border-color: #b91c1c !important; color: #fecaca !important; } html.dark .highlight-error td { color: #fecaca !important; } /* bg-gray-300 override (tfoot totals rows etc.) */ html.dark [class~="bg-gray-300"] { background-color: #4b5563 !important; } /* form-input class (Tailwind forms) */ html.dark .form-input { background-color: #374151 !important; border-color: #4b5563 !important; color: #e5e7eb !important; } html.dark .form-input:focus { background-color: #374151 !important; border-color: #6b7280 !important; color: #f3f4f6 !important; }