/* KPI cards -see docs/strategy/design-system/12-kpi.md

   Flat single-surface card: label + value + meta. State variants
   (success / warning / error) tint the entire card (background +
   border + value text) -matching the simple-card shape used across
   wireframes 11 / 12 / 13. No top-bar accent, no shadow. */

.kpi {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.kpi.success {
  background: var(--success-bg);
  border-color: var(--success-border);
}
.kpi.success .value { color: var(--success); }

.kpi.warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}
.kpi.warning .value { color: var(--warning); }

.kpi.error {
  background: var(--error-bg);
  border-color: var(--error-border);
}
.kpi.error .value { color: var(--error); }

.kpi.info {
  background: var(--info-bg);
  border-color: var(--info-border);
}
.kpi.info .value { color: var(--info); }

.kpi .label {
  font-size: var(--font-size-nano);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-micro-label);
  color: var(--muted);
}

.kpi .value {
  margin-top: 2px;
  font-size: var(--font-size-heading);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-display);
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: shrink the value so full money amounts (e.g. "1,850,000 FCFA")
   fit on a single line inside narrow stream cards (~120px wide on a
   3-col kpi-grid--3 at 390px viewport). Desktop keeps the 22px display. */
@media (max-width: 1023px) {
  .kpi .value {
    font-size: var(--font-size-prominent-lg);
  }
}

.kpi .meta {
  margin-top: 4px;
  font-size: var(--font-size-micro);
  color: var(--muted);
  font-weight: 500;
}

/* Stat band -paired comparison surface (e.g. food cost vs target) */
.stat-band {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-band.bad { background: var(--error-bg);   border-color: var(--error-border); }
.stat-band.ok  { background: var(--success-bg); border-color: var(--success-border); }

.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.stat-cell .label {
  font-size: var(--font-size-nano);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.stat-cell .value {
  font-size: var(--font-size-heading);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.stat-meta {
  font-size: var(--font-size-small);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-band.bad .stat-meta { color: var(--error); }
.stat-band.ok  .stat-meta { color: var(--success); }