/* ==========================================================================
   Nerve Accounter OCR — fladelaget oven på NERVE Finance' grundlag.
   Grundlaget er design/nerve-finance-apple.css, design/programskift.css og design/_modal.css: ordrette kopier af
   NERVE Finance' filer (KONTROLSUMMER). De rettes aldrig herfra; alt NAO har brug for, står i denne fil og tilføjer kun.
   Christian 05-10: »Systemet skal generelt ligne SVES Finance mere i layout, menuer, farver osv.« Reglerne er derfor
   NERVE Finance' egne (docs/UI-UX-STANDARD.md): Apple-minimalisme, systemskrift, hårfine linjer, kort med bløde hjørner,
   farve kun hvor den betyder noget. CSP'en tillader ingen inline-stil, så alt står her.
   ========================================================================== */

/* ---------- 1. Farver: grundlagets roller med NERVE Finance' kontrastrettelser (UI-UX-STANDARD § 3) ----------
   Målt mod den baggrund farven faktisk står på. Accenten som FLADE beholdes; som TEKST bruges den mørkere/lysere udgave.
   --warn-tekst er NAO's egen: grundlagets #9A5B00 måler 4,4:1 på det orange bånd over den grå vinduesbund, #8A5100 5,2:1. */
:root {
  --fokus: #0059B3; --acc-tekst: #0059B3; --btn-flade: #0071E3; --txt-3: #65656A;
  --b-ok-fg: #1A7A35; --b-forf-fg: #B3241A; --b-fak-fg: #55555A; --warn-tekst: #8A5100;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fokus: #6FB6FF; --acc-tekst: #6FB6FF; --btn-flade: #0060C9; --txt-3: #A0A0A6;
  --b-ok-fg: #5BE07E; --b-forf-fg: #FF9A93; --b-fak-fg: #C9C9CF; --warn-tekst: #FF9F0A;
}}
:root[data-theme="dark"] {
  --fokus: #6FB6FF; --acc-tekst: #6FB6FF; --btn-flade: #0060C9; --txt-3: #A0A0A6;
  --b-ok-fg: #5BE07E; --b-forf-fg: #FF9A93; --b-fak-fg: #C9C9CF; --warn-tekst: #FF9F0A;
}
/* Browserens egne felter (afkrydsning, rullebjælke, datovælger) følger det tema, man ser, også når det er valgt med Dag/Nat. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- 2. Fælles: links, fokus, bevægelse, skjul ---------- */
[hidden] { display: none !important; }
a { color: var(--acc-tekst); }
/* `:focus-visible`, ikke `:focus`: en musebruger skal ikke have en ring, en tastaturbruger skal (UI-UX-STANDARD § 10). */
:where(button, a, input, select, textarea, summary, [role=button], [tabindex]):focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
button, [role=button], .na-markerbar, label[for], summary { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.na-flex { flex: 1; }
.na-dim { color: var(--txt-2); }
.na-lille { font-size: 11px; }
.na-laast { opacity: .55; }
.na-neg { color: var(--neg); }
.na-klikbar { cursor: pointer; }
.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; }
/* Springlinket er første tabulatorstop og fører til arbejdsfladen (UI-UX-STANDARD § 8). */
.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; }

/* ---------- 3. Rammen: værktøjslinje · banner · (rail · sidebjælke · arbejdsflade) · statuslinje ----------
   Rækkerne er sat fast, så et skjult banner ikke flytter arbejdsfladen op i en auto-række. */
body { grid-template-rows: auto auto minmax(0, 1fr) auto; }
body > .top { grid-row: 1; }
body > .na-banner { grid-row: 2; }
body > .app { grid-row: 3; }
body > .na-statuslinje { grid-row: 4; }
.app { grid-template-columns: auto auto minmax(0, 1fr); }
.app > .na-ikonrail { grid-column: 1; }
.app > .na-menu { grid-column: 2; }
.app > .work { grid-column: 3; }

/* ---------- 4. Værktøjslinjen (som NERVE Finance: miljømærke, selskab, logo, dag/nat) ---------- */
.top { gap: 10px; }
.top .na-miljoe { margin-left: 0; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 11px;
  background: var(--warn-bg); color: var(--warn-tekst); white-space: nowrap; }
.na-eksempel { background: var(--warn-bg); color: var(--warn); }
/* Selskabet står synligt i værktøjslinjen, ikke gemt i en menu, med CVR under (UI-UX-STANDARD § 6). */
.top .na-firma { flex: 0 1 auto; justify-content: center; min-width: 0; font-size: 14px; }
.na-selskab { display: inline-flex; align-items: center; gap: 6px; max-width: 360px; min-width: 0; height: 26px; padding: 0 6px 0 9px;
  border: none; border-radius: 8px; background: var(--graa-flade); color: var(--txt); font-size: 14px; font-weight: 600;
  letter-spacing: -.02em; cursor: pointer; }
.na-selskab:hover { background: rgba(120, 120, 128, .2); }
.na-selskab b { font-weight: 700; flex: none; }
.na-selskabsnavn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .firma .na-pil { display: block; width: 14px; height: 14px; flex: none; color: var(--txt-2); stroke-width: 2; }
.top .firma .na-firmainfo { padding-left: 9px; white-space: nowrap; }
.na-firmainfo:empty { display: none; }
.na-vissom { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 12px; color: var(--txt-3); white-space: nowrap; }
.na-vissom select { height: 26px; max-width: 220px; padding: 0 8px; border: none; border-radius: 8px; background: var(--graa-flade);
  color: var(--txt); font-size: 12.5px; }
