/* Komponenter — samme visuelle sprog som Price Request (grøn/grå/hvid, Inter,
   afrundede hjørner, tynde borders). Nye komponenter designes i denne stil. */

.nav {
  background: var(--green);
  color: var(--nav-text);
  padding: 14px 28px;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 10;
}
.nav .brand { font-weight: 700; letter-spacing: .08em; }
.nav .crumb { opacity: .85; font-size: 13px; }
/* Tilbage-linket i den grønne topbar. Ordresiden havde det; kundesiden havde
   kun brødkrummen nede i indholdet, som ikke lignede en vej tilbage. Reglen
   gælder BEGGE sider, så de bliver ved med at se ens ud. */
.nav .crumb a { color: #fff; text-decoration: none; font-weight: 600; }
.nav .crumb a:hover, .nav .crumb a:focus-visible { text-decoration: underline; }
.nav .spacer { flex: 1; }
.nav .lang button {
  background: transparent; border: 1px solid rgba(255,255,255,.5);
  color: #fff; border-radius: 6px; padding: 2px 10px; cursor: pointer;
}
.nav .lang button.active { background: #fff; color: var(--green); }

.wrap { max-width: 1080px; margin: 24px auto; padding: 0 20px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  margin-bottom: 14px;
}
.card.link { display: block; text-decoration: none; color: var(--text); }
.card.link:hover { background: var(--panel-subtle); }

.pill {
  font-size: 12px; padding: 2px 10px; border-radius: 999px;
  display: inline-block; margin-left: 8px;
}
.pill.ok   { background: var(--ok-bg);   color: var(--ok-text); }
.pill.warn { background: var(--warn-bg); color: var(--warn-text); }
.pill.err  { background: var(--err-bg);  color: var(--err-text); }

.btn {
  background: var(--green); color: #fff; border: none;
  border-radius: 8px; padding: 8px 18px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
}
.btn:disabled { background: var(--border-2); cursor: not-allowed; }
.btn.ghost {
  background: #fff; color: var(--green); border: 1px solid var(--border);
}

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
th { background: var(--panel-subtle); color: var(--muted); font-weight: 600; }

.banner { border-radius: var(--radius); padding: 13px 18px; margin-bottom: 16px; font-weight: 600; }
.banner.blocked { background: var(--err-bg); color: var(--err-text); border: 1px solid #f0b4b4; }
.banner.green   { background: var(--ok-bg);  color: var(--ok-text);  border: 1px solid #b6dfc3; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.basis { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Beslutnings-view (kundens mockup): skinne med styles til venstre, hele
   skemaet til højre. Alt er scopet til #decision, så det globale table-look
   på de øvrige sider ikke ændres. Farver kommer fra tokens.css.
   --------------------------------------------------------------------------- */

/* Forløbs-overskriften: hvor er ordren i forløbet (7 trin), hvad er gjort, og
   hvad kommer efter. Én rolig linje over indholdet — en overskrift, ikke et
   dashboard: 13px, muted tekst, samme kort-ramme som resten. Prikkerne bruger
   de samme tre betydninger som hub'ens statusprik (grøn = gjort,
   gul = her er vi, grå = ikke nået endnu). Ingen nye farver. */
#decision .journey {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 16px; margin-bottom: 12px;
  color: var(--muted); font-size: 13px;
}
#decision .journey .jnum {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px;
}
#decision .journey .jdots { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
#decision .journey .jdots li {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border-2);
}
#decision .journey .jdots li.done { background: var(--ok-text); }
#decision .journey .jdots li.now { background: var(--warn-text); }
#decision .journey.sent .jdots li.now { background: var(--ok-text); }
#decision .journey .jnow b { color: var(--text); font-weight: 600; }
#decision .journey .jnow i { font-style: normal; }
#decision .journey .jdone { margin-left: auto; }
#decision .journey .jnext { color: var(--text); }
#decision .journey.unknown { color: var(--warn-text); }

#decision .layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { #decision .layout { grid-template-columns: 1fr; } }

/* Skinnen er ordrens indholdsfortegnelse: alle punkter i ordren — hver style og
   hver gruppe felterne er delt op i. Roen fra mockuppens .rail er beholdt
   (samme kort, samme 8px padding, samme muted overskrift); der er kun kommet
   mere indhold i den, ét niveau ind.

   Den KLÆBER under topbaren og scroller for sig. Uden det ville en ordre med
   otte styles have en indholdsfortegnelse man selv skal scrolle op for at
   bruge — og markeringen af hvor man er ville stå uden for billedet.
   --nav-h er topbarens højde fra tokens.css; ingen nye mål. */
#decision .rail {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px; height: fit-content;
  position: sticky; top: calc(var(--nav-h) + 12px);
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--nav-h) - 24px);
}
#decision .rail .rh {
  padding: 8px 10px; color: var(--muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px;
  display: flex; align-items: baseline; gap: 8px; flex: none;
}
/* Antallet af styles står som en oplysning, ikke som en overskrift */
#decision .rail .rh .rhn { margin-left: auto; text-transform: none; letter-spacing: 0; }
#decision .rnav { overflow: auto; min-height: 0; }
#decision .rail .row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
#decision .rail .row:hover { background: var(--panel-subtle); }
#decision .rail .row.on { background: var(--panel-subtle); outline: 1px solid var(--green); }
#decision .rail .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#decision .rail .dot.g { background: var(--ok-text); }
#decision .rail .dot.a { background: var(--warn-text); }
#decision .rail .nm { font-weight: 600; display: block; }
#decision .rail .ds { color: var(--muted); font-size: 12px; display: block; }
#decision .rail .nmw { min-width: 0; }
#decision .rail .nm, #decision .rail .ds {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#decision .rail .cnt {
  margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap;
  flex: none; font-variant-numeric: tabular-nums;
}
/* Tallet der mangler bekræftelse er det man leder efter, derfor gul og fed;
   totalen er bare sammenhængen. Er intet tilbage, er linjen grøn og færdig. */
