/* mb-vollansichten.css — Mein-Bereich-Sub-Tabs "Alle Benachrichtigungen" + "Neuigkeiten".
   App-Standard-Chrome (Toolbar wie Anfragen/Kontingente), gehostet im .ich-tabpanel via
   LoD.MbvShell: .app-scope.mbv-scope > .mbv-toolbar-bar (sticky, voll-bleed) [PageToolbar]
   + .mbv-body (zentrierte Lese-Spalte, EINE Spalte). Scroll macht das .ich-tabpanel selbst —
   daher KEIN lod-section-scroll/height:100% hier (das bricht die Hoehen-Kette → Scroll tot).
   Controls = SSOT: Status/Typ = PageToolbar-State-Pills, Kategorie = CustomSelect, Zaehler =
   CounterBlock, Liste/Zeit-Gruppen = GroupedList, Empty/Loading/Error = LoadState.
   Items = .notif-event-item (layout.css) / .cl-* (topbar-dropdowns.css), als Karten aufgewertet. */

/* ── Shell ── */
/* .app-scope setzt display:flex/height:100% — hier neutralisieren, damit der Inhalt
   natuerlich fliesst und das .ich-tabpanel (overflow-y:auto) scrollt. */
.mbv-scope { display: block; height: auto; }
.mbv-toolbar-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.mbv-toolbar { max-width: 1080px; margin: 0 auto; }
.mbv-body { max-width: 1080px; margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-8); }

/* Alle Benachrichtigungen: der Kategorie-Select (.cs-wrap/.cs-trigger, bespoke im
   Left-Slot) ist nicht tier-kollabierbar und drueckte bei Enge den 'ungelesen'-
   Counter (Tier 1–2) lautlos weg. Ab Tier 1 (Attribut vorhanden) gibt der Select
   Breite ab + die Suche darf schmaler werden, damit der Counter erhalten bleibt.
   Muster wie Personal-Controls / .app-tb-firmachip (toolbar.css). */
.app-scope.mbv-scope [data-tb-tier] .app-search-input { flex-basis: 300px; }
.app-scope.mbv-scope [data-tb-tier] .cs-trigger {
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Alle Benachrichtigungen: EINE Spalte, gruppiert ── */
.mba-list { display: flex; flex-direction: column; gap: var(--space-4); }
.mba-list .gl-group-cards { display: flex; flex-direction: column; gap: var(--space-2-5); }
.mba-list .notif-event-item {
  grid-template-columns: 40px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: background var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
/* Nur HOHE Prioritaet badgen — "Normal"/"Niedrig" ist hier nur Rauschen */
.mba-list .notif-prio-normal,
.mba-list .notif-prio-low { display: none; }
.mba-list .notif-event-item:hover {
  border-color: var(--brand-default);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.mba-list .notif-event-item.is-unread {
  background: var(--color-bg-subtle);
  box-shadow: inset 3px 0 0 var(--notif-accent, var(--brand-default)), 0 1px 2px rgba(0, 0, 0, 0.03);
}
.mba-list .notif-event-indicator { display: none; }
.mba-list .notif-event-icon {
  width: 40px; height: 40px; margin-top: 0; opacity: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--notif-accent, var(--color-text-muted)) 16%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--notif-accent, var(--color-text-muted)) 26%, transparent);
}
.mba-list .notif-event-icon img { display: none; }
.mba-list .notif-event-icon::after {
  content: '';
  width: 18px; height: 18px;
  background-color: var(--notif-accent, var(--color-text-muted));
  -webkit-mask: var(--notif-icon) center / 18px 18px no-repeat;
  mask: var(--notif-icon) center / 18px 18px no-repeat;
}
.mba-list .notif-event-title { white-space: normal; font-size: var(--font-size-base); }
.mba-list .notif-event-desc {
  white-space: normal; overflow: visible;
  font-size: var(--font-size-sm); line-height: 1.45; margin-top: var(--space-1);
}
.mba-list .notif-event-aside { min-width: 56px; }
.mba-more {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--brand-default);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.mba-more:hover { background: var(--color-bg-subtle); }

/* ── Neuigkeiten (Vollansicht): ruhige, zentrierte Lese-Spalte (~760px) mit
   gegruendeten Karten. Toolbar UND Inhalt teilen dieselbe schmale Breite — auf
   breiten/4K-Schirmen bleibt links/rechts ruhiger Rand (der Premium-Hebel). ── */
#mb-neuigkeiten-content .mbv-toolbar,
#mb-neuigkeiten-content .mbv-body { max-width: 760px; }
/* Toolbar horizontal an die Body-/Karten-Breite angleichen (Body hat space-6-Padding),
   damit Filter-Chips + Zaehler links/rechts mit Suche und Karten fluchten. */
#mb-neuigkeiten-content .mbv-toolbar { padding-left: var(--space-6); padding-right: var(--space-6); }

