/* FanTR Cooling — Cards
   Header dark #345a74 + fundo branco.
   Migrado de assets/styles.css (Sub-fase 1.5c).
   Raio: var(--radius-md) = 5px (D05 — máx 8px para app técnico).
*/

/* ── Base ──────────────────────────────────────────────────── */
.card-modern {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
    overflow: hidden;
}

.card-modern:hover {
    box-shadow: var(--shadow-md);
}

/* ── Header — fundo escuro #345a74 ─────────────────────────── */
.card-modern .card-header,
.card-modern > .card-header {
    background: var(--color-bg-nav) !important;      /* #345a74 */
    border-bottom: none !important;
    padding: var(--space-3) var(--space-4) !important;  /* 12px 16px */
    font-size: var(--font-size-sm) !important;           /* 14px */
    font-weight: 600 !important;
    color: var(--color-text-on-dark) !important;         /* #ffffff */
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;                      /* 8px */
    line-height: var(--line-height-tight);
}

/* Headings dentro do card-header herdam a cor branca (base.css define color em h1-h6) */
.card-modern .card-header h1,
.card-modern .card-header h2,
.card-modern .card-header h3,
.card-modern .card-header h4,
.card-modern .card-header h5,
.card-modern .card-header h6 {
    color: var(--color-text-on-dark) !important;
    margin: 0;
}

/* Ícone dentro do card-header: branco com leve opacidade */
.card-modern .card-header .card-header-icon,
.card-modern > .card-header .card-header-icon {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px;
    flex-shrink: 0;
}

/* Fallback global para ícones de card fora de .card-modern (bordas laterais, etc.) */
.card-header-icon {
    font-size: 15px;
    flex-shrink: 0;
}

/* ── Body ──────────────────────────────────────────────────── */
.card-modern .card-body {
    padding: var(--space-4) var(--space-5) !important;   /* 16px 24px */
    background: var(--color-bg-card);
}

/* Variant compacta usada em tabelas e grids */
.card-modern .card-body.p-2 {
    padding: var(--space-2) !important;                  /* 8px */
}

/* ── Variant destaque — resultados importantes ─────────────── */
.card-modern--highlight,
.card-highlight {
    border-color: var(--color-brand-blue) !important;
    box-shadow: 0 0 0 1px var(--color-brand-blue), var(--shadow-md) !important;
}

.card-modern--highlight .card-header,
.card-modern--highlight > .card-header,
.card-highlight .card-header,
.card-highlight > .card-header {
    background: var(--color-brand-blue) !important;
}

/* ── Export cards (página Exportar) ────────────────────────── */
/* Coluna flex: o corpo ocupa a altura livre e a faixa da barra de progresso (10.5,
   último filho do card) cabe DENTRO do card — sem ela, os 6px transbordavam e eram
   cortados pelo `overflow:hidden` do `.card-modern`. */
.export-card {
    display: flex;
    flex-direction: column;
}

.export-card > .card-body {
    flex: 1 1 auto;
}

.export-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.export-icon {
    font-size: 2.5rem;
    line-height: 1;
}

/* Barra de progresso INDETERMINADA na base do card de documento (Sub-fase 10.5).
   É o custom_spinner de um dcc.Loading montado como último filho do `.card-modern`
   (ver `_minicard` em callbacks/exportar_documentos_callbacks.py): fica visível só
   enquanto o documento é gerado. `.export-progress-wrap` é o invólucro do Loading —
   reserva a faixa (6px) e a ancora à base do card, com o canto arredondado do card.
   Cores por token; listras animadas do `dbc.Progress` (striped+animated). */
.export-progress-wrap {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.export-progress {
    width: 100%;
}

.export-progress .progress {
    height: 6px;
    border-radius: 0;
    background-color: var(--color-brand-light);
}

.export-progress .progress-bar {
    background-color: var(--color-brand-blue);
}

/* Mensagem "Gerando documento" (Correção 7) — custom_spinner do dcc.Loading que envolve o
   status do card (ver `_minicard`). Pisca LENTO (2,4 s, ease-in-out) em azul institucional —
   feedback, não alarme; a barra de progresso da base segue como está.

   POSICIONAMENTO (ajuste pós-teste). O dcc.Loading monta:
       <div class="export-status-wrap" style="position:relative">
         <div class="export-status-wrap" style="visibility:hidden"> …status… </div>
         <div style="position:absolute;top:0;height:100%;width:100%;display:flex;
                     justify-content:center;align-items:center"> …custom_spinner… </div>
       </div>
   Como o status está VAZIO quando a geração começa, esse wrapper tem altura ~0: o spinner
   absoluto (height:100% = 0) fica centrado sobre o nada, quebra em duas linhas e SOBREPÕE os
   botões. Correção: o status escondido sai do fluxo e o div do spinner volta ao fluxo normal
   — assim a mensagem ocupa a linha do status e o card cresce para caber, exatamente como faz
   ao exibir "Documento gerado." (a classe `parent_className` cai nos DOIS divs; o do spinner
   é o único filho que NÃO a tem). */
.export-status-wrap {
    display: block;
    width: 100%;
}

/* ALTURA RESERVADA (ajuste cosmético pós-validação). Os minicards vivem num
   `d-flex flex-wrap` (align-items:stretch) e os botões são colados à base por `mt-auto`:
   se o status nasce sem altura e ganha uma linha ao gerar, o card cresce, TODOS os vizinhos
   esticam junto e os botões saem de nível entre cards. Reservando a linha desde o início, a
   altura do card nunca muda — nem ao aparecer "Gerando documento", nem ao concluir. Uma
   linha de `small` (1.5 × 0.875rem) + o `mt-2` do status, em tokens (acompanha a tipografia).
   Só o outer wrapper (filho direto do card-body); o dcc.Loading repete a classe no invólucro
   interno, que não precisa reservar nada. */
.card-body > .export-status-wrap {
    min-height: calc(var(--font-size-sm) * 1.5 + var(--space-2));
}

.export-status-wrap > .export-status-wrap[style*="hidden"] {
    display: none !important;   /* não reservar a linha do status anterior sob a mensagem */
}

.export-status-wrap > div:last-child:not(.export-status-wrap) {
    position: static !important;
    height: auto !important;
    width: 100% !important;
}

.export-gerando {
    color: var(--color-info);
    font-weight: 600;
    white-space: nowrap;   /* frase curta: uma linha só, como o "Documento gerado." */
    animation: export-blink 2.4s ease-in-out infinite;
}

@keyframes export-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* Acessibilidade: sem piscar para quem pede menos movimento — a mensagem continua legível. */
@media (prefers-reduced-motion: reduce) {
    .export-gerando {
        animation: none;
        opacity: 1;
    }
}

/* ── Sub-headers dentro de card body (resultados.py) ────────── */
.card-sub-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-brand-blue);
    background: rgba(6, 124, 177, 0.04);
}

.card-sub-header i {
    color: var(--color-brand-blue);
    font-size: 13px;
    flex-shrink: 0;
}

/* ── Responsividade ────────────────────────────────────────── */
@media (max-width: 576px) {
    .card-modern .card-body {
        padding: var(--space-3) var(--space-3) !important;   /* 12px 12px */
    }
    .card-modern .card-header,
    .card-modern > .card-header {
        padding: var(--space-2) var(--space-3) !important;   /* 8px 12px */
        font-size: var(--font-size-xs) !important;
    }
    .export-icon {
        font-size: 2rem;
    }
}