/* ==========================================================================
   Eesier Estados (design system component)
   Razor: Views/Shared/_EmptyState.cshtml · Model: EmptyStateViewModel
   Documentação: /Design/Estados.

   Os estados transitórios do sistema: carregando (spinner + esqueleto),
   progresso e vazio. UM só spinner em todo o sistema (o mesmo desenho do
   botão de formulário), UM só esqueleto (o véu que respira), UMA só barra de
   progresso. O estado vazio é honesto: ícone + título + explicação + a
   próxima ação — nunca uma tela em branco.

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

.eesier-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
    border: 2px solid color-mix(in srgb, var(--color-palette-primary, #1c91e4) 25%, transparent);
    border-top-color: var(--color-palette-primary, #1c91e4);
    border-radius: var(--radius-pill, 999px);
    animation: eesier-spin calc(var(--motion-standard, 0.36s) * 2) linear infinite;
}


/* GRANDE — PARA O CENTRO DE UMA REGIÃO INTEIRA CARREGANDO (48px, ALVO DE CONTROLE) */

.eesier-spinner.eesier-spinner-large {
    width: var(--control-height, 48px);
    height: var(--control-height, 48px);
    border-width: 3px;
}


.dark .eesier-spinner,
.eesier-spinner.dark {
    border-color: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 25%, transparent);
    border-top-color: var(--color-palette-secondary, #4fbefe);
}


@keyframes eesier-spin {
    to {
        transform: rotate(360deg);
    }
}


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


/* ESQUELETO — O VÉU QUE RESPIRA: A MESMA TINTA A 5% DOS FILETES, PULSANDO EM
   OPACIDADE (ESTADO, NÃO VARREDURA). LINHA = TEXTO; BLOCO = MÍDIA/CARTÃO;
   AVATAR = CÍRCULO DE 48px. */

.eesier-skeleton {
    display: block;
    border-radius: var(--radius-standard, 12px);
    background: color-mix(in srgb, var(--color-text-dark, #0f172a) 8%, transparent);
    animation: eesier-skeleton-breathe calc(var(--motion-standard, 0.36s) * 4) var(--ease-state, ease-in-out) infinite;
}


.dark .eesier-skeleton,
.eesier-skeleton.dark {
    background: color-mix(in srgb, var(--color-text-on-dark, #ffffff) 10%, transparent);
}


.eesier-skeleton.eesier-skeleton-line {
    height: var(--space-small, 12px);
    border-radius: var(--radius-pill, 999px);
}


.eesier-skeleton.eesier-skeleton-block {
    height: var(--space-large, 48px);
}


.eesier-skeleton.eesier-skeleton-avatar {
    width: var(--control-height, 48px);
    height: var(--control-height, 48px);
    border-radius: var(--radius-pill, 999px);
}


@keyframes eesier-skeleton-breathe {
    0%, 100% {
        opacity: 1;
    }


    50% {
        opacity: 0.45;
    }
}


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


/* PROGRESSO — TRILHO DE VÉU COM PREENCHIMENTO PRIMÁRIO. O VALOR ENTRA POR
   --value (0 A 100) NO PRÓPRIO ELEMENTO; O MOVIMENTO DO PREENCHIMENTO VIAJA
   COM --ease-travel. */

.eesier-progress {
    --ep-value: var(--value, 0);

    display: block;
    width: 100%;
    height: var(--space-tight, 6px);
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--color-text-dark, #0f172a) 8%, transparent);
    overflow: hidden;
}


.dark .eesier-progress,
.eesier-progress.dark {
    background: color-mix(in srgb, var(--color-text-on-dark, #ffffff) 10%, transparent);
}


.eesier-progress > .eesier-progress-fill {
    display: block;
    width: calc(var(--ep-value) * 1%);
    height: 100%;
    border-radius: inherit;
    background: var(--color-palette-primary, #1c91e4);
    transition: width var(--motion-standard, 0.36s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1));
}


.eesier-progress.eesier-progress-success > .eesier-progress-fill {
    background: var(--color-success, #22c55e);
}


.eesier-progress.eesier-progress-warning > .eesier-progress-fill {
    background: var(--color-warning, #f59e0b);
}


.eesier-progress.eesier-progress-danger > .eesier-progress-fill {
    background: var(--color-danger, #ef4444);
}


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


/* ESTADO VAZIO — CENTRADO, COM RESPIRO DE SEÇÃO (48px) E A PRÓXIMA AÇÃO.
   O ÍCONE MORA NUM SELO DE 48px NA SUPERFÍCIE PRIMÁRIA SUAVE. */

.eesier-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-small, 12px);
    padding: var(--space-large, 48px) var(--space-medium, 24px);
    text-align: center;
}


.eesier-empty > .eesier-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height, 48px);
    height: var(--control-height, 48px);
    border-radius: var(--radius-standard, 12px);
    background: var(--color-palette-primary-surface, #eef7ff);
    color: var(--color-palette-primary, #1c91e4);
}


.dark .eesier-empty > .eesier-empty-icon {
    background: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 16%, transparent);
    color: var(--color-palette-secondary, #4fbefe);
}


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


.eesier-empty > .eesier-empty-title {
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-dark, #0f172a);
    text-transform: lowercase;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}


.dark .eesier-empty > .eesier-empty-title {
    color: var(--color-text-on-dark, #ffffff);
}


.eesier-empty > .eesier-empty-description {
    max-width: 480px;
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 500;
    line-height: var(--space-medium, 24px);
    color: var(--color-muted, #475569);
}


.dark .eesier-empty > .eesier-empty-description {
    color: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
}


/* A AÇÃO GANHA UM DEGRAU PRÓPRIO DE RESPIRO ACIMA (12 DO gap + 12 = 24) */

.eesier-empty > .eesier-empty-action {
    padding-top: var(--space-small, 12px);
}


/* QUANDO A AÇÃO É UM FORMULÁRIO, ELE ADOTA A MEDIDA DO PARÁGRAFO ACIMA (os mesmos 480px de
   .eesier-empty-description) — as bordas dos campos alinham com o texto que os explica. Sem isto o
   align-items: center do contêiner encolhe o formulário até o conteúdo e ele fica como uma coluna
   estreita boiando sob um parágrafo bem mais largo. Restrito a :has(> .eesier-form) de propósito:
   uma ação que seja só um botão ou um link continua com a largura natural dela. */

.eesier-empty > .eesier-empty-action:has(> .eesier-form) {
    align-self: stretch;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
}


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

    .eesier-spinner,
    .eesier-skeleton,
    .eesier-progress > .eesier-progress-fill {
        animation: none;
        transition: none;
    }
}