/* ============================================================
   Systemstatus (PROJ-16) — /pages/status.html
   ------------------------------------------------------------
   Baut auf legal.css auf (gleiche Lese-Seite ohne App-Chrome).
   Zustandsfarben ausschließlich über die sanktionierten Tokens
   --ok-*/--warn-*/--bad-* (tokens.css); "unbekannt"/"nicht aktiv"
   bleiben neutral. Flächen = --surface, keine Hauch-Kontraste.
   ============================================================ */

/* ---- Gesamtbanner ---- */
.st-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  margin: 0 0 1.5rem;
  font-weight: 600;
  font-size: 1rem;
}
.st-banner[data-state="ok"]       { background: var(--ok-bg);   border-color: transparent; color: var(--ok-fg); }
.st-banner[data-state="degraded"] { background: var(--warn-bg); border-color: transparent; color: var(--warn-fg); }
.st-banner[data-state="down"]     { background: var(--bad-bg);  border-color: transparent; color: var(--bad-fg); }
.st-banner[data-state="unknown"],
.st-banner[data-state="loading"]  { color: var(--text-2); }

/* ---- Zustandspunkt ---- */
.st-dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--text-faint, var(--text-2));
}
.st-dot[data-state="ok"]       { background: var(--ok-fg); }
.st-dot[data-state="degraded"] { background: var(--warn-fg); }
.st-dot[data-state="down"]     { background: var(--bad-fg); }
.st-dot[data-state="disabled"] { background: transparent; box-shadow: inset 0 0 0 2px var(--border); }
.st-dot[data-state="loading"]  { animation: st-pulse 1.2s ease-in-out infinite; }
.st-banner .st-dot { width: 0.75rem; height: 0.75rem; background: currentColor; }
.st-banner[data-state="loading"] .st-dot,
.st-banner[data-state="unknown"] .st-dot { background: var(--text-faint, var(--text-2)); }

@keyframes st-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .st-dot[data-state="loading"] { animation: none; opacity: 0.6; }
}

/* ---- Komponentenliste ---- */
.legal .st-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.legal .st-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "dot name state"
    "dot meta meta";
  column-gap: 0.75rem;
  row-gap: 0.125rem;
  align-items: center;
  padding: 0.75rem 1rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  border-top: 1px solid var(--border);
}
.legal .st-row:first-child { border-top: 0; }
.st-row .st-dot   { grid-area: dot; }
.st-row .st-name  { grid-area: name; font-weight: 600; color: var(--text); }
.st-row .st-state { grid-area: state; font-size: var(--fs-body-s, 0.875rem); color: var(--text-2); white-space: nowrap; }
.st-row .st-meta  { grid-area: meta; font-size: 0.8125rem; color: var(--text-2); }
.st-row .st-meta:empty { display: none; }
.st-row[data-state="ok"] .st-state       { color: var(--ok-fg); }
.st-row[data-state="degraded"] .st-state { color: var(--warn-fg); }
.st-row[data-state="down"] .st-state     { color: var(--bad-fg); }
.legal .st-placeholder { color: var(--text-2); display: block; }
/* Platz für die Komponentenliste, solange sie lädt (Performance-Studie
   Punkt 15, 03.10.2026): vorher stand dort eine Zeile, die nachgeladenen
   schoben Überschrift, Hinweis, Client-Liste und Aktionen nach unten
   (CLS 0,39 mobil). --st-rows ist nur die übliche Zahl (öffentliche Liste
   seit 03.10.2026: elf Komponenten) — kommen mehr oder weniger, rückt der
   Rest nur um die Differenz. Zeilenhöhen: zweizeilig ~4,15rem, unter
   480 px dreizeilig ~5,5rem. */
.legal .st-list[aria-busy="true"] { --st-rows: 11; min-height: calc(var(--st-rows) * 4.15rem); }

/* ---- Aktionen ---- */
.st-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 0 0 0.5rem;
}
.st-reload {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body-s, 0.875rem);
  font-weight: 600;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
}
.st-reload:hover { background: var(--fill-hover, var(--selected-bg)); }
.st-reload:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.st-reload[disabled] { opacity: 0.5; cursor: default; }
.st-auto, .legal .st-hint {
  font-size: var(--fs-body-s, 0.875rem);
  color: var(--text-2);
}
.legal .st-hint { margin-bottom: 0.75rem; }

@media (max-width: 480px) {
  .legal .st-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "dot name"
      "dot state"
      "dot meta";
  }
  .st-row .st-state { white-space: normal; }
  .legal .st-list[aria-busy="true"] { min-height: calc(var(--st-rows) * 5.5rem); }
}