/* ════════════════════════════════════════════════════════
   CHIP GRID — two-column paired layout
   Replaces the horizontal-scroll trays. Players queued for
   the next sub sit on the same row (OFF left, ON right) with
   an orange → arrow between them. Unpaired players fill the
   remaining rows in parallel order.
   ════════════════════════════════════════════════════════ */

.chip-grid-wrap {
  padding: 6px 12px;
  flex-shrink: 0;
}

.chip-grid-headers {
  display: grid;
  grid-template-columns: 1fr 22px 1fr;
  gap: 0 6px;
  margin-bottom: 6px;
}
.chip-grid-header-left {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green, #3DBF6C);
  font-family: 'Barlow Condensed', sans-serif;
}
.chip-grid-header-spacer { /* spacer column */ }
.chip-grid-header-right {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(239, 68, 68, 0.45);
  text-align: right;
  font-family: 'Barlow Condensed', sans-serif;
}

.chip-grid-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chip-grid-row {
  display: grid;
  grid-template-columns: 1fr 22px 1fr;
  gap: 0 6px;
  align-items: center;
}

/* Centre arrow between paired chips. Hidden via class.empty
   on rows that aren't paired so the column stays a fixed width
   without a stray glyph. */
.chip-grid-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--orange, #FF5C1A);
}
.chip-grid-arrow.empty { color: transparent; }

/* ── Foul / time legend strip ────────────────────────────────
   Sits between the next-sub section and the chip grid. Now
   explains the inline "NF" foul-count tier and the time-label
   colour scale (under / on-pace / over). Visual cues match the
   compact-row labels exactly. */
.chip-foul-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cfl-section-label {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #333;
}
.cfl-item {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 900;
}
.cfl-sub {
  font-size: 7px;
  color: #3A3A3A;
  font-weight: 600;
}
.cfl-divider {
  color: #1E1E1E;
  font-size: 10px;
}

/* Individual chip — two-state container. Collapsed state is a
   ~44px compact row (name + foul label + court time). Long-press
   reveals an expanded panel underneath with +1/+2/+3, Add Foul,
   and Injury. Flex column so the panel can stack below the row.
   Border + background transitions animate state changes gracefully. */
