/* ---------- Global Player ---------- */
#audioPlayerSection {
  position: fixed;
  top: 50px; 
  left: 0;
  right: 0;
  background-color: #3a3a3a;
  padding: 10px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100px;
}

#playerHeader {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.current-track {
  color: #fff; 
  font-size: 18px;
  font-weight: bold;
  flex-grow: 1;
}

/* ---------- Waveform & Time Display ---------- */
.waveform-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 80px;
  margin-bottom: 5px;
}

.waveform-cursor {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: white;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}

#waveform {
  min-width: 1200px;
  transition: opacity 0.3s ease-in-out;
}

#waveform.loading {
  opacity: 0;
}

/* Time display en overlay sur la waveform */
#timeDisplay {
  position: absolute;
  bottom: 5px;
  right: 10px;
  color: white;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 4px;
  border-radius: 3px;
  z-index: 11;
}

/* ---------- Spinner ---------- */
.spinner {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid white;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  z-index: 10;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---------- Equalizer ---------- */
@keyframes equalize {
  from { transform: scaleY(0.5); }
  to { transform: scaleY(1.5); }
}
.bar {
  width: 3px;
  height: 5px;
  background-color: #FFD700;
  margin: 0 1px;
  animation: equalize 0.4s ease-in-out infinite alternate;
}
.equalizer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
/* ---------- Contrôles & Filtres ---------- */
#controlsContainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* permet de passer à la ligne si nécessaire */
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  position: relative;
  z-index: 210;
  gap: 6px;
}

#playerControls {
  display: flex;
  flex-wrap: wrap; /* les boutons passent à la ligne si manque de place */
  align-items: center;
  gap: 6px;
}

#filterControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

#playerControls button,
#filterControls button,
#randomButton,
.download-links a,
#searchDesktop input,
#searchDesktop button {
  flex: 1 1 auto; /* largeur flexible */
  min-width: 40px;
  padding: 8px 12px;
  font-size: clamp(12px, 1.5vw, 16px); /* taille adaptative */
  background-color: #444;
  color: white;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

#playerControls button:hover,
#filterControls button:hover,
#randomButton:hover,
.download-links a:hover,
#searchDesktop button:hover {
  background-color: #666;
  transform: scale(1.05);
}

#playerControls button i {
  margin-right: 4px;
}

button.active {
  background-color: #179d3b !important;
  color: white !important;
}

#previewInfoBtn.filter-button {
  background-color: #ffdddd !important;
  color: #900 !important;
  border: 1px solid #eaa !important;
}

/* Dock des liens de download à droite des contrôles */
.download-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  flex: 1 1 auto;
}

.download-links a {
  border-radius: 6px;
  text-decoration: none;
}

/* Barre de recherche, toujours visible */
#searchDesktop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}

#searchDesktop input {
  border-radius: 6px;
  border: 1px solid #ccc;
  transition: border-color 0.3s;
}

#searchDesktop input:focus {
  outline: none;
  border-color: #b8860b;
}

#searchDesktop button {
  border-radius: 6px;
  background-color: #b8860b;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

#searchDesktop button:hover {
  background-color: #daa520;
}

/* ---------- Playlist ---------- */
.table-container {
  max-width: 100%;
  margin-top: 250px;
  padding: 10px;
  overflow: visible;
  background: transparent;
  z-index: 1;

}

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  background-color: transparent;
  color: #000;
}

th, td {
  border: 0px;
  font-size: 16px;
  padding: 8px;
  text-align: left;
}

th {
  background: lightgray;
  cursor: pointer;
}

.sort-icon {
  margin-left: 10px;
  font-size: 14px;
}

#tracksTable tbody tr.mainRow {
  cursor: pointer;
}

#tracksTable tbody tr.mainRow:hover {
  background-color: #4e6e80;
}

.extraRow {
  background-color: #f9f9f9;
  display: none;
}

.extraRow td {
  padding: 5px 10px;
  font-size: 13px;
}

.playing, .unfolded {
  background-color: #179d3b;
  border: 2px solid #1b4b28;;
  color: white;
}

#tracksTable {
  width: 100%;
  border-collapse: collapse;
}

#tracksTable th,
#tracksTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px;

}

/* Op */
#tracksTable th:nth-child(1),
#tracksTable td:nth-child(1) {
  width: 100px;
}

/* Name */
#tracksTable th:nth-child(2),
#tracksTable td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Style */
#tracksTable th:nth-child(3),
#tracksTable td:nth-child(3) {
  width: 120px;
}

/* BPM */
#tracksTable th:nth-child(4),
#tracksTable td:nth-child(4) {
  width: 100px;
}

/* Year (header + cellules) */
#tracksTable th:nth-child(5),
#tracksTable td:nth-child(5) {
  width: 100px;              /* largeur suffisante pour "Year ▲▼" */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header spécifique pour les flèches dans la cellule */
#tracksTable th:nth-child(5) {
  padding-right: 8px;
  position: relative;
}

/* Flèches bien intégrées dans la cellule */
#tracksTable th:nth-child(5) .sort-icon {
  margin-left: 6px;
  font-size: 12px;
  vertical-align: middle;
  display: inline-block;
}

