/* Custom Bootstrap 5 Dark Mode variables override */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* Combines your global targets and forces the dropdown background */
html[data-bs-theme="dark"] .select2-dropdown,
body[data-bs-theme="dark"] .select2-dropdown,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

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

/* FIXED: Corrected the xmlns URL so the arrow renders properly */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://w3.org' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Normal unselected list options text color */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--bs-body-color);
}

/* FIXED: Added !important here to ensure hovered/selected options have readable white text */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option[aria-selected=true],
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}