/* =============================================================================
   HVIDS DESIGN — fælles stilark
   -----------------------------------------------------------------------------
   ÉN KILDE TIL SANDHED. Alle HVIDS-værktøjer importerer denne fil frem for at
   have deres egen kopi af farver, fonte og komponenter.

   Baggrund: 29. juli 2026 havde fem brugerflader hver sin kopi af paletten, og
   de var drevet fra hinanden — 44 farver uden for paletten i Salgspilot, 28 i
   Kapacitetsanalyse, og fonte der blev hentet ind uden at blive brugt.

   UNDTAGELSE: Brandpilot følger INGENIØR'NEs udtryk og skal IKKE bruge denne fil.

   Sådan bruges den:
     <link rel="stylesheet" href="hvids-design.css">
   Læg linket FØR sidens eget <style>, så lokale regler stadig kan overskrive.

   FONTE HENTES IKKE HERFRA. Filen hentede før selv Space Grotesk og IBM Plex Sans
   med @import. Det blev fjernet 5. august 2026, fordi hver eneste flade allerede
   havde sit eget Google Fonts-link — importen var en dublet alle steder på nær ét,
   og dét ene sted er Konsekvensklasse, som bevidst kører uden eksterne fonte og har
   en CSP der blokerer dem. Importen ville altså aldrig hjælpe nogen, og ville koste
   en CSP-overtrædelse i konsollen netop dér hvor fontene manglede.
   Sidens eget <link> til Google Fonts er derfor fortsat sidens eget ansvar.

   Ret ALDRIG i en kopi. Ret her, og kør synk-scriptet — se README.md.
   ============================================================================= */

:root {
  /* ── Kerne ────────────────────────────────────────────────────────────── */
  --hvids-navy:     #050816;   /* Primær baggrund */
  --hvids-blue:     #1B4FFF;   /* Brand accent — CTA-flader, ikke tekst */
  --hvids-electric: #5FA8FF;   /* Glow, highlights, aktive tilstande */
  --hvids-silver:   #B7C2D0;   /* Sekundær tekst, metallic detaljer */
  --hvids-white:    #F4F6F9;   /* Tekst på mørk flade */
  --hvids-border:   #1A223B;   /* Kanter og skillelinjer */

  /* ── Brand-accent: "I"-bogstavet i HVIDS ───────────────────────────────
     Den ENESTE godkendte lilla tone, og kun til mærket. Ikke som UI-accent. */
  --hvids-iris:     #B08EFF;

  /* ── Human-palette (sekundær, varm) ────────────────────────────────────
     Afspejler "Human" i Human Vision in Digital Solutions. Bruges hvor det
     menneskelige fremhæves — typisk om-sider. Skal forblive sekundær. */
  --human:          #E6C7A6;
  --human-deep:     #D9B38C;

  /* ── Tilstandsfarver (tilføjet 29. juli 2026) ──────────────────────────
     Manglede i systemet, så hver app opfandt sine egne: Salgspilot havde
     #fca5a5, Konsekvensklasse #ff6b6b, Kapacitetsanalyse #b83232. Værdierne
     herunder er dem fra Konsekvensklasse — de var bedst afstemt med paletten.
     Alle tre er målt mod --hvids-navy og består WCAG AA (4.5:1):
       danger  7.2:1    warning 11.3:1    success 10.6:1                    */
  --hvids-danger:   #FF6B6B;
  --hvids-warning:  #FFB454;
  --hvids-success:  #3ED598;

  /* Dæmpede flader til de samme tilstande — til baggrund bag en besked.
     Lav opacitet frem for en fast tone, så de virker på enhver mørk flade. */
  --hvids-danger-bg:  rgba(255,107,107,.10);
  --hvids-warning-bg: rgba(255,180,84,.10);
  --hvids-success-bg: rgba(62,213,152,.10);

  /* ── Tilstandsfarver på LYS flade ──────────────────────────────────────
     De tre ovenfor er valgt mod --hvids-navy og fungerer kun dér. Sættes de
     på et hvidt kort, forsvinder de: advarselsgul giver 1,8:1 mod hvid, hvor
     kravet for et ikon er 3:1 og for tekst 4,5:1. Systemet er dark-mode first,
     men hvor der findes et lyst tema, skal disse bruges i stedet.
       danger-l 5,9:1   warning-l 3,2:1 (ikon)   success-l 4,6:1             */
  --hvids-danger-l:   #C0392B;
  --hvids-warning-l:  #C97F14;
  --hvids-success-l:  #1B7A55;

  /* ── Typografi ────────────────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', Arial, sans-serif;   /* overskrifter, UI-labels */
  --font-body:    'IBM Plex Sans', Arial, sans-serif;   /* brødtekst, data */

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-hvids:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-hover:      180ms;
  --duration-transition: 240ms;

  /* ── Flader ───────────────────────────────────────────────────────────
     Kort- og feltbaggrunde som tokens frem for faste rgba-værdier inde i
     komponentreglerne. Uden dem kan det lyse tema ikke overtage fladerne. */
  /* To solide flader mellem navy og border. Portal og Admin havde begge et
     "navy2"/"navy3" til hævede og sænkede flader — men med hver sin værdi for
     navy3 (#080E1C mod #0D1424). Samlet her på Portals værdier.               */
  --hvids-navy-2:    #0D1528;                /* hævet flade — modal, kort */
  --hvids-navy-3:    #080E1C;                /* sænket flade — tabelrække, felt */

  --hvids-surface:   rgba(26, 34, 59, .5);   /* kort */
  --hvids-surface-2: rgba(5, 8, 22, .8);     /* felter, indsatte flader */
  --hvids-text-mid:  rgba(183, 194, 208, .8);/* dæmpet tekst mellem silver og white */

  /* ── Rundinger ────────────────────────────────────────────────────────── */
  --radius-card:  12px;
  --radius-input:  6px;
}

