/* QuadTask Drag and Drop Styles */

/* Draggable task items */
.task-item.drag-handle {
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.task-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Drop zones */
.drop-zone {
    transition: all 0.2s ease;
    position: relative;
}

.drop-zone.drag-over {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Dark mode support for drop zones */
.dark .drop-zone.drag-over {
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
    border-color: #60a5fa !important;
    background-color: rgba(96, 165, 250, 0.1) !important;
}

/* Matrix-specific drop zone highlighting */
.drop-zone[data-priority="urgent_important"].drag-over {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
}

.drop-zone[data-priority="not_urgent_important"].drag-over {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.drop-zone[data-priority="urgent_not_important"].drag-over {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.5);
    border-color: #f97316 !important;
    background-color: rgba(249, 115, 22, 0.1) !important;
}

.drop-zone[data-priority="not_urgent_not_important"].drag-over {
    box-shadow: 0 0 20px rgba(107, 114, 128, 0.5);
    border-color: #6b7280 !important;
    background-color: rgba(107, 114, 128, 0.1) !important;
}

/* Swim lane-specific drop zone highlighting */
.drop-zone[data-status="todo"].drag-over {
    box-shadow: 0 0 20px rgba(107, 114, 128, 0.5);
    border-color: #6b7280 !important;
    background-color: rgba(107, 114, 128, 0.1) !important;
}

.drop-zone[data-status="in_progress"].drag-over {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.drop-zone[data-status="done"].drag-over {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
    border-color: #22c55e !important;
    background-color: rgba(34, 197, 94, 0.1) !important;
}

/* Dark mode variants for swim lanes */
.dark .drop-zone[data-status="todo"].drag-over {
    box-shadow: 0 0 20px rgba(156, 163, 175, 0.5);
    border-color: #9ca3af !important;
    background-color: rgba(156, 163, 175, 0.1) !important;
}

.dark .drop-zone[data-status="in_progress"].drag-over {
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
    border-color: #60a5fa !important;
    background-color: rgba(96, 165, 250, 0.1) !important;
}

.dark .drop-zone[data-status="done"].drag-over {
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
    border-color: #4ade80 !important;
    background-color: rgba(74, 222, 128, 0.1) !important;
}

/* Drag and drop visual feedback */
.drop-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed transparent;
    border-radius: 0.5rem;
    pointer-events: none;
    transition: all 0.2s ease;
}

.drop-zone.drag-over::before {
    border-color: currentColor;
    opacity: 0.5;
}

/* Prevent text selection during drag */
.task-item.dragging,
.task-item.dragging * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .task-item.drag-handle {
        cursor: default;
    }
    
    .drop-zone.drag-over {
        transform: scale(1.05);
    }
    
    /* Larger touch targets */
    .task-item {
        min-height: 3rem;
        touch-action: none;
    }
}

/* Animation for successful drops */
@keyframes dropSuccess {
    0% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.task-item.drop-success {
    animation: dropSuccess 0.3s ease-out;
}

/* Accessibility improvements */
.task-item[draggable="true"]:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.drop-zone:focus-within {
    box-shadow: 0 0 0 2px #3b82f6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .drop-zone.drag-over {
        transform: scale(1.01);
    }
    
    .task-item.dragging {
        transform: scale(0.98);
    }
}