/* ===== PUBLIC STATUS PAGE (/status) ===== minden szín token; a --clr-orange szándékosan hiányzik (frontend.md). */

/* ── State colours ──────────────────────────────────────── */
.st-operational   { --st-color: var(--clr-green); }
.st-degraded      { --st-color: var(--clr-yellow); }
.st-partial_outage,
.st-major_outage  { --st-color: var(--clr-red); }
.st-maintenance   { --st-color: var(--clr-blue); }
.st-unknown,
.st-no_data       { --st-color: var(--text-muted); }

/* ── Overall banner ─────────────────────────────────────── */
.st-overall {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  border-left: 4px solid var(--st-color);
  background: color-mix(in srgb, var(--st-color) 7%, var(--bg-card));
}
.st-overall-mark  { color: var(--st-color); flex-shrink: 0; margin-top: 2px; }
.st-overall-body  { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.st-overall-text  { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
.st-overall-note  { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.st-overall-meta  { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

/* ── Component rows ─────────────────────────────────────── */
.st-components { gap: 0; }
.st-comp {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
}
.st-comp:first-of-type { padding-top: 0; }
.st-comp:last-of-type  { padding-bottom: 0; border-bottom: 0; }

.st-comp-row {
  display: flex;
  align-items: center;
  gap: var(--card-row-gap);
  min-width: 0;
}
.st-comp-mark { color: var(--st-color); flex-shrink: 0; }
.st-comp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--card-text-gap); }
.st-comp-name { font-weight: 600; color: var(--text-primary); font-size: var(--text-sm); }
.st-comp-desc { font-size: var(--text-xs); color: var(--text-muted); }
.st-comp-note { font-size: var(--text-xs); color: var(--text-secondary); }
.st-comp-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--card-badge-gap);
}
.st-comp-latency { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── 90-day bars ────────────────────────────────────────── */
/* 90 × 2px + 89 × 1px gap = 269px, tehát 360px-es telefonon is elfér. */
.st-bars-wrap { overflow-x: auto; }
.st-bars {
  display: flex;
  gap: 1px;
  min-width: 269px;
}
.st-bar {
  flex: 1 1 0;
  min-width: 2px;
  height: 26px;
  background: var(--st-color);
}
.st-bar.st-no_data { background: var(--bg-muted); }

.st-comp-track { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.st-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.st-scale-uptime { font-variant-numeric: tabular-nums; }

/* ── Speed table ────────────────────────────────────────── */
.st-perf { display: flex; flex-direction: column; gap: var(--space-2); }
.st-perf-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.st-perf-name { color: var(--text-secondary); min-width: 0; }
.st-perf-vals { color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-perf-vals span + span { margin-left: var(--space-3); }
.st-perf-dim { color: var(--text-muted); }

/* ── Incidents ──────────────────────────────────────────── */
.st-incident {
  display: flex;
  flex-direction: column;
  gap: var(--card-text-gap);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
}
.st-incident:last-of-type { padding-bottom: 0; border-bottom: 0; }
.st-incident-top { display: flex; align-items: center; gap: var(--card-row-gap); }
.st-incident-name { font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); }
.st-incident-when { font-size: var(--text-xs); color: var(--text-muted); }

/* ── Footer note ────────────────────────────────────────── */
.st-foot { font-size: var(--text-xs); color: var(--text-muted); }
.st-foot a { color: var(--text-link); }

@media (min-width: 40rem) {
  .st-comp { flex-direction: row; align-items: center; gap: var(--space-4); }
  .st-comp-row { flex: 0 0 45%; }
  .st-comp-track { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
}