/* ============ CARDS ============ */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
}
.card-header {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue-mid));
  color: white; border-radius: var(--radius) var(--radius) 0 0;
  padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.5px;
}
.card-body { padding: 18px; }

/* ============ KPI CARDS ============ */
.kpi-grid { display: grid; gap: 16px; }
.kpi-card {
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  color: white; position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.kpi-card::before {
  content: '';
  position: absolute; top: -20px; right: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.kpi-card.blue { background: linear-gradient(135deg, var(--blue-main), var(--blue-light)); }
.kpi-card.green { background: linear-gradient(135deg, var(--green-dark), var(--green-main)); }
.kpi-card.orange { background: linear-gradient(135deg, #c2410c, var(--orange)); }
.kpi-card.red { background: linear-gradient(135deg, #b91c1c, var(--red)); }
.kpi-card.purple { background: linear-gradient(135deg, #6d28d9, var(--purple)); }
.kpi-label { font-size: 12px; font-weight: 500; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-family: 'Rajdhani', sans-serif; font-size: 32px; font-weight: 700; line-height: 1; }
.kpi-value.sm { font-size: 22px; }
.kpi-sub { font-size: 12px; opacity: 0.8; display: flex; align-items: center; gap: 4px; }
.kpi-sub.up { color: #86efac; }
.kpi-sub.down { color: #fca5a5; }
.kpi-icon { position: absolute; right: 16px; top: 16px; font-size: 28px; opacity: 0.3; }

/* ── Responsive cards ─────────────────────────────────────── */
@media (max-width: 768px) {
  .kpi-grid, .kpi-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .card-body { padding: 12px; }
}