/*suppress CssUnresolvedCustomProperty*/

/* NOTE: Sequence Editor global styles — consolidated from scoped component CSS.
   All selectors use mw-se-* prefix. Matches scheduler.css / mw-menu.css pattern. */

/* NOTE: Container — fills viewport below header */
.mw-se-container {
    height: calc(100dvh - 48px);
    overflow: hidden;
}

/* NOTE: MudDrawerContainer must fill the container (matches scheduler.css pattern) */
.mw-se-container > .mud-drawer-container {
    height: 100%;
}

.mw-se-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* NOTE: Outer viewport — overflow:hidden creates BFC so MudBlazor drawer margin works.
   Matches MWScheduler root pattern (overflow:hidden + inner scroll container). */
.mw-se-viewport {
    height: calc(100dvh - 48px);
    overflow: hidden;
    background: var(--mud-palette-background);
}

/* NOTE: Inner scroll container — actual scrolling happens here */
.mw-se-scroll {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.mw-se-canvas {
    position: relative;
    width: max-content;
    min-width: calc(100% - 2 * var(--overhang, 46px));
    min-height: calc(100% - 2 * var(--overhang, 46px));
    padding: var(--overhang, 46px);
    gap: 0;
}

.mw-se-canvas.show-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: var(--cell-w) var(--cell-h);
    background-position: var(--overhang, 46px) var(--overhang, 46px);
}

