/* Button variants */
.rs-btn.rs-btn--white {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--border);
  border-radius: 6px;      /* matches your file button */
  box-shadow: none;
}
.rs-btn.rs-btn--white:hover,
.rs-btn.rs-btn--white:focus {
  background: #fff;
  border-color: var(--grey-400);
}

/* Basic inputs */
.rs-field { display:flex; flex-direction:column; gap:6px; }
.rs-label { font-weight:600; font-size: var(--fs-12); color: var(--color-muted); }
.rs-select, .rs-input {
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:white;
}
.rs-select:focus, .rs-input:focus { outline: var(--focus-ring); }
/* Filter bar selects — compact single line, white background, smaller font */
/* Base look shared by all selects */
#filterBar .rs-select {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
}

/* Single-select (dropdown) */
#filterBar .rs-select:not([multiple]) {
  height: 32px;
  padding: 4px 10px;           /* vertical centering */
  line-height: 1.2;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
}

/* Multi-selects: fixed two-row height in ALL states */
#filterBar .rs-select[multiple]{
  /* ~2 rows tall; tweak if your row height differs */
  --filter-multi-h: 56px;

  height: var(--filter-multi-h);
  min-height: var(--filter-multi-h);
  max-height: var(--filter-multi-h);

  overflow-y: auto;
  padding: 4px 8px;
  line-height: 1.2;
  -webkit-appearance: listbox;
  -moz-appearance: listbox;
  appearance: listbox;
}

/* Ensure no expansion on interaction */
#filterBar .rs-select[multiple]:hover,
#filterBar .rs-select[multiple]:focus,
#filterBar .rs-select[multiple]:focus-within{
  height: var(--filter-multi-h);
  min-height: var(--filter-multi-h);
  max-height: var(--filter-multi-h);
  box-shadow: none; /* keep if you don't want a glow on focus */
}


/* Focus ring */
#filterBar .rs-select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

/* Filter Bar — selected state matches table dark zebra */
#filterBar {
  --filter-selected-bg: rgba(0,0,0,0.10); /* same as table dark zebra */
}

/* Multi-select options */
#filterBar select[multiple] option:checked {
  background: var(--filter-selected-bg);
  color: inherit;          /* keep your current text color */
}

/* Regular selects that show highlighted chosen option in open list (browser-dependent) */
#filterBar select option:checked {
  background: var(--filter-selected-bg);
}




/* Pills for state badges if needed */
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:2px solid transparent; font-weight:600; }
.pill--es { background:var(--es-bg); border-color:var(--es-border); }
.pill--pp { background:var(--pp-bg); border-color:var(--pp-border); }
.pill--pk { background:var(--pk-bg); border-color:var(--pk-border); }
.pill--ps { background:var(--ps-bg); border-color:var(--ps-border); }

/* Buttons */
.rs-btn { padding:8px 12px; border-radius:10px; border:1px solid var(--color-primary); background:var(--color-primary); color:white; font-weight:700; cursor:pointer; }
.rs-btn--outline { background:transparent; color:var(--color-primary); }
.rs-btn:focus { outline: var(--focus-ring); }

/* ===============================
   Admin → DB Location (panel-specific)
   =============================== */
#panel-admin-db {
  --db-top-gap: 6px; /* match Import/Export */
}
#panel-admin-db > :first-child {
  margin-top: var(--db-top-gap) !important; /* ensure it beats any heading resets */
}


/* ===============================
   Admin → Import (panel-specific)
   =============================== */

/* Admin → Import: space below tab-strip divider */
#panel-admin-import {
  --import-top-gap: 6px; /* tweak to taste */
}
#panel-admin-import > *:first-child {
  margin-top: var(--import-top-gap);
}

/* Layout helpers (panel-only) */
#panel-admin-import .mb-s { margin-bottom: 8px; }
#panel-admin-import .mb-l { margin-bottom: 16px; }
#panel-admin-import .mt-m { margin-top: 12px; }

/* File input: stretch so long filenames are visible */
#panel-admin-import input[type="file"].rs-file {
  width: 100%;
  max-width: 720px;                 /* adjust to taste */
  font-family: var(--font-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  font-weight: 600;                 /* consistent with UI labels */
}

/* “Choose File” button (native + WebKit fallback) */
#panel-admin-import input[type="file"]::file-selector-button,
#panel-admin-import input[type="file"]::-webkit-file-upload-button {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  margin-right: 8px;
  font-family: var(--font-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}

/* Optional: slightly larger hit-area (kept neutral) */
#panel-admin-import input[type="file"].rs-file::file-selector-button,
#panel-admin-import input[type="file"].rs-file::-webkit-file-upload-button {
  padding: 0.5rem 0.75rem;
}

/* “Clear” action button — match file button (white bg) */
#panel-admin-import .btn-clear,
#panel-admin-import .import-clear,
#panel-admin-import button[data-action="clear"] {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}

/* Keep both buttons white on hover/focus */
#panel-admin-import input[type="file"]::file-selector-button:hover,
#panel-admin-import input[type="file"]::-webkit-file-upload-button:hover,
#panel-admin-import .btn-clear:hover,
#panel-admin-import .import-clear:hover,
#panel-admin-import button[data-action="clear"]:hover {
  background: #fff;
  border-color: var(--grey-400);
}

