/*
 * Top/Flop-Modul — 1:1 nach abgenommener Vorschau docs/finnavigator_topflop_v1.html
 * (verbindlicher Bauplan, Niko 05.06.2026). Präfix tf-. Nur var(--fn-*)-Tokens.
 * Die Modul-Oberfläche = mittlere Spalte (Zeitraum/Universum) + Arbeitsfläche;
 * die äußere Shell/Sidebar ist NICHT Teil des Moduls (Shell + Konfiguration).
 */

.tf-page {
  display: flex;
  min-height: calc(100vh - 7rem);
  background: var(--fn-bg);
  border: var(--fn-border-width) solid var(--fn-border-strong);
  border-radius: var(--fn-radius-lg);
  overflow: hidden;
  font-family: var(--fn-font);
  color: var(--fn-text);
}

.tf-page .lucide { stroke-width: 1.6; width: 18px; height: 18px; flex: 0 0 auto; }

.tf-eyebrow {
  font-size: 11px; font-weight: var(--fn-font-weight-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fn-text-tertiary);
}
.tf-mono { font-family: var(--fn-font-mono); }

/* ===== Mittlere Spalte: Zeitraum + Universum (UX §1 Ebene 2) ===== */
.tf-col-mid {
  width: 280px; flex: 0 0 280px;
  background: var(--fn-bg-muted);
  border-right: var(--fn-border-width) solid var(--fn-border);
  display: flex; flex-direction: column; overflow: hidden;
}
.tf-col-head { padding: 22px 20px 14px; border-bottom: var(--fn-border-width) solid var(--fn-border); }
.tf-col-head h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: var(--fn-font-weight-bold); margin: 0; }
.tf-col-head h2 .tf-ico { display: flex; color: var(--fn-text-secondary); }
.tf-col-head .tf-sub { margin-top: 6px; font-size: 12px; color: var(--fn-text-tertiary); }

.tf-cat-list { padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.tf-cat-eyebrow { padding: 12px 12px 6px; }
.tf-cat-list > .tf-cat-eyebrow:first-child { padding-top: 2px; }

.tf-cat {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--fn-radius-sm); cursor: pointer; color: var(--fn-text-secondary);
  background: transparent; border: none; width: 100%; text-align: left;
  font-family: var(--fn-font); transition: background .16s, color .16s;
}
.tf-cat .tf-ico { display: flex; color: var(--fn-text-tertiary); }
.tf-cat:hover { background: var(--fn-bg-alt); color: var(--fn-text); }
.tf-cat.tf-active { background: var(--fn-accent-soft); color: var(--fn-text); }
.tf-cat.tf-active .tf-ico { color: var(--fn-primary); }
.tf-cat .tf-label { flex: 1; font-size: 13.5px; font-weight: var(--fn-font-weight-medium); }
.tf-cat .tf-count {
  font-family: var(--fn-font-mono); font-size: 11.5px; color: var(--fn-text-tertiary);
  background: var(--fn-bg); border: var(--fn-border-width) solid var(--fn-border);
  border-radius: var(--fn-radius-pill); padding: 1px 9px; min-width: 26px; text-align: center;
}
.tf-cat.tf-active .tf-count {
  color: var(--fn-primary); border-color: var(--fn-accent-line); background: var(--fn-accent-soft);
}

