/* =====================================================================
   EjendomsRadar - DESIGN LOCK tokens
   ---------------------------------------------------------------------
   Farverne herunder er hentet direkte ud af de to godkendte
   designbilleder (den samlede 19-siders oversigt + den godkendte
   opdatering af side 6, 7, 11 og 12) ved at maale pixelfarverne, ikke
   ved at gaette. Filen er et TOKEN-ARK: den saetter kun variabler.
   Den er bevidst ikke koblet paa nogen skaerm endnu - udrulningen
   venter paa Mortens valg af retning efter proof-of-concept, praecis
   som designordren foreskriver.
   ===================================================================== */
:root{
  /* --- Moerk flade: platformens arbejdsrum ------------------------- */
  --dl-midnat:      #011A2C;  /* dybeste side-baggrund               */
  --dl-navy:        #022138;  /* sidebar / topbjaelke                */
  --dl-panel:       #0B2A3F;  /* kort og paneler paa moerk flade     */
  --dl-panel-haev:  #133449;  /* haevet kort, hover                  */
  --dl-linje:       #1B4059;  /* kantlinje paa moerk flade           */
  --dl-staal:       #2C5162;  /* rolige flader, deaktiveret          */

  /* --- Tekst paa moerk flade -------------------------------------- */
  --dl-blaek-lys:   #F4F8FB;  /* primaer tekst                       */
  --dl-daemp:       #82A6B9;  /* sekundaer tekst                     */
  --dl-daemp-dyb:   #6C95A5;  /* labels, enheder                     */

  /* --- Lys flade: rapporter, revisor, dokumenter ------------------- */
  --dl-flade:       #FFFFFF;  /* kort paa lys flade                  */
  --dl-flade-off:   #F9FAFB;  /* sidebaggrund lys                    */
  --dl-flade-varm:  #F7F7F2;  /* varm off-white                      */
  --dl-kold:        #ECF2F2;  /* koldt lyst felt                     */
  --dl-sten:        #E1DDCA;  /* varm stone/cream                    */
  --dl-blaek:       #0B1F2E;  /* tekst paa lys flade                 */

  /* --- Accenter ---------------------------------------------------- */
  --dl-champagne:   #C4AD89;  /* premium accent, knapper, rammer     */
  --dl-champagne-l: #F8DBA9;  /* lys champagne, highlights           */
  --dl-data:        #1A8EF3;  /* datablaa: grafer, aktive elementer  */
  --dl-data-rolig:  #4398BB;  /* rolig cyanblaa: kortlag, linjer     */

  /* --- Status: kun hvor status faktisk kraever det ------------------ */
  --dl-ok:          #30B97B;  /* positiv / verificeret / OK          */
  --dl-ok-dyb:      #158069;  /* dyb sage, ESG                       */
  --dl-obs:         #FEC757;  /* opmaerksomhed / afventer            */
  --dl-risiko:      #D2785D;  /* reel risiko / advarsel              */

  /* --- Form og rytme ----------------------------------------------- */
  --dl-radius:      12px;
  --dl-radius-lil:  8px;
  --dl-radius-pil:  999px;
  --dl-skygge:      0 1px 2px rgba(1,26,44,.10), 0 8px 24px rgba(1,26,44,.10);
  --dl-skygge-moerk:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.30);
  --dl-luft:        16px;
  --dl-luft-stor:   28px;
}

/* Grafernes serier - saa soejler og kurver bruger samme palette.
   Raekkefoelgen er den, graferne skal tage farver i. */
:root{
  --dl-serie-1: var(--dl-data);
  --dl-serie-2: var(--dl-ok);
  --dl-serie-3: var(--dl-champagne);
  --dl-serie-4: var(--dl-data-rolig);
  --dl-serie-5: var(--dl-obs);
  --dl-serie-6: var(--dl-risiko);
}

/* Respekter brugere der har slaaet bevaegelse fra. Designordren
   kraever mikroanimation - men aldrig paa bekostning af dette. */
@media (prefers-reduced-motion: reduce){
  :root{ --dl-overgang: none; }
}
:root{ --dl-overgang: 180ms cubic-bezier(.2,.6,.2,1); }

/* --- Skaermenes egne accenter. Alle vaerdier ligger inde i designlaasen;
       ingen side maa opfinde en farve. Seks familier efter hvad skaermen
       handler om, saa to naboskaerme aldrig ser ens ud. --- */
