/* ==========================================================================
   NERVE Finance — fladelag for REGNSKABSFLADEN (saldobalancen).
   Reglerne: ../../docs/UI-UX-STANDARD.md · grundlaget: ../design/nerve-finance-apple.css
   Afvigelsen (fladen KØRER en rapport): ../../docs/adr/0010-…

   ⛔ ../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.

   § 1-3 er ORDRET de samme rettelser som `debitor-kreditor.css` og
   `nummerserier.css` bærer, med de samme MÅLTE tal. De er gentaget og ikke
   importeret, af den grund UI-UX-STANDARD § 1 giver: et fladelag står ved siden
   af sin flade, og skal de en dag deles, hører de i GRUNDLAGET og i en ny
   hash-linje i ADR-0005 — ikke i en fjerde fil ingen af fladerne ejer.

   § 4-9 er regnskabsfladens egne: kørselsvælgeren, balancemærket,
   tankestregen for »ikke opgjort«, drill-down-ruden og kørselsruden.
   ========================================================================== */

/* ── 1. Fokus ───────────────────────────────────────────────────────────────
   `:focus-visible`, ikke `:focus`: en musebruger der klikker på en række, skal
   ikke have en ring — en tastaturbruger skal. Ringen ligger UDEN PÅ elementet
   (`outline-offset`), så den ikke ædes af sticky-hovedet eller et rundet hjørne. */
: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;
}
/* Gitterets rulleflade ER tastaturets indgang til rækkerne (piletaster). Den skal
   derfor kunne ses når den har fokus — grundlaget slår dens outline fra. */
.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); }

/* Spring-link: FØRSTE tabulatorstop, usynligt indtil det får 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å
   (ikke mod ren hvid, hvor et gennemsigtigt lag lyver om resultatet).

   | 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-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, mørkt   | #0A84FF   | 3,6:1 | #0060C9          | 6,0:1 |

   Accenten beholdes uændret som FLADE (knapbaggrund, markeret række) — dér er
   den ikke tekst, og hvid tekst oven på den måler 4,7:1 i lyst tema. */
: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,
.kpirow .kpi.baand.tot .val, .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 ───────────────────────────────────────────────────────────
   Grundlaget har ingen blok. Den står her, 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. Enhedsvalget ────────────────────────────────────────────────────────
   Synligt, ikke gemt i en menu [D14/§ 6]. */
.top .firma { min-width: 0; }
.enhedsvalg {
  max-width: 340px; 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; }

/* ── 5. Bånd ────────────────────────────────────────────────────────────────
   »Ingen advarsler uden en handling« (§ 9): hvert bånd siger 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: 8px;
  padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
}
.baand svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.baand b { font-weight: 600; }
.baand code { font-size: 11.5px; }
.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 .knaprad { display: flex; gap: 8px; margin-top: 7px; }

/* ── 5b. DOKUMENTBÅNDET — forskellen mellem nutid og dokument ───────────────
   ⛔ Den ene forveksling der ikke må kunne ske: at et dokument fra i forgårs
   står og ligner nutiden. Båndet er derfor ikke bare »endnu en info-farve« —
   det har sin egen, en synlig venstrekant og en tydeligere ramme end de øvrige.

   Farven er `--warn`-familien og IKKE rød: et dokument er ikke en fejl. Og den
   står aldrig alene (§ 10) — båndet bærer ikon, ordlyden »Dokument fra …« og
   en knap der fører tilbage til nutiden. Læser man kun teksten, mangler man
   ingenting. */
.baand.dokument {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  border-left-width: 4px;
  padding: 11px 13px;
}
.baand.dokument b { font-weight: 700; }
/* Knappen i båndet arver ikke båndets farve: en knap der ser ud som brødtekst,
   ser ikke ud som en knap. */
.baand.dokument .knaprad .smalbtn { background: var(--chrome); color: var(--acc-tekst); }

/* Artsmærket i statuslinjen. Ikon + tekst, aldrig farve alene (§ 10) — et
   skærmbillede skal kunne læses uden fladen omkring det. */
.artmrk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
}
.artmrk svg { width: 14px; height: 14px; flex: none; }
.artmrk.levende { color: var(--acc-tekst); }
.artmrk.dokument { color: var(--warn); }

/* Sidens overskrift bærer mærkningen når man står på et dokument. `data-art`
   sættes ÉT sted (`tegnAlt`), så en ny visning ikke kan glemme den. */
