/* =============================================
   form-select.css
   =============================================
   Padrão único das listas suspensas do GOBARITO.

   Antes existiam quatro estilos concorrentes, com alturas de 32/34/38/42px,
   raios de 8/9/12px e três cores de borda — o que fazia dois selects lado a
   lado parecerem de aplicativos diferentes:

     .skills-modal-select   modais BNCC / SAEB / ENEM  (o mais usado)
     .settings-input        selects de configuração de IA
     .qb-origin-grid select cadastro de questão
     .qb-type-select        modal do banco de questões

   Este arquivo define o visual uma vez e lista os quatro seletores juntos,
   em vez de repetir valores em cada folha. Precisa ser carregado DEPOIS das
   folhas que declaram esses seletores — a especificidade é a mesma, então
   quem vence é a ordem.

   A seta continua sendo a nativa do sistema, por decisão de projeto.
   ============================================= */

.gb-select,
select.settings-input,
.skills-modal-select,
.qb-type-select {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid #cbd7ea;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gb-select:hover:not(:disabled),
select.settings-input:hover:not(:disabled),
.skills-modal-select:hover:not(:disabled),
.qb-type-select:hover:not(:disabled) {
    border-color: #a9c4ec;
}

.gb-select:focus,
select.settings-input:focus,
.skills-modal-select:focus,
.qb-type-select:focus {
    border-color: #0b5ed7;
    box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.12);
}

.gb-select:disabled,
select.settings-input:disabled,
.skills-modal-select:disabled,
.qb-type-select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #dbe3f0;
    cursor: not-allowed;
    box-shadow: none;
}

/* Dentro de um grid/flex, o select precisa poder encolher — sem isto, o
   conteúdo mais largo define a largura mínima e estoura a coluna. */
.gb-select {
    width: 100%;
    min-width: 0;
}


/* ─────────────────────────────────────────────────────────────────────
   Casca do select enriquecido (js/modules/custom-select.js)

   O componente embrulha o <select> num <div> e copia as classes dele para
   essa casca — de propósito: é assim que ela herda o comportamento de
   largura dentro dos grids e flexes onde o select morava (o flex-basis de
   .skills-modal-select, o min-width de .qb-type-select, o width de
   .settings-input).

   O problema é que as classes acima também pintam borda, fundo, padding e
   altura mínima, e valem para qualquer elemento — então a casca virava uma
   segunda caixa em volta do botão, mais baixa que ele, com a borda
   transbordando. Aqui o visual é zerado e fica só o papel de posicionar;
   quem desenha a caixa é o .skills-modal-single-trigger de dentro.

   Vence pela ordem: esta folha é a última da cadeia tanto em main.css
   quanto em corrige.html, e a especificidade empata com a das classes
   copiadas.
   ───────────────────────────────────────────────────────────────────── */
.gb-select-shell {
    position: relative;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    cursor: auto;
    /* Sem isto a casca estica com o container (align-items: stretch é o
       padrão de grid e flex) e sobra área clicável abaixo do botão. */
    align-self: start;
}