/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / STATS

   Responsabilidades:
   - indicadores e métricas;
   - valores financeiros e percentuais;
   - variações e tendências;
   - contexto e comparações;
   - ícones;
   - ações;
   - organização em grid;
   - integração visual com progresso e gráficos;
   - estados de carregamento e indisponibilidade.

   Não inclui:
   - gráficos próprios;
   - barra de progresso própria;
   - skeleton próprio;
   - botões próprios;
   - estilos exclusivos de páginas.

   Dependências:
   - tokens.css;
   - components/buttons.css;
   - components/badges.css;
   - components/loaders.css.
   ========================================================== */


/* ==========================================================
   INDICADOR BASE

   As variáveis internas concentram medidas e aparência.
   Novas páginas devem combinar as classes existentes em vez
   de criar versões próprias do indicador.
   ========================================================== */

.ayw-stat {
    --ayw-stat-padding: var(--ayw-space-5);
    --ayw-stat-gap: var(--ayw-space-4);

    --ayw-stat-border-width: 1px;
    --ayw-stat-border-color: var(--ayw-border);

    --ayw-stat-radius: var(--ayw-radius-lg);

    --ayw-stat-bg: var(--ayw-surface);
    --ayw-stat-color: var(--ayw-text);

    --ayw-stat-shadow: var(--ayw-shadow-sm);

    --ayw-stat-label-color: var(--ayw-text-muted);
    --ayw-stat-value-color: var(--ayw-text);
    --ayw-stat-meta-color: var(--ayw-text-muted);

    --ayw-stat-icon-size: 46px;
    --ayw-stat-icon-bg: var(--ayw-primary-soft);
    --ayw-stat-icon-color: var(--ayw-primary);
    --ayw-stat-icon-radius: var(--ayw-radius-md);

    --ayw-stat-change-color: var(--ayw-text-muted);

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 0;

    padding: var(--ayw-stat-padding);

    border:
        var(--ayw-stat-border-width)
        solid
        var(--ayw-stat-border-color);

    border-radius: var(--ayw-stat-radius);

    background: var(--ayw-stat-bg);
    color: var(--ayw-stat-color);

    box-shadow: var(--ayw-stat-shadow);

    transition:
        border-color var(--ayw-transition-base),
        background-color var(--ayw-transition-base),
        box-shadow var(--ayw-transition-base),
        transform var(--ayw-transition-base);
}


/* ==========================================================
   VARIAÇÕES ESTRUTURAIS
   ========================================================== */

.ayw-stat-flat {
    --ayw-stat-shadow: none;
}

.ayw-stat-borderless {
    --ayw-stat-border-width: 0;
}

.ayw-stat-elevated {
    --ayw-stat-shadow: var(--ayw-shadow-md);
}


/* ==========================================================
   INDICADOR INCORPORADO

   Usado quando o indicador está dentro de uma superfície
   que já fornece fundo, borda, raio, sombra e espaçamento.
   ========================================================== */

.ayw-stat.ayw-stat-embedded {
    --ayw-stat-border-width: 0;
    --ayw-stat-radius: 0;
    --ayw-stat-bg: transparent;
    --ayw-stat-shadow: none;

    min-height: 0;
    padding: 0;
}


/* ==========================================================
   PREENCHIMENTO
   ========================================================== */

.ayw-stat-fill {
    height: 100%;
}


/* ==========================================================
   INDICADOR INTERATIVO
   ========================================================== */

.ayw-stat-hover,
.ayw-stat.is-interactive {
    cursor: pointer;
}

.ayw-stat-hover:hover,
.ayw-stat.is-interactive:hover {
    --ayw-stat-border-color: var(--ayw-primary-border);
    --ayw-stat-shadow: var(--ayw-shadow-md);

    transform: translateY(-2px);
}

.ayw-stat-hover:active,
.ayw-stat.is-interactive:active {
    transform: translateY(0);
}


