/* ==========================================================================
   Enloc Custom CSS für Atlassian Statuspage
   ==========================================================================
   Einbau: Settings → Appearance → Custom CSS (erfordert eine eigene Domain,
   z. B. status.enloc.de – ohne Custom Domain nimmt Statuspage kein Custom CSS an).

   WICHTIG ZUR EINORDNUNG:
   - Grundfarben (Seitenhintergrund, Text, Links, Logo) stellst du im visuellen
     Appearance-Editor ein (Navy #071727, Weiß #FFFFFF, Rot #DD0935) – dafür
     brauchst du kein CSS, das kann jederzeit ohne Entwickler geändert werden.
   - Dieses Stylesheet ergänzt nur, was der visuelle Editor nicht kann:
     Container-Breite, Rundungen, Pill-Buttons, Verfügbarkeits-Balken,
     Trennlinien, Abo-Dropdown, Tooltip, Footer.
   - Die Selektoren unten sind keine Vermutung: Sie stammen aus Atlassians
     eigenem CSS-Snippet-Repo (github.com/StatusPage/css-js-snippets) und aus
     dem produktiv genutzten Custom-CSS von status.cdnjs.com
     (github.com/cdnjs/statuspage/blob/master/custom-css.css) – zwei öffentlich
     einsehbare, echte Statuspage-Instanzen.
   - NICHT offiziell dokumentiert sind die exakten Klassennamen für die fünf
     Komponenten-Status (Operational / Under maintenance / Degraded performance /
     Partial outage / Major outage). Atlassian veröffentlicht diese Klassen nicht
     und sie können sich je nach Template-Version leicht unterscheiden – bevor du
     dort Farben erzwingst, einmal kurz per Rechtsklick → Untersuchen auf eurer
     eigenen Live-Seite nachsehen. Ich wollte hier nichts erfinden, das am Ende
     nicht greift.
   ========================================================================== */

/* ---- Typografie: Enloc-Fallback-Stack (TT Commons ist nicht als Webfont
   verfügbar, daher wie im Enloc-Brand für E-Mail/Präsentation der Fallback) ---- */
body.status,
.layout-content {
  font-family: "Calibri", "Segoe UI", Arial, sans-serif;
}

/* ---- Gesamtbreite etwas großzügiger, näher am 840–880px-Layout ---- */
.container {
  max-width: 880px;
}

/* ---- Trennlinien: statt Standardgrau die Enloc-Haarlinie auf Navy ---- */
body.status .layout-content.status .border-color,
hr,
.tooltip-base,
.markdown-display table {
  border-color: rgba(255, 255, 255, 0.14);
}

.date.border-color {
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---- Overall-Status-Banner oben auf der Seite ---- */
.layout-content.status.status-index .page-status {
  background: #0e2236;
  border: none;
  border-left: 4px solid #ffc31e; /* Gelb = "Eingeschränkte Leistung"-Ton, wie im Mockup */
  border-radius: 8px;
  text-shadow: none;
}

/* ---- Komponentenliste als eigene Karte ---- */
.layout-content.status.status-index .components-section .components-container.one-column {
  background: #0e2236;
  border-radius: 16px;
}

/* ---- Verfügbarkeits-/Metrics-Kacheln ---- */
.layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
  background: #0e2236;
  border-radius: 16px;
}

/* ---- Verfügbarkeitsbalken: nur Ecken abrunden, Statusfarben bleiben von
   Statuspage selbst gesteuert (Grün/Gelb/Rot) – siehe Hinweis oben ---- */
.availability-time-line-graphic rect {
  rx: 2px;
}

/* ---- Zeitraum-Pills (7/30/90 Tage) und Paginierung im Enloc-Pill-Stil ---- */
.custom-metrics-container .timeframes-container .timeframe,
.layout-content.status.status-full-history .history-nav a,
.layout-content .pagination a {
  border: none !important;
  border-radius: 999px !important;
  padding: 0.2em 0.9em 0.05em !important;
  transition: background 0.18s ease !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: #dd0935; /* Enloc-Rot als aktive Auswahl */
  color: #fff;
}

.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: rgba(255, 255, 255, 0.14);
}

