/* ── Stage Graph Editor ─────────────────────────────────────────────── */

/*
 * Flexbox layout: toolbox and panel only consume space when present in the DOM
 * or when open. The canvas always fills remaining width (flex: 1 1 0).
 */
.stage-graph-editor {
    display: flex;
    width: 100%;
    height: 580px;
    border-top: 1px solid var(--mud-palette-divider);
    overflow: hidden;
}

/* ── Toolbox ── */
.stage-graph-toolbox {
    flex: 0 0 190px;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-divider);
    padding: 12px 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Mobile-only chrome — hidden on desktop, revealed by the media query below. */
.stage-graph-toolbox-toggle { display: none; }
.stage-graph-backdrop { display: none; }
.stage-graph-toolbox__mobile-header { display: none; }
.stage-config-panel__close { display: none; }

.toolbox-group-heading:not(:first-child) {
    margin-top: 12px;
}

.toolbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    cursor: grab;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    transition: box-shadow 0.15s, transform 0.1s;
    user-select: none;
}

.toolbox-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transform: translateX(2px);
}

.toolbox-item:active {
    cursor: grabbing;
    opacity: 0.8;
}

.toolbox-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
    transition: background 0.15s;
}

.toolbox-action:hover {
    background: var(--mud-palette-action-default-hover);
}

