/*
 * ranking.css - Styles der öffentlichen Rangliste-Anzeige (CMS-Node „Aktuell"/„Archiv").
 * Wird vom Rangliste-Template per <link> geladen (wie ranking-table.js/ranking-charts.js), da die
 * CMS-Seite die Modul-CSS (league/css/default.css) NICHT einbindet. Enthält: dezente Tabellen-Politur,
 * die aufklappbaren Bereiche (.rl-toggle: Statistiken/Turniere/Spielstätten/Punkteverlauf), die
 * Spielstätten-Übersicht (.rl-venue* mit Turnier-Chips) und die Live-Such-Toolbar (.rlt-toolbar).
 * Reines CSS, keine Abhängigkeit.
 *
 * ── 18.8.2026: durchgehend auf Tokens ───────────────────────────────────────────────────────
 * Der Rundlauf `check-kontrast-alle.mjs` fand hier die groesste Einzelursache: 530 der 1476
 * unlesbaren Stellen im Dunkelmodus standen in dieser Datei. Der Grund war immer derselbe -
 * die FLAECHE war fest verdrahtet, die SCHRIFT kam aus der Tokenebene. `#b1ffb1` (Qualifiziert)
 * traf auf `--ui-text` und ergab 1,13:1; `#fff` am Turnier-Chip traf auf `--accent` und ergab
 * 2,81:1. Ein halb tokenisiertes Paar ist schlechter als gar keines.
 *
 * EINE sichtbare Aenderung im Hellmodus ist dabei Absicht: Das Modul fuehrte mit `#2a7ab9` ein
 * eigenes Blau, das es sonst nirgends im Portal gibt. Es ist jetzt `--accent`, das Vereinsblau.
 */

/* ── Tabellen-Politur (Modul-CSS ist auf der CMS-Seite nicht geladen) ── */
table.ranglistetable { width:100%; font-size:0.9em; border-collapse:collapse; }
table.ranglistetable th,
table.ranglistetable td { padding:4px 6px; }
table.ranglistetable thead th { border-bottom:2px solid var(--line-control); }
/* Tastatur-Sortierung (ranking-table.js): sichtbare Sortierrichtung an der aktiven Spalte + Fokusrahmen. */
table.ranglistetable thead th:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
table.ranglistetable thead th.rlt-sorted::after { content:" \25B2"; font-size:0.75em; opacity:0.75; }
table.ranglistetable thead th.rlt-sorted-desc::after { content:" \25BC"; }
table.ranglistetable tbody tr:hover { background:var(--accent-quiet); }
/* Fürs Abschlussturnier/Endjahreswertung qualifizierte Zeilen (grün) - Schwellen kommen config-getrieben
   aus dem Template ($rlqt/$rlqv); ersetzt das frühere Inline-style je Zelle.
   WICHTIG: auch die inneren Zellinhalte (* ) grün einfärben und mit !important, sonst überfärbt die
   site-globale odd/even-Streifung `.hover > *:nth-child(even) *{#DDD}` auf GERADEN qualifizierten Zeilen die
   inneren <a>/<span> grau (grüne Zelle mit grauen Kästchen). So bleibt die ganze Zeile durchgehend grün. */
table.ranglistetable tbody tr.rl-qualified > td,
table.ranglistetable tbody tr.rl-qualified > td * { background:var(--success-quiet) !important; }

/* ── Detailseiten-Navigation (Mitglied / Turnier / Spielstätte) ── */
.rl-back { margin:0 0 12px; }
.rl-back a { display:inline-block; padding:5px 14px; border:1px solid var(--accent); border-radius:4px; background:var(--accent-quiet); color:var(--accent); font-weight:bold; text-decoration:none; }
.rl-back a:hover { background:var(--accent); color:var(--on-accent); }
.rl-meta { color:var(--text-muted); margin:0 0 8px; }

/* ── Aufklappbare Bereiche (Statistiken / Wochen-Verlauf / Gespielte Turniere / Spielstätten / Punkteverlauf) ── */
details.rl-toggle { margin:0 0 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface-raised); padding:0 12px; }
details.rl-toggle > summary { margin:0 -12px; padding:8px 12px; cursor:pointer; font-weight:bold; list-style:none; -webkit-user-select:none; user-select:none; }
details.rl-toggle > summary::-webkit-details-marker { display:none; }
details.rl-toggle > summary::before { content:"\25B8"; display:inline-block; width:1em; margin-right:4px; color:var(--text-muted); transition:transform .15s; }
details.rl-toggle[open] > summary::before { transform:rotate(90deg); }
details.rl-toggle[open] > summary { border-bottom:1px solid var(--line); margin-bottom:10px; }
details.rl-toggle > *:last-child { margin-bottom:12px; }
details.rl-toggle h4 { margin:6px 0 2px; }

