/* ==========================================================================
   Eesier Select (design system component)
   Razor: Views/Shared/_Select.cshtml · Model: SelectViewModel
   JS: js/select.js (abre/fecha, clique-fora, Esc, setas, Home/End)
   Documentação: /Design/Select.

   Uma escolha única dentro de uma lista conhecida, em que cada opção pode
   carregar um ícone — que é exatamente o que o <select> nativo NÃO faz: ele
   não desenha ícone nem na lista nem no valor escolhido. Por isso este
   componente existe, e só por isso: onde não há ícone, o campo select do
   formulário continua sendo a escolha certa.

   Duas variantes: framed é o controle de 48px com moldura própria; plain
   larga a moldura para servir de cabeçalho dentro de OUTRA folha (é a forma
   que os tabs usam no toque). A geometria é a mesma nas duas.

   Cores e medidas fluem dos tokens com fallback literal — este arquivo também
   é consumido standalone, sem site.css carregado.
   ========================================================================== */

.eesier-select {
    --es-surface: var(--color-surface, #ffffff);
    --es-border: var(--color-border, #e2e8f0);
    --es-shadow: color-mix(in srgb, var(--color-text-dark, #0f172a) 8%, transparent);
    --es-text: var(--color-text-dark, #0f172a);
    --es-muted: var(--color-muted, #475569);
    --es-active: var(--color-palette-primary, #1c91e4);
    --es-active-surface: var(--color-palette-primary-surface, #eef7ff);
    --es-veil: color-mix(in srgb, var(--color-text-dark, #0f172a) 5%, transparent);

    /* O TAMANHO DO ÍCONE É O ESTRUTURAL DO SISTEMA, MAS FICA NUMA VARIÁVEL
       PORQUE QUEM CONSOME PODE PRECISAR CASAR COM UM PAR ÍCONE-RÓTULO VIZINHO
       (OS TABS, POR EXEMPLO, USAM O ÍCONE DE 12px DO MENU LATERAL). TROCA-SE A
       VARIÁVEL NA INSTÂNCIA — NUNCA SE REESCREVE A REGRA. */

    --es-icon-size: var(--icon-size, 16px);

    display: flex;
    flex-direction: column;
    width: 100%;
}


.dark .eesier-select,
.eesier-select.dark {
    --es-surface: var(--color-surface-dark, #101f38);
    --es-border: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
    --es-shadow: color-mix(in srgb, var(--color-canvas-dark, #0a1628) 48%, transparent);
    --es-text: var(--color-text-on-dark, #ffffff);
    --es-muted: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
    --es-active: var(--color-palette-secondary, #4fbefe);
    --es-active-surface: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 16%, transparent);
    --es-veil: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 5%, transparent);
}


/* GATILHO — ALVO DE 48px, VALOR À ESQUERDA E SETA ANCORADA NA BORDA DIREITA */

.eesier-select > .eesier-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-small, 12px);
    width: 100%;
    height: var(--control-height, 48px);
    border: none;
    background: transparent;
    color: var(--es-active);
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 700;
    text-align: left;
    text-transform: lowercase;
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out), border-color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


.eesier-select > .eesier-select-trigger:focus-visible {
    outline: 2px solid var(--es-active);
    outline-offset: calc(var(--space-tight, 6px) * -1);
}


/* O VALOR — MESMO PAR ÍCONE-RÓTULO DE TODO O SISTEMA: 12px ENTRE OS DOIS */

.eesier-select > .eesier-select-trigger > .eesier-select-value {
    display: flex;
    align-items: center;
    gap: var(--space-small, 12px);
    min-width: 0;
}


.eesier-select > .eesier-select-trigger > .eesier-select-value > .eesier-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.eesier-select > .eesier-select-trigger > .eesier-select-chevron {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--es-muted);
    transition: transform var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


/* O TAMANHO DO CHEVRON VIVE AQUI, NÃO SÓ NO site.css: EM PÁGINAS STANDALONE (Layout = null, COMO
   /AgentSimulation) A REGRA GLOBAL DE .eicon NÃO É CARREGADA E O CHEVRON FICAVA SEM DIMENSÃO — UM
   SELECT SEM SETA NÃO SE LÊ COMO SELECT. */

.eesier-select > .eesier-select-trigger > .eesier-select-chevron > .eicon {
    width: var(--es-icon-size);
    height: var(--es-icon-size);
}


.eesier-select > .eesier-select-trigger[aria-expanded="true"] > .eesier-select-chevron {
    transform: rotate(180deg);
}


/* O ÍCONE NUNCA MUDA DE TAMANHO — NEM NO GATILHO NEM NA LISTA */

.eesier-select .eesier-select-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


/* .eicon COBRE OS ÍCONES DO CATÁLOGO; O SELETOR DE svg CRU COBRE SelectOptionModel.IconHtml (MARCAS DE
   TERCEIROS QUE O CATÁLOGO NÃO CARREGA). SEM ELE UM <svg> SEM WIDTH/HEIGHT INTRÍNSECOS ESTOURA A LINHA. */

.eesier-select .eesier-select-icon > .eicon,
.eesier-select .eesier-select-icon > svg {
    width: var(--es-icon-size);
    height: var(--es-icon-size);
}


/* MOLDURA — A VARIANTE QUE VIVE SOZINHA NA PÁGINA */

.eesier-select-framed > .eesier-select-trigger {
    padding: 0 var(--space-small, 12px);
    border: 1px solid var(--es-border);
    border-radius: var(--radius-standard, 12px);
    background: var(--es-surface);
}


.eesier-select-framed > .eesier-select-trigger[aria-expanded="true"] {
    border-color: var(--es-active);
}


/* SEM MOLDURA — A VARIANTE QUE É CABEÇALHO DE OUTRA FOLHA: NADA DE SUPERFÍCIE,
   BORDA OU RAIO PRÓPRIOS, E O RÓTULO NO EIXO DE 24px DO CONTEÚDO DA FOLHA */

.eesier-select-plain > .eesier-select-trigger {
    padding: 0 var(--space-medium, 24px);
}


/* A FOLHA FLUTUANTE — MESMA SUPERFÍCIE, BORDA, RAIO E SOMBRA DO CARTÃO */

.eesier-select > .eesier-select-sheet {
    position: absolute;
    top: calc(100% + var(--space-tight, 6px));
    left: 0;
    right: 0;
    z-index: 100;
    display: none;
    flex-direction: column;
    max-height: calc(var(--control-height, 48px) * 6);
    overflow-y: auto;
    padding: var(--space-tight, 6px);
    border: 1px solid var(--es-border);
    border-radius: var(--radius-standard, 12px);
    background: var(--es-surface);
    box-shadow: 0 var(--space-small, 12px) var(--space-medium, 24px) var(--es-shadow);
}


.eesier-select.is-open > .eesier-select-sheet {
    display: flex;
    animation: eesier-select-enter var(--motion-standard, 0.36s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1)) both;
}


@keyframes eesier-select-enter {
    from {
        opacity: 0;
        transform: translateY(calc(var(--space-small, 12px) * -1));
    }


    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* OPÇÃO — 48px, ÍCONE A 12px DO RÓTULO, TEXTO PURO EM REPOUSO */

.eesier-select > .eesier-select-sheet > .eesier-select-option {
    display: flex;
    align-items: center;
    gap: var(--space-small, 12px);
    flex-shrink: 0;
    height: var(--control-height, 48px);
    padding: 0 var(--space-small, 12px);
    border-radius: var(--radius-standard, 12px);
    color: var(--es-text);
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 500;
    text-transform: lowercase;
    white-space: nowrap;
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out), background-color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


.eesier-select > .eesier-select-sheet > .eesier-select-option > .eesier-select-icon {
    color: var(--es-muted);
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


@media (hover: hover) {

    .eesier-select > .eesier-select-sheet > .eesier-select-option:hover:not([aria-disabled="true"]) {
        color: var(--es-active);
        background: var(--es-veil);
    }


    .eesier-select > .eesier-select-sheet > .eesier-select-option:hover:not([aria-disabled="true"]) > .eesier-select-icon {
        color: inherit;
    }
}


/* PERCORRIDA PELO TECLADO — O FOCO CONTINUA NO GATILHO, ENTÃO A OPÇÃO ATIVA
   PRECISA SE MOSTRAR SOZINHA. É O MESMO VÉU DO HOVER: PERCORRER NÃO É ESCOLHER. */

.eesier-select > .eesier-select-sheet > .eesier-select-option.is-active {
    color: var(--es-active);
    background: var(--es-veil);
}


.eesier-select > .eesier-select-sheet > .eesier-select-option.is-active > .eesier-select-icon {
    color: inherit;
}


/* ESCOLHIDA — COR + PESO + A SUPERFÍCIE ATIVA, O MESMO GESTO DO ITEM ATIVO DO
   MENU LATERAL */

.eesier-select > .eesier-select-sheet > .eesier-select-option[aria-selected="true"] {
    color: var(--es-active);
    background: var(--es-active-surface);
    font-weight: 700;
}


.eesier-select > .eesier-select-sheet > .eesier-select-option[aria-selected="true"] > .eesier-select-icon {
    color: inherit;
}


.eesier-select > .eesier-select-sheet > .eesier-select-option[aria-disabled="true"] {
    color: var(--es-muted);
    cursor: not-allowed;
    opacity: .5;
}


@media (prefers-reduced-motion: reduce) {

    .eesier-select.is-open > .eesier-select-sheet {
        animation: none;
    }


    .eesier-select > .eesier-select-trigger > .eesier-select-chevron {
        transition: none;
    }
}