/* IdeFA Arbejdsportal — én CSS-fil for alle sider. Mål, farver, vægte og afstande er mockuppens (IdeFA Arbejdsportal
   Dashboards v38, artboards Main/MitDashboard/AdminBrugere — reglerne er kopieret derfra 09-11-2026, ikke skønnet)
   oven på IdeFA Design Systems tokens. Skrifterne ligger i assets/fonts/ (README dér). Sider har ingen egen CSS. */

@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/rajdhani-v17-normal-300.woff2) format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/rajdhani-v17-normal-400.woff2) format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/rajdhani-v17-normal-500.woff2) format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/rajdhani-v17-normal-600.woff2) format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/rajdhani-v17-normal-700.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/montserrat-v31-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/montserrat-v31-italic.woff2) format('woff2'); }

:root {
  --idefa-blue: #2E404F; --idefa-orange: #f7a700; --idefa-mint: #9ececd; --idefa-offwhite: #f7f7f7; --idefa-white: #fff;
  --blue-900: #1d2a34; --blue-500: #415868; --blue-300: #7b909d; --blue-100: #d6dde2;
  --orange-600: #d98f00; --orange-100: #fdeccb; --mint-200: #c6e4e3; --mint-600: #6fb0ae;
  --fg-1: var(--idefa-blue); --fg-2: var(--blue-500); --fg-3: var(--blue-300);
  --fg-on-dark: #eef1f3; --fg-on-dark-2: #a9b8c2; --nav: #c9d4db;
  --bg-page: var(--idefa-offwhite); --bg-surface: var(--idefa-white);
  --accent: var(--idefa-orange); --accent-hover: var(--orange-600); --accent-wash: var(--orange-100);
  --border: var(--blue-100); --border-strong: var(--blue-300); --hairline: #eef1f3;
  --groen: #2f8f5b; --roed: #c2503c;
  --font-head: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --shadow-sm: 0 1px 2px rgba(46,64,79,.06), 0 1px 1px rgba(46,64,79,.04);
  --shadow-md: 0 4px 16px rgba(46,64,79,.10);
  --focus: 3px solid rgba(247,167,0,.55);
  --side-bredde: 248px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg-page); color: var(--fg-1); font: 400 14px/1.6 var(--font-body); letter-spacing: .02em; }
a { color: var(--idefa-blue); } a:hover { color: var(--orange-600); }
h1, h2, h3 { font-family: var(--font-head); letter-spacing: 0; margin: 0; text-transform: uppercase; color: var(--fg-1); }
h1 { font: 700 34px/1.2 var(--font-head); text-transform: uppercase; margin: 4px 0 6px; }
h2 { font: 600 18px/1.3 var(--font-head); text-transform: uppercase; }
button, input, select { font: inherit; }
:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* ---- skallen: sidebar + hoved (mockup .side/.nav/.top) ---- */
.skal { display: flex; min-height: 100vh; }
.side { width: var(--side-bredde); flex: 0 0 auto; background: var(--idefa-blue); color: var(--fg-on-dark); padding: 24px 16px 20px; display: flex; flex-direction: column; }
.side .logo img { height: 30px; width: auto; display: block; margin: 0 12px 14px; }
.side .sub { color: var(--fg-on-dark-2); font: 500 12px/1.4 var(--font-head); letter-spacing: .2em; text-transform: uppercase; margin: -10px 12px 10px; }
.navlabel { color: var(--accent); font: 600 12px/1.4 var(--font-head); letter-spacing: .18em; text-transform: uppercase; margin: 18px 12px 6px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-md); color: var(--nav); text-decoration: none; font-weight: 500; transition: background .15s ease; }
.nav a:hover { background: #3a4f5e; color: #fff; }
.nav a.on { background: var(--blue-500); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.nav .d { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-300); flex: 0 0 8px; }
.nav a:hover .d, .nav a.on .d { background: var(--accent); }
.sidefoot { margin-top: auto; padding: 18px 12px 0; font-size: 12px; line-height: 1.7; color: var(--fg-on-dark-2); border-top: 1px solid var(--blue-500); }
.sidefoot b { color: #fff; display: block; }
.sidefoot form { margin: 0; }
.sidefoot button { all: unset; cursor: pointer; color: var(--accent); }
.sidefoot button:hover { text-decoration: underline; }
.hoved { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: var(--bg-surface); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 14px 32px; min-height: 72px; }
.sti { font-size: 12px; color: var(--fg-3); } .sti b { color: var(--fg-1); font-weight: 600; }
.hamburger { display: none; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--fg-1); }
/* Søg kunde i topbaren (mockuppens .search) */
.kundesoeg { position: relative; flex: 1 1 220px; max-width: 340px; margin: 0; }
.kundesoeg .search { width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: var(--bg-page); border-radius: var(--r-md); padding: 10px 14px; font: inherit; font-size: 13px; color: var(--fg-1); min-height: 44px; }
.kundesoeg .search:focus { outline: none; border-color: var(--idefa-blue); background: var(--bg-surface); }
.soeg-forslag { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(46, 64, 79, .14); max-height: 60vh; overflow-y: auto; }
.soeg-forslag li a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--fg-1); text-decoration: none; font-size: 13px; font-weight: 600; }
.soeg-forslag li a small { display: block; font-weight: 400; font-size: 11px; color: var(--fg-3); }
.soeg-forslag li.valgt a, .soeg-forslag li a:hover { background: var(--bg-page); }
.soeg-forslag li.tom { padding: 8px 10px; font-size: 12px; color: var(--fg-3); }
.periode-raekke .kundesoeg { flex: 0 1 280px; }
.kort-link { display: block; color: inherit; text-decoration: none; }
.kort-link .kort { transition: box-shadow .18s ease, border-color .18s ease; }
.kort-link:hover .kort { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.kort-raekke + .kort-raekke { margin-top: 16px; }
table.noegletal th { width: 38%; text-transform: none; letter-spacing: 0; font: 600 12px var(--font-body); color: var(--fg-3); padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
table.noegletal td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
.panel h3 { margin: 18px 0 8px; font-size: 13px; }
.filter-liste { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); }
.filter-liste select { min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); font: 600 13px var(--font-body); color: var(--fg-1); max-width: 240px; }
.bruger { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.4; }
.bruger .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--idefa-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--font-head); }
.bruger .navn { font-weight: 600; color: var(--fg-1); }
.bruger .navn small { display: block; font-weight: 400; color: var(--fg-3); }
.bruger form { margin: 0; }
.logud { border: 1px solid var(--border); background: var(--bg-surface); border-radius: var(--r-md); padding: 6px 10px; font-size: 11px; font-weight: 600; cursor: pointer; color: var(--fg-2); min-height: 32px; }
.logud:hover { border-color: var(--border-strong); color: var(--fg-1); }
.indhold { padding: 28px 32px 40px; max-width: 1260px; width: 100%; margin: 0 auto; }
.overline { color: var(--accent); font: 600 13px/1.4 var(--font-head); letter-spacing: .18em; text-transform: uppercase; }
.saetning { color: var(--fg-2); margin: 0 0 6px; max-width: 72ch; }
.faner { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin: 18px 0 20px; }
.faner + .periode-raekke { margin-top: 0; }
.tabel-rul { overflow-x: auto; }
.panel + .panel { margin-top: 16px; }
.faner a { padding: 10px 16px; min-height: 44px; display: flex; align-items: center; text-decoration: none; color: var(--fg-2); font-weight: 600; font-size: 13px; border-bottom: 3px solid transparent; white-space: nowrap; }
.faner a:hover { color: var(--fg-1); }
.faner a.on { color: var(--fg-1); border-bottom-color: var(--accent); }
.kilde { margin-top: var(--s-7); color: var(--fg-3); font-size: 11px; border-top: 1px solid var(--border); padding-top: var(--s-3); }
.kilde:empty { display: none; }
.miljoe { position: fixed; right: 8px; bottom: 6px; color: var(--fg-3); font-size: 10px; pointer-events: none; }