/* Status/log output: readable, padded, never overflows layout */
#panel-admin-import .import-log,
#panel-admin-import .import-status,
#panel-admin-import .upload-result,
#panel-admin-import pre,
#panel-admin-import code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  padding: 8px 10px;
  margin: 6px 0;
  background: #fff;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Panel buttons (general) inherit UI font/weight */
#panel-admin-import .btn,
#panel-admin-import button,
#panel-admin-import input[type="submit"],
#panel-admin-import input[type="button"] {
  font-family: var(--font-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  font-weight: 600;
}

/* ===============================
   Admin → Export (panel-specific)
   =============================== */
#panel-admin-export {
  --export-top-gap: 6px; /* tweak 24–36px to taste */
}
#panel-admin-export > *:first-child {
  margin-top: var(--export-top-gap);
}



/* ================================
   Game Stats table (sticky + sized)
   ================================ */

/* Scroll container: only the table body scrolls */
.gs-table-wrap {
  max-height: none;
  max-width: 100%;
  min-width: 0;

  overflow-x: auto;              /* contain wide tables HERE */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;

  position: relative;
}

/* Game → Stats: enable vertical scrolling so sticky header rows can “freeze panes” */
#panel-game-stats .gs-table-wrap{
  overflow-y: auto; /* enables internal vertical scroll */
  max-height: var(--gs-scroll-max, calc(100vh - 240px));
  overscroll-behavior: contain;
}


/* Base table look — use separate borders for reliable sticky headers */
.rs-table.gs-table {
  width: 100%;
  border-collapse: separate;  /* (vs collapse) prevents sticky width bugs */
  border-spacing: 0;          /* keep lines tight like collapse */
  background: #fff;
  table-layout: fixed;        /* stable column widths for sticky */
  min-width: max-content;
}

/* ---- Column widths (match <colgroup>) ---- */
.rs-table.gs-table col.col-date { width: 8ch; }  /* Date */
.rs-table.gs-table col.col-opp  { width: 16ch; }  /* Opp. */
.rs-table.gs-table col.col-num  { width: 6ch;  }  /* numeric columns */

/* Additional col types (opt-in by markup) */
.rs-table.gs-table col.col-wlt  { width: 5ch;  }  /* W/L/T pills */
.rs-table.gs-table col.col-stat { width: 4.6ch; } /* GF+ numeric columns (tight) */

/* Game → Stats: denser table to fit viewport (no header ellipsis, no wrapping) */
#panel-game-stats .rs-table.gs-table thead th,
#panel-game-stats .rs-table.gs-table tbody td {
  padding: 6px 6px;
  font-size: 11.5px;
}

/* Make separator columns layout-neutral; we’ll draw the line on the cell */
.rs-table.gs-table col.col-sep  { width: 1px; }     /* prevent subpixel width rounding */

/* Header cells (column labels) */
.rs-table.gs-table thead th {
  text-align: center;
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.rs-table.gs-table thead th.ta-left { text-align: left; }

/* Body rows: only horizontal rules */
.rs-table.gs-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  border-bottom: 0;
}

/* Keep Date & Opp. left-aligned and single-line */
.rs-table.gs-table thead th.ta-left,
.rs-table.gs-table tbody td:first-child,
.rs-table.gs-table tbody td:nth-child(2) {
  text-align: left;
  white-space: nowrap;
}

/* Game Stats: same variable-driven zebra so sticky first col (now or later) matches exactly */
.rs-table.gs-table tbody tr { --row-bg: transparent; }
.rs-table.gs-table tbody tr:nth-child(odd) { --row-bg: rgba(0,0,0,0.06); }
.rs-table.gs-table tbody tr:hover          { --row-bg: rgba(0,0,0,0.10); }

/* paint every body cell from the same row color */
.rs-table.gs-table tbody td { background: var(--row-bg); }


/* If/when first column is sticky, ensure it uses the same shade */
.rs-table.gs-table tbody td:first-child {
  background: var(--row-bg);
}

/* Slim vertical separators where requested */
.rs-table.gs-table th.col-sep,
.rs-table.gs-table td.col-sep {
  width: 1px;                         /* matches the col width */
  min-width: 1px;                     /* belt-and-suspenders on some engines */
  padding: 0;
  border: 0;                          /* reset */
  border-right: 1px solid var(--border); /* draw the line crisply */
  background: transparent;            /* avoid double paint */
}

/* --- Sticky rows (anchor to top of the scroll area) --- */

/* Totals strip (first header row) */
.rs-table.gs-table thead tr.gs-totals th {
  position: static;
  top: auto;
  z-index: auto;  
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 3px double var(--border);
  height: var(--totals-h);
}

/* Column header row (second header row) */
.rs-table.gs-table thead tr:not(.gs-totals) th {
  position: static;
  top: auto;
  z-index: auto;  background: #fff;
  border-bottom: 2px solid var(--border);
}

/* Game → Stats: “freeze panes” — keep totals + column header fixed while tbody scrolls underneath */
#panel-game-stats .rs-table.gs-table thead tr.gs-totals th{
  position: sticky;
  top: 0;
  z-index: 5;
}

#panel-game-stats .rs-table.gs-table thead tr:not(.gs-totals) th{
  position: sticky;
  top: var(--totals-h); /* sits directly under totals strip */
  z-index: 4;
}



