/* =========================================================
   Select2 -> Bootstrap .form-select (base)
   ========================================================= */

/* arrow alignment */
.select2-selection__arrow {
    height: 100%;
    right: 0.75rem;
}


/* =========================================================
   .form-select-sm
   ========================================================= */

.form-select-sm + .select2-container
.select2-selection--single {
    --s2-height: 31px;
    --s2-font-size: 0.875rem;
    --s2-padding-y: 0.25rem;
    --s2-padding-x-left: 0;
    --s2-padding-x-right: 2rem;
    border-radius: 0.25rem;
}


/* =========================================================
   .form-select-lg
   ========================================================= */

.form-select-lg + .select2-container
.select2-selection--single {
    --s2-height: 48px;
    --s2-font-size: 1.25rem;
    --s2-padding-y: 0.5rem;
    --s2-padding-x-left: 0.5rem;
    --s2-padding-x-right: 2.75rem;
    border-radius: 0.5rem;
}


/* =========================================================
   Select2 dropdown (base)
   ========================================================= */

.select2-dropdown {
    font-size: 1rem; /* matches .form-select */
    line-height: 1.5;
    padding-bottom: .25rem;
}

.select2-results__option {
    padding: 0.25rem 0.75rem;
}


/* =========================================================
   Select2 dropdown - SM
   (applied via dropdownCssClass)
   ========================================================= */

.select2-dropdown-sm {
    font-size: 0.875rem;
}

    .select2-dropdown-sm .select2-results__option {
        padding: 0.225rem 0.5rem;
    }


/* =========================================================
   Select2 dropdown - LG
   (applied via dropdownCssClass)
   ========================================================= */

.select2-dropdown-lg {
    font-size: 1.25rem;
}

    .select2-dropdown-lg .select2-results__option {
        padding: 0.275rem 1rem;
    }


/* =========================================================
   Select2 chevron (auto vertical align)
   ========================================================= */

/* remove default Select2 arrow */
.select2-selection__arrow b {
    display: none;
}

/* arrow container */
.select2-selection__arrow {
    position: absolute;
    inset-block: 0; /* top + bottom = auto height */
    right: 0.75rem !important; /* preserve your tuned position */
    width: 1.25rem;
    pointer-events: none;
    display: flex;
    align-items: center; /* TRUE vertical centering */
    justify-content: center;
}

    /* chevron */
    .select2-selection__arrow::before {
        content: "";
        width: .5em; /* scale with font-size */
        height: .5em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        opacity: .8;
        transition: transform .15s ease;
    }

/* open state */
.select2-container--open
.select2-selection__arrow::before {
    transform: rotate(-135deg);
}

/* ---------------------------------------------------------
   Size inheritance (NO fixed positioning)
   --------------------------------------------------------- */

/* SM */
.form-select-sm + .select2-container
.select2-selection__arrow {
    font-size: .85rem;
}

/* LG */
.form-select-lg + .select2-container
.select2-selection__arrow {
    font-size: 1.15rem;
}


/* =========================================================
   Select2 search input (dropdown)
   ========================================================= */

/* base */
.select2-search--dropdown .select2-search__field {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
}