#decision .rail .cnt b { color: var(--warn-text); }
#decision .rail .cnt.ok { color: var(--ok-text); }

/* Grupperne under en style. Den tynde lodrette linje viser at de HØRER til
   styleen ovenover — den er den samme border som resten af kortet.
   Er der kun én style i ordren, er der intet at høre til, og .flat fjerner
   indrykningen: så er skinnen bare gruppelisten. */
#decision .rail .grps {
  margin: 2px 0 6px 14px; padding-left: 12px; border-left: 1px solid var(--border);
}
#decision .rnav.flat .grps { margin: 0; padding-left: 0; border-left: 0; }
#decision .rail .grow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 13px; color: var(--muted); text-align: left; cursor: pointer;
}
#decision .rail .grow .nm {
  font-weight: 400; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#decision .rail .grow .dot { width: 6px; height: 6px; }
#decision .rail .grow:hover { background: var(--panel-subtle); color: var(--text); }
/* Punktet man står i. Den grønne streg til venstre er den samme markering som
   sektionen får i højre side, så de to hænger tydeligt sammen. */
#decision .rail .grow.here {
  background: var(--panel-subtle); color: var(--text);
  box-shadow: inset 2px 0 0 var(--green);
}
#decision .rail .grow.here .nm { font-weight: 600; }
#decision .rail .row:focus-visible, #decision .rail .grow:focus-visible {
  outline: 2px solid var(--green); outline-offset: -2px;
}
/* Hvad tallene betyder, og tastaturgenvejene. Nederst, småt, muted — de skal
   kunne slås op, ikke læses hver gang. */
#decision .rail .rhint {
  padding: 6px 10px; color: var(--muted); font-size: 11px; line-height: 1.35; flex: none;
}
#decision .rnav + .rhint { border-top: 1px solid var(--border); padding-top: 8px; }

/* Smal skærm: layoutet er én kolonne, og så skal skinnen IKKE klæbe eller
   scrolle for sig — den er bare det første afsnit på siden. */
@media (max-width: 820px) {
  #decision .rail { position: static; max-height: none; display: block; }
  #decision .rnav { overflow: visible; }
}

/* Springer man til en gruppe (klik i skinnen, et #-link, tastaturet), skal
   overskriften stå UNDER den klæbende topbar og ikke gemme sig bag den.
   scroll-margin-top er browserens egen måde at sige det på, så det også
   gælder de spring JavaScript ikke selv regner på. */
#decision .gsec { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* Den gruppe man er i / er sprunget til. Samme grønne streg som i skinnen og
   ellers ingen ændring — markeringen må ikke gøre indholdet urolig. */
#decision .gsec.aim { box-shadow: inset 2px 0 0 var(--green); }
#decision .gsec.aim > .grp { color: var(--green); }

#decision .main {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
/* "Værktøjet lærer"-striben øverst i hovedpanelet (mockuppens .learn).
   Rolig grøn toning: mockuppens #e3f2e9 -> #fafbfc er præcis --ok-bg ->
   --panel-subtle, og --accent i mockuppen er samme grøn som --green.
   Alle farver kommer fra tokens.css; ingen nye farver opfundet her.
   Striben renderes kun når der ER noget lært, så den tomme tilstand er
   ingen stribe — ikke en tom stribe. */
#decision .learn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(90deg, var(--ok-bg), var(--panel-subtle));
  border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 13px;
}
#decision .learn b { color: var(--text); font-weight: 600; }
#decision .learn .spark { color: var(--green); font-weight: 700; }

/* Hub'ens banner over kundelisten: hvor mange felter der ikke er krydstjekket
   mod noget uden for kundens skema. Samme farver og form som .nosrcbar, så
   det er tydeligt den SAMME oplysning på de to sider. Ligger uden for
   .clist-gridet, så listens kolonner er urørte. */
.hubwarn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; margin-bottom: 12px;
  background: var(--warn-bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--warn-text); font-size: 13px; line-height: 1.45;
}
.hubwarn b { color: var(--warn-text); font-weight: 700; }

/* Striben over "Værktøjet lærer": hvor mange færdige felter der IKKE er
   krydstjekket. Samme form som .learn, så de to striber kan stå
   oven på hinanden uden at siden får to forskellige slags bånd - men i
   advarselsfarverne fra tokens.css (--warn-bg / --warn-text), fordi den siger
   noget der skal handles på. Ingen nye farver opfundet her.
   Den SPÆRRER intet: felterne gælder, og fail-closed-porten er uændret. Den
   er gul og ikke rød, netop for ikke at ligne en spærring. */
