/* ==========================================================================
   Eesier Tabela (design system component)
   Razor: Views/Shared/_Table.cshtml · Model: TableViewModel
   Documentação: /Design/Tabela.

   A tabela vive DENTRO da folha do sistema (mesma superfície, borda, raio e
   sombra do cartão e do painel de tabs). Linhas de 48px (alvo de controle),
   células com 12px vertical / 24px horizontal, cabeçalho em papel de rótulo
   mudo. A régua entre linhas é o VÉU — a mesma tinta a 5% dos filetes do
   sistema. Ordenável = um botão no cabeçalho com chevron para cima OU para
   baixo (dois ícones, nunca um ícone girado).

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

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

    border: 1px solid var(--etb-border);
    border-radius: var(--radius-standard, 12px);
    background: var(--etb-surface);
    box-shadow: 0 var(--space-small, 12px) var(--space-medium, 24px) var(--etb-shadow);
    overflow-x: auto;
}


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


.eesier-table > table {
    width: 100%;
    border-collapse: collapse;
    color: var(--etb-text);
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-small, 0.875rem);
}


/* CABEÇALHO — PAPEL DE RÓTULO MUDO, SEPARADO DO CORPO PELA BORDA DA FOLHA */

.eesier-table > table > thead > tr > th {
    height: var(--control-height, 48px);
    padding: var(--space-small, 12px) var(--space-medium, 24px);
    border-bottom: 1px solid var(--etb-border);
    color: var(--etb-muted);
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 700;
    text-align: left;
    text-transform: lowercase;
    white-space: nowrap;
}


/* CABEÇALHO FIXO — A FOLHA VIRA A JANELA DE ROLAGEM E O CABEÇALHO ADERE AO
   TOPO SOBRE A PRÓPRIA SUPERFÍCIE. */

.eesier-table.eesier-table-sticky {
    overflow-y: auto;
}


.eesier-table.eesier-table-sticky > table > thead > tr > th {
    position: sticky;
    top: 0;
    background: var(--etb-surface);
    z-index: 1;
}


/* CORPO — LINHAS DE 48px SEPARADAS PELO VÉU; A ÚLTIMA LINHA ENCONTRA A BORDA
   DA FOLHA SEM FILETE PRÓPRIO */

.eesier-table > table > tbody > tr > td {
    height: var(--control-height, 48px);
    padding: var(--space-small, 12px) var(--space-medium, 24px);
    border-bottom: 1px solid var(--etb-veil);
    vertical-align: middle;
}


.eesier-table > table > tbody > tr:last-child > td {
    border-bottom: none;
}


/* HOVER DE LINHA — SÓ QUANDO A TABELA SE DECLARA INTERATIVA */

@media (hover: hover) {

    .eesier-table.eesier-table-interactive > table > tbody > tr:hover > td {
        background: var(--etb-hover);
    }
}


.eesier-table.eesier-table-interactive > table > tbody > tr {
    cursor: pointer;
}


/* ZEBRA OPCIONAL — O MESMO VÉU COMO FUNDO ALTERNADO, NUNCA UMA COR NOVA */

.eesier-table.eesier-table-zebra > table > tbody > tr:nth-child(even) > td {
    background: var(--etb-veil);
}


/* NÚMEROS — ALINHADOS À DIREITA E EM ALGARISMOS TABULARES PARA COLUNAS SOMÁVEIS */

.eesier-table > table > thead > tr > th.is-numeric,
.eesier-table > table > tbody > tr > td.is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ORDENAÇÃO — O CABEÇALHO ORDENÁVEL É UM BOTÃO DE TEXTO PURO COM O MESMO
   RITMO ÍCONE-RÓTULO DE 12px DO SISTEMA. SEM DIREÇÃO: arrows-sort MUDO;
   ATIVO: chevron-up OU chevron-down NA COR ATIVA. */

.eesier-table > table > thead > tr > th > .eesier-table-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-small, 12px);
    border: none;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-transform: inherit;
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


@media (hover: hover) {

    .eesier-table > table > thead > tr > th > .eesier-table-sort:hover {
        color: var(--etb-active);
    }
}


.eesier-table > table > thead > tr > th[aria-sort] > .eesier-table-sort {
    color: var(--etb-active);
}


.eesier-table > table > thead > tr > th > .eesier-table-sort:focus-visible {
    outline: 2px solid var(--etb-active);
    outline-offset: 2px;
    border-radius: var(--radius-standard, 12px);
}


.eesier-table > table > thead > tr > th > .eesier-table-sort > .eicon {
    width: var(--space-small, 12px);
    height: var(--space-small, 12px);
}


/* CÉLULA VAZIA DA TABELA — O ESTADO VAZIO DO SISTEMA DENTRO DA FOLHA */

.eesier-table > table > tbody > tr > td.eesier-table-empty-cell {
    height: auto;
    padding: var(--space-large, 48px) var(--space-medium, 24px);
    text-align: center;
    color: var(--etb-muted);
}