/*
 * prosess-editor.css — prosesskart-editor (Spor 10, Fase B).
 *
 * Steg tegnes som SVG-noder med auto-layout (lagdelt, top-ned). Fargene per
 * steg-type er lokale semantiske tokens for denne komponenten — de finnes ikke
 * som globale tokens fordi de kun gir mening her.
 */

.prosess-editor {
  --steg-start:     var(--gronn-5, #16a34a);
  --steg-handling:  var(--bla-5, #2563eb);
  --steg-beslutning:var(--gul-5, #d97706);
  --steg-slutt:     var(--rod-5, #dc2626);
  --steg-referanse: var(--lilla-5, #7c3aed);
  display: flex;
  flex-direction: column;
  gap: var(--avstand-2, 8px);
  /* Fyll høyden under header så vi får mest mulig arbeidsområde */
  min-height: calc(100vh - 7rem);
}

/* Verktøylinje over canvas */
.prosess-verktoy {
  display: flex;
  align-items: center;
  gap: var(--avstand-2, 8px);
  flex-wrap: wrap;
  padding-bottom: var(--avstand-2, 8px);
}
.prosess-verktoy__sum {
  margin-left: auto;
  display: flex;
  gap: var(--avstand-3, 12px);
  font-size: 12px;
  color: var(--tekst-dempet, #64748b);
}
.prosess-verktoy__sum strong { color: var(--tekst, #0f172a); }

/* Scroll-container for lerretet */
.prosess-canvas {
  position: relative;
  overflow: hidden;     /* pan/zoom skjer via transform, ikke scroll */
  border: var(--kant);
  border-radius: var(--radius, 8px);
  background-color: var(--flate-2, #f8fafc);
  /* Subtilt rutenett som referanse */
  background-image:
    linear-gradient(var(--kant-svak, #eef2f7) 1px, transparent 1px),
    linear-gradient(90deg, var(--kant-svak, #eef2f7) 1px, transparent 1px);
  background-size: 24px 24px;
  flex: 1 1 auto;       /* vokser og fyller resten av editor-høyden */
  min-height: 320px;
}
/* Grafen flyttes/skaleres med transform fra øvre venstre hjørne. */
.prosess-svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

/* Pan: gripe-markør på tomt lerret, lukket hånd mens man drar */
.prosess-canvas { cursor: grab; }
.prosess-canvas--panner { cursor: grabbing; }
.prosess-canvas--panner svg { pointer-events: none; } /* hindrer tekstmarkering under drag */

/* Koble-modus: markør og hint */
.prosess-canvas--kobler { cursor: crosshair; }
.prosess-koble-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--farge-primaer, #2563eb);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.prosess-koble-banner strong { font-weight: 700; }
.prosess-koble-banner .knapp--liten { background: rgba(255, 255, 255, 0.18); color: #fff; border: 0; }
.prosess-koble-banner .knapp--liten:hover { background: rgba(255, 255, 255, 0.3); }

/* Noder — sirkel med glyph + etikett under (ShiftX-stil) */
.prosess-eksport-meny { min-width: 230px; z-index: 50; }

/* Rad-meny (⋯) på prosess-lista — gjenbruker .prosess-meny */
.prosess-rad-meny { min-width: 160px; z-index: 50; }
.prosess-meny__valg--fare .prosess-meny__navn { color: var(--rod-6, #b91c1c); }
.prosess-tom-rad { text-align: center; padding: 22px 0; }

/* Del / bygg inn-modal */
.prosess-deling { display: flex; flex-direction: column; gap: 14px; }
.prosess-deling__bryter { display: flex; align-items: flex-start; gap: 9px; font-weight: 600; cursor: pointer; }
.prosess-deling__bryter input { margin-top: 3px; }
.prosess-deling__valg { border: var(--kant); border-radius: var(--radius, 8px); padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; transition: opacity 0.15s ease; }
.prosess-deling__valg legend { font-size: 12px; font-weight: 600; color: var(--tekst-dempet, #64748b); padding: 0 4px; }
.prosess-deling__valg label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.prosess-deling__resultat { display: flex; flex-direction: column; gap: 6px; }
.prosess-deling__kopi { display: flex; gap: 8px; align-items: stretch; }
.prosess-deling__kopi input, .prosess-deling__kopi textarea { flex: 1; font-family: ui-monospace, monospace; font-size: 12px; padding: 8px 10px; border: var(--kant); border-radius: 6px; resize: none; background: var(--flate-2, #f8fafc); }
.prosess-deling__kopi .knapp--liten { white-space: nowrap; align-self: flex-start; }

.prosess-node { cursor: pointer; }
/* «Steg»-noder kan dras for å flyttes i flyten → grab-markør som hint */
.prosess-node[data-type="handling"], .prosess-node[data-type="referanse"] { cursor: grab; }
.prosess-canvas--drar-node .prosess-node[data-type="handling"],
.prosess-canvas--drar-node .prosess-node[data-type="referanse"] { cursor: grabbing; }
.prosess-node__disk {
  stroke: var(--flate, #fff);   /* hvit ring skiller disken fra kantene */
  stroke-width: 2;
}
.prosess-node:hover .prosess-node__disk { stroke: var(--primaer, #1e4cb8); }
.prosess-node--valgt .prosess-node__disk { stroke: var(--primaer, #1e4cb8); stroke-width: 3; }
.prosess-node--kildevalgt .prosess-node__disk {
  stroke: var(--primaer, #1e4cb8);
  stroke-width: 3;
  stroke-dasharray: 4 3;
}
.prosess-node[data-type="start"]      .prosess-node__disk { fill: var(--steg-start); }
.prosess-node[data-type="handling"]   .prosess-node__disk { fill: var(--steg-handling); }
.prosess-node[data-type="beslutning"] .prosess-node__disk { fill: var(--steg-beslutning); }
.prosess-node[data-type="slutt"]      .prosess-node__disk { fill: var(--steg-slutt); }
.prosess-node[data-type="referanse"]  .prosess-node__disk { fill: var(--steg-referanse); }

.prosess-node__glyph {
  fill: #fff;
  font-size: 18px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
/* Aktør/system-ikon inni sirkelen (hvit strek) */
.prosess-node__ikon {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Start/Slutt som pill-badge (ShiftX-stil) */
.prosess-node__pill {
  fill: var(--flate, #fff);
  stroke: var(--farge-kant, #e2e8f0);
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.10));
}
.prosess-node:hover .prosess-node__pill { stroke: var(--primaer, #1e4cb8); }
.prosess-node--valgt .prosess-node__pill { stroke: var(--primaer, #1e4cb8); stroke-width: 2.5; }
.prosess-node--kildevalgt .prosess-node__pill {
  stroke: var(--primaer, #1e4cb8);
  stroke-width: 2.5;
  stroke-dasharray: 4 3;
}
.prosess-node[data-type="start"] .prosess-node__pill-ikon { fill: var(--steg-start); }
.prosess-node[data-type="slutt"] .prosess-node__pill-ikon { fill: var(--steg-slutt); }
.prosess-node__pill-glyph {
  fill: #fff;
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.prosess-node__pill-tekst {
  font-size: 13px;
  font-weight: 600;
  fill: var(--tekst, #0f172a);
  dominant-baseline: central;
}
.prosess-node__tittel {
  text-anchor: middle;
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--tekst, #0f172a);
}
.prosess-node__meta {
  text-anchor: middle;
  font-size: 11px;
  fill: var(--tekst-dempet, #64748b);
}
/* Varighets-pille over noden (ShiftX-stil) */
.prosess-tidpille__bg {
  fill: var(--flate-3, #eef2f7);
  stroke: var(--farge-kant, #e1e5eb);
  stroke-width: 1;
}
.prosess-tidpille__tekst {
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 11px;
  font-weight: 600;
  fill: var(--tekst-dempet, #64748b);
}

/* Kanter */
.prosess-kant {
  fill: none;
  stroke: var(--farge-kant-sterk, #c8ced8);
  stroke-width: 6;            /* tykk flyt-strek (ShiftX-stil), ingen pilspiss */
  stroke-linecap: round;
}
.prosess-kant-treff {            /* usynlig tykk linje for lettere klikk */
  fill: none;
  stroke: transparent;
  stroke-width: 12;
  cursor: pointer;
}
/* Retur-/feedback-sløyfe: tynnere, stiplet, med pilspiss — leses som «tilbake». */
.prosess-kant--retur {
  stroke-width: 3.5;
  stroke-dasharray: 7 6;
}
.prosess-kant-gruppe:hover .prosess-kant { stroke: var(--primaer, #1e4cb8); }
.prosess-kant-gruppe--retur:hover .prosess-kant--retur { stroke: var(--primaer, #1e4cb8); }
/* Dra-og-slipp: drop-mål-linje fremheves; node som dras dempes og slipper gjennom treff */
.prosess-kant-gruppe--drop .prosess-kant { stroke: var(--primaer, #1e4cb8); stroke-width: 8; stroke-dasharray: none; }
.prosess-canvas--drar-node { cursor: grabbing; }
.prosess-node--drar { pointer-events: none; opacity: 0.65; }
.prosess-kant__etikett {
  font-size: 11px;
  fill: var(--tekst-dempet, #475569);
}
.prosess-kant__etikett-bg { fill: var(--flate-2, #f8fafc); }

/* Hover-revealed «+» på kanten → sett inn node */
.prosess-kant-plus { opacity: 0; cursor: pointer; transition: opacity 0.12s ease; }
.prosess-kant-gruppe:hover .prosess-kant-plus,
.prosess-kant-plus:hover { opacity: 1; }
.prosess-kant-plus circle { fill: var(--primaer, #1e4cb8); }
.prosess-kant-plus line { stroke: #fff; stroke-width: 2; stroke-linecap: round; }

/* «+» på høyre side av en node → legg til en gren ut (split) */
.prosess-node-plus { opacity: 0; cursor: pointer; transition: opacity 0.12s ease; }
.prosess-node:hover .prosess-node-plus,
.prosess-node-plus:hover { opacity: 1; }
.prosess-node-plus circle { fill: var(--primaer, #1e4cb8); }
.prosess-node-plus line { stroke: #fff; stroke-width: 2; stroke-linecap: round; }

/* Innsett-meny (popover ved «+») */
.prosess-meny {
  position: absolute;
  z-index: 30;
  background: var(--flate, #fff);
  border: var(--kant);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  padding: 4px;
  min-width: 200px;
}
.prosess-meny__valg {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  border-radius: 6px;
  color: var(--tekst, #0f172a);
}
.prosess-meny__valg:hover { background: var(--flate-2, #f1f5f9); }
.prosess-meny__ikon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--tekst-dempet, #64748b); }
.prosess-meny__navn { flex: 1 1 auto; text-align: left; }
.prosess-meny__skille { height: 1px; background: var(--farge-kant, #e2e8f0); margin: 4px 6px; }

/* Knapperad i steg-panelet (SidePanel-fotnote) */
.prosess-panel-fot { display: flex; justify-content: flex-end; }

/* Steg-panel (ShiftX-stil: tittel+@, sammenleggbare seksjoner) */
.prosess-panel { display: flex; flex-direction: column; gap: 10px; }
.prosess-tittelfelt { position: relative; }
/* Tittel som contenteditable-boks — bærer inline @-tagging (blå chips i teksten) */
.prosess-tittel-ce {
  min-height: 52px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  cursor: text;
}
.prosess-tittel-ce:focus { outline: none; }
.prosess-tittel-ce:empty::before {
  content: attr(data-tom);
  color: var(--tekst-dempet, #94a3b8);
  font-weight: 400;
  pointer-events: none;
}
/* Inline mention-chip (Facebook-stil: blå tekst, lett blå bakgrunn) */
.mention {
  color: var(--farge-primaer-tekst, #1d4ed8);
  background: var(--farge-primaer-svak, #eff6ff);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
  white-space: nowrap;
}
.prosess-panel__label { font-size: 12px; font-weight: 600; color: var(--tekst-dempet, #64748b); margin-top: 2px; }
.prosess-slett-lenke {
  align-self: flex-start;
  margin-top: 14px;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--rod-6, #b91c1c);
  text-decoration: underline;
}
.prosess-seksjon { border: var(--kant); border-radius: 8px; padding: 0 10px; }
.prosess-seksjon > summary {
  cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 13px; list-style: none;
  color: var(--tekst, #0f172a);
}
.prosess-seksjon > summary::-webkit-details-marker { display: none; }
.prosess-seksjon[open] > :not(summary):last-child { margin-bottom: 10px; }
.prosess-duration { display: flex; gap: 8px; margin-bottom: 8px; }
.prosess-duration > [data-varighet-verdi] { flex: 1 1 auto; }
.prosess-duration > [data-varighet-enhet] { flex: 0 0 110px; }

.prosess-grener { border-top: var(--kant); padding-top: 10px; }
.prosess-grener__topp { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.prosess-grener__tom { font-size: 12px; margin: 4px 0; }
.prosess-gren { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.prosess-gren > [data-gren-etikett] { flex: 1 1 auto; }
.prosess-gren__maal { font-size: 11px; color: var(--tekst-dempet, #64748b); white-space: nowrap; }
.prosess-gren__x { border: 0; background: none; cursor: pointer; color: var(--tekst-dempet, #64748b); font-size: 16px; line-height: 1; padding: 0 2px; }
.prosess-gren__x:hover { color: var(--rod-6, #b91c1c); }

/* Liten knapp-variant (lokal; promotér til base.css ved gjenbruk) */
.knapp--liten { padding: 3px 9px; font-size: 12px; }

/* Zoom-kontroll i verktøylinja */
.prosess-zoom { display: inline-flex; align-items: center; gap: 4px; }
.prosess-zoom__niva { font-size: 12px; color: var(--tekst-dempet, #64748b); min-width: 38px; text-align: center; }
.prosess-zoom .ikonknapp { width: 26px; height: 26px; }
/* Flytende zoom-kontroll i nederste høyre hjørne av lerretet */
.prosess-zoom--flyt {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  gap: 2px;
  padding: 4px 6px;
  background: var(--flate-1, #fff);
  border: var(--kant);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.prosess-zoom--flyt .ikonknapp { background: transparent; border: 0; }
.prosess-zoom--flyt .ikonknapp:hover { background: var(--flate-2, #f1f5f9); }

/* @-tagging i steg-panelet */
.tagg-felt { position: relative; }
.tagg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tagg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 9px;
  border-radius: 12px;
  font-size: 12px;
  background: var(--flate-2, #f1f5f9);
  color: var(--tekst, #0f172a);
  border: var(--kant);
}
.tagg-chip--tjeneste { background: #eef2ff; border-color: #c7d2fe; }
.tagg-chip--organisasjon { background: #ecfdf5; border-color: #a7f3d0; }
.tagg-chip--bruker { background: #fef2f2; border-color: #fecaca; }
.tagg-chip__x {
  border: 0; background: none; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px;
  color: var(--tekst-dempet, #64748b);
}
.tagg-chip__x:hover { color: var(--rod-6, #b91c1c); }
.tagg-forslag {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 5;
  margin-top: 4px;
  max-height: 240px;
  overflow: auto;
  padding: 4px;
  background: var(--flate, #fff);
  border: var(--kant);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}
.tagg-forslag__valg {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  font-size: 13px;
  color: var(--tekst, #0f172a);
}
.tagg-forslag__valg:hover,
.tagg-forslag__valg--aktiv { background: var(--flate-2, #f1f5f9); }
.tagg-merke {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  border: var(--kant);
}

/* Tom tilstand inni canvas */
.prosess-tom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--avstand-2, 8px);
  min-height: 380px;
  color: var(--tekst-dempet, #64748b);
  text-align: center;
  padding: var(--avstand-4, 16px);
}

/* Lese-/legende-rad under canvas */
.prosess-legende {
  display: flex;
  gap: var(--avstand-3, 12px);
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--tekst-dempet, #64748b);
}
.prosess-legende__prikk {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Editor-topp (data-modus, full bredde — egen header siden admin-side er smal) */
.prosess-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--avstand-3, 12px);
  flex-wrap: wrap;
  margin-bottom: var(--avstand-2, 8px);
}
.prosess-topp__tittel { display: flex; align-items: center; gap: var(--avstand-3, 12px); flex-wrap: wrap; }
.prosess-topp__tittel h1 { margin: 0; font-size: 18px; }
.prosess-topp__handlinger { display: flex; align-items: center; gap: var(--avstand-2, 8px); flex-wrap: wrap; }
.prosess-status { font-size: 12px; color: var(--tekst-dempet, #64748b); }

/* Klikkbare rader i oversikten */
tr[data-prosess-id] { cursor: pointer; }
tr[data-prosess-id]:hover { background: var(--flate-2, #f1f5f9); }
tr.prosess-rad--arkivert { opacity: 0.55; }
.prosess-rad__handling { text-align: right; white-space: nowrap; }
.prosess-arkiv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--tekst-dempet, #475569);
  cursor: pointer;
}

/* Danger-knapp (mangler i base.css per 2026-06-18 — promotér dit ved gjenbruk) */
.knapp--fare {
  color: var(--rod-6, #b91c1c);
  border-color: var(--rod-3, #fca5a5);
}
.knapp--fare:hover {
  background: var(--rod-1, #fef2f2);
  border-color: var(--rod-5, #dc2626);
}

/* Skille-rad over "Slett"-knapp i steg-/kant-modal */
.modal__rad-slett {
  margin-top: var(--avstand-3, 12px);
  padding-top: var(--avstand-3, 12px);
  border-top: var(--kant);
}