css/drag-drop-fix.css

/* Enhanced dragging styles for the neural network playground */

/* Ensure canvas nodes have proper cursor styles */
.canvas-node {
    cursor: grab !important;
    /* Ensure proper z-indexing */
    z-index: 10;
    /* Smooth transitions for dragging effects */
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s;
}

/* Active dragging state */
.canvas-node.dragging {
    cursor: grabbing !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    /* Add a slight scale effect */
    transform: scale(1.05) !important;
    /* Make sure dragged node is on top */
    z-index: 1000 !important;
    /* Don't transition position while dragging */
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s !important;
}

/* Improve the connection lines */
.connection {
    z-index: 5;
    height: 3px;
    /* Add glow effect */
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}

/* Make node controls more visible on hover */
.node-controls {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.canvas-node:hover .node-controls {
    opacity: 1;
}

/* Ensure node ports are visible and properly clickable */
.node-port {
    cursor: crosshair;
    z-index: 20;
    width: 14px;
    height: 14px;
}

/* Make the body grab cursor apply while dragging in case cursor leaves the element */
body.node-dragging {
    cursor: grabbing !important;
}

/* Styles for the fixed drag-drop functionality */

/* Improve node dragging */
.node-dragging {
    cursor: grabbing !important;
}

.canvas-node {
    position: absolute;
    z-index: 10;
    transition: box-shadow 0.2s ease-in-out;
}

.canvas-node.dragging {
    cursor: grabbing;
    z-index: 1000 !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Connection styles */
.connection {
    position: absolute;
    height: 2px;
    background-color: #3498db;
    transform-origin: left center;
    pointer-events: none;
    z-index: 5;
}

.connection:after {
    content: '';
    position: absolute;
    right: -5px;
    top: -3px;
    width: 8px;
    height: 8px;
    background-color: #3498db;
    border-radius: 50%;
}

.temp-connection {
    background-color: #95a5a6;
    opacity: 0.7;
    z-index: 4;
}

.temp-connection:after {
    background-color: #95a5a6;
}

/* Improved port styles */
.node-port {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #3498db;
    border-radius: 50%;
    z-index: 20;
    border: 2px solid white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.node-port:hover {
    transform: scale(1.2);
    background-color: #2980b9;
}

.port-in {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
}

.port-out {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
}

.port-in:hover, .port-out:hover {
    transform: translateY(-50%) scale(1.2);
}