#decision .nosrcbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--border);
  color: var(--warn-text); font-size: 13px;
}
#decision .nosrcbar b { color: var(--warn-text); font-weight: 700; }

/* Striben: hvor mange af PORTALENS EGNE tal der står ubekræftet i kundens fil
   (decision.js: egetHtmlBar). Samme form og samme farvepar som .nosrcbar - der
   opfindes ingen nye farver. Den står ØVERST af de tre striber, fordi det er
   den ene af dem, der handler om noget værktøjet selv har gjort ved kundens
   fil. Er tallet nul, tegnes striben slet ikke. */
#decision .egenbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--border);
  color: var(--warn-text); font-size: 13px;
}
#decision .egenbar b { color: var(--warn-text); font-weight: 700; }

/* FLERE PO'ER PÅ ÉN ORDRE (decision.js: poHtml).
   Striben står lige under forløbslinjen, fordi "hvad dækker denne ordre" er
   det første man skal vide - før man begynder at læse felter. Den er
   NEUTRAL, ikke en advarsel: flere PO'er er normalt, ikke et problem. Farverne
   fra .warn-* er derfor bevidst holdt udenfor - de betyder "det her skal
   ses", og det er en anden slags oplysning. */
#decision .pobar {
  padding: 10px 20px 12px;
  background: var(--card, #fff);
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}
#decision .pobar .pohead { color: var(--text); margin-bottom: 6px; }
#decision .pobar .polist { list-style: none; margin: 0; padding: 0; }
#decision .pobar .polist li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 3px 0;
}
#decision .pobar .polist code {
  font-weight: 600; color: var(--text);
}
#decision .pobar .posmall { font-size: 12px; color: var(--muted); }
/* PO-stemplet ved en styles navn (i skinnen og i overskriften): hvilket PO
   styleen kom fra. Lille og roligt - det er et mærke, ikke en overskrift. */
#decision .postamp {
  font-size: 11px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 7px; white-space: nowrap;
}

/* PO'erne i ordrekortet på kundesiden (kunde.html: poKort/poRække).
   ÉN RÆKKE PR. PO: nummeret øverst i rækken, filerne ved siden af,
   upload-feltet lige under. PO-nummeret stod før tre steder på siden (ordrens
   overskrift, en liste "PO'er på ordren" og upload-etiketten). Listen og
   upload-felterne er nu den samme række, så nummeret står ÉT sted - og man kan
   stadig se hvilket PO en fil lander på, når ordren har flere.
   Har ordren ét PO, står nummeret slet ikke i rækken: det ER overskriften. */
#c-orders .poadd {
  border-top: 1px solid var(--border); font-size: 13px;
}
#c-orders .porow + .porow { border-top: 1px solid var(--border); }
#c-orders .pohead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 20px 0;
}
#c-orders .pohead code { font-weight: 600; }
#c-orders .pohead .pomain {
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
/* Fjern-knappen. Diskret, men ikke skjult: den åbner en bekræftelse, der
   siger præcis hvad der sker (intet slettes). Den ligger UDEN FOR
   upload-feltet, så et klik på den aldrig åbner en filvælger. */
#c-orders .pohead .pox {
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); border-radius: 6px; cursor: pointer;
  font-size: 11px; line-height: 1; padding: 3px 6px;
}
#c-orders .pohead .pox:hover { color: var(--warn-text); border-color: var(--warn-text); }
#c-orders .pohead .posmall { font-size: 12px; color: var(--muted); }
/* Upload-feltet i rækken: samme felt som før, men uden sin egen streg over -
   rækken har den. */
#c-orders .porow .dz { border-top: 0; background: transparent; }
#c-orders .porow .dz:hover, #c-orders .porow .dz.over { background: var(--ok-bg); }
#c-orders .porow .pohead + .dz { padding-top: 4px; }
/* Tilføj-PO-feltet: nu det ENESTE sted, ekstra PO'er skrives ind. */
#c-orders .poaddrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 20px 10px; border-top: 1px dashed var(--border-2);
}
#c-orders .poaddrow .poinput {
  padding: 6px 8px; border: 1px solid var(--border-2); border-radius: 8px;
  font-size: 13px; width: 160px;
}
#c-orders .poaddrow .btn.small { padding: 5px 12px; font-size: 12px; }

/* MÆRKET PÅ FRI TEKST FRA REGISTRET (kunde.html: dataTekst).
   Kundens skema-type og ordrens note er skrevet af et menneske og oversættes
   ikke. Mærket siger det, så en engelsk side ikke udgiver dansk for engelsk.
   Lille og roligt: det er en oplysning om teksten, ikke en advarsel. */
.dtag {
  margin-left: 6px; font-size: 10px; letter-spacing: .02em;
  color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 6px; white-space: nowrap;
}

