/* ----------------- summary KPI row ------------------ */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.kpi {
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--idle); border-radius: 10px;
  padding: 12px 14px; min-height: 84px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-left-color 0.4s;
}
.kpi .label {
  display: flex; align-items: center; gap: 6px; color: var(--muted);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.kpi .value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.05; }
.kpi .value .unit { font-size: 13px; color: var(--muted); margin-left: 3px; font-weight: 400; }
.kpi .delta { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.kpi.solar .ico { color: var(--solar); }
.kpi.load  .ico { color: var(--load); }
/* Left stripe = state/load severity, set per-tick in renderKpis().
   green healthy · amber watch · red act · grey idle; solar/grid keep
   their identity hue where "off" is not a fault. */
.kpi.sev-ok    { border-left-color: var(--ok); }
.kpi.sev-warn  { border-left-color: var(--warn); }
.kpi.sev-err   { border-left-color: var(--err); }
.kpi.sev-idle  { border-left-color: var(--idle); }
.kpi.sev-solar { border-left-color: var(--solar); }
.kpi.sev-grid  { border-left-color: var(--grid); }
/* Per-inverter mains feeds listed inside the Hálózat KPI tile. */
.kpi .gi-count { margin-left: auto; color: var(--muted); font-size: 10px;
                 letter-spacing: 0; }
.grid-inputs { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.gi-row { display: flex; justify-content: space-between; gap: 8px;
          font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.gi-row .gi-n { color: var(--muted); }
.gi-row.on .gi-n { color: var(--fg); }
.gi-v { text-align: right; }
.gi-off { color: var(--idle); }
.gi-chg { color: var(--grid); }