.na-mig { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 12.5px; }
.na-mig[hidden] { display: none; }
.na-mignavn { white-space: nowrap; }
.top .logo { flex: none; white-space: nowrap; }
.top .iconbtn { flex: none; }
.top .iconbtn:focus-visible { outline-offset: 1px; }

/* Dag/nat-kontakten: ordret NERVE Finance' (ui/flade/_tema.css). Farven står aldrig alene: ikon, ord og position skifter. */
.temaknap { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--chrome); color: var(--txt); font-family: inherit;
  font-size: 12px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; }
.temaknap:hover { background: var(--graa-flade); }
.temaknap:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.temaknap-ikon { width: 15px; height: 15px; color: var(--txt-2); }
.temaknap[aria-checked="false"] .temaknap-maane, .temaknap[aria-checked="true"] .temaknap-sol { display: none; }
.temaknap-tekst { min-width: 24px; text-align: left; }
.temaknap-spor { position: relative; width: 26px; height: 15px; border-radius: 999px; background: var(--line); flex: 0 0 auto; transition: background 180ms ease; }
.temaknap-spor > i { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--chrome);
  box-shadow: 0 1px 2px rgb(0 0 0 / .28); transition: transform 180ms ease; }
.temaknap[aria-checked="true"] .temaknap-spor { background: var(--acc); }
.temaknap[aria-checked="true"] .temaknap-spor > i { transform: translateX(11px); }

/* Bånd under værktøjslinjen: et spørgsmål med en handling, aldrig en advarsel uden en (UI-UX-STANDARD § 9). */
.na-banner { display: flex; flex-wrap: wrap; gap: 9px 12px; align-items: center; padding: 8px 14px; background: var(--warn-bg);
  color: var(--txt); border-bottom: 1px solid var(--line); font-size: 12.5px; }

/* ---------- 5. Rail'en med modulerne (grundlagets .rail + programskift.css' .raillink) ---------- */
.na-ikonrail { min-height: 0; }
.na-ikonrail .na-railfold { margin-top: auto; }
@media (pointer: coarse) { .rail .raillink { width: 44px; } }

/* ---------- 6. Sidebjælken med grupper (grundlagets .tree) ---------- */
.na-menu .liste { gap: 1px; }
/* Punkterne må ikke krympe i listens flexkolonne, ellers lægger anden linje sig oven i næste punkt (UI-UX-STANDARD § 14). */
.na-menu .it, .na-menu .grp { flex: none; }
.na-menu .it { min-height: 30px; height: auto; padding: 5px 9px; line-height: 1.25; }
.na-menu .it.aktiv { color: var(--txt); }
.na-menu .grp { margin: 0; }
.na-menu .na-railgrp { width: 100%; border-radius: 8px; text-align: left; font-family: inherit; cursor: pointer; }
.na-menu .na-railgrp:hover { color: var(--txt-2); background: var(--graa-flade); }
.tree .na-railgrp svg { display: block; width: 12px; height: 12px; margin-left: auto; stroke-width: 2; transition: transform .15s; }
.na-railgrp[aria-expanded="true"] svg { transform: rotate(180deg); }
.na-railgruppe { display: flex; flex-direction: column; gap: 1px; }
.na-jura { font-size: 11.5px; color: var(--txt-3); line-height: 1.6; }
.na-jura a { color: var(--txt-3); }
.na-menu .na-jura { flex: none; margin: 0 -10px; padding: 9px 16px 12px; border-top: 1px solid var(--line-2); }
@media (pointer: coarse) { .na-menu .it, .na-menu .na-railgrp { min-height: 44px; } }