/* ================================
   Player Stats table (sticky + sized)
   ================================ */

/* =============== Player → Stats (compact, crisp) =============== */
.player-stats-table {
  /* theme vars */
  --ps-fs: 12.5px;
  --ps-py: 4px;
  --ps-px: 6px;
  --ps-border: var(--border, #e3e3e3);
  --ps-bg: #fff;                         /* table + header row stay white */
  --ps-total-bg: var(--panel, #f7f7f8);  /* ONLY totals row uses this grey */
  --ps-zebra: rgba(0,0,0,0.025);
  --ps-hover: rgba(0,0,0,0.045);

  --ps-totals-height: 28px;
  --ps-scroll-max: calc(100vh - 240px);
}

/* horizontal scroll on narrow screens */
.player-stats-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}

/* base table */
.player-stats-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  font-size: var(--ps-fs);
  background: var(--ps-bg);
  min-width: max-content;
}

/* header + cell spacing */
.player-stats-table th,
.player-stats-table td {
  padding: var(--ps-py) var(--ps-px);
  white-space: nowrap;
  border-bottom: 1px solid var(--ps-border);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: center; /* ← default everything centered */
}

/* Date + Opp left-justified */
.player-stats-table th:nth-child(1),
.player-stats-table td:nth-child(1),
.player-stats-table th:nth-child(2),
.player-stats-table td:nth-child(2) { text-align: left; }

/* slightly tighter numeric columns (except first two text cols and separators) */
.player-stats-table td:not(:nth-child(-n+2)):not(.vsep),
.player-stats-table th:not(:nth-child(-n+2)):not(.vsep) {
  padding-left: calc(var(--ps-px) - 1px);
  padding-right: calc(var(--ps-px) - 1px);
}

/* Player → Stats (Skaters): reclaim horizontal real estate by squeezing specific blocks
   (no header ellipsis, no wrapping; we only reduce padding). */
#panel-player-stats .player-stats-table[data-ps-kind="skater"] thead th:nth-child(n+13):nth-child(-n+15),
#panel-player-stats .player-stats-table[data-ps-kind="skater"] tbody td:nth-child(n+13):nth-child(-n+15) {
  /* PIM, S, S% */
  padding-left: 2px;
  padding-right: 2px;
}

/* Player → Stats (Skaters): squeeze EVG..ENG columns (no wrapping, no ellipsis) */
#panel-player-stats .player-stats-table[data-player-table="skaters"] table thead th:nth-child(n+17):nth-child(-n+25),
#panel-player-stats .player-stats-table[data-player-table="skaters"] table tbody td:nth-child(n+17):nth-child(-n+25) {
  padding-left: 2px;
  padding-right: 2px;
}

#panel-player-stats .player-stats-table[data-ps-kind="skater"] thead th:nth-child(n+27):nth-child(-n+33),
#panel-player-stats .player-stats-table[data-ps-kind="skater"] tbody td:nth-child(n+27):nth-child(-n+33) {
  /* TOI, OZ%, NZ%, DZ%, #Shifts, Avg Shift, Max Shift */
  padding-left: 2px;
  padding-right: 2px;
}



/* simple, straight vertical separator cell */
.player-stats-table .vsep {
  width: 0;
  min-width: 0;
  padding: 0;
  border-left: 1px solid var(--ps-border);
  border-right: none;
}

/* sticky baseline (applies to any thead th unless overridden below) */
.player-stats-table thead th {
  position: static;
  top: auto;
  z-index: auto;  
  background: var(--ps-bg);
}

/* ===== Sticky rows: Totals + Header ===== */

/* Totals row: GREY ONLY HERE (single top line + double bottom line) */
.player-stats-table thead .totals-row th {
  position: static;
  top: auto;
  z-index: auto;
  background: var(--ps-total-bg) !important;
  border-top: 1px solid var(--ps-border);
  border-bottom: 3px double var(--ps-border);
  font-weight: 600;
}

/* Column header row: WHITE under the totals */
.player-stats-table thead .headers-row th {
  position: static;
  top: auto;
  z-index: auto;
  background: var(--ps-bg) !important;
  border-bottom: 1px solid var(--ps-border);
}

/* Player Stats: drive row color via a variable so sticky first col matches exactly */
.player-stats-table tbody tr { --row-bg: transparent; }
.player-stats-table tbody tr:nth-child(odd)  { --row-bg: rgba(0,0,0,0.06); }
.player-stats-table tbody tr:hover           { --row-bg: rgba(0,0,0,0.10); }

/* paint every body cell from the same row color */
.player-stats-table tbody td { background: var(--row-bg); border-bottom: 0; }


/* Sticky first column: paint with the same row color (not inherit) */
.player-stats-table thead th:first-child {
  position: static;
  left: auto;
  z-index: auto;
  background: var(--ps-bg);
  box-shadow: none;
}
.player-stats-table tbody td:first-child {
  position: static;
  left: auto;
  z-index: auto;
  background: var(--row-bg);   /* ← exact same shade as its row */
  box-shadow: none;
}


/* Only the table scrolls */
.player-stats-table .player-stats-scroll {
  max-height: none;
  overflow: visible;
  background: var(--ps-bg);
}

