/* =====================================================================
   Polished Select2 theme — unifies dropdown selects across the
   provider & admin dashboards (filters + forms) with the rest of the UI.
   Loaded AFTER select2.min.css so these rules win.
   ===================================================================== */
:root {
    --sel-primary: #6366f1;       /* indigo accent */
    --sel-primary-soft: #eef2ff;
    --sel-border: #e2e8f0;
    --sel-ink: #1e293b;
    --sel-muted: #94a3b8;
    --sel-radius: 10px;
    --sel-h: 44px;
}

/* ---- Single select box ---- */
.select2-container--default .select2-selection--single {
    height: var(--sel-h);
    border: 1px solid var(--sel-border);
    border-radius: var(--sel-radius);
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--sel-h) - 2px);
    color: var(--sel-ink);
    padding: 0;
    font-weight: 500;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--sel-muted);
    font-weight: 400;
}

/* ---- Caret: clean chevron, side-correct for LTR/RTL ---- */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none;
    margin: 0;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--sel-muted);
    border-bottom: 2px solid var(--sel-muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease, border-color .15s ease;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(-135deg) translateY(-2px);
    border-color: var(--sel-primary);
}
/* LTR caret on the right, RTL caret on the left */
html[dir="ltr"] .select2-container--default .select2-selection--single .select2-selection__arrow { right: 8px; left: auto; }
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow { left: 8px; right: auto; }
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered { text-align: right; }

/* ---- Focus / open state ---- */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:hover {
    border-color: var(--sel-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
    outline: none;
}

/* ---- Multiple select ---- */
.select2-container--default .select2-selection--multiple {
    min-height: var(--sel-h);
    border: 1px solid var(--sel-border);
    border-radius: var(--sel-radius);
    padding: 4px 8px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--sel-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--sel-primary-soft);
    border: 1px solid rgba(99,102,241,.25);
    color: var(--sel-primary);
    border-radius: 8px;
    padding: 3px 9px;
    font-weight: 600;
    font-size: .82rem;
    margin-top: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--sel-primary);
    margin-inline-end: 5px;
    font-weight: 700;
}

/* ---- Dropdown panel ---- */
.select2-container--default .select2-dropdown {
    border: 1px solid var(--sel-border);
    border-radius: var(--sel-radius);
    box-shadow: 0 10px 30px rgba(15,23,42,.12);
    overflow: hidden;
    margin-top: 4px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--sel-border);
    border-radius: 8px;
    padding: 8px 10px;
    outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--sel-primary);
}
.select2-container--default .select2-results__option {
    padding: 9px 14px;
    font-size: .9rem;
    color: var(--sel-ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--sel-primary);
    color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--sel-primary-soft);
    color: var(--sel-primary);
    font-weight: 600;
}

/* ---- Make select2 fill the column width (filters & forms) ---- */
.select2-container { width: 100% !important; }

/* ---- Plain native <select> (no select2) — keep it consistent too ---- */
select.form-control:not(.select2),
select.main-input:not(.select2) {
    min-height: var(--sel-h);
    height: auto;
    line-height: 1.5;
    border-radius: var(--sel-radius);
    border: 1px solid var(--sel-border);
    padding: 9px 14px;
    background-position: left 14px center;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 12px;
}
html[dir="ltr"] select.form-control:not(.select2),
html[dir="ltr"] select.main-input:not(.select2) { background-position: right 14px center; padding-right: 34px; }
html[dir="rtl"] select.form-control:not(.select2),
html[dir="rtl"] select.main-input:not(.select2) { background-position: left 14px center; padding-left: 34px; }
select.form-control:not(.select2):focus,
select.main-input:not(.select2):focus {
    border-color: var(--sel-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}