/* =============================================================
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;
/* Accenten som TEKST: #a9825f er en flade- og kantfarve (3,0:1 på lys baggrund) —
skal den læses som ord eller tal, bruges den mørke udgave (5,3:1 på --c-accent-soft). */
--c-accent-text: #7a5a3a;
--c-accent-soft: #f6efe8;
--c-bg: #f7f3f0;
--c-surface: #ffffff;
--c-surface-alt: #efe9e5;
/* Rammen om appen — topbaren. 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-hover-bleg: rgba(120, 80, 50, .10); /* diskret beige cirkel bag ikon-knapper ved hover/fokus */
--c-border: rgba(31, 29, 27, .12);
--c-border-blod: rgba(31, 29, 27, .07);
--c-text: #1f1d1b;
/* 7,8:1 mod hvid og 7,0:1 mod sidens beige (#f7f3f0), 6,3:1 på de dybeste flader: små tal og etiketter skal kunne læses uden at skele. */
--c-text-dim: #55524f;
--c-positive: #2f7d5b; /* 5,0:1 på hvid — tekst og prikker på lys baggrund */
--c-positive-soft: #e4efe9;
--c-positive-moerk: #245b4f; /* grøn tekst PÅ den lyse grønne: 6,6:1 */
/* 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: #2f6e60; /* tal og kanter — midt i gradienten; 5,2:1 mod hvid */
--c-ferie-moerk: #245b4f; /* tekst på den lyse grønne (--c-ferie-1): 6,2:1 */
/* 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: #8a5f12; /* 5,6:1 på hvid — var #a9741d (4,0:1), for lys som tekst */
--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;
/* Hjørner: --r-felt på felter og små bokse, --radius på kort og rammer, --r-kort på
forsidens kort, --r-knap på piller og knapper. --radius-sm er det gamle navn for --r-felt. */
--r-felt: 8px;
--r-kort: 14px;
--r-knap: 999px;
--radius: 12px;
--radius-sm: var(--r-felt);
/* Afstandsskala (4 px-trin). Bruges på de store afstande mellem afsnit og sidehoveder. */
--s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
/* Statusfarver, der før stod som tal flere steder: rødlig "se her", grøn "godkendt/ok", rustrød "ophævet". */
--c-danger-soft: #f7e7e3;
--c-ok-soft: #e7efe6;
--c-ok-text: #3a5a3a;
--c-ophaevet-soft: #f3e0d8;
--c-ophaevet-text: #8a4527;
/* Mindste skriftstørrelser: etiketter i versaler 12 px, almindelig tekst 13 px. Skriv aldrig mindre. */
--t-etiket: 12px;
--t-lille: 13px;
--f-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
--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);
/* Kortkanten på forsiden: en varm, dækkende grå i stedet for den gennemsigtige
--c-border, så kanten ser ens ud, uanset om kortet står på beige eller hvidt. */
--c-kort-kant: #e6ded7;
}
/* 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%; }
/* Pladsen til rullebjælken er der ALTID — ellers bliver siden 15 px smallere, i
samme øjeblik en side får en rullebjælke, og topbaren knækker i to linjer. */
html { scrollbar-gutter: stable; }
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; }
/* Fokusring ét sted: alt, der kan nås med tastaturet, viser det samme — 2 px i
husets farve med luft til kanten. Kun ved tastatur (:focus-visible), ikke ved klik. */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
/* Indholdet selv får fokus fra spring-linket; der skal ingen ring om hele siden. */
main:focus-visible { outline: none; }
/* "Spring til indhold": første element, man kan tabbe til. Usynligt, til det
får fokus — så lægger det sig øverst til venstre som en knap. */
.spring {
position: absolute; left: 16px; top: -100px; z-index: 100;
padding: 10px 16px; border-radius: var(--radius-sm);
background: var(--c-primary); color: #fff; font-weight: 600; text-decoration: none;
box-shadow: var(--skygge-pop);
}
.spring:focus-visible { top: 12px; outline-color: var(--c-text); }
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 ---------- */
/* ÉN flex-række, der ombrydes: logo · menu · bruger. Menuen får den plads, der
er tilbage (flex: 1 1 auto) og ombryder sine egne punkter, før rækken gør
det — så "stabler" topbaren kun, når der reelt ikke er plads, og aldrig
fordi en rullebjælke kom og gik (se scrollbar-gutter på html). Højden er
den samme på alle sider: indholdet er det samme på alle sider. */
.topbar {
display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap;
min-height: 64px; padding: 10px 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; flex: none; min-height: 44px; border-radius: var(--radius-sm); }
.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: 2px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
/* Menupunkter i almindelig skrift (ikke versaler) — 14 px, vægt 500, og
mindst 40 px høje at ramme. Den aktive side markeres med både farve OG en
streg under teksten, så den kan ses uden at kunne skelne farver. */
.nav-pill {
display: inline-flex; align-items: center; min-height: 40px;
font-family: var(--f-tekst); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
text-decoration: none; color: var(--c-text-dim); padding: 8px 12px; border-radius: var(--radius-sm);
white-space: nowrap;
}
.nav-pill:hover { color: var(--c-text); background: var(--c-surface-alt); }
.nav-pill.aktiv, .nav-pill[aria-current="page"] {
color: var(--c-primary); background: var(--c-primary-soft);
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
/* Modul under opbygning (056): kun administratorer ser punktet — en lille prik efter navnet siger, at andre ikke gør. */
.nav-opbygning::after {
content: ''; width: 6px; height: 6px; border-radius: 50%; margin-left: 6px; flex: none;
background: var(--c-warning);
}
/* Brugermenuen: én knap med initialer, navn, rolle og pil — og en liste under. */
.soeg-knap + .bruger { margin-left: 0; }
.bruger { margin-left: auto; position: relative; flex: none; }
.bruger-knap {
display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
font: inherit; font-size: 14px; font-weight: 600; color: var(--c-text);
background: none; border: 0; padding: 4px 8px 4px 4px; border-radius: var(--r-knap); cursor: pointer;
}
.bruger-knap:hover, .bruger-knap[aria-expanded="true"] { background: var(--c-surface-alt); }
.bruger-initialer {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff;
font-family: var(--f-etiket); font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.bruger-navn { white-space: nowrap; }
.bruger-pil { flex: none; color: var(--c-text-dim); transition: transform .12s; }
.bruger-knap[aria-expanded="true"] .bruger-pil { transform: rotate(180deg); }
.rolle {
font-family: var(--f-etiket); font-size: var(--t-etiket); 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); }
/* Én menuform til brugermenuen og "…"-menuen på en række (menu.js). */
.bruger-menu, .pop-menu {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px;
display: flex; flex-direction: column; padding: 6px;
background: var(--c-surface); border: 1px solid var(--c-border-blod);
border-radius: var(--radius-sm); box-shadow: var(--skygge-pop);
}
.bruger-menu [role="menuitem"], .pop-menu [role="menuitem"] {
display: flex; align-items: center; min-height: 40px; width: 100%; padding: 8px 12px;
font: inherit; font-size: 14px; color: var(--c-text); text-decoration: none; text-align: left;
background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.bruger-menu [role="menuitem"]:hover, .bruger-menu [role="menuitem"]:focus-visible,
.pop-menu [role="menuitem"]:hover, .pop-menu [role="menuitem"]:focus-visible { background: var(--c-accent-soft); color: var(--c-primary-dark); }
/* "…" på en tabelrække: en rund knap på 32 px, menuen under den til højre. */
.handlingsmenu { position: relative; display: inline-block; }
.menu-knap {
display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
border: 1px solid transparent; border-radius: 50%; background: none; color: var(--c-text-dim); cursor: pointer; padding: 0;
}
.menu-knap:hover, .menu-knap[aria-expanded="true"] { background: var(--c-surface-alt); color: var(--c-text); border-color: var(--c-border-blod); }
.pop-menu { min-width: 160px; }
/* Menuen må ikke klippes af tabelrammen: rammen ruller kun, når den skal. */
.tabel .handling .pop-menu { text-align: left; }
/* Den side, man står på: samme markering som i hovedmenuen — farve og understregning. */
.bruger-menu [role="menuitem"][aria-current="page"] { color: var(--c-primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bruger-menu-hoved {
display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 10px; margin-bottom: 4px;
border-bottom: 1px solid var(--c-border-blod); font-size: 13.5px; line-height: 1.35;
}
.bruger-menu-hoved span { font-size: var(--t-lille); color: var(--c-text-dim); }
.bruger-menu-skille { width: auto; margin: 6px 4px; border: 0; border-top: 1px solid var(--c-border-blod); }
/* .knap-tekst er tekstknappen i normal størrelse (samme sprog som .knap-tekst-lille, se "Knapper" nedenfor). */
.knap-tekst {
font: inherit; font-size: 13.5px; background: none; border: 0; color: var(--c-primary);
cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); text-decoration: none;
}
/* Knap med en pil (Forrige/Næste): ikon og tekst på én linje; pilen arver farven. */
.knap-pil { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.knap-pil svg { flex: none; }
.view { flex: 1; width: min(1160px, 92%); margin: 0 auto; padding: 38px 0 0; }
/* ---------- Links (U2) ----------
Et link i indholdet er tekstfarve med en tynd terrakotta-streg under — aldrig browserblåt. Reglen er
bevidst svag (element-niveau), så enhver klasse (.knap-*, .raekke-link, .nav-pill …) vinder over den.
Gælder også i dialoger, der hænger i main. */
main a { color: var(--c-text); text-decoration: underline; text-decoration-color: rgba(133, 82, 59, .35); text-underline-offset: 3px; text-decoration-thickness: 1px; }
main a:hover { color: var(--c-primary); text-decoration-color: var(--c-primary); }
main a:visited { color: var(--c-text); }
.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: var(--s-5); flex-wrap: wrap; }
.side-hoved h1, .side-hoved h2 { margin: 0; }
.side-hoved > .knap, .side-hoved > .knap-sekundaer { margin-left: auto; }
/* Uden knap: første link efter overskriften skubbes til højre. */
.side-hoved > h2 + .knap-tekst-lille { margin-left: auto; }
/* ---------- Knapper: ÉT sprog, tre niveauer (U1) ----------
Primær .knap fyldt terrakotta. Højst ÉN pr. side, øverst til højre i .side-hoved (og dialogens gem-knap).
Sekundær .knap-sekundaer kant, aldrig understreget. Også som . .knap-lille er den i tabelstørrelse.
Tekst .knap-tekst-lille / .knap-tekst terrakotta tekst, understregning KUN ved hover/fokus. Også som .
Farlig .knap-tekst-lille.farlig (rød tekst) og .knap.knap-farlig (rød fyldt, kun i bekræftelsesdialoger).
Uanset element ( eller ) ser de ens ud — derfor text-decoration: none og inline-flex på alle. */
.knap, .knap-sekundaer {
font-family: var(--f-etiket); font-size: 12.5px; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
padding: 12px 20px; min-height: 44px; border-radius: var(--r-knap); border: 0; cursor: pointer;
background: var(--c-primary); color: #fff; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
}
.knap:hover:not(:disabled) { background: var(--c-primary-dark); color: #fff; }
.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); text-decoration: none; }
.knap-tekst-lille {
font: inherit; font-size: 13px; background: none; border: 0; padding: 4px 7px; min-height: 28px;
border-radius: 6px; color: var(--c-primary); cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
}
.knap-tekst-lille:hover, .knap-tekst-lille:focus-visible, .knap-tekst:hover, .knap-tekst:focus-visible {
text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: currentColor;
}
.knap-tekst-lille:disabled, .knap-tekst:disabled { opacity: .5; cursor: default; text-decoration: none; }
.knap-tekst-lille.farlig, .knap-tekst.farlig { color: var(--c-danger); }
.knap-tekst-lille[aria-pressed="true"], .knap-tekst[aria-pressed="true"] { font-weight: 600; }
.tilbage {
display: inline-flex; align-items: center; min-height: 24px; 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 {
/* position: relative, så absolut placerede børn (.sr-only i en kolonneoverskrift)
hører til rammen og rulles med den — ellers lander de i sidens koordinater
og giver hele siden en vandret rullebjælke på en telefon. */
position: relative; background: var(--c-surface);
border: 1px solid var(--c-border-blod); border-radius: var(--radius); box-shadow: var(--skygge);
/* Rammen ruller KUN, når tabellen er bredere end den (klassen sættes i app.js,
rullerammerMedTastatur). En ramme med overflow er sin egen rulleflade, og så
ville det klæbende hoved klæbe til rammen (som ikke ruller lodret) i stedet
for til siden — og en "…"-menu på nederste række blive klippet af. */
overflow: visible;
}
.tabelramme.kan-rulle { overflow-x: auto; }
/* Uden overflow klipper rammen ikke længere hjørnerne: cellerne i hjørnerne rundes selv. */
.tabelramme:not(.kan-rulle) .tabel > thead > tr:first-child > th:first-child { border-top-left-radius: var(--radius); }
.tabelramme:not(.kan-rulle) .tabel > thead > tr:first-child > th:last-child { border-top-right-radius: var(--radius); }
.tabelramme:not(.kan-rulle) .tabel > :last-child > tr:last-child > :first-child { border-bottom-left-radius: var(--radius); }
.tabelramme:not(.kan-rulle) .tabel > :last-child > tr:last-child > :last-child { border-bottom-right-radius: var(--radius); }
.tabel { border-collapse: collapse; width: 100%; min-width: 660px; }
.tabel th {
text-align: left; font-family: var(--f-etiket); font-size: var(--t-etiket); 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;
}
/* Klæbende kolonneoverskrifter: siden ruller, hovedet bliver stående øverst. Baggrunden
er dækkende og ligger over rækkerne (z-index), så tallene glider ind under. Med
border-collapse forsvinder kanten under et sticky th i Chrome — stregen tegnes derfor
som en skygge. Virker kun, når rammen ikke selv ruller (se .tabelramme). */
.tabelramme > .tabel > thead > tr > th { position: sticky; top: 0; z-index: 2; background: var(--c-surface); box-shadow: inset 0 -1px 0 var(--c-border); }
.tabelramme.kan-rulle > .tabel > thead > tr > th { position: static; }
.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; }
/* Tal står med lige brede cifre overalt, så kolonner af tal flugter — også uden for tabeller. */
.num { font-variant-numeric: tabular-nums; }
.tabel .num { text-align: right; 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); }
/* Rækkens navn er et rigtigt link — det, tastatur og skærmlæser bruger. Det
ligner teksten omkring sig; rækken selv viser med hover, at den kan klikkes. */
.raekke-link { color: inherit; text-decoration: none; display: inline-block; padding: 3px 0; margin: -3px 0; } /* 27 px at ramme */
.raekke-link:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
/* Fold-knappen i en grupperække: en rigtig om koden (eller teksten),
så rækken kan foldes ud med tastaturet. Mindst 24 px høj at ramme. */
.fold-knap {
display: inline-flex; align-items: center; gap: 6px; min-height: 24px;
font: inherit; color: inherit; background: none; border: 0; padding: 2px 4px; margin: -2px -4px;
border-radius: 6px; cursor: pointer; text-align: left;
}
.fold-knap:hover { background: var(--c-surface-alt); }
.fold-knap::before { content: '▸'; font-size: var(--t-lille); color: var(--c-text-dim); width: 10px; flex: none; }
.fold-knap[aria-expanded="true"]::before { content: '▾'; }
.fold-knap.fold-tekst { font-weight: inherit; }
/* Kode uden fold-knap: samme luft foran som pilen fylder, saa koderne flugter. */
.fold-plads { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; margin: -2px -4px; }
.fold-plads::before { content: ''; width: 10px; flex: none; }
/* Sorterbar kolonneoverskrift: knappen arver overskriftens typografi. */
.sorter { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 4px 0; margin: -4px 0; cursor: pointer; min-height: 24px; }
.sorter:hover { color: var(--c-primary); }
.kode {
font-family: var(--f-mono); font-size: var(--t-lille);
color: var(--c-text-dim); background: var(--c-bg);
border: 1px solid var(--c-border-blod); border-radius: 5px; padding: 1px 6px;
white-space: nowrap; /* en kode ("ATS 1", "19050") brydes aldrig midt i pillen */
}
.maerke {
font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600; letter-spacing: .07em;
text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-knap); white-space: nowrap;
background: var(--c-surface-alt); color: var(--c-text-dim);
}
.maerke-aktiv { background: var(--c-positive-soft); color: var(--c-positive-moerk); }
/* 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: var(--c-danger-soft); color: var(--c-danger); }
.maerke-faelles { background: var(--c-accent-soft); color: var(--c-accent-text); }
/* "Se her" i en tabelcelle — .advarsel er et helt banner og for stort til det. */
.maerke-obs { background: var(--c-danger-soft); 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; }
/* Ingen opacity på pillerne: den dæmpede tekstfarve er allerede dæmpningen, og
med opacity oveni faldt kontrasten til 2,5:1. */
.tabel tr.inaktiv td .kode, .tabel tr.inaktiv td .maerke { color: var(--c-text-dim); }
/* 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 ---------- */
/* Nøgletal (U4): flex-wrap frem for grid, så rækkerne ALTID er fulde — et grid med auto-fit efterlod grå
fyldfelter, når antallet ikke gik op (5 tal på 4 spor). Felterne vokser og deler den sidste række. */
.fakta {
display: flex; flex-wrap: wrap;
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 { flex: 1 1 190px; min-width: 0; background: var(--c-surface); padding: 14px 18px; }
.fakta dt {
font-family: var(--f-etiket); font-size: var(--t-etiket); 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: var(--s-10); }
/* Underoverskrift inde i et afsnit (Kontrol mod BC): to lister under én h2. */
.under-hoved { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 6px; font-family: var(--f-tekst); font-size: 15px; font-weight: 600; }
.under-hoved .total { font-weight: 400; }
/* ---------- Ø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, .tabel tr.gruppe.uden-tal td .staerk, .tabel tr.gruppe.uden-tal td .kode { color: var(--c-text-dim); font-weight: 400; }
.tabel tr.gruppe.uden-tal:hover td, .tabel tr.gruppe.uden-tal:hover td .staerk, .tabel tr.gruppe.uden-tal:hover td .kode { color: var(--c-text); }
.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: var(--t-etiket); letter-spacing: .06em; text-transform: uppercase;
color: var(--c-accent-text); 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: var(--t-etiket); font-weight: 600;
letter-spacing: .09em; text-transform: uppercase; color: var(--c-text-dim);
}
.kilde-tekst { margin: 4px 0 0; }
.sum {
font-family: var(--f-mono); font-size: var(--t-lille); 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: var(--t-etiket); 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; }
/* Dato og forfatter til venstre, Ret og Slet SAMLET til højre (U17) — ikke én knap i midten og én yderst. */
.v-kilde .knap-tekst-lille { margin-left: auto; }
.v-kilde .v-handlinger { margin-left: auto; display: inline-flex; gap: 6px; }
.v-kilde .v-handlinger .knap-tekst-lille { margin-left: 0; }
.v-note { margin: 12px 0 0; font-size: 13.5px; color: var(--c-text-dim); }
/* Filer på et journalnotat */
.note-filer { margin: 12px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fil-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.versioner .fil-liste li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 2px 0; background: none; border: 0; border-radius: 0; font-size: var(--t-lille); }
.fil-liste a { overflow-wrap: anywhere; color: var(--c-primary); }
/* ---------- 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); }
/* En lang adresse i `kode` må brydes — ellers skubber den siden ud til siden på en telefon. */
.noter code { overflow-wrap: anywhere; }
.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: var(--t-lille); 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: var(--t-lille); }
@media (max-width: 900px) { .to-spalter { grid-template-columns: 1fr; gap: 30px; } }
.noter { max-width: none; }
.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: var(--t-lille); }
.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: var(--t-lille); }
.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%; }
.login-hjaelp { margin: 14px 0 0; text-align: center; }
.fejl {
margin: 0; padding: 10px 13px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500;
background: var(--c-danger-soft); 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: var(--t-lille); line-height: 1.4; }
.dialog .afkryds-gruppe { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.dialog .afkryds-gruppe legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.dialog .afkryds-gruppe .afkryds { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 36px; font-weight: 400; }
.dialog .afkryds-gruppe input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); }
.dialog .afkryds-gruppe small { flex-basis: 100%; }
.dialog-knapper { display: flex; justify-content: flex-end; gap: 10px; }
.dialog-knapper [data-prime-alle] { margin-right: auto; }
@media (max-width: 620px) {
.topbar { padding: 8px 16px; gap: 8px 12px; }
.brand-navn { font-size: 13px; letter-spacing: .16em; }
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: var(--t-lille); font-variant-numeric: tabular-nums;
color: var(--c-text-dim); min-width: 34px;
}
.maaler-uden { font-size: var(--t-lille); 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); }
/* Tom tilstand (tom.js): ikon, én sætning, én knap — midt på fladen. */
.tom-tilstand {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
padding: 44px 20px; background: var(--c-surface); border: 1px dashed var(--c-border);
border-radius: var(--radius);
}
.tom-tilstand.tt-lille { padding: 24px 16px; gap: 4px; }
.tt-ikon { color: var(--c-accent); margin-bottom: 8px; }
.tt-titel { margin: 0; font-weight: 600; font-size: 15.5px; }
.tt-tekst { margin: 0; color: var(--c-text-dim); font-size: 14px; }
.tom-tilstand .knap { margin-top: 14px; }
/* 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; }
/* "Læs mere" under en kort ingress: resten af forklaringen, foldet sammen. Summary
ligner et tekstlink; teksten indeni er en almindelig ingress. */
.laes-mere { margin: -16px 0 22px; }
/* En fold, der staar som sit eget afsnit (fx fakturaerne nederst paa en part). */
.laes-mere.afsnit { margin: var(--s-8) 0 0; }
.laes-mere.afsnit > .tabelramme { margin-top: var(--s-3); }
.laes-mere > summary {
display: inline-flex; align-items: center; gap: 6px; min-height: 28px; cursor: pointer; list-style: none;
font-size: 13.5px; font-weight: 600; color: var(--c-primary); border-radius: 6px;
}
.laes-mere > summary::-webkit-details-marker { display: none; }
.laes-mere > summary::after {
content: ''; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
transform: translateY(-2px) rotate(45deg); transition: transform .12s;
}
.laes-mere[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.laes-mere > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.laes-mere > .ingress { margin: 8px 0 0; }
/* 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, .henvisning > .knap-tekst-lille { 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: var(--t-etiket); font-weight: 400; letter-spacing: 0;
color: var(--c-text-dim); text-transform: none; margin-top: 2px;
}
/* Kun for skærmlæsere: teksten findes, men fylder ingenting på skærmen.
Til overskrifter på handlingskolonner og etiketter, der ville være støj at se. */
.sr-only {
position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* `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 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: var(--t-lille); 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: var(--t-etiket); 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: var(--t-etiket); color: var(--c-text-dim);
font-family: var(--f-etiket); letter-spacing: .05em; text-transform: uppercase;
}
.kv-budget { font-size: var(--t-lille); color: var(--c-text-dim); white-space: nowrap; }
.kode-gruppe h3 .kode { font-size: var(--t-lille); }
/* Skift mellem leverandør- og kontovinklen. */
.skift { margin-left: auto; display: inline-flex; gap: 2px; background: var(--c-bg);
border-radius: var(--r-knap); padding: 2px; }
.skift a { padding: 4px 12px; border-radius: var(--r-knap); font-size: var(--t-lille); 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: var(--t-etiket); 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. */
/* Indstillinger (U16): to faner — Projekter / Systemværdier — med panelet som en flade under fanerne. */
.faner-indstillinger { margin-top: 6px; }
.faner-indstillinger .fane { font-size: var(--t-etiket); letter-spacing: .08em; text-transform: uppercase; min-height: 44px; }
.fane-panel { background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius); padding: 22px 24px 8px; margin-top: 0; }
.fane-panel > .side-hoved { margin-top: 0; }
@media (max-width: 620px) { .fane-panel { padding: 16px 14px 4px; } }
.faner-regler { margin-top: 10px; }
.faner-med-panel .faner-regler { margin-top: 0; }
.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: var(--t-lille); color: var(--c-text-dim); background: var(--c-surface-alt);
border-radius: var(--r-knap); 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; position: relative; }
.prime-link::after { content: ''; position: absolute; inset: -4px 0; } /* målfladen op på 24 px uden at flytte teksten */
.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: var(--r-knap);
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: var(--r-knap); 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: var(--t-lille); 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 .indstilling { display: grid; gap: 6px; }
.indstillinger label { display: block; font-weight: 600; font-size: 13.5px; }
.indstillinger small { display: block; font-weight: 400; color: var(--c-text-dim); font-size: var(--t-lille); line-height: 1.5; }
/* "Mere" under et felts hjælp: mindre end sidens "Læs mere", og hele teksten står indeni. */
.indstillinger .laes-mere { margin: -2px 0 0; }
.laes-mere-lille > summary { font-size: var(--t-lille); min-height: 24px; }
.laes-mere-lille > small { margin-top: 4px; }
.indstillinger select { width: 100%; max-width: 340px; }
.indstillinger input, .indstillinger textarea { width: 100%; font-family: var(--f-mono); font-size: 13px; }
.indstillinger textarea { resize: vertical; min-height: 92px; }
.kvittering { color: var(--c-text-dim); font-size: 13.5px; align-self: center; margin-right: auto; }
.vejledning { color: var(--c-text-dim); font-size: 14px; line-height: 1.7; padding-left: 20px; }
.vejledning code, .tom code {
font-family: var(--f-mono); font-size: var(--t-lille);
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: var(--t-etiket); 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: var(--c-ok-soft); color: var(--c-ok-text); }
.maerke-udkast { background: var(--c-surface-alt); }
.maerke-afsluttet { background: var(--c-surface-alt); color: var(--c-text-dim); }
.maerke-ophaevet { background: var(--c-ophaevet-soft); color: var(--c-ophaevet-text); }
.maerke-as-godkendt { background: var(--c-ok-soft); color: var(--c-ok-text); }
.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: var(--c-ok-soft); color: var(--c-ok-text); }
.maerke-afvig { background: var(--c-ophaevet-soft); color: var(--c-ophaevet-text); }
.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: var(--t-lille); }
.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 td.weekend, .tabel.skema th.weekend { background: var(--c-bg); }
.tabel.skema th.i-dag { color: var(--c-primary); font-weight: 700; }
/* I dag (kun når den viste uge er den aktuelle — datoen findes ellers ikke blandt ugens dage): samme accentramme som tallene på forsiden. */
.tabel.skema td.i-dag, .tabel.skema th.i-dag { background: var(--c-primary-soft); }
.tabel.skema th.i-dag { box-shadow: inset 0 2px 0 var(--c-accent); }
.tabel.skema tfoot th, .tabel.skema tfoot td { font-variant-numeric: tabular-nums; font-weight: 600; border-top: 2px solid var(--c-border); border-bottom: 0; }
.tabel.skema .skema-ny td { background: var(--c-bg); }
/* Projekt- og aktivitetsvalget skal kunne læses helt: feltet er mindst 220 px og
må ikke klippe teksten. Tabellen er auto-layout, så kolonnen giver plads. */
.tabel.skema .skema-ny select { font-size: 14px; padding: 8px 10px; text-overflow: ellipsis; }
.tabel.skema .skema-ny td { white-space: nowrap; }
/* Projekt og aktivitet har FAST bredde (260 + 200 px), og dagene er smalle (~56 px) — så er man–fre og
"I alt" altid på skærmen fra 1024 px og op. Lange navne klippes med … (hele navnet står i title). */
.tabel.skema { table-layout: fixed; width: 100%; }
.tabel.skema th, .tabel.skema td { padding-left: 8px; padding-right: 8px; }
.tabel.skema .skema-navn, .tabel.skema td:first-child { width: 260px; max-width: 260px; }
.tabel.skema th:nth-child(2), .tabel.skema td:nth-child(2) { width: 200px; max-width: 200px; }
.tabel.skema td:first-child, .tabel.skema td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabel.skema th.skema-dag, .tabel.skema td.num { width: 56px; }
.tabel.skema th:last-child, .tabel.skema td:last-child { width: 72px; }
.tabel.skema .skema-ny select { min-width: 0; width: 100%; max-width: 100%; }
.skema-celle {
width: 100%; max-width: 64px; box-sizing: border-box; padding: 5px 6px; 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:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 0; }
.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: var(--t-etiket);
color: var(--c-text-dim); font-variant-numeric: tabular-nums;
}
.kal-hjoerne { font-family: var(--f-etiket); font-size: var(--t-etiket); 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: var(--t-etiket); 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: var(--t-etiket); 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: var(--t-lille); 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: var(--t-etiket); color: var(--c-text-dim);
font-variant-numeric: tabular-nums; }
.soejle-navn { font-family: var(--f-etiket); font-size: var(--t-etiket); 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: var(--t-lille); color: var(--c-text-dim); }
/* Kontakter: søgefelt og kategori deler linjen; felterne har en fast mindstebredde. */
.filtre-parter label { flex: 1 1 200px; max-width: 360px; }
.filtre-parter .filter-knapper { margin-left: auto; }
/* Valg som tekstlink med pil ("Alle kategorier ▾") — samme udtryk som kildevælgeren på forsidens nyheder.
Åbner en aabnValgMenu med antal. Bruges, hvor en række filterknapper ville fylde for meget. */
.valg-link { border: 0; background: none; padding: 0 2px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
color: var(--c-primary); min-height: 44px; white-space: nowrap; }
.valg-link:hover, .valg-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.filtre-parter .valg-link { align-self: flex-end; min-height: 40px; }
/* "Kolonner uden indhold er skjult: …" — en stille note under tabellen, ikke en advarsel. */
.skjulte-kolonner { font-size: var(--t-lille); }
/* --- skabelonkataloget --------------------------------------------------- */
.soeg { display: block; margin: 0 0 22px; }
.soeg input { width: 100%; max-width: 420px; }
/* Skabeloner som tabel (U6): navn med beskrivelse under, filtype som kode, handlinger til højre. */
.tabel.skabeloner tr.inaktiv td { opacity: .6; }
.tabel.skabeloner .sk-navn-celle { max-width: 420px; white-space: normal; }
.tabel.skabeloner .sk-navn { font-weight: 600; }
.tabel.skabeloner .sk-navn-celle .kode, .tabel.skabeloner .sk-navn-celle .maerke { margin-left: 6px; vertical-align: middle; }
.tabel.skabeloner .sk-handlinger { white-space: nowrap; text-align: right; }
.tabel.skabeloner .sk-handlinger .knap-tekst-lille + .knap-tekst-lille { margin-left: 2px; }
.tabel.skabeloner td.tid { white-space: nowrap; }
/* Kategorifilter (U6): piller med antal over tabellen — samme sprog som fanerne, men vandret og rund. */
.kategori-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.kategori-filter button {
font: inherit; font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
min-height: 36px; padding: 6px 12px; border-radius: var(--r-knap); border: 1px solid var(--c-border); background: var(--c-surface);
color: var(--c-text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.kategori-filter button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.kategori-filter button[aria-pressed="true"] { background: var(--c-text); border-color: var(--c-text); color: var(--c-surface); }
.kategori-filter button[aria-pressed="true"] .fane-tal { background: rgba(255, 255, 255, .18); color: var(--c-surface); }
/* ============================================================== 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; }
/* En sætning ("På ferie – tilbage 13. okt.") frem for et tal: mindre, så den står på én-to linjer. */
.nt-tal.nt-tekst { font-size: 20px; line-height: 1.25; padding-top: 6px; }
.nt-navn {
font-family: var(--f-etiket); font-size: var(--t-etiket); 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-visible { outline-color: var(--c-ferie); 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: 60px; text-align: center; }
/* En rund pileknap (Forrige/Næste år): kun ikonet, 40 px at ramme. */
.knap-rund { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; }
.tavler { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
gap: var(--s-5); 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;
/* Samme boks som .tip-boks og .tip-boble: ÉN tooltip-stil i hele appen. */
background: var(--c-surface); color: var(--c-text); font-size: var(--t-lille);
border: 1px solid var(--c-border-blod); border-radius: var(--radius-sm);
box-shadow: var(--skygge);
padding: 10px 12px; pointer-events: none;
}
.ki-hoved {
margin: 0 0 6px; font-family: var(--f-etiket); font-size: var(--t-etiket);
letter-spacing: .1em; 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;
}
/* Tallet står OVER søjlen og kun, hvor der er noget — nullerne siger sig selv.
Linjen har altid højde, så søjlerne står på samme grundlinje. */
.kurve-tal { font-family: var(--f-etiket); font-size: 14px; font-weight: 600; min-height: 18px; line-height: 18px;
color: var(--c-text); font-variant-numeric: tabular-nums; }
.kurve-tal.nul { color: var(--c-text-dim); font-weight: 400; }
.kurve-navn { font-family: var(--f-etiket); font-size: var(--t-etiket); 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: var(--t-etiket);
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: var(--t-etiket); 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: var(--t-lille); 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, .kode-valg.udenfor .kv-tekst, .kode-valg.udenfor .kode { color: var(--c-text-dim); font-style: italic; }
.kode-valg.udenfor:hover, .kode-valg.udenfor:hover .kv-tekst, .kode-valg.udenfor:hover .kode { color: var(--c-text); }
.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); }
.kilde-linje.advarsel { color: var(--c-warning); margin-top: -10px; }
.kilde-linje.advarsel a { color: inherit; }
/* 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);
}
/* ---------- Forsiden: dashboard ---------- */
.fs-hoved { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.fs-hoved h1 { margin: 0 0 4px; }
.fs-dato { margin: 0; color: var(--c-text-dim); font-size: 15px; }
.fs-genveje { display: flex; gap: 10px; flex-wrap: wrap; }
.fs-genveje .knap { display: inline-flex; align-items: center; text-decoration: none; }
/* Sekundære genveje: hvide piller med kant — samme form som .knap-sekundaer, bare på hvid bund. */
.fs-sekundaer { background: var(--c-surface); border-color: var(--c-kort-kant); }
.fs-kort-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
/* Fire kort (med "Venter på dig", U9): fire spor på brede skærme, to på mellembrede. */
.fs-kort-grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) { .fs-kort-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fs-bred { grid-column: span 2; }
.fs-kort {
background: var(--c-surface); border: 1px solid var(--c-kort-kant); border-radius: var(--r-kort);
padding: 22px; min-width: 0;
/* Kortene i en række er lige høje (grid stretch); kildelinjen/footeren skubbes ned i bunden, så de flugter på tværs. */
display: flex; flex-direction: column;
}
.fs-kort > .fs-krop { flex: 1; display: flex; flex-direction: column; }
.fs-krop > .fs-fod, .fs-krop > .fs-nyh-fod { margin-top: auto; padding-top: 14px; }
.fs-fod .fs-kilder { margin: 0; }
.fs-fod .fs-kilder + .fs-kilder { margin-top: 2px; }
.fs-kort-hoved { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fs-kort-hoved h2 { font-size: 20px; }
.fs-link { font-size: 13px; font-weight: 600; color: var(--c-primary); text-decoration: none; white-space: nowrap; }
.fs-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fs-tom { margin: 0; }
.fs-fejl { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Skelet: en pladsholder, der skimrer, mens tallene hentes. */
.skelet { height: 14px; border-radius: 6px; margin: 0 0 12px;
background: linear-gradient(90deg, var(--c-surface-alt) 25%, var(--c-bg) 50%, var(--c-surface-alt) 75%);
background-size: 200% 100%; animation: skelet-skimmer 1.4s ease-in-out infinite; }
.skelet:last-child { margin-bottom: 0; }
@keyframes skelet-skimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skelet { animation: none; } }
/* Lister: opgaver og personer. */
.fs-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fs-liste li { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.4; }
.fs-liste .tom.lille { margin: 0; font-size: 13px; }
.fs-liste .op-frist { font-size: 13px; }
/* "Venter på dig" (U9): tekst og projekt til venstre, handlingen til højre på samme linje. */
.fs-liste.fs-venter li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; }
.fs-liste.fs-venter li .fs-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.fs-liste.fs-venter li .fs-opgave, .fs-liste.fs-venter li .tom.lille { grid-column: 1; }
.fs-opgave { color: var(--c-text); font-weight: 600; text-decoration: none; }
.fs-opgave:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.fs-liste + .tom.lille { margin: 12px 0 0; }
.fs-personer li { flex-direction: row; align-items: center; gap: 12px; }
.fs-personer li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
/* Avataren er FERIEgrøn — samme farve som feriekalenderen, så den siger "væk", ikke "ok". */
.fs-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 36px; height: 36px; border-radius: 50%; background: var(--c-ferie-1); color: var(--c-ferie-moerk);
font-family: var(--f-etiket); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
/* Den bløde boks nederst i et kort: "1 ufordelt opgave" / "22.224 kr. i flow". */
.fs-boks { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--c-accent-soft); font-size: 14px; }
/* Timer: det store tal og de fem dagbokse. */
.fs-stort { margin: 0 0 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fs-tal { font-family: var(--f-serif); font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fs-dage { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fs-dag { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px;
background: var(--c-accent-soft); font-variant-numeric: tabular-nums; }
.fs-dag.i-dag { box-shadow: inset 0 0 0 1px var(--c-accent); }
.fs-dag-navn { font-family: var(--f-etiket); font-size: var(--t-etiket); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); }
.fs-dag-tal { font-weight: 600; font-size: 15px; }
/* Projekttabellen må blive smallere end de andre tabeller: fem kolonner, ingen handlinger. */
.fs-tabelramme { box-shadow: none; border-color: var(--c-border-blod); }
.fs-tabel { min-width: 520px; }
/* Økonomi: bogført mod budget som en bjælke. */
.fs-okonomi + .fs-okonomi { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-border-blod); }
.fs-okonomi-titel { margin: 0 0 10px; font-size: 14.5px; }
.fs-okonomi-bogfoert { margin: 0 0 8px; font-size: 14.5px; }
.fs-okonomi-bogfoert strong { font-variant-numeric: tabular-nums; }
.fs-bjaelke { height: 8px; border-radius: var(--r-knap); background: var(--c-primary-soft); overflow: hidden; }
.fs-bjaelke-fyld { height: 100%; border-radius: var(--r-knap); background: var(--c-primary); }
.fs-okonomi-under { margin: 8px 0 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
font-size: 13px; color: var(--c-text-dim); font-variant-numeric: tabular-nums; }
.fs-okonomi-under .over { color: var(--c-danger); font-weight: 600; }
@media (max-width: 960px) {
.fs-kort-grid, .fs-kort-grid:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
.fs-bred { grid-column: auto; }
}
/* ---------- Forsiden (051/052): 12 spor — Fra branchen 7 + Markedstal 5 ---------- */
.fs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
.fs-c4 { grid-column: span 4; } .fs-c5 { grid-column: span 5; } .fs-c7 { grid-column: span 7; } .fs-c8 { grid-column: span 8; } .fs-c12 { grid-column: span 12; }
/* Fra branchen */
.fs-liste.fs-nyheder li { display: grid; grid-template-columns: 118px minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
.fs-nyhed-kilde { display: flex; flex-direction: column; font-size: var(--t-lille); color: var(--c-text-dim); line-height: 1.35; }
.fs-nyhed-kilde > span { font-weight: 600; color: var(--c-text); }
.fs-nyhed-kilde > span.fs-periode { font-weight: 400; color: var(--c-text-dim); }
.fs-nyhed { color: var(--c-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.fs-nyhed:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.fs-kilder { margin: 14px 0 0; font-size: var(--t-lille); }
.fs-kilder .fs-link { font-size: var(--t-lille); }
/* Markedstal */
.fs-tal { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.fs-tal > div { padding: 10px 0; border-bottom: 1px solid var(--c-border-blod); }
.fs-tal > div:last-child { border-bottom: 0; }
.fs-tal dt { font-family: var(--f-tekst); font-size: 13.5px; font-weight: 400; color: var(--c-text-dim); }
.fs-tal dd { margin: 2px 0 0; font-family: var(--f-tekst); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-tal dd small { display: block; font-size: var(--t-lille); font-weight: 400; color: var(--c-text-dim); margin-top: 1px; }
.fs-c12 .fs-tal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.fs-c12 .fs-tal > div { border-bottom: 0; }
/* Markedsrapporter og Sjælland (052) */
.fs-nyh-vaelg { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--c-primary); min-height: 24px; }
.fs-nyh-vaelg:hover { text-decoration: underline; text-underline-offset: 3px; }
.fs-nyh-fod { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 14px 0 0; }
.fs-nyh-fod .tom.lille { font-size: var(--t-lille); }
.fs-nyh-mere:empty { display: none; }
.fs-nyh-mere .knap-tekst-lille { padding-left: 0; padding-right: 0; }
.fs-nyt-siden { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--c-primary); }
.fs-manuel { display: block; font-size: 13px; color: var(--c-text-dim); }
.fs-manuel .knap-tekst-lille { font-size: 13px; }
.fs-ny-maerke { display: inline-block; margin-left: 6px; vertical-align: 2px; font-family: var(--f-etiket); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
padding: 2px 7px; border-radius: 999px; background: var(--c-positive-soft); color: var(--c-positive-moerk); }
.fs-sj-intro { margin: 0 0 6px; }
.fs-sj { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fs-sj th, .fs-sj td { padding: 6px 0; border-bottom: 1px solid var(--c-border-blod); text-align: left; font-weight: 400; vertical-align: middle; }
.fs-sj thead th { font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-text-dim); padding-top: 0; }
.fs-sj .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
.fs-sj td.num span:not(.tom) { font-weight: 600; }
.fs-sj td.num .under { color: var(--c-danger); }
.fs-sj tbody th { color: var(--c-text); }
.fs-kurve-celle { width: 80px; padding-left: 10px; text-align: right; color: var(--c-primary); }
.fs-kurve { display: inline-block; vertical-align: middle; }
.fs-tal-husleje { margin-top: 12px; }
.fs-tal-husleje dd .fs-kurve { margin-left: 10px; color: var(--c-primary); vertical-align: -2px; }
@media (max-width: 1100px) {
.fs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-c4, .fs-c5, .fs-c7, .fs-c8, .fs-c12 { grid-column: span 1; }
.fs-c8, .fs-c12 { grid-column: span 2; }
.fs-c12 .fs-tal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.fs-grid { grid-template-columns: minmax(0, 1fr); }
.fs-c4, .fs-c5, .fs-c7, .fs-c8, .fs-c12 { grid-column: auto; }
.fs-c12 .fs-tal { grid-template-columns: minmax(0, 1fr); }
.fs-liste.fs-nyheder li { grid-template-columns: minmax(0, 1fr); }
.fs-nyhed-kilde { flex-direction: row; gap: 8px; }
}
@media (max-width: 620px) {
.fs-hoved { align-items: flex-start; flex-direction: column; }
.fs-genveje { width: 100%; }
.fs-genveje .knap, .fs-genveje .knap-sekundaer { flex: 1 1 auto; justify-content: center; text-align: center; }
.fs-kort { padding: 18px 16px; }
.fs-dage { gap: 6px; }
}
/* ---------- 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; }
/* Kun den FØRSTE knap skubbes til højre — ellers deles den ledige plads mellem knapperne. */
.gb-hoved .knap-tekst-lille ~ .knap-tekst-lille { margin-left: 0; }
.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 { display: inline-flex; align-items: center; min-height: 24px; font-size: var(--t-lille); 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; position: relative;
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: var(--t-etiket); font-weight: 600; font-style: italic;
line-height: 1; cursor: help; user-select: none;
}
.tip-ikon::after { content: ''; position: absolute; inset: -5px; } /* 25 px målflade om det lille i */
.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: var(--t-lille); font-weight: 400; color: var(--c-text); white-space: nowrap;
}
.tip-titel {
display: block; margin-bottom: 6px; font-family: var(--f-etiket); font-size: var(--t-etiket);
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: var(--t-lille); line-height: 1.4; }
/* Den fælles tooltip for ALLE title-attributter (tips.js, `bobleTips`): samme boks som .tip-boks, men med
ombrydning, så en hel fakturanote kan læses. Browserens egen gule boks vises ikke mere nogen steder. */
.tip-boble {
position: fixed; z-index: 70; max-width: min(380px, calc(100vw - 16px)); padding: 8px 12px;
background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius-sm); box-shadow: var(--skygge);
font-family: var(--f-tekst); font-size: var(--t-lille); font-weight: 400; line-height: 1.45; color: var(--c-text);
white-space: pre-line; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; pointer-events: none;
}
.tip-boble[hidden] { display: none; }
.tip-boble .tip-titel { margin-bottom: 4px; }
.tip-boble .tip-tekst { display: block; }
.tip-boble .tip-fokus { display: block; margin-top: 4px; font-family: var(--f-etiket); font-size: 15px; font-weight: 600; letter-spacing: .01em;
font-variant-numeric: tabular-nums; color: var(--c-text); }
.tip-boble .tip-under { display: block; margin-top: 5px; font-size: var(--t-etiket); color: var(--c-text-dim); white-space: normal; }
/* 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 { outline: 1px solid var(--c-primary); }
.etc-ret.antaget { color: var(--c-text-dim); font-style: italic; }
.etc-ret.manuel { font-weight: 600; }
/* Ikonet ved afvigelsen: samme mål og plads som .tip-ikon (15 px + 6 px luft), så tallene i kolonnen flugter
uanset om rækken har et ikon eller en pladsholder. Knap og span ser ens ud. */
.forklar-ikon {
display: inline-flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box;
width: 15px; height: 15px; margin-left: 6px; vertical-align: middle; border-radius: 50%; padding: 0;
border: 1px solid var(--c-border); background: none; color: var(--c-text-dim);
font: 600 10px/1 var(--f-etiket); font-style: normal; cursor: pointer; user-select: none;
}
.forklar-ikon::after { content: ''; position: absolute; inset: -5px; } /* 25 px målflade */
.forklar-ikon.findes { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.forklar-ikon.mangler { border-color: var(--c-danger); color: var(--c-danger); }
.forklar-ikon:hover, .forklar-ikon:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
span.forklar-ikon { cursor: help; }
/* Opfølgningens afvigelseskolonne skal have plads til tal + ikon uden at ombryde. */
.tabel.opfoelg td.num .forklar-ikon, .tabel.opfoelg td.num .tip-plads { flex: none; }
/* 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; }
/* Panelet er gennemsigtigt på desktop (gitteret ser felterne direkte); knappen "Filtre · N" og chips findes kun på telefon. */
.filtre-fakturaer .ff-panel { display: contents; }
.filtre-fakturaer .ff-mobil, .filtre-fakturaer .ff-chips { display: none; }
/* "+ note" (U8): kun ved hover/fokus på rækken — 350 ens links trak blikket. Rigtige noter ("Ret") står altid. */
.tabel.fakturaer .note-knap.note-ny { opacity: 0; transition: opacity .12s; }
.tabel.fakturaer tr:hover .note-knap.note-ny, .tabel.fakturaer tr:focus-within .note-knap.note-ny, .tabel.fakturaer .note-knap.note-ny:focus-visible { opacity: 1; }
@media (hover: none) { .tabel.fakturaer .note-knap.note-ny { opacity: 1; font-size: 0; min-width: 28px; }
.tabel.fakturaer .note-knap.note-ny::before { content: '✎'; font-size: 14px; color: var(--c-text-dim); } }
@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: 104px; } /* ▸ + 31.12.2025 + luft — 92 gav 4 px vandret rul */
.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: 150px; } /* to kode-piller side om side */
.tabel.fakturaer > thead > tr > th:nth-child(8) { width: 128px; }
.tabel.fakturaer > thead > tr > th:nth-child(9) { width: 112px; } /* "moms 1.196.611" under beløbet */
.tabel.fakturaer .kode { display: inline-block; margin: 1px 0; }
.tip.tip-kode { margin-left: 0; }
.tip-kode .tip-anker { cursor: help; position: relative; }
.tip-kode .tip-anker::after { content: ''; position: absolute; inset: -4px -2px; }
.filtre label { min-width: 0; }
/* Filtrene er flex: en 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%; }
/* Beløbskolonnen må aldrig afkortes: momsbeløbet under summen skal kunne læses i sin helhed. */
.tabel.fakturaer > tbody > tr > td.num .celle-under { overflow: visible; text-overflow: clip; max-width: none; }
/* Forslag (031): en kode, ingen har bekraeftet — daempet og stiplet, saa den ikke laeses som en kode. */
.forslag-pille .kode { color: var(--c-text-dim); background: transparent; border-style: dashed; border-color: var(--c-border); }
/* 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: var(--r-knap);
background: var(--c-accent-soft); color: var(--c-accent-text); font-family: var(--f-etiket); font-size: var(--t-etiket);
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: var(--t-lille); 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 { color: var(--c-text-dim); }
.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-text-dim); }
.afv-tekst { color: var(--c-text); }
.afv-linje3 .afv-note { font-size: var(--t-lille); 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: var(--t-etiket); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
padding: 5px 11px; border-radius: var(--r-knap); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center;
}
.knap-lille:hover { border-color: var(--c-primary); color: var(--c-primary); }
.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: var(--t-lille); 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 med knappen som summary. Ingen JS til at åbne — kun til at lukke. */
/* Økonomi-oversigten (U3): værktøjsrække med to sekundære knapper og "Mere ▾" (kobMenu), chip med antal til
bekræftelse ved navnet, og en statustabel pr. projekt (budget, bogført, forventet, afvigelse, forbrugt). */
.ok-hoved .ok-chip { text-decoration: none; }
.ok-hoved .ok-chip:hover { text-decoration: underline; text-underline-offset: 3px; }
.ok-mere { position: relative; display: inline-block; }
.ok-mere .pop-menu { min-width: 240px; right: 0; left: auto; }
/* Menupunkter med hjælpetekst: teksten på én linje, hjælpen i småt på linjen under — aldrig ved siden af, så punktet knækker. */
.ok-mere .pop-menu [role="menuitem"] { flex-wrap: wrap; white-space: nowrap; }
.ok-mere .pop-menu [role="menuitem"] small { flex-basis: 100%; color: var(--c-text-dim); font-weight: 400; font-size: var(--t-etiket); margin: 1px 0 0; white-space: normal; }
.tabel.ok-status .maalerkol { width: 140px; max-width: 140px; }
.tabel.ok-status .num .over { color: var(--c-danger); }
.tabel.ok-status .ok-venter { letter-spacing: .1em; }
/* 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; }
/* Afvigelsen bærer forklaringsikonet (15 px + 6 px) ved siden af tallet — kolonnen er bredere, og tallet må aldrig ombrydes. */
.tabel.opfoelg th.num:nth-child(8) { width: 128px; }
.tabel.opfoelg td.num { white-space: nowrap; }
.tabel.opfoelg td.num { white-space: nowrap; overflow-wrap: normal; }
.tabel.opfoelg th { white-space: normal; }
.tabel.opfoelg .maalerkol { width: 104px; max-width: 104px; overflow: hidden; }
.tabel.opfoelg .maaler { width: 46px; }
.tabel.opfoelg .maaler-tal { min-width: 30px; margin-left: 6px; }
.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)):not(:nth-child(8)) { width: 102px; }
.tabel.opfoelg.generel th.num:nth-child(8) { width: 126px; } /* afvigelse + forklaringsikon */
.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.afstemning tbody th, .tabel.afstemning tfoot th { text-align: left; font-weight: 500; font-family: var(--f-tekst); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--c-text); }
.tabel.afstemning tfoot tr.sumraekke th, .tabel.afstemning tfoot tr.sumraekke td { border-top: 2px solid var(--c-border); border-bottom: 0; font-weight: 600; background: var(--c-bg); }
.tabel tr.gruppe.enkeltkode { cursor: default; }
.tabel tr.gruppe.enkeltkode:hover td { background: inherit; }
/* 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: var(--f-mono); 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: var(--t-etiket); 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: var(--r-knap); text-align: center;
font-family: var(--f-etiket); font-size: var(--t-etiket); 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: var(--c-danger-soft); 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: var(--r-knap); padding: 2px; }
.op-segment button {
font: inherit; font-size: var(--t-lille); padding: 4px 12px; border-radius: var(--r-knap); 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: var(--t-etiket); 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: var(--r-knap); 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: var(--t-etiket); 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: var(--t-etiket); 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: 24px; height: 24px; margin-top: 0; padding: 0; border: 0; background: none;
font: inherit; font-size: var(--t-lille); 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: 24px; height: 24px; 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 svg { opacity: 0; transition: opacity .12s; }
.op-check:hover, .op-check:focus-visible { border-color: var(--c-positive); color: var(--c-positive); }
.op-check:hover svg, .op-check:focus-visible svg { opacity: .8; }
.op-raekke.udfoert .op-check svg, .op-del.udfoert .op-check svg, .op-kort.udfoert .op-check svg { opacity: 1; }
.op-raekke.udfoert .op-check, .op-del.udfoert .op-check, .op-kort.udfoert .op-check { background: var(--c-positive-soft); border-color: var(--c-positive); color: var(--c-positive-moerk); }
.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; }
/* Titlen er en knap, der åbner opgaven — ligner tekst, men kan nås med Tab. */
.op-aabn {
font: inherit; font-weight: inherit; color: inherit; background: none; border: 0; padding: 0;
text-align: left; cursor: pointer; overflow-wrap: anywhere; border-radius: 4px; min-height: 24px;
}
.op-aabn:hover { color: var(--c-primary); }
.op-kort-titel .op-aabn { cursor: inherit; }
.op-meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: var(--t-lille); 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-text); }
.op-hale { flex: none; display: flex; align-items: center; gap: 6px; font-size: var(--t-lille); white-space: nowrap; margin-top: 1px; }
.op-hale .knap-tekst-lille { font-size: var(--t-lille); padding: 4px 8px; min-height: 32px; }
.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 {
display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 32px;
font: inherit; font-size: var(--t-lille); padding: 4px 8px; 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: var(--t-etiket); font-weight: 600; letter-spacing: .05em;
text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-knap); line-height: 1.5; white-space: nowrap;
background: var(--c-surface-alt); color: var(--c-text-dim);
}
.op-prio-hoej { background: var(--c-danger-soft); color: var(--c-danger); }
.op-prio-mellem { background: var(--c-accent-soft); color: var(--c-accent-text); }
.op-prio-lav { background: var(--c-surface-alt); color: var(--c-text-dim); }
.op-fremdrift { font-variant-numeric: tabular-nums; }
.op-fremdrift.pos { background: var(--c-positive-soft); color: var(--c-positive-moerk); }
.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; }
/* Status-pillen er en knap med en lille menu (aabnValgMenu); pilen røber, at den kan klikkes. */
.op-stadie {
position: relative; display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-etiket); font-size: 12px;
font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-knap);
background: var(--c-surface-alt); color: var(--c-text-dim); line-height: 1.5; border: 0; white-space: nowrap;
}
button.op-stadie { cursor: pointer; min-height: 28px; }
button.op-stadie:hover, button.op-stadie[aria-expanded="true"] { outline: 1px solid var(--c-border); }
.op-stadie-pil { flex: none; opacity: .7; }
.valg-menu { z-index: 60; min-width: 170px; }
.valg-menu [role^="menuitem"] {
display: flex; align-items: center; min-height: 40px; width: 100%; padding: 8px 12px 8px 30px; position: relative;
font: inherit; font-size: 14px; color: var(--c-text); text-align: left; background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.valg-menu [role^="menuitem"]:hover, .valg-menu [role^="menuitem"]:focus-visible { background: var(--c-accent-soft); color: var(--c-primary-dark); }
.valg-menu [aria-checked="true"]::before { content: '✓'; position: absolute; left: 10px; color: var(--c-positive-moerk); font-weight: 700; }
.valg-menu .farlig { color: var(--c-danger); }
.op-gruppe-knap { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13.5px; padding: 6px 14px; }
.op-stadie-i_gang { background: var(--c-accent-soft); color: var(--c-accent-text); }
.op-stadie-afventer { background: #e6edf3; color: #44607c; } /* 5,5:1 */
.op-stadie-udfoert { background: var(--c-positive-soft); color: var(--c-positive-moerk); }
/* 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: 20px; height: 20px; font-size: var(--t-lille); margin: 0; position: relative; }
.op-del .op-check::after { content: ''; position: absolute; inset: -3px; } /* 26 px at ramme */
.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: var(--t-lille); color: var(--c-text-dim); }
.op-del .op-frist { font-size: var(--t-lille); }
.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: var(--t-etiket); font-weight: 600; color: var(--c-text-dim); }
.op-kolonne-note { flex-basis: 100%; font-size: var(--t-lille); 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: var(--t-lille); color: var(--c-text-dim); }
.op-kort-art { font-size: var(--t-lille); }
.op-kort-fod .op-frist { font-size: var(--t-lille); }
.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: var(--t-etiket); 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: var(--t-lille); padding: 3px 0; }
.op-kort .op-delny input { font-size: var(--t-lille); 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; }
}
/* ===== Mobil og tablet (responsivt) =====================================
Appen er bygget til en skærm på 1200 px og derover, og det ændres der
ikke på: alt herunder gælder KUN under 1024 px (tablet), 760 px (telefon)
og 480 px (lille telefon) — plus de regler, der gælder for en finger frem
for en mus (`pointer: coarse`). Princippet er det samme hele vejen:
det, der er bredere end skærmen, ruller for sig selv i sin egen ramme —
tabeller, boardet, kalenderen, menuen — og siden selv ruller aldrig
vandret. Spalter stables, felter står i én kolonne, knapper fylder bredden.
======================================================================== */
/* Kalenderens kolonnebredder som variabler, så fingerreglen (bredere celler) og
telefonreglen (smallere navnekolonne) kan sættes hver for sig. Samme tal som før. */
.kalender { grid-template-columns: var(--kal-navn, 150px) repeat(var(--uger), var(--kal-celle, 28px)); }
/* Lukkede medarbejdere dæmpes med FARVE, ikke opacity: en halvgennemsigtig
navnekolonne lader cellerne skinne igennem, når kalenderen er rullet — og på
en telefon er den altid rullet. Ser ud som før, når den står stille. */
.kal-navn.inaktiv { opacity: 1; }
/* Dæmpet med farve, ikke opacity: halv gennemsigtighed gav 3,3:1 — for lidt til at læse navnet. */
.kal-navn.inaktiv strong, .kal-navn.inaktiv .kal-sum { color: var(--c-text-dim); font-weight: 500; }
/* --- Finger frem for mus: større mål, ingen zoom på felter ------------- */
/* iOS zoomer ind på et felt med skrift under 16 px. Alle felter sættes derfor
til 16 px, når der er tale om en berøringsskærm — på desktop rører det ingenting. */
@media (pointer: coarse) {
input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
.filtre input, .filtre select, .filtre-fakturaer input, .filtre-fakturaer select,
.filterlinje select, .mv-note input, .op-delny input, .op-kort .op-delny input,
.match-hoved input[type="search"], .indstillinger input { font-size: 16px; }
/* Mindst 40 px at ramme — knapper, links i menuen, faner og piller. */
.knap, .knap-sekundaer, .knap-tekst, .knap-tekst-lille, .knap-lille, .nav-pill, .fane,
.op-side-punkt, .op-pille, .op-segment button, .skift a, .tilbage,
.op-ikon, .kode-valg, .toast-knap, .kurve-baand {
min-height: 40px;
}
.knap-tekst-lille, .knap-tekst, .nav-pill, .tilbage, .skift a, .op-ikon {
display: inline-flex; align-items: center;
}
.op-segment button, .op-pille, .knap-lille { display: inline-flex; align-items: center; }
.side-hoved > h2 + .knap-tekst-lille, .mv-hoved .knap-tekst-lille, .v-hoved .knap-tekst-lille,
.gb-hoved .knap-tekst-lille, .v-kilde .knap-tekst-lille { margin-left: auto; }
.gb-hoved .knap-tekst-lille ~ .knap-tekst-lille { margin-left: 0; }
/* Afkrydsningen og folde-pilen på opgaver er små af design; hitfladen udvides med luft. */
.op-fold, .op-check { position: relative; }
.op-fold::after, .op-check::after { content: ''; position: absolute; inset: -9px; }
/* Ferieårets celler: 16 px skrift kræver lidt bredere celler, så "2,5" stadig står på én linje. */
.kalender { --kal-celle: 34px; }
.kal-celle { width: 34px; height: 34px; font-size: 15px; }
.skema-celle { font-size: 16px; padding: 7px 6px; }
/* Rullebjælkerne vises ikke på berøringsskærme; rammerne skal rulle med fingeren. */
.tabelramme, .kalenderramme, .op-board, .nav, .op-side, .match-liste, .dialog { -webkit-overflow-scrolling: touch; }
}
/* --- Tablet (≤ 1024 px: iPad liggende og stående) ---------------------- */
/* Topbar i to linjer: logo og bruger øverst, menuen under — frem for tre
linjer, hvor brugeren ender alene på den sidste. Grænsen er målt: logo (212)
+ menu (561) + bruger (214) + luft og kanter (92) = 1079 px. Under det
skifter vi BEVIDST til to linjer; ellers ombrød menuen sine egne punkter. */
@media (max-width: 1100px) {
.topbar { gap: 4px 18px; padding: 8px 20px; }
.bruger { order: 1; }
.soeg-knap { order: 1; margin-left: auto; }
.nav { order: 2; flex: 1 1 100%; }
}
/* De tre tætte tabeller har en mindstebredde VED ALLE SKÆRMBREDDER — ellers får kontoteksten
(og leverandøren) 0–160 px mellem 1025 og ca. 1250 px og står som "Gr/un/dk/øb". Er der ikke plads,
ruller tabellen i sin ramme (rullerammerMedTastatur sætter .kan-rulle og tabindex). */
.tabel.opfoelg { min-width: 1080px; } /* de faste kolonner fylder ~850; kontoteksten får resten */
.tabel.fakturaer { min-width: 1080px; } /* ~870 fast; leverandøren får resten */
.tabel.koblinger { min-width: 1000px; } /* ~690 fast; leverandør og kontotekst deler resten */
.tabel.opfoelg td:nth-child(2), .tabel.koblinger td:nth-child(4) { min-width: 180px; }
@media (max-width: 1024px) {
.view { width: 94%; padding-top: 30px; }
/* De faste tabeller (uden vandret rul på desktop) får en mindstebredde og
ruller i rammen — ellers klemmes kontoteksten til ét bogstav pr. linje. */
.tabelramme { max-width: 100%; }
/* Boardet: fire kolonner ruller vandret og "snapper" kolonne for kolonne. */
.op-board {
display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 12px; min-width: 0; max-width: 100%;
padding-bottom: 8px; margin-bottom: -8px; scrollbar-width: thin;
}
.op-kolonne { flex: 0 0 270px; scroll-snap-align: start; }
}
/* --- Opgaver: visningerne i siden bliver én rullende række øverst ------- */
@media (max-width: 900px) {
/* minmax(0, 1fr) og min-width: 0 er det, der holder siden på plads: en
rullende række uden ombrydning ville ellers gøre gitterkolonnen — og
dermed hele siden — så bred som rækken. */
.op-shell { grid-template-columns: minmax(0, 1fr); }
.op-side, .op-board, .op-main, .op-indhold { min-width: 0; max-width: 100%; }
.op-side {
flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px;
overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px;
}
.op-side::-webkit-scrollbar { display: none; }
.op-side-gruppe { flex: none; flex-basis: auto; margin: 0 4px 0 10px; white-space: nowrap; }
.op-side-gruppe:first-child { margin-left: 0; }
.op-side-punkt { flex: none; width: auto; white-space: nowrap; padding: 7px 11px; }
.kontoplan-dialog .match-liste { max-height: none; }
/* Rækken ombrydes (regel ovenfor): hovedet skal blive på linje med afkrydsningen
— flex-basis 0, så det aldrig selv hopper ned — og halen ombrydes under det. */
.op-hoved { flex: 1 1 0; min-width: 50%; }
.op-hale { flex: 1 1 100%; flex-wrap: wrap; white-space: normal; max-width: calc(100% - 56px); margin-top: 2px; }
}
/* --- Telefon (≤ 760 px) ------------------------------------------------- */
/* ---------- Bundmenu på telefonen (U7) ----------
Skjult på desktop; under 760 px erstatter den topmenuen: fem faste punkter med ikon og tekst, og "Mere"
åbner et ark nedefra med resten (Økonomi, Samarbejdspartnere, Skabeloner og administrationen). */
.bundmenu, .bm-ark, .bm-baggrund { display: none; }
@media (max-width: 760px) {
.bundmenu {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
background: var(--c-surface); border-top: 1px solid var(--c-border);
padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
}
.bm-punkt {
flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
font: inherit; font-size: 12px; font-weight: 500; line-height: 1; color: var(--c-text-dim); text-decoration: none;
background: none; border: 0; border-radius: var(--radius-sm); padding: 6px 2px; cursor: pointer;
}
.bm-punkt span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-punkt svg { flex: none; }
.bm-punkt:hover { color: var(--c-text); }
.bm-punkt.aktiv, .bm-punkt[aria-current="page"], .bm-punkt[aria-expanded="true"] { color: var(--c-primary); font-weight: 600; }
.bm-punkt:focus-visible { outline-offset: -2px; }
/* Arket: fuld bredde lige over bundmenuen; kobMenu sætter inline-position, derfor !important. */
.bm-ark {
display: flex; flex-direction: column; position: fixed !important; z-index: 59;
left: 0 !important; right: 0 !important; top: auto !important; bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
background: var(--c-surface); border-top: 1px solid var(--c-border); border-radius: var(--radius) var(--radius) 0 0;
box-shadow: 0 -10px 30px rgba(31, 29, 27, .14); padding: 10px 8px 12px; max-height: 70vh; overflow-y: auto;
}
.bm-ark[hidden] { display: none; }
.bm-ark [role="menuitem"] {
display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-sm);
font-size: 15px; color: var(--c-text); text-decoration: none;
}
.bm-ark [role="menuitem"]:hover, .bm-ark [role="menuitem"]:focus-visible { background: var(--c-accent-soft); color: var(--c-primary-dark); }
.bm-ark [role="menuitem"][aria-current="page"] { color: var(--c-primary); font-weight: 600; background: var(--c-primary-soft); }
.bm-baggrund { display: block; position: fixed; inset: 0; z-index: 58; background: rgba(31, 29, 27, .38); }
.bm-baggrund[hidden] { display: none; }
/* Indholdet må ikke gemme sig bag bundmenuen. */
#app { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
/* Topbar: logo, søg og bruger på én linje; topmenuen er erstattet af bundmenuen. */
.topbar { padding: 8px 16px; gap: 4px 10px; flex-wrap: wrap; }
.topbar > .nav { display: none; }
.brand { order: 0; gap: 10px; }
.brand-logo { height: 30px; }
.bruger { order: 1; width: auto; margin-left: 0; }
.soeg-knap { order: 1; margin-left: auto; }
.bruger-knap { gap: 8px; }
.bruger-navn { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bruger-menu { right: 0; left: auto; max-width: calc(100vw - 32px); }
/* Siden: fuld bredde med 16 px luft, mindre overskrifter. */
.view { width: 100%; max-width: none; padding: 22px 16px 0; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
.ingress { font-size: 14px; }
.side-hoved { gap: 10px 12px; margin-bottom: 16px; }
.side-hoved > .knap, .side-hoved > .knap-sekundaer,
.side-hoved > h2 + .knap-tekst-lille { margin-left: 0; }
.side-hoved > .knap, .side-hoved > .knap-sekundaer { flex: 1 1 100%; text-align: center; }
/* Økonomi: de tre knapper deler bredden på telefonen; Mere-menuen åbner under sin knap i fuld bredde. */
.ok-hoved .handlinger { width: 100%; margin-left: 0; }
.ok-hoved .handlinger > .knap-sekundaer, .ok-hoved .ok-mere { flex: 1 1 0; }
.ok-hoved .ok-mere .knap-sekundaer { width: 100%; white-space: nowrap; }
.ok-mere .pop-menu { right: 0; left: auto; min-width: 0; width: max-content; max-width: calc(100vw - 32px); }
.tilbage { margin-bottom: 10px; }
/* Tabeller: hver tabel ruller i sin egen ramme, siden gør ikke. */
.tabelramme { max-width: 100%; }
.tabel th { padding: 12px 12px; }
.tabel td { padding: 11px 12px; }
.to-kolonner { grid-template-columns: 1fr; }
.to-kolonner .tabel { min-width: 0; }
.dialog-bred .tabelramme { max-height: 55vh; }
/* Faktalister og nøgletal: to kolonner frem for én lang stribe. */
.fakta { margin-bottom: 26px; }
.fakta > div { flex-basis: calc(50% - 1px); padding: 12px 14px; }
.fakta dd { overflow-wrap: anywhere; }
.noegletal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nt { padding: 14px 16px; }
.nt-tal { font-size: 26px; }
.v-fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afsnit { margin-top: 30px; }
/* Filterlinjer: felterne deler bredden to og to, knapperne på egen linje. */
.filtre { padding: 14px 16px; gap: 10px 12px; }
.filtre > label { flex: 1 1 calc(50% - 6px); min-width: 0; }
.filtre > label.afkryds { flex-basis: 100%; }
.filtre select, .filtre input { max-width: none; width: 100%; }
.filter-knapper { flex: 1 1 100%; }
.filter-knapper .knap, .filter-knapper .knap-sekundaer { flex: 1 1 auto; }
/* Telefon (U8): søgefelt + "Filtre · N" + Excel på én linje; de otte filtre ligger i et panel, der foldes ud. */
.filtre.filtre-fakturaer { display: flex; flex-wrap: wrap; padding: 14px 16px; gap: 10px 12px; }
.filtre-fakturaer .ff-fritekst { flex: 1 1 100%; }
.filtre-fakturaer .ff-mobil { display: flex; gap: 8px; flex: 1 1 100%; }
.filtre-fakturaer .ff-mobil .knap-sekundaer { flex: 1 1 0; padding: 9px 12px; white-space: nowrap; }
.filtre-fakturaer .ff-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.filtre-fakturaer .ff-chips:empty { display: none; }
.ff-chip { font: inherit; font-size: var(--t-lille); min-height: 32px; padding: 4px 10px; border-radius: var(--r-knap);
border: 1px solid var(--c-border); background: var(--c-surface-alt); color: var(--c-text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ff-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.filtre-fakturaer .ff-panel { display: none; flex: 1 1 100%; flex-wrap: wrap; gap: 10px 12px; padding-top: 6px; border-top: 1px solid var(--c-border-blod); }
.filtre-fakturaer .ff-panel.aaben { display: flex; }
.filtre-fakturaer .ff-panel > label { flex: 1 1 calc(50% - 6px); }
.filtre-fakturaer .ff-knapper { flex: 1 1 100%; justify-content: stretch; }
.filtre-fakturaer .ff-knapper .knap-sekundaer { flex: 1 1 auto; }
.filtre-fakturaer .ff-knapper #eksport { display: none; }
.i-alt { margin-left: 0; flex-basis: 100%; }
/* Timer: ugelinjen med navigation øverst og personvalget under. */
.uge-linje { gap: 8px 12px; padding: 10px 12px; }
.uge-titel { min-width: 0; flex: 1 1 100%; order: -1; text-align: center; align-items: center; }
.uge-linje > .knap-tekst, .uge-linje > .knap-pil { flex: 1 1 auto; text-align: center; justify-content: center; }
.uge-person { margin-left: 0; flex: 1 1 100%; }
.uge-person select { max-width: none; flex: 1 1 auto; min-width: 0; }
/* Ferie: filterlinjen, tavlerne og kalenderen. */
.filterlinje { padding: 12px 14px; gap: 10px 14px; }
.filterlinje label { flex: 1 1 auto; min-width: 0; }
.filterlinje select { max-width: none; flex: 1 1 auto; min-width: 0; }
.filter-sum { margin-left: 0; flex-basis: 100%; }
.tavler { gap: 14px; margin-bottom: 22px; }
.tavle { padding: 18px 16px 16px; }
.tavle-hoved h2 { font-size: 19px; }
.kurve-spor { height: 150px; }
.kurve-soejle { background-size: 100% 150px; }
.kurve-tal { font-size: var(--t-lille); }
.kurve-navn { font-size: var(--t-etiket); letter-spacing: .02em; }
.kurve-info { min-width: 180px; max-width: calc(100vw - 48px); }
.kalenderramme { padding: 10px 0; }
.kalender { --kal-navn: 120px; }
.kal-navn { padding: 4px 8px 4px 10px; font-size: 13px; }
.kal-navn .kal-sum { display: none; }
/* Kontomapning: bordet er allerede stablet (≤ 900); listerne lidt lavere, så
det valgte emne under dem kan nås uden at rulle forbi hele listen. */
.match { gap: 12px; }
.match-liste { max-height: 38vh; }
/* Loftet gælder listerne PÅ SIDEN. I kontoplan-dialogen er listen det eneste,
der ruller, og den skal fylde dialogen ud (ellers står den halvtom). */
.kontoplan-dialog .match-liste { max-height: none; }
.match-hoved { padding: 12px 14px; flex-wrap: wrap; min-height: 0; }
.match-hoved input[type="search"] { width: 100%; flex: 1 1 100%; margin-left: 0; }
.match-side > .match-valgt { padding: 14px; }
.mv-fakturaer { margin-left: -14px; margin-right: -14px; }
.afv-raekke { flex-wrap: wrap; gap: 8px 14px; padding: 12px 14px; }
.afv-handling { flex: 1 1 100%; justify-content: flex-end; padding-top: 0; }
.senest-omgang-hoved { flex-wrap: wrap; }
.regelgruppe { padding: 0 12px 4px; }
.regelgruppe .tabelramme { margin: 0 -12px; }
/* Opgaver: værktøjslinje og kort. */
.op-shell { gap: 12px; }
.op-vaerktoej { gap: 10px; }
.op-vaerktoej-titel { flex: 1 1 100%; margin-right: 0; }
.op-vaerktoej-titel h2 { font-size: 20px; }
.op-vaerktoej .knap { margin-left: auto; }
.op-kolonne { flex-basis: 85vw; max-width: 340px; }
.op-raekke { padding: 10px 12px 10px 8px; }
.op-hale { margin-left: 48px; max-width: calc(100% - 48px); }
.op-delopgaver { padding-left: 40px; }
.op-personer { grid-template-columns: 1fr; max-height: 160px; }
.op-dialog .dialog-knapper .farlig { margin-right: 0; }
/* Skabeloner og versionsnoter. */
.skabeloner { grid-template-columns: 1fr; }
.soeg input { max-width: none; }
.to-spalter { gap: 24px; }
.noter h2 { margin-top: 22px; padding-top: 14px; }
/* Generelt-boksen, kilde- og advarselsbannere. */
.generelt-boks { padding: 12px 14px; }
.kilde { padding: 14px 16px; margin-top: -8px; }
.advarsel, .henvisning { padding: 12px 14px; }
.advarsel a, .henvisning a, .henvisning > .knap-tekst-lille { margin-left: 0; }
.indstillinger select { max-width: none; }
.vejledning { padding-left: 16px; }
/* Dialoger: næsten hele skærmen, felterne i én kolonne, knapperne i fuld bredde. */
.dialog, .dialog-bred, .dialog-vaelger, .op-dialog, .kontoplan-dialog {
width: calc(100vw - 24px); max-width: none; max-height: 92vh; max-height: 92dvh;
}
.dialog { overflow: auto; }
.kontoplan-dialog { overflow: hidden; }
.kontoplan-dialog .kontoplan-form { height: min(80vh, 92dvh); }
.dialog form { padding: 18px 16px; gap: 14px; }
.dialog .felter { grid-template-columns: 1fr; gap: 12px; }
.dialog-knapper { flex-wrap: wrap; gap: 8px; }
.dialog-knapper .knap, .dialog-knapper .knap-sekundaer { flex: 1 1 calc(50% - 4px); text-align: center; }
.dialog-knapper .kvittering { flex-basis: 100%; margin-right: 0; }
.dialog td.handling .note-ret { max-width: 140px; }
/* Tooltips og kvitteringer må ikke være bredere end skærmen. */
.tip-boks { max-width: calc(100vw - 16px); min-width: 0; white-space: normal; }
.toast {
max-width: calc(100vw - 24px); height: auto; min-height: 40px; padding: 8px 16px;
white-space: normal; text-align: center; border-radius: 20px; bottom: 16px;
}
/* Login: kortet fylder bredden med 16 px luft og mindre polstring indeni. */
.view-fuld { padding: 16px; }
.login-kort { padding: 28px 20px; }
}
/* --- Lille telefon (≤ 480 px) ------------------------------------------ */
@media (max-width: 480px) {
.brand-navn { display: none; } /* logoet bærer navnet; teksten ville presse brugeren ud af linjen */
/* Initialerne i cirklen bærer navnet for øjet; selve navnet bliver i DOM'en, men
skjult visuelt (som .sr-only) — ellers har knappen intet navn for en skærmlæser,
når brugeren ikke har et rollemærke. */
.bruger-navn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.knap-tekst { padding: 6px 6px; }
h1 { font-size: 22px; }
.knap, .knap-sekundaer { padding: 11px 16px; letter-spacing: .07em; }
.op-vaerktoej .knap { flex: 1 1 100%; margin-left: 0; }
.op-segment { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.op-gruppering { flex-wrap: wrap; }
.filtre > label { flex-basis: 100%; }
.filtre-fakturaer .ff-panel > label { flex-basis: 100%; }
.dialog-knapper .knap, .dialog-knapper .knap-sekundaer { flex-basis: 100%; }
.op-kolonne { max-width: none; }
.uge-linje > .knap-tekst { font-size: 13px; }
/* Lille telefon: kun pilen, teksten ligger i aria-label. */
.uge-linje > .knap-pil span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uge-linje > .knap-pil { flex: 0 0 auto; padding: 11px 14px; }
.mv-hoved .knap { max-width: none; flex-basis: 100%; }
.mv-forslag .knap-sekundaer { max-width: 100%; }
.mv-forslag .knap-sekundaer span { overflow: hidden; text-overflow: ellipsis; }
}
/* ---------- Kontakter: kort pr. kategori ---------- */
/* Skiftet Kort/Liste: to knapper i én ramme; den valgte er fyldt. */
.visning-skift { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--r-knap); overflow: hidden; margin-left: auto; }
.visning-skift button {
font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
padding: 0 14px; min-height: 36px; border: 0; background: transparent; color: var(--c-text); cursor: pointer;
}
.visning-skift button + button { border-left: 1px solid var(--c-border); }
.visning-skift button[aria-pressed="true"] { background: var(--c-primary); color: #fff; }
.visning-skift button:hover:not([aria-pressed="true"]) { background: var(--c-surface-alt); }
.side-hoved > .visning-skift + .knap { margin-left: var(--s-3); }
.part-gruppe { margin: 0 0 var(--s-6); }
.part-gruppe h3 { font-size: 15px; margin: 0 0 var(--s-3); display: flex; align-items: baseline; gap: 8px; }
.part-kort-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.part-kort {
background: var(--c-surface); border: 1px solid var(--c-kort-kant); border-radius: var(--radius);
padding: 14px 16px; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
.part-kort:hover { border-color: var(--c-primary); }
.part-kort.inaktiv { opacity: .7; }
.pk-hoved { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pk-navn { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.pk-meta { margin: 0; font-size: var(--t-lille); color: var(--c-text-dim); overflow-wrap: anywhere; }
.pk-roller { margin: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.pk-person { margin: 2px 0 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.pk-person-navn { font-weight: 600; }
.pk-linje { font-size: 13px; overflow-wrap: anywhere; }
.pk-person a, .pk-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-border); }
.pk-person a:hover, .pk-meta a:hover { color: var(--c-primary); text-decoration-color: currentColor; }
.pk-flere { margin: 0; font-size: var(--t-lille); }
.pk-roller { margin-top: auto; padding-top: 6px; }
/* ---------- Timer til fakturering ---------- */
.aarstabel th, .aarstabel td { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.aarstabel .gruppe-raekke th { text-align: left; background: var(--c-surface-alt); font-family: var(--f-etiket);
font-size: var(--t-etiket); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); padding-top: 8px; padding-bottom: 8px; }
.aarstabel td.num a { color: inherit; text-decoration: none; display: inline-block; min-width: 28px; padding: 4px 6px; margin: -4px -6px; border-radius: 6px; }
.aarstabel td.num a:hover { background: var(--c-accent-soft); color: var(--c-primary); }
.aarstabel td.faktureret a { color: var(--c-text-dim); }
.aarstabel td.faktureret a::after, .faktureret-prik { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--c-positive); margin-left: 5px; vertical-align: middle; }
.aarstabel tfoot .total td { border-top: 2px solid var(--c-border); font-weight: 600; }
.side-hoved .handlinger { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.side-hoved > .knap-sekundaer + .knap-tekst-lille { margin-left: 0; }
/* 31 dage skal kunne staa paa én skaerm: smalle celler, smaa felter. Bliver
det alligevel for bredt (telefon), ruller rammen (.kan-rulle). */
.tabel.maanedsskema th, .tabel.maanedsskema td { padding-left: 2px; padding-right: 2px; font-size: 13px; }
.tabel.maanedsskema td.num { text-align: center; }
.tabel.maanedsskema .skema-celle { width: 26px; padding: 5px 1px; text-align: center; font-size: 13px; }
.tabel.maanedsskema thead th { font-size: var(--t-lille); }
.tabel.maanedsskema th.skema-dag { font-size: var(--t-lille); text-align: center; padding-left: 0; padding-right: 0; }
.tabel.maanedsskema th.skema-dag .celle-under { display: block; font-size: var(--t-lille); }
.tabel.maanedsskema .skema-navn { min-width: 120px; }
.tabel.maanedsskema td:first-child, .tabel.maanedsskema th:first-child { padding-left: 14px; }
.maaned-fakta { margin-bottom: 18px; }
.skema-celle.fejl { border-color: var(--c-danger); }
.skema-tilfoej { justify-content: flex-start; }
.skema-tilfoej label { font-size: var(--t-lille); display: flex; align-items: center; gap: 8px; }
.import-rapport { background: var(--c-surface); border: 1px solid var(--c-kort-kant); border-radius: var(--radius); padding: 18px 20px; }
.import-rapport h2 { margin-top: 0; }
.import-rapport .advarsler { color: var(--c-danger); font-size: 13px; }
.afkryds-celle { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; }
.afkryds-celle input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); cursor: pointer; }
/* Disponeret-måleren: forbrug + ETC mod budget. Rød over, grøn under, neutral på. */
.maaler.disp .maaler-fyld.under { background: var(--c-positive); }
.maaler.disp .maaler-fyld.paa { background: var(--c-text-dim); }
.maaler.disp .maaler-fyld.over { background: var(--c-danger); }
.maaler-tal.over { color: var(--c-danger); }
.maaler-tal.under { color: var(--c-positive); }
.dialog textarea { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-felt); background: var(--c-surface); color: var(--c-text); resize: vertical; }
.dialog textarea:focus { outline: 2px solid var(--c-primary); outline-offset: 0; border-color: var(--c-primary); }
.tabel.fakturaer .note-tekst.egen { font-style: normal; font-weight: 500; }
.tabel.fakturaer .note-knap { font-size: var(--t-lille); padding: 2px 6px; margin-top: 2px; }
.linjer-handlinger { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 4px 2px; }
/* ---------- Vælger: skrivefelt med forslag i eget design ---------- */
.vaelger { position: relative; }
.vaelger input { width: 100%; padding-right: 32px; }
.vaelger-ryd { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 50%;
background: transparent; color: var(--c-text-dim); font-size: 16px; line-height: 1; cursor: pointer; }
.vaelger-ryd:hover { background: var(--c-surface-alt); color: var(--c-text); }
.vaelger-liste { position: absolute; z-index: 40; left: 0; min-width: 100%; max-width: min(520px, 90vw); top: calc(100% + 4px); max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius-sm); box-shadow: var(--skygge); }
.vaelger-liste li { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.vaelger-liste li:hover, .vaelger-liste li.aktiv { background: var(--c-accent-soft); }
.vaelger-liste .vaelger-tekst { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Står der en kontotekst ved siden af, er det KODEN, der skal stå på én linje; teksten må afkortes. */
.vaelger-liste li:has(.vaelger-under) .vaelger-tekst { flex: none; min-width: 3.4em; font-variant-numeric: tabular-nums; }
.vaelger-liste .vaelger-under { flex: 1 1 auto; min-width: 0; }
.vaelger-liste .vaelger-under { color: var(--c-text-dim); font-size: var(--t-lille); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vaelger-liste mark { background: transparent; color: var(--c-primary); font-weight: 600; }
.filtre label:has(.vaelger) { overflow: visible; }
/* ---------- Forsiden: "+ Ny"-menuen ---------- */
.fs-ny { position: relative; }
.fs-ny .knap { display: inline-flex; align-items: center; gap: 8px; }
.fs-ny .pop-menu { min-width: 220px; }
.fs-ny .pop-menu [role="menuitem"] { font-size: 14.5px; }
.fs-dag-link { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; color: inherit; text-decoration: none; width: 100%; }
.fs-dag-link:hover { background: var(--c-surface-alt); }
.fs-dag { padding: 0; }
.fs-dag .fs-dag-link { padding: 10px 4px; }
/* Dagen, man kom fra forsiden for at rette: samme ramme som "i dag", men fuld streg. */
.tabel.skema th.valgt-dag, .tabel.skema td.valgt-dag { box-shadow: inset 0 0 0 2px var(--c-accent); }
/* ---------- Timer på telefonen: én dag ad gangen ---------- */
.dag-faner { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; margin: 4px 0 10px; }
.dag-fane {
font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; padding: 7px 4px;
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-felt); color: var(--c-text); cursor: pointer;
}
.dag-fane .df-navn { display: flex; flex-direction: column; line-height: 1.2; font-family: var(--f-etiket); font-size: var(--t-etiket); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-dim); }
.dag-fane .df-navn small { font-size: inherit; text-transform: none; letter-spacing: 0; }
.dag-fane .df-sum { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; }
.dag-fane.weekend { background: var(--c-bg); }
.dag-fane.i-dag .df-navn { color: var(--c-primary); }
.dag-fane[aria-selected="true"] { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); background: var(--c-primary-soft); }
.dag-fane:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.dag-liste { list-style: none; margin: 0; padding: 0 12px; background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius); }
.dag-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-border-blod); min-height: 56px; }
.dag-liste li:last-child { border-bottom: 0; }
.dag-liste .dl-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dag-liste .dl-tekst strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dag-liste .dl-tekst .tom { font-size: var(--t-lille); }
.dag-liste .skema-celle { width: 72px; max-width: 72px; flex: 0 0 auto; border-color: var(--c-border); background: var(--c-bg); text-align: center; }
.dag-liste .skema-ny { background: var(--c-bg); margin: 0 -12px; padding: 10px 12px; }
.dag-liste .skema-ny .dl-tekst { gap: 6px; }
.dag-liste .skema-ny select { width: 100%; max-width: 100%; min-width: 0; font-size: 14px; padding: 8px 10px; }
.dag-liste .dag-sum { background: var(--c-bg); margin: 0 -12px; padding: 10px 12px; border-top: 2px solid var(--c-border); border-radius: 0 0 var(--radius) var(--radius); }
.dag-liste .dag-sum .num { font-variant-numeric: tabular-nums; width: 72px; text-align: center; font-size: 16px; }
/* Kontomapning: bygningsmærket ved overskriften må ombryde på en telefon — ellers bliver siden 457 px bred. */
.maerke-bygning { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
/* ---------- Timer: status over skemaet ---------- */
.skema-status { min-height: 26px; display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; font-size: 13.5px; }
.gemt-tag { color: var(--c-positive); font-weight: 600; }
.skema-status .fejl-tekst { color: var(--c-danger); font-weight: 600; }
.skema-celle.fejl { border-color: var(--c-danger); background: var(--c-danger-soft); }
.skema-tilfoej { margin: 14px 0 6px; }
/* ---------- Bekræftelsesdialog, "+ Tilføj kontaktperson" ---------- */
.dialog-tekst { margin: 0; color: var(--c-text); font-size: 14.5px; line-height: 1.5; }
.dialog-tekst + .dialog-tekst { margin-top: -8px; }
.dialog .felter:empty { display: none; }
.knap.knap-farlig { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.knap.knap-farlig:hover { filter: brightness(.92); }
.pk-tilfoej { padding-left: 0; padding-right: 8px; min-height: 28px; }
/* ---------- Global søgning ---------- */
.soeg-knap {
display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0;
color: var(--c-text-dim); background: transparent; border: 0; border-radius: 50%; cursor: pointer; position: relative; flex: none;
}
.soeg-knap:hover, .soeg-knap:focus-visible { color: var(--c-text); background: var(--c-hover-bleg); }
.soeg-knap:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.soeg-felt kbd {
font-family: var(--f-etiket); font-size: var(--t-etiket); color: var(--c-text-dim); background: var(--c-surface-alt);
border: 1px solid var(--c-border-blod); border-radius: 5px; padding: 1px 6px; margin-left: 6px;
}
.soeg-dialog {
width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 96px)); padding: 0; margin: 72px auto auto;
border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text);
box-shadow: var(--skygge-pop); overflow: hidden; display: flex; flex-direction: column;
}
.soeg-dialog[open] { display: flex; }
.soeg-dialog::backdrop { background: rgba(31, 29, 27, .38); }
.soeg-felt { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--c-border-blod); color: var(--c-text-dim); }
.soeg-felt input {
flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; color: var(--c-text); background: none; border: 0; padding: 8px 0; outline: none;
}
.soeg-felt:focus-within { box-shadow: inset 0 -2px 0 var(--c-primary); }
.soeg-liste { overflow-y: auto; padding: 6px; }
.soeg-gruppe {
font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--c-text-dim); padding: 10px 10px 4px;
}
.soeg-resultat {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px;
border-radius: 8px; color: var(--c-text); text-decoration: none; font-size: 14.5px;
}
.soeg-resultat[aria-selected="true"] { background: var(--c-accent-soft); color: var(--c-primary-dark); outline: 2px solid var(--c-primary); outline-offset: -2px; }
.soeg-titel { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.soeg-under { font-size: var(--t-lille); color: var(--c-text-dim); text-align: right; flex: none; max-width: 45%; overflow-wrap: anywhere; }
.soeg-status { margin: 0; padding: 10px 18px 14px; font-size: var(--t-lille); }
.soeg-status.tom-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
@media (max-width: 760px) {
.soeg-dialog { margin-top: 12px; width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
.soeg-felt kbd { display: none; }
.soeg-under { max-width: 50%; }
}
/* ---------- Bundtekst (alle sider) ---------- */
.sidefod {
width: min(1160px, calc(100% - 32px)); margin: 72px auto 0; padding: 20px 0 32px;
border-top: 1px solid var(--c-border);
display: flex; justify-content: space-between; align-items: center; gap: 4px 16px;
font-family: var(--f-tekst); font-size: 12px; color: var(--c-text-dim);
}
@media (max-width: 600px) { .sidefod { flex-direction: column; text-align: center; } }
/* Fakturaer og bilag: den lange linje (projekt, kilde, beløb, mapning) står under titlen. */
.soeg-resultat.soeg-lang { flex-direction: column; align-items: flex-start; gap: 2px; }
.soeg-lang .soeg-under { text-align: left; max-width: none; }
/* ---------------------------------------------------------------- gennemgang (049) — budgettræ */
.tabel.gg-trae { table-layout: fixed; width: 100%; min-width: 1020px; }
.tabel.gg-trae th:nth-child(1) { width: 112px; }
.tabel.gg-trae th:nth-child(3), .tabel.gg-trae th:nth-child(4) { width: 118px; }
.tabel.gg-trae th:nth-child(5) { width: 76px; }
.tabel.gg-trae th { overflow: visible; }
.tabel.gg-trae th:nth-child(6) { width: 136px; }
.tabel.gg-trae th:nth-child(7) { width: 330px; }
/* Handlingerne må aldrig stikke ud af tabellen: cellen er en flex-række, der ombryder, hvis der ikke er plads. */
.tabel.gg-trae td.gg-handl { white-space: normal; }
.tabel.gg-trae td.gg-handl > * { vertical-align: middle; }
.tabel.gg-trae td.gg-handl .knap-sekundaer { white-space: nowrap; margin-left: 12px; }
.tabel.gg-trae td.gg-handl .knap-tekst-lille { white-space: nowrap; }
.tabel.gg-trae td.num { white-space: nowrap; }
.tabel.gg-trae tr.faktura td.meta { white-space: nowrap; }
.tabel.gg-trae th:nth-child(2) { white-space: normal; }
.tabel.gg-trae tr.gruppe td { font-weight: 600; }
/* Forslag C (0144): det tomme dæmpes, det der venter markeres, det færdige træder tilbage igen. */
.tabel.gg-trae tr.gruppe.uden-tal td, .tabel.gg-trae tr.linje.uden-tal td { color: var(--c-text-dim); font-weight: 400; font-size: var(--t-lille); padding-top: 5px; padding-bottom: 5px; }
.tabel.gg-trae tr.uden-tal td .kode { background: transparent; border-color: transparent; color: var(--c-text-dim); }
.tabel.gg-trae tr.gruppe.uden-tal td { background: var(--c-bg); }
.tabel.gg-trae tr.venter td:first-child { box-shadow: inset 3px 0 0 var(--c-primary); }
.tabel.gg-trae tr.linje.venter td { background: var(--c-surface); }
.tabel.gg-trae tr.gruppe.faerdig td, .tabel.gg-trae tr.linje.faerdig td { color: var(--c-text-dim); font-weight: 400; }
.tabel.gg-trae tr.faerdig .gg-status.ok { font-weight: 600; }
.tabel.gg-trae tr.linje td { background: var(--c-bg); }
.tabel.gg-trae tr.linje td:first-child { padding-left: 26px; }
.tabel.gg-trae tr.linje.aaben td { background: var(--c-surface-alt); }
.tabel.gg-trae tr.faktura td { background: var(--c-surface); font-size: var(--t-lille); padding-top: 7px; padding-bottom: 7px; }
.tabel.gg-trae tr.faktura td:first-child { padding-left: 50px; }
.tabel.gg-trae tr.faktura .gg-fak { white-space: normal; }
.tabel.gg-trae tr.faktura .gg-fak .meta { color: var(--c-text-dim); }
.tabel.gg-trae tr.faktura .gg-fak .kode { font-size: 11px; padding: 0 5px; }
.tabel.gg-trae tr.gruppe.uden-kode td { border-top: 2px solid var(--c-warning); }
.tabel.gg-trae .gg-gnm { white-space: nowrap; }
.tabel.gg-trae tr.gruppe, .tabel.gg-trae tr.linje { cursor: pointer; }
.gg-maaler-lille { display: inline-block; width: 56px; height: 6px; background: var(--c-surface-alt); border-radius: 3px; vertical-align: middle; margin-right: 6px; overflow: hidden; }
.gg-maaler-lille i { display: block; height: 100%; background: var(--c-positive); }
.gg-status { font-family: var(--f-etiket); font-size: var(--t-etiket); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-dim); white-space: nowrap; }
.gg-status.ok { color: var(--c-positive); }
.gg-status.mangler { color: var(--c-warning); }
.gg-check { display: inline-flex; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--c-border); align-items: center; justify-content: center;
font-size: 10px; color: #fff; vertical-align: middle; }
.gg-check.godkendt { background: var(--c-positive); border-color: var(--c-positive); }
.gg-check.rettet { background: var(--c-primary); border-color: var(--c-primary); }
.tabel.gennemgang tr.gg-godkendt td { background: var(--c-positive-soft); }
.tabel.gennemgang tr.gg-rettet td { background: var(--c-primary-soft); }
.tabel.gennemgang tr.gg-raekke:focus { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.tabel.gennemgang td { vertical-align: middle; }
.gg-handl { white-space: nowrap; text-align: right; }
.gg-handl .knap-tekst-lille + .knap-tekst-lille, .gg-handl .knap-tekst-lille + .knap-sekundaer { margin-left: 12px; }
.gg-handl .meta, .tabel.gg-trae td.meta { font-size: var(--t-etiket); color: var(--c-text-dim); white-space: nowrap; }
.gg-filtre { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin: 0 0 6px; }
.gg-filtre label { display: flex; flex-direction: row; gap: 8px; align-items: center; font-size: var(--t-lille); font-weight: 500; }
.gg-filtre input[type=checkbox] { width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--c-primary); }
.gg-filtre kbd { display: inline-block; border: 1px solid var(--c-border); border-radius: 4px; padding: 0 5px; font-family: var(--f-etiket); font-size: var(--t-etiket); background: var(--c-surface); }
.gg-maaler { height: 6px; background: var(--c-surface-alt); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.gg-maaler i { display: block; height: 100%; background: var(--c-positive); }
.gg-afstemning { margin: -10px 0 14px; }
.fakta dd.pos { color: var(--c-positive); }
@media (max-width: 760px) { .gg-handl { white-space: normal; } .gg-handl .knap-tekst-lille { display: inline-block; margin: 2px 8px 2px 0; } }
/* ---------- Mellemfinansiering (054) ---------- */
.side-hoved > .side-knapper { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fin-versioner { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.fin-version { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--c-border-blod); border-radius: var(--radius);
background: var(--c-surface); text-decoration: none; color: var(--c-text); min-width: 0; }
.fin-version:hover { border-color: var(--c-primary); }
.fin-version.aktiv { border-color: var(--c-primary); box-shadow: inset 3px 0 0 var(--c-primary); }
.fin-v-titel { font-weight: 600; font-size: 14.5px; }
.fin-v-under { font-size: var(--t-lille); color: var(--c-text-dim); }
.fin-vhoved { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; font-size: 14.5px; }
.fin-panel { padding-bottom: 18px; }
.tabel.fin-tabel { min-width: 1140px; }
.tabel.fin-tabel td.fin-koblet { font-size: var(--t-lille); }
.tabel.fin-tabel td.fin-koblet .kode { font-size: 12px; padding: 0 5px; }
.tabel.fin-tabel tr.sek td, .tabel.fin-mdr tr.sek td { background: var(--c-surface-alt); font-weight: 600; }
.tabel.fin-tabel tr.fin-sum td { font-weight: 600; background: var(--c-bg); }
.tabel.fin-tabel { table-layout: fixed; }
.tabel.fin-tabel th:nth-child(1) { width: 210px; }
.tabel.fin-tabel th:nth-child(2) { width: 220px; }
.tabel.fin-tabel th:last-child { width: 96px; }
.tabel.fin-tabel td.num { white-space: nowrap; }
.tabel.fin-tabel td.gg-handl { white-space: nowrap; }
.tabel.fin-tabel tr.total td, .tabel.fin-mdr tr.total td { font-weight: 700; background: var(--c-surface-alt); border-top: 2px solid var(--c-border); }
.tabel tr.fin-uden td { background: var(--c-danger-soft); }
.tabel .num.over, .tabel .over { color: var(--c-danger); }
.tabel .num.under { color: var(--c-positive); }
.fin-mdr-ramme { overflow-x: auto; }
.tabel.fin-mdr { min-width: 1180px; font-size: var(--t-lille); }
.tabel.fin-mdr td:first-child, .tabel.fin-mdr th:first-child { position: sticky; left: 0; background: var(--c-surface); z-index: 1; min-width: 200px; }
.tabel.fin-mdr tr.sek td:first-child, .tabel.fin-mdr tr.total td:first-child { background: var(--c-surface-alt); }
.tabel.fin-mdr th.fin-nu { box-shadow: inset 0 -3px 0 var(--c-primary); }
.tabel.fin-mdr td.fin-faktisk { color: var(--c-text); }
.tabel.fin-mdr td.fin-skoen { background: var(--c-bg); color: var(--c-text-dim); font-style: italic; padding: 3px 4px; }
.fin-input { width: 92px; min-height: 30px; padding: 3px 6px; text-align: right; font: inherit; font-style: normal; font-variant-numeric: tabular-nums;
border: 1px solid var(--c-border-blod); border-radius: 6px; background: var(--c-surface); color: var(--c-text); }
.fin-input:focus { outline: 2px solid var(--c-primary); outline-offset: 0; }
.fin-input[aria-invalid="true"] { border-color: var(--c-danger); }
.fin-graf-ramme-boks { background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 14px; }
.fin-graf { display: block; }
.fin-graf-ramme { stroke: var(--c-danger); stroke-dasharray: 5 5; }
.fin-graf-faktisk { fill: none; stroke: var(--c-primary); stroke-width: 3; }
.fin-graf-skoen { fill: none; stroke: var(--c-primary); stroke-width: 2; stroke-dasharray: 6 5; }
.fin-graf-punkt { fill: var(--c-danger); }
.fin-graf-tekst { font-size: 13px; fill: var(--c-text-dim); }
.fin-graf-tekst.ramme { fill: var(--c-danger); }
.tabel.fin-fak { min-width: 900px; }
.fin-fakta dd small { display: block; font-weight: 400; font-size: var(--t-lille); color: var(--c-text-dim); margin-top: 2px; }
.fin-h3 { font-size: 17px; margin: 28px 0 10px; }
.tabel.fin-traek { min-width: 640px; }
.fin-graf-laan { fill: none; stroke: var(--c-positive); stroke-width: 2.5; }
.fin-graf-tekst.laan { fill: var(--c-positive); }
/* Online på Brugere-siden: grøn prik + ordet (farven er aldrig alene om at sige det). */
.online { display: inline-flex; align-items: center; gap: 6px; color: var(--c-positive); font-weight: 600; white-space: nowrap; }
.online-prik { width: 8px; height: 8px; border-radius: 50%; background: var(--c-positive); box-shadow: 0 0 0 3px var(--c-positive-soft); }
.online-nu { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
/* Testmiljøet: et tydeligt bånd over alt andet (deploy/test/). Advarselsfarve, så det aldrig forveksles med drift. */
.test-baand { background: var(--c-warning); color: #fff; font-size: var(--t-lille); font-weight: 600; text-align: center;
padding: 6px 16px; letter-spacing: .02em; }
/* Forsidens "Planer og høringer" (057) */
.maerke-brand { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.fs-plan-filtre { display: inline-flex; gap: 16px; flex-wrap: wrap; }
.fs-planer-ramme { margin: 4px 0 0; box-shadow: none; }
.fs-planer-tabel td { vertical-align: top; }
.fs-planer-tabel td:first-child { white-space: nowrap; }
.fs-plan-under { display: block; font-size: var(--t-lille); color: var(--c-text-dim); margin-top: 2px; }
.fs-plan-status { white-space: nowrap; }
.fs-plan-status small { display: block; font-size: var(--t-lille); color: var(--c-text-dim); margin-top: 4px; }
/* Gemte planer (059): stjernen i sidste kolonne og "Gemte (n)" i kortets hoved. */
.fs-planer-tabel td.fs-plan-stjerne-celle { padding: 4px 8px; vertical-align: middle; width: 1%; }
.fs-plan-stjerne { min-width: 44px; min-height: 44px; border: 0; background: transparent; border-radius: 999px; cursor: pointer;
font-size: 20px; line-height: 1; color: var(--c-text-dim); }
.fs-plan-stjerne:hover { color: var(--c-primary); background: var(--c-accent-soft); }
.fs-plan-stjerne[aria-pressed="true"] { color: var(--c-primary); }
.fs-plan-gemt-af { color: var(--c-primary-dark); }
.fs-plan-gemte { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.fs-plan-gemte:hover { text-decoration: underline; }
.fs-kom-gruppe { border: 1px solid var(--c-border); border-radius: var(--r-felt, 8px); padding: 12px 16px; margin: 0 0 14px; }
.fs-kom-gruppe legend { font-weight: 600; padding: 0 6px; display: flex; gap: 12px; align-items: center; }
.fs-kom-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.fs-kom-liste .afkryds { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; text-align: left; }
.fs-kom-liste .afkryds input { width: auto; margin: 0; }
/* Telefon: planerne som liste — kommune og status over planen, ingen vandret rulning. */
@media (max-width: 600px) {
#fs-planer .fs-kort-hoved { flex-wrap: wrap; }
.fs-plan-filtre { flex-basis: 100%; gap: 6px 16px; }
.fs-planer-tabel thead { display: none; }
.fs-planer-tabel, .fs-planer-tabel tbody { display: block; width: 100%; min-width: 0; }
.fs-planer-tabel tr { width: 100%; box-sizing: border-box; }
.fs-planer-tabel tr { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--c-border-blod); }
.fs-planer-tabel td { padding: 0; border: 0; }
.fs-planer-tabel td:nth-child(1) { grid-column: 1; grid-row: 1; align-self: center; }
.fs-planer-tabel td:nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
.fs-planer-tabel td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
.fs-planer-tabel td:nth-child(3) small { display: block; margin: 4px 0 0; }
.fs-planer-tabel td:nth-child(4) { display: none; }
.fs-planer-tabel td.fs-plan-stjerne-celle { grid-column: 3; grid-row: 1 / 3; justify-self: end; align-self: start; padding: 0; width: auto; }
.fs-planer-tabel td.fs-plan-stjerne-celle .fs-plan-stjerne { margin: -10px -10px 0 0; }
.fs-planer-ramme { min-width: 0; }
}
/* Økonomi-oversigten: tidsplan og S-kurve pr. projekt (058) */
/* Nederst i projektet, ét bredt kort pr. linje (tidsplanens faseliste skal kunne læses uden vandret rulning). */
.ok-tid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 16px 0 0; }
.ok-tid[aria-busy="true"] { display: block; }
.ok-panel { background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--radius, 12px); box-shadow: var(--skygge); padding: 18px 20px; min-width: 0; }
.ok-panel-hoved { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ok-panel-hoved h2, .ok-panel-hoved h3 { font-family: var(--f-serif, 'Fraunces', Georgia, serif); font-size: 17px; font-weight: 600; margin: 0; }
.ok-gantt, .ok-skurve { display: block; }
.ok-gantt .g-aar, .ok-skurve .g-akse { font-family: var(--f-etiket, 'Space Grotesk', sans-serif); font-size: 12px; fill: var(--c-text-dim); }
.ok-gantt .g-navn { font-size: 13px; fill: var(--c-text); }
.ok-gantt .g-bygning { font-size: 13.5px; font-weight: 600; fill: var(--c-text); }
.ok-gantt .g-aar { font-weight: 600; fill: var(--c-text); }
.ok-gantt .g-mdr { font-family: var(--f-etiket, 'Space Grotesk', sans-serif); font-size: 12px; fill: var(--c-text-dim); }
.ok-gantt .g-idag { font-family: var(--f-etiket, 'Space Grotesk', sans-serif); font-size: 12px; font-weight: 600; fill: var(--c-danger); }
.ok-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-lille); color: var(--c-text-dim); margin-top: 8px; }
.ok-legende i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; border: 1px solid transparent; vertical-align: -1px; margin-right: 6px; }
.ok-legende i.l-fuld { height: 0; border: 0; border-top: 3px solid var(--c-primary); border-radius: 0; vertical-align: 3px; }
.ok-legende i.l-prik { height: 0; border: 0; border-top: 2px dotted var(--c-primary); border-radius: 0; vertical-align: 3px; }
.ok-legende i.l-stiplet { height: 0; border: 0; border-top: 2px dashed var(--c-text); border-radius: 0; vertical-align: 3px; }
.ok-faser { margin-top: 10px; }
.ok-faser summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 32px; }
/* Økonomis forside — vælg projekt (0176). Felterne er ens: navn, en grå linje, evt. "til bekræftelse". */
.okf { max-width: 960px; margin: 8px auto 0; }
.okf h1 { text-align: center; font-size: 32px; margin: 0 0 26px; }
.okf-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.okf-kort { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; min-height: 92px; padding: 16px 18px;
background: var(--c-surface); border: 1px solid var(--c-border-blod); border-radius: var(--r-kort, 14px); box-shadow: var(--skygge);
color: var(--c-text); text-decoration: none; }
.okf-kort:hover, .okf-kort:focus-visible { border-color: var(--c-primary); }
.okf-navn { font-weight: 600; font-size: 16px; }
.okf-under { font-size: var(--t-lille); color: var(--c-text-dim); }
.okf-maerke { margin-top: auto; }
@media (max-width: 760px) { .okf-liste { grid-template-columns: minmax(0, 1fr); } .okf h1 { font-size: 26px; } }
/* Projektets side: navnet er sidens titel, med "▾" til at skifte projekt. */
.ok-titel { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ok-skift { min-width: 44px; min-height: 44px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; color: var(--c-primary); font-size: 16px; }
.ok-skift:hover, .ok-skift[aria-expanded="true"] { background: var(--c-accent-soft); }
.afsnit.ok-et-projekt { margin-top: 0; }
/* Aftalesedlens PDF (063/0183): lille dokumentikon før titlen. */
.as-pdf { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -6px 6px -6px -6px; vertical-align: middle;
color: var(--c-primary); border-radius: 6px; text-decoration: none; }
.as-pdf:hover, .as-pdf:focus-visible { background: var(--c-accent-soft); color: var(--c-primary-dark); }
/* Filfelt i dialoger (0178): træk-og-slip-zone. */
.fil-zone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 14px;
border: 1.5px dashed var(--c-kort-kant, #e6ded7); border-radius: var(--r-felt, 8px); background: var(--c-surface-alt);
font-size: 14px; font-weight: 400; color: var(--c-text-dim); text-align: center; cursor: pointer; }
.fil-zone:hover, .fil-zone.over, .fil-zone:focus-within { border-color: var(--c-primary); background: var(--c-accent-soft); }
.fil-zone.har-fil { border-style: solid; color: var(--c-text); }
.fil-zone b { color: var(--c-text); font-weight: 600; }
.fil-zone u { color: var(--c-primary); text-decoration-color: rgba(133, 82, 59, .35); text-underline-offset: 3px; }
.fil-zone .fil-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; } /* klik går via ; ingen browser-tooltip */
/* Ekstraarbejder (064) — boksen på Økonomi og linjen på Kontrakter. */
.ekstra-boks .tabelramme { margin-top: 10px; box-shadow: none; }
.as-opf { margin: 8px 0 0; font-size: 14px; color: var(--c-text-dim); }
.as-opf .staerk { color: var(--c-text); }
.ok-panel-knapper { display: inline-flex; gap: 18px; align-items: baseline; }
.fil-zone .fil-valgt { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fil-zone .fil-valgt[hidden] { display: none; }
button.as-pdf { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; }
.as-pdf-flere { width: auto; min-width: 28px; padding: 0 4px; gap: 1px; }
.as-pdf-antal { font-family: var(--f-etiket); font-size: var(--t-etiket); font-weight: 600; color: var(--c-primary); }
.dialog .felter label:has(.fil-zone) { grid-column: 1 / -1; }
/* Valget "Aftaleseddel" ud for hver fil (0186). */
.fil-zone .fil-valgt:has(.fil-hoved) { align-items: stretch; width: 100%; gap: 0; text-align: left; }
.fil-zone .fil-valgt:has(.fil-hoved) > u { align-self: center; margin-top: 6px; }
.fil-zone .fil-linje:has(.fil-hoved) { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 0;
border-bottom: 1px solid var(--c-border-blod); }
.fil-zone .fil-ingen { justify-content: flex-end; border-bottom: 0; }
.dialog .felter label.fil-hoved, .fil-hoved { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; min-height: 44px; flex: none; font-size: var(--t-lille, 13px);
color: var(--c-text-dim); cursor: pointer; }
.fil-hoved:has(input:checked) { color: var(--c-primary-dark); font-weight: 600; }
.fil-hoved input { accent-color: var(--c-primary); margin: 0; }
.valg-menu .fed { font-weight: 700; }
.th-tip { margin-left: 6px; vertical-align: 1px; text-transform: none; letter-spacing: 0; cursor: help; } /* forklaring ved en kolonneoverskrift (0186) */
.th-tip:hover, .th-tip:focus-visible { border-color: var(--c-primary); color: var(--c-primary); }