/* ===== Scoped: #content div[name="spotify"] ===== */

#content div[name="spotify"]{
  --album: 170px;           /* cover in header */
  --albumPad: 4px;

  /* NEW — playlists (left) */
  --pl-cover: 60px;         /* thumb size */
  --pl-l1: 18px;            /* title font-size */
  --pl-l2: 15px;            /* subtitle font-size */

  /* NEW — tracks (right) */
  --tr-cover: 40px;
  --tr-l1: 16px;
  --tr-l2: 14px;

  /* keep current spacing */
  --entryPadV: 3px;         /* .entry top/bottom padding */
  --thumbPad: 2px;          /* .thumb inner padding */
}

#content div[name="spotify"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg);
  color: var(--fg);
  position: relative;
}

/* Top bar (60px) */
#content div[name="spotify"] > div[lid="topbar"] {
  flex: 0 0 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

#content div[name="spotify"] > div[lid="topbar"] .left,
#content div[name="spotify"] > div[lid="topbar"] .right {
  display: flex; align-items: center; gap: 10px;
}

#content div[name="spotify"] > div[lid="topbar"] .icon svg {
  width: 22px; height: 22px; display: block;
  color: var(--fg);
}

#content div[name="spotify"] > div[lid="topbar"] .devicePick {
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f172a;
  color: var(--fg);
  padding: 0 10px;
  outline: none;
  /* width depends on content */
  width: auto;
  max-width: 40vw;
}

/* Reuse circular button vibe; larger here */
#content div[name="spotify"] .round {
  width: 36px; height: 36px; border-radius: 999px;
  background: #0f172a; border: 1px solid var(--border);
  display: grid; place-items: center; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s, transform .12s;
  color: var(--fg);
}
#content div[name="spotify"] .round:hover {
  color: var(--ac); border-color: var(--ac); background: rgba(124,77,255,.10);
  box-shadow: 0 6px 18px rgba(124,77,255,.22); transform: translateY(-0.4px);
}
#content div[name="spotify"] .round svg { width: 18px; height: 18px; }

/* Header (120px) with centered content */
#content div[name="spotify"] > div[lid="header"] {
  flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bg);
  padding: 8px 0;
}

#content div[name="spotify"] > div[lid="header"] .hero {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}

#content div[name="spotify"] .coverWrap {
  position: relative;
  width: var(--album); height: var(--album);
  padding: var(--albumPad);
  border-radius: 12px;
  background: var(--panel);
}
#content div[name="spotify"] .cover {
  width: 100%; height: 100%; display: block;
  border-radius: 8px;
  object-fit: cover; /* scales up smaller images */
}

/* Overlay controls (only on image hover) */
#content div[name="spotify"] .coverWrap .overlay {
  position: absolute; inset: 4px;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  display: none; /* shown on hover */
  align-items: center; justify-content: center;
  inset: var(--albumPad);
}
#content div[name="spotify"] .coverWrap:hover .overlay { display: flex; }

#content div[name="spotify"] .coverWrap .ctrls {
  display: flex; align-items: center; gap: 10px;
  padding: 6px;
}

#content div[name="spotify"] .coverWrap .ctrls .round:hover{
  background: var(--fg);
}

#content div[name="spotify"] .round.lg { width: 40px; height: 40px; }
#content div[name="spotify"] .round.xl { width: 48px; height: 48px; }
#content div[name="spotify"] .round.lg svg { width: 20px; height: 20px; }
#content div[name="spotify"] .round.xl svg { width: 22px; height: 22px; }

#content div[name="spotify"] .labels .title {
  font-weight: 700; font-size: 15px;
  text-align: center;
}
#content div[name="spotify"] .labels .subtitle {
  font-style: italic; font-size: 13px; opacity: .9;
  text-align: center;
}

/* Two panes (40% / 60%) */
#content div[name="spotify"] > div[lid="panes"] {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}
#content div[name="spotify"] .pane {
  background: var(--bg-sec);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden; /* clip inner radius */
  display: flex; flex-direction: column; min-height: 0;
  position: relative; 
}
#content div[name="spotify"] .pane .list {
  flex: 1 1 auto; overflow: auto; min-height: 0;
  padding: 6px; /* small inset for entries */
}

/* ===== Entry template styling (scoped) ===== */
#content div[name="spotifyEntry"] .entry,
#content div[name="spotify"] .entry {
  height: auto;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 8px;
  background: var(--bg-sec);
  border-radius: 8px;
  padding: 2px 8px 2px 2px;
  user-select: none;
  transition: background .12s ease, box-shadow .12s ease;
  overflow: hidden; /* keep it clean */
}
#content div[name="spotify"] .list .entry + .entry { margin-top: 6px; }


#content div[name="spotify"] .pane.left .entry{
  min-height: calc(var(--pl-cover) + 2*var(--thumbPad) + 2*var(--entryPadV));
}
#content div[name="spotify"] .pane.right .entry{
  min-height: calc(var(--tr-cover) + 2*var(--thumbPad) + 2*var(--entryPadV));
}

#content div[name="spotify"] .pane.left  .entry .thumb{ width: var(--pl-cover); height: var(--pl-cover); }
#content div[name="spotify"] .pane.right .entry .thumb{ width: var(--tr-cover); height: var(--tr-cover); }

#content div[name="spotify"] .pane.left  .entry .meta .l1{ font-size: var(--pl-l1); }
#content div[name="spotify"] .pane.left  .entry .meta .l2{ font-size: var(--pl-l2); }