/* space between tab buttons panel and the table */
#panel-player-stats .player-stats-table,
.panel-player-stats .player-stats-table,
[data-panel="player-stats"] .player-stats-table { margin-top: 12px; }

/* small screens */
@media (max-width: 900px) {
  .player-stats-table { --ps-fs: 12px; --ps-px: 5px; }
}

/* print */
@media print {
  .player-stats-table tbody tr:nth-child(odd),
  .player-stats-table tbody tr:hover { background: transparent !important; }
  .player-stats-table th, .player-stats-table td { border-bottom: 1px solid #ccc !important; }
}

/* Lines → Stats tables: lock to fixed layout so both tables share identical widths via <colgroup> */
.player-stats-table .ls-table {
  table-layout: fixed; /* respect <colgroup> widths */
}

/* Lines → Stats: freeze header row while tbody scrolls inside .player-stats-scroll */
#panel-lines-stats .ls-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ps-bg);
  border-bottom: 1px solid var(--ps-border);
}

/* Base CSS forces the first header cell to position:static; override for Lines */
#panel-lines-stats .ls-table thead th:first-child {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ps-bg);
}

/* Keep the separator header cells painted too */
#panel-lines-stats .ls-table thead th.vsep {
  background: var(--ps-bg);
}


/* Team → Trends: remove the empty top spacer but keep white table background */
.player-stats-table.team-trends-table {
  --ps-bg: #fff;            /* white table background */
  --ps-totals-height: 0px;  /* kill any reserved space for totals */
}

.player-stats-table.team-trends-table .player-stats-scroll {
  padding-top: 0 !important;
}

/* Lines → Trends (combo optimizer) */
.player-stats-table.lines-combo-trends-table {
  --ps-bg: #fff;
}
.player-stats-table.lines-combo-trends-table .ls-table {
  table-layout: fixed; /* controlled by <colgroup> */
}
.player-stats-table.lines-combo-trends-table th,
.player-stats-table.lines-combo-trends-table td {
  font-size: 12px;
  padding: 3px 4px;
  line-height: 1.15;
  white-space: nowrap;
}
.player-stats-table.lines-combo-trends-table td.lct-pick {
  padding: 2px 3px;
  overflow: hidden; /* prevent select from spilling into next cell */
}
.player-stats-table.lines-combo-trends-table .rs-mini-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 2px 4px;
  height: 26px;
}
.player-stats-table.lines-combo-trends-table td.lct-stat {
  text-align: center;
}
.player-stats-table.lines-combo-trends-table td.lct-stat.is-loading {
  opacity: 0.7;
}
.player-stats-table.lines-combo-trends-table td.lct-rownum {
  font-weight: 600;
  text-align: center;
}

/* Lines → Trends: visually dim low-sample rows (very little shared TOI) */
.player-stats-table.lines-combo-trends-table tr.lct-lowtoi td.lct-stat {
  opacity: 0.45;
}

/* Lines → Trends: sticky header + sticky left "inputs" area for easier horizontal comparison */
#panel-lines-trends .ls-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--ps-bg);
  font-size: 12px;
  letter-spacing: 0.01em;
}

#panel-lines-trends .ls-table thead th.vsep {
  background: var(--ps-bg);
}

/* Lines → Trends: reduce the visual "gap" immediately after vertical separators */
#panel-lines-trends .ls-table td.vsep + td,
#panel-lines-trends .ls-table th.vsep + th {
  padding-left: 2px;
}

/* Lines → Trends: Highest GF/GA Shares (aligned report table) */
#lines-trends-root #lines-trends-highshares .lt-highshares {
  padding: 10px 12px 12px;
}

#lines-trends-root #lines-trends-highshares .lt-hs-wrap {
  overflow-x: auto;
}

#lines-trends-root #lines-trends-highshares .lt-hs-master {
  width: 100%;
  border-collapse: collapse;
}

#lines-trends-root #lines-trends-highshares .lt-hs-master th,
#lines-trends-root #lines-trends-highshares .lt-hs-master td {
  border: 1px solid rgba(255,255,255,0.10);
  padding: 6px 8px;
  font-size: 12px;
  vertical-align: top;
}

#lines-trends-root #lines-trends-highshares .lt-hs-master thead th {
  background: rgba(255,255,255,0.05);
  font-weight: 700;
  letter-spacing: 0.01em;
}

#lines-trends-root #lines-trends-highshares .lt-hs-master thead tr.lt-hs-super th {
  font-size: 13px;
}


/* right-align numeric headers */
#lines-trends-root #lines-trends-highshares .lt-hs-master thead th.lt-hs-th-num {
  text-align: right;
}
/* group divider rows (2/3/4/5-player) */
#lines-trends-root #lines-trends-highshares .lt-hs-master tr.lt-hs-group td {
  /* Force a white band for section headers (card background is grey) */
  background: #fff;
  color: #222;
  font-weight: 800;
  opacity: 1;
  border-top: 2px solid rgba(0,0,0,0.10);
  border-bottom: 2px solid rgba(0,0,0,0.10);
}

/* subtle zebra for readability (excluding group rows which have their own bg) */
#lines-trends-root #lines-trends-highshares .lt-hs-master tbody tr:not(.lt-hs-group):nth-child(even) {
  background: rgba(255,255,255,0.02);
}

