/* ═══════════════════════════════════════════════════════════════════════════
   BILAGSVINDUET — listen over hele biblioteket for én postering
   ═══════════════════════════════════════════════════════════════════════════

   ⛔ **`ui/design/*` er HASH-LÅST af ADR-0005 og røres aldrig.** Mangler der noget,
   lægges det HER, i fladelaget. Filen følger `_`-mønsteret fra `_modal.css` og
   `_kolonner.css`: et delt stilark flere flader kan indlæse.

   ⚠ **Ruden selv styles af `_modal.css`** (`.modal-bg`, `.modal`, `.modalkrop`,
     `.modalknapper`). Her står KUN listen indeni. To stilark der begge definerer
     ruden, ville drive fra hinanden første gang det ene blev rettet.

   ⭐ Farverne er husets tokens (`--flade`, `--kant`, `--tekst`, `--daempet`), så
   vinduet følger lyst/mørkt tema af sig selv. Et hårdkodet `#fff` ville stå hvidt
   i mørkt tema — den fejl er set i huset før. */

/* Listen kan blive lang: ét bilagsnummer er målt med 94 arkiverede dokumenter
   (samleafregning = faktura + specifikation + genudskrifter). Den ruller for sig
   selv, så knapperne bliver stående. */
.modal.bibliotek .modalkrop { max-height: 60vh; overflow-y: auto; }
.modal.bibliotek { min-width: min(560px, 92vw); }

.bibl-booking {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--daempet, #65656a);
}

.bibl-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ⚠ Rækken ER et `<label>` med en rigtig afkrydsning indeni — så virker
   mellemrumstasten og skærmlæseren uden at vi bygger noget selv. */