/* ---- periodevælger (mockup .filters/.seg/.cmp) ---- */
.periode-raekke { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 20px; }
.periode-raekke .flab { font-size: 12px; color: var(--fg-3); }
.perioder { display: inline-flex; flex-wrap: wrap; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.perioder a { font: 600 13px/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; padding: 0 14px; min-height: 42px; display: inline-flex; align-items: center; color: var(--fg-2); text-decoration: none; }
.perioder a:hover { background: var(--bg-page); color: var(--fg-1); }
.perioder a.on { background: var(--idefa-blue); color: #fff; }
.periode-tekst { margin-left: auto; font-size: 12px; color: var(--fg-3); }

/* ---- Skabelonens byggesten (mockup .card/.lbl/.kpi-v/.delta/.base/.maal) ---- */
.kort-raekke + .panel { margin-top: 16px; }
.kort-raekke { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kort, .panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; min-width: 0; }
.kort .lbl, .lbl { font-size: 12px; color: var(--fg-2); font-weight: 500; }
.maal, .eks { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-sm); padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.maal { color: var(--fg-1); background: var(--mint-200); }
.eks { color: #8a6500; background: var(--accent-wash); }
.kpi-v { font: 700 36px/1.1 var(--font-head); color: var(--fg-1); margin: 10px 0 6px; }
.kpi-v .enhed { font: 500 14px/1 var(--font-body); color: var(--fg-3); letter-spacing: .02em; }
.delta { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; color: var(--fg-3); }
.delta.godt { color: var(--groen); } .delta.skidt { color: var(--roed); }
.base { font-size: 11px; color: var(--fg-3); margin-top: 4px; }
.kort-tal { font: 700 36px/1.1 var(--font-head); margin: 10px 0 6px; }
.to-kolonner > .panel + .panel { margin-top: 0; }
.to-kolonner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
.en-kolonne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
/* filter som dropdown i periodens linje: <details class="filter"><summary>valget</summary><form class="filter-menu">…</form></details> */
.filter { position: relative; }
.filter summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; min-width: 140px; padding: 0 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; font-weight: 600; color: var(--fg-1); cursor: pointer; }
.filter summary::-webkit-details-marker { display: none; }
.filter summary::after { content: "▾"; margin-left: auto; color: var(--fg-3); }
.filter[open] summary { border-color: var(--border-strong); }
.filter-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 10px; margin: 0; }
.filter-menu label { display: flex; align-items: center; gap: 8px; padding: 7px 6px; font-size: 13px; border-radius: var(--r-sm); cursor: pointer; }
.filter-menu label:hover { background: var(--bg-page); }
.filter-knapper { display: flex; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.panel-hoved { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel h2 { margin: 0; }
.panel > h2 { margin-bottom: 16px; }
.tom { border: 1px dashed var(--border-strong); background: transparent; }
.dæmpet { color: var(--fg-3); }
.note { font-size: 11px; color: var(--fg-3); margin: 16px 0 0; }
.kunde-navn { margin: 0 0 12px; }
.besked { background: var(--mint-200); border-left: 4px solid var(--mint-600); padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 16px; }
.advarsel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; background: var(--accent-wash); border: 1px solid var(--accent); border-radius: var(--r-lg); padding: 14px 20px; }

/* ---- tabeller (mockup .row/.rowhead) ---- */
table.liste { width: 100%; border-collapse: collapse; font-size: 12px; }
table.liste th { text-align: left; padding: 0 10px 10px; font: 600 11px/1.4 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--border); }
table.liste td { padding: 13px 10px; border-top: 1px solid var(--hairline); vertical-align: top; }
table.liste tr:first-child td { border-top: 0; }
table.liste tbody tr:nth-child(even) td { background: var(--idefa-offwhite); } /* hver anden række let grå i alle lister (FB 11-11-2026) */
table.liste strong { font-size: 13px; font-weight: 600; }
table.liste .lille { display: block; color: var(--fg-3); margin-top: 2px; }
td.tal .vs { color: var(--fg-3); margin-left: 4px; } /* «tal vs. før ▼ 6 %» på én linje */
td.tal .aendring { display: inline-block; min-width: 46px; margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--fg-3); }
td.tal .aendring.godt { color: var(--groen); } td.tal .aendring.skidt { color: var(--roed); }
td.tal, th.tal { text-align: right; font-variant-numeric: tabular-nums; }
table.liste th.tal { text-align: right; } /* overskriften står over tallene: «table.liste th» ovenfor vandt ellers med venstrestilling (SGO 11-11-2026) */
.nowrap { white-space: nowrap; }
.lille { color: var(--fg-3); font-size: 12px; }
.status-ok { color: var(--groen); font-weight: 600; } .status-nej { color: var(--roed); font-weight: 600; }

