/* DAHL & WULF CRM — designsystemet.
   GLAS over et sløret værkstedsfoto (09.11.2026, BYGGEPROMPT-GLAS-OG-LOGIN.md;
   forlægget er design-glas/index.html). Samme byggeklodser som før — rail,
   topbar, stage, fælleskomponenter — men fladerne er gennemsigtige, og
   baggrunden er Dahl & Wulfs egen garderobe, sløret så man aner rummet, uden
   at noget står skarpt. Sidespecifik stil bor i modules/<navn>/<navn>.css. */

/* ---------- TOKENS ----------
   DE GAMLE NAVNE ER BEVARET med nye værdier. Det er hele tricket: modulerne
   bruger var(--surface) og var(--line) hundredvis af steder, og de følger med
   af sig selv. Et parallelt sæt navne ville kræve, at hvert modul blev skrevet
   om — og det modul, der blev glemt, stod tilbage som en hvid klods. */
:root {
  --bg: transparent;                         /* baggrunden er .dw-baggrund */
  --surface: rgba(255, 255, 255, .44);       /* kort INDE i en flade */
  --surface-soft: rgba(255, 255, 255, .55);  /* felter, filtre, hover */
  --line: rgba(255, 255, 255, .62);          /* kanten på glas */
  --line-soft: rgba(40, 30, 20, .10);        /* skillelinjer inde i et kort */
  --text: #1d1b19;
  /* Målt mod glasset (WCAG 4,5:1 på det lyseste sted bag fladen) — også den
     svageste: kolonneoverskrifter og mails skal kunne læses, ikke kun anes. */
  --text-dim: #4d4843;
  --text-faint: #58524c;
  /* Accent = mørkegrå indtil forretningen vælger en brandfarve. Skift den
     HER (og kun her) når den dag kommer — alt andet peger på variablen.
     --paa-accent er teksten OVENPÅ accenten: i mørkt tema er accenten lys, og
     så skal teksten være mørk. Et hårdkodet #fff ville forsvinde. */
  --accent: #1c1e22;
  --accent-hover: #000;
  --paa-accent: #fff;
  --accent-soft: rgba(255, 255, 255, .62);
  /* Den ene farve i huset, der betyder «se her». */
  --advarsel: #c1553a;
  --advarsel-tekst: #a8432a;
  --advarsel-flade: rgba(253, 236, 233, .78);
  /* Og dens modsætning: «det her er i orden / tilføjet». */
  --ok: #3f9e5c;
  --ok-tekst: #256638;
  --ok-flade: rgba(232, 245, 236, .72);
  /* «Venter» — sendt, i gang, ikke afgjort. Fandtes som rå hex i statusmærkerne. */
  --venter: #d8952f;
  /* Gul «se efter» (et forslag, en antagelse, en faldet godkendelse, en
     advarsel fra agenten). Blandet af --venter mod teksten, så den følger
     temaet: mørk okker i lyst tema, lys okker i mørkt. Defineret på :root,
     hvor data-tema også sidder, så blandingen regnes med det rigtige tema. */
  --venter-tekst: color-mix(in srgb, var(--venter) 58%, var(--text));
  --venter-flade: color-mix(in srgb, var(--venter) 15%, transparent);
  --venter-kant: color-mix(in srgb, var(--venter) 50%, transparent);
  --dark: #1c1e22;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --font: 'Plus Jakarta Sans', sans-serif;

  /* --- Glasset --- */
  --slor: linear-gradient(160deg, rgba(250, 246, 240, .34), rgba(246, 240, 232, .50));
  --glas: rgba(255, 255, 255, .34);          /* de store flader: topbar, rail, arbejdsflade */
  --glas-staerk: rgba(255, 255, 255, .62);   /* det der svæver OVER arbejdet: skuffe, modal */
  --glas-kort-hover: rgba(255, 255, 255, .66);
  --glas-aktiv: #fff;                        /* valgt pille / valgt menuknap */
  --paa-glas-aktiv: #1c1e22;
  --glas-lys: rgba(255, 255, 255, .75);      /* den lyse inderkant øverst */
  --glas-skygge: 0 12px 40px rgba(70, 45, 20, .16);
  /* Halveret 09.11.2026 (William: «man aner slet ikke, hvad der er bag ved»).
     Baggrunden sløres 35 px, glasset 15 px — man skal ane rummet. */
  --glas-blur: 15px;
  --baggrund-blur: 35px;

  /* PAPIR er aldrig glas. Kundens ark, tegningerne og arbejdspapiret er en
     påstand om, hvad kunden får, og står uigennemsigtigt i begge temaer. */
  --papir: #f6f1e7;
  --papir-tekst: #2a2622;
  --papir-bakke: rgba(0, 0, 0, .06);         /* bakken, papiret ligger i */
  /* Tekst OPÅ papir følger papiret, ikke temaet — lys temarød på cremefarvet
     papir var 1,8:1 i mørkt tema. */
  --papir-dim: #5d5851;
  --papir-advarsel: #a8432a;

  /* Højden på arbejdsfladen: vinduet minus luft, topbar og mellemrum. Til
     det, der klæber inde i fladen og ellers målte sig mod hele vinduet. */
  --flade-hoejde: calc(100vh - 120px);
}