/* ---- Buttons allgemein (u. a. "Updates abonnieren" innerhalb des
   Seiteninhalts, nicht im Custom Header – dafür siehe unten). ---- */
.flat-button {
  background: #dd0935;
  color: #fff;
  box-shadow: none;
  text-shadow: none;
  border-radius: 999px;
}

.flat-button:hover {
  background: #c40730; /* Enloc Hover-Rot */
}

/* ---- Abo-Dropdown: Inhalt bleibt auf hellem Grund, daher dunkle Schrift
   erzwingen (gleicher Fix wie bei status.cdnjs.com für ihr Dark Theme) ---- */
.updates-dropdown-container .updates-dropdown .updates-dropdown-section {
  color: #000;
}

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

#uptime-tooltip .tooltip-box,
#uptime-tooltip #box-arrow {
  background: #0e2236 !important;
}

#uptime-tooltip .pointer-smaller {
  border-bottom-color: #0e2236 !important;
}

#uptime-tooltip .related-events .related-event .related-event-link {
  color: #fff !important;
}

/* ---- Footer-Link zur vollständigen Historie: dezenter statt Standardblau ---- */
.history-footer-link {
  color: #7ea5b8;
}

/* ==========================================================================
   NEU: Einheitlicheres Kartenformat für aktive Vorfälle & Wartungen
   ==========================================================================
   Aktuell wirken die farbigen Vorfalls-/Wartungsblöcke (rot/gelb/blau) auf
   der Seite optisch wie ein Fremdkörper gegenüber den abgerundeten Karten
   bei Komponenten/Metrics – eckig, ohne Abstand zueinander, kein Schatten.
   Beide Selektoren unten sind offiziell von Atlassian dokumentiert
   (support.atlassian.com/statuspage/docs/css-and-javascript-snippets-for-
   customizations/): .unresolved-incidents ist der Container aller aktuell
   offenen Vorfälle, .impact-maintenance kennzeichnet angekündigte/laufende
   Wartungen. Für die einzelnen Auswirkungsstufen bei Incidents entdeckt per
   Rechtsklick → Untersuchen: jeder Vorfall ist ein
   .unresolved-incidents > .unresolved-incident.impact-{stufe} mit zwei
   Kindern, .incident-title (der farbige Kopf inkl. Titel-Link und dem
   "Subscribe"-Link, Klasse schlicht .subscribe) und .updates (der dunkle
   Verlaufsbereich darunter). Alle Selektoren unten sind also jetzt aus
   eurem echten Markup verifiziert, keine Vermutung mehr.

   HINWEIS Rundung: Statuspage rundet den Titelbalken selbst schon oben ab
   und legt aber offenbar unten einen eigenen, nicht gerundeten Rahmen/Rand
   drüber – daher hier gezielt getrennt: Rundung oben nur am Titel, unten
   nur am Update-Bereich, statt sich auf overflow:hidden am Wrapper allein
   zu verlassen. Die dezente Haarlinie außen (wie im Rest der Seite, siehe
   ".border-color" oben) kommt hier bewusst zurück, da das reine
   border:none den Block zuvor komplett randlos wirken ließ. ---- */
.unresolved-incidents .unresolved-incident,
.impact-maintenance {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !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: 12px 12px 0 0 !important;
  border: none !important;
}

.unresolved-incidents .unresolved-incident .updates {
  border-radius: 0 0 12px 12px !important;
  border: none !important;
}

/* ---- "Subscribe"-Link im farbigen Titelbalken jedes Vorfalls: bisher nur
   über JS lösbar (siehe unten, jetzt überholt), weil keine Quelle die
   Klasse dokumentierte. Per Rechtsklick → Untersuchen bestätigt: Der Link
   trägt schlicht die Klasse .subscribe – damit lässt sich der bisherige
   JS-Workaround komplett streichen. Eigener dunkler Pill-Hintergrund statt
   bloßer Textfarbe, damit die Lesbarkeit unabhängig von der jeweiligen
   Banner-Farbe (Gelb/Rot/Orange) garantiert ist. ---- */
.incident-title .subscribe {
  display: inline-block;
  background: #071727;
  color: #fff !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: 999px;
  transition: background 0.18s ease;
}

.incident-title .subscribe:hover {
  background: #000;
}

