/* =========================================================
   Select2 ←→ SmartAdmin form-control (light & dark)
   Native checkbox options (no hover/active highlight)
   ========================================================= */

/* ---- Theme variables (inherit from Bootstrap/SmartAdmin if present) ---- */
:root {
    --s2-bg: var(--bs-body-bg, #fff);
    --s2-fg: var(--bs-body-color, #212529);
    --s2-border: var(--bs-border-color, #ced4da);
    --s2-radius: var(--bs-border-radius, .375rem);
    --s2-muted: var(--bs-secondary-color, #6c757d);
    --s2-primary: var(--bs-primary, #0d6efd);
    --s2-focus-ring: var(--bs-focus-ring-color, rgba(13,110,253,.25));
    --s2-dropdown-bg: var(--bs-body-bg, #fff);
    --s2-dropdown-border: var(--bs-border-color, #ced4da);
    --s2-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

@media (prefers-color-scheme: dark) {
    :root {
        --s2-bg: var(--bs-body-bg, #141a21);
        --s2-fg: var(--bs-body-color, #e9ecef);
        --s2-border: var(--bs-border-color, #334155);
        --s2-dropdown-bg: var(--bs-body-bg, #141a21);
        --s2-dropdown-border: var(--bs-border-color, #334155);
        --s2-shadow: 0 .5rem 1rem rgba(0,0,0,.6);
    }
}
/* If your app toggles a dark class/attr, keep these: */
[data-theme="dark"], .theme-dark, body.dark {
    --s2-bg: var(--bs-body-bg, #141a21);
    --s2-fg: var(--bs-body-color, #e9ecef);
    --s2-border: var(--bs-border-color, #334155);
    --s2-dropdown-bg: var(--bs-body-bg, #141a21);
    --s2-dropdown-border: var(--bs-border-color, #334155);
    --s2-shadow: 0 .5rem 1rem rgba(0,0,0,.6);
}

/* ---- Container width to match inputs ---- */
.select2-container {
    width: auto !important;
    min-width: auto;
}

.select2-container--open .select2-dropdown {
    width: auto !important;
    min-width: auto;
    height: auto !important;
}

.s2-option { white-space: nowrap; }

.select2-container--default .select2-results > .select2-results__options {
    max-height: unset !important;
}

/* ---- Selection (single & multiple) styled like .form-control ---- */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    background-color: var(--s2-bg);
    color: var(--s2-fg);
    border: 1px solid var(--s2-border);
    border-radius: var(--s2-radius);
    min-height: calc(1.5em + .75rem + 2px);
    display: flex;
    align-items: center;
    padding: .25rem .5rem;
}

/* Placeholder color like .form-control */
.select2-selection__placeholder {
    color: var(--s2-muted) !important;
}

/* Hide chips; use summary text (your wrapper) */
.select2-selection--multiple .select2-selection__choice {
    display: none !important;
}

.select2-selection--multiple .select2-selection__rendered {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    margin: 0;
    color: var(--s2-fg);
}

/* Single select text */
.select2-selection--single .select2-selection__rendered {
    color: var(--s2-fg);
    line-height: 1.5;
    padding-left: 0;
}

/* Arrow tint */
.select2-selection__arrow b {
    border-color: var(--s2-fg) transparent transparent transparent !important;
}

/* Focus ring like .form-control:focus */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    outline: 0;
    border-color: var(--s2-primary);
    box-shadow: 0 0 0 .25rem var(--s2-focus-ring);
}

/* Disabled */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    opacity: .7;
}

/* ---- Dropdown panel ---- */
.select2-dropdown {
    background: var(--s2-dropdown-bg);
    color: var(--s2-fg);
    border: 1px solid var(--s2-dropdown-border);
    border-radius: var(--s2-radius);
    box-shadow: var(--s2-shadow);
    margin-top: .25rem; /* spacing like dropdown-menu */
    font-size: .875rem;
    z-index: 1051;
}

/* Results list */
.select2-results__options {
    max-height: 15rem;
    overflow-y: auto;
    padding: .25rem 0;
}

/* ---- Native checkbox row (no hover/highlight) ---- */
.select2-results__option {
    /* No hover/active highlight */
    background: transparent !important;
    color: var(--s2-fg);
    cursor: default;
    padding: .25rem .75rem;
}

/* Label wraps the checkbox + text */
.s2-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 1.25;
    user-select: none;
}

    /* Real checkbox, uses theme primary via accent-color */
    .s2-option .s2-checkbox {
        margin: 0;
        width: 1rem;
        height: 1rem;
    }

/* Remove Select2's default highlighted state */
.select2-results__option--highlighted[aria-selected] {
    background: transparent !important;
    color: var(--s2-fg) !important;
}

/* Selected option should not invert colors; rely on the checkbox state */
.select2-container--default .select2-results__option[aria-selected=true] {
    background: transparent !important;
    color: var(--s2-fg) !important;
}

/* ---- Optional: group headers ---- */
.select2-results__group {
    padding: .25rem .75rem;
    font-weight: 600;
    color: var(--s2-muted);
    border-top: 1px solid var(--s2-dropdown-border);
    margin-top: .25rem;
}

/* ---- Small size alignment (if using .form-control-sm) ---- */
.form-control-sm + .select2 .select2-selection--single,
.form-control-sm + .select2 .select2-selection--multiple {
    min-height: calc(1.5em + .5rem + 2px);
    padding: .125rem .5rem;
    font-size: .875rem;
}