/**
 * 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 {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   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);
}

/* Readonly/disabled form fields in dark mode */
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control.bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color);
    opacity: 1;
}

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

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

/* ==========================================================================
   Soft Indicators
   ========================================================================== */

[data-bs-theme="dark"] {
    --indicator-neutral-bg: rgba(148, 163, 184, 0.14);
    --indicator-neutral-text: #d5d9e0;
    --indicator-neutral-border: rgba(148, 163, 184, 0.28);

    --indicator-primary-bg: rgba(59, 130, 246, 0.18);
    --indicator-primary-text: #bfdbfe;
    --indicator-primary-border: rgba(96, 165, 250, 0.3);

    --indicator-info-bg: rgba(34, 211, 238, 0.16);
    --indicator-info-text: #a5f3fc;
    --indicator-info-border: rgba(34, 211, 238, 0.28);

    --indicator-success-bg: rgba(34, 197, 94, 0.16);
    --indicator-success-text: #bbf7d0;
    --indicator-success-border: rgba(74, 222, 128, 0.3);

    --indicator-warning-bg: rgba(245, 158, 11, 0.18);
    --indicator-warning-text: #fde68a;
    --indicator-warning-border: rgba(251, 191, 36, 0.3);

    --indicator-danger-bg: rgba(248, 113, 113, 0.16);
    --indicator-danger-text: #fecaca;
    --indicator-danger-border: rgba(248, 113, 113, 0.28);

    --indicator-dark-bg: rgba(100, 116, 139, 0.22);
    --indicator-dark-text: #e2e8f0;
    --indicator-dark-border: rgba(148, 163, 184, 0.28);
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   Checklist Completion Forms
   ========================================================================== */

/* Remove white background from collapsible completion forms in dark mode */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

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