/* ==========================================================
   LINK SOBREPOSTO

   Permite tornar todo o indicador clicável sem envolver
   botões ou controles internos no mesmo link.

   Estrutura:

   <article class="ayw-stat ayw-stat-hover">
       <a class="ayw-stat-link" href="...">
           <span class="ayw-sr-only">Ver detalhes</span>
       </a>

       ...
   </article>
   ========================================================== */

.ayw-stat-link {
    color: inherit;

    text-decoration: none;
}

.ayw-stat-link:hover {
    color: inherit;
}

.ayw-stat-link:focus-visible {
    outline: none;
}

.ayw-stat-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;

    border-radius: inherit;

    content: "";

    pointer-events: auto;
}

.ayw-stat-link:focus-visible::after {
    box-shadow:
        inset
        0 0 0 3px
        var(--ayw-focus-ring);
}


/* ==========================================================
   ELEMENTOS ACIMA DO LINK SOBREPOSTO
   ========================================================== */

.ayw-stat-actions,
.ayw-stat-footer,
.ayw-stat-control,
.ayw-stat-menu {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   CABEÇALHO
   ========================================================== */

.ayw-stat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    min-width: 0;

    gap: var(--ayw-stat-gap);
}

.ayw-stat-main {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-stat-header-actions {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: var(--ayw-space-2);
}


/* ==========================================================
   RÓTULO
   ========================================================== */

.ayw-stat-label {
    display: block;

    margin: 0;

    color: var(--ayw-stat-label-color);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-medium);
    line-height: var(--ayw-line-height-normal);

    overflow-wrap: anywhere;
}

.ayw-stat-eyebrow {
    display: block;

    margin:
        0
        0
        var(--ayw-space-2);

    color: var(--ayw-primary);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-bold);
    line-height: var(--ayw-line-height-normal);
    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* ==========================================================
   VALOR
   ========================================================== */

.ayw-stat-value {
    display: block;

    margin-top: var(--ayw-space-2);

    color: var(--ayw-stat-value-color);

    font-size:
        clamp(
            1.55rem,
            7vw,
            2rem
        );

    font-weight: var(--ayw-font-weight-bold);
    line-height: var(--ayw-line-height-tight);
    letter-spacing: -0.025em;

    overflow-wrap: anywhere;
}

.ayw-stat-value-sm {
    font-size: var(--ayw-font-size-xl);
}

.ayw-stat-value-lg {
    font-size:
        clamp(
            2rem,
            9vw,
            var(--ayw-font-size-4xl)
        );
}

.ayw-stat-value-xl {
    font-size:
        clamp(
            2.35rem,
            10vw,
            3.5rem
        );
}


/* ==========================================================
   VALORES FINANCEIROS E NUMÉRICOS
   ========================================================== */

.ayw-stat-value.is-number,
.ayw-stat-value.is-currency,
.ayw-stat-value.is-percent,
.ayw-stat-number,
.ayw-stat-currency,
.ayw-stat-percent {
    font-variant-numeric:
        tabular-nums
        lining-nums;
}

.ayw-stat-prefix,
.ayw-stat-suffix,
.ayw-stat-unit {
    color: var(--ayw-text-muted);

    font-size: 0.55em;
    font-weight: var(--ayw-font-weight-semibold);
    letter-spacing: 0;
}

.ayw-stat-prefix {
    margin-right: 0.18em;
}

.ayw-stat-suffix,
.ayw-stat-unit {
    margin-left: 0.18em;
}

.ayw-stat-decimal {
    font-size: 0.72em;
}


/* ==========================================================
   ÍCONE
   ========================================================== */

.ayw-stat-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: var(--ayw-stat-icon-size);
    height: var(--ayw-stat-icon-size);

    overflow: hidden;

    border-radius: var(--ayw-stat-icon-radius);

    background: var(--ayw-stat-icon-bg);
    color: var(--ayw-stat-icon-color);

    font-size: 1.2rem;
    line-height: 1;
}

.ayw-stat-icon svg,
.ayw-stat-icon img {
    display: block;

    width: 1em;
    height: 1em;
}