/* ---------- 7. Arbejdsfladen (grundlagets .view: 16/18 px luft og 11 px mellem blokkene) ---------- */
.work { overflow: auto; min-height: 0; padding: 16px 18px 28px; gap: 11px; }
.work > * { flex-shrink: 0; }
.work:focus { outline: none; }
.work:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.viewhdr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding: 0; }
.viewhdr h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.viewhdr .sub { font-size: 12px; color: var(--txt-3); }
.na-pad { margin: 0; }
.work > h3 { margin: 8px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.work > p { margin: 0; }
.na-gruppe { margin: 6px 0 0; font-size: 13px; color: var(--txt-2); font-weight: 600; }
.na-knaprk { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- 8. Statuslinjen (grundlagets .status): selskab, CVR, bruger og datasæt ---------- */
.na-statuslinje span { white-space: nowrap; }
.na-statuslinje .na-statusmaerke { color: var(--warn-tekst); font-weight: 600; }
.na-statuslinje:empty { display: none; }

/* ---------- 9. Knapper: sekundær som NERVE Finance' kantede knap, primær som .btn ----------
   Grundlagets .rbtn er båndets ikonknap; i NAO er klassen den almindelige knap, derfor sættes den om her. */
.rbtn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; height: auto; min-height: 28px;
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--chrome); color: var(--txt);
  font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.rbtn:hover { background: var(--graa-flade); color: var(--txt); }
.rbtn.primar { background: var(--btn-flade); border-color: transparent; color: #fff; }
.rbtn.primar:hover { background: var(--btn-flade); color: #fff; filter: brightness(1.06); }
.rbtn.aktiv { background: var(--acc-soft); border-color: var(--acc); color: var(--acc-tekst); }
.rbtn:disabled, .rbtn:disabled:hover { opacity: .45; background: var(--chrome); filter: none; cursor: default; }
.rbtn.primar:disabled, .rbtn.primar:disabled:hover { background: var(--btn-flade); }
@media (pointer: coarse) { .rbtn { min-height: 44px; } }
.na-linkknap { align-self: flex-start; background: none; border: 0; padding: 12px 0; color: var(--acc-tekst); font-size: 15px; cursor: pointer; min-height: 44px; }
.na-stor { min-height: 48px; justify-content: center; }

/* ---------- 10. Tabeller som NERVE Finance' gitter: kort, 30 px hoved, 31 px rækker, hårfine linjer ---------- */
.na-tabel { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--chrome);
  border-radius: 12px; overflow: hidden; box-shadow: var(--skygge); }
.na-tabel th { height: 30px; padding: 0 12px; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--txt-2);
  background: var(--grid-head); border-bottom: 1px solid var(--line); white-space: nowrap; }
.na-tabel td { height: 31px; padding: 5px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.na-tabel tbody tr:last-child td { border-bottom: none; }
.na-tabel tbody tr { cursor: pointer; }
.na-tabel tbody tr:hover { background: var(--row-hover); }
.na-tabel tbody tr.aktiv { background: var(--row-cur); }
.na-tal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.na-ark .na-tabel { box-shadow: none; border: 1px solid var(--line-2); }
/* Sortérbare kolonner (04-10): hele overskriften er en knap; pilen viser retningen, i accentfarven som gitterets ▲▼. */
.na-tabel th[aria-sort] { padding: 0; }
.na-sortknap { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; width: 100%; min-height: 30px; padding: 0 12px;
  cursor: pointer; font-weight: 600; color: inherit; }
.na-sortknap:hover { color: var(--txt); }
.na-sortknap:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; border-radius: 4px; }
.na-sortpil { font-size: 8.5px; font-weight: 700; color: var(--acc-tekst); min-width: 10px; }
th[aria-sort=none] .na-sortpil::after { content: "↕"; color: var(--txt-3); font-size: 10px; font-weight: 400; opacity: .55; }
th[aria-sort=ascending] .na-sortpil::after { content: "▲"; }
th[aria-sort=descending] .na-sortpil::after { content: "▼"; }
tr.na-klikbar:focus-visible, .na-kort[tabindex]:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }

/* ---------- 11. Piller og chips (grundlagets .badge og .chip, med NERVE Finance' kontrastrettelser) ---------- */
.na-status { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600;
  line-height: 20px; white-space: nowrap; background: var(--graa-flade); color: var(--b-fak-fg); }
.na-s-til_godkendelse, .na-s-til_kontering, .na-s-ulaest { background: var(--acc-soft); color: var(--acc-tekst); }
.na-s-spaerret, .na-s-afsendelse_fejlede, .na-s-karantaene, .na-s-fjernet_fra_kladde, .na-s-kunne_ikke_laeses { background: var(--neg-flade); color: var(--b-forf-fg); }
.na-s-godkendt, .na-s-i_kladde, .na-s-bogfoert { background: var(--pos-flade); color: var(--b-ok-fg); }
.na-s-paa_hold { background: var(--warn-bg); color: var(--warn-tekst); }
/* Selskabets prik er et mærke i data (hvilket selskab rækken hører til), aldrig skallens accent; forkortelsen står altid ved. */
.na-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border: none; border-radius: 10px;
  background: var(--graa-flade); color: var(--txt); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.na-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--txt-3)); }
