/* ==========================================================================
   NERVE Finance — KUNDEKRAV, fladelaget.

   Egne tilføjelser oven på det hash-låste grundlag (ADR-0005: `../design/*`
   rettes ALDRIG). Alt herunder TILFØJER; intet i grundlaget røres.

   ⛔ To huskeregler fra § 14, som har kostet dage i dette hus:
      1. En `display`-regel i et fladelag skal bære `:not(.skjult)` hvis
         elementet nogensinde kan få klassen — fladelaget indlæses SIDST, og
         `.skjult` er (0,1,0) ligesom en bar klasseregel.
      2. En visning der skal kunne skjules, må ALDRIG få sin `display` fra en
         id-vælger. Derfor sætter denne fil INGEN `display` på `#viewTavle`
         eller `#viewRegister` — grundlagets `.view` / `.view.skjult` styrer
         dem alene.
   ========================================================================== */

/* ── kontrastrettelserne, målt (UI-UX-STANDARD § 3) ────────────────────────
   `--txt-3` måler 3,3:1 lyst og 4,3:1 mørkt i grundlaget. Rettes her, i
   BEGGE temaer, og aldrig kun inde i en media-blok. */
:root {
  --txt-3: #65656A;                 /* 3,3:1 → 5,8:1 */
  --acc-tekst: #0059B3;             /* 4,1:1 → 5,7:1 */
  --kk-ok: #1A7A35;                 /* 3,9:1 → 4,8:1 */
  --kk-fare: #B3241A;               /* 4,2:1 → 5,5:1 */
  --kk-adv: var(--warn);            /* #9A5B00, 5,0:1 på lys flade */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --txt-3: #A0A0A6;               /* 4,3:1 → 5,4:1 */
    --acc-tekst: #6FB6FF;           /* 3,8:1 → 6,5:1 */
    --kk-ok: #30D158;
    --kk-fare: #FF6B60;
    --kk-adv: #FF9F0A;
  }
}
:root[data-theme="dark"] {
  --txt-3: #A0A0A6;
  --acc-tekst: #6FB6FF;
  --kk-ok: #30D158;
  --kk-fare: #FF6B60;
  --kk-adv: #FF9F0A;
}

/* ⛔ `.springlink` / `.visuelt-skjult` SKAL fladen selv definere — apple.css
   har dem ikke. Uden reglen bliver springlinket et in-flow grid-barn og
   skubber hele appen i bunden (fælden er dokumenteret i fakturaoversigt.html). */
.springlink {
  position: fixed; top: -60px; left: 12px; z-index: 200;
  padding: 8px 14px; border-radius: 0 0 10px 10px;
  background: var(--chrome); color: var(--txt); font-size: 13px; font-weight: 600;
  text-decoration: none; box-shadow: var(--skygge);
}
.springlink:focus { top: 0; }
.visuelt-skjult {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══ ⛔ GITTERETS GULV — UI-UX-STANDARD § 5: reglen er TRE dele, ikke én ═════
   (1) `.gscroll` står i grundlaget og er altid der.
   (2) Et GULV under gitteret. Uden det KRYMPER gitteret i stedet for at presse
       — symptomet er to synlige rækker under en overskrift i fuld højde, ikke
       en uopnåelig side. Netop denne flade har MEGET krom over gitteret
       (periodebånd + grænsebånd + fejlbånd + KPI-stribe), så uden gulvet ville
       fejlen ramme første gang et bånd trådte frem.
   (3) `.view { overflow-y: auto }` — grundlaget har `overflow: hidden`, så
       trykket har ellers intet sted at gå hen.
   ⛔ 1 alene = gitteret klemmes. 3 alene = reglen fyrer ALDRIG. Kun 2 + 3
      sammen virker. Ingen af de tre sætter `display`, så id-vælgeren her er
      ufarlig (§ 14's anden husregel). ═══════════════════════════════════════ */
#viewTavle, #viewRegister { overflow-y: auto; overflow-x: hidden; }
#gitter, #gitterProfiler { min-height: 320px; }

/* Træ-panelets tællere og note */
.tree .antal {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--txt-3); flex: none;
}
.tree .it.aktiv .antal { color: var(--txt-2); }
.spejlnote {
  font-size: 11.5px; color: var(--txt-3); line-height: 1.45; padding: 2px 10px 6px;
}

/* ══ PERIODEBÅNDET ══════════════════════════════════════════════════════════
   Formen er tms-salgsordre.css's: fra/til-felter og et valg på én linje over
   gitteret. Alle farver via husets tokens, så BEGGE temaer bærer. */
.periodebaand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pblabel {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt-3);
}
.pbdato, .pbantal {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--txt-3); white-space: nowrap;
}
.pbdato input, .pbantal select {
  font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--chrome); color: var(--txt);
  font-variant-numeric: tabular-nums;
}
.pbdato input:focus-visible, .pbantal select:focus-visible {
  outline: 2px solid var(--acc); border-color: var(--acc);
}
.pbspejl { font-size: 11.5px; color: var(--txt-3); margin-left: auto; max-width: 46ch; white-space: normal; }

