/* ==========================================================================
   Enloc Custom CSS für Atlassian Statuspage  ·  v2
   ==========================================================================
   Einbau: Settings → Appearance → Custom CSS (nur mit eigener Domain,
   z. B. status.enloc.de).

   Aufgabenteilung
   - Appearance-Editor (kein CSS nötig): Seitenhintergrund Navy #071727,
     Text Weiß #FFFFFF, Logo/Cover-Bild, Texte, Status-Farben (falls im Tarif).
   - Diese Datei: Rundungen, Karten, Pills, Kontrast, Bewegung, Fokus.

   Quellen der Selektoren
   - Aktiv genutzt: nur Klassen, die bereits am echten Markup bestätigt sind
     (.unresolved-incidents, .unresolved-incident.impact-*, .incident-title,
     .updates, .subscribe, .impact-maintenance) bzw. aus Atlassians offiziellem
     Snippet-Repo stammen.
   - Ganz unten: Abschnitt "NOCH ZU PRÜFEN" (auskommentiert). Dort fehlen die
     Klassennamen. Erst per Rechtsklick → Untersuchen eintragen.

   Änderungen gegenüber v1
   - Bugfix: Rahmen/Rundung nur noch bei aktuellen Meldungen (.unresolved-
     incidents). Vergangene Wartungen bekamen bisher fälschlich einen Rahmen.
   - Status-Banner: kein fester gelber Rand mehr, Farbe folgt dem Status.
   - Kontrast: dunkle Schrift auf gelben/orangen Titelbalken (Enloc-Regel:
     Text auf Farbe = Weiß oder Navy).
   - Links in Meldungen: weiß mit roter Unterstreichung statt Rot auf Navy.
   - Bewegung: 160 ms ease-out, Press-Feedback, prefers-reduced-motion.
   - Fokus-Ring für Tastaturbedienung.
   - Toter Block (Custom Header/Footer/Cover) entfernt.
   ========================================================================== */

/* ---- Enloc-Tokens ----
   Aus dem Corporate Design (Primär und Sekundär):
     Navy #071727 · Rot #DD0935 · Weiß #FFFFFF · Digital Blau #1261F9 ·
     Hellblau #7EA5B8 · Gelb #FFC31E · Korallrot #EB505F · Jadegrün #37A087 ·
     Blaugrau #BED2D7 (hier nicht benötigt)
   Abgeleitet, NICHT in der CD-Farbliste (nur für Flächen und Zustände):
     --en-navy-raised  Kartenfläche auf Navy (aus dem enloc-design-System)
     --en-red-hover/-active  Rot abgedunkelt für Hover/Press (dito)
     --en-hairline(-strong)  Weiß mit 14 % / 28 % Deckkraft für Trennlinien */
:root {
  /* CD */
  --en-navy: #071727;
  --en-red: #dd0935;
  --en-white: #ffffff;
  --en-blue: #1261f9;
  --en-blue-light: #7ea5b8;
  --en-yellow: #ffc31e;
  --en-coral: #eb505f;
  --en-jade: #37a087;

  /* abgeleitet */
  --en-navy-raised: #0e2236;
  --en-red-hover: #c40730;
  --en-red-active: #a90629;
  --en-hairline: rgba(255, 255, 255, 0.14);
  --en-hairline-strong: rgba(255, 255, 255, 0.28);

  --en-radius-lg: 16px;
  --en-radius-md: 12px;
  --en-radius-pill: 999px;
  --en-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---- Typografie ----
   TT Commons ist kein Systemfont. Ohne gehostete Webfont greift der
   Fallback. Siehe optionalen @font-face-Block ganz unten. */
body.status,
.layout-content {
  font-family: "TT Commons", Calibri, "Segoe UI", Arial, sans-serif;
}

/* ---- Container: eine Breite für alles ---- */
.container {
  max-width: 880px;
}

/* ---- Trennlinien: Enloc-Haarlinie ---- */
body.status .layout-content .border-color,
hr,
.tooltip-base,
.markdown-display table {
  border-color: var(--en-hairline);
}

.date.border-color {
  border-color: var(--en-hairline-strong);
}

/* ---- Gesamtstatus-Banner ----
   Neutral als Standard, Farbe folgt dem Status.
   Klassen .status-none/-minor/-major/-critical/-maintenance bitte einmal
   per Untersuchen bestätigen (siehe "NOCH ZU PRÜFEN"). */
.layout-content.status.status-index .page-status {
  background: var(--en-navy-raised);
  border: none;
  border-left: 4px solid var(--en-hairline-strong);
  border-radius: 8px;
  text-shadow: none;
}

.layout-content.status.status-index .page-status.status-none {
  border-left-color: var(--en-jade);
}
.layout-content.status.status-index .page-status.status-minor {
  border-left-color: var(--en-yellow);
}
.layout-content.status.status-index .page-status.status-major {
  border-left-color: var(--en-coral);
}
.layout-content.status.status-index .page-status.status-critical {
  border-left-color: var(--en-red);
}
.layout-content.status.status-index .page-status.status-maintenance {
  border-left-color: var(--en-blue);
}

/* ---- Komponentenliste als Karte ---- */
.layout-content.status.status-index .components-section .components-container.one-column {
  background: var(--en-navy-raised);
  border-radius: var(--en-radius-lg);
}

/* ---- Metrics-Kacheln ---- */
.layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
  background: var(--en-navy-raised);
  border-radius: var(--en-radius-lg);
}

