/* =============================================================
   2L Projectflow — designsystem.
   Farverne stammer fra Technical Hub og styres HERFRA. Ingen farve
   må hardcodes i et modul; alt refererer til variablerne nedenfor
   og kan overskrives fra config/theme.json.
   ============================================================= */
:root {
  /* 2L-paletten (Technical Hub): brændt terrakotta på varm sand. */
  --c-primary:      #85523b;
  --c-primary-dark: #6a4130;
  --c-primary-soft: #f1e7e1;
  --c-accent:       #a9825f;
  --c-accent-soft:  #f6efe8;
  --c-bg:           #f7f3f0;
  --c-surface:      #ffffff;
  --c-surface-alt:  #efe9e5;
  /* Rammen om appen — topbar og bundlinje. En anelse dybere end siden, så
     navigationen læses som ramme og arbejdsfladen som det lyse. Den omvendte
     vej (lysere main) ville tage kanten af de hvide kort, som hele layoutet
     hviler på. */
  --c-chrome:       #eee7e1;
  --c-border:       rgba(31, 29, 27, .12);
  --c-border-blod:  rgba(31, 29, 27, .07);
  --c-text:         #1f1d1b;
  --c-text-dim:     #6d6a67;
  --c-positive:     #2f7d5b;

  /* Ferie har sin EGEN farve: den dybe grøngrå fra ferieplanen i Technical Hub.
     Det er ikke pynt. Resten af huset er terrakotta, fordi resten af huset
     handler om penge — budget, fakturaer, kontrakter. Ferie handler om, hvem
     der ER her, og den grønne siger det uden at læse et tal. Kollegerne kender
     den i forvejen fra Technical Hub, og farverne er taget direkte derfra.

     Trin 1–4 er en SEKVENTIEL rampe: én kulør, lys mod mørk, og lysheden falder
     jævnt (OKLab L 0,93 → 0,89 → 0,74 → 0,55). Den må aldrig blive til fire
     forskellige kulører — så ville en halv fridag og en hel uge ligne to
     forskellige slags ting frem for lidt og meget af den samme. */
  --c-ferie:        #3c8676;   /* tal og kanter — midt i gradienten */
  --c-ferie-moerk:  #32797b;
  /* Søjlerne er en GRADIENT, ikke en flad farve — hentet ud af ferieplanen i
     Technical Hub: varm grøn i toppen, køligere blågrøn mod bunden. */
  --c-ferie-top:    #479272;
  --c-ferie-bund:   #32797b;
  --c-ferie-1:      #dce9e3;   /* 0,5–1,5 dage */
  --c-ferie-2:      #bdd6cc;   /* 1,5–3 dage  */
  --c-ferie-3:      #8fb5a8;   /* 3–4,5 dage  */
  --c-ferie-4:      #417d71;   /* 4,5–5 dage — en hel uge væk */
  --c-warning:      #a9741d;
  --c-danger:       #a8432f;

  /* Skrift: Fraunces til overskrifter (nærmest Anthropic Serif af de frit
     tilgængelige), Manrope til brødtekst, Space Grotesk til versaletiketter. */
  --f-serif:  'Fraunces', 'Playfair Display', Georgia, serif;
  --f-tekst:  'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-etiket: 'Space Grotesk', 'Manrope', sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --skygge: 0 1px 2px rgba(31,29,27,.05), 0 12px 32px rgba(31,29,27,.06);
  --skygge-pop: 0 18px 48px rgba(31,29,27,.16);
}

/* Rullebjælker: overlay i husets farve. Skjult, til musen er over det, der
   ruller — så listerne læses som papir, og bjælken kommer, når man rækker ud
   efter den. Terrakotta (primær) i 45 %, mørkere når man har fat i den.
   Kun CSS: de nye standardegenskaber til Chrome/Edge/Firefox/Safari 18+,
   og ::-webkit-scrollbar som fald-tilbage til ældre WebKit. Kalenderrammen
   under Ferie har sin egen, ALTID synlige bjælke — se .kalenderramme. */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: rgba(133, 82, 59, .45) transparent; }
*:active { scrollbar-color: rgba(133, 82, 59, .7) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
:hover::-webkit-scrollbar-thumb { background: rgba(133, 82, 59, .45); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(133, 82, 59, .7); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--f-tekst);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

h1, h2, h3 { font-family: var(--f-serif); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: 30px; line-height: 1.15; margin: 0 0 6px; }
h2 { font-size: 20px; margin: 0; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 14px 26px; background: var(--c-chrome);
  border-bottom: 1px solid var(--c-border-blod);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-navn {
  font-family: var(--f-etiket); font-weight: 500; font-size: 15px;
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-pill {
  font-family: var(--f-etiket); font-size: 12.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--c-text-dim); padding: 8px 12px; border-radius: var(--radius-sm);
}
.nav-pill:hover { color: var(--c-text); background: var(--c-surface-alt); }
.nav-pill.aktiv { color: var(--c-primary); background: var(--c-primary-soft); }

.bruger { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.bruger-navn { font-weight: 600; font-size: 14px; }
.rolle {
  font-family: var(--f-etiket); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
  background: var(--c-surface-alt); color: var(--c-text-dim);
}
.rolle-admin  { background: var(--c-primary); color: #fff; }
.rolle-editor { background: var(--c-primary-soft); color: var(--c-primary); }
.knap-tekst {
  font: inherit; font-size: 13.5px; background: none; border: 0; color: var(--c-text-dim);
  cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm);
}
.knap-tekst:hover { background: var(--c-surface-alt); color: var(--c-text); }

.view { flex: 1; width: min(1160px, 92%); margin: 0 auto; padding: 38px 0 72px; }

/* ---------- Bundlinje ---------- */
.bundlinje {
  background: var(--c-chrome);
  border-top: 1px solid var(--c-border-blod);
  padding: 22px max(4%, 26px);
  display: flex; align-items: baseline; gap: 8px 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--c-text-dim);
}
.bund-navn {
  font-family: var(--f-etiket); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-text);
}
.bund-links { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.bund-links a { color: var(--c-text-dim); text-decoration: none; }
.bund-links a:hover, .bund-links a.aktiv { color: var(--c-primary); }
@media (max-width: 620px) { .bund-links { margin-left: 0; width: 100%; } }
.tom { color: var(--c-text-dim); }
.tom.lille { font-size: 13.5px; margin-top: -4px; }
/* -4px er til en note lige under en overskrift. Under en tabel eller et
   afsnit skal den have luft, ellers klæber den til rammen ovenfor. */
.tabelramme + .tom.lille, .afsnit + .tom.lille, .tavle + .tom.lille { margin-top: 22px; }
.fejl-tekst { color: var(--c-danger); }

/* ---------- Sidehoved og knapper ---------- */
.side-hoved { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.side-hoved h1, .side-hoved h2 { margin: 0; }
.side-hoved > .knap, .side-hoved > .knap-sekundaer, .side-hoved > .rullemenu { margin-left: auto; }
/* Uden knap: første link efter overskriften skubbes til højre. */
.side-hoved > h2 + .knap-tekst-lille { margin-left: auto; }

.knap, .knap-sekundaer {
  font-family: var(--f-etiket); font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--c-primary); color: #fff;
}
.knap:hover:not(:disabled) { background: var(--c-primary-dark); }
.knap:disabled, .knap-sekundaer:disabled { opacity: .5; cursor: default; }
.knap-sekundaer { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); }
.knap-sekundaer:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.knap-tekst-lille {
  font: inherit; font-size: 13px; background: none; border: 0; padding: 4px 7px;
  border-radius: 6px; color: var(--c-primary); cursor: pointer;
}
.knap-tekst-lille:hover { background: var(--c-primary-soft); }
.knap-tekst-lille.farlig { color: var(--c-danger); }
.knap-tekst-lille.farlig:hover { background: #f7e7e3; }
.tilbage {
  display: inline-block; margin-bottom: 14px; text-decoration: none; font-family: var(--f-etiket);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim);
}
.tilbage:hover { color: var(--c-primary); }

/* ---------- Tabel ---------- */
.tabelramme {
  overflow-x: auto; background: var(--c-surface);
  border: 1px solid var(--c-border-blod); border-radius: var(--radius); box-shadow: var(--skygge);
}
.tabel { border-collapse: collapse; width: 100%; min-width: 660px; }
.tabel th {
  text-align: left; font-family: var(--f-etiket); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim);
  padding: 14px 16px; border-bottom: 1px solid var(--c-border); white-space: nowrap;
}
.tabel td { padding: 13px 16px; border-bottom: 1px solid var(--c-border-blod); vertical-align: middle; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel .staerk { font-weight: 600; }
.tabel .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel th.num { text-align: right; }
.tabel .handling { text-align: right; white-space: nowrap; }
.raekke { cursor: pointer; }
.raekke:hover td { background: var(--c-accent-soft); }
.kode {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px;
  color: var(--c-text-dim); background: var(--c-bg);
  border: 1px solid var(--c-border-blod); border-radius: 5px; padding: 1px 6px;
}

.maerke {
  font-family: var(--f-etiket); font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--c-surface-alt); color: var(--c-text-dim);
}
.maerke-aktiv    { background: #e4efe9; color: var(--c-positive); }
/* Bygningen, man arbejder for lige nu — samme farve som huset, ikke "grøn = ok". */
.maerke-bygning  { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.maerke-mulighed { background: var(--c-primary-soft); color: var(--c-primary); }
.maerke-droppet  { background: #f7e7e3; color: var(--c-danger); }
.maerke-faelles  { background: var(--c-accent-soft); color: var(--c-accent); }
/* "Se her" i en tabelcelle — .advarsel er et helt banner og for stort til det. */
.maerke-obs      { background: #f7e7e3; color: var(--c-danger); }
/* Daempes med FARVE, ikke opacity: opacity giver cellen en stacking context,
   og saa ligger tooltippen (position: fixed) under de naeste raekker. */
.tabel tr.inaktiv td { color: var(--c-text-dim); }
.tabel tr.inaktiv td .staerk, .tabel tr.inaktiv td a, .tabel tr.inaktiv td .kode, .tabel tr.inaktiv td .maerke { color: inherit; }
.tabel tr.inaktiv td .kode, .tabel tr.inaktiv td .maerke { opacity: .6; }
/* Makuleret: annulleret i Rillion, tæller INGEN steder. Den må ikke ligne
   "i flow" — den grå betyder "kommer snart", den rødlige "kommer aldrig".
   Beløbet streges, så det ikke kan læses med i en sum ved et uheld. */
.tabel tr.makuleret td { color: var(--c-danger); }
.tabel tr.makuleret td .kode { color: inherit; }
.tabel tr.makuleret td.num { text-decoration: line-through; text-decoration-thickness: 1px; }
.tabel tr.makuleret a { color: inherit; }
/* E-mail og telefon brydes ikke midt over — "test-" eller "2612" alene på en
   linje er ulæseligt, og et telefonnummer skal kunne læses i ét hug. */
.tabel td.mail, .tabel td.tlf { white-space: nowrap; }

/* ---------- Faktaliste ---------- */
.fakta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--c-border-blod); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius); overflow: hidden; margin: 0 0 34px;
}
.fakta > div { background: var(--c-surface); padding: 14px 18px; }
.fakta dt {
  font-family: var(--f-etiket); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--c-text-dim);
}
.fakta dd { margin: 4px 0 0; font-weight: 600; }
.afsnit { margin-top: 40px; }

