/*
 * Tom Select - dk-purple theme overrides.
 * Vendor build: tom-select.bootstrap5.min.css (uses --* CSS custom properties).
 *
 * Paleta do tema:
 *   #251f29 fundo | #392d49 superficie | #211a2b card
 *   #735b96 primary | #9b77cb borda ativa | #a983dd texto de destaque
 *   #4c3b62 / #624c80 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: #392d49 !important;
    color: #efe3ff !important;
    border-radius: 0 !important;
}

.disabled .ts-control {
    background-color: #2e2539 !important;
    color: #9d89b7 !important;
}

.ts-control > input,
.ts-control > input::placeholder {
    color: #9d89b7 !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: #9b77cb !important;
    box-shadow: 0 0 0 0.2rem rgba(115, 91, 146, 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(115, 91, 146, 0.35) !important;
    border: 1px solid #624c80 !important;
    border-radius: 0 !important;
    color: #efe3ff !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: #735b96 !important;
    border-color: #9b77cb !important;
    color: #fff !important;
}

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

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove:hover {
    background: rgba(115, 91, 146, 0.45) !important;
    color: #cda8ff !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: #211a2b !important;
    border-radius: 0 !important;
    border-color: #4c3b62 !important;
    box-shadow: 0 5px 15px rgba(28, 22, 36, 0.7) !important;
    color: #efe3ff !important;
}

.ts-dropdown .optgroup-header {
    background: #211a2b !important;
    color: #9d89b7 !important;
}

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

.ts-dropdown .active {
    background-color: #8166a6 !important;
    color: #fff !important;
}

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