/* ============================================================
   Binom.Router — Drawflow Graph Editor Theme (G-12)
   Design language: compact nodes, accent strip + soft tinted body,
   readable port labels, smooth bezier connections, dot-grid canvas,
   grouped collapsible palette. All existing accent colors preserved
   as semantic identity per node type.
   ============================================================ */

/* ============================ Canvas ============================ */

.drawflow {
    background-color: var(--user-defined-binombg) !important;
    background-image: radial-gradient(var(--user-defined-binomborder) 1px, transparent 0) !important;
    background-size: 22px 22px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 600px !important;
    border-radius: 14px !important;
    position: relative !important;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ============================ Node Shell ============================ */

.drawflow .drawflow-node {
    background: var(--user-defined-binomsurface) !important;
    border: 1px solid var(--user-defined-binomborder) !important;
    border-radius: 10px !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.18) !important;
    width: 260px !important;
    min-height: 72px !important;
    z-index: 2 !important;
    overflow: visible !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease !important;
    display: flex !important;
    align-items: stretch !important;
    position: absolute !important;
}

.drawflow .drawflow-node:hover {
    cursor: move !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.22) !important;
    border-color: rgba(var(--m-theme-primary), 0.4) !important;
}

.drawflow .drawflow-node.selected {
    border: 1px solid rgb(var(--m-theme-primary)) !important;
    box-shadow:
        0 0 0 3px rgba(var(--m-theme-primary), 0.18),
        0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Per-node-type selected glow uses accent color */
.drawflow .drawflow-node.start.selected         { border-color: rgb(var(--m-theme-success)) !important; box-shadow: 0 0 0 3px rgba(var(--m-theme-success), 0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.exit.selected          { border-color: rgb(var(--m-theme-error))   !important; box-shadow: 0 0 0 3px rgba(var(--m-theme-error),   0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.singleroute.selected   { border-color: rgb(var(--m-theme-primary)) !important; box-shadow: 0 0 0 3px rgba(var(--m-theme-primary), 0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.multiroute.selected    { border-color: #ab47bc !important;                     box-shadow: 0 0 0 3px rgba(171,71,188,0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.parallelroute.selected { border-color: #9c27b0 !important;                     box-shadow: 0 0 0 3px rgba(156,39,176,0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.strategy.selected      { border-color: rgb(var(--m-theme-primary)) !important; box-shadow: 0 0 0 3px rgba(var(--m-theme-primary), 0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.condition.selected     { border-color: rgb(var(--m-theme-info))    !important; box-shadow: 0 0 0 3px rgba(var(--m-theme-info),    0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.cachebreaker.selected  { border-color: rgb(var(--m-theme-warning)) !important; box-shadow: 0 0 0 3px rgba(var(--m-theme-warning), 0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.routefilter.selected   { border-color: #009688 !important;                     box-shadow: 0 0 0 3px rgba(0,150,136,0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.bodypatch.selected     { border-color: #7c4dff !important;                     box-shadow: 0 0 0 3px rgba(124,77,255,0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.weightedsplitter.selected { border-color: #7c4dff !important;                  box-shadow: 0 0 0 3px rgba(124,77,255,0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }
.drawflow .drawflow-node.responsecache.selected { border-color: #ffb300 !important;                     box-shadow: 0 0 0 3px rgba(255,179,0,0.22), 0 8px 24px rgba(0,0,0,0.4) !important; }

.drawflow .drawflow-node .drawflow_content_node {
    overflow: visible !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* ============================ Node Header ============================ */

.drawflow .drawflow-node .node-header {
    position: relative !important;
    padding: 9px 28px 9px 12px !important;
    padding-left: 18px !important; /* room for accent strip */
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.1px !important;
    border-top-left-radius: 9px !important;
    border-top-right-radius: 9px !important;
    border-bottom: 1px solid var(--user-defined-binomborder) !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(128, 128, 128, 0.06) !important;
}

/* Accent strip on the left edge of every node header */
.drawflow .drawflow-node .node-header::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    border-top-left-radius: 9px !important;
    background: rgb(var(--m-theme-primary)) !important;
}

.drawflow .drawflow-node .node-header .mdi {
    font-size: 16px !important;
    line-height: 1 !important;
    opacity: 0.9 !important;
}

.drawflow .drawflow-node .node-header .node-header-title {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Per-type accent color (strip + header icon tint) */
.drawflow .drawflow-node .node-header.start::before            { background: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node .node-header.exit::before             { background: rgb(var(--m-theme-error))   !important; }
.drawflow .drawflow-node .node-header.single-route::before     { background: rgb(var(--m-theme-primary)) !important; }
.drawflow .drawflow-node .node-header.multi-route::before      { background: #ab47bc !important; }
.drawflow .drawflow-node .node-header.parallel-route::before   { background: #9c27b0 !important; }
.drawflow .drawflow-node .node-header.strategy::before         { background: rgb(var(--m-theme-primary)) !important; }
.drawflow .drawflow-node .node-header.condition::before        { background: rgb(var(--m-theme-info))    !important; }
.drawflow .drawflow-node .node-header.cachebreaker::before     { background: rgb(var(--m-theme-warning)) !important; }
.drawflow .drawflow-node .node-header.routefilter::before      { background: #009688 !important; }
.drawflow .drawflow-node .node-header.bodypatch::before        { background: #7c4dff !important; }
.drawflow .drawflow-node .node-header.weightedsplitter::before { background: #7c4dff !important; }
.drawflow .drawflow-node .node-header.responsecache::before    { background: #ffb300 !important; }

.drawflow .drawflow-node .node-header.start .mdi            { color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node .node-header.exit .mdi             { color: rgb(var(--m-theme-error))   !important; }
.drawflow .drawflow-node .node-header.single-route .mdi     { color: rgb(var(--m-theme-primary)) !important; }
.drawflow .drawflow-node .node-header.multi-route .mdi      { color: #ab47bc !important; }
.drawflow .drawflow-node .node-header.parallel-route .mdi   { color: #ba68c8 !important; }
.drawflow .drawflow-node .node-header.strategy .mdi         { color: rgb(var(--m-theme-primary)) !important; }
.drawflow .drawflow-node .node-header.condition .mdi        { color: rgb(var(--m-theme-info))    !important; }
.drawflow .drawflow-node .node-header.cachebreaker .mdi     { color: rgb(var(--m-theme-warning)) !important; }
.drawflow .drawflow-node .node-header.routefilter .mdi      { color: #26a69a !important; }
.drawflow .drawflow-node .node-header.bodypatch .mdi        { color: #9575cd !important; }
.drawflow .drawflow-node .node-header.weightedsplitter .mdi { color: #9575cd !important; }
.drawflow .drawflow-node .node-header.responsecache .mdi    { color: #ffb300 !important; }

/* Node info icon (top-right corner) — preserved from G-11 */
.drawflow .drawflow-node [data-action="show-node-info"] {
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    touch-action: manipulation !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.drawflow .drawflow-node [data-action="show-node-info"]:hover {
    opacity: 1 !important;
    transform: scale(1.18);
}

/* Node info dialog tables — unchanged from G-11 */
.node-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.node-info-table th,
.node-info-table td {
    text-align: left;
    padding: 6px 8px;
    border: 1px solid rgba(128, 128, 128, 0.25);
    vertical-align: top;
}

.node-info-table th {
    font-weight: 600;
    opacity: 0.75;
    white-space: nowrap;
}

.node-info-table td code {
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.15);
}

/* ============================ Node Body ============================ */

/* Node types with port labels: symmetric L/R padding reserved for the label
   gutter. 52px accommodates the longest labels (Condition, Exhausted, All Failed)
   at 9px font size. Every type that exposes at least one input or output port
   gets the same gutter on the matching side so labels never overlay content. */
.drawflow .drawflow-node.singleroute .node-body,
.drawflow .drawflow-node.multiroute .node-body,
.drawflow .drawflow-node.parallelroute .node-body,
.drawflow .drawflow-node.exit .node-body,
.drawflow .drawflow-node.routefilter .node-body,
.drawflow .drawflow-node.cachebreaker .node-body,
.drawflow .drawflow-node.bodypatch .node-body,
.drawflow .drawflow-node.weightedsplitter .node-body,
.drawflow .drawflow-node.responsecache .node-body {
    padding-left: 52px !important;
}

.drawflow .drawflow-node.singleroute .node-body,
.drawflow .drawflow-node.multiroute .node-body,
.drawflow .drawflow-node.parallelroute .node-body,
.drawflow .drawflow-node.start .node-body,
.drawflow .drawflow-node.strategy .node-body,
.drawflow .drawflow-node.condition .node-body,
.drawflow .drawflow-node.routefilter .node-body,
.drawflow .drawflow-node.cachebreaker .node-body,
.drawflow .drawflow-node.bodypatch .node-body,
.drawflow .drawflow-node.weightedsplitter .node-body,
.drawflow .drawflow-node.responsecache .node-body {
    padding-right: 52px !important;
}

.drawflow .drawflow-node .node-body {
    padding: 12px 14px 12px 14px !important;
    background-color: var(--user-defined-binomsurface) !important;
    border-bottom-left-radius: 9px !important;
    border-bottom-right-radius: 9px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    pointer-events: auto !important;
}

.drawflow .drawflow-node .node-body .node-summary {
    font-size: 11px !important;
    opacity: 0.7 !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.1px !important;
}

.drawflow .drawflow-node .node-body .node-field {
    margin-bottom: 10px !important;
}

.drawflow .drawflow-node .node-body .node-field:last-child {
    margin-bottom: 0 !important;
}

.drawflow .drawflow-node .node-body .node-field-checkbox {
    margin-bottom: 6px !important;
    font-size: 12px !important;
}

.drawflow .drawflow-node .node-body .node-field-checkbox label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.drawflow .drawflow-node .node-body .node-hint {
    font-size: 10px !important;
    opacity: 0.6 !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
}

/* Assign-routes button — preserved identity from G-11 */
.drawflow .drawflow-node .assign-routes-btn {
    display: block !important;
    width: 100% !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    background: rgb(var(--m-theme-primary)) !important;
    color: rgb(var(--m-theme-on-primary)) !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation !important;
    -webkit-user-drag: none !important;
    margin-top: 4px !important;
    transition: filter 0.15s ease, transform 0.1s ease !important;
}

.drawflow .drawflow-node .assign-routes-btn:hover {
    filter: brightness(1.08);
}

.drawflow .drawflow-node .assign-routes-btn:active {
    transform: scale(0.98);
}

/* ============================ Inputs / Outputs ============================ */

.drawflow .drawflow-node .inputs,
.drawflow .drawflow-node .outputs {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    align-self: stretch !important;
    padding: 44px 0 10px 0 !important;
    gap: 8px !important;
    width: 0px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.drawflow .drawflow-node .inputs  { order: -1 !important; }
.drawflow .drawflow-node .outputs { order: 1  !important; }

.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
    position: relative !important;
    width: 14px !important;
    height: 14px !important;
    background: var(--user-defined-binomsurface) !important;
    border: 2.5px solid rgb(var(--m-theme-primary)) !important;
    border-radius: 50% !important;
    cursor: crosshair !important;
    z-index: 10 !important;
    margin: 0 !important;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
}

.drawflow .drawflow-node .input { left: -24px !important; }
.drawflow .drawflow-node .output { right: -10px !important; }

.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover {
    background: rgb(var(--m-theme-primary)) !important;
    border-color: rgb(var(--m-theme-on-primary)) !important;
    transform: scale(1.28) !important;
    box-shadow: 0 0 0 4px rgba(var(--m-theme-primary), 0.2) !important;
}

/* Port labels — inputs (LEFT side, label inside node bounds) */
.drawflow .drawflow-node .input::before {
    position: absolute !important;
    left: 26px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    opacity: 0.65 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* Port labels — outputs (RIGHT side) */
.drawflow .drawflow-node .output::before {
    position: absolute !important;
    right: 32px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* Port color semantics — match output type to port border color */
.drawflow .drawflow-node .outputs .output_1 { border-color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node .outputs .output_2 { border-color: rgb(var(--m-theme-warning)) !important; }
.drawflow .drawflow-node .outputs .output_3 { border-color: rgb(var(--m-theme-error))   !important; }

/* Hover highlights for semantic ports */
.drawflow .drawflow-node .outputs .output_1:hover { background: rgb(var(--m-theme-success)) !important; border-color: rgb(var(--m-theme-success)) !important; box-shadow: 0 0 0 4px rgba(var(--m-theme-success), 0.25) !important; }
.drawflow .drawflow-node .outputs .output_2:hover { background: rgb(var(--m-theme-warning)) !important; border-color: rgb(var(--m-theme-warning)) !important; box-shadow: 0 0 0 4px rgba(var(--m-theme-warning), 0.25) !important; }
.drawflow .drawflow-node .outputs .output_3:hover { background: rgb(var(--m-theme-error))   !important; border-color: rgb(var(--m-theme-error))   !important; box-shadow: 0 0 0 4px rgba(var(--m-theme-error),   0.25) !important; }

/* Inputs — label content per node type */
.drawflow .drawflow-node.singleroute .inputs .input_1::before { content: 'Trigger' !important; }
.drawflow .drawflow-node.singleroute .inputs .input_2::before { content: 'Condition' !important; }

.drawflow .drawflow-node.multiroute .inputs .input_1::before { content: 'Trigger' !important; }
.drawflow .drawflow-node.multiroute .inputs .input_2::before { content: 'Strategy' !important; }
.drawflow .drawflow-node.multiroute .inputs .input_3::before { content: 'Condition' !important; }

.drawflow .drawflow-node.exit .inputs .input_1::before { content: 'Trigger' !important; }

.drawflow .drawflow-node.parallelroute .inputs .input_1::before { content: 'Trigger' !important; }
.drawflow .drawflow-node.parallelroute .inputs .input_2::before { content: 'Condition' !important; }

.drawflow .drawflow-node.cachebreaker .inputs .input_1::before { content: 'Trigger' !important; color: rgb(var(--m-theme-warning)) !important; }

.drawflow .drawflow-node.bodypatch .inputs .input_1::before,
.drawflow .drawflow-node.body-patch .inputs .input_1::before { content: 'Trigger' !important; color: #9575cd !important; }

.drawflow .drawflow-node.routefilter .inputs .input_1::before,
.drawflow .drawflow-node.route-filter .inputs .input_1::before { content: 'Trigger' !important; color: #26a69a !important; }

.drawflow .drawflow-node.weightedsplitter .inputs .input_1::before,
.drawflow .drawflow-node.weighted-splitter .inputs .input_1::before { content: 'Trigger' !important; color: #9575cd !important; }

.drawflow .drawflow-node.responsecache .inputs .input_1::before,
.drawflow .drawflow-node.response-cache .inputs .input_1::before { content: 'Trigger' !important; color: #ffb300 !important; }

/* Outputs — label content per node type */
.drawflow .drawflow-node.singleroute .outputs .output_1::before { content: 'Success' !important; color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.singleroute .outputs .output_2::before { content: 'False' !important;   color: rgb(var(--m-theme-warning)) !important; }
.drawflow .drawflow-node.singleroute .outputs .output_3::before { content: 'Error' !important;   color: rgb(var(--m-theme-error))   !important; }

.drawflow .drawflow-node.multiroute .outputs .output_1::before { content: 'Success' !important;   color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.multiroute .outputs .output_2::before { content: 'Exhausted' !important; color: rgb(var(--m-theme-warning)) !important; }
.drawflow .drawflow-node.multiroute .outputs .output_3::before { content: 'Error' !important;     color: rgb(var(--m-theme-error))   !important; }

.drawflow .drawflow-node.parallelroute .outputs .output_1::before { content: 'Success' !important;    color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.parallelroute .outputs .output_2::before { content: 'All Failed' !important; color: rgb(var(--m-theme-warning)) !important; }
.drawflow .drawflow-node.parallelroute .outputs .output_3::before { content: 'Error' !important;      color: rgb(var(--m-theme-error))   !important; }

.drawflow .drawflow-node.start .outputs .output_1::before         { content: 'Next' !important;  color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.strategy .outputs .output_1::before      { content: 'Out' !important;   color: rgb(var(--m-theme-primary)) !important; }
.drawflow .drawflow-node.condition .outputs .output_1::before     { content: 'Out' !important;   color: rgb(var(--m-theme-info))    !important; }
.drawflow .drawflow-node.cachebreaker .outputs .output_1::before  { content: 'Next' !important;  color: rgb(var(--m-theme-warning)) !important; }

.drawflow .drawflow-node.bodypatch .outputs .output_1::before,
.drawflow .drawflow-node.body-patch .outputs .output_1::before { content: 'Next' !important; color: #9575cd !important; }

.drawflow .drawflow-node.routefilter .outputs .output_1::before,
.drawflow .drawflow-node.route-filter .outputs .output_1::before { content: 'Match' !important;   color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.routefilter .outputs .output_2::before,
.drawflow .drawflow-node.route-filter .outputs .output_2::before { content: 'NoMatch' !important; color: rgb(var(--m-theme-warning)) !important; }

.drawflow .drawflow-node.weightedsplitter .outputs .output_1::before,
.drawflow .drawflow-node.weighted-splitter .outputs .output_1::before { content: 'A' !important; color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.weightedsplitter .outputs .output_2::before,
.drawflow .drawflow-node.weighted-splitter .outputs .output_2::before { content: 'B' !important; color: rgb(var(--m-theme-warning)) !important; }

.drawflow .drawflow-node.responsecache .outputs .output_1::before,
.drawflow .drawflow-node.response-cache .outputs .output_1::before { content: 'HIT' !important;  color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.responsecache .outputs .output_2::before,
.drawflow .drawflow-node.response-cache .outputs .output_2::before { content: 'MISS' !important; color: rgb(var(--m-theme-warning)) !important; }

/* ============================ Connections ============================ */

.drawflow svg {
    z-index: 0 !important;
    position: absolute !important;
    overflow: visible !important;
}

.drawflow .connection {
    position: absolute !important;
    pointer-events: none !important;
    aspect-ratio: 1 / 1 !important;
}

.drawflow .connection .main-path {
    fill: none !important;
    stroke: rgb(var(--m-theme-primary)) !important;
    stroke-width: 2.5px !important;
    stroke-linecap: round !important;
    pointer-events: all !important;
    transition: stroke 0.15s ease, stroke-width 0.15s ease, filter 0.15s ease !important;
}

.drawflow .connection .main-path:hover {
    stroke: rgb(var(--m-theme-info)) !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 0 4px rgba(var(--m-theme-info), 0.5));
    cursor: pointer !important;
}

.drawflow .connection .main-path.selected {
    stroke: rgb(var(--m-theme-success)) !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 0 6px rgba(var(--m-theme-success), 0.55));
}

.drawflow .connection .point {
    cursor: move !important;
    stroke: rgb(var(--m-theme-primary)) !important;
    stroke-width: 2 !important;
    fill: var(--user-defined-binomsurface) !important;
    pointer-events: all !important;
}

.drawflow .connection .point.selected,
.drawflow .connection .point:hover {
    fill: rgb(var(--m-theme-info)) !important;
}

/* ============================ Form Controls inside Nodes ============================ */

.drawflow-node .df-select,
.drawflow-node .df-input,
.drawflow-node .drawflow-select,
.drawflow-node .drawflow-input {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.18) !important;
    color: inherit !important;
    border: 1px solid rgba(128, 128, 128, 0.25) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.drawflow-node .df-select:focus,
.drawflow-node .df-input:focus,
.drawflow-node .drawflow-select:focus,
.drawflow-node .drawflow-input:focus {
    border-color: rgb(var(--m-theme-primary)) !important;
    box-shadow: 0 0 0 3px rgba(var(--m-theme-primary), 0.18) !important;
}

.drawflow-node input[type="checkbox"] {
    accent-color: rgb(var(--m-theme-primary)) !important;
    cursor: pointer !important;
}

/* ============================ Node Delete Button ============================ */

.drawflow .drawflow-delete {
    position: absolute !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: rgb(var(--m-theme-error)) !important;
    color: rgb(var(--m-theme-on-error)) !important;
    z-index: 100 !important;
    border: 2px solid var(--user-defined-binombg) !important;
    line-height: 18px !important;
    font-weight: bold !important;
    text-align: center !important;
    border-radius: 50% !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    cursor: pointer !important;
    top: -10px !important;
    right: -10px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.1s ease !important;
}

.drawflow .drawflow-delete:hover {
    transform: scale(1.1);
}

.drawflow > .drawflow-delete {
    margin-left: -15px !important;
    margin-top: 15px !important;
}

.parent-node .drawflow-delete {
    right: -10px !important;
    top: -10px !important;
    display: block !important;
}

.drawflow .parent-node .drawflow-delete {
    display: block !important;
}

/* ============================================================
   Palette — grouped accordion with chip-cards (G-12)
   ============================================================ */

.palette-hint {
    font-size: 11px;
    opacity: 0.6;
    letter-spacing: 0.2px;
}

.palette-groups {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.palette-group {
    border: 1px solid rgba(128, 128, 128, 0.18);
    border-radius: 10px;
    background: rgba(128, 128, 128, 0.04);
    overflow: hidden;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.palette-group.expanded {
    border-color: rgba(128, 128, 128, 0.28);
    background: rgba(128, 128, 128, 0.06);
}

.palette-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    user-select: none;
    transition: background 0.15s ease;
}

.palette-group-header:hover {
    background: rgba(128, 128, 128, 0.08);
}

.palette-group-header:focus-visible {
    outline: 2px solid rgba(var(--m-theme-primary), 0.4);
    outline-offset: -2px;
}

.palette-group-chevron {
    opacity: 0.7;
    transition: transform 0.18s ease;
}

.palette-group.expanded .palette-group-chevron {
    transform: rotate(0deg);
}

.palette-group-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.85;
    flex: 1 1 auto;
}

.palette-group-items {
    display: none;
    padding: 4px 8px 10px 8px;
    gap: 6px;
    grid-template-columns: 1fr;
}

.palette-group.expanded .palette-group-items {
    display: grid;
}

/* Chip-card in palette */
.palette-chip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--user-defined-binomsurface);
    border: 1px solid rgba(128, 128, 128, 0.22);
    cursor: grab;
    user-select: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    color: rgb(var(--m-theme-on-surface));
    position: relative;
}

.palette-chip:active {
    cursor: grabbing;
}

.palette-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.palette-chip .chip-icon {
    font-size: 16px !important;
    line-height: 1.3;
    flex-shrink: 0;
}

.palette-chip .chip-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
}

/* ⓘ info button pinned to chip's right edge (I-3).
   Chip is full-width post-I-2, so a 20-24px overlay never hides label text.
   MButton renders <button type="button">; default type prevents implicit
   form-submit side-effects. stopPropagation on OnClick keeps MDrag from
   starting an HTML5 drag when the button is clicked. */
.palette-chip .chip-info {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.6;
    color: rgb(var(--m-theme-on-surface)) !important;
    pointer-events: auto;
    flex-shrink: 0;
}

.palette-chip .chip-info:hover {
    opacity: 1;
}

.palette-chip .chip-info .mdi {
    font-size: 15px !important;
    line-height: 1 !important;
}

/* Inline (non-fullscreen) palette frame: tall enough to show all 3 expanded
   groups (Flow 2 + Routes 3 + Modifiers 7 chips), group headers and the
   Clear Canvas button without scrolling at viewport height >= 900px.
   Deliberately NOT !important so the fullscreen max-height override wins. */
.palette-sheet-inline {
    min-height: 820px;
}

/* Per-type chip accent (left border 3px + icon tint) */
.palette-chip.chip-start            { border-left: 3px solid rgb(var(--m-theme-success)) !important; }
.palette-chip.chip-start .chip-icon { color: rgb(var(--m-theme-success)) !important; }

.palette-chip.chip-exit            { border-left: 3px solid rgb(var(--m-theme-error)) !important; }
.palette-chip.chip-exit .chip-icon { color: rgb(var(--m-theme-error)) !important; }

.palette-chip.chip-singleroute            { border-left: 3px solid rgb(var(--m-theme-primary)) !important; }
.palette-chip.chip-singleroute .chip-icon { color: rgb(var(--m-theme-primary)) !important; }

.palette-chip.chip-multiroute            { border-left: 3px solid #ab47bc !important; }
.palette-chip.chip-multiroute .chip-icon { color: #ab47bc !important; }

.palette-chip.chip-parallelroute            { border-left: 3px solid #9c27b0 !important; }
.palette-chip.chip-parallelroute .chip-icon { color: #ba68c8 !important; }

.palette-chip.chip-strategy            { border-left: 3px solid rgb(var(--m-theme-primary)) !important; }
.palette-chip.chip-strategy .chip-icon { color: rgb(var(--m-theme-primary)) !important; }

.palette-chip.chip-condition            { border-left: 3px solid rgb(var(--m-theme-info)) !important; }
.palette-chip.chip-condition .chip-icon { color: rgb(var(--m-theme-info)) !important; }

.palette-chip.chip-routefilter            { border-left: 3px solid #009688 !important; }
.palette-chip.chip-routefilter .chip-icon { color: #26a69a !important; }

.palette-chip.chip-bodypatch            { border-left: 3px solid #7c4dff !important; }
.palette-chip.chip-bodypatch .chip-icon { color: #9575cd !important; }

.palette-chip.chip-weightedsplitter            { border-left: 3px solid #7c4dff !important; }
.palette-chip.chip-weightedsplitter .chip-icon { color: #9575cd !important; }

.palette-chip.chip-responsecache            { border-left: 3px solid #ffb300 !important; }
.palette-chip.chip-responsecache .chip-icon { color: #ffb300 !important; }

.palette-chip.chip-cachebreaker            { border-left: 3px solid rgb(var(--m-theme-warning)) !important; }
.palette-chip.chip-cachebreaker .chip-icon { color: rgb(var(--m-theme-warning)) !important; }

/* ============================================================
   Fullscreen routing editor (G-8, H-6)
   ------------------------------------------------------------
   z-index strategy (verified against Masa.Blazor 1.11.9 masa-blazor.min.css):
     .m-app-bar--fixed              z=5
     .m-dialog__content             z=6
     .m-navigation-drawer--temp     z=7   <- highest layout chrome
     .m-snack:not(--absolute)       z=1000
     .m-enqueued-snackbars          z=1048 <- highest overall
   Fullscreen overlay picks z-index: 100 — covers every layout chrome
   (drawer/app-bar) but stays below snackbars (1000/1048) so toast
   notifications remain visible above fullscreen. Dialog + overlay
   are explicitly raised under body.routing-editor-fullscreen-active
   so the ⓘ dialog and backdrop stay interactive above the editor.
   ============================================================ */

body.routing-editor-fullscreen-active {
    overflow: hidden !important;
}

/* Dialog + overlay stacking while fullscreen is active:
   default .m-overlay has no static z; .m-dialog__content is z=6.
   Push both above our fullscreen z=100 so popup/dialog stays reachable. */
body.routing-editor-fullscreen-active .m-overlay {
    z-index: 99 !important;
}

body.routing-editor-fullscreen-active .m-dialog__content {
    z-index: 200 !important;
}

.routing-editor-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    background: var(--user-defined-binombg, #1a1a1a) !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: hidden !important;
}

/* Masa grid override:
   MRow renders <div class="row"> — display:flex; flex-wrap:wrap; margin:-12px
   MCol Cols=12 Md=3/9 renders <div class="col-12 col-md-3 ..."> with
   flex:0 0 25% / max-width:25% (and 75% resp.) + padding:12px.
   Keep the same side-by-side layout as inline mode: fixed-width palette
   on the left, canvas consuming the remaining viewport on the right. */
.routing-editor-fullscreen > .row,
.routing-editor-fullscreen > .m-row {
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 12px !important;
}

/* Reset ALL direct grid columns to neutral (kill Masa flex/max-width/padding);
   widths are re-declared per role below (palette fixed, canvas fluid). */
.routing-editor-fullscreen > .row > .col,
.routing-editor-fullscreen > .row > .col-12,
.routing-editor-fullscreen > .row > .col-md-3,
.routing-editor-fullscreen > .row > .col-md-9,
.routing-editor-fullscreen > .m-row > .col,
.routing-editor-fullscreen > .m-row > .col-12,
.routing-editor-fullscreen > .m-row > .col-md-3,
.routing-editor-fullscreen > .m-row > .col-md-9 {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* Palette column: fixed width strip on the left, full overlay height,
   scrolls independently from the canvas.
   Selector specificity must match the grid-reset above (which uses
   .routing-editor-fullscreen > .row > .col); otherwise flex:none wins. */
.routing-editor-fullscreen > .row > .routing-editor-palette,
.routing-editor-fullscreen > .m-row > .routing-editor-palette,
.routing-editor-fullscreen .routing-editor-palette {
    flex: 0 0 330px !important;
    width: 330px !important;
    max-width: 330px !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 1;
}

/* Canvas column: stretch to fill remaining viewport height.
   Selector specificity must match the grid-reset above (which uses
   .routing-editor-fullscreen > .row > .col); otherwise flex:none wins. */
.routing-editor-fullscreen > .row > .routing-editor-canvas,
.routing-editor-fullscreen > .m-row > .routing-editor-canvas,
.routing-editor-fullscreen .routing-editor-canvas {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Chain the height down: col -> m-sheet -> inner wrapper div -> drawflow */
.routing-editor-fullscreen .routing-editor-canvas .m-sheet {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.routing-editor-fullscreen .routing-editor-canvas .m-sheet > div:last-child {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* The actual drawflow canvas inside must stretch with the chain */
.routing-editor-fullscreen .routing-editor-canvas .drawflow,
.routing-editor-fullscreen .routing-editor-canvas .drawflow-parent {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Scrollbar polish for palette groups */
.palette-groups::-webkit-scrollbar {
    width: 6px;
}
.palette-groups::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 3px;
}