/* Grænsebåndet — en advarsel med en HANDLING (UI-UX-STANDARD § 9).
   ⛔ `:not(.skjult)` er husreglen fra § 14: uden den ville båndet stå tændt
   uanset klassen, fordi fladelaget indlæses efter grundlagets `.skjult`. */
.pbgraense:not(.skjult) { display: flex; flex-direction: column; gap: 6px; }
.pbgraense {
  margin: 0; padding: 8px 12px; border-radius: 10px;
  background: var(--warn-bg); border: 1px solid var(--line);
  color: var(--kk-adv); font-size: 12.5px;
}
.pbgraenselinje { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pbgraenselinje > span { flex: 1; min-width: 220px; }
.pbknaplille {
  border: 1px solid currentColor; background: transparent; color: inherit;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 8px;
  cursor: pointer; white-space: nowrap;
}
.pbknaplille:hover { background: var(--graa-flade); }
.pbknaplille:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ══ BÅNDET FOR SPEJLETS FEJL ═══════════════════════════════════════════════
   ⛔ Rødt, og med et TAL. En tavle der bare står tom når spejlkørslen fejler,
   siger »der er ikke noget« — og det er den forkerte oplysning. */
.kkbaand:not(.skjult) { display: flex; align-items: flex-start; gap: 10px; }
.kkbaand {
  margin: 0; padding: 9px 13px; border-radius: 10px; font-size: 12.5px;
  line-height: 1.45; border: 1px solid var(--line);
}
.kkbaand .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.kkbaand.fejl { background: var(--neg-flade); color: var(--kk-fare); border-color: currentColor; }
.kkbaand.adv { background: var(--warn-bg); color: var(--kk-adv); border-color: currentColor; }
.kkbaand b { color: inherit; }

/* KPI-striben — slank form (§ 4's tre tal side om side, ikke tre høje kort) */
.kpirow .kpi.kk { display: flex; align-items: baseline; gap: 9px; padding: 6px 12px; }
.kpirow .kpi.kk .val { font-size: 16px; }
.kpirow .kpi.kk.baand.over { border-left: 3px solid var(--age3); }
.kpirow .kpi.kk.baand.snart { border-left: 3px solid var(--age2); }
.kpirow .kpi.kk.baand.ro { border-left: 3px solid var(--age0); }
.kpirow .kpi.kk.baand.ukendt { border-left: 3px solid var(--acc); }
.kpirow .kpi.kk.baand.kunder { border-left: 3px solid var(--line); }

/* ══ HASTEPILLEN ════════════════════════════════════════════════════════════
   ⛔ TRE LAG, og TEKSTEN er det første: pillen siger ordet, ikonet er andet
   lag, farven tredje. Falder farven bort — 8 % af mænd er rødgrønt farve-
   blinde — kan tilstanden stadig læses [UI-UX-STANDARD § 10].

   ⚠ Ikonet er en CSS-maske, ikke et `<svg>`-element: gitteret virtualiserer
   ikke, og en ekstra SVG-node pr. række er en pris uden modydelse. Masken
   arver `currentColor` og følger derfor pillens farve i begge temaer. */
.hast {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor;
  background: var(--graa-flade); white-space: nowrap;
}
.hast::before {
  content: ""; width: 10px; height: 10px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* udråbstegn — overskredet */
.hast.over::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v9'/%3E%3Cpath d='M12 18.5v.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v9'/%3E%3Cpath d='M12 18.5v.01'/%3E%3C/svg%3E"); }
/* ur — haster / løber */
.hast.snart::before, .hast.ro::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
/* spørgsmålstegn — ingen leveringsdato, altså ingen frist at regne på */
.hast.ukendt::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M9 9.4a3 3 0 114.6 2.6c-.9.6-1.6 1-1.6 2.2'/%3E%3Cpath d='M12 18.6v.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M9 9.4a3 3 0 114.6 2.6c-.9.6-1.6 1-1.6 2.2'/%3E%3Cpath d='M12 18.6v.01'/%3E%3C/svg%3E"); }
/* flueben — alt klaret */
.hast.klaret::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* haand — kravet venter paa et menneske, ikke paa en dato */
.hast.kvit::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V6a1.6 1.6 0 013.2 0v5'/%3E%3Cpath d='M12.2 11V5.2a1.6 1.6 0 013.2 0V11'/%3E%3Cpath d='M15.4 11V7.8a1.6 1.6 0 013.2 0V14a6 6 0 01-6 6h-1a5 5 0 01-3.9-1.9L5 14.4a1.6 1.6 0 012.4-2.1L9 14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V6a1.6 1.6 0 013.2 0v5'/%3E%3Cpath d='M12.2 11V5.2a1.6 1.6 0 013.2 0V11'/%3E%3Cpath d='M15.4 11V7.8a1.6 1.6 0 013.2 0V14a6 6 0 01-6 6h-1a5 5 0 01-3.9-1.9L5 14.4a1.6 1.6 0 012.4-2.1L9 14'/%3E%3C/svg%3E"); }
.hast.kvit { color: var(--kk-adv); }
.hast.over { color: var(--kk-fare); }
.hast.snart { color: var(--kk-adv); }
/* ⚠ »Løber« er den NORMALE tilstand for en ordre med god tid — ikke en
   advarsel. Den får fladens egen tekstfarve (fuld kontrast), ikke en
   advarselsfarve der ville råbe hver eneste dag. */
.hast.ro { color: var(--txt); }
.hast.ukendt { color: var(--acc-tekst); }
.hast.klaret { color: var(--kk-ok); }

/* Nedtællingen som et TAL — ikke en sætning. Tallet skal kunne skimmes
   lodret ned ad kolonnen, og derfor tabular-nums og højrestilling. */
.dage { font-variant-numeric: tabular-nums; font-weight: 600; }
.dage.over { color: var(--kk-fare); }
.dage.snart { color: var(--kk-adv); }
.dage.ingen { color: var(--txt-3); cursor: help; font-weight: 400; }

/* ⛔ Tankestregen er RESERVERET til »ikke opgjort« (§ 4). `0,00`/`0` i dæmpet
   farve betyder »opgjort til nul«. De to må aldrig se ens ud. */
.uopgjort-celle { color: var(--txt-3); cursor: help; }

/* Uklarede krav som små mærker i gitterets celle */
.kravmaerker { display: inline-flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.kravmaerke {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--txt-2); background: var(--graa-flade);
  white-space: nowrap;
}
.kravmaerke.menneske { color: var(--kk-adv); border-color: currentColor; }
/* ⛔ FØLGEDOKUMENTERNE HAR DERES EGEN FORM ALLEREDE I GITTERET. Skiller de sig
   først ud når rækken foldes ud, er forvekslingen sket inden nogen folder ud.
   Formen er en STIPLET kant, ikke bare en anden farve: falder farven bort, kan
   de to grupper stadig skelnes [UI-UX-STANDARD § 10]. */
.kravmaerke.foelge {
  color: var(--kk-adv); border-color: currentColor; border-style: dashed;
  background: transparent;
}
.kravmaerke.maalt { color: var(--acc-tekst); border-color: currentColor; }
.kravmaerke.ukendt { color: var(--kk-fare); border-color: currentColor; }
/* »+2« — resten af mærkerne. Aldrig en skjulning: musetippet bærer dem alle. */
.kravmaerke.flere { color: var(--txt-3); cursor: help; }

/* ══ ⭐ »BEKENDT«-MÆRKET — Christians symbol på tavlen (03-09-2026) ══════════
   Samme pilleform som `.hast`/`.pstatus`, men en KNAP: mærket viser frysningen
   og GØR frysningen. Tre bærere af forskellen, aldrig farven alene
   [UI-UX-STANDARD § 10]: ORDET (»Bekendt« mod »Ikke bekendt«), FORMEN (hel
   mod stiplet kant) og først derefter farven. Ordet står FØRST, fluebenet
   efter (§ 2-3) — derfor en `::after`-maske og ikke en SVG-node pr. række
   (samme pris-begrundelse som `.hast`s egen kasse). */
.bekendtpil {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 9px; border-radius: 999px; border: 1px solid currentColor;
  background: var(--graa-flade); white-space: nowrap; font-family: inherit;
}
.bekendtpil.ja { color: var(--acc-tekst); }         /* som .pstatus.frosset */
.bekendtpil.ja::after {
  content: ""; width: 10px; height: 10px; flex: 0 0 auto; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* Ikke bekendt: dæmpet OG stiplet — to bærere ud over farven. */
.bekendtpil.nej { color: var(--txt-3); border-style: dashed; background: transparent; }
button.bekendtpil { cursor: pointer; }
button.bekendtpil:hover { background: var(--acc-soft); color: var(--acc-tekst); }
button.bekendtpil:focus-visible { outline: 2px solid var(--acc-tekst); outline-offset: 1px; }
button.bekendtpil:disabled { cursor: default; opacity: .55; }
/* Flertydig (flere vilkårsvarianter) — IKKE en knap: at fryse den forkerte
   variant ville være værre end et ekstra klik. Musetippet siger vejen. */
span.bekendtpil.flertydig { color: var(--txt-3); border-style: dotted; cursor: help; }

/* Udfoldningens handlingsrække — »Tilføj krav« nederst i kravboksen */
.kravhandling { display: flex; gap: 7px; }
/* Redigér-knappen står til højre i kravets hoved */
.kravtop .hoejre .smalbtn { flex: none; }

/* Foldeknappen i gitterets første kolonne */
.foldknap {
  display: grid; place-items: center; width: 22px; height: 22px;
  border: none; border-radius: 6px; background: none; color: var(--txt-3);
  cursor: pointer;
}
.foldknap:hover { background: var(--graa-flade); color: var(--txt); }
.foldknap:focus-visible { outline: 2px solid var(--acc); }
.foldknap .ic { width: 14px; height: 14px; }
.foldknap[aria-expanded="true"] .ic { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .foldknap .ic { transition: transform 160ms ease; }
}

/* ══ UDFOLDNINGEN — kravene under ordrens række ═════════════════════════════
   Rækken indsættes af `afterBody` i gitterets tbody. Den bærer ikke
   `data-i`, så motorens egne klik- og markørlyttere rører den ikke. */
tr.kravrk > td { padding: 0 !important; background: var(--chrome-3); }
tr.kravrk .kravboks {
  padding: 10px 14px 14px; border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 12px;
}

/* ⭐ DE TO BANER. MÅLBARE og MENNESKELIGE krav må ikke ligne hinanden — ellers
   leder folk efter et flueben der ikke findes. De står derfor i HVER SIN
   sektion med hver sin overskrift, hver sit ikon og hver sin ordlyd:

     · Måles automatisk  — lukker sig selv. Ingen knap, intet flueben.
     · Kræver kvittering — et menneske skal sige at det er gjort.

   Det er ikke to farver på samme liste; det er to lister. */
.kravsek { display: flex; flex-direction: column; gap: 7px; }
.kravsek > h3 {
  margin: 0; display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--txt-3);
}
.kravsek > h3 .ic { width: 14px; height: 14px; }
.kravsek > h3 .forklar {
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11.5px;
}
.kravsek.maalt > h3 { color: var(--acc-tekst); }
.kravsek.menneske > h3 { color: var(--kk-adv); }

/* ══ ⛔ FØLGEDOKUMENTERNE ════════════════════════════════════════════════════
   MÅLT 03-09-2026: kunde 16211 skrev »CMR til mail« / `915cmr@hcs.dk`.
   Ligger det krav på samme liste som fakturaens egen modtager, sender
   bogholderen før eller siden FAKTURAEN til CMR-postkassen.

   Adskillelsen bæres af FIRE ting, ikke af farven alene:
     1. egen sektion med egen overskrift (»Følgedokumenterne«)
     2. eget ikon
     3. en indrykning og en tydelig kant, så gruppen ses som en blok
     4. en linje PÅ HVERT KORT der siger hvad adressen ikke er
   Falder farven bort — 8 % af mænd er rødgrønt farveblinde — holder 1, 3 og 4
   stadig [UI-UX-STANDARD § 10]. */
.kravsek.g-foelgedok {
  border: 1px dashed var(--line); border-radius: 10px;
  padding: 8px 10px 10px; background: var(--graa-flade);
}
.kravsek.g-foelgedok .kravkort { border-left-style: dashed; }

/* Adressenoten — den ene sætning der forhindrer forvekslingen. Den står på
   KORTET, ikke kun i overskriften: et kort kan læses uden at man har set hvad
   der stod ovenover. */
.adressenote {
  font-size: 12px; line-height: 1.45; padding: 5px 10px; border-radius: 8px;
  background: var(--warn-bg); color: var(--kk-adv); border: 1px solid currentColor;
}
.adressenote b { color: inherit; }

.kravkort {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  background: var(--chrome); display: flex; flex-direction: column; gap: 6px;
  max-width: 1100px;
}
/* Venstrekanten gentager banen — men den er ALDRIG den eneste bærer:
   overskriften siger det, ikonet siger det, teksten siger det. */
.kravsek.maalt .kravkort { border-left: 3px solid var(--acc); }
.kravsek.menneske .kravkort { border-left: 3px solid var(--kk-adv); }
.kravkort.klaret { border-left-color: var(--kk-ok); }
.kravkort.ukendtart { border-left-color: var(--kk-fare); }

.kravtop { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.kravtop .art { font-size: 13px; font-weight: 600; }
.kravtop .vaerdi {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  padding: 1px 7px; border-radius: 6px; background: var(--graa-flade);
  overflow-wrap: anywhere;
}
.kravtop .lag {
  font-size: 10.5px; color: var(--txt-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 7px;
}
.kravtop .hoejre { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.kravstatus { font-size: 12.5px; color: var(--txt-2); }
.kravstatus b { font-variant-numeric: tabular-nums; }
.kravstatus.over { color: var(--kk-fare); }
.kravstatus.ok { color: var(--kk-ok); }

/* Den ordrette kilde. ⛔ Uden citatet skal bogholderiet åbne kundens dokument
   for at turde stole på kravet — og så bliver tavlen et ekstra klik, ikke et
   overblik. Citatet er derfor synligt, ikke gemt bag en foldeud. */
.citat {
  margin: 0; padding: 6px 10px 6px 12px; border-left: 2px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--txt-2);
  background: var(--chrome-3); border-radius: 0 8px 8px 0;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.citatkilde { font-size: 11px; color: var(--txt-3); }

/* Kvitteringens spor: hvem, hvornår — og en vej til at ophæve den */
.kvitspor {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--txt-2);
}
.kvitspor .navn { font-weight: 600; color: var(--txt); }
.kvitspor .ikok { width: 14px; height: 14px; color: var(--kk-ok); flex: none; }
.kvitspor .tid { font-variant-numeric: tabular-nums; }

/* ══ ⛔ DEN OVERSTIGELIGE ADVARSEL ══════════════════════════════════════════
   Rød, tydelig — og uden en eneste spærrende bivirkning. Se den navngivne
   kasse i kundekrav.js: der findes ingen knap, ingen tilstand og ingen
   kodesti hvor et kundekrav afviser en fakturering. */
.overstig {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid currentColor; border-radius: 9px; padding: 7px 11px;
  background: var(--neg-flade); color: var(--kk-fare); font-size: 12.5px;
  line-height: 1.45;
}
.overstig .ic { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.overstig .fri {
  display: block; margin-top: 3px; color: var(--txt-2); font-weight: 600;
}

/* Tom udfoldning — et tjek der aldrig siger noget, skal kunne bevise at det kørte */
.kravtom { font-size: 12.5px; color: var(--txt-3); }

/* ══ REGISTERET ═════════════════════════════════════════════════════════════
   Gitteret til venstre, den valgte kundes krav til højre. Panelet ruller i sin
   EGEN beholder — siden ruller aldrig vandret (§ 5). */
.regsplit {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 12px; flex: 1; min-height: 0;
}
@media (max-width: 1100px) {
  .regsplit { grid-template-columns: minmax(0, 1fr); }
  .regdet { max-height: 46vh; }
}
.regdet {
  background: var(--chrome); border-radius: 12px; box-shadow: var(--skygge);
  padding: 12px 14px; overflow: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.regtom { font-size: 12.5px; color: var(--txt-3); line-height: 1.5; }
.reghoved { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.reghoved h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.reghoved .kundenr { font-variant-numeric: tabular-nums; color: var(--txt-3); font-size: 12.5px; }
.regfakta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--txt-3); }
.regfakta b { color: var(--txt); font-variant-numeric: tabular-nums; }

/* Profilstatus som pille med ORD + ikon, aldrig farve alene */
.pstatus {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 9px; border-radius: 999px; border: 1px solid currentColor;
  background: var(--graa-flade); white-space: nowrap;
}
.pstatus .ic { width: 11px; height: 11px; }
.pstatus.laering { color: var(--kk-adv); }
.pstatus.frosset { color: var(--acc-tekst); }
.pstatus.aendret { color: var(--kk-ok); }

.regsek { display: flex; flex-direction: column; gap: 7px; }
.regsek > h3 {
  margin: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--txt-3);
}
.regknaprk { display: flex; gap: 7px; flex-wrap: wrap; }

/* En regels kort i registeret — samme sprog som tavlens, mindre */
.regregel {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px;
  display: flex; flex-direction: column; gap: 5px;
}
.regregel.maalt { border-left: 3px solid var(--acc); }
.regregel.menneske { border-left: 3px solid var(--kk-adv); }
.regregel.foelge { border-left: 3px dashed var(--kk-adv); }
.regregel.ukendtart { border-left: 3px solid var(--kk-fare); }
.regregel.lukket { opacity: .62; border-left-color: var(--txt-3); }
.regregel .rr1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.regregel .rr1 .art { font-size: 12.5px; font-weight: 600; }
/* Værdien og laget bærer samme form som i tavlens udfoldning — ét sprog, to
   steder. ⚠ De to regler er skrevet ud igen frem for at hænge på `.kravtop`:
   en vælger der spænder over to ubeslægtede beholdere, går i stykker første
   gang den ene omdøbes, og i stilhed. */
.regregel .vaerdi {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  padding: 1px 7px; border-radius: 6px; background: var(--graa-flade);
  overflow-wrap: anywhere;
}
.regregel .lag {
  font-size: 10.5px; color: var(--txt-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 7px;
}
.regregel .mute { color: var(--txt-3); }
.regregel .rr2 { font-size: 11.5px; color: var(--txt-3); display: flex; gap: 10px; flex-wrap: wrap; }
.regregel .rrknap { margin-left: auto; display: flex; gap: 6px; }

/* Versionssporet — »rettelsen er versioneret« skal kunne SES, ikke tros */
.version {
  font-size: 11.5px; color: var(--txt-2); border-left: 2px solid var(--line);
  padding: 2px 0 2px 9px; display: flex; gap: 8px; flex-wrap: wrap;
}
.version .per { font-variant-numeric: tabular-nums; color: var(--txt-3); }

/* ══ DIALOGERNE ═════════════════════════════════════════════════════════════ */
dialog {
  border: 1px solid var(--line); border-radius: 14px; padding: 0;
  width: min(640px, calc(100vw - 48px)); max-height: min(86vh, 900px);
  background: var(--win); color: var(--txt); box-shadow: var(--skygge);
}
dialog::backdrop { background: rgba(0, 0, 0, .28); }
.kkform { display: flex; flex-direction: column; max-height: inherit; }
.kkhoved {
  display: flex; align-items: center; gap: 12px; padding: 13px 17px;
  border-bottom: 1px solid var(--line); background: var(--win);
}
.kkhoved h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.02em; flex: 1; }
.detluk {
  border: 0; background: none; color: var(--txt-3); cursor: pointer;
  padding: 4px; border-radius: 6px;
}
.detluk:hover { color: var(--txt); background: var(--graa-flade); }
.detluk:focus-visible { outline: 2px solid var(--acc); }
.detluk .ic { width: 16px; height: 16px; }
.kkkrop {
  overflow: auto; padding: 13px 17px; display: flex; flex-direction: column; gap: 11px;
}
.kkbund {
  display: flex; align-items: center; gap: 9px; padding: 11px 17px;
  border-top: 1px solid var(--line); background: var(--win);
}
.kkbundnote { margin-right: auto; font-size: 11.5px; color: var(--txt-3); max-width: 46ch; }
.kkledetekst { margin: 0; font-size: 12.5px; color: var(--txt-2); line-height: 1.5; }
.kkarthjaelp { margin: -4px 0 0; font-size: 11.5px; color: var(--txt-3); line-height: 1.45; }
.kkrist { display: flex; gap: 11px; flex-wrap: wrap; }
.kkrist > .kkfelt { flex: 1 1 200px; }
.kkfelt { display: flex; flex-direction: column; gap: 4px; }
.kkfelt > span { font-size: 11.5px; color: var(--txt-3); }
.kkfelt input, .kkfelt select, .kkfelt textarea {
  font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--chrome); color: var(--txt); width: 100%;
}
.kkfelt textarea { resize: vertical; line-height: 1.5; }
.kkfelt input:focus-visible, .kkfelt select:focus-visible, .kkfelt textarea:focus-visible {
  outline: 2px solid var(--acc); border-color: var(--acc);
}
.kkfejl {
  font-size: 12.5px; color: var(--kk-fare); border: 1px solid currentColor;
  border-radius: 8px; padding: 6px 10px; background: var(--neg-flade);
}
.kkfejl[hidden] { display: none; }

/* Alle knapper der kan klikkes, siger det med markøren (ui-ux-pro-max) */
.foldknap, .pbknaplille, .smalbtn, .btn, .detluk, .rbtn { cursor: pointer; }
.btn:disabled, .rbtn:disabled, .smalbtn:disabled { cursor: default; }

/* Fokusringene skal selv have 3:1 mod fladen bagved (§ 10) */
.btn:focus-visible, .smalbtn:focus-visible, .rbtn:focus-visible,
.tree .it:focus-visible, .ribtab:focus-visible {
  outline: 2px solid var(--acc-tekst); outline-offset: 1px;
}

/* ══ ⭐ »HÅNDTERES AUTOMATISK ANDETSTEDS« — 242 ══════════════════════════════
   Christian, 03-09-2026: *»vi vil derfor ikke se kunder hvor dette er sat til,
   da vi allerede ved det.«* Kunden falder af TAVLEN; i registeret bliver hun
   stående med et dæmpet mærke — det er det ene sted krydset kan fjernes igen.

   ⛔ Mærket er ORD + form, aldrig farve alene [UI-UX-STANDARD § 10]: teksten
   siger »andetsteds« (eller hvor), og kanten er stiplet. Falder farven bort,
   kan mærket stadig læses. */
.haandtmaerke {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  border: 1px dashed var(--line); color: var(--txt-3); background: transparent;
  white-space: nowrap; cursor: help;
}

/* Rækken på tavlen, når »Vis dem alligevel« er slået til. ⛔ DÆMPET, ikke
   skjult: den er hentet frem med vilje, og den skal kunne ses at være en
   undtagelse. `opacity` alene ville ramme også fokusringen, derfor farven. */
.grid tbody tr.haandteret > td { color: var(--txt-3); }
.grid tbody tr.haandteret.sel > td { color: inherit; }

/* Afkrydsningen i profilpanelet */
.haandtsek { gap: 9px; }
.haandtvalg { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.haandtvalg input { margin-top: 2px; flex: none; width: 15px; height: 15px; }
.haandtvalg > span { font-size: 12.5px; line-height: 1.5; color: var(--txt-2); }
.haandtvalg b { color: var(--txt-1); }
.haandthvor {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--txt-3);
}
.haandthvor input {
  flex: 1; min-width: 0; padding: 5px 9px; font: inherit; font-size: 12.5px;
  color: var(--txt-1); background: var(--flade); border: 1px solid var(--line);
  border-radius: 8px;
}
.haandthvor input:focus-visible { outline: 2px solid var(--acc); border-color: var(--acc); }
/* HVEM og HVORNÅR — et flag uden en afkrydser er en påstand, ikke en
   beslutning, og så skal afkrydseren også stå på skærmen. */
.haandtspor { font-size: 11.5px; color: var(--txt-3); }
/* Linjen i grænsebåndet der siger at de VISES med — samme bånd, men den er en
   oplysning og ikke en advarsel, så den er dæmpet. */
.pbgraenselinje.haandteret > span { color: var(--txt-2); }

/* Bevægelse er pynt, og pynt må ikke påtvinges (§ 10) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}