/* mlb-pitcher-dashboard.css
 * Panel-specific styles for the MLB pitcher dashboard.
 *
 * Reuses the base shell from mlb-player-dashboard.css:
 *   .mlb-dash-root, .mlb-dash-grid, .mlb-dash-card, .mlb-dash-header,
 *   .mlb-dash-avatar, .mlb-dash-chip, .mlb-snap-* (snapshot cells),
 *   .mlb-skel-* (skeletons), .mlb-dash-empty / .mlb-dash-error,
 *   .q1-stat-card, .q1-stat-card--green / --red / --neutral.
 *
 * Scoped overrides + new selectors for pitcher-only views live here.
 */

/* Temporarily hidden cards — Splits vs Hand (Q3), Arsenal (Q4), and
   Recent Starts (Q6) are scoped out for now. The render code still
   runs (state still loads, we just don't surface the cards), so
   re-enabling is a one-line revert here. */
#mlb-pdash-q3,
#mlb-pdash-q4,
#mlb-pdash-q6 { display: none; }

/* ─────────── Q1 — Strikeouts ─────────── */

.q1p-line-row {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px 0;
}
.q1p-line-label {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em;
}
.q1p-step {
  width: 26px; height: 26px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  color: #e2e8f0; font-size: 16px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.q1p-step:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.24);
}
.q1p-line-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.32);
  color: #cffafe;
  font-weight: 700; font-size: 13px;
}
.q1p-chart-wrap {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto; min-height: 0;
}

/* Pitcher Q1 reuses the batter's `.q1-chart-wrap` / `.q1-chart-holder`
   chain. Those rules size via `flex: 1 1 auto`, which only works when
   the parent has spare vertical space to give. The pitcher card auto-
   sizes to its content (tabs + prop panel + stat cards already fill
   most of the min-height), so the chart was collapsing to 0px and the
   bars went invisible. Pin a concrete minimum height on the holder so
   the canvas always has room to draw. */
#mlb-pdash-q1 .q1-chart-holder {
  min-height: 200px;
}

/* ─────────── Q2 — Today's Matchup ───────────
   The Stats / Pitch Mix / Weather modes reuse the batter dashboard's
   q2-* classes for sections, tables, mode pills, and color rules. The
   only pitcher-specific surface is the batter-selector pill row. */

/* Batter-selector card — the section header doubles as a trigger.
   Mirrors the "Opposing Pitcher" card style elsewhere in the app:
   small uppercase label on top, headshot + player name + hand pill
   below, caret on the right. Clicking opens the absolute-positioned
   dropdown listing every batter in the opposing lineup. */
.q2-section-header { position: relative; }
.q2p-batter-section-header {
  /* Override the default section-header layout so the card chip can
     sit on its own row without inheriting the inline-row treatment. */
  display: block;
  margin-bottom: 12px;
}

/* Player card chip — shared by every avatar+name+hand-pill surface
   in Q2 across both dashboards. Display variant (no clickable class)
   renders plain — just an avatar inline with the name and pill, no
   chip box — since the surrounding section already provides framing.
   The clickable variant (the pitcher Q2 batter dropdown trigger) is
   the only one that needs button affordances, so the chip box +
   chevron + hover/focus styling is layered on via that modifier. */
