/* ===================== roster.php ("rosterpage-" + "rh-" prefixes) =====================
   Cleaned up 2026-08-11: this file used to be ~2250 lines of teleportHQ-generated
   ".rosterpage-*" boilerplate CSS from the page's original pre-redesign layout (numbered
   ".rosterpage-container287" style classes, one per div). Only the small "Ansicht"-mode team
   header banner at the top of the page (team logo/name/GM/Team Value/Durchschnittsalter) still
   uses the original ".rosterpage-*" markup — everything the 2026-08-04 RosterHub redesign
   (see docs/CLAUDE.md project history) replaced now uses the "rh-*" design system instead,
   which used to live inline in roster.php's own <style> block and has been moved here too.
   Dead ".rosterpage-*" classes (draftrights/draftpicks/cap/fa sections, unused container/
   dropdown/image variants) were deleted outright — verified zero references left in
   roster.php before removing anything. ".rh-pill" (+ color variants) moved to css/dyne.css
   instead of staying here — it's duplicated verbatim in inc_trade_tradeblock.php too, so it's
   genuinely shared, not roster.php-specific. Colors that depend on the team's color1/fontcol1
   (set per request by PHP) are CSS custom properties (--rh-color1 etc.), defined in a small
   remaining inline <style> block in roster.php — everything else here is fully static. */