.na-prik { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--selskabsfarve, #888); flex: none; }

/* ---------- 12. Kort, nøgletal, bånd og tom tilstand ---------- */
.na-kortliste { display: flex; flex-direction: column; gap: 9px; padding: 0; }
.na-kort { background: var(--chrome); border-radius: 12px; padding: 12px 14px; box-shadow: var(--skygge); display: flex; flex-direction: column; gap: 6px; }
.na-kort.na-pad { padding: 15px 18px; }
.na-kort > h2 { margin: 0 0 2px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.na-kort > p { margin: 0; }
.na-kort h3 { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.na-kort-top, .na-kort-mid { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.na-belob { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Nøgletallene som NERVE Finance' KPI-kæde: etiket over tal, kortene deler rækken. */
.na-kpirk { display: flex; flex-wrap: wrap; align-items: stretch; gap: 9px; padding: 0; }
.na-kpi { flex: 1 1 160px; min-width: 0; background: var(--chrome); border-radius: 11px; padding: 8px 13px; box-shadow: var(--skygge);
  display: flex; flex-direction: column; gap: 2px; }
.na-kpi > .na-dim:first-child { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--txt-3); }
.na-kpival { font-size: 18px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.na-kpi .na-lille { color: var(--txt-2); }
.na-flise { border-left: 3px solid var(--c, var(--line)); }
.na-advarsel { border-left: 3px solid var(--warn); border-radius: 10px; padding: 7px 12px; background: var(--warn-bg); color: var(--txt);
  font-size: 12.5px; line-height: 1.45; }
.na-kort.na-advarsel { box-shadow: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.na-advtekst { color: var(--warn-tekst); }
.na-invitation { border-left: 3px solid var(--acc); background: var(--acc-soft); box-shadow: none; }
.na-tom { padding: 26px 18px; color: var(--txt-2); text-align: center; line-height: 1.5; background: var(--chrome); border-radius: 12px; box-shadow: var(--skygge); }
.na-fejl { color: var(--neg); margin: 0; min-height: 1em; }
.na-fejl:empty { display: none; }

/* ---------- 13. Felter og formularer (NERVE Finance' formularfelt: 30 px, hårfin kant, 8 px hjørner) ---------- */
:where(.work, .na-ark) :where(select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color])) {
  box-sizing: border-box; min-height: 30px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--chrome); color: var(--txt); font: inherit; font-size: 13px; }
:where(.work, .na-ark) :where(input, select, textarea)::placeholder { color: var(--txt-3); }
:where(.work, .na-ark) :where(input[type=checkbox], input[type=radio]) { accent-color: var(--acc); }
/* I tabellernes rækker er felterne lavere, så rækken holder gitterets højde. */
.na-tabel td select { min-height: 26px; padding: 2px 6px; font-size: 12.5px; }
.na-form { display: flex; flex-direction: column; gap: 10px; }
.na-form textarea, .na-form select, .na-form input:not([type=checkbox]):not([type=radio]) { min-height: 30px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--chrome); color: var(--txt); font: inherit; font-size: 13px; }
.na-form textarea { min-height: 70px; line-height: 1.45; }
.na-soeg { flex: 1; min-height: 30px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--chrome); color: var(--txt); font-size: 13px; }
.na-ark textarea { min-height: 70px; width: 100%; }

/* ---------- 14. Faner/mapper som NERVE Finance' filtre i bilagskøen (bilag.css .filter) ---------- */
.na-faner { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.na-fane { display: inline-block; padding: 3px 10px; min-height: 26px; border: 1px solid var(--line); border-radius: 999px; background: none;
  color: var(--txt-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.na-fane:hover { border-color: var(--txt-3); color: var(--txt); }
.na-fane.aktiv { background: var(--btn-flade); border-color: transparent; color: #fff; }
/* Antallet står i fuld farve: gennemsigtighed ville trække det under 4,5:1 (målt 3,2:1 som i NERVE Finance' .filter .tal). */
.na-fane .na-antal { font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------- 15. Ark: midt på skærmen som NERVE Finance' modal, på telefonen nedefra ---------- */
.na-arklag { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .28); backdrop-filter: blur(3px); }
.na-arklag[hidden] { display: none; }
.na-ark { width: min(580px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 20px; border-radius: 18px;
  background: color-mix(in srgb, var(--chrome) 96%, transparent); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .32), 0 0 0 .5px var(--line); }
.na-ark > h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.na-ark p { margin: 0 0 10px; }
.na-arkknapper { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-2); }
/* Listerne i »Mere« og »Skift selskab«: punkter som sidebjælkens. */
.na-mereliste { display: flex; flex-direction: column; gap: 2px; }
.na-mereit { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: none; border-radius: 9px;
  background: transparent; color: var(--txt); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.na-mereit:hover { background: var(--graa-flade); }
.na-mereit.aktiv { background: var(--acc-soft); font-weight: 600; }
.na-mereit svg { width: 18px; height: 18px; color: var(--acc); stroke-width: 1.7; }
.na-mereliste .na-jura { margin: 8px 0 0; padding: 8px 10px 0; border-top: 1px solid var(--line-2); }

/* ---------- 16. Besked (toast): kort, rolig og over statuslinjen ---------- */
.na-toast { position: fixed; left: 50%; bottom: 52px; z-index: 60; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px));
  padding: 9px 14px; border-radius: 12px; background: var(--txt); color: var(--chrome); font-size: 12.5px; font-weight: 500;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22); opacity: 0; transition: opacity .2s; pointer-events: none; }
.na-toast.vis { opacity: 1; }

/* ---------- 17. Telefonen: bundmenu i stedet for rail og sidebjælke ---------- */
.na-bundnav { display: none; }
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app > .work { grid-column: 1; }
  .na-ikonrail, .na-menu, .na-statuslinje { display: none !important; }
  .top { gap: 6px; padding: 0 8px; }
  .top .logo, .top .na-firmainfo, [data-testid=selskab-navn], .na-vissom-tekst, .temaknap-tekst, .na-mignavn { display: none; }
  :root:not([data-miljoe=test]):not([data-miljoe=drift]) .top .na-miljoe { display: none; }
  .na-selskab { height: 44px; padding: 0 10px 0 12px; }
  .na-vissom select { max-width: 130px; height: 44px; }
  .top .iconbtn { width: 44px; height: 44px; }
  .temaknap { height: 44px; padding: 0 10px; }
  .work { padding: 12px 12px 88px; }
  .na-bundnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 4px env(safe-area-inset-bottom);
    background: var(--chrome); border-top: 1px solid var(--line); }
  .na-bundnav button { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; border-radius: 10px; font: inherit; font-size: 11px; font-weight: 500; color: var(--txt-2); }
  .na-bundnav button svg { width: 22px; height: 22px; }
  .na-bundnav button.aktiv { color: var(--acc-tekst); font-weight: 600; }
  .na-bundnav button:focus-visible { outline-offset: -2px; }
  .na-arklag { align-items: flex-end; padding: 0; }
  .na-ark { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  .na-ark .rbtn { min-height: 48px; }
  .na-mereit { min-height: 48px; font-size: 15px; }
  .na-toast { bottom: calc(68px + env(safe-area-inset-bottom)); }
  input, select, textarea { font-size: 16px; }
  :where(.work, .na-ark) :where(select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color])) { min-height: 44px; }
  .na-form select, .na-form input:not([type=checkbox]):not([type=radio]), .na-soeg { min-height: 44px; font-size: 16px; }
  .na-form textarea { font-size: 16px; }
  .na-tabel td select { font-size: 16px; }
  .na-kort { min-height: 48px; }
  .na-tvivlchip { min-height: 36px; }
  .na-ok { min-width: 44px; min-height: 44px; }
  .na-fane { min-height: 44px; padding: 6px 14px; }
}

