/**
 * Dark Mode Overrides for Bootstrap 5
 *
 * Bootstrap 5.3+ handles most dark mode styling via data-bs-theme="dark"
 * This file contains overrides for third-party components and custom styles
 */

/* ==========================================================================
   Select2 Dark Mode
   ========================================================================== */

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted {
    background-color: var(--bs-primary);
    color: #fff;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--selected {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ==========================================================================
   Form Controls with bg-white class override
   ========================================================================== */

[data-bs-theme="dark"] .form-control.bg-white,
[data-bs-theme="dark"] .form-select.bg-white {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .form-control.bg-white:focus,
[data-bs-theme="dark"] .form-select.bg-white:focus {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

[data-bs-theme="dark"] .form-control.bg-white::placeholder {
    color: var(--bs-secondary-color);
}

/* ==========================================================================
   Table Overrides
   ========================================================================== */

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    --bs-table-hover-bg: var(--bs-tertiary-bg);
}

/* ==========================================================================
   Navbar Overrides
   ========================================================================== */

[data-bs-theme="dark"] .navbar.bg-white {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .navbar.shadow-sm {
    box-shadow: none !important;
    border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .navbar-light {
    --bs-navbar-color: var(--bs-body-color);
    --bs-navbar-hover-color: var(--bs-emphasis-color);
    --bs-navbar-active-color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .navbar-light .navbar-brand {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .navbar-light .navbar-toggler-icon {
    filter: invert(1);
}

/* ==========================================================================
   Custom Overrides
   ========================================================================== */

/* Active nav link in dark mode */
[data-bs-theme="dark"] .navbar .nav-link.active {
    color: #ea868f !important; /* Lighter red for dark mode */
}

/* Breadcrumb */
[data-bs-theme="dark"] .breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
}

/* Cards */
[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-border-color: var(--bs-border-color);
}

/* Dropdown menus */
[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
}

/* Modal */
[data-bs-theme="dark"] .modal-content {
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color);
}

/* ==========================================================================
   Alerts Sidebar
   ========================================================================== */

[data-bs-theme="dark"] #alertsList .list-group-item-light {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* ==========================================================================
   Dark Mode Toggle Button
   ========================================================================== */

.theme-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--bs-body-color);
    font-size: 1.1rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.theme-toggle:hover {
    opacity: 1;
}

/* Show appropriate icon based on theme */
[data-bs-theme="light"] .theme-toggle .fa-sun {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle .fa-moon {
    display: none;
}