#content div[name="spotify"] .pane.right .entry .meta .l1{ font-size: var(--tr-l1); }
#content div[name="spotify"] .pane.right .entry .meta .l2{ font-size: var(--tr-l2); }

/* playlists hover = your existing darker-on-hover */
#content div[name="spotify"] .pane.left .entry:hover{
  background: color-mix(in srgb, var(--bg-sec) 85%, #000 15%);
  cursor: pointer;
}

/* tracks hover = same look as selected */
#content div[name="spotify"] .pane.right .entry:hover{
  background: color-mix(in srgb, var(--bg-sec) 88%, var(--ac) 12%);
  box-shadow: inset 0 0 0 1px rgba(124,77,255,.25);
  cursor: pointer;
}

/* Thumbnail with 1px padding + rounded corners */
#content div[name="spotifyEntry"] .entry .thumb,
#content div[name="spotify"] .entry .thumb {
  width: 30px; height: 30px; padding: 1px;
  border-radius: 6px; background: var(--panel);
  display: grid; place-items: center;
  transition: box-shadow .12s ease, outline-color .12s ease;
}
#content div[name="spotifyEntry"] .entry .thumb img,
#content div[name="spotify"] .entry .thumb img {
  width: 100%; height: 100%; border-radius: 4px; object-fit: cover; display: block;
}

/* Meta text (bold + italic) */
#content div[name="spotifyEntry"] .entry .meta,
#content div[name="spotify"] .entry .meta {
  min-width: 0; display: grid; line-height: 1.1;
}
#content div[name="spotifyEntry"] .entry .meta .l1,
#content div[name="spotify"] .entry .meta .l1 {
  font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#content div[name="spotifyEntry"] .entry .meta .l2,
#content div[name="spotify"] .entry .meta .l2 {
  font-style: italic; font-size: 12px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Scrollbar consistency inside lists (optional) */
#content div[name="spotify"] .list::-webkit-scrollbar { width: 10px; height: 10px; }
#content div[name="spotify"] .list::-webkit-scrollbar-track { background: var(--bg-sec); }
#content div[name="spotify"] .list::-webkit-scrollbar-thumb {
  background: var(--border); border: 2px solid var(--bg-sec); border-radius: 10px;
}
#content div[name="spotify"] .list::-webkit-scrollbar-thumb:hover { background: var(--ac); }


/* full-cover overlay */
#content div[name="spotify"] > div[lid="overlayAuth"]{
  position: absolute; inset: 0;
  display: none;            /* toggle with .show */
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.8);
  z-index: 50;
}

/* show state (add/remove this class in JS if needed) */
#content div[name="spotify"] > div[lid="overlayAuth"].show{ display: flex; }

/* dialog box */
#content div[name="spotify"] > div[lid="overlayAuth"] .box{
  background: var(--panel);           /* same as topbar */
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 16px 18px;
  min-width: 260px; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}

/* texts */
#content div[name="spotify"] > div[lid="overlayAuth"] .title{
  font-weight: 800; font-size: 18px; line-height: 1.2;
}
#content div[name="spotify"] > div[lid="overlayAuth"] .desc{
  font-size: 14px; opacity: .9;
}
#content div[name="spotify"] > div[lid="overlayAuth"] .pad{ height: 8px; }

/* button */
#content div[name="spotify"] > div[lid="overlayAuth"] .btn{
  background: #111827;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s, transform .12s;
}
#content div[name="spotify"] > div[lid="overlayAuth"] .btn:hover{
  color: var(--ac); border-color: var(--ac); background: rgba(124,77,255,.10);
  box-shadow: 0 6px 18px rgba(124,77,255,.22); transform: translateY(-0.4px);
}
#content div[name="spotify"] > div[lid="overlayAuth"] .btn:focus{
  outline: 2px solid var(--ac); outline-offset: 2px;
}

/* Position the heart in the overlay, top-right with a bit of padding */
#content div[name="spotify"] .coverWrap .overlay .fav{
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;           /* invisible hit area */
  display: grid; place-items: center;
  border-radius: 999px;
  cursor: pointer;
}

/* Match overlay icon size (like button SVGs) */
#content div[name="spotify"] .coverWrap .overlay .fav svg{
  width: 22px; height: 22px;           /* same as .round.xl svg */
  color: var(--fg);
  transition: color .15s, filter .15s, transform .12s;
}

/* Shine like button hover */
#content div[name="spotify"] .coverWrap .overlay .fav:hover svg{
  color: var(--ac);
  filter: drop-shadow(0 6px 18px rgba(124,77,255,.22))
          drop-shadow(0 0 8px rgba(124,77,255,.28));
  transform: translateY(-0.4px);
}

#content div[name="spotify"] .pane > .listOverlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
  display: none; align-items: center; justify-content: center;
  z-index: 2;
}
#content div[name="spotify"] .pane > .listOverlay.show{ display: flex; }

#content div[name="spotify"] .pane > .listOverlay .spinner{
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: spn 1s linear infinite;
}
@keyframes spn { to { transform: rotate(360deg); } }

/* Selected entry style — soft accent, overrides hover */
#content div[name="spotify"] .entry.is-selected,
#content div[name="spotifyEntry"] .entry.is-selected {
  background: color-mix(in srgb, var(--bg-sec) 88%, var(--ac) 12%);
  box-shadow: inset 0 0 0 1px rgba(124,77,255,.25);
}
#content div[name="spotify"] .entry.is-selected:hover,
#content div[name="spotifyEntry"] .entry.is-selected:hover {
  background: color-mix(in srgb, var(--bg-sec) 85%, var(--ac) 15%);
}