/* Volltext-Suche volle Breite = exakt Karten-Breite (selber Body-Container). Hebt die
   Toolbar-Default-Kappung der .app-search-input (max-width 600) gezielt auf. */
#mb-neuigkeiten-content .mb-nv-searchbar {
  width: 100% !important; max-width: none !important;
  flex: none !important; min-width: 0 !important;
  margin: 0 0 var(--space-5);
}

.mb-nv-feed .cl-feed { display: flex; flex-direction: column; gap: var(--space-4); }
.mb-nv-feed .cl-version {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--surface-radius);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 12px 28px -16px rgba(20, 20, 30, 0.16);
  transition: box-shadow var(--duration-normal), transform var(--duration-normal), border-color var(--duration-normal);
}
.mb-nv-feed .cl-version:hover {
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.05), 0 20px 40px -18px rgba(20, 20, 30, 0.24);
  transform: translateY(-2px);
}
/* Neueste/ungesehene Version = das eine hervorgehobene Signal: Marken-Akzent + blaues Datum */
.mb-nv-feed .cl-version--new { border-color: color-mix(in srgb, var(--brand-default) 26%, var(--color-border)); }
.mb-nv-feed .cl-version--new::before {
  content: ''; position: absolute; left: 0; top: var(--space-5); bottom: var(--space-5);
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-default);
}
/* Datum als ruhige Eyebrow ueber dem Titel (einspaltig in der Karte) */
.mb-nv-feed .cl-version-meta { margin-bottom: var(--space-1-5); }
.mb-nv-feed .cl-version-date {
  font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.mb-nv-feed .cl-version--new .cl-version-date { color: var(--brand-default); }
.mb-nv-feed .cl-version-head { gap: var(--space-2); padding-right: var(--space-8); }
.mb-nv-feed .cl-version-titel { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); letter-spacing: -0.022em; }
.mb-nv-feed .cl-list { margin-top: var(--space-4); gap: var(--space-3); }
.mb-nv-feed .cl-entry { gap: var(--space-3); }
.mb-nv-feed .cl-entry-badge { font-size: 10.5px; margin-top: 2px; }
.mb-nv-feed .cl-entry-ico { width: 14px; height: 14px; -webkit-mask-size: 14px 14px; mask-size: 14px 14px; }
.mb-nv-feed .cl-entry-text { font-size: var(--font-size-base); line-height: 1.62; }
.mb-nv-feed .cl-divider-label { padding: var(--space-4) var(--space-1) var(--space-1); border-top: none; }

/* Copy-Link je Karte — nur beim Hovern/Fokus sichtbar (Deep-Link /neuigkeiten/:datum) */
.mb-nv-feed .cl-copy {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 30px; height: 30px; padding: 0;
  border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--color-text-muted); opacity: 0;
  transition: opacity var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.mb-nv-feed .cl-version:hover .cl-copy,
.mb-nv-feed .cl-copy:focus-visible { opacity: 1; }
.mb-nv-feed .cl-copy:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.mb-nv-feed .cl-copy img { width: 16px; height: 16px; display: block; }

/* Empty-State bei erfolgloser Suche/Filterung */
.mb-nv-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-base); }

/* Typ-Filter (data-typ) + Such-Filter (cl-q-hide); mb-nv-hidden versteckt leere Karten. */
.mb-nv-feed[data-typ="feature"] .cl-entry:not(.cl-entry--feature),
.mb-nv-feed[data-typ="verbesserung"] .cl-entry:not(.cl-entry--verbesserung),
.mb-nv-feed[data-typ="fix"] .cl-entry:not(.cl-entry--fix) { display: none; }
.mb-nv-feed .cl-entry.cl-q-hide { display: none; }
.mb-nv-feed .cl-version.mb-nv-hidden { display: none; }
.mb-nv-feed[data-typ]:not([data-typ="alle"]) .cl-divider-label,
.mb-nv-feed.mb-nv-searching .cl-divider-label { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mb-nv-feed .cl-version { transition: none; }
  .mb-nv-feed .cl-version:hover { transform: none; }
}

/* ── Responsive ── */
@media (max-width: 999px) {
  .mbv-toolbar, .mbv-body { max-width: 100%; }
  .mbv-body { padding: var(--space-4) var(--space-4) var(--space-8); }
}
@media (max-width: 599px) {
  .mbv-body { padding: var(--space-3) var(--space-3) var(--space-8); }
  .mba-list .notif-event-item { padding: var(--space-3); }
  /* Kompaktere Karten; Typ-Badge ueber den Text klappen (eine Spalte) */
  .mb-nv-feed .cl-version { padding: var(--space-4); }
  .mb-nv-feed .cl-entry { flex-direction: column; gap: var(--space-1); }
  .mb-nv-feed .cl-entry-badge { width: auto; }
}