/* ==========================================================================
   Eesier Cartões (design system component)
   Razor: Views/Shared/_StatCard.cshtml · Model: StatCardViewModel
   Documentação: /Design/Cartoes.

   A FOLHA (.eesier-card) é a mesma superfície do painel de tabs e do modal:
   superfície, borda de 1px, raio de 12px e a MESMA sombra — uma só folha em
   todo o sistema. Moldura de canvas: 24px em TODA borda entre o cartão e o
   seu conteúdo. O cartão de indicador (.eesier-stat-card) é a folha com um
   selo de ícone, o valor e o rótulo — hierarquia por tamanho + peso, nunca
   por uma cor nova.

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

.eesier-card {
    --ec-surface: var(--color-surface, #ffffff);
    --ec-border: var(--color-border, #e2e8f0);
    --ec-shadow: color-mix(in srgb, var(--color-text-dark, #0f172a) 8%, transparent);
    --ec-text: var(--color-text-dark, #0f172a);
    --ec-muted: var(--color-muted, #475569);

    display: flex;
    flex-direction: column;
    gap: var(--space-small, 12px);
    padding: var(--space-medium, 24px);
    border: 1px solid var(--ec-border);
    border-radius: var(--radius-standard, 12px);
    background: var(--ec-surface);
    box-shadow: 0 var(--space-small, 12px) var(--space-medium, 24px) var(--ec-shadow);
    color: var(--ec-text);
}


.dark .eesier-card,
.eesier-card.dark {
    --ec-surface: var(--color-surface-dark, #101f38);
    --ec-border: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
    --ec-shadow: color-mix(in srgb, var(--color-canvas-dark, #0a1628) 48%, transparent);
    --ec-text: var(--color-text-on-dark, #ffffff);
    --ec-muted: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
}


/* CARTÃO CLICÁVEL — A FOLHA INTEIRA É O ALVO: BORDA GANHA A COR ATIVA NO
   HOVER (ESTADO, NÃO MOVIMENTO — NADA CRESCE NEM LEVANTA). */

a.eesier-card {
    text-decoration: none;
    transition: border-color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


@media (hover: hover) {

    a.eesier-card:hover {
        border-color: var(--color-palette-primary, #1c91e4);
    }
}


a.eesier-card:focus-visible {
    outline: 2px solid var(--color-palette-primary, #1c91e4);
    outline-offset: 2px;
}


/* ------------------------------------------------------------------------------ */


/* GRADE DE CARTÕES — COLUNAS FLUIDAS COM PISO DE 240px E RESPIRO DE 24px.
   A DISTÂNCIA ENTRE IRMÃOS VEM DO gap DO CONTAINER, NUNCA DE MARGENS. */

.eesier-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-medium, 24px);
}


/* ------------------------------------------------------------------------------ */


/* CARTÃO DE INDICADOR — SELO DE ÍCONE (48px, SUPERFÍCIE SEMÂNTICA SUAVE),
   RÓTULO NO PAPEL DE TÍTULO DE GRUPO E VALOR EM DESTAQUE LOGO ABAIXO. O RÓTULO
   É O IDENTIFICADOR: NUMA GRADE DE INDICADORES A VARREDURA LÊ SELO → NOME →
   NÚMERO, NUNCA UMA PAREDE DE NÚMEROS COM NOMES MIÚDOS. O DELTA OPCIONAL É UM
   BADGE DO SISTEMA. */

.eesier-stat-card {
    --esc-icon-color: var(--color-palette-primary, #1c91e4);
    --esc-icon-surface: var(--color-palette-primary-surface, #eef7ff);

    /* O SELO ANCORA NO TOPO, ALINHADO AO RÓTULO — NÃO FLUTUA NO CENTRO DO CARTÃO */

    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-medium, 24px);
}


.eesier-stat-card > .eesier-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--control-height, 48px);
    height: var(--control-height, 48px);
    border-radius: var(--radius-standard, 12px);
    background: var(--esc-icon-surface);
    color: var(--esc-icon-color);
}


.eesier-stat-card > .eesier-stat-icon > .eicon {
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
}