/* EMNET PÅ KUNDENS OPRINDELIGE MAIL (kunde.html: emneKort).
   Står i ordrekortet UNDER PO'erne og OVER upload-felterne: PO'erne siger hvad
   ordren dækker, emnet hvor svaret skal lande, upload hvor filerne kommer ind.
   Feltet er bredt med vilje - en emnelinje fra Coop er lang, og den skal kunne
   læses tegn for tegn, for ét tegn til forskel er en ny mailtråd. */
#c-orders .emnefelt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--border);
  font-size: 13px;
}
#c-orders .emnefelt .emnelabel {
  flex: 0 0 100%; color: var(--muted); font-size: 12px;
}
#c-orders .emnefelt .emneinput {
  flex: 1 1 260px; min-width: 0;
  padding: 6px 8px; border: 1px solid var(--border-2); border-radius: 8px;
  font-size: 13px; font-family: var(--font);
}
#c-orders .emnefelt .emnestatus { flex: 0 0 100%; font-size: 12px; }
#c-orders .emnefelt .emnehint {
  flex: 0 0 100%; color: var(--muted); font-size: 11px;
}

/* FAST REGEL I KUNDEINSTRUKTIONERNE: hvor kunden selv sender data hen.
   Blokken tegnes af serveren og ligger OVER det frie tekstfelt, så den ikke
   kan forveksles med de regler man selv skriver - og ikke kan slettes med dem.
   `.kravfejl` er ikke rød pynt: den bærer beskeden om en adresse, der mangler,
   og den skal kunne ses uden at man leder efter den. */
.kravboks {
  border: 1px solid var(--border-2); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 12px; font-size: 13px;
}
.kravboks .kravhead {
  font-weight: 600; color: var(--green); margin-bottom: 4px;
}
.kravboks .kravregel { white-space: pre-wrap; }
.kravboks .kravfejl {
  white-space: pre-wrap; color: var(--warn-text); margin-top: 6px;
}
.kravboks .kravfejl:empty { display: none; }
.kravboks .kravbesked { margin-top: 10px; }
.kravboks .kravlabel { color: var(--muted); font-size: 12px; }
.kravboks .kravtekst {
  white-space: pre-wrap; word-break: break-word;
  background: var(--panel-subtle);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin: 4px 0 8px;
  font-family: var(--font); font-size: 12px;
}

#decision .mhead {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
#decision .mhead h2 { margin: 0; font-size: 16px; }
#decision .grp {
  padding: 14px 20px 4px; color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
}

/* Ingen lodrette streger, ingen grå kolonneoverskrifter — kun en tynd linje
   under hver række. Labelkolonnen er muted, værdien halvfed. */
#decision .fields { border-collapse: collapse; width: 100%; font-size: 13px; }
#decision .fields td {
  border: 0; border-bottom: 1px solid var(--border);
  padding: 10px 20px; text-align: left; vertical-align: middle;
}
#decision .fields tr.cur td { background: var(--warn-bg); }
#decision .fields td.lbl { color: var(--muted); width: 230px; }
#decision .fields td.val { font-weight: 600; color: var(--text); }
#decision .fields td.val .sug { color: var(--warn-text); }
#decision .fields td.val .none { color: var(--err-text); font-weight: 600; }

#decision .src {
  display: inline-block; font-size: 10px; font-weight: 700; color: var(--muted);
  background: var(--border); border-radius: 6px; padding: 2px 7px;
  margin-left: 8px; vertical-align: middle;
  /* Chippen siger nu "læst i <fil> · D101". Filnavn og celle hører sammen og
     må ikke kunne brækkes over i to linjer, hvor cellen står alene: teksten
     er allerede klippet til 48 tegn i decision.js (srcChip/kortFil), så der
     er ikke noget at vinde ved at ombryde den. */
  white-space: nowrap;
}
/* "ikke krydstjekket" (chippen "læst i … · D101"). Chippen skal kunne SES i en
   lang liste, ikke kun læses: en grå chip med den tekst ville forsvinde mellem
   188 andre grå chips. Advarselsfarverne fra tokens.css, samme par som .st.c
   og .nosrcbar - der er kun ÉT sæt farver for "det her skal ses". */
#decision .src.nosrc {
  color: var(--warn-text); background: var(--warn-bg);
  box-shadow: inset 0 0 0 1px var(--warn-text);
}
/* "skrevet af portalen". Samme advarselsfarver som .src.nosrc: en værdi
   portalen selv har skrevet i kundens fil er præcis lige så vigtig at kunne SE
   som et ukrydstjekket felt - det er den samme slags oplysning ("du kan ikke gå
   tilbage til kunden med dette tal"). Reglen om ét sæt farver holdes. */
#decision .src.own {
  color: var(--warn-text); background: var(--warn-bg);
  box-shadow: inset 0 0 0 1px var(--warn-text);
}
#decision .st { float: right; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
#decision .st.v { background: var(--ok-bg);   color: var(--ok-text); }
#decision .st.c { background: var(--warn-bg); color: var(--warn-text); }
#decision .st.m { background: var(--err-bg);  color: var(--err-text); }