.q2-player-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.q2-player-card-clickable {
  all: unset;
  /* All-unset wipes display+border+padding+bg from the base rule;
     re-apply the visual treatment here so the rule order is robust. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.q2-player-card-clickable:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.20);
}
.q2-player-card-clickable:focus-visible {
  outline: 2px solid rgba(0,211,189,0.5);
  outline-offset: 2px;
}
.q2-section-header.is-open .q2-player-card-clickable {
  background: rgba(0,211,189,0.08);
  border-color: rgba(0,211,189,0.35);
}

.q2-player-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}
.q2-player-card-avatar-fallback { background: rgba(255,255,255,0.06); }

.q2-player-card-name {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.1;
}

/* Hand pill palette — L = blue, R = red, S = purple. Shared rule
   covers the trigger card AND the dropdown menu items so both pick
   up the same colors via data-hand. */
.q2-player-card-hand,
.q2p-batter-menu-hand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.q2-player-card-hand[data-hand="L"],
.q2p-batter-menu-hand[data-hand="L"] {
  background: rgba(96, 165, 250, .16);
  color: #93c5fd;
}
.q2-player-card-hand[data-hand="R"],
.q2p-batter-menu-hand[data-hand="R"] {
  background: rgba(248, 113, 113, .16);
  color: #fca5a5;
}
.q2-player-card-hand[data-hand="S"],
.q2p-batter-menu-hand[data-hand="S"] {
  background: rgba(167, 139, 250, .16);
  color: #c4b5fd;
}

/* SVG chevron — bigger, bolder than a unicode caret so the trigger
   visually reads as "menu" without ambiguity. Rotates 180° + turns
   teal when the dropdown is open. */
.q2p-batter-card-caret {
  color: #cbd5e1;
  margin-left: 4px;
  flex-shrink: 0;
  transition: transform .15s ease, color .15s ease;
}
.q2p-batter-card-trigger:hover .q2p-batter-card-caret { color: #f1f5f9; }
.q2-section-header.is-open .q2p-batter-card-caret {
  transform: rotate(180deg);
  color: #00D3BD;
}

/* Trigger wrapper — kept inline-block so the trigger sits on its
   own row inside the (block-level) section header. The dropdown
   itself escapes this container via position:fixed (see below). */
.q2p-batter-trigger-wrap {
  display: inline-block;
}

/* position:fixed lifts the menu out of the section's layout +
   stacking context entirely. The browser composites it directly in
   the viewport layer, so opening it doesn't repaint surrounding Q2
   content (no ripple in the tables or sibling cards). Top / left /
   width are set inline by the JS open handler from the trigger's
   getBoundingClientRect on every open. */
.q2p-batter-menu {
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  /* will-change + translate3d keep the menu on its own GPU layer so
     box-shadow doesn't bleed into the row underneath. */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  max-height: 240px;
  overflow-y: auto;
  /* Stop wheel/touch scroll from chaining to the page once the user
     hits the menu's top or bottom edge — without this, scrolling
     past the edge nudges the dashboard, which fires our scroll-
     close listener and dismisses the menu mid-scroll. */
  overscroll-behavior: contain;
  z-index: 1000;
  background: #161c28;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
/* Open state — controlled by a data attribute on the menu rather
   than a descendant selector, because the menu is re-parented to
   <body> on open (escaping the section header so the dashboard
   card's hover-transform doesn't trap its position:fixed). */
.q2p-batter-menu[data-q2p-menu-open] {
  visibility: visible;
  pointer-events: auto;
}

/* Pre-promote each Q2 section that sits below the dropdown to its
   own compositor layer. Without this, the menu's box-shadow paints
   over the tier-tinted table cells in CPU and the rows visibly
   ripple as their semi-transparent backgrounds re-blend. With each
   section on its own GPU layer, the menu composites over them via
   the GPU and their pixels stay stable. */
#mlb-pdash-q2 .q2-section,
#mlb-pdash-q2 .q2-legend,
#mlb-pdash-q2 .q2-table {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.q2p-batter-menu-item {
  all: unset;
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 20px);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  transition: background .15s ease, color .15s ease;
}
.q2p-batter-menu-item:hover {
  background: rgba(255,255,255,0.06);
  color: #f1f5f9;
}
.q2p-batter-menu-item.is-active {
  background: rgba(0,211,189,0.12);
  color: #00D3BD;
}
.q2p-batter-menu-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}
.q2p-batter-menu-avatar-fallback { background: rgba(255,255,255,0.06); }
.q2p-batter-menu-name { font-weight: 600; flex: 1 1 auto; }
/* .q2p-batter-menu-hand color rules live with the trigger above so
   both surfaces share the L/R/S palette. */

