/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — palette
   --accent:   #0ea5e9  (sky blue)
   --accent-h: #0284c7  (hover)
   --surface:  #ffffff
   --surface2: #f8fafc  (panels, sidebar)
   --surface3: #f1f5f9  (inputs, bindings)
   --border:   #e2e8f0
   --border2:  #cbd5e1  (stronger border)
   --text:     #1e293b
   --text2:    #64748b  (muted)
   --text3:    #94a3b8  (very muted)
═══════════════════════════════════════════════════════════════ */
/* NOTA: le regole globali `body { ... }` e `.nav-link.active { ... }` dello standalone
   sono state rimosse durante l'integrazione nel platform per non sovrascrivere lo stile
   globale del backend (il configuratore usa il layout/tema di Medicx_Platform). */

/* ═══════════════════════════════════════════════════════════════
   LEGACY FORM EDITOR (Edit.razor)
═══════════════════════════════════════════════════════════════ */
.action-card { border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.action-card .action-header { background: #f8fafc; border-radius: 8px 8px 0 0; padding: .5rem .75rem; cursor: grab; }
.nested-block { border-left: 3px solid #0ea5e9; padding-left: 1rem; margin-left: .5rem; }
textarea.font-monospace { font-family: 'Consolas','Courier New',monospace; font-size: .8rem; resize: vertical; min-height: 120px; white-space: pre; overflow-x: auto; }
.if-branch-panel { border-radius: 6px; overflow: hidden; }
.if-branch-tabs { background: #f8fafc; border-bottom: 2px solid #e2e8f0; flex-wrap: nowrap; }
.if-branch-tabs .nav-link { border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: .35rem .9rem; font-size: .85rem; transition: border-color .15s; }
.if-branch-tabs .nav-link.active { background: #fff; border-bottom-color: currentColor; }
.if-branch-body { padding: .75rem .5rem .5rem; background: #fff; }
.if-branch-panel.depth-0 { border-left: 4px solid #0ea5e9; }
.if-branch-panel.depth-1 { border-left: 4px solid #8b5cf6; }
.if-branch-panel.depth-2 { border-left: 4px solid #06b6d4; }
.if-branch-panel.depth-3 { border-left: 4px solid #f97316; }
.if-branch-panel.depth-4 { border-left: 4px solid #10b981; }

/* ═══════════════════════════════════════════════════════════════
   SUGGEST INPUT
═══════════════════════════════════════════════════════════════ */
.suggest-wrapper { position: relative; }
.suggest-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 1050;
    min-width: 100%; max-height: 220px; overflow-y: auto;
    margin: 2px 0 0; padding: 0; list-style: none;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.suggest-item { padding: .3rem .65rem; cursor: pointer; font-size: .85rem; white-space: nowrap; color: #1e293b; }
.suggest-item:hover { background: #0ea5e9; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   CANVAS LAYOUT
═══════════════════════════════════════════════════════════════ */
.canvas-page {
    display: flex; flex-direction: column; height: 100vh;
    background: #f8fafc; color: #1e293b; overflow: hidden;
}

/* ── Toolbar ── */
.canvas-toolbar {
    flex-shrink: 0; height: 52px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex; align-items: center; gap: 8px; padding: 0 14px;
    z-index: 200;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.canvas-toolbar .flow-title {
    font-size: 1rem; font-weight: 600; color: #1e293b;
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background .15s;
}
.canvas-toolbar .flow-title:hover { background: #f1f5f9; }
.canvas-toolbar .flow-title input {
    background: transparent; border: none; outline: none;
    color: #1e293b; font-size: 1rem; font-weight: 600; width: 220px;
}

.btn-toolbar {
    display: flex; align-items: center; justify-content: center;
    gap: 5px; padding: 6px 10px; border-radius: 7px; border: none;
    font-size: .8rem; font-weight: 500; cursor: pointer;
    transition: background .15s, transform .1s;
    text-decoration: none;
}
.btn-toolbar:hover { transform: translateY(-1px); }
.btn-toolbar:active { transform: translateY(0); }

.btn-toolbar.outline {
    background: transparent; color: #64748b; border: 1px solid #e2e8f0;
}
.btn-toolbar.outline:hover { background: #f1f5f9; color: #1e293b; border-color: #0ea5e9; }

.btn-toolbar.primary { background: #0ea5e9; color: #fff; }
.btn-toolbar.primary:hover { background: #0284c7; }

.btn-toolbar.success { background: #10b981; color: #fff; }
.btn-toolbar.success:hover { background: #059669; }
.btn-toolbar.success:disabled { background: #a7f3d0; color: #065f46; cursor: not-allowed; }

.toolbar-sep { width: 1px; height: 28px; background: #e2e8f0; margin: 0 4px; }

/* ── Zoom button group ── */
.zoom-btn-group { display: flex; border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; }
.zoom-btn-group .zoom-step { border: none; border-radius: 0; padding: 5px 9px; border-right: 1px solid #e2e8f0; }
.zoom-btn-group .zoom-step:last-child { border-right: none; }

/* ── Main area ── */
.canvas-main { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* ── Canvas wrapper ── */
.canvas-wrapper {
    flex: 1; position: relative; overflow: hidden;
    background: radial-gradient(circle at 1px 1px, #cbd5e1 1px, transparent 0) 0 0 / 28px 28px;
    background-color: #f8fafc;
    cursor: default;
}
.canvas-board { position: absolute; transform-origin: 0 0; }
.canvas-svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.canvas-connection { fill: none; stroke: rgba(14,165,233,.6); stroke-width: 2; stroke-linecap: round; }
.canvas-arrow { fill: rgba(14,165,233,.8); }

/* ── Legacy flow nodes ── */
.fn-node-header { cursor: grab; user-select: none; }
.flow-node.fc-dragging { opacity: .92; box-shadow: 0 12px 40px rgba(14,165,233,.25), 0 4px 20px rgba(0,0,0,.1); }

.fn-node-port { transition: transform .12s, background .12s, box-shadow .12s; }
.fn-node-port:hover, .fn-node-port.fc-port-hot {
    background: #0ea5e9 !important; transform: translateY(-50%) scale(1.6) !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,.3); cursor: crosshair; z-index: 20;
}

.flow-node {
    position: absolute; width: 220px; border-radius: 12px;
    background: #fff; border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    cursor: pointer; transition: border-color .2s, box-shadow .2s; user-select: none;
}
.flow-node:hover { border-color: #0ea5e9; box-shadow: 0 4px 20px rgba(14,165,233,.15); z-index: 10; }
.flow-node.selected { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15), 0 4px 20px rgba(14,165,233,.2); z-index: 10; }

.fn-node-header { padding: 9px 12px; border-radius: 10px 10px 0 0; display: flex; align-items: center; gap: 8px; }
.fn-node-header span { font-weight: 600; font-size: .88rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-node-header.start { background: linear-gradient(135deg,#059669,#10b981); }
.fn-node-header.end   { background: linear-gradient(135deg,#dc2626,#ef4444); }
.fn-node-header.fn    { background: linear-gradient(135deg,#0284c7,#0ea5e9); }

.fn-node-body { padding: 8px 12px 10px; font-size: .72rem; color: #64748b; min-height: 60px; }
.fn-node-body .node-param { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; overflow: hidden; }
.node-param-badge { display: inline-block; width: 16px; height: 16px; border-radius: 3px; font-size: .65rem; font-weight: 700; line-height: 16px; text-align: center; flex-shrink: 0; }
.node-param-badge.req { background: #ef4444; color: #fff; }
.node-param-badge.opt { background: #e2e8f0; color: #64748b; }

.node-binding { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; font-size: .72rem; overflow: hidden; }
.node-binding-key { color: #94a3b8; flex: 1 1 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-binding-eq  { color: #0ea5e9; flex-shrink: 0; }
.node-binding-val { color: #475569; flex: 1 1 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }

.fn-node-port { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #0ea5e9; border: 2px solid #fff; top: 50%; transform: translateY(-50%); }
.fn-node-port.port-left { left: -7px; }
.fn-node-port.port-right { right: -7px; }

.node-actions { display: flex; gap: 3px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.flow-node:hover .node-actions { opacity: 1; pointer-events: all; }
.node-act-btn {
    width: 26px; height: 26px; border-radius: 6px; border: none;
    background: #f1f5f9; color: #64748b; font-size: .75rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.node-act-btn:hover { background: #0ea5e9; color: #fff; }
.node-act-btn.danger:hover { background: #ef4444; color: #fff; }

.canvas-add-btn {
    position: absolute; width: 28px; height: 28px; border-radius: 50%;
    background: #fff; border: 2px solid #e2e8f0; color: #0ea5e9;
    font-size: 1rem; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .1s; z-index: 5; opacity: .7;
}
.canvas-add-btn:hover { background: #0ea5e9; color: #fff; border-color: #0ea5e9; transform: scale(1.15); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   CANVAS CONFIG PANEL
═══════════════════════════════════════════════════════════════ */
.canvas-panel {
    width: 0; flex-shrink: 0; overflow: hidden;
    background: #ffffff; border-left: 1px solid #e2e8f0;
    display: flex; flex-direction: column;
    transition: width .25s cubic-bezier(.4,0,.2,1); z-index: 100;
    box-shadow: -2px 0 8px rgba(0,0,0,.05);
}
.canvas-panel.open { width: 380px; }
.canvas-panel.open-wide { width: 500px; }

.panel-header {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
    font-weight: 600; font-size: .9rem; color: #1e293b;
}
.btn-close-panel {
    width: 28px; height: 28px; border-radius: 6px; border: none;
    background: transparent; color: #94a3b8; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s;
}
.btn-close-panel:hover { background: #fee2e2; color: #ef4444; }

.panel-body { flex: 1; overflow-y: auto; padding: 16px; scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; }
.panel-body::-webkit-scrollbar { width: 5px; }
.panel-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }

/* Config inputs */
.config-label { display: block; font-size: .78rem; font-weight: 600; color: #64748b; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.config-input { width: 100%; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; color: #1e293b; padding: 7px 10px; font-size: .85rem; transition: border-color .15s; }
.config-input:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 2px rgba(14,165,233,.12); background: #fff; }
.config-input-sm { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; color: #1e293b; padding: 5px 8px; font-size: .8rem; transition: border-color .15s; }
.config-input-sm:focus { outline: none; border-color: #0ea5e9; background: #fff; }
.config-select { width: 100%; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; color: #1e293b; padding: 7px 10px; font-size: .85rem; }
.config-select:focus { outline: none; border-color: #0ea5e9; }
.config-select-sm { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; color: #1e293b; padding: 5px 8px; font-size: .8rem; }
.config-textarea { width: 100%; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; color: #1e293b; padding: 7px 10px; font-size: .8rem; font-family: 'Consolas',monospace; resize: vertical; min-height: 100px; }
.config-textarea:focus { outline: none; border-color: #0ea5e9; }

.config-section { margin-bottom: 16px; }
.config-section-title {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #0ea5e9;
    padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid #f1f5f9;
}

.config-param-row { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.config-binding-row { display: flex; gap: 5px; align-items: center; margin-bottom: 5px; background: #f8fafc; border-radius: 6px; padding: 4px 6px; border: 1px solid #f1f5f9; }
.config-binding-key { font-size: .78rem; color: #64748b; flex: 0 0 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.config-binding-key.required { color: #ef4444; }
.config-eq { color: #0ea5e9; font-size: .8rem; flex-shrink: 0; margin: 0 2px; }

.btn-mini {
    width: 24px; height: 24px; border-radius: 5px; border: none;
    background: #f1f5f9; color: #64748b; font-size: .75rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.btn-mini:hover { background: #0ea5e9; color: #fff; }
.btn-mini.danger:hover { background: #ef4444; color: #fff; }

.config-dropdown {
    position: absolute; top: 100%; right: 0; z-index: 1050;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1); min-width: 180px; padding: 4px;
}
.config-dropdown-item {
    display: block; width: 100%; padding: 6px 10px; border: none;
    background: transparent; color: #1e293b; font-size: .8rem;
    text-align: left; border-radius: 5px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.config-dropdown-item:hover { background: #0ea5e9; color: #fff; }

.config-panel-actions { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid #f1f5f9; margin-top: 12px; }
.btn-config-action {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 7px; border: 1px solid #e2e8f0;
    background: transparent; color: #64748b; font-size: .8rem;
    cursor: pointer; transition: all .15s;
}
.btn-config-action:hover { background: #f1f5f9; color: #1e293b; border-color: #0ea5e9; }
.btn-config-action.danger { border-color: #fecaca; color: #ef4444; }
.btn-config-action.danger:hover { background: #fef2f2; color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════
   FUNCTION CANVAS – PALETTE + RESIZE HANDLE
═══════════════════════════════════════════════════════════════ */

/* Drag handle between palette and canvas */
.palette-resize-handle {
    width: 5px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    border-left: 1px solid #f1f5f9;
    position: relative;
    z-index: 10;
    transition: background .15s, border-color .15s;
}
.palette-resize-handle:hover,
.palette-resize-handle.dragging {
    background: rgba(14,165,233,.12);
    border-color: #0ea5e9;
}
/* Grip dots */
.palette-resize-handle::after {
    content: '⋮';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #cbd5e1;
    font-size: 13px;
    pointer-events: none;
    line-height: 1;
}
.palette-resize-handle:hover::after,
.palette-resize-handle.dragging::after {
    color: #0ea5e9;
}

.canvas-palette {
    width: 190px; flex-shrink: 0;
    background: #ffffff; border-right: 1px solid #e2e8f0;
    display: flex; flex-direction: column;
    transition: width .18s ease;
}
.canvas-palette.palette-collapsed {
    width: 36px;
    overflow: hidden;
}
.palette-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 6px 4px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
    min-height: 34px;
}
.palette-title {
    font-size: .65rem; color: #374151;
    text-transform: uppercase; letter-spacing: .08em;
    white-space: nowrap; overflow: hidden;
}
.palette-collapsed .palette-title { display: none; }
.palette-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    border: none; background: transparent;
    color: #94a3b8; cursor: pointer; border-radius: 5px;
    flex-shrink: 0; font-size: .85rem;
    transition: background .12s, color .12s;
}
.palette-toggle-btn:hover { background: #f1f5f9; color: #0ea5e9; }
.palette-body {
    overflow-y: auto; padding: 6px 6px 8px;
    flex: 1;
    scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent;
}
.palette-body::-webkit-scrollbar { width: 4px; }
.palette-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }

.palette-category { margin-bottom: 8px; }
.palette-cat-header { display: flex; align-items: center; gap: 6px; font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #94a3b8; padding: 4px 6px; margin-bottom: 3px; }
.palette-action-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 7px; border: none; background: transparent; color: #475569; font-size: .78rem; cursor: pointer; transition: background .12s; text-align: left; }
.palette-action-btn:hover { background: #f1f5f9; color: #1e293b; }
.palette-action-btn .pa-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
.palette-action-btn .pa-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Action flow (legacy vertical) ── */
.action-flow-area { flex: 1; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; }
.action-flow-canvas { flex: 1; overflow: hidden; position: relative; background: radial-gradient(circle at 1px 1px, #cbd5e1 1px, transparent 0) 0 0 / 24px 24px; background-color: #f8fafc; }
.action-flow-board { position: absolute; transform-origin: 0 0; display: flex; flex-direction: column; align-items: center; min-width: 360px; padding: 40px 40px 80px; gap: 0; }

.flow-connector { width: 2px; height: 28px; background: rgba(14,165,233,.4); margin: 0 auto; position: relative; flex-shrink: 0; }
.flow-connector::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid rgba(14,165,233,.5); }

.flow-add-between { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: #fff; border: 1.5px solid #e2e8f0; color: #0ea5e9; font-size: .85rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .1s; margin: 0 auto; opacity: 0; }
.action-flow-board:hover .flow-add-between { opacity: .6; }
.flow-add-between:hover { background: #0ea5e9; color: #fff; opacity: 1 !important; transform: scale(1.15); }

.action-node-card { width: 300px; border-radius: 10px; background: #fff; border: 1.5px solid #e2e8f0; cursor: pointer; transition: border-color .15s, box-shadow .15s; position: relative; flex-shrink: 0; }
.action-node-card:hover { border-color: #0ea5e9; box-shadow: 0 2px 12px rgba(14,165,233,.15); z-index: 5; }
.action-node-card.selected { border-color: #0ea5e9; box-shadow: 0 0 0 2px rgba(14,165,233,.15); z-index: 5; }
.action-node-inner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.action-node-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.action-node-info { flex: 1; min-width: 0; }
.action-node-name { font-size: .82rem; font-weight: 600; color: #1e293b; }
.action-node-desc { font-size: .72rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-node-btns { display: none; gap: 3px; align-items: center; }
.action-node-card:hover .action-node-btns { display: flex; }
.action-node-btn { width: 24px; height: 24px; border-radius: 5px; border: none; background: #f1f5f9; color: #64748b; font-size: .7rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s; }
.action-node-btn:hover { background: #0ea5e9; color: #fff; }
.action-node-btn.danger:hover { background: #ef4444; color: #fff; }

.action-node-branches { display: flex; gap: 6px; padding: 0 12px 8px; }
.branch-badge { display: flex; align-items: center; gap: 4px; font-size: .7rem; padding: 2px 8px; border-radius: 20px; }
.branch-badge.then { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.branch-badge.else { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }

.action-node-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 10px 0 0 10px; background: var(--action-color, #cbd5e1); }

.node-start-card, .node-end-card { width: 120px; border-radius: 50px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 18px; font-size: .82rem; font-weight: 600; border: 1.5px solid; flex-shrink: 0; }
.node-start-card { background: #dcfce7; border-color: #86efac; color: #16a34a; }
.node-end-card   { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* ── Panel step editor overrides (light) ── */
.panel-step-editor .action-card { background: #fff; border-color: #e2e8f0; }
.panel-step-editor .action-card .action-header { background: #f8fafc; color: #1e293b; }
.panel-step-editor .form-control, .panel-step-editor .form-select { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
.panel-step-editor .form-control:focus, .panel-step-editor .form-select:focus { background: #fff; border-color: #0ea5e9; color: #1e293b; box-shadow: 0 0 0 2px rgba(14,165,233,.12); }
.panel-step-editor .form-label { color: #64748b; }
.panel-step-editor .text-muted { color: #94a3b8 !important; }
.panel-step-editor .bg-light { background: #f8fafc !important; }
.panel-step-editor .btn-outline-secondary { border-color: #e2e8f0; color: #64748b; }
.panel-step-editor .btn-outline-secondary:hover { background: #f1f5f9; color: #1e293b; }
.panel-step-editor .badge.bg-dark { background: #1e293b !important; }
.panel-step-editor .if-branch-panel { background: #f8fafc; }
.panel-step-editor .if-branch-tabs { background: #f1f5f9; }
.panel-step-editor .if-branch-body { background: #fff; }
.panel-step-editor .nav-link { color: #64748b; }
.panel-step-editor .nav-link.active { background: #fff; color: #0ea5e9; }

/* ═══════════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════════ */
.canvas-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; font-size: .85rem; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,.12); animation: toastIn .3s ease; }
.canvas-toast.success { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; }
.canvas-toast.error   { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.canvas-toast button { background: transparent; border: none; color: inherit; cursor: pointer; padding: 0 2px; }
@keyframes toastIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════════
   ZOOM BADGE
═══════════════════════════════════════════════════════════════ */
.canvas-zoom-badge { position: absolute; bottom: 16px; left: 16px; z-index: 50; display: flex; gap: 4px; align-items: center; }
.zoom-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; font-size: .85rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.zoom-btn:hover { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }

.canvas-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #f8fafc; color: #64748b; font-size: .9rem; gap: 10px; }

/* ═══════════════════════════════════════════════════════════════
   INDEX PAGES
═══════════════════════════════════════════════════════════════ */
.btn-canvas-open {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 7px; font-size: .8rem;
    background: linear-gradient(135deg,#e0f2fe,#bae6fd);
    border: 1px solid #7dd3fc; color: #0284c7;
    cursor: pointer; transition: all .15s; text-decoration: none;
}
.btn-canvas-open:hover { background: linear-gradient(135deg,#0ea5e9,#0284c7); color: #fff; border-color: transparent; }

/* ═══════════════════════════════════════════════════════════════
   Z.BLAZOR.DIAGRAMS – LIGHT THEME OVERRIDES
═══════════════════════════════════════════════════════════════ */

/* Canvas background */
.diagram-canvas {
    background-color: #f8fafc !important;
    background-image: radial-gradient(circle at 1px 1px, #cbd5e1 1px, transparent 0) !important;
    background-size: 28px 28px !important;
}

/* ── Ports ──
   In ZBD v3, widgets render ports via <PortRenderer>.
   The widget root needs position:relative as anchor context.
   margin: -7px centres a 14px circle on the edge.
── */
.zbd-node, .zbd-action-node, .zbd-pill-node { position: relative; }

.zbd-node .diagram-port,
.zbd-action-node .diagram-port,
.zbd-pill-node .diagram-port {
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    margin: -7px !important;
    border-radius: 50% !important;
    background: #0ea5e9 !important;
    border: 2.5px solid #fff !important;
    cursor: crosshair !important;
    pointer-events: all !important;
    z-index: 20 !important;
    transition: transform .12s, box-shadow .12s !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
}
.zbd-node .diagram-port:hover,
.zbd-action-node .diagram-port:hover,
.zbd-pill-node .diagram-port:hover {
    transform: scale(1.7) !important;
    box-shadow: 0 0 0 5px rgba(14,165,233,.25) !important;
    background: #0284c7 !important;
}

/* Alignment */
.zbd-node .diagram-port.right,  .zbd-action-node .diagram-port.right,  .zbd-pill-node .diagram-port.right  { right:  0; top:  50%; }
.zbd-node .diagram-port.left,   .zbd-action-node .diagram-port.left,   .zbd-pill-node .diagram-port.left   { left:   0; top:  50%; }
.zbd-node .diagram-port.top,    .zbd-action-node .diagram-port.top,    .zbd-pill-node .diagram-port.top    { top:    0; left: 50%; }
.zbd-node .diagram-port.bottom, .zbd-action-node .diagram-port.bottom, .zbd-pill-node .diagram-port.bottom { bottom: 0; left: 50%; }

/* Porte angolari per IfNodeModel */
.zbd-if-node .diagram-port {
    position: absolute !important; width: 14px !important; height: 14px !important;
    margin: -7px !important; border-radius: 50% !important;
    background: #f59e0b !important; border: 2.5px solid #fff !important;
    cursor: crosshair !important; pointer-events: all !important; z-index: 20 !important;
    transition: transform .12s, box-shadow .12s !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
}
.zbd-if-node .diagram-port:hover {
    transform: scale(1.7) !important;
    box-shadow: 0 0 0 5px rgba(245,158,11,.3) !important;
    background: #d97706 !important;
}

.diagram-port.has-links { background: #0284c7 !important; }

/* ── Links ── */
.diagram-link path, .diagram-link line, .diagram-link polyline {
    stroke: rgba(14,165,233,.7) !important;
    stroke-width: 2px !important;
    fill: none !important;
}
.diagram-link:hover path, .diagram-link:hover line {
    stroke: #0284c7 !important;
    stroke-width: 3px !important;
}
/* Collegamento selezionato — arancione con glow.
   Il filter sul <g> funziona anche se i path non vengono raggiunti dal selettore CSS.
   Lo stroke inline viene applicato dal JS applyLinkHighlight come metodo primario. */
.diagram-link.selected {
    filter: drop-shadow(0 0 5px rgba(245,158,11,.9));
}
.diagram-link.selected path,
.diagram-link.selected line,
.diagram-link.selected polyline {
    stroke: #f59e0b !important;
    stroke-width: 3.5px !important;
}

/* ── Cursore CTRL (modalità selezione rettangolare) ── */
.fc-rect-mode,
.fc-rect-mode * {
    cursor: crosshair !important;
}

/* ── Nodes ── */
.diagram-node {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.08));
}
.diagram-node.selected,
.diagram-node.diagram-node--selected {
    filter: drop-shadow(0 0 0 2px rgba(14,165,233,.4)) drop-shadow(0 4px 12px rgba(14,165,233,.2)) !important;
}

/* ── Multi-select highlight ── */
.diagram-node.selected .zbd-node,
.diagram-node.selected .zbd-action-node,
.diagram-node.selected .zbd-pill-node {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,.2) !important;
}

/* ── Toolbar badges ── */
.toolbar-badge { font-size: .7rem; padding: 2px 8px; border-radius: 20px; border: 1px solid; }
.toolbar-badge.danger { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.toolbar-badge.muted  { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }
.cnt-badge { background: #f1f5f9; color: #64748b; border-radius: 10px; padding: 1px 7px; font-size: .7rem; }
.config-empty { font-size: .78rem; color: #94a3b8; font-style: italic; padding: 6px 0; }

/* ═══════════════════════════════════════════════════════════════
   ZBD NODE WIDGET STYLES – LIGHT
═══════════════════════════════════════════════════════════════ */

/* ── Base node card ── */
.zbd-node {
    width: 220px;
    border-radius: 10px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    /* NO overflow:hidden — ports extend past the border */
    transition: border-color .15s, box-shadow .15s;
}
.zbd-node.zbd-selected,
.diagram-node.selected .zbd-node {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,.15) !important;
}

.zbd-node-hdr {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    border-radius: 9px 9px 0 0;
}
.zbd-hdr-icon { font-size: 1.05rem; flex-shrink: 0; }
.zbd-node-title { font-weight: 600; font-size: .85rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.zbd-hdr-start { background: linear-gradient(135deg, #059669, #10b981); }
.zbd-hdr-fn    { background: linear-gradient(135deg, #0284c7, #0ea5e9); }
.zbd-hdr-end   { background: linear-gradient(135deg, #dc2626, #ef4444); }

.zbd-node-body { padding: 8px 12px 10px; font-size: .72rem; color: #64748b; min-height: 52px; }
.zbd-empty { font-style: italic; color: #94a3b8; }
.zbd-more  { color: #94a3b8; font-size: .7rem; margin-top: 2px; }

.zbd-param-row { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; overflow: hidden; }
.zbd-param-badge { display: inline-block; width: 16px; height: 16px; border-radius: 3px; font-size: .65rem; font-weight: 700; line-height: 16px; text-align: center; flex-shrink: 0; }
.zbd-param-badge.req { background: #ef4444; color: #fff; }
.zbd-param-badge.opt { background: #e2e8f0; color: #64748b; }
.zbd-param-name { color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zbd-binding-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; overflow: hidden; }
.zbd-binding-key { color: #94a3b8; flex: 1 1 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zbd-binding-eq  { color: #0ea5e9; flex-shrink: 0; font-size: .75rem; }
.zbd-binding-val { color: #475569; flex: 1 1 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }

/* ── Pill nodes (START / END) ── */
.zbd-pill-node { display: flex; align-items: center; gap: 6px; padding: 7px 18px; border-radius: 50px; font-size: .82rem; font-weight: 600; border: 1.5px solid; width: 120px; justify-content: center; }
.zbd-pill-start { background: #dcfce7; border-color: #86efac; color: #16a34a; }
.zbd-pill-end   { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* ── Action step node ── */
.zbd-action-node {
    width: 290px; border-radius: 10px;
    background: #ffffff; border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: flex; flex-direction: column;
    position: relative; transition: border-color .15s, box-shadow .15s;
}
.zbd-action-node.zbd-selected,
.diagram-node.selected .zbd-action-node {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,.15) !important;
}
.zbd-action-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 9px 0 0 9px; background: var(--ac, #cbd5e1); }
.zbd-action-inner { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 15px; }
.zbd-action-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.zbd-action-info { flex: 1; min-width: 0; }
.zbd-action-name { font-size: .82rem; font-weight: 600; color: #1e293b; }
.zbd-action-desc { font-size: .71rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Wrapper icona + badge sovrapposto */
.zbd-action-icon-wrap { position: relative; flex-shrink: 0; }

/* Badge etichetta gerarchica (es. "3.1.2") — nel header IF e sull'icona dei nodi azione */
.zbd-node-badge {
    display: inline-flex;
    align-items: center;
    font-size: .62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    background: #0ea5e9;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .02em;
}
/* Variante sovrapposta sull'icona del nodo azione: angolo in basso a destra */
.zbd-node-badge--icon {
    position: absolute;
    bottom: -5px;
    right: -7px;
    font-size: .55rem;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.zbd-action-branches { display: flex; gap: 6px; padding: 0 12px 8px 15px; }
.zbd-branch-then, .zbd-branch-else { display: flex; align-items: center; gap: 4px; font-size: .7rem; padding: 2px 8px; border-radius: 20px; }
.zbd-branch-then { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.zbd-branch-else { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.zbd-loop-list   { opacity: .6; margin-left: 4px; font-size: .65rem; }

/* ═══════════════════════════════════════════════════════════════
   NODO IF (decision con 2 uscite)
═══════════════════════════════════════════════════════════════ */
.zbd-if-node {
    width: 310px;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid #f59e0b;
    box-shadow: 0 2px 8px rgba(245,158,11,.15);
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}
.zbd-if-node.zbd-selected,
.diagram-node.selected .zbd-if-node {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,.2) !important;
}
.zbd-if-header {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    border-radius: 9px 9px 0 0;
    color: #fff;
}
.zbd-if-title  { font-weight: 700; font-size: .88rem; }
.zbd-if-subtitle { font-size: .72rem; opacity: .8; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zbd-if-condition {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 12px;
    font-size: .78rem; border-bottom: 1px solid #fef3c7;
    min-height: 36px;
}
.zbd-if-field { color: #1e293b; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }
.zbd-if-op    { color: #f59e0b; font-weight: 700; flex-shrink: 0; }
.zbd-if-val   { color: #0ea5e9; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }

.zbd-if-branches-row {
    display: flex; align-items: stretch;
    min-height: 36px;
}
.zbd-if-else-col, .zbd-if-then-col {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 8px; font-size: .75rem; font-weight: 600;
}
.zbd-if-else-col {
    color: #dc2626; border-right: 1px solid #e2e8f0;
    border-radius: 0 0 0 9px;
}
.zbd-if-then-col {
    color: #16a34a;
    border-radius: 0 0 9px 0;
}
.zbd-if-count {
    background: #f1f5f9; color: #64748b;
    border-radius: 20px; padding: 1px 6px; font-size: .68rem;
}
.zbd-if-divider { width: 1px; background: #e2e8f0; flex-shrink: 0; }

/* Porte del nodo IF — posizionamento speciale */
.zbd-if-node { position: relative; }

/* Top: center top (ereditato dal CSS generale .zbd-node .diagram-port.top) */
.zbd-if-node .diagram-port.top         { top: 0;    left: 50%; }
/* BottomLeft: angolo bottom-left (uscita ELSE) */
.zbd-if-node .diagram-port.bottomleft  { bottom: 0; left: 20%; top: auto; right: auto; }
/* BottomRight: angolo bottom-right (uscita THEN) */
.zbd-if-node .diagram-port.bottomright { bottom: 0; right: 20%; top: auto; left: auto; margin-right: 0; }