/* ═══ LYST TEMA ══════════════════════════════════════════════════════════════
   Tilføjet 5. august 2026. Et lyst tema fandtes allerede — identisk defineret i
   Hjemmeside/theme-light-portal.css og LCA's theme-light.css — men stod ikke i
   systemet, så nye flader havde intet at slå op i. Værdierne herunder er de to
   filers, uændrede; dette er en flytning, ikke et nyt design.

   Bemærk at --hvids-navy og --hvids-white BYTTER rolle: navy er "baggrund" og
   white er "tekst på baggrunden", ikke bogstavelige farver. Det er samme greb som
   de eksisterende lyse temaer bruger, så eksisterende regler virker uændret.

   --hvids-electric bliver til blå: #5FA8FF har 1,9:1 mod hvid og forsvinder.
   Tilstandsfarverne skifter til deres -l-udgaver af samme grund.             */
:root[data-theme="light"] {
  --hvids-navy:      #F4F6F9;
  --hvids-white:     #0A0E1A;
  --hvids-silver:    #5A6B82;
  --hvids-border:    #D5DCE6;
  --hvids-electric:  #1B4FFF;

  --hvids-navy-2:    #FFFFFF;
  --hvids-navy-3:    #ECEFF4;

  --hvids-surface:   #FFFFFF;
  --hvids-surface-2: #ECEFF4;
  --hvids-text-mid:  #2E3A4D;

  --human:           #B97D3C;
  --human-deep:      #9A5F22;

  --hvids-danger:    var(--hvids-danger-l);
  --hvids-warning:   var(--hvids-warning-l);
  --hvids-success:   var(--hvids-success-l);

  /* Kraftigere end de mørke pendanter: 10 % dækning forsvinder på hvidt. */
  --hvids-danger-bg:  rgba(192, 57, 43, .08);
  --hvids-warning-bg: rgba(201, 127, 20, .10);
  --hvids-success-bg: rgba(27, 122, 85, .08);
}

/* ── Basis ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hvids-navy);
  color: var(--hvids-white);
  font-family: var(--font-body);
}

/* Dark-mode first: hvide flader er undtagelsen, ikke udgangspunktet. */

