/* ============================================================================
   Select2 (4.1.0-rc) — novo padrão de design do FIN
   ----------------------------------------------------------------------------
   Faz o controle do Select2 (single e multiple) e o dropdown baterem com os
   inputs de texto do sistema (perfis / filtros): borda #e9eaec, radius 6px,
   altura ~38px, foco brand #3845cd + halo, dropdown arredondado com sombra.

   CASCATA: o select2.min.css (CDN) é carregado no foot.php (fim do <body>) e os
   hacks inline de select2 vivem nas views (também no <body>) — ambos depois deste
   arquivo, que mora no <head>. Por isso TUDO aqui usa !important e seletores de
   2+ classes (estrutura BEM do select2), o suficiente para vencer:
     - o CDN (sem !important), e
     - os hacks inline single-class das views (".select2-selection", etc.).

   Não edita o CDN nem os <style> inline das views.
   ============================================================================ */

:root {
    --s2-brand:      #3845cd;
    --s2-brand-dark: #2d38b5;
    --s2-brand-soft: #6872e5;
    --s2-tint:       #eef0fc;
    --s2-surface:    #ffffff;
    --s2-border:     #e9eaec;
    --s2-border2:    #f3f4f6;
    --s2-t1:         #1a1d23;
    --s2-t2:         #555555;
    --s2-t3:         #9aa0b3;
    --s2-radius:     6px;
}

/* ====================== WRAPPER (.select2-container) ===================
   O .select2-container é só um wrapper — a "caixa" visível tem que ser a
   .select2-selection (estilizada abaixo). O tema smart-style-4 (your_style.css,
   linhas ~272-280) pinta borda/fundo/padding NO wrapper, criando uma caixa
   quadrada cinza extra em volta do controle. Neutralizado aqui. */
.select2-container,
.smart-style-4 .select2,
.smart-style-4 .select2-container {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* ====================== CONTROLE — SINGLE ============================== */
.select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    background-color: var(--s2-surface) !important;
    border: 1px solid var(--s2-border) !important;
    border-radius: var(--s2-radius) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .12s ease, box-shadow .12s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 18px 0 0 !important;   /* espaço só à direita p/ a seta */
    line-height: 1.4 !important;
    font-size: 13px !important;
    color: var(--s2-t1) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--s2-t3) !important;
}

/* seta: full-height, chevron FontAwesome (igual datepicker) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 0 !important;
    right: 8px !important;
    height: 100% !important;
    width: 16px !important;
    background: transparent !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow::before {
    content: '\f078' !important;      /* chevron-down */
    font-family: FontAwesome !important;
    font-size: 10px !important;
    color: var(--s2-t3) !important;
    line-height: 1 !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::before {
    content: '\f077' !important;      /* chevron-up */
    color: var(--s2-brand) !important;
}

/* botão limpar (x) */
.select2-container--default .select2-selection__clear {
    margin-right: 6px !important;
    color: var(--s2-t3) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}
.select2-container--default .select2-selection__clear:hover {
    color: #dc2626 !important;
}

/* ====================== CONTROLE — MULTIPLE ============================ */
.select2-container--default .select2-selection--multiple {
    box-sizing: border-box !important;
    min-height: 38px !important;
    padding: 3px 6px !important;
    background-color: var(--s2-surface) !important;
    border: 1px solid var(--s2-border) !important;
    border-radius: var(--s2-radius) !important;
    box-shadow: none !important;
    transition: border-color .12s ease, box-shadow .12s ease !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 3px 4px 3px 0 !important;
    padding: 2px 8px !important;
    background-color: var(--s2-tint) !important;
    border: 1px solid #d8ddf7 !important;
    border-radius: 4px !important;
    color: var(--s2-brand-dark) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--s2-brand-soft) !important;
    border: none !important;
    margin-right: 0 !important;
    font-weight: 700 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #dc2626 !important;
    background: transparent !important;
}

/* ====================== ESTADO FOCO / ABERTO ========================== */
.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(--s2-brand) !important;
    box-shadow: 0 0 0 3px rgba(56, 69, 205, .12) !important;
    outline: none !important;
}

/* ====================== DROPDOWN ====================================== */
.select2-container--default .select2-dropdown {
    margin-top: 4px !important;
    background: var(--s2-surface) !important;
    border: 1px solid var(--s2-border) !important;
    border-radius: var(--s2-radius) !important;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12) !important;
    overflow: hidden !important;
}

