/* ════════════════════════════════════════════════════════
   COURT TIME PANEL — slide-up minutes overview
   Triggered by the COURT TIME button in #gameActionBar.
   Replaced #rosterPanel as the action-bar destination.
   z-index sits BELOW #gameActionBar (9999) on purpose so the
   action bar reads as the persistent surface; the backdrop +
   panel still cover the full game canvas.
   ════════════════════════════════════════════════════════ */

#courtTimePanel .ct-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 400;
  display: none;
}
#courtTimePanel.active .ct-backdrop { display: block; }

/* Panel is z-index 500; #gameActionBar is 9999 and sits at
   bottom:0 → the action bar covers the bottom ~103px of the
   panel in PWA on iPhone X+, hiding the last roster rows and
   making them un-scrollable. Lift the panel up by the action
   bar's real height so its bottom edge sits cleanly above
   the bar, and shrink max-height to match so the top doesn't
   spill past the viewport. */
#courtTimePanel .ct-panel {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  background: #131313;
  border-top: 1px solid #242424;
  border-radius: 18px 18px 0 0;
  z-index: 500;
  /* dvh tracks the dynamic viewport on iPhone (excluding the
     transient browser chrome) so PWA mode actually uses the
     reported height instead of vh's stale layout viewport. */
  max-height: calc(92dvh - 56px - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  /* Clip rounded corners + any sub-pixel spill from flex children
     so the bottom row never leaks past the 18px top radius. */
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: 0;
}
/* PWA standalone: action bar gains the +12px home-indicator
   dead-zone — panel needs the same offset and max-height haircut. */
@media (display-mode: standalone) {
  #courtTimePanel .ct-panel {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    max-height: calc(92dvh - 56px - env(safe-area-inset-bottom, 0px) - 12px);
  }
}
#courtTimePanel.active .ct-panel { transform: translateY(0); }

/* Tap target — wraps the slim 4px bar with 14px padding above
   and below so the actual hit area is ~32px tall. Tap closes
   the panel via onclick handler in the markup. */
.ct-handle-wrap {
  display: flex;
  justify-content: center;
  padding: 14px 0 10px;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05);
}
.ct-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #242424;
  transition: background 0.15s, width 0.15s;
}
.ct-handle-wrap:active .ct-handle {
  background: #555;
  width: 48px;
}

.ct-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid #242424;
}
/* Visible ✕ close button — primary dismiss path. 32px tap
   target sits to the right of the legend so it's always
   reachable regardless of safe-area inset or panel height. */
.ct-close-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #242424;
  border-radius: 8px;
  color: #888;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ct-close-btn:active {
  background: rgba(255, 255, 255, 0.08);
  color: #E4E4E4;
  border-color: #444;
}
.ct-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 2px;
}
.ct-avg {
  font-size: 10px;
  color: #555;
}
.ct-legend {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ct-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  color: #555;
  font-weight: 700;
  letter-spacing: 1px;
}
.ct-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ct-sub-banner {
  margin: 8px 12px 0;
  border-radius: 8px;
  padding: 7px 12px;
  flex-shrink: 0;
}
.ct-sub-banner.window-open {
  background: rgba(255, 92, 26, 0.08);
  border: 1px solid rgba(255, 92, 26, 0.2);
}
.ct-sub-banner.window-soon {
  background: rgba(255, 153, 0, 0.06);
  border: 1px solid rgba(255, 153, 0, 0.15);
}
.ct-sub-banner-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ct-sub-banner.window-open .ct-sub-banner-label {
  color: var(--orange, #FF5C1A);
}
.ct-sub-banner.window-soon .ct-sub-banner-label {
  color: var(--amber, #FF9900);
}
.ct-sub-pairs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ct-sub-pair-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #242424;
  border-radius: 6px;
  padding: 3px 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.ct-player-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  /* CRITICAL — flex children default to min-height: min-content,
     which means the list refuses to shrink below the total height
     of its rendered rows. That pushed the panel past its max-height
     cap and hid the last rows behind the action bar with no way
     to scroll back. min-height: 0 lets the flex layout properly
     constrain the list to its share of the panel's height, and
     the rows scroll inside it as expected. */
  min-height: 0;
  padding: 8px 12px 16px;
}
.ct-section-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  margin-top: 4px;
}
.ct-player-group {
  background: #161616;
  border: 1px solid #242424;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ct-player-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  position: relative;
}
.ct-player-row.coming-off { background: rgba(239, 68, 68, 0.06); }
.ct-player-row.coming-on  { background: rgba(61, 191, 108, 0.06); }

.ct-row-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 10px 0 0 10px;
}
.ct-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ct-row-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  flex: 1;
  margin-left: 8px;
}
.ct-row-time {
  font-size: 12px;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
  margin-right: 8px;
}
.ct-row-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 100px;
  padding: 2px 7px;
  flex-shrink: 0;
  /* Uniform pill width so the player time column doesn't shift
     left/right depending on which badge ("Coming Off" vs "On Bench"
     etc.) sits at the end of the row. */
  min-width: 84px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.ct-row-badge.off {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #EF4444;
}
.ct-row-badge.on {
  background: rgba(61, 191, 108, 0.1);
  border: 1px solid rgba(61, 191, 108, 0.25);
  color: #3DBF6C;
}
.ct-row-badge.injured {
  background: rgba(255, 51, 51, 0.10);
  border: 1px solid rgba(255, 51, 51, 0.30);
  color: rgba(255, 51, 51, 0.9);
}
/* Resting-state badges — same blue family as the chip-grid On
   Bench divider. Background / border / colour alphas match the
   Coming Off + Coming On pills (0.12 bg, 0.25 border, full-alpha
   text) so the visual weight reads identical to the actionable
   badges, not faded. The eye groups Staying On + On Bench by the
   shared blue, distinct from the red/green coming-off/on pair. */
.ct-row-badge.staying,
.ct-row-badge.benched {
  background: rgba(59, 158, 255, 0.12);
  border: 1px solid rgba(59, 158, 255, 0.25);
  color: #3B9EFF;
}
/* The ● glyph (U+25CF) is visually smaller than ▼ / ▲ at the
   same font-size — its em-box is narrower. Bump it up so its
   apparent footprint matches the Coming Off / Coming On
   triangles inside an 8px badge. line-height: 1 keeps the row
   centred vertically. */
.ct-row-badge.staying span:first-child,
.ct-row-badge.benched span:first-child {
  font-size: 11px;
  line-height: 1;
}
/* Injured rows — dim slightly + tint background so the row reads
   as "unavailable" without being completely faded out. */
.ct-player-row.injured {
  background: rgba(255, 51, 51, 0.04);
  opacity: 0.85;
}
/* Spacer keeps time column aligned across rows with/without a badge. */
.ct-row-spacer {
  width: 42px;
  flex-shrink: 0;
}

/* ── Player chip next-sub highlight ────────────────────────
   When a player is in pendingSubs, give their tray chip a red
   (off) or green (on) border + corner dot. Always-on during
   play so the coach can see at a glance who's queued, even
   without the panel open. */
.ptray-chip.ct-next-off {
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15);
}
.ptray-chip.ct-next-on {
  border: 1.5px solid rgba(61, 191, 108, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(61, 191, 108, 0.15);
}
.chip-next-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;
}
.chip-next-dot.off { background: #EF4444; }
.chip-next-dot.on  { background: #3DBF6C; }