/* Sortable Drag & Drop Styles */

/* Global dragging state */
body.dragging {
  cursor: grabbing !important;
  user-select: none;
}

/* Drag ghost (the dragged item) */
.sortable-ghost {
  opacity: 0.5;
  transform: rotate(5deg);
  transition: all 0.2s ease;
}

/* Item being dragged */
.sortable-chosen {
  cursor: grabbing;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
  z-index: 1000;
  border: 2px solid #3B82F6;
}

/* Active drag state */
.sortable-drag {
  opacity: 0.8;
  transition: none;
}

/* Task card being dragged */
.dragging {
  cursor: grabbing !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
  transform: rotate(3deg) scale(1.05) !important;
  transition: none !important;
  z-index: 1000 !important;
  border: 2px solid #3B82F6 !important;
}

/* Drop zone highlighting */
[data-controller="sortable"]:hover {
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

/* Drop zone active state */
[data-controller="sortable"].drag-over {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border: 2px dashed #3B82F6 !important;
  border-radius: 8px !important;
}

/* Prevent text selection during drag */
.sortable-fallback {
  display: none !important;
}

/* Task card hover state when not dragging */
body:not(.dragging) [data-task-id]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

/* Smooth transitions for all task cards */
[data-task-id] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}