/* HASdesk: brugerflade i HAS Design (samme tokens som Mit HAS og mitHAS Admin).
 *
 * Regler fra designsystemet:
 *   - Inter fra egen server, syv størrelser (12, 14, 16, 18, 22, 28, 36), tre vægte (400, 600, 700).
 *   - Tre radier (8, 12, 16) plus pille. Felter og knapper 48 px; berøringsflader mindst 44 px.
 *   - Pink er kun den primære handling. Blå er links, fokus og information.
 *     Rød er handlinger, der ikke kan gøres om, og overskredne frister.
 *   - Én fokusring: 3 px blå. Ikoner er Lucide (ikoner.svg), aldrig emoji eller tegn.
 *   - Ingen tankestreger i brugervendt tekst.
 */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../skrift/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../skrift/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../skrift/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Flader */
  --bg: #f2f5f8;
  --kort: #ffffff;
  --kort-2: #f8fafb;
  --kant: #e3e9ee;
  --kant-felt: #8a96a3; --kant-felt-hover: #6b7785;
  --kant-knap: #c9d2da;
  --moerk-flade: #16181c;
  /* Tekst */
  --overskrift: #16181c;
  --tekst: #2b3038;
  --tekst-2: #5b6673;
  --tekst-deaktiv: #8a96a3;
  /* Handling og information. --blaa er links og tekst; --blaa-500 kun flader og grafik, aldrig tekst. */
  --pink: #c71e71; --pink-hover: #a3175c;
  --blaa: #0076ae; --blaa-500: #0094d9; --blaa-700: #005f8c;
  --blaa-flade: #e3f2fb; --blaa-50: #f2f9fd;
  --fokus: #0076ae;
  /* Tilstande: tekst, flade, kant og ikon */
  --info: #005f8c; --info-bg: #f2f9fd; --info-kant: #cfe3f0; --info-ikon: #0076ae;
  --adv: #8a5a12; --adv-bg: #fdf6e8; --adv-kant: #ecd6a6; --adv-ikon: #b7791f;
  --ok: #157347; --ok-bg: #edf8f1; --ok-kant: #c9e4d3; --ok-ikon: #1f9d55;
  --fare: #a93226; --fare-bg: #fdf1f0; --fare-kant: #f0d0cc; --fare-ikon: #c0392b;
  --neutral: #5b6673; --neutral-bg: #f2f5f8; --neutral-kant: #e3e9ee;
  /* Rød knap og overskredne frister: ens i begge temaer, hvid tekst */
  --fare-knap: #c0392b; --fare-knap-hover: #a93226;
  /* Grafer */
  --graf-a: var(--blaa-500);
  --graf-b: var(--ok-ikon);
  /* Skelet */
  --skelet: #e8edf2; --skelet-2: #f4f7fa;
  /* Skygger */
  --skygge-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --skygge-2: 0 6px 16px -4px rgba(16, 24, 40, .12);
  --skygge-3: 0 16px 40px -8px rgba(16, 24, 40, .20);
  /* Mål og bevægelse (Mit HAS: 4/8-skala, 120 og 200 ms) */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-pille: 999px;
  --side-b: 256px;
  --liste-b: 400px;
  --top-h: 64px;
  --kurve: cubic-bezier(.2, .8, .2, 1);
  --hurtig: 120ms; --rolig: 200ms;
  --skrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* Mørkt tema: Mit HAS' mørke tokens (app-v2.html, 5/11 2026). Følger enheden, medmindre Profil siger andet. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) {
    --bg: #0f1318; --kort: #171c22; --kort-2: #1d232a; --kant: #2a323b;
    --kant-felt: #6e7a87; --kant-felt-hover: #8d99a6; --kant-knap: #3b4550; --moerk-flade: #232b34;
    --overskrift: #f1f4f7; --tekst: #d5dbe1; --tekst-2: #9ba6b2; --tekst-deaktiv: #6b7684;
    --pink: #c71e71; --pink-hover: #a3175c;
    --blaa: #5cbcec; --blaa-500: #2ea7e0; --blaa-700: #8fd0f2; --blaa-flade: #173350; --blaa-50: #13283a;
    --fokus: #7fd0f5;
    --info: #8fd0f2; --info-bg: #13283a; --info-kant: #21435e; --info-ikon: #5cbcec;
    --adv: #f0c26a; --adv-bg: #2a2112; --adv-kant: #4d3b1a; --adv-ikon: #e0a93a;
    --ok: #6fd39b; --ok-bg: #11261b; --ok-kant: #1f4a33; --ok-ikon: #3fc47b;
    --fare: #ff8a7e; --fare-bg: #2c1513; --fare-kant: #5a2620; --fare-ikon: #f06a5c;
    --neutral: #9ba6b2; --neutral-bg: #1d232a; --neutral-kant: #2a323b;
    --skelet: #1f262e; --skelet-2: #29313b;
    --skygge-1: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
    --skygge-2: 0 6px 16px -4px rgba(0, 0, 0, .55);
    --skygge-3: 0 16px 40px -8px rgba(0, 0, 0, .65);
    color-scheme: dark;
  }
}
:root[data-tema="moerk"] {
  --bg: #0f1318; --kort: #171c22; --kort-2: #1d232a; --kant: #2a323b;
  --kant-felt: #6e7a87; --kant-felt-hover: #8d99a6; --kant-knap: #3b4550; --moerk-flade: #232b34;
  --overskrift: #f1f4f7; --tekst: #d5dbe1; --tekst-2: #9ba6b2; --tekst-deaktiv: #6b7684;
  --pink: #c71e71; --pink-hover: #a3175c;
  --blaa: #5cbcec; --blaa-500: #2ea7e0; --blaa-700: #8fd0f2; --blaa-flade: #173350; --blaa-50: #13283a;
  --fokus: #7fd0f5;
  --info: #8fd0f2; --info-bg: #13283a; --info-kant: #21435e; --info-ikon: #5cbcec;
  --adv: #f0c26a; --adv-bg: #2a2112; --adv-kant: #4d3b1a; --adv-ikon: #e0a93a;
  --ok: #6fd39b; --ok-bg: #11261b; --ok-kant: #1f4a33; --ok-ikon: #3fc47b;
  --fare: #ff8a7e; --fare-bg: #2c1513; --fare-kant: #5a2620; --fare-ikon: #f06a5c;
  --neutral: #9ba6b2; --neutral-bg: #1d232a; --neutral-kant: #2a323b;
  --skelet: #1f262e; --skelet-2: #29313b;
  --skygge-1: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);
  --skygge-2: 0 6px 16px -4px rgba(0, 0, 0, .55);
  --skygge-3: 0 16px 40px -8px rgba(0, 0, 0, .65);
  color-scheme: dark;
}

