/* player.css — styles for the shared player bar (the {{define "player-bar"}}
   partial driven by player.js). Lifted out of app.css so any page that includes
   the player (library, admin Files, …) can load just this alongside app.css,
   which still provides the design tokens, the --player-h spacing token, and the
   generic input[type=range] styling. */

#player-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 10;
  display: flex;
  flex-direction: column;
}
#player-bar.hidden { display: none; }

/* Progress bar */
.progress-wrap {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--range-track);
  cursor: pointer;
  transition: height 100ms ease;
}
.progress-wrap:hover { height: 6px; }
.progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--accent);
  pointer-events: none;
}

/* Three-column grid: track info | controls | time+volume */
.player-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5);
  height: 80px;
}

.player-track { min-width: 0; }
.player-title {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-artist {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ctrl-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease, background 120ms ease;
  padding: 0;
  flex-shrink: 0;
}
.ctrl-btn:hover  { color: var(--text); background: var(--surface-hover); }
.ctrl-btn.active { color: var(--accent); }
.ctrl-btn:focus-visible { outline: 2px solid var(--accent); }

/* "1" badge on the repeat button when in repeat-one mode */
#btnRepeat { position: relative; }
.repeat-one {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  background: var(--surface);
  border-radius: 4px;
  padding: 0 1px;
}

.ctrl-btn.primary {
  background: var(--accent);
  color: #fff;
  width: 42px;
  height: 42px;
}
.ctrl-btn.primary:hover { background: var(--accent-dim); color: #fff; }

.player-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.player-time {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.player-volume {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}

#volume-slider { width: 76px; }

/* Audio-quality (rendition) selector — recordings P4. Hidden until the current
   track's recording has more than one rendition. */
.quality-select {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  padding: 2px 4px;
  max-width: 130px;
}
.quality-select.hidden { display: none; }

/* Player-bar Like button (playlists.md Decision §8) */
#btnLike:disabled { opacity: 0.35; cursor: default; }
#btnLike:disabled:hover { color: var(--text-muted); background: none; }
#btnLike.liked { color: #e0526e; }
#btnLike.liked:hover { color: #e87b91; }

/* ── Queue panel (queue-panel.js — shell chrome, opens from #btnQueue) ── */
#queue-panel {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--player-h) + var(--space-3));
  width: min(400px, calc(100vw - 2 * var(--space-4)));
  max-height: min(60vh, 480px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  z-index: 11;               /* above the player bar (10) */
}
#queue-panel.hidden { display: none; }

.queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.queue-title { font-size: 14px; font-weight: 600; }
.queue-count { color: var(--text-muted); font-weight: 400; }
.queue-actions { display: flex; align-items: center; gap: var(--space-2); }
.queue-btn-sm { font-size: 12px; padding: 4px 10px; }

.queue-save-form {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.queue-save-form input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  padding: 4px 8px;
}
.queue-save-form input:focus-visible { outline: 2px solid var(--accent); }

.queue-list { overflow-y: auto; padding: var(--space-1) 0; }
.queue-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.queue-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
.queue-row:hover { background: var(--surface-hover); }
.queue-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.queue-row.playing .queue-row-title { color: var(--accent); }
.queue-row.playing .queue-num      { color: var(--accent); }
.queue-row.dragging { opacity: 0.4; }
.queue-row.drop-above { border-top-color: var(--accent); }
.queue-row.drop-below { border-bottom-color: var(--accent); }

.queue-num {
  width: 22px;
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.queue-row-body { flex: 1; min-width: 0; }
.queue-row-title {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-row-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-dur {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.queue-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius);
  visibility: hidden;
}
.queue-row:hover .queue-remove,
.queue-row:focus-within .queue-remove { visibility: visible; }
.queue-remove:hover { color: var(--text); background: var(--surface-hover); }
.queue-remove:focus-visible { outline: 2px solid var(--accent); visibility: visible; }