/* player_history.css — "Player Stats": value+stats grid, modal player card,
 * weekly drill-down, and within-position compare. */

/* ---- toolbar / toggles ---- */
.ph-toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; }
.ph-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-tog {
  background: var(--bg-panel); border: 1px solid var(--stroke); color: var(--text-2);
  padding: 7px 18px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.ph-tog:hover { border-color: var(--accent); color: var(--text); }
.ph-tog.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ph-years { gap: 6px; }
.ph-yr-tog { padding: 6px 12px; font-size: 13px; }
.ph-compare-toggle { margin-left: auto; }
.ph-compare-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- list head + compare bar ---- */
.ph-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ph-list-head h2 { margin: 0; }
.ph-compare-bar { display: flex; align-items: center; gap: 10px; }
.ph-cbtn {
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ph-cbtn:disabled { opacity: .45; cursor: default; }
.ph-cbtn.ghost { background: transparent; color: var(--text-2); border-color: var(--stroke); }

/* ---- shared table ---- */
.ph-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ph-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ph-table th, table.ph-table td { padding: 7px 10px; border-bottom: 1px solid var(--stroke-soft); }
table.ph-table thead th { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.ph-num { text-align: center; font-family: var(--font-mono); white-space: nowrap; }
.ph-yr { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.ph-grp-row .ph-grp {
  text-align: center; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px;
  color: var(--accent); border-bottom: 2px solid var(--stroke); background: var(--bg-input);
}
.ph-grp-row .ph-meta-h { border-bottom: 2px solid var(--stroke); }
.ph-pos-chip {
  font-family: var(--font-mono); font-size: 12px; background: var(--bg-chip);
  border: 1px solid var(--stroke); border-radius: 5px; padding: 1px 7px; color: var(--text-muted); margin-left: 6px;
}

/* ---- grid table ---- */
.ph-grid-table { min-width: 480px; }
.ph-grid-table tbody tr.ph-g-row { cursor: pointer; transition: background .12s; }
.ph-grid-table tbody tr.ph-g-row:hover { background: var(--bg-input); }
.ph-grid-table tbody tr.ph-g-row.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ph-g-name { font-weight: 600; text-align: left; }
.ph-g-rank { text-align: center; font-family: var(--font-mono); font-size: 12px; width: 34px; }
.ph-val { font-weight: 700; color: var(--accent); }
.ph-g-chk { width: 34px; text-align: center; }
.ph-g-chk input { cursor: pointer; }

/* ---- modal overlay (background fades behind the card) ---- */
body.ph-modal-open { overflow: hidden; }
.ph-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ph-modal[hidden] { display: none; }
.ph-modal-backdrop {
  position: absolute; inset: 0; background: rgba(8, 10, 14, 0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ph-modal-card {
  position: relative; z-index: 1; background: var(--bg-panel);
  border: 1px solid var(--stroke); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md, 12px); box-shadow: 0 24px 60px rgba(0,0,0,.5);
  width: min(880px, 100%); max-height: 86vh; overflow-y: auto; padding: 22px 24px;
  animation: ph-pop .14s ease-out;
}
@keyframes ph-pop { from { transform: translateY(8px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
.ph-modal-close {
  position: absolute; top: 12px; right: 12px; background: var(--bg-input); border: 1px solid var(--stroke);
  color: var(--text-2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1;
}
.ph-modal-close:hover { color: var(--text); border-color: var(--accent); }

/* ---- card head ---- */
.ph-card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 24px 14px 0; }
.ph-card-head h2 { margin: 0; }
.ph-card-val { font-family: var(--font-mono); color: var(--accent); font-weight: 700; margin-left: 8px; }

/* ---- career table inside card ---- */
.ph-career-table { min-width: 460px; }
.ph-season.drill { cursor: pointer; }
.ph-season.drill:hover { background: var(--bg-input); }
.ph-season.open { background: var(--bg-input); }
.ph-caret { display: inline-block; width: 1em; color: var(--accent); font-size: 11px; }

/* ---- weekly expansion ---- */
.ph-week-exp > td { padding: 0; background: var(--bg-base, var(--bg-input)); }
.ph-week-cell { padding: 4px 0 10px 0 !important; }
.ph-week-table { min-width: 460px; font-size: 12px; background: transparent; }
.ph-week-table thead th { color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--stroke); }
.ph-week-table td { border-bottom: 1px solid var(--stroke-soft); }
.ph-wk { font-family: var(--font-mono); color: var(--text-2); font-weight: 600; }
.ph-opp { font-family: var(--font-mono); color: var(--text-muted); }
.ph-pts { font-weight: 700; color: var(--accent); }
.ph-week-empty { padding: 12px; color: var(--text-muted); font-size: 13px; }
.ph-week-load { margin: 10px; }

/* ---- compare table ---- */
.ph-cmp-table { min-width: 360px; }
.ph-cmp-table thead th { text-align: center; }
.ph-cmp-table thead th:first-child { text-align: left; }
.ph-cmp-stat { text-align: left; color: var(--text-2); font-weight: 600; white-space: nowrap; }

/* --- compare: gold marks the player who edges out (the one place the gold accent lives) --- */
.ph-cmp-table .ph-best {
  color: var(--ph-qual); font-weight: 700;
  background: color-mix(in srgb, var(--ph-qual) 14%, transparent); border-radius: 5px;
  box-shadow: inset 2px 0 0 var(--ph-qual);
}

/* --- card legibility: vertical dividers between stat groups + zebra rows --- */
.ph-career-table .ph-grp-start, .ph-week-table .ph-grp-start { border-left: 1px solid var(--stroke); }
.ph-career-table tbody tr.ph-alt, .ph-week-table tbody tr.ph-alt { background: rgba(255,255,255,.028); }
.ph-career-table tbody tr.ph-season:hover { background: var(--bg-input); }
.ph-tm { font-family: var(--font-mono); color: var(--text-muted); }
.ph-g  { color: var(--text-muted); }
.ph-week-table .ph-opp { color: var(--text-2); font-weight: 600; }

/* ===== crisp color system: neutral scaffolding · blue value spine · gold = compare edge ===== */
:root { --ph-qual: #E2B65A; }            /* gold — reserved for the compare winner */

/* headers: quiet uppercase scaffolding that recedes (not the blue PASSING/RUSHING row) */
table.ph-table thead th:not(.ph-grp) {
  color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
}
.ph-grp-row .ph-grp { color: var(--accent); }      /* section labels stay blue */
/* names + season year read as primary white; teams/opp/wk/G stay muted via their own rules */
.ph-g-name { color: var(--text); }
.ph-yr { color: var(--text); }
.ph-cmp-table thead th { color: var(--text); font-weight: 700; }  /* compared player names, primary */

/* ===== grid: value-bar spine + right-aligned numeric columns + zebra ===== */
.ph-grid-table .ph-num, .ph-grid-table thead th.ph-num { text-align: right; padding-right: 18px; }
.ph-val-h { text-align: left; white-space: nowrap; }
.ph-val { position: relative; text-align: left; min-width: 124px; }
.ph-val-bar {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 64%;
  background: color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 3px; z-index: 0;
}
.ph-val-n {
  position: relative; z-index: 1; font-family: var(--font-mono);
  color: var(--accent); font-weight: 700; padding-left: 9px;
}
.ph-grid-table tbody tr.ph-g-row.ph-alt { background: rgba(255, 255, 255, .022); }
.ph-grid-table tbody tr.ph-g-row.ph-alt:hover { background: var(--bg-input); }