/* ─────────────────────────────────────────────
   MV Player — Polish layer (safe UI-only tweaks)
   Goal: clickable cues, hover states, focus rings,
         better empty states, spacing consistency.
   No core behavior changes.
   ───────────────────────────────────────────── */

/* ---------- Global focus rings (keyboard-friendly) ---------- */
/* Stronger selector + remove theme outline/box-shadow */
.mv-player-shell :is(a, button, input, textarea, select, [tabindex]):focus {
  outline: none !important;
  box-shadow: none !important;
}

.mv-player-shell :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid rgba(0,255,163,0.85) !important;
  outline-offset: 3px;
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(0,255,163,0.18) !important;
}

/* ---------- Clickable cues ---------- */

/* Left-rail playlist items feel tappable */
#mvLibraryList li a.mv-lib-item {
  display: block;
  padding: 6px 8px 6px 1.15rem; /* keep dot spacing */
  border-radius: 10px;
  text-decoration: none;
}

#mvLibraryList li a.mv-lib-item:hover {
  background: rgba(255,255,255,0.06);
}

#mvLibraryList li a.mv-lib-item.is-active {
  background: rgba(255,255,255,0.08);
}

/* Playlist Play pill hover polish */
#mvPlaylistPlayBtn:not(.is-disabled):hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#mvPlaylistPlayBtn.is-disabled {
  cursor: default;
}

/* Popular song cards: make “this is clickable” obvious */
.mv-popular-songs .mv-song-card {
  cursor: pointer;
  border-radius: 14px;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out, background 140ms ease-out;
}

.mv-popular-songs .mv-song-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* ---------- Search polish ---------- */
#mvTrackSearch {
  border-radius: 999px;
  padding-left: 14px;
  padding-right: 14px;
}

/* ─────────────────────────────────────────────
   MV Player — Empty state (Left Rail Playlists)
   ───────────────────────────────────────────── */

.mv-empty-state{
  margin-top: .35rem;
  padding: .65rem .6rem .75rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}

.mv-empty-state__title{
  font-weight: 700;
  font-size: .85rem;
  margin: 0 0 .25rem;
  opacity: .92;
}

.mv-empty-state__desc{
  font-size: .78rem;
  line-height: 1.25;
  opacity: .72;
  margin: 0 0 .6rem;
}

/* Button matches MV vibe (gold accent) */
.mv-empty-state__btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;

  padding: .5rem .7rem;
  border-radius: 999px;

  border: 1px solid rgba(255, 213, 74, 0.55);
  background: rgba(255, 213, 74, 0.12);
  color: #ffd54a;

  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .02em;

  cursor: pointer;
  user-select: none;
  transition: transform 120ms ease, filter 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.mv-empty-state__btn:hover{
  filter: brightness(1.08);
  background: rgba(255, 213, 74, 0.18);
  border-color: rgba(255, 213, 74, 0.75);
  transform: translateY(-1px);
}

.mv-empty-state__btn:active{
  transform: translateY(0px);
  filter: brightness(1.0);
}

/* Keyboard focus ring (MV green, not browser white) */
.mv-empty-state__btn:focus,
.mv-empty-state__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 0 4px rgba(0, 255, 163, 0.55);
}


/* ─────────────────────────────────────────────
   Left rail: theme is applying a white ring to the ROW (li) via :focus-within
   Replace it with MV green ring
   ───────────────────────────────────────────── */

/* 1) Kill any theme outline/box-shadow applied to the <li> when a child is focused */
#mvLibraryList > li:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* 2) Apply OUR ring to the row when tabbing onto the playlist link */
#mvLibraryList > li:focus-within {
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(0,255,163,0.90), 0 0 0 6px rgba(0,255,163,0.18) !important;
}

/* 3) Also ensure the anchor itself isn't adding a competing ring */
#mvLibraryList a.mv-lib-item:focus,
#mvLibraryList a.mv-lib-item:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────
   MV Player — Playlist Manager panel button polish
   (Use / Rename / Delete)
   ───────────────────────────────────────────── */

/* Row layout: title left, buttons right */
#mvPlaylistPanel .mv-pl-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .45rem .25rem;
}

#mvPlaylistPanel .mv-pl-row__title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  opacity: .95;
}

/* Actions: tight, aligned, consistent spacing */
#mvPlaylistPanel .mv-pl-row__actions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  white-space: nowrap;
}

/* Base button styling */
#mvPlaylistPanel .mv-btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  line-height: 26px;
  padding: 0 .55rem;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  transition: transform 120ms ease-out, background-color 140ms ease-out, border-color 140ms ease-out;
}

#mvPlaylistPanel .mv-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-1px);
}

#mvPlaylistPanel .mv-btn:active{
  transform: translateY(0);
}

/* “Use” = primary */
#mvPlaylistPanel .mv-btn.mv-pl-use{
  background: #ff9d2

  /* ─────────────────────────────────────────────
   Player Page — Clickable cues + hover + keyboard focus
   Scoped to Player template markup classes
   ───────────────────────────────────────────── */

/* Track cards (Popular Songs) */
.mv-popular-songs .mv-song-card{
  cursor: pointer;
  transition: transform 140ms ease-out, box-shadow 160ms ease-out, filter 160ms ease-out;
}

.mv-popular-songs .mv-song-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  filter: brightness(1.03);
}

/* Keyboard focus (when cards become focusable via JS or native elements inside) */
.mv-popular-songs .mv-song-card:focus-within{
  box-shadow: 0 0 0 2px rgba(0,255,163,.55), 0 12px 28px rgba(0,0,0,.28);
}

/* Add-to-playlist (+) and Like (heart) buttons inside cards */
.mv-popular-songs .mv-song-card button,
.mv-popular-songs .mv-song-card .mv-btn,
.mv-popular-songs .mv-song-card .mv-add-to-playlist{
  transition: transform 120ms ease-out, filter 140ms ease-out;
}

.mv-popular-songs .mv-song-card button:hover,
.mv-popular-songs .mv-song-card .mv-btn:hover,
.mv-popular-songs .mv-song-card .mv-add-to-playlist:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* Playlist tracks panel (center list) — make rows feel clickable */
#mvPlaylistTracks .mv-pl-row,
#mvPlaylistTracks li{
  cursor: pointer;
  border-radius: 12px;
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}

#mvPlaylistTracks .mv-pl-row:hover,
#mvPlaylistTracks li:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* Focus ring for playlist rows if they contain links/buttons */
#mvPlaylistTracks .mv-pl-row:focus-within,
#mvPlaylistTracks li:focus-within{
  box-shadow: 0 0 0 2px rgba(0,255,163,.55);
}

/* Small polish: search field focus */
#mvTrackSearch:focus,
#mvTrackSearch:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,255,163,.30);
}