.sgb-chip-v2 {
  position: relative;
  background: var(--dark2, #161616);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  min-width: 0;
  height: auto;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(255, 92, 26, 0.2);
  transition: border-color 0.35s ease, background 0.35s ease,
              box-shadow 0.35s ease, transform 0.12s;
}
.sgb-chip-v2:active { transform: scale(0.97); }
/* Silhouette column — fixed 34px wide so name area scales. */
.sgb-chip-v2 .chip-sil {
  flex-shrink: 0;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* Phantom spacer mirrors the silhouette width on the opposite
   side of the content — keeps the name visually centred against
   the chip's midpoint regardless of which column the chip is in. */
.sgb-chip-v2 .chip-sil-spacer {
  flex-shrink: 0;
  width: 34px;
  pointer-events: none;
}
/* Name + foul dots stack in the inner column. */
.sgb-chip-v2 .chip-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* Minutes bar — pinned to the bottom of the chip, 3px tall.
   Width-fill animates per render so coaches see the bar grow
   over the course of the game. White hairline marks team avg. */
.sgb-chip-v2 .chip-mins-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 0 10px 10px;
  pointer-events: none;
}
.sgb-chip-v2 .chip-mins-bar-fill {
  height: 100%;
  border-radius: 0 0 0 10px;
  opacity: 0.7;
  transition: width 0.4s ease, background 0.4s ease;
}
.sgb-chip-v2 .chip-mins-bar-avg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

/* Empty placeholder — keeps row height when one side shorter. */
.sgb-chip-v2.empty {
  background: transparent;
  border: none !important;
  cursor: default;
  pointer-events: none;
}

/* Active healthy chips share a single neutral border now that
   silhouettes are gone — colour signalling moved into the inline
   foul label and time label inside the compact row. Coming-off /
   coming-on borders kept because pairing is the high-stakes
   signal a coach needs to see at a glance. */
.sgb-chip-v2.on-court,
.sgb-chip-v2.bench {
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background: var(--dark2, #161616);
}
/* Coming off — on court, paired. */
.sgb-chip-v2.coming-off {
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.05);
}
/* Coming on — bench, paired. */
.sgb-chip-v2.coming-on {
  border: 1.5px solid rgba(61, 191, 108, 0.35);
  background: rgba(61, 191, 108, 0.05);
}
/* Selected (popover open). Orange highlight wins over pair tint. */
.sgb-chip-v2.selected {
  border-color: var(--orange, #FF5C1A) !important;
  background: rgba(255, 92, 26, 0.10) !important;
  box-shadow: 0 0 0 2px rgba(255, 92, 26, 0.18);
}
/* Foul-warn / foul-danger overrides — fouls are higher-stakes
   signals than next-sub status. */
.sgb-chip-v2.has-fouls {
  border-color: rgba(255, 153, 0, 0.5) !important;
}
.sgb-chip-v2.foul-danger {
  border-color: rgba(255, 68, 68, 0.55) !important;
  background: rgba(255, 68, 68, 0.06) !important;
}
/* Injured — red-tinted border + dimmed name + reduced opacity
   so the coach can tell at a glance the player is hurt. Wins
   over has-fouls / foul-danger because injury is the more
   urgent signal (player is unavailable until marked fit). */
.sgb-chip-v2.injured {
  border: 1.5px solid rgba(255, 51, 51, 0.55) !important;
  background: rgba(255, 51, 51, 0.07) !important;
}
.sgb-chip-v2.injured .chip-name {
  color: rgba(255, 51, 51, 0.85) !important;
}

/* Corner indicator dot — 1px bg-coloured border so it reads
   as floating above the chip. */
.sgb-chip-v2 .chip-indicator-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--bg, #0B0B0B);
  pointer-events: none;
  z-index: 2;
}
.sgb-chip-v2.coming-off .chip-indicator-dot { background: #EF4444; }
.sgb-chip-v2.coming-on  .chip-indicator-dot { background: #3DBF6C; }

/* Direction arrow — small ▼ / ▲ in the top-left of paired chips. */
.sgb-chip-v2 .chip-direction {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 9px;
  font-weight: 900;
  pointer-events: none;
}
.sgb-chip-v2.coming-off .chip-direction { color: rgba(239, 68, 68, 0.6); }
.sgb-chip-v2.coming-on  .chip-direction { color: rgba(61, 191, 108, 0.6); }

/* Player name — sits inside .chip-compact-row, flex:1 so it
   takes the remaining horizontal space between the optional
   direction badge and the foul/time labels on the right. */
.sgb-chip-v2 .chip-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  letter-spacing: 0.3px;
}
.sgb-chip-v2.on-court .chip-name { color: var(--text, #E4E4E4); }
.sgb-chip-v2.bench    .chip-name { color: var(--sub, #666); }
.sgb-chip-v2.coming-off .chip-name { color: rgba(239, 68, 68, 0.95); }
.sgb-chip-v2.coming-on  .chip-name { color: rgba(61, 191, 108, 0.95); }

/* Legacy foul-dot row — buildChip no longer emits .chip-fouls /
   .chip-foul-dot in the compact-row redesign; hide here so any
   stale render path doesn't surface them. Replaced by the inline
   "NF" foul-count label inside the compact row. */
.sgb-chip-v2 .chip-fouls,
.sgb-chip-v2 .chip-foul-dots {
  display: none;
}

/* ─── Compact row ────────────────────────────────────────────
   Always visible. Holds direction badge (paired only), name,
   foul-count label, court time, cancel button, and a 3-dot hint
   on expandable chips. The 44px min-height keeps the tap target
   comfortable while the chip is collapsed. */
.chip-compact-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 12px;
  min-height: 44px;
}
.chip-foul-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
.chip-time-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.chip-cancel-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 0.7);
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  padding: 0;
}
.chip-dir-badge {
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
}
.chip-hint-dots {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  letter-spacing: 1px;
}

/* ─── Expanded panel ─────────────────────────────────────────
   Hidden by default (inline style.display:none on the element).
   chipExpand() toggles display to '' (block) to reveal. Holds
   the +1/+2/+3 score buttons and the Add Foul + Injury actions. */
.chip-expanded {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 10px 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}
.chip-exp-scores {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.chip-score-btn {
  flex: 1;
  padding: 7px 0;
  border-radius: 7px;
  border: 1px solid rgba(255, 92, 26, 0.22);
  background: rgba(255, 92, 26, 0.1);
  color: #FF5C1A;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip-exp-actions {
  display: flex;
  gap: 6px;
}
.chip-foul-btn {
  flex: 1;
  padding: 7px 0;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.chip-foul-count {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 1px 6px;
  font-size: 10px;
}
.chip-injury-btn {
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.chip-injury-btn.confirming {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #EF4444;
  animation: chipPulse 0.6s ease-in-out infinite;
}
@keyframes chipPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ─── Section dividers ───────────────────────────────────────
   Pushed into the rows array between groups. Re-uses .chip-grid-row's
   grid template so cell positions line up with chip columns. */
.chip-sec-row {
  margin-top: 4px;
}
.chip-sec-hdr {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.75;
}
.chip-sec-hdr-right {
  justify-content: flex-end;
}
.chip-sec-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0.7;
  flex-shrink: 0;
}
.chip-sec-blank {
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════
   ACTION CHIPS — absent / injured states with ARRIVED → / CLEARED →
   pills. Distinct from the standard chip layout: no foul dots, no
   minutes bar, no left bar. Tap clears the state via
   handleChipArrive. Right-side silhouette (svgAbsent / svgInjured),
   left-aligned name, action pill below.
   ════════════════════════════════════════════════════════════ */
.sgb-chip-v2.action-chip {
  /* Override the base centred-content layout so the pill sits
     under the left-aligned name and the silhouette anchors to the
     right edge. */
  padding: 6px 44px 6px 10px;
}
/* Absent chip — amber border + bg, name in amber. Sits in the
   bench column at the bottom alongside injured chips, but distinct
   colour signals "didn't show up today" vs "got hurt mid-game". */
.sgb-chip-v2.absent {
  border: 1.5px solid rgba(245, 158, 11, 0.55) !important;
  background: rgba(245, 158, 11, 0.07) !important;
}
.sgb-chip-v2.absent .chip-name {
  color: rgba(245, 158, 11, 0.85) !important;
}
.sgb-chip-v2.action-chip.injured {
  /* Override the existing .injured rule from the standard chip
     path so an injured action-chip uses the action-chip layout
     rather than inheriting foul-dot / minutes-bar styling. */
  border-color: rgba(239, 68, 68, 0.28);
  background:   rgba(239, 68, 68, 0.04);
}
.sgb-chip-v2.action-chip .chip-action-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.sgb-chip-v2.action-chip .chip-action-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.3px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.sgb-chip-v2.absent  .chip-action-name { color: rgba(180, 130, 30, 0.85); }
.sgb-chip-v2.action-chip.injured .chip-action-name { color: rgba(239, 68, 68, 0.7); }
.sgb-chip-v2.action-chip .chip-action-sil {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chip-action-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  padding: 2px 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
}
.chip-action-pill.arrived {
  background: rgba(255, 153, 0, 0.10);
  border: 1px solid rgba(255, 153, 0, 0.30);
  color: #FF9900;
}
.chip-action-pill.cleared {
  background: rgba(61, 191, 108, 0.10);
  border: 1px solid rgba(61, 191, 108, 0.30);
  color: #3DBF6C;
}

/* ════════════════════════════════════════════════════════════
   INJURED / ABSENT — standard compact chip variant
   Renders inside the regular Staying On / On Bench grid at the
   bottom of the bench column. Border + name colour come from
   .sgb-chip-v2.injured / .sgb-chip-v2.absent (above). This
   section adds the status pill that replaces the [foul, time,
   cancel] cluster and the slim recovery button shown in the
   expanded panel.
   ════════════════════════════════════════════════════════════ */
.chip-status-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid;
  line-height: 1;
}
.chip-status-label.injured-label {
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.40);
  background: rgba(239, 68, 68, 0.10);
}
.chip-status-label.absent-label {
  color: #F59E0B;
  border-color: rgba(245, 158, 11, 0.40);
  background: rgba(245, 158, 11, 0.10);
}

/* Recovery state for the injury button — applied via
   .chip-injury-btn.recover when the chip is already injured or
   absent. Green signals "this restores the player" instead of
   the destructive 🤕 Injury default. Inherits sizing + family
   from .chip-injury-btn; only colour family swaps. */
.chip-injury-btn.recover {
  background: rgba(61, 191, 108, 0.12);
  border-color: rgba(61, 191, 108, 0.40);
  color: #3DBF6C;
}
.chip-injury-btn.recover:active {
  background: rgba(61, 191, 108, 0.20);
}