/**
 * @file
 * KPI cards: a labelled figure with an icon, used wherever a page needs a row
 * of headline numbers (group detail, service status).
 */

.eudat-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--wa-space-s, 0.75rem);
  margin-bottom: var(--wa-space-m, 1rem);
}

.eudat-kpi-card {
  --spacing: var(--wa-space-2xs, 0.5rem);
  border-color: var(--wa-color-surface-border, #e2e8f0);
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.eudat-kpi-card:hover {
  border-color: color-mix(in srgb, var(--eudat-brand, #004494) 30%, var(--wa-color-surface-border, #e2e8f0));
}

.eudat-kpi-card__header {
  margin-bottom: var(--wa-space-3xs, 0.25rem);
}

.eudat-kpi-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet, #64748b);
}

.eudat-kpi-card__icon {
  font-size: 1rem;
  color: var(--eudat-brand, #004494);
}

.eudat-kpi-card__value {
  font-size: var(--wa-font-size-xl, 1.35rem);
  font-weight: var(--wa-font-weight-bold, 700);
  line-height: 1.15;
  color: var(--wa-color-text-normal, #1f2733);
}

.eudat-kpi-card__value--pos {
  color: var(--wa-color-success-60, #16a34a);
}

.eudat-kpi-card__value--neg {
  color: var(--wa-color-danger-60, #dc2626);
}

.eudat-kpi-card__sub {
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet, #64748b);
  margin-top: 2px;
}