/*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 — z-order controlled by --z-flow variable */
.mw-se-flow-arrows {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-flow, 1);
}

/* 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 — z-order controlled by --z-wires variable */
.mw-se-wires {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-wires, 2);
}

/* 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 — z-order controlled by --z-nodes variable.
   Low values (1–3) don't interfere with overlays (delete z:50, mode z:100)
   because MudPopover renders at document root via MudPopoverProvider. */
.mw-se-node {
    position: relative;
    z-index: var(--z-nodes, 3);
    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);
}

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

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

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

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

.node-comment .mw-se-node-header {
    background: rgba(255, 255, 255, 0.12);
}

/* 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);
}

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

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

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

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

.node-comment:hover {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(255, 255, 255, 0.05);
}

.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: Collapse button — right-aligned in header */
.mw-se-collapse-btn {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 2px !important;
    min-width: 0 !important;
}

.mw-se-collapse-btn:hover {
    color: rgba(255, 255, 255, 1) !important;
}

/* NOTE: Collapsed hint — shows child count when subtree is hidden */
.mw-se-collapsed-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.mw-se-collapsed-hint .mud-icon-root {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.3);
}

/* 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;
    transition: outline 0.15s ease, box-shadow 0.15s ease;
}

/* NOTE: Detaching from tree — orange/warning glow */
.mw-se-drag-ghost.mw-se-ghost-detach {
    outline: 2px dashed #FF9800;
    outline-offset: 3px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 152, 0, 0.3);
}

/* NOTE: Reattaching into tree — green/success glow */
.mw-se-drag-ghost.mw-se-ghost-reattach {
    outline: 2px solid #4CAF50;
    outline-offset: 3px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(76, 175, 80, 0.3);
}

/* NOTE: Drop preview — semi-transparent node clone at the target grid cell */
.mw-se-drop-preview {
    opacity: 0.45;
    pointer-events: none;
    transition: outline 0.15s ease, box-shadow 0.15s ease;
}

/* NOTE: Detach drop target — orange/warning */
.mw-se-drop-preview.mw-se-drop-detach {
    outline: 2px dashed #FF9800;
    outline-offset: 3px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 152, 0, 0.3);
}

/* NOTE: Reattach drop target — green/success */
.mw-se-drop-preview.mw-se-drop-reattach {
    outline: 2px solid #4CAF50;
    outline-offset: 3px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(76, 175, 80, 0.3);
}

/* 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 — both input and output pins */
.mw-se-pin-column .mw-se-pin {
    cursor: pointer;
}

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

/* NOTE: Wire-mode target highlight — full input pin row pulses orange */
.mw-se-pin-wire-target {
    background: rgba(255, 152, 0, 0.08);
    border-radius: 4px;
    cursor: crosshair;
}

.mw-se-pin-wire-target:hover {
    background: rgba(255, 152, 0, 0.18);
}

/* 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: Orphan nodes — dashed border, slightly dimmed */
.mw-se-node.mw-se-orphan {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.15);
    opacity: 0.85;
}

/* NOTE: Palette items — draggable node sources */
.mw-se-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: grab;
    user-select: none;
    border-radius: 4px;
    transition: background 0.12s ease;
}

.mw-se-palette-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.mw-se-palette-item:active {
    cursor: grabbing;
}

/* NOTE: Palette ghost — fixed label box following cursor during drag */
.mw-se-palette-ghost {
    position: fixed;
    padding: 6px 12px;
    background: var(--mud-palette-surface, #1e1e1e);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    z-index: 1001;
    white-space: nowrap;
}

/* NOTE: Mode indicator banner — centered at top of editor viewport */
.mw-se-mode-indicator {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 12px;
    background: var(--mud-palette-surface, #1f1f1f);
    border: 2px solid var(--mode-color, var(--mud-palette-primary));
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mw-se-mode-text {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mode-color, var(--mud-palette-primary));
}

/* NOTE: Delete mode — overlay blocks internal interactions, red hover feedback */
.mw-se-delete-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23f44336' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") 12 12, pointer;
    border-radius: inherit;
}

.mw-se-mode-delete .mw-se-node {
    transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
}

.mw-se-mode-delete .mw-se-node:hover {
    border-color: var(--mud-palette-error, #f44336);
    box-shadow: 0 0 0 2px var(--mud-palette-error, #f44336);
    transform: scale(1.02);
}

.mw-se-mode-delete .mw-se-node:hover .mw-se-node-header {
    background: var(--mud-palette-error, #f44336) !important;
}


/* NOTE: Execution state overlays — shown after running a sequence */
.mw-se-node[data-exec-state="succeeded"] {
    border-color: var(--mud-palette-success);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 12px color-mix(in srgb, var(--mud-palette-success) 25%, transparent);
}

.mw-se-node[data-exec-state="succeeded"] .mw-se-node-header {
    background: var(--mud-palette-success) !important;
}

.mw-se-node[data-exec-state="failed"] {
    border-color: var(--mud-palette-error);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 12px color-mix(in srgb, var(--mud-palette-error) 25%, transparent);
}

.mw-se-node[data-exec-state="failed"] .mw-se-node-header {
    background: var(--mud-palette-error) !important;
}

.mw-se-node[data-exec-state="running"] {
    border-color: var(--mud-palette-warning);
    animation: mw-se-exec-pulse 1.5s ease-in-out infinite;
}

.mw-se-node[data-exec-state="running"] .mw-se-node-header {
    background: var(--mud-palette-warning) !important;
}

@keyframes mw-se-exec-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 8px color-mix(in srgb, var(--mud-palette-warning) 20%, transparent); }
    50% { box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 20px color-mix(in srgb, var(--mud-palette-warning) 40%, transparent); }
}

.mw-se-node[data-exec-state="pending"] {
    opacity: 0.5;
}

/* NOTE: Delay countdown — centered monospace display below header */
.mw-se-delay-countdown {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-warning);
    text-align: center;
    padding: 4px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* NOTE: Gate operator selector — clickable toggle between == and != */
.mw-se-gate-operator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    cursor: pointer;
}

.mw-se-gate-operator:hover .mw-se-gate-operator-label {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.mw-se-gate-operator-label {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    padding: 1px 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    transition: color 0.12s ease, border-color 0.12s ease;
}

/* NOTE: Gate condition badge — checkmark/cross after evaluation */
.mw-se-gate-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
}

.mw-se-gate-badge-true {
    color: var(--mud-palette-success);
}

.mw-se-gate-badge-false {
    color: var(--mud-palette-error);
}

/* NOTE: Collapse MudDropZone's internal preview-start placeholder — it's a 20px
   invisible div that blocks drag on the first item and offsets cursor position */
.mw-se-layer-zone > .mud-drop-item-preview-start {
    height: 0;
    overflow: hidden;
}