/* ===== fn-list — geteiltes Listen/Tabellen-Style-System (Manifest §11) =====
   Die EINE Quelle der Wahrheit für das Aussehen aller Listen/Tabellen: Watchlist, Top/Flop,
   Markt-Ticker, externe Module. 1:1 aus der Watchlist abgeleitet. Jede Liste trägt die Klasse
   `fn-list` und nutzt die fn-* Element-Klassen; sie darf NICHT anders aussehen. Spalten-Breiten/
   -Layout bleiben listenspezifisch (eigene Zusatzklasse). Farben ausschließlich über --fn-* Tokens. */

table.fn-list { width: 100%; border-collapse: collapse; font-size: 13px; }

table.fn-list th {
    text-align: left; font-weight: var(--fn-font-weight-bold); color: var(--fn-text-tertiary);
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    padding: 10px 14px; border-bottom: var(--fn-border-width) solid var(--fn-border);
    background: var(--fn-bg-muted); vertical-align: top;
}
table.fn-list th small {
    display: block; font-weight: var(--fn-font-weight-regular); letter-spacing: 0;
    text-transform: none; color: var(--fn-text-tertiary); opacity: .8; font-size: 10px; margin-top: 2px;
}
table.fn-list td { padding: 11px 14px; border-bottom: var(--fn-border-width) solid var(--fn-border); vertical-align: top; }
table.fn-list tr:last-child td { border-bottom: none; }
table.fn-list tbody tr:hover td { background: var(--fn-bg-muted); }
table.fn-list tr.fn-row-link { cursor: pointer; }
table.fn-list tr.fn-row-link:hover .fn-sym { color: var(--fn-primary); }
table.fn-list th.center, table.fn-list td.center { text-align: center; }
table.fn-list .num, table.fn-list th.num { font-family: var(--fn-font-mono); text-align: right; white-space: nowrap; }

/* Gestapelte Zelle: Hauptwert + Unterwerte. Hinweis: .main/.secondary/.tertiary werden bewusst
   gegen evtl. globale, generische Regeln (z. B. Layout-.main) abgeschirmt, damit eingebettete
   Pills/Badges content-breit bleiben statt sich als Flex-Kind zu strecken. */
.fn-stack { display: flex; flex-direction: column; line-height: 1.4; }
.fn-stack .main { display: block; flex: 0 0 auto; min-width: 0; overflow: visible; font-size: 13px; }
.fn-stack .secondary { display: block; font-size: 11.5px; color: var(--fn-text-secondary); }
.fn-stack .tertiary { display: block; font-size: 11px; color: var(--fn-text-tertiary); }

/* Identität */
.fn-sym { font-family: var(--fn-font-mono); font-size: 12.5px; color: var(--fn-cat-blue); font-weight: var(--fn-font-weight-medium); }
.fn-name { color: var(--fn-text); font-weight: var(--fn-font-weight-medium); }

/* Standard-Zurück-Leiste (dezenter FnBackButton + Krümel „Herkunft · Ort") — 1:1 wie im Einstellungen-Detail
   (Torwächter): „Zurück · Einstellungen · Torwächter". Generisch/überall wiederverwendbar (Niko 26.07.2026).
   Die button.fn-back-Regel (Spezifität 0,2,1) schlägt die scoped Grundoptik des FnBackButton (sonst großer
   umrandeter Button statt dezenter Leiste). */
.fn-back-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.fn-back-bar button.fn-back {
    min-height: 28px; gap: 6px; padding: 3px 2px;
    background: transparent; border-color: transparent;
    color: var(--fn-text-secondary); border-radius: 6px;
    font-size: 12.5px; font-weight: var(--fn-font-weight-medium);
}
.fn-back-bar button.fn-back:hover { background: transparent; border-color: transparent; color: var(--fn-primary); }
.fn-back-crumb { font-size: 13px; color: var(--fn-text-secondary); }
.fn-back-crumb b { color: var(--fn-text); }
/* Inline-Variante: keine Unter-Margin — für in einen bestehenden (zentrierten) Header integrierte Leisten. */
.fn-back-bar.fn-back-bar-inline { margin: 0; }

/* Klickbarer Name → Detailseite (opt-in FnSecurityIdentity.NameLinksToDetails). ISIN/WKN bleiben Copy. */
.fn-name-link { cursor: pointer; }
.fn-name-link:hover { color: var(--fn-primary); text-decoration: underline; }
/* Chart-Einstieg direkt am Namen (opt-in FnSecurityIdentity.ShowChart) — geteilte Funktion, überall gleich. */
.fn-id-chart { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    margin-left: 6px; padding: 2px; background: none; border: 0; border-radius: 4px; cursor: pointer;
    color: var(--fn-text-tertiary); opacity: .8; }