.ayw-stat-icon img {
    object-fit: contain;
}

.ayw-stat-icon-sm {
    --ayw-stat-icon-size: 38px;

    font-size: 1rem;
}

.ayw-stat-icon-lg {
    --ayw-stat-icon-size: 56px;

    font-size: 1.4rem;
}

.ayw-stat-icon.is-round {
    --ayw-stat-icon-radius: 50%;
}


/* ==========================================================
   VARIANTES SEMÂNTICAS DO ÍCONE
   ========================================================== */

.ayw-stat-icon-primary {
    --ayw-stat-icon-bg: var(--ayw-primary-soft);
    --ayw-stat-icon-color: var(--ayw-primary);
}

.ayw-stat-icon-success {
    --ayw-stat-icon-bg: var(--ayw-success-soft);
    --ayw-stat-icon-color: var(--ayw-success);
}

.ayw-stat-icon-danger {
    --ayw-stat-icon-bg: var(--ayw-danger-soft);
    --ayw-stat-icon-color: var(--ayw-danger);
}

.ayw-stat-icon-warning {
    --ayw-stat-icon-bg: var(--ayw-warning-soft);
    --ayw-stat-icon-color: var(--ayw-warning);
}

.ayw-stat-icon-info {
    --ayw-stat-icon-bg: var(--ayw-info-soft);
    --ayw-stat-icon-color: var(--ayw-info);
}

.ayw-stat-icon-neutral {
    --ayw-stat-icon-bg: var(--ayw-bg-muted);
    --ayw-stat-icon-color: var(--ayw-text-muted);
}


/* ==========================================================
   VARIAÇÃO E TENDÊNCIA
   ========================================================== */

.ayw-stat-change {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;

    gap: var(--ayw-space-1);

    margin-top: var(--ayw-space-3);

    color: var(--ayw-stat-change-color);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: 1.2;

    font-variant-numeric: tabular-nums;
}

.ayw-stat-change-icon {
    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    width: 1em;
    height: 1em;

    font-size: 0.9em;
    line-height: 1;
}

.ayw-stat-change-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}

.ayw-stat-change.is-positive,
.ayw-stat-change.is-success {
    --ayw-stat-change-color: var(--ayw-success);
}

.ayw-stat-change.is-negative,
.ayw-stat-change.is-danger {
    --ayw-stat-change-color: var(--ayw-danger);
}

.ayw-stat-change.is-warning {
    --ayw-stat-change-color: var(--ayw-warning);
}

.ayw-stat-change.is-info {
    --ayw-stat-change-color: var(--ayw-info);
}

.ayw-stat-change.is-neutral,
.ayw-stat-change.is-unchanged {
    --ayw-stat-change-color: var(--ayw-text-muted);
}


/* ==========================================================
   COMPARAÇÃO DA VARIAÇÃO
   ========================================================== */

.ayw-stat-change-context {
    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-regular);
}


/* ==========================================================
   CONTEXTO
   ========================================================== */

.ayw-stat-meta {
    margin:
        var(--ayw-space-3)
        0
        0;

    color: var(--ayw-stat-meta-color);

    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-relaxed);

    overflow-wrap: anywhere;
}

.ayw-stat-meta strong {
    color: var(--ayw-text-soft);

    font-weight: var(--ayw-font-weight-semibold);
}


/* ==========================================================
   DETALHES AUXILIARES
   ========================================================== */

.ayw-stat-details {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: var(--ayw-space-2);

    margin-top: var(--ayw-space-4);
}

.ayw-stat-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    gap: var(--ayw-space-3);

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-normal);
}

.ayw-stat-detail-label {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ayw-stat-detail-value {
    flex: 0 0 auto;

    color: var(--ayw-text-soft);

    font-weight: var(--ayw-font-weight-semibold);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================
   RODAPÉ E AÇÕES
   ========================================================== */

.ayw-stat-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    gap: var(--ayw-space-3);

    margin-top: auto;
    padding-top: var(--ayw-space-5);
}

.ayw-stat-footer.is-start {
    justify-content: flex-start;
}

.ayw-stat-footer.is-end {
    justify-content: flex-end;
}

.ayw-stat-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-2);
}


