/* Cards */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-sm);
}
.card--flush { padding: 0; overflow: hidden; }
.card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-5) var(--spacing-5) var(--spacing-4);
}
.card__body { padding: 0 var(--spacing-5) var(--spacing-5); }

/* Stat card */
.stat-card { position: relative; overflow: hidden; }
.stat-card__label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.stat-card__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1.1;
    margin-top: var(--spacing-3);
    display: flex; align-items: baseline; gap: var(--spacing-2);
}
.stat-card__value--empty { color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.stat-card__delta { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.stat-card__delta--up { color: var(--color-success); }
.stat-card__delta--down { color: var(--color-danger); }
.stat-card__delta--flat { color: var(--color-warning); }
.stat-card__meta { margin-top: var(--spacing-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.stat-card__icon {
    position: absolute; top: var(--spacing-5); right: var(--spacing-5);
    color: var(--color-text-muted); opacity: 0.35;
}

/* Progress bar */
.progress { height: 6px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.progress__fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-primary); }
.progress--mt { margin-top: var(--spacing-4); }

/* Dark feature card */
.feature-card {
    background: linear-gradient(160deg, var(--color-brand-navy) 0%, var(--color-brand-navy-700) 100%);
    color: var(--color-text-on-dark);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-md);
}
.feature-card__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: #fff; }
.feature-card__text { font-size: var(--font-size-sm); color: var(--color-text-on-dark-muted); margin-top: var(--spacing-2); }
.feature-card .btn--secondary {
    background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.2);
    margin-top: var(--spacing-4);
}
.feature-card .btn--secondary:hover { background: rgba(255,255,255,0.2); }

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
    color: var(--color-text-muted);
}
.empty-state .icon { margin: 0 auto var(--spacing-4); color: var(--color-text-muted); opacity: 0.6; }
.empty-state__title { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.empty-state__text { font-size: var(--font-size-sm); margin-top: var(--spacing-1); }