/* NOTE: Flow direction arrows — DOM order places these behind wires and nodes */
.mw-se-flow-arrows {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* NOTE: Chevron flow arrow styling + animation */
.mw-se-chevron {
    opacity: 0.6;
}

.mw-se-chevron-animated {
    animation: mw-se-chevron-pulse var(--chevron-duration, 2s) ease-in-out infinite;
    animation-delay: calc(var(--chevron-idx) * var(--chevron-speed, 0.08s));
}

@keyframes mw-se-chevron-pulse {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* NOTE: Wire overlay — DOM order places these above flow arrows, below nodes */
.mw-se-wires {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* NOTE: Sticky wrapper — keeps toggle visible while scrolling the viewport */
.mw-se-drawer-toggle-wrap {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    height: 0;
    width: 0;
    overflow: visible;
    pointer-events: none;
}

.mw-se-drawer-toggle {
    position: relative;
    top: 8px;
    left: 8px;
    pointer-events: auto;
}

/* NOTE: Node container — DOM order places these above flow arrows and wires.
   No z-index so popovers (z-index: 100) can escape the node stacking context
   and render above the backdrop (z-index: 99). */
.mw-se-node {
    position: relative;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 1px rgba(255, 255, 255, 0.05) inset;
    width: calc(var(--cell-w) - 16px);
    margin: 8px;
    overflow: visible;
    cursor: default;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    align-self: start;
    justify-self: center;
}

.mw-se-node:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* NOTE: Header bar — colored per node type */
.mw-se-node-header {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    white-space: nowrap;
}

.node-action .mw-se-node-header {
    background: var(--mud-palette-primary);
}

.node-navigate .mw-se-node-header {
    background: var(--mud-palette-secondary);
}

.node-sequence .mw-se-node-header {
    background: var(--mud-palette-tertiary);
}

/* NOTE: Hover glow matches node type */
.node-action:hover {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 12px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.node-navigate:hover {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 12px color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent);
}

.node-sequence:hover {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 12px color-mix(in srgb, var(--mud-palette-tertiary) 20%, transparent);
}

.mw-se-node-header-icon {
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.mw-se-node-header-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: 0.01em;
}

/* NOTE: Editable name field for sequence nodes */
.mw-se-node-name {
    padding: 2px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mw-se-node-name .mud-input-root {
    font-size: 11px;
}

/* NOTE: Node body — pin area */
.mw-se-node-body {
    display: flex;
    padding: 8px 0;
    min-height: 8px;
}

.mw-se-pin-column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mw-se-pin-column-output {
    margin-left: auto;
}

.mw-se-pin {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px;
}

.mw-se-pin-output {
    justify-content: flex-end;
}

.mw-se-pin-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    flex-shrink: 0;
    transition: border-color 0.12s ease, background 0.12s ease;
    cursor: pointer;
}

.mw-se-pin:hover .mw-se-pin-dot {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
}

.mw-se-pin-label {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
}

/* NOTE: Wire creation — pin highlight during wire mode */
.mw-se-pin-dot-highlight {
    border-color: #FF9800;
    background: rgba(255, 152, 0, 0.2);
    animation: mw-se-pin-pulse 1s ease-in-out infinite;
}

@keyframes mw-se-pin-pulse {
    50% { background: rgba(255, 152, 0, 0.35); }
}

/* NOTE: Wire paths — pointer events on stroke for hover detection */
.mw-se-wire-path {
    pointer-events: stroke;
    cursor: pointer;
    transition: stroke-width 0.12s ease;
}

.mw-se-wire-path:hover {
    stroke-width: 3.5;
}

/* NOTE: Ghost wire during creation */
.mw-se-wire-ghost {
    pointer-events: none;
    stroke-dasharray: 8 4;
    opacity: 0.6;
}

/* NOTE: Wire delete button — visible on hover */
.mw-se-wire-delete {
    opacity: 0;
    cursor: pointer;
    pointer-events: all;
    transition: opacity 0.15s ease;
}

.mw-se-wire-delete circle {
    fill: var(--mud-palette-error);
}

.mw-se-wire-delete text {
    fill: white;
    font-size: 14px;
    font-weight: bold;
}

.mw-se-wires:hover .mw-se-wire-delete {
    opacity: 1;
}

/* NOTE: Wire mode active — change cursor on canvas */
.mw-se-canvas.wire-mode {
    cursor: crosshair;
}

/* NOTE: Drag mode — grab cursor + shift animation */
.mw-se-node-header {
    cursor: grab;
}

.mw-se-canvas.mw-se-dragging {
    cursor: grabbing;
}

.mw-se-canvas.mw-se-dragging .mw-se-node {
    transition: transform 200ms ease, opacity 150ms ease;
}

.mw-se-canvas.mw-se-dragging .mw-se-node-header {
    cursor: grabbing;
}

/* NOTE: Drag ghost — semi-transparent copy following cursor */
.mw-se-drag-ghost {
    opacity: 0.8;
    transform: rotate(2deg);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(255, 255, 255, 0.1) inset;
    border-radius: 6px;
    overflow: hidden;
}

/* NOTE: Pin state indicators — dot color reflects current mode */
.mw-se-pin-dot-wired {
    background: #FF9800;
    border-color: #FF9800;
}

.mw-se-pin-dot-direct {
    background: var(--mud-palette-info);
    border-color: var(--mud-palette-info);
}

.mw-se-pin-dot-entity {
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
}

.mw-se-pin-dot-required {
    border-color: var(--mud-palette-error);
    animation: mw-se-pin-pulse-error 2s ease-in-out infinite;
}

@keyframes mw-se-pin-pulse-error {
    50% { border-color: rgba(244, 67, 54, 0.3); }
}

/* NOTE: Pin value label — truncated inline display */
.mw-se-pin-value {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* NOTE: Active pin — highlight when popover is open */
.mw-se-pin-active {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

/* NOTE: Pin clickable area for input pins */
.mw-se-pin-column:first-child .mw-se-pin {
    cursor: pointer;
}

.mw-se-pin-column:first-child .mw-se-pin:hover {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

/* NOTE: Inline parameter popover — positioned below the pin */
.mw-se-pin-popover {
    position: absolute;
    left: 0;
    z-index: 100;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    min-width: 200px;
    max-width: 280px;
}

/* NOTE: Output pin "+" add button — subtle, clickable */
.mw-se-pin-add {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.mw-se-pin-add:hover {
    opacity: 0.9;
}

.mw-se-pin-label-add {
    font-style: italic;
    color: rgba(255, 255, 255, 0.35);
}

/* NOTE: Output pin selector popover — right-aligned */
.mw-se-output-popover {
    position: absolute;
    right: 0;
    z-index: 100;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    min-width: 160px;
    max-width: 280px;
}

/* NOTE: Click-outside backdrop for popover dismissal.
   position: absolute (not fixed) so it lives inside the scroll content
   and wheel events naturally scroll the viewport. */
.mw-se-pin-popover-backdrop {
    position: absolute;
    inset: 0;
    z-index: 99;
}