/* =============================================================
   ShellV2.0 — RETNING B
   v2.20.422 · afprøvet på DEV
   v2.20.523 · DETTE ER DESIGNET. Det kan ikke længere vælges fra.

   Indtil v2.20.523 var hver regel her scopet under
   html[data-design="b"], og uden det attribut gjorde filen ingenting
   overhovedet. Det var rigtigt, mens B var et forslag: et
   designforslag, der slår sig selv til, gentager mørketilstanden fra
   v2.20.409, hvor en halvt omstillet skærm gav 1,1:1 i kontrast.

   Men et valg, der KAN stå forkert, står forkert — og så bygger man
   videre på en skærm, ingen kommer til at se. Attributtet er væk.

   Hvorfor `html:root` og ikke bare `html`: vægten er en del af
   designet, ikke pynt. `html[data-design="b"] .card` vejer (0,2,1),
   og det er dén vægt, der lader B vinde over de hårdkodede farver i
   style.css uden ét eneste !important. `html .card` ville veje
   (0,1,1) og tabe. `html:root .card` vejer nøjagtig (0,2,1) — samme
   tal, samme kaskade, samme skærm. Hver beregnet egenskab på hvert
   element er målt i en browser før og efter; se TEST-HISTORY.

   Mørketilstanden er urørt: `:root[data-theme="dark"]` vejer (0,2,0)
   mod tokensættets (0,1,1) og vinder stadig.

   Tokens gør det meste: shell-tokens.css omdefinerer de eksisterende
   --c-*, så de ~285 steder i style.css, der
   allerede læser derfra, følger med af sig selv. Denne fil tager kun
   de ting, der er FORM og ikke farve — den mørke topbjælke, zebra-
   rækkerne, statuskanten på nøgletallene — plus de steder, hvor
   style.css skriver en farve direkte og derfor ikke kan nås af et
   token.

   Skalaen er hele argumentet: --t-1..5 og --s-1..5 nedenfor er de
   ENESTE tekststørrelser og afstande, denne fil bruger. Fem og fem,
   mod 35 og 35 i dag.
   ============================================================= */

