/* ===== gsp- = GameStats Page (siehe docs/design-system.md fuer die Tokens) =====
   Moved out of gamestats.php's inline <style> block 2026-08-11 (continuing the page-by-page
   cleanup, see css/dyne.css's own header for the project). .gmform-login-box (+ sub-rules)
   removed from here — confirmed byte-identical duplicate of what's already in css/dyne.css (the
   ~17-page-wide finding from css/trade.css's header). .gmform-msg-error/.gmform-msg-success kept
   page-local — yet ANOTHER divergent variant from the ones on trade.php/freeagents.php/
   transactions.php (this one uses a shared `border: 1px solid` + separate per-status background/
   border-color instead of white bg), reinforcing that these need a dedicated future pass, not a
   guess made in passing. */

/* !important + #content-Praefix noetig, um page_bg.php's
   "html.dyne-bg-standalone #content .gmform-msg-error/-success" zu schlagen (heller
   Text + Schlagschatten, fuer die dunkle Hero-Hintergrundgrafik gedacht) - dieselbe
   Ueberschreibung wie auf freeagents.php/trade.php/transactions.php. Ohne das
   gewinnt die spezifischere page_bg.php-Regel und die Banner zeigen hellrot/-gruenen
   Text mit Schlagschatten statt der eigenen dunklen Farbe auf dem hellen Banner. */
#content .gmform-msg-error, #content .gmform-msg-success { font-size: 13px; padding: 9px 14px; border-radius: 6px; margin: 0 0 12px; border: 1px solid; text-shadow: none !important; }
#content .gmform-msg-error { background: #fdeceb; color: #b00000 !important; border-color: #f3c6c2; }
#content .gmform-msg-success { background: #e9f9ec; color: #1a7a1a !important; border-color: #bfe8c6; }

