/* ==========================================================================
   OmniResume — Drag & Drop Styles
   ========================================================================== */

.sortable-item {
  position: relative;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.sortable-item.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.sortable-item.is-dragging * { pointer-events: none; }

.sortable-ghost {
  position: relative;
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--color-primary);
  opacity: 0.55;
}

.sortable-chosen {
  box-shadow: var(--shadow-xl);
}

.sortable-handle {
  cursor: grab;
  touch-action: none;
}

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

/* Drop indicator */
.drop-indicator {
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: var(--space-2xs) 0;
  box-shadow: 0 0 12px rgba(11, 95, 255, 0.5);
  animation: fadeIn 120ms var(--ease-out);
}

/* Buttons for reorder (accessible alternative) */
.reorder-controls {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
}

.reorder-controls button {
  width: 20px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  border-radius: var(--radius-xs);
  transition: all var(--duration-fast) var(--ease-out);
}

.reorder-controls button:hover:not(:disabled) {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.reorder-controls button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}