/* ========================================
   DRAG & DROP PLAYLIST
   ======================================== */

/* Drag Handle */
.drag-handle {
  cursor: grab;
  padding: 0.5rem;
  margin-right: 0.5rem;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--transition-fast);
  display: flex;
  align-items: center;
}

.playlist-item:hover .drag-handle {
  opacity: 1;
}

.drag-handle:hover {
  color: var(--text-primary);
}

.drag-handle:active {
  cursor: grabbing;
}

/* Hide drag handle for non-owners */
body:not(.is-owner) .drag-handle {
  display: none !important;
}

/* Sortable Ghost (the element being dragged) */
.sortable-ghost {
  background: rgba(29, 185, 84, 0.1) !important;
  border: 2px dashed var(--accent) !important;
  opacity: 0.6;
}

/* Sortable Drag (the actual dragged element) */
.sortable-drag {
  background: var(--bg-card) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  border-radius: var(--radius-md);
  opacity: 1 !important;
  cursor: grabbing !important;
  transform: scale(1.02);
  z-index: 1000;
}

/* Selected items for multi-delete */
.playlist-item.selected {
  background: rgba(233, 20, 41, 0.1);
  border-left: 3px solid var(--error);
}

.playlist-item.selected .pl-title {
  color: #ff6b7a;
}

/* Checkbox for multi-select */
.pl-checkbox {
  width: 18px;
  height: 18px;
  margin-right: 0.75rem;
  accent-color: var(--accent);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.playlist-item:hover .pl-checkbox,
.playlist-item.selected .pl-checkbox {
  opacity: 1;
}

/* Playlist header actions */
.playlist-header-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-icon-sm {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.btn-icon-sm:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
  transform: scale(1.1);
}

.btn-icon-sm.danger:hover {
  background: rgba(233, 20, 41, 0.2);
  color: #ff6b7a;
}

/* Mobile: always show drag handle for owner */
@media only screen and (max-width: 768px) {
  body.is-owner .drag-handle {
    opacity: 0.5;
  }
}