/* split between left and right halves */
#lines-trends-root #lines-trends-highshares .lt-hs-master .lt-hs-split {
  border-left: 2px solid rgba(255,255,255,0.18) !important;
}

/* col sizing */
#lines-trends-root #lines-trends-highshares .lt-hs-col-combo {
  width: 215px;
}
#lines-trends-root #lines-trends-highshares .lt-hs-col-num {
  width: 54px;
}

/* gap cols between Top GF and Top GA halves */
#lines-trends-root #lines-trends-highshares .lt-hs-col-gap {
  width: 18px;
}
#lines-trends-root #lines-trends-highshares .lt-hs-gap {
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  padding: 0 !important;
  border: none !important;
  background: transparent;
}


/* combo cell */
#lines-trends-root #lines-trends-highshares .lt-hs-td-combo {
  white-space: normal;
}
#lines-trends-root #lines-trends-highshares .lt-hs-combo-name {
  font-weight: 600;
}
#lines-trends-root #lines-trends-highshares .lt-hs-combo-sub {
  opacity: 0.65;
  font-size: 11px;
  margin-top: 2px;
}

/* numeric alignment */
#lines-trends-root #lines-trends-highshares .lt-hs-td-num {
  text-align: right;
  white-space: nowrap;
}

/* dim low-sample rows */
#lines-trends-root #lines-trends-highshares .lt-hs-master tr.lct-lowtoi td {
  opacity: 0.55;
}

/* Sticky left columns: # + 5 picker columns */
#panel-lines-trends .ls-table th:nth-child(1),
#panel-lines-trends .ls-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--row-bg, var(--ps-bg));
  box-shadow: none; /* separator column already provides the divider */
}

#panel-lines-trends .ls-table thead th:nth-child(1) {
  z-index: 6;
  background: var(--ps-bg);
}

#panel-lines-trends .ls-table th:nth-child(2),
#panel-lines-trends .ls-table td:nth-child(2) {
  position: sticky;
  left: 30px;
  z-index: 3;
  background: var(--row-bg, var(--ps-bg));
}

#panel-lines-trends .ls-table thead th:nth-child(2) {
  z-index: 6;
  background: var(--ps-bg);
}

#panel-lines-trends .ls-table th:nth-child(3),
#panel-lines-trends .ls-table td:nth-child(3) {
  position: sticky;
  left: 100px;
  z-index: 3;
  background: var(--row-bg, var(--ps-bg));
}

#panel-lines-trends .ls-table thead th:nth-child(3) {
  z-index: 6;
  background: var(--ps-bg);
}

#panel-lines-trends .ls-table th:nth-child(4),
#panel-lines-trends .ls-table td:nth-child(4) {
  position: sticky;
  left: 170px;
  z-index: 3;
  background: var(--row-bg, var(--ps-bg));
}

#panel-lines-trends .ls-table thead th:nth-child(4) {
  z-index: 6;
  background: var(--ps-bg);
}

#panel-lines-trends .ls-table th:nth-child(5),
#panel-lines-trends .ls-table td:nth-child(5) {
  position: sticky;
  left: 240px;
  z-index: 3;
  background: var(--row-bg, var(--ps-bg));
}

#panel-lines-trends .ls-table thead th:nth-child(5) {
  z-index: 6;
  background: var(--ps-bg);
}

#panel-lines-trends .ls-table th:nth-child(6),
#panel-lines-trends .ls-table td:nth-child(6) {
  position: sticky;
  left: 310px;
  z-index: 3;
  background: var(--row-bg, var(--ps-bg));
}

#panel-lines-trends .ls-table thead th:nth-child(6) {
  z-index: 6;
  background: var(--ps-bg);
}

/* Subtle divider after the last picker column */
#panel-lines-trends .ls-table th:nth-child(6),
#panel-lines-trends .ls-table td:nth-child(6) {
  box-shadow: none; /* separator column already provides the divider */
}

