/* 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) ────────────────────────── */
.export-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.export-icon {
    font-size: 2.5rem;
    line-height: 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;
    }
}