/* ========================================
   LOOPS - Loop card component styles
   Cards, metadata, actions, dropdowns, responsive
   ======================================== */

/* ========== LOOPS CONTENT ========== */
#loops-content {
  display: none;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
}

#loops-content.active {
  display: flex;
}

#loops-content.active ~ .loop-bottom-header {
  display: flex;
}

#loops-content > * {
  flex-shrink: 0;
}

/* Legacy grid Browse — supprimer les artefacts visuels quand vide */
#loopsGrid {
  border-top: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* ========== LOOPS STACK ========== */
.loops-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding-bottom: 0;
  margin-bottom: 32px;
  flex-shrink: 0;
  min-width: 0;
  container-type: inline-size;
  border-top: 0.5px solid var(--border-subtle);
}

/* Page Sounds — évite que la pagination remonte quand la grille se vide au fetch */
.all-loops-grid-wrap {
  position: relative;
  min-height: 0;
}

.all-loops-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(32px, 8vh, 72px) 24px;
  min-height: 180px;
  color: var(--fg-hint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-family: 'Satoshi', 'Plus Jakarta Sans', sans-serif;
}

.all-loops-spinner-ring {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.52);
  border-radius: 50%;
  animation: all-loops-spin 0.65s linear infinite;
}

[data-theme="dark"] .all-loops-spinner-ring {
  border-color: rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.65);
}

@keyframes all-loops-spin {
  to {
    transform: rotate(360deg);
  }
}

/* .is-loading → utiliser .pagination-loading défini dans shared.css */

/* Pagination Sounds — hérite de .pagination dans shared.css */

/* ========== LOOP CARD ========== */
.loop-card {
  /* Variables de mise en page — surchargées par les container queries */
  --lc-cover:    38px;
  --lc-play:     28px;
  --lc-wave:     clamp(100px, 28%, 260px);
  --lc-gap:      14px;
  --lc-pad:      9px 0;
  /* Colonnes meta fixes : même largeur sur chaque carte → le 1fr (info) ne bouge pas, waveform aligné */
  --lc-meta-bpm:  40px;
  --lc-meta-key:  54px;
  --lc-meta-lic:  50px;
  --lc-meta-cr:   54px;
  --lc-meta-inner-gap: 9px;
  --lc-meta-pad-x: 8px;
  --lc-meta-width: calc(
    var(--lc-meta-bpm) + var(--lc-meta-key) + var(--lc-meta-lic) + var(--lc-meta-cr)
    + (3 * var(--lc-meta-inner-gap)) + (2 * var(--lc-meta-pad-x))
  );

  position: relative;
  display: grid;
  grid-template-columns: var(--lc-cover) 1fr var(--lc-wave) var(--lc-meta-width) min-content;
  grid-template-areas: "cover info waveform meta actions";
  align-items: center;
  gap: var(--lc-gap);
  padding: var(--lc-pad);
  background: transparent;
  border-radius: 0;
  border-bottom: 0.5px solid var(--border-subtle);
  transition: background-color 0.15s ease;
  cursor: default;
  overflow: visible;
  min-width: 0;
  width: 100%;
}

/* Layout sans waveform (ForYou, etc.) */
.loop-card[data-no-waveform] {
  grid-template-columns: var(--lc-cover) minmax(130px, 1fr) var(--lc-meta-width) min-content;
  grid-template-areas: "cover info meta actions";
}
.loop-card[data-no-waveform] .loop-waveform {
  display: none;
}

/* Layout compact (Charts Rows) */
.loop-card[data-compact] {
  grid-template-columns: 40px 1fr;
  grid-template-areas: "cover info";
  gap: 6px;
  padding: 5px 8px;
}
.loop-card[data-compact] .loop-waveform,
.loop-card[data-compact] .loop-meta {
  display: none;
}
.loop-card[data-compact] .loop-inline-meta {
  display: block;
}
.loop-card[data-compact] .loop-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
  background: transparent;
}
.loop-card[data-compact]:hover .loop-actions {
  opacity: 1;
  pointer-events: auto;
}
.loop-card[data-compact] .loop-actions:has(.loop-more-menu.loop-more-open) {
  opacity: 1;
  pointer-events: auto;
}

