/* ----------------- Főoldal mini-cards (below the energy flow) ------------------ */
.home-extras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-top: 4px;
}
.mini-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.mini-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600;
}

/* ----------------- Aktuális figyelmeztetések kártya (a Hálózat KPI után) ------
   Level-triggered warnings; the whole card is absent when there are none, so the
   margin lives on the card (not the container) to avoid a phantom gap. */
.warn-card {
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--warn); border-radius: 12px;
  padding: 12px 14px 8px; margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.warn-card.has-crit { border-left-color: var(--err); }
.warn-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600;
}
.warn-badge {
  margin-left: auto; background: var(--warn); color: #1a1200;
  border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 0;
}
.warn-card.has-crit .warn-badge { background: var(--err); color: #2a0000; }
.warn-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--panel-2); border-left: 3px solid var(--warn);
}
.warn-item.critical { border-left-color: var(--err); }
.warn-ico { font-size: 16px; line-height: 1.35; }
.warn-txt { display: flex; flex-direction: column; gap: 1px; }
.warn-t { font-size: 13px; font-weight: 600; color: var(--fg); }
.warn-d {
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* per-inverter mode rows inside the "Inverter módok" mini-card */
.home-mode { display: flex; flex-direction: column; gap: 5px; }
.home-mode + .home-mode { margin-top: 2px; }
.home-mode-n { font-size: 12px; color: var(--muted); font-weight: 600; }
.home-mode .mode { margin: 0; }