/* ===== Arbeitsfläche ===== */
.tf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* Breadcrumb (UX §5) */
.tf-crumb {
  padding: 14px 28px; border-bottom: var(--fn-border-width) solid var(--fn-border);
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fn-text-secondary);
}
.tf-crumb a { color: var(--fn-text-secondary); text-decoration: none; cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.tf-crumb a:hover { background: var(--fn-bg-alt); color: var(--fn-text); }
.tf-crumb .tf-sep { color: var(--fn-text-tertiary); font-size: 14px; }
.tf-crumb .tf-here { color: var(--fn-text); padding: 3px 6px; font-weight: var(--fn-font-weight-medium); }

/* Header: Titel + KPIs + Filter */
.tf-head {
  padding: 20px 28px; border-bottom: var(--fn-border-width) solid var(--fn-border);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.tf-head-l { display: flex; flex-direction: column; gap: 6px; }
.tf-head-l h1 {
  font-size: 22px; font-weight: var(--fn-font-weight-bold); letter-spacing: -.01em;
  display: flex; align-items: center; gap: 12px; margin: 0;
}
.tf-head-l h1 .tf-h1-ico { display: flex; color: var(--fn-primary); }
.tf-head-l h1 .tf-stamp {
  font-family: var(--fn-font-mono); font-size: 13px; font-weight: var(--fn-font-weight-regular);
  color: var(--fn-text-secondary); background: var(--fn-bg-alt);
  border: var(--fn-border-width) solid var(--fn-border); padding: 3px 9px; border-radius: 6px;
}
.tf-kpi-row { display: flex; gap: 22px; margin-top: 6px; flex-wrap: wrap; }
/* Feste Mindestbreite + nowrap: Periodenwechsel (1T/1W/1M) darf KPIs nicht verschieben. */
.tf-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.tf-kpi .tf-v { white-space: nowrap; }
.tf-kpi .tf-k {
  font-size: 10.5px; font-weight: var(--fn-font-weight-bold); letter-spacing: .10em;
  text-transform: uppercase; color: var(--fn-text-tertiary);
}
.tf-kpi .tf-v { font-family: var(--fn-font-mono); font-size: 15px; color: var(--fn-text); display: flex; align-items: center; gap: 7px; }
.tf-kpi .tf-v.tf-pos { color: var(--fn-success); }
.tf-kpi .tf-v.tf-neg { color: var(--fn-danger); }

.tf-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.tf-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: var(--fn-font-weight-medium); color: var(--fn-text-secondary);
  background: transparent; border: var(--fn-border-width) solid var(--fn-border);
  padding: 6px 11px; border-radius: 8px; cursor: pointer; font-family: var(--fn-font);
  transition: background .14s, color .14s, border-color .14s;
}
.tf-btn:hover { background: var(--fn-bg-muted); color: var(--fn-text); border-color: var(--fn-border-strong); }
.tf-btn .lucide { width: 13px; height: 13px; }

.tf-seg { display: inline-flex; border: var(--fn-border-width) solid var(--fn-border); border-radius: 8px; overflow: hidden; }
.tf-seg .tf-btn { border: none; border-radius: 0; padding: 6px 13px; }
.tf-seg .tf-btn + .tf-btn { border-left: var(--fn-border-width) solid var(--fn-border); }
.tf-seg .tf-btn.tf-on { color: var(--fn-on-primary); background: var(--fn-primary); }

.tf-thresh {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fn-text-secondary);
  background: var(--fn-bg-alt); border: var(--fn-border-width) solid var(--fn-border);
  padding: 6px 11px; border-radius: 8px;
}
.tf-thresh b { font-family: var(--fn-font-mono); color: var(--fn-text); font-weight: var(--fn-font-weight-medium); }

/* Scrollbarer Inhalt */
.tf-content { overflow-y: auto; padding: 22px 28px; display: flex; flex-direction: column; gap: 18px; }
.tf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1280px) { .tf-duo { grid-template-columns: 1fr; } }

.tf-panel {
  background: var(--fn-bg-alt); border: var(--fn-border-width) solid var(--fn-border);
  border-radius: var(--fn-radius-lg); overflow: hidden;
}
.tf-panel.tf-top { border-top: 2px solid var(--fn-success); }
.tf-panel.tf-flop { border-top: 2px solid var(--fn-danger); }
.tf-panel-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: var(--fn-border-width) solid var(--fn-border);
}
.tf-panel-h h3 { font-size: 14px; font-weight: var(--fn-font-weight-bold); display: flex; align-items: center; gap: 9px; margin: 0; }
.tf-panel-h h3 .tf-ico-top { display: flex; color: var(--fn-success); }
.tf-panel-h h3 .tf-ico-flop { display: flex; color: var(--fn-danger); }
.tf-panel-h h3 .tf-ico-info { display: flex; color: var(--fn-info); }
.tf-panel-h .tf-actions { display: flex; gap: 8px; }

/* Mover-Tabellen — table-layout fixed: Spaltenbreiten sind konstant, egal welcher
   Zeitraum/Inhalt geladen ist. Kein Springen beim Umschalten 1T/1W/1M. */