/* Skrift og vægt sættes på elementet — det er identitet, og enhver HVIDS-overskrift
   skal have den. STØRRELSE sættes IKKE. Det var den før: h1 stod til 64px her.
   Da stilarket blev lagt ind i de eksisterende flader 5. august 2026, viste en
   optælling at ti sider ikke selv satte h1 — de ville alle være sprunget til 64px
   uden at nogen havde bedt om det. En størrelse er layout og hører til siden;
   et fælles stilark skal kunne lægges oven i en færdig side uden at flytte noget.

   Reglen ramte før h1-h4 direkte og satte ogsaa margin: 0. Det er den farligste
   linje i hele filen: .page-title paa de offentlige sider saetter margin-bottom, men
   ikke margin-top, saa browserens 0,67em top-margin ville forsvinde — omkring 43px
   ved en 64px overskrift, paa hver eneste offentlig side. Ingen havde bedt om det.

   Derfor er ALT paa overskrifter nu tilvalg. Saet .h-1/.h-2/.h-3/.h-4 paa nye
   overskrifter; eksisterende sider staar uroert. Prisen er at en ustylet <h1> ikke
   automatisk faar brandets skrift — den pris er lavere end en utilsigtet ombrydning
   af ti faerdige sider. */
.h-1, .h-2, .h-3, .h-4 { font-family: var(--font-display); font-weight: 500; margin: 0; }

.h-1 { font-size: 64px; font-weight: 600; }
.h-2 { font-size: 40px; }
.h-3 { font-size: 28px; }

/* Tilgængelighed: skal respekteres, ikke tilvælges. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Synligt fokus. Uden dette kan siden ikke betjenes med tastatur. */
:focus-visible { outline: 2px solid var(--hvids-electric); outline-offset: 2px; }

/* ── Kort ──────────────────────────────────────────────────────────────── */
.hcard {
  background: var(--hvids-surface);
  border: 1px solid var(--hvids-border);
  border-radius: var(--radius-card);
  padding: 20px;
  backdrop-filter: blur(8px);
  transition: border-color var(--duration-transition) var(--ease-hvids),
              box-shadow  var(--duration-transition) var(--ease-hvids);
}
.hcard:hover { border-color: var(--hvids-electric); box-shadow: 0 0 24px rgba(95,168,255,.12); }
/* Statisk variant — samme flade, men reagerer ikke. Til kort man ikke kan klikke. */
.hcard-s { background: var(--hvids-surface); border: 1px solid var(--hvids-border);
           border-radius: var(--radius-card); padding: 20px; backdrop-filter: blur(8px); }

/* Diagonalt "engineering cut" — subtil premium-detalje i kortets hjørne. */
.eng-cut { position: relative; overflow: hidden; }
.eng-cut::after {
  content: ''; position: absolute; top: 0; right: 0; width: 64px; height: 64px;
  background: linear-gradient(135deg, transparent 50%, rgba(95,168,255,.10) 50%);
  pointer-events: none;
}

/* ── Knapper ───────────────────────────────────────────────────────────── */
.btn-p {
  background: linear-gradient(135deg, var(--hvids-blue) 0%, #3060ff 100%);
  color: var(--hvids-white); border: none; border-radius: var(--radius-input);
  padding: 9px 20px; font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 24px rgba(27,79,255,.26), inset 0 1px 0 rgba(255,255,255,.1);
  transition: box-shadow 200ms var(--ease-hvids), transform 200ms var(--ease-hvids);
}
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(27,79,255,.42), inset 0 1px 0 rgba(255,255,255,.1); }

.btn-s {
  background: transparent; color: var(--hvids-white);
  border: 1.5px solid var(--hvids-border); border-radius: var(--radius-input);
  padding: 7px 16px; font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: border-color var(--duration-hover) var(--ease-hvids);
}
.btn-s:hover { border-color: var(--hvids-electric); }

.btn-ghost {
  background: none; border: none; color: var(--hvids-electric);
  padding: 12px 0; font-family: var(--font-display); font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}

