/* ==========================================================================
   NERVE Finance — fladelag for debitor/kreditor.
   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.

   Hvad laget indeholder, og hvorfor:
   1. FOKUSRINGE. Grundlaget sætter kun `outline` på felter, ikke på knapper.
      Uden ringe kan fladen ikke betjenes med tastatur, og det er et krav.
   2. KONTRAST. Fem farveroller i grundlaget lander under 4,5:1 mod deres egen
      baggrund. Hver rettelse står med sit MÅLTE tal, så den kan efterprøves i
      stedet for at blive troet på.
   3. `prefers-reduced-motion`. Grundlaget har ingen blok.
   4. DEMO-MÆRKNING. Demodata skal kunne ses på afstand.
   ========================================================================== */

/* ── 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,
.tekstfelt: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; }

/* Grundlaget giver felterne en ring i `--acc`. Den måler kun 2,8:1 mod feltets
   egen grå flade i mørkt tema, og en fokusring skal kunne ses (3:1). Farven —
   og kun farven — rettes; ringens placering står som grundlaget satte den. */
.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-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 |

   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. I mørkt
   tema måler hvid på #0A84FF kun 3,6:1, og derfor har `.btn` sin egen flade. */
: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); }

/* accent brugt som TEKST eller streg-ikon */
.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 ───────────────────────────────────────────────────────────
   Fladen animerer i forvejen 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. Demo-mærkning ───────────────────────────────────────────────────────
   Demodata og virkelighed må aldrig kunne forveksles. Mærket sidder FIRE steder:
   båndet her, pillen i værktøjslinjen, statuslinjen og CSV-udtrækkets førstelinje. */
.demopille {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--warn-bg); color: var(--warn);
}
.demopille svg { width: 13px; height: 13px; }

/* ASPECT4-kilden faar sin EGEN farve. Delte den demodataens gule, ville de to
   vidt forskellige advarsler — "opdigtet" og "ægte, men et andet systems" —
   ligne hinanden, og mærket ville miste sin betydning. */
.forsystempille {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,113,227,.16); color: var(--info);
}
.forsystempille svg { width: 13px; height: 13px; }
.kildebaand.forsystem { background: rgba(0,113,227,.16); color: var(--info); }
.kildebaand {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px; border-radius: 11px; font-size: 12.5px;
  background: var(--warn-bg); color: var(--warn);
  box-shadow: inset 0 0 0 1px currentColor;
}
.kildebaand svg { width: 16px; height: 16px; flex: none; }
.kildebaand b { font-weight: 600; }
/* Skråstriberne gør demotilstanden synlig i et hjørne af et skærmbillede, hvor
   teksten måske er beskåret væk. */
body.demo .work { box-shadow: inset 0 3px 0 0 var(--warn); }
body.forsystem .work { box-shadow: inset 0 3px 0 0 var(--info); }

/* ── 5. Enhedsvalget ────────────────────────────────────────────────────────
   Synligt, ikke gemt i en menu: en manglende enhedsafgrænsning er to selskabers
   regnskaber blandet sammen [D14], og så skal man kunne SE hvilket selskab man er i. */
.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; }

/* ── 6. Beløbshierarkiet ────────────────────────────────────────────────────
   Aldersfarven står ALDRIG alene: `i` er et lille felt ved siden af et tal,
   aldrig i stedet for det. Feltet har en hårfin kant, så den lyseste gule
   (#FFD60A) også kan ses mod hvidt. */
.agesv {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .3);
}
.kpirow .kpi .split i { box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .3); }
.kpirow .kpi .val.uopgjort { font-size: 13px; font-weight: 500; color: var(--txt-3); }
.kpirow .kpi .hvorfor {
  margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--txt-3);
  max-width: 34ch;
}
/* Tankestreg for "ikke opgjort". Den må ikke ligne 0,00 — nul er en opgørelse. */
.uopgjort-celle { 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: 1180px) { .beloebshint { display: none; } }

/* ── 7. Detaljepanelet ──────────────────────────────────────────────────────
   Tabellen kan være bredere end panelet. Den ruller i SIN EGEN beholder; siden
   selv ruller aldrig vandret. */
.detrul { overflow-x: auto; max-width: 100%; }
.detbund h2 .badge { font-weight: 600; }

/* Gitteret er indholdet og må aldrig klemmes ned til én række, når båndet, KPI-kæden
   og kontokortet 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 { min-height: 220px; }
.detbund { max-height: min(40vh, 340px); }
.view { overflow-y: auto; }

/* ── 8. 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 på en berøringsskærm. */
@media (pointer: coarse) {
  .iconbtn, .rail button, .rbtn, .merebtn, .tab, .smalbtn { min-height: 44px; }
  .rail button { height: 44px; }
}

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

/* ══════════════════════════════════════════════════════════════════════════
   10. FIRE VISNINGER — rammen omkring liste, åbne poster, kontokort og log
   --------------------------------------------------------------------------
   Kildebåndet og detaljepanelet er flyttet UD af den enkelte visning: de
   gælder alle fire. Båndet siger hvilke tal man ser på, og det svar må ikke
   skifte betydning fordi man klikkede på en fane. De to elementer er derfor
   søskende til visningerne inde i `.work`, og de skal have den polstring
   `.view` ellers gav dem.
   ══════════════════════════════════════════════════════════════════════════ */
