/**
 * jQuery Orderable CSS
 * Version: 1.0.0
 * Author: Veyron Team
 */

/* Orderable container */
.orderable {
    position: relative;
}

/* Sortable handle */
.orderable .handle {
    cursor: move;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.orderable .handle:active {
    cursor: grabbing;
}

/* Sorting states */
.orderable .sorting {
    background-color: #f8f9fa !important;
    border: 2px dashed #007bff !important;
    opacity: 0.8;
    transform: rotate(1deg);
    transition: all 0.2s ease;
}

.orderable .sorting-active {
    background-color: #e3f2fd !important;
    border: 2px solid #2196f3 !important;
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
}

.orderable .sorting-changed {
    background-color: #fff3cd !important;
    border: 2px solid #ffc107 !important;
}

.orderable .sort-completed {
    background-color: #d4edda !important;
    border: 2px solid #28a745 !important;
    animation: sortComplete 0.5s ease;
}

/* Sort placeholder */
.orderable .sort-placeholder {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    height: 50px;
    margin: 2px 0;
}

/* Sortable helper */
.ui-sortable-helper {
    background-color: #ffffff !important;
    border: 2px solid #007bff !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    transform: rotate(2deg);
    z-index: 1000;
}

/* Animation for sort completion */
@keyframes sortComplete {
    0% {
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

/* Disabled state */
.orderable.ui-sortable-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.orderable.ui-sortable-disabled .handle {
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .orderable .handle {
        padding: 8px;
        font-size: 14px;
    }
    
    .orderable .sorting,
    .orderable .sorting-active,
    .orderable .sorting-changed,
    .orderable .sort-completed {
        transform: none;
    }
}