/* ==========================================================================
   Eesier Tabs (design system component)
   Razor: Views/Shared/_Tabs.cshtml · Model: TabsViewModel

   Anatomia: régua de rótulos + um filete que corre até o tab escolhido, e
   abaixo de 900px a régua inteira colapsa num único controle de seleção.

   DUAS LEIS GOVERNAM ESTE ARQUIVO:

   1. SÓ O INDICADOR SE MOVE. O filete é o menor elemento da composição e é o
      único que viaja; o painel — que na variante Main é uma página inteira —
      apenas troca de opacidade no lugar. Animar a folha inteira era mover a
      maior camada da tela para comunicar a menor mudança possível.

   2. NENHUM RÓTULO É CORTADO EM NENHUMA LARGURA. Abaixo de 900px — o MESMO
      ponto em que o menu lateral vira gaveta — a régua dá lugar a um controle
      de 48px com o rótulo ativo. Não é uma exceção da barra de tabs: é a lei
      de navegação do sistema aplicada mais uma vez.
   ========================================================================== */

.eesier-tabs {
    --et-text: var(--color-text-dark, #0f172a);
    --et-muted: var(--color-muted, #475569);
    --et-active: var(--color-palette-primary, #1c91e4);
    --et-active-text: var(--color-palette-primary, #1c91e4);
    --et-surface: var(--color-surface, #ffffff);
    --et-rule: var(--color-veil, rgba(15, 23, 42, 0.05));

    /* A FOLHA É UMA FOLHA DO SISTEMA COMO QUALQUER OUTRA — MESMO CONTORNO E
       MESMA PENUMBRA DE .eesier-card. O VÍNCULO COM O TAB ATIVO JÁ ESTÁ DITO
       PELO INVÓLUCRO: RÉGUA E CONTEÚDO DIVIDEM A MESMA FOLHA. NÃO PRECISA SER
       DITO DUAS VEZES. */

    --et-border: var(--color-border, #e2e8f0);
    --et-shadow: color-mix(in srgb, var(--color-text-dark, #0f172a) 8%, transparent);

    /* O FILETE ATIVO TEM A ESPESSURA DE TODO FILETE DO SISTEMA — 1px. ELE NÃO
       SE SOMA À RÉGUA: OCUPA EXATAMENTE O TRECHO DELA SOB O TAB ESCOLHIDO,
       TROCANDO O VÉU PELA COR ATIVA. O SISTEMA NÃO GANHA UM SEGUNDO PESO DE
       FILETE, E ESTA É A ÚNICA LINHA A MUDAR SE ELE PRECISAR FICAR MAIS FORTE. */

    --et-rule-weight: 1px;

    /* A RÉGUA TEM A ALTURA DA FAIXA DE TOPO — --control-square-size (72px), O
       MESMO TOKEN DE .eesier-topbar, ONDE MORA A BUSCA. AS DUAS FAIXAS QUE
       ENCIMAM UMA REGIÃO DE CONTEÚDO PASSAM A TER A MESMA ALTURA. A RÉGUA SÓ
       EXISTE ACIMA DE 900px, ENTÃO ESTA ALTURA É, POR CONSTRUÇÃO, A DO PONTEIRO
       FINO: NO TOQUE QUEM OCUPA O LUGAR DELA É O CONTROLE, EM 48px. */

    --et-rail-height: var(--control-square-size, 72px);

    /* ÍCONE → RÓTULO = 12px (--space-small) — O MESMO RITMO INTERNO DE
       BOTÕES, BUSCA, CAMPOS DE FORMULÁRIO E MENU LATERAL. */

    --et-item-icon-gap: var(--space-small, 12px);

    width: 100%;
    color: var(--et-text);
}


.eesier-tabs.dark,
.dark .eesier-tabs {
    --et-text: var(--color-text-on-dark, #ffffff);
    --et-muted: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
    --et-active: var(--color-palette-secondary, #4fbefe);
    --et-active-text: var(--color-palette-secondary, #4fbefe);
    --et-surface: var(--color-surface-dark, #101f38);
    --et-rule: var(--color-veil-on-dark, rgba(79, 190, 254, 0.05));
    --et-border: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
    --et-shadow: color-mix(in srgb, var(--color-canvas-dark, #0a1628) 48%, transparent);
}


/* A FOLHA É O INVÓLUCRO — ELA ENVOLVE A RÉGUA E O PAINEL. SUPERFÍCIE, CONTORNO,
   RAIO E SOMBRA VIVEM AQUI, E SÓ AQUI: RÉGUA E PAINEL SÃO TRANSPARENTES DENTRO
   DELA. OS DOIS NÃO SÃO SEPARADOS POR gap, E SIM DIVIDIDOS PELO FILETE DA
   RÉGUA, QUE ATRAVESSA A FOLHA DE PONTA A PONTA COMO O RODAPÉ DE UM CABEÇALHO. */

.eesier-tabs > .eesier-tabs-frame {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: var(--et-rule-weight) solid var(--et-border);
    border-radius: var(--radius-standard, 12px);
    background: var(--et-surface);
    box-shadow: 0 var(--space-small, 12px) var(--space-medium, 24px) var(--et-shadow);
}


/* ==========================================================================
   RÉGUA — PONTEIRO FINO
   ========================================================================== */

/* TRANSPARENTE — QUEM CARREGA A SUPERFÍCIE É A FOLHA. A RÉGUA SÓ DESENHA O
   FILETE DIVISOR, E ELE ATRAVESSA A FOLHA INTEIRA PORQUE A RÉGUA OCUPA TODA A
   LARGURA DELA. SEM PADDING E SEM gap: TODO O RESPIRO HORIZONTAL É DOS PRÓPRIOS
   TABS, PARA QUE O RECUO DO PRIMEIRO RÓTULO SEJA A MESMA MEDIDA QUE SEPARA UM
   RÓTULO DO SEGUINTE. */

.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    padding: 0;

    /* A RÉGUA É DESENHADA COMO FUNDO, NÃO COMO border-bottom: A BORDA FICARIA
       FORA DA CAIXA DE PREENCHIMENTO, E overflow-x: auto RECORTA TAMBÉM O EIXO
       VERTICAL — O FILETE ATIVO, QUE PRECISA SENTAR EXATAMENTE SOBRE ELA, SERIA
       APAGADO PELO RECORTE. COMO FUNDO, A LINHA FICA DENTRO DA CAIXA E NÃO ROLA
       COM OS RÓTULOS. */

    background: linear-gradient(var(--et-rule), var(--et-rule)) left bottom / 100% var(--et-rule-weight) no-repeat;
    scroll-behavior: smooth;
    scrollbar-width: none;
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list::-webkit-scrollbar {
    display: none;
}


/* QUANDO A RÉGUA REALMENTE ROLA, A BORDA COM CONTEÚDO ESCONDIDO DESAPARECE EM
   DEGRADÊ — O CORTE PASSA A SER DESENHADO EM VEZ DE ACIDENTAL. tabs.js LIGA E
   DESLIGA AS CLASSES CONFORME A POSIÇÃO DA ROLAGEM, ENTÃO NADA DESBOTA QUANDO
   TUDO JÁ CABE NA TELA. */

.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list.is-overflow-start {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--space-large, 48px));
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--space-large, 48px));
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list.is-overflow-end {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--space-large, 48px)), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - var(--space-large, 48px)), transparent 100%);
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list.is-overflow-start.is-overflow-end {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--space-large, 48px), #000 calc(100% - var(--space-large, 48px)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--space-large, 48px), #000 calc(100% - var(--space-large, 48px)), transparent 100%);
}


/* TAB — TEXTO PURO, SEM FUNDO E SEM BORDA (COMO UM ITEM DO MENU LATERAL), NA
   ALTURA DA FAIXA DE TOPO. O RESPIRO DE CADA LADO É --space-medium: COMO A RÉGUA
   NÃO TEM PADDING, ESSE MESMO VALOR É O QUE PÕE O ÍCONE DO PRIMEIRO TAB NO EIXO
   DE 24px DO TEXTO DO PAINEL LOGO ABAIXO. ENTRE DOIS RÓTULOS OS PADDINGS
   VIZINHOS SE SOMAM E DÃO 48px (--space-large) — O DEGRAU SEGUINTE DA MESMA
   ESCALA, QUE É O QUE A RÉGUA DE 72px PEDE. */

.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: var(--et-rail-height);
    gap: var(--et-item-icon-gap);
    padding: 0 var(--space-medium, 24px);
    border: none;
    background: transparent;
    color: var(--et-muted);
    cursor: pointer;
    font-family: inherit;
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab:hover:not(:disabled):not([aria-selected="true"]) {
    color: var(--et-active-text);
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab:hover > .eesier-tab-icon {
    color: inherit;
}


/* ATIVO — COR + PESO. A POSIÇÃO É DITA PELO FILETE, NÃO POR UM FUNDO */

.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab[aria-selected="true"] {
    color: var(--et-active-text);
    font-weight: 700;
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab[aria-selected="true"] > .eesier-tab-icon {
    color: inherit;
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab:focus-visible {
    outline: 2px solid var(--et-active);
    outline-offset: calc(var(--space-tight, 6px) * -1);
    border-radius: var(--radius-standard, 12px);
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab:disabled {
    color: var(--et-muted);
    cursor: not-allowed;
    opacity: .5;
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab > .eesier-tab-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--et-muted);
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


/* MESMO TAMANHO DO ÍCONE DO MENU LATERAL (--space-small, 12px) — a caixa fixa de .eicon */

.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab > .eesier-tab-icon > .eicon {
    width: var(--space-small, 12px);
    height: var(--space-small, 12px);
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab > .eesier-tab-label {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    white-space: nowrap;
}


/* O FILETE ATIVO — MEDIDO POR tabs.js E DESLOCADO POR transform, ENTÃO A
   VIAGEM ACONTECE NO COMPOSITOR E NÃO RECALCULA LAYOUT NENHUM. NASCE JÁ SOB O
   TAB CERTO: .eesier-tabs-ready SÓ LIBERA A TRANSIÇÃO DEPOIS DA PRIMEIRA
   MEDIÇÃO, PARA QUE ELE NÃO ENTRE DESLIZANDO DA ESQUERDA AO CARREGAR A PÁGINA. */

.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tabs-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--et-active-width, 0);
    height: var(--et-rule-weight);
    background: var(--et-active);
    transform: translateX(var(--et-active-left, 0));
    pointer-events: none;
}


.eesier-tabs.eesier-tabs-ready > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tabs-indicator {
    transition: transform var(--motion-standard, 0.36s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1)), width var(--motion-standard, 0.36s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1));
}


/* ==========================================================================
   CONTROLE DE SELEÇÃO — TOQUE / ATÉ 900px
   ========================================================================== */

/* NO PONTEIRO FINO ELE NÃO EXISTE: display: none O TIRA TAMBÉM DA ÁRVORE DE
   ACESSIBILIDADE, ENTÃO O LEITOR DE TELA NUNCA ENCONTRA A LISTA DUPLICADA.
   NO TOQUE ELE OCUPA O LUGAR EXATO DA RÉGUA: MESMA ALTURA E MESMO FILETE
   DIVISOR ATRAVESSANDO A FOLHA — É O CABEÇALHO DELA, NÃO UMA CAIXA SOLTA
   DENTRO DELA. A APARÊNCIA DO CONTROLE É DO PRÓPRIO _Select (VARIANTE plain);
   AQUI SÓ FICA O QUE É POSIÇÃO E SEPARAÇÃO, QUE PERTENCEM A QUEM CONSOME. */

.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-select {
    display: none;
    align-items: center;
    height: var(--control-height, 48px);
    background: linear-gradient(var(--et-rule), var(--et-rule)) left bottom / 100% var(--et-rule-weight) no-repeat;
}


/* O ÍCONE DO SELECT CASA COM O ÍCONE DO TAB QUE ELE SUBSTITUI (12px, O DO MENU
   LATERAL) — TROCA-SE A VARIÁVEL DA INSTÂNCIA, NUNCA A REGRA DO COMPONENTE */

.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-select > .eesier-select {
    --es-icon-size: var(--space-small, 12px);
}


/* ==========================================================================
   CONTROLES DA RÉGUA (Trail) — NO FIM DA LINHA, FORA DO tablist
   ========================================================================== */

/* COM CONTROLES, A FOLHA VIRA UMA GRADE DE DUAS COLUNAS: A RÉGUA (OU O SELECT,
   NO TOQUE) NA LARGA, OS CONTROLES NA ESTREITA, NA MESMA LINHA; OS PAINÉIS
   ATRAVESSAM AS DUAS NA LINHA DE BAIXO. O FILETE DIVISOR CONTINUA DE PONTA A
   PONTA PORQUE A CÉLULA DOS CONTROLES DESENHA O MESMO FUNDO DA RÉGUA. SEM
   CONTROLES, NADA MUDA: A FOLHA SEGUE UMA COLUNA FLEX. */

.eesier-tabs.eesier-tabs-has-trail > .eesier-tabs-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}


.eesier-tabs.eesier-tabs-has-trail > .eesier-tabs-frame > .eesier-tabs-list,
.eesier-tabs.eesier-tabs-has-trail > .eesier-tabs-frame > .eesier-tabs-select {
    grid-column: 1;
    grid-row: 1;
}


.eesier-tabs.eesier-tabs-has-trail > .eesier-tabs-frame > .eesier-tab-panel {
    grid-column: 1 / -1;
    grid-row: 2;
}


/* O ÍCONE DE UM CONTROLE DE 48px CAI NO EIXO DE 24px DO CONTEÚDO DO PAINEL:
   O RECUO À DIREITA É 24px MENOS A FOLGA ENTRE A CAIXA E O ÍCONE DE 16px. */

.eesier-tabs > .eesier-tabs-frame > .eesier-tabs-trail {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    gap: var(--space-small, 12px);
    padding-right: calc(var(--space-medium, 24px) - (var(--control-height, 48px) - var(--icon-size, 16px)) / 2);
    background: linear-gradient(var(--et-rule), var(--et-rule)) left bottom / 100% var(--et-rule-weight) no-repeat;
}


/* ==========================================================================
   O PAINEL
   ========================================================================== */

/* TRANSPARENTE TAMBÉM — SEM SUPERFÍCIE, SEM CONTORNO, SEM RAIO E SEM SOMBRA
   PRÓPRIOS: TUDO ISSO É DA FOLHA QUE O ENVOLVE. O PAINEL SÓ GUARDA A MOLDURA DE
   24px QUE TODO CONTEÚDO TEM CONTRA A BORDA DO SEU CONTINENTE. */

.eesier-tabs > .eesier-tabs-frame > .eesier-tab-panel {
    min-width: 0;
    padding: var(--space-medium, 24px);
}


/* A FOLHA NÃO VIAJA: SÓ APARECE. É UMA TROCA DE ESTADO (--motion-quick), NÃO
   UM DESLOCAMENTO — NENHUM transform NUMA CAMADA DO TAMANHO DE UMA PÁGINA. */

.eesier-tabs > .eesier-tabs-frame > .eesier-tab-panel.eesier-tab-panel-entering {
    animation: eesier-panel-enter var(--motion-quick, 0.18s) var(--ease-state, ease-in-out) both;
}


.eesier-tabs > .eesier-tabs-frame > .eesier-tab-panel:focus-visible {
    outline: 2px solid var(--et-active);
    outline-offset: calc(var(--space-tight, 6px) * -1);
}


@keyframes eesier-panel-enter {
    from {
        opacity: 0;
    }


    to {
        opacity: 1;
    }
}


@media screen and (max-width: 900px) {

    /* A RÉGUA SAI E O CONTROLE ENTRA — NENHUM RÓTULO PODE SER CORTADO */

    .eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list {
        display: none;
    }


    .eesier-tabs > .eesier-tabs-frame > .eesier-tabs-select {
        display: flex;
    }
}


@media (prefers-reduced-motion: reduce) {
    .eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list,
    .eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab,
    .eesier-tabs > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tab > .eesier-tab-icon,
    .eesier-tabs.eesier-tabs-ready > .eesier-tabs-frame > .eesier-tabs-list > .eesier-tabs-indicator,
    .eesier-tabs > .eesier-tabs-frame > .eesier-tab-panel.eesier-tab-panel-entering {
        animation: none;
        transition: none;
        scroll-behavior: auto;
    }
}