/* ── Select2 × Bootstrap 5 ────────────────────────────────────────────────────
   O tema oficial do Select2 foi desenhado para o Bootstrap 3, e o tema
   `@ttskch/select2-bootstrap4-theme` que o base.html referenciava saiu do CDN
   (404) — ou seja, o Select2 do projeto inteiro renderizava cru, com altura,
   borda, raio e cor diferentes dos <input>/<select> nativos ao lado.

   Este arquivo veste o Select2 com as medidas e as cores do Bootstrap 5 +
   marca TUNAP. Carregado no base.html, vale para todas as telas.

   Os seletores são de propósito ANCORADOS EM `.select2-container`, e não em
   `.select2-container--default`: parte das telas passa `theme: 'bootstrap4'` ou
   `'bootstrap-5'` na init, e o CSS desses temas nunca esteve no projeto — com o
   sufixo do tema no seletor, justamente essas telas continuariam cruas.
   Especificidade: cada regra empata com a equivalente do select2.min.css e
   vence por vir depois; overrides locais em {% block extra_css %} carregam
   depois deste arquivo e seguem tendo a palavra final.

   Variante pequena: adicione `select2-sm` no <select> (ou em qualquer ancestral)
   para casar com `.form-control-sm`/`.form-select-sm`. */

:root {
    --s2-borda:        #ced4da;
    --s2-borda-foco:   #86b7fe;
    --s2-anel-foco:    rgba(13, 110, 253, .25);
    --s2-texto:        #212529;
    --s2-placeholder:  #6c757d;
    --s2-pill-bg:      #e7f1ff;
    --s2-pill-borda:   #b6d4fe;
    --s2-pill-texto:   #0a58ca;
    --s2-altura:       calc(1.5em + .75rem + 2px);
    --s2-altura-sm:    calc(1.5em + .5rem + 2px);
}

/* ── Caixa (single e multiple) ─────────────────────────────────────────────── */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    min-height: var(--s2-altura);
    border: 1px solid var(--s2-borda);
    border-radius: .375rem;
    background-color: #fff;
    color: var(--s2-texto);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.select2-container.select2-container--focus .select2-selection--single,
.select2-container.select2-container--focus .select2-selection--multiple,
.select2-container.select2-container--open .select2-selection--single,
.select2-container.select2-container--open .select2-selection--multiple {
    border-color: var(--s2-borda-foco);
    box-shadow: 0 0 0 .25rem var(--s2-anel-foco);
    outline: 0;
}

/* Aberto para cima ou para baixo: cantos do lado do dropdown ficam retos, para
   a caixa e a lista lerem como uma peça só. */
.select2-container.select2-container--open.select2-container--below .select2-selection--single,
.select2-container.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.select2-container.select2-container--open.select2-container--above .select2-selection--single,
.select2-container.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.select2-container.select2-container--disabled .select2-selection--single,
.select2-container.select2-container--disabled .select2-selection--multiple {
    background-color: #e9ecef;
    color: var(--s2-placeholder);
}

/* Espelha o feedback do Bootstrap quando o <select> original está inválido. */
.was-validated select:invalid + .select2-container .select2-selection--single,
.was-validated select:invalid + .select2-container .select2-selection--multiple,
select.is-invalid + .select2-container .select2-selection--single,
select.is-invalid + .select2-container .select2-selection--multiple {
    border-color: #dc3545;
}

/* ── Seleção única ─────────────────────────────────────────────────────────── */
.select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    padding: 0 2.25rem 0 .75rem;   /* espaço à direita para a seta */
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: var(--s2-texto);
}
.select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--s2-placeholder);
}

/* Seta desenhada igual à do .form-select (SVG inline do Bootstrap), no lugar do
   triângulo com borda do tema original. */
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: .5rem;
    width: 1rem;
}
.select2-container .select2-selection--single .select2-selection__arrow b {
    border: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat center / .75rem;
}
.select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg);
}

/* O "x" de limpar vira um botão discreto, não um caractere solto colado no texto. */
.select2-container .select2-selection--single .select2-selection__clear {
    order: 2;
    margin: 0 .25rem 0 auto;
    padding: 0 .2rem;
    color: var(--s2-placeholder);
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 400;
    background: transparent;
    border: 0;
}
.select2-container .select2-selection--single .select2-selection__clear:hover {
    color: #b02a37;
}

/* ── Seleção múltipla ──────────────────────────────────────────────────────── */
.select2-container .select2-selection--multiple {
    position: relative;   /* âncora do "limpar tudo" absoluto */
    padding: .125rem .25rem;
    cursor: text;
}
/* O Select2 só marca `--clearable` quando existe seleção; o espaço à direita
   para o × é reservado só então, sem furo no campo vazio. */