/* ── Grundlag ─────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--tekst); font: 400 14px/20px var(--skrift); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blaa); text-underline-offset: 2px; }
a:hover { color: var(--blaa-700); }
h1, h2, h3 { color: var(--overskrift); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.skjult { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tal { font-variant-numeric: tabular-nums; }
.ikon { flex: none; display: inline-block; vertical-align: middle; }
.noscript { padding: 24px; font: 16px/24px var(--skrift); }
.spring-over { position: absolute; left: -9999px; top: 16px; z-index: 200; padding: 12px 16px; border-radius: var(--r-m); background: var(--kort); box-shadow: var(--skygge-2); }
.spring-over:focus { left: 16px; }

/* ── Knapper og felter ─────────────────────────────── */
.knap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid var(--kant-knap); border-radius: var(--r-m); background: var(--kort); color: var(--overskrift); font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--hurtig) var(--kurve), border-color var(--hurtig) var(--kurve), transform var(--hurtig) var(--kurve); }
.knap:hover { background: var(--kort-2); border-color: var(--kant-felt); }
.knap:active { transform: scale(.98); }
.knap:disabled { opacity: .55; cursor: default; transform: none; }
.knap.primaer { background: var(--pink); border-color: var(--pink); color: #fff; }
.knap.primaer:hover { background: var(--pink-hover); border-color: var(--pink-hover); }
.knap.fare { background: var(--fare-knap); border-color: var(--fare-knap); color: #fff; }
.knap.fare:hover { background: var(--fare-knap-hover); border-color: var(--fare-knap-hover); }
.knap.lille { min-height: 36px; padding: 0 12px; border-radius: var(--r-s); }
.knap.flad { border-color: transparent; background: transparent; color: var(--tekst); }
.knap.flad:hover { background: var(--kort-2); border-color: transparent; }
.knap.bred { width: 100%; }
.ikonknap { width: 44px; min-height: 44px; padding: 0; }
.ikonplads { display: inline-flex; }
@media (pointer: coarse) { .knap.lille { min-height: 44px; } }

.felt, select.felt, textarea.felt { display: block; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--kant-felt); border-radius: var(--r-m); background: var(--kort); color: var(--overskrift); font-size: 16px; line-height: 22px; letter-spacing: -.011em; }
select.felt { padding-right: 36px; }
textarea.felt { resize: vertical; line-height: 24px; }
.felt::placeholder { color: var(--tekst-2); opacity: 1; }
.felt:hover { border-color: var(--kant-felt-hover); }
.felt:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--blaa); }
input[type="color"].felt { padding: 4px; height: 48px; }
input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--blaa); flex: none; }
label.etiket { display: block; font-size: 14px; font-weight: 600; color: var(--overskrift); margin: 16px 0 8px; }
.tjek { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; color: var(--tekst); }
.kort > label.tjek, .dialog-krop > div > label.tjek { display: flex; }
.raekke { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mellem { flex: 1; min-width: 0; }
.knaprad { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.hjaelp { font-size: 14px; line-height: 20px; color: var(--tekst-2); }
.hjaelp .ikon { vertical-align: -3px; }
.fejltekst { color: var(--fare); font-size: 14px; font-weight: 600; margin: 12px 0 0; }
.fejltekst:empty { display: none; }

/* Bokse: information, advarsel, succes og fejl */
.boks { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid; border-radius: var(--r-m); font-size: 14px; line-height: 20px; }
.boks > .ikon { margin-top: 1px; }
.boks.info { background: var(--info-bg); border-color: var(--info-kant); color: var(--info); }
.boks.info > .ikon { color: var(--info-ikon); }
.boks.advarsel { background: var(--adv-bg); border-color: var(--adv-kant); color: var(--adv); }
.boks.advarsel > .ikon { color: var(--adv-ikon); }
.boks.ok { background: var(--ok-bg); border-color: var(--ok-kant); color: var(--ok); }
.boks.ok > .ikon { color: var(--ok-ikon); }
.boks.fare { background: var(--fare-bg); border-color: var(--fare-kant); color: var(--fare); }
.boks.fare > .ikon { color: var(--fare-ikon); }
.boks .knap { margin-left: 4px; }

/* Kort */
.kort { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r-l); padding: 24px; }
.kort > h2:first-child { margin-top: 0; }
.kort h2 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.014em; margin: 0 0 12px; }
.kort > .boks + *, .kort > * + .boks { margin-top: 12px; }

/* Chips og mærker */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pille); background: var(--neutral-bg); color: var(--tekst); font-size: 14px; font-weight: 600; white-space: nowrap; }
.chip.kontor { background: var(--ok-bg); color: var(--ok); }
.chip.kontor .ikon { color: var(--ok-ikon); }
.chip.vagt { background: var(--info-bg); color: var(--info); }
.chip.vagt .ikon { color: var(--info-ikon); }
.chip.lukket { background: var(--neutral-bg); color: var(--neutral); }
.chip.fejl { background: var(--fare-bg); color: var(--fare); }
.chip .ur { font-weight: 400; color: inherit; opacity: .85; }

