/*
 * Event-Ampel (AlphaDNA Event Radar) — Styles der Shared-Komponente EventStatusBadge.
 * Modul-neutral (Präfix ev-): Watchlists, Portfolio, Dashboard, Top/Flop, Zertifikate.
 * Farben ausschließlich über Bereichs-Tokens --fn-event-* (tokens.css).
 */

.ev-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: default;
}

.ev-cell.ev-unknown {
  color: var(--fn-text-tertiary);
  font-family: var(--fn-font-mono);
}

.ev-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: var(--fn-radius-round, 50%);
  flex: 0 0 auto;
}

.ev-green  { background: var(--fn-event-green); }
.ev-yellow { background: var(--fn-event-yellow); }
.ev-orange { background: var(--fn-event-orange); }

.ev-red {
  background: var(--fn-event-red);
  box-shadow: 0 0 6px var(--fn-danger-soft);
}

/* Schwarz braucht im Dark-Mode einen Ring, sonst unsichtbar (DesignTokens.md, Event-Ampel). */
.ev-black {
  background: var(--fn-event-black);
  box-shadow: 0 0 0 2px var(--fn-event-black-ring), 0 0 8px var(--fn-danger-soft);
}

.ev-flag {
  font-size: 11px;
  margin-left: 1px;
  line-height: 1;
}

/*
 * Hebel-/Faktor-Pille (FnLeverageBadge) — kleine Farbbox wie die Event-Pills (Manifest §11).
 * Text: Faktor/Turbo · Long/Short · Faktor-Größe. Farbe = RISIKO nach Faktor-Höhe:
 *   < 3 niedrig (grün) · 3–4 erhöht (gold) · 5–7 hoch (orange) · ≥ 8 sehr hoch (rot).
 * Geteilt von Watchlist und Markt-Ticker; Farben nur über --fn-* Tokens.
 */
.lv-badge {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  padding: 1px 8px; border-radius: 999px;
  font-family: var(--fn-font-mono); font-size: 10.5px; font-weight: var(--fn-font-weight-bold);
  letter-spacing: .04em; white-space: nowrap;
  border: var(--fn-border-width) solid transparent;
}
.lv-badge.lv-r-low     { color: var(--fn-success);        background: var(--fn-success-soft); border-color: var(--fn-success); }
.lv-badge.lv-r-mod     { color: var(--fn-warning);        background: var(--fn-warning-soft); border-color: var(--fn-warning); }
.lv-badge.lv-r-high    { color: var(--fn-cat-orange);     background: var(--fn-warning-soft); border-color: var(--fn-cat-orange); }
.lv-badge.lv-r-extreme { color: var(--fn-danger);         background: var(--fn-danger-soft);  border-color: var(--fn-danger); }
.lv-badge.lv-r-none    { color: var(--fn-text-secondary); background: transparent;            border-color: var(--fn-border); }

/* ===== Event proximity (Niko 11.06.2026): a coloured time-distance pill + a wrapping title.
   Shared so the watchlist and external modules (market-ticker) render the next event identically.
   Colour escalates as the event nears: today red · tomorrow orange · ≤7d gold · ≤14d blue ·
   ≤30d teal · beyond grey. ===== */
.fn-evt { display: inline-flex; align-items: flex-start; gap: 7px; text-align: left; }
/* „anywhere" auch hier NICHT: sonst zerreißt derselbe Fehler den Markt-Ticker (Auditbefund 28.07.2026). */
.fn-evt-title { display: inline-flex; flex-direction: column; line-height: 1.3; white-space: normal; overflow-wrap: break-word; }
.fn-evt-sub { color: var(--fn-text-tertiary); font-size: 0.92em; }
.fn-evt-pill {
  display: inline-flex; align-items: flex-start; gap: 5px; flex: none; padding: 2px 9px;
  border-radius: var(--fn-radius-pill, 999px);
  font-size: 11px; font-weight: var(--fn-font-weight-medium, 600);
  border: 1px solid transparent;
  line-height: 1.25;
}
/* Art + Datum als EIGENE, umbrechende Textspalte rechts vom Icon (Niko 27.07.2026): bei langem Text
   zweizeilig — das Datum rutscht dann UNTER den Text, nicht unters Icon. Icon bleibt links, oben ausgerichtet.

   ZERRISSEN werden darf die Zeitangabe dabei NIE (Niko 28.07.2026, im Browser sichtbar: „Quartalszahlen 2" /
   Umbruch / „8.07." — eine abgeschnittene Ziffer liest sich wie ein eigener Wert). Zwei Ursachen wirkten
   zusammen: (1) im Markup steht KEIN Leerzeichen zwischen Art und Datum, der Abstand kam aus einem margin —
   und ein Margin ist keine Umbruchstelle, für den Browser war es EIN Wort „Quartalszahlen28.07."; (2)
   `overflow-wrap` wird VERERBT, das `anywhere` des Containers galt also auch für die Ziffern. Deshalb hier:
   umbrechender Flex-Container mit column-gap (der Gap IST die fehlende Umbruchstelle) und ein ausdrückliches
   Zurücksetzen auf der Zeitangabe. Gemessen: 30 von 30 Pillen waren betroffen. */
