/* ===== 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); }
.fn-ids { font-family: var(--fn-font-mono); font-size: 11.5px; color: var(--fn-cat-gold); }

/* 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); }
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-kurs { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; width: 100%; }
.fn-kurs .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; }