/* Styles for SortableJS drag states */

/* The ghost element (placeholder showing where the item will drop) */
.sortable-ghost {
    opacity: 0.4;
    background-color: var(--mud-palette-primary-lighten, #e3f2fd) !important;
}

/* The element being dragged */
.sortable-drag {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* The chosen element before dragging starts */
.sortable-chosen {
    background-color: var(--mud-palette-background-gray, #f5f5f5) !important;
}

.drag-handle {
    cursor: grab;
    color: var(--mud-palette-text-secondary);
}

/* Hover effect on the drag handle */
.drag-handle:hover {
    color: var(--mud-palette-primary, #1976d2) !important;
    transform: scale(1.1);
    transition: all 0.15s ease;
}