/* ---- topbjælken: B ved hvor man er ------------------------------ */
html:root .topbar{
  background:var(--c-nav-ground);
  border-bottom:1px solid var(--c-nav-line);
  color:#fff;
}
html:root .topbar h1{color:#fff;font-size:var(--t-2);font-weight:600;letter-spacing:-.01em}
html:root .topbar p{color:var(--c-nav-ink-2);font-size:var(--t-4)}
html:root .topbar input,
html:root .topbar select{
  background:#1E293B;border-color:#334155;color:#F1F5F9;border-radius:var(--r-b);
}
html:root .topbar input::placeholder{color:#94A3B8}
html:root .topbar .btn{
  background:#1E293B;border-color:#334155;color:#E2E8F0;border-radius:var(--r-b);
}
html:root .topbar .btn:hover{background:#334155}
html:root .topbar .btn.primary{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
html:root .user-chip{border-left-color:#334155;color:#fff}
html:root .user-chip strong{color:#fff;font-size:var(--t-4)}
html:root .user-chip small{color:var(--c-nav-ink-2);font-size:var(--t-5)}
html:root .user-chip>span{background:#164E63;color:#A5F3FC;border-radius:var(--r-b)}
html:root .icon-btn{color:#fff}

/* ---- flader og kanter ------------------------------------------- */
html:root body,
html:root .content{background:var(--c-ground)}
html:root .card,
html:root .kpi,
html:root .metric{
  border:1px solid var(--c-line);
  border-radius:var(--r-b);
  box-shadow:none;              /* B bruger kant, ikke skygge, til at adskille */
}
html:root .card{padding:var(--s-4)}
html:root .card-header h2{font-size:var(--t-3);font-weight:600;color:var(--c-ink)}

/* ---- knapper og felter ------------------------------------------ */
html:root .content .btn{
  border-radius:var(--r-b);
  border-color:var(--c-line);
  font-size:var(--t-4);
  font-weight:500;
  padding:var(--s-1) var(--s-3);
  color:var(--c-ink-2);
}
html:root .content .btn:hover{background:var(--c-surface-2)}
html:root .content .btn.primary{
  background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent);font-weight:600;
}
/* v2.20.533 - DEN ROEDE KNAP VAR IKKE ROED.

   `html:root .content .btn` saetter `color` og vejer (0,3,1). `.btn.danger` i style.css
   vejer (0,2,0) og taber. Resultatet: HVER ENESTE destruktive knap inde i indholdet blev
   tegnet som en helt almindelig knap - ogsaa «Slet permanent», hvor den roede farve er den
   eneste advarsel, man ser, FOER man trykker.

   `.primary` fik sin egen linje her, da Retning B blev skrevet. `.danger` blev glemt, og
   saa laenge Retning B kunne slaas fra, var fejlen kun halvt til stede. v2.20.523 gjorde
   Retning B til den eneste - og dermed fejlen til den eneste.

   EN VARIANT, DER TABER TIL SIT EGET LAYOUT, FORSVINDER LYDLOEST: KLASSEN STAAR I
   MARKUPPEN, TESTEN FINDER DEN, OG SKAERMEN VISER NOGET ANDET. */
html:root .content .btn.danger{
  color:var(--c-crit);border-color:var(--c-crit-soft);font-weight:600;
}
html:root .content .btn.danger:hover{background:var(--c-crit-soft);border-color:var(--c-crit)}
html:root .content .btn.small{font-size:var(--t-5);padding:6px var(--s-2)}
html:root .content input,
html:root .content select,
html:root .content textarea{
  border-radius:var(--r-b);border-color:var(--c-line);font-size:var(--t-4);color:var(--c-ink);
}
html:root label{font-size:var(--t-5);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3);font-weight:600}

/* ---- nøgletal: kanten siger hvor alvorligt det er ---------------- */
html:root .kpi,
html:root .metric{
  padding:var(--s-2) var(--s-3);
  border-top:3px solid var(--c-line-strong);
}
html:root .kpi:after{display:none}     /* den dekorative cirkel hører til i dag, ikke i B */
html:root .kpi label,
html:root .metric label,
html:root .metric small:first-child{
  font-size:var(--t-5);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3);font-weight:600;
}
html:root .kpi strong,
html:root .metric strong{
  font-size:var(--t-1);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-top:6px;color:var(--c-ink);
}
html:root .kpi small,
html:root .metric small{font-size:var(--t-4);color:var(--c-ink-3)}
/* Statusfarven på kanten. Uden en klasse at gå efter bliver den neutral —
   det er med vilje: en farve, der ikke betyder noget, skal ikke være der. */
html:root .kpi.red,html:root .metric.red,
html:root .kpi.critical,html:root .metric.critical{border-top-color:var(--c-crit)}
html:root .kpi.amber,html:root .metric.amber,
html:root .kpi.warning,html:root .metric.warning{border-top-color:var(--c-warn)}
html:root .kpi.green,html:root .metric.green{border-top-color:var(--c-pos)}

/* ---- tabeller: zebra og en tydelig hovedbjælke -------------------- */
html:root .table-wrap{border-color:var(--c-line);border-radius:var(--r-b)}
/* v2.20.636 - TABELOVERSKRIFTER I BROEDSKRIFTEN (designgennemgangens nr. 4).

   Overskriften arvede `font-family:var(--f-mono)` og `text-transform:uppercase`
   fra style.css' `th`, og fik her 11 px og .08em spatiering oveni. Monospace i
   versaler med spatiering fylder ca. 30 % mere end samme ord i broedskriften,
   og paa kundelisten i 1440 px blev tre overskrifter klippet:
   «OPPORTUNIT…» (135 px i 90), «ÅBNE SA…» (112 i 68), «MÅNEDLIG V…» (142 i 90).

   Maalt i browseren, bredden af kundelistens otte overskrifter mod deres
   kolonner (indre bredde, uden luft):
       mono 11 px versaler .08em   passer 5 af 8   (det, der stod)
       sans 11 px versaler .06em   passer 5 af 8
       sans 11 px versaler 0       passer 6 af 8   («Månedlig værdi» 98 i 90)
       sans 12 px alm. 0           passer 8 af 8   (90 i 90 - uden plads til pilen)
       sans 11 px alm. 0           passer 8 af 8   med luft

   Derfor: broedskrift, 11 px, halvfed, almindelig skrivemaade, ingen spatiering.
   Versaler med spatiering er sektionsetiketternes sprog («KRAEVER HANDLING NU»,
   KPI-etiketterne) - ikke et tabelhoveds. Monospace bliver ved med at vaere
   tallenes: CVR, beloeb og datoer i cellerne er uroert.

   Kolonnebredderne er IKKE roert. De er defineret seks steder med !important,
   og det er en oprydning for sig - ikke én, der skal ske inde i et skriftskift. */
html:root th{
  background:var(--c-surface-3);
  color:var(--c-ink-2);
  font-family:var(--f-sans);
  font-size:var(--t-5);
  letter-spacing:0;
  text-transform:none;
  font-weight:600;
  border-bottom:1px solid var(--c-line);
  padding:var(--s-1) var(--s-2);
}
/* v2.20.636 - sorteringspilen staar i cellens hoejre kant og er ikke en del af
   teksten. Som en del af linjen faldt den ned paa sin egen linje, naar
   overskriften maatte ombryde («Antal licenser» / «↕»), og med et
   uopbrydeligt mellemrum blev «Faktureringspris ↕» ét ord, som `break-word`
   saa maatte knaekke. Kontrakttabellen har haft pilen absolut siden
   laenge - nu har alle. Pladsen til den er reserveret i padding-right (16 px). */
html:root th.sortable{position:relative;padding-right:16px}
html:root th.sortable::after{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:var(--t-5);line-height:1}
/* Maalt i browseren, ikke skoennet: foerste udgave satte td til 12/16 px luft og
   `td strong` til 15 px. Licensregistret har 13 kolonner og `table-layout:fixed`,
   saa kolonnebredderne ligger fast - og stoerre indhold i en fast bredde braekker.
   Statusfeltet «active» blev sat med ét bogstav pr. linje, og ALSO-maerket laa
   oven i rabatten. Hierarkiet i B baeres derfor af VAEGT og FARVE inde i tabeller,
   aldrig af stoerrelse. Luften er paa skalaen: 8 og 12. */
html:root td{
  font-size:var(--t-4);
  padding:var(--s-1) var(--s-2);
  border-bottom:1px solid var(--c-surface-3);
  color:var(--c-ink-2);
}
html:root tbody tr:nth-child(even) td{background:var(--c-surface-2)}
html:root tbody tr:hover td{background:var(--c-accent-soft)}
/* v2.20.539 - `html:root tbody tr:nth-child(even) td` ovenfor saetter baggrund paa TD'en og
   har samme vaegt som en almindelig klasseregel i style.css. Kom den markerede raekke paa en
   lige plads, forsvandt markeringen. Samme fejl som `.btn.danger` i v2.20.533:
   EN FARVE, DER KUN GAELDER I DEN ENE RETNING, ER INGEN FARVE. */
html:root .content .customer-datakilder539 tbody tr.datakilde-stille539 td{background:var(--c-crit-soft)}
html:root .content .sophos-wrap494 tbody tr.sophos-sum540 td{background:var(--c-accent-soft);font-weight:600}
html:root .content .sophos-wrap494 tbody tr.sophos-afvig541 td,html:root .content .sophos-kontrol541 tbody tr.sophos-afvig541 td{background:var(--c-crit-soft)}
html:root td strong{color:var(--c-ink);font-weight:600}
html:root .money{font-weight:700}

/* ---- statusfelter: rektangler, ikke kapsler ---------------------- */
/* Statusfeltet beholder sin STOERRELSE. Browseren viste hvorfor: i en tabel med
   faste kolonnebredder braekkede et 13 px felt «active» til «acti / ve», og
   ALSO-maerket laa oven i rabatprocenten. B's forskel er FORM og FARVE - firkantet
   i stedet for kapsel, normale bogstaver i stedet for versaler, kraftigere status -
   og den forskel koster ingen bredde. `nowrap` er tilfoejet, saa et statusord aldrig
   kan braekke midt over, uanset hvor smal kolonnen bliver. */
html:root .pill{
  border-radius:6px;
  font-size:var(--t-5);
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  padding:4px 8px;
  white-space:nowrap;
  background:var(--c-surface-3);
  color:var(--c-ink-2);
}
html:root .pill.green{background:var(--c-pos-soft);color:var(--c-pos)}
html:root .pill.red{background:var(--c-crit-soft);color:var(--c-crit)}
html:root .pill.amber,
html:root .pill.yellow{background:var(--c-warn-soft);color:var(--c-warn)}
html:root .pill.grey{background:var(--c-surface-3);color:var(--c-ink-2)}
/* v2.20.560 - «undtaget» skal kunne ses som en beslutning og ikke som et maal.
   `html:root .pill.grey` ovenfor vejer tungere end `.pill.undtaget560` i style.css,
   saa reglen gentages her - samme aarsag som raekkefarverne i v2.20.540. */
html:root .pill.undtaget560{background:transparent;border:1px dashed var(--c-ink-3)}
/* v2.20.427 – «OK» hedder 'success' i tone-funktionen, ikke 'green'. Reglen i style.css
   raekker ikke her: html:root .pill vejer tungere end .pill.success, saa B's
   egen neutrale pille vandt, og OK blev graa igen. En basisregel for .pill forpligter
   altsaa til at daekke HVER variant - ellers falder de, den ikke naevner, tilbage paa
   ingenting. En test kraever det nu af begge filer. */
html:root .pill.success{background:var(--c-pos-soft);color:var(--c-pos)}
/* Og testen fandt to mere af samme slags med det samme: 'review' og 'blue' havde heller
   aldrig en regel under B. «Til gennemgang» og «Kører» faldt begge tilbage paa den
   neutrale pille - fire af driftssidens seks tilstande saa altsaa ens ud. */
html:root .pill.review{background:var(--c-accent-soft);color:var(--c-accent-ink)}
html:root .pill.blue{background:var(--c-accent);color:var(--c-on-accent)}

/* ---- faner ------------------------------------------------------- */
html:root .tabs{border-bottom-color:var(--c-line)}
html:root .tab{font-size:var(--t-3);font-weight:500;color:var(--c-ink-3);padding:10px var(--s-2)}
html:root .tab.active{color:var(--c-ink);border-color:var(--c-accent);font-weight:600}

/* ---- beskeder: kant til venstre, så alvoren ses før teksten læses -- */
html:root .notice{border-radius:var(--r-b);font-size:var(--t-4);padding:var(--s-2) var(--s-3)}
html:root .notice.warn,
html:root .notice.warning{
  background:var(--c-warn-soft);border:1px solid #FCD34D;border-left:6px solid var(--c-warn);color:#78350F;
}
html:root .notice.warn strong,
html:root .notice.warning strong{color:#78350F;font-size:var(--t-3);font-weight:600}
html:root .notice.danger{
  background:var(--c-crit-soft);border:1px solid #FCA5A5;border-left:6px solid var(--c-crit);color:#7F1D1D;
}

/* ---- telefonen: B skal ikke koste det, v2.20.420 vandt ----------- */
@media(max-width:760px){
  html:root .topbar input,
  html:root .topbar .btn{min-height:44px}
  html:root table[data-cards420] tr{border-color:var(--c-line);border-radius:var(--r-b)}
  html:root table[data-cards420] td{border:0;background:none;font-size:var(--t-4)}
  html:root table[data-cards420] td:before{font-size:var(--t-5)}
  html:root table[data-cards420] tbody tr:nth-child(even) td{background:none}
}

/* ---- rettet i afprøvningen --------------------------------------
   Browsermålingen fandt ét kontrastbrud på licensskærmen: .wiki-kicker
   («STYRING») stod på 1,35:1. Den farve er hårdkodet i style.css, så
   intet token kan nå den — præcis det, der er forudsagt højere oppe.
   Den er rettet her, fordi B ikke må arve et læsbarhedsproblem. At den
   også står for lyst i det NUVÆRENDE design er en selvstændig sag. */
html:root .wiki-kicker{
  color:var(--c-ink-3);
  font-size:var(--t-5);
  letter-spacing:.08em;
  font-weight:600;
}

/* v2.20.549 - detaljeraekken under en haendelse. Den skal ogsaa staa i B, og den
   skal skrives paa TD af samme grund som alle andre raekkefarver her: B's egen
   regel for hver anden raekke staar paa `html:root tbody tr:nth-child(even) td`,
   og en regel paa TR ville tabe til den. */
html:root .haendelse-detalje549>td{
  background:var(--c-surface-2);
  color:var(--c-ink-2);
}
html:root .sla-maerke549{
  border-radius:var(--r-2,6px);
  letter-spacing:.01em;
}

/* v2.20.550 - samme to i design B. */
html:root .vm-daekning-grund550{color:var(--c-ink-2)}
html:root .tsm-felt-diagnose550>summary{color:var(--c-ink-2)}

/* v2.20.551 */
html:root .vm-felt-diagnose551>summary{color:var(--c-ink-2)}

/* v2.20.557 - etiket og forklaring staar paa hver sin linje, ogsaa i B. */
html:root .register-hjaelp557{color:var(--c-ink-3)}
html:root .register-forklaring557{color:var(--c-ink-2)}