/**
 * Cards Modernos e Responsivos - IMC Admin
 * Sistema de cards com design moderno, alinhado e responsivo
 */

/* ==========================================
   VARIAVEIS CSS
   ========================================== */
:root {
    /* Herdados do design-system.css, que carrega antes deste arquivo. */
    --card-border-radius: var(--ds-r-painel);
    --card-shadow: var(--ds-sombra-sm);
    --card-shadow-hover: var(--ds-sombra-md);
    --card-transition: var(--ds-transicao);
    --focus-ring: 0 0 0 3px rgba(65, 84, 241, .22);

    /* Mantidos só para gradiente de fundo largo (login, CTA). Chip de ícone
       usa a fórmula de tint do design system, não gradiente. */
    --gradient-primary: linear-gradient(135deg, var(--primary-color, #012970) 0%, var(--ds-indigo) 100%);
    --gradient-success: linear-gradient(135deg, #1f9d55 0%, var(--ds-sucesso) 100%);
    --gradient-danger: linear-gradient(135deg, #b02a37 0%, var(--ds-perigo) 100%);
    --gradient-warning: linear-gradient(135deg, #e2620a 0%, var(--ds-alerta) 100%);
    --gradient-info: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-indigo) 100%);
}

/* ==========================================
   FOCO VISÍVEL (acessibilidade de teclado)
   Não sobrepõe .btn, que já tem seu próprio :focus-visible em buttons.css.
   ========================================== */
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: .35rem;
}

/* ==========================================
   CARD BASE MODERNO
   ========================================== */
.card-modern {
    background: #ffffff;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    border: none;
    overflow: hidden;
    transition: var(--card-transition);
    height: 100%;
}

.card-modern:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-4px);
}

.card-modern .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ds-borda);
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .75rem;
    /* Título + filtros/ações no mesmo cabeçalho: no celular os filtros descem
       para a linha de baixo em vez de estourar a largura (Notificações). */
    flex-wrap: wrap;
}
.card-modern .card-header .btn-group { flex-wrap: wrap; }

.card-modern .card-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

/* Ícone colorido no cabeçalho de um card-modern — mesma ideia do
   .widget-icon-chip do dashboard, só que como classes reutilizáveis em vez
   de --acc inline, pra servir formulários com várias seções fixas. */
.card-modern .card-header .section-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
    flex-shrink: 0;
}