/* MØRKT TEMA — hele sættet igen. Sættes på <html> af et lille script i
   <head>, før siden tegnes; ellers blinker et mørkt valg lyst ved opstart. */
[data-tema="moerk"] {
  --surface: rgba(255, 255, 255, .07);
  --surface-soft: rgba(255, 255, 255, .10);
  --line: rgba(255, 255, 255, .13);
  --line-soft: rgba(255, 255, 255, .08);
  --text: #f4efe8;
  --text-dim: #e0d8ce;
  --text-faint: #cbc2b7;
  --accent: #f4efe8;
  --accent-hover: #fff;
  --paa-accent: #1c1e22;
  --accent-soft: rgba(255, 255, 255, .14);
  --advarsel-tekst: #f2a48f;
  --advarsel-flade: rgba(120, 40, 25, .45);
  --ok-tekst: #a3e8b8;
  --ok-flade: rgba(40, 110, 60, .30);
  --dark: #f4efe8;
  --slor: linear-gradient(160deg, rgba(18, 14, 11, .58), rgba(12, 10, 8, .70));
  --glas: rgba(30, 26, 22, .52);
  --glas-staerk: rgba(30, 26, 22, .74);
  --glas-kort-hover: rgba(255, 255, 255, .13);
  --glas-aktiv: rgba(255, 255, 255, .92);
  --glas-lys: rgba(255, 255, 255, .10);
  --glas-skygge: 0 12px 44px rgba(0, 0, 0, .40);
  --papir-bakke: rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  /* Farven, mens billedet hentes — uden den blinker siden hvidt ved opstart. */
  background: #8a6a4c;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;   /* det er arbejdsfladen, der scroller, ikke siden */
}

/* ---------- BAGGRUNDEN ----------
   Fotoet ligger i et fast lag bag alt. scale() skubber den lyse slørkant ud
   over skærmkanten, så billedet aldrig står med en lys ramme. Ingen flade
   når ud til kanten uden glas: fotoet ses aldrig skarpt nogen steder. */
.dw-baggrund {
  position: fixed; inset: 0; z-index: -3;
  background: url('../img/baggrund.jpg') center / cover no-repeat;
  filter: blur(var(--baggrund-blur)) saturate(1.15);
  transform: scale(1.18);
  pointer-events: none;
}
.dw-slor {
  position: fixed; inset: 0; z-index: -2;
  background: var(--slor);
  pointer-events: none;
}

/* ---------- GLASSET ----------
   backdrop-filter sidder KUN på de øverste lag: topbar, rail, arbejdsflade,
   skuffe, modal og toast. Kort og rækker INDE i en flade får kun en
   gennemsigtig baggrund — bag dem ligger allerede et sløret billede, så en
   sløring mere kan ikke ses, men tredive af dem får scrollen til at hakke. */
