/* ─ Shared SongRow (used by Tracks hub, SearchBrowsePage) ─ */

.song-list-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 72px;
  gap: var(--space-3);
  align-items: center;
  height: 52px;
  padding: 0 var(--space-3);
  font-size: 13px;
  cursor: default;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--row-divider);
}

.song-list-row:hover {
  background: var(--row-hover);
}

.song-list-row.is-current {
  background: var(--row-playing-bg);
}

.song-list-row.is-current .song-list-row-title {
  color: var(--row-playing-text);
}

.song-list-row--header {
  height: 36px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--col-header-text);
  cursor: default;
  /* Header lives inside the scroll container so its width matches the rows'
     (scrollbar gutter applies to both). Sticky keeps it pinned while scrolling
     and the opaque background hides rows passing underneath. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
  border-bottom: 1px solid var(--row-divider);
}

/* Header is sticky and opaque — keep its card background on hover so the
   generic .song-list-row:hover rule doesn't turn it transparent (which let
   rows scrolling underneath bleed through). */
.song-list-row--header:hover {
  background: var(--bg-card);
}

.song-list-row-cell {
  min-width: 0;
}

.song-list-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.song-list-row-title {
  font-weight: 500;
  color: var(--row-text);
}

.song-list-row-genre {
  color: var(--row-text-muted);
  font-size: 12px;
}

.song-list-row-duration {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--row-text-muted);
  font-size: 12px;
}

.song-list-row--with-bpm {
  grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 48px 72px;
}

.song-list-row-bpm {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--row-text-muted);
  font-size: 12px;
}

.song-list-row-btn {
  background: transparent;
  border: none;
  color: var(--row-text-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.song-list-row-btn:hover {
  background: var(--row-hover);
  color: var(--row-text);
}

.song-list-row-btn--play {
  color: var(--accent);
}

.song-list-row-btn--play:hover {
  background: var(--accent);
  color: var(--text-on-accent);
}

.song-list-row.is-current .song-list-row-btn--play {
  color: var(--accent);
}