/* Chip de ícone: cor cheia no ícone, a mesma cor a ~9% no fundo. */
.card-modern .card-header .section-icon.primary   { background: var(--ds-tint);       color: var(--ds-indigo); }
.card-modern .card-header .section-icon.info      { background: var(--ds-info-bg);    color: var(--ds-info); }
.card-modern .card-header .section-icon.success   { background: var(--ds-sucesso-bg); color: var(--ds-sucesso); }
.card-modern .card-header .section-icon.warning   { background: var(--ds-alerta-bg);  color: var(--ds-alerta); }
.card-modern .card-header .section-icon.danger    { background: var(--ds-perigo-bg);  color: var(--ds-perigo); }
.card-modern .card-header .section-icon.secondary { background: #eef0f4;              color: var(--ds-texto-2); }
.card-modern .card-header .section-icon.purple    { background: var(--ds-roxo-bg);    color: var(--ds-roxo); }
.card-modern .card-header .section-icon.dark      { background: #e6e9f0;              color: var(--ds-navy); }

.card-modern .card-body {
    padding: 1.5rem;
}

/* Gráfico (Chart.js) responsivo. O Chart.js só redimensiona direito se o
   canvas tiver um container só dele, com position:relative e altura definida
   pelo CSS — e o gráfico com maintainAspectRatio:false. Canvas solto num
   .card-body (pior ainda com d-flex, que o vira item flex e segura a largura)
   não encolhia ao estreitar a janela e ficava cortado dentro do card. */
.ds-grafico {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 260px;
}
.ds-grafico.baixo { height: 220px; }

/* Par de gráficos lado a lado: abaixo de 640px cada um ficava com ~180px,
   rótulos girados e ilegíveis — melhor um por linha. */
@media (max-width: 640px) {
    .form-grid.cols-2.graficos { grid-template-columns: 1fr; }
}
.ds-grafico canvas { max-width: 100%; }

/* Cards de destaque do Relatório de Membros (mais velho / mais novo). Cor
   escura o bastante para o texto branco — antes o "mais velho" usava o tint
   claro do design system com texto branco e ficava ilegível. */
.card-destaque .card-body { color: #fff; }
.card-destaque.mais-velho { background: linear-gradient(135deg, #1e3a8a 0%, #4338ca 100%); }
.card-destaque.mais-novo  { background: linear-gradient(135deg, #0f766e 0%, #059669 100%); }

/* Tabela no celular/tablet: rolar para o lado é melhor que espremer. Sem isso
   o navegador encolhia as colunas até o limite e cada célula quebrava em 3–4
   linhas ("Culto / da / Família", data em duas linhas), mesmo com a tabela já
   dentro de .table-responsive. Coluna de texto longo (descrição) usa
   .td-texto: quebra linha, mas com largura mínima legível. */
@media (max-width: 768px) {
    .table-responsive > .table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
        white-space: nowrap;
    }
    .table-responsive > .table > tbody > tr > td.td-texto {
        white-space: normal;
        min-width: 14rem;
    }
}

/* ==========================================
   GRID DE FORMULARIO
   Substitui row/col-* do Bootstrap dentro de .content — a regra global
   ".content .row > div { flex:1 1 220px }" (ver
   adminmc-css-content-row-sobrescreve-grid-bootstrap na memória) ignora a
   largura pretendida de qualquer col-* usado ali. Um grid CSS próprio evita
   a colisão e ainda simplifica: uma única classe cobre a maioria das linhas
   de campos lado a lado de um formulário.
   ========================================== */
.form-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Filtro "campo(s) + grupo de botões": o grupo de botões não deve dividir
   espaço igual com os campos (ficaria enorme e vazio), então usa largura de
   conteúdo (auto) em vez de 1fr — só que "auto" não encolhe, então sem essas
   classes (em vez de style="grid-template-columns" solto na view) a tela não
   tinha como empilhar em telas estreitas: um style inline vence qualquer
   media query da folha de estilo, então a coluna dos botões era cortada da
   tela (ex.: filtro de Dízimos/Despesas). */
.form-grid.cols-1-auto { grid-template-columns: 1fr auto; }
.form-grid.cols-2-auto { grid-template-columns: 1fr 1fr auto; }

.form-columns {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* Item de grid tem min-width:auto — encolhe só até o conteúdo mínimo. Uma
   tabela larga dentro de .table-responsive (ou um canvas de gráfico) fazia a
   coluna crescer até caber a tabela inteira, em vez de a tabela rolar, e a
   página inteira estourava a largura no celular (Relatório de Membros). */
.form-grid > *,
.form-columns > * { min-width: 0; }

@media (max-width: 900px) {
    .form-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    .form-grid.cols-3,
    .form-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .form-grid.cols-2,
    .form-grid.cols-3,
    .form-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .form-grid.cols-1-auto,
    .form-grid.cols-2-auto {
        grid-template-columns: 1fr;
    }

    /* Várias views desenham a linha com style="grid-template-columns: 2fr 1fr"
       (CEP + número, título + tipo, busca + filtros). Style inline vence
       qualquer media query — só !important na folha o desfaz. Sem isso, no
       celular os campos viravam fiapos de 30–80px (Membros, Igrejas,
       Visitantes, Cultos, Usuários, Painel...). */
    .form-grid[style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.card-modern .card-footer {
    background: #f8fafc;
    border-top: 1px solid var(--ds-borda);
    padding: 1rem 1.5rem;
}

/* ==========================================
   RESUMO CARDS - CARDS DE RESUMO HORIZONTAL
   ========================================== */
.summary-row {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-row.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.summary-row.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.summary-card {
    background: var(--ds-superficie);
    border: 1px solid var(--ds-borda);
    border-radius: var(--ds-r-kpi);
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--ds-sombra-sm);
    transition: var(--card-transition);
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.summary-card .summary-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ds-r-chip);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.25rem;
}

.summary-card .summary-value {
    font-family: var(--ds-fonte-titulo);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.summary-card .summary-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-texto-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

.summary-card .summary-sublabel {
    font-size: 0.7rem;
    color: #9ca3af;
}

/* ==========================================
   EMPTY STATE — formaliza o padrão ad hoc
   ("text-center py-5" + ícone + h5 + p) já repetido em várias listagens
   ========================================== */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state > i:first-child {
    display: block;
    font-size: 2.5rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h5 {
    color: #6b7280;
    margin-bottom: .35rem;
}

.empty-state p {
    color: #9ca3af;
    margin-bottom: 1rem;
}

/* Estilos de botões movidos para buttons.css */

/* ==========================================
   PAGE HEADER MODERNO
   ========================================== */
.page-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header-modern .page-title-section h2 {
    font-family: var(--ds-fonte-titulo);
    font-size: 2rem;
    font-weight: 800;
    color: var(--ds-navy);
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-header-modern .page-title-section p {
    color: var(--ds-texto-corpo);
    margin: 0;
    font-size: 0.95rem;
}

.page-header-modern .page-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ==========================================
   FILTROS MODERNOS
   ========================================== */
.filter-card {
    background: var(--ds-superficie);
    border: 1px solid var(--ds-borda);
    border-radius: var(--ds-r-painel);
    box-shadow: var(--ds-sombra-sm);
    padding: var(--ds-e-5);
    margin-bottom: 1.5rem;
}

/* Chips de filtro — substitui <select> cru para escolhas de 2-4 opções
   (ex.: Todos/Ativos/Inativos). São <a> comuns (navegação GET, sem JS),
   só o estado .active muda visualmente. */
.filter-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: .4rem .95rem;
    border-radius: var(--ds-r-pill);
    border: 1px solid var(--ds-borda);
    background: var(--ds-superficie);
    color: var(--ds-texto-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: all .15s ease;
}

.filter-pill:hover {
    background: var(--ds-tint);
    color: var(--ds-navy);
    text-decoration: none;
}

.filter-pill.active {
    background: var(--ds-tint);
    border-color: var(--ds-indigo);
    color: var(--ds-navy);
}

/* ==========================================
   TABELA MODERNA
   ========================================== */
.table-modern {
    background: #ffffff;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    margin-top: .5rem;
}

.table-modern .table-modern-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ds-borda);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.table-modern .table-modern-header h5 {
    font-family: var(--ds-fonte-titulo);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ds-navy);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.table-modern .table {
    margin-bottom: 0;
}

.table-modern .table thead th {
    background: var(--ds-bg);
    border-bottom: 1px solid var(--ds-borda);
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ds-texto-2);
    padding: .85rem 1.25rem;
}

.table-modern .table tbody td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.table-modern .table tbody tr:hover {
    background: #f8fafc;
}

/* ==========================================
   PROGRESS BAR MODERNA
   ========================================== */
.progress-modern {
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    overflow: hidden;
}

/* A cor fica aqui: fora de um `.progress` do Bootstrap, `.progress-bar` não
   ganha fundo nenhum e a barra sai invisível. */
.progress-modern .progress-bar {
    height: 100%;
    border-radius: 4px;
    background: var(--ds-indigo);
    transition: width 0.6s ease;
}

/* ==========================================
   BADGE MODERNA
   ========================================== */
.badge-modern {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.3;
    white-space: nowrap;
}

.badge-modern.primary   { background: var(--ds-tint);       color: var(--ds-indigo); }
.badge-modern.success   { background: var(--ds-sucesso-bg); color: var(--ds-sucesso); }
.badge-modern.danger    { background: var(--ds-perigo-bg);  color: var(--ds-perigo); }
.badge-modern.warning   { background: var(--ds-alerta-bg);  color: var(--ds-alerta); }
.badge-modern.info      { background: var(--ds-info-bg);    color: var(--ds-info); }
.badge-modern.secondary { background: #eef0f4;              color: var(--ds-texto-2); }
.badge-modern.purple    { background: var(--ds-roxo-bg);    color: var(--ds-roxo); }

/* ==========================================
   AVATAR COM INICIAIS
   Cor e tamanho vêm inline (ver helper avatar_iniciais() em src/helpers.php);
   aqui só a forma/tipografia, compartilhada por navbar e listagens.
   ========================================== */
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ==========================================
   RESPONSIVIDADE
   ========================================== */
@media (max-width: 1200px) {

    .summary-row.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-row.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .page-header-modern {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-modern .page-actions {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /* .btn é nowrap no sistema todo; num botão com rótulo longo (ex.: "Novo
       usuário de <nome da igreja>") isso empurrava a página inteira para fora
       da tela no celular. No cabeçalho, deixa o rótulo quebrar. */
    .page-header-modern .page-actions .btn {
        white-space: normal;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .summary-row.cols-4,
    .summary-row.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .card-modern .card-header,
    .card-modern .card-body {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    
    .summary-row.cols-4,
    .summary-row.cols-3 {
        grid-template-columns: 1fr;
    }

    .page-header-modern .page-title-section h2 {
        font-size: 1.5rem;
    }

    .filter-card {
        padding: 1rem;
    }
}

/* ==========================================
   ANIMACOES
   ========================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}

/* Delay para animacoes em sequencia */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

/* ==========================================
   LOGIN MODERNO (skill 15-frontend-modernizacao)
   Reusa os mesmos tokens do sistema (--card-*, --gradient-*, .animate-fade-in-up)
   em vez de inventar uma paleta nova só para a tela de login.
   ========================================== */
.login-page-modern {
    background: var(--gradient-primary);
    /* Sem isso o degradê é calculado para a altura da tela e se repete quando
       a página rola (celular deitado), deixando uma emenda escura. */
    background-attachment: fixed;
    position: relative;
    /* Só o eixo X: os círculos decorativos vazam para os lados, mas cortar o
       Y impedia rolar o login num celular deitado, com o cartão cortado. */
    overflow-x: hidden;
    overflow-y: auto;
    /* O AdminLTE fixa .login-page em height:100vh e centraliza em coluna: com
       o cartão mais alto que a tela, o topo (logo) saía por cima, inalcançável.
       Altura mínima + margin:auto no filho centraliza sem cortar. */
    height: auto;
    min-height: 100vh;
    justify-content: flex-start;
    align-items: stretch;
}

.login-page-modern::before,
.login-page-modern::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.login-page-modern::before { width: 420px; height: 420px; top: -140px; left: -120px; }
.login-page-modern::after { width: 320px; height: 320px; bottom: -120px; right: -100px; }

.login-card-modern {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow-hover);
    overflow: hidden;
}

/* Faixa da marca no topo do cartão: a logo costuma vir com fundo colorido
   próprio, e a faixa na cor primária faz os dois se encontrarem sem recorte
   aparente. Sem logo, o ladrilho abaixo assume. */
.login-card-modern .login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 2rem;
    background: var(--primary-color, #2f3093);
}

/* Arte escura precisa de fundo claro para não sumir na cor da marca. */
.login-card-modern .login-brand.fundo-claro {
    background: #f4f5fb;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.login-card-modern .login-brand img {
    max-width: 190px;
    max-height: 96px;
    object-fit: contain;
}

/* Olho de mostrar/ocultar senha, dentro do campo. */
.login-card-modern .campo-senha {
    position: relative;
}

.login-card-modern .campo-senha .form-control {
    padding-right: 2.75rem;
}

.login-card-modern .btn-ver-senha {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #9aa1ae;
    padding: .35rem .5rem;
    line-height: 1;
    border-radius: 8px;
}

.login-card-modern .btn-ver-senha:hover { color: var(--primary-color, #2f3093); }

.login-card-modern .form-label i {
    color: var(--primary-color, #2f3093);
    margin-right: .35rem;
}

.login-card-modern .login-icon-modern {
    width: 72px;
    height: 72px;
    margin: 1.75rem auto 0;
    border-radius: 20px;
    background: var(--gradient-primary);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-color, #2f3093) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #fff;
    overflow: hidden;
}

.login-card-modern .login-icon-modern img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.login-card-modern .card-header {
    background: transparent;
    border-bottom: none;
    text-align: center;
    padding: 1rem 1.5rem 0;
}

.login-card-modern .card-body {
    padding: 1.5rem 2rem 2rem;
}

.login-card-modern .form-control {
    border: 1.5px solid #e4e7f0;
    border-radius: 10px;
    padding: .6rem .85rem;
    transition: var(--card-transition);
}

.login-card-modern .form-control:focus {
    border-color: var(--primary-color, #2f3093);
}

.login-card-modern .form-control:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color, #2f3093) 15%, transparent);
}

/* Assinatura fora do cartão: o nome da igreja não disputa espaço com o
   formulário, mas continua dizendo de quem é o sistema. */
.login-footer-modern {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 1.35rem;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.login-footer-modern .login-footer-nome {
    display: block;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.login-footer-modern small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
}

.login-btn-modern {
    background: var(--gradient-primary);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.65rem;
    transition: var(--card-transition);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color, #2f3093) 35%, transparent);
}

.login-btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-color, #2f3093) 45%, transparent);
    color: #fff;
}

/* Toda animação do sistema respeita a preferência de menos movimento do usuário. */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up,
    .card-modern,
    .summary-card,
    .login-btn-modern,
    .login-card-modern .form-control {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
    .card-modern,
    .table-modern {
        box-shadow: none;
        border: 1px solid #e2e8f0;
    }

    .btn-voltar,
    .page-actions {
        display: none !important;
    }

    .page-header-modern {
        margin-bottom: 1rem;
    }
}