/**
 * Drag and Drop Styles
 * Visual feedback for drag and drop operations
 */

/* Draggable items */
[draggable="true"] {
    cursor: grab;
}

[draggable="true"]:active {
    cursor: grabbing;
}

/* Item being dragged */
.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    transition: opacity 0.2s, transform 0.2s;
}

/* Drop target highlight */
.drop-target {
    background-color: var(--accent-blue);
    opacity: 0.3;
    border: 2px dashed var(--accent-blue);
    border-radius: var(--border-radius);
    transition: background-color 0.2s, border-color 0.2s;
}

/* Folder drop zone highlight */
.folder-item.drop-target {
    background-color: rgba(0, 102, 204, 0.2);
    border-left: 3px solid var(--accent-blue);
}

/* File row drop target */
.file-row.drop-target,
.file-grid-item.drop-target {
    background-color: rgba(0, 102, 204, 0.2);
    border: 2px dashed var(--accent-blue);
}

/* Content area drop zone */
#contentBody.drop-target {
    background-color: rgba(0, 102, 204, 0.1);
    border: 2px dashed var(--accent-blue);
    border-radius: var(--border-radius);
}

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

/* Drag handle indicator */
.drag-handle {
    cursor: grab;
    opacity: 0.6;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.drag-handle:hover {
    opacity: 1;
}

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

/* Mobile touch feedback */
@media (max-width: 768px) {
    [draggable="true"] {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
    }
    
    .dragging {
        opacity: 0.7;
    }
}