#decision .confirm { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
#decision .confirm input {
  background: var(--bg); border: 1px solid var(--warn-text); color: var(--text);
  border-radius: 8px; padding: 7px 10px; width: 150px;
  font-family: var(--font); font-size: 13px;
}
#decision .confirm button {
  background: var(--warn-text); color: #fff; border: 0; border-radius: 8px;
  padding: 7px 12px; font-weight: 700; cursor: pointer; font-family: var(--font); font-size: 13px;
}
#decision .confirm .note { color: var(--muted); font-size: 12px; font-weight: 400; flex: 1; min-width: 220px; }
#decision .confirm .note b { color: var(--warn-text); }

/* VERIFIKATIONEN (decision.js: verifHtml).
   Panelet står lige OVER handlingslinjen, fordi verifikationen er
   betingelsen for Send: det ene skal læses før det andet trykkes. Det er
   bevidst et panel og ikke en chip - "ansvarlig verificerer" er et helt trin i
   arbejdsgangen, ikke en detalje ved et felt.
   Farverne er de bestående par fra tokens.css (--warn-* når den venter,
   --ok-* når den er givet), præcis som .karton-linjerne i rækkerne. Der
   opfindes ingen farve for verifikationen; en ny farve ville kun gøre siden
   sværere at læse. */
#decision .verif {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  background: var(--panel-subtle); font-size: 13px;
}
#decision .verif.wait {
  background: var(--warn-bg); border-left-color: var(--warn-text);
}
#decision .verif.ok {
  background: var(--ok-bg); border-left-color: var(--ok-text);
}
#decision .verif .vh {
  font-weight: 700; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; padding-top: 2px; min-width: 96px;
}
#decision .verif.wait .vh { color: var(--warn-text); }
#decision .verif.ok .vh { color: var(--ok-text); }
#decision .verif .vtxt { flex: 1; min-width: 240px; }
/* Første linje er hovedbudskabet ("skal verificeres af X"); resten er
   baggrund. Uden forskellen ville fire lige tunge linjer være en tekstvæg. */
#decision .verif .vtxt p { margin: 0 0 4px; color: var(--muted); }
#decision .verif .vtxt p:first-child { color: var(--text); font-weight: 600; }
#decision .verif .vtxt p:last-child { margin-bottom: 0; }
#decision .verif .btn { flex: 0 0 auto; }

#decision .foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; border-top: 1px solid var(--border); background: var(--panel-subtle);
}
#decision .foot .status { color: var(--muted); font-size: 13px; margin-left: auto; }
#decision .foot .status.blocked { color: var(--err-text); font-weight: 600; }
#decision .foot .status.ready { color: var(--ok-text); font-weight: 600; }
#decision .foot .send { margin-left: auto; }

/* Handlingslinjen ER rækkefølgen: hent data › bekræft › skriv i skemaet ›
   send. Før stod de fire knapper som ligeværdige valg, og "Send til intern
   godkendelse" læstes som målet man bare kunne trykke på. Nu:
     .act.now    det næste skridt — den ENESTE grønne (primær) knap
     .act.again  et tidligere skridt — ghost, må gerne gentages
     .act.later  et senere skridt — synligt utilgængeligt MED en grund
   Pilene mellem knapperne er dekoration (aria-hidden), rækkefølgen er reel. */
#decision .foot .acts { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
#decision .foot .act {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
}
#decision .foot .act .tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--green);
}
#decision .foot .act .why {
  font-size: 11px; color: var(--muted); line-height: 1.25; max-width: 200px;
}
#decision .foot .arrow { color: var(--border-2); font-size: 15px; line-height: 32px; }

/* Et senere skridt SKAL se utilgængeligt ud. Uden denne regel vandt
   .btn.ghost's hvide baggrund over .btn:disabled, og en låst knap lignede en
   knap man kunne trykke på — det var netop problemet med Send. */
#decision .foot .btn.ghost:disabled {
  background: var(--panel-subtle); color: var(--muted);
  border-color: var(--border); cursor: not-allowed;
}
/* Resultatet af "Skriv bekræftede værdier": serverens egen besked, i siden.
   Før var det en alert() med en tekst frontenden fandt på, som ikke nævnte
   hverken filnavn, antal celler eller backup. */
#decision .writeres {
  padding: 12px 20px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.45;
}
#decision .writeres.ok  { color: var(--ok-text);  background: var(--ok-bg); }
#decision .writeres.bad { color: var(--err-text); background: var(--err-bg); font-weight: 600; }

/* ---------- beskeder i siden (MDMsg i api.js) -------------------------------
   Samme mønster som .writeres ovenfor, gjort til noget der kan hænges op ved
   ENHVER handling: strimlen står dér, hvor man trykkede. Den erstatter
   alert(), som lagde beskeden i toppen af skærmen, langt fra handlingen.

   En fejl forsvinder IKKE af sig selv: der er en lukkeknap, og teksten står
   til man selv går videre. Derfor heller ingen animation der skjuler noget. */
