/* ==========================================================================
NERVE Finance — Apple-minimalistisk designsystem (stilark)
Kilde-sandhed for reglerne: ../DESIGN-SYSTEM.md
Denne fil indlejres i kreditor-fladen af gen_kreditor_demo.py ved build,
og kan bruges direkte i vores eget system:
Tokens er defineret på :root i lyst tema og gentaget for mørkt tema
(både @media prefers-color-scheme og [data-theme="dark"]).
========================================================================== */
/* ==========================================================================
NERVE Finance · Kreditor — Apple-minimalistisk skin
Retning 5 (rolig moderne) + ribbon-modellen fra retning 1.
Klassenavnene er uændrede, så gitter-motoren og al logik virker som før.
========================================================================== */
:root{
--sf:-apple-system,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;
--win:#F5F5F7; --chrome:#FFFFFF; --chrome-2:#F5F5F7; --chrome-3:#FBFBFD; --grid-head:#FFFFFF;
--line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.055);
--skygge:0 1px 1px rgba(0,0,0,.04),0 8px 26px rgba(0,0,0,.06);
--txt:#1D1D1F; --txt-2:#6E6E73; --txt-3:#8E8E93;
--acc:#0071E3; --acc-2:#0A84FF; --acc-soft:rgba(0,113,227,.10); --acc-mid:rgba(0,113,227,.26);
--graa-flade:rgba(120,120,128,.12);
--pos:#248A3D; --pos-flade:rgba(52,199,89,.14);
--neg:#D7261B; --neg-flade:rgba(255,59,48,.13);
--warn:#9A5B00; --warn-bg:rgba(255,149,0,.16);
--info:#0071E3; --sves:#C83228;
/* aldersskala i Apples systemfarver — valideret (CVD ΔE 11,8 / normalsyn 15,5) */
--age0:#8E8E93; --age1:#FFD60A; --age2:#FF9500; --age3:#E0301E; --age4:#7A1710;
--b-ikke:rgba(120,120,128,.05); --b-ikke2:rgba(120,120,128,.075);
--b-forf:rgba(255,149,0,.055); --b-forf2:rgba(255,149,0,.085);
--b-tot:rgba(0,113,227,.06); --b-tot2:rgba(0,113,227,.095);
--gh-ikke-bg:rgba(120,120,128,.06); --gh-ikke-fg:#6E6E73;
--gh-forf-bg:rgba(255,149,0,.10); --gh-forf-fg:#9A5B00;
--gh-tot-bg:rgba(0,113,227,.08); --gh-tot-fg:#0071E3;
--row-alt:transparent; --row-hover:rgba(120,120,128,.05);
--row-cur:rgba(0,113,227,.10); --row-sel:rgba(0,113,227,.16);
/* rykkertrin — farve står ALDRIG alene, tallet står altid i pillen */
--ryk1-bg:rgba(255,214,10,.28); --ryk1-fg:#7A5B00;
--ryk2-bg:rgba(255,149,0,.20); --ryk2-fg:#9A5B00;
--ryk3-bg:rgba(224,48,30,.16); --ryk3-fg:#B3241A;
--tip-bg:rgba(255,255,255,.94);
--rh:31px; --rhh:30px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--win:#1C1C1E; --chrome:#2C2C2E; --chrome-2:#1C1C1E; --chrome-3:#323235; --grid-head:#2C2C2E;
--line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.07);
--skygge:0 1px 1px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);
--txt:#F5F5F7; --txt-2:#AEAEB2; --txt-3:#8E8E93;
--acc:#0A84FF; --acc-2:#409CFF; --acc-soft:rgba(10,132,255,.18); --acc-mid:rgba(10,132,255,.4);
--graa-flade:rgba(120,120,128,.28);
--pos:#30D158; --pos-flade:rgba(48,209,88,.18);
--neg:#FF6961; --neg-flade:rgba(255,105,97,.18);
--warn:#FF9F0A; --warn-bg:rgba(255,159,10,.2); --info:#0A84FF;
--age0:#98989D; --age1:#FFD426; --age2:#FF9F0A; --age3:#FF6961; --age4:#C0433A;
--b-ikke:rgba(255,255,255,.03); --b-ikke2:rgba(255,255,255,.055);
--b-forf:rgba(255,159,10,.07); --b-forf2:rgba(255,159,10,.10);
--b-tot:rgba(10,132,255,.10); --b-tot2:rgba(10,132,255,.14);
--gh-ikke-bg:rgba(255,255,255,.06); --gh-ikke-fg:#AEAEB2;
--gh-forf-bg:rgba(255,159,10,.14); --gh-forf-fg:#FF9F0A;
--gh-tot-bg:rgba(10,132,255,.16); --gh-tot-fg:#409CFF;
--row-hover:rgba(255,255,255,.05); --row-cur:rgba(10,132,255,.16); --row-sel:rgba(10,132,255,.26);
--ryk1-bg:rgba(255,212,38,.24); --ryk1-fg:#FFD426;
--ryk2-bg:rgba(255,159,10,.24); --ryk2-fg:#FF9F0A;
--ryk3-bg:rgba(255,105,97,.22); --ryk3-fg:#FF6961;
--tip-bg:rgba(44,44,46,.94);
}}
:root[data-theme="dark"]{
--win:#1C1C1E; --chrome:#2C2C2E; --chrome-2:#1C1C1E; --chrome-3:#323235; --grid-head:#2C2C2E;
--line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.07);
--skygge:0 1px 1px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);
--txt:#F5F5F7; --txt-2:#AEAEB2; --txt-3:#8E8E93;
--acc:#0A84FF; --acc-2:#409CFF; --acc-soft:rgba(10,132,255,.18); --acc-mid:rgba(10,132,255,.4);
--graa-flade:rgba(120,120,128,.28);
--pos:#30D158; --pos-flade:rgba(48,209,88,.18);
--neg:#FF6961; --neg-flade:rgba(255,105,97,.18);
--warn:#FF9F0A; --warn-bg:rgba(255,159,10,.2); --info:#0A84FF;
--age0:#98989D; --age1:#FFD426; --age2:#FF9F0A; --age3:#FF6961; --age4:#C0433A;
--b-ikke:rgba(255,255,255,.03); --b-ikke2:rgba(255,255,255,.055);
--b-forf:rgba(255,159,10,.07); --b-forf2:rgba(255,159,10,.10);
--b-tot:rgba(10,132,255,.10); --b-tot2:rgba(10,132,255,.14);
--gh-ikke-bg:rgba(255,255,255,.06); --gh-ikke-fg:#AEAEB2;
--gh-forf-bg:rgba(255,159,10,.14); --gh-forf-fg:#FF9F0A;
--gh-tot-bg:rgba(10,132,255,.16); --gh-tot-fg:#409CFF;
--row-hover:rgba(255,255,255,.05); --row-cur:rgba(10,132,255,.16); --row-sel:rgba(10,132,255,.26);
--ryk1-bg:rgba(255,212,38,.24); --ryk1-fg:#FFD426;
--ryk2-bg:rgba(255,159,10,.24); --ryk2-fg:#FF9F0A;
--ryk3-bg:rgba(255,105,97,.22); --ryk3-fg:#FF6961;
--tip-bg:rgba(44,44,46,.94);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:grid;grid-template-rows:auto 1fr;font:13px/1.45 var(--sf);letter-spacing:-.01em;
color:var(--txt);background:var(--win);overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
svg.ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
stroke-linejoin:round;flex:none}
/* ---------- vinduets værktøjslinje ---------- */
.top{display:flex;align-items:center;gap:11px;height:52px;padding:0 14px;background:var(--chrome);
border-bottom:1px solid var(--line)}
.top .nav{display:flex;gap:1px}
.iconbtn{display:grid;place-items:center;width:30px;height:28px;border:none;border-radius:7px;
background:transparent;color:var(--txt-2);cursor:pointer}
.iconbtn:hover{background:var(--graa-flade);color:var(--txt)}
.iconbtn:disabled{opacity:.32;cursor:default}
.iconbtn:disabled:hover{background:transparent}
.top .firma{display:flex;flex-direction:column;line-height:1.2;margin-left:2px;font-weight:600;font-size:15px;
letter-spacing:-.02em}
.top .firma small{font-weight:400;font-size:11.5px;color:var(--txt-3);letter-spacing:0}
.top .firma svg{display:none}
.pill{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:3px 9px;border-radius:11px;
background:var(--warn-bg);color:var(--warn)}
.logo{display:flex;align-items:center;gap:5px;font-weight:600;font-size:12.5px;color:var(--txt-2);
letter-spacing:-.01em}
.logo b{color:var(--sves)}
/* ---------- ramme: rail + sidebar + arbejdsområde ---------- */
.app{display:grid;grid-template-columns:auto auto minmax(0,1fr);min-height:0}
.rail{width:54px;background:var(--win);border-right:1px solid var(--line-2);display:flex;flex-direction:column;
align-items:center;gap:2px;padding:8px 0;overflow:hidden}
.rail button{display:grid;place-items:center;width:38px;height:34px;border:none;border-radius:9px;
background:transparent;color:var(--txt-3);cursor:pointer;font-size:0}
.rail button svg{width:19px;height:19px}
.rail button span{display:none}
.rail button:hover{background:var(--graa-flade);color:var(--txt-2)}
.rail button.aktiv{background:var(--acc-soft);color:var(--acc)}
.rail button:disabled{opacity:.3;cursor:default}
.rail button:disabled:hover{background:transparent}
.tree{width:230px;background:var(--win);border-right:1px solid var(--line);display:flex;flex-direction:column;
min-height:0;padding:10px 10px 0}
.tree.skjult{display:none}
.tree .th{display:flex;align-items:center;gap:6px;padding:0 6px 6px}
.tree .th b{font-size:16px;font-weight:600;letter-spacing:-.02em;flex:1}
.tree .sogboks{position:relative;margin:0 0 10px}
.tree .sogboks svg{position:absolute;left:9px;top:8px;width:13px;height:13px;color:var(--txt-3)}
.tree input{width:100%;height:28px;padding:0 10px 0 28px;border:none;border-radius:8px;background:var(--graa-flade);
color:var(--txt);font-size:12.5px}
.tree input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.tree .liste{overflow-y:auto;flex:1;min-height:0;padding-bottom:10px;display:flex;flex-direction:column;gap:1px}
.tree .grp{display:flex;align-items:center;gap:4px;padding:12px 8px 3px;font-size:11px;font-weight:600;
color:var(--txt-3);letter-spacing:.01em;background:none;border:none}
.tree .grp svg{display:none}
.tree .it{display:flex;align-items:center;gap:9px;width:100%;height:30px;padding:0 9px;border:none;
background:transparent;color:var(--txt);font-size:13px;text-align:left;border-radius:8px;cursor:pointer}
.tree .it svg{width:16px;height:16px;color:var(--acc);stroke-width:1.7}
.tree .it:hover{background:var(--graa-flade)}
.tree .it.aktiv{background:var(--acc-soft);font-weight:600}
.tree .it:disabled{color:var(--txt-3);cursor:default}
.tree .it:disabled svg{color:var(--txt-3)}
.tree .it:disabled:hover{background:transparent}
.work{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--win)}
/* ---------- faneblade ---------- */
.tabstrip{display:flex;align-items:center;gap:2px;padding:8px 18px 0;background:var(--win)}
.tab{display:flex;align-items:center;gap:7px;height:28px;padding:0 12px;border:none;border-radius:9px;
background:transparent;color:var(--txt-2);font-size:12.5px;cursor:pointer;max-width:280px}
.tab svg{width:14px;height:14px;color:var(--txt-3)}
.tab .navn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab:hover{background:var(--graa-flade)}
.tab.aktiv{background:var(--chrome);color:var(--txt);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.10)}
.tab.aktiv svg{color:var(--acc)}
.tab .luk{display:grid;place-items:center;width:16px;height:16px;border:none;border-radius:50%;
background:transparent;color:var(--txt-3);cursor:pointer}
.tab .luk:hover{background:var(--graa-flade);color:var(--txt)}
.tab .luk svg{width:10px;height:10px}
/* ---------- ribbon: prioriteret række + overløb + ⌘K (retning 1, minimalt) ---------- */
.ribbon{background:var(--chrome);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:8px}
.ribtabs{display:flex;align-items:center;gap:2px;padding:6px 14px 0}
.ribtab{height:26px;padding:0 12px;border:none;border-radius:8px;background:transparent;color:var(--txt-2);
font-size:12.5px;cursor:pointer}
.ribtab:hover{background:var(--graa-flade)}
.ribtab.aktiv{background:var(--graa-flade);color:var(--txt);font-weight:600}
.ribbody{display:flex;align-items:center;gap:2px;padding:4px 16px 6px;overflow:hidden;flex-wrap:nowrap}
.ribbody.skjult{display:none}
.rgroup{display:flex;align-items:center;gap:2px;padding:0;border:none}
.rgroup+.rgroup{margin-left:8px;padding-left:8px;border-left:1px solid var(--line-2)}
.rgrow{display:flex;align-items:center;gap:2px}
.rglab{display:none}
.rbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
padding:4px 9px;border:none;border-radius:9px;background:transparent;color:var(--txt-2);
font-size:10.5px;line-height:1.2;text-align:center;cursor:pointer;white-space:nowrap}
.rbtn svg{width:19px;height:19px;color:var(--txt-2)}
.rbtn:hover{background:var(--graa-flade);color:var(--txt)}
.rbtn:hover svg{color:var(--txt)}
.rbtn.aktiv{background:var(--acc-soft);color:var(--acc)}
.rbtn.aktiv svg{color:var(--acc)}
.rbtn.primar{color:var(--acc);font-weight:600}
.rbtn.primar svg{color:var(--acc)}
.rbtn:disabled{opacity:.32;cursor:default}
.rbtn:disabled:hover{background:transparent}
.rbtn.rk{flex-direction:row;min-width:0;max-width:none;padding:5px 10px;font-size:12px;gap:7px}
.rbtn.rk svg{width:15px;height:15px}
.rfelt{display:flex;align-items:center;gap:7px;padding:0 8px;font-size:12px;color:var(--txt-2);white-space:nowrap;flex:none}
.rfelt label{color:var(--txt-3)}
.rfelt select,.rfelt input{height:26px;padding:0 8px;border:none;border-radius:8px;background:var(--graa-flade);
color:var(--txt);font-size:12.5px}
.rfelt select:focus{outline:2px solid var(--acc);outline-offset:-1px}
/* overløb + kommandopalette-knap */
.ribhoejre{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto;padding-left:10px}
.ribsenest{font-size:11.5px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
flex:0 1 auto;min-width:0;max-width:210px}
@media (max-width:1500px){.ribsenest{display:none}}
.cmdknap{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border:none;border-radius:14px;flex:none;
background:var(--acc-soft);color:var(--acc);font-size:12.5px;font-weight:600;cursor:pointer}
.cmdknap:hover{background:var(--acc-mid)}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;
border-radius:5px;background:var(--chrome);box-shadow:0 0 0 .5px var(--line);font-size:10.5px;color:var(--txt-2)}
.merebtn{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:56px;padding:4px 8px;border:none;flex:none;white-space:nowrap;
border-radius:9px;background:transparent;color:var(--txt-2);font-size:10.5px;cursor:pointer}
.merebtn:hover{background:var(--graa-flade)}
.merebtn svg{width:19px;height:19px}
.merebtn b{font-weight:400;font-size:10px;color:var(--txt-3)}
/* ---------- views ---------- */
.view{display:flex;flex-direction:column;min-height:0;flex:1;padding:16px 18px 0;gap:11px;overflow:hidden}
.view.skjult{display:none}
.viewhdr{display:flex;align-items:baseline;gap:10px;padding:0}
.viewhdr h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.03em}
.viewhdr .sub{font-size:12px;color:var(--txt-3)}
.seg{display:inline-flex;align-self:flex-start;padding:2px;border:none;border-radius:10px;background:var(--graa-flade)}
.seg button{height:26px;padding:0 14px;border:none;border-radius:8px;background:transparent;color:var(--txt-2);
font-size:12.5px;cursor:pointer}
.seg button+button{border:none}
.seg button.aktiv{background:var(--chrome);color:var(--txt);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
/* KPI-kæden: ikke forfaldent + forfaldent = saldo */
.kpirow{display:flex;align-items:stretch;gap:9px;border:none;border-radius:0;background:none;flex-wrap:wrap}
.kpirow .kpi{flex:1 1 160px;padding:8px 13px;background:var(--chrome);border-radius:11px;box-shadow:var(--skygge)}
.kpirow .lab{font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--txt-3)}
.kpirow .val{font-size:18px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:1px}
.kpirow .kpi.op{flex:0 0 18px;min-width:18px;display:grid;place-items:center;background:none;box-shadow:none;
color:var(--txt-3);font-weight:600;padding:0}
.kpirow .kpi.baand{border-left:3px solid var(--line)}
.kpirow .kpi.baand.ikke{border-left-color:var(--age0)}
.kpirow .kpi.baand.forf{border-left-color:var(--age2)}
.kpirow .kpi.baand.tot{border-left-color:var(--acc)}
.kpirow .kpi.baand.tot .val{color:var(--acc)}
.kpirow .kpi .split{display:flex;gap:11px;flex-wrap:wrap;margin-top:3px;font-size:11px;color:var(--txt-2);
font-variant-numeric:tabular-nums}
.kpirow .kpi .split span{display:inline-flex;align-items:center;gap:5px}
.kpirow .kpi .split i{width:8px;height:8px;border-radius:2px;display:inline-block}
/* ---------- gitteret som et kort ---------- */
.grid{display:flex;flex-direction:column;min-height:0;flex:1;border:none;background:var(--chrome);
border-radius:12px;box-shadow:var(--skygge);overflow:hidden;margin-bottom:0}
.gbar{display:flex;align-items:center;gap:8px;min-height:42px;padding:6px 14px;background:transparent;
border-bottom:1px solid var(--line-2);font-size:12px;color:var(--txt-3);flex-wrap:wrap}
.gbar b{color:var(--txt);font-variant-numeric:tabular-nums}
.gsog{position:relative;margin-left:auto}
.gsog svg{position:absolute;left:9px;top:7px;width:13px;height:13px;color:var(--txt-3)}
.gsog input{width:220px;height:27px;padding:0 10px 0 28px;border:none;border-radius:14px;background:var(--graa-flade);
color:var(--txt);font-size:12.5px}
.gsog input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 5px 0 11px;border:none;border-radius:12px;
background:var(--graa-flade);color:var(--txt);font-size:12px;white-space:nowrap}
.chip button{display:grid;place-items:center;width:17px;height:17px;border:none;border-radius:50%;
background:transparent;color:var(--txt-3);cursor:pointer}
.chip button:hover{background:rgba(120,120,128,.24);color:var(--txt)}
.chip button svg{width:10px;height:10px}
.lnk{border:none;background:none;color:var(--acc);font-size:12px;font-weight:600;cursor:pointer;padding:0}
.lnk:hover{text-decoration:underline}
.gscroll{flex:1;min-height:0;overflow:auto;background:var(--chrome)}
.gscroll:focus{outline:none}
table.g{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%;font-size:13px}
.g th,.g td{border-right:none;border-bottom:1px solid var(--line-2);padding:0 12px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.g thead th{position:sticky;top:0;z-index:4;height:var(--rhh);background:var(--grid-head);color:var(--txt-2);
border-bottom:1px solid var(--line);text-align:left;font-weight:600;font-size:11.5px;user-select:none;padding:0 9px 0 12px}
.g thead tr.fltrow th{top:var(--rhh);z-index:3;height:28px;background:var(--chrome);padding:0 8px;font-weight:400}
.g thead tr.fltrow input{width:100%;height:22px;padding:0 8px;border:none;border-radius:11px;background:var(--graa-flade);
color:var(--txt);font-size:11.5px}
.g thead tr.fltrow input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.g th .hd{display:flex;align-items:center;gap:4px;height:var(--rhh)}
.g th .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;cursor:inherit}
.g th.tal .lbl{text-align:right}
.g th .srt{font-size:8.5px;color:var(--acc);font-weight:700}
.g th .fnl{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;
width:18px;height:18px;border:none;border-radius:5px;background:var(--grid-head);color:var(--txt-3);
opacity:0;pointer-events:none;cursor:pointer;flex:none;z-index:2}
.g th:hover .fnl{pointer-events:auto}
.g th.tal .fnl{right:auto;left:6px}
.g th:hover .fnl{opacity:.75}
.g th .fnl:hover{background:var(--graa-flade);color:var(--txt)}
.g th .fnl.on{opacity:1;color:var(--acc);background:var(--acc-soft)}
.g th .fnl svg{width:12px;height:12px}
.g th .rsz{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;z-index:6}
.g th .rsz:after{content:"";position:absolute;top:18%;right:2px;width:3px;height:64%;border-radius:2px;background:transparent}
.g th:hover .rsz:after{background:var(--acc-mid)}
.g th{position:relative}
.g tbody td{height:var(--rh)}
.g tbody tr:nth-child(even){background:var(--row-alt)}
.g tbody tr:hover{background:var(--row-hover)}
.g tbody tr.sel{background:var(--row-sel)}
.g tbody tr.cur{background:var(--row-cur);box-shadow:none}
.g tbody tr.sel.cur{background:var(--row-sel)}
.g tbody tr.udl td{color:var(--txt-3)}
.g td.tal,.g th.tal{text-align:right;font-variant-numeric:tabular-nums}
.g td.gut,.g th.gut{padding:0;text-align:center;color:var(--acc);background:transparent}
.g tbody tr.cur td.gut{background:transparent}
.g td.gut svg{width:10px;height:10px;vertical-align:middle;opacity:.8}
.g td.act{text-align:center;padding:0}
.g tfoot td{position:sticky;bottom:0;z-index:4;height:34px;background:var(--chrome-3);
border-top:1px solid var(--line);font-weight:600;font-variant-numeric:tabular-nums}
/* Tom-teksten forklarer nu HVORFOR gitteret er tomt (kører / fejlede / ingen
kandidater), og de sætninger er længere end en kolonnebredde. Uden `normal`
arver den `nowrap` fra `.g td` og bliver klippet midt i forklaringen. */
.g td.tom{padding:26px 14px;color:var(--txt-3);text-align:center;white-space:normal;
max-width:0;line-height:1.5}
.g .cb{width:13px;height:13px;margin:0;accent-color:var(--acc);cursor:pointer}
.g td .ikon{display:inline-grid;place-items:center;width:22px;height:22px;border:none;border-radius:7px;
background:transparent;color:var(--acc);cursor:pointer}
.g td .ikon:hover{background:var(--acc-soft)}
.g td .ikon svg{width:15px;height:15px}
.g td .ikon.fundet{color:var(--pos);position:relative}
.g td .ikon.fundet .prik{position:absolute;top:1px;right:1px;width:6px;height:6px;border-radius:50%;background:var(--pos)}
.g td .ikon.over{background:var(--acc-soft);box-shadow:0 0 0 1px var(--acc)}
/* fyld-kolonne: æder overskudspladsen, så én kolonnes bredde er præcis den bredde brugeren satte */
.g th.fyld,.g td.fyld{border-left:none;border-right:none;padding:0;background:transparent}
.g thead th.fyld{background:var(--grid-head)}
.g thead tr.grph th.fyld{background:var(--chrome)}
.g tfoot td.fyld{background:var(--chrome-3)}
/* Under bredde-justering skal HELE fladen vise col-resize — også over knapper og
kolonnehoveder der selv sætter `cursor:pointer`/`grab`. Det blev før løst med
`!important`; nu lægger vi i stedet et gennemsigtigt skjold hen over siden.
Skjoldet bærer cursoren, og musehændelserne bobler videre til `document`,
hvor gitter-motorens mousemove/mouseup-lyttere sidder. */
body.kol-bredde{user-select:none}
body.kol-bredde:after{content:"";position:fixed;inset:0;z-index:84;cursor:col-resize;background:transparent}
.bredde-guide{position:fixed;width:2px;background:var(--acc);z-index:87;pointer-events:none}
.bredde-maal{position:fixed;z-index:88;padding:2px 8px;border-radius:9px;background:var(--acc);color:#fff;
font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none;
box-shadow:0 6px 18px rgba(0,0,0,.22)}
/* fri tekst pr. post */
.tekstfelt{min-height:21px;padding:2px 8px;border-radius:7px;font-size:12.5px;color:var(--txt);
cursor:text;outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tekstfelt:hover{background:var(--graa-flade)}
.tekstfelt:focus{background:var(--chrome);box-shadow:0 0 0 2px var(--acc);overflow:visible;white-space:pre}
.tekstfelt:empty:before{content:attr(data-tom);color:var(--txt-3)}
.tekstfelt:focus:empty:before{content:""}
.neg{color:var(--neg)}
.mute,.nul{color:var(--txt-3)}
.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border:none;border-radius:10px;
font-size:11.5px;font-weight:600;line-height:20px}
.badge svg{width:11px;height:11px}
.b-ok{background:var(--pos-flade);color:var(--pos)}
.b-forf{background:var(--neg-flade);color:var(--neg)}
.b-adv,.b-val{background:var(--warn-bg);color:var(--warn)}
.b-aaben,.b-bet{background:var(--acc-soft);color:var(--acc)}
.b-fak{background:var(--graa-flade);color:var(--txt-2)}
/* kolonnegrupper */
.g thead tr.grph th{position:sticky;top:0;z-index:5;height:22px;background:var(--chrome);color:var(--txt-3);
font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-align:center;
border-bottom:1px solid var(--line-2);border-right:none;padding:0 6px}
.g thead tr.grph th.gr-ikke{background:var(--gh-ikke-bg);color:var(--gh-ikke-fg)}
.g thead tr.grph th.gr-forf{background:var(--gh-forf-bg);color:var(--gh-forf-fg)}
.g thead tr.grph th.gr-tot{background:var(--gh-tot-bg);color:var(--gh-tot-fg)}
.g thead tr.grph .fold{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.g thead tr.grph .foldbtn{display:inline-flex;align-items:center;gap:3px;height:17px;padding:0 8px;border:none;
border-radius:9px;background:var(--chrome);box-shadow:0 0 0 .5px var(--line);color:var(--txt-2);
font:inherit;font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer}
.g thead tr.grph .foldbtn:hover{background:var(--graa-flade)}
.g thead tr.grph .foldbtn svg{width:10px;height:10px;stroke-width:2.2}
.g.hargrp thead tr:not(.grph) th{top:22px}
.g.hargrp thead tr.fltrow th{top:52px}
.g th.kant-v,.g td.kant-v{border-left:1px solid var(--line-2)}
.g td.ikke{background:var(--b-ikke)} .g td.forf{background:var(--b-forf)} .g td.tot{background:var(--b-tot)}
.g tbody tr:hover td.ikke,.g tbody tr:hover td.forf,.g tbody tr:hover td.tot{background:var(--b-ikke2)}
.g tbody tr.cur td.ikke,.g tbody tr.cur td.forf,.g tbody tr.cur td.tot{background:var(--row-cur)}
.g tbody tr.sel td.ikke,.g tbody tr.sel td.forf,.g tbody tr.sel td.tot{background:var(--row-sel)}
.g tfoot td.ikke,.g tfoot td.forf,.g tfoot td.tot{background:var(--chrome-3)}
/* flytbare kolonner */
.g th .grip{position:absolute;left:4px;top:50%;transform:translateY(-50%);display:inline-flex;flex-direction:column;
gap:2px;width:5px;flex:none;opacity:.22;cursor:grab;z-index:1}
.g th:hover .grip{opacity:.75}
.g thead tr:not(.grph):not(.fltrow) th[data-k]{cursor:grab}
.g thead tr:not(.grph):not(.fltrow) th[data-k]:active{cursor:grabbing}
.g th .grip i{display:block;height:2px;border-radius:1px;background:var(--txt-3)}
.g th.traek{background:var(--acc-soft)}
.dropline{position:fixed;width:3px;background:var(--acc);border-radius:2px;z-index:85;pointer-events:none}
.dropline:before{content:"";position:absolute;top:-4px;left:-3px;width:9px;height:9px;border-radius:50%;background:var(--acc)}
.kolghost{position:fixed;z-index:86;background:var(--chrome);border-radius:9px;
box-shadow:0 12px 30px rgba(0,0,0,.22),0 0 0 .5px var(--line);padding:5px 11px;font-size:12px;font-weight:600;
color:var(--acc);display:flex;align-items:center;gap:7px;pointer-events:none}
.kolghost svg{width:12px;height:12px}
/* aldersbjælke */
.agebar{display:inline-flex;align-items:center;gap:2px;height:5px;vertical-align:middle;border-radius:3px}
.agebar i{display:block;height:100%;border-radius:2px}
.agebar.tom{height:5px;border-radius:3px;background:var(--line-2);border:none;opacity:1}
/* ---------- popovers (filter, kolonner, overløb) ---------- */
.pop{position:fixed;z-index:80;width:280px;padding:10px;border:none;border-radius:14px;
background:color-mix(in srgb,var(--chrome) 94%,transparent);backdrop-filter:blur(28px) saturate(180%);
box-shadow:0 20px 50px rgba(0,0,0,.22),0 0 0 .5px var(--line);font-size:12.5px}
.pop.bred{width:262px}
.pop .pt{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px;margin-bottom:8px}
.pop .pt svg{width:14px;height:14px;color:var(--acc)}
.pop select,.pop input[type=text],.pop input[type=number],.pop input[type=date],.pop input[type=search]{
width:100%;height:28px;padding:0 9px;border:none;border-radius:8px;background:var(--graa-flade);color:var(--txt);
font:inherit;font-size:12.5px;margin-bottom:6px}
.pop select:focus,.pop input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.pop .to{display:flex;gap:6px}
.pop .vals{max-height:196px;overflow:auto;border:none;border-radius:9px;background:var(--graa-flade);
padding:4px;margin-bottom:8px}
.pop .vals label{display:flex;align-items:center;gap:8px;height:24px;padding:0 6px;border-radius:6px;cursor:pointer;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop .vals label:hover{background:var(--chrome)}
.pop .vals input{margin:0;width:13px;height:13px;accent-color:var(--acc);flex:none}
.pop .kol label{display:flex;align-items:center;gap:8px;height:26px;padding:0 6px;border-radius:6px;cursor:pointer}
.pop .kol label:hover{background:var(--chrome)}
.pop .kol label .kn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop .kol label .mv{width:20px;height:20px;border:none;border-radius:6px;background:var(--chrome);
box-shadow:0 0 0 .5px var(--line);color:var(--txt-2);font-size:9px;cursor:pointer;flex:none}
.pop .kol label .mv:hover{color:var(--acc)}
.pop .rk{display:flex;gap:7px;justify-content:flex-end;margin-top:2px}
.pop .note{font-size:11.5px;color:var(--txt-3);margin-bottom:7px;line-height:1.35}
.btn{height:28px;padding:0 13px;border:none;border-radius:9px;background:var(--acc);color:#fff;font-size:12.5px;
font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--graa-flade);color:var(--txt)}
.btn:disabled{opacity:.4;cursor:default}
/* overløbsmenu i ribbon */
.popmere{position:fixed;z-index:80;width:auto;min-width:280px;max-width:520px;padding:8px;border-radius:14px;
background:color-mix(in srgb,var(--chrome) 94%,transparent);backdrop-filter:blur(28px) saturate(180%);
box-shadow:0 20px 50px rgba(0,0,0,.22),0 0 0 .5px var(--line);
display:flex;flex-wrap:wrap;gap:2px}
.popmere .rbtn{min-width:78px}
.popmere .rgroup+.rgroup{margin-left:0;padding-left:0;border-left:none}
.popmere .rglab{display:block;width:100%;padding:6px 8px 2px;font-size:10.5px;font-weight:600;color:var(--txt-3)}
.popmere .rgroup{flex-direction:column;align-items:stretch;width:100%}
.popmere .rgrow{flex-wrap:wrap}
/* ---------- kommandopalette ---------- */
.palbg{position:fixed;inset:0;background:rgba(0,0,0,.18);backdrop-filter:blur(2px);z-index:95}
.pal{position:fixed;left:50%;top:110px;transform:translateX(-50%);width:660px;max-width:94vw;border-radius:18px;
z-index:96;background:color-mix(in srgb,var(--chrome) 92%,transparent);backdrop-filter:blur(30px) saturate(180%);
box-shadow:0 30px 80px rgba(0,0,0,.3),0 0 0 .5px var(--line);overflow:hidden}
.pal .palinp{display:flex;align-items:center;gap:11px;height:56px;padding:0 18px;border-bottom:1px solid var(--line-2)}
.pal .palinp svg{width:19px;height:19px;color:var(--txt-3)}
.pal .palinp input{flex:1;border:none;background:none;font-size:18px;letter-spacing:-.02em;color:var(--txt)}
.pal .palinp input:focus{outline:none}
.pal .palliste{max-height:392px;overflow:auto;padding:6px 0 0}
.pal h5{margin:0;padding:8px 18px 3px;font-size:10.5px;font-weight:600;letter-spacing:.05em;color:var(--txt-3)}
.pal .r{display:flex;align-items:center;gap:11px;height:42px;padding:0 18px;font-size:13.5px;cursor:pointer}
.pal .r svg{width:17px;height:17px;color:var(--acc)}
.pal .r small{color:var(--txt-3);font-size:12px}
.pal .r .h{margin-left:auto;display:flex;gap:5px}
.pal .r.paa{background:var(--acc);color:#fff}
.pal .r.paa svg{color:#fff}
.pal .r.paa small{color:rgba(255,255,255,.82)}
.pal .r.paa .kbd{background:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.pal .paltom{padding:22px 18px;color:var(--txt-3);text-align:center}
.pal .palfod{display:flex;align-items:center;gap:14px;height:38px;padding:0 18px;border-top:1px solid var(--line-2);
font-size:11.5px;color:var(--txt-3)}
/* ---------- bundpanel i detalje ---------- */
.udbar{display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 14px;background:var(--chrome);
border-radius:12px;box-shadow:var(--skygge);flex-wrap:wrap;font-size:12.5px;border:none}
.udbar .net{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.detbund{max-height:40vh;overflow:auto;border:none;background:var(--chrome);border-radius:12px;
box-shadow:var(--skygge);padding:2px 16px 16px}
.detbund.skjult{display:none}
.detbund h2{font-size:14px;font-weight:600;letter-spacing:-.02em;margin:14px 0 7px;display:flex;align-items:center;gap:9px}
.detbund .sub{font-size:12px;color:var(--txt-2);margin-bottom:7px}
table.mini{border-collapse:separate;border-spacing:0;font-size:12.5px;width:100%;max-width:960px}
table.mini th{background:transparent;border:none;border-bottom:1px solid var(--line);padding:3px 9px;text-align:left;
font-weight:600;font-size:11.5px;color:var(--txt-2)}
table.mini td{border:none;border-bottom:1px solid var(--line-2);padding:3px 9px;height:26px}
table.mini td.tal,table.mini th.tal{text-align:right;font-variant-numeric:tabular-nums}
table.mini tfoot td{border-top:1px solid var(--line);font-weight:600}
.kort{border:none;border-left:3px solid var(--acc);border-radius:10px;padding:8px 12px;margin:8px 0;max-width:960px;
background:var(--acc-soft)}
.kort.ok{border-left-color:var(--pos);background:var(--pos-flade)}
.kort .lab{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--txt-2)}
.smalbtn{height:24px;padding:0 11px;border:none;border-radius:12px;background:var(--graa-flade);color:var(--txt);
font-size:11.5px;font-weight:600;cursor:pointer}
.smalbtn:hover{background:var(--acc-soft);color:var(--acc)}
/* ---------- statuslinje ---------- */
.status{flex:none;display:flex;align-items:center;gap:16px;height:38px;padding:0 18px;background:var(--win);
border-top:1px solid var(--line);font-size:11.5px;color:var(--txt-3);flex-wrap:nowrap;overflow:hidden}
.status b{font-variant-numeric:tabular-nums;color:var(--txt)}
.status .h{margin-left:auto;white-space:nowrap}
/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:90}
.modal{background:color-mix(in srgb,var(--chrome) 96%,transparent);backdrop-filter:blur(30px) saturate(180%);
border:none;border-radius:18px;padding:20px;max-width:580px;width:92%;
box-shadow:0 30px 80px rgba(0,0,0,.32),0 0 0 .5px var(--line)}
.modal h3{margin:0 0 10px;font-size:16px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.modal h3 svg{width:17px;height:17px;color:var(--acc)}
.modal p{margin:0 0 10px;font-size:13px;color:var(--txt-2)}
.modal p b{color:var(--txt)}
.modal code{background:var(--graa-flade);padding:1px 6px;border-radius:6px;font-size:12px}
/* ==========================================================================
DEBITOR: rykkertæller, hover-historik, linjestatus og admin
Reglerne står i ../DESIGN-SYSTEM.md § 8. Ret dem BEGGE steder.
========================================================================== */
/* ---------- rykkertæller (oversigten) ----------
Farven står aldrig alene: tallet er en del af pillen, og nul er en dæmpet
streg — ikke et grønt flueben, for "ingen rykker sendt" er ikke en succes. */
.rykpil{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px;border-radius:10px;
font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;line-height:20px;
background:var(--graa-flade);color:var(--txt-3);cursor:default}
.rykpil.n1{background:var(--ryk1-bg);color:var(--ryk1-fg)}
.rykpil.n2{background:var(--ryk2-bg);color:var(--ryk2-fg)}
.rykpil.n3{background:var(--ryk3-bg);color:var(--ryk3-fg)}
.rykpil svg{width:11px;height:11px}
.rykpil.nul{background:none;padding:0}
/* ASPECT4's egen historik — tydeligt adskilt: stiplet, aldrig farvet som vores */
.a4pil{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:10px;
font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--txt-3);
box-shadow:inset 0 0 0 1px var(--line);background:none;cursor:default}
/* ---------- hover-historik ----------
Vises efter 140 ms, forsvinder straks. Den er LÆSNING, ikke en menu:
ingen knapper indeni, så musen aldrig skal ramme den. */
.hovertip{position:fixed;z-index:97;max-width:420px;min-width:230px;padding:10px 12px;border-radius:12px;
background:var(--tip-bg);backdrop-filter:blur(26px) saturate(180%);
box-shadow:0 18px 44px rgba(0,0,0,.24),0 0 0 .5px var(--line);
font-size:12px;line-height:1.45;color:var(--txt);pointer-events:none}
.hovertip h6{margin:0 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.05em;
text-transform:uppercase;color:var(--txt-3)}
.hovertip .tl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0}
.hovertip .tl .n{font-variant-numeric:tabular-nums;color:var(--txt-2);white-space:nowrap}
.hovertip .tl .v{overflow:hidden;text-overflow:ellipsis}
.hovertip .tom{color:var(--txt-3)}
.hovertip .adskil{margin:8px 0 6px;border-top:1px solid var(--line-2)}
.hovertip b{font-weight:600}
/* ---------- linjestatus (åbne poster + kontokort) ----------
To knapper, ikke ét flueben: "medtag" og "udelad" er begge beslutninger, og
en udeladelse kræver en begrundelse. Standard (ingen beslutning) er dæmpet. */
.linjestat{display:inline-flex;align-items:center;gap:3px}
.linjestat button{height:21px;padding:0 8px;border:none;border-radius:7px;background:transparent;
color:var(--txt-3);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;display:inline-flex;
align-items:center;gap:4px;white-space:nowrap}
.linjestat button svg{width:12px;height:12px}
.linjestat button:hover{background:var(--graa-flade);color:var(--txt)}
.linjestat button.paa{background:var(--acc-soft);color:var(--acc)}
.linjestat button.ud.paa{background:var(--neg-flade);color:var(--neg)}
.linjestat .std{color:var(--txt-3);font-weight:400}
/* ---------- rykkerside ---------- */
.rykhoved{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.advkort{border:none;border-left:3px solid var(--warn);border-radius:10px;padding:7px 12px;margin:5px 0;
background:var(--warn-bg);max-width:1100px;font-size:12.5px;line-height:1.45}
.advkort.neg{border-left-color:var(--neg);background:var(--neg-flade)}
.advkort.info{border-left-color:var(--acc);background:var(--acc-soft)}
/* Kun kortets OVERSKRIFT er en blok. Et almindeligt midt i teksten skal blive
stående i linjen — ellers hopper 'kun visuelt på brevet' ned på sin egen linje. */
.advkort b.ov{display:block;margin-bottom:1px}
.advliste{margin:0;padding-left:17px}
.advliste li{margin:2px 0}
/* admin: felterne står i par, etiketten over feltet — som i Systemindstillinger */
.adm{max-width:1100px;padding:2px 2px 22px}
.adm section{background:var(--chrome);border-radius:14px;box-shadow:var(--skygge);padding:15px 18px;margin:0 0 14px}
.adm h2{margin:0 0 3px;font-size:15px;font-weight:600;letter-spacing:-.02em}
.adm .hjaelp{margin:0 0 12px;font-size:12px;color:var(--txt-2);max-width:760px;line-height:1.5}
.adm .felter{display:flex;flex-wrap:wrap;gap:12px 18px}
.adm label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:600;
letter-spacing:.02em;color:var(--txt-2)}
.adm label input,.adm label select,.adm label textarea{height:30px;min-width:150px;padding:0 10px;border:none;
border-radius:8px;background:var(--graa-flade);color:var(--txt);font:inherit;font-size:12.5px;
font-variant-numeric:tabular-nums}
.adm label textarea{height:auto;min-height:62px;padding:7px 10px;resize:vertical;font-variant-numeric:normal}
.adm label input:focus,.adm label select:focus,.adm label textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
.adm label.tjek{flex-direction:row;align-items:center;gap:8px;font-size:12.5px;font-weight:400;color:var(--txt)}
.adm label.tjek input{width:15px;height:15px;min-width:0;accent-color:var(--acc)}
.adm table.trin{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
.adm table.trin th{text-align:left;font-size:10.5px;font-weight:600;color:var(--txt-2);
padding:3px 8px;border-bottom:1px solid var(--line)}
.adm table.trin td{padding:3px 8px;border-bottom:1px solid var(--line-2)}
.adm table.trin input[type=number]{width:74px;height:26px;padding:0 7px;border:none;border-radius:7px;
background:var(--graa-flade);color:var(--txt);font:inherit;font-variant-numeric:tabular-nums}
.adm table.trin input[type=checkbox]{width:15px;height:15px;accent-color:var(--acc)}
.adm .gemrk{display:flex;align-items:center;gap:10px;margin-top:6px}
.adm .laast{font-size:11.5px;color:var(--txt-3)}
/* kvitteringsdialogen: advarslen som den ER, i fast bredde, plus et navn */
.kvitboks{max-height:38vh;overflow:auto;white-space:pre-wrap;font:12px/1.5 ui-monospace,SFMono-Regular,
'SF Mono',Menlo,monospace;background:var(--graa-flade);border-radius:10px;padding:11px 13px;margin:0 0 12px;
font-variant-numeric:tabular-nums}
.kvitnavn{width:100%;height:32px;padding:0 11px;border:none;border-radius:9px;background:var(--graa-flade);
color:var(--txt);font:inherit;font-size:13px;margin-bottom:12px}
.kvitnavn:focus{outline:2px solid var(--acc);outline-offset:-1px}
.modal .rk{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.modal .rk .venstre{margin-right:auto;font-size:11.5px;color:var(--txt-3)}
.btn.fare{background:var(--neg)}
/* Kvitteringsdialogens punktliste: overskriften OG punkterne bygges af kundens
FAKTISKE advarsler, aldrig af en hårdkodet sætning. Antal og nettobeløb står
sammen — et alarmord uden en konsekvens er ikke en advarsel. */
.kvitliste{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--txt-2)}
.kvitliste b{color:var(--txt)}
/* ==========================================================================
ARBEJDS- OG FEJLBJÆLKE (over statuslinjen, synlig i alle faner)
--------------------------------------------------------------------------
Statuslinjen rydder sig selv efter fire sekunder. Det er rigtigt for en
kvittering ("Tekst gemt") og forkert for alt der VARER (rykkerkørslen tager
op mod fem minutter) eller alt der er GALT (en fejl skal kunne læses færdig).
De to tilstande har derfor deres egen bjælke, og fejlbjælken lukkes af et
menneske — ikke af et ur.
========================================================================== */
/* `flex:none` er ikke pynt: `.work` er en flex-kolonne, og uden det ville de to
bjælker æde af statuslinjens 38 px i stedet for af gitteret. Pladsen skal
komme fra `.view` (som har `flex:1;min-height:0`), aldrig fra statuslinjen. */
.arbejder,.fladebesked{flex:none;display:flex;align-items:center;gap:10px;margin:0 18px 8px;padding:8px 13px;
border-radius:11px;font-size:12.5px;line-height:1.45;box-shadow:var(--skygge)}
.arbejder{background:var(--acc-soft);color:var(--txt);border-left:3px solid var(--acc)}
.arbejder .ic{width:16px;height:16px;color:var(--acc);flex:none}
.arbejder .tx,.fladebesked .tx{flex:1;min-width:0}
.arbejder .ur{font-variant-numeric:tabular-nums;color:var(--txt-2);white-space:nowrap}
@keyframes snurre{to{transform:rotate(360deg)}}
.arbejder .snurre{animation:snurre 1s linear infinite;transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){.arbejder .snurre{animation:none;opacity:.6}}
.fladebesked{background:var(--neg-flade);color:var(--txt);border-left:3px solid var(--neg)}
.fladebesked .ic{width:16px;height:16px;color:var(--neg);flex:none}
/* Hjælpesætningen er det eneste brugeren kan handle på — den skal kunne ses. */
.fladebesked .gor{color:var(--txt);font-weight:600}
.fladebesked .luk{display:grid;place-items:center;width:22px;height:22px;border:none;border-radius:7px;
background:transparent;color:var(--txt-2);cursor:pointer;flex:none}
.fladebesked .luk:hover{background:var(--graa-flade);color:var(--txt)}
.fladebesked .luk svg{width:12px;height:12px}
/* ASPECT4 svarede ikke — statuslinjen siger det, i stedet for at lade "server: N"
stå som om alt var i orden. */
.status .advarsel{color:var(--warn)}
/* ---------- "kunne ikke hentes" er ikke "findes ikke" ----------
En tom tæller ville påstå at der er sendt nul rykkere; en tom linjestatus at
ingen linje er udeladt. Begge dele ville være påstande fladen ikke har
dækning for, når kaldet fejlede. Ukendt ser derfor ud som ukendt. */
.rykpil.n0,.rykpil.ukendt{background:var(--graa-flade);color:var(--txt-2)}
.rykpil.ukendt{font-weight:700;cursor:help}
.linjestat.ukendt{color:var(--warn);gap:5px;cursor:help}
.linjestat.ukendt svg{width:12px;height:12px;color:var(--warn)}
.linjestat.ukendt .std{color:var(--warn);font-weight:600}
/* ==========================================================================
DATOFELT — dd-mm-åååå uanset maskinens sprog
--------------------------------------------------------------------------
`` viser OS-locale (08/19/2026 på en engelsk Mac) og kan
ikke tvinges til dansk med `lang` eller CSS. Feltet er derfor et tekstfelt
fladen selv formaterer, med en kalenderknap der åbner browserens egen vælger.
Den native kontrol ligger stadig i DOM'en — 1 px, usynlig — så `showPicker()`
har noget at åbne fra, og så vælgeren popper op det rigtige sted.
========================================================================== */
.datofelt{position:relative;display:inline-flex;align-items:center}
.datofelt .datotekst{height:30px;min-width:132px;padding:0 32px 0 10px;border:none;border-radius:8px;
background:var(--graa-flade);color:var(--txt);font:inherit;font-size:12.5px;
font-variant-numeric:tabular-nums;letter-spacing:0}
.datofelt .datotekst:focus{outline:2px solid var(--acc);outline-offset:-1px}
.datofelt .datoknap{position:absolute;right:3px;display:grid;place-items:center;width:26px;height:24px;
border:none;border-radius:7px;background:transparent;color:var(--txt-3);cursor:pointer}
.datofelt .datoknap:hover{background:var(--chrome);color:var(--acc)}
.datofelt .datoknap svg{width:14px;height:14px}
.datofelt .datovaelger{position:absolute;right:8px;bottom:0;width:1px;height:1px;padding:0;border:none;
opacity:0;pointer-events:none;background:none}
.datofelt.fejl .datotekst{outline:2px solid var(--neg);outline-offset:-1px}
/* ==========================================================================
RIBBON: ⌘K-knappen må ALDRIG klippes
--------------------------------------------------------------------------
Kommandopaletten er den vej designsystemet udpeger til nye funktioner (§ 4).
Vokser den prioriterede række alligevel ud over vinduet — fx fordi nogen
glemte at flytte en knap i `RIB_OVERLOEB` — skal det være en KNAP i rækken
der klippes, ikke ⌘K.
Kun den SIDSTE gruppe må krympe (`nth-last-child(2)`, fordi `.ribhoejre`
altid er sidste barn). Lod vi alle grupper krympe forholdsmæssigt, ville hver
eneste knap i rækken blive klippet en lille smule — én klippet knap er bedre
end syv halve. `.ribhoejre` har `flex:0 0 auto` og krymper aldrig. */
.ribbody>.rgroup{flex:0 0 auto}
.ribbody>.rgroup:nth-last-child(2){flex:0 1 auto;min-width:0;overflow:hidden}
/* ==========================================================================
GENNEMGANG — arbejdslisten fra den samlede kørsel (§ 7.10)
--------------------------------------------------------------------------
Christian 19-08-2026: "Alle dem som har 'mangler' skal kunne køres igennem,
men efter gennemgang, lav derfor et passende UI billede hvor der kan styres
i." Billedet skal kunne bære 80 kunder én ad gangen uden at man mister
overblikket. Derfor to spalter og ÉN beslutning ad gangen:
venstre hvem der er tilbage (fast bredde, 31 px rækker, tabular-nums)
højre hvad der er galt for DENNE kunde, hvad brevet indeholder,
og de tre knapper
⛔ INGEN NYE FARVETOKENS. Alt herunder bruger de tokens der allerede står i
alle tre tema-blokke — så en farve ikke kan komme til at være defineret
kun ét sted (§ 1, Temaer).
⛔ FARVE STÅR ALDRIG ALENE. En afgjort kunde får både et mærke med tekst og
en dæmpet række; en ufuldstændig beslutning får både en tekst og en
slået-fra knap.
========================================================================== */
/* ⛔ ALDRIG `style="display:flex"` PÅ EN BEHOLDER DER OGSÅ KAN VÆRE `.skjult`.
En inline `display:` slår ENHVER regel i stilarket, også `.skjult` til sidst
(som netop er bygget for at undgå `!important`). Beholderen ville da være
permanent synlig oven i de øvrige faner. Samme fælde som `driving.html`s
`.page`-regel i platform/CLAUDE.md. Derfor en klasse. */
.ggwrap{display:flex;flex-direction:column;gap:11px;flex:1;min-height:0}
.gg{display:flex;gap:12px;flex:1;min-height:0}
.gg-liste{flex:0 0 296px;display:flex;flex-direction:column;min-height:0;background:var(--chrome);
border-radius:12px;box-shadow:var(--skygge);overflow:hidden}
.gg-liste .ggl-hdr{height:var(--rhh);display:flex;align-items:center;gap:8px;padding:0 12px;
border-bottom:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--txt-2)}
.gg-liste .ggl-tal{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--txt-3)}
.seg button span{margin-left:6px;font-variant-numeric:tabular-nums;color:var(--txt-3)}
.gg-liste .ggl-rul{flex:1;min-height:0;overflow:auto}
.ggrad{display:flex;align-items:center;gap:9px;height:var(--rh);padding:0 12px;cursor:pointer;
border-bottom:1px solid var(--line-2);font-size:12.5px;color:var(--txt)}
.ggrad:hover{background:var(--row-hover)}
.ggrad.aktiv{background:var(--row-cur)}
.ggrad .nr{flex:0 0 52px;color:var(--txt-3);font-variant-numeric:tabular-nums;font-size:12px}
.ggrad .nv{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ggrad .bl{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--txt-2);font-size:12px}
.ggrad .bl .val{font-style:normal;color:var(--txt-3);font-size:11px}
.ggrad .bl.udfald{font-variant-numeric:normal;font-size:11.5px;color:var(--txt-3)}
.ggrad.afgjort{color:var(--txt-3)}
.ggrad.afgjort .nv{text-decoration:line-through;text-decoration-color:var(--txt-3)}
/* Fremdrift: hvor mange er tilbage. Bjælken står ALDRIG alene — tallet står
ved siden af, og en tom bjælke tegnes som en neutral streg (§ 1). */
.ggfrem{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--txt-2)}
.ggfrem b{color:var(--txt);font-variant-numeric:tabular-nums}
.ggfrem .bar{flex:0 0 168px;height:5px;border-radius:3px;background:var(--graa-flade);overflow:hidden}
.ggfrem .bar i{display:block;height:100%;background:var(--acc);border-radius:3px}
.gg-kort{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--chrome);
border-radius:12px;box-shadow:var(--skygge);overflow:hidden}
.gg-kort .ggk-rul{flex:1;min-height:0;overflow:auto;padding:15px 18px 6px}
.gg-kort h2{margin:0 0 2px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.gg-kort h3{margin:17px 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--txt-2)}
.ggtal{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--txt-2);margin-top:5px}
.ggtal b{color:var(--txt);font-variant-numeric:tabular-nums}
/* Manglerne: én sætning pr. linje, med antal OG nettobeløb. */
.ggmangel{display:flex;gap:9px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line-2);
font-size:12.5px}
.ggmangel:last-child{border-bottom:none}
.ggmangel svg{flex:0 0 13px;width:13px;height:13px;color:var(--warn);transform:translateY(2px)}
.ggmangel .t{flex:1;min-width:0}
.ggmangel .n{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--txt-2)}
/* Linjerne i brevet — én afkrydsning pr. linje, som i gitteret (§ 3). */
table.gglinjer{border-collapse:separate;border-spacing:0;font-size:12.5px;width:100%}
table.gglinjer th{border-bottom:1px solid var(--line);padding:3px 9px;text-align:left;font-weight:600;
font-size:11.5px;color:var(--txt-2)}
table.gglinjer td{border-bottom:1px solid var(--line-2);padding:0 9px;height:var(--rh)}
table.gglinjer .tal{text-align:right;font-variant-numeric:tabular-nums}
table.gglinjer tr.ude td{color:var(--txt-3)}
table.gglinjer tr.ude td.bilag{text-decoration:line-through}
table.gglinjer input[type=checkbox]{accent-color:var(--acc);width:14px;height:14px}
/* Beslutningsbjælken bliver stående nederst — den er skærmens formål. */
.ggbeslut{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 18px;
border-top:1px solid var(--line);background:var(--chrome-3)}
.ggbeslut .kvitnavn{width:216px}
.ggbeslut .hvorfor{flex:1 1 100%;order:9;font-size:12px;color:var(--txt-2);margin:0}
.ggbegrund{flex:1 1 100%;order:8;display:flex;align-items:center;gap:9px;font-size:12.5px}
.ggbegrund input{flex:1;max-width:460px;height:28px;padding:0 10px;border:none;border-radius:8px;
background:var(--graa-flade);color:var(--txt);font-size:12.5px;font-family:var(--sf)}
.ggbegrund input:focus{outline:2px solid var(--acc);outline-offset:-1px}
/* Kvittering pr. kunde: knappen er slået FRA indtil navnet står der (§ 7.5). */
.ggtom{display:grid;place-items:center;flex:1;padding:40px;text-align:center;color:var(--txt-3);
font-size:12.5px;line-height:1.55}
/* ==========================================================================
`.skjult` STÅR TIL SIDST — og derfor uden `!important`
--------------------------------------------------------------------------
Reglen skal slå `display:flex` fra fx `.grid`, `.popmere` og `.linjestat`.
Det blev før gjort med `!important`, hvilket designsystemet forbyder. Ved
samme specificitet vinder den SIDSTE regel i arket — så pladsen her er
løsningen. ⛔ Læg aldrig nye display-regler efter denne blok.
========================================================================== */
.hidden,.skjult{display:none}