/*
 * 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-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; }
.fn-evt-title { display: inline-flex; flex-direction: column; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.fn-evt-sub { color: var(--fn-text-tertiary); font-size: 0.92em; }
.fn-evt-pill {
  display: inline-block; flex: none; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: var(--fn-font-weight-medium, 600); white-space: nowrap;
  border: 1px solid transparent;
}
.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); }