/*
 * Tom Select - dk-purple theme overrides.
 * Vendor build: tom-select.bootstrap5.min.css (uses --* CSS custom properties).
 *
 * Paleta do tema:
 *   #0a111a fundo | #101c2b superficie | #091019 card
 *   #226fd3 primary | #6999d9 borda ativa | #81aadf texto de destaque
 *   #162539 / #226fd3 hairlines
 * O tema e sempre escuro e usa border-radius: 0.
 *
 * Estrutura quando <select class="form-select">:
 *   .ts-wrapper.form-select    <- borda/foco ficam AQUI
 *     .ts-control              <- border: none, background: transparent (vendor)
 *       .item                  <- pill
 *     .ts-dropdown
 */

/* -- Control background ------------------------------------------- */
.ts-control,
.ts-wrapper.single.input-active .ts-control,
.full .ts-control {
    background-color: #101c2b !important;
    color: #e4effe !important;
    border-radius: 0 !important;
}

.disabled .ts-control {
    background-color: #0d1622 !important;
    color: #6798d9 !important;
}

.ts-control > input,
.ts-control > input::placeholder {
    color: #6798d9 !important;
}

/* -- Focus ring ---------------------------------------------------- */
.ts-wrapper.form-select,
.ts-wrapper.form-control {
    border-radius: 0 !important;
}

.ts-wrapper.form-select.focus,
.ts-wrapper.form-control.focus,
.focus .ts-control {
    border-color: #6999d9 !important;
    box-shadow: 0 0 0 0.2rem rgba(34, 111, 211, 0.35) !important;
    outline: 0 !important;
}

/* Suprime a sombra interna p/ nao clipar dentro do wrapper */
.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-control .ts-control {
    box-shadow: none !important;
}

/* Simplifica o calc de padding do vendor no sm multi */
.ts-wrapper.form-select-sm.multi.has-items .ts-control {
    padding-top: calc(.75rem - 5px) !important;
    padding-bottom: calc(.75rem - 5px) !important;
}

/* -- Tags (itens selecionados) ------------------------------------- */
.ts-wrapper.multi .ts-control > div {
    background: rgba(34, 111, 211, 0.35) !important;
    border: 1px solid #226fd3 !important;
    border-radius: 0 !important;
    color: #e4effe !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: #226fd3 !important;
    border-color: #6999d9 !important;
    color: #fff !important;
}

/* Botao remover (x) */
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left-color: #226fd3 !important;
    color: #81aadf !important;
    opacity: .75;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove:hover {
    background: rgba(34, 111, 211, 0.45) !important;
    color: #aacefd !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: .85;
}

/* -- Dropdown ------------------------------------------------------ */
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
    background: #091019 !important;
    border-radius: 0 !important;
    border-color: #162539 !important;
    box-shadow: 0 5px 15px rgba(8, 14, 21, 0.7) !important;
    color: #e4effe !important;
}

.ts-dropdown .optgroup-header {
    background: #091019 !important;
    color: #6798d9 !important;
}

.ts-dropdown .option {
    color: #e4effe !important;
}

.ts-dropdown .active {
    background-color: #2f7add !important;
    color: #fff !important;
}

.ts-dropdown .create {
    color: #81aadf !important;
}