:root[data-art="frossen"] .viewhdr h1::after {
  content: "DOKUMENT";
  margin-left: 9px; padding: 2px 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; vertical-align: 3px;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
}

/* ── 6. Tallene: tankestreg, nul og balance ─────────────────────────────────
   UI-UX-STANDARD § 4: `0,00` dæmpet = OPGJORT TIL NUL. `–` = IKKE OPGJORT, der
   findes ikke data. Forskellen er ikke kosmetisk, og den bærer hele denne side:
   kolonnen »Kladde« står som tankestreg når kørslen ikke medtog kladdeposter,
   og båndet over gitteret siger hvorfor og hvad man gør ved det. */
.uopgjort-celle { color: var(--txt-3); }

/* Balancemærket. Farven står ALDRIG alene (§ 10): mærket er ikon + tekst + tal. */
.balancemrk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.balancemrk svg { width: 14px; height: 14px; flex: none; }

.g td .mrk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
}
.g td .mrk svg { width: 14px; height: 14px; }

/* Filterenheden skal stå hvor filtrene bruges, ikke i en manual: motoren
   filtrerer på den værdi kolonnen leverer, og beløb leveres i ØRE. */
.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: 1180px) { .beloebshint { display: none; } }

/* KPI-kæden: Balancekonti + Driftskonti = 0,00. Kæden regnes af de VISTE
   rækker, så den kan afstemmes med sum-linjen med øjet. */