.work > .kildebaand { margin: 12px 18px 0; flex: none; }
.work > .detbund {
  flex: none; margin: 11px 18px 12px;
  /* Målt, ikke valgt: 34vh gav 330 px på en 950 px skærm, og så var der kun
     plads til tre rækker i gitteret. Gitteret er indholdet — panelet er en
     læsning ved siden af. Bliver detaljerne længere end panelet, ruller de
     inde i panelet; siden selv ruller aldrig. */
  max-height: min(26vh, 250px); overflow: auto;
}
.detbundhdr { display: flex; align-items: center; gap: 9px; }
.detbundhdr h2 { flex: 1; }
/* Detaljepanelet er en LÆSNING: felt og værdi. Feltnavnet er en `th[scope=row]`,
   ikke en fed `td` — en skærmlæser skal kunne knytte værdien til sit navn, og
   det kan den kun via tabellens egen struktur.

   Ved mange felter står der TO tabeller ved siden af hinanden (se
   `detaljeTabel()` i JS'en). De ligger i en flex-række der ombryder, så en smal
   skærm får dem under hinanden i stedet for at presse dem sammen. */
#dettabel { display: flex; flex-wrap: wrap; gap: 6px 34px; align-items: flex-start; }
#dettabel table.mini { flex: 1 1 340px; width: auto; max-width: 520px; }
#dettabel th[scope="row"] {
  width: 170px; font-weight: 500; color: var(--txt-2); white-space: nowrap;
}
#dettabel td { font-variant-numeric: tabular-nums; }

/* De tre gitterværter skal alle have gulv, ikke kun listens. */
#gitter, #gitterLog, #postHost > .grid { min-height: 200px; }
/* De to postgitre ligger i samme vært og deler pladsen — kun ét er synligt. */
#postHost { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#postHost > .grid.skjult { display: none; }

/* Segmentkontrollen skal kunne ses have fokus; grundlaget giver den ingen ring. */
.seg button:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }

/* Markeringslinjen. `.udbar` findes i grundlaget; her står kun det den mangler. */
.udbar .net { margin-left: auto; }
.udbar svg { width: 15px; height: 15px; flex: none; color: var(--txt-3); }
.udbar .badge { margin-left: 7px; }

/* Fanebladet skal kunne nås og aktiveres med tastatur — det er en `div` med
   `role="tab"`, og uden ring ville en tastaturbruger ikke kunne se hvor han er. */
.tab:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Kontosøgningen i træet. */
.treesog {
  display: flex; align-items: center; gap: 6px; margin: 0 6px;
  padding: 0 8px; height: 28px; border-radius: 8px; background: var(--graa-flade);
}
.treesog svg { width: 14px; height: 14px; flex: none; color: var(--txt-3); }
.treesog input {
  flex: 1; min-width: 0; height: 26px; border: none; background: transparent;
  color: var(--txt); font-size: 12.5px;
}
#treeTraef .grp {
  display: flex; padding: 10px 8px 3px;
  font-size: 11px; font-weight: 600; color: var(--txt-3); text-transform: uppercase;
  letter-spacing: .04em;
}
#treeTraef .it { font-variant-numeric: tabular-nums; }

/* KPI-værdi der er en tekst (kontonavn) frem for et tal. */
.kpirow .kpi .val.sm { font-size: 12.5px; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   11. SPÆRREDE HANDLINGER — en knap der ikke kan bruges, siger hvorfor
   --------------------------------------------------------------------------
   Knappen er hverken `disabled` eller `aria-disabled`. Begge blev prøvet og
   forkastet: `disabled` falder ud af tabulatorrækkefølgen, og `aria-disabled`
   får browsere og betjeningsværktøjer til at nægte at aktivere elementet — så
   var det eneste der bar grunden en `title`, altså et musetip. En knap hvis
   forklaring kun kan nås med en mus, er ikke tilgængelig.

   Knappen er derfor almindelig og gør noget: den siger hvorfor. At den er
   spærret, står tre steder der ikke er farve — hængelåsen, det tilgængelige
   navn (`aria-label` slutter med grunden), og svaret i statuslinjen. Teksten
   holder --txt-2 (4,6:1 lyst, 5,9:1 mørkt): den skal stadig kunne læses.
   ══════════════════════════════════════════════════════════════════════════ */
.rbtn.spaerret { color: var(--txt-2); }
.rbtn.spaerret svg { color: var(--txt-3); }
.rbtn.spaerret .laas { width: 12px; height: 12px; margin-left: 1px; opacity: .85; }
.rbtn.spaerret:hover { background: var(--graa-flade); }
/* Samme i kommandopaletten: den skjuler ikke det der ikke kan lade sig gøre. */
.pal .r.spaerret { color: var(--txt-2); }
.pal .r.spaerret small { font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════════
   12. TOM TILSTAND — teksten kan blive lang, og den skal kunne læses
   ══════════════════════════════════════════════════════════════════════════ */
.g td.tom { line-height: 1.5; white-space: normal; padding: 18px 16px; }

/* Træets spærrede punkter følger ribbon'ens regel (afsnit 11): ikke `disabled`,
   grunden i det tilgængelige navn, hængelås som ikke-farvet bærer. */
.tree .it.spaerret { color: var(--txt-2); }
.tree .it.spaerret svg { color: var(--txt-3); }