/* ========================================
   DRAG & DROP VISUAL FEEDBACK STYLES
   ======================================== */

/* Base drag & drop styles */
.drag-drop-active {
    background-color: #e8f5e8 !important;
    border: 2px dashed #28a745 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    min-height: 60px !important;
    position: relative !important;
}

/* Empty drop zone indicator */
.empty-drop-zone {
    background-color: #fff3cd !important;
    border: 2px dashed #ffc107 !important;
    position: relative !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Prevent dragging but allow dropping */
    -webkit-user-drag: none !important;
}

.empty-drop-zone::before {
    content: attr(data-drop-text) !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #856404 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    /* background-color: rgba(255, 255, 255, 0.9) !important; */
    padding: 8px 16px !important;
    border-radius: 4px !important;
    /* border: 1px solid #ffc107 !important; */
}

/* Drag cursor styles */
.list-item [draggable="true"] {
    cursor: move;
}

.list-item [draggable="true"]:hover {
    cursor: grab;
}

.list-item [draggable="true"]:active {
    cursor: grabbing;
}

/* ========================================
   Z-INDEX MANAGEMENT FOR DRAG-AND-DROP
   ======================================== */

/* Reduce header z-index during drag operations to enable proper interaction */
body.drag-active #_mainHeader .navbar {
    z-index: 1000 !important;
    /* transition: z-index 0.1s ease !important; */
}

/* Ensure proper stacking during drag operations */
body.drag-active .drag-drop-active,
body.drag-active .empty-drop-zone {
    pointer-events: auto !important;
}

/* Ensure drop zones remain above other elements during drag */
body.drag-active .drag-drop-active {
    z-index: 1001;
    position: relative;
}

body.drag-active .empty-drop-zone {
    z-index: 1001;
    position: relative;
}