/* ==========================================================
   ÁREA DE PROGRESSO

   A aparência e a animação da barra pertencem a:
   components/loaders.css

   Estrutura recomendada:

   <div class="ayw-stat-progress">
       <div class="ayw-stat-progress-header">...</div>
       <div class="ayw-progress">...</div>
   </div>
   ========================================================== */

.ayw-stat-progress {
    width: 100%;

    margin-top: var(--ayw-space-4);
}

.ayw-stat-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    gap: var(--ayw-space-3);

    margin-bottom: var(--ayw-space-2);

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-medium);
    line-height: var(--ayw-line-height-normal);
}

.ayw-stat-progress-label {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ayw-stat-progress-value {
    flex: 0 0 auto;

    color: var(--ayw-text-soft);

    font-weight: var(--ayw-font-weight-semibold);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================
   ÁREA DE GRÁFICO

   O componente cria somente o recipiente. A renderização do
   gráfico pertence à biblioteca ou ao JavaScript utilizado.
   ========================================================== */

.ayw-stat-chart {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 72px;

    margin-top: var(--ayw-space-4);

    overflow: hidden;

    border-radius: var(--ayw-radius-md);

    background: var(--ayw-bg-soft);
}

.ayw-stat-chart-sm {
    min-height: 48px;
}

.ayw-stat-chart-lg {
    min-height: 120px;
}

.ayw-stat-chart canvas,
.ayw-stat-chart svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* ==========================================================
   SPARKLINE

   Recipiente compacto para gráficos pequenos.
   ========================================================== */

.ayw-stat-sparkline {
    position: relative;

    width: 100%;
    height: 40px;

    margin-top: var(--ayw-space-3);

    overflow: hidden;
}

.ayw-stat-sparkline canvas,
.ayw-stat-sparkline svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* ==========================================================
   INDICADOR COMPACTO
   ========================================================== */

.ayw-stat-compact {
    --ayw-stat-padding: var(--ayw-space-4);
    --ayw-stat-gap: var(--ayw-space-3);
    --ayw-stat-icon-size: 40px;
}

.ayw-stat-compact .ayw-stat-value {
    font-size: var(--ayw-font-size-2xl);
}

.ayw-stat-compact .ayw-stat-footer {
    padding-top: var(--ayw-space-4);
}


/* ==========================================================
   INDICADOR CONFORTÁVEL
   ========================================================== */

.ayw-stat-comfortable {
    --ayw-stat-padding: var(--ayw-space-6);
    --ayw-stat-gap: var(--ayw-space-5);
    --ayw-stat-icon-size: 52px;
}


/* ==========================================================
   INDICADOR HORIZONTAL
   ========================================================== */

.ayw-stat-horizontal {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    column-gap: var(--ayw-space-4);
}

.ayw-stat-horizontal .ayw-stat-header {
    display: contents;
}

.ayw-stat-horizontal .ayw-stat-main {
    grid-column: 1;
}

.ayw-stat-horizontal .ayw-stat-icon {
    grid-column: 2;
    grid-row: 1;
}

.ayw-stat-horizontal .ayw-stat-footer,
.ayw-stat-horizontal .ayw-stat-progress,
.ayw-stat-horizontal .ayw-stat-chart,
.ayw-stat-horizontal .ayw-stat-sparkline,
.ayw-stat-horizontal .ayw-stat-details {
    grid-column: 1 / -1;
}


/* ==========================================================
   INDICADOR DE DESTAQUE
   ========================================================== */

.ayw-stat-highlight {
    --ayw-stat-border-color: var(--ayw-primary-border);
    --ayw-stat-value-color: var(--ayw-primary);

    --ayw-stat-bg:
        linear-gradient(
            145deg,
            var(--ayw-primary-soft),
            var(--ayw-surface)
        );
}


/* ==========================================================
   VARIAÇÕES SEMÂNTICAS

   As variantes alteram borda e cor principal sem forçar um
   fundo forte em todos os indicadores.
   ========================================================== */

.ayw-stat-success {
    --ayw-stat-border-color:
        color-mix(
            in srgb,
            var(--ayw-success) 32%,
            var(--ayw-border)
        );
}

.ayw-stat-danger {
    --ayw-stat-border-color:
        color-mix(
            in srgb,
            var(--ayw-danger) 32%,
            var(--ayw-border)
        );
}

.ayw-stat-warning {
    --ayw-stat-border-color:
        color-mix(
            in srgb,
            var(--ayw-warning) 32%,
            var(--ayw-border)
        );
}

.ayw-stat-info {
    --ayw-stat-border-color:
        color-mix(
            in srgb,
            var(--ayw-info) 32%,
            var(--ayw-border)
        );
}


/* ==========================================================
   VARIAÇÕES SEMÂNTICAS SUAVES
   ========================================================== */

.ayw-stat-soft-primary {
    --ayw-stat-border-color: var(--ayw-primary-border);

    --ayw-stat-bg:
        color-mix(
            in srgb,
            var(--ayw-primary-soft) 72%,
            var(--ayw-surface)
        );

    --ayw-stat-value-color: var(--ayw-primary);
}

.ayw-stat-soft-success {
    --ayw-stat-border-color:
        color-mix(
            in srgb,
            var(--ayw-success) 28%,
            var(--ayw-border)
        );

    --ayw-stat-bg:
        color-mix(
            in srgb,
            var(--ayw-success-soft) 72%,
            var(--ayw-surface)
        );

    --ayw-stat-value-color: var(--ayw-success);
}

.ayw-stat-soft-danger {
    --ayw-stat-border-color:
        color-mix(
            in srgb,
            var(--ayw-danger) 28%,
            var(--ayw-border)
        );

    --ayw-stat-bg:
        color-mix(
            in srgb,
            var(--ayw-danger-soft) 72%,
            var(--ayw-surface)
        );

    --ayw-stat-value-color: var(--ayw-danger);
}

.ayw-stat-soft-warning {
    --ayw-stat-border-color:
        color-mix(
            in srgb,
            var(--ayw-warning) 28%,
            var(--ayw-border)
        );

    --ayw-stat-bg:
        color-mix(
            in srgb,
            var(--ayw-warning-soft) 72%,
            var(--ayw-surface)
        );

    --ayw-stat-value-color: var(--ayw-warning);
}

.ayw-stat-soft-info {
    --ayw-stat-border-color:
        color-mix(
            in srgb,
            var(--ayw-info) 28%,
            var(--ayw-border)
        );

    --ayw-stat-bg:
        color-mix(
            in srgb,
            var(--ayw-info-soft) 72%,
            var(--ayw-surface)
        );

    --ayw-stat-value-color: var(--ayw-info);
}


/* ==========================================================
   GRUPOS E GRID

   O grid base é mobile-first.
   ========================================================== */

.ayw-stats-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    width: 100%;
    min-width: 0;

    gap: var(--ayw-space-4);
}

.ayw-stats-grid-compact {
    gap: var(--ayw-space-3);
}

.ayw-stats-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    gap: var(--ayw-space-3);
}