/* ---------- Økonomi ---------- */
.total {
  margin-left: auto; font-family: var(--f-etiket); font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.total.op  { color: var(--c-danger); }     /* budgettet er steget */
.total.ned { color: var(--c-positive); }
.num.op    { color: var(--c-danger); }
.num.ned   { color: var(--c-positive); }
.tabel tr.gruppe { cursor: pointer; }
.tabel tr.gruppe:hover td { background: var(--c-accent-soft); }
.tabel tr.gruppe.aaben td { background: var(--c-surface-alt); }
/* En gruppe uden budget, forbrug og flow er en overskrift, ingen har brugt.
   Den bliver staaende — kontoplanen skal kunne genkendes i sin helhed — men
   den skal ikke traekke oejet til sig paa linje med de linjer, der har tal. */
.tabel tr.gruppe.uden-tal td { opacity: .42; }
.tabel tr.gruppe.uden-tal:hover td { opacity: 1; }
.tabel tr.under td { background: var(--c-bg); font-size: 14px; }
.tabel tr.under td:first-child { padding-left: 30px; }
.note {
  font-family: var(--f-etiket); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-accent); border: 1px solid var(--c-border); border-radius: 4px; padding: 1px 5px;
  cursor: help;
}
.status {
  background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600;
  padding: 10px 14px; border-radius: var(--radius-sm); margin: 0 0 16px;
}
.dialog .fakta { margin-bottom: 0; }

/* ---------- Sporbarhed ---------- */
.kilde {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-left: 3px solid var(--c-accent); border-radius: var(--radius);
  padding: 16px 20px; margin: -16px 0 10px;
}
.kilde > div:first-child { flex: 1 1 260px; }
.kilde-mrk {
  font-family: var(--f-etiket); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--c-text-dim);
}
.kilde-tekst { margin: 4px 0 0; }
.sum {
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--c-text-dim);
  background: var(--c-bg); border: 1px solid var(--c-border-blod); border-radius: 5px;
  padding: 3px 7px; cursor: help;
}

.versioner { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.versioner li {
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius); padding: 18px 20px;
}
.versioner li.nyeste { border-left: 3px solid var(--c-primary); }
.v-hoved { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.v-total { font-family: var(--f-etiket); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.v-hoved .knap-tekst-lille { margin-left: auto; }
.v-fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; }
.v-fakta dt {
  font-family: var(--f-etiket); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim);
}
.v-fakta dd { margin: 2px 0 0; font-size: 14px; }
.v-kilde { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--c-border-blod); font-size: 14px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.v-kilde .knap-tekst-lille { margin-left: auto; }
.v-note { margin: 12px 0 0; font-size: 13.5px; color: var(--c-text-dim); }

/* ---------- Versionsnoter ---------- */
.to-spalter { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.noter h2 { font-size: 20px; margin: 30px 0 4px; padding-top: 18px; border-top: 1px solid var(--c-border); }
.noter h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.noter h3 { font-family: var(--f-etiket); font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-primary); margin: 22px 0 6px; }
.noter ul { margin: 0 0 12px; padding-left: 20px; }
.noter li { margin-bottom: 5px; }
.noter p { margin: 0 0 12px; color: var(--c-text-dim); }

.historik { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.historik li {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--c-border-blod);
}
.h-tid { font-variant-numeric: tabular-nums; color: var(--c-text-dim); font-size: 12px; min-width: 96px; }
.h-hvad { font-weight: 600; }
.h-projekt { color: var(--c-primary); }
.h-hvem { margin-left: auto; color: var(--c-text-dim); font-size: 12px; }

@media (max-width: 900px) { .to-spalter { grid-template-columns: 1fr; gap: 30px; } }
.noter { max-width: 74ch; }
.noter-fod { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--c-border); }
.noter-fod a { color: var(--c-primary); }

/* ---------- Historik-filtre ---------- */
.i-alt {
  margin-left: auto; font-family: var(--f-etiket); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim);
}
.filtre {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  align-items: end; background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius); padding: 18px 20px; margin: 0 0 20px;
}
.filtre label { font-size: 12px; }
.filtre .bred { grid-column: span 2; }
.filtre .afkryds { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.filtre .afkryds input { width: auto; }
.filtre input, .filtre select { font-size: 14px; padding: 8px 10px; }
.filter-knapper { display: flex; gap: 8px; }
.filter-knapper .knap, .filter-knapper .knap-sekundaer { padding: 9px 16px; font-size: 11.5px; }

.tabel .tid { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c-text-dim); font-size: 13px; }
.tabel .detalje { color: var(--c-text-dim); font-size: 13.5px; }
.mere { display: flex; align-items: center; gap: 16px; margin-top: 16px; }

@media (max-width: 620px) { .filtre .bred { grid-column: span 1; } }

/* ---------- Login ---------- */
.view-fuld { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-side { width: min(400px, 100%); }
.login-kort {
  background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius);
  padding: 36px 32px; display: flex; flex-direction: column; gap: 15px; box-shadow: var(--skygge);
}
.login-logo { height: 40px; width: auto; align-self: flex-start; margin-bottom: 6px; }
.login-kort h1 {
  font-family: var(--f-etiket); font-size: 16px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; margin: 0;
}
.login-under { margin: -6px 0 6px; color: var(--c-text-dim); font-size: 14px; }

label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; }
input, select {
  font: inherit; font-size: 15px; padding: 11px 13px; width: 100%;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-bg); color: inherit;
}
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--c-primary); outline-offset: 1px; border-color: transparent;
}
.login-knap { margin-top: 6px; width: 100%; }
.fejl {
  margin: 0; padding: 10px 13px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500;
  background: #f7e7e3; color: var(--c-danger);
}

/* ---------- Dialog ---------- */
.dialog {
  border: 0; border-radius: var(--radius); padding: 0; width: min(540px, 92vw);
  background: var(--c-surface); color: var(--c-text); box-shadow: var(--skygge-pop);
}
.dialog::backdrop { background: rgba(31, 29, 27, .38); }
.dialog form { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.dialog h2 { margin: 0; }
.dialog .felter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.dialog small { font-weight: 400; color: var(--c-text-dim); font-size: 11.5px; line-height: 1.4; }
.dialog-knapper { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 620px) {
  .topbar { padding: 12px 16px; gap: 12px; }
  .brand-navn { font-size: 13px; letter-spacing: .16em; }
  .bruger { width: 100%; margin-left: 0; }
  .bruger-navn { margin-right: auto; }
  h1 { font-size: 25px; }
  .side-hoved > .knap, .side-hoved > .knap-sekundaer { margin-left: 0; }
  .dialog form { padding: 20px; }
}

/* ---------- Opfølgning: måler pr. linje ---------- */
/* Én måling (forbrug delt med budget). Tilstanden vises både med farve,
   bredde og tal — farven bærer aldrig beskeden alene. */
.maalerkol { width: 130px; max-width: 130px; white-space: nowrap; }
.tabel th.maalerkol { text-align: left; }
.maaler {
  display: inline-block; vertical-align: middle; width: 76px; height: 6px;
  background: var(--c-surface-alt); border-radius: 3px; overflow: hidden; position: relative;
}
.maaler-fyld { display: block; height: 100%; border-radius: 3px; background: var(--c-primary); }
.maaler-fyld.taet { background: var(--c-warning); }
.maaler-fyld.over { background: var(--c-danger); }
.maaler-over {
  position: absolute; inset: 0 0 0 auto; width: 3px; background: var(--c-danger);
  box-shadow: -2px 0 0 var(--c-surface);
}
.maaler-tal {
  display: inline-block; margin-left: 8px; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--c-text-dim); min-width: 34px;
}
.maaler-uden { font-size: 12px; color: var(--c-warning); }
.num.over, .fakta dd.over { color: var(--c-danger); }
.tabel tr.overskredet .staerk { color: var(--c-danger); }

.advarsler { display: flex; flex-direction: column; gap: 10px; margin: -18px 0 26px; }
.advarsel {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: var(--c-accent-soft); border: 1px solid #e8d9c4; border-radius: var(--radius);
  padding: 14px 18px; font-size: 14px;
}
.a-tal { font-family: var(--f-etiket); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-tekst { flex: 1 1 300px; color: var(--c-text-dim); }
.advarsel a { margin-left: auto; }
.tabel .opfoelg .num a { color: var(--c-primary); }

/* Ingress: en enkelt forklarende paragraf under en overskrift. */
/* Ingressen løber i sidens fulde bredde. 62ch er den klassiske læselinje, men
   her er der tale om 3-5 linjer under en overskrift, ikke en artikel — og en
   smal blok, der stopper midt på siden, ser ud som om noget mangler til højre. */
.ingress { color: var(--c-text-dim); font-size: 14.5px; line-height: 1.65; margin: -4px 0 22px; }

/* Henvisning: som en advarsel i form, men neutral i farve — den siger
   "det ligger her", ikke "der er noget galt". */
.henvisning {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: var(--c-surface-alt, #f6f4f0); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 14px 18px; font-size: 14px; margin-bottom: 22px;
}
.henvisning .a-tal { color: var(--c-text); }
.henvisning a { margin-left: auto; }

/* Under-tal i en celle: det halve af tallet ovenover i vægt, så det uddyber
   frem for at konkurrere. Bruges til "heraf fælles" og til faktiske andele. */
.celle-under, .th-under {
  display: block; font-size: 11.5px; font-weight: 400; letter-spacing: 0;
  color: var(--c-text-dim); text-transform: none; margin-top: 2px;
}
/* `hidden` skal vinde over alt. Sætter man display på en klasse, slår den
   browserens egen [hidden]-regel ihjel — og så filtrerer søgefelter ingenting. */
[hidden] { display: none !important; }

/* ---------- Matchebordet på kontomapningen ---------- */
/* Begge sider er lige høje — højden sidder på bordet, ikke på listerne.
   Sad den på listen (max-height), stod venstre kort med et tomt felt i
   bunden: højre side har en note og et afkrydsningsfelt under sin liste, og
   gitteret strækker venstre kort til samme højde uden at listen følger med.
   Nu fylder hver liste det, der er tilbage i sit eget kort. */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; height: 72vh; min-height: 420px; }
/* Ingen forslag: listen alene i fuld bredde — kontoplanen er en dialog. */
/* Hoejre side under Ingen forslag: det valgte emne — tal, note, forslag og knappen til kontoplanen. */
.match-side > .match-valgt { margin: 0; padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.match-side > .match-valgt .mv-hoved .knap { flex: 0 0 100%; max-width: max-content; margin-top: 6px; }
.match-side > .match-valgt .mv-delhjaelp { flex: 1 1 100%; }
.mv-fakturaer { margin: 14px -18px 0; padding: 0; border-top: 1px solid var(--c-border-blod); }
/* Dialogen maa aldrig selv rulle: kun listen ruller. Ellers glider raekkerne op
   under overskriften og soegefeltet, og gruppehovederne klaeber de forkerte steder. */
.kontoplan-dialog { width: min(760px, 95vw); max-width: none; padding: 0; max-height: calc(100vh - 48px); overflow: hidden; }
.kontoplan-dialog .kontoplan-form { height: min(80vh, calc(100vh - 48px)); padding: 0; gap: 0; margin: 0; border: 0; box-shadow: none; border-radius: var(--radius); }
.kontoplan-dialog .match-hoved { background: var(--c-surface); position: relative; z-index: 2; flex: 0 0 auto; height: auto; }
.kontoplan-dialog .koder-bund, .kontoplan-dialog .koder-note { flex: 0 0 auto; }
.kontoplan-dialog .match-liste { position: relative; z-index: 1; padding-top: 0; }   /* ellers kigger en raekke frem over det klaebende gruppehoved */
.kontoplan-dialog .match-hoved { flex-wrap: wrap; }
.kontoplan-dialog .match-hoved input[type=search] { flex: 1 1 100%; }
.kontoplan-dialog .koder-bund { gap: 12px; }
.kontoplan-dialog .koder-bund .knap-tekst-lille:last-child { margin-left: auto; }
.match-side {
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius); box-shadow: var(--skygge); overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}
.match-hoved {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--c-border-blod);
}
.match-hoved h2 { margin: 0; font-size: 16px; }
.match-hoved .total { margin-left: auto; font-size: 13px; }
/* Soegefeltet er lavt, saa de to hoveder (venstre med skiftet, hoejre med
   soegningen) faar samme hoejde, og titlerne staar paa samme linje. */