/* Dark mode pour loop card */
[data-theme="dark"] .loop-card {
  background: transparent;
  border-bottom: 0.5px solid var(--border-subtle);
}

/* S'assurer que chaque zone grid respecte ses limites */
.loop-card > * {
  min-width: 0;
  overflow: hidden;
}

.loop-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.loop-drag-preview {
  position: fixed;
  top: -100vh;
  background: #000;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.loop-drag-preview small {
  opacity: 0.7;
  font-size: 12px;
}

.loop-card:hover {
  background: var(--hover-overlay);
}
[data-theme="dark"] .loop-card:hover {
  background: var(--hover-overlay);
}

/* Actions : légèrement atténuées au repos, pleines au hover */
.loop-card:not([data-compact]) .loop-actions {
  opacity: 0.65;
  transition: opacity 0.2s ease;
}
.loop-card:not([data-compact]):hover .loop-actions {
  opacity: 1;
}
/* Menu ⋮ ouvert : pas d’atténuation du parent (.loop-actions a opacity .65 hors hover) */
.loop-card:not([data-compact]) .loop-actions:has(.loop-more-menu.loop-more-open) {
  opacity: 1;
}

/* Tags : plus visibles au hover */
.loop-card:not(:hover) .loop-tags {
  opacity: 0.55;
}

/* ========== PACK COVER (+ play centré sur l’image) ========== */
.loop-card .pack-cover-small {
  grid-area: cover;
  width: var(--lc-cover);
  height: var(--lc-cover);
  border-radius: var(--card-thumb-radius);
  overflow: hidden;
  flex-shrink: 0;
  background: #f0f0f0;
  position: relative;
}

[data-theme="dark"] .loop-card .pack-cover-small {
  background: #2a2a2a;
}

.loop-card .pack-cover-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.loop-card .pack-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: var(--text-secondary);
}

.loop-card .pack-placeholder::before {
  content: "";
  width: 28px;
  height: 28px;
  background: currentColor;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8C20.9996 7.64928 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.27L13 2.27C12.696 2.09446 12.3511 2.00205 12 2.00205C11.6489 2.00205 11.304 2.09446 11 2.27L4 6.27C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64928 3 8V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.9979 12 21.9979C12.3511 21.9979 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z"/><path d="M3.27 6.96L12 12.01L20.73 6.96"/><path d="M12 22.08V12"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.loop-card .pack-image {
  grid-area: pack;
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 10px;
  overflow: hidden;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .loop-card .pack-image {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  background: #2a2a2a;
}

.loop-card .pack-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.loop-card .pack-image::before {
  content: "🎵";
  font-size: 24px;
  position: absolute;
  opacity: 0.5;
}

.loop-card .pack-image img + ::before {
  display: none;
}

/* ========== PLAY (overlay sur la cover) ========== */
/* Visible au survol de la carte, au focus clavier, ou tant que la lecture est active */
.loop-card .pack-cover-small .play-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(28px, calc(var(--lc-cover) * 0.62));
  height: min(28px, calc(var(--lc-cover) * 0.62));
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  border-radius: 50%;
  transition: opacity 0.18s ease;
  z-index: 4;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
}

.loop-card:hover .pack-cover-small .play-container,
.loop-card:focus-within .pack-cover-small .play-container,
.loop-card .pack-cover-small .play-container:has(input:checked) {
  opacity: 1;
  pointer-events: auto;
}

.loop-card .pack-cover-small .play-container:hover {
  transform: translate(-50%, -50%);
}

.loop-card .pack-cover-small:hover .play-container {
  background: transparent;
}

