/* ============================================
   Console Screen — Unified panel layout
   ============================================
   16:9 grid-based layout with absolute-positioned panels.
   Uses same components as Control screen (Fader, Pad, Button)
   but arranged in the console wireframe layout.

   Header: 100%W × 6%H (existing)
   Content: 100%W × 94%H (below header)

   Panel percentages converted to content-area %:
     Row 1: 33% of total = 35.106% of content
     Row 2: 18% of total = 19.149% of content
     Row 3: 18% of total = 19.149% of content
     Row 4: 25% of total = 26.596% of content
   ============================================ */

/* ---- Content wrapper ---- */
#console-content {
  position: relative;
  width: 100%;
  height: 100%; /* fills screen container */
  overflow: hidden;
}

/* ---- Panel base ---- */
.console-panel {
  position: absolute;
  background: var(--bg-secondary);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  overflow: hidden;
  --panel-gap: 4px;
}

.console-panel-inner {
  position: absolute;
  inset: 4px;
  display: flex;
  flex-direction: column;
}

/* Demo-disabled panels — blurred + faded when feature is off */
.console-panel.demo-disabled .console-panel-inner {
  filter: blur(3px);
  opacity: 0.15;
  pointer-events: none;
  transition: filter 0.3s, opacity 0.3s;
}

/* Panel header label — standard for all console panels */
.console-panel-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-align: center;
  padding: 3px 4px 4px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}

/* Placeholder for panels not yet populated */
.console-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  opacity: 0.3;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  line-height: 1.4;
}

/* ---- Panel positions ---- */

/* Row 1 Left: DJ Deck Overview — 30%W × 33%H */
.cp-dj-overview {
  left: var(--panel-gap); top: var(--panel-gap);
  width: calc(30% - var(--panel-gap) * 2);
  height: calc(35.106% - var(--panel-gap) * 2);
}

/* Row 1 Right: Focused Deck — 70%W × 33%H */
.cp-focused-deck {
  left: calc(30% + var(--panel-gap)); top: var(--panel-gap);
  width: calc(70% - var(--panel-gap) * 2);
  height: calc(35.106% - var(--panel-gap) * 2);
}

/* Row 2 Left: Audio Panel — 30%W × 18%H */
.cp-audio {
  left: var(--panel-gap); top: calc(35.106% + var(--panel-gap));
  width: calc(30% - var(--panel-gap) * 2);
  height: calc(19.149% - var(--panel-gap) * 2);
}

/* ---- Audio strip layout ---- */
.console-audio-layout {
  flex-direction: row !important;
  gap: 4px;
  padding: 4px;
}

/* Each module (Input / EQ / Output) */
.console-audio-module {
  flex: 1;
  display: flex;
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  overflow: visible;
}

.console-audio-module-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  padding: 4px;
  gap: 4px;
}

/* EQ module gets more space for 3 faders */
.audio-mod-eq {
  flex: 1.3;
}

/* Fader column within a module */
.console-audio-fader-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* EQ group — 3 faders side by side */
.console-audio-eq-group {
  flex-direction: row !important;
  gap: 6px;
}

.console-audio-eq-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* Label above each fader */
.console-audio-fader-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.3;
  padding-bottom: 3px;
  flex-shrink: 0;
}