.match-hoved { min-height: 62px; }
.match-hoved input[type="search"] { margin-left: auto; width: min(280px, 55%); padding: 7px 11px; font-size: 13.5px; }
.match-liste { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 6px; }

/* Kortene til venstre: nok information til at kunne afgøre kontoen uden at
   klikke videre — beløb, leverandør, afdelinger. */
/* width: 100% skal staa her: et <button> er et formularelement og krymper om
   sit indhold, ogsaa som grid — uden den bliver kortene forskellige bredder,
   og beloebet staar ikke laengere i hoejre kant. De opdelte kort retter saa
   selv bredden for deres indrykning, se .mk-del. */
.match-kort {
  display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 10px 12px; font: inherit; color: inherit;
}
.match-kort:hover { background: var(--c-bg); }
.match-kort.valgt { background: var(--c-accent-soft); border-color: #e8d9c4; }
/* Leverandørnavnene er lange ("HOLSCHER NORDBERG Architecture andPlanning A/S")
   og listen med konti kan være længere endnu. Flexbokse krymper ikke under
   deres indhold af sig selv (min-width: auto), så uden det her skubber ét
   langt navn en vandret scrollbar frem i hele panelet — og gemmer dermed den
   højre halvdel af alle de andre kort. Beløbet er det eneste, der ikke må
   brydes: det skal kunne læses som ét tal. */
.mk-hoved { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mk-beloeb {
  margin-left: auto; flex: none; white-space: nowrap;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.mk-lev { font-size: 13px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mk-under { font-size: 11.5px; color: var(--c-text-dim); overflow-wrap: anywhere; }

/* Overskrifterne i kontoplanen stod som almindelig lille tekst mellem koderne,
   og med 15 grupper og 199 koder kunne man ikke se, hvor én gruppe slap.
   Baandet goer dem til et niveau for sig — og de saetter sig fast i toppen,
   mens man ruller, saa man altid ved, hvilken gruppe koden under musen hoerer
   til. Derfor ogsaa en UGENNEMSIGTIG baggrund: koderne skal glide ind under. */
.kode-gruppe h3 {
  position: sticky; top: 0; z-index: 1;
  font-family: var(--f-etiket); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-dim); margin: 12px 0 4px; padding: 7px 12px;
  background: var(--c-surface-alt); border-radius: 6px;
}
.kode-gruppe:first-child h3 { margin-top: 0; }
.kode-valg {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; color: inherit;
  font-size: 13.5px;
}
.kode-valg:hover { background: var(--c-accent-soft); }
.kv-tekst { flex: 1 1 auto; min-width: 0; }
/* Samme kode, to budgetlinjer: 17250 er én ting hos Nyrops og en anden hos
   Koppels. Hver variant er sin egen række, og bygningen står ved navnet, så
   man kan se, HVIS linje man er ved at vælge. */
.kv-bygning {
  display: inline-block; margin-left: 8px; font-size: 11px; color: var(--c-text-dim);
  font-family: var(--f-etiket); letter-spacing: .05em; text-transform: uppercase;
}
.kv-budget { font-size: 11px; color: var(--c-text-dim); white-space: nowrap; }
.kode-gruppe h3 .kode { font-size: 10.5px; }

/* Skift mellem leverandør- og kontovinklen. */
.skift { margin-left: auto; display: inline-flex; gap: 2px; background: var(--c-bg);
  border-radius: 999px; padding: 2px; }
.skift a { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; color: var(--c-text-dim);
  text-decoration: none; }
.skift a.aktiv { background: var(--c-surface); color: var(--c-text); box-shadow: var(--skygge); }

/* Den valgte konto med sine forslag — under bordet, hvor øjet alligevel er. */
.match-valgt { margin-bottom: 22px; }
.mv-hoved { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mv-tekst { color: var(--c-text-dim); font-size: 14px; }
.mv-hoved .knap-tekst-lille { margin-left: auto; }
.mv-forslag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mv-note { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mv-note input { flex: 1 1 auto; min-width: 0; max-width: 560px; font: inherit; font-size: 13.5px; padding: 6px 10px;
  border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); }
.mv-label {
  font-family: var(--f-etiket); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-text-dim);
}
.mv-forslag .knap-sekundaer { display: inline-flex; align-items: baseline; gap: 8px; }

@media (max-width: 900px) {
  .match { grid-template-columns: 1fr; height: auto; }
  .match-liste { max-height: 42vh; }
}

/* Noten på en kobling skrives i cellen: knappen ligner tekst, og en tom
   note er et "+ note", man kan klikke på. */
/* Koblingslisten i grupper: overskrift + hjaelp + total, tabel under. Foldede fakturaer som paa Fakturaer. */
.faner-regler { margin-top: 10px; }
.regelgruppe { background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius); padding: 0 16px 4px; }
.regelgruppe .tabelramme { margin: 0 -16px; border: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; }
.regelgruppe .match-hoved { padding: 12px 0 10px; border-bottom: 0; min-height: 0; flex-wrap: wrap; }
.regelgruppe .match-hoved h3 { margin: 0; font-size: 15px; }
.regelgruppe .match-hoved .tom.lille { margin: 0; }
.tabel.koblinger tr.raekke { cursor: pointer; }
.tabel.koblinger tr.raekke.aaben td { background: var(--c-accent-soft); border-bottom: 0; }
.tabel.koblinger tr.linjer-raekke > td { padding: 0 16px 16px 40px; background: var(--c-accent-soft); }
.linjer-bag .note-tekst { font-style: italic; }
/* Koblingslisten: fast layout uden vandret scroll — leverandoer og kontotekst ombrydes. */
.tabel.koblinger { min-width: 0; table-layout: fixed; width: 100%; }
/* Kun den YDRE tabels celler — den foldede fakturatabel indeni har sine egne bredder. */
.tabel.koblinger > thead > tr > th, .tabel.koblinger > tbody > tr > td { padding-left: 10px; padding-right: 10px; overflow-wrap: anywhere; }
.tabel.koblinger > thead > tr > th { white-space: normal; }
.tabel.koblinger > thead > tr > th:nth-child(2) { width: 92px; }
.tabel.koblinger > thead > tr > th:nth-child(3) { width: 112px; }
.tabel.koblinger > thead > tr > th:nth-child(5) { width: 100px; }
.tabel.koblinger > thead > tr > th:nth-child(6) { width: 170px; }
.tabel.koblinger > thead > tr > th:nth-child(7) { width: 150px; }
.tabel.koblinger > thead > tr > th:nth-child(8) { width: 58px; }
.tabel.koblinger > tbody > tr > td .celle-under { white-space: normal; }
.note-celle { max-width: 240px; }
.note-ret { text-align: left; white-space: normal; padding-left: 0; }

/* Forslag: koden er knappen, kilden står ved siden af og kan holdes musen over
   for hele begrundelsen. Et forslag uden kilde er et gæt, og dem viser vi ikke. */
.forslag { min-width: 260px; }
.f-rad { display: flex; align-items: baseline; gap: 8px; padding: 1px 0; }
.f-rad .knap-tekst-lille { text-align: left; }
.f-kilde {
  font-size: 11px; color: var(--c-text-dim); background: var(--c-surface-alt);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; cursor: help;
}
/* Link til fakturaen i Prime: en understregning, ikke en knap — det er et
   opslag, ikke en handling. */
.prime-link { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.prime-soeg { text-decoration-style: dotted; }

/* Kvittering for en kopiering. Nederst, kortvarigt, uden at tage fokus. */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
  background: var(--c-text); color: var(--c-bg); border-radius: 999px;
  padding: 0 20px; height: 40px; display: flex; align-items: center; white-space: nowrap;
  font-size: 13.5px; box-shadow: var(--skygge-pop);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 60;
}
.toast.vis { opacity: 1; transform: translate(-50%, 0); }
.toast.med-handling { pointer-events: auto; }
.toast-knap {
  font: inherit; font-family: var(--f-etiket); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-left: 14px; padding: 0 12px; height: 26px; line-height: 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55);
  background: transparent; color: inherit; cursor: pointer;
}
.toast-knap:hover { background: rgba(255,255,255,.15); }
.toast-knap:disabled { opacity: .5; cursor: default; }
.tip-raekke .tip-vaerdi { color: var(--c-text); }
/* Budgetkode-tooltip: hovedposten (19000) er et ekstra lag hjælp — dæmpet og mindre;
   selve koden (19050) er den, man kigger efter, og står med vægt. */
.tip-raekke:has(.tip-gruppe) { font-size: 11px; color: var(--c-text-dim); }
.tip-raekke:has(.tip-gruppe) > span { color: var(--c-text-dim); }
.tip-raekke:has(.tip-hoved) { font-weight: 600; }
.tip-raekke:has(.tip-sum) { font-weight: 600; border-top: 1px solid var(--c-border-blod); padding-top: 4px; margin-top: 2px; }
.tip-raekke:has(.tip-hoved) > span { color: var(--c-text); }

/* Indstillinger: én kolonne, brede felter — det er adresser, der skrives her. */
.indstillinger { max-width: 760px; display: grid; gap: 18px; margin-bottom: 28px; }
.indstillinger label { display: grid; gap: 6px; font-weight: 600; font-size: 13.5px; }
.indstillinger small { font-weight: 400; color: var(--c-text-dim); font-size: 12.5px; line-height: 1.5; max-width: 62ch; }
.indstillinger select { width: 100%; max-width: 340px; }
.indstillinger input { width: 100%; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; }
.kvittering { color: var(--c-text-dim); font-size: 13.5px; align-self: center; margin-right: auto; }
.vejledning { max-width: 62ch; color: var(--c-text-dim); font-size: 14px; line-height: 1.7; padding-left: 20px; }
.vejledning code, .tom code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px;
  background: var(--c-surface-alt); border-radius: 4px; padding: 1px 5px;
}