/* Colonne Version */
#tracksTable th:nth-child(6),
#tracksTable td:nth-child(6) {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Colonne admin + */
#tracksTable td[data-label="+"],
#tracksTable th:last-child {
  width: 50px;
  text-align: center;
}


/* Colonne admin "+" */
.toggleCell {
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  color: #444;
  padding: 6px 10px;
}

/* Effet hover pour la cellule + admin */
.toggleCell:hover {
  background-color: #179d3b;;  /* même couleur que la ligne “playing” */
  color: #fff;
  transform: scale(1.15);
  transition: background 0.8s, transform 0.8s;
}

/* --- Modal Styles --- */
.modal {
  display: none;
  position: fixed;
  z-index: 300;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fefefe;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  text-align: center;
}

.modal-content h3 {
  margin-top: 0;
}

.modal-content .filter-options-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}

.modal-content .options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.modal-content .splitter {
  width: 10px;
  flex-shrink: 0;
}

.modal-content .filter-option {
  padding: 8px;
  background-color: #ddd;
  color: black;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.3s;
  flex: 1 1 80px;
  text-align: center;
}

.modal-content .filter-option:hover {
  background-color: #bbb;
}

.modal-content .filter-option.selected {
  background-color: #32CD32;
  color: black;
  font-weight: bold;
}

.modal-content .modal-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.modal-content button {
  padding: 10px 20px;
  background-color: #444;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.3s;
}

.modal-content button:hover {
  background-color: #666;
}

.alt-toggle-btn {
  padding: 2px 8px;
  font-weight: bold;
  background-color: #3b3684;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.alt-toggle-btn:hover {
  background-color: #bbb;
}

.altRow {
  background-color: #b6ac8c;
  border: 1px solid #000000;
  margin-left: 10px;
  margin-right: 10px;
  display: table-row;
}

.altRow td:first-child {
  border-left: 5px solid #322aa3; /* Marqueur vert */
  border-radius: 4px;
  padding-left: 10px;              /* Décale le texte après la bordure */
}

.altRow.playing,
.altRow.unfolded {
  background-color: #179d3b !important;
  border: 2px solid #1b4b28 !important;
  color: white !important;
}


.altRow td {
  word-wrap: break-word;
  white-space: normal;
  padding: 10px 12px;
  font-size: 15px;
}

.altRow:hover {
  background-color: #a5a5a5;
  cursor: pointer;
}

.altRow button {
  font-size: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.altRow button:hover {
  background-color: rgba(255, 255, 255, 0.496);
}


/* Pour ligne files only */
.fileOnlyRow {
  background-color: rgb(13, 13, 13);
}

.fileOnlyRow.admin-orphan-row {
  background-color: #000 !important;
  color: #fff !important;
}

.fileOnlyRow.admin-orphan-row td {
  color: #fff !important;
}

.restriction-orphan {
  background-color: #111 !important;
  border: 1px solid #fff;
}


.file-only-label { color: rgb(137, 9, 9); font-weight: bold; }
.alt-version-label { color: rgb(88, 81, 81); font-style: italic; }


/* Coloration des lignes selon restriction */
.restriction-free {
  background-color: #2dce2d35; /* Vert très clair */
}

.restriction-member {
  background-color: #3a70a331; /* Bleu pâle */
}

.restriction-vip {
  background-color: #cb9b2247; /* Jaune/orange très clair */
}

.restriction-admin {
  background-color: #ff45456b; /* Rouge clair */
}

.restriction-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: auto;
  margin-top: 2px;
}

/* Utilise la même couleur que les lignes déjà définies */
.restriction-dot.restriction-free {
  background-color: #2dce2d;
}
.restriction-dot.restriction-member {
  background-color: #3a70a3;
}
.restriction-dot.restriction-vip {
  background-color: #cb9b22;
}
.restriction-dot.restriction-admin {
  background-color: #ff4545;
}


.restricted-button.red,
.restricted-button.green {
  display: none !important;
}


/* Cart */

/* Bouton Cart superposé */
.cart {
  position: fixed;       /* superposition au-dessus du contenu */
  top: 15px;             /* distance depuis le haut de la page */
  right: 20px;           /* distance depuis la droite */
  z-index: 1000;         /* au-dessus du menu et autres éléments */
}

.cart a {
  display: flex;
  align-items: center;
  background-color: #3a3a3a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
}

.cart a i {
  margin-right: 5px;  /* espace entre l’icône et le texte */
}

.cart a:hover {
  background-color: #555;
  color: #fff;
}

/* Tracks achetés (au repos ou au survol) */
.purchasedRow {
  background-color: #d8f5d1 !important; /* vert léger */
}
.purchasedRow:hover {
  background-color: #c8eec0 !important; /* vert hover */
}

/* Tracks en lecture (achetés ou pas) */
.playing {
  background-color: #af7723be !important; /* vert foncé standard */
  color: black;
}


/* Badge pour indiquer qu'un track est seulement en preview */
.preview-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 0.75em;
  color: #000000;
  background-color: #8c5d1796; /* orange vif */
  border-radius: 4px;
}

.waveform-preview-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5); /* zone grisée */
  pointer-events: none;
  z-index: 10;
}
#waveform {
  position: relative;
}