/*
 * Cards — bloc de contenu standard.
 * Variantes : default, metric, empty, clickable.
 */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* Card cliquable (entrée d'historique, item de stat, etc.) */
.card--clickable {
    cursor: pointer;
}

.card--clickable:hover {
    background: var(--surface-alt);
    box-shadow: var(--shadow-hover);
}

/* Card vide (jour sans saisie, état initial...) */
.card--empty {
    border-style: dashed;
    border-color: var(--border-strong);
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
}

/* Card mise en avant (déficit du jour, etc.) */
.card--accent {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}

.card--accent .card__title {
    color: var(--accent-text);
}

/* ============================================================
   Card header (pastille icône + label)
   ============================================================ */

.card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.card__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card__icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

.card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    flex: 1;
}

.card__action {
    color: var(--text-faint);
    transition: color var(--transition-fast);
}

.card__action:hover {
    color: var(--text-muted);
}

/* ============================================================
   Card body — valeurs et métriques
   ============================================================ */

.card__value {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.card__value-number {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.card__value-unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-faint);
}

.card__hero {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.card__hero--success { color: var(--success); }
.card__hero--warning { color: var(--warning); }
.card__hero--danger  { color: var(--danger); }

.card__subline {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.card__footer {
    margin-top: var(--space-3);
}

/* ============================================================
   Card divider (séparateur intra-card)
   ============================================================ */

.card__divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-3) calc(var(--space-5) * -1);
}