/* .dialog saetter width: min(540px, 92vw). En max-width alene kunne derfor
   aldrig goere noget bredere — den brede dialog var 540 px, og tabellens
   min-width: 660px gav den en vandret scrollbar hver eneste gang.
   Det er BREDDEN, der skal skrives om. */
.dialog-bred { width: min(1340px, 95vw); max-width: none; }
/* Kodevælgeren: én kolonne — søgefeltet over listen, begge i fuld bredde. */
.dialog-vaelger { width: min(680px, 94vw); }
.dialog-vaelger .felter { grid-template-columns: 1fr; gap: 12px; }
.dialog-vaelger select { width: 100%; }
/* Kodevælgeren: overskrifterne skal kunne skelnes fra koderne under dem. */
.dialog optgroup {
  font-family: var(--f-etiket, inherit); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-text-dim); padding-top: 6px;
}
.dialog optgroup option { font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--c-text); }
.dialog input[type="search"] { width: 100%; }
.dialog-bred .tabelramme { max-height: 60vh; overflow: auto; }
.dialog select[size] { height: auto; padding: 4px; }

/* Stablen i forecastet: bogført, bundet og ubundet i faldende vægt, så det
   sete, det aftalte og det blot budgetterede kan skelnes uden at læse tal. */
.stabel { display: flex; height: 8px; width: 100%; min-width: 70px; border-radius: 4px; overflow: hidden;
  background: var(--c-border-blod); }
.s-bogfoert { background: var(--c-primary); }
.s-bundet   { background: var(--c-accent, #b08968); opacity: .75; }
.s-ubundet  { background: var(--c-border); }
.tabel.forecast td { white-space: nowrap; }

/* Status på kontrakter og aftalesedler. */
.maerke-aktiv     { background: #e7efe6; color: #3a5a3a; }
.maerke-udkast    { background: var(--c-surface-alt); }
.maerke-afsluttet { background: var(--c-surface-alt); color: var(--c-text-dim); }
.maerke-ophaevet  { background: #f3e0d8; color: #8a4527; }
.maerke-as-godkendt  { background: #e7efe6; color: #3a5a3a; }
.maerke-as-forventet { background: var(--c-accent-soft); color: #6b5335; }
.maerke-as-afvist    { background: var(--c-surface-alt); color: var(--c-text-dim); }
.kontrakt .side-hoved { align-items: baseline; }

.maerke-ok    { background: #e7efe6; color: #3a5a3a; }
.maerke-afvig { background: #f3e0d8; color: #8a4527; }
.tabel.split td.over { color: var(--c-danger); }

/* ============================================================== ugeskema og
   årskalender

   To skemaer, man taster direkte i: timernes uge og feriens år. De deler
   opførsel — celle, fokus, gemmer-tilstand — men ikke layout: ugeskemaet er
   en tabel med syv kolonner, kalenderen et grid med op til 53. */

.uge-linje {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 10px 14px;
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius);
}
.uge-titel { display: flex; flex-direction: column; line-height: 1.3; min-width: 180px; }
.uge-titel strong { font-size: 15px; }
.uge-titel .tom { font-size: 12.5px; }
.uge-person { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--c-text-dim); }
.uge-person select { max-width: 220px; }

/* --- ugeskemaet ---------------------------------------------------------- */

.tabel.skema th.skema-dag { text-align: right; white-space: nowrap; }
.tabel.skema .skema-navn { min-width: 180px; }
.tabel.skema td.weekend, .tabel.skema th.weekend { background: var(--c-bg); }
.tabel.skema th.i-dag { color: var(--c-primary); }
.tabel.skema tfoot th { font-variant-numeric: tabular-nums; border-top: 2px solid var(--c-border); }
.tabel.skema .skema-ny td { background: var(--c-bg); }
.tabel.skema .skema-ny select { max-width: 100%; }

.skema-celle {
  width: 64px; padding: 5px 7px; text-align: right;
  font: inherit; font-variant-numeric: tabular-nums;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--c-text);
}
.skema-celle:hover:not([readonly]) { border-color: var(--c-border); }
.skema-celle:focus { outline: none; border-color: var(--c-primary); background: var(--c-surface); }
.skema-celle[readonly] { color: var(--c-text-dim); }
.skema-celle.gemmer { opacity: .5; }

/* --- årskalenderen ------------------------------------------------------- */

/* Kalenderen kan være bredere end skærmen. Den ruller vandret for sig selv —
   resten af siden skal ikke rulle med. */
.kalenderramme {
  overflow-x: auto; background: var(--c-surface);
  border: 1px solid var(--c-border-blod); border-radius: var(--radius);
  /* INGEN vandret polstring. En sticky kolonne klæber til scroll-containerens
     indholdskant, og polstringen til venstre ruller væk med indholdet — så
     kiggede ugenumrene frem i strimlen til venstre for navnene. Luften ligger
     i stedet inde i selve kolonnerne. */
  padding: 14px 0; margin-bottom: 10px;
  /* Rullebjælken skal kunne ses: kalenderen ER bredere end skærmen, og en
     skjult bjælke ville få oktober til at se ud, som om den ikke fandtes. */
  scrollbar-width: thin;
  scrollbar-color: var(--c-ferie-3) var(--c-bg);
}
.kalenderramme::-webkit-scrollbar { height: 10px; }
.kalenderramme::-webkit-scrollbar-track { background: var(--c-bg); border-radius: 5px; }
.kalenderramme::-webkit-scrollbar-thumb {
  background: var(--c-ferie-3); border-radius: 5px;
  border: 2px solid var(--c-surface);
}
.kalenderramme::-webkit-scrollbar-thumb:hover { background: var(--c-ferie); }
/* Cellerne er store nok til at blive ramt med musen og læst på afstand — 28 px.
   Med 53 uger bliver kalenderen bredere end skærmen og RULLER vandret, som i
   Technical Hub. Navnekolonnen er sticky, så man aldrig er i tvivl om, hvis
   række man kigger på, når man har rullet hen i oktober. */
.kalender {
  display: grid;
  grid-template-columns: 150px repeat(var(--uger), 28px);
  align-items: stretch;
  min-width: max-content;
  padding-right: 14px;
}
.kal-navn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 14px; font-size: 13.5px;
  /* Navnekolonnen bliver stående, når man ruller hen i oktober. z-index skal
     være HØJERE end en celle i fokus (2) — ellers skubber en celle, man
     tabulerer hen til, sig selv ind over navnet. */
  position: sticky; left: 0; z-index: 4; background: var(--c-surface);
  border-right: 1px solid var(--c-border-blod);
}
.kal-navn strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-navn.inaktiv { opacity: .5; }
.kal-sum {
  margin-left: auto; font-family: var(--f-etiket); font-size: 11.5px;
  color: var(--c-text-dim); font-variant-numeric: tabular-nums;
}
.kal-hjoerne { font-family: var(--f-etiket); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-text-dim); }
/* Månederne som egne felter med luft imellem frem for én lang stribe med
   skillestreger. Feltet siger "her hører de her uger sammen"; en streg siger
   kun "her slutter noget". */
.kal-maaned {
  font-family: var(--f-etiket); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-text-dim);
  text-align: center; padding: 7px 0 6px;
  background: var(--c-bg); border-radius: 5px;
  margin: 0 2px 3px;
}
/* Ved 28 px er der plads til hvert ugenummer. Ved 20 px var der ikke, og
   hvert andet blev skjult — det er ikke længere nødvendigt. */
.kal-uge {
  font-family: var(--f-etiket); font-size: 10.5px; color: var(--c-text-dim);
  text-align: center; padding: 5px 0 7px;
}
.kal-uge.nu { color: var(--c-ferie); font-weight: 700; }

.kal-celle {
  width: 28px; height: 30px; padding: 0; text-align: center;
  font: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--c-border-blod); border-radius: 4px;
  background: transparent; color: var(--c-text);
  -moz-appearance: textfield;
}
.kal-celle:hover  { border-color: var(--c-ferie-3); }
.kal-celle:focus  { outline: none; border-color: var(--c-ferie);
  box-shadow: 0 0 0 1px var(--c-ferie); position: relative; z-index: 2; }
/* Jo flere dage, jo kraftigere — man skal kunne se et sommerhul på afstand,
   uden at læse et eneste tal. Én kulør, fire trin: lidt og meget af DET SAMME. */
.kal-celle.lidt  { background: var(--c-ferie-1); }
.kal-celle.noget { background: var(--c-ferie-2); }
.kal-celle.meget { background: var(--c-ferie-3); color: var(--c-text); }
.kal-celle.fuld  { background: var(--c-ferie-4); color: #fff; }

/* --- søjler (timer pr. måned) -------------------------------------------- */

.soejler {
  display: flex; align-items: flex-end; gap: 10px; height: 180px;
  padding: 10px 12px; background: var(--c-surface);
  border: 1px solid var(--c-border-blod); border-radius: var(--radius);
}
.soejle { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 4px; height: 100%; }
.soejle-stak { width: 100%; background: var(--c-surface-alt); border-radius: 3px 3px 0 0;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 2px; }
.soejle-projekt { width: 100%; background: var(--c-accent); border-radius: 3px 3px 0 0; }
.soejle-tal { font-family: var(--f-etiket); font-size: 10.5px; color: var(--c-text-dim);
  font-variant-numeric: tabular-nums; }
.soejle-navn { font-family: var(--f-etiket); font-size: 10px; color: var(--c-text-dim); }

/* To smalle tabeller side om side. `.tabel` har min-width 660px, fordi brede
   tabeller ellers bliver klemt — men her er kolonnerne få og korte, og uden
   den her ville den tredje kolonne stå uden for rammen og skulle rulles frem. */
.to-kolonner { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; }
.to-kolonner .tabel { min-width: 0; }
.to-kolonner .tabel th, .to-kolonner .tabel td { padding-left: 14px; padding-right: 14px; }
.tabel tr.raekke-intern td { background: var(--c-bg); }

.filtre { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 22px; }
.filtre label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--c-text-dim); }