.mdmsg {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; line-height: 1.45; text-align: left;
}
.mdmsg.ok  { color: var(--ok-text);  background: var(--ok-bg);  border-color: var(--ok-text); }
.mdmsg.bad { color: var(--err-text); background: var(--err-bg); border-color: var(--err-text); }
.mdmsg .mdmsg-body { flex: 1; min-width: 0; }
.mdmsg.bad .mdmsg-body { font-weight: 600; }
/* Serverens liste over hvad der mangler - det er den, man skal handle på. */
.mdmsg ul { margin: 6px 0 0; padding-left: 18px; font-weight: 400; }
.mdmsg li { margin: 2px 0; }
.mdmsg .mdmsg-act {
  display: flex; gap: 8px; align-items: center; margin-top: 8px;
  flex-wrap: wrap; font-weight: 400;
}
.mdmsg .mdmsg-x {
  flex: none; background: none; border: 0; cursor: pointer;
  color: inherit; opacity: .65; font-size: 16px; line-height: 1;
  padding: 0 2px; border-radius: 4px;
}
.mdmsg .mdmsg-x:hover { opacity: 1; }
.mdmsg .mdmsg-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* I handlingslinjen ligger strimlen som skrivningens: i fuld bredde under
   foden, uden dobbelt ramme. */
#decision .foot + .mdmsg {
  margin-top: 0; border-width: 1px 0 0; border-radius: 0; padding: 12px 20px;
}

/* ---------- besked og spørgsmål i EN RÆKKE (decision.js) -------------------
   Fejlen på et felt hører i feltets række, ikke i en boks over hele siden.
   Rækkerne tegnes om ved hver renderDecision(), så begge dele tegnes med som
   en del af rækken (rowMsgHtml/askHtml) og overlever en re-render. */
#decision .rowmsg, #decision .rowask {
  margin-top: 8px; padding: 10px 12px; border-radius: 8px;
  font-size: 13px; line-height: 1.45; font-weight: 400; white-space: normal;
}
#decision .rowmsg {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--err-text); background: var(--err-bg);
  border: 1px solid var(--err-text); font-weight: 600;
}
#decision .rowmsg .rowmsg-body { flex: 1; min-width: 0; }
#decision .rowmsg .mdmsg-x {
  flex: none; background: none; border: 0; cursor: pointer; color: inherit;
  opacity: .65; font-size: 16px; line-height: 1; padding: 0 2px; border-radius: 4px;
}
#decision .rowmsg .mdmsg-x:hover { opacity: 1; }

/* Spørgsmålet om at fortryde. Det er et spørgsmål, ikke en advarsel: rammen er
   kraftig, men farverne er panelets - først når knappen er væbnet, bliver den
   rød. Panelet kan få fokus (tabindex=-1), så fokus kan flyttes hertil når det
   åbner og tilbage til Fortryd-knappen når det lukker. */
#decision .rowask {
  border: 2px solid var(--warn-text); background: var(--panel-subtle);
  color: var(--text);
}
#decision .rowask:focus { outline: none; }
#decision .rowask .askq { display: block; }
/* Værdien man går tilbage til. Den skal kunne LÆSES før man trykker - det er
   hele grunden til at spørge. */
#decision .rowask .askval {
  display: block; margin-top: 6px; font-size: 12px; color: var(--muted);
}
#decision .rowask .askval b {
  color: var(--text); font-size: 13px; font-family: var(--mono, monospace);
}
#decision .rowask .askacts {
  display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap;
}
/* Knapperne i spørgsmålet er .btn/.btn.ghost og ikke .ghostbtn: ghost-knapperne
   i en række står med nedsat opacity indtil man peger på rækken, og et
   spørgsmål man har åbnet skal være fuldt synligt hele tiden. */
#decision .rowask .askacts button {
  font-size: 12px; padding: 6px 14px; opacity: 1;
}
#decision .rowask .undo-do.armed {
  background: var(--err-text); border-color: var(--err-text); color: #fff;
  font-weight: 700;
}
#decision .rowask .askkeys { font-size: 11px; color: var(--muted); }

#decision .empty { padding: 18px 20px; color: var(--muted); }
.kbd {
  border: 1px solid var(--border-2); border-radius: 4px; padding: 0 5px;
  background: var(--panel-subtle); font-size: 11px;
}

/* Motorens log: foldet sammen, ikke en tekstvæg. Vises kun når der ER en log
   (api.js sætter display), og indholdet først når man selv åbner den. */
