/* Added CSS variables at the top for color consistency */
:root {
    --primary-color: #0d6efd;
    --hover-bg: #e0f7fa;
    --border-color: #0d6efd; /* Changed to blue */
    --connected-color: #0d6efd; /* Blue for connected */
    --dragging-color: #dc3545; /* Red for dragging */
    --active-color: #0d6efd; /* Blue for active/creating connection */
}

/* Connection points - Minimalist, blue, scale with zoom */
.connection-point {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 1.5px solid var(--border-color); /* Blue border */
    border-radius: 50%;
    cursor: pointer;
    z-index: 10000; /* CRITICAL: Very high z-index to ensure points are always on top */
    transition: all 0.2s ease;
    pointer-events: all;
    opacity: 0;
    /* Scale with zoom - connection points inherit transform from canvas-content */
    transform-origin: center;
}

/* Connection point is connected to another item - Filled blue circle, properly centered */
.connection-point.connected {
    background: var(--connected-color); /* Blue fill */
    border-color: var(--connected-color);
    opacity: 1 !important; /* CRITICAL: Always visible when connected */
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
    z-index: 10000 !important; /* Ensure connected points are always on top */
    /* Transform is handled by position classes */
}

/* Connection point hovered when connection path is hovered */
.connection-point.path-hovered {
    background: #6c757d !important;
    border-color: #6c757d !important;
}

/* Removed: .connection-point.dragging - no longer showing red/grey dots when dragging */

/* Connection point is actively being used for creating connection - Blue */
.connection-point.active {
    background: var(--active-color);
    border-color: var(--active-color);
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3);
}

/* Valid connection target styling using CSS variable for primary color */
.connection-point.valid-target {
    opacity: 1;
    border-color: var(--primary-color);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(13, 110, 253, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

.connection-point:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
    transform: scale(1.1);
    opacity: 1;
}

/* Connection point positions - Properly centered on item edges */
/* Points are 12px when connected, so -6px centers them perfectly */
.connection-point.left {
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
}

.connection-point.left.connected {
    left: -6px; /* Ensure connected points stay centered */
    transform: translateY(-50%);
}

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

.connection-point.right.connected {
    right: -6px; /* Ensure connected points stay centered */
    transform: translateY(-50%);
}

.connection-point.top {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.connection-point.top.connected {
    top: -6px; /* Ensure connected points stay centered */
    transform: translateX(-50%);
}

.connection-point.bottom {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.connection-point.bottom.connected {
    bottom: -6px; /* Ensure connected points stay centered */
    transform: translateX(-50%);
}

/* Show connection points on canvas-item hover */
.canvas-item:hover .connection-point {
    opacity: 1;
}

/* CRITICAL: Only connected points turn red on hover, not all points */
.canvas-item:hover .connection-point.connected {
    background: #dc3545 !important; /* Red background */
    border-color: #dc3545 !important; /* Red border */
}

/* CRITICAL: Connected points should always be visible, even when not hovering */
.connection-point.connected {
    opacity: 1 !important;
    z-index: 10000 !important;
}

/* Ensure connection points are above canvas items */
.canvas-item {
    z-index: 1;
}

.connection-point {
    z-index: 10000 !important;
}

/* Connection popup styles */
.connection-popup {
    position: absolute;
    background-color: var(--primary-color);
    color: white;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 4;
}

/* Position popups for each connection point */
.connection-point.left .connection-popup {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 5px;
}

.connection-point.right .connection-popup {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 5px;
}

.connection-point.top .connection-popup {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
}

.connection-point.bottom .connection-popup {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
}

/* Show popup on connection point hover */
.connection-point:hover .connection-popup {
    opacity: 1;
}

/* Arrow for popups */
.connection-popup::after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
}

.connection-point.left .connection-popup::after {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--primary-color);
}

.connection-point.right .connection-popup::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--primary-color);
}

.connection-point.top .connection-popup::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--primary-color);
}

.connection-point.bottom .connection-popup::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--primary-color);
}

/* Connection lines - Minimalist */
.connection-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.connections-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible; /* Ensure lines aren't clipped */
}

.connection-path {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: .9;
    stroke-linecap: round;
    transition: all 0.1s ease;
    pointer-events: all;
    stroke-dasharray: 2 4;
    animation: dashmove 1s linear infinite;
}

.connection-path:hover {
    stroke: var(--primary-color);
    stroke-width: 3;
}

/* Hover effect on connection line - turn connection points grey */
.connection-path:hover ~ .connection-point,
.connection-path:hover + .connection-point {
    background: #6c757d !important;
    border-color: #6c757d !important;
}

/* When hovering over connection path, highlight connected points - REMOVED, using red hover instead */

/* Better hover effect - find connected points when path is hovered */
.connection-path:hover {
    stroke-width: 3;
}

/* Style for connection source dot and target arrow */
.connection-source-dot {
    transition: fill 0.2s ease;
}

.connection-target-arrow {
    transition: fill 0.2s ease;
}

/* When connection path is hovered, change marker colors */
.connection-path:hover + defs .connection-source-dot,
.connection-path:hover + defs .connection-target-arrow {
    fill: #6c757d;
}

/* Alternative: Use CSS to change marker colors on path hover */
.connections-svg:hover .connection-source-dot {
    fill: #6c757d;
}

.connections-svg:hover .connection-target-arrow {
    fill: #6c757d;
}

/* Active connection style */
.connection-path.active-connection {
    stroke: var(--primary-color);
    stroke-width: 3;
    stroke-dasharray: 8 4;
    animation: dash 0.5s linear infinite;
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
}

@keyframes dash {
    to {
        stroke-dashoffset: -12;
    }
}

.workflow-canvas.running-mode .connection-path {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: .9;
    stroke-linecap: round;
    transition: all 0.1s ease;
    pointer-events: all;
    stroke-dasharray: 2 4;
    animation: dashmove 1s linear infinite;
}

/* Adjust connection points in running mode */
.workflow-canvas.running-mode .connection-point {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   CONDITIONAL BRANCH STYLING - For Condition Items
   ========================================================================== */

/* True branch connections - Green, solid */
.connection-path.conditional-branch.branch-true {
    stroke: #28a745;
    stroke-width: 2.5;
    stroke-dasharray: 0;
    animation: none;
}

.connection-path.conditional-branch.branch-true:hover {
    stroke: #218838;
    stroke-width: 3.5;
}

/* False branch connections - Red, dashed */
.connection-path.conditional-branch.branch-false {
    stroke: #dc3545;
    stroke-width: 2.5;
    stroke-dasharray: 5, 5;
    animation: none;
}

.connection-path.conditional-branch.branch-false:hover {
    stroke: #c82333;
    stroke-width: 3.5;
}

/* Add labels for conditional branches */
.connection-path.conditional-branch[data-branch-type="true"]::before {
    content: 'TRUE';
}

.connection-path.conditional-branch[data-branch-type="false"]::before {
    content: 'FALSE';
}

@keyframes dash {
    to {
        stroke-dashoffset: -8;
    }
}

@keyframes dashmove {
    to {
        stroke-dashoffset: -6; /* Negative to flow from start to end (A->B) */
    }
}

.connections-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.connection-endpoint {
    fill: var(--primary-color);
    stroke: white;
    stroke-width: 1;
    pointer-events: none;
}

.connection-label {
    fill: var(--primary-color);
    font-size: 0.7rem;
    font-family: sans-serif;
    pointer-events: none;
    user-select: none;
}

.connection-cap {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 1.5;
    pointer-events: none;
}