/* potm.php - Player/Rookie/Coach of the Month. Tokens/Komponenten wie docs/design-system.md
(navy #2c3e50, Award-Badge-Farben, Sticky-Spalten-Technik, 1360px Content-Breite). team-chip
selbst kommt aus dem globalen css/dyne.css, hier nicht neu definiert. */
/* Eine weisse Inhaltsbox fuer die gesamte Seite (User-Wunsch 2026-09-10) - selbes Muster wie
.awe-page/.awe-content (awards_edit.php) statt einzelner auf dem dunklen Seitenhintergrund
schwebender Panels. */
.ptm-page { max-width: 1360px; margin: 0 auto; background: #ffffff; padding: 18px 24px 40px; box-sizing: border-box; }
/* ---- Nav-lokale Controls (Ansicht / Archiv) ---- */
/* flex:1 1 auto ist Pflicht (Bugreport 2026-09-10, "RECHTSBÜNDIG ZUM INHALT") - ohne das nimmt
#ptmNavLocal als direktes Flex-Item von .mainnav-header (display:contents auf
.mainnav-page-local, siehe nav.php) nur die Breite seines EIGENEN Inhalts ein statt der vollen
verfuegbaren Nav-Breite. margin-left:auto auf .ptm-nav-right kann dann nur innerhalb dieser
knappen Breite nach rechts schieben, nicht bis zur echten #content-Kante. Identisches Muster wie
.awe-navlocal (awards_edit.php, siehe dyne.css) - dort steht die Deklaration bereits korrekt. */
.ptm-navlocal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; box-sizing: border-box; }
.ptm-navtabs { display: inline-flex; background: #1a2733; border-radius: 8px; padding: 3px; gap: 2px; }
.ptm-navtab { color: #a9b8c6; font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 6px; text-decoration: none; }
.ptm-navtab.active { background: #2c3e50; color: #fff; }
/* Saison/Monat-Sprung-Picker (User-Wunsch 2026-09-10) - .season-select ist die bereits sitewide
geteilte Klasse fuer genau diesen dunklen-Nav-Kontext (dyne.css), hier nur die Anordnung. */
.ptm-jumpform { display: flex; align-items: center; gap: 6px; }
/* "Bearbeiten"-Button, rechtsbuendig zum Seiteninhalt (User-Wunsch 2026-09-10) - identisches Muster
wie .awe-nav-right/.awe-navbtn (awards_edit.php, siehe dyne.css): margin-left:auto schiebt es an
den rechten Rand INNERHALB von #ptmNavLocal, dessen eigenes paddingRight bereits per
ptmSyncNavLocalPadding() auf die rechte Kante von #content synchronisiert wird - landet dadurch an
#content's Kante, nicht am Viewport-Rand (siehe design-system.md §4 "Nav-lokale Controls"). */
.ptm-nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ptm-navbtn { appearance: none; font: inherit; font-size: 12px; font-weight: 700; border-radius: 5px; padding: 7px 14px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; background: #fff; color: #2c3e50; text-decoration: none; display: inline-block; }
.ptm-navbtn:hover { background: #e7ecf1; }
.ptm-navbtn:disabled { opacity: .5; cursor: not-allowed; }
/* ---- Hero ---- */
.ptm-hero { position: relative; overflow: hidden; background: linear-gradient(135deg,#2c3e50 0%,#1a2733 100%); color: #fff; border-radius: 10px; padding: 22px 24px 20px; margin-bottom: 18px; }
.ptm-hero-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a9c3dd; }
.ptm-hero-title { font-size: 28px; font-weight: 800; margin-top: 4px; display: flex; align-items: center; gap: 10px; color: #fff !important; text-shadow: none !important; }
.ptm-hero-ic { width: 34px; height: 34px; object-fit: contain; flex: none; }
.ptm-hero-sub { font-size: 13px; color: #c3d3e2; margin-top: 6px; }
.ptm-msg-error { background: #fdeceb; border: 1px solid #e79a95; color: #a41f19; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 12.5px; }
.ptm-empty { background: #f4f6f8; border: 1px solid #dde1e6; border-radius: 8px; padding: 24px; text-align: center; color: #5c6b7a; font-size: 13px; }
.ptm-generate-box { background: #fff; border: 1px solid #e2e4e7; border-radius: 8px; padding: 14px 16px; margin-top: 14px; max-width: 480px; margin-left: auto; margin-right: auto; }
.ptm-generate-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.ptm-generate-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #5c6b7a; font-weight: 600; }
.ptm-generate-row input, .ptm-generate-row select { padding: 7px 9px; border: 1px solid #ccd3da; border-radius: 6px; font: inherit; font-size: 12px; color: #1b2733; }
.ptm-generate-row input[type="number"] { width: 90px; }
/* ---- Banners ---- */
.ptm-task-banner { display: flex; align-items: center; gap: 14px; border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(17,28,38,.06); background: #fff8e6; border: 1px solid #e8c96b; }
.ptm-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.ptm-task-banner .ptm-ic { background: #f4d67f; }
.ptm-task-banner .ptm-tx { font-size: 12.5px; color: #6b5300; }
.ptm-progress { margin-left: auto; text-align: right; flex: none; }
.ptm-progress .num { font-size: 20px; font-weight: 800; color: #8a6a00; font-variant-numeric: tabular-nums; }
.ptm-progress .lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: #8a6a00; font-weight: 700; }
/* ---- Kategorie-Panels ---- */
.ptm-category-stack { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.ptm-category-panel { background: #fff; border: 1px solid #e2e4e7; border-radius: 10px; box-shadow: 0 1px 2px rgba(17,28,38,.06); overflow: hidden; }
.ptm-category-panel.confirmed { border-color: #9bd6a6; box-shadow: 0 0 0 1px #9bd6a6 inset; }
/* Kopfzeile traegt die echte Conference-Farbe als Inline-Style (User-Wunsch 2026-09-11, ptm.php's
ptm_conf_header_style()) statt eines fixen Award-Typ-Verlaufs - deshalb hier feste helle
Textfarbe fuer alle Kind-Elemente statt dunklem Text auf ungewissem Hintergrund. */
.ptm-cp-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; color: #fff; }
.ptm-award-ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.ptm-award-ic img { width: 26px; height: 26px; object-fit: contain; }
.ptm-cp-head .ptm-award-ic { background: #cd7f32; }
.ptm-titles { flex: 1; }
.ptm-cat { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: #fff; opacity: .9; }
.ptm-conf { font-size: 14px; font-weight: 800; color: #fff; }
/* Ost/West-Label auf der jetzt farbigen Kopfzeile (User-Wunsch 2026-09-10/11) - keine eigene
Konferenzfarbe mehr (waere identisch zum Hintergrund und damit unsichtbar), sondern eine
halbtransparente helle Pille, die auf jeder Kopfzeilenfarbe lesbar bleibt. */
.ptm-conf-badge { display: inline-block; padding: 2px 9px; border-radius: 9px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.22); color: #fff; }
.ptm-count { font-size: 10.5px; color: #fff; font-weight: 600; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); padding: 3px 9px; border-radius: 12px; }
.ptm-done-check { color: #baffc7; font-size: 18px; }
.ptm-fallback-note { padding: 8px 16px; font-size: 11px; color: #96401a; background: #fbe9dd; border-bottom: 1px solid #e8ab7c; }
/* ---- Stats-Tabelle ---- */
.ptm-stat-table-wrap { overflow-x: auto; }
table.ptm-stat-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10.6px; min-width: 1180px; }
.ptm-stat-table thead th { background: #2c3e50; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 7px 8px; white-space: nowrap; text-align: right; font-size: 9.3px; }
.ptm-stat-table thead th.ptm-id-col { text-align: left; position: sticky; left: 0; z-index: 3; background: #2c3e50; }
.ptm-stat-table tbody td { padding: 6px 8px; border-bottom: 1px solid #e2e4e7; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: #1b2733; }
/* Ungerade Zeilen brauchen einen EIGENEN expliziten Hintergrund (nicht nur "kein Regel" = transparent) -
Bugreport 2026-09-10: die Sticky-Spalte (.ptm-id-col) nutzt background:inherit, um die Zeilenfarbe
zu uebernehmen (design-system.md-Standardrezept). "inherit" liest aber NUR die Farbe des direkten
Eltern-, nicht irgendeine Farbe weiter oben im DOM - fehlt dem
selbst ein background (wie
bisher bei ungeraden Zeilen), ist das inherited background transparent, und beim Scrollen scheinen
die darunterliegenden, nach links wegscrollenden Spalten durch die eigentlich fixierte Spalte durch. */
.ptm-stat-table tbody tr:nth-child(odd) { background: #fff; }
.ptm-stat-table tbody tr:nth-child(even) { background: #f7f8fa; }
.ptm-stat-table tbody tr.row-selected { background: #e7f2ff !important; }
.ptm-stat-table tbody tr:hover { background: #eaf1f8; }
.ptm-category-panel.confirmed .ptm-stat-table tbody tr.row-selected { background: #e6f6e9 !important; }
.ptm-stat-table tbody tr { cursor: pointer; }
.ptm-id-col { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: 2px 0 4px rgba(0,0,0,.06); text-align: left; min-width: 230px; }
.ptm-id-cell { display: flex; align-items: center; gap: 9px; }
.ptm-radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #c8ccd1; flex: none; position: relative; }
tr.row-selected .ptm-radio { border-color: #2c3e50; }
tr.row-selected .ptm-radio::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #2c3e50; }
.ptm-category-panel.confirmed tr.row-selected .ptm-radio { border-color: #1d7a30; }
.ptm-category-panel.confirmed tr.row-selected .ptm-radio::after { background: #1d7a30; }
/* Spieler-Avatar: echtes Foto (img/spieler/*.png, wie playerratings.php's .plr-playerpic - object-fit
cover, dezent abgerundetes Quadrat statt Kreis) fuer POTM/ROTM; fuer COTM (Coaches, kein Foto in
gmDB) ein mit Initialen auf demselben Box-Model. */
.ptm-avatar { width: 26px; height: 26px; border-radius: 5px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #fff; background: #dde3e8; object-fit: cover; }
span.ptm-avatar { background: linear-gradient(135deg,#4a6076,#2c3e50); }
/* COTM-Avatar: Team-Logo (img/logos/primary/, wie currentgm.php's cgm_logo_html()) statt Foto -
object-fit:contain statt cover, damit das Logo nicht angeschnitten wird, heller Rahmen statt
Foto-Grau/Navy-Gradient als Hintergrund. */
.ptm-avatar-logo { object-fit: contain; background: #f4f6f8; border: 1px solid #dde1e6; box-sizing: border-box; padding: 3px; }
.ptm-inline-error { display: block; font-size: 10.5px; color: #b00000; margin-top: 4px; }
/* Name-Link zum Spieler-/GM-Profil (User-Wunsch 2026-09-10) - Standardmuster wie andere Seiten:
navy, unterstrichen, weight 600 (design-system.md "Player/team cell"). */
.ptm-namelink { color: #2c3e50; font-weight: 600; text-decoration: underline; }
.ptm-namelink:hover { color: #1a2733; }
.ptm-id-name { font-size: 11.8px; font-weight: 600; color: #1b2733; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* team-chip ist ein flex-Kind hier (.ptm-id-name ist display:flex) und wuerde sonst per Default
(flex-shrink:1) unter seine feste 42px-Breite gequetscht - siehe .team-chip in dyne.css. */
.ptm-id-name .team-chip, .ptm-wc-name .team-chip { flex: none; }
.ptm-fallback-tag { font-size: 8.3px; font-weight: 700; letter-spacing: .02em; color: #96401a; background: #fbe9dd; border: 1px solid #e8ab7c; border-radius: 8px; padding: 1px 6px; text-transform: uppercase; }
/* ---- Tools (weitere anzeigen / Suche) ---- */
.ptm-cp-tools { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 12px 16px; background: #f4f6f8; border-top: 1px solid #e2e4e7; border-bottom: 1px solid #e2e4e7; }
.ptm-btn-more { appearance: none; border: 1px solid #2c3e50; background: #fff; color: #2c3e50; font: inherit; font-size: 11.5px; font-weight: 600; padding: 8px 14px; border-radius: 6px; cursor: pointer; }
.ptm-btn-more:hover { background: #eef1f4; }
.ptm-btn-more:disabled { opacity: .45; cursor: default; }
.ptm-search { flex: 1; min-width: 220px; }
.ptm-lbl { font-size: 10px; font-weight: 700; color: #5c6b7a; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; display: block; }
.ptm-search-input { width: 100%; padding: 8px 10px; border: 1px solid #ccd3da; border-radius: 6px; font: inherit; font-size: 12px; color: #1b2733; background: #fff; }
.ptm-hint { font-size: 10.3px; color: #8b95a1; margin-top: 4px; }
/* ---- Fusszeile / Bestaetigen ---- */
.ptm-cp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.ptm-picked { font-size: 11.5px; color: #5c6b7a; }
.ptm-picked b { color: #2c3e50; }
.ptm-picked.empty b { color: #8b95a1; font-weight: 500; }
.ptm-btn { appearance: none; border: 1px solid #2c3e50; background: #2c3e50; color: #fff; font: inherit; font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.ptm-btn:disabled { opacity: .38; cursor: not-allowed; }
.ptm-btn.confirmed-btn { background: #1d7a30; border-color: #1d7a30; }
.ptm-publish-bar { display: flex; align-items: center; gap: 16px; justify-content: space-between; background: #2c3e50; color: #fff; border-radius: 10px; padding: 15px 20px; margin-bottom: 26px; box-shadow: 0 6px 20px rgba(17,28,38,.10); flex-wrap: wrap; }
.ptm-publish-bar .ptm-tx { font-size: 12.5px; color: #cdd8e2; }
.ptm-publish-bar .ptm-tx b { color: #fff; }
.ptm-btn.publish { background: #f5c451; border-color: #f5c451; color: #3a2c00; font-weight: 700; padding: 10px 20px; }
.ptm-btn.publish:disabled { opacity: .35; }
/* ---- Veroeffentlicht: Gewinner-Karten ---- */
.ptm-winners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ptm-winner-card { background: #fff; border: 1px solid #e2e4e7; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(17,28,38,.06); }
.ptm-wc-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; color: #fff; }
.ptm-wc-head .ptm-award-ic { background: #cd7f32; }
.ptm-wc-body { display: flex; gap: 14px; padding: 16px; align-items: center; }
.ptm-wc-avatar { width: 56px; height: 56px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; background: #dde3e8; object-fit: cover; }
div.ptm-wc-avatar { background: linear-gradient(135deg,#4a6076,#2c3e50); }
.ptm-wc-name { font-size: 16px; font-weight: 800; color: #1b2733; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Kompakt genug, damit alle Kacheln (bis zu 11 bei Spielern) bei 1360px Content-Breite / 2-Spalten-
Grid in einer Zeile passen statt zu umbrechen (User-Wunsch 2026-09-10). clamp(min, vw-basiert,
max): die max-Werte sind bewusst niedrig gehalten - die Kachel-Breite haengt an der SITEWIDE
fixen 1360px-Content-Breite (design-system.md), die auf 4K genauso breit bleibt wie auf 1080p
(beide liegen darueber, das Grid wird also nicht breiter).
flex:1 1 auto statt 1 1 0 (Fix 2026-09-10, per Playwright bei echten 1920px UND 3840px verifiziert
- vorher liefen ALLE Kacheln gleich breit, wodurch fuenfstellige Werte wie "73.8%" systematisch
ueber ihre Kachel hinausragten, obwohl kuerzere Werte wie "0.0" oder "6-0" Platz uebrig hatten.
Mit auto beansprucht jede Kachel zuerst ihre eigene Content-Breite und nur der GESAMT-Ueberschuss
wird gleichmaessig auf alle Kacheln verteilt geschrumpft - Prozentwerte bekommen dadurch von
selbst mehr Raum als kurze Werte. overflow:hidden + ellipsis bleibt als letztes Sicherheitsnetz. */
.ptm-wc-stats { display: flex; gap: clamp(3px, 0.25vw, 5px); padding: 0 16px 16px; font-variant-numeric: tabular-nums; flex-wrap: nowrap; overflow-x: auto; }
.ptm-wc-stats .st { background: #f4f6f8; border: 1px solid #dde1e6; border-radius: 5px; padding: clamp(2px, 0.25vw, 5px) clamp(2px, 0.2vw, 4px); min-width: 0; flex: 1 1 auto; text-align: center; overflow: hidden; }
.ptm-wc-stats .st b { display: block; font-size: clamp(9.5px, 0.55vw, 12.5px); color: #2c3e50; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptm-wc-stats .st span { display: block; font-size: clamp(6.2px, 0.35vw, 7.5px); text-transform: uppercase; letter-spacing: .02em; color: #8b95a1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- Archiv ---- */
.ptm-archive-filters { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ptm-archive-filters select { padding: 7px 10px; border: 1px solid #ccd3da; border-radius: 6px; font: inherit; font-size: 12px; color: #1b2733; background: #fff; }
/* table-layout:fixed + Prozentbreiten statt min-width:980px (User-Wunsch 2026-09-10: alle 6 Awards
ohne Scrollen sichtbar) - die Seite selbst ist auf 1360px gedeckelt, ein erzwungenes min-width
trieb die Tabelle breiter als das und loeste horizontales Scrollen aus, obwohl bei fester
Spaltenbreite + Text-Ellipsis (.ptm-arc-cell .ptm-namelink unten) alle 8 Spalten locker in die
Seitenbreite passen. overflow-x:auto bleibt als Sicherheitsnetz fuer sehr schmale Screens. */
.ptm-archive-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #e2e4e7; box-shadow: 0 1px 2px rgba(17,28,38,.06); }
table.ptm-archive-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; }
.ptm-archive-table th:nth-child(1) { width: 7%; }
.ptm-archive-table th:nth-child(2) { width: 9%; }
.ptm-archive-table th:nth-child(n+3) { width: 14%; }
.ptm-archive-table thead th { background: #2c3e50; color: #fff; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding: 10px 8px; text-align: left; white-space: nowrap; }
.ptm-archive-table tbody td { padding: 8px; border-bottom: 1px solid #e2e4e7; font-size: 11.5px; overflow: hidden; }
.ptm-archive-table tbody tr:nth-child(even) { background: #f7f8fa; }
.ptm-archive-table tbody tr:hover { background: #eaf1f8; }
/* Spielerbild/Team-Logo + Team-Chip je Gewinnerzelle (User-Wunsch 2026-09-10) - kompaktere Variante
der Kandidatenzeilen-Avatare (26px), da die Archiv-Tabelle 6 solcher Zellen pro Zeile zeigt. */
.ptm-arc-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ptm-arc-avatar { width: 20px; height: 20px; border-radius: 4px; flex: none; object-fit: cover; background: #dde3e8; }
span.ptm-arc-avatar { background: linear-gradient(135deg,#4a6076,#2c3e50); }
/* Name bekommt Ellipsis statt die Zelle/Zeile in die Breite zu treiben (gehoert zum
table-layout:fixed-Fix oben) - team-chip bleibt fest 42px (flex:none, siehe dyne.css). */
.ptm-arc-cell .ptm-namelink { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ptm-arc-cell .team-chip { flex: none; }
@media (max-width: 900px) {
.ptm-winners-grid { grid-template-columns: 1fr; }
/* Die vw-clamp-Groessen in .ptm-wc-stats sind auf die feste 1360px-Desktop-Content-Breite
kalibriert (siehe Kommentar oben) - auf schmalen Handy-Viewports laufen sie an ihr Minimum
(9.5px Schrift), waehrend gleichzeitig bis zu 11 Kacheln in eine einzige, durch flex-shrink
gequetschte Zeile passen muessen. Ergebnis: Werte wie "42.7" wurden zu "42…" abgeschnitten
(Bugreport 2026-09-11 per Screenshot). Fix: auf Mobile in mehrere Zeilen umbrechen statt zu
schrumpfen, mit fester lesbarer Schriftgroesse statt vw-clamp. */
.ptm-wc-stats { flex-wrap: wrap; overflow-x: visible; gap: 6px; }
.ptm-wc-stats .st { flex: 1 1 22%; min-width: 62px; padding: 4px 3px; }
.ptm-wc-stats .st b { font-size: 12.5px; }
.ptm-wc-stats .st span { font-size: 8px; }
}