/* --- skabelonkataloget --------------------------------------------------- */

.soeg { display: block; margin: 0 0 22px; }
.soeg input { width: 100%; max-width: 420px; }

.skabeloner { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.skabelon {
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius); padding: 14px 16px;
}
.skabelon.inaktiv { opacity: .6; }
.sk-hoved { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sk-navn { font-weight: 600; font-size: 14.5px; }
.sk-om { margin: 6px 0 10px; font-size: 13.5px; color: var(--c-text-dim); line-height: 1.5; }
.skabelon { display: flex; flex-direction: column; }
.sk-fod { margin: 0 0 8px; font-size: 12.5px; color: var(--c-text-dim); }
/* Handlingerne på deres egen linje, skubbet i bund. Sammen med metateksten
   blev det til én lang sætning, hvor "Slet" stod og lignede en oplysning. */
.sk-handlinger {
  margin: auto 0 0; padding-top: 8px; border-top: 1px solid var(--c-border-blod);
  display: flex; gap: 2px; flex-wrap: wrap;
}

/* ============================================================== ferietavlen

   Kurven over dage pr. måned og panelet "hvem er væk", side om side over
   årskalenderen. Én serie, så ingen signaturforklaring — overskriften siger,
   hvad der er tegnet. Tallet står kun, hvor der ER noget: et tal på hver søjle
   er støj, og nullerne siger sig selv. */

/* Nøgletallene: fire tal, der svarer på "hvor meget" før man har set kurven.
   Tallet er stort og proportionalt (ikke tabular — ved 30 px ser "32,5" løst
   ud, når hvert ciffer får et nuls bredde); etiketten er lille og rolig. */
.noegletal {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin: 0 0 20px;
}
.nt {
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 3px;
}
.nt-tal { font-size: 30px; font-weight: 600; line-height: 1.05; color: var(--c-text); }
.nt-tal.nt-tom { font-size: 22px; color: var(--c-text-dim); font-weight: 500; padding-top: 6px; }
.nt-navn {
  font-family: var(--f-etiket); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-text-dim);
}

.filterlinje {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 14px 20px;
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius);
}
.filterlinje label { display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--c-text-dim); }
.filterlinje select {
  max-width: 240px; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text);
}
.filterlinje select:focus { outline: none; border-color: var(--c-ferie); }
.filter-sum { margin-left: auto; font-family: var(--f-etiket); font-size: 13px;
  font-weight: 600; letter-spacing: .03em; color: var(--c-ferie); }
.aarsskift { display: flex; align-items: center; gap: 6px; }
.aarsskift strong { font-size: 19px; min-width: 52px; text-align: center; }

.tavler { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
  gap: 20px; margin: 0 0 30px; align-items: start; }
.tavle {
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius); padding: 24px 26px 20px;
}
.tavle-hoved { margin-bottom: 20px; }
.tavle-hoved h2 { margin: 0 0 3px; font-size: 21px; }
.tavle-hoved .tom { margin: 0; }
.tavle .tom.lille:last-child { margin-bottom: 0; }

/* --- søjlerne ---
   Sporet er den lyse "kolonne" bag hver måned, så tomme måneder stadig har en
   plads man kan sigte efter. Søjlen selv er tynd, rund i toppen og skarp mod
   grundlinjen: den vokser fra nul, og det skal kunne ses. */
.kurve { display: flex; align-items: flex-end; gap: 2px; margin: 0 0 14px;
  position: relative; }

/* Info-feltet: værdien er det kraftige, navnet det sekundære — man har
   måneden og vil have tallet, ikke omvendt.

   Det ligger INDE i kurven (top: 0), ikke over den. Placeret over kurven
   skubbede det sig selv ud af kortet og lagde sig hen over nøgletallene
   ovenfor — et felt, der dækker tal, man ikke bad om at få skjult. */