html[data-side="hoveddashboard"], html[data-side="roentgen"],
html[data-side="ejendom"], html[data-side="analytics"],
html[data-side="kildestatus"]{
  --accent:var(--dl-data,#1A8EF3);
  --accent-blod:var(--dl-data-rolig,#4398BB);
  --accent-kant:rgba(26,142,243,.34);
}
html[data-side="kortplanbyg"], html[data-side="tegn"],
html[data-side="stg_mobil_eftersyn"], html[data-side="twin"],
html[data-side="oti_kort"], html[data-side="stg_metode"]{
  --accent:var(--dl-data-rolig,#4398BB);
  --accent-blod:var(--dl-daemp,#82A6B9);
  --accent-kant:rgba(67,152,187,.34);
}
html[data-side="handler"], html[data-side="ejervisning"],
html[data-side="portefoelje"], html[data-side="virksomhed"],
html[data-side="relationship_frontend"], html[data-side="revisorvisning"],
html[data-side="revisor_cockpit"], html[data-side="revisorvisning_faner"]{
  --accent:var(--dl-champagne,#C4AD89);
  --accent-blod:var(--dl-champagne-l,#F8DBA9);
  --accent-kant:rgba(196,173,137,.34);
}
html[data-side="energi"], html[data-side="husleje"],
html[data-side="laan"], html[data-side="aktiver"]{
  --accent:var(--dl-ok,#30B97B);
  --accent-blod:var(--dl-ok-dyb,#158069);
  --accent-kant:rgba(48,185,123,.34);
}
html[data-side="overvaagning"], html[data-side="duediligence"],
html[data-side="oti_adfaerd"], html[data-side="oti_bevaegelse"],
html[data-side="oti_koncentration"]{
  --accent:var(--dl-obs,#FEC757);
  --accent-blod:var(--dl-champagne,#C4AD89);
  --accent-kant:rgba(254,199,87,.30);
}
html[data-side="rapport"], html[data-side="demo_center"],
html[data-side="crm"], html[data-side="stg_master_demo"],
html[data-side="stg_slutkontrol"]{
  --accent:var(--dl-risiko,#D2785D);
  --accent-blod:var(--dl-obs,#FEC757);
  --accent-kant:rgba(210,120,93,.34);
}

/* ==========================================================================
   GODKENDT DESIGNREFERENCE 11-09-2026
   Moerk premium-navigation + toplinje + KPI-kort.
   Gaelder alle 19 skaerme. Se dokumentation/designreference/.
   ========================================================================== */

:root {
  --er-navy:        #0f2744;   /* moerk navigation */
  --er-navy-dyb:    #0a1c31;
  --er-navy-lys:    #1b3a5f;
  --er-accent:      #2f6fed;   /* primaer blaa */
  --er-accent-blod: #e8f0fe;
  --er-guld:        #c9a227;   /* aktivt punkt */
  --er-flade:       #f4f6f9;   /* lys analyseflade */
  --er-kort:        #ffffff;
  --er-linje:       #e3e8ef;
  --er-tekst:       #16233a;
  --er-tekst-svag:  #6b7a90;
  --er-op:          #16a34a;   /* positiv aendring */
  --er-ned:         #dc2626;   /* negativ aendring */
  --er-radius:      14px;
  --er-skygge:      0 1px 2px rgba(16,35,58,.06), 0 8px 24px rgba(16,35,58,.08);
}

/* ---------- Skallen ---------- */
.er-skal        { display: flex; min-height: 100vh; background: var(--er-flade); }
.er-nav         { width: 232px; flex: 0 0 232px; background: var(--er-navy);
                  color: #cfe0f5; display: flex; flex-direction: column;
                  padding: 18px 0; }
.er-nav-logo    { padding: 0 20px 22px; }
.er-nav-logo b  { display: block; color: #fff; font-size: 17px; letter-spacing: -.2px; }
.er-nav-logo span { display: block; color: #7e9cc0; font-size: 11px; margin-top: 2px; }
.er-nav a       { display: flex; align-items: center; gap: 11px;
                  padding: 10px 20px; color: #cfe0f5; text-decoration: none;
                  font-size: 14px; border-left: 3px solid transparent; }
.er-nav a:hover { background: var(--er-navy-lys); color: #fff; }
.er-nav a.aktiv { background: var(--er-navy-lys); color: #fff;
                  border-left-color: var(--er-guld); font-weight: 600; }
.er-nav-ikon    { width: 17px; text-align: center; opacity: .85; }

/* ---------- Toplinje ---------- */
.er-indhold     { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.er-bjaelke         { display: flex; align-items: center; gap: 14px;
                  padding: 12px 22px; background: var(--er-kort);
                  border-bottom: 1px solid var(--er-linje); }
.er-soeg        { flex: 1; max-width: 560px; position: relative; }
.er-soeg input  { width: 100%; padding: 9px 14px 9px 36px; font-size: 14px;
                  border: 1px solid var(--er-linje); border-radius: 999px;
                  background: var(--er-flade); color: var(--er-tekst); }
.er-soeg input:focus { outline: none; border-color: var(--er-accent);
                  background: #fff; box-shadow: 0 0 0 3px var(--er-accent-blod); }
.er-soeg-ikon   { position: absolute; left: 13px; top: 50%;
                  transform: translateY(-50%); color: var(--er-tekst-svag); }
.er-bjaelke-hoejre  { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.er-klokke      { position: relative; color: var(--er-tekst-svag);
                  font-size: 17px; cursor: pointer; }
.er-klokke b    { position: absolute; top: -4px; right: -5px; min-width: 15px;
                  height: 15px; border-radius: 999px; background: var(--er-ned);
                  color: #fff; font-size: 9px; line-height: 15px;
                  text-align: center; font-weight: 700; }
.er-bruger      { width: 34px; height: 34px; border-radius: 999px;
                  background: var(--er-navy); color: #fff; font-size: 12px;
                  font-weight: 700; display: flex; align-items: center;
                  justify-content: center; letter-spacing: .4px; }

/* ---------- Sidehoved ---------- */
.er-side        { padding: 20px 22px 34px; }
.er-sidehoved   { margin-bottom: 18px; }
.er-sidehoved h1 { margin: 0; font-size: 21px; letter-spacing: -.3px;
                  color: var(--er-tekst); }
.er-sidehoved p { margin: 4px 0 0; font-size: 13.5px; color: var(--er-tekst-svag); }

/* ---------- Kort og KPI ---------- */
.er-kort        { background: var(--er-kort); border: 1px solid var(--er-linje);
                  border-radius: var(--er-radius); box-shadow: var(--er-skygge);
                  padding: 16px 18px; }
.er-kpi-raekke  { display: grid; gap: 14px; margin-bottom: 18px;
                  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.er-kpi         { background: var(--er-kort); border: 1px solid var(--er-linje);
                  border-radius: var(--er-radius); box-shadow: var(--er-skygge);
                  padding: 15px 17px; }
.er-kpi-tal     { font-size: 25px; font-weight: 700; letter-spacing: -.6px;
                  color: var(--er-tekst); line-height: 1.15; }
.er-kpi-navn    { font-size: 12.5px; color: var(--er-tekst-svag); margin-top: 3px; }
.er-kpi-delta   { display: inline-flex; align-items: center; gap: 3px;
                  font-size: 12px; font-weight: 600; margin-top: 7px; }
.er-op          { color: var(--er-op); }
.er-ned         { color: var(--er-ned); }

/* ---------- Moerke skaerme (6 Handler & Marked, 7 Markedsintelligence) ---- */
.er-moerk                 { background: var(--er-navy-dyb); }
.er-moerk .er-bjaelke         { background: var(--er-navy); border-bottom-color: #16324f; }
.er-moerk .er-soeg input  { background: #143152; border-color: #1f4a76; color: #e6eefb; }
.er-moerk .er-sidehoved h1 { color: #fff; }
.er-moerk .er-sidehoved p  { color: #8fb0d4; }
.er-moerk .er-kort,
.er-moerk .er-kpi         { background: rgba(20,49,82,.82); border-color: #1f4a76;
                            color: #e6eefb; backdrop-filter: blur(6px); }
.er-moerk .er-kpi-tal     { color: #fff; }
.er-moerk .er-kpi-navn    { color: #8fb0d4; }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .er-skal { flex-direction: column; }
  .er-nav  { width: 100%; flex: none; flex-direction: row; overflow-x: auto;
             padding: 8px 0; }
  .er-nav-logo { display: none; }
  .er-nav a { white-space: nowrap; border-left: none;
              border-bottom: 3px solid transparent; padding: 9px 14px; }
  .er-nav a.aktiv { border-left: none; border-bottom-color: var(--er-guld); }
  .er-side { padding: 16px; }
}

/* ================================================================
   FAST SKAL - den godkendte premium-ramme fra referencebillederne.
   Rammen ligger fast udenom siden (position:fixed) og skubber
   indholdet ind med polstring paa <body>. Ingen af sidens egne
   knuder flyttes, saa kort, grafer og lyttere overlever uroert.
   ================================================================ */
body.er-har-skal { margin:0; padding-left:232px; padding-top:58px;
  background:var(--er-flade); color:var(--er-tekst); }

.er-nav { position:fixed; top:0; left:0; bottom:0; width:232px; z-index:60;
  background:var(--er-navy); color:#cfe0f5; display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain; }
.er-nav-brand { display:flex; align-items:center; gap:10px; padding:16px 18px 14px;
  font-weight:700; color:#fff; letter-spacing:-.2px; font-size:15px; }
.er-nav-logo { width:30px; height:30px; border-radius:9px; background:var(--er-guld);
  color:#1a1400; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; letter-spacing:.5px; flex:0 0 auto; }
.er-nav-liste { display:flex; flex-direction:column; padding:4px 0; }
.er-nav a { display:flex; align-items:center; gap:11px; padding:9px 18px;
  color:#b9cce4; text-decoration:none; font-size:13.5px; line-height:1.3;
  border-left:3px solid transparent; }
.er-nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.er-nav a.aktiv { background:var(--er-navy-lys); color:#fff;
  border-left-color:var(--er-guld); font-weight:600; }
.er-nav .er-ikon { width:17px; height:17px; flex:0 0 17px; fill:currentColor; opacity:.86; }
.er-nav-mere { margin-top:6px; border-bjaelke:1px solid rgba(255,255,255,.10); padding-top:6px; }
.er-nav-mereknap { width:100%; text-align:left; background:none; border:0; cursor:pointer;
  color:#8ba6c6; font:inherit; font-size:11px; letter-spacing:.8px;
  text-transform:uppercase; padding:9px 18px; }
.er-nav-mereknap:hover { color:#fff; }
.er-nav-mereliste a { padding:7px 18px 7px 34px; font-size:12.5px; }
.er-nav-bund { margin-top:auto; padding:14px 18px; font-size:11px; color:#7e97b5;
  border-bjaelke:1px solid rgba(255,255,255,.10); }

.er-bjaelke { position:fixed; top:0; left:232px; right:0; height:58px; z-index:55;
  display:flex; align-items:center; gap:14px; padding:0 20px;
  background:var(--er-kort); border-bottom:1px solid var(--er-linje); }
.er-bjaelke-titel { font-weight:650; font-size:15px; color:var(--er-tekst); white-space:nowrap; }
.er-soeg { flex:1 1 auto; max-width:520px; margin:0; }
.er-soeg input { width:100%; box-sizing:border-box; height:36px; padding:0 15px;
  border:1px solid var(--er-linje); border-radius:999px; background:var(--er-flade);
  font:inherit; font-size:13px; color:var(--er-tekst); }
.er-soeg input:focus { outline:none; border-color:var(--er-accent); background:#fff;
  box-shadow:0 0 0 3px rgba(47,111,237,.14); }
.er-bjaelke-hoejre { margin-left:auto; display:flex; align-items:center; gap:12px; }
.er-bruger { width:34px; height:34px; border-radius:999px; background:var(--er-navy);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex:0 0 auto; }
.er-bruger .er-ikon { width:18px; height:18px; fill:#fff; }
.er-bjaelke-vaerktoej { display:flex; align-items:center; gap:8px; }
.er-burger { display:none; background:none; border:0; cursor:pointer; padding:6px;
  color:var(--er-tekst); }
.er-burger .er-ikon { width:22px; height:22px; fill:currentColor; }
.er-slaeb { display:none; }

.er-fodnote { margin:26px 20px 18px; padding-top:14px; border-bjaelke:1px solid var(--er-linje);
  font-size:11.5px; color:var(--er-tekst-svag); line-height:1.6; }
body.erskal-fuld .er-fodnote { display:none; }

body.er-moerk.er-har-skal { background:var(--er-navy-dyb); color:#e6eefb; }
body.er-moerk .er-bjaelke { background:#0e2340; border-bottom-color:#1f4a76; color:#e6eefb; }
body.er-moerk .er-bjaelke-titel { color:#e6eefb; }
body.er-moerk .er-soeg input { background:#132e4f; border-color:#1f4a76; color:#e6eefb; }
body.er-moerk .er-burger { color:#e6eefb; }
body.er-moerk .er-fodnote { border-bjaelke-color:#1f4a76; color:#8fb0d6; }

@media (max-width:860px) {
  body.er-har-skal { padding-left:0; }
  .er-nav { width:264px; flex-direction:column; overflow-x:hidden;
    transform:translateX(-100%); transition:transform .18s ease; }
  body.er-nav-aaben .er-nav { transform:none; box-shadow:0 0 40px rgba(0,0,0,.45); }
  .er-bjaelke { left:0; padding:0 12px; }
  .er-burger { display:inline-flex; }
  .er-bjaelke-titel { display:none; }
  .er-slaeb { display:block; position:fixed; top:58px; left:0; right:0; bottom:0;
    z-index:50; background:rgba(8,20,36,.45); }
  /* ER SKUFFEN LUKKET, SKAL SLOERET VAEK.
     er_skal.js skjuler det med slaeb.hidden = true, men [hidden] er en
     UA-regel og taber mod .er-slaeb{display:block} herover. Uden den
     her linje laa hele forsiden bag et graat sloer paa enhver telefon,
     og intet kunne trykkes. */
  .er-slaeb[hidden] { display:none; }
}

/* ---- DEN SMALLE TELEFON ------------------------------------------
   Maalt paa LIVE ved 375 px: soegefeltet fyldte 303 af 375 px, og
   "Aabn Revisoranalyse" blev skubbet 21 px ned UNDER den 58 px hoeje
   bjaelke og laa oven i siden. Paa en telefon er der plads til burgeren
   og soegningen - ikke mere. Genvejsknappen staar ogsaa i menuen. */
@media (max-width:560px) {
  .er-bjaelke { flex-wrap:nowrap; gap:8px; overflow:hidden; }
  .er-bjaelke-knap { display:none; }
  .er-soeg { flex:1 1 auto; min-width:0; }
  .er-soeg input { width:100%; min-width:0; }
  .er-bjaelke-vaerktoej { flex:0 0 auto; }
}

/* Og samme sikring uden for medieforespoergslen, saa den gaelder, hvor
   end sloeret maatte blive vist fra. */
.er-slaeb[hidden] { display:none !important; }
.er-klokke { display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px; color:var(--er-tekst-svag);
  text-decoration:none; }
.er-klokke:hover { background:var(--er-accent-blod); color:var(--er-accent); }
.er-klokke .er-ikon { width:19px; height:19px; fill:currentColor; }
body.er-moerk .er-klokke { color:#9db9da; }
body.er-moerk .er-klokke:hover { background:rgba(255,255,255,.09); color:#fff; }

/* ---- Skaerm 1: personlig startside ------------------------------- */
.er-forside { display:flex; flex-direction:column; gap:16px; margin:20px auto 8px; }
.er-hero-kort { background:var(--er-kort); border:1px solid var(--er-linje);
  border-radius:var(--er-radius); box-shadow:var(--er-skygge); padding:22px 24px; }
.er-hero-titel { margin:0 0 6px; font-size:23px; letter-spacing:-.5px; color:var(--er-tekst); }
.er-hero-under { margin:0; color:var(--er-tekst-svag); font-size:14px; }
.er-to-kolonner { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.er-kort { background:var(--er-kort); border:1px solid var(--er-linje);
  border-radius:var(--er-radius); box-shadow:var(--er-skygge); padding:18px 20px; }
.er-kort-titel { margin:0 0 12px; font-size:13px; letter-spacing:.4px;
  text-transform:uppercase; color:var(--er-tekst-svag); font-weight:700; }
.er-kpi { background:var(--er-kort); border:1px solid var(--er-linje);
  border-radius:var(--er-radius); box-shadow:var(--er-skygge); padding:15px 17px; }
.er-kpi-etiket { font-size:12px; color:var(--er-tekst-svag); margin-bottom:5px; }
.er-kpi-note { font-size:11px; color:var(--er-tekst-svag); margin-top:5px; line-height:1.45; }
.er-kpi-link { display:inline-block; margin-top:9px; font-size:12px;
  color:var(--er-accent); text-decoration:none; font-weight:600; }
.er-kpi-link:hover { text-decoration:underline; }
.er-mangler { color:var(--er-tekst-svag); font-style:italic; font-size:13px; font-weight:500; }
.er-kpi-tal.er-mangler { font-size:14px; }
.er-ejd-adresse { font-size:17px; font-weight:650; color:var(--er-tekst); margin-bottom:8px; }
.er-ejd-fakta { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px; }
.er-maerkat { display:inline-block; padding:3px 9px; border-radius:999px;
  background:var(--er-accent-blod); color:var(--er-navy); font-size:11.5px; font-weight:600; }
.er-knap { display:inline-block; padding:9px 16px; border-radius:10px;
  background:var(--er-accent); color:#fff; text-decoration:none; font-size:13px; font-weight:600; }
.er-knap:hover { background:#2459c9; }
.er-forbehold { margin:13px 0 0; font-size:11.5px; color:var(--er-tekst-svag); line-height:1.5; }
.er-nyt-liste { margin:0; padding-left:18px; color:var(--er-tekst); font-size:13.5px; line-height:1.75; }
.er-tom { color:var(--er-tekst-svag); font-size:13.5px; line-height:1.6; }

/* Topbjaelken skal aldrig skubbe brugerchip og klokke ud over kanten:
   sidens egne knapper giver plads, foer de yderste elementer forsvinder. */
.er-bjaelke { overflow:hidden; }
.er-bjaelke-titel { flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; }
.er-soeg { min-width:120px; }
.er-bjaelke-vaerktoej { min-width:0; flex:0 1 auto; overflow:hidden; }
.er-bjaelke-hoejre { flex:0 0 auto; }
@media (max-width:1180px) { .er-soeg { max-width:320px; } }
.er-bjaelke-knap { position:static !important; top:auto !important; right:auto !important;
  bottom:auto !important; left:auto !important; z-index:auto !important;
  margin:0 !important; box-shadow:none !important; white-space:nowrap; }

/* ================================================================
   LYS FLADE - den godkendte referenceretning.
   Referencebillederne er lyse paa alle skaerme paa naer to (handler
   og markedsintelligens), som er gennemfoert moerke. Platformens
   egne stylesheets henter alle deres farver fra variablerne i
   er_palet.css, saa hele fladen vendes ét sted: her. Ingen sides
   egen CSS er roert, og de moerke skaerme (.er-moerk) er undtaget,
   saa de beholder deres palet uaendret.
   ================================================================ */
html.er-lys-rod,
body.er-har-skal:not(.er-moerk) {
  --bg:            #f4f6f9;
  --panel:         #ffffff;
  --panel-dyb:     #f7f9fc;
  --panel-hoej:    #ffffff;
  --panel-kant:    #e3e8ef;
  --linje:         #e3e8ef;
  --text:          #16233a;
  --muted:         #6b7a90;
  --felt:          #ffffff;
  --ink:           #0f2744;
  --blue:          #2f6fed;
  --green:         #16a34a;
  --roed:          #dc2626;
  --advarsel:      #b45309;
  --guld:          #c9a227;
  --ophoert:       #9aa6b5;
  --skygge:        0 1px 2px rgba(16,35,58,.06), 0 8px 24px rgba(16,35,58,.08);
  --kortbund:      #eef2f7;
  --raekke-hover:  #f2f6fc;
  --laast-flade:   #f1f4f8;
  --laast-kant:    #dfe5ee;
  --accent:        #2f6fed;
  --accent-blod:   #e8f0fe;
  --accent-kant:   rgba(47,111,237,.35);
  --chip-groen:    #16a34a;
  --chip-advarsel: #b45309;
  --chip-roed:     #dc2626;
  --chip-neutral:  #eef1f6;
  --chip-neutral-tekst: #4a5a70;
  --dok-bg:        #ffffff;
  --dok-flade:     #f7f9fc;
  --dok-flade-2:   #f1f4f9;
  --dok-flade-3:   #eaeff6;
  --dok-kant:      #e3e8ef;
  --dok-daemp:     #6b7a90;
  --dok-graa:      #8a97a8;
  --dok-baand:     #0f2744;
  --dok-blaa-dyb:  #0f2744;
  --dok-blaa-lys:  #2f6fed;
  background: var(--bg);
  color: var(--text);
}

/* Lys flade, anden halvdel: de variabler der i den moerke palet var
   taenkt som flader, skal ogsaa vaere flader i lys tilstand. Saetter
   man dem til de kraftige statusfarver, bliver "mangler"-felterne til
   orange klodser med ulaeselig tekst. Property view'ets egne farver
   vendes samme sted. */
html.er-lys-rod,
body.er-har-skal:not(.er-moerk) {
  --chip-groen:    #e8f6ee;
  --chip-advarsel: #fdf3e5;
  --chip-roed:     #fdecec;
  --chip-neutral:  #eef1f6;
  --chip-neutral-tekst: #4a5a70;

  --pv-bund:       #f4f6f9;
  --pv-flade:      #ffffff;
  --pv-kant:       #e3e8ef;
  --pv-tekst:      #16233a;
  --pv-skrift:     #16233a;
  --pv-skrift-tal: #0f2744;
  --pv-svag:       #6b7a90;
  --pv-blaa:       #2f6fed;
  --pv-groen:      #16a34a;
  --pv-gul:        #c9a227;
}

/* Et felt der venter paa en kilde skal se ud som en tom plads, ikke
   som en advarsel. Rammen markerer det - fladen forbliver rolig. */
html.er-lys-rod .ergraf-mangler,
body.er-har-skal:not(.er-moerk) .ergraf-mangler {
  background: #f7f9fc;
  border: 1px dashed #cdd6e2;
  color: var(--er-tekst-svag, #6b7a90);
}

/* Fuldfladelag (kort, 3D) flyttes ind ved siden af rammen i stedet for
   at ligge under den. Siderne saetter selv 0,0 - derfor !important. */
body.er-har-skal .er-fuldflade {
  left: 232px !important; top: 58px !important;
  right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important;
}
@media (max-width:860px) {
  body.er-har-skal .er-fuldflade { left: 0 !important; }
}

/* ================================================================
   LYS FLADE, tredje og vigtigste lag: selve designlaasens tokens.
   Alt i platformen henter i sidste ende sin farve herfra (--dl-*),
   saa naar de vendes, vender hele fladen med - uden at en eneste
   sides egen CSS er roert. De moerke skaerme (referencebillede 2)
   har ikke .er-lys-rod og beholder derfor tokens uaendret.
   ================================================================ */
html.er-lys-rod,
html.er-lys-rod body.er-har-skal {
  --dl-midnat:      #eef2f7;
  --dl-baggrund:    #f4f6f9;
  --dl-panel:       #ffffff;
  --dl-panel-haev:  #f7f9fc;
  --dl-flade:       rgba(16,35,58,.035);
  --dl-kant:        rgba(16,35,58,.10);
  --dl-linje:       #e3e8ef;
  --dl-blaek-lys:   #16233a;
  --dl-daemp:       #6b7a90;
  /* --dl-navy bruges elleve steder som KORTFLADE og kun via aliasset
     --ink som skriftfarve. Aliasset saettes eksplicit laengere oppe,
     saa her skal tokenet vaere en lys flade - ellers staar moerke kort
     med moerk skrift paa den lyse side. */
  --dl-navy:        #eef2f7;
  --dl-staal:       #cdd6e2;
  --dl-data:        #2f6fed;
  --dl-data-rolig:  #1f5ac4;
  --dl-ok:          #16a34a;
  --dl-ok-dyb:      #0f7a37;
  --dl-obs:         #b45309;
  --dl-risiko:      #dc2626;
  --dl-guld:        #c9a227;
  --dl-champagne:   #8a6b34;
  --dl-champagne-l: #c9a227;
}

/* Felter der stadig henter en moerk farve fra en sides egen variabel
   skal ikke staa som sorte huller i en lys flade. */
html.er-lys-rod input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.er-lys-rod select,
html.er-lys-rod textarea {
  background: #ffffff;
  color: #16233a;
  border-color: #d7dee8;
}
html.er-lys-rod input::placeholder,
html.er-lys-rod textarea::placeholder { color: #93a2b5; }

/* Grafer og diagrammer saetter deres farver som SVG-attributter direkte
   i koden, saa de naas ikke af variablerne. De faa moerke-tilstands-
   vaerdier der bruges som skrift, rettes her - kun i lys tilstand. */
html.er-lys-rod [fill="#f4f8fb" i] { fill: #16233a !important; }
html.er-lys-rod [fill="#9eb4c3" i] { fill: #6b7a90 !important; }
html.er-lys-rod [fill="#8fd0ff" i] { fill: #1f5ac4 !important; }
html.er-lys-rod [fill="#48dfa7" i] { fill: #0f7a37 !important; }
html.er-lys-rod [stroke="#1b415c" i] { stroke: #cdd6e2 !important; }

/* ---- Skaerm 4: risiko og miljoe --------------------------------- */
.err-panel { margin-top: 14px; }
.err-indeks { font-size: 14.5px; font-weight: 600; margin-bottom: 12px;
  padding: 10px 13px; border-radius: 10px; background: var(--er-accent-blod, #e8f0fe);
  color: var(--er-navy, #0f2744); }
.err-indeks.er-mangler { background: #f7f9fc; border: 1px dashed #cdd6e2; font-weight: 500; }
.err-liste { display: flex; flex-direction: column; }
.err-raekke { display: grid; gap: 4px 16px; padding: 11px 0;
  border-top: 1px solid var(--er-linje, #e3e8ef);
  grid-template-columns: 190px minmax(160px, 1fr); align-items: baseline; }
.err-raekke:first-child { border-top: 0; }
.err-navn { font-weight: 600; font-size: 13.5px; color: var(--er-tekst, #16233a); }
.err-vaerdi { font-size: 13.5px; color: var(--er-tekst, #16233a); }
.err-kilde { grid-column: 2; font-size: 11.5px; color: var(--er-tekst-svag, #6b7a90); line-height: 1.5; }
@media (max-width: 640px) {
  .err-raekke { grid-template-columns: 1fr; }
  .err-kilde { grid-column: 1; }
}

/* Skallen garanterer platformens skrifttype. Sider med egen skrift
   vinder stadig - denne regel ligger foerst i raekken. */
html.er-lys-rod, html.er-moerk-rod,
body.er-har-skal, body.er-har-skal button,
body.er-har-skal input, body.er-har-skal select, body.er-har-skal textarea {
  font-family: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ---- Kontekstchip i topbjaelken --------------------------------- */
.er-chip { display:flex; align-items:center; gap:9px; padding:5px 6px 5px 12px;
  border-radius:999px; background:var(--er-accent-blod,#e8f0fe);
  border:1px solid rgba(47,111,237,.22); max-width:340px; flex:0 1 auto; min-width:0; }
.er-chip-navn { font-size:12.5px; font-weight:650; color:var(--er-navy,#0f2744);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.er-chip-ejd { font-size:11.5px; color:var(--er-tekst-svag,#6b7a90);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-left:9px; border-left:1px solid rgba(47,111,237,.25); }
.er-chip-luk { border:0; background:none; cursor:pointer; font-size:16px; line-height:1;
  color:var(--er-tekst-svag,#6b7a90); padding:2px 6px; border-radius:999px; flex:0 0 auto; }
.er-chip-luk:hover { background:rgba(47,111,237,.14); color:var(--er-navy,#0f2744); }
body.er-moerk .er-chip { background:rgba(255,255,255,.08); border-color:#1f4a76; }
body.er-moerk .er-chip-navn { color:#e6eefb; }
body.er-moerk .er-chip-ejd { color:#9db9da; border-left-color:#1f4a76; }
@media (max-width:1180px) { .er-chip-ejd { display:none; } }
@media (max-width:860px)  { .er-chip { display:none; } }

/* ---- Skaerm 9: ejer / person intelligence ----------------------- */
.erp-soegraekke { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.erp-soegraekke input { flex:1 1 260px; min-width:0; height:38px; padding:0 13px;
  border:1px solid var(--er-linje,#e3e8ef); border-radius:10px; font:inherit; font-size:13.5px; }
.erp-traef { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.erp-antal { margin:0 0 4px; font-size:11.5px; color:var(--er-tekst-svag,#6b7a90); }
.erp-traefknap { display:flex; align-items:baseline; gap:12px; text-align:left;
  padding:9px 12px; border:1px solid var(--er-linje,#e3e8ef); border-radius:10px;
  background:var(--er-kort,#fff); cursor:pointer; font:inherit; }
.erp-traefknap:hover { border-color:var(--er-accent,#2f6fed); background:var(--er-accent-blod,#e8f0fe); }
.erp-traefnavn { font-size:13.5px; font-weight:600; color:var(--er-tekst,#16233a); }
.erp-traefmeta { font-size:11.5px; color:var(--er-tekst-svag,#6b7a90); margin-left:auto; }
.erp-indhold { display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.erp-hoved { display:flex; gap:18px; align-items:flex-start; }
.erp-avatar { width:64px; height:64px; flex:0 0 64px; border-radius:18px;
  background:var(--er-navy,#0f2744); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:22px; font-weight:700; letter-spacing:.5px; }
.erp-navneblok { min-width:0; }
.erp-navn { margin:0 0 8px; font-size:24px; letter-spacing:-.5px; color:var(--er-tekst,#16233a); }
.erp-meta { display:flex; flex-wrap:wrap; gap:7px; }
.erp-portraet { margin:10px 0 0; font-size:11.5px; color:var(--er-tekst-svag,#6b7a90); }
.erp-faner { display:flex; flex-wrap:wrap; gap:6px; }
.erp-fane { padding:8px 15px; border-radius:999px; border:1px solid var(--er-linje,#e3e8ef);
  background:var(--er-kort,#fff); cursor:pointer; font:inherit; font-size:13px;
  color:var(--er-tekst-svag,#6b7a90); }
.erp-fane:hover { border-color:var(--er-accent,#2f6fed); color:var(--er-accent,#2f6fed); }
.erp-fane.aktiv { background:var(--er-navy,#0f2744); border-color:var(--er-navy,#0f2744);
  color:#fff; font-weight:600; }
.erp-rolle { padding:11px 0; border-top:1px solid var(--er-linje,#e3e8ef); }
.erp-rolle:first-of-type { border-top:0; }
.erp-rollenavn { font-size:14px; font-weight:600; color:var(--er-accent,#2f6fed); text-decoration:none; }
.erp-rollenavn:hover { text-decoration:underline; }
.erp-rollemeta { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.erp-graf { overflow-x:auto; }
.erp-svg { width:100%; min-width:620px; height:auto; display:block; }
.erp-kant { stroke:#cdd6e2; stroke-width:1.4; }
.erp-node { fill:var(--er-accent,#2f6fed); }
.erp-midte { fill:var(--er-navy,#0f2744); }
.erp-midtetekst { fill:#fff; font-size:17px; font-weight:700; }
.erp-nodetekst { fill:#16233a; font-size:12px; font-weight:600; }
.erp-nodemeta { fill:#6b7a90; font-size:10.5px; }
.erp-kontakt { padding:13px 0; border-top:1px solid var(--er-linje,#e3e8ef); }
.erp-kontakt:first-of-type { border-top:0; }
.erp-kontakt-titel { font-size:12px; text-transform:uppercase; letter-spacing:.4px;
  font-weight:700; color:var(--er-tekst-svag,#6b7a90); margin-bottom:8px; }
.erp-vej { display:flex; flex-wrap:wrap; gap:7px; align-items:baseline; padding:6px 0; }
.erp-vejnavn { font-size:13.5px; font-weight:600; color:var(--er-tekst,#16233a); }

/* ---- Skaerm 10: organisationsdiagram ---------------------------- */
.erk-svg { width:100%; min-width:700px; height:auto; display:block; }
/* Organisationsdiagrammet er 700 px bredt som minimum. Er skaermen
   smallere, skubbes grafen vandret i sit eget kort - resten af siden
   staar stille, og grafen beholder sine proportioner i stedet for at
   blive klemt sammen til ulaeselighed. */
.erk-kort { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.erk-kort > .erk-svg { min-width:700px; }
.erk-kasse rect { fill:#fff; stroke:#d7dee8; stroke-width:1.4; }
.erk-kasse .erk-navn { fill:#16233a; font-size:13px; font-weight:650; }
.erk-kasse .erk-under { fill:#6b7a90; font-size:11px; }
.erk-rod rect { fill:var(--er-navy,#0f2744); stroke:var(--er-navy,#0f2744); }
.erk-rod .erk-navn { fill:#fff; }
.erk-rod .erk-under { fill:#b9cce4; }
.erk-ejer rect { fill:var(--er-accent-blod,#e8f0fe); stroke:#b9d0f8; }
.erk-datter rect { fill:#f7f9fc; stroke:#d7dee8; }
.erk-ejd rect { fill:#eef7f1; stroke:#bfe0cb; }
.erk-kant { stroke:#cdd6e2; stroke-width:1.5; }
.erk-etiket { fill:#6b7a90; font-size:10.5px; }
.erk-kasse a, a .erk-kasse { cursor:pointer; }
.erk-ejdliste { display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.erk-ejdkort { display:flex; flex-direction:column; gap:3px; padding:11px 13px;
  border:1px solid var(--er-linje,#e3e8ef); border-radius:10px; text-decoration:none;
  background:var(--er-kort,#fff); }
.erk-ejdkort:hover { border-color:var(--er-accent,#2f6fed); background:var(--er-accent-blod,#e8f0fe); }
.erk-ejdnavn { font-size:13px; font-weight:600; color:var(--er-tekst,#16233a); }
.erk-ejdkilde { font-size:10.5px; color:var(--er-tekst-svag,#6b7a90); }

/* ---- Skaerm 18: AI-assistenterne -------------------------------- */
.erai-gitter { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  align-items:start; }
.erai-panel { display:flex; flex-direction:column; min-height:420px; }
.erai-under { margin:0 0 12px; font-size:12.5px; color:var(--er-tekst-svag,#6b7a90); line-height:1.6; }
.erai-kunde { display:inline-block; padding:5px 12px; border-radius:999px; margin-bottom:12px;
  background:var(--er-accent-blod,#e8f0fe); color:var(--er-navy,#0f2744);
  font-size:12.5px; font-weight:650; align-self:flex-start; }
.erai-forslag { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px; }
.erai-forslagknap { padding:7px 13px; border-radius:999px; cursor:pointer; font:inherit;
  font-size:12.5px; border:1px solid var(--er-linje,#e3e8ef);
  background:var(--er-kort,#fff); color:var(--er-tekst,#16233a); text-align:left; }
.erai-forslagknap:hover { border-color:var(--er-accent,#2f6fed);
  background:var(--er-accent-blod,#e8f0fe); color:var(--er-navy,#0f2744); }
.erai-plads { flex:1 1 auto; min-height:300px; display:flex; }
.erai-plads .erai-fuld { position:static !important; inset:auto !important;
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  width:100% !important; max-width:none !important; height:auto !important;
  min-height:320px !important; max-height:none !important; margin:0 !important;
  box-shadow:none !important; border:1px solid var(--er-linje,#e3e8ef) !important;
  border-radius:12px !important; display:flex !important; flex-direction:column; }
.erai-svar { display:flex; flex-direction:column; }
.erai-linje { display:grid; gap:3px 14px; padding:13px 0;
  border-top:1px solid var(--er-linje,#e3e8ef);
  grid-template-columns:1fr auto; align-items:baseline; }
.erai-linje:first-child { border-top:0; }
.erai-etiket { font-size:13.5px; font-weight:600; color:var(--er-tekst,#16233a); }
.erai-vaerdi { font-size:22px; font-weight:700; letter-spacing:-.4px;
  color:var(--er-tekst,#16233a); text-align:right; }
.erai-vaerdi.er-mangler { font-size:13px; font-weight:500; }
.erai-note { grid-column:1 / -1; font-size:11.5px; color:var(--er-tekst-svag,#6b7a90); line-height:1.5; }
.erai-link { grid-column:1 / -1; justify-self:start; font-size:12px; font-weight:600;
  color:var(--er-accent,#2f6fed); text-decoration:none; margin-top:4px; }
.erai-link:hover { text-decoration:underline; }

/* ---- Faelles referencepaneler ----------------------------------- */
.erp-kpilinje { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.erp-pil { font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; }
.erp-pil.op { color:#0f7a37; background:#e8f6ee; }
.erp-pil.ned { color:#b3261e; background:#fdecec; }
.erp-trend { overflow-x:auto; }
.erp-trendsvg { width:100%; min-width:320px; height:auto; display:block; }
.erp-trendlinje { stroke:var(--er-accent,#2f6fed); stroke-width:2.2; stroke-linejoin:round; }
.erp-trendflade { fill:rgba(47,111,237,.10); }
.erp-trendprik { fill:var(--er-accent,#2f6fed); }
.erp-trendakse { fill:#6b7a90; font-size:10px; }
body.er-moerk .erp-trendlinje { stroke:#d9a441; }
body.er-moerk .erp-trendflade { fill:rgba(217,164,65,.16); }
body.er-moerk .erp-trendprik { fill:#d9a441; }
body.er-moerk .erp-trendakse { fill:#9db9da; }
.erp-typer { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.erp-type { padding:7px 14px; border-radius:999px; cursor:pointer; font:inherit; font-size:12.5px;
  border:1px solid var(--er-linje,#e3e8ef); background:var(--er-kort,#fff);
  color:var(--er-tekst-svag,#6b7a90); }
.erp-type:hover { border-color:var(--er-accent,#2f6fed); color:var(--er-accent,#2f6fed); }
.erp-type.aktiv { background:var(--er-accent,#2f6fed); border-color:var(--er-accent,#2f6fed);
  color:#fff; font-weight:600; }
body.er-moerk .erp-type { background:rgba(255,255,255,.06); border-color:#1f4a76; color:#9db9da; }
body.er-moerk .erp-type.aktiv { background:#d9a441; border-color:#d9a441; color:#14202e; }
.erp-grafgitter { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  margin-top:14px; }
.erp-liste { display:flex; flex-direction:column; }
.erp-rapliste { display:flex; flex-direction:column; margin-top:10px; }
.erp-rapraekke { padding:12px 0; border-top:1px solid var(--er-linje,#e3e8ef); }
.erp-rapraekke:first-child { border-top:0; }
.erp-rapemne { font-size:14px; font-weight:600; color:var(--er-tekst,#16233a); }
.erp-rapmeta { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.erp-skala { display:flex; gap:4px; flex-wrap:wrap; margin:4px 0 16px; }
.erp-trin { flex:1 1 54px; text-align:center; padding:9px 4px; border-radius:8px;
  font-size:12px; font-weight:700; background:#f1f4f8; color:#8a97a8;
  border:1px solid transparent; }
.erp-trin.aktiv { background:var(--er-navy,#0f2744); color:#fff; border-color:var(--er-navy,#0f2744); }
.erp-trin[data-klasse^="A"].aktiv { background:#16a34a; border-color:#16a34a; }
.erp-trin[data-klasse="B"].aktiv, .erp-trin[data-klasse="C"].aktiv { background:#65a30d; border-color:#65a30d; }
.erp-trin[data-klasse="D"].aktiv, .erp-trin[data-klasse="E"].aktiv { background:#c9a227; border-color:#c9a227; }
.erp-trin[data-klasse="F"].aktiv, .erp-trin[data-klasse="G"].aktiv { background:#dc2626; border-color:#dc2626; }
.erp-trappe { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.erp-trappetrin { display:flex; align-items:center; gap:8px; padding:8px 13px; border-radius:10px;
  background:#f7f9fc; border:1px solid var(--er-linje,#e3e8ef); }
.erp-trappenr { width:20px; height:20px; border-radius:999px; background:var(--er-navy,#0f2744);
  color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.erp-trappenavn { font-size:12.5px; color:var(--er-tekst,#16233a); text-transform:capitalize; }
.erp-doks { display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:10px; }
.erp-dok { padding:11px 13px; border:1px solid var(--er-linje,#e3e8ef); border-radius:10px;
  background:var(--er-kort,#fff); }
.erp-doknavn { font-size:13px; font-weight:600; color:var(--er-tekst,#16233a); }
.erp-dokmeta { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.erp-pipe { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin-top:12px; }
.erp-pipekol { background:#f7f9fc; border:1px solid var(--er-linje,#e3e8ef);
  border-radius:12px; padding:11px; min-height:120px; }
.erp-pipetitel { font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--er-tekst-svag,#6b7a90); margin-bottom:9px; }
.erp-pipetom { font-size:12px; color:#93a2b5; font-style:italic; }
.erp-pipekort { background:#fff; border:1px solid var(--er-linje,#e3e8ef); border-radius:9px;
  padding:9px 11px; margin-bottom:7px; }
.erp-pipenavn { font-size:12.5px; font-weight:600; color:var(--er-tekst,#16233a); }
.erp-pipemeta { font-size:11px; color:var(--er-tekst-svag,#6b7a90); margin-top:3px; }

/* ---- Skaerm 7: markedspanel oven paa det moerke kort ------------- */
.erp-overlay { position:fixed; top:74px; right:16px; bottom:16px; width:min(440px, 42vw);
  z-index:40; overflow-y:auto; overscroll-behavior:contain; padding:2px;
  display:flex; flex-direction:column; gap:12px; }
.erp-overlay .er-kort { background:rgba(12,41,64,.92); border-color:#1f4a76; color:#e6eefb;
  backdrop-filter:blur(8px); }
.erp-overlay .er-kort-titel { color:#9db9da; }
.erp-overlay .er-kpi { background:rgba(12,41,64,.92); border-color:#1f4a76; color:#e6eefb;
  backdrop-filter:blur(8px); }
.erp-overlay .er-kpi-etiket, .erp-overlay .er-kpi-note,
.erp-overlay .erai-under, .erp-overlay .err-kilde { color:#9db9da; }
.erp-overlay .er-kpi-tal { color:#fff; }
.erp-overlay .er-kpi-raekke { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.erp-overlay .erp-grafgitter { grid-template-columns:1fr; }
.erp-overlayknap { position:fixed; top:74px; right:16px; z-index:41; border:0; cursor:pointer;
  border-radius:999px; padding:7px 14px; font:inherit; font-size:12px; font-weight:600;
  background:#d9a441; color:#14202e; display:none; }
body.er-moerk .erp-overlayknap { display:inline-block; }
body.erp-skjul .erp-overlay { display:none; }
@media (max-width:900px) {
  .erp-overlay { position:static; width:auto; margin:14px; }
  .erp-overlayknap { display:none !important; }
}

/* ---- Skaerm 5: visningsstribe og naeromraade -------------------- */
.erp-stribe { display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-top:6px; }
.erp-stribeknap { display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  padding:12px 13px; border-radius:11px; cursor:pointer; font:inherit; text-align:left;
  border:1px solid var(--er-linje,#e3e8ef); background:var(--er-kort,#fff); }
.erp-stribeknap:hover:not(:disabled) { border-color:var(--er-accent,#2f6fed);
  background:var(--er-accent-blod,#e8f0fe); }
.erp-stribenavn { font-size:13px; font-weight:600; color:var(--er-tekst,#16233a); }
.erp-stribestatus { font-size:10.5px; color:var(--er-tekst-svag,#6b7a90); }
.erp-stribeknap.utilsluttet { background:#f7f9fc; border-style:dashed; cursor:not-allowed; }
.erp-stribeknap.utilsluttet .erp-stribenavn { color:#8a97a8; }

/* ---- Skaerm 8: ejendomsfliser ----------------------------------- */
.erp-ejdgitter { display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:10px; }
.erp-ejdflise { display:flex; flex-direction:column; gap:3px; padding:12px 13px;
  border:1px solid var(--er-linje,#e3e8ef); border-radius:11px; text-decoration:none;
  background:var(--er-kort,#fff); }
.erp-ejdflise:hover { border-color:var(--er-accent,#2f6fed); background:var(--er-accent-blod,#e8f0fe); }
.erp-ejdflisenavn { font-size:13px; font-weight:600; color:var(--er-tekst,#16233a); }
.erp-ejdflisemeta { font-size:10.5px; color:var(--er-tekst-svag,#6b7a90); }

/* Fem steder bruges --ink som FLADE i stedet for skrift. Tokenet er
   overvejende en skriftfarve (27 steder mod 5), saa det bliver staaende
   moerkt - og de fem flader faar i stedet en lys baggrund her. */
html.er-lys-rod .pic-svaev,
html.er-lys-rod .kpi,
html.er-lys-rod .detalje td {
  background: #ffffff;
  color: var(--er-tekst, #16233a);
}
html.er-lys-rod .kpi { border-color: var(--er-linje, #e3e8ef); }

/* Tastaturfokus. :focus-visible vises kun ved tastaturnavigation, saa et
   museklik ser praecis ud som foer - designet er uroert for musebrugere.
   Der bruges ingen nye farver: kun skaermens egen accent fra designlaasen.
   Baggrund: input:focus ovenfor fjerner outline, og uden dette kan en
   tastaturbruger ikke se hvor fokus staar. */
:focus-visible {
    outline: 2px solid var(--er-accent, #2459c9);
    outline-offset: 2px;
    border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
.er-knap:focus-visible,
.er-nav a:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--er-accent, #2459c9);
    outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--er-accent, #2459c9);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
 * Mobil: hoejre side af topbjaelken maa ikke skydes ud over skaermkanten.
 * Maalt paa 390 px: .er-bjaelke-hoejre var 245 px bred og endte 49 px ude
 * til hoejre, fordi bjaelken ikke maatte ombryde og gruppen ikke maatte krympe.
 * Her faar den lov at falde ned paa sin egen linje. Ingen nye farver,
 * ingen aendring paa desktop.
 * -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .er-bjaelke { flex-wrap: wrap; row-gap: 6px; }
  .er-bjaelke-hoejre { flex-shrink: 1; min-width: 0; }
  .er-bjaelke-hoejre .er-bjaelke-knap {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Brugerfeltet skal ombryde i stedet for at skubbe teksten ud over kanten.
     Maalt: span "Erhvervskunde" endte 107 px til hoejre for sin foraelder. */
  .er-bruger, .bruger { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .er-bruger > *, .bruger > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .portefoelje-handlinger, .er-handlinger, .er-bjaelke-vaerktoej {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}