/* ---- chips, knapper, formularer (mockup .chip/.btn/.tag/.pill) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--fg-1); cursor: pointer; margin: 0; }
.chip.valgt { background: var(--idefa-blue); color: #fff; border-color: var(--idefa-blue); }
.chip input { display: none; }
.chip-par { display: inline-flex; }
.chip-par .chip:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.chip-par .chip.ansv { border-radius: 0 var(--r-pill) var(--r-pill) 0; border-left: 0; font-weight: 500; color: var(--fg-3); }
.chip-par .chip.ansv.valgt { background: var(--accent); color: var(--fg-1); border-color: var(--accent); }
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--mint-200); color: var(--fg-1); white-space: nowrap; }
.pill.warn { background: var(--accent-wash); } .pill.bad { background: #f8ddd7; color: #8a2f1f; }
.knap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--r-md); border: 1.5px solid var(--idefa-blue); background: var(--idefa-blue); color: #fff; font: 600 14px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .1s ease; }
.knap:active { transform: scale(.98); }
.knap:hover { background: var(--blue-900); color: #fff; }
.knap.primaer { background: var(--accent); border-color: var(--accent); color: var(--fg-1); }
.knap.primaer:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--fg-1); }
.knap.sekundaer { background: var(--bg-surface); color: var(--fg-1); }
.knap.sekundaer:hover { background: var(--bg-page); color: var(--fg-1); }
.knap.lille { min-height: 32px; padding: 0 10px; font-size: 11px; }
/* IdeFA Design System · Buttons: ghost = gennemsigtig med 1,5px border-strong; prik-link = stille handling ført af den orange prik */
.knap.ghost { background: transparent; color: var(--idefa-blue); border-color: var(--border-strong); }
.knap.ghost:hover { background: var(--bg-surface); border-color: var(--idefa-blue); color: var(--idefa-blue); }
.knap.primaer { box-shadow: 0 8px 22px rgba(247,167,0,.30); }
.prik-link { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--idefa-blue); text-decoration: none; padding: 6px 0; }
.prik-link::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--idefa-orange); flex: none; }
.prik-link:hover { color: var(--blue-900); text-decoration: underline; text-underline-offset: 3px; }
.knapper { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* IdeFA Design System · Badges: pille-tags i Rajdhani 600 11px versaler */
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { display: inline-flex; align-items: center; font: 600 11px/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.tag.blaa { background: var(--idefa-blue); color: #fff; }
.tag.orange { background: var(--accent-wash); color: #8a5a00; }
.tag.mint { background: var(--mint-200); color: var(--idefa-blue); }
.tag.kontur { background: var(--bg-surface); border: 1.5px solid var(--border-strong); color: var(--fg-2); }

/* IdeFA Design System · Cards: hvid flade, hårstreg, r-lg, shadow-sm, løft til shadow-md; ikonflise 38px accent-wash med 12px prik */
.ikon-flise { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--accent-wash); display: grid; place-items: center; flex: none; }
.ikon-flise::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--idefa-orange); }
.ds-kort { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); min-width: 0; transition: box-shadow .18s ease; }
.ds-kort:hover { box-shadow: var(--shadow-md); }
.ds-kort.accent { border-top: 3px solid var(--idefa-orange); }
.ds-kort h3 { font: 600 18px/1.3 var(--font-head); text-transform: uppercase; margin: 0; color: var(--fg-1); }
.kort-hoved { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.kort-hoved .tekst { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kort-hoved .under { font-size: 13px; color: var(--fg-2); }
.kort-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kort-gitter + .panel, .panel + .kort-gitter, .ds-kort + .kort-gitter, .kort-gitter + .ds-kort, .ds-kort + .ds-kort { margin-top: 16px; }

/* Oplysninger som små bokse: etiket i Rajdhani-versaler over værdien */
.info-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.info-boks { background: var(--bg-page); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
.info-boks .etiket { font: 600 11px/1.3 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }
.info-boks .vaerdi { font-size: 13px; color: var(--fg-1); overflow-wrap: anywhere; }
.info-boks .vaerdi a { color: var(--fg-1); }
.info-boks.advarsel { background: var(--accent-wash); }
/* ---- Journalen, 2. udgave (FB 11-11-2026: listevisning, firmakort, dashboard) ---- */
.ikon { display: inline-block; vertical-align: -3px; flex: none; }
/* Liste i et panel: hoved med titel, antal og søgefelt; tabellen går kant til kant; fod med note */
.liste-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.liste-panel + .liste-panel, .kort-raekke + .liste-panel, .liste-panel + .panel { margin-top: 16px; }
.liste-hoved { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.liste-hoved h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.antal { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--bg-page); font: 600 12px/1 var(--font-body); color: var(--fg-2); }
.liste-soeg { position: relative; flex: 0 1 280px; }
.liste-soeg .ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fg-3); }
.liste-soeg input { width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px 8px 36px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); font: 400 13px var(--font-body); color: var(--fg-1); }
.liste-soeg input:focus { outline: var(--focus); outline-offset: 1px; }
table.rig { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rig th { text-align: left; padding: 12px 22px; background: var(--bg-page); font: 600 11px/1.3 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
table.rig td { padding: 14px 22px; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--fg-2); }
table.rig tr:last-child td { border-bottom: 0; }
table.rig tbody tr:hover td { background: #fbfcfc; }
table.rig td.tal, table.rig th.tal { text-align: right; }
table.rig td.dato, table.rig .dato { white-space: nowrap; }
.mini-faner { gap: 6px; } .mini-faner button { padding: 6px 12px; }
.navn-celle { min-width: 230px; }
table.rig a { color: var(--fg-1); }
.liste-fod { padding: 12px 22px; border-top: 1px solid var(--border); background: var(--bg-page); font-size: 12px; color: var(--fg-3); }
.navn-celle { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.navn-celle .avatar-ikon { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-page); color: var(--fg-3); display: grid; place-items: center; flex: none; }
.navn-celle b { display: block; color: var(--fg-1); font-weight: 600; font-size: 14px; }
.navn-celle small { display: block; color: var(--fg-3); font-size: 12px; margin-top: 2px; }
.kontakt-celle { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.kontakt-celle .ikon { color: var(--fg-3); }
.ikke-angivet { color: var(--fg-3); font-size: 12px; }
/* Tæt udgave af den rige tabel (FB 12-11-2026, Journalen › Kontaktpersoner): mindre luft, så seks kolonner kan være på siden */
table.rig.kompakt th { padding: 11px 14px; }
table.rig.kompakt td { padding: 12px 14px; }
table.rig.kompakt th:first-child, table.rig.kompakt td:first-child { padding-left: 22px; }
table.rig.kompakt th:last-child, table.rig.kompakt td:last-child { padding-right: 22px; }
table.rig.kompakt .navn-celle { min-width: 180px; }
table.rig.kompakt .tag { white-space: nowrap; }
table.rig.kompakt .firma-handlinger { align-items: center; gap: 6px; }
.kontakt-stak { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
table.rig small.under { display: block; color: var(--fg-3); font-size: 12px; margin-top: 2px; }
.tag.rolle { background: var(--bg-page); color: var(--fg-1); border: 1px solid var(--border); text-transform: none; letter-spacing: 0; font: 600 12px/1 var(--font-body); padding: 6px 10px; border-radius: var(--r-sm); }
.tag.rolle.primaer { background: var(--accent-wash); border-color: #f5d99a; }
.tag.ikon-tag { gap: 5px; }
/* Ikonknapper: runde, hårstreg, blå ikon (Design System: ghost) */
.ikon-knap { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--bg-surface); color: var(--idefa-blue); display: inline-grid; place-items: center; text-decoration: none; transition: border-color .18s ease, background .18s ease; }
.ikon-knap:hover { border-color: var(--idefa-blue); }
.ikon-knap.orange { background: var(--idefa-orange); border-color: var(--idefa-orange); }
.ikon-knap.orange:hover { background: var(--orange-600); border-color: var(--orange-600); }
/* Firmakortet (SuperOffice-inspireret): hoved, felter to og to, aktivitet under; sidekolonne til højre */
.firma-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.firma-layout > .stak { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.firma-kort { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.firma-hoved { display: flex; gap: 16px; align-items: flex-start; }
.firma-logo { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--idefa-blue); color: #fff; display: grid; place-items: center; flex: none; position: relative; }
.firma-logo::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--idefa-orange); border: 3px solid var(--bg-surface); }
.firma-navn { flex: 1; min-width: 0; }
.firma-navn h3 { font: 700 24px/1.2 var(--font-head); text-transform: uppercase; margin: 0; color: var(--fg-1); }
.firma-navn .under { font-size: 13px; color: var(--fg-3); margin-top: 3px; }
.firma-navn .tags { margin-top: 10px; }
.firma-handlinger { display: flex; gap: 8px; flex-wrap: wrap; }
.felt-gitter { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.felt { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 7px 0; font-size: 13px; align-items: baseline; }
.felt dt { color: var(--fg-3); margin: 0; }
.felt dd { color: var(--fg-1); margin: 0; overflow-wrap: anywhere; }
.felt dd a { color: #1f6f8b; text-decoration: none; } .felt dd a:hover { text-decoration: underline; }
.felt.advarsel dd { color: #8a5a00; font-weight: 600; }
.side-kort { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; }
.side-kort h3 { display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--font-head); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; color: var(--fg-1); }
.side-kort h3 .ikon { color: var(--idefa-orange); }
.side-kort .felt { grid-template-columns: 110px minmax(0, 1fr); padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.side-kort .felt:last-child { border-bottom: 0; }
/* Små faner inde i et kort (app.js: [data-faner]) */
.mini-faner { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--border); }
.mini-faner button { border: 1px solid var(--border); background: var(--bg-surface); border-radius: var(--r-pill); padding: 6px 14px; font: 600 12px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.mini-faner button.on { background: var(--mint-200); border-color: var(--mint-200); color: var(--idefa-blue); }
.mini-faner button .antal { height: 18px; min-width: 18px; font-size: 11px; background: var(--bg-surface); }
[data-fane-indhold][hidden] { display: none; }
/* Dashboard (Alt): felter i et gitter, ét mørkt fremhævet */
.widget-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.widget { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; min-width: 0; display: flex; flex-direction: column; }
.widget.bred { grid-column: span 2; }
.widget-titel { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 14px/1.3 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-1); margin-bottom: 14px; }
.widget-titel a { font: 500 12px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.widget.moerk { background: var(--idefa-blue); border-color: var(--idefa-blue); color: var(--fg-on-dark); }
.widget.moerk .widget-titel { color: #fff; }
.widget.moerk .stort-tal { font: 700 54px/1 var(--font-head); color: #fff; margin: 8px 0 6px; }
.widget.moerk .stort-tal small { font-size: 18px; color: var(--fg-on-dark-2); margin-left: 4px; }
.widget.moerk .under { font-size: 12px; color: var(--fg-on-dark-2); }
.widget.moerk .under b { color: var(--idefa-orange); }
.stat-raekke { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { display: flex; gap: 14px; align-items: center; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; text-decoration: none; color: inherit; transition: box-shadow .18s ease; }
.stat:hover { box-shadow: var(--shadow-md); }
.stat .stat-ikon { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--accent-wash); color: #8a5a00; display: grid; place-items: center; flex: none; }
.stat b { display: block; font: 700 28px/1 var(--font-head); color: var(--fg-1); }
.stat span { font-size: 12px; color: var(--fg-3); }
.top-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.top-liste li { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--fg-1); }
.top-liste .avatar-stor { width: 34px; height: 34px; font-size: 13px; }
.top-liste .navn { flex: 1; min-width: 0; }
.top-liste .navn small { display: block; color: var(--fg-3); font-size: 11px; }
.top-liste .vaerdi { font: 700 18px/1 var(--font-head); color: var(--fg-1); }
.handling-liste { list-style: none; margin: 0; padding: 0; }
.handling-liste li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.handling-liste li:last-child { border-bottom: 0; }
.handling-liste .h-ikon { width: 30px; height: 30px; border-radius: var(--r-md); background: var(--accent-wash); color: #8a5a00; display: grid; place-items: center; flex: none; }
.handling-liste b { display: block; color: var(--fg-1); font-weight: 600; }
.handling-liste small { color: var(--fg-3); }
.graf { width: 100%; height: auto; display: block; }
.graf-forklaring { display: flex; gap: 16px; font-size: 11px; color: var(--fg-3); margin-top: 6px; }
.graf-forklaring i, .graf-liste i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.donut { display: flex; gap: 16px; align-items: center; }
.donut svg { width: 140px; height: 140px; flex: none; }
.graf-liste { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--fg-2); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.graf-liste b { color: var(--fg-1); margin-left: 4px; }
.maaler { text-align: center; }
.maaler svg { width: 100%; max-width: 230px; }
.maaler-under { font-size: 12px; color: var(--fg-3); margin-top: 4px; }
@media (max-width: 1100px) { .widget-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-raekke { grid-template-columns: repeat(2, minmax(0, 1fr)); } .firma-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .widget-gitter, .stat-raekke, .felt-gitter { grid-template-columns: 1fr; } .widget.bred { grid-column: auto; } .felt { grid-template-columns: 110px 1fr; } }

/* ---- Journalen: fast afstand og farveregel (FB 11-11-2026: grøn = positiv, gul = neutral, rød = negativ) ---- */
.journal { display: flex; flex-direction: column; gap: 20px; }
.journal > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.journal > .note { margin-top: -8px !important; }
.journal .to-kolonner, .journal .kort-raekke, .journal .stat-raekke, .journal .widget-gitter, .journal .firma-layout { gap: 20px; }
.journal .firma-layout > .stak { gap: 20px; }
.journal .panel > table.liste, .journal details.panel > table.liste { margin-top: 4px; }
.journal details.panel > summary { cursor: pointer; }
.journal details.panel[open] > summary { margin-bottom: 14px; }
.journal table.liste td, .journal table.liste th { padding-top: 11px; padding-bottom: 11px; }
.periode-raekke .kundesoeg .search { background: var(--bg-surface); min-height: 42px; font-weight: 600; }
.er-journal .saetning { min-height: 3.2em; }
.journal .kort .maal { display: none; }
.journal .kort .lbl { min-height: 2.7em; }
.journal .delta.neutral, .delta.neutral { color: #8a5a00; }
.kpi-v.negativ { color: var(--roed); } .kpi-v.positiv { color: var(--groen); } .kpi-v.neutral { color: #8a5a00; }
.journal .dæmpet { color: #5d7382; }
.journal .vaelg-raekke { justify-content: space-between; }
.til-alle { margin-left: auto; }
.tag.groen { background: #dff1e6; color: #1f6b42; }
.tag.gul { background: var(--accent-wash); color: #8a5a00; }
.tag.roed { background: #f8ddd7; color: #8a2f1f; }
.handling-liste .h-ikon.gul { background: var(--accent-wash); color: #8a5a00; }
.handling-liste .h-ikon.roed { background: #f8ddd7; color: #8a2f1f; }
.felt.advarsel dd { color: #8a2f1f; }
.side-kort .felt.advarsel { background: #f8ddd7; border-radius: var(--r-sm); padding: 8px 10px; margin: 6px 0 0; border-bottom: 0; }

/* Blokke under hinanden med fast afstand (Salgsmuligheder: to rækker i stedet for to kolonner) */
.raekker { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.raekker > * { margin-top: 0 !important; }
/* Knap i periodelinjen, samme højde som felterne (Opfølgningsdato) */
.knap.filter-knap { min-height: 42px; padding: 0 14px; font-size: 13px; }

/* Sorterbare kolonner: overskriften er en knap, pilen viser retningen */
th.sorterbar { cursor: pointer; user-select: none; white-space: nowrap; }
th.sorterbar:hover { color: var(--fg-1); }
th.sorterbar::after { content: "↕"; margin-left: 6px; opacity: .35; font-size: 11px; }
th.sorterbar[aria-sort="ascending"]::after { content: "▲"; opacity: 1; color: var(--idefa-orange); }
th.sorterbar[aria-sort="descending"]::after { content: "▼"; opacity: 1; color: var(--idefa-orange); }
th.sorterbar[aria-sort] { color: var(--fg-1); }
th.sorterbar:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* Sammenfoldet panel: overskriften er knappen, pilen viser tilstanden */
details.fold > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; color: var(--idefa-orange); font-size: 18px; line-height: 1; width: 16px; }
details.fold[open] > summary::before { content: "▾"; }
details.fold > summary h2 { margin: 0; }
details.fold[open] > summary { margin-bottom: 16px; }
details.fold > summary:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
table.liste td.dato { white-space: nowrap; }
.panel-hoved .lbl { color: var(--fg-3); }

/* Vandret bjælke: mint = alle timer, orange = den fakturerbare del (Journalen › Timer) */
.bjaelke { display: block; height: 10px; min-width: 60px; border-radius: var(--r-pill); background: var(--hairline); overflow: hidden; }
.bjaelke .fakt { display: block; height: 100%; background: var(--idefa-orange); }
.forklaring-prik { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: middle; }
.forklaring-prik.fakt { background: var(--idefa-orange); } .forklaring-prik.ikke { background: var(--mint-200); }
.info-titel { font: 600 12px/1.3 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin: 16px 0 8px; }

/* Personkort: initialer i en mint cirkel, navn, stilling, kontakt som prik-liste, handlinger nederst */
.person-kort { display: flex; flex-direction: column; gap: 12px; }
.person-kort .hoved { display: flex; gap: 12px; align-items: center; }
.avatar-stor { width: 44px; height: 44px; border-radius: 50%; background: var(--mint-200); color: var(--idefa-blue); display: grid; place-items: center; font: 700 15px/1 var(--font-head); flex: none; }
.person-kort .navn { font: 600 16px/1.25 var(--font-head); text-transform: uppercase; color: var(--fg-1); }
.person-kort .stilling { font-size: 12px; color: var(--fg-3); }
.prik-liste { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--fg-2); }
.prik-liste li { display: flex; gap: 9px; align-items: baseline; overflow-wrap: anywhere; }
.prik-liste li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--idefa-orange); flex: none; transform: translateY(-1px); }
.prik-liste a { color: var(--fg-1); }
.person-kort .fod { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
select, input[type=text], input[type=email], input[type=url] { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-page); color: var(--fg-1); min-height: 36px; }
select:focus, input[type=text]:focus, input[type=email]:focus, input[type=url]:focus { outline: var(--focus); outline-offset: 2px; background: var(--bg-surface); }
.opret-bruger { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 0; }
.opret-bruger label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg-3); }
.opret-bruger input { min-width: 240px; }
form.inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.js .kun-uden-js { display: none; }
form.gemmer { opacity: .6; }
.vaelg-raekke { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-bottom: 16px; font-size: 13px; }
.vaelg-raekke label { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); }
table.brugere td form { margin: 0; }
table.brugere select { max-width: 190px; display: block; margin-bottom: 6px; }

/* ---- salgsmuligheder (Søren 1, 10-11): opdater-række, filtre, stolper, kort pr. salgsmulighed ---- */
.opdater-raekke { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.opdater-raekke form { margin: 0; }
.filter-raekke { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 24px 0 4px; scroll-margin-top: 16px; }
.filter-raekke .flab { font-size: 12px; color: var(--fg-3); }
.filter-raekke .flab + .chips { margin-right: 12px; }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--accent); color: var(--fg-1); }
a.chip.valgt:hover { color: #fff; }
.chip .antal { font-weight: 500; opacity: .75; }
.stolper { display: grid; gap: 8px; }
.stolpe-raekke { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 40px 110px; gap: 12px; align-items: center; font-size: 13px; }
.stolpe-navn { text-decoration: none; color: var(--fg-1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stolpe-navn:hover { color: var(--orange-600); text-decoration: underline; }
.stolpe-spor { height: 18px; }
.stolpe-fyld { height: 100%; min-width: 3px; background: var(--idefa-blue); border-radius: var(--r-sm); }
.stolpe-antal { font-variant-numeric: tabular-nums; color: var(--fg-2); }
.stolpe-kr { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vundet-pr { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--fg-2); margin: 14px 0 8px; }
.sm-trin { margin-top: 28px; scroll-margin-top: 16px; }
.sm-trin-hoved { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 12px; border-bottom: 2px solid var(--fg-1); padding-bottom: 6px; margin-bottom: 12px; }
.sm-net { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; align-items: stretch; }
.sm-kort { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sm-kort.sen { border-left: 3px solid var(--roed); }
.sm-kort.snart { border-left: 3px solid var(--accent); }
.sm-top { display: flex; flex-direction: column; gap: 2px; }
.sm-top a { text-decoration: none; }
.sm-titel { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--fg-1); }
.sm-top a:hover .sm-titel { color: var(--orange-600); text-decoration: underline; }
.sm-hvem { font-size: 12px; color: var(--fg-3); }
.sm-fakta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12px; align-items: baseline; margin: 0; }
.sm-fakta dt { color: var(--fg-3); }
.sm-fakta dd { margin: 0; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; align-items: baseline; }
.sm-id { font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; margin-top: auto; }
#vundet { margin-top: 28px; scroll-margin-top: 16px; }
.vundet-liste { max-height: 360px; overflow-y: auto; margin-top: 4px; }

/* ---- Sitemap: fanebladenes fire tilstande (mockup v33) ---- */
.forklaring { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.forklaring .chip { cursor: default; }
.chip.ja { background: var(--idefa-blue); color: #fff; border-color: var(--idefa-blue); cursor: default; }
.chip.givet { background: var(--accent); color: var(--fg-1); border-color: var(--accent); }
.chip.kan-gives { background: var(--bg-surface); color: var(--fg-2); border-color: var(--border-strong); }
.chip.kan-gives:hover { border-color: var(--accent); color: var(--fg-1); }
.chip.kan-ikke { background: transparent; color: var(--fg-3); border-color: var(--border); cursor: default; }
button.chip { font-family: inherit; }
.chip-form { display: inline; margin: 0; }
.sitemap-gruppe { margin-bottom: 16px; }
.sitemap-punkt { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); align-items: start; }
.sitemap-punkt:first-of-type { border-top: 0; }
.sitemap-navn { font-weight: 600; font-size: 13px; padding-top: 4px; }

/* ---- Log ind som ---- */
.som-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--accent-wash); border-bottom: 2px solid var(--accent); padding: 8px 32px; font-size: 13px; }
.som-bar form { margin: 0 0 0 auto; }

/* ---- notifikationer (autogem) ---- */
.toasts { position: fixed; right: 16px; bottom: 28px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--idefa-blue); color: #fff; padding: 10px 14px 10px 12px; border-radius: var(--r-md); box-shadow: var(--shadow-md); font-size: 13px; border-left: 4px solid var(--accent); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; max-width: 360px; }
.toast.vis { opacity: 1; transform: none; }
.toast.fejl { border-left-color: var(--roed); }

/* ---- «Hvem ringer» (SGO 12-11-2026): et kort pr. opkald øverst til højre, tegnet af app.js ---- */
.ringer-boks { position: fixed; right: 16px; top: 72px; display: flex; flex-direction: column; gap: 10px; z-index: 60; width: min(340px, calc(100vw - 32px)); }
.ringer-kort { background: var(--bg-surface); border: 1px solid var(--border); border-left: 4px solid #1f6b42; border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(46,64,79,.22); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.ringer-kort.ringer { border-left-color: var(--accent); animation: ringer-puls 1.2s ease-in-out infinite; }
@keyframes ringer-puls { 0%, 100% { box-shadow: 0 12px 32px rgba(46,64,79,.22); } 50% { box-shadow: 0 12px 32px rgba(46,64,79,.22), 0 0 0 6px rgba(247,167,0,.25); } }
@media (prefers-reduced-motion: reduce) { .ringer-kort.ringer { animation: none; } }
.ringer-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ringer-tid { font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ringer-luk { margin-left: auto; border: 0; background: none; color: var(--fg-3); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ringer-luk:hover { color: var(--fg-1); }
.ringer-navn { font: 600 17px/1.25 var(--font-head); color: var(--fg-1); overflow-wrap: anywhere; }
.ringer-under { font-size: 12px; color: var(--fg-3); min-height: 1em; }
.ringer-link { align-self: flex-start; margin-top: 10px; text-decoration: none; }
.ringer-link[hidden] { display: none; }
.notif-knap { margin-left: auto; white-space: nowrap; }
@media (max-width: 720px) { .notif-knap { display: none; } }

/* ---- login (mockup 01) ---- */
.login { display: flex; flex-wrap: wrap; min-height: 100vh; }
.login-venstre { flex: 1 1 480px; background: var(--idefa-blue); color: var(--fg-on-dark); padding: 56px 64px; display: flex; flex-direction: column; position: relative; overflow: hidden; min-height: 420px; }
.login-venstre .cirkel-stor { position: absolute; right: -140px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%; background: var(--accent); }
.login-venstre .cirkel-lille { position: absolute; right: 300px; bottom: 120px; width: 28px; height: 28px; border-radius: 50%; background: var(--idefa-mint); }
.login-logo { height: 44px; width: auto; align-self: flex-start; position: relative; }
.login .over { font: 600 13px/1.4 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); position: relative; }
.login-venstre .over { margin-top: 48px; }
.login-venstre h1 { font: 700 48px/1.1 var(--font-head); text-transform: uppercase; color: #fff; margin: 8px 0 16px; max-width: 520px; position: relative; }
.login-venstre p { color: var(--fg-on-dark-2); max-width: 440px; margin: 0; position: relative; }
.usp { margin-top: auto; padding-top: 48px; display: grid; gap: 10px; position: relative; font-size: 13px; color: var(--nav); }
.usp span { display: flex; align-items: center; gap: 10px; }
.usp i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; flex: 0 0 10px; }
.login-hoejre { flex: 1 1 480px; display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.login-kort { width: 100%; max-width: 420px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-md); }
.login-kort h2 { font: 700 26px/1.2 var(--font-head); text-transform: uppercase; margin: 0 0 4px; }
.login-tekst { margin: 0; font-size: 13px; color: var(--fg-2); }
.btn-primaer { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 22px; border-radius: var(--r-md); background: var(--accent); color: var(--fg-1); font: 700 15px/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.btn-primaer:hover { background: var(--accent-hover); color: var(--fg-1); }
.btn-ghost { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; margin-top: 10px; border-radius: var(--r-md); border: 2px solid var(--idefa-blue); background: transparent; color: var(--fg-1); font: 700 13px/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.btn-ghost.deaktiveret { border-color: var(--border); color: var(--fg-3); cursor: default; }
.login-fod { font-size: 11px; color: var(--fg-3); margin: 22px 0 0; line-height: 1.6; }

/* ---- enkle sider: vent, fejl ---- */
.enkel { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 32px 16px; }
.enkel-top { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; margin-bottom: 32px; }
.enkel-top .logo-blaa { height: 28px; }
.enkel-top .sub { color: var(--fg-3); font: 600 11px/1.4 var(--font-head); letter-spacing: .18em; text-transform: uppercase; flex: 1 1 auto; }
.enkel-kort { background: var(--bg-surface); border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 32px; width: 100%; max-width: 560px; }
.enkel-kort h1 { margin-bottom: 16px; }
.enkel-kort dl { display: grid; grid-template-columns: 8rem 1fr; gap: 6px 16px; } .enkel-kort dt { color: var(--fg-3); } .enkel-kort dd { margin: 0; }

/* ---- mobil ---- */
@media (max-width: 1100px) { .kort-raekke { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .side { position: fixed; left: 0; top: 0; height: 100vh; overflow-y: auto; transform: translateX(-100%); transition: transform .2s; z-index: 20; }
  .side.aaben { transform: none; box-shadow: var(--shadow-md); }
  .hamburger { display: inline-block; }
  .indhold { padding: 16px; }
  .topbar { padding: 12px 16px; }
  .sti { display: none; }
  .to-kolonner, .kort-raekke { grid-template-columns: 1fr; }
  .sitemap-punkt { grid-template-columns: 1fr; }
  .stolpe-raekke { grid-template-columns: minmax(90px, 120px) 1fr 32px 90px; gap: 8px; font-size: 12px; }
}
@media (max-width: 700px) { .login-venstre { padding: 40px 28px; } .login-venstre h1 { font-size: 36px; } .login-hoejre { padding: 32px 16px; } }

/* Roadmap · Vidensdeling · Nyheder (FB 12-11-2026): tidslinjen i Journalens form (mockup «Journal · Alt») */
.tidslinje { list-style: none; position: relative; margin: 0; padding: 0 0 0 28px; }
.tidslinje::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--blue-100); }
.tl-punkt { position: relative; padding: 0 0 20px; font-size: 13px; color: var(--fg-2); }
.tl-punkt:last-child { padding-bottom: 0; }
.tl-punkt::before { content: ""; position: absolute; left: -24px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-surface); background: var(--idefa-orange); box-shadow: 0 0 0 2px var(--idefa-orange); }
.tl-punkt.blaa::before { background: var(--idefa-blue); box-shadow: 0 0 0 2px var(--idefa-blue); }
.tl-punkt.mint::before { background: var(--idefa-mint); box-shadow: 0 0 0 2px var(--idefa-mint); }
.tl-punkt.roed::before { background: #e06b57; box-shadow: 0 0 0 2px #e06b57; }
.tl-punkt > b { display: block; font-size: 14px; color: var(--fg-1); }
.tl-punkt > p { margin: 2px 0 0; }
.tl-punkt > small { display: block; margin-top: 2px; font-size: 11px; color: var(--fg-3); }
.tl-maerke { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--hairline); color: var(--fg-2); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; line-height: 1.4; }
.tl-handling { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.tl-fold > summary { list-style: none; }
.tl-fold > summary::-webkit-details-marker { display: none; }
.tl-fold[open] { flex-basis: 100%; order: 10; }
.tl-fold[open] > summary { margin-bottom: 10px; }
.tl-formular, .roadmap-form { display: flex; flex-direction: column; gap: 10px; margin: 0; max-width: 720px; }
.tl-fold .tl-formular, .tl-fold .roadmap-form { background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; }
.roadmap-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg-3); }
.roadmap-linje { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.roadmap-linje label:first-child { flex: 1 1 260px; }
.tl-valg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-1); }
.roadmap-form textarea, input[type=date] { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); color: var(--fg-1); font: inherit; min-height: 36px; }
.roadmap-form textarea { resize: vertical; }
.roadmap-form textarea:focus, input[type=date]:focus { outline: var(--focus); outline-offset: 2px; }
.antal.ny { background: var(--accent); color: var(--fg-1); }

/* Farver (FB 12-11-2026): prikken efter status — eller efter deling på Roadmap; mærket efter status */
.tl-punkt.gul::before { background: var(--idefa-orange); box-shadow: 0 0 0 2px var(--idefa-orange); }
.tl-punkt.groen::before { background: var(--groen); box-shadow: 0 0 0 2px var(--groen); }
.tl-punkt.graa::before { background: var(--bg-surface); box-shadow: 0 0 0 2px var(--blue-300); }
.tl-maerke.s-udgivet { background: #d7eedf; color: #1f6b41; }
.tl-maerke.s-udvikling { background: var(--orange-100); color: #8a5a00; }
.tl-maerke.s-planlagt { background: var(--mint-200); color: #2f6e6c; }
.tl-maerke.s-forslag { background: var(--accent); color: var(--fg-1); }
.tl-maerke.s-afvist { background: #f8ddd7; color: #8a2f1f; }
.tl-delt { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: var(--r-md); font-size: 11px; font-weight: 600; }
.tl-delt.videns { background: var(--mint-200); color: #2f6e6c; }
.tl-delt.nyhed { background: var(--orange-100); color: #8a5a00; }
.tl-forklaring { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 18px; font-size: 11px; color: var(--fg-3); }
.tl-forklaring span { display: inline-flex; align-items: center; gap: 6px; }
.tl-forklaring span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.tl-forklaring .graa::before { border: 2px solid var(--blue-300); width: 8px; height: 8px; background: var(--bg-surface); }
.tl-forklaring .mint::before { background: var(--idefa-mint); }
.tl-forklaring .gul::before { background: var(--idefa-orange); }
.tl-forklaring .groen::before { background: var(--groen); }

/* Vidensdeling og Nyheder: listen til venstre, den grønne formular til højre (som kundeportalens «Jeres næste skridt») */
.to-kol { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.to-kol > .raekker { margin-top: 0; }
@media (max-width: 960px) { .to-kol { grid-template-columns: minmax(0, 1fr); } }
.groen-panel { background: var(--mint-200); border-color: var(--mint-200); }
.groen-panel h2 { letter-spacing: .08em; }
.groen-panel .lille { color: var(--fg-2); }
.groen-panel .roadmap-form label { color: var(--fg-2); }
.groen-panel input[type=text], .groen-panel textarea { background: var(--bg-surface); border-color: #b4d9d8; }
.feed-soeg { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.feed-soeg label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg-3); }
.feed-soeg label:first-child { flex: 1 1 200px; }
.feed-mere { margin-top: 18px; }
.feed-mere > summary::before { display: none; }
.feed-mere[open] > summary { margin-bottom: 18px; }
.chip-skille { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.tl-maerke.s-viden { background: var(--idefa-blue); color: #fff; }

/* IdeFA Ledelse · forsiden (FB 12-11-2026, mockup Main): notifikationerne i den mørke boks, små tal i rækker */
.notif-boks .over { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--idefa-orange); }
.notif-boks h2 { color: #fff; margin: 6px 0 14px; }
.notif { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); color: var(--fg-on-dark); text-decoration: none; }
.notif:hover { color: #fff; } .notif:hover b { text-decoration: underline; text-underline-offset: 3px; }
.notif b { display: block; color: #fff; font-size: 13px; }
.notif .t { display: block; font-size: 12px; color: var(--fg-on-dark-2); margin-top: 2px; }
.notif small { display: block; font-size: 11px; color: var(--fg-on-dark-2); margin-top: 4px; }
.notif .sd { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--idefa-mint); }
.notif .sd.o { background: var(--idefa-orange); } .notif .sd.r { background: #e06b57; }
.notif-boks .knap { margin-top: 14px; }
.tal-raekke { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); margin-top: 10px; }
.tal-raekke > div { flex: 1; }
.tal-raekke b { display: block; font-size: 14px; color: var(--fg-1); }
.tal-raekke small { font-size: 11px; color: var(--fg-3); }
.top-liste .vaerdi.skidt { color: var(--roed); font-size: 15px; }
.top-liste .navn small { display: block; font-size: 11px; color: var(--fg-3); }
.to-kol.strak { align-items: stretch; }

/* «Læs mere» ved en supportsag (FB 13-11-2026): beskederne foldes ud i en række under sagen */
.laes-mere { display: none; margin-left: 8px; padding: 0; border: 0; background: none; color: var(--idefa-blue); font: 600 12px/1.4 var(--font-body); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.js .laes-mere { display: inline; }
.laes-mere:hover { color: var(--accent-hover); }
table.liste tbody tr.sag-beskeder td, table.rig tbody tr.sag-beskeder td { background: var(--bg-surface); padding: 4px 10px 18px; border-top: 0; }
div.beskeder.sag-beskeder { margin-top: 10px; }
.besked > .lille { display: block; margin-top: 8px; }
.beskeder { display: grid; gap: 10px; max-width: 860px; }
.besked { border: 1px solid var(--border); border-left: 4px solid var(--idefa-blue); border-radius: var(--r-md); padding: 12px 14px; background: var(--bg-surface); }
.besked.kunde { border-left-color: var(--idefa-orange); }
.besked.intern { border-left-color: var(--border-strong); background: var(--bg-page); }
.besked-hoved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
table.liste .besked-hoved .lille, table.liste .besked > .lille { display: inline; margin: 0; }
table.liste .besked > .lille { display: block; margin-top: 8px; }
.besked-tekst { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; }