.kurve-info {
  position: absolute; top: 0; z-index: 5;
  min-width: 210px; max-width: 280px;
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border-blod); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(31, 29, 27, .13);
  padding: 14px 16px; pointer-events: none;
}
.ki-hoved {
  margin: 0 0 10px; font-family: var(--f-etiket); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-ferie-moerk);
}
.ki-raekke {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  font-size: 13.5px; padding: 3px 0; color: var(--c-text-dim);
}
.ki-raekke strong { color: var(--c-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ki-raekke.ki-sum { color: var(--c-text); }
/* Hårlinje under totalerne: summen og opdelingen er to slags rækker. */
.ki-raekke.ki-sum + .ki-raekke:not(.ki-sum) {
  border-top: 1px solid var(--c-border-blod); margin-top: 7px; padding-top: 9px;
}
.ki-raekke.ki-tom strong { color: var(--c-text-dim); }
.kurve-baand { flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 7px; min-width: 0; border-radius: var(--radius-sm); }
.kurve-baand:focus-visible { outline: 2px solid var(--c-ferie); outline-offset: 2px; }
/* Sporet er 24 px bredt — en søjle skal ikke fylde sit felt ud; luften omkring
   er det, der holder tolv måneder fra at blive til én blok. Højden er det, der
   gør kurven større, ikke tykkelsen. */
.kurve-spor {
  width: 100%; max-width: 24px; height: 200px;
  background: var(--c-bg); border-radius: 5px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
/* Hele båndet er målskiven, ikke kun den malede søjle — en måned med 1 dag
   har en søjle på 9 px, og den rammer ingen med musen. */
.kurve-baand { cursor: default; padding: 4px 0; }
.kurve-baand:hover .kurve-soejle,
.kurve-baand.aktiv .kurve-soejle { filter: brightness(1.12); }
.kurve-baand:hover .kurve-spor,
.kurve-baand.aktiv .kurve-spor { background: var(--c-ferie-1); }
.kurve-baand:hover .kurve-tal,
.kurve-baand.aktiv .kurve-tal { color: var(--c-ferie-moerk); }
/* Alle søjler har SAMME farve. At give den højeste sin egen ville lade farven
   følge en placering frem for en ting — og så ville en måned skifte farve,
   bare fordi en anden måned blev fyldt op. Højden er det, der siger "mest";
   sætningen under kurven siger hvilken måned det er. */
/* Gradienten hører til SPORET, ikke til den enkelte søjle.
   background-size låser den til sporets højde og background-position til
   bunden, så alle tolv søjler klipper ud af ét og samme farvefelt. Fik hver
   søjle sin egen gradient, ville en søjle på 1 dag og en på 23 spænde over
   præcis den samme farvestrækning — og så ville farven ikke betyde noget.
   Sådan her betyder den noget: jo højere søjlen når, jo længere op i den
   varme ende kommer den. */
.kurve-soejle {
  width: 100%; min-height: 3px; border-radius: 5px 5px 0 0;
  background-image: linear-gradient(to bottom, var(--c-ferie-top), var(--c-ferie-bund));
  background-size: 100% 200px;
  background-position: bottom;
  background-repeat: no-repeat;
  transition: filter .12s ease;
}
.kurve-tal { font-family: var(--f-etiket); font-size: 14px; font-weight: 600;
  color: var(--c-text); font-variant-numeric: tabular-nums; }
.kurve-tal.nul { color: var(--c-border); font-weight: 400; }
.kurve-navn { font-family: var(--f-etiket); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-text-dim); }

/* --- hvem er væk --- */
.vaek-nu-hoved { margin: 0 0 8px; font-family: var(--f-etiket); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim); }
.vaek-liste { list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 11px; }
.vaek-liste li { font-size: 14.5px; line-height: 1.45;
  display: flex; flex-direction: column; }
.vaek-liste .tom { font-size: 13px; }
/* Den grønne her er FERIEgrøn, ikke systemets "positive" — to grønne på samme
   skærm ville se ud som to forskellige slags ja. */
.vaek-alle-her { margin: 0 0 20px; font-size: 14.5px; color: var(--c-ferie); font-weight: 600; }

.kal-aar {
  font-family: var(--f-etiket); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  color: var(--c-ferie-moerk); text-align: center; padding: 8px 0 7px;
  background: var(--c-ferie-1); border-radius: 5px; margin: 0 2px 3px;
}

@media (max-width: 900px) {
  .tavler { grid-template-columns: 1fr; }
}


/* ======================================================== opdelt kontomapning

   En leverandør, der leverer flere slags arbejde, skal kunne få hver sin
   budgetkode. Så deles kortet op i de kombinationer, der faktisk findes i
   fakturaerne, og hver del kobles for sig. */

/* Forælderen bliver stående som overskrift over sine dele — man skal kunne se,
   hvad delene er dele AF. Den kan ikke klikkes: den har ikke selv en kode. */
.match-kort.mk-delt {
  background: var(--c-bg); cursor: default; opacity: 1;
  border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.match-kort.mk-delt .mk-beloeb { color: var(--c-text-dim); }
.mk-delt-note {
  display: block; margin-top: 6px; font-family: var(--f-etiket);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-accent);
}
/* Delene rykkes ind og får en streg ned langs venstre kant, så det er tydeligt,
   hvor gruppen slutter. */
.match-kort.mk-del {
  /* Bredden SKAL trække indrykningen fra. 100 % + 18 px margin er 18 px mere,
     end der er plads til, og så fik hele panelet en vandret scrollbar i samme
     øjeblik, man delte op — som skjulte beløbet på alle de andre kort. */
  margin-left: 18px; width: calc(100% - 18px);
  border-left: 2px solid var(--c-accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.match-kort.mk-del + .match-kort:not(.mk-del) { margin-top: 10px; }
/* Én faktura, valgt til sin egen kobling: står øverst og skiller sig ud. */
.match-kort.mk-faktura { border-left-color: var(--c-primary); }

.mv-del { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mv-del .knap-sekundaer.valgt { border-color: var(--c-primary); color: var(--c-primary); }
.mv-delhjaelp { font-size: 12.5px; color: var(--c-text-dim); flex: 1 1 260px; }
.mv-delnote { margin: 10px 0 0; }

/* En budgetkode, den valgte bygnings budget IKKE har. Den kan stadig vælges —
   der findes grunde til det — men den skal ikke kunne vælges ved et uheld:
   beløbet ville lande uden for bygningens budget i opfølgningen. */
.kode-valg.udenfor { opacity: .38; }
.kode-valg.udenfor:hover { opacity: .7; }
.koder-note.tom { margin-top: 14px; }   /* .tom.lille sætter -4px; to klasser her slår den */
.koder-note { margin: 14px 0 0; padding: 0 14px; }

/* Hvor tallene kommer fra, sagt ét sted øverst — ikke gemt i en tooltip. */
.kilde-linje { margin: -8px 0 18px; font-size: 13.5px; color: var(--c-text-dim); }
/* Bunden af kontoplanen: afkrydsningen til venstre, "N budgetter i spil" til hoejre
   med filnavne og revisionsdatoer i en tooltip — de fyldte fire linjer foer. */
.koder-bund { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.koder-bund .koder-skjul { flex: 1 1 auto; }
.koder-fod { margin: 0 14px 0 0; cursor: help; white-space: nowrap; }
.koder-fod .tip-anker { text-decoration: underline dotted; }

/* Halvdelen af kontoplanen kan stå uden budget. Så er nedtoning ikke nok —
   man skal kunne få dem væk og se de koder, nogen faktisk har budgetteret.
   flex-direction og font-weight skrives ud, fordi den generelle label-regel
   stiller labels i en kolonne med fed skrift — det er til formularfelter. */
.koder-skjul {
  display: flex; flex-direction: row; align-items: center; gap: 7px;
  margin: 12px 0 0; padding: 0 14px;
  font-size: 13px; font-weight: 400; color: var(--c-text-dim);
  cursor: pointer; user-select: none;
}
/* width/flex skrives ud: den generelle input-regel giver felter fuld bredde,
   og et afkrydsningsfelt på 424 px skubber teksten væk fra sig selv. */
.koder-skjul input {
  width: auto; flex: none; margin: 0;
  cursor: pointer; accent-color: var(--c-primary);
}

/* ---------- Generelt: mellemregningen på tværs af bygningerne ---------- */
.generelt-boks {
  margin-top: 12px; padding: 14px 18px;
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-left: 3px solid var(--c-accent);   /* tydelig, som de andre fremhævede bokse */
  border-radius: var(--radius); box-shadow: var(--skygge);
}
.gb-hoved { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* Overskriften som bygningsnavnene i tabellen ovenover: samme skrift, samme vægt. */
.gb-hoved .staerk { font-family: var(--f-tekst); font-weight: 600; font-size: 15px; }
.gb-hoved .knap-tekst-lille { margin-left: auto; }
.gb-tal { margin: 10px 0 0; }
.gb-tal dd.over, .fakta dd.over { color: var(--c-danger); }
/* På en bygnings gruppe, der følges under Generelt: linket står i stedet for måleren. */
.maaler-generelt { font-size: 12px; color: var(--c-primary); text-decoration: none; white-space: nowrap; }
.maaler-generelt:hover { text-decoration: underline; }
.maaler-generelt.tom { color: var(--c-text-dim); }
.tabel td.num a { color: var(--c-primary); }

/* Tooltip til fordelingen: et lille "i" ved tallet, en boks ved hover/fokus.
   Ren CSS — ingen bibliotek. Boksen ligger til venstre for ikonet, fordi
   tallene står i højre side af tabellen. */
.tip { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.tip-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--c-border); color: var(--c-text-dim);
  font-family: var(--f-etiket); font-size: 10px; font-weight: 600; font-style: italic;
  line-height: 1; cursor: help; user-select: none;
}
.tip:hover .tip-ikon, .tip:focus-within .tip-ikon { border-color: var(--c-primary); color: var(--c-primary); }
.tip-boks {
  /* Fast placeret og sat med JS: tabellen ligger i en ramme med overflow,
     og en absolut boks inde i den ville give rammen en vandret scrollbar. */
  display: none; position: fixed; z-index: 20;
  min-width: 220px; padding: 10px 12px; text-align: left;
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius-sm); box-shadow: var(--skygge);
  font-size: 12.5px; font-weight: 400; color: var(--c-text); white-space: nowrap;
}
.tip-titel {
  display: block; margin-bottom: 6px; font-family: var(--f-etiket); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-dim);
}
.tip-raekke { display: flex; justify-content: space-between; gap: 18px; padding: 2px 0; }
.tip-raekke .num { font-variant-numeric: tabular-nums; }
.tip-eksempel { margin: 0 2px; }
/* Pladsholder paa ikonets bredde: tal med og uden ikon flugter i kolonnen. */
.tip-plads { display: inline-block; width: 15px; margin-left: 6px; vertical-align: middle; }
.tip-note { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-border);
  white-space: normal; max-width: 280px; color: var(--c-text-dim); font-size: 12px; line-height: 1.4; }
/* ETC-cellen er selv et tip-anker: ingen "i", tallet er ankeret, og ingen margin. */
.tip.tip-etc { margin-left: 0; }
.tip-etc .tip-anker { cursor: text; }

/* ETC: projektlederens eget tal. Indtastet = tydeligt; antaget (= rest) = dæmpet og i kursiv. */
.etc-kol { background: color-mix(in srgb, var(--c-accent-soft) 35%, transparent); }
.etc-ret {
  font: inherit; color: inherit; background: none; border: 0; padding: 2px 6px; margin: -2px -6px;
  border-radius: var(--radius-sm); cursor: text; font-variant-numeric: tabular-nums;
}
.etc-ret:hover, .etc-ret:focus-visible { outline: 1px solid var(--c-primary); }
.etc-ret.antaget { color: var(--c-text-dim); font-style: italic; }
.etc-ret.manuel { font-weight: 600; }

/* Fakturaoversigtens filtre: et 12-kolonners gitter, der fylder hele bredden.
   Raekke 1: fritekst (4) · bygning (2) · status (2) · kilde (2) · kobling (2)
   Raekke 2: budgetkode (3) · leverandoer (3) · fra (2) · til (2) · knapper (2) */
.filtre.filtre-fakturaer {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px;
  align-items: end; background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius); padding: 18px 20px; margin: 0 0 20px;
}
.filtre-fakturaer label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filtre-fakturaer input, .filtre-fakturaer select { width: 100%; max-width: none; min-width: 0; height: 44px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; font-size: 14px; }
.filtre-fakturaer .ff-fritekst { grid-column: span 4; }
.filtre-fakturaer .ff-bygning, .filtre-fakturaer .ff-status, .filtre-fakturaer .ff-kilde, .filtre-fakturaer .ff-kobling { grid-column: span 2; }
.filtre-fakturaer .ff-kode, .filtre-fakturaer .ff-lev { grid-column: span 3; }
.filtre-fakturaer .ff-fra, .filtre-fakturaer .ff-til { grid-column: span 2; }
.filtre-fakturaer .ff-knapper { grid-column: span 2; justify-content: flex-end; }
.filtre-fakturaer .ff-knapper .knap-sekundaer { padding: 9px 14px; }
@media (max-width: 900px) {
  .filtre-fakturaer .ff-fritekst { grid-column: span 12; }
  .filtre-fakturaer .ff-bygning, .filtre-fakturaer .ff-status, .filtre-fakturaer .ff-kilde, .filtre-fakturaer .ff-kobling { grid-column: span 6; }
  .filtre-fakturaer .ff-kode, .filtre-fakturaer .ff-lev { grid-column: span 6; }
  .filtre-fakturaer .ff-fra, .filtre-fakturaer .ff-til { grid-column: span 4; }
  .filtre-fakturaer .ff-knapper { grid-column: span 4; }
}

/* Fakturaoversigten: sorterbare overskrifter, linjerne bag foldet ud under raekken.
   Fast layout uden vandret scroll: kode-pillerne maa stables, leverandoeren maa ombrydes. */
.tabel.fakturaer { min-width: 0; table-layout: fixed; width: 100%; }
/* Kun den YDRE tabels celler — linjetabellen indeni har sine egne kolonner. */
.tabel.fakturaer > thead > tr > th, .tabel.fakturaer > tbody > tr > td { padding-left: 10px; padding-right: 10px; overflow-wrap: anywhere; }
.tabel.fakturaer > thead > tr > th { white-space: normal; }
.tabel.fakturaer > thead > tr > th:nth-child(1) { width: 92px; }
.tabel.fakturaer > thead > tr > th:nth-child(3) { width: 108px; }
.tabel.fakturaer > thead > tr > th:nth-child(4) { width: 100px; }
.tabel.fakturaer > thead > tr > th:nth-child(5) { width: 84px; }
.tabel.fakturaer > thead > tr > th:nth-child(6) { width: 94px; }
.tabel.fakturaer > thead > tr > th:nth-child(7) { width: 136px; }
.tabel.fakturaer > thead > tr > th:nth-child(8) { width: 150px; }
.tabel.fakturaer > thead > tr > th:nth-child(9) { width: 100px; }
.tabel.fakturaer .kode { display: inline-block; margin: 1px 0; }
.tip.tip-kode { margin-left: 0; }
.tip-kode .tip-anker { cursor: help; }
.filtre label { min-width: 0; }
/* Filtrene er flex: en <select> med lange valg maa ikke faa lov at brede sig over hele raekken. */
.filtre select { max-width: 260px; }
.tabel.fakturaer .kode { display: inline-block; margin: 1px 0; }
.tip.tip-kode { margin-left: 0; }
.tip-kode .tip-anker { cursor: help; }
.tabel th[data-sort] { cursor: pointer; user-select: none; }
.tabel th[data-sort]:hover { color: var(--c-primary); }
.tabel th[data-sort].sorteret { color: var(--c-text); }
.tabel th[data-sort].sorteret::after { content: ' ↓'; }
.tabel th[data-sort].sorteret[data-retning="op"]::after { content: ' ↑'; }
.tabel.fakturaer tr.faktura { cursor: pointer; }
.tabel.fakturaer tr.faktura.aaben td { background: var(--c-accent-soft); border-bottom: 0; }
.tabel.fakturaer tr.linjer-raekke > td { padding: 0 16px 16px 40px; background: var(--c-accent-soft); }
.linjer-bag .tabel { min-width: 0; background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius-sm); }
/* Den indre tabel maa ALDRIG blive bredere end sin celle: lange leverandoernavne
   ombrydes, kun tal, datoer og knapper holdes paa een linje. */
