/* ===================================
   SELECT2 THEME OVERRIDES
   Uses CSS variables — works with light/dark
   ================================= */

.select2-container--default .select2-selection--single {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    height: 38px;
    display: flex;
    align-items: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
    line-height: 38px;
    padding-inline-start: 0.85rem;
    padding-inline-end: 1.8rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    left: auto;
    right: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-muted) transparent;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    float: none;
    position: absolute;
    inset-inline-end: 22px;
    top: 50%;
    transform: translateY(-50%);
}
.select2-dropdown {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    box-shadow: var(--shadow-md);
    z-index: 9999;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-primary);
    padding: 0.4rem 0.7rem;
    font-family: inherit;
    font-size: 0.875rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--primary-color);
}
.select2-container--default .select2-results__option {
    color: var(--text-primary);
    padding: 0.45rem 0.85rem;
    font-size: 0.9rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-color);
    color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.select2-container--default .select2-results__group {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.85rem 0.25rem;
}
/* Error state */
select.is-invalid + .select2-container--default .select2-selection--single {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

/* ===================================
   Multi-select (tags) — dark-mode safe
   Vendor select2.min.css hardcodes #e4e4e4 / #aaa / #999 / #f1f1f1
   for the chip container, chips, and remove button, which read as
   light-gray patches on our dark slate background. Remap every color
   to the same --bg/--border/--text tokens used by the single variant
   above so light and dark both track automatically.
   ================================= */

.select2-container--default .select2-selection--multiple {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    min-height: 38px;
    padding: 3px 5px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--text-primary);
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--text-muted);
}
.select2-container--default .select2-search--inline .select2-search__field {
    color: var(--text-primary);
    font-family: inherit;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: var(--text-primary);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-muted);
    /* Vendor sets border-right in LTR and border-left in RTL to 1px solid #aaa;
       recoloring with the shorthand retints whichever side is active without
       having to duplicate the RTL selector. */
    border-color: var(--border-color);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--bg-secondary);
}
/* Error state (multi) — mirrors the single variant above */
select.is-invalid + .select2-container--default .select2-selection--multiple {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}