/* ============================================================
   STATUS - produktspezifische Schicht ueber elvatis-ds.css.
   Nur was die Statusseite zusaetzlich braucht; alle Farben,
   Schriften und Abstaende kommen aus dem Design-System.
   ============================================================ */

:root { --product-accent: var(--c-mint); }

/* Zustandsfarben: gruen/amber/koralle aus BDR-003, nichts Neues. */
.st-operational { --state: var(--c-mint); }
.st-degraded    { --state: var(--c-amber); }
.st-down        { --state: var(--c-coral); }
.st-unknown     { --state: var(--c-muted); }

.status-main { padding: 88px 0 40px; }

/* Gesamtstatus */
.overall {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--c-line); border-radius: 12px;
  background: var(--c-card); padding: 22px 26px; margin: 26px 0 30px;
}
.overall .dot { width: 14px; height: 14px; }
.overall-text {
  font-family: var(--font-serif); font-size: 1.35rem;
  color: var(--c-ink); font-weight: 600; line-height: 1.2;
}

.dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--state, var(--c-muted)); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--state, var(--c-muted)) 18%, transparent);
}

/* Dienstliste */
.services { list-style: none; border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.services li {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 26px; background: var(--c-card);
  border-bottom: 1px solid var(--c-line);
}
.services li:last-child { border-bottom: 0; }
.svc-name { flex: 1; color: var(--c-ink); font-weight: 500; }
.svc-state { font-size: 0.86rem; color: var(--state, var(--c-muted)); font-weight: 500; }
.svc-ms {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--c-muted); min-width: 68px; text-align: right;
}

/* Frische-Hinweis. Wichtiger als die Punkte: die Pruefung laeuft auf
   demselben Host wie die Dienste, ein veralteter Zeitstempel ist daher
   selbst das Warnsignal. */
/* Horizontales Padding identisch zu .services li und .overall (26px), damit
   der Text exakt unter den Dienstnamen beginnt statt 8px daneben. */
.freshness {
  margin-top: 20px; padding: 15px 26px; border-radius: 10px;
  border: 1px solid var(--c-line); background: rgba(34,180,255,0.045);
  color: var(--c-muted); font-size: 0.86rem;
}
.freshness.is-stale {
  border-color: color-mix(in srgb, var(--c-amber) 45%, transparent);
  background: color-mix(in srgb, var(--c-amber) 8%, transparent);
  color: var(--c-body);
}
.freshness strong { color: var(--c-amber); }

@media (max-width: 640px) {
  .status-main { padding-top: 72px; }
  .services li { padding: 14px 18px; gap: 10px; }
  .svc-state { display: none; }
  .overall { padding: 18px; }
  .freshness { padding: 14px 18px; }
}