/* wwwroot/css/process-editor.css */

/* Layout: canvas a sinistra, pannello proprietà a destra */
.process-designer-layout {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}
.process-designer-layout .process-canvas-wrap {
    flex: 1 1 0;
    min-width: 0;
}
.process-props-panel {
    width: 280px;
    flex-shrink: 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow-y: auto;
    max-height: 70vh;
    background: var(--rz-base-background-color, #fff);
}
.activity-props-empty {
    padding: 1rem;
    color: var(--rz-text-disabled-color);
}
.rz-material-dark .process-props-panel { border-color: #444; background: #1e1e1e; }

.process-canvas-wrap {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: url('../images/backgrounds/orchestrator-config-bg.png') center / cover no-repeat;
    border: 1px solid #D5D5D5;
}
.process-canvas { width: 100%; height: 70vh; border-radius: 10px; overflow: hidden; }
/* Task per modalità performer — fill pastello + bordo saturo (palette confermata) */
.djs-element.xr-HumanOnly .djs-visual > :is(rect, path) { fill: #e0f2f1 !important; stroke: #009688 !important; stroke-width: 2px !important; }
.djs-element.xr-AiAssisted .djs-visual > :is(rect, path) { fill: #efe7fb !important; stroke: #7c4dff !important; stroke-width: 2px !important; }
.djs-element.xr-Automated  .djs-visual > :is(rect, path) { fill: #e3eeff !important; stroke: #2962ff !important; stroke-width: 2px !important; }
.djs-element.xr-gw-exclusive .djs-visual > :is(polygon, path) { fill: #fff6e6 !important; stroke: #f0a020 !important; }
.djs-element.xr-gw-parallel  .djs-visual > :is(polygon, path) { fill: #eef6fc !important; stroke: #5FA8DB !important; }
/* Eventi Start (verde) / End (rosso) — gli eventi sono <circle> nel djs-visual */
.djs-element.xr-start .djs-visual > :is(circle, path) { fill: #eaf7ee !important; stroke: #28a745 !important; }
.djs-element.xr-end   .djs-visual > :is(circle, path) { fill: #fdecec !important; stroke: #d64545 !important; }
.rz-material-dark .process-canvas-wrap {
    background-image: url('../images/backgrounds/orchestrator-config-bg-dark.png');
    border-color: #282828;
}
.rz-material-dark .process-canvas { border-color: #444; }

/* Piano 5 — evidenziazione nodi con token attivo (marker 'xr-active' via canvas.addMarker).
   La prima regola colora il bordo SVG del nodo; la seconda aggiunge il glow via filter. */
.xr-active .djs-visual > :nth-child(1) { stroke: #28a745 !important; stroke-width: 3px !important; }
.xr-active.djs-element { filter: drop-shadow(0 0 6px rgba(40,167,69,0.6)); }

/* Zoom controls — overlay in alto a destra sul canvas (Task 4) */
.process-zoom-controls { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; align-items: center; gap: 4px; background: var(--rz-base-background-color, #fff); border: 1px solid #e0e0e0; border-radius: 8px; padding: 2px 6px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.process-zoom-level { min-width: 42px; text-align: center; font-size: 0.8rem; font-weight: 600; }

/* Loading overlay sul canvas durante il caricamento dell'editor (Task 5) */
.process-canvas-loading { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.65); border-radius: 10px; }
.rz-material-dark .process-canvas-loading { background: rgba(20,20,20,0.6); }

/* Nasconde il logo "Powered by bpmn.io" in basso a destra del canvas.
   bpmn-js è MIT: il logo in-canvas è una cortesia richiesta da bpmn.io, NON un
   obbligo di licenza (la licenza richiede solo di mantenere il copyright nei sorgenti).
   Valutare se tenere un'attribuzione altrove (es. pagina crediti/about). */
.bjs-powered-by { display: none !important; }

/* C3 — maniglia di ridimensionamento del pannello proprietà */
.process-props-resizer {
    flex: 0 0 6px;
    align-self: stretch;
    cursor: col-resize;
    border-radius: 3px;
    background: transparent;
    transition: background 0.15s ease;
}
.process-props-resizer:hover {
    background: var(--rz-primary, #5e72e4);
    opacity: 0.45;
}
.rz-material-dark .process-props-resizer:hover { opacity: 0.6; }