/* ==========================================================
   QUANTIDADE EXPLÍCITA DE COLUNAS

   Aplicadas junto de .ayw-stats-grid.
   Em telas pequenas continuam em uma coluna.
   ========================================================== */

.ayw-stats-grid-2,
.ayw-stats-grid-3,
.ayw-stats-grid-4 {
    grid-template-columns:
        minmax(0, 1fr);
}


/* ==========================================================
   ESTADO DE CARREGAMENTO

   O visual pertence a loaders.css.
   ========================================================== */

.ayw-stat[aria-busy="true"],
.ayw-stat.is-loading {
    cursor: wait;
}

.ayw-stat[aria-busy="true"] > :not(.ayw-loading-overlay),
.ayw-stat.is-loading > :not(.ayw-loading-overlay) {
    opacity: 0.55;

    pointer-events: none;
}

.ayw-stat > .ayw-loading-overlay {
    z-index: 3;

    border-radius: inherit;
}


/* ==========================================================
   SKELETON

   A aparência e a animação pertencem a loaders.css.
   Este bloco controla apenas a composição no indicador.
   ========================================================== */

.ayw-stat-skeleton {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: var(--ayw-space-3);
}

.ayw-stat-skeleton-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    min-width: 0;

    gap: var(--ayw-space-4);
}