.glas {
  position: relative;
  background: var(--glas);
  border: 1px solid var(--line);
  box-shadow: var(--glas-skygge), inset 0 1px 0 var(--glas-lys);
}
/* SLØRINGEN SIDDER PÅ ET LAG BAG FLADEN, ikke på fladen selv. Et element med
   backdrop-filter bliver «containing block» for alt position:fixed inde i
   det — så modalerne, der bor inde i arbejdsfladen, satte sig fast i fladen
   i stedet for at dække vinduet, og deres egen sløring så kun fladen. Et
   pseudo-element er ikke forfader til nogen, så det fanger ingenting. Det
   ligger i lag -1: over fotoet (-3) og sløret (-2), under fladens farve.
   Skallen har med vilje INTET z-index: en stablingskontekst dér låste
   modulernes modaler (z 300) inde under agent-skuffen (190) på body. */
.glas::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(170%);
  backdrop-filter: blur(var(--glas-blur)) saturate(170%);
}
/* Faldskærme: den, der har bedt sit system om mindre gennemsigtighed, og en
   browser uden backdrop-filter, får uigennemsigtige flader. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glas: #f3eee7; --glas-staerk: #f3eee7; --surface: #faf7f2; --surface-soft: #fdfbf8; --line: #e4ddd3; }
  [data-tema="moerk"] { --glas: #24201c; --glas-staerk: #24201c; --surface: #2c2824; --surface-soft: #332e29; --line: #3d3731; }
  .glas::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glas: #f3eee7; --glas-staerk: #f3eee7; }
  [data-tema="moerk"] { --glas: #24201c; --glas-staerk: #24201c; }
}

/* ---------- SKALLEN ----------
   Fuld bredde, fuld højde: topbaren øverst, railen som en svævende pille til
   venstre, arbejdsfladen fylder resten. 14 px luft hele vejen rundt. */
.shell {
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding: 14px;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  gap: 14px;
}
.krop {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

/* ---------- VENSTRE RAIL ----------
   Runde ikonknapper i en glaspille. Teksten står som etiket ved musen og som
   aria-label — knapperne bygges stadig af main.js ud fra modul-registret. */
.rail {
  align-self: center;
  border-radius: 999px;
  padding: 12px 0;
  max-height: 100%;
}
.rail-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rail-btn {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-dim);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.rail-btn:hover { background: var(--glas-kort-hover); color: var(--text); }
.rail-btn.active {
  background: var(--glas-aktiv);
  color: var(--paa-glas-aktiv);
  box-shadow: 0 4px 14px rgba(60, 40, 20, .16);
}
.rail-btn svg { width: 21px; height: 21px; flex-shrink: 0; }
.rail-btn:focus-visible { outline: 2px solid var(--text-dim); outline-offset: 2px; }
/* Etiketten: ved musen og ved tastaturfokus. */
.rail-label {
  position: absolute; left: 64px; top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.1px;
  color: #fff;
  background: rgba(28, 30, 34, .88);
  padding: 6px 11px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity .15s;
  z-index: 50;
}
.rail-btn:hover .rail-label,
.rail-btn:focus-visible .rail-label { opacity: 1; }

/* ---------- ARBEJDSFLADEN ----------
   Én stor glasflade. .stage scroller INDE i den, så topbar og rail står
   stille. Moduler, der skal scrolle, spørger window.CRM.rulleflade(). */
.main {
  border-radius: 32px;
  min-width: 0; min-height: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Bunden giver plads til agent-knappen i hjørnet, så det sidste i fladen
     (fx «Vis resten af arket») kan scrolles fri af den. */
  padding: 28px 32px 96px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-soft) transparent;
}

/* ---------- TOPBAR ---------- */
.topbar {
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  min-width: 0;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  padding-right: 8px;
  min-width: 0;
}
.brand .mark {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glas-aktiv);
  color: var(--paa-glas-aktiv);
  display: grid; place-items: center;
  flex: none;
  box-shadow: 0 4px 12px rgba(60, 40, 20, .12);
  font-weight: 800; font-size: 14px; letter-spacing: -0.4px;
}
.brand-navn { font-weight: 700; font-size: 18px; letter-spacing: -0.4px; white-space: nowrap; }
.brand-under {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 11.5px; font-weight: 500; color: var(--text-dim);
  white-space: nowrap;
}

