/* Statusseite — bewusst schlicht: eine Seite, die man während eines Ausfalls
   auf dem Handy lädt, braucht Lesbarkeit, keine Effekte. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--foreground, #0e161e);
  background: var(--wash, #eef2f7);
  line-height: 1.5;
}

.page { max-width: 760px; margin: 0 auto; padding: 32px 20px 48px; }

header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.logo { width: 48px; height: 48px; object-fit: contain; }
h1 { font-size: 1.35rem; }
.sub { color: var(--muted, #597383); font-size: 0.85rem; }
h2 { font-size: 1.05rem; margin: 28px 0 12px; }

.banner {
  border-radius: 8px; padding: 14px 18px; font-weight: 600; margin-bottom: 16px;
  color: #fff; background: #2e9e5b;
}
.banner.up { background: #2e9e5b; }
.banner.degraded { background: #d99417; }
.banner.down { background: #cc3b3b; }
.banner.maintenance { background: var(--primary, #3e5665); }
.banner.unknown { background: #6b7280; }
.banner.stale { background: #6b7280; font-weight: 500; font-size: 0.9rem; }

.components { display: flex; flex-direction: column; gap: 14px; }
.component {
  background: #fff; border: 1px solid var(--border, #d9e3eb);
  border-radius: 10px; padding: 16px 18px;
}
.component-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.name { font-weight: 600; }

.pill {
  font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px;
  color: #fff; background: #2e9e5b; white-space: nowrap;
}
.pill.up { background: #2e9e5b; }
.pill.degraded { background: #d99417; }
.pill.down { background: #cc3b3b; }
.pill.maintenance { background: var(--primary, #3e5665); }
.pill.unknown { background: #9aa5b1; }

.bars { display: flex; gap: 2px; height: 34px; align-items: stretch; }
.bar { flex: 1 1 0; border-radius: 2px; background: #2e9e5b; min-width: 2px; }

/* Tagesfarbe nach Verfuegbarkeit, nicht nach "war irgendwas kaputt": ein
   zwoelfminuetiger Ausfall ist ein Tag mit 99,2 %, kein roter Tag. */
.bar.u100 { background: #2e9e5b; }   /* 99–100 % */
.bar.u99  { background: #7ac77b; }   /* 95–99 %  */
.bar.u95  { background: #e0bc2b; }   /* 90–95 %  */
.bar.u90  { background: #e07b2c; }   /* 80–90 %  */
.bar.u80  { background: #cc3b3b; }   /* < 80 %   */
.bar.unknown { background: #d6dde4; } /* nicht (genug) gemessen */

/* Legende: fuenf Abstufungen ohne Erklaerung sind Rateraum. */
.legend {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 14px; font-size: 0.72rem; color: var(--muted, #597383);
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}

.uptime {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px;
  font-size: 0.8rem; color: var(--muted, #597383);
}
.uptime strong { color: var(--foreground, #0e161e); }

.card {
  background: #fff; border: 1px solid var(--border, #d9e3eb);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 10px;
}
.card-title { font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-meta { font-size: 0.8rem; color: var(--muted, #597383); margin-top: 2px; }
.update { font-size: 0.85rem; margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--border, #d9e3eb); }
.update-time { color: var(--muted, #597383); font-size: 0.78rem; margin-right: 6px; }
.empty { color: var(--muted, #597383); font-size: 0.9rem; }

footer { margin-top: 36px; font-size: 0.75rem; color: var(--muted, #597383); text-align: center; }

@media (max-width: 480px) {
  header { gap: 10px; }
  .uptime { gap: 10px; }
}

/* ── Tooltips ──────────────────────────────────────────────────────────────
   Ein einzelnes Element statt nativer title-Attribute: die erscheinen erst
   nach etwa einer Sekunde und sind auf einem wenige Pixel breiten Tagesbalken
   kaum zu treffen. Positioniert wird per JS (status.html), damit der Tooltip
   am Rand nicht aus dem Bild laeuft. */

#tip {
  position: absolute;
  z-index: 20;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--foreground, #0e161e);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
}

/* Sichtbare Rueckmeldung, welcher Balken gerade gelesen wird. */
.bar { min-width: 3px; cursor: default; }
.bar:hover, .bar:focus { filter: brightness(0.8); outline: none; }

.uptime span[data-tip] { cursor: default; }
.uptime span[data-tip]:hover strong { text-decoration: underline dotted; }