.mlb-pdash-q2 {
  display: flex; flex-direction: column; gap: 10px;
}
.mlb-pdash-q2-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.mlb-pdash-q2-team {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0;
}
.mlb-pdash-q2-logo { width: 36px; height: 36px; object-fit: contain; }
.mlb-pdash-q2-team-text { display: flex; flex-direction: column; min-width: 0; }
.mlb-pdash-q2-team-code { font-weight: 800; font-size: 16px; color: #f1f5f9; line-height: 1.1; }
.mlb-pdash-q2-team-name { font-size: 11px; color: #94a3b8; }
.mlb-pdash-q2-summary {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
}
.mlb-pdash-q2-avg-label {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em;
}
.mlb-pdash-q2-avg-val { font-weight: 800; font-size: 18px; color: #e2e8f0; }
.mlb-pdash-q2-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 0 4px;
}
.mlb-pdash-q2-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.mlb-pdash-q2-meta-lbl {
  font-size: 10px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .04em;
}
.mlb-pdash-q2-meta-val { font-size: 12px; color: #cbd5e1; font-weight: 600; }

.mlb-pdash-q2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.mlb-pdash-q2-table thead th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px; font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mlb-pdash-q2-table tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #e2e8f0;
}
.mlb-pdash-q2-table tbody tr:last-child td { border-bottom: none; }
.mlb-pdash-q2-spot { font-weight: 700; color: #94a3b8; width: 30px; }
.mlb-pdash-q2-name { font-weight: 600; }
.mlb-pdash-q2-pos { color: #94a3b8; font-size: 11px; width: 50px; }
.mlb-pdash-q2-k { text-align: right; font-weight: 700; width: 70px; }
.mlb-pdash-q2-hand {
  margin-left: 6px;
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  font-size: 9px; font-weight: 700;
  vertical-align: middle;
}

/* ─────────── Q3 — vs LHB / vs RHB cards ─────────── */

.mlb-pdash-q3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 1000px) {
  .mlb-pdash-q3-grid { grid-template-columns: 1fr; }
}
.mlb-pdash-q3-card {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 8px;
}
.mlb-pdash-q3-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.mlb-pdash-q3-card-label {
  font-weight: 800; font-size: 13px; color: #f1f5f9;
  text-transform: uppercase; letter-spacing: .04em;
}
.mlb-pdash-q3-card-sample { font-size: 11px; color: #64748b; font-weight: 600; }
.mlb-pdash-q3-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mlb-pdash-q3-cell {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px;
  border-radius: 6px;
  background: rgba(0,0,0,0.18);
}
.mlb-pdash-q3-cell-lbl {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 2px;
}
.mlb-pdash-q3-cell-val { font-weight: 800; font-size: 15px; color: #e2e8f0; }

/* ─────────── Q4 — Arsenal table ─────────── */

.mlb-pdash-q4-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.mlb-pdash-q4-table thead th {
  /* Pitch stays left-aligned so the column reads "first → last" with
     the row labels; every other stat column centers so the header
     and cell line up under each other. */
  text-align: center;
  padding: 6px 8px;
  font-size: 10px; font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mlb-pdash-q4-table thead th:first-child { text-align: left; }
.mlb-pdash-q4-table tbody td {
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #e2e8f0;
  text-align: center;
}
.mlb-pdash-q4-table tbody tr:last-child td { border-bottom: none; }
.mlb-pdash-q4-table tbody td.mlb-pdash-q4-pitch {
  text-align: left;
  font-weight: 700; font-size: 12px; color: #f1f5f9;
}
.mlb-pdash-q4-usage { font-weight: 700; }
.mlb-pdash-q4-velo { color: #cbd5e1; }
.mlb-pdash-q4-stat { font-weight: 700; }

/* Tier coloring overrides — the base `.mlb-pdash-q4-table tbody td`
   selector has higher specificity than the bare `.mlb-snap-green-*`
   utility classes, so without these scoped re-applies the cell color
   never changed off the default white. Add a soft tinted background
   on top of the bright text so the row reads at-a-glance. */
.mlb-pdash-q4-table tbody td.mlb-snap-green-3 {
  color: #6ee7b7;
  background: rgba(110, 231, 183, 0.15);
}
.mlb-pdash-q4-table tbody td.mlb-snap-green-2 {
  color: #86efac;
  background: rgba(134, 239, 172, 0.12);
}
.mlb-pdash-q4-table tbody td.mlb-snap-green-1 {
  color: #bef264;
  background: rgba(190, 242, 100, 0.10);
}
.mlb-pdash-q4-table tbody td.mlb-snap-red-2 {
  color: #fca5a5;
  background: rgba(252, 165, 165, 0.12);
}
.mlb-pdash-q4-table tbody td.mlb-snap-red-3 {
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
}

/* Usage tier — primary pitches glow brighter so the user can spot
   the pitcher's go-to mix at a glance. Tinted background follows
   the same pattern as the opp-stat cells. */
.mlb-pdash-q4-table tbody td.mlb-pdash-q4-usage--3 {
  color: #00F5D4;
  background: rgba(0, 245, 212, 0.14);
}
.mlb-pdash-q4-table tbody td.mlb-pdash-q4-usage--2 {
  color: #5eead4;
  background: rgba(94, 234, 212, 0.10);
}
.mlb-pdash-q4-table tbody td.mlb-pdash-q4-usage--1 {
  color: #a5f3fc;
}

/* ─────────── Q5 — Order × Hand grid ─────────── */

.mlb-pdash-q5-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 12px;
}
.mlb-pdash-q5-table thead th {
  padding: 4px 6px;
  font-size: 10px; font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em;
  text-align: center;
}
.mlb-pdash-q5-table thead th:first-child { text-align: left; }
.mlb-pdash-q5-spot {
  font-weight: 800; color: #cbd5e1;
  text-align: center; width: 36px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 6px;
}
.mlb-pdash-q5-cell {
  text-align: center;
  padding: 6px 4px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  vertical-align: middle;
}
.mlb-pdash-q5-cell--empty { color: #475569; }
.mlb-pdash-q5-cell-val { display: block; font-weight: 700; font-size: 13px; }
.mlb-pdash-q5-cell-sample { display: block; font-size: 9px; color: #64748b; font-weight: 600; margin-top: 1px; }

/* ─────────── Q6 — Recent Starts table ─────────── */

.mlb-pdash-q6-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.mlb-pdash-q6-table thead th {
  text-align: right;
  padding: 6px 8px;
  font-size: 10px; font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mlb-pdash-q6-table thead th:first-child,
.mlb-pdash-q6-table thead th:nth-child(2) { text-align: left; }
.mlb-pdash-q6-table tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-align: right;
  color: #e2e8f0;
}
.mlb-pdash-q6-table tbody td:first-child,
.mlb-pdash-q6-table tbody td:nth-child(2) { text-align: left; }
.mlb-pdash-q6-table tbody tr:last-child td { border-bottom: none; }