.kpirow .kpi .hvorfor {
  margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--txt-3);
  max-width: 36ch;
}
.kpirow .kpi .val.sm { font-size: 13px; font-weight: 600; }
.kpirow .kpi.baand.nul .val { color: #1A7A35; }
.kpirow .kpi.baand.nul { border-left-color: #1A7A35; }
.kpirow .kpi.baand.skaev .val { color: #B3241A; }
.kpirow .kpi.baand.skaev { border-left-color: #B3241A; }
:root[data-theme="dark"] .kpirow .kpi.baand.nul .val,
:root:not([data-theme="light"]) .kpirow .kpi.baand.nul .val { color: var(--b-ok-fg, #1A7A35); }
:root[data-theme="dark"] .kpirow .kpi.baand.skaev .val,
:root:not([data-theme="light"]) .kpirow .kpi.baand.skaev .val { color: var(--b-forf-fg, #B3241A); }

/* ── 7. Sidebjælken: kørslerne som liste ────────────────────────────────────
   En kørsel er et DOKUMENT, ikke en visningstilstand (ADR-0010). Derfor står de
   på en liste man vælger fra — med nummer, interval og tidspunkt, så to kørsler
   af samme periode kan skelnes fra hinanden. */
.tree .th { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tree .it.koersel {
  height: auto; min-height: 30px; padding: 6px 9px;
  align-items: flex-start; text-align: left;
}
.tree .it.koersel .txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tree .it.koersel .nr { font-size: 12.5px; font-weight: 600; }
.tree .it.koersel .naar {
  font-size: 11px; color: var(--txt-3); font-variant-numeric: tabular-nums;
}
.tree .it.koersel.kladde .nr::after {
  content: " · kladde"; font-weight: 500; color: var(--warn);
}

/* ⚠ Specificitet, ikke smag. Grundlagets `.tree .it` er (0,2,0); et bart
   `.levende` ville være (0,1,0) og tabe TAVST — ingen fejl, ingen advarsel,
   intet i konsollen. Det er præcis fejlen fra 20-08-2026 i UI-UX-STANDARD § 14,
   og den kan kun findes ved at kigge. Derfor `.tree .it.koersel.levende`. */
.tree .it.koersel.levende .nr::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; background: var(--acc-tekst);
}
.tree .it.koersel.dokument .nr::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  margin-right: 7px; vertical-align: 1px; background: var(--warn);
}
.tree .tomliste { padding: 14px 12px; font-size: 12px; color: var(--txt-3); line-height: 1.5; }
.tree .tomliste b { color: var(--txt-2); }

/* ── 8. Gitteret ────────────────────────────────────────────────────────────
   Gitteret er INDHOLDET og må aldrig klemmes ned til én række når bånd og
   KPI-kæde står samtidig på en lav skærm. Går det ikke op, ruller
   arbejdsområdet LODRET; vandret rulning hører kun til inde i gitteret. */
#gitter, #gitterPost { min-height: 220px; }
.view { overflow-y: auto; }
.g td.tom { line-height: 1.5; white-space: normal; padding: 18px 16px; }

/* Handlingsknappen i cellen — ikon + tilgængeligt navn, aldrig ikon alene. */
.g td.act .ikon { color: var(--txt-3); }
.g td.act .ikon:hover { color: var(--acc-tekst); }
.g tbody tr.cur td.act .ikon { color: var(--acc-tekst); }

/* ── 9. Ruder: kørslen og sporet ────────────────────────────────────────────
   Kørselsruden siger hvad kørslen KOSTER, før den køres. Prisen er ikke en
   teknisk detalje: en kørsel kan aldrig slettes igen (ADR-0010). */
.koerform { display: grid; grid-template-columns: max-content 1fr; gap: 9px 12px; align-items: center; }
.koerform label { font-size: 12.5px; color: var(--txt-2); white-space: nowrap; }
.koerform input[type="date"], .koerform input[type="text"], .koerform select {
  width: 100%; height: 28px; padding: 0 9px;
  border: none; border-radius: 8px; background: var(--graa-flade);
  color: var(--txt); font-size: 13px; font-variant-numeric: tabular-nums;
}
.koerform .afkryds { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; }
.koerform .afkryds input { margin-top: 2px; }
.koerform .afkryds span { font-size: 12.5px; color: var(--txt-2); line-height: 1.45; }
.koerform .hint {
  grid-column: 1 / -1; margin: 0; font-size: 11.5px; color: var(--txt-3); line-height: 1.5;
}
.koerform .hint.fejl { color: #B3241A; }
:root[data-theme="dark"] .koerform .hint.fejl,
:root:not([data-theme="light"]) .koerform .hint.fejl { color: var(--b-forf-fg, #B3241A); }

/* Sporruden er en LÆSNING: felt og værdi. Feltnavnet er en `th[scope=row]`, så
   en skærmlæser kan knytte værdien til sit navn gennem tabellens egen struktur. */
.sporrude { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.sporrude .afsnit h4 {
  margin: 0 0 5px; font-size: 12px; font-weight: 600; color: var(--txt-2);
  text-transform: none; letter-spacing: 0;
}
.sporrude table.mini { width: 100%; }
.sporrude th[scope="row"] {
  width: 180px; font-weight: 500; color: var(--txt-2); white-space: nowrap;
}
.sporrude td { font-variant-numeric: tabular-nums; }
/* Tabellen kan være bredere end ruden. Den ruller i SIN EGEN beholder; siden
   selv ruller aldrig vandret. */
.sporrude .rul { overflow-x: auto; max-width: 100%; }
.sporrude .forklaring {
  font-size: 12px; line-height: 1.5; color: var(--txt-2);
  padding: 9px 12px; border-radius: 10px; background: var(--graa-flade);
}

/* ── 10. Berøringsmål ───────────────────────────────────────────────────────
   Gitterets 31 px rækker er bevidst undtaget (tætheden er hele formålet, og
   gitteret betjenes med mus og tastatur). De frie knapper skal kunne rammes. */
@media (pointer: coarse) {
  .iconbtn, .rail button, .rail .raillink, .rbtn, .merebtn, .tab, .smalbtn { min-height: 44px; }
}

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

/* ── 12. Regnskabsudskriftens rude ──────────────────────────────────────────
   Ruden hvor Christian vælger rapporttype og perioder. Selve UDSKRIFTEN har
   sit eget, selvbærende stilark inde i den dannede HTML — den skal kunne
   gemmes, mailes og åbnes om ti år uden at hente noget. Dette er kun ruden.

   ⚠ `[hidden]` sættes fra `rapportRude()`s `skift()`, og et bart `[hidden]`
      taber mod `.koerform label { ... }`s egen `display`. Derfor `!important`
      IKKE — men en selektor der er MERE specifik end den den skal slå.
      (Læren fra UI-UX-STANDARD § 14: en CSS-regel der taber på specificitet,
      er tavs — der er ingen fejl, ingen advarsel, intet i konsollen.) */
.koerform.rapportform label[hidden],
.koerform.rapportform span[hidden],
.koerform.rapportform select[hidden] { display: none; }

/* Måned og år som to felter der hører sammen — ét visuelt felt, to selects. */
.maanedsvalg { display: flex; gap: 6px; }
.maanedsvalg select { flex: 1; min-width: 0; }
.maanedsvalg select:last-child { flex: 0 0 5.5em; }