/* Lista de resultados: rolagem interna própria com scrollbar visível.
   Sobrescreve o hack inline das views (.select2-results__options { height:100% })
   que deixava listas longas serem CORTADAS pelo overflow:hidden do contêiner,
   sem scrollbar. max-height < 500px (clip do contêiner) → rola antes de cortar.

   IMPORTANTE: só o nível TOPO rola. Em selects com optgroups (ex. Ativos /
   Inativos), as listas aninhadas NÃO podem rolar sozinhas — senão viram vários
   scrolls. Elas expandem e o scroll único fica no contêiner de cima. */
.select2-container--default .select2-results > .select2-results__options {
    max-height: 280px !important;
    height: auto !important;
    overflow-y: auto !important;
}
.select2-container--default .select2-results__options--nested {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* campo de busca dentro do dropdown — espelha o input de texto */
.select2-container--default .select2-search--dropdown {
    padding: 8px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    color: var(--s2-t1) !important;
    background: var(--s2-surface) !important;
    border: 1px solid var(--s2-border) !important;
    border-radius: var(--s2-radius) !important;
    outline: none !important;
    transition: border-color .12s ease, box-shadow .12s ease !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--s2-brand) !important;
    box-shadow: 0 0 0 3px rgba(56, 69, 205, .12) !important;
}

/* remove a lupa que o bundle SmartAdmin injeta no campo de busca do dropdown
   (smartadmin-production-plugins.min.css → .select2-search:before { content:"\f002" }).
   display:none vence mesmo o content que algumas views ainda setam no ::before. */
.select2-search:before,
.select2-search--dropdown:before {
    display: none !important;
    content: none !important;
}

/* opções */
.select2-container--default .select2-results__option {
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--s2-t2) !important;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--s2-tint) !important;
    color: var(--s2-t1) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background-color: var(--s2-brand) !important;
    color: #ffffff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
    background-color: var(--s2-brand-dark) !important;
    color: #ffffff !important;
}
/* labels de optgroup: sticky durante a rolagem + clicáveis p/ colapsar a lista.
   sticky funciona relativo ao contêiner de scroll (.select2-results__options topo);
   background opaco p/ os itens passarem por trás; chevron indica aberto/fechado. */
.select2-container--default .select2-results__group {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    background: var(--s2-surface) !important;
    border-bottom: 1px solid var(--s2-border2) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    color: var(--s2-t3) !important;
    cursor: pointer !important;
    user-select: none !important;
}
.select2-container--default .select2-results__group::after {
    content: '\f078' !important;           /* chevron-down (grupo aberto) */
    font-family: FontAwesome !important;
    font-size: 9px !important;
    color: var(--s2-t3) !important;
    transition: transform .15s ease !important;
}
.select2-container--default .select2-results__group.s2-group-collapsed::after {
    transform: rotate(-90deg) !important;  /* aponta p/ direita quando colapsado */
}
.select2-container--default .select2-results__group.s2-group-collapsed + .select2-results__options--nested {
    display: none !important;
}

/* ====================== CONTEÚDO DA OPÇÃO (avatar + nome + url) ========
   Spans montados pelo templateResult/Selection (foot.php). Substituem o
   "Nome [url]" por avatar (inicial) + nome em destaque + url como legenda. */
.s2-opt {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

/* avatar circular com a inicial; cor de fundo vem inline (corAvatar) */
.s2-opt-avatar {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* coluna texto: nome em cima, url embaixo (no dropdown) */
.s2-opt-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    line-height: 1.3 !important;
}
.s2-opt-nome {
    font-weight: 600 !important;
    color: var(--s2-t1) !important;
}
.s2-opt-url {
    font-size: 11px !important;
    color: var(--s2-brand-soft) !important;
}

/* controle fechado: SEM avatar (fica só na listagem), nome+url na mesma linha */
.select2-selection__rendered .s2-opt-avatar {
    display: none !important;
}
.select2-selection__rendered .s2-opt-text {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
    overflow: hidden !important;
}
.select2-selection__rendered .s2-opt-url {
    color: var(--s2-t3) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* contraste nas linhas destacada/selecionada do dropdown */
.select2-container--default .select2-results__option--highlighted .s2-opt-url {
    color: var(--s2-brand) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] .s2-opt-nome,
.select2-container--default .select2-results__option--selected .s2-opt-nome {
    color: #ffffff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] .s2-opt-url,
.select2-container--default .select2-results__option--selected .s2-opt-url {
    color: rgba(255, 255, 255, .8) !important;
}