/* ── Spielstätten-Übersicht (gruppierte Turnier-Chips) ── */
.rl-venues { display:flex; flex-direction:column; gap:10px; }
.rl-venue { border-left:3px solid var(--accent); padding-left:10px; }
.rl-venue-head { font-weight:bold; }
.rl-venue-meta { font-weight:normal; color:var(--text-muted); font-size:0.85em; }
.rl-venue-tours { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.rl-tour-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border:1px solid var(--line-control); border-radius:4px; background:var(--surface); font-size:0.85em; line-height:1.6; white-space:nowrap; text-decoration:none; }
.rl-tour-chip:hover { border-color:var(--accent); background:var(--accent-quiet); }
.rl-chip-n { background:var(--accent); color:var(--on-accent); border-radius:8px; padding:0 6px; font-size:0.85em; }

/* ── Wochen-Verlauf (wie Liga-Tabellenhistorie: Prev/Next-Navigation + Positionstrend) ── */
.md-nav { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
/* `color` ist seit dem 17.8.2026 noetig: Die Schriftfarbe kam bis dahin von jQuery-UIs
   `.ui-button`, das `include.js` auf JEDEN Knopf legte. Ohne das Widget fiel sie auf
   Schwarz - im Dunkelmodus 1,84:1 auf der Bedienflaeche. Jetzt der kanonische Fliesstext. */
.md-btn { color:var(--text); background:var(--surface-control); border:1px solid var(--line-control); border-radius:4px; cursor:pointer; padding:2px 10px; font-size:1.1em; line-height:1.6; }
.md-btn[data-disabled="1"] { opacity:0.35; cursor:default; pointer-events:none; }
.md-label { font-weight:bold; min-width:150px; text-align:center; }
.pos-trend { font-size:0.65em; vertical-align:middle; margin-left:2px; }
.pos-trend.up   { color:var(--success); }
.pos-trend.down { color:var(--danger); }
/* `--text-faint` traegt auf dem Zebrastreifen nicht (3,66:1) - `--text-muted` schon (4,63:1). */
.pos-trend.same { color:var(--text-muted); }
/* Wochen-Verlauf: KEINE eigene Zebra-Regel. Die site-globale Streifung `.hover>*:nth-child(even) *{#DDD}`
   (greift wegen <tbody class="hover">) liefert bereits ein einheitliches odd/even wie in der Gesamtwertung.
   Eine eigene td-Regel würde nur das <td> umfärben, nicht die inneren <a>/<span> → graue Kästchen. */

/* Wochen-Verlauf (native Tabelle): FESTE Spaltenbreiten via table-layout:fixed → kein „Zucken" beim
   Wochen-/Such-Wechsel (sonst rechnet der Browser die Spalten je nach Inhalt neu). Prozente wie die
   Gesamtwertung (5/20/20/15/10/10/10/10); versteckte Spalten kollabieren, der Rest skaliert. */
table.rl-wv { table-layout: fixed; }
table.rl-wv th, table.rl-wv td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.rl-wv th:nth-child(1) { width: 5%; }
table.rl-wv th:nth-child(2) { width: 20%; }
table.rl-wv th:nth-child(3) { width: 20%; }
table.rl-wv th:nth-child(4) { width: 15%; }
table.rl-wv th:nth-child(5) { width: 10%; }
table.rl-wv th:nth-child(6) { width: 10%; }
table.rl-wv th:nth-child(7) { width: 10%; }
table.rl-wv th:nth-child(8) { width: 10%; }

/* ── Live-Such-Toolbar (ranking-table.js) ── */
.rlt-toolbar { display:flex; align-items:center; gap:10px; margin:0 0 6px; }
.rlt-count { color:var(--text-muted); font-size:0.9em; white-space:nowrap; }
.rlt-toolbar input { margin-left:auto; padding:4px 8px; max-width:100%; box-sizing:border-box; border:1px solid var(--line-control); border-radius:4px; }