/* =====================================================
   SuppTree — Shared Incident Banner Styles (Welle 9)
   =====================================================
   Stile für window.SUPPTREE_INCIDENT_BANNER. Der Banner sitzt ganz
   oben im jeweiligen App-Shell (über Topbar/Inhalt). Kein Dismiss —
   ein aktiver Vorfall bleibt sichtbar, bis er geschlossen ist.

   Nutzt die SuppTree-CSS-Variablen (--danger / --warning / --r), mit
   defensiven Fallbacks, falls eine App diese Variablen nicht setzt.
   ===================================================== */

.sib-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 13px;
  line-height: 1.4;
  transition: filter 0.15s ease;
}
.sib-banner:hover {
  filter: brightness(0.96);
}

/* Kritisch — voller, kräftiger roter Balken. */
.sib-kritisch {
  background: var(--danger, #ef4444);
  color: #ffffff;
}

/* Übrige Schweregrade — ruhigerer rot/oranger Streifen. */
.sib-warn {
  background: #fff7ed;
  color: #7c2d12;
  border-left: 4px solid var(--warning, #f59e0b);
}

.sib-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.sib-text {
  flex: 1;
  min-width: 0;
}

.sib-title {
  font-weight: 700;
  font-size: 13px;
}

.sib-body {
  font-size: 12px;
  opacity: 0.92;
  margin-top: 2px;
}

/* Klick-Affordanz (Pfeil) — signalisiert: Banner ist klickbar. */
.sib-affordance {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 700;
  opacity: 0.7;
}

/* Mehrere Banner untereinander — letzter ohne doppelte Trennlinie. */
.sib-banner + .sib-banner {
  border-top: none;
}

/* -----------------------------------------------------
   Layout-Integration des Banner-Hosts.
   Die App-Shells (hersteller/ & partner/) sind flex-row
   (Sidebar + Main nebeneinander). Damit der Banner-Host
   ganz oben über die volle Breite läuft, bekommt der
   Shell flex-wrap und der Host eine volle Zeile.
   ----------------------------------------------------- */
#appShell { flex-wrap: wrap; }
#incidentBannerHost {
  flex: 0 0 100%;
  width: 100%;
}
#incidentBannerHost:empty {
  display: none;
}