.fn-evt-pill { max-width: 100%; }
.fn-evt-pill .fn-evt-text {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 5px; row-gap: 0; min-width: 0;
}
/* Art + Datum direkt in der Pille (Niko 27.07.): Lucide-Icon · Termin-Art · Datum; Nähe = Farbe (oben). */
.fn-evt-pill .lucide { width: 12px; height: 12px; flex: none; margin-top: 1px; }
.fn-evt-pill .fn-evt-kind {
  flex: 1 1 auto; min-width: 0;
  font-weight: var(--fn-font-weight-medium, 600);
  /* NICHT „anywhere": nur an Wortgrenzen brechen, im Wort allenfalls als Notnagel. */
  white-space: normal; overflow-wrap: break-word; word-break: normal; hyphens: none;
  /* Sehr lange Bezeichnungen („TSMC Monatsumsatz Juli 2026") höchstens zweizeilig, dann Ellipse —
     der volle Text steht im title-Tooltip und im Termin-Popover. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.fn-evt-pill .fn-evt-when {
  flex: 0 1 auto; min-width: 0; margin-left: 0; /* Abstand kommt aus column-gap, nicht aus margin */
  font-family: var(--fn-font-mono); font-variant-numeric: tabular-nums; opacity: .85;
  /* DER FIX: „28.07." ist EIN Wort und wird nie getrennt; „unbestätigt · KW36" darf an seinen
     Leerzeichen umbrechen, aber niemals mitten im Wort oder in der Zahl. */
  white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
/* Unbestätigt („unbestätigt · KW36" / „Termin unsicher") — 1:1 zur Popover-Regel weiter unten: kein Mono,
   gedämpft. Sonst widerspricht die Pille der eigenen Begründung des Popovers (Auditbefund 28.07.2026). */
.fn-evt-pill .fn-evt-when.unconfirmed {
  font-family: var(--fn-font); font-weight: var(--fn-font-weight-medium, 600);
  opacity: 1; color: var(--fn-text-secondary);
}
.fn-evt-pill.p-today     { color: var(--fn-danger);        background: var(--fn-danger-soft);   border-color: var(--fn-danger); }
.fn-evt-pill.p-tomorrow  { color: var(--fn-cat-orange);    background: var(--fn-warning-soft);  border-color: var(--fn-cat-orange); }
.fn-evt-pill.p-week      { color: var(--fn-warning);       background: var(--fn-warning-soft);  border-color: var(--fn-warning); }
.fn-evt-pill.p-fortnight { color: var(--fn-info);          background: var(--fn-info-soft);     border-color: var(--fn-info); }
.fn-evt-pill.p-month     { color: var(--fn-cat-teal);      background: var(--fn-cat-teal-soft); border-color: var(--fn-cat-teal); }
.fn-evt-pill.p-far       { color: var(--fn-text-tertiary); background: transparent;             border-color: var(--fn-border); }
.fn-evt-none { color: var(--fn-text-tertiary); }

/* Zellen-Wrapper: Pille und „+N Weitere"-Bubble stehen nebeneinander, solange Platz ist, und rutschen sonst
   sauber untereinander — 1:1 zur abgenommenen VORSCHAU (.evtwrap, inline-flex + gap 6px). Vorher hing der
   Abstand an einem margin-left an der Bubble, das in der zweiten Zeile als schiefer Einzug stehen blieb. */
.fn-evt-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
/* „+N Weitere"-Bubble (Slice 5): bündelt zusätzliche Termine derselben Zeile → Klick öffnet das Popover. */
.fn-evt-more { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; color: var(--fn-text-secondary); background: var(--fn-panel);
  border: 1px solid var(--fn-border-strong); cursor: pointer; white-space: nowrap; }
.fn-evt-more:hover { border-color: var(--fn-primary); color: var(--fn-text); }
/* Aufklapp-Pfeil „▾" (1:1 VORSCHAU-Watchliste-Mehrfach-Termine-Weitere: „+N Weitere ▾"). */
.fn-evt-more-caret { font-size: 9px; line-height: 1; opacity: .8; }

/* Popover „alle Termine" (Modal). */
/* Backdrop = unsichtbarer Klick-Fänger (kein Modal-Dimmen); das Popover geht AN der Klickposition auf. */
.fn-evt-pop-backdrop { position: fixed; inset: 0; z-index: 1000; }
/* An den Fensterrand geklemmt: die Klickposition wurde vorher ungeprüft übernommen, wodurch das Popover am
   rechten/unteren Rand bis zu 328 px außerhalb des Fensters aufging und praktisch unerreichbar war
   (Auditbefund 28.07.2026). --pop-x/--pop-y liefert die Komponente aus der Klickposition. */
.fn-evt-pop { position: fixed; transform: translate(8px, 8px); width: min(360px, 92vw); max-width: calc(100vw - 16px);
  left: min(var(--pop-x, 0px), calc(100vw - min(360px, 92vw) - 24px));
  top: min(var(--pop-y, 0px), calc(100vh - 180px));
  max-height: 70vh; overflow: auto; border: 1px solid var(--fn-border-strong);
  background: var(--fn-panel); border-radius: 10px; box-shadow: 0 10px 30px color-mix(in srgb, var(--fn-bg) 55%, transparent); }
.fn-evt-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--fn-border); background: var(--fn-bg-alt); position: sticky; top: 0; }
.fn-evt-pop-head b { font-size: 12.5px; }
.fn-evt-pop-x { display: inline-flex; border: 0; background: transparent; color: var(--fn-text-tertiary); cursor: pointer; padding: 2px; }
.fn-evt-pop-x:hover { color: var(--fn-text); }
.fn-evt-pop-x .lucide { width: 15px; height: 15px; }
.fn-evt-pop-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 9px; align-items: center; padding: 9px 12px;
  border-bottom: 1px solid var(--fn-border); }