.loop-card .play-container input {
  display: none;
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.loop-card .play-container svg {
  width: 14px;
  height: 14px;
  fill: #FCFCFC;
  position: absolute;

}

[data-theme="dark"] .loop-card .play-container svg {
  fill: #ffffff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.loop-card .play-container .play {
  display: block;
  margin-left: 2px;
}

.loop-card .play-container .pause {
  display: none;
}

.loop-card .play-container input:checked ~ .play {
  display: none;
}

.loop-card .play-container input:checked ~ .pause {
  display: block;
}

/* ========== WAVEFORM ========== */
.loop-card .loop-waveform {
  grid-area: waveform;
  width: 100%;
  min-width: 0;
  height: 28px;
  background: transparent;
  overflow: hidden;
  position: relative;
  z-index: 1;
  align-self: center;
}

.loop-card .loop-waveform > div {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
}

.loop-card .loop-waveform svg {
  width: 100% !important;
  height: 100% !important;
}

/* ========== LOOP INFO ========== */
.loop-card .loop-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  z-index: 10;
  position: relative;
}

.loop-card .loop-info a {
  pointer-events: auto;
  position: relative;
  z-index: 20;
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
}

.loop-card .loop-info h3 {
  font-size: var(--font-size-base);
  font-weight: var(--section-title-weight);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.35;
  padding-bottom: 0.06em;
  position: relative;
  max-width: 100%;
  display: block;
}

.loop-card .loop-info h3 .loop-title-pack,
.loop-card .loop-info h3 .loop-title-open,
.loop-card .loop-info h3 .loop-title-text {
  color: inherit;
  font: inherit;
  font-weight: var(--section-title-weight);
  text-decoration: none;
  display: inline;
  transition: color 0.2s ease;
}

.loop-card .loop-info h3 .loop-title-pack,
.loop-card .loop-info h3 .loop-title-open {
  cursor: pointer;
}

.loop-card .loop-info h3 .loop-title-pack:hover,
.loop-card .loop-info h3 .loop-title-open:hover {
  color: #667eea;
}

[data-theme="dark"] .loop-card .loop-info h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .loop-card .loop-info h3 .loop-title-pack:hover,
[data-theme="dark"] .loop-card .loop-info h3 .loop-title-open:hover {
  color: #667eea;
}

.loop-card .loop-info p {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  cursor: default;
  transition: color 0.2s ease;
  max-width: 100%;
  display: block;
}

[data-theme="dark"] .loop-card .loop-info p {
  color: var(--text-muted);
}

/* Les liens des créateurs gardent leur interactivité */
.loop-card .loop-info p a:hover {
  text-decoration: underline !important;
}

/* ========== INLINE META (BPM · KEY · CR) ========== */
/* Affiché quand .loop-meta est masqué (compact ou container étroit) */
.loop-card .loop-inline-meta {
  display: none;
  font-size: 10px;
  color: #888;
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Satoshi', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.2px;
}
[data-theme="dark"] .loop-card .loop-inline-meta {
  color: var(--text-tertiary);
}


/* ========== LOOP METADATA ========== */
.loop-card .loop-meta {
  grid-area: meta;
  display: grid;
  grid-template-columns: var(--lc-meta-bpm) var(--lc-meta-key) var(--lc-meta-lic) var(--lc-meta-cr);
  column-gap: var(--lc-meta-inner-gap);
  row-gap: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 var(--lc-meta-pad-x);
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: var(--section-title-weight);
  white-space: nowrap;
  transition: color 0.3s ease;
  overflow: visible;
}

/* Dark mode pour loop meta */
[data-theme="dark"] .loop-card .loop-meta {
  color: var(--text-tertiary);
}

/* Meta Item - Vertical Card Style */
.loop-card .loop-meta .meta-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  justify-self: center;
}

.loop-card .loop-meta .meta-item.license-tier-trigger {
  cursor: pointer;
  border-radius: 8px;
  padding: 2px 6px;
  margin: -2px -6px;
  outline: none;
  transition: background 0.15s ease;
}

.loop-card .loop-meta .meta-item.license-tier-trigger:hover {
  background: rgba(128, 128, 128, 0.12);
}

