/* 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; }

/* Login/Logout der internen Ansicht — klein und rechts, kein zweites
   Gewicht neben der Marke. Nur auf der einen privaten Seite ueberhaupt im
   DOM (brand.private in templates/status.html). */
.header-actions { margin-left: auto; }
.login-link {
  color: var(--muted, #597383); text-decoration: none;
  font-size: 0.82rem; font-weight: 600;
}
.login-link:hover { color: var(--primary); text-decoration: underline; }

/* Platz fuer Clerks Konto-Knopf. Feste Hoehe, damit der Kopf nicht springt,
   wenn clerk-js den Avatar nachtraeglich einhaengt — er kommt per Netzwerk,
   also immer ein Stueck nach dem ersten Bild der Seite. */
.header-user { display: flex; align-items: center; justify-content: flex-end; min-width: 32px; min-height: 32px; }
.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; }

/* ── Vorfälle als Tagesliste ────────────────────────────────────────────────
   Jeder Tag bekommt eine Zeile, auch der ohne Vorfall — das ist der Punkt:
   neben dreizehn stillen Zeilen liest sich derselbe Vorfall anders als allein.

   Drei Entscheidungen, die das erst tragfähig machen:

   Die Liste ist EINE Karte, nicht vierzehn. Bare Textzeilen auf dem Seiten-
   hintergrund sehen neben den Komponentenkarten darüber unfertig aus, und
   vierzehn einzelne Karten wären eine Ziegelmauer.

   Der Rhythmus ist eng. Ein stiller Tag ist zwei Zeilen Text; ihm 80 Pixel
   zu geben macht aus "nichts passiert" ein Ereignis und schiebt den einen
   echten Vorfall aus dem Bild.

   Und der Vorfall bekommt keine eigene Karte: ein weißer Kasten zwischen
   Textzeilen macht aus einer Störung von einer Minute den lautesten
   Gegenstand der Seite. */
.incident-days {
  list-style: none;
  margin: 0;
  padding: 4px 18px 14px;
  background: #fff;
  border: 1px solid var(--border, #d9e3eb);
  border-radius: 10px;
}

/* Der Abstand zum nächsten Tag ist rund dreimal der zwischen Datum und
   Text. Bei gleichem Abstand gruppiert das Auge den Text mit dem FOLGENDEN
   Datum, und jede Trennlinie sieht aus, als gehörte sie nach oben. */
.incident-day { padding-top: 19px; }
.incident-day:first-child { padding-top: 8px; }

.day-head {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--foreground);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border, #d9e3eb);
}
.incident-day.quiet .day-head { font-weight: 500; color: var(--muted); }

.day-empty {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 7px 0 0;
}

/* Der Vorfall steht im selben Fluss wie der Tag darüber, nur mit Gewicht. */
.incident-day .card.incident {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 8px 0 2px;
}
.incident-day .card-title { font-size: 0.9rem; }
.incident-day .card-meta { margin-top: 3px; }
.incident-day .update { margin-top: 6px; }

/* Ein behobener Vorfall ist eine Fußnote, kein Erfolg. Grün leuchtend neben
   "Keine Vorfälle gemeldet" zieht das Auge auf den einen schlechten Tag.
   Offen bleibt farbig — das soll auffallen. */
.incident-day .pill.up {
  background: none;
  border: 1px solid var(--border, #d9e3eb);
  color: var(--muted);
  font-weight: 500;
}

.duration { white-space: nowrap; }

.history-link { margin-top: 14px; font-size: 0.82rem; }
.history-link a { color: var(--primary); text-decoration: none; }
.history-link a:hover { text-decoration: underline; }
.history-hint { color: var(--muted); margin-left: 10px; }

.back-link { margin: 0 0 18px; font-size: 0.85rem; }
.back-link a { color: var(--primary); text-decoration: none; }
.back-link a:hover { text-decoration: underline; }

/* ── Vorfallverlauf ─────────────────────────────────────────────────────────
   Monatsweise statt tageweise. Über Monate hinweg tragen die leeren Zeilen
   nicht mehr, die auf der Statusseite den Punkt machen — 90 stille Tage sind
   kein Vertrauensbeweis, sondern Scrollarbeit. Ein ruhiger Monat sagt es
   deshalb in einem Satz. */
.history-month + .history-month { margin-top: 34px; }
.history-month h2 { padding-bottom: 8px; border-bottom: 1px solid var(--border); }

.history-incident { padding: 14px 0; border-bottom: 1px solid var(--border); }
.history-incident:last-child { border-bottom: 0; }
.history-title { font-weight: 600; font-size: 15px; }
.history-incident.down .history-title { color: var(--foreground); }
.history-message { color: var(--foreground); font-size: 14px; margin-top: 4px; }
.history-meta { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* Ein schlechter Monat darf die Seite nicht zur Wand machen: drei Vorfälle
   sagen, wie der Monat lief, der Rest ist einen Klick entfernt. */
.fold summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  padding: 10px 0;
  list-style: none;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover { color: var(--primary); }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.pager a { color: var(--primary); text-decoration: none; }
.pager a:hover { text-decoration: underline; }
.pager-range { color: var(--muted); }
.pager .disabled { color: var(--border); }

/* Sprachumschalter (services/i18n.py) */
.lang-switch { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.header-actions + .lang-switch { margin-left: 16px; }
.lang-switch a { color: var(--muted); text-decoration: none; }
.lang-switch a:hover { color: var(--primary); text-decoration: underline; }
.lang-switch .current { color: var(--foreground); font-weight: 600; }