.fn-id-chart:hover { color: var(--fn-primary); opacity: 1; background: var(--fn-hover); }
.fn-id-chart .lucide { width: 14px; height: 14px; }
/* Menge inline bearbeiten (nur eigene Listen): klickbarer Wert + Inline-Input. */
.wl-qty { cursor: pointer; border-bottom: 1px dashed transparent; }
.wl-qty:hover { color: var(--fn-primary); border-bottom-color: var(--fn-primary); }
.wl-qty-edit { width: 74px; font-family: var(--fn-font-mono); font-size: 13px; text-align: right;
    padding: 2px 6px; background: var(--fn-bg-alt); color: var(--fn-text);
    border: var(--fn-border-width) solid var(--fn-primary); border-radius: 6px; outline: none; }
/* Kennung "Kürzel · ISIN · WKN" — immer sichtbar, hell/neutral (Niko 25.06.2026): heller als das
   gedämpfte --fn-text-tertiary, damit ISIN/WKN gut lesbar bleiben. Reihenfolge fix Kürzel·ISIN·WKN. */
.fn-ids { font-family: var(--fn-font-mono); font-size: 11.5px; color: var(--fn-text-secondary); }

/* Verbindlicher Wertpapier-Kennung-Standard (Niko 25.06.2026) — eine Quelle (Komponente
   FnSecurityIdentity), gilt in JEDER Liste/Sicht. Zeile 1: blauer Akzent (.fn-sym) · voller Name
   (.fn-name). Zeile 2 (.sec-ids): Kürzel · ISIN · WKN. Token-Farben, kein Hex. Farbe explizit, weil ein
   <button>-Container keine Textfarbe vererbt (sonst schwarzer Name). Fehlend (zutreffend, aber unbekannt)
   → "—" in Warnton (.miss); Ticker/WKN niemals erfinden. */
.sec-ids       { font-family: var(--fn-font-mono); font-size: 11px; color: var(--fn-text-secondary);
                 margin-top: 3px; letter-spacing: .01em; }
.sec-ids .tk   { color: var(--fn-text); font-weight: 700; }   /* Kürzel betont */
.sec-ids .sep  { color: var(--fn-text-tertiary); }            /* Trenner dezent */
.sec-ids .miss { color: var(--fn-warning); }                  /* fehlend = „—" */
/* Hebel in der Kennzeile (Niko 02.08.2026): BELEGT neutral betont, abgeleitet im Warnton mit
   „(abgeleitet)" — niemand soll einer geratenen Ziffer ansehen können, sie sei geprüft. */
.sec-ids .lev          { color: var(--fn-text); font-weight: 700; }
.sec-ids .lev-inferred { color: var(--fn-warning); font-weight: 700; }

/* Aktiv-Schalter „Für den Handel zugelassen" (Niko 02.08.2026, abgenommene Vorschau 1:1: 34×19,
   Knopf 13px). Der Tooltip ist in BEIDEN Stellungen derselbe — der Schalter zeigt den Zustand,
   der Tooltip benennt die Eigenschaft. Nur Tokens, kein Hex. */
.fn-switch { position: relative; width: 34px; height: 19px; border-radius: var(--fn-radius-pill);
             border: 1px solid var(--fn-primary); background: var(--fn-primary); cursor: pointer;
             padding: 0; flex: none; transition: background .15s, border-color .15s; }
.fn-switch::after { content: ""; position: absolute; top: 2px; left: 16px; width: 13px; height: 13px;
                    border-radius: 50%; background: var(--fn-on-primary); transition: left .15s; }
.fn-switch.off { background: var(--fn-bg-muted); border-color: var(--fn-border-strong); }
.fn-switch.off::after { left: 2px; background: var(--fn-text-tertiary); }
.fn-switch:disabled { opacity: .45; cursor: default; }

/* Dialog „Wertpapier bearbeiten" (Vorschau §3): drei Felder, nichts weiter. */
.wl-ann { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; }
.wl-ann-fld label { display: block; font-size: 11px; color: var(--fn-text-tertiary);
                    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.wl-ann-fld small { display: block; font-size: 11px; color: var(--fn-text-tertiary); margin-top: 4px; }
.wl-ann-fld small b { color: var(--fn-text-secondary); font-family: var(--fn-font-mono); font-weight: 400; }
.wl-ann-notes { min-height: 92px; font-family: var(--fn-font-mono); font-size: 11.5px;
                line-height: 1.55; resize: vertical; }
.wl-ann-switchline { display: flex; align-items: center; gap: 10px; padding-top: 9px;
                     border-top: 1px solid var(--fn-border); font-size: 12.5px; }
.wl-ann-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 11px;
               border-top: 1px solid var(--fn-border); }
