/* * Dark Mode Overrides * This file contains custom overrides for the dark mode theme. * It is loaded after custom.css and app.min.css. * The theme is activated by adding data-bs-theme="dark" to the tag. */ /* Text colors */ [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6, [data-bs-theme="dark"] .text-dark { color: #f6f6f6 !important; } /* Global Border Variables Override */ [data-bs-theme="dark"] { --bs-border-color: #2b3040; --bs-border-color-translucent: #2e3548; } /* Explicit Border Class Overrides */ [data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-end, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .table-bordered, [data-bs-theme="dark"] .table-bordered > :not(caption) > * { border-color: #383d4c !important; } /* Table Specifics */ [data-bs-theme="dark"] .table-light { --bs-table-border-color: #2b3040; } [data-bs-theme="dark"] .table-dark { --bs-table-border-color: #2e3548; } /* Login Page Overrides */ [data-bs-theme="dark"] .bg-blue-login { background-color: #32394e !important; } [data-bs-theme="dark"] .btn-blue-login { background-color: #556ee6 !important; border-color: #556ee6 !important; color: #fff !important; } [data-bs-theme="dark"] .btn-blue-login:hover { background-color: #485ec4 !important; border-color: #485ec4 !important; } /* Components */ [data-bs-theme="dark"] .card { background-color: #2a3042; border-color: #2b3040; } /* Fix for explicit white borders */ [data-bs-theme="dark"] .border-white { border-color: #2b3040 !important; } /* Form & Button Visibility Fixes */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .form-check-input { border-color: #50586f; } [data-bs-theme="dark"] .btn-outline-secondary { color: #a6b0cf; } /* Select2 Dark Mode overrides */ [data-bs-theme="dark"] .select2-container--default .select2-selection--single, [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple, [data-bs-theme="dark"] .select2-container .select2-selection--multiple { background-color: #2e3446; border-color: #50586d !important; color: #e9ecef; } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: #e9ecef; } [data-bs-theme="dark"] .select2-dropdown { background-color: #2e3446; border-color: #50586d; color: #e9ecef; } /* Hover/Highlight state for options */ [data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #50586d; color: #fff; } /* Selected option state */ [data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background-color: #3b4257; } [data-bs-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: #2e3446; border-color: #50586d; color: #e9ecef; } /* Optgroup styling (MACRO) */ [data-bs-theme="dark"] .select2-results__group { background-color: #222736; color: #a6b0cf; font-weight: bold; padding: 6px; border-bottom: 1px solid #32394e; } /* Date Input specific for dark mode */ [data-bs-theme="dark"] input[type="date"] { background-color: #2e3446; border-color: #50586d; color: #e9ecef; color-scheme: dark; } [data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.8; cursor: pointer; background-image: url('data:image/svg+xml;utf8,'); }