.frist { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: var(--r-pille); font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--neutral-bg); color: var(--tekst-2); }
.frist.ok { background: var(--ok-bg); color: var(--ok); }
.frist.snart { background: var(--adv-bg); color: var(--adv); }
.frist.overskredet { background: var(--fare-knap); color: #fff; }
.frist.pause { background: var(--neutral-bg); color: var(--tekst-2); font-weight: 400; }
.frist.opfyldt { background: transparent; color: var(--tekst-2); font-weight: 400; padding: 0; }

.maerke { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: var(--r-pille); font-size: 12px; line-height: 16px; font-weight: 600; background: var(--neutral-bg); color: var(--tekst-2); white-space: nowrap; }
.maerke.vagt { background: var(--info-bg); color: var(--info); }
.maerke.nat { background: var(--neutral-bg); color: var(--neutral); }
.maerke.fejl { background: var(--fare-bg); color: var(--fare); }
.maerke.akut { background: var(--fare-knap); color: #fff; }
.maerke.hoej { background: var(--adv-bg); color: var(--adv); }
.maerke.genaabnet { background: var(--blaa-flade); color: var(--blaa); }
.maerke.kigger { background: var(--blaa-flade); color: var(--blaa); }
.maerkerlinje { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }

.initialer { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blaa-flade); color: var(--blaa); font-weight: 600; font-size: 14px; flex: none; }
.initialer.lille { width: 24px; height: 24px; font-size: 12px; }
.initialer.tom { background: transparent; border: 1px dashed var(--kant-felt); color: var(--tekst-2); }

.farve { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex: none; }
td .farve { margin-right: 8px; vertical-align: -1px; }

/* ── Logo ─────────────────────────────── */
.logo { display: inline-flex; align-items: flex-end; gap: 6px; color: var(--overskrift); }
.logo-has { display: block; height: 32px; width: auto; }
.logo-desk { font-size: 22px; line-height: 22px; font-weight: 600; letter-spacing: -.018em; color: var(--pink); margin-bottom: -2px; }
.logo-link { text-decoration: none; border-radius: var(--r-s); }

/* ── Ramme: sidebjælke, topbjælke, liste og indhold ─────────────────────────────── */
.ramme { display: grid; grid-template-columns: var(--side-b) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.ramme > * { min-width: 0; min-height: 0; }
.sidebjaelke { display: flex; flex-direction: column; background: var(--kort); border-right: 1px solid var(--kant); min-height: 0; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px 24px; }
.side-handling { padding: 0 16px 8px; }
.menu { flex: 1; overflow-y: auto; padding: 4px 12px 16px; }
/* Tynde rullebjælker i tokenfarver. Ellers viser Windows de gamle grå med pile i menuen og listerne. */
.menu, .listekrop, .indhold, .dialog-krop { scrollbar-width: thin; scrollbar-color: var(--kant-knap) transparent; }
.menu h3 { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tekst-2); margin: 20px 12px 4px; }
.menupunkt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-m); background: none; color: var(--tekst); font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.menupunkt .ikon { color: var(--tekst-2); }
.menupunkt .farve { margin: 0 3px; }
.menupunkt:hover { background: var(--kort-2); }
.menupunkt.valgt { background: var(--blaa-flade); color: var(--blaa); font-weight: 600; }
.menupunkt.valgt .ikon { color: var(--blaa); }
.menupunkt.stille { color: var(--tekst-2); }
.menupunkt .navn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.antal { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 8px; border-radius: var(--r-pille); background: var(--neutral-bg); color: var(--tekst-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.antal.fare { background: var(--fare-knap); color: #fff; }
.antal.advarsel { background: var(--adv-bg); color: var(--adv); }
.side-fod { border-top: 1px solid var(--kant); padding: 12px; }
.bruger { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--kant); }
.bruger-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px 8px; border-radius: var(--r-m); color: var(--tekst); text-decoration: none; }
.bruger-link:hover { background: var(--kort-2); }
.bruger-link.valgt { background: var(--blaa-flade); }
.bruger-navn { display: flex; flex-direction: column; min-width: 0; }
.bruger-navn strong { font-size: 14px; color: var(--overskrift); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bruger-navn span { font-size: 12px; line-height: 16px; color: var(--tekst-2); }

.arbejde { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { flex: none; height: var(--top-h); display: flex; align-items: center; gap: 16px; padding: 0 24px; background: var(--kort); border-bottom: 1px solid var(--kant); }
.soeg { flex: 1; max-width: 560px; position: relative; }
.soeg > .ikon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tekst-2); pointer-events: none; }
.soeg .felt { min-height: 44px; padding: 10px 14px 10px 44px; background: var(--bg); font-size: 14px; }
.tilstand { margin-left: auto; display: flex; align-items: center; }
.baand-top { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 0; }
.baand-top:empty { display: none; }
.boks.smal { padding: 10px 14px; }

.flade { flex: 1; display: grid; grid-template-columns: var(--liste-b) minmax(0, 1fr); min-height: 0; }
.flade > * { min-width: 0; min-height: 0; }
.ramme.uden-liste .flade { grid-template-columns: minmax(0, 1fr); }
.ramme.uden-liste .liste { display: none; }
.menu-skygge, .menuknap-mobil, .luk-menu, .tilbage-mobil { display: none; }

/* ── Liste ─────────────────────────────── */
.liste { display: flex; flex-direction: column; background: var(--kort); border-right: 1px solid var(--kant); }
.listehoved { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 20px; border-bottom: 1px solid var(--kant); }
.listehoved h2 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.014em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.antal-i-alt { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: var(--r-pille); background: var(--neutral-bg); color: var(--tekst-2); font-size: 12px; font-weight: 600; }
.listekrop { overflow-y: auto; flex: 1; }
.sagsraekke { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 20px 12px 24px; border-bottom: 1px solid var(--kant); cursor: pointer; }
.sagsraekke::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kat, var(--kant)); }
.sagsraekke:hover { background: var(--kort-2); }
.sagsraekke.valgt { background: var(--blaa-flade); }
.sagsraekke:focus-visible { outline-offset: -3px; }
.sagsraekke .emne { font-size: 16px; line-height: 24px; letter-spacing: -.011em; color: var(--overskrift); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sagsraekke.ulaest .emne { font-weight: 600; }
.sagsraekke.ulaest .emne::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blaa); margin-right: 8px; vertical-align: 2px; }
.sagsraekke .hvem { grid-column: 1; display: flex; gap: 8px; font-size: 14px; line-height: 20px; color: var(--tekst-2); min-width: 0; }
.sagsraekke .hvem .navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sagsraekke .hvem .tid { flex: none; }
.sagsraekke .uddrag { grid-column: 1 / 3; display: flex; gap: 8px; align-items: center; font-size: 14px; line-height: 20px; color: var(--tekst-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sagsraekke .uddrag .maerkerlinje { flex: none; flex-wrap: nowrap; }
.sagsraekke .uddrag-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sagsraekke .hoejre { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tomliste { padding: 48px 24px; text-align: center; color: var(--tekst-2); }
.tomliste .ikon { color: var(--kant-felt); }
.tomliste p { margin: 12px 0 0; font-size: 16px; }

/* ── Indhold ─────────────────────────────── */
.indhold { overflow-y: auto; background: var(--bg); }
.indhold:focus { outline: none; }
.side { max-width: 1200px; padding: 32px 32px 64px; display: flex; flex-direction: column; gap: 24px; }
.side.smal-side { max-width: 760px; }
.side > h1, .sidehoved h1 { font-size: 28px; line-height: 34px; font-weight: 700; margin: 0; letter-spacing: -.021em; }
.undertitel { font-size: 16px; line-height: 24px; color: var(--tekst-2); margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.undertitel:empty { display: none; }
.sidehoved .raekke, .sidehoved.raekke { align-items: flex-end; }
.tom-indhold { display: grid; place-items: center; height: 100%; padding: 32px; text-align: center; color: var(--tekst-2); }
.tom-indhold > div > .ikon { color: var(--kant-felt); }
.tom-titel { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.014em; color: var(--overskrift); margin: 12px 0 4px; }
.stak { display: flex; flex-direction: column; gap: 16px; }
.to-spalter { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-items: start; }
.dialog-krop .to-spalter { gap: 0 16px; }

/* Dagsoverblik og statistik */
.noegletal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.kort.noegle { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 16px; align-items: center; padding: 20px; width: 100%; text-align: left; color: var(--tekst); font: inherit; }
button.kort.noegle { cursor: pointer; }
button.kort.noegle { transition: border-color var(--hurtig) var(--kurve), box-shadow var(--rolig) var(--kurve); }
button.kort.noegle:hover { border-color: var(--kant-felt); box-shadow: var(--skygge-2); }
.noegle-ikon { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-m); background: var(--neutral-bg); color: var(--tekst-2); }
.noegle .tal { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.021em; color: var(--overskrift); }
.noegle .tekst { font-size: 14px; line-height: 20px; color: var(--tekst-2); }
.noegle.fare .noegle-ikon { background: var(--fare-bg); color: var(--fare-ikon); }
.noegle.fare .tal { color: var(--fare); }
.noegle.advarsel .noegle-ikon { background: var(--adv-bg); color: var(--adv-ikon); }
.noegle.advarsel .tal { color: var(--adv); }
.noegle.info .noegle-ikon { background: var(--info-bg); color: var(--info-ikon); }
.noegle.ok .noegle-ikon { background: var(--ok-bg); color: var(--ok-ikon); }
.noegle.nul .tal { color: var(--tekst-2); }
.dagstal { margin: -8px 0 0; }

.baand-kort { padding: 16px 24px 4px; }
.baand { position: relative; padding: 30px 0 26px; user-select: none; }
.baand-spor { position: relative; height: 40px; border-radius: var(--r-s); background: var(--neutral-bg); overflow: hidden; }
.baand-felt { position: absolute; top: 0; bottom: 0; }
.baand-felt.kontor { background: var(--ok-bg); box-shadow: inset 0 -3px 0 var(--ok); }
.baand-felt.vagt { background: var(--info-bg); box-shadow: inset 0 -3px 0 var(--info); }
.baand-felt span { position: absolute; left: 10px; top: 10px; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.baand-felt.kontor span { color: var(--ok); }
.baand-felt.vagt span { color: var(--info); }
.baand-nu { position: absolute; top: 20px; bottom: 46px; width: 2px; background: var(--overskrift); z-index: 2; }
.baand-nu::before { content: attr(data-tid); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; color: var(--overskrift); }
.baand-naal { position: absolute; top: 26px; width: 16px; height: 52px; margin-left: -8px; z-index: 3; cursor: pointer; border: 0; padding: 0; background: none; border-radius: var(--r-s); }
.baand-naal::after { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: currentColor; }
.baand-naal::before { content: ""; position: absolute; left: 3px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.baand-naal.ok { color: var(--ok); }
.baand-naal.snart { color: var(--adv); }
.baand-naal.overskredet { color: var(--fare); }
.baand-skala { position: relative; height: 16px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.baand-skala span { position: absolute; transform: translateX(-50%); }
.baand-for-sent { position: absolute; left: 0; top: 4px; font-size: 12px; line-height: 16px; color: var(--fare); font-weight: 600; }

.soejler { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 8px; border-bottom: 1px solid var(--kant); }
.soejle { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 8px; }
.soejlepar { display: flex; gap: 2px; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }
.soejle i { display: block; width: 100%; max-width: 14px; background: var(--graf-a); border-radius: 4px 4px 0 0; }
.soejle i.b { background: var(--graf-b); }
.soejlenavne { display: flex; gap: 4px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--tekst-2); }
.soejlenavne span { flex: 1; text-align: center; min-width: 8px; }
.forklaring { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--tekst-2); }
.forklaring i { width: 12px; height: 12px; border-radius: 4px; background: var(--graf-a); }
.forklaring i.b { background: var(--graf-b); }

/* Tabeller */
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tabel th, .tabel td { text-align: left; padding: 12px; border-bottom: 1px solid var(--kant); vertical-align: middle; }
.tabel thead th { font-size: 12px; line-height: 16px; color: var(--tekst-2); font-weight: 600; }
.tabel tbody tr:last-child > * { border-bottom: 0; }
.tabel td.tal, .tabel th.tal { text-align: right; }
.tabel tr.klik { cursor: pointer; }
.tabel tr.klik:hover td { background: var(--kort-2); }
.tabel tr.inaktiv td { opacity: .55; }
.tabel .tal-fare { color: var(--fare); font-weight: 700; }
.tabel.kort-tabel { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r-l); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.tabel.kort-tabel thead th { background: var(--kort-2); }
.noegletabel th { width: 45%; font-weight: 400; color: var(--tekst-2); }
.frist-tabel th:first-child, .frist-tabel td:first-child, .frist-tabel th:last-child, .frist-tabel td:last-child { width: 1%; white-space: nowrap; }
.kort > .tabel { margin: 0 -12px; width: calc(100% + 24px); }

/* ── Sagen ─────────────────────────────── */
.sag { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 100%; }
.sag-hoved { grid-column: 1 / 3; position: sticky; top: 0; z-index: 5; padding: 20px 32px 16px; background: var(--kort); border-bottom: 1px solid var(--kant); }
.sag-titel { display: flex; align-items: center; gap: 12px; }
.sag-titel .nr { flex: none; padding: 0 10px; min-height: 28px; display: inline-grid; place-items: center; border-radius: var(--r-pille); background: var(--neutral-bg); color: var(--tekst-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sag-titel h1 { flex: 1; min-width: 0; margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.018em; cursor: text; }
.sag-titel > input.felt { flex: 1; font-size: 18px; font-weight: 600; }
.sag-felter { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.sag-felter select.felt { flex: 1 1 150px; width: auto; min-width: 0; max-width: 260px; min-height: 44px; padding: 10px 32px 10px 12px; font-size: 14px; }
.fristbaand { margin-top: 12px; display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.fristbaand .tekst { color: var(--tekst-2); }
.kiggere { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--blaa); }
.sag-venstre { display: flex; flex-direction: column; min-width: 0; }
.traad { padding: 24px 32px 8px; display: flex; flex-direction: column; gap: 16px; }
.besked { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r-l); overflow: hidden; }
.besked.ud { background: var(--info-bg); border-color: var(--info-kant); }
.besked.intern { background: var(--adv-bg); border-color: var(--adv-kant); }
.besked.system { background: var(--fare-bg); border-color: var(--fare-kant); }
.besked.auto { opacity: .8; }
.besked-hoved { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; padding: 16px 20px 0; font-size: 14px; }
.retning-ikon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-s); background: var(--neutral-bg); color: var(--tekst-2); flex: none; }
.besked.ud .retning-ikon { background: var(--blaa-flade); color: var(--blaa); }
.besked.intern .retning-ikon { background: var(--kort); color: var(--adv); }
.besked.system .retning-ikon { background: var(--kort); color: var(--fare); }
.besked-hoved .fra { font-weight: 600; color: var(--overskrift); }
.besked-hoved .adr { color: var(--tekst-2); overflow-wrap: anywhere; }
.besked-hoved .tid { margin-left: auto; color: var(--tekst-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.besked-krop { padding: 8px 20px 16px 64px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 24px; letter-spacing: -.011em; max-width: 86ch; color: var(--tekst); }
.citatknap { margin: -4px 20px 12px 52px; } /* 64 - knappens 12 px */
.citat { white-space: pre-wrap; color: var(--tekst-2); font-size: 14px; line-height: 22px; padding: 12px 20px 16px 64px; border-top: 1px dashed var(--kant); overflow-wrap: anywhere; }
.besked-fod { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; padding: 0 20px 16px 64px; font-size: 14px; color: var(--tekst-2); }
.besked-fod > span { display: inline-flex; align-items: center; gap: 4px; }
.status-ok { color: var(--ok); font-weight: 600; }
.status-fejl { color: var(--fare); font-weight: 600; }
.status-vent { color: var(--adv); font-weight: 600; }
.vedh { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--kant); border-radius: var(--r-s); background: var(--kort); color: var(--overskrift); font-size: 14px; text-decoration: none; max-width: 100%; }
a.vedh:hover { border-color: var(--blaa); color: var(--blaa); }
.status-ok .ikon { color: var(--ok-ikon); }
.status-fejl .ikon { color: var(--fare-ikon); }
.status-vent .ikon { color: var(--adv-ikon); }
.vedh.fjernet { color: var(--tekst-2); text-decoration: line-through; }
.vedh .fjern { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: -8px; border: 0; border-radius: var(--r-s); background: none; color: var(--tekst-2); cursor: pointer; }
.vedh .fjern:hover { background: var(--kort-2); color: var(--overskrift); }
.htmlramme { display: block; width: 100%; height: 60vh; border: 0; border-top: 1px solid var(--kant); background: #fff; }
/* Mailvisning i tråden: mailens egen højde (sættes af tilpasRamme), hvid som i et mailprogram. */
.htmlramme.auto { width: calc(100% - 84px); height: 320px; margin: 4px 20px 16px 64px; border: 1px solid var(--kant); border-radius: var(--r-m); }
/* Den originale mail (dialog). */
dialog.original { width: min(960px, calc(100vw - 32px)); }
dialog.bred { width: min(720px, calc(100vw - 32px)); }

/* Push til medlemmer (0.4.0) */
.segment { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--kant); border-radius: var(--r-m); background: var(--kort-2); flex-wrap: wrap; }
.segment button { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--tekst); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.segment button[aria-checked="true"] { background: var(--kort); color: var(--blaa); box-shadow: var(--skygge-1); }
.segment button:disabled { color: var(--tekst-deaktiv); cursor: not-allowed; }
.pushmodtagere { margin-top: 12px; }
.pushregler { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pushregel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px; border: 1px solid var(--kant); border-radius: var(--r-m); background: var(--kort-2); }
.pushregel .regeltype { flex: none; width: 88px; font-size: 13px; font-weight: 600; color: var(--tekst-2); }
.pushregel .felt, .pushregel select.felt { flex: 1 1 80px; width: auto; min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 14px; }
.pushregel .felt.bred { flex: 3 1 180px; }
/* Vej: vejnavn og postnummer på første linje, husnumre og side på den næste; fjern-knappen bliver i højre side. */
.pushregel.vej { display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "t v v p x" ". fr ti sd sd"; }
.pushregel.vej .regeltype { grid-area: t; }
.pushregel.vej [data-felt=vej] { grid-area: v; }
.pushregel.vej [data-felt=postnr] { grid-area: p; }
.pushregel.vej [data-felt=fra] { grid-area: fr; }
.pushregel.vej [data-felt=til] { grid-area: ti; }
.pushregel.vej [data-felt=side] { grid-area: sd; }
.pushregel.vej > .knap { grid-area: x; justify-self: end; }
@media (max-width: 560px) {
  .pushregel.vej { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "t x" "v v" "p sd" "fr ti"; }
  .pushregel .regeltype { width: auto; }
}
.pushregel select.felt { padding-right: 28px; }
.knaprad-venstre { flex-wrap: wrap; gap: 8px; }
.etiketlinje { align-items: baseline; }
.etiketlinje .etiket { margin-bottom: 8px; }
.taeller { font-size: 12px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.taeller.fuld { color: var(--adv); font-weight: 600; }
.notifikation { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: var(--kort-2); border: 1px solid var(--kant); box-shadow: var(--skygge-1); max-width: 420px; }
.notifikation .mellem { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 19px; color: var(--overskrift); }
.notifikation strong { font-weight: 600; overflow-wrap: anywhere; }
.notifikation span { overflow-wrap: anywhere; }
.notifikation .notif-app { margin-top: 2px; font-size: 12px; color: var(--tekst-2); }
.notif-ikon { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--moerk-flade); display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.notif-ikon i { width: 8px; height: 8px; display: block; }
.notif-ikon i.p { background: var(--pink); }
.notif-ikon i.b { background: var(--blaa-500); }
.pushdialog .boks { margin-top: 16px; }
.pushstatus { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--r-pille); font-size: 12px; font-weight: 600; background: var(--neutral-bg); color: var(--tekst-2); white-space: nowrap; }
.pushstatus.ok { background: var(--ok-bg); color: var(--ok); }
.pushstatus.fare { background: var(--fare-bg); color: var(--fare); }
.pushstatus.advarsel { background: var(--adv-bg); color: var(--adv); }
.pushstatus.venter { background: var(--info-bg); color: var(--info); }
.push-tabel td { vertical-align: top; }
.push-tabel .tid-celle { width: 1%; white-space: nowrap; }
.org-felter { margin: 0 0 16px; display: grid; gap: 4px; font-size: 14px; line-height: 20px; }
.org-raekke { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
.org-raekke dt { color: var(--tekst-2); font-weight: 600; }
.org-raekke dd { margin: 0; color: var(--overskrift); overflow-wrap: anywhere; }
.org-vaerktoej { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.org-tekst { margin: 0; padding: 16px; border: 1px solid var(--kant); border-radius: var(--r-m); background: var(--kort-2); color: var(--overskrift); font: 14px/20px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--kant-knap) transparent; }
.org-tekst.lille { font-size: 12px; line-height: 18px; max-height: 40vh; }
.org-html { height: 42vh; border: 1px solid var(--kant); border-radius: var(--r-m); }
.org-filer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.org-detaljer { margin-top: 16px; }
.org-detaljer summary { cursor: pointer; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--overskrift); margin-bottom: 8px; }
@media (max-width: 600px) { .org-raekke { grid-template-columns: 1fr; gap: 0; } .org-raekke + .org-raekke { margin-top: 6px; } }

/* Svarfelt */
.svarfelt { container-type: inline-size; position: sticky; bottom: 0; margin: 8px 32px 24px; background: var(--kort); border: 1px solid var(--kant-felt); border-radius: var(--r-l); box-shadow: var(--skygge-2); overflow: hidden; }
.svarfelt:has(textarea:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.svarfaner { display: flex; gap: 4px; padding: 4px 8px 0; border-bottom: 1px solid var(--kant); }
.svarfaner button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--tekst-2); font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: -1px; }
.svarfaner button:hover { color: var(--overskrift); }
.svarfaner button.valgt { color: var(--blaa); border-bottom-color: var(--blaa); }
.svarfaner button.valgt.intern { color: var(--adv); border-bottom-color: var(--adv); }
.svarfelt .advarsel-skriver { margin: 12px 16px 0; }
.svarfelt .modtagere { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 12px 16px 0; font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.svarfelt .modtagere .felt { min-height: 40px; padding: 8px 12px; font-size: 14px; }
@container (max-width: 520px) { .svarfelt .modtagere { grid-template-columns: 28px minmax(0, 1fr); } }
.svarfelt textarea.felt { border: 0; border-radius: 0; min-height: 84px; max-height: 40vh; padding: 16px; background: transparent; font-size: 16px; line-height: 26px; transition: min-height var(--rolig) var(--kurve); }
.svarfelt textarea.felt:focus-visible { outline: none; }
.svarfelt textarea.felt:focus, .svarfelt textarea.felt.udfyldt { min-height: 168px; }
.svarfelt.intern textarea.felt { background: var(--adv-bg); }
.filliste { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; }
.filliste:empty { display: none; }
.svarlinje { display: flex; gap: 8px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px; border-top: 1px solid var(--kant); font-size: 14px; }
.svarlinje .gruppe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.svarlinje .tjek { white-space: nowrap; }
.svarlinje .gruppe.hoejre { margin-left: auto; }
.svarlinje select.felt { width: auto; max-width: 210px; min-height: 40px; padding: 8px 32px 8px 12px; font-size: 14px; }
.svarlinje .knap.primaer { min-height: 44px; }

/* Sidepanel */
.sagspanel { border-left: 1px solid var(--kant); padding: 24px; background: var(--kort); font-size: 14px; }
.sagspanel h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; margin: 24px 0 8px; }
.sagspanel h3 .ikon { color: var(--tekst-2); }
.sagspanel h3:first-child { margin-top: 0; }
.medlemskort { border: 1px solid var(--kant); border-radius: var(--r-m); padding: 16px; background: var(--kort-2); }
.medlemskort .navn { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--overskrift); }
.boks.forslag { margin-top: 12px; align-items: center; }
.knapstak { display: flex; flex-direction: column; gap: 8px; }
.knapstak .knap { justify-content: flex-start; }
.historik { list-style: none; margin: 0; padding: 0; color: var(--tekst); }
.historik li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--kant); }
.historik li:last-child { border-bottom: 0; }
.historik .tid { flex: none; color: var(--tekst-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.andre a { display: block; padding: 6px 0; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.andre a:hover { text-decoration: underline; }

/* ── Forslag, datoer og adresser (0.3.0) ─────────────────────────────── */
.datochip, .adressechip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: var(--r-pille); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--neutral-bg); color: var(--tekst-2); }
.fristbaand .datochip, .fristbaand .adressechip { min-height: 28px; padding: 0 10px; font-size: 14px; line-height: 20px; }
.datochip.senere { background: var(--blaa-flade); color: var(--blaa); }
.datochip.naer { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-kant); }
.datochip.snart { background: var(--adv-bg); color: var(--adv); box-shadow: inset 0 0 0 1px var(--adv-kant); }
.datochip.passeret { background: var(--neutral-bg); color: var(--tekst-2); }
.adressechip.ok { background: var(--ok-bg); color: var(--ok); }
.adressechip.ok .ikon { color: var(--ok-ikon); }
.adressechip.advarsel { background: var(--adv-bg); color: var(--adv); }
.adressechip.advarsel .ikon { color: var(--adv-ikon); }
.adressechip.info { background: var(--info-bg); color: var(--info); }
.adressechip.ukendt, .adressechip.venter { background: var(--neutral-bg); color: var(--tekst-2); }
.frist.tilside { background: var(--info-bg); color: var(--info); font-weight: 600; }
.maerke.samling { background: var(--neutral-bg); color: var(--tekst-2); }
.fristbaand .maerke.samling { min-height: 28px; padding: 0 10px; font-size: 14px; }
.aeldre { display: flex; justify-content: center; padding: 16px 32px 0; }
.aeldre:empty { display: none; }
.menupunkt.ulaest .navn { font-weight: 700; color: var(--overskrift); }

.forslagskort { margin: -4px -8px 8px; padding: 16px; border: 1px solid var(--blaa-flade); border-radius: var(--r-l); background: var(--blaa-50); display: flex; flex-direction: column; gap: 10px; }
.forslagskort > h3 { margin: 0; color: var(--overskrift); }
.forslagskort > h3 .ikon { color: var(--blaa); }
.forslagskort > h3 .sikkerhed { margin-left: auto; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--tekst-2); }
.forslag-type select.felt { min-height: 40px; padding: 8px 32px 8px 12px; font-size: 14px; line-height: 20px; }
.forslag-felt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px 10px 12px; border: 1px solid var(--kant); border-radius: var(--r-m); background: var(--kort); line-height: 20px; }
.forslag-felt > .ikon { flex: none; margin-top: 1px; color: var(--tekst-2); }
.forslag-felt .mellem { flex: 1 1 auto; min-width: 0; }
.forslag-felt .stor { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--overskrift); }
.forslag-felt .hjaelp { font-size: 13px; line-height: 18px; }
.forslag-felt .knap { flex: none; margin: -6px -2px 0 0; }
.forslag-felt.dato.senere > .ikon, .forslag-felt.dato.naer > .ikon { color: var(--blaa); }
.forslag-felt.dato.snart { border-color: var(--adv-kant); background: var(--adv-bg); }
.forslag-felt.dato.snart > .ikon { color: var(--adv-ikon); }
.forslag-felt.dato.mangler { border-style: dashed; }
.forslag-felt.adresse.ok { border-color: var(--ok-kant); background: var(--ok-bg); }
.forslag-felt.adresse.ok > .ikon, .forslag-felt.adresse.ok .stor { color: var(--ok); }
.forslag-felt.adresse.advarsel { border-color: var(--adv-kant); background: var(--adv-bg); }
.forslag-felt.adresse.advarsel > .ikon, .forslag-felt.adresse.advarsel .stor { color: var(--adv); }
.forslag-felt.adresse.info > .ikon { color: var(--info-ikon); }
.forslag-felt.adresse.venter > .ikon { animation: drej 1.2s linear infinite; }
@keyframes drej { to { transform: rotate(360deg); } }
.huskeliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.huskeliste li { display: flex; gap: 8px; align-items: flex-start; line-height: 20px; color: var(--tekst); }
.huskeliste li .ikon { flex: none; margin-top: 3px; color: var(--info-ikon); }
.huskeliste li.ok .ikon { color: var(--ok-ikon); }
.huskeliste li.advarsel .ikon { color: var(--adv-ikon); }
.etiket-lille { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tekst-2); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.forslag-svar { display: flex; flex-direction: column; gap: 6px; }
.forslag-knap { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--kant-knap); border-radius: var(--r-m); background: var(--kort); color: var(--overskrift); text-align: left; font: inherit; cursor: pointer; transition: border-color var(--hurtig) var(--kurve), background var(--hurtig) var(--kurve); }
.forslag-knap:hover { border-color: var(--blaa); background: var(--kort-2); }
.forslag-knap > .ikon { flex: none; margin-top: 2px; color: var(--tekst-2); }
.forslag-knap .mellem { display: flex; flex-direction: column; min-width: 0; }
.forslag-knap strong { font-weight: 600; line-height: 20px; }
.forslag-knap .hjaelp { font-size: 12px; line-height: 16px; }
.forslag-knap.bedst { border-color: var(--blaa); box-shadow: inset 3px 0 0 var(--blaa); }
.forslag-knap.bedst > .ikon { color: var(--blaa); }
.lignende summary { display: flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; font-weight: 600; color: var(--blaa); list-style: none; }
.lignende summary::-webkit-details-marker { display: none; }
.lignende-sag { padding: 10px 0; border-top: 1px solid var(--kant); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lignende-sag a { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.svaruddrag { white-space: pre-wrap; font-size: 13px; line-height: 19px; color: var(--tekst-2); max-height: 140px; overflow: auto; background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r-s); padding: 8px 10px; width: 100%; }
.dato-forslag { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }

/* Forsiden: dagens deadlines og kommende bestillinger */
.kort h2 .ikon { vertical-align: -3px; margin-right: 8px; color: var(--tekst-2); }
.kort h2 .antal { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.kort h2 .hoejre-link { float: right; font-weight: 400; margin-top: 3px; }
.idag-liste { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.idag-liste li { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--kant); cursor: pointer; border-radius: var(--r-s); }
.idag-liste li:last-child { border-bottom: 0; }
.idag-liste li:hover { background: var(--kort-2); }
.idag-tid { flex: none; min-width: 76px; max-width: 96px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--overskrift); }
.idag-ikon { flex: none; width: 28px; height: 28px; border-radius: var(--r-pille); display: inline-flex; align-items: center; justify-content: center; background: var(--neutral-bg); color: var(--tekst-2); }
.idag-liste .mellem { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.idag-hvad { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--overskrift); }
.idag-emne { font-size: 13px; line-height: 18px; color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idag-liste li.dato .idag-ikon { background: var(--blaa-flade); color: var(--blaa); }
.idag-liste li.paamindelse .idag-ikon { background: var(--info-bg); color: var(--info-ikon); }
.idag-liste li.overskredet .idag-ikon { background: var(--fare-knap); color: #fff; }
.idag-liste li.overskredet .idag-hvad { color: var(--fare); }
.idag-liste li.snart .idag-ikon { background: var(--adv-bg); color: var(--adv-ikon); }
.idag-liste li.ok .idag-ikon { background: var(--ok-bg); color: var(--ok-ikon); }
.idag-liste li.klaret { opacity: .6; }
.tabel.bestillinger td { vertical-align: top; }
.tabel.bestillinger .dato-celle { width: 1%; white-space: nowrap; }
.tabel.bestillinger .adressechip { margin-bottom: 2px; }

/* ── Indstillinger og profil ─────────────────────────────── */
.faner { display: flex; gap: 4px; border-bottom: 1px solid var(--kant); overflow-x: auto; margin-top: -8px; }
.faner button { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--tekst-2); font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: -1px; }
.faner button:hover { color: var(--overskrift); }
.faner button.valgt { color: var(--blaa); border-bottom-color: var(--blaa); }
.formular { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.formular > .knaprad { margin-top: 0; }
.gitter-tider { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 8px 12px; align-items: center; }
.gitter-tider .hoved { font-size: 12px; font-weight: 600; color: var(--tekst-2); }
.engangskode { display: inline-block; margin: 8px 0; padding: 12px 16px; border: 1px solid var(--adv-kant); border-radius: var(--r-m); background: var(--adv-bg); color: var(--overskrift); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: .08em; }
.kodeboks { margin: 12px 0 0; padding: 12px 16px; min-height: 60px; border: 1px solid var(--kant); border-radius: var(--r-m); background: var(--kort-2); font: 14px/20px var(--mono); white-space: pre-wrap; overflow: auto; }
.kodeboks:empty { display: none; }
.segment { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--kant-felt); border-radius: var(--r-m); }
.segment button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-s); background: none; color: var(--tekst); font-size: 14px; font-weight: 600; cursor: pointer; }
.segment button:hover { background: var(--kort-2); }
.segment button.valgt { background: var(--blaa-flade); color: var(--blaa); }