/* ---- Verfügbarkeitsbalken: nur Ecken, Statusfarben bleiben bei Statuspage ---- */
.availability-time-line-graphic rect {
  rx: 2px;
}

/* ---- Zeitraum-Pills und Paginierung ---- */
.custom-metrics-container .timeframes-container .timeframe,
.layout-content.status.status-full-history .history-nav a,
.layout-content .pagination a {
  border: none !important;
  border-radius: var(--en-radius-pill) !important;
  padding: 0.2em 0.9em 0.05em !important;
  transition: background-color 160ms var(--en-ease-out), transform 160ms var(--en-ease-out) !important;
}

.custom-metrics-container .timeframes-container .timeframe.active,
.layout-content.status.status-full-history .history-nav a.current,
.layout-content .pagination a:not(.disabled) {
  background: var(--en-red);
  color: var(--en-white);
}

.custom-metrics-container .timeframes-container .timeframe:not(.active):hover,
.layout-content.status.status-full-history .history-nav a:not(.current):hover,
.layout-content .pagination a:not(.disabled):hover {
  background: var(--en-hairline);
}

.custom-metrics-container .timeframes-container .timeframe:active,
.layout-content .pagination a:not(.disabled):active {
  transform: scale(0.97);
}

/* ---- Primärer Button (Subscribe to updates) ---- */
.flat-button {
  background: var(--en-red);
  color: var(--en-white);
  box-shadow: none;
  text-shadow: none;
  border-radius: var(--en-radius-pill);
  transition: background-color 160ms var(--en-ease-out), transform 160ms var(--en-ease-out);
}

.flat-button:hover {
  background: var(--en-red-hover);
}

.flat-button:active {
  background: var(--en-red-active);
  transform: scale(0.97);
}

/* ---- Abo-Dropdown: heller Grund, daher dunkle Schrift ---- */
.updates-dropdown-container .updates-dropdown .updates-dropdown-section {
  color: var(--en-navy);
}

/* ---- Tooltip über den Verfügbarkeitsbalken ---- */
#uptime-tooltip {
  border: none !important;
  background: transparent !important;
}

#uptime-tooltip .tooltip-box,
#uptime-tooltip #box-arrow {
  background: var(--en-navy-raised) !important;
}

#uptime-tooltip .pointer-smaller {
  border-bottom-color: var(--en-navy-raised) !important;
}

#uptime-tooltip .related-events .related-event .related-event-link {
  color: var(--en-white) !important;
}

/* ---- Link zur vollständigen Historie ---- */
.history-footer-link {
  color: var(--en-blue-light);
}

/* ==========================================================================
   Aktive Vorfälle und Wartungen als Karten
   ==========================================================================
   FIX gegenüber v1: .impact-maintenance war unscoped und traf auch den Titel
   vergangener Wartungen (Rahmen um den Titel am 23.09.). Jetzt nur noch
   innerhalb von .unresolved-incidents.
   ========================================================================== */