/* ==========================================================================
   Siderne
   ========================================================================== */

/* ---------- Fakturaen: kø · bilag · felter, som NERVE Finance' bilagsrude ---------- */
.work:has(> .na-faktura) { padding: 0; overflow: hidden; }
.na-faktura { display: grid; grid-template-columns: 230px minmax(360px, 1fr) minmax(380px, 460px); height: 100%; min-height: 0; }
.na-fliste { overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--line); background: var(--chrome-2); }
.na-fliste h3 { margin: 2px 8px 6px; font-size: 11px; font-weight: 600; color: var(--txt-3); }
.na-fliste a { display: flex; flex-direction: column; gap: 2px; flex: none; padding: 8px 11px; border: 1px solid transparent; border-radius: 10px;
  color: var(--txt); text-decoration: none; }
.na-fliste a b { font-size: 12.5px; font-weight: 600; }
.na-fliste a .na-dim { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.na-fliste a:hover { background: var(--row-hover); }
.na-fliste a.aktiv { background: var(--row-sel); border-color: var(--line); }
.na-fliste a.aktiv .na-dim { color: var(--txt); }
.na-papirramme { overflow: auto; background: var(--graa-flade); padding: 16px; min-width: 0; }
.na-papir { background: #fff; color: #1d1d1f; max-width: 620px; margin: 0 auto; min-height: 700px; padding: 36px 40px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  font: 12.5px/1.7 "Helvetica Neue", Arial, sans-serif; }
.na-papir .stor { font-size: 16px; font-weight: 600; }
.na-markerbar { cursor: pointer; border-radius: 3px; padding: 0 2px; background: rgba(0, 113, 227, .08); }
.na-markerbar:hover { background: rgba(0, 113, 227, .22); }
.na-hoejrekol { overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 14px 16px; border-left: 1px solid var(--line); min-width: 0; }
.na-hoejre { display: flex; flex-direction: column; gap: 10px; }
.na-hoejre h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-3); margin: 0 0 6px; }
.na-fhoved h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.na-belob.stor { font-size: 24px; letter-spacing: -.03em; margin-top: 4px; }
.na-spaerringer { background: var(--neg-flade); border-left: 3px solid var(--neg); border-radius: 10px; padding: 8px 12px; }
.na-spaerregrund { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.na-spaerregrund p { margin: 0; flex-basis: 100%; color: var(--b-forf-fg); }
.na-felter, .na-kontering, .na-godk, .na-laerspm { background: var(--chrome); border-radius: 12px; padding: 12px 14px; box-shadow: var(--skygge); }
.na-felt { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; margin: 4px 0; }
.na-felt label { font-size: 12px; color: var(--txt-2); }
.na-felt input { min-height: 30px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--chrome); color: var(--txt); font: inherit; font-size: 13px; }
.na-felt input.tvivl { background: var(--warn-bg); border-color: var(--warn); }
.na-ok { border: 0; background: none; color: var(--b-ok-fg); font-weight: 700; cursor: help; }
.na-tvivlchip { border: 1px dashed var(--warn); background: var(--warn-bg); color: var(--txt); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; }
.na-ktabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.na-ktabel td { padding: 5px 4px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.na-ktabel input { width: 64px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--chrome); color: var(--txt); }
.na-begr { color: var(--txt-2); font-size: 11.5px; max-width: 160px; }
.na-laerspm { border: 1px solid var(--acc-mid); }
.na-laerspm textarea { width: 100%; min-height: 56px; margin-top: 8px; }
.na-godkperson { padding: 3px 0; }
/* Handlingerne står øverst i højre kolonne og bliver stående, når man ruller (som bilagsrudens knaprække). */
.na-fknapper { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 0; z-index: 2; margin: 0 -14px; padding: 10px 14px;
  background: var(--win); border-bottom: 1px solid var(--line-2); }