/* SM */
.select2-dropdown-sm
.select2-search--dropdown .select2-search__field {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* LG */
.select2-dropdown-lg
.select2-search--dropdown .select2-search__field {
    padding-left: .5rem;
    padding-right: .5rem;
}


/* =========================================================
   Select2 Light/Dark Theme
   ========================================================= */

.select2-container {
    --select2-border-color: var(--bs-primary-rgb);
    --select2-option-hilight-bg: var(--bs-link-color-rgb);
    min-width: 0;
}

.select2-container--default
.select2-selection {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    outline: none;
    border-color: var(--bs-border-color);
    transition: border-color .18s ease;
    /*transition: border-color .18s ease, background-color .15s ease;*/
}

/* =========================================================
   Select2 -> Bootstrap .form-select (Unified sizing)
   ========================================================= */

.select2-container--default
.select2-selection--single {
    /* 🔑 Core size tokens */
    --s2-height: 38px;
    --s2-font-size: 1rem;
    --s2-padding-y: 0.375rem;
    --s2-padding-x-left: 0.25rem;
    --s2-padding-x-right: 2.25rem;
    display: flex;
    align-items: center;
    height: var(--s2-height);
    padding: var(--s2-padding-y) var(--s2-padding-x-right) var(--s2-padding-y) var(--s2-padding-x-left);
    font-size: var(--s2-font-size);
    font-weight: 400;
    line-height: 1.5;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* rendered text */
.select2-selection__rendered {
    padding: 0;
    line-height: inherit;
}

.select2-container--default
.select2-selection__rendered {
    color: inherit !important;
}

.select2-container--default
.select2-selection:hover {
    border-color: var(--bs-border-color-translucent) !important;
}

html:not(.select2-focus-suppressed)
.select2-container--default .select2-selection:active,
html:not(.select2-focus-suppressed)
.select2-container--default .select2-selection:focus-within,
html:not(.select2-focus-suppressed)
.select2-container--default .select2-selection:focus,
html:not(.select2-focus-suppressed)
.select2-container--default.select2-container--open .select2-selection {
    border-color: rgba(var(--select2-border-color), .45) !important;
    box-shadow: 0 0 3px 1px rgba(var(--select2-border-color), .25);
}

.select2-container--default .select2-dropdown {
    box-shadow: 0 3px 5px 1px rgba(var(--bs-secondary-rgb), .25);
    border-color: rgba(var(--select2-border-color), .45);
    transition: border-color .18s ease;
}

/* =========================================================
   Select2 – unified scrollbar styling (single + multiple)
   ========================================================= */

/* Firefox */
.select2-selection,
.select2-results__options {
    scrollbar-width: auto;
    scrollbar-color: rgba(var(--bs-tertiary-color-rgb), .35) transparent;
}

    /* Chromium / WebKit */
    .select2-selection::-webkit-scrollbar-track,
    .select2-results__options::-webkit-scrollbar-track {
        margin-block: .375rem;
    }

    .select2-selection::-webkit-scrollbar-thumb,
    .select2-results__options::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: rgba(var(--bs-tertiary-color-rgb), .35);
    }

/* How to fix display 5 items in dropdown: assumes ~2.0rem per item */
/*.select2-results__options { max-height: calc(2rem * 5); overflow-y: auto; }*/

.select2-container--default .select2-search--dropdown .select2-search__field {
    outline: 2px solid rgba(var(--select2-border-color), .5);
    border-color: rgba(var(--select2-border-color), .35);
    border-radius: var(--bs-border-radius-sm);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(var(--bs-link-color-rgb), .35);
}

    .select2-container--default .select2-results__option[aria-selected="true"]:active {
        background-color: rgba(var(--bs-link-color-rgb), .85) !important;
    }

.select2-results__option {
    transition: background-color .13s ease;
}

.select2-results__option--selected {
    background-color: rgba(var(--select2-option-hilight-bg), .5) !important;
    color: #fff;
}

    .select2-results__option--selected:hover {
        background-color: rgba(var(--select2-option-hilight-bg), .75) !important;
        color: #fff;
    }

[data-bs-theme=dark] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(var(--bs-link-color-rgb), .15);
}

    [data-bs-theme=dark] .select2-container--default .select2-results__option[aria-selected="true"]:active {
        background-color: rgba(var(--bs-link-color-rgb), .5) !important;
    }

[data-bs-theme=dark] .select2-results__option--selected {
    background-color: rgba(var(--select2-option-hilight-bg), .25) !important;
    color: #fff;
}

    [data-bs-theme=dark] .select2-results__option--selected:hover {
        background-color: rgba(var(--select2-option-hilight-bg), .35) !important;
        color: #fff;
    }

[data-bs-theme=dark] .select2-container--default .select2-search__field {
    background-color: var(--bs-tertiary-bg) !important;
}

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


/* =========================================================
   Select2 :: x-clear button in search__field
   ========================================================= */

/* host container */
.select2-container--default .select2-search {
    position: relative;
}

    /* clear (×) button */
    .select2-container--default .select2-search::after {
        content: "×";
        position: absolute;
        right: .5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 1.25rem;
        line-height: 1.0;
        text-align: center;
        font-size: 1.25rem;
        border-radius: 50%;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity .12s ease;
        color: var(--bs-secondary-color);
    }

    /* visible only when text exists */
    .select2-container--default
    .select2-search[data-has-text="1"]::after {
        opacity: .85;
        pointer-events: auto;
    }

        /* hover affordance */
        .select2-container--default
        .select2-search[data-has-text="1"]::after:hover {
            background: var(--bs-tertiary-bg);
        }


/* =========================================================
   Select2 :: FORM-FLOATING with Label
   ========================================================= */

/* form-floating host */
.form-floating > .select2-container {
    width: 100%;
}

/* force Select2 to behave like .form-select */
.form-floating
.select2-container--default
.select2-selection--single {
    height: calc(3.5rem + 2px);
    padding: 1.625rem .75rem .375rem .75rem;
}

/* label base */
.form-floating > label {
    pointer-events: none;
    transition: transform .12s ease, opacity .12s ease;
}

/* floated label (value OR open) */
.form-floating[data-has-value="1"] > label,
.form-floating[data-open="1"] > label {
    transform: scale(.85) translateY(-.75rem) translateX(.15rem);
    opacity: .95;
}

/* placeholder text should NOT look like a value */
.select2-selection__placeholder {
    opacity: .75;
}


/* =========================================================
   Select2 :: INPUT-GROUP with Label-select2-button
   ========================================================= */

.input-group > .select2-container {
    position: relative;
    flex: 1 1 auto;
    width: auto !important;
}

.input-group
.select2-container--default
.select2-selection--single {
    height: 100%;
    border-radius: 0;
}

/* middle element */
.input-group
.select2-container--default
.select2-selection--single {
    border-left-width: 1px;
    border-right-width: 1px;
}

/* FIRST — FIXED CORRECTLY */
.input-group > .select2-container:nth-child(2)
.select2-selection--single {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
    border-left-width: 1px;
}

/* last */
.input-group > .select2-container:last-child
.select2-selection--single {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    border-right-width: 1px;
}

.input-group
.select2-container--open,
.input-group
.select2-container--focus {
    z-index: 10;
}

/* Ensure dropdown above modal */
.select2-container--open {
    z-index: 1060; /* Bootstrap modal = 1055 */
}