/* EQ label colors */
.eq-label-low { color: #dd6600; }
.eq-label-mid { color: #22aa44; }
.eq-label-high { color: #3355aa; }

/* Value readout below fader */
.console-audio-fader-value {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding-top: 2px;
  flex-shrink: 0;
}

/* EQ value colors (external — hidden, replaced by Fader component's own display) */
.eq-val-low, .eq-val-mid, .eq-val-high,
.console-audio-fader-value {
  display: none;
}

/* Color the Fader component's built-in value within EQ containers */
#console-audio-eq-low .fader-value,
#console-audio-eq-low .fader-adjust-btn { color: #dd6600; border-color: rgba(221, 102, 0, 0.25); }
#console-audio-eq-mid .fader-value,
#console-audio-eq-mid .fader-adjust-btn { color: #22aa44; border-color: rgba(34, 170, 68, 0.25); }
#console-audio-eq-high .fader-value,
#console-audio-eq-high .fader-adjust-btn { color: #3355aa; border-color: rgba(51, 85, 170, 0.25); }

/* Volume fader value color */
#console-audio-input-fader .fader-value,
#console-audio-output-fader .fader-value {
  color: rgba(255, 255, 255, 0.5);
}

/* Fader container — flex to fill available height */
.console-audio-fader-container {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

/* Override fader wrapper sizing within audio strip */
.console-audio-fader-container .fader-wrapper {
  flex: 0 0 36px;
}

.console-audio-fader-container .fader-track {
  width: 36px;
}

/* VU meter container */
.console-audio-vu {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

/* Bipolar EQ fader — center line at 0dB */
.console-audio-fader-container .fader-track {
  position: relative;
}

/* 0dB reference line on volume faders (0dB = ~83.5% from bottom in -60 to +12 range) */
#console-audio-input-fader .fader-track::after,
#console-audio-output-fader .fader-track::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 83.5%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 2;
  pointer-events: none;
}

/* Center line on EQ faders */
.console-audio-eq-fader .fader-track::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 2;
  pointer-events: none;
}

/* Audio faders don't use brightness glow */
.console-audio-fader-container .fader-wrapper {
  --fader-glow-intensity: 0 !important;
}

/* Bipolar fill needs absolute positioning within track */
.console-audio-eq-fader .fader-fill.bipolar-fill {
  position: absolute;
  left: 0;
  right: 0;
}

/* Row 3 Left: Knob Panel — 30%W × 18%H */
.cp-knob {
  left: var(--panel-gap); top: calc(54.255% + var(--panel-gap));
  width: calc(30% - var(--panel-gap) * 2);
  height: calc(19.149% - var(--panel-gap) * 2);
}

/* Row 4 Left: Laser — 11%W × 25%H */
.cp-laser {
  left: var(--panel-gap); top: calc(73.404% + var(--panel-gap));
  width: calc(11% - var(--panel-gap) * 2);
  height: calc(26.596% - var(--panel-gap) * 2);
}

/* Row 4 Mid: Fade — 10%W × 25%H */
.cp-fade {
  left: calc(11% + var(--panel-gap)); top: calc(73.404% + var(--panel-gap));
  width: calc(10% - var(--panel-gap) * 2);
  height: calc(26.596% - var(--panel-gap) * 2);
}

/* Row 4 Mid: Master — 9%W × 25%H */
.cp-master {
  left: calc(21% + var(--panel-gap)); top: calc(73.404% + var(--panel-gap));
  width: calc(9% - var(--panel-gap) * 2);
  height: calc(26.596% - var(--panel-gap) * 2);
}

/* Rows 2-4 Right: Lighting Pads — 70%W × 61%H */
.cp-pads {
  left: calc(30% + var(--panel-gap)); top: calc(35.106% + var(--panel-gap));
  width: calc(70% - var(--panel-gap) * 2);
  height: calc(64.894% - var(--panel-gap) * 2);
}

/* ---- Pads panel layout ---- */
.console-pads-layout {
  position: absolute;
  inset: 4px;
  display: flex;
  align-items: stretch;
}

/* Row labels column */
.console-pads-col-labels {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 26px;
}

.console-pads-labels-spacer {
  height: 20px;
  flex-shrink: 0;
}

.console-pads-row-labels {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.console-row-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.6;
  width: 24px;
}

/* Banks column */
.console-pads-col-banks {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Bank header row */
.console-pads-header-row {
  display: flex;
  align-items: center;
  height: 20px;
  flex-shrink: 0;
}

.console-pads-scroll-arrow {
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--accent-text);
  cursor: pointer;
  user-select: none;
  opacity: 0.5;
  flex-shrink: 0;
}

.console-pads-scroll-arrow:hover { opacity: 1; }
.console-pads-scroll-arrow.disabled { opacity: 0.15; pointer-events: none; }

.console-pads-bank-headers {
  flex: 1;
  display: flex;
  gap: 8px;
}

.console-pads-bank-header {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  line-height: 20px;
}

/* Grids area */
.console-pads-grids-area {
  flex: 1;
  display: flex;
  min-height: 0;
}

.console-pads-arrow-spacer {
  width: 22px;
  flex-shrink: 0;
}

#console-pad-grids-wrapper {
  flex: 1;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

/* Override pad-grid inside console — fixed 1:1 square, sized by JS */
#screen-console .pad-grid {
  flex: 0 0 auto;  /* no grow, no shrink — size set by --grid-size */
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 4px;
  overflow: hidden;
  width: var(--grid-size);
  height: var(--grid-size);
}

#screen-console .pad-grid .grid-bank-label {
  display: none; /* headers handled by console-pads-bank-headers */
}

