/* ==========================================================================
   bat_tracking — page-specific overrides (loaded AFTER spy-theme.css)
   --------------------------------------------------------------------------
   The generic Baseball Spy chrome (header, nav, controls, selects, segmented
   toggle, tables, links, spinners, tokens) now lives in the shared spy-theme.css.
   This file keeps ONLY what's unique to the Bat Tracking page:
     · the near-black #111 charts (this page's explicit dark-chart choice)
     · the JS-read :root chart ink + original data accents
     · the searchable batter combobox
     · the metric grid + panel cards
     · the 3D "Camera" controls overlaid inside the chart

   Load order: shared.css → inline <style> → spy-theme.css → THIS FILE.
   ========================================================================== */

/* --- CHART INK + ORIGINAL DATA ACCENTS (on :root) -------------------------
   The 3D canvas and SVG gradient overlays resolve colors from :root via
   getComputedStyle, and SVG marks resolve var() here — so :root must stay dark
   (light-on-black) even though spy-theme.css themes the visible page light on
   <body>. Data accents are the ORIGINAL shared.css values, inherited everywhere
   (charts + the page's stat values), untouched by the Baseball Spy recolor. */
:root {
  --bg:         #111111;
  --surface:    #111111;
  --border:     #2c2c2c;   /* gridlines — neutral gray */
  --text:       #e8e8e8;   /* pitch/launch/hit lines, plate, rings, markers */
  --text-muted: #8a8a8a;   /* axis tick labels, plate fill                  */
  --accent:     #e94560;   /* whiff   */
  --green:      #4ecca3;   /* in-play */
  --yellow:     #f0c040;   /* foul    */
  --blue:       #5da0d0;   /* plate line, batter, selection */
  --orange:     #e89040;
}

/* --- CHART SURFACES (#111 + local dark ink) -------------------------------
   Near-black backdrops + a local re-assertion of the dark ink so SVG marks
   (which resolve var() by inheritance from <body>, now light) stay light on
   black. .three-d-wrap also carries the 3D overlay chrome. */
.map-svg,
.map-canvas {
  background: #111111;
  border-radius: 8px;
}
.map-svg,
.three-d-wrap {
  --bg:         #111111;
  --surface:    #111111;
  --border:     #2c2c2c;
  --text:       #e8e8e8;
  --text-muted: #8a8a8a;
  /* data accents inherit the originals from :root */
}

/* The loading pill sits on the BLACK chart but inherits the page's now-dark
   muted text — re-lighten it (and its border) so it reads on #111. */
.map-loading {
  background: rgba(17, 17, 17, 0.9);
  border-color: #2c2c2c;
  color: #a1a1aa;
}

/* --- Searchable batter combobox → Baseball Spy dropdown -------------------- */
.combo-toggle {
  height: 38px;
  padding: 0 28px 0 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--bs-radius, 6px);
  font-size: 0.875rem; font-weight: 500;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.combo-toggle:hover { border-color: var(--bs-hover-border, rgba(28,28,34,0.2)); }
.combo-toggle:focus,
.combo-toggle[aria-expanded="true"] {
  outline: none; border-color: var(--bs-ring, #14b8a6);
  box-shadow: var(--bs-ring-glow, 0 0 0 2px rgba(20,184,166,0.1));
}
.combo-pop {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--bs-radius, 6px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 4px;
}
.combo-search {
  height: 36px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--bs-radius, 6px);
  font-size: 0.875rem; padding: 0 10px; margin-bottom: 4px;
}
.combo-search:focus {
  outline: none; border-color: var(--bs-ring, #14b8a6);
  box-shadow: var(--bs-ring-glow, 0 0 0 2px rgba(20,184,166,0.1));
}
.combo-option { padding: 8px 12px; border-radius: 4px; font-size: 0.875rem; color: var(--text); }
.combo-option:hover { background: var(--bs-muted-surface, #f4f4f5); color: var(--text); }
.combo-option.selected { background: var(--bs-muted-surface, #f4f4f5); color: var(--text); font-weight: 600; }
.combo-more { color: var(--text-muted); }

/* --- Panel cards + metric grid → Baseball Spy card + stat treatment -------- */
.panel-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--bs-radius-lg, 8px); padding: 20px; box-shadow: none;
}
.panel-card h3 {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.panel-card h3 .sub { text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; }
.metric label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.metric .value {
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* .value.inplay/.foul/.whiff keep their DATA colors (inherited from :root). */

/* --- Camera snap controls INSIDE the 3D chart -----------------------------
   The camera preset buttons float in the TOP-RIGHT corner of the canvas, in
   both the normal and fullscreen views (they're absolutely positioned children
   of .three-d-wrap, so they ride along into fullscreen). */
.three-d-wrap .preset-bar {
  position: absolute; top: 12px; right: 12px; z-index: 6; margin: 0;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.preset-bar button {
  background: rgba(17, 17, 17, 0.85); color: #8a8a8a;
  border: 1px solid #2c2c2c; border-radius: 4px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.preset-bar button:hover { color: #e8e8e8; border-color: var(--blue); }
/* Active snap (top/side/behind) reads as a crisp white outline until the camera
   is rotated or another snap is chosen. */
.preset-bar button.active {
  color: #ffffff; border-color: #ffffff; box-shadow: 0 0 0 1px #ffffff;
}

/* --- In-chart legend (bottom-left) ----------------------------------------
   Overlaid inside the chart (the 3D wrap, or the host for the flat SVG views)
   so it stays visible in fullscreen. pointer-events:none so it never blocks a
   canvas orbit/click; text-shadow keeps it legible over the data cloud. */
.chart-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: #cfd2d6; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.chart-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
/* On phones, stack the legend vertically in the bottom-left corner. */
@media (max-width: 720px) {
  .chart-legend { flex-direction: column; gap: 6px; }
}