table.tf-movers { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
table.tf-movers th.tf-rank-col { width: 34px; }
table.tf-movers th.tf-price-col { width: 96px; }
table.tf-movers th.tf-change-col { width: 78px; }
table.tf-movers th.tf-bar-col { width: 130px; }
table.tf-movers th.tf-src-col { width: 175px; }
table.tf-movers td { overflow: hidden; }
table.tf-movers th {
  text-align: left; font-weight: var(--fn-font-weight-bold); color: var(--fn-text-tertiary);
  font-size: 11px; letter-spacing: .10em; text-transform: uppercase;
  padding: 10px 14px; border-bottom: var(--fn-border-width) solid var(--fn-border);
  background: var(--fn-bg-muted);
}
table.tf-movers td { padding: 11px 14px; border-bottom: var(--fn-border-width) solid var(--fn-border); vertical-align: middle; }
table.tf-movers tr:last-child td { border-bottom: none; }
table.tf-movers tr:hover td { background: var(--fn-bg-muted); }
/* Zeilen-Klick → interne Chart-Analyse (nie das externe erweiterte Chart-Studio). */
table.tf-movers tr.tf-row-link { cursor: pointer; }
table.tf-movers tr.tf-row-link:hover .tf-sym { color: var(--fn-primary); }
table.tf-movers .tf-num { font-family: var(--fn-font-mono); font-size: 12.5px; text-align: right; }
table.tf-movers th.tf-num { text-align: right; }
table.tf-movers th.tf-center, table.tf-movers td.tf-center { text-align: center; }
table.tf-movers th.tf-badge-col { width: 46px; }

.tf-rank { font-family: var(--fn-font-mono); font-size: 12px; color: var(--fn-text-tertiary); }
.tf-sym { font-family: var(--fn-font-mono); font-size: 12.5px; color: var(--fn-cat-blue); font-weight: var(--fn-font-weight-medium); }
/* Einzeilig + Ellipsis: unterschiedliche Namens-/Detail-Längen ändern die Zeilenhöhe nicht. */
.tf-t-name { color: var(--fn-text); font-weight: var(--fn-font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-t-sub { font-size: 11.5px; color: var(--fn-text-tertiary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tf-delta { font-family: var(--fn-font-mono); font-size: 12.5px; font-weight: var(--fn-font-weight-medium); }
.tf-delta.tf-pos { color: var(--fn-success); }
.tf-delta.tf-neg { color: var(--fn-danger); }

.tf-bar { height: 8px; background: var(--fn-bg-muted); border-radius: var(--fn-radius-pill); overflow: hidden; }
/* Sanfter Übergang statt Sprung beim Periodenwechsel. */
.tf-bar i { display: block; height: 100%; border-radius: var(--fn-radius-pill); transition: width .25s ease; }
.tf-bar.tf-pos i { background: var(--fn-success); }
.tf-bar.tf-neg i { background: var(--fn-danger); }

.tf-src-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fn-text-secondary);
  background: var(--fn-bg); border: var(--fn-border-width) solid var(--fn-border);
  border-radius: var(--fn-radius-pill); padding: 2px 9px; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.tf-src-chip .lucide { width: 11px; height: 11px; color: var(--fn-text-tertiary); }

.tf-empty { padding: 18px; font-size: 12.5px; color: var(--fn-text-tertiary); }

/* SIR-Auffälligkeiten */
.tf-ai-panel {
  border: var(--fn-border-width) solid var(--fn-border); border-left: 3px solid var(--fn-info);
  background: var(--fn-info-soft); border-radius: var(--fn-radius-sm);
  padding: 12px 14px; font-size: 13px; line-height: 1.6; margin: 14px 18px;
}
.tf-ai-panel + .tf-ai-panel { margin-top: 0; }
.tf-ai-panel.tf-warning { border-left-color: var(--fn-danger); background: var(--fn-danger-soft); }
.tf-ai-panel .tf-src {
  font-size: 10.5px; font-weight: var(--fn-font-weight-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--fn-info); margin-bottom: 6px;
  display: flex; align-items: center; gap: 7px;
}
.tf-ai-panel.tf-warning .tf-src { color: var(--fn-danger); }
.tf-ai-panel .tf-disclaim { margin-top: 8px; font-size: 11px; color: var(--fn-text-tertiary); }

.tf-svc-note {
  padding: 12px 18px; border-top: var(--fn-border-width) solid var(--fn-border);
  font-size: 11.5px; color: var(--fn-text-tertiary);
}
.tf-svc-note code {
  font-family: var(--fn-font-mono); font-size: 11px; color: var(--fn-primary);
  background: var(--fn-accent-soft); padding: 1px 6px; border-radius: 5px;
}

.tf-loading { padding: 28px; color: var(--fn-text-secondary); font-size: 13.5px; }