/* Camada temática carregada depois do CSS oficial do Select2. */

/* Cadastros legados ainda sem `page-family-cadastro` usam o mesmo contrato
   visual dos campos nativos. Publicamos os aliases no body para que o dropdown
   do Select2 (anexado fora do form) tambem receba a paleta correta. */
body:not(.page-family-cadastro, .page-family-listagem, .page-family-relatorio, .page-family-detalhes):has(.form-container:not(.lista)) {
    --select2-surface: var(--cor-campo-cadastro, var(--cor-fundo));
    --select2-foreground: var(--cor-texto-campo-cadastro, var(--cor-texto));
    --select2-border: var(--cor-borda-cadastro, var(--cor-borda));
    --select2-accent: var(--foco-cadastro, var(--cor-botao));
    --select2-highlight: var(--foco-cadastro, var(--cor-hover));
    --select2-highlight-foreground: var(--cor-texto-foco-cadastro, var(--cor-icone));
}

/* Reafirma os aliases no container editavel. O container disabled fica fora
   deste seletor e continua usando a superficie bloqueada da camada de familias. */
body:not(.page-family-cadastro, .page-family-listagem, .page-family-relatorio, .page-family-detalhes)
    .form-container:not(.lista)
    .select2-container--default:not(.select2-container--disabled) {
    --select2-surface: var(--cor-campo-cadastro, var(--cor-fundo));
    --select2-foreground: var(--cor-texto-campo-cadastro, var(--cor-texto));
    --select2-border: var(--cor-borda-cadastro, var(--cor-borda));
    --select2-accent: var(--foco-cadastro, var(--cor-botao));
    --select2-highlight: var(--foco-cadastro, var(--cor-hover));
    --select2-highlight-foreground: var(--cor-texto-foco-cadastro, var(--cor-icone));
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    color: var(--select2-foreground, var(--cor-texto));
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-search__field {
    color: var(--select2-foreground, var(--cor-texto));
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: var(--select2-foreground, var(--cor-texto));
    opacity: 1;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--select2-foreground, var(--cor-texto)) transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--select2-foreground, var(--cor-texto));
}

.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: var(--select2-foreground, var(--cor-texto));
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--select2-accent, var(--cor-botao));
    box-shadow: 0 0 0 2px color-mix(
        in srgb,
        var(--select2-accent, var(--cor-botao)) 20%,
        transparent
    );
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--select2-surface, var(--cor-fundo));
    color: var(--select2-foreground, var(--cor-texto));
    cursor: not-allowed;
}

.select2-dropdown {
    border-color: var(--select2-border, var(--cor-borda));
    background-color: var(--select2-surface, var(--cor-fundo));
    color: var(--select2-foreground, var(--cor-texto));
}

.select2-search--dropdown .select2-search__field {
    border-color: var(--select2-border, var(--cor-borda));
    background-color: var(--select2-surface, var(--cor-fundo));
    color: var(--select2-foreground, var(--cor-texto));
}

.select2-results__option {
    background-color: transparent;
    color: var(--select2-foreground, var(--cor-texto));
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--select2-surface, var(--cor-fundo));
    color: var(--select2-foreground, var(--cor-texto));
    font-weight: 700;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--select2-highlight, var(--cor-hover));
    color: var(--select2-highlight-foreground, var(--cor-icone));
}

.select2-container--default .select2-results__option--disabled {
    color: var(--select2-foreground, var(--cor-texto));
    cursor: not-allowed;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-color: var(--select2-accent, var(--cor-botao));
    background-color: var(--select2-surface, var(--cor-fundo));
    color: var(--select2-foreground, var(--cor-texto));
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right-color: var(--select2-border, var(--cor-borda));
    color: var(--select2-foreground, var(--cor-texto));
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: var(--select2-highlight, var(--cor-hover));
    color: var(--select2-highlight-foreground, var(--cor-icone));
}

/* Backdrop criado por cliente_form_select2.js em layouts estreitos. */
.select2-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: color-mix(in srgb, var(--cor-overlay-modal, #0f172a) 50%, transparent);
    z-index: 200;
    backdrop-filter: blur(2px);
}