/* ============================================================
   Cards + KPI cards — consistent surface, header and clickable KPI affordance.
   Refines the existing .app-card / .kpi-card to the design-system tokens
   (load order lets these tokens win without removing dashboard.css rules).
   ============================================================ */
.app-card {
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius);
  box-shadow: var(--ent-shadow-sm);
  background: var(--ent-surface);
}
.app-card-header {
  background: var(--ent-surface);
  border-bottom: 1px solid var(--ent-border);
  font-weight: 600;
  color: var(--ent-text);
  padding: var(--ent-space-3) var(--ent-space-4);
}

.kpi-card .kpi-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--ent-text); }
.kpi-card .kpi-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ent-text-muted);
}
.kpi-clickable { cursor: pointer; transition: box-shadow 0.12s ease, transform 0.12s ease; }
.kpi-clickable:hover { box-shadow: var(--ent-shadow); transform: translateY(-1px); }
.kpi-clickable:focus-visible { outline: 2px solid var(--ent-focus); outline-offset: 2px; }