/* CDJ Player module - STEP2 POLISH (EVO7)
   Objectifs:
   - Bouton Play/Pause bas-droite (zone ronde du masque)
   - Bouton Play List en haut (zone transparente du masque)
   - Time mm:ss.mmm centré sur la tête de lecture (trait blanc)
   - BPM/Time plus lisibles (référence sur '+0.55%')
   - Waveform plus fine sur longs fichiers (côté JS)
*/

:root{
  --cdj-scale: 0.8;

  /* Base dimensions (mask coordinate system) */
  --cdj-w: 876px;
  --cdj-h: 600px;

  /* Zones (héritées du prototype) */
  --zone-main-x: 62px;
  --zone-main-y: 238px;
  --zone-main-w: 757px;
  --zone-main-h: 141px;

  --zone-title-x: 192px;
  --zone-title-y: 134px;
  --zone-title-w: 397px;
  --zone-title-h: 47px;

  --zone-time-x: 322px; /* utilisé seulement comme fallback */
  --zone-time-y: 425px;
  --zone-time-w: 169px;
  --zone-time-h: 42px;

  --zone-bpm-x: 708px;
  --zone-bpm-y: 428px;
  --zone-bpm-w: 92px;
  --zone-bpm-h: 34px;

  --zone-overview-x: 137px;
  --zone-overview-y: 484px;
  --zone-overview-w: 584px;
  --zone-overview-h: 36px;

  /* Playlist overlay (cadre rouge) - ajustable si nécessaire */
  --zone-pl-x: 98px;
  --zone-pl-y: 186px;
  --zone-pl-w: 680px;
  --zone-pl-h: 280px;

  /* Boutons (position dans le repère du masque) */
  /* Masque v2 (2026-01-19): trous dédiés playlist (haut) et play/pause (bas droite)
     Astuce: ajuste uniquement ces variables pour caler au pixel près, sans toucher au JS.
  */
  --btn-play-x: 775px; /* centre du rond bas-droite (masque v2) */
  --btn-play-y: 512px;
  --btn-play-size: 72px; /* légèrement plus gros */

  /* PLAY LIST - trou du masque v2 (valeurs par défaut, ajustables) */
  --btn-playlist-x: 453px;
  --btn-playlist-y: 71px;
  --btn-playlist-w: 118px;
  --btn-playlist-h: 28px;

  /* Couleurs waveform */
  --wave-bg: #000;
  --text: #fff;
}

/* Host (per instance) */
.cdj-player-host{ display:flex; justify-content:center; }

.cdj-player-wrap{
  transform: scale(var(--cdj-scale));
  transform-origin: top center;
}

.cdj-player{
  position:relative;
  width:var(--cdj-w);
  height:var(--cdj-h);
  background:#000;
  overflow:hidden;
  user-select:none;
}

.cdj-player .cdj-mask{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index: 50;
}

.cdj-player canvas{ display:block; }

/* Waveforms */
.cdj-player .cdj-wave-main{
  position:absolute;
  left:var(--zone-main-x);
  top:var(--zone-main-y);
  width:var(--zone-main-w);
  height:var(--zone-main-h);
  background:var(--wave-bg);
  z-index: 10;
}

.cdj-player .cdj-wave-overview{
  position:absolute;
  left:var(--zone-overview-x);
  top:var(--zone-overview-y);
  width:var(--zone-overview-w);
  height:var(--zone-overview-h);
  background:var(--wave-bg);
  z-index: 10;
}

/* Texte */
.cdj-player .cdj-text{
  position:absolute;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index: 20;
}

.cdj-player .cdj-title{
  left:var(--zone-title-x);
  top:calc(var(--zone-title-y) + 6px);
  width:var(--zone-title-w);
  font-size:18px;
  line-height:1.1;
}

/* Time centré sur tête de lecture: JS positionne left en px via --cdj-playhead-x */
.cdj-player .cdj-clock{
  top:var(--zone-time-y);
  left: var(--zone-time-x);
  width: var(--zone-time-w);
  font-size:38px;
  letter-spacing:1px;
  text-align:center;
  transform: translateX(calc(var(--cdj-clock-shift, 0px)));
}

.cdj-player .cdj-clock.is-centered{
  left: var(--cdj-playhead-x, 50%);
  width: auto;
  transform: translateX(-50%);
}

.cdj-player .cdj-clock .ms{
  font-size: 0.60em;
  opacity: 0.95;
}