.bibl-rk {
  display: grid;
  /* afkrydsning · symbol · navn · størrelse · mærke · knap */
  grid-template-columns: auto auto 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--kant, #d8d8dc);
  border-radius: 8px;
  background: var(--flade, #fff);
  cursor: pointer;
  /* ⚠ 150-300 ms på mikro-interaktioner. Og KUN farver — en `transform` ville
     flytte rækken under musen og gøre listen urolig at læse. */
  transition: background-color .18s ease, border-color .18s ease;
}
.bibl-rk:hover { background: var(--hover, #f5f5f7); border-color: var(--kant2, #b8b8bd); }

/* ⛔ Synligt fokus. Uden det kan en tastaturbruger ikke se hvor han er, og
   listen bliver ubrugelig uden mus. */
.bibl-rk:focus-within {
  outline: 2px solid var(--fokus, #0071e3);
  outline-offset: 1px;
}

/* ⚠ Ikke-hentede dokumenter er DÆMPEDE, men **ikke skjulte**: at materialet
   findes i arkivet, er en kendsgerning brugeren har krav på at se [BFL § 12].
   ⛔ Og dæmpningen er ikke det ENESTE signal — teksten »ikke hentet endnu« står
      der også. Farve alene er ikke et signal for den der ikke skelner den. */
.bibl-rk.uhentet {
  cursor: default;
  background: transparent;
  border-style: dashed;
}
.bibl-rk.uhentet:hover { background: transparent; border-color: var(--kant, #d8d8dc); }

.bibl-navn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Filnavne er lange og ligner hinanden i begyndelsen
   (`20260630_112903395_Invoice_0001004388.PDF`). De brydes derfor frem for at
   blive klippet af — det er ENDEN der adskiller dem. */
.bibl-fil {
  font-size: 14px;
  color: var(--tekst, #1d1d1f);
  word-break: break-all;
  line-height: 1.4;
}
.bibl-under { font-size: 12px; color: var(--daempet, #65656a); }

.bibl-stoerrelse {
  font-size: 13px;
  color: var(--daempet, #65656a);
  /* Tal under hinanden skal kunne sammenlignes på bredden. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bibl-mangler {
  font-size: 12px;
  color: var(--daempet, #65656a);
  white-space: nowrap;
  font-style: italic;
}

/* ⛔ 44×44 px er mindstemålet for et trykfelt. Knappen er lille i listen, så
   højden sikres her frem for at stole på `.smalbtn`s egen. */
.bibl-rk .bibl-aabn { min-height: 32px; padding: 6px 14px; white-space: nowrap; }

.bibl-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--daempet, #65656a);
  background: var(--flade2, #f5f5f7);
  border-radius: 8px;
}

/* Smalle skærme: tallene og knappen får deres egen linje frem for at klemme
   filnavnet ned i én tegnbred søjle. */
@media (max-width: 520px) {
  .bibl-rk { grid-template-columns: auto 1fr; }
  .bibl-stoerrelse, .bibl-mangler, .bibl-rk .bibl-aabn { grid-column: 2; justify-self: start; }
}

/* ⚠ Respektér `prefers-reduced-motion`. Overgangene er små, men den der har slået
   bevægelse fra, har gjort det med vilje. */
@media (prefers-reduced-motion: reduce) {
  .bibl-rk { transition: none; }
}


/* ── Artsymbolet ─────────────────────────────────────────────────────────────
   ⛔ Christian 26-08-2026: *»vi vil med fordel gerne se hvilke typer det er ud
      fra symboler«.* SVG og ikke emoji — emoji tegnes forskelligt på hver
      platform og kan ikke farves med husets tokens.
   ⚠ Symbolet er aldrig det ENESTE signal: dokumenttypen står i ord under
     filnavnet, og `<title>` giver arten som værktøjstip. */
.bibl-symbol {
  flex: none;
  color: var(--daempet, #65656a);
  /* Ikonet må ikke vokse med rækkens indhold — 20 px, fast. */
  width: 20px;
  height: 20px;
}
/* ⚠ På den aktive række træder symbolet frem sammen med teksten, så det ikke
   ser slukket ud i en række man er ved at vælge. */
.bibl-rk:hover .bibl-symbol,
.bibl-rk:focus-within .bibl-symbol { color: var(--tekst, #1d1d1f); }

/* Smalle skærme: symbolet bliver hos afkrydsningen, resten falder ned. */
@media (max-width: 520px) {
  .bibl-rk { grid-template-columns: auto auto 1fr; }
  .bibl-stoerrelse, .bibl-mangler, .bibl-rk .bibl-aabn { grid-column: 3; }
}


/* ── RAEKKEN UDEN AFKRYDSNING ────────────────────────────────────────────────
   ⭐ Tilføjet 03-09-2026 med klipsen paa TMS-salgsordren.

   `.bibl-rk`s gitter ovenfor har SEKS spor og regner med en afkrydsning som
   foerste barn (debitorens vindue kan markere flere og hente dem samlet).
   Klipsen paa en salgsordre har ikke den handling — bundtruten kender
   fakturanumre, ikke bookinger — og en afkrydsning der ikke foerer til noget,
   er en knap der lover noget der ikke findes.

   ⛔ **Grundreglen roeres IKKE.** MAALT paa skaermen 03-09-2026: fem boern i et
      seks-spors gitter skubbede navnet i et `auto`-spor og stoerrelsen i
      `1fr` — filnavnet, stoerrelsen og »Aabn« brød til hver sin linje, og
      vinduet blev dobbelt saa hoejt. En aendring af grundreglen ville have
      rettet DET og braekket debitorens vindue i samme greb [REGEL 5 pkt. 2:
      en kur der gives videre uden sit forbehold, er en fejl ganget med antallet
      af steder]. Derfor en modifikator ved siden af. */
.bibl-rk.uden-valg {
  /* symbol · navn · stoerrelse · maerke · knap */
  grid-template-columns: auto 1fr auto auto auto;
}
@media (max-width: 520px) {
  .bibl-rk.uden-valg { grid-template-columns: auto 1fr; }
  .bibl-rk.uden-valg .bibl-stoerrelse,
  .bibl-rk.uden-valg .bibl-mangler,
  .bibl-rk.uden-valg .bibl-aabn { grid-column: 2; justify-self: start; }
}


/* ── ⛔ NÅR BEGGE STILARK ER INDLÆST: `_modal.css` VINDER OVER RÆKKEN ────────
   MÅLT PÅ SKÆRMEN 03-09-2026, ikke gættet:

       getComputedStyle(document.querySelector('.bibl-rk')).display  ->  "block"

   Årsagen er specificitet, ikke rækkefølge. `_modal.css:161` siger
   `.modal label { display: block; font-size: 12px; color: var(--txt-2); … }`
   for at give feltetiketter luft — (0,1,1). Rækken her er `.bibl-rk` — (0,1,0).
   Rækken ER et `<label>`, og den taber, uanset hvilken fil der indlæses sidst.
   Følgen: gitteret slås fra, og filnavn, størrelse og »Åbn« brækker til hver
   sin linje. Intet kaster, intet logger — netop § 14's fejlform.

   ⚠ **Det var ikke synligt før i dag, og det er værd at vide hvorfor.**
   Vinduets første flade (debitor/kreditor) indlæser IKKE `_modal.css` — den
   blev bevidst rullet tilbage 25-08-2026 da de ni andre flader fik filen.
   Fejlen har altså ligget og ventet på den første flade der indlæste begge,
   og det blev TMS-salgsordren. Den næste ville have gået i den samme.

   ⛔ **Grundreglerne ovenfor røres ikke** — de gælder for begge vinduer, og en
      rettelse i dem ville skulle prøves mod debitorens udgave også [REGEL 5
      pkt. 2]. Her genskrives kun det `_modal.css` tager, og kun inde i
      biblioteket. */
.modal .bibl-rk { display: grid; margin: 0; font-size: inherit; color: inherit; }