/* =========================================================
   Galaxy Panel Status Monitor - Design im Stil des Galaxy Panels
   Deep-space blues, violet/cyan nebula, animated starfield.
   Display: Space Grotesk / Body: Inter
   ========================================================= */
:root {
  --bg: #070a16;
  --bg-elevated: #0c1128;
  --surface: #10152f;
  --surface-2: #171d40;
  --border: #232c56;
  --border-soft: #1a2142;

  --text: #eef1ff;
  --text-dim: #a2aad6;
  --text-faint: #6b7299;

  --blue: #3d6bfa;
  --blue-bright: #6a8cff;
  --violet: #8b5cf6;
  --cyan: #35d0ff;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #fb5079;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body {
  position: relative; z-index: 0; min-height: 100vh; font-size: 15px; line-height: 1.5;
  background-image:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(139, 92, 246, 0.16), transparent 60%),
    radial-gradient(ellipse 800px 600px at 110% 10%, rgba(53, 208, 255, 0.10), transparent 55%),
    radial-gradient(ellipse 1200px 800px at 50% 120%, rgba(61, 107, 250, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 90%, rgba(251, 80, 121, 0.05), transparent 55%);
  background-attachment: fixed;
}
a { color: var(--blue-bright); text-decoration: none; }
a:hover { color: var(--cyan); }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--blue), var(--violet)); border-radius: 100px; border: 2px solid var(--bg); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: var(--violet) transparent; }

/* ---------- Starfield ---------- */
.starfield { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.starfield::before, .starfield::after {
  content: ""; position: absolute; inset: -10%; background-repeat: repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 60% 70%, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 85% 15%, #cdd6ff 100%, transparent),
    radial-gradient(1.5px 1.5px at 40% 85%, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 10% 60%, #cdd6ff 100%, transparent),
    radial-gradient(1px 1px at 75% 45%, #ffffff 100%, transparent);
  background-size: 340px 340px; opacity: 0.55;
  animation: star-drift 90s linear infinite; will-change: transform;
}
.starfield::after { background-size: 500px 500px; opacity: 0.3; animation-duration: 140s; animation-direction: reverse; }
@keyframes star-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-300px,-200px,0); } }

/* ---------- Layout ---------- */
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap;
  padding: 1.1em 5vw; border-bottom: 1px solid var(--border-soft);
  background: rgba(7, 10, 22, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 0.65em; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-mark::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, var(--blue-bright), var(--violet) 70%, transparent 100%);
  opacity: 0.45; filter: blur(9px); z-index: -1; animation: brand-pulse 3.5s ease-in-out infinite;
}
@keyframes brand-pulse { 0%,100% { opacity: .35; transform: scale(.94); } 50% { opacity: .65; transform: scale(1.08); } }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.brand-sub { color: var(--text-faint); font-weight: 500; font-size: 0.95rem; padding-left: 0.65em; border-left: 1px solid var(--border); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .5em 1em; border-radius: var(--radius-sm); font-family: var(--font-body);
  font-weight: 600; font-size: .82rem; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); transition: color .15s, border-color .15s;
}
.btn:hover { color: var(--text); border-color: var(--blue-bright); }

main.wrap { padding-top: 2.2em; padding-bottom: 1em; }

/* ---------- Overall status (hero) ---------- */
.banner {
  position: relative; display: flex; align-items: center; gap: 1em;
  padding: 1.5em 1.6em; border-radius: var(--radius); margin-bottom: 1.4em;
  background: linear-gradient(180deg, var(--surface), var(--bg-elevated));
  border: 1px solid var(--border-soft);
  box-shadow: 0 16px 40px -26px var(--tone, transparent);
  --tone: rgba(61, 107, 250, .5);
}
.banner::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent, var(--blue-bright)), transparent); opacity: .85;
}
.banner .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent, var(--text-faint)); box-shadow: 0 0 14px var(--accent, transparent); }
.banner.ok   { --accent: var(--green); --tone: rgba(52, 211, 153, .5); }
.banner.warn { --accent: var(--amber); --tone: rgba(251, 191, 36, .45); }
.banner.bad  { --accent: var(--red);   --tone: rgba(251, 80, 121, .5); }
.banner.maint{ --accent: var(--violet);--tone: rgba(139, 92, 246, .5); }
.banner.mute { --accent: var(--text-faint); }
.banner .dot { animation: dot-pulse 2.4s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100% { box-shadow: 0 0 6px var(--accent, transparent); } 50% { box-shadow: 0 0 18px var(--accent, transparent); } }
.banner-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 3.2vw, 1.55rem); letter-spacing: -0.02em; }
.banner-sub { color: var(--text-faint); font-size: .82rem; margin-top: .15em; }

/* ---------- Announcement ---------- */
.announce {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 1.2em; padding: .85em 1.1em; border-radius: var(--radius-sm);
  border: 1px solid; font-size: .9rem;
}
.announce[hidden] { display: none; }
.announce button { background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.announce.info    { background: rgba(61,107,250,.10);  color: var(--blue-bright); border-color: rgba(106,140,255,.35); }
.announce.warning { background: rgba(251,191,36,.08);  color: var(--amber);       border-color: rgba(251,191,36,.35); }
.announce.success { background: rgba(52,211,153,.08);  color: var(--green);       border-color: rgba(52,211,153,.35); }
.announce.error   { background: rgba(251,80,121,.08);  color: var(--red);         border-color: rgba(251,80,121,.35); }

/* ---------- Range switch (pill-nav) ---------- */
.range { display: flex; justify-content: flex-end; gap: .5em; margin-bottom: .3em; }
.range a {
  padding: .45em 1em; border-radius: 100px; background: var(--surface-2); color: var(--text-dim);
  font-size: .82rem; font-weight: 600; border: 1px solid var(--border); transition: box-shadow .15s ease;
}
.range a.on, .range a:hover {
  background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff;
  border-color: transparent; box-shadow: 0 4px 16px -4px rgba(139, 92, 246, .6);
}

/* ---------- Groups & services ---------- */
.group h2 { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 700; font-family: var(--font-body); margin: 1.6em .3em .7em; }
.svc {
  position: relative; background: linear-gradient(180deg, var(--surface), var(--bg-elevated));
  border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.15em 1.3em; margin-bottom: .8em;
  box-shadow: 0 12px 32px -24px rgba(0,0,0,.6);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.svc::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--blue-bright), var(--violet), transparent); opacity: .6; pointer-events: none;
}
.svc:hover { border-color: var(--border); box-shadow: 0 16px 40px -22px rgba(61, 107, 250, .45); }
.svc-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: .95em; }
.svc-name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }

.pill {
  display: inline-flex; align-items: center; padding: .3em .75em; border-radius: 100px;
  font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.pill.up          { background: rgba(52,211,153,.15);  color: var(--green);  box-shadow: 0 0 0 1px rgba(52,211,153,.2) inset; }
.pill.slow        { background: rgba(251,191,36,.15);  color: var(--amber);  box-shadow: 0 0 0 1px rgba(251,191,36,.2) inset; }
.pill.down        { background: rgba(251,80,121,.15);  color: var(--red);    box-shadow: 0 0 0 1px rgba(251,80,121,.2) inset; }
.pill.maintenance { background: rgba(139,92,246,.18);  color: #b79cff;       box-shadow: 0 0 0 1px rgba(139,92,246,.25) inset; }
.pill.unknown     { background: rgba(162,170,214,.12); color: var(--text-dim); }

.bars { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; height: 36px; }
.bar { border-radius: 3px; background: var(--surface-2); transition: filter .15s, transform .15s; }
.bar.up    { background: var(--green); }
.bar.slow  { background: var(--amber); }
.bar.down  { background: var(--red); }
.bar.maint { background: var(--violet); }
.bar { cursor: pointer; }
.bar:hover { filter: brightness(1.25); transform: scaleY(1.1); }

.svc-foot { display: flex; align-items: center; gap: 8px; margin-top: .7em; font-size: .76rem; color: var(--text-faint); flex-wrap: wrap; }
.svc-foot .mid { flex: 1; min-width: 20px; border-top: 1px solid var(--border-soft); }
.svc-foot .since { color: var(--red); }

.foot { color: var(--text-faint); font-size: .76rem; text-align: center; margin: 2.6em 0 2.2em; }
.foot a { color: var(--text-dim); }
.foot a:hover { color: var(--cyan); }

@media (max-width: 560px) {
  .bars { height: 28px; gap: 2px; }
  .banner { padding: 1.2em 1.1em; }
  .svc { padding: 1em 1em; }
}
@media (max-width: 420px) { .bars { gap: 1px; } .btn { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .starfield::before, .starfield::after, .brand-mark::after, .banner .dot { animation: none; }
}

/* ---------- Tooltip über den Tagesbalken ---------- */
.tt {
  position: fixed; z-index: 50; left: 0; top: 0; min-width: 210px; max-width: 280px;
  padding: .85em 1em .8em; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--bg-elevated));
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(7,10,22,.6), 0 14px 40px -22px rgba(139,92,246,.55);
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.tt.below { transform: translateY(-4px); }
.tt.on { opacity: 1; transform: translateY(0); }
.tt[hidden] { display: none; }
.tt::before {                       /* Verlaufslinie oben wie bei den Karten */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--blue-bright), var(--violet), transparent); opacity: .75;
}
.tt::after {                        /* Pfeil zum Balken */
  content: ""; position: absolute; left: var(--ax, 50%); bottom: -6px; width: 10px; height: 10px;
  background: var(--bg-elevated); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}
.tt.below::after { bottom: auto; top: -6px; background: var(--surface-2); border: 0; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.tt-head { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-bottom: .7em; }
.tt-date { font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; white-space: nowrap; }
.tt-badge { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .25em .65em; border-radius: 100px; white-space: nowrap; }
.tt-badge.up     { background: rgba(52,211,153,.15); color: var(--green); box-shadow: 0 0 0 1px rgba(52,211,153,.2) inset; }
.tt-badge.slow   { background: rgba(251,191,36,.15); color: var(--amber); box-shadow: 0 0 0 1px rgba(251,191,36,.2) inset; }
.tt-badge.down   { background: rgba(251,80,121,.15); color: var(--red);   box-shadow: 0 0 0 1px rgba(251,80,121,.2) inset; }
.tt-badge.maint  { background: rgba(139,92,246,.18); color: #b79cff;      box-shadow: 0 0 0 1px rgba(139,92,246,.25) inset; }
.tt-badge.nodata { background: rgba(162,170,214,.12); color: var(--text-dim); }
.tt-rows { display: grid; gap: .38em; padding: .65em 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.tt-row { display: flex; align-items: center; gap: .6em; font-size: .8rem; color: var(--text-dim); }
.tt-row.zero { opacity: .45; }
.tt-label { flex: 1; }
.tt-num { font-family: var(--font-display); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tt-dot.up { background: var(--green); } .tt-dot.slow { background: var(--amber); }
.tt-dot.down { background: var(--red); }  .tt-dot.maint { background: var(--violet); }
.tt-foot { margin-top: .65em; font-size: .72rem; color: var(--text-faint); }
.tt-empty { font-size: .8rem; color: var(--text-faint); padding-top: .15em; }
@media (prefers-reduced-motion: reduce) { .tt { transition: none; } }