/* Canvas de fluxo do CRM (épico 12306): segue o tema do XAF pelas variáveis --crm-* do site.css, sem cores fixas. */
.crm-flow {
    position: relative;
    overflow: hidden;
    cursor: grab;
    outline: none;
    background-color: var(--crm-surface-alt);
    background-image: radial-gradient(var(--crm-border-strong) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid var(--crm-border);
    border-radius: .75rem;
    user-select: none;
    touch-action: none;
}
.crm-flow:active { cursor: grabbing; }
.crm-flow-viewport { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.crm-flow-svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.crm-flow-svg .crm-flow-hit { pointer-events: stroke; }
.crm-flow-nodes, .crm-flow-labels { position: absolute; left: 0; top: 0; }

.crm-flow-node {
    position: absolute;
    box-sizing: border-box;
    width: 260px;
    padding: .65rem .75rem .55rem;
    background: var(--crm-surface);
    color: var(--crm-text);
    border: 1px solid var(--crm-border);
    border-radius: .8rem;
    box-shadow: var(--crm-shadow);
    cursor: pointer;
    outline: none;
}
.crm-flow-node:hover { border-color: var(--crm-border-strong); }
.crm-flow-node.selected, .crm-flow-node:focus-visible { border-color: var(--crm-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crm-primary) 28%, transparent), var(--crm-shadow); }
.crm-flow-node.kind-entry { border-radius: 1.6rem .8rem .8rem 1.6rem; }
.crm-flow-node.kind-end { width: 160px; border-radius: 2rem; text-align: center; }
.crm-flow-node.kind-end .crm-flow-head { justify-content: center; }
.crm-flow-node.kind-state { width: 240px; }

.crm-flow-head { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.crm-flow-chip {
    flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: .55rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--node-color, var(--crm-primary)) 15%, var(--crm-surface));
    color: var(--node-color, var(--crm-primary-text));
    font-size: 1rem;
}
.crm-flow-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.crm-flow-caption { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-subtle); }
.crm-flow-title { font-size: .86rem; font-weight: 650; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.crm-flow-subtitle { font-size: .74rem; color: var(--crm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* O selo fica sobre a borda de cima do cartão, para não apertar o título. */
.crm-flow-badge { position: absolute; top: -.62rem; right: .75rem; font-size: .66rem; font-weight: 700; padding: .05rem .45rem; border-radius: .6rem; border: 1px solid var(--crm-border); background: var(--crm-surface-alt); color: var(--crm-text); white-space: nowrap; box-shadow: var(--crm-shadow); }
.crm-flow-badge.ok { background: var(--crm-success-soft); color: var(--crm-success-text); }
.crm-flow-badge.wait { background: var(--crm-primary-soft); color: var(--crm-primary-text); }
.crm-flow-badge.fail { background: var(--crm-danger-soft); color: var(--crm-danger-text); }
.crm-flow-badge.warn { background: var(--crm-warning-soft); color: var(--crm-warning-text); }
.crm-flow-details { list-style: none; margin: .45rem 0 0; padding: .45rem 0 0; border-top: 1px solid var(--crm-border); display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; color: var(--crm-muted); }
.crm-flow-details li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.crm-flow-node.status-done { border-color: color-mix(in srgb, var(--crm-success) 55%, var(--crm-border)); }
.crm-flow-node.status-current { border-color: var(--crm-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--crm-primary) 25%, transparent); }
.crm-flow-node.status-skipped { opacity: .4; }
.crm-flow-node.status-pending { opacity: .65; border-style: dashed; }
.crm-flow-node.status-failed { border-color: var(--crm-danger); }
.crm-flow-node.status-inactive { opacity: .6; border-style: dashed; }

.crm-flow-port { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--crm-surface); border: 2px solid var(--crm-border-strong); box-sizing: border-box; }
.crm-flow-port.in { left: calc(50% - 6px); top: -7px; pointer-events: none; }
.crm-flow-outlets { position: relative; display: flex; justify-content: space-around; gap: .3rem; margin-top: .55rem; height: .1rem; }
.crm-flow-port.out { position: relative; bottom: -.7rem; cursor: crosshair; border-color: var(--crm-primary); }
.crm-flow-port.out:hover { background: var(--crm-primary); }
.crm-flow-port-label { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .66rem; font-weight: 600; color: var(--crm-muted); background: var(--crm-surface-alt); padding: 0 .3rem; border-radius: .3rem; }
.crm-flow-node.kind-state .crm-flow-port.in { display: none; }
.crm-flow-node.kind-state .crm-flow-outlets { margin-top: .2rem; }

.crm-flow-edge { fill: none; stroke: var(--crm-border-strong); stroke-width: 2; }
.crm-flow-edge.selected { stroke: var(--crm-primary); stroke-width: 2.5; }
.crm-flow-edge.dashed { stroke-dasharray: 5 5; }
.crm-flow-edge.preview { stroke: var(--crm-primary); stroke-dasharray: 6 5; }
.crm-flow-edge.status-on { stroke: var(--crm-success); stroke-width: 3; }
.crm-flow-edge.status-off { opacity: .35; stroke-dasharray: 4 5; }
.crm-flow-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }

.crm-flow-edge-label {
    position: absolute; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: .25rem;
    font: inherit; font-size: .72rem; font-weight: 600; white-space: nowrap;
    padding: .1rem .5rem; border-radius: 1rem; cursor: pointer;
    background: var(--crm-surface); color: var(--crm-muted); border: 1px solid var(--crm-border);
}
.crm-flow-edge-label.selected { border-color: var(--crm-primary); color: var(--crm-primary-text); background: var(--crm-primary-soft); }
.crm-flow-edge-label.status-on { border-color: var(--crm-success); color: var(--crm-success-text); background: var(--crm-success-soft); }
.crm-flow-edge-label.status-off { opacity: .4; }

/* Moldura do componente Blazor: o canvas ocupa a moldura e os controles da tela flutuam no canto. */
.crm-flow-frame { position: relative; min-height: 320px; }
.crm-flow-frame > .crm-flow-surface { position: absolute; inset: 0; }
.crm-flow-tools { position: absolute; right: .6rem; bottom: .6rem; display: flex; gap: .3rem; z-index: 2; }
.crm-flow-frame .crm-flow-tools button.crm-flow-tool {
    width: 2rem; height: 2rem; padding: 0; border-radius: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--crm-surface); color: var(--crm-text); border: 1px solid var(--crm-border); box-shadow: var(--crm-shadow); cursor: pointer;
}
.crm-flow-frame .crm-flow-tools button.crm-flow-tool:hover { border-color: var(--crm-primary); color: var(--crm-primary-text); }