.cdj-player .cdj-bpm{
  left:var(--zone-bpm-x);
  top:calc(var(--zone-bpm-y) + 2px);
  width:var(--zone-bpm-w);
  font-size:34px;
  text-align:right;
}

/* Bouton Play/Pause (image) */
.cdj-player .cdj-btn-play{
  position:absolute;
  left: calc(var(--btn-play-x) - (var(--btn-play-size) / 2));
  top:  calc(var(--btn-play-y) - (var(--btn-play-size) / 2));
  width: var(--btn-play-size);
  height: var(--btn-play-size);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 80; /* sous le masque (50), au dessus des canvases (10) */
}
.cdj-player .cdj-btn-play img{ width:100%; height:100%; display:block; }

/* Blink: piloté uniquement par le JS (swap play_on / play_off) pour conserver la teinte réelle.
   On désactive toute animation CSS basée sur l'opacité qui "voile" le bouton. */
.cdj-player.is-paused .cdj-btn-play,
.cdj-player.is-playing .cdj-btn-play{
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.cdj-player .cdj-btn-play img{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Play button: keep true asset tint (no dimming/filter), always above mask */
.cdj-player .cdj-btn-play,
.cdj-player .cdj-btn-play img{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Eviter le flash au refresh: on affiche les boutons uniquement apres chargement du masque */
.cdj-player:not(.cdj-mask-loaded) .cdj-btn-play,
.cdj-player:not(.cdj-mask-loaded) .cdj-btn-playlist{
  opacity:0;
  pointer-events:none;
}

/* Bouton Playlist */
.cdj-player .cdj-btn-playlist{
  position:absolute;
  left: var(--btn-playlist-x);
  top:  var(--btn-playlist-y);
  width: var(--btn-playlist-w);
  height: var(--btn-playlist-h);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 40; /* sous le masque (50) */
}
.cdj-player .cdj-btn-playlist img{ width:100%; height:100%; display:block; }

/* Overlay playlist */
.cdj-player .cdj-playlist,
.cdj-player .cdj-playlist-overlay{
  position:absolute;
  left: var(--zone-pl-x);
  top:  var(--zone-pl-y);
  width: var(--zone-pl-w);
  height: var(--zone-pl-h);
  background: rgba(15,15,15,0.88);
  backdrop-filter: blur(2px);
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  z-index: 35;
  display:none;
}
.cdj-player.is-playlist-open .cdj-playlist,
.cdj-player.is-playlist-open .cdj-playlist-overlay{ display:block; }

.cdj-playlist .cdj-pl-head{
  height: 34px;
  display:flex;
  align-items:center;
  padding: 0 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Variante markup "overlay" (patch2B) */
.cdj-playlist-overlay .cdj-playlist-inner{
  width:100%; height:100%;
  display:flex; flex-direction:column;
}
.cdj-playlist-overlay .cdj-playlist-head,
.cdj-playlist-overlay .cdj-playlist-head *{ box-sizing:border-box; }
.cdj-playlist-overlay .cdj-playlist-head{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  font-size:13px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cdj-playlist-overlay .cdj-playlist-close{
  width:28px; height:28px;
  border:0; background:transparent; color:#fff;
  font-size:22px; line-height:1;
  cursor:pointer;
}
.cdj-playlist-overlay .cdj-playlist-list{
  flex:1;
  overflow:auto;
}

/* Mobile/tablette: désactiver le player (FO) */
@media (max-width: 1024px), (pointer: coarse){
  .cdj-player-host{ display:none !important; }
}

.cdj-playlist .cdj-pl-body{
  height: calc(100% - 34px);
  overflow:auto;
}

.cdj-playlist table{ width:100%; border-collapse:collapse; font-size: 14px; }
.cdj-playlist td{ padding:6px 8px; color: rgba(255,255,255,0.9); border-bottom: 1px solid rgba(255,255,255,0.06); }
.cdj-playlist tr.is-active td{ background: rgba(33,115,255,0.55); }
.cdj-playlist td.col-idx{ width: 54px; color: rgba(255,255,255,0.7); text-align:right; }
.cdj-playlist td.col-title{ width: 360px; }
.cdj-playlist td.col-artist{ width: 220px; color: rgba(255,255,255,0.75); }
.cdj-playlist td.col-bpm{ width: 70px; text-align:right; }
.cdj-playlist td.col-key{ width: 60px; text-align:right; }

/* Quand la playlist est ouverte, on gèle visuellement l'animation: JS stoppe le RAF */