/* Team → Trends (and any Player Stats table): “best” cell shading (same palette as Team Stats) */
.player-stats-table tbody td.gs-cell-best {
  /* override zebra row background */
  background: var(--gs-green, var(--color-success, #82ECB7)) !important;
  color: var(--gs-header-fg, var(--color-text, #111827));
  font-weight: 600; /* optional; remove if you want pure shading only */
}

/* Tone variants (matches the tokens you already have in :root) */
.player-stats-table tbody td.gs-cell-best--green  { background: var(--gs-green,  #82ECB7) !important; }
.player-stats-table tbody td.gs-cell-best--red    { background: var(--gs-red,    #ECAf87) !important; }
.player-stats-table tbody td.gs-cell-best--blue   { background: var(--gs-blue,   #B6D9F8) !important; }
.player-stats-table tbody td.gs-cell-best--yellow { background: var(--gs-yellow, #ECE688) !important; }
.player-stats-table tbody td.gs-cell-best--purple { background: var(--gs-purple, #C09EEE) !important; }

/* If the first (sticky) column ever gets highlighted, ensure it wins too */
.player-stats-table tbody td:first-child.gs-cell-best,
.player-stats-table tbody td:first-child.gs-cell-best--green,
.player-stats-table tbody td:first-child.gs-cell-best--red,
.player-stats-table tbody td:first-child.gs-cell-best--blue,
.player-stats-table tbody td:first-child.gs-cell-best--yellow,
.player-stats-table tbody td:first-child.gs-cell-best--purple {
  background: inherit !important; /* will be overridden by the specific tone class above */
}

/* Team → Trends: make best-cell shading translucent so zebra striping still reads across rows */
.player-stats-table.team-trends-table tbody td.gs-cell-best--green  {
  background: var(--gs-green,  #82ECB7) !important; /* fallback */
  background: color-mix(in srgb, var(--gs-green,  #82ECB7) 65%, var(--row-bg) 35%) !important;
}
.player-stats-table.team-trends-table tbody td.gs-cell-best--red    {
  background: var(--gs-red,    #ECAf87) !important; /* fallback */
  background: color-mix(in srgb, var(--gs-red,    #ECAf87) 65%, var(--row-bg) 35%) !important;
}
.player-stats-table.team-trends-table tbody td.gs-cell-best--blue   {
  background: var(--gs-blue,   #B6D9F8) !important; /* fallback */
  background: color-mix(in srgb, var(--gs-blue,   #B6D9F8) 65%, var(--row-bg) 35%) !important;
}
.player-stats-table.team-trends-table tbody td.gs-cell-best--yellow {
  background: var(--gs-yellow, #ECE688) !important; /* fallback */
  background: color-mix(in srgb, var(--gs-yellow, #ECE688) 65%, var(--row-bg) 35%) !important;
}

/* Lines → Trends (Line Optimizer): same best-cell palette, mixed with zebra row bg */
.player-stats-table.lines-combo-trends-table tbody td.gs-cell-best--green {
  background: var(--gs-green,  #82ECB7) !important; /* fallback */
  background: color-mix(in srgb, var(--gs-green,  #82ECB7) 65%, var(--row-bg) 35%) !important;
  font-weight: 600;
}
.player-stats-table.lines-combo-trends-table tbody td.gs-cell-best--red {
  background: var(--gs-red,    #ECAf87) !important; /* fallback */
  background: color-mix(in srgb, var(--gs-red,    #ECAf87) 65%, var(--row-bg) 35%) !important;
  font-weight: 600;
}

/* Lines → Trends: softer optimizer highlights (blue = best, sand = worst) */
.player-stats-table.lines-combo-trends-table tbody td.lct-best {
  background: #cfe6ff !important; /* fallback */
  background: color-mix(in srgb, #BBDEFD 65%, var(--row-bg) 35%) !important;
  font-weight: 600;
}
.player-stats-table.lines-combo-trends-table tbody td.lct-worst {
  /* softer red that still contrasts well against zebra greys */
  background: #ffd6d6 !important;
  background: color-mix(in srgb, #E6A6A5 65%, var(--row-bg) 35%) !important;
  font-weight: 600;
}
.player-stats-table.team-trends-table tbody td.gs-cell-best--purple {
  background: var(--gs-purple, #C09EEE) !important; /* fallback */
  background: color-mix(in srgb, var(--gs-purple, #C09EEE) 65%, var(--row-bg) 35%) !important;
}







/* Lines → Stats: reuse optimizer highlights (blue = best, soft red = worst) */
.player-stats-table.lines-stats-table tbody td.lct-best {
  background: #cfe6ff !important; /* fallback */
  background: color-mix(in srgb, #BBDEFD 65%, var(--row-bg) 35%) !important;
  font-weight: 600;
}
.player-stats-table.lines-stats-table tbody td.lct-worst {
  background: #ffd6d6 !important;
  background: color-mix(in srgb, #E6A6A5 65%, var(--row-bg) 35%) !important;
  font-weight: 600;
}
/* ===== Team → Stats (ONLY) ===== */

/* Panel: small gap below tab underline */
#panel-team-stats {
  padding-top: 10px; /* adjust 6–12px to taste */
}

/* Section label (Skaters / Goalies) */
#panel-team-stats .table-title {
  background: transparent;
  color: inherit;
  font-weight: 700;
  line-height: 1.1;
  padding: 0;
  margin: 0 0 4px;   /* tiny gap before the table */
  border: 0;
}

/* Space between Skaters table and Goalies label */
#panel-team-stats .player-stats-table + .player-stats-table .table-title {
  margin-top: 10px; /* tweak 8–14px if desired */
}

/* Make the scroller transparent; put white on the table cells instead */
#panel-team-stats .player-stats-table .player-stats-scroll {
  background: transparent !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  border: 0 !important;
}

/* Table: no top spacing; normal (separate) collapsing */
#panel-team-stats .player-stats-table .player-stats-scroll > table {
  margin-top: 0 !important;
  border-spacing: 0 !important;       /* no top gap from spacing */
  border-collapse: separate !important;
}

/* Cells: white header/body so header is first white pixel */
#panel-team-stats .player-stats-table thead th { background: #fff; }

/* Compact header height */
#panel-team-stats .player-stats-table .headers-row th {
  padding-top: 6px; /* set to 4px/0 for tighter */
}

/* No totals row in Team → Stats, so don’t offset headers */
#panel-team-stats .player-stats-table { --ps-totals-height: 0px; }
#panel-team-stats .player-stats-table thead .headers-row th {
  top: 0 !important; /* override global 28px offset */
}

/* Guard against pseudo-elements adding space */
#panel-team-stats .player-stats-table .player-stats-scroll::before,
#panel-team-stats .player-stats-table .player-stats-scroll::after {
  content: none !important;
  display: none !important;
}

/* Pastel highlights for maxima (used in Team → Stats Skaters) */
.hi-max { font-weight: 600; }
.hi-g   { background: rgba(59, 130, 246, 0.15); }   /* blue: G */
.hi-pm  { background: rgba(16, 185, 129, 0.18); }   /* green: +/- and OZ% */
.hi-s   { background: rgba(250, 204, 21, 0.22); }   /* yellow: S */
.hi-pim { background: rgba(239, 68, 68, 0.18); }    /* red: PIM */
.hi-oz  { background: rgba(16, 185, 129, 0.18); }   /* green: OZ% (same as +/-) */
.hi-dz  { background: rgba(239, 68, 68, 0.18); }    /* red: DZ% (same as PIM) */

/* Team → Stats: darker custom highlights */

/* G (turquoise blue #70D3FF) */
#panel-team-stats .player-stats-table td.hi-g {
  box-shadow: inset 0 0 0 9999px rgba(112, 211, 255, 0.68);
}

/* +/- and OZ% (green #72FF8C) */
#panel-team-stats .player-stats-table td.hi-pm,
#panel-team-stats .player-stats-table td.hi-oz {
  box-shadow: inset 0 0 0 9999px rgba(114, 255, 140, 0.68);
}

/* Darker yellow for highest S (F8FF7A) */
#panel-team-stats .player-stats-table td.hi-s {
  box-shadow: inset 0 0 0 9999px rgba(235, 225, 75, 0.68);
}


/* PIM and DZ% (red #FF807D) */
#panel-team-stats .player-stats-table td.hi-pim,
#panel-team-stats .player-stats-table td.hi-dz {
  box-shadow: inset 0 0 0 9999px rgba(255, 128, 125, 0.68);
}

/* Skaters title row with inline toggle */
#panel-team-stats .table-title-with-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px; /* slightly tighter; row is a bit taller now */
}

#panel-team-stats .table-title-text {
  flex: 0 0 auto;
}

/* Per-game switch (Totals = off, Per game = on) */
#panel-team-stats .team-stats-switch,
#panel-team-trends .team-stats-switch,
#panel-lines-trends .team-stats-switch,
#panel-lines-stats .team-stats-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 2px 0;
  font-size: var(--fs-12);
  color: var(--color-muted);
  cursor: pointer;
}

#panel-team-stats .team-stats-switch-label,
#panel-team-trends .team-stats-switch-label,
#panel-lines-trends .team-stats-switch-label,
#panel-lines-stats .team-stats-switch-label {
  line-height: 1;
}

#panel-team-stats .team-stats-switch-track,
#panel-team-trends .team-stats-switch-track,
#panel-lines-trends .team-stats-switch-track,
#panel-lines-stats .team-stats-switch-track {
  position: relative;
  width: 32px;
  height: 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  transition: background-color 120ms ease-out;
}

#panel-team-stats .team-stats-switch-thumb,
#panel-team-trends .team-stats-switch-thumb,
#panel-lines-trends .team-stats-switch-thumb,
#panel-lines-stats .team-stats-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 120ms ease-out;
}

/* "On" visual (we'll toggle .is-on later in JS) */
#panel-team-stats .team-stats-switch.is-on .team-stats-switch-track,
#panel-team-trends .team-stats-switch.is-on .team-stats-switch-track,
#panel-lines-trends .team-stats-switch.is-on .team-stats-switch-track,
#panel-lines-stats .team-stats-switch.is-on .team-stats-switch-track {
  background: var(--color-primary);
}

#panel-team-stats .team-stats-switch.is-on .team-stats-switch-thumb,
#panel-team-trends .team-stats-switch.is-on .team-stats-switch-thumb,
#panel-lines-trends .team-stats-switch.is-on .team-stats-switch-thumb,
#panel-lines-stats .team-stats-switch.is-on .team-stats-switch-thumb {
  transform: translateX(16px);
}

#panel-team-stats .team-stats-switch:focus-visible,
#panel-team-trends .team-stats-switch:focus-visible,
#panel-lines-trends .team-stats-switch:focus-visible,
#panel-lines-stats .team-stats-switch:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

/* Team → Trends: right-justify per-39 switch in title row */
#panel-team-trends .team-trends-table .table-title-row{
  display:flex;
  align-items:center;
}
#panel-team-trends .team-trends-table .table-title-text{
  flex:1 1 auto;
}
#panel-team-trends .team-trends-table .table-title-actions{
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}



/* ===== Local replica status label (header, right side) ===== */
/* Give the right cluster a tiny bottom cushion for the label */
.rs-header__right {
  position: relative;
  padding-bottom: 12px;   /* creates a little space just for the label */
}

/* Place the label just under the pills (no overlap) */
.local-status {
  position: absolute;
  right: 0;
  top: calc(100% - 2px);  /* sits just below the pills row */
  bottom: auto;           /* override previous 'bottom' */
  font-size: 11px;
  line-height: 1.05;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-muted);
  pointer-events: none;   /* flip to 'auto' later when we make it clickable */
  z-index: 1;
}

/* Slightly closer on small screens */
@media (max-width: 900px) {
  .local-status {
    top: calc(100% - 4px);
    max-width: 60vw;
  }
}

/* When we add 'Retry' later */
.local-status.is-clickable { cursor: pointer; text-decoration: underline; pointer-events: auto; }

/* ===== Lines → Stats: prevent flex/grid min-width overflow on tablets ===== */
#panel-lines-stats .player-stats-table,
#panel-lines-stats .player-stats-scroll {
  min-width: 0;           /* critical: allow shrink inside flex/grid parents */
  max-width: 100%;
}

/* Lines → Stats: scrolling belongs INSIDE each table (Forwards / Defense) */
#panel-lines-stats .player-stats-table {
  overflow: visible;       /* outer wrapper should NOT scroll */
}

/* Each section gets its own scrollbars (vertical + horizontal) */
#panel-lines-stats .player-stats-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* JS sets an explicit height via clampViewport(); honor it and scroll within */
  max-height: var(--ps-scroll-max, none);

  /* gutters so content doesn’t touch the scroll indicators */
  box-sizing: border-box;
  padding-right: 16px;  /* vertical scrollbar/indicator gap */
  padding-bottom: 8px;  /* horizontal scrollbar/indicator gap */

  /* Make the gutter area match the card */
  background: #E5E9EF;
  
  /* Where supported (not iPad Safari), reserve space for scrollbars cleanly */
  scrollbar-gutter: stable both-edges;
}




/* ===== W/L/T Pills (Game Stats) ===== */
/* Smaller, tighter W/L/T pills */
.wlt-pill {
  display: inline-block;
  min-width: 1.3rem;       /* narrower pill */
  line-height: 1.3rem;     /* reduced height */
  font-size: 0.75rem;      /* smaller text */
  text-align: center;
  border-radius: 999px;
  font-weight: 500;
  color: #383333;
  user-select: none;
  vertical-align: middle;  /* aligns nicely inside table cells */
  margin: 0 1px;           /* light horizontal spacing */
}
.wlt-W { background: #baf5c0; border: 1px solid #8ce39c; }
.wlt-L { background: #f8c6c6; border: 1px solid #f29a9a; }
.wlt-T { background: #fcefa4; border: 1px solid #f7e373; }


.wlt-pill:hover {
  filter: brightness(0.95);
}



/* ================================
   Game Summary table (sticky + sized)
   ================================ */


/* Ensure filter bar is above panel content */
#filterBar { position: relative; z-index: 3; }

/* Summary panel: give breathing room below the filters */
#panel-game-summary { position: relative; z-index: 1; }
#panel-game-summary .rs-card { margin-top: var(--rs-space-3, 12px); }

/* Game → Summary single dropdown sizing */
#filterGameSingle { 
  flex: 1 1 420px;         /* grow nicely in the filterbar row */
  min-width: 360px;        /* ensure it's visibly wide */
  max-width: 640px;        /* don't blow out on huge screens */
}

#filterGameSingle .rs-select {
  width: 100%;             /* fill the field’s width */
}




/* ===== Game → Summary: 7 pills + main table (no scrollbars) ===== */

.gs-root {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr; /* pills + table */
  gap: 8px;
  overflow: hidden;             /* ensure parent never scrolls */
}

/* Pills (compact, single row, wraps only if necessary) */
.gs-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 0;
}
.gs-pilltag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rs-fill-muted, rgba(0,0,0,.06));
  border: 1px solid var(--rs-border, rgba(0,0,0,.08));
  white-space: nowrap;
  font-size: 11px;
  line-height: 16px;
}
.gs-pilltag .k { opacity: .7; font-weight: 600; }
.gs-pilltag .v { font-weight: 700; }

/* Main table container: NO scrollbars; table fits panel */
.gt-wrap {
  height: 100%;
  width: 100%;
  overflow: hidden; /* no vertical or horizontal scrollbars */
  background: #fff;
  border: 1px solid var(--rs-border, rgba(0,0,0,.12));
  border-radius: 10px;
  padding: 4px;     /* little space above & below as requested */
}

/* Table compresses as columns increase */
.gt {
  width: 100%;
  table-layout: fixed; /* key: lets it shrink columns to fit */
  border-collapse: collapse;
  font-size: 11px;
  line-height: 14px;   /* compact row height so 20 rows fit */
  color: var(--rs-ink, #111);
  background: #fff;
}

.gt th, .gt td {
  border: 1px solid var(--rs-border, rgba(0,0,0,.16));
  padding: 2px 4px;   /* small vertical padding */
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* Header cell styling */
.gt-h { font-weight: 700; }
.gt-merge { text-align: center; }
.gt-b { font-weight: 700; }
.gt-grey      { background: #e9edf4; }  /* grey for grouped header cells */
.gt-grey-lite { background: #f3f6fb; }  /* lighter grey for dynamic event headers */

/* First column can be left aligned later when we add "Players" */
.gt th:first-child, .gt td:first-child { text-align: left; }

/* Keep narrow columns tidy */
.gt th, .gt td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allow C15 to wrap (we already did earlier), others stay single-line */
.gt thead th:nth-child(15),
.gt tbody td:nth-child(15) {
  white-space: normal;
}