/* ===== Ajustes finos do Tom Select para combinar com Bootstrap 5 ===== */

/* Container principal — equilibra borda e padding com o .form-select nativo */
.ts-wrapper.form-select {
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Estado de foco — usa a mesma cor de destaque do Bootstrap */
.ts-wrapper.focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Área interna onde ficam os itens selecionados/placeholder */
.ts-control {
    padding: 0.375rem 0.75rem;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
}

/* Chips das opções selecionadas (modo multiple) */
.ts-control > div {
    background-color: #e7f1ff;
    color: #0d6efd;
    border: 1px solid #b6d4fe;
    border-radius: 0.375rem;
    padding: 0.15rem 0.5rem;
    margin: 2px 4px 2px 0;
    font-size: 0.875rem;
}

/* Botão de remover (x) dentro do chip */
.ts-control > div .remove {
    border-left: 1px solid #b6d4fe;
    color: #0d6efd;
    padding-left: 0.4rem;
    margin-left: 0.4rem;
}

.ts-control > div .remove:hover {
    background-color: transparent;
    color: #dc3545;
}

/* Dropdown de opções */
.ts-dropdown {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    z-index: 1056; /* acima de modais do Bootstrap (1055), evita ficar escondido */
}

/* Item do dropdown em hover/destaque */
.ts-dropdown .option.active {
    background-color: #e7f1ff;
    color: #0d6efd;
}

/* Item já selecionado, listado no dropdown */
.ts-dropdown .option.selected {
    background-color: #f8f9fa;
    color: #6c757d;
}

/* Placeholder */
.ts-control input::placeholder {
    color: #6c757d;
    opacity: 1;
}