/* VeloxDev Workflow — base styles for the Blazor behavior components.
   Consumers can restyle by overriding these classes or setting component parameters. */

.veloxdev-wf-surface {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Diagram surfaces are not text; block the browser's default selection that a node/canvas
       drag would otherwise trigger on surrounding content. */
    user-select: none;
    -webkit-user-select: none;
}

.veloxdev-wf-scroll {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    cursor: default;
}

/* Canvas host: the scroll content. Its pixel size is set ONLY by JS (grows via edge expansion),
   so a Blazor re-render can never shrink the canvas under the content. */
.veloxdev-wf-canvas-host {
    position: relative;
    width: 0;
    height: 0;
}

.veloxdev-wf-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform-origin: 0 0;
}

/* Grid layer inside the canvas. The pattern is tiled via background-size (calc from the
   --veloxdev-gs spacing variable) and shifted via background-position = edge offset + layout
   offset (world 0). Both set by JS. The layer is canvas-fixed (world-fixed), so it scrolls
   naturally with the canvas and only re-positions when the canvas edge-expands. */
.veloxdev-wf-grid {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--veloxdev-mgc, #3A3D40) 1px, transparent 1px),
        linear-gradient(to bottom, var(--veloxdev-mgc, #3A3D40) 1px, transparent 1px),
        linear-gradient(to right, var(--veloxdev-gc, #2A2D2E) 1px, transparent 1px),
        linear-gradient(to bottom, var(--veloxdev-gc, #2A2D2E) 1px, transparent 1px);
    background-size:
        calc(var(--veloxdev-gs, 40px) * 5) calc(var(--veloxdev-gs, 40px) * 5),
        calc(var(--veloxdev-gs, 40px) * 5) calc(var(--veloxdev-gs, 40px) * 5),
        var(--veloxdev-gs, 40px) var(--veloxdev-gs, 40px),
        var(--veloxdev-gs, 40px) var(--veloxdev-gs, 40px);
    background-position: 0 0, 0 0, 0 0, 0 0;
}

/* World-0 axis lines. Positioned by JS at the edge + layout offset. */
.veloxdev-wf-axis {
    position: absolute;
    pointer-events: none;
    background: var(--veloxdev-ac, #4D4D4D);
}

.veloxdev-wf-axis-x {
    top: 0;
    bottom: 0;
    width: 2px;
}

.veloxdev-wf-axis-y {
    left: 0;
    right: 0;
    height: 2px;
}

/* Content wrapper: shifted by JS (edge expansion) so the canvas can expand left/up. */
.veloxdev-wf-canvas-content {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

/* Ruler overlay (grid decorator) — anchored top-left of the surface.
   height:100% so the left band (top:0/bottom:0) actually spans the full height;
   previously height:0 collapsed the left ruler completely. */
.veloxdev-wf-ruler {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 40;
    pointer-events: none;
}

.veloxdev-wf-ruler-corner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 42;
}

.veloxdev-wf-ruler-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 41;
}

.veloxdev-wf-ruler-left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 41;
}

/* The tick layer inside each band. It is translated by the scroll offset so ticks
   align with the canvas grid and node anchors while the band background stays put. */
.veloxdev-wf-ruler-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Per-tick label block. The block sits at the tick position; the 1px tick line
   anchors to the band edge and the numeric text sits beside it, mirroring the
   WPF/Avalonia/MAUI ruler label layout. */
.veloxdev-wf-ruler-top .veloxdev-wf-ruler-label {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
}

.veloxdev-wf-ruler-top .veloxdev-wf-ruler-tickline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
}

.veloxdev-wf-ruler-top .veloxdev-wf-ruler-text {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    font: 10px/1 "Segoe UI", Arial, sans-serif;
    white-space: nowrap;
}

.veloxdev-wf-ruler-left .veloxdev-wf-ruler-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
}

.veloxdev-wf-ruler-left .veloxdev-wf-ruler-tickline {
    position: absolute;
    right: 0;
    top: 0;
    height: 1px;
}

.veloxdev-wf-ruler-left .veloxdev-wf-ruler-text {
    position: absolute;
    left: 3px;
    top: 2px;
    font: 10px/1 "Segoe UI", Arial, sans-serif;
    white-space: nowrap;
}

/* Minimap overlay — anchored top-right of the surface. */
.veloxdev-wf-minimap {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.veloxdev-wf-minimap-inner {
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    border-radius: 6px;
}

.veloxdev-wf-minimap-svg {
    display: block;
}

/* Node drag wrapper. */
.veloxdev-wf-node-drag {
    cursor: grab;
}

.veloxdev-wf-node-drag:active {
    cursor: grabbing;
}

/* Slot connection wrapper. pointer-events:auto lets slots nested inside
   pointer-events:none overlay containers still receive gestures. The flex centering + zero
   line-height make the wrapper box shrink-wrap the glyph, so any box-centered slot
   measurement (or the port's own geometry) lands on the drawing instead of drifting by the
   inline <svg> baseline gap. */
.veloxdev-wf-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    cursor: crosshair;
    pointer-events: auto;
}

/* The slot glyph itself must not reserve a text-baseline strip. */
.veloxdev-wf-slot-svg {
    display: block;
}

/* Link context menu chrome. The surface renders it and the entries are the host's (see
   WorkflowSurfaceBehavior.LinkMenu); restyle by overriding these classes. The backdrop makes
   click-away dismiss work with no JS and swallows canvas gestures while the menu is up. */
.wf-link-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.wf-link-menu {
    position: fixed;
    z-index: 901;
    min-width: 116px;
    padding: 4px;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.wf-link-menu-item {
    display: block;
    width: 100%;
    padding: 7px 14px;
    background: none;
    border: 0;
    border-radius: 4px;
    color: #e0e0e0;
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}