.linjer-bag { max-width: 100%; overflow-x: hidden; }
.linjer-bag .tabel { width: 100%; table-layout: auto; }
.linjer-bag .tabel th, .linjer-bag .tabel td { padding: 8px 12px; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.linjer-bag .tabel th, .linjer-bag .tabel td.tid, .linjer-bag .tabel td.num, .linjer-bag .tabel td.handling { white-space: nowrap; overflow-wrap: normal; }
/* Fakturaerne bag en regel: faste bredder, leverandoeren faar resten. */
.tabel.bag-regel { table-layout: fixed; }
.tabel.bag-regel th { box-sizing: border-box; }   /* bredden er inkl. padding */
.tabel.bag-regel th:nth-child(1) { width: 90px; }
.tabel.bag-regel th:nth-child(3) { width: 118px; }
.tabel.bag-regel th:nth-child(4) { width: 120px; }
.tabel.bag-regel th:nth-child(5) { width: 110px; }
.tabel.bag-regel th:nth-child(6) { width: 170px; }
.tabel.bag-regel th:nth-child(7) { width: 96px; }
.tabel.bag-regel th:nth-child(8) { width: 100px; }
.tabel.bag-regel th { white-space: normal; }
.linjer-bag .tabel tr.tom td { color: var(--c-text-dim); }
/* Underteksten maa ikke loebe ind i nabocellen: lange Prime-statusser klippes med "…". */
.tabel.fakturaer > tbody > tr > td .celle-under { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }

/* Forslag (031): en kode, ingen har bekraeftet — daempet og stiplet, saa den ikke laeses som en kode. */
.forslag-pille .kode { opacity: .55; border-style: dashed; }
/* Faner over boksen: Til bekræftelse / Ingen forslag. */
.faner { display: flex; gap: 6px; margin: 0 0 -1px; padding: 0 6px; }
.fane {
  font: inherit; font-family: var(--f-etiket); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 10px 16px; border: 1px solid var(--c-border-blod); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  background: var(--c-surface-alt); color: var(--c-text-dim); cursor: pointer;
}
.fane.aktiv { background: var(--c-surface); color: var(--c-text); position: relative; z-index: 1; }
.fane:disabled { opacity: .5; cursor: default; }
/* Tallet har sin egen font og vægt — det står også i en serif-overskrift (Senest bekræftet)
   og skal se ens ud der og i fanerne. */
.fane-tal { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: 999px;
  background: var(--c-accent-soft); color: var(--c-accent); font-family: var(--f-etiket); font-size: 11px;
  font-weight: 600; letter-spacing: 0; line-height: 18px; vertical-align: middle; text-align: center; }
.fane.aktiv .fane-tal { background: var(--c-primary); color: #fff; }
.match-afventer .afv-gruppe { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.match-afventer .afv-liste { padding: 0; }
.match-afventer .afv-titel { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.match-afventer .match-hoved .knap-tekst-lille { margin-left: 8px; white-space: nowrap; }
.match-afventer .match-hoved .total { margin-left: auto; white-space: nowrap; }
/* Fakturaerne under en leverandør: ikke en tabel (panelet er for smalt til seks
   kolonner), men en raekke pr. faktura i to linjer — nummer/dato/beloeb, og
   bygning → forslag — med knapperne samlet til hoejre paa een linje. */
.mk-beloeb.mk-flow { color: var(--c-text-dim); }
.mk-beloeb.mk-flow small { font-size: 11px; font-weight: 400; }
.afv-raekke { display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--c-border-blod); }
.afv-raekke:last-child { border-bottom: 0; }
/* Dæmpningen lægges på delene, ikke på beholderen: opacity giver en stacking
   context, og så ville tooltippen (position: fixed) ligge UNDER de næste rækker. */
.afv-raekke.inaktiv .afv-linje1 > :not(.tip), .afv-raekke.inaktiv .afv-linje2 > :not(.tip),
.afv-raekke.inaktiv .afv-linje3, .afv-raekke.inaktiv .tip > .tip-anker { opacity: .7; }
.afv-indhold { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.afv-linje1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* Linje 2 holdes paa EEN linje: bygningerne faar ellipsis, pil og kode viger aldrig. */
.afv-linje2 { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.afv-nr { font-weight: 600; }
.afv-beloeb { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.afv-linje2 { font-size: 13.5px; color: var(--c-text-dim); }
.afv-bygning { color: var(--c-text); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afv-linje2 .afv-pil, .afv-linje2 .tip, .afv-linje2 .kode, .afv-linje2 .maerke { flex: 0 0 auto; }
.afv-pil { color: var(--c-border); }
.afv-tekst { color: var(--c-text); }
.afv-linje3 .afv-note { font-size: 12px; padding: 0; margin: 0; }
.afv-handling { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding-top: 2px; }
.knap-lille {
  font: inherit; font-family: var(--f-etiket); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--c-primary); background: var(--c-surface); color: var(--c-primary); cursor: pointer;
}
.knap-lille:hover { background: var(--c-primary); color: #fff; }
.afventer { margin-bottom: 22px; }
.afventer .match-hoved { margin-bottom: 6px; }
.afventer-tabel tr.gruppe-raekke td { background: var(--c-surface-alt); padding-top: 9px; padding-bottom: 9px; }
.afventer-tabel td.handling { white-space: nowrap; }
.dialog td.handling { white-space: nowrap; text-align: right; }
.dialog td.handling .knap-tekst-lille + .knap-tekst-lille { margin-left: 10px; }
.dialog td.handling .note-ret { max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.afv-note { font-size: 12px; margin-top: 2px; }
.tabel.fakturaer .note-tekst { color: var(--c-text); font-style: italic; font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.afventer-tabel td.handling .knap-tekst-lille + .knap-tekst-lille { margin-left: 8px; }
.afventer-tabel tr.gruppe-raekke td.handling { white-space: nowrap; }

/* Rullemenu: en <details> med knappen som summary. Ingen JS til at åbne — kun til at lukke. */
.rullemenu { position: relative; display: inline-block; }
.rullemenu summary { list-style: none; cursor: pointer; }
/* Upload-knappen staar mellem overskriften og fire tekstlinks: en lille knap,
   ikke en primaer handling — samme hoejde som linkene, mindre polstring. */
.side-hoved > .rullemenu > summary.knap-sekundaer { padding: 7px 14px; font-size: 11.5px; letter-spacing: .08em; }
.rullemenu summary::-webkit-details-marker { display: none; }
.rullemenu-liste {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); min-width: 260px;
  background: var(--c-surface); border: 1px solid var(--c-border-blod);
  border-radius: var(--radius-sm); box-shadow: var(--skygge); padding: 6px;
}
.rullemenu-liste button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 8px 10px; border: 0; background: none; text-align: left; font: inherit; color: var(--c-text);
  border-radius: var(--radius-sm); cursor: pointer;
}
.rullemenu-liste button:hover, .rullemenu-liste button:focus-visible { background: var(--c-bg); }
.rullemenu-liste button small { font-size: 12px; color: var(--c-text-dim); }

/* Opfølgningens tabel har ni kolonner; lidt mindre luft i cellerne, så den holder sidens bredde. */
.tabel.opfoelg th, .tabel.opfoelg td { padding-left: 8px; padding-right: 8px; }
/* Fast layout: kolonnerne deler den bredde, der ER — ingen vandret scroll. Kontoteksten ombrydes. */
.tabel.opfoelg { min-width: 0; table-layout: fixed; width: 100%; }
.tabel.opfoelg th:first-child { width: 78px; }
/* Ni cifre med punktummer (133.413.483) skal kunne staa paa een linje. */
.tabel.opfoelg th.num { width: 108px; }
.tabel.opfoelg td.num { white-space: nowrap; overflow-wrap: normal; }
.tabel.opfoelg th { white-space: normal; }
.tabel.opfoelg .maalerkol { width: 118px; max-width: 118px; overflow: hidden; }
.tabel.opfoelg .maaler { width: 56px; }
.tabel.opfoelg td { overflow-wrap: anywhere; }
.tabel.opfoelg td:first-child, .tabel.opfoelg td .kode { overflow-wrap: normal; white-space: nowrap; }
.tabel.opfoelg tr.under td:first-child { padding-left: 22px; }
/* Generelt: Budget og Forbrug baerer et tooltip-ikon ved siden af tallet, saa
   kolonnerne skal vaere bredere — ellers stikker ikonet ud af cellen, og tallene
   flugter ikke. Maaleren og ETC-kolonnerne giver pladsen. */
.tabel.opfoelg.generel th:nth-child(3), .tabel.opfoelg.generel th:nth-child(4) { width: 126px; }
.tabel.opfoelg.generel th.num:not(:nth-child(3)):not(:nth-child(4)) { width: 102px; }
.tabel.opfoelg.generel th, .tabel.opfoelg.generel td { padding-left: 8px; padding-right: 8px; }
/* Maaler + procent skal kunne staa paa een linje: 48 px maaler + "100 %" + luft. */
.tabel.opfoelg.generel .maalerkol { width: 116px; max-width: 116px; white-space: nowrap; }
.tabel.opfoelg.generel .maaler { width: 48px; }
.tabel.opfoelg.generel .maaler-tal { display: inline-block; min-width: 38px; text-align: right; }
.tabel.opfoelg.generel td.num { white-space: nowrap; overflow-wrap: normal; }

/* Sumrækken nederst i en tabel: samme kolonner som tallene ovenover, så der ikke er tvivl om, hvad summen er af. */
.tabel tfoot tr.sumraekke td { border-top: 1px solid var(--c-border); border-bottom: 0; background: var(--c-bg); }
.tabel tr.gruppe.enkeltkode { cursor: default; }

/* Senest bekræftet: en nødudgang, sammenfoldet indtil man beder om den.
   Én omgang pr. tidsstempel med "Fortryd alle" — og Fortryd pr. faktura. */
.afsnit.senest .senest-hoved { display: flex; align-items: baseline; gap: 12px; }
.afsnit.senest .senest-hoved h2 { margin: 0; }
.senest-omgang { border: 1px solid var(--c-border-blod); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.senest-omgang-hoved { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--c-surface-alt, #f6f6f4);
  border-bottom: 1px solid var(--c-border-blod); }
.senest-omgang-hoved .knap-tekst-lille { margin-left: auto; white-space: nowrap; }
.senest-omgang .afv-liste { max-height: 420px; overflow: auto; }

/* Sikkerhed (033): IP-adresser og lignende i fast bredde. */
.tabel td.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; white-space: nowrap; }

/* Opgaver (034) */
/* Arbejdsfladen: visningerne i siden, værktøjslinje, personrække og indhold.
   Sidens egen bredde (1160) deles 220/resten — boardet får fire smalle kolonner,
   som er nok til et kort med titel, chips og en avatar. */
.op-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 26px; align-items: start; }
.op-side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 18px; }
.op-side-gruppe {
  font-family: var(--f-etiket); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-dim); margin: 14px 0 4px 10px;
}
.op-side-gruppe:first-child { margin-top: 0; }
.op-side-punkt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--c-text); background: none; border: 0;
  padding: 7px 10px; border-radius: var(--radius-sm);
}
.op-side-punkt:hover { background: var(--c-surface-alt); }
.op-side-punkt.aktiv { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.op-tal {
  margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; text-align: center;
  font-family: var(--f-etiket); font-size: 11px; font-weight: 600; line-height: 19px;
  background: var(--c-surface-alt); color: var(--c-text-dim);
}
.op-side-punkt.aktiv .op-tal { background: var(--c-primary); color: #fff; }
.op-tal.ov { background: #f7e7e3; color: var(--c-danger); }
.op-side-punkt.aktiv .op-tal.ov { background: var(--c-danger); color: #fff; }

.op-vaerktoej { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.op-vaerktoej-titel { margin-right: auto; }
.op-vaerktoej-titel h2 { font-size: 22px; }
.op-vaerktoej-titel .tom.lille { margin: 0; }
.op-vaerktoej .knap { padding: 9px 16px; }
/* Segment: Liste/Board og Gruppér — samme form som .skift på kontomapningen. */
.op-segment { display: inline-flex; gap: 2px; background: var(--c-surface-alt); border-radius: 999px; padding: 2px; }
.op-segment button {
  font: inherit; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--c-text-dim);
}
.op-segment button:hover { color: var(--c-text); }
.op-segment button.aktiv { background: var(--c-surface); color: var(--c-text); box-shadow: var(--skygge); }
.op-raekken { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.op-raekken:empty { display: none; }
.op-gruppering { display: flex; align-items: center; gap: 10px; }
.op-etiket { font-family: var(--f-etiket); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); }
.op-personer-raekke { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.op-pille {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 13px;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
}
.op-pille:hover { border-color: var(--c-primary); color: var(--c-primary); }
.op-pille.valgt { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); font-weight: 600; }
.op-pille-tal { font-family: var(--f-etiket); font-size: 11px; font-weight: 600; color: var(--c-text-dim); }
.op-pille.valgt .op-pille-tal { color: inherit; }
.op-pille-over { font-family: var(--f-etiket); font-size: 10.5px; font-weight: 600; color: var(--c-danger); }

.op-hint { color: var(--c-text-dim); font-size: 13px; margin: 0 0 12px; }
.op-resume { font-size: 14px; color: var(--c-text); font-weight: 600; }
.op-tom { margin: 24px 0; font-size: 15px; }
.op-tom .lille { font-size: 13px; }
.op-gruppe { margin-bottom: 22px; }
.op-gruppe-hoved { display: flex; align-items: center; gap: 10px; margin: 0 0 8px 4px; }
.op-gruppe-hoved h3 { font-size: 16px; margin: 0; }
.op-gruppe-hoved h3 a { color: inherit; text-decoration: none; }
.op-gruppe-hoved h3 a:hover { color: var(--c-primary); }
.op-gruppe-tal { font-family: var(--f-etiket); font-size: 12px; font-weight: 600; color: var(--c-text-dim); }
.op-afsnit { margin-bottom: 22px; }
.op-afsnit h3 { font-size: 16px; margin: 0 0 8px 4px; }
.op-afsnit-tom { margin: 0 0 0 4px; }

/* Listen: et kort med én række pr. opgave — fold, afkrydsning, hoved, hale. */
.op-liste {
  background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius);
  box-shadow: var(--skygge); overflow: hidden;
}
.op-raekke { display: flex; align-items: flex-start; gap: 8px; padding: 11px 14px 11px 10px; border-top: 1px solid var(--c-border-blod); }
.op-liste > .op-raekke:first-child { border-top: 0; }
.op-raekke.udfoert .op-navn { text-decoration: line-through; color: var(--c-text-dim); }
.op-fold {
  flex: none; width: 18px; height: 22px; margin-top: 1px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12px; color: var(--c-text-dim); cursor: pointer; border-radius: 4px; text-align: center;
}
.op-fold:hover { background: var(--c-surface-alt); color: var(--c-text); }
span.op-fold { cursor: default; }
.op-check {
  flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1.5px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text-dim); font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.op-check:hover { border-color: var(--c-positive); color: var(--c-positive); }
.op-raekke.udfoert .op-check, .op-del.udfoert .op-check, .op-kort.udfoert .op-check { background: #e4efe9; border-color: var(--c-positive); color: var(--c-positive); }
.op-check.stille { cursor: default; }
.op-hoved { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.op-titel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; font-size: 14.5px; line-height: 1.4; }
.op-navn { overflow-wrap: anywhere; }
.op-meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--c-text-dim); margin-top: 2px; }
.op-meta a { color: var(--c-primary); text-decoration: none; }
.op-meta a:hover { text-decoration: underline; }
.op-meta em { font-style: italic; }
.op-sep { color: var(--c-border); }
.op-forael { color: var(--c-accent); }
.op-hale { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; margin-top: 1px; }
.op-hale .knap-tekst-lille { font-size: 12px; padding: 2px 6px; }
.op-frist { color: var(--c-text-dim); font-variant-numeric: tabular-nums; }
.op-frist.over { color: var(--c-danger); font-weight: 600; }
.op-raekke.over .op-navn { color: var(--c-danger); }
.op-ikon {
  font: inherit; font-size: 12px; padding: 2px 6px; border-radius: 6px; border: 0; background: none;
  color: var(--c-text-dim); cursor: pointer; text-decoration: none; line-height: 1.4;
}
.op-ikon:hover { background: var(--c-surface-alt); color: var(--c-primary); }
.op-klokke { flex: none; width: 48px; font-family: var(--f-etiket); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Chips på titellinjen: prioritet, fremdrift, Auto, Fri opgave. */
.op-chip {
  display: inline-block; font-family: var(--f-etiket); font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; line-height: 1.5; white-space: nowrap;
  background: var(--c-surface-alt); color: var(--c-text-dim);
}
.op-prio-hoej { background: #f7e7e3; color: var(--c-danger); }
.op-prio-mellem { background: var(--c-accent-soft); color: var(--c-accent); }
.op-prio-lav { background: var(--c-surface-alt); color: var(--c-text-dim); }
.op-fremdrift { font-variant-numeric: tabular-nums; }
.op-fremdrift.pos { background: #e4efe9; color: var(--c-positive); }
.op-auto { background: var(--c-primary-soft); color: var(--c-primary); }
.op-fri { border: 1px dashed var(--c-border); background: transparent; }
.op-projekt { text-transform: none; letter-spacing: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Stadie-pillen: en usynlig <select> ligger over pillen, så den kan skiftes med ét klik. */
.op-stadie {
  position: relative; display: inline-flex; align-items: center; font-family: var(--f-etiket); font-size: 10.5px;
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: var(--c-surface-alt); color: var(--c-text-dim); line-height: 1.5;
}
.op-stadie select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; margin: 0; }
.op-stadie:has(select):hover { outline: 1px solid var(--c-border); }
.op-stadie-i_gang { background: var(--c-accent-soft); color: var(--c-accent); }
.op-stadie-afventer { background: #e6edf3; color: #4f6f8f; }
.op-stadie-udfoert { background: #e4efe9; color: var(--c-positive); }

/* Checklisten under en forælder. */
.op-delopgaver { padding: 2px 14px 10px 56px; background: var(--c-bg); border-top: 1px solid var(--c-border-blod); }
.op-del { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.op-del .op-check { width: 18px; height: 18px; font-size: 11px; margin: 0; }
.op-del-titel { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.op-del.udfoert .op-del-titel { text-decoration: line-through; color: var(--c-text-dim); }
.op-del-hvem { font-size: 12px; color: var(--c-text-dim); }
.op-del .op-frist { font-size: 12px; }
.op-delny { margin-top: 4px; }
.op-delny input { font-size: 13.5px; padding: 7px 10px; background: var(--c-surface); }

/* Boardet. */
.op-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.op-kolonne { background: var(--c-surface-alt); border-radius: var(--radius); padding: 10px; min-height: 240px; border: 2px solid transparent; }
.op-kolonne.op-maal { border-color: var(--c-primary); background: var(--c-primary-soft); }
.op-kolonne-hoved { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 2px 4px 10px; }
.op-kolonne-hoved h3 { font-family: var(--f-etiket); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.op-prik { width: 9px; height: 9px; border-radius: 50%; background: var(--c-text-dim); }
.op-kolonne-i_gang .op-prik { background: var(--c-accent); }
.op-kolonne-afventer .op-prik { background: #4f6f8f; }
.op-kolonne-udfoert .op-prik { background: var(--c-positive); }
.op-kolonne-tal { font-family: var(--f-etiket); font-size: 11px; font-weight: 600; color: var(--c-text-dim); }
.op-kolonne-note { flex-basis: 100%; font-size: 11px; color: var(--c-text-dim); }
.op-kolonne-krop { display: flex; flex-direction: column; gap: 8px; }
.op-kolonne-tom { margin: 10px 4px; font-size: 13px; }
.op-kolonne-ny, .op-flere { align-self: flex-start; }
.op-kort {
  background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius-sm);
  padding: 10px 12px; cursor: grab; display: flex; flex-direction: column; gap: 6px; user-select: none;
}
.op-kort:hover { border-color: var(--c-border); }
.op-kort.traekkes { opacity: .35; }
.op-kort.udfoert .op-kort-titel { text-decoration: line-through; color: var(--c-text-dim); }
.op-spoegelse { position: fixed; z-index: 70; pointer-events: none; box-shadow: var(--skygge-pop); transform: rotate(1.5deg); margin: 0; }
.op-kort-titel { font-weight: 600; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.op-kort-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.op-kort-fod { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--c-text-dim); }
.op-kort-art { font-size: 12px; }
.op-kort-fod .op-frist { font-size: 12px; }
.op-avatar {
  margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-etiket); font-size: 10px; font-weight: 700; background: var(--c-primary-soft); color: var(--c-primary);
}
.op-avatar.tom { background: var(--c-surface-alt); color: var(--c-text-dim); }
.op-kort .op-delopgaver { margin: 2px -12px -10px; padding: 4px 12px 8px 12px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.op-kort .op-del { font-size: 12.5px; padding: 3px 0; }
.op-kort .op-delny input { font-size: 12.5px; padding: 5px 8px; }

/* Dialogen: ansvarlige som afkrydsningsliste, note som tekstfelt. */
.op-dialog { width: min(640px, 94vw); }
.op-dialog .op-bred { grid-column: 1 / -1; }
.op-dialog .op-kobling .felter { margin-top: 6px; }
.op-dialog .op-kobling small { display: block; margin-top: 6px; }
.op-felt-etiket { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.op-personer {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 10px; max-height: 180px; overflow-y: auto;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); padding: 8px 10px;
}
.op-afkryds { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: 13.5px; cursor: pointer; }
.op-afkryds input { width: auto; margin: 0; }
.op-dialog textarea {
  font: inherit; font-size: 15px; padding: 11px 13px; width: 100%; resize: vertical;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); color: inherit;
}
.op-dialog textarea:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; border-color: transparent; }
.op-dialog .dialog-knapper .farlig { margin-right: auto; }
.op-forael-note { margin: -8px 0 0; }

@media (max-width: 900px) {
  .op-shell { grid-template-columns: 1fr; gap: 16px; }
  .op-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .op-side-gruppe { flex-basis: 100%; margin: 8px 0 2px 6px; }
  .op-side-punkt { width: auto; }
  .op-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-raekke { flex-wrap: wrap; }
  .op-hale { margin-left: 56px; }
}