#decision .runlog, .runlog {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-top: 14px;
}
.runlog > summary {
  cursor: pointer; font-size: 12px; color: var(--muted);
  list-style: none;
}
.runlog > summary::-webkit-details-marker { display: none; }
.runlog > summary::before { content: "› "; }
.runlog[open] > summary::before { content: "⌄ "; }
.runlog > summary:hover { color: var(--text); }
.runlog pre { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

/* Tilbage-knappen i den grønne topbar. Den var et link, der lignede brødtekst,
   og folk kunne ikke finde den. Nu er den en hvid flade med pil og luft omkring.
   Reglen rammer det første link i .crumb, så kundesiden, den statiske ordreside
   og den serverrenderede ordreside ser ens ud uden at HTML skal ændres. */
.nav .crumb { opacity: 1; color: rgba(255, 255, 255, .85); }
.nav .crumb > a:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  padding: 6px 14px;
  background: #fff;
  color: var(--green) !important;
  border: 1px solid #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.nav .crumb > a:first-child::before { content: "←"; font-size: 15px; }
.nav .crumb > a:first-child:hover {
  background: var(--nav-text, #fff);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
  text-decoration: none;
}
.nav .crumb > a:first-child:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .35);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   ORDRESIDEN: rettelse af ALLE felter (assets/js/decision.js)

   Før kunne kun de felter, der manglede bekræftelse, skrives i. Et felt som
   motoren havde markeret VERIFIED eller PRESENT stod som ren tekst, og der var
   ingen vej til at rette det — men "stod i skemaet" er ikke det samme som "er
   rigtigt". Nu har hver eneste feltrække en Ret-knap, og en rettet værdi står
   som RETTET med motorens oprindelige værdi og hvem der ændrede den.

   Reglerne står SIDST i filen med vilje: de føjer til det eksisterende
   #decision-udseende og ændrer ikke en eneste regel ovenfor.
   --------------------------------------------------------------------------- */

/* Handlingerne i rækken. De ligger til højre for værdien og er stille, indtil
   man er ved rækken — en Ret-knap må ikke tage opmærksomhed fra den
   feltværdi, den står ved siden af. */
#decision .fields td.val .rowacts {
  display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle;
}
#decision .fields td.val .ghostbtn {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-2); border-radius: 8px;
  padding: 3px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
  font-family: var(--font); line-height: 1.6; opacity: .75;
  transition: opacity .12s ease, border-color .12s ease, color .12s ease;
}
#decision .fields tr:hover .ghostbtn,
#decision .fields tr.cur .ghostbtn { opacity: 1; }
#decision .fields td.val .ghostbtn:hover {
  color: var(--green); border-color: var(--green); opacity: 1;
}
#decision .fields td.val .ghostbtn:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; opacity: 1;
}
#decision .fields td.val .ghostbtn.undo:hover {
  color: var(--err-text); border-color: var(--err-text);
}
#decision .fields td.val .doneval { vertical-align: middle; }

/* RETTET-mærket. Bevidst ikke grønt: en værdi et menneske har ændret, står
   ikke længere som motoren fandt den, og må ikke se ud som om motoren står
   inde for den. */
#decision .st.r { background: var(--warn-bg); color: var(--warn-text); }

/* Revisionssporet under værdien: hvad motoren havde, og hvem der ændrede det.
   Det er kundens vigtigste regel — der må aldrig stå et tal, som ingen kan se
   hvor kommer fra — så linjen er altid synlig, aldrig et tooltip. */
#decision .fields td.val .audit {
  display: block; margin-top: 5px; clear: both;
  font-size: 11px; font-weight: 400; color: var(--muted);
}
#decision .fields td.val .audit.corrected {
  border-left: 2px solid var(--warn-text); padding-left: 8px;
}
#decision .fields td.val .audit .was {
  color: var(--warn-text); font-weight: 600;
  text-decoration: line-through; margin-right: 8px;
}
#decision .fields td.val .audit .by { margin-right: 6px; }
#decision .fields td.val .audit .prev { opacity: .8; }

/* KARTONFELTER: hvem godkender kassestørrelsen?
   Linjen er altid synlig, som revisionssporet — reglen for et felt må ikke
   ligge i et tooltip. Fire tilstande, og de er serverens:
     .wait  venter, og du er ikke godkenderen (feltet har ingen inputrække —
            værdien og forslaget kan læses, men ikke udfyldes)
     .you   du ER godkenderen
     .ok    bekræftet af godkenderen
     .bad   bekræftet af en anden end godkenderen -> Send er låst
     .old   bekræftet FØR godkenderen blev sat: gælder, spærrer ikke */
/* Linjen der siger, at PORTALEN skrev værdien i kundens fil (decision.js:
   egetHtml). Samme form som .karton-linjerne - en tynd linje under værdien med
   en farvet kant - så rækken ikke får to forskellige slags undertekster.
     .ok   bekræftet af et menneske: værdien gælder, og linjen fortæller kun,
           at tallet i filen er vores eget
     .bad  ingen har bekræftet den: feltet tælles som manglende, og linjen
           siger hvorfor. Advarselsfarverne, som .karton.bad. */
#decision .fields td.val .eget {
  display: block; margin-top: 5px; clear: both;
  font-size: 11px; font-weight: 400; color: var(--muted);
  padding-left: 8px; border-left: 2px solid var(--border-2);
}
#decision .fields td.val .eget.ok { border-left-color: var(--muted); }
#decision .fields td.val .eget.bad {
  color: var(--warn-text); font-weight: 600;
  border-left-color: var(--warn-text);
}

#decision .fields td.val .karton {
  display: block; margin-top: 5px; clear: both;
  font-size: 11px; font-weight: 400; color: var(--muted);
  padding-left: 8px; border-left: 2px solid var(--border-2);
}
#decision .fields td.val .karton.wait {
  color: var(--text); border-left-color: var(--muted);
}
#decision .fields td.val .karton.you { border-left-color: var(--green); }
#decision .fields td.val .karton.ok { border-left-color: var(--green); }
#decision .fields td.val .karton.bad {
  color: var(--warn-text); font-weight: 600;
  border-left-color: var(--warn-text);
}
#decision .fields td.val .karton.old { opacity: .85; }
/* Et låst kartonfelt skal ikke LIGNE noget man kan udfylde: rækken tones ned,
   men værdien og forslaget bliver fuldt læsbare. */