/* ── Dialog og beskeder ─────────────────────────────── */
dialog { border: 1px solid var(--kant); border-radius: var(--r-l); padding: 0; background: var(--kort); color: var(--tekst); width: min(600px, calc(100vw - 32px)); box-shadow: var(--skygge-3); }
dialog::backdrop { background: rgba(16, 24, 40, .5); }
.dialog-krop { padding: 24px; max-height: 75vh; overflow-y: auto; }
.dialog-krop h2 { margin: 0 0 12px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.018em; }
.dialog-krop h3 { font-size: 16px; line-height: 24px; margin: 20px 0 0; }
.dialog-krop p { margin: 0 0 12px; font-size: 16px; line-height: 24px; }
.dialog-krop p.hjaelp { font-size: 14px; line-height: 20px; }
.dialog-fod { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--kant); background: var(--kort-2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: var(--r-m); background: var(--moerk-flade); color: #fff; font-size: 14px; line-height: 20px; box-shadow: var(--skygge-3); }
.toast.fejl { background: var(--fare-knap); }

/* ── Login ─────────────────────────────── */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-boks { width: min(440px, 100%); display: flex; flex-direction: column; gap: 24px; }
.login-boks > .logo { align-self: center; }
.login-boks .logo-has { height: 56px; }
.login-boks .logo-desk { font-size: 36px; line-height: 36px; letter-spacing: -.022em; margin-bottom: -2px; }
.login-kort { padding: 32px; }
.login-kort h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.021em; }
.login-kort .undertitel { margin-top: 4px; }
.login-kort form > p { font-size: 16px; line-height: 24px; margin: 16px 0 0; }
.login-kort form > label.etiket:first-child { margin-top: 20px; }
.login-kort .knap.bred { margin-top: 24px; }
.qr { display: block; margin: 16px auto; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: var(--r-m); }
.hemmelighed { font-size: 14px; word-break: break-all; text-align: center; color: var(--tekst-2); }
.kodefelt { font-size: 22px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

/* ── Skelet under indlæsning ─────────────────────────────── */
.skelet { display: block; height: 14px; margin: 8px 0; border-radius: var(--r-s); background: linear-gradient(90deg, var(--skelet) 25%, var(--skelet-2) 37%, var(--skelet) 63%); background-size: 400% 100%; animation: skelet 1.4s ease infinite; }
.skelet.titel { height: 28px; margin-bottom: 12px; }
.skelet.lille { height: 12px; }
.skelet.tal { height: 28px; }
.skelet.baand { height: 96px; margin: 0; }
.skelet-kort { display: flex; flex-direction: column; }
.skelet-kort.hoej { padding: 16px 24px; }
.skelet-raekke { display: block; cursor: default; }
.skelet-raekke:hover { background: none; }
.start-skelet { max-width: 440px; margin: 20vh auto 0; padding: 0 24px; }
@keyframes skelet { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── Smallere skærme ─────────────────────────────── */
/* Under 1600 px bliver sidebjælken til en smal ikonbjælke, så tråden har plads ved siden af listen og sidepanelet.
   Navnene står stadig som skjult tekst (skærmlæsere) og som værktøjstip. */
@media (max-width: 1600px) and (min-width: 901px) {
  :root { --side-b: 76px; --liste-b: 360px; }
  .sag { grid-template-columns: minmax(0, 1fr) 280px; }
  .side-top { justify-content: center; padding: 20px 8px 16px; }
  .sidebjaelke .logo-desk { display: none; }
  .side-handling { padding: 0 14px 8px; }
  .side-handling .knap { padding: 0; }
  .knaptekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu { padding: 4px 10px 16px; }
  .menu h3 { height: 1px; margin: 12px 6px; overflow: hidden; background: var(--kant); color: transparent; font-size: 12px; }
  .menupunkt { position: relative; justify-content: center; padding: 0; min-height: 44px; }
  .menupunkt .navn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menupunkt .antal { position: absolute; top: 0; right: 0; min-width: 20px; height: 18px; padding: 0 5px; font-size: 12px; line-height: 18px; }
  .side-fod { padding: 10px; }
  .bruger { flex-direction: column; gap: 4px; }
  .bruger-link { justify-content: center; padding: 4px; }
  .bruger-navn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1281px) {
  .sagspanel { position: sticky; top: var(--sag-hoved-h, 0px); align-self: start; max-height: var(--panel-h, none); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 1280px) {
  .sag { grid-template-columns: minmax(0, 1fr); }
  .sag-hoved { grid-column: 1; }
  .sagspanel { border-left: 0; border-top: 1px solid var(--kant); }
}
@media (max-width: 900px) {
  .ramme { grid-template-columns: minmax(0, 1fr); }
  .sidebjaelke { position: fixed; top: 0; bottom: 0; left: 0; width: 288px; max-width: 85vw; z-index: 40; transform: translateX(-105%); transition: transform var(--rolig) var(--kurve); box-shadow: var(--skygge-3); }
  .ramme.menu-aaben .sidebjaelke { transform: none; }
  .ramme.menu-aaben .menu-skygge { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(16, 24, 40, .4); }
  .menuknap-mobil, .luk-menu, .tilbage-mobil { display: inline-flex; }
  .flade, .ramme.uden-liste .flade { grid-template-columns: minmax(0, 1fr); }
  .ramme.har-sag .liste { display: none; }
  .ramme:not(.har-sag):not(.uden-liste) .indhold { display: none; }
  .liste { border-right: 0; }
  .top { padding: 0 12px; gap: 8px; }
  .tilstand .tekst { display: none; }
  .baand-top { padding: 12px 16px 0; }
  .side { padding: 20px 16px 48px; gap: 16px; }
  .side > h1, .sidehoved h1 { font-size: 22px; line-height: 28px; }
  .kort { padding: 20px 16px; }
  .to-spalter { grid-template-columns: minmax(0, 1fr); }
  .sag-hoved { padding: 12px 16px; }
  .sag-titel h1 { font-size: 18px; line-height: 26px; }
  .sag-felter select.felt { flex: 1 1 140px; min-width: 0; }
  .traad { padding: 16px; }
  .besked-krop, .citat, .besked-fod { padding-left: 20px; }
  .htmlramme.auto { width: calc(100% - 32px); margin: 4px 16px 16px; }
  .citatknap { margin-left: 14px; }
  .svarfelt { margin: 8px 12px 12px; }
  .sagspanel { padding: 20px 16px; }
  .forslagskort { margin: 0 0 8px; }
  .idag-tid { min-width: 64px; font-size: 13px; }
  .idag-liste .adressechip { display: none; }
  .kort h2 .hoejre-link { float: none; display: block; margin: 4px 0 0; }
  .gitter-tider { grid-template-columns: 1fr; }
  .tabel th, .tabel td { padding: 10px 8px; }
  .tabel .frist-type { display: none; }
  .kort > .tabel { margin: 0 -8px; width: calc(100% + 16px); }
  .gitter-tider .hoved { display: none; }
  .login-kort { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── Udskrift: kun sagen ─────────────────────────────── */
@media print {
  :root { --bg: #fff; }
  .sidebjaelke, .top, .baand-top, .liste, .svarfelt, .sagspanel, .menu-skygge, .toast, .besked-fod .knap, .citatknap, .tilbage-mobil, .luk-sag { display: none !important; }
  .ramme, .flade, .sag { display: block; height: auto; }
  .indhold { overflow: visible; }
  .sag-hoved { position: static; border: 0; padding: 0 0 12px; }
  .sag-felter { display: none; }
  .traad { padding: 0; }
  .besked { break-inside: avoid; border: 1px solid #ccc; background: #fff !important; }
  .citat { display: block !important; }
  /* Udskriften viser teksten, ikke mailvisningen. */
  .htmlramme.auto { display: none !important; }
  .besked-tekst { display: block !important; }
}

/* ───────── Telefon og notifikationer (0.5.0) ───────── */
.tjekliste { display: flex; flex-direction: column; }
.tjekliste .tjek { display: flex; }
.enhedsliste { list-style: none; margin: 8px 0 0; padding: 0; }
.enhedsliste li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--kant); }
.enhedsliste li:first-child { border-top: 0; }
.enhedsliste .fejltekst { margin: 4px 0 0; font-weight: 400; }
#notifikationer h3 { font-size: 16px; line-height: 24px; margin: 20px 0 4px; }
.vejledning { margin-top: 20px; border-top: 1px solid var(--kant); padding-top: 12px; }
.vejledning summary { display: flex; gap: 8px; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--blaa); }
.vejledning ol { margin: 4px 0 8px; padding-left: 22px; }
.vejledning li, .vejledning p { font-size: 14px; line-height: 20px; margin: 4px 0; }