/* Agent-pillen er en KNAP, ikke et skrivefelt — der er ét sted at skrive til
   agenten, og det er skuffen. Den åbner skuffen præcis som knappen i hjørnet. */
.topbar-agent {
  flex: 1; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-faint);
  font: inherit; font-size: 13.5px;
  cursor: pointer; text-align: left;
  min-width: 0;
  transition: background .15s;
}
.topbar-agent:hover { background: var(--glas-kort-hover); }
.topbar-agent-kugle {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #c9b59c 38%, #6e5136 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.topbar-agent-tekst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-agent kbd {
  margin-left: auto; font: inherit; font-size: 11px; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 8px; padding: 2px 7px;
}
.topbar-hoejre { display: flex; align-items: center; gap: 10px; flex: none; }

/* Runde ikonknapper i topbaren (log ud). */
.topbar-ikon {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-dim); cursor: pointer;
  transition: background .15s, color .15s;
}
.topbar-ikon:hover { background: var(--glas-kort-hover); color: var(--text); }

/* GENSTARTSKNAPPEN. Et rundt ikon som udgangspunkt — den er husholdning, ikke
   arbejde — men den FOLDER SIG UD med tekst og advarselsfarve, når serveren
   kører ældre kode end filerne på disken. Det er dét øjeblik, systemet ellers
   bare opfører sig uforklarligt, og den må ikke gemme sig i et pænt ikon. */
.topbar-genstart {
  height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.topbar-genstart:hover { color: var(--text); background: var(--glas-kort-hover); }
.topbar-genstart:disabled { opacity: .55; cursor: default; }
.topbar-genstart svg { flex: none; }
.topbar-genstart #genstartTekst { display: none; }
.topbar-genstart.er-noedvendig #genstartTekst,
.topbar-genstart.arbejder #genstartTekst { display: inline; }
.topbar-genstart.er-noedvendig {
  color: var(--advarsel-tekst);
  border-color: color-mix(in srgb, var(--advarsel) 45%, transparent);
  background: var(--advarsel-flade);
}
.topbar-genstart.arbejder svg { animation: dw-genstart-snurr 1s linear infinite; }
@keyframes dw-genstart-snurr { to { transform: rotate(360deg); } }

/* Gemme-status ved siden af datoen — sættes af window.saetGemmestatus. */
.save-status {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-faint);
}
.save-status.is-error { color: var(--advarsel-tekst); }

.page { display: none; }
.page.active { display: block; }

/* Blødt sideskift: hver gang en side bliver aktiv (display none→block)
   toner indholdet roligt op. Samme regel som i War Room:
   KUN opacity animeres — bevidst INGEN transform/translateY. Opacity gør
   IKKE siden til containing-block for position:fixed-børn (det gør
   transform), så evt. fastgjorte elementer bliver hvor de skal. */
