/*
 * Tom Select - overrides do tema darkside (derivado do tom-select-theme.css do default).
 * Cores vem dos tokens --v7-* declarados em v7.css (mesma pagina).
 */

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

.full .ts-control {
    background-color: var(--v7-card) !important;
}

.disabled .ts-control {
    background-color: var(--v7-sunken) !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(var(--v7-primary-rgb), 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--v7-primary-rgb), 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(var(--v7-primary-rgb), 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--v7-primary-rgb), 0.15) !important;
    outline: 0 !important;
}

/* ── Tags (selected items) ─────────────────────────────────────── */
.ts-wrapper.multi .ts-control > div {
    background: rgba(var(--v7-primary-rgb), 0.07) !important;
    border: 1px solid rgba(var(--v7-primary-rgb), 0.28) !important;
    border-radius: calc(var(--border-radius, 0px) - 1px) !important;
    color: var(--v7-primary) !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: var(--v7-primary) !important;
    border-color: var(--v7-primary) !important;
    color: #fff !important;
}

/* Remove (×) button */
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left-color: rgba(var(--v7-primary-rgb), 0.22) !important;
    color: var(--v7-primary) !important;
    opacity: .65;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove:hover {
    background: rgba(var(--v7-primary-rgb), 0.1) !important;
    color: var(--v7-primary) !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(--v7-card) !important;
    border-radius: 0 0 var(--border-radius, 0px) var(--border-radius, 0px) !important;
    border-color: var(--v7-line) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.ts-dropdown .optgroup-header {
    background: var(--v7-card) !important;
}

.ts-dropdown .active {
    background-color: rgba(var(--v7-primary-rgb), 0.08) !important;
    color: var(--v7-primary) !important;
}


/* Texto do controle e do dropdown na cor do tema. */
.ts-control,
.ts-control input,
.ts-dropdown {
    color: var(--v7-text) !important;
}