/* AS MESMAS QUATRO TINTAS SEMÂNTICAS DO BADGE — NENHUMA COR NOVA */

.eesier-stat-card.eesier-stat-success {
    --esc-icon-color: color-mix(in srgb, var(--color-success, #22c55e) 75%, var(--color-canvas-dark, #0a1628));
    --esc-icon-surface: var(--color-success-surface, #f0fdf4);
}


.eesier-stat-card.eesier-stat-warning {
    --esc-icon-color: color-mix(in srgb, var(--color-warning, #f59e0b) 75%, var(--color-canvas-dark, #0a1628));
    --esc-icon-surface: var(--color-warning-surface, #fffbeb);
}


.eesier-stat-card.eesier-stat-danger {
    --esc-icon-color: var(--color-danger, #ef4444);
    --esc-icon-surface: var(--color-danger-surface, #fef2f2);
}


.dark .eesier-stat-card,
.eesier-stat-card.dark {
    --esc-icon-color: var(--color-palette-secondary, #4fbefe);
    --esc-icon-surface: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 16%, transparent);
}


.dark .eesier-stat-card.eesier-stat-success {
    --esc-icon-color: var(--color-success, #22c55e);
    --esc-icon-surface: color-mix(in srgb, var(--color-success, #22c55e) 16%, transparent);
}


.dark .eesier-stat-card.eesier-stat-warning {
    --esc-icon-color: var(--color-warning, #f59e0b);
    --esc-icon-surface: color-mix(in srgb, var(--color-warning, #f59e0b) 16%, transparent);
}


/* NO ESCURO O VERMELHO CLAREIA 75% RUMO AO TEXTO-SOBRE-ESCURO — O GESTO
   ESPELHADO DA FÓRMULA DO CLARO (VER badges.css). */

.dark .eesier-stat-card.eesier-stat-danger {
    --esc-icon-color: color-mix(in srgb, var(--color-danger, #ef4444) 75%, var(--color-text-on-dark, #ffffff));
    --esc-icon-surface: color-mix(in srgb, var(--color-danger, #ef4444) 16%, transparent);
}


.eesier-stat-card > .eesier-stat-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium, 24px);
    min-width: 0;
}


/* O RÓTULO FALA NO PAPEL DO TÍTULO DE GRUPO DO MENU LATERAL
   (.text-navigation-group) COM UMA EXCEÇÃO: A ENTRELINHA APERTA PARA 18px —
   NUM RÓTULO DE DUAS LINHAS DENTRO DO CARTÃO, A CADÊNCIA DE 24px DO TEXTO
   CORRIDO ABRE DEMAIS E O NOME SE SOLTA DO NÚMERO. AS REGRAS FICAM AQUI
   TAMBÉM PORQUE ESTE ARQUIVO É CONSUMIDO STANDALONE, SEM site.css CARREGADO. */

.eesier-stat-card > .eesier-stat-body > .eesier-stat-label {
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 700;
    line-height: 18px;
    color: var(--ec-muted);
    text-transform: lowercase;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}


/* A LINHA DO VALOR — O DELTA OPCIONAL SENTA AO LADO DO NÚMERO, A 12px,
   ALINHADO AO CENTRO DELE. ABAIXO DO RÓTULO, NUNCA SOLTO NA BORDA DO CARTÃO. */

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


.eesier-stat-card > .eesier-stat-body > .eesier-stat-value-row > .eesier-stat-value {
    font-size: var(--type-size-heading, 1.5rem);
    font-weight: 400;
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}


/* VALOR ZERADO OU VAZIO — SILÊNCIO, NÃO DESTAQUE: O NÚMERO RECUA PARA QUE A
   VARREDURA PARE ONDE HÁ ALGO A LER. A CLASSE É POSTA PELA PRÓPRIA PARTIAL. */

.eesier-stat-card > .eesier-stat-body > .eesier-stat-value-row > .eesier-stat-value.is-zero {
    opacity: .3;
}


.eesier-stat-card > .eesier-stat-body > .eesier-stat-value-row > .eesier-stat-trail {
    flex-shrink: 0;
}