/* ==========================================================================
   AB HIER TOT (nicht mehr aktiv): Zugehörig zu enloc-statuspage-header.html /
   enloc-statuspage-footer.html
   ==========================================================================
   Euer aktuelles Paket erlaubt nur Custom CSS, kein Custom HTML/JS – diese
   Klassen werden also nirgendwo im echten Markup vergeben und greifen ins
   Leere. Sie stören nicht (kein Element trägt sie), aber sie tun auch
   nichts mehr. Das Logo/"Systemstatus"/der rote Untertitel kommen bei euch
   stattdessen komplett aus dem hochgeladenen Cover-Bild (nativ, kein HTML
   nötig), und der schwarze Balken + der große "Subscribe"-Button oben sind
   Statuspages eigene, native Elemente (Feld "Page headline" + eingebauter
   Abo-Button). Sag Bescheid, falls ich diesen Block ersatzlos rausnehmen
   soll, oder falls ihr später auf ein Paket mit Custom HTML wechselt – dann
   könnt ihr ihn direkt wieder nutzen.
   ========================================================================== */

/* ---- Schmale Nav-Leiste ganz oben ---- */
.custom-header-bar {
  text-align: center;
  padding: 6px 15px;
  background-color: #0e2236;
  border-bottom: 2px solid #dd0935;
  overflow-x: auto;
}

.custom-header-navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 22px;
  white-space: nowrap;
}

.custom-header-navigation li {
  display: inline-block;
  padding-right: 14px;
}

.custom-header-navigation li:last-child {
  padding-right: 0;
}

.custom-header-navigation a {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.custom-header-navigation a:hover {
  color: #ffc31e;
  text-decoration: none;
}

/* ---- Cover-Banner: enloc-statuspage-cover.png als Header-Bild, Logo/
   "Systemstatus"/Unterzeile stecken schon fertig im Bild, deshalb hier nur
   Bild + darüber liegender Abo-Button. Ersetzt die frühere reine Text-
   Masthead (Logo-Icon + <span>-Titel), die parallel zum Bild doppelt
   gewirkt hätte. ---- */
.custom-cover {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 0;
}

.custom-cover-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.custom-cover-subscribe {
  position: absolute;
  top: 44px;
  right: 40px;
}

/* Statuspage tauscht #replace-with-subscribe automatisch gegen einen
   eigenen Link/Button aus, dessen genaue Klasse nicht öffentlich
   dokumentiert ist und sich seit dem Wegfall von .masthead-container
   (durch den Custom Header) geändert haben kann. Deshalb hier bewusst
   breit über den eigenen, garantiert stabilen Wrapper .custom-cover-subscribe
   ansprechen statt über Statuspages interne Klasse – das greift unabhängig
   davon, wie das injizierte Element im Detail heißt. */
.custom-cover-subscribe a {
  display: inline-block;
  background: #dd0935;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  text-shadow: none;
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background 0.18s ease;
}

.custom-cover-subscribe a:hover {
  background: #c40730;
}

@media (max-width: 480px) {
  .custom-cover-subscribe {
    position: static;
    margin-top: 16px;
    text-align: right;
  }
}

/* ---- ÜBERHOLT: "Abonnieren"-Link in der Vorfalls-Kopfzeile.
   Dieser JS-basierte Ansatz ist jetzt ersetzt durch die einfache, über
   Rechtsklick → Untersuchen bestätigte Regel ".incident-title .subscribe"
   weiter oben im aktiven Teil dieser Datei – die braucht kein Custom HTML/
   JS mehr. Dieser Block hier bleibt nur als totes Überbleibsel stehen. ---- */
.custom-incident-subscribe {
  display: inline-block;
  background: #071727;
  color: #fff !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: 999px;
  transition: background 0.18s ease;
}

.custom-incident-subscribe:hover {
  background: #000;
}

/* ---- Footer-Leiste (custom-footer.html) ---- */
.custom-footer-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 20px 15px 40px;
  text-align: center;
}

.custom-footer-text {
  margin: 0;
  font-size: 13px;
  color: #7ea5b8;
}

.custom-footer-text a {
  color: #7ea5b8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.custom-footer-text a:hover {
  color: #fff;
}