/* =============================================================================
   Movimento do módulo Financeiro
   =============================================================================
   Por que uma folha global e não CSS isolado por componente: o isolamento do
   Blazor exige uma cópia de cada regra em cada .razor.css, e o módulo tem 9
   páginas e 18 componentes. Isso já falhou aqui — `.urgent-badge` estava no
   markup de 5 componentes e definido em apenas 2, então o badge de urgência
   nunca pulsou nos modais de visualização nem no de substituição de previsão.
   Repetir keyframes em 27 arquivos repetiria o erro.

   Como isso NÃO vaza para os outros módulos: aqui só existem classes opt-in
   com prefixo `fin-` (mais `.urgent-badge`, que é do Financeiro). Nenhum
   seletor de elemento, de classe do Bootstrap ou do Kernel — nada se aplica a
   uma tela que não peça explicitamente pela classe.

   O que precisa alcançar HTML renderizado pelo Kernel (linha de detalhe da
   tabela, hover de linha) não cabe aqui: depende de `::deep`, que só funciona
   dentro do .razor.css da própria página.

   Duração: 140–160ms, deslocamento de 6px. É a mesma ordem de grandeza do
   `transition: transform .12s` que os cards de KPI já usavam, para o conjunto
   ficar coerente e não dar sensação de lentidão a quem usa a tela o dia todo.
   ============================================================================= */

/* Entrada de um bloco de conteúdo: cards de KPI na montagem da tela, bloco da
   Analítica ao alternar de aba, alertas e botões que aparecem por condição.
   Em um elemento que o Blazor apenas atualiza (sem recriar), a animação roda uma
   vez na montagem e não se repete a cada consulta — que é o comportamento desejado. */
.fin-enter {
    animation: fin-fade-slide 160ms ease-out both;
}

/* Badges que aparecem por condição (Vencido, Parcial, Estornada, PREV, Situação).
   Escala em vez de deslocamento: um badge é pequeno e deslizar 6px o faria "pular"
   para fora da linha de base do texto ao lado. */
.fin-badge-in {
    animation: fin-fade-scale 140ms ease-out both;
}

/* Badge de urgência — cor cheia + leve pulso, para não ser só mais um badge na fila.
   Estava duplicado em Account{Payable,Receivable}WizardModal.razor.css e ausente nos
   outros três componentes que usam a classe; agora vale nos cinco. */
.urgent-badge {
    animation: urgent-pulse 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 rgba(220, 53, 69, 0.5);
}

@keyframes fin-fade-slide {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fin-fade-scale {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes urgent-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* ── Tabela ────────────────────────────────────────────────────────────────────
   `fin-grid` vai no <Card> que envolve a grade (o Card repassa a classe para o seu
   <div> raiz) ou, quando não há Card, num <div> da própria página.

   Por que não CSS isolado com ::deep, como as outras regras de tabela do módulo:
   ::deep compila para `[b-pagina] tr...`, o que exige um ELEMENTO da página como
   ancestral da linha. Estas telas colocam a grade dentro de <Card>, que é um
   componente — o <div class="card"> é renderizado pelo Card e não recebe o
   atributo de escopo da página, então não há onde ancorar. O AccountPayableStatCard
   funciona justamente porque tem um <div class="stat-card"> próprio em volta.
   Aqui a dependência fica explícita: a regra pede a classe, e a classe está no markup. */

/* Linha de detalhe: o Kernel alterna display none/table-row pela classe .show, e display
   não é animável — mas o conteúdo interno só é criado quando a linha expande, então a
   animação pega nele. */
.fin-grid tr.is-detail.show .table-cell {
    animation: fin-fade-slide 160ms ease-out both;
}

/* O realce ao passar o mouse trocava de cor instantaneamente, inclusive no urgent-row. */
.fin-grid tbody > tr {
    transition: background-color 0.15s ease-in-out;
}

/* Quem pediu ao sistema para reduzir movimento não recebe nenhum: o conteúdo aparece
   direto, no estado final. Os .razor.css do módulo que têm transições próprias repetem
   este bloco para as regras deles. */
@media (prefers-reduced-motion: reduce) {
    .fin-enter,
    .fin-badge-in,
    .urgent-badge,
    .fin-grid tr.is-detail.show .table-cell {
        animation: none;
    }

    .fin-grid tbody > tr {
        transition: none;
    }
}