.wl-ann-missing { color: var(--fn-text-secondary); font-size: 12.5px; }

/* Zeile eines vom Nutzer deaktivierten Papiers: gedimmt + Klartext-Etikett — es verschwindet NICHT. */
tr.wl-trade-off .fn-name, tr.wl-trade-off .fn-sym, tr.wl-trade-off .sec-ids { opacity: .55; }
.wl-tradeoff-tag { font-size: 10px; color: var(--fn-warning); border: 1px solid var(--fn-warning);
                   border-radius: 5px; padding: 1px 6px; margin-left: 7px; white-space: nowrap;
                   vertical-align: 1px; }

/* Wertpapier-Kennung-Standard (Niko 25.06.2026, Variante C) — geteilte Komponente FnSecurityIdentity.
   Zeile 1: kanonisches Kürzel (.fn-sym, blau) · sauberer Name (.fn-name). Zeile 2 (.sec-ids):
   ISIN · WKN · Wertpapierart (KEIN Kürzel — keine Wiederholung). Token-Farben, kein Hex. Farbe explizit,
   weil ein <button>-Container keine Textfarbe vererbt. Fehlend (zutreffend, unbekannt) → "—" (.miss). */
.sec-ids       { font-family: var(--fn-font-mono); font-size: 11px; color: var(--fn-text-secondary); margin-top: 3px; letter-spacing: .01em; }
.sec-ids .sep  { color: var(--fn-text-tertiary); }
.sec-ids .miss { color: var(--fn-warning); }

/* Delta (Auf/Ab) */
.fn-delta { font-family: var(--fn-font-mono); }
.fn-delta.pos { color: var(--fn-success); }
.fn-delta.neg { color: var(--fn-danger); }

/* Sortier-Buttons in den Headern (Standard für jede Liste): erben die Header-Optik, Pfeil zeigt
   die aktive Sortierung. */
.fn-sort {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.fn-sort:hover { color: var(--fn-text-secondary); }
.fn-sort.active { color: var(--fn-primary); }
/* Sortier-Indikator je Spalte: neutrales ↕ auf allen, Richtungspfeil auf der aktiven Spalte. */
.fn-sort .sar { margin-left: 4px; font-size: 9px; opacity: .4; }
.fn-sort:hover .sar { opacity: .75; }
.fn-sort.active .sar { opacity: 1; color: var(--fn-primary); }
table.fn-list th small .fn-sort { text-transform: none; }

/* Freitext-Suche in der Listen-Titelzeile (Standard für jede Liste): Name/ISIN/Ticker. Token-only. */
.fn-search {
    display: inline-flex; align-items: center; gap: 7px; flex: 1; max-width: 360px; margin: 0 16px;
    padding: 5px 11px; border-radius: 8px;
    border: var(--fn-border-width) solid var(--fn-border); background: var(--fn-surface-alt);
}
.fn-search:focus-within { border-color: var(--fn-primary); }
.fn-search .lucide { width: 14px; height: 14px; color: var(--fn-text-tertiary); flex: none; }
.fn-search input {
    flex: 1; min-width: 0; border: none; background: transparent; outline: none;
    color: var(--fn-text); font: inherit; font-size: 12.5px;
}
.fn-search input::placeholder { color: var(--fn-text-tertiary); }

/* Trend-Konsens-Pfeile (Standard-Listen-Bauplan §6): NUR neben dem Kurs, rechtsbuendig, fester
   Platz fuer 4 Pfeile (kein Wandern). 1-4 Pfeile = wie viele der Fenster 1T/1W/1M/1J in die
   dominante Richtung zeigen. Geteilt von Watchlist + Markt-Ticker; Token-only. */
.fn-quote { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; width: 100%; }
.fn-quote .fn-stack { text-align: right; }
.fn-turn { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px;
           line-height: 0; width: 54px; flex: 0 0 auto; cursor: help; }
.fn-turn svg { width: 11px; height: 11px; display: block; }
.fn-turn path { fill: currentColor; }
.fn-turn.up { color: var(--fn-success); }
.fn-turn.down { color: var(--fn-danger); }
.fn-turn.flat { color: var(--fn-text-tertiary); }
.fn-turn .fn-turn-dot { font-family: var(--fn-font-mono); font-size: 13px; line-height: 1; width: 11px; text-align: center; }