.ayw-stat-skeleton-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;

    gap: var(--ayw-space-2);
}


/* ==========================================================
   ESTADO INDISPONÍVEL
   ========================================================== */

.ayw-stat.is-unavailable {
    --ayw-stat-bg: var(--ayw-bg-soft);
    --ayw-stat-value-color: var(--ayw-text-muted);

    box-shadow: none;
}

.ayw-stat.is-unavailable .ayw-stat-value {
    font-weight: var(--ayw-font-weight-semibold);
}


/* ==========================================================
   ESTADO DESABILITADO
   ========================================================== */

.ayw-stat.is-disabled,
.ayw-stat[aria-disabled="true"] {
    opacity: 0.55;

    pointer-events: none;
}


/* ==========================================================
   MOBILE COMPACTO
   ========================================================== */

@media (max-width: 374px) {
    .ayw-stat {
        --ayw-stat-padding: var(--ayw-space-4);
        --ayw-stat-gap: var(--ayw-space-3);
        --ayw-stat-icon-size: 40px;
    }

    .ayw-stat-value {
        font-size: var(--ayw-font-size-2xl);
    }

    .ayw-stats-row {
        grid-template-columns:
            minmax(0, 1fr);
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 768px) {
    .ayw-stat {
        --ayw-stat-padding: var(--ayw-space-6);
    }

    .ayw-stat-compact {
        --ayw-stat-padding: var(--ayw-space-4);
    }

    .ayw-stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: var(--ayw-space-6);
    }

    .ayw-stats-grid-compact {
        gap: var(--ayw-space-3);
    }

    .ayw-stats-grid-2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ayw-stats-grid-3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ayw-stats-grid-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 992px) {
    .ayw-stats-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .ayw-stats-grid-2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ayw-stats-grid-3 {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .ayw-stats-grid-4 {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .ayw-stat {
        transition: none;
    }

    .ayw-stat-hover:hover,
    .ayw-stat.is-interactive:hover,
    .ayw-stat-hover:active,
    .ayw-stat.is-interactive:active {
        transform: none;
    }
}


/* ==========================================================
   FALLBACK PARA COLOR-MIX
   ========================================================== */

@supports not (
    color:
        color-mix(
            in srgb,
            black,
            white
        )
) {
    .ayw-stat-success,
    .ayw-stat-soft-success {
        --ayw-stat-border-color: var(--ayw-success);
    }

    .ayw-stat-danger,
    .ayw-stat-soft-danger {
        --ayw-stat-border-color: var(--ayw-danger);
    }

    .ayw-stat-warning,
    .ayw-stat-soft-warning {
        --ayw-stat-border-color: var(--ayw-warning);
    }

    .ayw-stat-info,
    .ayw-stat-soft-info {
        --ayw-stat-border-color: var(--ayw-info);
    }

    .ayw-stat-soft-primary {
        --ayw-stat-bg: var(--ayw-primary-soft);
    }

    .ayw-stat-soft-success {
        --ayw-stat-bg: var(--ayw-success-soft);
    }

    .ayw-stat-soft-danger {
        --ayw-stat-bg: var(--ayw-danger-soft);
    }

    .ayw-stat-soft-warning {
        --ayw-stat-bg: var(--ayw-warning-soft);
    }

    .ayw-stat-soft-info {
        --ayw-stat-bg: var(--ayw-info-soft);
    }
}