.select2-container .select2-selection--multiple.select2-selection--clearable {
    padding-right: 1.5rem;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem;
    padding: 0;
    margin: 0;
    line-height: 1.5;
}
.select2-container .select2-selection--multiple .select2-selection__placeholder {
    color: var(--s2-placeholder);
    margin: 0;
    padding-left: .5rem;
}

/* Pílulas: o × fica à esquerda (ordem nativa do Select2 4.1) mas como botão de
   verdade, alinhado ao texto, em vez do "×" grudado com borda-direita. */
.select2-container .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    margin: .125rem 0;
    padding: .05rem .45rem;
    background-color: var(--s2-pill-bg);
    border: 1px solid var(--s2-pill-borda);
    border-radius: .25rem;
    color: var(--s2-pill-texto);
    font-size: .8125em;
    line-height: 1.4;
}
.select2-container .select2-selection--multiple .select2-selection__choice__display {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    flex: 0 0 auto;
    order: -1;
    padding: 0;
    border: 0;
    border-right: 0;
    background: transparent;
    color: var(--s2-pill-texto);
    font-size: 1.05em;
    line-height: 1;
    opacity: .65;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container .select2-selection--multiple .select2-selection__choice__remove:focus {
    background: transparent;
    color: #b02a37;
    opacity: 1;
}

/* O "limpar tudo" fica ancorado no canto, FORA do fluxo do flex (é assim que o
   Select2 o trata). Como flex item com `margin-left:auto` ele empurraria o
   resto e forçaria quebra de linha logo depois da primeira pílula. O reservado
   à direita vem da `--clearable`, que o Select2 só põe quando há o que limpar. */
.select2-container .select2-selection--multiple .select2-selection__clear {
    position: absolute;
    right: .1rem;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 .25rem;
    border: 0;
    background: transparent;
    color: var(--s2-placeholder);
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 400;
}
.select2-container .select2-selection--multiple .select2-selection__clear:hover {
    color: #b02a37;
}

/* ATENÇÃO: este campo é um <textarea>, não um <input> — é a caixa de digitação
   do Select2 (busca, navegação por teclado, Backspace apaga a última pílula).
   Por isso a altura é FIXA: com `height:auto` o textarea assume sua altura
   padrão de 2 linhas e abre uma faixa branca embaixo das pílulas. */
.select2-container .select2-search--inline .select2-search__field {
    margin: 0;
    padding: 0;
    height: 1.5em;
    line-height: 1.5;
    resize: none;
    overflow: hidden;
    vertical-align: middle;
    align-self: center;
    font-family: inherit;
    font-size: 1em;
    color: var(--s2-texto);
}
.select2-container .select2-search--inline .select2-search__field::placeholder {
    color: var(--s2-placeholder);
}

/* ── Dropdown ──────────────────────────────────────────────────────────────── */
.select2-dropdown {
    border-color: var(--s2-borda-foco);
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
    overflow: hidden;
}
.select2-container--open .select2-dropdown--below { border-top-color: var(--s2-borda); }
.select2-container--open .select2-dropdown--above { border-bottom-color: var(--s2-borda); }

.select2-container .select2-search--dropdown { padding: .5rem; }
.select2-container .select2-search--dropdown .select2-search__field {
    padding: .25rem .5rem;
    border: 1px solid var(--s2-borda);
    border-radius: .375rem;
    font-size: .9375rem;
    line-height: 1.5;
}
.select2-container .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--s2-borda-foco);
    box-shadow: 0 0 0 .2rem var(--s2-anel-foco);
    outline: 0;
}

.select2-results__option {
    padding: .35rem .75rem;
    font-size: .9375rem;
}
.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--tunap-blue, #1f5da6);
    color: #fff;
}
.select2-container .select2-results__option[aria-selected="true"],
.select2-container .select2-results__option--selected {
    background-color: var(--s2-pill-bg);
    color: var(--s2-pill-texto);
    font-weight: 500;
}
.select2-container .select2-results__option--selected.select2-results__option--highlighted {
    background-color: var(--tunap-blue, #1f5da6);
    color: #fff;
}
.select2-container .select2-results__group {
    padding: .35rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--s2-placeholder);
    background: #f8f9fa;
}
.select2-results__options { max-height: 260px; }

/* ── Variante pequena (casa com .form-control-sm / .form-select-sm) ────────── */
.select2-sm .select2-container .select2-selection--single,
.select2-sm .select2-container .select2-selection--multiple,
.select2-container--sm .select2-selection--single,
.select2-container--sm .select2-selection--multiple {
    min-height: var(--s2-altura-sm);
    font-size: .875rem;
    border-radius: .25rem;
}
.select2-sm .select2-container .select2-selection--single,
.select2-container--sm .select2-selection--single {
    padding-left: .5rem;
}