/* ==========================================================================
   NERVE Finance — fladelag for KLADDEN.
   Reglerne: ../../docs/UI-UX-STANDARD.md · grundlaget: ../design/nerve-finance-apple.css

   ⛔ ../design/*.css og *.js RETTES ALDRIG. De er ordret dem ADR-0005 hash-låste,
      og SH-18 skal kunne se at de ikke har flyttet sig. Alt hvad en flade har brug
      for ud over grundlaget, står i et fladelag som dette — additivt, aldrig ved at
      redigere kilden.

   § 1-3 er de samme rettelser som `debitor-kreditor.css` bærer, med de samme MÅLTE
   tal. De er GENTAGET og ikke importeret, fordi et fladelag pr. definition står ved
   siden af sin flade; skal de en dag deles, hører de i grundlaget og i en ny
   hash-linje i ADR-0005, ikke i en tredje fil ingen af fladerne ejer
   (UI-UX-STANDARD § 1).

   § 4-9 er kladdens egne: redigerbare celler, kontoopslaget, balancekæden og
   det bånd der siger at kladden er lukket efter bogføring.
   ========================================================================== */

/* ── 1. Fokus ───────────────────────────────────────────────────────────────
   `:focus-visible`, ikke `:focus`. I et gitter man TASTER i, er ringen ikke en
   detalje: den er det eneste der siger hvilken celle der modtager tegnene. */
:root { --fokus: #0059B3; --acc-tekst: #0059B3; --btn-flade: #0071E3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fokus: #6FB6FF; --acc-tekst: #6FB6FF; --btn-flade: #0060C9;
}}
:root[data-theme="dark"] { --fokus: #6FB6FF; --acc-tekst: #6FB6FF; --btn-flade: #0060C9; }

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 7px;
}
.gscroll:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }

.tree input:focus,
.gsog input:focus,
.g thead tr.fltrow input:focus,
.pop select:focus, .pop input:focus,
.rfelt select:focus { outline-color: var(--fokus); }

.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;
}

/* ── 2. Kontrast ────────────────────────────────────────────────────────────
   Målt med WCAG 2.1's relative luminans mod den baggrund farven faktisk står på.

   | rolle              | grundlag  | målt  | her              | målt  |
   |--------------------|-----------|-------|------------------|-------|
   | --txt-3, lyst      | #8E8E93   | 3,3:1 | #65656A          | 5,8:1 |
   | --txt-3, mørkt     | #8E8E93   | 4,3:1 | #A0A0A6          | 5,4:1 |
   | .b-ok  (grøn)      | #248A3D   | 3,9:1 | #1A7A35          | 4,8:1 |
   | .b-forf (rød)      | #D7261B   | 4,2:1 | #B3241A          | 5,5:1 |
   | .b-aaben (blå)     | #0071E3   | 4,1:1 | var(--acc-tekst) | 5,7:1 |
   | .b-fak (grå)       | #6E6E73   | 4,4:1 | #55555A          | 6,5:1 |
   | accent SOM TEKST   | #0071E3   | 4,1:1 | var(--acc-tekst) | 5,7:1 |
   | .btn hvid tekst    | #0A84FF   | 3,6:1 | #0060C9 (mørkt)  | 6,0:1 | */