.page.active {
  animation: dw-side-ind 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dw-side-ind {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .page.active { animation: none; }
}

/* 12-kolonners kort-grid — samme byggeklodser som War Rooms dashboard. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  grid-auto-rows: 200px;
}
.fill {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.s2 { grid-column: span 2; }
.s3 { grid-column: span 3; }
.s4 { grid-column: span 4; }
.s5 { grid-column: span 5; }
.s6 { grid-column: span 6; }
.s7 { grid-column: span 7; }
.s8 { grid-column: span 8; }
.s12 { grid-column: span 12; }
.r2 { grid-row: span 2; }

@media (max-width: 1000px) {
  .s2,.s3,.s4,.s5,.s6,.s7,.s8 { grid-column: span 12; }
  #topbarDato, .topbar-agent kbd { display: none; }
}
/* SMAL SKÆRM: railen bliver en vandret pille UNDER fladen, etiketterne
   skjules, og topbaren beholder kun det nødvendige. Ingen vandret scroll. */
@media (max-width: 900px) {
  .shell { padding: 10px; gap: 10px; grid-template-rows: 56px minmax(0, 1fr); }
  .krop { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
  .rail { order: 2; align-self: auto; justify-self: center; padding: 6px 10px; }
  .rail-nav { flex-direction: row; }
  .rail-btn { width: 46px; height: 46px; }
  .rail-label { display: none; }
  .topbar { gap: 8px; padding: 0 6px; }
  .brand-navn { font-size: 16px; }
  .brand .mark { width: 40px; height: 40px; }
  .topbar-agent { width: 44px; flex: none; padding: 0 6px; margin: 0 0 0 auto; }
  .topbar-agent-tekst { display: none; }
  .topbar-genstart, .topbar-ikon { width: 40px; height: 40px; min-width: 40px; padding: 0; }
  .topbar-genstart.er-noedvendig, .topbar-genstart.arbejder { width: auto; padding: 0 10px; }
  .crm-segment-tema .crm-segment-tekst { display: none; }
  .main { border-radius: 24px; }
  .stage { padding: 20px 16px 32px; }
  :root { --flade-hoejde: calc(100vh - 150px); }
}
/* Telefonbredde: mærket alene bærer navnet — teksten blev klemt af pillen. */
@media (max-width: 520px) {
  .brand > div { display: none; }
  .brand { padding-right: 0; }
  /* Teksten «Genstart — ny kode venter» skubbede Log ud ud af skærmen. Her
     står knappen rund og RØD i stedet, og toasten siger resten. */
  .topbar-genstart.er-noedvendig #genstartTekst,
  .topbar-genstart.arbejder #genstartTekst { display: none; }
  .topbar-genstart.er-noedvendig, .topbar-genstart.arbejder { width: 40px; padding: 0; }
}
/* Dokumenterne i rammerne er lyse ark. Med et mørkt color-scheme på siden
   malede browseren deres bund hvid i stedet for papirets egen farve. */
iframe { color-scheme: light; }

/* ---------- FÆLLESKOMPONENTER ----------
   Bor her, ikke i modulerne: det første modul der får brug for en fanebjælke
   eller en knap betaler for den, alle efterfølgende får den gratis. Det er
   præcis dét der holder modulerne små. */

/* Sidehoved: titel til venstre, handlinger + faner til højre. */
.crm-sidehoved {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.crm-sidehoved h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.8px;
}
.crm-undertitel {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.crm-sidehoved-hoejre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Fanebjælke og segment — én pille med en hvid, valgt knap (forlæggets form).
   .crm-segment er den samme form til andet end faner (fx temaskifteren). */
.crm-faner,
.crm-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.crm-fane,
.crm-segment > button {
  border: none;
  background: transparent;
  font-family: var(--font);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.2s, color 0.2s;
}
.crm-segment > button { font-size: 12.5px; padding: 7px 13px; }
.crm-fane:hover,
.crm-segment > button:hover { color: var(--text); }
.crm-fane.active,
.crm-segment > button.active {
  background: var(--glas-aktiv);
  color: var(--paa-glas-aktiv);
  box-shadow: 0 2px 8px rgba(60, 40, 20, .12);
}

.crm-fanepanel { display: none; }
.crm-fanepanel.active { display: block; animation: dw-side-ind 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

/* Knapper — piller. */
.crm-knap {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.crm-knap-primaer {
  background: var(--accent);
  color: var(--paa-accent);
  box-shadow: 0 6px 16px rgba(28, 30, 34, .18);
}
.crm-knap-primaer:hover { background: var(--accent-hover); }
.crm-knap-sekundaer { background: var(--surface); color: var(--text-dim); border-color: var(--line); }
.crm-knap-sekundaer:hover { color: var(--text); background: var(--glas-kort-hover); }
.crm-knap-fare {
  background: transparent;
  color: var(--advarsel-tekst);
  border-color: color-mix(in srgb, var(--advarsel) 45%, transparent);
}
.crm-knap-fare:hover { background: var(--advarsel-flade); }
.crm-knap:disabled { opacity: .5; cursor: default; }

/* Statusmærke: farvet prik + tekst. Farven sættes via --prik. */
.crm-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.crm-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--prik, var(--text-faint));
  flex-shrink: 0;
}
.crm-status-udkast     { --prik: var(--text-faint); }
.crm-status-sendt      { --prik: var(--venter); }
/* GRØN = et menneske har set grundlaget og sagt god for det. Farven må derfor
   aldrig sættes af noget andet end en godkendelse — se server/godkendelse.js. */
.crm-status-godkendt   { --prik: var(--ok); color: var(--ok-tekst); }
.crm-status-kundetilbud-klar { --prik: var(--ok); color: var(--ok-tekst); }
.crm-status-accepteret { --prik: var(--ok); color: var(--ok-tekst); }
.crm-status-afvist     { --prik: var(--advarsel); color: var(--advarsel-tekst); }

/* Tom tilstand */
.crm-tom {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 62px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
.crm-tom svg { width: 40px; height: 40px; color: var(--text-faint); }
.crm-tom h3 { font-size: 16px; font-weight: 700; }
.crm-tom p { font-size: 13.5px; color: var(--text-dim); max-width: 420px; }

/* Formularfelter */
.crm-felt { display: block; margin-bottom: 16px; }
.crm-felt > span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.crm-felt input[type="text"],
.crm-felt input[type="email"],
.crm-felt input[type="password"],
.crm-felt input[type="number"],
.crm-felt select,
.crm-felt textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color 0.15s, background 0.15s;
}
.crm-felt textarea { resize: vertical; line-height: 1.55; }
.crm-felt input:focus, .crm-felt select:focus, .crm-felt textarea:focus {
  outline: none;
  border-color: var(--text-faint);
  background: var(--glas-kort-hover);
}
.crm-felt-kode textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
/* Et <select> i mørkt tema skal have mørke valgmuligheder, ikke systemets hvide. */
[data-tema="moerk"] select option { background: #2a2521; color: var(--text); }

/* Søgefelt */
.crm-soeg {
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  min-width: 210px;
}
.crm-soeg::placeholder { color: var(--text-faint); }
.crm-soeg:focus { outline: none; border-color: var(--text-faint); background: var(--glas-kort-hover); }

/* Modal — svæver OVER arbejdet, så glasset er stærkere end fladernes. */
.crm-modal-lag {
  position: fixed; inset: 0;
  background: rgba(20, 16, 12, .28);
  display: grid; place-items: center;
  padding: 24px;
  z-index: 300;
}
.crm-modal-lag[hidden] { display: none; }
.crm-modal {
  background: var(--glas-staerk);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(170%);
  backdrop-filter: blur(var(--glas-blur)) saturate(170%);
  border-radius: 32px;
  padding: 28px;
  width: min(660px, 100%);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22), inset 0 1px 0 var(--glas-lys);
}
.crm-modal h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 20px; }
.crm-modal-knapper {
  display: flex; align-items: center; gap: 10px;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.crm-modal-spacer { flex: 1; }

/* ---------- Global toast — dashboardets ENESTE pop-op ----------
   Styret af assets/js/vagtnet.js. Viser både kvitteringer ('ok') og fejl
   ('is-fejl', rød). Fejl er dét den er bygget til: intet i CRM'et må gå
   galt uden at det står her. Mørkt glas, så den skiller sig ud fra de lyse
   flader — en kvittering, der falder i ét med baggrunden, bliver ikke læst. */
.crm-toast {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 360px;
  max-width: calc(100vw - 52px);
  background: rgba(28, 30, 34, .86);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(170%);
  backdrop-filter: blur(var(--glas-blur)) saturate(170%);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  padding: 13px 34px 13px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
}
.crm-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Fejlen er altid lys og rød — også i mørkt tema. Den skal ses. */
.crm-toast.is-fejl {
  background: rgba(253, 236, 233, .94);
  color: #a3341f;
  border: 1px solid #f3b7ab;
  border-left: 4px solid #e0492b;
}
.crm-toast-luk {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: inherit;
  opacity: .5;
  font-size: 17px;
  line-height: 1;
  padding: 3px 5px;
  cursor: pointer;
  border-radius: 6px;
}
.crm-toast-luk:hover { opacity: 1; background: rgba(0, 0, 0, .07); }