/* TMS-salgsordrernes fladelag — egne tilføjelser oven på det hash-låste
   grundlag (ADR-0005: ../design/* rettes aldrig).

   ⛔ `.springlink`/`.visuelt-skjult` SKAL fladen selv definere — apple.css har
   dem ikke (fakturaoversigt.html's kasse dokumenterer fælden: uden reglen
   bliver springlinket et in-flow grid-barn, og appen skubbes i bunden). */

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

.soegeraekke { display: flex; gap: 10px; align-items: center; }
.soegeraekke .ic { color: var(--txt-3); flex: none; }
.soegeraekke input { flex: 1; max-width: 640px; font-size: 14px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--felt, var(--win)); color: var(--txt); }
.soegeraekke input:focus { outline: 2px solid var(--acc-soft); border-color: var(--acc); }
.soegeraekke .hint { font-size: 11.5px; color: var(--txt-3); white-space: nowrap; }

/* Træ-panelets spejlnote — en forklaring, ikke en knap. */
.spejlnote { font-size: 11.5px; color: var(--txt-3); line-height: 1.45;
  padding: 2px 10px 6px; }

/* ── ORDREKORTET — Christian 28-08: »skal klart forbedres til en god
   UI-oplevelse«. Kort og sektioner, ikke en 138-linjers tabel; de rå felter
   ligger bag foldeuden nederst som kontrolspor. Alle farver via husets
   tokens, så begge temaer bærer. ─────────────────────────────────────────── */
#detalje { border: 1px solid var(--line); border-radius: 12px; padding: 0;
  width: min(940px, calc(100vw - 48px)); max-height: min(84vh, 980px);
  background: var(--win); color: var(--txt); box-shadow: var(--skygge); }
#detalje::backdrop { background: rgba(0, 0, 0, .28); }

.dethoved { display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--win); z-index: 2; }
.dethoved h2 { margin: 0; font-size: 15px; font-weight: 700; }
.detfrisk { font-size: 11.5px; color: var(--txt-3); margin-left: auto; }
.detluk { border: 0; background: none; color: var(--txt-3); cursor: pointer;
  padding: 4px; border-radius: 6px; }
.detluk:hover { color: var(--txt); background: var(--chrome); }
.detluk:focus-visible { outline: 2px solid var(--acc); }
.detluk .ic { width: 16px; height: 16px; }

.detkrop { overflow: auto; padding: 4px 18px 16px; }

/* topbåndet */
.dettop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0 2px; }
.detpille { font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--chrome); color: var(--txt); }
.detbadge { font-size: 11px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--txt-3); }
.detoprettet { margin-left: auto; font-size: 11.5px; color: var(--txt-3); }

/* sektioner */
.detsek { padding: 12px 0 2px; }
.detsek h3 { margin: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.detsek + .detsek { border-top: 1px solid var(--line); margin-top: 10px; }

/* økonomifliser */
.dettiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; }
.dettile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: var(--chrome); display: flex; flex-direction: column; gap: 2px; }
.dettile > span { font-size: 11px; color: var(--txt-3); }
.dettile > b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dettile > small { font-size: 11.5px; color: var(--txt-2, var(--txt));
  font-variant-numeric: tabular-nums; }
.detkurs, .detgrund { color: var(--txt-3); }

/* parternes tre kort */
.detparter { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; }
.detkort { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.detkort h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--txt-3); }
.detadr { font-size: 13px; line-height: 1.45; margin-bottom: 6px; }

/* nøgle/værdi-rækker */
.detrk { display: flex; gap: 10px; font-size: 12px; padding: 2px 0; }
.detrk > span { color: var(--txt-3); min-width: 110px; flex: none; }
.detrk > b { font-weight: 600; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums; }
.detliste { columns: 2; column-gap: 24px; }
.detliste .detrk { break-inside: avoid; }
@media (max-width: 760px) { .detliste { columns: 1; } }