/* ── Canvas ── */
.stage-graph-canvas {
    flex: 1 1 0;
    min-width: 0;          /* prevents flex child from overflowing */
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-background);
    /* dot grid sits on top of the themed gradient set below */
    background-image: radial-gradient(circle, var(--mud-palette-divider) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Light mode: white fading toward a very, very light gray */
html.bo-light .stage-graph-canvas {
    background-image:
        radial-gradient(circle, var(--mud-palette-divider) 1px, transparent 1px),
        linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    background-size: 24px 24px, cover;
}

/* Dark mode: black fading toward a very, very light red */
html.bo-dark .stage-graph-canvas {
    background-image:
        radial-gradient(circle, var(--mud-palette-divider) 1px, transparent 1px),
        linear-gradient(135deg, #000000 0%, #1a0d0d 100%);
    background-size: 24px 24px, cover;
}

html.bo-light .stage-graph-header {
    background-color: white;
}

/* Dark mode: black fading toward a very, very light red */
html.bo-dark .stage-graph-header {
    background-color: black;
}
.stage-graph-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

/* ── Config / detail panel ── */
.stage-graph-config {
    flex: 0 0 0;
    width: 0;
    overflow: hidden;
    border-left: 1px solid transparent;
    transition: flex-basis 0.2s ease, width 0.2s ease, border-color 0.2s;
    background: var(--mud-palette-surface);
}

.stage-graph-config--open {
    flex: 0 0 360px;
    width: 360px;
    border-left-color: var(--mud-palette-divider);
}

.stage-config-panel {
    width: 360px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.stage-config-panel--empty {
    width: 360px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bbb;
}

.stage-config-panel__header {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-weight: 600;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Node cards ── */
.stage-node {
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    min-width: 180px;
    max-width: 220px;
    cursor: pointer;
    transition: box-shadow 0.15s;
    position: relative;
}

.stage-node:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.stage-node--selected {
    box-shadow: 0 0 0 2px #1565C0, 0 3px 10px rgba(0,0,0,0.2);
}

.stage-node__header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--mud-palette-text-primary);
}

.stage-node__body {
    padding: 8px 10px;
}

.stage-node__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.stage-node__meta {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.stage-node__meta--incoming {
    color: var(--mud-palette-info);
    font-weight: 500;
}

.stage-node__branches {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stage-node__branch-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 3px 0;
    border-top: 1px dashed var(--mud-palette-divider);
    position: relative;
}

.stage-node__branch-label {
    font-size: 11px;
    color: #0097A7;
    font-weight: 500;
    padding-right: 10px;
}

/* ── Status-aware node borders (inspector) ── */
.stage-node--notstarted { opacity: 0.85; }

.stage-node--inprogress {
    box-shadow: 0 0 0 2px #1976D2, 0 3px 10px rgba(25,118,210,0.25);
    animation: pulse-inprogress 2s ease-in-out infinite;
}

.stage-node--completed {
    box-shadow: 0 0 0 2px #43A047, 0 2px 6px rgba(67,160,71,0.2);
}

.stage-node--cancelled {
    opacity: 0.55;
    box-shadow: 0 0 0 2px #E53935;
}

@keyframes pulse-inprogress {
    0%, 100% { box-shadow: 0 0 0 2px #1976D2, 0 3px 10px rgba(25,118,210,0.2); }
    50%       { box-shadow: 0 0 0 3px #42A5F5, 0 4px 14px rgba(25,118,210,0.35); }
}

/* Status dot in node header */
.stage-node__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.stage-node__status-dot--notstarted { background: #9E9E9E; }
.stage-node__status-dot--inprogress { background: #1976D2; }
.stage-node__status-dot--completed  { background: #43A047; }
.stage-node__status-dot--cancelled  { background: #E53935; }

/* Stats row (match count + team flow) */
.stage-node__stats-row {
    display: flex;
    gap: 8px;
    margin-top: 3px;
}
.stage-node__stat {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 2px;
}
.stage-node__stat--flow {
    color: #43A047;
    font-weight: 600;
}

/* Read-only canvas (view mode) */
.stage-graph-canvas--readonly { cursor: default; }
.stage-graph-canvas--readonly .diagram-node { cursor: pointer; }

/* Inspector toolbar */
.sgi-toolbar {
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    min-height: 44px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Detail panel body must shrink within the flex column so it scrolls rather
   than overflowing. min-height: 0 is the standard flexbox fix for this. */
.stage-config-panel__body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

/* ── Ports ── */
.stage-port {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    border: 2.5px solid #9E9E9E;
    cursor: crosshair;
    transition: transform 0.12s, box-shadow 0.12s;
    pointer-events: all;
    z-index: 10;
}

/* Input port: blue hollow circle — receives connections */
.stage-port--in {
    border-color: #1976D2;
    box-shadow: 0 0 0 2px rgba(25,118,210,0.18);
}

/* Output port: green hollow circle — sends connections */
.stage-port--out {
    border-color: #43A047;
    box-shadow: 0 0 0 2px rgba(67,160,71,0.18);
}

.stage-port:hover {
    transform: translateY(-50%) scale(1.45) !important;
    box-shadow: 0 0 0 3px rgba(25,118,210,0.25);
}

.stage-port--out:hover {
    box-shadow: 0 0 0 3px rgba(67,160,71,0.3);
}

/* Filled dot when a link is connected */
.stage-port.has-links {
    background: currentColor;
}

.stage-port--in.has-links  { background: #1976D2; }
.stage-port--out.has-links { background: #43A047; }

/* ── Node action buttons ── */
.stage-node__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 3px 6px 4px;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    border-radius: 0 0 8px 8px;
}

.stage-node-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.1s, box-shadow 0.1s;
    color: var(--mud-palette-text-secondary);
    padding: 0;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.stage-node-action:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}

.stage-node-action--execute  { color: #2E7D32; }
.stage-node-action--execute:hover  { background: rgba(46,125,50,0.1); }

.stage-node-action--advance  { color: #1565C0; }
.stage-node-action--advance:hover  { background: rgba(21,101,192,0.1); }

.stage-node-action--reset         { color: #E65100; }
.stage-node-action--reset:hover   { background: rgba(230,81,0,0.1); }

.stage-node-action--reset-confirm { color: #B71C1C; }
.stage-node-action--reset-confirm:hover { background: rgba(183,28,28,0.15); }

.stage-node-action--cancel { color: #616161; }
.stage-node-action--cancel:hover { background: rgba(0,0,0,0.06); }

/* ── Flowing link animation ──────────────────────────────────────────────
   Links from a Completed stage to a NotStarted stage are painted with
   FlowingLinkColor (#26c6da). Targeting by SVG stroke attribute lets us
   animate them without a custom link component.
   ────────────────────────────────────────────────────────────────────── */
.stage-graph-canvas path[stroke="#26c6da"] {
    stroke-dasharray: 10 5;
    animation: stageLinkFlow 1s linear infinite;
}

@keyframes stageLinkFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -15; }
}

/* ── Responsive: tablet & phone (below MudBlazor's md breakpoint, 960px) ──────
   The fixed 3-column layout (toolbox | canvas | panel) doesn't fit narrow
   viewports, so the toolbox collapses into a slide-over drawer, the config panel
   becomes a bottom sheet, and node cards shrink to an icon-led compact form.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 959.98px) {
    .stage-graph-editor {
        height: 70vh;
        min-height: 420px;
        position: relative;   /* anchor for the absolutely-positioned overlays */
    }

    /* Floating button that opens the palette drawer. */
    .stage-graph-toolbox-toggle {
        display: inline-flex;
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 15;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }

    /* Toolbox → off-canvas slide-over. Sits above the config sheet (z 40) so that,
       when opened while a node is selected, the drawer and its backdrop cover it. */
    .stage-graph-toolbox {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        flex: none;
        width: 240px;
        max-width: 80%;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 14px rgba(0,0,0,0.3);
    }

    .stage-graph-editor--toolbox-open .stage-graph-toolbox {
        transform: translateX(0);
    }

    .stage-graph-toolbox__mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
        padding-left: 6px;
    }

    /* Tap-away backdrop behind the open drawer — above the config sheet (z 40),
       below the drawer (z 50), so it dims and blocks the panel while the menu is open. */
    .stage-graph-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 45;
        background: rgba(0,0,0,0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .stage-graph-editor--toolbox-open .stage-graph-backdrop {
        opacity: 1;
        pointer-events: all;
    }

    /* Config panel → bottom sheet overlaying the canvas. An explicit height is required:
       with only bottom/left/right set the box is content-sized, and the inner panel's
       height:100% then resolves against an auto height and collapses to the header. */
    .stage-graph-config {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        flex: none;
        width: auto;
        height: 70%;
        transform: translateY(101%);
        transition: transform 0.2s ease;
        border-left: none;
        border-top: 1px solid var(--mud-palette-divider);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        box-shadow: 0 -2px 14px rgba(0,0,0,0.3);
        z-index: 40;
    }

    .stage-graph-config--open {
        width: auto;
        transform: translateY(0);
    }

    /* The inner panel is a fixed 360px on desktop; let it fill the sheet width. */
    .stage-config-panel,
    .stage-config-panel--empty {
        width: 100%;
    }

    .stage-config-panel__close {
        display: inline-flex;
        margin-right: 2px;
    }

    /* Icon-led compact node cards to reclaim horizontal space. */
    .stage-node {
        min-width: 128px;
        max-width: 160px;
    }

    .stage-node__type-label { display: none; }   /* header keeps just the icon */
    .stage-node__meta { display: none; }          /* team-flow detail lives in the panel */

    .stage-node__name {
        font-size: 12px;
        max-width: 116px;
    }
}