/* Fivered Statuspage – Dark UI */
.fivered-statuspage { font: 14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial; max-width:1100px; margin:0 auto; padding:0 16px; min-height:calc(100vh - 200px); display:flex; flex-direction:column; justify-content:center; }
.fivered-statuspage.fsp-dark { color:#e5e7eb; background:transparent; }

/* Fallback: Bei kleinen Viewports nicht zentrieren, um Abschneiden zu vermeiden */
@media (max-height: 700px) {
  .fivered-statuspage { justify-content:flex-start; }
}

/* Cards */
.fsp-card { background:#121212; border:1px solid #242323; border-radius:14px; padding:16px 18px; box-shadow: 0 2px 10px rgba(0,0,0,.25) inset, 0 0 0 1px rgba(255,255,255,.02); }
.fsp-section-title { margin:22px 0 10px; font-size:18px; color:#e7eef5; font-weight:600; }

/* Global banner */
.fsp-global { display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.fsp-global .fsp-msg { opacity:.9; margin-left:6px; }
.fsp-global .fsp-global-icon { width:28px; height:28px; border-radius:50%; background:linear-gradient(180deg,#1a2b22,#0c1410); border:1px solid #1b2a21; position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; aspect-ratio:1 / 1; box-sizing:content-box; }
.fsp-global .fsp-global-icon::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399aa; }

/* Globale Icon-Zustände */
.fsp-global .fsp-global-icon.fsp-icon-ok { background:linear-gradient(180deg,#1a2b22,#0c1410); border-color:#1b2a21; }
.fsp-global .fsp-global-icon.fsp-icon-ok::after { background:#34d399; box-shadow:0 0 8px #34d399aa; }

.fsp-global .fsp-global-icon.fsp-icon-warn { background:linear-gradient(180deg,#2a230f,#141107); border-color:#574515; }
.fsp-global .fsp-global-icon.fsp-icon-warn::after { background:#f1c40f; box-shadow:0 0 8px #f1c40faa; }

.fsp-global .fsp-global-icon.fsp-icon-bad { background:linear-gradient(180deg,#2c1515,#160a0a); border-color:#5a1d1d; }
.fsp-global .fsp-global-icon.fsp-icon-bad::after { background:#e74c3c; box-shadow:0 0 8px #e74c3caa; }

/* Services list inside card */
.fsp-services { list-style:none; margin:0; padding:0; }
.fsp-service { display:flex; align-items:center; justify-content:space-between; padding:14px 12px; border-radius:10px; overflow:visible; }
.fsp-service + .fsp-service { margin-top:6px; }
.fsp-left { display:flex; align-items:center; gap:10px; min-width:0; }
.fsp-name { font-weight:600; color:#eef6ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fsp-right { display:grid; grid-template-columns: 70px 1fr 48px; align-items:center; gap:10px; flex:1 1 60%; min-width:320px; max-width:680px; overflow:visible; }
.fsp-time { color:#e5e7eb; font-size:12px; }

/* Uptime pill */
.fsp-pill { display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:.2px; }
/* Fixe Breite für alle Uptime-Pillen, damit sich das Layout nicht verschiebt */
.fsp-pill.fsp-uptime { width: 70px; box-sizing: border-box; text-align:center; white-space:nowrap; font-variant-numeric: tabular-nums; }
.fsp-uptime-ok { background:#0f2c1e; color:#7ff0b5; border:1px solid #174b34; }
.fsp-uptime-warn { background:#2a230f; color:#ffd47a; border:1px solid #574515; }
.fsp-uptime-bad { background:#2c1515; color:#ff9f9f; border:1px solid #5a1d1d; }

/* Mini bars (history) */
.fsp-bars { display:flex; align-items:center; justify-content:flex-start; height:12px; padding:0 18px; margin:0 8px; min-width:36px; overflow:visible; box-sizing:content-box; position:relative; }
.fsp-bar { flex:0 0 8px; height:100%; border-radius:999px; background:#133021; box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; margin-right:6px; }
.fsp-bar:last-child { margin-right:0; }
.fsp-bar-ok { background:linear-gradient(180deg,#34d399,#1fa67f); box-shadow:0 0 6px #34d39955; }
.fsp-bar-warn { background:linear-gradient(180deg,#f1c40f,#b9960b); box-shadow:0 0 6px #f1c40f55; }
.fsp-bar-bad { background:linear-gradient(180deg,#e74c3c,#b13529); box-shadow:0 0 6px #e74c3c55; }

/* Row hover */
.fsp-service:hover { background:#0e0e0e; }

/* Status color accents for rows (left dot optional) */
.fsp-status-operational .fsp-name { color:#eafcf3; }
.fsp-status-degraded .fsp-name { color:#fff0cc; }
.fsp-status-partial_outage .fsp-name,
.fsp-status-major_outage .fsp-name { color:#ffe1e1; }

/* Specific overrides to prevent clipping of first/last beat */
.fivered-statuspage .fsp-bars { overflow:visible !important; padding-left:14px !important; padding-right:12px !important; }
.fivered-statuspage .fsp-bars .fsp-bar:first-of-type { margin-left:8px; }

/* Reduce default ul padding in themes */
.fivered-statuspage ul { margin:0; padding:0; }

/* Responsive: mobile stacking */
@media (max-width: 560px) {
  .fsp-service { flex-direction: column; align-items:stretch; gap:8px; }
  .fsp-left { width:100%; display:grid; grid-template-columns: 70px 1fr; align-items:center; column-gap:10px; }
  .fsp-name { white-space:normal; overflow:visible; text-overflow:clip; }
  .fsp-right { grid-template-columns: 1fr 48px; gap:8px; width:100%; min-width:0; max-width:none; }
  /* Linkes Zeitlabel auf sehr kleinen Bildschirmen ausblenden, um Überlagerungen mit der Uptime-Pille zu vermeiden */
  .fsp-time-start { display:none; }
}