.na-fortryd { display: flex; gap: 8px; align-items: center; }
.na-splitraekke { display: flex; gap: 6px; align-items: center; }
.na-splitraekke input { width: 80px; }
.na-splitraekke input[name=tekst] { flex: 1 1 160px; min-width: 0; }
.na-visbilag, .rbtn.na-visbilag, .rbtn.na-lukbilag { display: none; }
.na-mereboks { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.na-mereboks[hidden] { display: none; }
/* Rigtige bilag, facit og flow */
.na-papir.na-rigtigt { padding: 12px; min-height: 0; font-size: 12px; overflow: auto; }
.na-bilagsbillede { width: 100%; height: auto; display: block; border: 1px solid #e5e5ea; aspect-ratio: auto 210/297; }
.na-tekstlag { margin-top: 10px; color: #1d1d1f; }
.na-tekstlag summary { cursor: pointer; color: #6e6e73; }
.na-tekstlag .na-markerbar { display: block; margin: 2px 0; white-space: pre-wrap; }
.na-facit { border-radius: 10px; padding: 10px 12px; background: var(--warn-bg); }
.na-facit.ramt { background: var(--pos-flade); }
.na-trinliste { margin: 6px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.na-trin { display: flex; gap: 6px; align-items: baseline; padding: 4px 6px; border-radius: 6px; }
.na-trin.aktiv { background: var(--acc-soft); }
.na-trinikon { width: 16px; text-align: center; }
.na-genvej { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.na-genvej select, .na-ktabel select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--chrome); color: var(--txt); }
.na-floweditor { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.na-trinboks { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.na-trinboks.laast { background: var(--graa-flade); }
.na-trinpersoner { display: flex; flex-wrap: wrap; gap: 4px 14px; }
/* Klik på værdier i bilaget, og markering af hvor feltet er fundet */
.na-billedramme { position: relative; max-width: none; }
.na-ordlag { position: absolute; inset: 0; cursor: copy; }
.na-ord { position: absolute; padding: 0; margin: 0; border: 0; background: transparent; cursor: copy; border-radius: 2px; pointer-events: auto; }
.na-ord span { opacity: 0; font-size: 1px; }
.na-ord:hover { outline: none; background: transparent; }
.na-ordhover { position: absolute; pointer-events: none; background: rgba(0, 113, 227, .15); outline: 2px solid rgba(0, 113, 227, .7); border-radius: 3px; }
.na-fundet { position: absolute; border: 2px solid #FF9500; background: rgba(255, 149, 0, .15); border-radius: 4px; pointer-events: none; transition: all .15s;
  box-shadow: 0 0 0 3px rgba(255, 149, 0, .25); }
.na-kilde { position: absolute; border: 2px solid #FF9500; background: rgba(255, 149, 0, .22); border-radius: 4px; pointer-events: none; box-shadow: 0 0 0 3px rgba(255, 149, 0, .2); }
.na-kreditorlinje { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.na-kreditorvalg { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.na-kreditorvalg .rbtn { justify-content: flex-start; }
.na-klikmaal { position: sticky; top: 0; z-index: 3; background: var(--btn-flade); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 8px; margin: 0 0 8px; }
.na-felt input.na-indsat { box-shadow: 0 0 0 3px var(--pos-flade); border-color: var(--pos); }
.na-zoom { display: flex; gap: 6px; margin: 0 0 8px; }
.na-prisinput { width: 90px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--chrome); color: var(--txt); }
.na-bilagsside { margin-bottom: 14px; }
.na-sidetal { font-size: 12px; margin: 4px 0; }
/* Kontering 03-10: én kompakt linje pr. konto; detaljer foldet ind */
.na-klinjer { display: flex; flex-direction: column; gap: 6px; }
.na-klinje { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; background: var(--chrome); transition: border-color .15s, box-shadow .15s; }
.na-klinje:hover, .na-klinje:focus-within { border-color: #FF9500; box-shadow: 0 0 0 2px rgba(255, 149, 0, .18); }
.na-klinje-top { display: flex; align-items: center; gap: 10px; }
.na-klinje-top input { width: 72px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--chrome); color: var(--txt); font-variant-numeric: tabular-nums; }
.na-klinje-tekst { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 2px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--chrome); color: var(--txt); font-size: 13px; }
.na-klinje-tekst::placeholder { color: var(--txt-3); }
.na-kontonavn { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-klinje-beloeb { font-weight: 600; white-space: nowrap; }
.na-klinje-bund { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; }
.na-klinje-bund select { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--chrome); color: var(--txt); }
.na-sikkerhed { padding: 1px 7px; border-radius: 999px; background: var(--pos-flade); color: var(--txt); font-variant-numeric: tabular-nums; }
.na-sikkerhed.lav { background: var(--warn-bg); }
.na-hvorfor summary { cursor: pointer; color: var(--txt-2); }
.na-hvorfor p { margin: 6px 0 0; color: var(--txt-2); flex-basis: 100%; }
.na-hvorfor[open] { flex-basis: 100%; }
.na-lille.rbtn { padding: 3px 9px; font-size: 12px; min-height: 0; margin-left: auto; }
.na-regelhint { display: block; margin: -2px 0 8px; padding: 4px 8px; border: 1px dashed var(--line); border-radius: 6px; background: transparent; color: var(--txt-2);
  font-size: 12px; text-align: left; cursor: pointer; }
/* Bogholder: sikre felter samlet, resten af handlingerne under Mere */
.na-felterok > summary { cursor: pointer; padding: 10px 0; color: var(--txt-2); min-height: 44px; box-sizing: border-box; }
@media (max-width: 1180px) and (min-width: 721px) {
  .na-faktura { grid-template-columns: minmax(320px, 1fr) minmax(340px, 420px); }
  .na-fliste { display: none; }
}
@media (max-width: 720px) {
  .work:has(> .na-faktura) { overflow: auto; }
  .na-faktura { display: block; height: auto; padding: 10px; }
  .na-fliste { display: none; }
  .na-papirramme { display: none; position: fixed; inset: 0; z-index: 40; border-radius: 0; }
  .na-papirramme.vis { display: block; }
  .rbtn.na-visbilag { display: flex; justify-content: center; min-height: 48px; width: 100%; }
  .na-papirramme.vis .rbtn.na-lukbilag { display: flex; position: sticky; top: 0; margin: 0 0 10px auto; min-height: 48px; z-index: 2; }
  .na-hoejrekol { overflow: visible; padding: 0; border-left: none; }
  .na-fknapper { position: fixed; top: auto; bottom: 56px; left: 0; right: 0; margin: 0; padding: 8px; max-height: 64px; align-items: center;
    background: var(--chrome); border-top: 1px solid var(--line); border-bottom: none; flex-wrap: nowrap; overflow-x: auto; z-index: 21; }
  .na-fknapper .rbtn { min-height: 48px; flex: 0 0 auto; }
  .na-hoejre { padding-bottom: 140px; }
  .na-felt { grid-template-columns: 90px 1fr auto; }
  .na-felt input { min-height: 44px; font-size: 16px; }
  .na-tvivlchip { grid-column: 2/4; justify-self: start; white-space: nowrap; }
  .na-klinje-top input { width: 84px; flex: none; }
  .na-lille.rbtn { min-height: 44px; padding: 6px 12px; }
  .na-mereboks { position: fixed; left: 0; right: 0; bottom: calc(56px + 64px + env(safe-area-inset-bottom)); z-index: 31; padding: 12px; gap: 8px;
    background: var(--chrome); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px rgba(0, 0, 0, .12); flex-wrap: wrap; }
  .na-mereboks .rbtn { flex: 1 1 40%; min-height: 48px; justify-content: center; }
}

/* ---------- Godkender: én simpel skærm (Christian 04-10) ---------- */
.na-godkendsimpel { width: 100%; max-width: 560px; margin: 0 auto; padding: 4px 0 120px; display: flex; flex-direction: column; gap: 10px; }
.na-godkendsimpel h1 { margin: 4px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.na-godkendsimpel .na-belob.stor { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.na-hvad { margin: 4px 0; font-size: 16px; color: var(--txt); }
.na-miniature { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--chrome);
  cursor: pointer; text-align: left; min-height: 48px; color: var(--txt); }
.na-miniature img { width: 96px; max-height: 128px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line); }
.na-godkendbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--chrome); border-top: 1px solid var(--line); }
.na-godkendbar .rbtn { min-height: 52px; font-size: 17px; flex: 1; }
.na-godkendbar .na-godkendknap, .na-godkendbar .na-godkendknap:hover { flex: 2; background: #1d7a35; border-color: #1d7a35; color: #fff; }
.na-fortrydlinje { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--pos-flade); }
.na-bilagfuld { display: flex; flex-direction: column; gap: 12px; max-height: 75vh; overflow: auto; }
.na-bilagfuld img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
@media (max-width: 720px) { .na-godkendbar { bottom: calc(56px + env(safe-area-inset-bottom)); } }
@media (min-width: 721px) {
  .na-godkendsimpel { padding-bottom: 0; }
  .na-godkendbar { position: sticky; bottom: 0; margin-top: 6px; padding: 12px 0; background: var(--win); border-top: 1px solid var(--line-2); }
}

/* ---------- Botten ---------- */
.na-bot { background: var(--chrome); border-radius: 12px; padding: 12px 14px; box-shadow: var(--skygge); display: flex; flex-direction: column; gap: 8px; }
.na-botlog { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.na-botlog p { margin: 0; padding: 6px 10px; border-radius: 10px; max-width: 90%; }
.na-bot-mig { align-self: flex-end; background: var(--acc-soft); }
.na-bot-bot { align-self: flex-start; background: var(--graa-flade); }
.na-botinput { display: flex; gap: 6px; }
.na-botinput input { flex: 1; min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--chrome); color: var(--txt); }
.na-preview { border: 1px solid var(--acc-mid); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.na-preview p { background: none; padding: 0; }
.na-slaaetfra { opacity: .6; }

/* ---------- Opsætning, oversigter og konto ---------- */
.na-matrixramme { overflow-x: auto; margin: 0; }
.na-matrix th { font-size: 10.5px; writing-mode: vertical-rl; transform: rotate(180deg); height: 110px; text-align: left; }
.na-laasikon { border: 0; background: none; cursor: pointer; font-size: 10.5px; color: var(--txt-2); text-decoration: underline; }
.na-blok { display: block; padding: 4px 0; }
.na-kreditorkort { display: flex; flex-direction: column; gap: 8px; }
.na-opstart { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.na-opstart li { background: var(--chrome); border-radius: 12px; padding: 10px 14px; box-shadow: var(--skygge); }
.na-punkter { margin: 0; }
.na-punkter li { margin: 4px 0; }
.na-loginboks { max-width: 380px; margin: 40px auto; display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.na-loginboks input { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--chrome); color: var(--txt); font-size: 16px; }
.na-koder { columns: 2; font-variant-numeric: tabular-nums; }
/* Prototypens QR-pladsholder (konto.js). Login-afsnittet nedenfor tegner den rigtige QR-kode og vinder, hvor de overlapper. */
.na-qr { width: 160px; height: 160px; display: grid; place-items: center; background: repeating-conic-gradient(var(--txt) 0 25%, var(--chrome) 0 50%) 0 0/20px 20px;
  color: transparent; border-radius: 8px; }
.na-noegle { font-size: 16px; letter-spacing: .06em; }
.na-filinput { position: absolute; width: 1px; height: 1px; opacity: 0; }
.na-kameraknap { cursor: pointer; }
.na-uploadsider { display: flex; flex-wrap: wrap; gap: 8px; }
.na-uploadside { background: var(--graa-flade); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.na-push { max-width: 340px; background: rgba(120, 120, 128, .18); backdrop-filter: blur(10px); border-radius: 16px; padding: 10px 14px; }

/* ---------- Videre fakturering og indkøbsmatch (04-10) ---------- */
.na-slide { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; cursor: pointer; min-height: 44px; }
.na-slide input { appearance: none; width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.na-slide input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.na-slide input:checked { background: var(--pos); }
.na-slide input:checked::after { transform: translateX(18px); }
.na-slide input:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.na-videre { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.na-videre .na-form label { display: flex; flex-direction: column; gap: 4px; }
.na-videre .na-form label.na-afkryds { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }
.na-ikkepaakonto { margin-top: 6px; font-size: 13px; color: var(--warn-tekst); }
.na-match { border-radius: 10px; padding: 8px 12px; margin-top: 8px; font-weight: 600; }
.na-match.groen { background: var(--pos-flade); color: color-mix(in srgb, var(--pos) 75%, var(--txt)); }
.na-match.gul { background: var(--warn-bg); color: var(--warn-tekst); }
.na-match.roed { background: var(--neg-flade); color: color-mix(in srgb, var(--neg) 75%, var(--txt)); }
.na-match details { font-weight: 400; color: var(--txt); margin-top: 4px; }
.na-match summary { cursor: pointer; min-height: 32px; }
@media (max-width: 720px) { .na-videre .rbtn { min-height: 48px; } .na-videre input, .na-videre select { min-height: 44px; } }

/* ---------- Nervesystems 04-10: selskabsmail og oprettelse ---------- */
.na-mailrk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.na-mailrk b, .na-mailadr { word-break: break-all; font-size: 15px; }

/* ---------- Servertilstand (spec 2026-10-05 § 9) ---------- */
.na-dokmeta > * + * { margin-top: 6px; }
.na-doksider { max-width: 900px; }
.na-mailtekst { white-space: pre-wrap; font: inherit; padding: 16px; margin: 0; background: var(--chrome); border: 1px solid var(--line); border-radius: 12px;
  overflow-wrap: anywhere; }
.na-linkfelt { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* ---------- Login (som NERVE Finance' ui/flade/login.html; spec 2026-10-05, Christian 05-10) ---------- */
.login-side { min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 1rem; padding: 2rem 1rem; }
.login-kort { width: min(24rem, 100%); display: grid; gap: 1rem; }
/* `hidden` er display:none i browserens ark, men .login-kort { display: grid } vinder; derfor står den her. */
.login-kort[hidden] { display: none; }
.login-kort h1 { margin: 0; font-size: 1.375rem; letter-spacing: -0.01em; }
.login-kort p.under { margin: 0; opacity: .68; font-size: .875rem; line-height: 1.45; }
.login-felt { display: grid; gap: .3rem; }
.login-felt label { font-size: .8125rem; opacity: .78; }
.login-felt input { font: inherit; padding: .55rem .7rem; border-radius: .5rem; border: 1px solid rgba(128,128,128,.35); background: transparent; color: inherit; }
.login-knap { font: inherit; font-weight: 600; padding: .6rem 1rem; border-radius: .5rem; border: 1px solid rgba(128,128,128,.35); cursor: pointer; background: rgba(128,128,128,.12); color: inherit; }
.login-knap[disabled] { opacity: .5; cursor: progress; }
.login-fejl { width: min(24rem, 100%); box-sizing: border-box; font-size: .875rem; padding: .55rem .7rem; border-radius: .5rem; border: 1px solid rgba(200,50,40,.45); background: rgba(200,50,40,.10); }
.login-fejl[hidden] { display: none; }
.login-note { font-size: .75rem; opacity: .6; line-height: 1.5; margin: 0; }
.login-jura { width: min(24rem, 100%); }
.login-miljoe { justify-self: center; margin: 0; }
/* Topbjælken skjuler eksempelmærket på telefon (pladsmangel); på login-siden skal testmiljøet altid kunne ses. */
.login-side .login-miljoe:not([hidden]) { display: inline-block; }
.login-miljoe[hidden] { display: none; }
/* Linkene arver tekstfarven, så de kan læses i både lyst og mørkt tema (understregningen viser, at det er links). */
.login-note a, .login-jura a { color: inherit; }
.login-hvem { margin: 0; font-size: .8125rem; opacity: .72; line-height: 1.45; overflow-wrap: anywhere; }
.login-tid { margin: 0; font-size: .75rem; opacity: .6; line-height: 1.5; font-variant-numeric: tabular-nums; }
.login-tilbage { font: inherit; font-size: .8125rem; justify-self: start; background: none; border: 0; padding: .35rem 0; color: inherit; opacity: .78; cursor: pointer; text-decoration: underline; }
.login-tilbage:hover { opacity: 1; }
.login-husk { display: flex; gap: .5rem; align-items: flex-start; font-size: .8125rem; opacity: .78; line-height: 1.45; cursor: pointer; }
.login-husk[hidden] { display: none; }
.login-felt input:focus-visible, .login-knap:focus-visible, .login-tilbage:focus-visible { outline: 2px solid var(--acc, #0059B3); outline-offset: 2px; }
@media (pointer: coarse) { .login-knap, .login-tilbage, .login-felt input { min-height: 44px; } }
.na-qr { width: 220px; height: 220px; justify-self: center; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: .5rem; }
.na-noegle { font-size: .875rem; letter-spacing: .5px; overflow-wrap: anywhere; }
.na-backupkoder { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9375rem; line-height: 1.8; margin: 0; }