/* ----- still-live "Ansicht" team header banner (pre-redesign teleportHQ markup) ----- */
.rosterpage-team-profile {
  width: 100%;
  height: 100Px;
  display: flex;
  position: relative;
  max-width: 1360px;
  align-self: flex-start;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  background-color: white;
}
.rosterpage-container001 {
  flex: 0 0 auto;
  color: #fdbb30;
  width: 10%;
  height: 100%;
  display: flex;
  align-self: center;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.rosterpage-image {
  flex: 0 0 auto;
  width: auto;
  height: 90%;
  align-self: center;
  object-fit: cover;
  border-radius: var(--dl-radius-radius-radius4);
}
.rosterpage-container002 {
  flex: 0 0 auto;
  width: 30%;
  height: 100%;
  display: flex;
  align-self: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.rosterpage-text007 {
  width: auto;
  height: auto;
  align-self: center;
  margin-bottom: 0px;
}
.rosterpage-spacer {
  flex: 0 0 auto;
  width: 35%;
  height: 100%;
  display: flex;
  align-self: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.rosterpage-container003 {
  flex: 0 0 auto;
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--dl-color-gray-white);
}
.rosterpage-container004 {
  width: 100%;
  height: 12.5%;
  display: flex;
}
.rosterpage-container005 {
  width: 100%;
  height: 25%;
  display: flex;
}
.rosterpage-container006 {
  flex: 0 0 auto;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: bold;
  flex-direction: column;
  justify-content: center;
}
.rosterpage-container007 {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.rosterpage-container008 {
  width: 100%;
  height: 25%;
  display: flex;
}
.rosterpage-container009 {
  flex: 0 0 auto;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: bold;
  flex-direction: column;
  justify-content: center;
}
.rosterpage-container010 {
  flex: 0 0 auto;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.rosterpage-container011 {
  width: 100%;
  height: 25%;
  display: flex;
}
.rosterpage-container012 {
  flex: 0 0 auto;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: bold;
  flex-direction: column;
  justify-content: center;
}
.rosterpage-container013 {
  flex: 0 0 auto;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.rosterpage-container014 {
  width: 100%;
  height: 12.5%;
  display: flex;
}

/* Kompakte mobile Beschriftungen (Birdrechte/Optionen/Trademarker-Spalten, siehe
   roster_mobile_label() in roster.php) - Desktop zeigt standardmaessig den vollen Text. */
.roster-mobile-text {
  display: none;
}
@media(max-width: 479px) {
  .roster-full-text {
    display: none;
  }
  .roster-mobile-text {
    display: inline;
  }
  .rosterpage-team-profile {
    height: 50Px;
  }
  .rosterpage-container002 {
    width: 40%;
    font-size: 10Px;
  }
  .rosterpage-spacer {
    width: 10%;
  }
  .rosterpage-container003 {
    width: 40%;
    font-size: 8Px;
  }
  .rosterpage-container006 {
    font-size: 8Px;
  }
  .rosterpage-container008 {
    font-size: 8Px;
  }
}

/* ===================== rh- design system (RosterHub, moved from inline <style> 2026-08-11) =====================
   Team colors that used to be interpolated directly as PHP variables ($color1/$fontcol1/
   $color1_text) are now CSS custom properties, set per-request in a small inline <style> block
   in roster.php (--rh-color1, --rh-fontcol1, --rh-color1-text). See css/dyne.css for .rh-pill +
   its color variants — shared with inc_trade_tradeblock.php, not roster.php-specific. */
.rh-page { width: 100%; max-width: 1360px; margin: 0 auto; background-color: #ffffff; }
/* Hamburger-Icon bleibt (User-Wunsch 2026-08-07: "soll schon ganz links sein") am
   TATSAECHLICHEN linken Bildschirmrand - dafuer aus dem Flex-Fluss von .mainnav-header
   herausgeloest (position:fixed statt als Flex-Item), sonst wuerde es zusammen mit dem
   Rest der Leiste mitzentriert (das war der vorherige, vom User verworfene Versuch: die
   ganze .mainnav-header auf max-width:1360 zu zentrieren, wodurch AUCH das Hamburger-Icon
   nach rechts rutschte). Kein eigener Hintergrund mehr noetig (anders als im ersten
   Versuch) - das ::before auf .mainnav-header weiter unten zieht den dunklen Leisten-
   Hintergrund wieder ueber die volle Breite, direkt bis unter das Hamburger-Icon.
   display:none per Default, nur im Standalone-Modus (also NICHT im iframe, siehe
   html.dyne-bg-standalone weiter unten bei .mainnav-header) wieder eingeblendet - User-
   Wunsch 2026-08-07: Team-/Saison-Auswahl (siehe .rh-navlocal) sollen AUCH im eingebetteten
   iframe sichtbar/nutzbar bleiben, das GLOBALE Hamburger-Menue (Team Management, Stats
   Center, Login/Logout usw. - fuer ein eingebettetes Widget ohnehin irrelevant, fuehrt nur
   auf andere Seiten) aber weiterhin nicht. */
.mainnav-hamburger-wrap { position: fixed; left: 0; top: 0; z-index: 999999; display: none; }
html.dyne-bg-standalone .mainnav-hamburger-wrap { display: inline-flex; }
/* Team-/Saison-Auswahl + Export-Button bleiben IN der bestehenden Hauptnav-Leiste
   (.mainnav-header, EINE Leiste, User-Wunsch: keine zweite Zeile darunter), werden aber -
   jetzt wo das Hamburger-Icon nicht mehr mitzaehlt (siehe oben) - als einziger verbliebener
   Flex-Inhalt ueber .mainnav-header selbst (max-width:1360 + margin:auto, der klassische
   "left:0;right:0;max-width;margin:auto"-Zentriertrick fuer fixierte Elemente) auf die
   Breite von .rh-page zentriert. Der innere .rh-navlocal-Wrapper (width:100% davon, 20px
   Padding beidseitig wie .rh-subnav) sorgt dafuer, dass Team wählen/Saison wählen links UND
   der Speicher-Button rechts (dessen bestehendes margin-left:auto ihn an den rechten Rand
   DIESES Wrappers schiebt) exakt ueber der linken/rechten Kante des Seiteninhalts sitzen.
   Nur hier in roster.php ueberschrieben (spaetere Regel gleicher Spezifitaet im selben
   <style>-Block gewinnt gegen render_main_nav_css()) - die max-width-Zentrierung ist
   roster.php-spezifisch (haengt an .rh-page). Die "auch im iframe sichtbar"-Regel selbst
   (display:flex statt nur bei html.dyne-bg-standalone) ist seit 2026-08-08 zentral in
   nav.php (.mainnav-header-has-pagelocal, greift automatisch fuer JEDE Seite mit
   $page_local_html) - die hiesigen Werte sind identisch dazu und damit redundant, aber
   ungefaehrlich (gleiche Spezifitaet+Wert kollidiert nicht).
   Weil .mainnav-header dadurch schmaler als der Viewport wird, klafft sonst eine Luecke
   (Seitenhintergrundbild statt dunkler Leiste) zwischen dem weiterhin volle-Breite
   verankerten Hamburger-Icon und dem jetzt zentrierten Rest (User-Report 2026-08-07,
   Screenshot). Das ::before erzeugt dafuer einen zusaetzlichen, davon unabhaengigen
   Hintergrund-Balken ueber die komplette Viewport-Breite (klassischer "full-bleed"-Trick:
   left:50%+width:100vw+margin-left:-50vw hebt die Begrenzung durch die max-width des
   Elternelements auf) - exakt in der Hoehe von .mainnav-header (top/bottom:0 relativ dazu),
   aber mit z-index:-1 HINTER dem eigentlichen Leisten-Inhalt (und damit auch hinter dem per
   eigenem z-index:999999 davorliegenden Hamburger-Icon), sodass es rein optisch die Luecke
   schliesst, ohne Klicks auf darunterliegende Seiteninhalte abzufangen.
   display:flex unbedingt (nicht wie in nav.php erst per html.dyne-bg-standalone) - User-
   Wunsch 2026-08-07: die seiteninternen Controls (.rh-navlocal) sollen AUCH im iframe
   sichtbar bleiben, nicht nur ausserhalb. syncMainNavHeaderHeight() (siehe render_main_nav()
   in nav.php) laeuft dadurch jetzt auch im iframe korrekt (die Funktion ueberspringt die
   Hoehen-Synchronisierung nur, wenn .mainnav-header display:none ist). */
.mainnav-header { max-width: 1360px; margin: 0 auto; position: fixed; display: flex; }
.mainnav-header::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background-color: #2c3e50; z-index: -1; }
.rh-navlocal { width: 100%; box-sizing: border-box; padding: 0 20px; display: flex; align-items: center; flex-wrap: wrap; }
.rh-subnav { background-color: #2c3e50; width: 100%; display: flex; flex-wrap: wrap; align-items: center; padding: 4px 20px; gap: 4px; }
.rh-subnav .mode-toggle { display: flex; margin-left: auto; align-items: center; gap: 10px; }
.rh-export-btn { margin-left: auto; margin-right: 0; }
/* Angeglichen an den site-weiten Saison-Dropdown-Stil von draftpicks.php/halloffame.php
   (.dpp-select/.hof-select, User-Wunsch 2026-08-15 "gleicher Stil wie der Rest") - ersetzt
   das vorherige mainnav-thq-dropdown-Flyout fuer die Saison-Auswahl (Team-Auswahl bleibt
   unveraendert bei mainnav-thq-dropdown, da die dortige Sucheingabe im <select> nicht
   nachbildbar ist). */
.rh-select { font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; margin-right: 8px; }
.rh-select:hover { border-color: rgba(255,255,255,.6); }
.rh-select option { color: #1b2733; background: #fff; }
@media (max-width: 767px) {
	.rh-navlocal .mainnav-thq-dropdown { margin-right: 8px; }
	.rh-navlocal .mainnav-dropdown-toggle { padding-left: 8px; padding-right: 8px; }
	.rh-navlocal .rh-export-btn { padding-left: 8px; padding-right: 8px; margin-right: 8px; }
}
.rh-subnav a.mode-link { color: #c9d3dc; font-size: 12px; padding: 6px 10px; border-radius: 3px; text-decoration: none; }
.rh-subnav a.mode-link.active { color: #fff; font-weight: 700; background-color: #1a2733; }
.rh-subnav label.admin-label { color: #c9d3dc; font-size: 11.5px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.rh-capstrip { background: #f4f8f5; width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 8px; padding: 8px 20px; }
.rh-chip { background: #fff; border: 1px solid var(--rh-color1-text); border-radius: 4px; padding: 2px 8px; font-size: 10.5px; color: #1b2733; flex: 0 1 140px; display: flex; align-items: center; justify-content: space-between; gap: 4px; text-align: left; box-sizing: border-box; }
.rh-chip b { color: var(--rh-color1-text); }
.rh-chip .rh-chip-value { white-space: nowrap; }
.rh-h2 { font-size: 13px; color: #2c3e50; text-transform: uppercase; letter-spacing: .03em; margin: 20px 0 4px 0; font-weight: 700; }
.rh-content { padding: 0 20px 24px 20px; }
.rh-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 11.5px; margin-bottom: 4px; }
.rh-table thead th { background: var(--rh-color1); color: var(--rh-fontcol1); font-weight: 700; padding: 6px 4px; text-align: center; white-space: nowrap; }
.rh-table thead th.left { text-align: left; padding-left: 8px; }
.rh-table tbody td { padding: 5px 4px; text-align: center; border-bottom: 1px solid #e2e4e7; vertical-align: middle; }
.rh-table tbody td.left { text-align: left; padding-left: 8px; }
.rh-table tbody tr:nth-child(odd) { background: #fff; }
.rh-table tbody tr:nth-child(even) { background: #f3f3f3; }
.rh-table tbody tr:hover { background: #eef3fa; }
.rh-table tbody tr.example { opacity: .6; }
.rh-col-action { min-width: 210px; }
.rh-name-link { color: var(--rh-color1-text); text-decoration: underline; font-weight: 500; }
.rh-playerpic { width: 32px; height: 32px; object-fit: cover; border-radius: 3px; display: block; margin: 0 auto; flex-shrink: 0; }
.rh-player-cell { display: flex; align-items: center; gap: 6px; }
.rh-player-cell .rh-playerpic { margin: 0; }
.rh-btn { font-size: 10.5px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--rh-color1-text); background: #fff; color: var(--rh-color1-text); cursor: pointer; white-space: nowrap; }
.rh-btn.primary { background: var(--rh-color1); color: #fff; }
.rh-btn.ghost { border-color: #a9b0b8; color: #5c6b7a; }
.rh-btn.small { font-size: 9.5px; padding: 1px 6px; border-color: #c8ccd1; color: #5c6b7a; }
.rh-btn + .rh-btn { margin-left: 4px; }
.rh-btn:disabled { opacity: .4; cursor: not-allowed; }
.rh-action-slot { min-width: 60px; display: inline-block; }
.rh-waiver-link { font-size: 10px; color: #a9302f; cursor: pointer; border-bottom: 1px dashed #a9302f; }
.rh-muted { color: #a9b0b8; }
.rh-table tbody tr.rh-roster-sep td { border-bottom: 2px dashed #9aa5b1; }
.rh-table tbody tr.rh-roster-16 td, .rh-table tbody tr.rh-roster-16 td * { color: #b00000 !important; }
.rh-table tbody tr.rh-tradeblock-row td { background: #fdf1cf; }
.rh-table tbody tr.rh-tradeblock-row:hover td { background: #fbe6a8; }
.rh-table tbody tr.rh-caphit-first td { border-top: 2px solid #2c3e50; }
.rh-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; margin-bottom: 8px; }
@media (max-width: 700px) { .rh-twocol { grid-template-columns: 1fr; } }
details.rh-accordion { background: #fff; border: 1px solid #d7dade; border-radius: 4px; margin-bottom: 0; }
details.rh-accordion summary { list-style: none; cursor: pointer; padding: 9px 12px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #1b2733; }
details.rh-accordion summary::-webkit-details-marker { display: none; }
details.rh-accordion summary:before { content: "▸"; color: var(--rh-color1-text); font-size: 10px; }
details.rh-accordion[open] summary:before { transform: rotate(90deg); display: inline-block; }
.rh-badge { background: #b00000; color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 9px; padding: 0 7px; margin-left: 2px; }
/* Watchlist-"Status"-Spalte: Gebots-Zustand-Faerbung (User-Wunsch 2026-08-08, identische
   Farbwerte wie freeagents.php fuer Wiedererkennung) - hellgruen/dunkelgruen wenn das
   eigene Team fuehrt, hellrot/dunkelrot wenn ein fremdes Team fuehrt ("dunkel" = Gebotsdecke
   erreicht, siehe roster_watchlist_bid_class() weiter oben). "Max"-Varianten brauchen weisse
   statt der sonst dunklen Standard-Textfarbe fuer ausreichenden Kontrast. */
.rh-table td.rh-bidown { background: #e8f8ec; }
.rh-table td.rh-bidforeign { background: #fdeceb; }
.rh-table td.rh-bidown-max { background: #2e7d46; color: #ffffff; }
.rh-table td.rh-bidforeign-max { background: #b23b30; color: #ffffff; }
.rh-accordion .body { padding: 0 12px 12px 12px; }
.rh-msg-error { color: #b00000; font-size: 13px; background: #fff; padding: 6px 10px; border-radius: 4px; margin: 0 0 6px; width: fit-content; }
.rh-msg-success { color: #1a7a1a; font-size: 13px; background: #fff; padding: 6px 10px; border-radius: 4px; margin: 0 0 6px; width: fit-content; }
.rh-legend { font-size: 11px; margin-top: 10px; background-color: #f4f8f5; padding: 8px 12px; border-radius: 4px; text-align: center; }