#decision .fields tr:has(.karton.wait:not(.you)) td.lbl { opacity: .75; }

/* Rækken, når man RETTER et færdigt felt. Den skiller sig fra den orange
   bekræftelsesrække, så det kan ses at man ændrer noget, der allerede stod
   som færdigt — og ikke besvarer et tomt felt. */
#decision .confirm.editing input { border-color: var(--green); }
#decision .confirm.editing > button:first-of-type { background: var(--green); }
#decision .confirm.editing .note { color: var(--muted); }
#decision .confirm .cancel-edit {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-2); border-radius: 8px;
  padding: 7px 12px; font-weight: 700; cursor: pointer;
  font-family: var(--font); font-size: 13px;
}
#decision .confirm .cancel-edit:hover { color: var(--text); border-color: var(--muted); }

/* ---------------------------------------------------------------------------
   KUNDESIDEN: delt efter hvor ofte tingene bruges (kunde.html)

   Siden var seks kort under hinanden med samme vægt. Nu er der tre niveauer,
   og VÆGTEN siger hvad der er hvad:
     1. ordrekøen  - stort ordrekort, det man kommer for
     2. opret ordre - et almindeligt kort
     3. opsætningen - foldet sammen, én linje pr. emne
   Ingen nye farver: alt kommer fra tokens.css.
   --------------------------------------------------------------------------- */

/* Sektionsoverskrift. Luften over den er det, der adskiller de tre niveauer. */
.sech { margin: 26px 0 10px; }
.wrap > h1 + .sech { margin-top: 18px; }
.sechnote { color: var(--muted); font-size: 12px; margin: -6px 0 10px; }

/* Ordrekortet i kundens ordrekø: det ER vejen videre, så det skal se sådan ud.
   Brugeren klikkede før på kunden og landede direkte i ordren; nu går vejen
   over kundesiden, og så skal ordren være til at få øje på herfra. */
#c-orders .ordcard {
  background: var(--card); border: 1px solid var(--border-2);
  border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
  transition: border-color .12s;
}
#c-orders .ordcard:hover { border-color: var(--green); }
#c-orders .ordlink {
  position: relative; display: block; padding: 16px 44px 16px 20px;
  text-decoration: none; color: var(--text);
}
#c-orders .ordlink:hover { background: var(--panel-subtle); }
#c-orders .ordlink:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
#c-orders .ohead { display: block; font-size: 15px; }
#c-orders .onote { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
#c-orders .go {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 20px; line-height: 1; color: var(--muted);
}
#c-orders .ordlink:hover .go { color: var(--green); }

/* Hvad venter på ordren. Trinnet kommer fra serveren (journey); prikken
   bruger de samme to betydninger som hub'en: gul = her er vi, grøn = færdig. */
#c-orders .state {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
#c-orders .state.a { background: var(--warn-bg); color: var(--warn-text); }
#c-orders .state.g { background: var(--ok-bg); color: var(--ok-text); }
#c-orders .state .stepno { font-variant-numeric: tabular-nums; opacity: .75; }

/* Upload-feltet ligger INDE i ordrekortet, fordi filen hører til ordren.
   Etiketten siger hvilket PO filen lander på - det gjorde det gamle
   selvstændige upload-kort ikke. */
.dz {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 10px 20px; cursor: pointer;
  border-top: 1px dashed var(--border-2); background: var(--panel-subtle);
}
.dz:hover { background: var(--ok-bg); }
.dz.over { background: var(--ok-bg); }
.dz .dzl { font-size: 13px; font-weight: 600; color: var(--green); }
.dz .dzh { font-size: 12px; color: var(--muted); }
.dz .dzs { font-size: 12px; color: var(--green); }
.dz .dzbtn { margin-left: auto; padding: 4px 12px; font-size: 12px; }

/* Køen er tom: så skal der stå hvad man gør i stedet. */
#c-orders .card.empty { border-style: dashed; border-color: var(--border-2); }

/* Opsætningen: lukket som udgangspunkt. Overskriften siger hvad der er
   indeni OG hvad der er sat, så folden kun skal åbnes for at rette noget. */
.fold {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 10px;
}
.fold > summary {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  padding: 13px 18px; cursor: pointer; list-style: none;
  border-radius: var(--radius);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "›"; color: var(--muted); font-size: 16px; line-height: 1;
  width: 12px; flex: none;
}
.fold[open] > summary::before { content: "⌄"; }
.fold > summary:hover { background: var(--panel-subtle); }
.fold > summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.fold .ft { font-weight: 600; font-size: 14px; }
/* Resuméet af det, der ER sat. Muted og klippet: det er en oplysning, ikke
   en overskrift. */
.fold .fs {
  color: var(--muted); font-size: 12px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fold .foldbody { padding: 14px 18px 16px; border-top: 1px solid var(--border); }
.fold[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }

/* Opsætningsfolden på kundesiden: tre blokke i én fold, adskilt af en linje. */
.setupblock + .setupblock { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
.setuph { margin: 0 0 6px; font-size: 13px; font-weight: 600; }