.unresolved-incidents .unresolved-incident {
  border-radius: var(--en-radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--en-hairline) !important;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.unresolved-incidents .unresolved-incident:last-child {
  margin-bottom: 0;
}

.unresolved-incidents .unresolved-incident .incident-title {
  border-radius: var(--en-radius-md) var(--en-radius-md) 0 0 !important;
  border: none !important;
}

.unresolved-incidents .unresolved-incident .updates {
  border-radius: 0 0 var(--en-radius-md) var(--en-radius-md) !important;
  border: none !important;
}

/* ---- Bannerfarben exakt nach CD ----
   Wartung Digital Blau · minor Gelb · major Korallrot · critical Rot.
   Statuspage-Standard-Orange (#F26B2A) ist nicht in der CD und entfällt. */
.unresolved-incident.impact-maintenance .incident-title { background: var(--en-blue) !important; }
.unresolved-incident.impact-minor .incident-title       { background: var(--en-yellow) !important; }
.unresolved-incident.impact-major .incident-title       { background: var(--en-coral) !important; }
.unresolved-incident.impact-critical .incident-title    { background: var(--en-red) !important; }

/* ---- Kontrast: Text auf Farbe = Weiß oder Navy ----
   Gelb (minor) und Korallrot (major) bekommen Navy-Schrift.
   Rot (critical) und Blau (maintenance) behalten Weiß. */
.unresolved-incident.impact-minor .incident-title,
.unresolved-incident.impact-major .incident-title,
.unresolved-incident.impact-minor .incident-title a:not(.subscribe),
.unresolved-incident.impact-major .incident-title a:not(.subscribe) {
  color: var(--en-navy) !important;
  text-shadow: none;
}

/* ---- Links im Update-Text: Weiß mit roter Linie ----
   Rot auf Navy hat nur ca. 3,6:1 und ist für kleinen Text zu schwach. */
.unresolved-incident .updates a {
  color: var(--en-white);
  text-decoration: underline;
  text-decoration-color: var(--en-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms var(--en-ease-out);
}

.unresolved-incident .updates a:hover {
  text-decoration-color: var(--en-white);
}

/* ---- "Subscribe" im Titelbalken: Navy-Pill, lesbar auf jeder Bannerfarbe ---- */
.incident-title .subscribe {
  display: inline-block;
  background: var(--en-navy);
  color: var(--en-white) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none !important;
  text-shadow: none;
  padding: 4px 14px;
  border-radius: var(--en-radius-pill);
  transition: background-color 160ms var(--en-ease-out), transform 160ms var(--en-ease-out);
}

.incident-title .subscribe:hover {
  box-shadow: inset 0 0 0 1px var(--en-white);
}

.incident-title .subscribe:active {
  transform: scale(0.97);
}

/* ---- Fokus: Zwei-Ton-Ring, sichtbar auf Navy, Gelb, Orange, Rot ---- */
.layout-content a:focus-visible,
.flat-button:focus-visible,
.incident-title .subscribe:focus-visible {
  outline: 2px solid var(--en-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--en-blue);
}

/* ---- Weniger Bewegung, wenn gewünscht ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   NOCH ZU PRÜFEN (auskommentiert, erst nach Rechtsklick → Untersuchen)
   ==========================================================================
   A) Header-Ausrichtung
      Im Screenshot gibt es drei verschiedene linke Kanten:
        Cover-Bild (Logo, "Systemstatus")  ≈ 80 px
        Leiste "Transparenz in Echtzeit"   ≈ 32 px
        Karten und Fließtext               ≈ 21 px
      Der robusteste Fix ist das Cover-Bild selbst: neu exportieren mit der
      Container-Breite (880 px, @2x = 1760 px), Logo und Text bündig an der
      linken Bildkante. Danach optional per CSS:

      .MASTHEAD-SELEKTOR .container { padding-left: 0; padding-right: 0; }
      .COVER-BILD-SELEKTOR img { display: block; width: 100%; max-width: none; }

   B) Schwarze Leiste "Transparenz in Echtzeit" (Page headline)
      Erst im Appearance-Editor nach einer Farbeinstellung suchen. Sonst:

      .LEISTEN-SELEKTOR {
        background: var(--en-navy-raised);
        border: 1px solid var(--en-hairline);
        border-radius: var(--en-radius-lg);
        margin-left: 0; margin-right: 0;   // bündig mit den Karten
      }

   C) Komponenten-Status-Text und Verfügbarkeitsbalken
      "Under Maintenance" steht in Digital Blau auf Navy (3,2:1, zu schwach für
      kleinen Text). Vorschlag: Hellblau #7EA5B8 (6,1:1). Betrifft auch den Titel
      vergangener Wartungen. Balkenfarben: Jadegrün #37A087 statt Statuspage-
      Grün, Rot #DD0935, Gelb #FFC31E. Erst im Editor prüfen, sonst Klassen der
      Status per Untersuchen holen.

   D) Überschriften ("Past Incidents", "About This Site")
      Klasse prüfen (vermutlich .font-largest), dann font-weight: 800 und
      letter-spacing: -0.02em. Wirkt erst mit echtem TT Commons ExtraBold.

   E) Optional: TT Commons als Webfont
      Nur, wenn die Lizenz Webnutzung erlaubt und die Dateien öffentlich
      erreichbar gehostet sind:

      @font-face {
        font-family: "TT Commons";
        src: url("https://DEINE-DOMAIN/fonts/TTCommons-Regular.woff2") format("woff2");
        font-weight: 400; font-display: swap;
      }
      @font-face {
        font-family: "TT Commons";
        src: url("https://DEINE-DOMAIN/fonts/TTCommons-ExtraBold.woff2") format("woff2");
        font-weight: 800; font-display: swap;
      }
   ========================================================================== */