/* Rows not needed with CSS grid — pads go directly into grid */
#screen-console .pad-row {
  display: contents;
}

#screen-console .pad {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  max-height: 100%;
  flex: none;
  min-width: 0;
  min-height: 0;
}

/* ---- Knob panel layout ---- */
/* Knob panel — 3 banks side by side */
.console-knobs-layout {
  display: flex;
  gap: 3px;
  flex-direction: row;
}

.console-knob-bank {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  overflow: hidden;
}

.console-knob-bank-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-align: center;
  padding: 2px 0;
  flex-shrink: 0;
}

/* Color-code bank labels to match user's mockup */
.console-knob-bank[data-bank="1"] { border-color: #882222; }
.console-knob-bank[data-bank="1"] .console-knob-bank-label { color: #cc3333; }
.console-knob-bank[data-bank="2"] { border-color: #228822; }
.console-knob-bank[data-bank="2"] .console-knob-bank-label { color: #33cc33; }
.console-knob-bank[data-bank="3"] { border-color: #222288; }
.console-knob-bank[data-bank="3"] .console-knob-bank-label { color: #3333cc; }

.console-knob-bank-faders {
  flex: 1;
  display: flex;
  gap: 3px;
  align-items: stretch;
  min-height: 0;
  padding: 0 2px 2px;
}

.console-knob-bank-faders .knob-wrapper {
  flex: 1;
  min-width: 0;
}

/* ---- Laser panel layout ---- */
.console-laser-layout {
  flex: 1;
  display: flex;
  gap: 4px;
  min-height: 0;
}

/* Buttons column (left, ~2/3 width) */
.console-laser-buttons {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 0;
}

.console-laser-buttons .laser-btn {
  flex: 1;
  min-height: 0;
  font-size: clamp(8px, 0.7vw, 11px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Laser FX fader (right, ~1/3 width) */
.console-laser-fx {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.console-laser-fx .fader-wrapper {
  width: 100%;
}

/* ---- Fade panel layout ---- */
.console-fade-layout {
  flex: 1;
  display: flex;
  gap: 4px;
  min-height: 0;
}

/* Left column: toggle, displays, beat grid */
.console-fade-controls {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Right column: fader */
.console-fade-fader {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.console-fade-fader .fader-wrapper {
  flex: 1;
  min-width: 0;
}

/* ON/OFF toggle */
.console-fade-onoff {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  background: var(--bg-element);
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
}

.console-fade-onoff.active {
  background: rgba(0, 180, 0, 0.3);
  border-color: rgba(0, 200, 0, 0.5);
  color: #00cc00;
}

/* Fade time + beat displays */
.console-fade-display {
  background: var(--bg-element);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 3px 6px;
  text-align: center;
}

.console-fade-value {
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.console-fade-value sub {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--text-dim);
}

.console-fade-beat-label {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-align: center;
  padding-top: 1px;
}

/* Beat multiplier grid: 2 columns × 3 rows */
.console-fade-beat-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2px;
  min-height: 0;
}

.console-beat-btn {
  font-size: clamp(9px, 0.8vw, 12px);
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-element);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
}

.console-beat-btn:hover {
  border-color: var(--border-bright);
  color: var(--text-secondary);
}

.console-beat-btn.active {
  background: rgba(68, 204, 68, 0.15);
  border-color: rgba(68, 204, 68, 0.5);
  color: #44cc44;
}

/* ---- Master panel layout ---- */
#console-master-container {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: stretch;
  min-height: 0;
}

#console-master-container .fader-wrapper {
  flex: 1;
  min-width: 0;
}

/* ---- Console fader/knob overrides: fill available height ---- */
#screen-console .fader-wrapper,
#screen-console .knob-wrapper {
  flex: 1;
  min-height: 0;
}

#screen-console .fader-track,
#screen-console .knob-slider-track {
  height: auto;
  flex: 1;
  min-height: 30px;
}

/* Knob labels: allow wrapping to 2 lines with tight spacing */
.console-knob-bank-faders .knob-label {
  white-space: normal;
  line-height: 1.1;
  max-width: none;
  font-size: 9px;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
  /* Reserve 2-line height, vertically center single-line labels */
  min-height: calc(9px * 1.1 * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   DJ DECK DISPLAY — Focused Deck Panel
   CDJ/Rekordbox-style waveform + info bar
   ============================================ */

/* ================================================================
   DECK PANEL — BLT Player Panel Clone
   Matches Beat Link Trigger's WaveformDetailComponent layout.
   ================================================================ */

.deck-panel {
  display: flex;
  flex-direction: column;
  background: #000;
  overflow: hidden;
  height: 100%;
}

/* ---- Info bar (3-section: left | center | right) ---- */
.deck-info-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0 6px;
  flex-shrink: 0;
  background: #0a0506;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  height: 40px;
  min-height: 40px;
  overflow: hidden;
}
.deck-info-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
/* Title is the last item in left section — let it truncate */
.deck-info-left .deck-title {
  flex: 1 1 0;
  min-width: 0;
}
.deck-info-center {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}
.deck-info-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

/* Player number in colored box */
.deck-player-box {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c1a3a;
  border: 2px solid #1a3366;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
}
.deck-player-box.playing {
  background: #0a2a55;
  border-color: #2255aa;
}
.deck-player-number {
  font-size: 18px;
  font-weight: 700;
  color: #4477cc;
  line-height: 1;
}
.deck-player-box.playing .deck-player-number {
  color: #66aaff;
}

.deck-info-sep {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.deck-title {
  font-size: 13px;
  font-style: italic;
  color: #ffcc00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.deck-artist {
  font-size: 13px;
  font-weight: 700;
  color: #33cc66;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  flex-shrink: 1;
  min-width: 0;
}

/* ---- Row B: Detail waveform (scrolling) ---- */
.deck-waveform-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 60px;
}
.deck-waveform-canvas {
  width: 100%;
  height: 100%;
}
.deck-waveform-canvas canvas {
  display: block;
}

/* Red playhead — fixed center vertical line */
.deck-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #ff0000;
  box-shadow: 0 0 6px rgba(255, 0, 0, 0.5);
  z-index: 5;
  pointer-events: none;
}

/* ---- Zoom buttons (inside info bar) ---- */
.deck-zoom-buttons {
  display: flex;
  gap: 2px;
}
.deck-zoom-btn {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.deck-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.deck-zoom-btn.active {
  background: rgba(150, 50, 50, 0.3);
  border-color: rgba(200, 50, 50, 0.5);
  color: #ffffff;
  font-weight: 700;
}

/* (status elements now inside .deck-info-bar) */

/* On Air indicator — always visible, greyed when off */
.deck-onair {
  padding: 2px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #cc0000;
  border-radius: 3px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.deck-onair.off {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.15);
}

/* Beat indicator (4 segments, centered in info bar) */
.deck-beat-indicator {
  width: 80px;
  height: 14px;
  background: #111;
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding: 2px;
  overflow: hidden;
}
.deck-beat-segment {
  flex: 1;
  background: #1a1a1a;
  border-radius: 2px;
}
.deck-beat-segment.active {
  background: #3366ff;
}
.deck-beat-segment.active.downbeat {
  background: #ff8800;
}

/* Time values (flanking overview bar) */
.deck-time-val {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  line-height: 1;
}
.deck-time-remain {
  color: rgba(255, 255, 255, 0.35);
}

/* Tempo display (BPM + pitch) */
.deck-tempo-box {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.deck-pitch {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
}
.deck-bpm-val {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color 0.08s ease-out;
}
.deck-bpm-val.beat-flash {
  color: #ff4444;
}

/* Sync/Master badges — always visible, greyed when off */
.deck-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  text-align: center;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.deck-badge-sync {
  background: #ccaa00;
  color: #000;
}
.deck-badge-sync.off {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.15);
}
.deck-badge-master {
  background: #cc6600;
  color: #fff;
}
.deck-badge-master.off {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.15);
}

/* ---- Overview row: elapsed | bar | remaining ---- */
.deck-overview-row {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 18px;
}
.deck-time-elapsed, .deck-time-remain {
  display: flex;
  align-items: center;
  padding: 0 5px;
  background: #050505;
  flex-shrink: 0;
}

/* Overview bar (colored blocks + position marker) */
.deck-overview-bar {
  flex: 1;
  min-width: 0;
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
}
.deck-overview-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.deck-overview-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: #ff0000;
  box-shadow: 0 0 3px rgba(255, 0, 0, 0.5);
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

/* ================================================================
   COMPACT DECK — Small overview for 4-deck grid
   ================================================================ */

/* 2x2 grid layout for DJ Overview panel */
.cp-dj-overview .console-panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  padding: 3px;
}

.deck-compact {
  display: flex;
  flex-direction: column;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  cursor: pointer;
  transition: border-color 0.2s;
}
.deck-compact:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Selected deck — glowing pulsing border */
.deck-compact.selected {
  border-color: #3366ff;
  box-shadow: 0 0 8px rgba(51, 102, 255, 0.4), inset 0 0 4px rgba(51, 102, 255, 0.1);
  animation: deck-selected-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes deck-selected-pulse {
  from { box-shadow: 0 0 6px rgba(51, 102, 255, 0.3), inset 0 0 3px rgba(51, 102, 255, 0.05); }
  to   { box-shadow: 0 0 12px rgba(51, 102, 255, 0.6), inset 0 0 6px rgba(51, 102, 255, 0.15); }
}

/* Selected deck content greyed out */
.deck-compact.selected .deck-waveform-area,
.deck-compact.selected .deck-compact-info,
.deck-compact.selected .deck-overview-row {
  opacity: 0.35;
}

/* Compact info bar */
.deck-compact-info {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  flex-shrink: 0;
  background: #0a0506;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  height: 22px;
  min-height: 22px;
  overflow: hidden;
}
.deck-compact-info .deck-player-box {
  width: 18px;
  height: 18px;
  border-width: 1px;
  border-radius: 2px;
}
.deck-compact-info .deck-player-number {
  font-size: 11px;
}
.deck-compact-info .deck-onair {
  font-size: 7px;
  padding: 1px 3px;
  border-radius: 2px;
}
.deck-compact-info .deck-artist {
  font-size: 9px;
  flex-shrink: 1;
  min-width: 0;
}
.deck-compact-info .deck-info-sep {
  font-size: 8px;
}
.deck-compact-info .deck-title {
  font-size: 9px;
  flex: 1 1 0;
  min-width: 0;
}
.deck-compact-right {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  margin-left: auto;
}
.deck-compact-right .deck-bpm-val {
  font-size: 10px;
}
.deck-compact-right .deck-beat-indicator {
  width: 40px;
  height: 8px;
  padding: 1px;
  gap: 1px;
}

/* Compact waveform area */
.deck-compact .deck-waveform-area {
  min-height: 20px;
}

/* Compact overview row */
.deck-compact .deck-overview-row {
  height: 12px;
}
.deck-compact .deck-time-val {
  font-size: 8px;
  padding: 0 2px;
}