/* ============================================
   FLOW EDITOR — NODE & DIAGRAM STYLES
   ============================================ */

/* Node widget */
.flow-node {
    position: relative;
    background: #1A1A2E;
    border: 2px solid var(--node-color, #00E5FF);
    border-radius: 10px;
    min-width: 160px;
    max-width: 220px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.2s ease, transform 0.1s ease;
    cursor: grab;
    user-select: none;
}

.flow-node:hover {
    box-shadow: 0 0 16px color-mix(in srgb, var(--node-color, #00E5FF) 30%, transparent);
}

.flow-node.selected {
    box-shadow: 0 0 20px color-mix(in srgb, var(--node-color, #00E5FF) 50%, transparent),
                0 0 40px color-mix(in srgb, var(--node-color, #00E5FF) 20%, transparent);
    transform: scale(1.02);
}

.flow-node-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px 8px 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.flow-node-type {
    font-size: 0.65rem;
}

.flow-node-body {
    padding: 8px 10px;
}

.flow-node-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 500;
    word-break: break-word;
}

/* Ports — position: absolute is critical for drag-to-link interaction */
.flow-port {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1a1a2e;
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
    position: absolute;
    cursor: crosshair;
    pointer-events: all;
    z-index: 10;
}

/* Alignment-based positioning (classes come from Z.Blazor.Diagrams PortRenderer) */
.flow-port.left,
.diagram-port.left.flow-port {
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
}

.flow-port.right,
.diagram-port.right.flow-port {
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
}

.flow-port.top,
.diagram-port.top.flow-port {
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
}

.flow-port.bottom,
.diagram-port.bottom.flow-port {
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
}

.flow-port:hover {
    border-color: #00E5FF;
    background: #00E5FF;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
}

.flow-port.left:hover,
.flow-port.right:hover {
    transform: translateY(-50%) scale(1.4);
}

.flow-port.top:hover,
.flow-port.bottom:hover {
    transform: translateX(-50%) scale(1.4);
}

/* Diagram canvas override for dark theme */
.diagram-canvas {
    background: #0A0A0F !important;
    background-image:
        radial-gradient(circle, rgba(0, 229, 255, 0.05) 1px, transparent 1px) !important;
    background-size: 25px 25px !important;
}

/* Links — all SVG paths including ongoing drag */
.diagram-link path {
    stroke: #00E5FF !important;
    stroke-width: 2.5 !important;
    filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.4));
}

.diagram-link path:hover {
    stroke: #76FF03 !important;
    stroke-width: 3.5 !important;
    filter: drop-shadow(0 0 6px rgba(118, 255, 3, 0.6));
}

/* Ongoing link while dragging */
.diagram-link.ongoing path {
    stroke: #FF00E5 !important;
    stroke-width: 2 !important;
    stroke-dasharray: 8 4;
    filter: drop-shadow(0 0 4px rgba(255, 0, 229, 0.5));
}

/* Node palette item */
.palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    user-select: none;
}

.palette-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.palette-item .palette-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}