/* pp2-kit.css — reusable "pp2" component kit
   ---------------------------------------------------------------------------
   These rules are VERBATIM copies of the reusable component classes defined
   inline in templates/player_profile_v2.html's {% block page_style %}. They are
   extracted here so other pages (e.g. /offseason-intel) can consume the same
   Electric Scoreboard theme tokens (var(--pp-*) / var(--ff-*)) without
   duplicating markup.

   TECH DEBT: player_profile_v2.html intentionally keeps its own inline copy of
   these classes (identical definitions → zero regression). If you change a rule
   here, mirror it there (or, better, delete the inline copy and rely on this
   file). Only the page-agnostic components live here — the page-specific hero
   and tab classes stay inline in player_profile_v2.html.
   --------------------------------------------------------------------------- */

/* CHIP ----------------------------------------------------------- */
.pp2-chip {
    padding: 4px 12px; border-radius: 99px;
    font-size: var(--ff-text-xs); font-weight: 600; letter-spacing: 0.5px;
    background: rgba(212,175,55,0.12);
    border: 1px solid var(--pp-gold-border);
    color: var(--pp-gold);
    text-transform: uppercase;
}
.pp2-chip.team { background: rgba(0,180,180,0.12); border-color: rgba(0,180,180,0.3); color: #5feaea; }
.pp2-chip.bye  { background: rgba(255,170,0,0.12); border-color: rgba(255,170,0,0.3); color: #ffd166; }

/* GENERIC CARDS ------------------------------------------------- */
.pp2-card {
    background: var(--pp-navy-800);
    border: 1px solid var(--pp-gold-border);
    border-radius: var(--ff-radius-lg);
    padding: var(--ff-space-5);
}
.pp2-card-title {
    font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--pp-gold);
    margin: 0 0 var(--ff-space-4) 0;
}

/* COMPONENTS BAR GRID ------------------------------------------- */
.pp2-components { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ff-space-3) var(--ff-space-6); }
.pp2-comp { display: grid; grid-template-columns: 130px 1fr 50px; align-items: center; gap: var(--ff-space-3); }
.pp2-comp-label {
    font-size: var(--ff-text-xs); letter-spacing: 0.5px;
    color: var(--pp-text-secondary); text-transform: uppercase;
}
.pp2-comp-bar { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.pp2-comp-fill {
    height: 100%; background: linear-gradient(90deg, var(--pp-gold) 0%, #f4e4a1 100%);
    border-radius: 4px; transition: width 0.4s ease-out;
}
.pp2-comp-val {
    font-family: 'JetBrains Mono', monospace; font-size: var(--ff-text-sm); font-weight: 600;
    color: var(--pp-text-primary); text-align: right;
}

/* AT-A-GLANCE ROW ----------------------------------------------- */
.pp2-glance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ff-space-4); }
.pp2-glance-card {
    background: var(--pp-navy-800); border: 1px solid var(--pp-gold-border);
    border-radius: var(--ff-radius-lg); padding: var(--ff-space-4); text-align: center;
}
.pp2-glance-label {
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--pp-text-muted); margin-bottom: 6px;
}
.pp2-glance-value {
    font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 700;
    color: var(--pp-text-primary); line-height: 1;
}
.pp2-glance-value.up { color: #4ade80; }
.pp2-glance-value.down { color: #f87171; }
.pp2-glance-sub {
    font-size: var(--ff-text-xs); color: var(--pp-text-secondary);
    margin-top: 4px;
}

/* TABLE ---------------------------------------------------------- */
.pp2-table {
    width: 100%; border-collapse: collapse; font-size: var(--ff-text-sm);
}
.pp2-table th {
    text-align: left; padding: var(--ff-space-3); border-bottom: 1px solid var(--pp-gold-border);
    color: var(--pp-text-muted); font-size: 11px;
    letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
}
.pp2-table td {
    padding: var(--ff-space-3); border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--pp-text-primary);
}
.pp2-table tr:hover td { background: rgba(212,175,55,0.04); }

/* SCHEDULE TIER COLORING --------------------------------------- */
.pp2-tier-cell { display: inline-block; padding: 4px 10px; border-radius: 4px; font-weight: 700; font-size: 11px; letter-spacing: 0.5px; }
.pp2-tier-cell.t-easy { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.pp2-tier-cell.t-med  { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }
.pp2-tier-cell.t-hard { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.4); }
.pp2-tier-cell.t-bye  { background: rgba(160,160,180,0.15); color: #b0b0c0; border: 1px solid rgba(160,160,180,0.4); }

/* RESPONSIVE TABLE -> CARDS (shared mobile rail) -----------------------------
   Below 768px, a table marked class="... pp2-cards" collapses each body row
   into a stacked card of label:value rows, so wide tables stay usable on a
   phone instead of overflowing/clipping. Opt-in per table (adopt surface by
   surface). Requirement: every data <td> carries data-label="<column header>".
   Rows with class "wk-detail-row" are treated as full-width detail panels. */
@media (max-width: 768px) {
  table.pp2-cards { display: block; width: 100%; padding: 12px 12px 2px; }
  table.pp2-cards > thead {           /* visually hidden, kept for screen readers */
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  table.pp2-cards > tbody { display: block; }

  table.pp2-cards > tbody > tr:not(.wk-detail-row) {
    display: block;
    background: var(--pp-navy-700, #131a22);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 2px 12px; margin: 0 0 10px;
  }
  table.pp2-cards > tbody > tr:not(.wk-detail-row) > td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 8px 0 !important; border: 0 !important;
    text-align: right !important; white-space: normal !important; min-width: 0;
  }
  table.pp2-cards > tbody > tr:not(.wk-detail-row) > td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    color: var(--pp-text-muted, #9ca3af);
    font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  }
  table.pp2-cards > tbody > tr:not(.wk-detail-row) > td:first-child {   /* card title */
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding-bottom: 10px !important; margin-bottom: 3px;
  }

  /* expandable detail row = full-width panel, not a card, no label */
  table.pp2-cards > tbody > tr.wk-detail-row.open { display: block; }
  table.pp2-cards > tbody > tr.wk-detail-row > td { display: block; padding: 0 0 6px !important; border: 0 !important; }
  table.pp2-cards > tbody > tr.wk-detail-row > td::before { content: none; }
}

/* Responsive glance grid: stat cards stack instead of overflowing the page. */
@media (max-width: 768px) { .pp2-glance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 360px) { .pp2-glance-grid { grid-template-columns: 1fr; } }

/* Contained horizontal-scroll rail — the second responsive-table mode, for DENSE
   tables (rankings / stat grids) where collapsing to cards doesn't fit. Wrap the
   table: <div class="pp2-scroll"><table>…</table></div>. Keeps every column
   reachable via momentum scroll instead of clipping. (Record-style tables should
   prefer the pp2-cards collapse above.) */
.pp2-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sticky first column — for COMPARISON-GRID tables inside a horizontal-scroll
   shell (e.g. weekly stat lines): the row-label column stays pinned while the
   stat columns scroll, so you never lose which row you're reading. Opt-in via
   class="pp2-stickcol" on the table. The sticky cell needs an opaque background
   so scrolled content doesn't bleed through — match the table's backgrounds.
   No-op on desktop (nothing scrolls when the table fits). */
table.pp2-stickcol th:first-child,
table.pp2-stickcol td:first-child { position: sticky; left: 0; z-index: 1; }
/* Opaque bg = the theme's dark surface (--pp-surface is undefined app-wide, so
   rows sit on the page bg = --pp-navy-800). Prevents scrolled cells bleeding
   through the pinned column. */
table.pp2-stickcol thead th:first-child { background: var(--pp-navy-800, #0B0F14); z-index: 2; }
table.pp2-stickcol tbody td:first-child { background: var(--pp-navy-800, #0B0F14); }