/*
 * Tom Select — theme overrides.
 * Vendor build: tom-select.bootstrap5.min.css (uses --* CSS custom properties).
 *
 * Structure when <select class="form-select">:
 *   .ts-wrapper.form-select    ← visual border/focus lives HERE
 *     .ts-control              ← border: none, background: transparent (vendor)
 *       .item                  ← pill
 *     .ts-dropdown
 */

/* ── Control background ─────────────────────────────────────────── */
.ts-control,
.ts-wrapper.single.input-active .ts-control {
    background-color: var(--body-bg, #fff) !important;
}

.full .ts-control {
    background-color: var(--body-bg, #fff) !important;
}

.disabled .ts-control {
    background-color: var(--secondary-bg, #e9ecef) !important;
}

/* ── Focus ring ─────────────────────────────────────────────────── */
/*
 * For form-select / form-control: focus ring goes on the outer wrapper,
 * not on the inner .ts-control (whose shadow would clip and appear as a
 * left-side stripe due to overflow:hidden on the wrapper).
 */
.ts-wrapper.form-select.focus,
.ts-wrapper.form-control.focus {
    border-color: rgba(13, 110, 253, 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
    outline: 0 !important;
}

/* Suppress inner ts-control box-shadow so it never clips inside the wrapper */
.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-control .ts-control {
    box-shadow: none !important;
}

/* Simplify the vendor's overly complex padding-top calc for sm multi */
.ts-wrapper.form-select-sm.multi.has-items .ts-control {
    padding-top: calc(.75rem - 5px) !important;
    padding-bottom: calc(.75rem - 5px) !important;
}

/* Focus for standalone ts-control (used without form-select/form-control) */
.focus .ts-control {
    border-color: rgba(13, 110, 253, 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
    outline: 0 !important;
}

/* ── Tags (selected items) ─────────────────────────────────────── */
.ts-wrapper.multi .ts-control > div {
    background: rgba(13, 110, 253, 0.07) !important;
    border: 1px solid rgba(13, 110, 253, 0.28) !important;
    border-radius: calc(var(--border-radius, 0px) - 1px) !important;
    color: #0d6efd !important;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 2px 6px;
    margin: 1px 3px 1px 0;
}

.ts-wrapper.multi .ts-control > div.active {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

/* Remove (×) button */
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left-color: rgba(13, 110, 253, 0.22) !important;
    color: #0d6efd !important;
    opacity: .65;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove:hover {
    background: rgba(13, 110, 253, 0.1) !important;
    color: #0d6efd !important;
    opacity: 1;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
    border-left-color: rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    opacity: .8;
}

/* ── Dropdown ──────────────────────────────────────────────────── */
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
    background: var(--body-bg, #fff) !important;
    border-radius: 0 0 var(--border-radius, 0px) var(--border-radius, 0px) !important;
    border-color: var(--border-color, #dee2e6) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.ts-dropdown .optgroup-header {
    background: var(--body-bg, #fff) !important;
}

.ts-dropdown .active {
    background-color: rgba(13, 110, 253, 0.08) !important;
    color: #0d6efd !important;
}

/* ── Dark theme ────────────────────────────────────────────────── */
[data-bs-theme=dark] .ts-control,
[data-bs-theme=dark] .ts-wrapper.single.input-active .ts-control,
[data-bs-theme=dark] .full .ts-control {
    background-color: var(--body-bg, #212529) !important;
}

[data-bs-theme=dark] .ts-dropdown,
[data-bs-theme=dark] .ts-dropdown.form-control,
[data-bs-theme=dark] .ts-dropdown.form-select {
    background: var(--body-bg, #212529) !important;
    border-color: var(--border-color, #495057) !important;
}

[data-bs-theme=dark] .ts-wrapper.multi .ts-control > div {
    background: rgba(110, 168, 254, 0.12) !important;
    border-color: rgba(110, 168, 254, 0.3) !important;
    color: #6ea8fe !important;
}

[data-bs-theme=dark] .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left-color: rgba(110, 168, 254, 0.25) !important;
    color: #6ea8fe !important;
}

[data-bs-theme=dark] .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove:hover {
    background: rgba(110, 168, 254, 0.1) !important;
}