.gsp-page { max-width: 1360px; margin: 0 auto; }
.gsp-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); margin: 0 0 4px; }
.gsp-title { font-size: 22px; font-weight: 800; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gsp-subtitle { font-size: 12.5px; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); margin: 0 0 16px; }
.gsp-h2 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; }
.gsp-count-pill { background: rgba(255,255,255,0.25); color: #ffffff; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 9px; }
.gsp-empty { font-size: 12px; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.gsp-hint { font-size: 12px; color: #666; }

/* Team-Chip (Team-/Gegner-Spalte) - gleiche Technik wie .epp-teampill/.fab-teampill:
   Team-Farbe per CSS-Custom-Property injiziert (siehe gsp_team_chip()). */
.gsp-teamchip { display: inline-block; width: 42px; box-sizing: border-box; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9px; letter-spacing: .02em; background: var(--tc-bg, #2c3e50); color: var(--tc-fg, #ffffff); }

.gsp-btn { font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 16px; border-radius: 5px; border: 1px solid #2c3e50; background: #ffffff; color: #2c3e50; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.gsp-btn.primary, .gsp-btn.active { background: #2c3e50; color: #ffffff; }
.gsp-btn.ghost { border-color: #ccd3da; color: #5c6b7a; background: transparent; }
.gsp-btn.ghost:hover { background: #eaf1f8; }
.gsp-btn.small { padding: 5px 11px; font-size: 11.5px; }
.gsp-btn.danger-text { border: none; background: none; color: #b00000; font-weight: 700; padding: 7px 4px; }
.gsp-btn:disabled, .gsp-btn.disabled { opacity: .45; cursor: not-allowed; }

.gsp-table-scroll { overflow-x: auto; border-radius: 6px; }
table.gsp-table { border-collapse: collapse; width: 100%; background: #ffffff; font-size: 12px; }
table.gsp-table thead th { background: #2c3e50; color: #ffffff; font-weight: 700; text-align: center; padding: 8px 10px; white-space: nowrap; }
table.gsp-table thead th.left, table.gsp-table td.left { text-align: left; }
table.gsp-table tbody td { padding: 7px 10px; border-bottom: 1px solid #e2e4e7; text-align: center; }
table.gsp-table tbody tr:nth-child(even) { background: #f5f6f8; }
table.gsp-table tbody tr:hover { background: #eaf1f8; }
table.gsp-table tbody tr.gsp-row-warn { background: #fff8e6; }
table.gsp-table td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.gsp-actions-cell { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.gsp-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.gsp-status.ok { color: #1a7a1a; }
.gsp-status.warn { color: #8a6a00; cursor: help; }
@media (max-width: 720px) {
	table.gsp-table.gsp-collapsible thead { display: none; }
	table.gsp-table.gsp-collapsible, table.gsp-table.gsp-collapsible tbody, table.gsp-table.gsp-collapsible tr, table.gsp-table.gsp-collapsible td { display: block; width: 100%; }
	table.gsp-table.gsp-collapsible tr { border: 1px solid #e2e4e7; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: #ffffff; }
	table.gsp-table.gsp-collapsible tbody tr:nth-child(even) { background: #ffffff; }
	table.gsp-table.gsp-collapsible td { text-align: right; padding: 4px 0; border-bottom: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
	table.gsp-table.gsp-collapsible td::before { content: attr(data-label); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8b95a1; }
	table.gsp-table.gsp-collapsible td.gsp-actions-cell { justify-content: flex-end; }
	table.gsp-table.gsp-collapsible td.gsp-actions-cell::before { display: none; }
}

.gsp-panel { background-color: #ffffff; border: 1px solid #e2e4e7; border-radius: 8px; padding: 16px 18px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(20,30,40,.06); }
.gsp-panel h3 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #2c3e50 !important; text-shadow: none !important; margin: 0 0 14px; }
.gsp-field-grid { display: grid; grid-template-columns: 150px 1fr; gap: 10px 14px; align-items: center; }
.gsp-field-grid label.gsp-flabel { font-size: 12.5px; color: #66707c; }
.gsp-field-grid .gsp-fval { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .gsp-field-grid { grid-template-columns: 1fr; } .gsp-field-grid label.gsp-flabel { margin-top: 6px; } }
/* #abbruchResultRow wird von onStatusChanged() per el.style.display 'none'/''
   umgeschaltet (siehe <script> unten, unveraendert aus der Vorgaenger-Version
   uebernommen) - "contents" als Default-Anzeige (statt "none"/leer) haelt Label+Wert
   als direkte Kinder von .gsp-field-grid, statt das 2-Spalten-Grid mit einem
   verschachtelten Block-Div zu unterbrechen. */
#abbruchResultRow { display: contents; }
.gsp-readonly-chip { background: #f5f6f8; border: 1px solid #dde1e6; padding: 4px 9px; border-radius: 5px; font-size: 12.5px; display: inline-block; }
/* stat-input-narrow bleibt unter diesem (alten) Klassennamen, da createPlayerRow() in
   <script> weiter unten Zeilen fuer admin-hinzugefuegte Spieler dynamisch mit genau
   dieser Klasse erzeugt - ein Umbenennen haette dort mit angepasst werden muessen. */
.stat-input-narrow { width: 42px !important; text-align: center; }

.gsp-paste-box { background: #f5f6f8; border: 1px solid #dde1e6; border-radius: 6px; padding: 12px 14px; margin-top: 12px; }
.gsp-paste-box textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; min-height: 60px; box-sizing: border-box; }
.gsp-paste-box .gsp-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

.gsp-avatar-cell { display: flex; align-items: center; gap: 8px; }
.gsp-avatar-cell img { width: 24px; height: 24px; flex-shrink: 0; object-fit: cover; border-radius: 50%; }

.gsp-save-bar { position: sticky; bottom: 0; background-color: #ffffff; border-top: 2px solid #2c3e50; padding: 10px 16px; margin-top: 10px; box-shadow: 0 -2px 6px rgba(0,0,0,0.15); z-index: 100; border-radius: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gsp-save-bar .gsp-btn { font-size: 14px; padding: 6px 18px; }

/* Nav-lokale Controls (Saison/Team/Admin-Modus/Regular Season-Playoffs/+Neues Spiel) -
   siehe $gsp_page_local_html: eingebettet in render_main_nav() per Standardregel.
   #gspNavLocal ist EIN Flex-Item neben dem Hamburger-Icon (siehe nav.php
   .mainnav-page-local{display:contents}) - sein Padding-Left wird per JS
   (gspSyncNavLocalPadding(), <script> ganz unten) auf die tatsaechliche Position von
   .gsp-page synchronisiert, damit die Controls linksbuendig ueber dem Inhalt beginnen
   statt am Hamburger-Icon zu kleben (User-Wunsch 2026-08-11). */
.gsp-navlocal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gsp-nav-admintoggle { color: #ffffff; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* 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). */
.gsp-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; }
.gsp-select:hover { border-color: rgba(255,255,255,.6); }
.gsp-select option { color: #1b2733; background: #fff; }
.gsp-seg { display: flex; background: #1a2733; border-radius: 20px; padding: 3px; gap: 2px; }
.gsp-seg a { font-family: inherit; font-size: 11.5px; font-weight: 600; text-decoration: none; color: rgba(255,255,255,.7); padding: 5px 14px; border-radius: 17px; }
.gsp-seg a.active { background: #2c3e50; color: #ffffff; font-weight: 700; }

.hint { font-size: 12px; color: #666; }
.pending-row select { min-width: 220px; }
#saveErrorOverlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.7);
	z-index: 1000;
	align-items: center;
	justify-content: center;
}
#saveErrorBox {
	background: #fff;
	border-radius: 8px;
	max-width: 500px;
	width: 92%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 20px 24px;
	position: relative;
	box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
#saveErrorBox h3 { color: #b00000 !important; text-shadow: none !important; margin-top: 0; }
#saveErrorBox ul { margin: 0; padding-left: 20px; }
#saveErrorBox li { color: #b00000; font-size: 13px; margin-bottom: 6px; }
#saveErrorClose {
	position: absolute;
	top: 10px; right: 14px;
	font-size: 22px;
	color: #888;
	cursor: pointer;
	background: none;
	border: none;
	line-height: 1;
}
#saveErrorClose:hover { color: #000; }