/* Status-Seite (status.js, docs ADR 0022). Zustandsfarben fest (gut, Warnung, ernst, kritisch), immer mit Symbol und Wort. */
:root { --st-up:#0ca30c; --st-warn:#fab219; --st-serious:#ec835a; --st-down:#d03b3b; --st-none:#3a3d58; }
:root[data-theme="light"] { --st-none:#d5dae5; }

.st-state { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--fg); white-space:nowrap; }
.st-state svg.i { width:16px; height:16px; padding:2px; border-radius:50%; color:#fff; stroke-width:2.6; }
.st-state.up svg.i { background:var(--st-up); }
.st-state.warn svg.i { background:var(--st-warn); color:#0b0b0b; }
.st-state.down svg.i { background:var(--st-down); }
.st-state.none svg.i { background:var(--st-none); color:var(--fg); }

/* Zusammenfassung oben */
.st-sum { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; padding:22px 24px; margin:0 0 24px;
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); border-left:6px solid var(--st-none); }
.st-sum.up { border-left-color:var(--st-up); }
.st-sum.warn { border-left-color:var(--st-warn); }
.st-sum.down { border-left-color:var(--st-down); }
.st-big { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--st-none); color:#fff; }
.st-big svg.i { width:28px; height:28px; stroke-width:2.4; }
.st-sum.up .st-big { background:var(--st-up); }
.st-sum.warn .st-big { background:var(--st-warn); color:#0b0b0b; }
.st-sum.down .st-big { background:var(--st-down); }
.st-sum h2 { font:700 1.6rem/1.15 var(--text); text-transform:none; letter-spacing:0; }
.st-sum p { margin:4px 0 0; color:var(--muted); }

.st-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
.st-main, .st-side { display:grid; gap:24px; min-width:0; }

/* Dienste mit 90 Tagesbalken */
.st-svc { padding:18px 0; border-top:1px solid var(--line); }
.st-svc:first-of-type { border-top:0; padding-top:4px; }
.st-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.st-name { display:grid; gap:2px; min-width:0; }
.st-name b { font-size:1.1rem; }
.st-name small { color:var(--muted); }
.st-now { display:grid; justify-items:end; gap:2px; text-align:right; }
.st-note { color:var(--muted); font-size:.8rem; }
.st-ms { color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; }
.st-bars { display:flex; gap:2px; height:34px; align-items:stretch; border-radius:4px; outline-offset:4px; cursor:default; }
.st-bars i { flex:1 1 0; min-width:2px; border-radius:2px; background:var(--st-none); transition:transform .1s; }
.st-bars i.up { background:var(--st-up); }
.st-bars i.warn { background:var(--st-warn); }
.st-bars i.serious { background:var(--st-serious); }
.st-bars i.down { background:var(--st-down); }
.st-bars i.on { transform:scaleY(1.12); box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--fg); }
.st-axis, .st-up { display:flex; justify-content:space-between; gap:12px; margin-top:6px; color:var(--muted); font-size:.8rem; font-weight:600; }
.st-axis .mid { color:var(--fg); }
.st-axis .d30 { display:none; }
.st-up { margin-top:8px; flex-wrap:wrap; }
.st-up b { color:var(--fg); margin-left:4px; font-variant-numeric:tabular-nums; }
.st-up a { display:inline-flex; align-items:center; gap:4px; color:var(--muted); margin-left:auto; }
.st-up a:hover { color:var(--accent); }
.st-up svg.i { width:13px; height:13px; }
.st-legend { display:flex; flex-wrap:wrap; gap:6px 16px; list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; font-weight:600; }
.st-legend li { display:flex; align-items:center; gap:6px; }
.st-legend i { width:10px; height:16px; border-radius:2px; background:var(--st-none); }
.st-legend i.up { background:var(--st-up); }
.st-legend i.warn { background:var(--st-warn); }
.st-legend i.serious { background:var(--st-serious); }
.st-legend i.down { background:var(--st-down); }

/* Tooltip */
.st-tip { position:fixed; z-index:60; pointer-events:none; max-width:280px; padding:7px 10px; border-radius:8px; background:#12131d; color:#EDF2F4;
  font:600 .82rem/1.35 var(--text); box-shadow:0 10px 30px -10px rgba(0,0,0,.6); }

/* Störungen */
.st-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.st-list li { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; align-items:baseline; padding-bottom:12px; border-bottom:1px solid var(--line); }
.st-list li:last-child { border-bottom:0; padding-bottom:0; }
.st-list li div { display:grid; gap:2px; }
.st-list li div small { color:var(--muted); }

/* Game-Server */
.st-tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.st-tiles div { background:var(--card-2); border-radius:10px; padding:12px 14px; display:grid; }
.st-tiles b { font:700 1.9rem/1 var(--text); font-variant-numeric:tabular-nums; }
.st-tiles span { color:var(--muted); font-size:.85rem; font-weight:600; }
.st-chart { margin:0 0 14px; }
.st-chart svg { display:block; width:100%; height:96px; overflow:visible; outline-offset:4px; }
.st-chart .base { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.st-chart .area { fill:var(--accent); opacity:.12; }
.st-chart .line { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.st-chart .cross { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.st-chart figcaption { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:.78rem; font-weight:600; margin-top:6px; }
.st-top { display:grid; gap:4px; margin-bottom:12px; }
.st-top a { display:flex; justify-content:space-between; gap:10px; padding:7px 10px; border-radius:8px; background:var(--card-2); color:var(--fg); font-weight:600; }
.st-top a:hover { color:var(--accent); }
.st-top small { color:var(--muted); font-variant-numeric:tabular-nums; }
.st-games p.small, .st-about p.small { margin:8px 0 0; }
.st-about ul { margin:0; padding-left:1.1em; display:grid; gap:8px; color:var(--muted); }
.st-about li::marker { color:var(--accent); }
.st-about a { color:var(--fg); font-weight:700; }
.st-about p a { display:inline-flex; align-items:center; gap:4px; }

/* Fußzeile: kleiner Status-Hinweis */
.foot-status { display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.foot-status i { width:9px; height:9px; border-radius:50%; background:var(--st-none); }
.foot-status.up i { background:var(--st-up); box-shadow:0 0 8px var(--st-up); }
.foot-status.warn i { background:var(--st-warn); }
.foot-status.down i { background:var(--st-down); }

@media (max-width:1100px) {
  .st-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .st-sum { grid-template-columns:auto minmax(0,1fr); padding:18px; }
  .st-sum .btn { grid-column:1 / -1; justify-self:start; }
  .st-sum h2 { font-size:1.3rem; }
  .st-row { flex-direction:column; gap:8px; }
  .st-now { justify-items:start; text-align:left; }
  /* Am Handy nur die letzten 30 Tage */
  .st-bars i:nth-child(-n+60) { display:none; }
  .st-axis .d90 { display:none; }
  .st-axis .d30 { display:inline; }
  .st-list li { grid-template-columns:minmax(0,1fr); gap:4px; }
}