/*
 * select2-dark-mode.css
 * Fixes Select2 to adapt colors in Bootstrap dark mode.
 * Works with [data-bs-theme="dark"] and prefers-color-scheme: dark.
 * Drop this file after your existing Select2 CSS.
 *
 * Token conventions (matched to Bootstrap dark mode form controls):
 *   background  → --bs-secondary-bg
 *   border      → --bs-border-color-translucent
 *   text        → --bs-emphasis-color
 */

/* ─── Selection box (the visible "input") ─── */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color-translucent) !important;
    color: var(--bs-emphasis-color) !important;
}

    /* ─── Selected value text ─── */
    [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--bs-emphasis-color);
    }

    /* ─── Placeholder text ─── */
    [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
    [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
        color: var(--bs-secondary-color);
    }

    /* ─── Arrow icon ─── */
    [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: var(--bs-emphasis-color) transparent transparent transparent;
    }

[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--bs-emphasis-color) transparent;
}

/* ─── Custom arrow (injected span arrow) ─── */
[data-bs-theme="dark"] .select2-selection__arrow {
    border-top-color: var(--bs-emphasis-color) !important;
}

/* ─── Multiple: selected tags ─── */
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color-translucent);
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--bs-secondary-color);
    border-right-color: var(--bs-border-color-translucent);
}

    [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: var(--bs-emphasis-color);
        background-color: var(--bs-secondary-bg);
    }

/* ─── Dropdown container ─── */
[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color-translucent);
    color: var(--bs-emphasis-color);
}

/* ─── Search input inside dropdown ─── */
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color-translucent);
    color: var(--bs-emphasis-color);
    outline: none;
}

    [data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
        color: var(--bs-secondary-color);
    }

/* ─── Inline search (multiple mode) ─── */
[data-bs-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    color: var(--bs-emphasis-color);
}

/* ─── Dropdown options ─── */
[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-secondary-bg);
}

/* Highlighted (hover/keyboard focus) option */
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Already selected option */
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

/* ─── "No results" / "Searching…" messages ─── */
[data-bs-theme="dark"] .select2-container--default .select2-results__message,
[data-bs-theme="dark"] .select2-container--default .select2-results__option--disabled {
    color: var(--bs-secondary-color);
}

/* ─── Focus ring on the selection box ─── */
[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ─── Clear (×) button ─── */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--bs-secondary-color);
}

    [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear:hover {
        color: var(--bs-emphasis-color);
    }