/* Farlig handling — sletning. Rammen frem for fladen: knappen skal kunne ses,
   men ikke indbyde mere end den primære. */
.btn-danger {
  background: transparent; color: var(--hvids-danger);
  border: 1.5px solid var(--hvids-danger); border-radius: var(--radius-input);
  padding: 7px 16px; font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  transition: background var(--duration-hover) var(--ease-hvids);
}
.btn-danger:hover { background: var(--hvids-danger-bg); }

.btn-p:disabled, .btn-s:disabled, .btn-danger:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ── Formularfelter ────────────────────────────────────────────────────── */
.hinput {
  background: var(--hvids-surface-2); border: 1px solid var(--hvids-border);
  border-radius: var(--radius-input); color: var(--hvids-white);
  padding: 6px 10px; font-family: var(--font-body); font-size: 12px; outline: none;
  transition: border-color var(--duration-hover) var(--ease-hvids);
}
.hinput:focus { border-color: var(--hvids-blue); }
.hinput[aria-invalid="true"] { border-color: var(--hvids-danger); }

/* Feltets etiket. Store bogstaver og vid spatiering — teknisk, ikke skrigende. */
.hlbl {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 500;
  color: var(--hvids-electric); text-transform: uppercase;
  letter-spacing: .28em; margin-bottom: 8px;
}

/* ── Faner ─────────────────────────────────────────────────────────────── */
.htab {
  background: none; border: none; cursor: pointer; font-family: var(--font-display);
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 18px; white-space: nowrap; border-bottom: 2px solid transparent;
  color: var(--hvids-silver);
  transition: color var(--duration-hover) var(--ease-hvids);
}
.htab:hover { color: var(--hvids-white); }
.htab.on { color: var(--hvids-electric); border-bottom-color: var(--hvids-electric); }

/* ── Beskeder ──────────────────────────────────────────────────────────── */
/* Farve alene er ikke tilstrækkeligt til at bære betydning — sæt altid et ord
   eller et ikon i beskeden, så den også virker for farveblinde. */
.h-msg {
  border-radius: var(--radius-input); padding: 10px 14px;
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  border-left: 3px solid transparent;
}
.h-msg.fejl     { color: var(--hvids-danger);  background: var(--hvids-danger-bg);  border-left-color: var(--hvids-danger); }
.h-msg.advarsel { color: var(--hvids-warning); background: var(--hvids-warning-bg); border-left-color: var(--hvids-warning); }
.h-msg.ok       { color: var(--hvids-success); background: var(--hvids-success-bg); border-left-color: var(--hvids-success); }
.h-msg.info     { color: var(--hvids-silver);  background: rgba(95,168,255,.06);    border-left-color: var(--hvids-electric); }

/* Tekstfarver til inline-brug, hvor en hel besked er for meget. */
.t-fejl { color: var(--hvids-danger); }
.t-advarsel { color: var(--hvids-warning); }
.t-ok { color: var(--hvids-success); }
.t-svag { color: var(--hvids-silver); }

/* ── Navigation ────────────────────────────────────────────────────────── */
.hnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px; height: 68px;
  background: rgba(5, 8, 22, .45);
  backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(26, 34, 59, .4);
}
.hnav a {
  color: rgba(183, 194, 208, .65); font-family: var(--font-body); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transition: color var(--duration-hover) var(--ease-hvids);
}
.hnav a:hover { color: var(--hvids-white); }
.hnav a.active { color: var(--hvids-electric); }

/* ── Mobil ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .h-1 { font-size: 36px; }
  .h-2 { font-size: 28px; }
  .h-3 { font-size: 22px; }
  .hnav { padding: 0 24px; }
  /* Slå GPU-tunge effekter fra: backdrop-filter koster mærkbart på telefoner. */
  .hcard, .hcard-s, .hnav { backdrop-filter: none; }
  .hcard:hover { border-color: var(--hvids-border); box-shadow: none; }
  .btn-p:hover { transform: none; }
}