/* UserFlow 1.13.1. Alla regler är avgränsade till kontrollen. */
.uf { --bg:#f5f7fb; --surface:#fff; --text:#263449; --muted:#68778b; --line:#dbe3ee; --accent:#3974d5; --grid:#dfe7f1; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; position:relative; width:100%; }
html.dark .uf { --bg:#151b25; --surface:#202938; --text:#e4eaf3; --muted:#a2b0c3; --line:#3b485b; --accent:#77a9ff; --grid:#394758; }
.uf *, .uf *:before, .uf *:after { box-sizing:border-box; }
.uf button, .uf input, .uf textarea { font:inherit; }
.uf button { cursor:pointer; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); padding:7px 10px; }
.uf button:hover { border-color:var(--accent); color:var(--accent); }
.uf button:focus-visible, .uf input:focus-visible, .uf textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.uf-toolbar { min-height:58px; padding:10px 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.uf-version, .uf-zoom { color:var(--muted); font-size:12px; }
.uf-toolbar-actions { margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.uf .uf-primary { background:#3974d5; color:white; border-color:#3974d5; }
.uf-body { display:flex; height:650px; min-height:300px; }
.uf-viewport { flex:1; min-width:0; position:relative; overflow:hidden; touch-action:none; background-color:var(--bg); background-image:radial-gradient(circle at 2px 2px, var(--grid) 0.8px, transparent 1.1px); background-size:20px 20px; cursor:grab; }
.uf-world { position:absolute; left:0; top:0; width:1px; height:1px; transform-origin:0 0; }
.uf-lines { position:absolute; overflow:visible; width:1px; height:1px; pointer-events:none; }
.uf-edge-hit { pointer-events:stroke; cursor:pointer; stroke:transparent; stroke-width:16; fill:none; }
.uf-edge-line { fill:none; stroke:var(--accent); stroke-width:1.7; pointer-events:none; }
.uf-edge-label { fill:var(--text); font-size:12px; paint-order:stroke; stroke:var(--bg); stroke-width:5px; stroke-linejoin:round; pointer-events:none; }
.uf-node { position:absolute; width:220px; min-height:90px; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:9px; box-shadow:0 4px 14px #00000012; padding:13px 15px; cursor:move; user-select:none; overflow-wrap:anywhere; }
.uf-node.selected { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.uf-node strong { display:block; font-size:14px; }
.uf-node small { display:block; color:var(--muted); margin-top:5px; line-height:1.25; white-space:pre-wrap; }
.uf-node .uf-kind { color:var(--accent); font-size:11px; margin-bottom:4px; }
.uf-port { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; border:2px solid var(--accent); background:var(--surface); transform:translateY(-50%); padding:0!important; z-index:2; }
.uf-port.uf-out { right:-8px; cursor:crosshair; }.uf-port.uf-in { left:-8px; cursor:crosshair; }
.uf-panel { width:340px; flex:0 0 340px; overflow:auto; border-left:1px solid var(--line); background:var(--surface); }
.uf-panel[hidden], .uf [hidden] { display:none!important; }
.uf-panel-head { display:flex; justify-content:space-between; align-items:center; padding:14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:2; }
.uf-panel-content { padding:15px; }.uf-panel label { display:block; font-weight:600; margin-bottom:14px; }
.uf-panel input, .uf-panel textarea { display:block; width:100%; margin-top:5px; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:7px; padding:9px; font-weight:400; resize:vertical; }
.uf-panel input:disabled,.uf-panel textarea:disabled { opacity:1; color:var(--text); }
.uf-link { color:var(--accent); overflow-wrap:anywhere; }.uf-direction { margin:18px 0; color:var(--muted); }.uf-direction div { display:flex; gap:6px; margin-top:6px; }
.uf .uf-danger { color:#c34343; }.uf-hint { position:absolute; bottom:10px; left:12px; color:var(--muted); font-size:11px; pointer-events:none; }.uf-status { padding:0 14px; color:var(--muted); font-size:12px; min-height:20px; }
.uf[data-userflow="view"] .uf-edit-only,.uf[data-userflow="view"] .uf-port { display:none!important; }.uf[data-userflow="view"] .uf-node { cursor:pointer; }
.uf.uf-fullscreen { position:fixed; inset:0; z-index:99999; width:100%; height:100dvh; border-radius:0; display:flex; flex-direction:column; }.uf.uf-fullscreen .uf-body { flex:1; height:auto; }
@media(max-width:700px) { .uf-body { height:600px; position:relative; }.uf-panel { position:absolute; z-index:5; right:0; top:0; bottom:0; width:min(340px,92%); box-shadow:-8px 0 24px #0003; }.uf-toolbar-actions { margin-left:0; }.uf-hint { max-width:75%; } }

/* Anslutningspunkter och visuell återkoppling vid dragning. */
.uf-port.uf-left { left:-8px; top:50%; transform:translateY(-50%); }
.uf-port.uf-right { right:-8px; top:50%; transform:translateY(-50%); }
.uf-port.uf-top { top:-8px; left:50%; transform:translateX(-50%); }
.uf-port.uf-bottom { top:auto; bottom:-8px; left:50%; transform:translateX(-50%); }
.uf-port.uf-target { background:var(--accent); box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 24%, transparent); transform:translateY(-50%) scale(1.2); }
.uf-port.uf-top.uf-target,.uf-port.uf-bottom.uf-target { transform:translateX(-50%) scale(1.2); }
.uf-drag-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:6 4; pointer-events:none; }
.uf-panel select { display:block; width:100%; margin-top:5px; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:7px; padding:9px; font:inherit; font-weight:400; }
.uf [contenteditable="true"] { user-select:text; cursor:text; outline:1px solid var(--accent); border-radius:3px; }
.uf-modal { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:20px; background:#08132399; }
.uf-modal-card { width:min(420px,100%); background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:22px; box-shadow:0 18px 60px #0005; }
.uf-modal-card h3 { margin:0 0 8px; font-size:18px; }.uf-modal-card p { margin:0 0 20px; }.uf-modal-actions { display:flex; justify-content:flex-end; gap:8px; }.uf button.uf-confirm-danger { color:white; background:#bf3b3b; border-color:#bf3b3b; }

/* Markerad relation syns tydligt utan att pilens stil ändras. */
.uf-edge-line.uf-edge-selected { stroke:#d33545 !important; }
.uf-edge-selection { display:none; pointer-events:none; }
.uf-edge-selection.visible { display:block; }
.uf-edge-selection circle { fill:#d33545; stroke:var(--surface); stroke-width:2; }
.uf button:disabled { opacity:.45; cursor:not-allowed; }

/* Egna menyer med förhandsvisning av linjer och pilar. */
.uf-choice { position:relative; width:100%; margin-top:5px; font-weight:400; }
.uf .uf-choice-toggle { display:flex; width:100%; min-height:42px; justify-content:space-between; align-items:center; text-align:left; padding:7px 10px; background:var(--bg); color:var(--text); }
.uf-choice-selected { display:flex; align-items:center; gap:10px; min-width:0; }
.uf-choice-chevron { font-size:18px; color:var(--muted); margin-left:8px; }
.uf-choice-menu { position:absolute; z-index:12; top:calc(100% + 4px); left:0; right:0; max-height:250px; overflow:auto; padding:4px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 26px #0003; }
.uf .uf-choice-option { display:flex; width:100%; border:0; align-items:center; gap:10px; padding:9px 8px; background:transparent; color:var(--text); text-align:left; }
.uf .uf-choice-option:hover,.uf .uf-choice-option:focus-visible { background:var(--bg); color:var(--accent); }
.uf .uf-choice-option[aria-selected="true"] { background:var(--bg); color:var(--accent); }
.uf-choice-icon { flex:none; width:52px; height:22px; color:var(--accent); }
.uf .uf-choice-toggle:disabled { opacity:.8; }

/* Diskret palett i båda teman och snabbåtkomst till borttagning. */
.uf-panel-actions { display:flex; align-items:center; gap:6px; }
.uf .uf-head-delete { color:#bf4850; border-color:transparent; }
.uf-choice-chevron { font-size:11px; }
.uf-color-section { margin:16px 0; font-weight:600; }
.uf-palette { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.uf .uf-swatch { width:28px; height:28px; padding:0; border-radius:50%; border:1px solid #a8b3c0; }
.uf .uf-swatch[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:2px; }
.uf .uf-swatch-default { background:var(--surface); }.uf .uf-swatch-blue { background:#e7f2ff; }.uf .uf-swatch-green { background:#e6f5eb; }.uf .uf-swatch-yellow { background:#fff5d9; }.uf .uf-swatch-rose { background:#fcebed; }.uf .uf-swatch-purple { background:#f1eafd; }
.uf-node[data-node-color="blue"] { background:#e7f2ff; }.uf-node[data-node-color="green"] { background:#e6f5eb; }.uf-node[data-node-color="yellow"] { background:#fff5d9; }.uf-node[data-node-color="rose"] { background:#fcebed; }.uf-node[data-node-color="purple"] { background:#f1eafd; }
html.dark .uf-node[data-node-color="blue"] { background:#263c53; } html.dark .uf-node[data-node-color="green"] { background:#28463a; } html.dark .uf-node[data-node-color="yellow"] { background:#51452c; } html.dark .uf-node[data-node-color="rose"] { background:#50363e; } html.dark .uf-node[data-node-color="purple"] { background:#403652; }

/* Markeringsruta vid Shift + dra. */
.uf-lasso { position:absolute; z-index:4; pointer-events:none; border:1px solid var(--accent); background:rgba(57,116,213,.14); border-radius:3px; }

/* Musmarkering ska inte ge vyns webbläsarram; tangentbordsfokus är fortsatt synligt. */
.uf-viewport:focus:not(:focus-visible) { outline:none; }
.uf-viewport:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }

.uf .uf-grid-toggle { display:flex; align-items:center; gap:9px; }
.uf .uf-grid-toggle input { width:auto; margin:0; accent-color:var(--accent); }
.uf-grid-fields small { color:var(--muted); }

/* Visning och fästning är separata inställningar. */
.uf-viewport.uf-grid-hidden { background-image:none; }

.uf-status-row { display:flex; align-items:center; gap:15px; flex-wrap:wrap; padding:0 14px; }
.uf-status-row .uf-status { padding:0; } .uf-dirty { color:var(--muted); font-size:12px; } .uf-dirty.is-dirty { color:#c0711d; font-weight:600; }
.uf-align-bar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 14px; border-bottom:1px solid var(--line); background:var(--surface); }
.uf-align-bar span { color:var(--muted); font-size:12px; } .uf-align-bar button { font-size:12px; }
.uf-edge-selection.visible { pointer-events:none; } .uf-edge-selection .uf-edge-handle { pointer-events:all; cursor:grab; } .uf-edge-handle:hover { stroke-width:3; }

.uf-groups { position:absolute; left:0; top:0; pointer-events:none; }
.uf-group { position:absolute; border:1px dashed var(--accent); border-radius:10px; background:color-mix(in srgb,var(--accent) 4%,transparent); pointer-events:none; }
.uf .uf-group-title { position:absolute; top:8px; left:12px; max-width:calc(100% - 24px); padding:3px 8px; border:0; font-weight:600; background:var(--surface); pointer-events:auto; cursor:move; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uf[data-userflow="view"] .uf-group-title { cursor:pointer; }
.uf-search { position:relative; width:190px; } .uf-search-input { width:100%; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:7px; padding:7px 9px; font:inherit; }
.uf-search-results,.uf-context { position:absolute; z-index:30; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 25px #0003; } .uf-search-results { top:calc(100% + 5px); left:0; min-width:240px; max-width:340px; max-height:250px; overflow:auto; }
.uf .uf-search-results button,.uf .uf-context button { display:block; width:100%; border:0; text-align:left; background:transparent; white-space:normal; } .uf-search-empty { padding:8px; color:var(--muted); }

.uf-member-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0; overflow-wrap:anywhere; } .uf .uf-member-row button { font-size:12px; } .uf-group-add { margin:14px 0; }

/* Papperskorgen visas även när sidans Font Awesome inte laddats. */
.uf .uf-head-delete { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:7px; }
.uf-trash-icon { display:block; width:18px; height:18px; pointer-events:none; }

/* Ikoner i objektets högerklicksmeny. */
.uf .uf-context button { display:flex; align-items:center; gap:9px; min-width:175px; }
.uf-context-icon { display:block; flex:none; width:17px; height:17px; pointer-events:none; }
.uf .uf-context .uf-context-danger { color:#bf4850; }
.uf .uf-context button:hover { background:var(--bg); }

/* En tom beskrivning får en diskret yta som går att dubbelklicka. */
.uf-node .uf-summary-placeholder { min-height:20px; cursor:text; }

/* Färg och klickyta för grupper. Rubriken ligger ovanför ramen utan bottenplatta. */
.uf-group { pointer-events:auto; background:rgba(57,116,213,.035); cursor:pointer; }
.uf .uf-group-title { top:-25px; left:8px; padding:2px 4px; background:transparent; }
.uf .uf-group-title:hover { background:transparent; }
.uf-group[data-group-color="blue"] { background:rgba(77,145,220,.09); }
.uf-group[data-group-color="green"] { background:rgba(72,162,105,.10); }
.uf-group[data-group-color="yellow"] { background:rgba(225,177,40,.10); }
.uf-group[data-group-color="rose"] { background:rgba(208,101,126,.10); }
.uf-group[data-group-color="purple"] { background:rgba(148,102,206,.10); }
html.dark .uf-group[data-group-color="blue"] { background:rgba(77,145,220,.16); }
html.dark .uf-group[data-group-color="green"] { background:rgba(72,162,105,.16); }
html.dark .uf-group[data-group-color="yellow"] { background:rgba(225,177,40,.16); }
html.dark .uf-group[data-group-color="rose"] { background:rgba(208,101,126,.16); }
html.dark .uf-group[data-group-color="purple"] { background:rgba(148,102,206,.16); }
.uf-group-choice .uf-choice-toggle i { font-size:11px; color:var(--muted); }

.uf[data-userflow="edit"] .uf-group { cursor:move; }

/* Rubriken ligger centrerad över överkanten. Strecket delas med flex i stället för att döljas av en bakgrund. */
.uf-group { border-top:0; }
.uf-group-top { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:6px; transform:translateY(-50%); pointer-events:none; }
.uf-group-top-before, .uf-group-top-after { display:block; border-top:1px dashed var(--accent); height:0; }
.uf-group-top-before { flex:0 0 18px; } .uf-group-top-after { flex:1 1 auto; min-width:5px; }
.uf .uf-group-top .uf-group-title { position:static; flex:0 1 auto; max-width:calc(100% - 41px); padding:0; border-radius:0; background:transparent; pointer-events:auto; }

/* Låt överkantens streck börja och sluta där de rundade hörnen tar vid. */
.uf-group-top { left:9px; right:9px; }
.uf-group-top-before { flex-basis:9px; }
.uf-group::before, .uf-group::after { content:""; position:absolute; top:-1px; width:10px; height:10px; pointer-events:none; border-top:1px dashed var(--accent); }
.uf-group::before { left:-1px; border-left:1px dashed var(--accent); border-top-left-radius:10px; }
.uf-group::after { right:-1px; border-right:1px dashed var(--accent); border-top-right-radius:10px; }

/* Gemensam meny för filåtgärder och inställningar. */
.uf-toolbar { position:relative; z-index:15; }
.uf-tools { position:relative; }
.uf .uf-tools-toggle { display:flex; align-items:center; gap:7px; }
.uf-tools-icon { width:17px; height:17px; flex:none; pointer-events:none; }
.uf-tools-chevron { width:13px; height:13px; flex:none; color:var(--muted); pointer-events:none; }
.uf-tools-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:25; min-width:205px; padding:5px; border:1px solid var(--line); border-radius:9px; background:var(--surface); box-shadow:0 12px 25px #0003; }
.uf .uf-tools-menu button { display:flex; align-items:center; gap:10px; width:100%; border:0; padding:9px 10px; text-align:left; background:transparent; white-space:nowrap; }
.uf .uf-tools-menu button:hover, .uf .uf-tools-menu button:focus-visible { background:var(--bg); color:var(--accent); }
.uf-tools-separator { height:1px; margin:5px 4px; background:var(--line); }

.uf-empty-fields { color:var(--muted); line-height:1.5; }
@media(max-width:700px) { .uf[data-userflow="edit"][data-panel-mode] .uf-panel { position:relative; top:auto; right:auto; bottom:auto; width:45%; flex:0 0 45%; box-shadow:none; } }

/* Panelen tar egen plats i flexlayouten och täcker aldrig arbetsytan. */
.uf[data-userflow="edit"] .uf-panel { position:relative; inset:auto; flex:0 0 340px; width:340px; min-width:0; box-shadow:none; }
.uf[data-userflow="edit"] .uf-viewport { flex:1 1 0; min-width:0; }
@media(max-width:700px) { .uf[data-userflow="edit"][data-panel-mode] .uf-panel { position:relative; inset:auto; flex:0 0 45%; width:45%; box-shadow:none; } }

.uf-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.uf-add-menu { position:relative; }.uf-add-options { position:absolute; top:calc(100% + 5px); left:0; min-width:175px; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 20px #0003; z-index:30; }
.uf .uf-add-options button { display:block; width:100%; text-align:left; border:0; }
.uf .uf-text-node { background:transparent; border-color:transparent; box-shadow:none; min-height:50px; }
.uf-text-node .uf-kind,.uf-text-node small { display:none; }
.uf-text-node strong { font-size:14px; font-weight:400; white-space:pre-wrap; }
.uf-text-node[data-text-variant="heading"] strong { font-size:20px; font-weight:600; }
.uf .uf-text-node.selected { border:1px dashed var(--accent); box-shadow:none; }

.uf[data-selected-node-type="text"] .uf-node-fields .uf-function-only, .uf[data-selected-node-type="text"] .uf-node-fields .uf-color-section, .uf[data-selected-node-type="text"] .uf-node-fields .uf-direction { display:none; }

.uf-text-node strong { line-height:1.2; }
.uf .uf-resize { display:none; position:absolute; width:8px; height:8px; padding:0; border:1px solid var(--accent); background:var(--surface); border-radius:2px; z-index:3; }
.uf .uf-text-node.selected .uf-resize { display:block; }
.uf-resize-n { top:0; left:calc(50% - 4px); cursor:n-resize; }.uf-resize-s { bottom:0; left:calc(50% - 4px); cursor:s-resize; }
.uf-resize-e { right:0; top:calc(50% - 4px); cursor:e-resize; }.uf-resize-w { left:0; top:calc(50% - 4px); cursor:w-resize; }
.uf-resize-ne { right:0; top:0; cursor:ne-resize; }.uf-resize-nw { left:0; top:0; cursor:nw-resize; }.uf-resize-se { right:0; bottom:0; cursor:se-resize; }.uf-resize-sw { left:0; bottom:0; cursor:sw-resize; }

.uf .uf-add-options button { display:flex; align-items:center; gap:10px; }
.uf-add-icon { width:18px; height:18px; flex:none; color:var(--accent); pointer-events:none; }

/* Enhetlig höjd och centrering, endast för verktygsfältets toppnivå. */
.uf .uf-toolbar-actions > button,
.uf .uf-toolbar-actions > .uf-tools > .uf-tools-toggle,
.uf .uf-toolbar-actions > .uf-add-menu > button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    height:36px;
    min-height:36px;
    padding:0 10px;
    line-height:1;
    vertical-align:middle;
}
.uf .uf-toolbar-actions > button:has(> svg) { width:36px; padding:0; }
.uf .uf-toolbar-actions > button > svg { display:block; width:17px; height:17px; margin:0; flex:none; }

/* Behåll vit text även när den primära knappen hovras eller fokuseras. */
.uf button.uf-primary:hover,
.uf button.uf-primary:focus,
.uf button.uf-primary:focus-visible,
.uf button.uf-primary:active { background:#2d63bb; border-color:#2d63bb; color:#fff; }

/* Samma återkoppling i båda verktygsfältets menyer. */
.uf .uf-add-options button:hover, .uf .uf-add-options button:focus-visible { background:var(--bg); color:var(--accent); }