.fn-evt-pop-row:last-child { border-bottom: 0; }
/* Termin-Art färbt das Icon (1:1 VORSCHAU-Watchliste-Mehrfach-Termine-Weitere): Quartalszahlen=orange,
   Ex-Dividende=grün, Aktiensplit=lila, Hauptversammlung=blau; neutraler Fallback teal. Nur Bereichs-Tokens. */
.fn-evt-pop-row .ic .lucide { width: 15px; height: 15px; color: var(--fn-cat-teal); }
.fn-evt-pop-row .ic.c-earn  .lucide { color: var(--fn-cat-orange); }
.fn-evt-pop-row .ic.c-div   .lucide { color: var(--fn-success); }
.fn-evt-pop-row .ic.c-split .lucide { color: var(--fn-cat-purple); }
.fn-evt-pop-row .ic.c-hv    .lucide { color: var(--fn-info); }
/* Mittlere Spalte gestapelt: Art oben, Detail-Unterzeile darunter (Quartal / Betrag / Split-Verhältnis).
   1:1 VORSCHAU (.pop-row .k small): Unterzeile tertiär, weight 400, KEIN Mono. */
.fn-evt-pop-row .k { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fn-evt-pop-row .k .kmain { font-weight: 600; font-size: 12.5px; }
.fn-evt-pop-row .k .ksub { color: var(--fn-text-tertiary); font-weight: 400; font-size: 11px; margin-top: 1px; }
.fn-evt-pop-row .w { text-align: right; font-family: var(--fn-font-mono); }
.fn-evt-pop-row .w b { font-size: 12.5px; }
/* Unbestätigt („unbestätigt · KW32" / „Termin unsicher"): bewusst NICHT wie ein Datum gesetzt — keine Mono-Ziffern,
   gedämpfte Farbe. Ein Datum wird gelesen und geglaubt; eine Wochenangabe darf nicht danach aussehen. */
.fn-evt-pop-row .w.unconfirmed { font-family: var(--fn-font); }
.fn-evt-pop-row .w.unconfirmed b { font-size: 11.5px; font-weight: 600; color: var(--fn-text-secondary); }
.fn-evt-pop-row .w small { display: block; color: var(--fn-text-tertiary); font-size: 10.5px; }