:root { --txt-3: #65656A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --txt-3: #A0A0A6; } }
:root[data-theme="dark"] { --txt-3: #A0A0A6; }

.b-ok   { color: #1A7A35; }
.b-forf { color: #B3241A; }
.b-fak  { color: #55555A; }
.b-aaben, .b-bet { color: var(--acc-tekst); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --b-ok-fg: #5BE07E; --b-forf-fg: #FF9A93; --b-fak-fg: #C9C9CF;
}}
:root[data-theme="dark"] { --b-ok-fg: #5BE07E; --b-forf-fg: #FF9A93; --b-fak-fg: #C9C9CF; }
:root[data-theme="dark"] .b-ok, :root:not([data-theme="light"]) .b-ok { color: var(--b-ok-fg, #1A7A35); }
:root[data-theme="dark"] .b-forf, :root:not([data-theme="light"]) .b-forf { color: var(--b-forf-fg, #B3241A); }
:root[data-theme="dark"] .b-fak, :root:not([data-theme="light"]) .b-fak { color: var(--b-fak-fg, #55555A); }

.lnk, .cmdknap, .rbtn.aktiv, .rbtn.primar, .g th .srt,
.smalbtn:hover, .pop .pt svg, .pal .r svg { color: var(--acc-tekst); }
.rbtn.aktiv svg, .rbtn.primar svg { color: var(--acc-tekst); }
.btn { background: var(--btn-flade); }
.pal .r.paa { background: var(--btn-flade); }
.bredde-maal { background: var(--btn-flade); }

/* ── 3. Bevægelse ───────────────────────────────────────────────────────────
   `prefers-reduced-motion` respekteres. Fladen animerer næsten intet; blokken
   står så en senere tilføjelse arver den frem for at skulle huske den. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 4. Værktøjslinjen: enhed og »bogført af« ───────────────────────────────
   Enhedsvalget er SYNLIGT, ikke gemt i en menu [D14]. »Bogført af« står ved
   siden af, fordi der ikke er noget login: er feltet tomt, kan der ikke
   bogføres, og så skal man kunne se hvorfor uden at lede. */
.top .firma { min-width: 0; }
.enhedsvalg {
  max-width: 300px; height: 26px; padding: 0 8px;
  border: none; border-radius: 8px; background: var(--graa-flade);
  color: var(--txt); font-size: 14px; font-weight: 600; letter-spacing: -.02em;
  cursor: pointer;
}
.enhedsvalg:disabled { color: var(--txt-3); cursor: default; }

.bruger { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.bruger label { font-size: 11.5px; color: var(--txt-2); white-space: nowrap; }
.bruger input {
  width: 176px; height: 26px; padding: 0 9px;
  border: none; border-radius: 8px; background: var(--graa-flade);
  color: var(--txt); font-size: 12.5px;
}
.bruger input::placeholder { color: var(--txt-3); }
.bruger input.mangler { box-shadow: inset 0 0 0 1.5px var(--neg); }

/* ── 5. Kladdelisten i sidebjælken ──────────────────────────────────────────
   Flere kladder må ligge åbne samtidig. Bogførte bliver stående i listen —
   forsvandt de, ville sporet fra kladde til batch være usynligt i fladen.

   Men de ligger FOLDET SAMMEN (Christian 20-08-2026: »når noget er bogført,
   så skal det jo væk fra kladden?«). 12 bogførte importkladder fyldte hele
   sidebjælken, mens arbejdsfladen lå tom ved siden af. Ét klik væk, ikke et
   opslag væk — sporet består, men det konkurrerer ikke om pladsen. */
.tree .grp-fold > summary { cursor: pointer; list-style: none; }
.tree .grp-fold > summary::-webkit-details-marker { display: none; }

/* ⛔ `.tree .grp` er `display:flex` i designarket, og det fjerner browserens
   egen udfoldningspil. Uden en erstatning ville overskriften se ud som en
   almindelig etiket, og de 12 bogførte ville virke FORSVUNDET frem for foldet
   — altså præcis den datatvivl foldningen skal undgå. Trekanten tegnes derfor
   selv og drejer, så tilstanden kan ses uden at klikke. */
.tree .grp-fold > summary::before {
  content: "";
  width: 0; height: 0; flex: none;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .12s ease;
}
.tree .grp-fold[open] > summary::before { transform: rotate(90deg); }
.tree .th { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* ⛔ HØJDEN SKAL SÆTTES FRI — fundet 20-08-2026 på et skærmbillede, ikke i kilden.
   Grundlaget giver `.tree .it` en FAST `height: 30px`. `.kladdeit` er tolinjet
   (navn + tilstand), og den anden linje flød derfor UD af knappen og lagde sig
   oven i den næste post: »Kreditor« stod med »1 linjer · balancerer« hængende ved
   siden af sig. Fejlen har været der siden sidebjælken blev tolinjet; den blev
   først synlig da listen fik flere poster end der var luft imellem.
   `min-height` bevares, så en ETlinjet post står i samme rytme som resten. */
/* ⚠ SELEKTOREN ER `.tree .it.kladdeit`, ikke `.kladdeit` — og det er selve fejlen.
   Grundlagets regel er `.tree .it` (0,2,0); et bart `.kladdeit` (0,1,0) TABER, så
   både `height: 30px` og `align-items: center` blev stående. Reglen så rigtig ud i
   filen og gjorde ingenting på skærmen. Den slags kan kun ses ved at kigge — det
   var et skærmbillede, ikke kilden, der afslørede den. */
/* ⛔ **`height: auto` VAR IKKE NOK — anden runde af den samme fejl, 20-08-2026.**
   Igen fundet på et skærmbillede, ikke i kilden, og igen usynlig i filen: reglen
   ovenfor VANDT denne gang (specificiteten var rettet), og posterne blev alligevel
   klemt. Målt på `Bank - Sped DKK`:

       scrollHeight 58 px · clientHeight 31 px · .kl2 er 33,9 px (den ombryder)

   Grunden er en HELT anden end første gang. `.tree .liste` er selv
   `display: flex; flex-direction: column` (grundlaget, linje 139), så hver post er
   et FLEX-ELEMENT — og et flex-element har `flex-shrink: 1`. Når listen er højere
   end sidebjælken, krymper browseren posterne ned mod deres `min-height`, uanset
   `height: auto`. Anden linje flød derfor ud over den næste post, og med en lang
   undertekst (»162 uafstemte · difference 67.016,65«, som ombryder til to linjer)
   var overlappet en hel linje.

   ⚠ **Læren, og den er ikke »husk flex: none«:** en kur der gives videre uden sin
   afgrænsning, er en fejl ganget med antallet af steder (REGEL 5, punkt 2). Første
   runde løste SPECIFICITETEN og skrev sejren som om højden nu var fri. Den var fri
   — mod `height`. Den var stadig bundet af flexbeholderen, og det efterprøvede
   ingen, fordi påstanden lød som om sagen var lukket. */
.tree .it.kladdeit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  height: auto; min-height: 30px; padding-top: 4px; padding-bottom: 4px;
  flex: none;
}
.kladdeit .kl1 { display: flex; align-items: center; gap: 6px; width: 100%; }
.kladdeit .kl2 {
  padding-left: 22px; font-size: 11px; color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
.kladdeit .kl2 .ubalance { color: #B3241A; font-weight: 600; }
:root[data-theme="dark"] .kladdeit .kl2 .ubalance,
:root:not([data-theme="light"]) .kladdeit .kl2 .ubalance { color: var(--b-forf-fg, #B3241A); }
.tree .tomliste { padding: 14px 12px; font-size: 12px; color: var(--txt-3); line-height: 1.45; }

/* ── 5b. De FASTE kladder (064) ─────────────────────────────────────────────
   Christian, 20-08-2026: »Vil ikke oprette en kladde hver gang vi skal bogføre.
   Vi skal have nogle faste kladder "Daglig", Kreditor osv.«

   De står ØVERST og forsvinder aldrig — heller ikke efter bogføring. De er ikke
   en liste over hvad der findes; de er de knapper der skal trykkes på, og derfor
   bærer de en anelse mere vægt end de øvrige punkter. Forskellen er ÉN ting
   (fedmen på navnet) og ikke tre: en fast kladde skal kunne kendes, ikke råbe. */
.kladdeit.fastkladde .kl1 { font-weight: 600; }
.kladdeit.fastkladde .kl2 { font-variant-numeric: tabular-nums; }

/* ── 6. Bånd ────────────────────────────────────────────────────────────────
   »Ingen advarsler uden en handling« (§ 9): hvert bånd siger enten hvad man gør,
   eller hvor man læser videre. Farven står aldrig alene — hvert bånd har sit
   ikon og sin ordlyd. */
.baandstak { display: flex; flex-direction: column; gap: 7px; }
.baandstak:empty { display: none; }
.baand {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 13px; border-radius: 11px; font-size: 12.5px; line-height: 1.45;
  box-shadow: inset 0 0 0 1px currentColor;
}
.baand svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.baand b { font-weight: 600; }
.baand.info { background: var(--acc-soft); color: var(--acc-tekst); }
.baand.advar { background: var(--warn-bg); color: var(--warn); }
.baand.fejl { background: var(--neg-flade); color: #B3241A; }
:root[data-theme="dark"] .baand.fejl,
:root:not([data-theme="light"]) .baand.fejl { color: var(--b-forf-fg, #B3241A); }
.baand.lukket { background: var(--graa-flade); color: var(--txt-2); }

/* ── 7. Balancekæden ────────────────────────────────────────────────────────
   Debet − Kredit = Difference, med regnetegnene imellem, så tallene kan
   afstemmes med øjet mod sum-linjen. Kæden regnes af de VISTE aktive linjer.

   Nul er en OPGØRELSE og skrives 0,00; tankestregen er reserveret til »ikke
   opgjort« — fx når der slet ikke er valgt en kladde (UI-UX-STANDARD § 4). */
/* Grundlaget farver totalkortets tal med `--acc` (4,1:1 som TEKST — for lidt).
   Rollen skiftes til `--acc-tekst`, som måler 5,7:1 · 6,5:1. */
.kpirow .kpi.baand.tot .val { color: var(--acc-tekst); }
/* Selektorerne har samme vægt som grundlagets `.kpirow .kpi.baand.tot .val`
   PLUS én klasse — ellers ville accenten vinde og differencen stå blå, uanset
   om den var nul eller ej. */
.kpirow .kpi.baand.tot .val.balance { color: #1A7A35; }
.kpirow .kpi.baand.tot .val.ubalance { color: #B3241A; }
:root[data-theme="dark"] .kpirow .kpi.baand.tot .val.balance,
:root:not([data-theme="light"]) .kpirow .kpi.baand.tot .val.balance { color: var(--b-ok-fg, #1A7A35); }
:root[data-theme="dark"] .kpirow .kpi.baand.tot .val.ubalance,
:root:not([data-theme="light"]) .kpirow .kpi.baand.tot .val.ubalance { color: var(--b-forf-fg, #B3241A); }
.kpirow .kpi .val.uopgjort,
.kpirow .kpi.baand.tot .val.uopgjort { font-size: 13px; font-weight: 500; color: var(--txt-3); }

/* Filterenheden skal stå hvor filtrene bruges, ikke i en manual. */
.beloebshint {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--txt-3);
}
.beloebshint svg { width: 13px; height: 13px; flex: none; }
@media (max-width: 1280px) { .beloebshint { display: none; } }
.kpirow .kpi .hvorfor {
  margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--txt-3); max-width: 40ch;
}
.kpirow .kpi .hvorfor .grp {
  display: inline-block; margin: 2px 5px 0 0; padding: 1px 6px;
  border-radius: 8px; background: var(--graa-flade); color: var(--txt-2);
  font-variant-numeric: tabular-nums; cursor: pointer; border: none;
  font-size: 11px; font-family: inherit;
}
.kpirow .kpi .hvorfor .grp:hover { color: var(--acc-tekst); }
.uopgjort-celle { color: var(--txt-3); }

/* ── 8. Redigerbare celler ──────────────────────────────────────────────────
   Cellerne SKAL se ud som celler, ikke som formularfelter: en ramme om hver
   celle ville gøre 31 px-rækken til en formular og æde tætheden, der er hele
   pointen. Feltet er derfor usynligt indtil det får fokus eller mus. */
.g td .cf {
  width: 100%; height: 23px; padding: 0 5px; margin: 0;
  border: none; border-radius: 6px; background: transparent;
  color: var(--txt); font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* Pladsholderen står i `--txt-3` UDEN ekstra gennemsigtighed. Firefox lægger selv
   en `opacity: .54` på pladsholdere, og en `opacity` her oveni ville trække de
   målte 5,8:1 ned under grænsen — netop den slags dæmpning der kun kan ses når
   den måles. */
.g td .cf::placeholder { color: var(--txt-3); opacity: 1; }
.g td .cf:hover { background: var(--graa-flade); }
.g td .cf:focus { background: var(--chrome); box-shadow: inset 0 0 0 1px var(--fokus); }
.g td .cf.tal { text-align: right; }
.g td .cf.neg { color: var(--neg); }
/* En celle serveren afviste. Farven står ALDRIG alene: feltet får også
   `aria-invalid`, og fejlen står som tekst i statuslinjen og i kontrolpanelet. */
.g td .cf[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--neg); }
/* Stregen i venstre kant er en GENTAGELSE af statuspillen, ikke bærer af
   betydningen: pillen har både ikon og tekst. Farve står aldrig alene (§ 10). */
.g tbody tr.harfejl td:first-child { box-shadow: inset 2px 0 0 0 var(--neg); }
.g tbody tr.venter td { opacity: .62; }

/* ── 8b. Celler der ÅBNER noget i stedet for at tage imod tegn (066) ────────
   »Kontotype« og »Modkontotype« kan ikke rettes felt for felt: databasen kræver
   at typen og parten sættes SAMTIDIG, og et felt man ikke kan udfylde alene, må
   ikke se ud som et felt. Knappen ligner cellen indtil den får mus eller fokus —
   samme tæthed som `.cf`, men med en understregning der siger at den åbner noget. */
.g td .cfknap {
  width: 100%; height: 23px; padding: 0 5px; margin: 0;
  border: none; border-radius: 6px; background: transparent;
  color: var(--txt); font: inherit; font-size: 13px; text-align: left;
  cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; text-decoration-color: var(--txt-3);
}
.g td .cfknap:hover { background: var(--graa-flade); color: var(--acc-tekst); }
.g td .cfknap:focus-visible { background: var(--chrome); box-shadow: inset 0 0 0 1px var(--fokus); }

/* ── 8c. Typen der VENTER på sin part (090) ────────────────────────────────
   ⛔ Tilstanden SKAL kunne ses. Trykker man D, står der »Debitor« i cellen —
   men basen ved det ikke endnu, og den kan ikke: databasen kræver at kontotype
   og part sættes SAMTIDIG (`kladdelinje_part_foelger_kontotype_ved_ret`), så
   typen venter i browseren til parten er tastet. Uden et mærke ville cellen
   påstå noget der ikke er gemt — og en genindlæsning ville tavst rulle den
   tilbage. Det er UI-UX-STANDARD § 4's skelnen mellem »opgjort« og »ikke
   opgjort«, flyttet fra et beløb til en tilstand.

   ⚠ Farve er ALDRIG eneste betydningsbærer (§ 10). Mærket er derfor en
   venstre-kant PLUS et ord: statuslinjen siger »tryk Tab og søg kunden«, og
   knappens `title` siger det samme for musebrugeren. */
.g td .cfknap.venter {
  box-shadow: inset 2px 0 0 0 var(--warn);
  color: var(--warn);
  text-decoration-color: var(--warn);
}
@media (prefers-reduced-motion: no-preference) { .g td .cfknap.venter { transition: box-shadow .12s ease; } }

.g td .kontonavn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.g td .kontonavn .navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g td .ktype {
  flex: none; padding: 0 5px; border-radius: 7px; font-size: 10.5px;
  background: var(--graa-flade); color: var(--txt-2); letter-spacing: 0;
}
.g td.act .ikon { color: var(--txt-2); }
.g td.act .ikon:hover { color: var(--acc-tekst); }

/* ── 9. Kontoopslaget ───────────────────────────────────────────────────────
   Opslaget sker MENS man skriver, på nummer eller navn, og kontotypen står i
   listen — 41000 er en debitorSAMLEkonto, og det skal man kunne se før man
   lægger en manuel postering på den. */
.opslag {
  position: fixed; z-index: 260; min-width: 320px; max-width: 460px;
  /* ⚠ `max-height` sættes af `tegnOpslag` efter den plads der FAKTISK er over
     eller under feltet — 302 px viste ni rækker af en kontoplan på 401, og det er
     for lidt at bladre i. Værdien her er kun bunden, hvis JS'en ikke når at måle.
     Ruller altid i SIN EGEN beholder; siden ruller aldrig (standardens § 5). */
  max-height: 302px; overflow: auto; overscroll-behavior: contain;
  background: var(--chrome); border-radius: 12px; box-shadow: var(--skygge);
  padding: 5px;
}
/* Tælleren over trefflisten. ⛔ **Sticky**, ikke blot øverst: hele kontoplanen er
   401 konti, og ruller man 300 rækker ned, er en overskrift der er rullet ud af
   syne præcis lige så tavs som ingen overskrift. `top: -5px` ophæver beholderens
   egen `padding: 5px`, så den klæber til kanten og ikke 5 px inde.
   Baggrunden er UGENNEMSIGTIG med vilje — en halvgennemsigtig ville lade
   kontonumrene løbe igennem teksten når man ruller. */
.opslag .taeller {
  position: sticky; top: -5px; z-index: 1;
  margin: -5px -5px 3px; padding: 7px 11px 6px;
  background: var(--chrome); color: var(--txt-3);
  font-size: 11.5px; letter-spacing: -.01em;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--line-2);
}
.opslag .o {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 9px; border: none; border-radius: 8px; background: transparent;
  color: var(--txt); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.opslag .o:hover { background: var(--row-hover); }
.opslag .o.paa { background: var(--btn-flade); color: #fff; }
.opslag .o.paa .ktype, .opslag .o.paa small { color: #fff; opacity: .9; }
.opslag .o .nr { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 54px; }
.opslag .o .nv { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opslag .o small { color: var(--txt-3); }
.opslag .tom { padding: 10px 11px; font-size: 12.5px; color: var(--txt-3); }

/* ── 10. Kontrolpanelet (simulering, afvigelser, bogføringskvittering) ──────
   Tabellen kan være bredere end panelet. Den ruller i SIN EGEN beholder; siden
   ruller aldrig vandret. */
.detrul { overflow-x: auto; max-width: 100%; }
.afvliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.afvliste li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.afvliste li svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: #B3241A; }
:root[data-theme="dark"] .afvliste li svg,
:root:not([data-theme="light"]) .afvliste li svg { color: var(--b-forf-fg, #B3241A); }
.afvliste .pegepind {
  flex: none; border: none; background: var(--graa-flade); color: var(--acc-tekst);
  border-radius: 7px; padding: 1px 7px; font: inherit; font-size: 11.5px; cursor: pointer;
}
.kvit { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 9px; }
.kvit div { font-size: 12.5px; }
.kvit b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }

/* ── 11. Plads ──────────────────────────────────────────────────────────────
   Gitteret er indholdet og må aldrig klemmes ned til én række når bånd, kæde og
   kontrolpanel står samtidig. Går det ikke op, ruller arbejdsområdet LODRET —
   vandret rulning hører kun til inde i gitteret. */
#gitter { min-height: 200px; }
.detbund { max-height: min(42vh, 360px); }
.view { overflow-y: auto; }

/* ── 12. Berøringsmål ───────────────────────────────────────────────────────
   Gitteret er bygget til mus og tastatur (31 px rækker er hele pointen), men de
   frie knapper skal kunne rammes med en finger. */
@media (pointer: coarse) {
  .iconbtn, .rail button, .rbtn, .merebtn, .tab, .smalbtn { min-height: 44px; }
  .rail button { height: 44px; }
  .opslag .o { min-height: 44px; }
}

/* ── 13. Smal skærm ─────────────────────────────────────────────────────────
   Sidebjælke og rail forsvinder før gitteret gør; gitteret er indholdet. */
@media (max-width: 1080px) {
  .tree { display: none; }
  .kpirow .kpi { flex: 1 1 140px; }
}
@media (max-width: 780px) {
  .rail { display: none; }
  .view { padding: 12px 10px 0; }
  .bruger label { display: none; }
  .bruger input { width: 130px; }
}