/* CER Flow Custom Styles */

.sidebar-item:hover { 
    background: #eff3ff; 
}

.sidebar-item.active { 
    background: #dde5ff; 
    border-right: 4px solid #4361ee; 
}

/* Kanban / Interactive Canvas Styles */
body.interactive-mode { 
    user-select: none; 
    overflow: hidden; 
    background: #f4f5f7; 
}

.kanban-column { 
    height: calc(100vh - 200px); 
    overflow-y: auto; 
    padding: 15px; 
    position: relative; 
    scrollbar-width: none; 
}

#svg-canvas { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    pointer-events: none; 
    z-index: 100; 
}

.node { 
    width: 22px; 
    height: 22px; 
    background: #4361ee; 
    border: 3px solid white; 
    border-radius: 50% !important; /* Override global blocky rule — keep nodes circular */ 
    cursor: crosshair; 
    pointer-events: auto; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 110; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.15s, background-color 0.15s;
}

.node:hover {
    transform: translateY(-50%) scale(1.2);
    background-color: #2d4de0;
}

.node.out { right: -11px; } 
.node.in { left: -11px; }

.card-item { 
    z-index: 10; 
    position: relative; 
    transition: transform 0.15s ease, box-shadow 0.15s ease; 
}

.sortable-ghost { 
    opacity: 0; 
}

.sortable-chosen { 
    background: #e8edff !important; 
    border: 2px solid #4361ee !important; 
}

.line-path { 
    stroke-width: 3; 
    fill: none; 
    stroke-linecap: square; 
    transition: opacity 0.2s; 
}

#drawing-line { 
    stroke-dasharray: 6,4; 
}