.loop-card .loop-meta .meta-item.license-tier-trigger:focus-visible {
  box-shadow: 0 0 0 2px rgba(124, 120, 255, 0.45);
}

/* Rapprocher LICENSE ↔ CREDITS (valeurs courtes centrées = trop d’air) */

.loop-card .loop-meta .meta-value {
  font-size: 11px;
  font-weight: var(--section-title-weight);
  color: var(--text-primary);
  line-height: 1.1;
  transition: color 0.3s ease;
  font-family: 'Satoshi', 'Plus Jakarta Sans', sans-serif;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .loop-card .loop-meta .meta-value {
  color: var(--text-primary);
}

.loop-card .loop-meta .meta-label {
  font-size: var(--font-size-xs);
  font-weight: var(--section-title-weight);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  transition: color 0.3s ease;
  font-family: 'Satoshi', 'Plus Jakarta Sans', sans-serif;
}

[data-theme="dark"] .loop-card .loop-meta .meta-label {
  color: var(--text-muted);
}


/* ========== LOOP TAGS (Simple Text) ========== */
.loop-card .loop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 10px;
  color: #999;
  line-height: 1.3;
  margin-top: 2px;
  transition: color 0.3s ease, opacity 0.2s ease;
}

[data-theme="dark"] .loop-card .loop-tags {
  color: var(--text-tertiary);
}

.loop-card .loop-tags span {
  white-space: nowrap;
}

.loop-card .loop-tags span:not(:last-child)::after {
  content: '•';
  margin-left: 4px;
  opacity: 0.5;
}

/* ========== LOOP ACTIONS ========== */
.loop-card .loop-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  z-index: 10;
  flex-shrink: 0;
  min-width: 0;
  overflow: visible;
}

.loop-actions-separate {
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.loop-actions-separate .like-container {
  grid-area: like;
}

.loop-actions-separate .Btn {
  grid-area: download;
}


/* Quick Access specific styles */
#quick-access-loops .loops-stack,
#quickAccessLoopsGrid {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-bottom: 20px;
}


/* Dropdown styles (TEMPO & KEY) moved to filters.css */

/* ========== SKELETON LOADERS ========== */
.waveform-skeleton {
  width: 100%;
  height: 56px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 3 dots loading simple et conventionnel */
.waveform-skeleton::before,
.waveform-skeleton::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ACACAC;
  animation: waveform-dot-pulse 1.4s ease-in-out infinite;
}

.waveform-skeleton::before {
  animation-delay: 0s;
}

.waveform-skeleton::after {
  animation-delay: 0.4s;
}

/* Dot du milieu (pseudo-element sur un span injecté) */
.waveform-skeleton {
  position: relative;
}

.waveform-skeleton > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ACACAC;
  animation: waveform-dot-pulse 1.4s ease-in-out infinite;
  animation-delay: 0.2s;
}

[data-theme="dark"] .waveform-skeleton::before,
[data-theme="dark"] .waveform-skeleton::after,
[data-theme="dark"] .waveform-skeleton > span {
  background: #6B7280;
}

@keyframes waveform-dot-pulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.loop-card-skeleton {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  animation: skeleton-fade 1.5s ease-in-out infinite;
}

[data-theme="dark"] .loop-card-skeleton {
  background: #1a1a1a;
}

.skeleton-image {
  width: 60px;
  height: 60px;
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #d0d0d0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 8px;
}

[data-theme="dark"] .skeleton-image {
  background: linear-gradient(
    90deg,
    #2a2a2a 25%,
    #333333 50%,
    #2a2a2a 75%
  );
}

.skeleton-text {
  height: 16px;
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #d0d0d0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}

[data-theme="dark"] .skeleton-text {
  background: linear-gradient(
    90deg,
    #2a2a2a 25%,
    #333333 50%,
    #2a2a2a 75%
  );
}

.skeleton-text:last-child {
  width: 60%;
}

@keyframes skeleton-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}