/* ruten */
.detrute { display: flex; align-items: stretch; gap: 12px; margin-bottom: 8px; }
.detstop { flex: 1; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.detstop h4 { margin: 0; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--txt-3); }
.detstop b { font-size: 15px; font-variant-numeric: tabular-nums; }
.detstop small { font-size: 11.5px; color: var(--txt-2, var(--txt)); }
.detpil { align-self: center; font-size: 18px; color: var(--txt-3); flex: none; }

/* noter */
.detnoter { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }

/* kontrolsporet: de rå 138 felter bag foldeud */
.detraa { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.detraa summary { cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--txt-2, var(--txt)); padding: 4px 0; }
.detraa summary:focus-visible { outline: 2px solid var(--acc); border-radius: 4px; }
.detkrop table { width: 100%; border-collapse: collapse; font-size: 12.5px;
  margin-top: 6px; }
.detkrop th, .detkrop td { text-align: left; padding: 4px 10px; vertical-align: top; }
.detkrop th { font-weight: 600; white-space: nowrap; width: 1%; color: var(--txt-2, var(--txt)); }
.detkrop td.felt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--txt-3); white-space: nowrap; width: 1%; }
.detkrop td.vrd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detkrop tr.tom td, .detkrop tr.tom th { color: var(--txt-3); }
.detkrop tr:nth-child(even) { background: var(--chrome); }

/* gitterets uopgjorte DKK-celler — tankestreg med grunden i titlen */
.uopgjort-celle { color: var(--txt-3); cursor: help; }

/* POD-fluebenet — grønt er semantisk (leveret bevis findes), ikke accenten.
   Klikbart: åbner ordrekortet med leveringsbeviserne. */
.podok { color: var(--ok, #1f7a3d); font-weight: 700; cursor: pointer; }
.podok:focus-visible { outline: 2px solid var(--acc); border-radius: 4px; }
.podknap { margin-left: auto; font-size: 11.5px; padding: 3px 12px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--chrome);
  color: var(--txt); cursor: pointer; }
.podknap:hover { border-color: var(--acc); }
.podknap:focus-visible { outline: 2px solid var(--acc); }
.podknap:disabled { opacity: .5; cursor: default; }
/* DKK regnet med seneste (ikke transaktionsdagens) kurs — læsbart forbehold */
.kursnote { text-decoration: underline dotted; text-underline-offset: 3px;
  cursor: help; }

/* flere leveringssteder-mærket i LevAdr1-kolonnen */
.flerelev { font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--txt-3);
  cursor: help; }

/* ordrekortets gods [194] */
.detgodsrul { overflow-x: auto; }
.detgods { width: 100%; border-collapse: collapse; font-size: 12px; }
.detgods th { text-align: left; font-weight: 600; color: var(--txt-3);
  padding: 3px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.detgods td { padding: 3px 8px; vertical-align: top; overflow-wrap: anywhere; }
.detgods td.tal { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.detgods tr:nth-child(even) td { background: var(--chrome); }
.detgodssum { margin-top: 6px; font-size: 11.5px; color: var(--txt-2, var(--txt));
  font-variant-numeric: tabular-nums; }

/* ordrekortets stop pr. ben [194] */
.detben { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px; }

/* ═══ PERIODEBÅNDET [Christian 29-08-2026] ═══════════════════════════════════
   »synes der mangler at blive vist ordre tilbage i tiden … hvordan sørger vi
   for at kunne se længere tilbage uden at gøre det for langsomt?«

   Formen er et SEGMENTERET valg + fra/til + et rækkeloft, på én linje over
   søgerækken. Hurtigvalgene er de fire spørgsmål man reelt stiller et
   ordrekartotek (denne måned · sidste kvartal · i år · alt); fra/til er den
   præcise vej når svaret ikke er et af de fire.

   ⛔ Alle farver via husets tokens, så BEGGE temaer bærer (UI-UX-STANDARD § 2:
   en farve må aldrig kun være defineret inde i en media-blok). ────────────── */
.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); }

