/* =========================================================================
   kpi.css — KPI card (workers, GPU, moc, pokrycie).
   Wyglad zblizony do realnego panelu klienta: eyebrow label, big number, status.
   ========================================================================= */

.kpi {
  /* uses .card shell */
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 130px;
  height: 100%; /* wypełnia grid cell → wszystkie 4 karty identycznej wysokości */
}
.kpi__meta {
  margin-top: auto; /* pcha meta do dołu, niezależnie czy karta ma status czy nie */
}

.kpi__label {
  font-size: var(--eyebrow-fs);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}

.kpi__value {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi__value .unit {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 4px;
}

/* .kpi__meta margin-top przeniesiony wyżej; ten blok pilnuje typo.
   Meta zawsze 2 linie (secondary może być pusta) — stała wysokość, brak skoków. */
.kpi .kpi__meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
  min-height: 34px;
}
.kpi .kpi__meta > div { min-height: 16px; }

.kpi__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  margin-top: auto;
  width: max-content;
}
.kpi__status--online  { background: rgba(52,211,153,0.1);  border: 1px solid rgba(52,211,153,0.25);  color: var(--accent-green); }
.kpi__status--partial { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.25);  color: var(--accent-amber); }
.kpi__status--offline { background: rgba(251,113,133,0.1); border: 1px solid rgba(251,113,133,0.25); color: var(--accent-rose); }
.kpi__status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* KPI grid — 4 kolumny desktop, 2 tablet, 1 mobile */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-inner);
}
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
}