/* ===================== Statistik-Hub (statshub.php) =====================
   Ausgelagert aus statshub.php's Inline-<style>-Block (2026-08-11), damit
   selbst angelegte CSS-Klassen zentral als Datei liegen statt inline im PHP. */
.sh-page { max-width: 1360px; margin: 0 auto; background: #ffffff; }
.sh-navtabs { display: flex; align-items: center; flex: 1 1 auto; flex-wrap: wrap; box-sizing: border-box; }
.sh-navtab.active { background-color: #1a2733; font-weight: 700; }

.sh-content { padding: 16px 20px 26px; box-sizing: border-box; }
.sh-lede { font-size: 12px; color: #66707c; margin: 0 0 12px; line-height: 1.5; }

.sh-filters { background: #f4f6f8; border: 1px solid #dde1e6; border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sh-search { flex: 1 1 190px; min-width: 150px; padding: 7px 10px; border-radius: 5px; border: 1px solid #ccd3da; font-size: 12.5px; color: #1b2733; font-family: inherit; }
.sh-select { font-family: inherit; font-size: 12px; padding: 6px 9px; border-radius: 5px; border: 1px solid #ccd3da; background: #fff; color: #1b2733; }
.sh-seg { display: inline-flex; border: 1px solid #ccd3da; border-radius: 16px; overflow: hidden; background: #fff; }
.sh-seg a { color: #1b2733; font-size: 11.5px; font-weight: 700; padding: 6px 13px; text-decoration: none; display: inline-block; }
.sh-seg a.active { background: #2c3e50; color: #fff; }
.sh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; background: #eef1f4; border: 1px solid #ccd3da; color: #1b2733; font-size: 11.5px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.sh-chip.active { background: #2c3e50; color: #fff; border-color: #2c3e50; }
.sh-chip .sub { opacity: .75; margin-left: 3px; }
.sh-filters .divider { width: 1px; align-self: stretch; background: #dde1e6; margin: 0 2px; }

/* Fixierte Kopfzeile (User-Wunsch 2026-08-22): identisches Rezept wie drafthistory.php's
   .dht-table-scroll/.dht-table thead th (siehe docs/design-system.md §4 "Frozen header row for
   long tables") - "overflow: auto" (NICHT nur overflow-x) + eigene "max-height", damit dieser
   Wrapper zum echten Scroll-Container wird, an den sich "position: sticky" im thead binden kann
   (Falle #1: overflow-x:auto allein erzwingt zwar auch overflow-y:auto, macht den Wrapper aber nie
   zum tatsaechlichen Scroll-Container, solange er ungebunden mitwaechst - die Kopfzeile blieb dann
   an einem falschen festen Offset haengen statt mitzuscrollen). */
.sh-table-scroll { overflow: auto; max-height: 70vh; border-radius: 6px; border: 1px solid #e2e4e7; }
/* Schatten-Scrollleiste am unteren Viewport-Rand (User-Wunsch 2026-08-09): die
   eigentliche horizontale Scrollleiste der Tabelle sitzt sonst erst ganz unten am
   Tabellenende, bei vielen Zeilen muss man dafuer erst komplett runterscrollen. Diese
   fixierte Leiste bleibt immer sichtbar und ist bidirektional mit #shTableScroll
   synchronisiert (siehe Script in statshub.php). */
.sh-scroll-shadow { position: fixed; bottom: 0; height: 14px; overflow-x: auto; overflow-y: hidden; background: #eef1f4; border-top: 1px solid #ccd3da; z-index: 40; display: none; }
.sh-scroll-shadow.visible { display: block; }
.sh-scroll-shadow-inner { height: 1px; }
/* border-collapse: separate statt collapse (Falle #2 des Frozen-Header-Rezepts): collapse blockiert
   position:sticky auf thead/th browseruebergreifend. Optisch identisch, da die Tabelle nur
   zellenweise border-bottom nutzt (keine geteilten Rahmen zwischen Nachbarzellen). */
table.sh-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.4px; font-variant-numeric: tabular-nums; min-width: 1600px; }
.sh-table thead th { position: sticky; top: 0; z-index: 5; background: #2c3e50; color: #fff; font-weight: 700; text-align: center; padding: 7px 6px; white-space: nowrap; font-variant-numeric: normal; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.sh-table thead th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.sh-table thead th.left { text-align: left; padding-left: 12px; }
.sh-table thead th.sorted { background: #14202b; }
.sh-table thead th .arrow { font-size: 9px; }
.sh-table tbody td { padding: 6px; text-align: center; border-bottom: 1px solid #e2e4e7; vertical-align: middle; white-space: nowrap; }
.sh-table tbody td.left { text-align: left; padding-left: 12px; }
.sh-table tbody tr:nth-child(odd) { background: #fff; }
.sh-table tbody tr:nth-child(even) { background: #f5f6f8; }
.sh-table tbody tr:hover { background: #eaf1f8; }
.sh-table td.sh-sortcol { font-weight: 700; color: #1b2733; }
/* Record/Career-High/Leader-Hervorhebung: Werte jetzt zentral in css/dyne.css ("Record-highlighting
   tokens, shared, consolidated 2026-08-22") statt hier dupliziert - Klassennamen (.sh-record/
   .sh-careerhigh/.sh-leader) unveraendert, nur die Deklaration ist umgezogen. */

.sh-table td.sticky-col, .sh-table th.sticky-col { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: 2px 0 4px rgba(0,0,0,.08); }
/* z-index 6 statt 2 (User-Wunsch 2026-08-22, fixierte Kopfzeile): diese Ecke ist jetzt in BEIDE
   Richtungen sticky (links UND oben) und muss daher ueber dem allgemeinen "thead th" (z-index 5)
   liegen, sonst rutscht die restliche Kopfzeile beim horizontalen Scrollen davor. */
.sh-table thead th.sticky-col { background: #2c3e50; z-index: 6; }
.sh-table thead th.sticky-col.sorted { background: #14202b; }

.sh-player-cell { display: flex; align-items: center; gap: 8px; }
.sh-rank { width: 18px; flex: 0 0 auto; text-align: right; font-weight: 700; color: #a9b0b8; font-size: 11px; }
.sh-rank.gold { color: #8a6a00; }
.sh-rank.silver { color: #4a5a6b; }
.sh-rank.bronze { color: #96401a; }
.sh-playerpic { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.sh-name-link { color: #2c3e50; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.sh-pos { color: #8b95a1; font-size: 10px; font-weight: 700; margin-left: 4px; text-transform: uppercase; }
/* Chip: .team-chip (css/dyne.css, "shared, consolidated 2026-08-22") statt eigener .sh-teampill-
   Klasse - die frueher hier abweichenden Werte (9.5px/800 statt 10px/700) waren die Ursache der
   seitenuebergreifend unterschiedlichen Chip-Hoehe (User-Report 2026-08-22). */
.sh-team-cell { display: flex; align-items: center; gap: 8px; }

.sh-lgrow td { background: #eef1f4 !important; font-style: italic; color: #4a5a6b; font-weight: 600; border-bottom: 2px solid #ccd3da !important; }
.sh-lgrow td.sticky-col { background: #eef1f4 !important; }

.sh-empty { text-align: center; padding: 30px; color: #66707c; font-size: 13px; }

/* Zentrierte Box, gleiche Optik wie boxscore.php's .bsc-legend (User-Wunsch 2026-08-16). Eigene
   Klasse .sh-stat-legend statt des generischen .sh-legend: letzteres traegt in dyne.css bereits
   eine ANDERE .sw-Deklaration (11x11px Farbpunkt ohne Text, fuer inc_alltime_leader.php's
   Liga-Rekord-Legende) - gleicher Klassenname haette zur Kollision gefuehrt (fixe 11x11px-Box
   hat die "24.5"-Beispielzahl abgeschnitten/ueberlappt, User-Report mit Screenshot). */
.sh-stat-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 12px 16px; background: #f4f6f8; border: 1px solid #dde1e6; border-radius: 6px; font-size: 11.5px; color: #4a5a6b; }
.sh-stat-legend span { white-space: nowrap; }
.sh-stat-legend .sw { display: inline-block; padding: 1px 7px; border-radius: 9px; font-weight: 800; background: #f5f6f8; color: #1b2733; font-size: 10.5px; white-space: nowrap; }
.sh-stat-legend .sw.record { background: #fdf3c7; color: #7a5d00; }
.sh-stat-legend .sw.careerhigh { background: linear-gradient(180deg, #dbe9fb, #a8c8ee); color: #12447e; }
.sh-stat-legend .sw.leader { background: #eef1f4; color: #1b2733; text-decoration: underline; text-decoration-color: #2c7be5; text-decoration-thickness: 2px; text-underline-offset: 2px; }

@media (max-width: 720px) {
	.sh-filters { gap: 8px; }
	.sh-content { padding: 14px 16px 22px; }
}

/* Schmalere Tabs nur mobil (User-Wunsch 2026-08-23): .mainnav-link-item bringt von nav.php aus
   16px/8px Padding + 32px margin-right mit (fuer die normalen, wenigen Hauptmenuepunkte gedacht) -
   bei 4 Tabs nebeneinander reicht das nicht mehr neben Hamburger-Icon + Logo in eine Zeile.
   Ueberschreibt darum nur .sh-navtab (nicht global .mainnav-link-item, das auf anderen Seiten
   weiterhin die normalen Abstaende braucht) und nur unterhalb 480px. */
@media (max-width: 480px) {
	.sh-navtabs { gap: 2px; }
	.sh-navtab.sh-navtab { padding: 5px 7px; margin-right: 0; font-size: 10.5px; }
}