.pbvalg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px;
  overflow: hidden; background: var(--chrome); }
.pbknap { border: 0; background: none; color: var(--txt-2, var(--txt));
  font-size: 12.5px; padding: 5px 11px; cursor: pointer;
  border-right: 1px solid var(--line-2, var(--line)); white-space: nowrap; }
.pbknap:last-child { border-right: 0; }
.pbknap:hover { background: var(--graa-flade); color: var(--txt); }
/* Accenten som FLADE med hvid tekst måler 4,7:1 i lyst tema (UI-UX-STANDARD
   § 3). I mørkt tema måler hvid på `--acc` (#0A84FF) kun 3,6:1 — dér bruges
   husets rettede `.btn`-blå #0060C9, som måler 6,0:1. Begge står som egne
   regler; ingen af dem lever kun i en media-blok. */
.pbknap.aktiv { background: var(--acc); color: #fff; font-weight: 600; }
.pbknap:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pbknap.aktiv { background: #0060C9; }
}
:root[data-theme="dark"] .pbknap.aktiv { background: #0060C9; }

.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(--felt, 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; }

/* Grænsebåndet — en advarsel med en HANDLING (UI-UX-STANDARD § 9).
   ⛔ `:not(.skjult)` er husreglen fra § 14: en bar `display`-regel i et
   fladelag er (0,1,0) ligesom grundlagets `.hidden,.skjult`, og fladelaget
   indlæses SIDST — så båndet ville stå tændt uanset klassen. Fejlen ramte
   #demoPille og #forsystemPille 24-08-2026. */
.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(--warn); 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; }

/* ⛔ GITTERETS GULV — UI-UX-STANDARD § 5: reglen er TRE dele, ikke én.
   `.gscroll` (1) står i grundlaget. Periodebåndet + grænsebåndet er ny højde
   over gitteret, og uden et gulv (2) KRYMPER gitteret i stedet for at presse —
   symptomet er to synlige rækker, ikke en uopnåelig side. `.view` har
   `overflow:hidden` i grundlaget; (3) gør trykket til en lodret rulning. */
#view { overflow-y: auto; overflow-x: hidden; }
#gitter { min-height: 320px; }

/* ── indtægtskolonnerne [Christian 29-08: »jeg kan heller ikke se indtægter
   på ordren?«] — kilden er en PILLE med tekst, aldrig farve alene
   (UI-UX-STANDARD § 10). ───────────────────────────────────────────────── */
.omskilde { font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--txt-2, var(--txt)); background: var(--graa-flade); }
.omskilde.fakt { color: #1A7A35; border-color: currentColor; }
.omskilde.bereg { color: var(--warn); border-color: currentColor; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .omskilde.fakt { color: #30D158; }
}
:root[data-theme="dark"] .omskilde.fakt { color: #30D158; }

/* ── FAKTURASTATUS [Christian 30-08-2026: »om en paagaeldende ordre faktisk er
   faktureret«] ────────────────────────────────────────────────────────────
   ⛔ TRE LAG, og TEKSTEN er det første: pillen siger ordet (»Faktureret« /
   »Ikke faktureret« / »Uafklaret«), ikonet er andet lag, farven tredje.
   Falder farven bort — 8 % af mænd er rødgrønt farveblinde — kan tilstanden
   stadig læses [UI-UX-STANDARD § 10].

   ⚠ Ikonet er en CSS-maske, ikke et `<svg>`-element: gitteret tegner ALLE
   rækker (nerve-grid.js virtualiserer ikke — målt 30-08-2026), og 1.000 ekstra
   SVG-noder i en kolonne er en pris uden modydelse. Masken arver `currentColor`
   og følger derfor pillens farve i begge temaer, uden en eneste ekstra node.
   ⛔ Ingen emoji — det er en SVG-streg, som standarden kræver. */
.fstat { 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; }
.fstat::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; }
/* flueben */
.fstat.ja::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"); }
/* aaben cirkel — »endnu ikke«, ikke »fejl« */
.fstat.nej::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'%3E%3Ccircle cx='12' cy='12' r='8'/%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'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"); }
/* udraabstegn — kilderne er uenige, og det kræver et menneske */
.fstat.uafk::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"); }
/* ⚠ »Ikke faktureret« er den NORMALE tilstand for en ordre der ikke er
   faktureret endnu — ikke en advarsel. Den faar derfor fladens egen tekstfarve
   (fuld kontrast), ikke en advarselsfarve der ville raabe 1.400 gange. */
.fstat.nej { color: var(--txt); }
.fstat.ja { color: #1A7A35; }      /* 4,8:1 paa lys flade [UI-UX-STANDARD § 3] */
.fstat.uafk { color: var(--warn); }
/* ⭐ FORFALDEN [Christian 08-09-2026 — Betalt-kolonnen]: uret er loebet ud.
   Ikonet er en urskive (SVG-maske som de andre — ingen emoji), og farven er
   husets --neg-tekst, der allerede baerer sin egen moerk-tema-udgave nederst
   i denne fil. Teksten »Forfalden« er foerste lag; falder farven bort, kan
   tilstanden stadig laeses [UI-UX-STANDARD § 10]. */
.fstat.forf::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%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 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='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E"); }
.fstat.forf { color: var(--neg-tekst); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fstat.ja { color: #30D158; }
}
:root[data-theme="dark"] .fstat.ja { color: #30D158; }

/* indtægtsspecifikationen på ordrekortet */
.detomsrul { overflow-x: auto; }
.detoms { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.detoms th { text-align: left; font-weight: 600; color: var(--txt-3);
  padding: 3px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.detoms td { padding: 3px 8px; vertical-align: top; overflow-wrap: anywhere; }
.detoms td.tal { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
/* ⚠ `.detoms th` sætter venstre; uden en EGEN regel på `th.tal` stod
   beløbsoverskrifterne til venstre over højrestillede tal — set på
   skærmbilledet 30-08-2026, ikke i koden [UI-UX-STANDARD § 14]. */
.detoms th.tal { text-align: right; }
.detoms tbody tr:nth-child(even) td { background: var(--chrome); }
.detoms tfoot td { border-top: 1px solid var(--line); font-weight: 700; }

/* ── kreditnotaen i specifikationen [Christian 30-08] ─────────────────────
   ⛔ Farven er ALDRIG den eneste bærer (UI-UX-STANDARD § 10): nummeret står
   i sin egen kolonne, pillen siger ordet, og beløbet bærer sit minus. Den
   røde tekst er tredje lag — falder den bort, kan linjen stadig læses.
   ⚠ `--neg` er en FLADE-farve og måler under 4,5:1 som tekst; derfor et eget
   `--neg-tekst` pr. tema, samme mønster som `afgiftskonti.css`. */
:root { --neg-tekst: #B3261E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --neg-tekst: #FF6B60; }
}
:root[data-theme="dark"] { --neg-tekst: #FF6B60; }
.detoms td.tal.minus { color: var(--neg-tekst); }
.detoms .detomsfak { white-space: nowrap; font-variant-numeric: tabular-nums; }
.detoms .omskilde.kn { color: var(--neg-tekst); border-color: currentColor;
  margin-left: 4px; }

/* ── KLIPSEN [Christian 03-09-2026] ────────────────────────────────────────
   *»I TMS salgsordre i Finance mangler vi »klipsen« fra debitor modulet, saa vi
   kan se vedhaeftningerne paa de enkelte orde.«*

   ⛔ **Symbolet er en SVG-streg, aldrig en emoji** [UI-UX-STANDARD § 2]. Og det
      staar ALDRIG alene som betydningsbaerer: antallet skrives ved siden af naar
      det er over ét, `title` siger tallet i ord, og `aria-label` giver hele
      saetningen [§ 10].

   ⚠ Klipsen laaner `.ikon` fra grundlaget (samme knapform som oejet i samme
     raekke) — kun de tre ting der er FORSKELLIGE, staar her. En egen kopi af
     hele knapformen ville drive fra oejets foerste gang grundlaget rettes. */
/* ⛔ **`.g td button.klipsknap` og ikke `.klipsknap`. Specificitet, ikke
      raekkefoelge.** Grundlaget siger `.g td .ikon { display:inline-grid;
      width:22px; height:22px }` — (0,2,1) mod klassens (0,1,0). MAALT paa
      skaermen 03-09-2026 FOER rettelsen:

          getComputedStyle('.klipsknap')  ->  inline-grid, 22px, 22px
          svg oeverst 394 px  ·  antallet oeverst 412 px

      altsaa tallet trykket ned UNDER klipsen og klippet af raekkens 31 px.
      Symbolet stod alene, og oplysningen var vaek — uden en fejl, uden en
      linje i konsollen [UI-UX-STANDARD § 14].

   ⚠ `ui/design/*` er hash-laast af ADR-0005 og rettes ALDRIG. Naar grundlaget
     ikke kan aendres, skal fladen vinde paa specificitet — og saa skal den
     skrives ud, ellers ser den naeste en overspecificeret selector og
     »rydder op« i den. */
.g td button.klipsknap {
  display: inline-flex; align-items: center; gap: 3px;
  width: auto; min-width: 22px; height: 22px; padding: 0 5px;
}
.klipsknap:hover { color: var(--acc); }
/* ⚠ `:focus-visible`, ikke `:focus` — en musebruger skal ikke have ring, en
   tastaturbruger skal [UI-UX-STANDARD § 10]. */
.klipsknap:focus-visible { outline: 2px solid var(--acc); border-radius: 6px; }

/* Antallet. ⚠ Tal under hinanden i en smal kolonne skal have samme bredde,
   ellers vandrer de fra raekke til raekke. */
.klipsantal { font-size: 10.5px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--txt-2); }
.klipsknap:hover .klipsantal { color: var(--acc); }

/* ⛔ **Den TOMME celle er ogsaa et svar** — 1.666 af 12.175 ordrer har intet i
      arkivet. Den fylder samme plads som knappen, saa kolonnen ikke hopper, og
      baerer sit eget `title`/`aria-label`: »ingenting« skal kunne LAESES, ikke
      kun ses som et hul. */
.klipstom { display: inline-block; width: 20px; height: 20px; }

/* Klipsen i ordrekortets topbaand — en `.detbadge` der ogsaa er en knap. */
.klipsbadge { display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; font: inherit; }
.klipsbadge .ic { width: 14px; height: 14px; }
.klipsbadge:hover { border-color: var(--acc); color: var(--acc); }
.klipsbadge:focus-visible { outline: 2px solid var(--acc); }

/* ── Letter of Indemnity [Christian 09-09-2026] ──────────────────────────── */
/* Knappen i ordrekortet: samme form som klipsbadgen, men uden ikon — brevet er
   en HANDLING, ikke en optælling, og den skal kunne kendes fra badges der
   tæller noget. */
.detbadge.loibadge { cursor: pointer; border-color: var(--line, #c9c9ce); }
.detbadge.loibadge:hover { background: var(--flade-2, #f1f1f4); }

/* Dialogens felter: to spalter, så brevet kan overskues uden at rulle. */
.loigitter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.loirk { display: flex; flex-direction: column; gap: 3px; font-size: 12px;
         color: var(--txt-3, #6b6b70); }
.loirk input { padding: 6px 9px; border: 1px solid var(--line, #c9c9ce);
               border-radius: 7px; font-size: 13px; color: var(--txt, #1d1d1f);
               background: #fff; }
.loirk input[readonly] { background: var(--flade-2, #f1f1f4); color: var(--txt-3, #6b6b70); }
/* ⚠ Et felt ordren IKKE kunne udfylde, markeres — ellers ligner en tom kasse
   et felt der er tomt fordi der ikke er noget at skrive. */
.loirk.loimangler input { border-color: #b04a00; }
.loirk.loimangler b { color: #b04a00; }
.loitekst { margin: 12px 0 4px; font-size: 12px; }
.loitekst summary { cursor: pointer; color: var(--txt-3, #6b6b70); }
.loitekst p { margin: 6px 0; line-height: 1.45; }

@media (max-width: 640px) { .loigitter { grid-template-columns: 1fr; } }

/* ── CMR-fragtbrevet [Christian 09-09-2026] ──────────────────────────────── */
.detbadge.cmrbadge { cursor: pointer; border-color: var(--line, #c9c9ce); }
.detbadge.cmrbadge:hover { background: var(--flade-2, #f1f1f4); }

.cmrgitter { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 12px; }
.cmrrk { display: flex; flex-direction: column; gap: 3px; font-size: 11px;
         color: var(--txt-3, #6b6b70); }
.cmrrk.cmrbred { grid-column: span 2; }
.cmrrk input { padding: 5px 8px; border: 1px solid var(--line, #c9c9ce);
               border-radius: 6px; font-size: 12px; color: var(--txt, #1d1d1f);
               background: #fff; width: 100%; box-sizing: border-box; }
/* ⚠ Et felt ASPECT4 ikke fører, markeres — det er ikke en fejl, det er en
   arbejdsopgave, og loven kræver feltet [CMR-loven § 7 litra f/h]. */
.cmrrk.cmrmangler input { border-color: #b04a00; background: #fff8f4; }
.cmrrk.cmrmangler span { color: #b04a00; font-weight: 600; }

.cmrh4 { font-size: 12px; margin: 14px 0 6px; color: var(--txt-2, #3a3a3d); }
.cmrgodsrk { display: grid; grid-template-columns: repeat(7, 1fr) auto;
             gap: 6px 8px; align-items: end; padding: 6px 0;
             border-top: 1px solid var(--line-2, #e6e6ea); }
.cmrfjern { border: 1px solid var(--line, #c9c9ce); background: #fff;
            border-radius: 6px; cursor: pointer; padding: 4px 9px; font-size: 13px; }
.cmrtidligere { border: 1px solid var(--line-2, #e6e6ea); border-radius: 8px;
                padding: 8px 10px; margin-bottom: 10px; font-size: 12px; }
.cmrtidl { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.cmrtidl span { color: var(--txt-3, #6b6b70); }
.cmrannul { color: #b04a00; font-weight: 600; }
.cmrspaerret { color: #b04a00; font-size: 12px; margin: 0 0 10px;
               background: #fff8f4; border: 1px solid #f0d6c6;
               border-radius: 7px; padding: 8px 10px; }

@media (max-width: 900px) {
  .cmrgitter { grid-template-columns: 1fr 1fr; }
  .cmrgodsrk { grid-template-columns: repeat(3, 1fr) auto; }
}

/* ── Markering + dokumentknapper [Christian 09-09-2026] ──────────────────── */
/* Markerede rækker: motoren sætter .sel — fladen giver den en synlig farve, så
   man kan se hvad man har valgt uden at lede efter fluebenet. */
#gitter tr.sel td { background: var(--valg, #eaf3fb); }
#gitter td.gut { text-align: center; padding: 0 2px; }
#gitter td.gut input.cb { cursor: pointer; }

/* ⛔ Dokumentknapperne SLUKKES aldrig — de fremhæves når de kan bruges.
   En slukket knap uden forklaring lærer brugeren at funktionen ikke virker;
   en knap der svarer, lærer hvad der mangler. */
.rbtn.rbtn-klar { border-color: var(--akt, #0a6ed1); }
.rbtn.rbtn-klar span { font-weight: 600; }