/* ============================================================================ FORTA KERNE @1.2. ALT ikke-brand: ink-skala, semantik (green/amber/red), flader, radius, typografi-tokens + kerne-komponenter (.pill, .side, .topbar, .lucide, .call-card, .pal-* …). Brand-farverne bor i forta-theme-crm.css (8 variabler). De gamle variabelnavne bevares HER som ALIASER → tema-vars, så ingen eksisterende komponent-CSS knækker. Indlæses core→theme→app.css. (Splittet ud af det tidligere forta-tokens.css — nul visuel ændring.) CHANGELOG --------- @1.0 D.7 Del A: kerne/tema-split. @1.1 Semantik-piller (.p-wait/.p-ok/.p-due) får kant-tokens (border:1px solid var(--*-bd)) jf. §1 — retter Bronze/Smaragd-vagtpost-kollision (accent-soft ≈ amber-bg), fundet af Ejendom. .p-info/.p-draft er fortsat kantløse (transparent kant → ens højde). Dark: -bd-tokens defineret i forta-dark.css. @1.2 §23-designreview (11/7): AA-tokens (mørkere grad-slut/ink-500/amber-tx), color-mix-afledte dark-accenter, chip-kant (.chip/.chip.on), samlet fokus-ring, solid .btn-danger, .tag-badge, note-panel, samt nye kerne- komponenter (toast/tooltip/skeleton/disabled/motion). Dark-QA-rettelser: systemisk thead-baggrund (var(--bg-panel)), dark-scrollbars. BINDENDE DISTRIBUTIONS-REGEL (Ejendom-feedback 12/7): DENNE fil er APP-kernen (Tailwind-afhængig: @apply + app-selektorer + --c-*-palette-kanaler) og kan IKKE kopieres standalone. Det kanoniske distributions-artefakt er `static/css/forta-core-dist.css` (ren CSS, nul Tailwind). HVERT kerne-bump SKAL regenerere dist-filen + bumpe dens header — et bump uden opdateret dist er UFULDSTÆNDIGT. Se docs/design-coverage.md + FORTA-PLATFORM-TEMA.md §4. ============================================================================ */ /* ============================================================================ SELF-HOSTEDE SKRIFTER (D.12). Tidligere hentet fra Google Fonts CDN, men prod-serveren har begrænset egress → Sora/Inter/JetBrains Mono loadede aldrig, og Display-rollen faldt tilbage til system-sans (Sora "ikke aktiv"). Nu bundtet lokalt (latin-subset, variable woff2) så de ALTID loader uanset egress. latin-subset dækker æøå (U+00C0–00FF). ========================== */ @font-face { font-family:'Sora'; font-style:normal; font-weight:100 800; font-display:swap; src:url('/static/fonts/sora.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/static/fonts/inter.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap; src:url('/static/fonts/jetbrains-mono.woff2') format('woff2'); } :root { /* Brand-ALIASER → forta-theme-crm.css (bagudkompatibilitet; ingen komponent skal ændres). De orphan-toner (blue-800/teal-300/-200/-100) er ubrugte og kollapses trygt til nærmeste tema-var. */ --blue-900:var(--b-mid); --blue-800:var(--b-mid); --blue-700:var(--accent-link); --blue-500:var(--accent); --teal-400:var(--accent); --teal-300:var(--accent); --teal-200:var(--accent-soft); --teal-100:var(--accent-soft); /* Neutraler (ink-skala — non-brand) */ --ink-900:#0B1B2B; --ink-800:#1A2D40; --ink-700:#2C4458; --ink-600:#4A6378; /* §23/10a: --ink-500 mørknet #6B829A→#5C748C (labels/hjælpetekster består AA mod hvid flade). NY --ink-400 = den GAMLE ink-500-tone, KUN til dekorativt brug (fx delta-glyffer) — flyt IKKE eksisterende ink-500-brug hertil blindt. 🔴 MØRKNET IGEN 21-08 #5C748C→#50657A: «mod hvid flade» ovenfor var netop problemet. Appen maler tekst på 16 lyse flader, og på den mørkeste (#e3e6ea, sidefoden) gav #5C748C 3,87 — målt renderet på .setting-section-h («Kommunikation» på /mere). Ny værdi: 4,81 dér, 6,03 på hvid. Værn: tests/test_tonet_flade_kontrast.py. Rapport: rapporter/gatede/. */ --ink-500:#50657A; --ink-400:#6B829A; --ink-300:#C5D2DD; --ink-200:#E2E9EF; --ink-100:#F1F5F8; --ink-50:#F8FAFC; /* 🔴 MØRK INK PÅ LYS ACCENT — navngivet efter ROLLEN, ikke farven. Værdien #08131F er IKKE en vilkårlig mørk navy og IKKE --bg-app (#081320, forta-dark.css:40). Den er valgt fordi HVID tekst på den lyse teal-gradient falder §23/AA: målt pr. gradient-stop (#1E96B0 / #2BB3B8 / #43E4E4) giver hvid 3,47 / 2,55 / 1,56 mod AA's krav på 4,50, mens #08131F giver 5,38 / 7,34 / 11,98. forta-dark.css skriver reglen selv: «hvid tekst på lys teal er FORBUDT (består aldrig §23)». Brug den til tekst OG ikoner der ligger på en accent-fyldt flade: .btn-primary, .filter-pill-selected, .topnav-mark, .save-bar, .mnav-scan- knap, .pos-btn-card. Ændr den ikke uden at måle de tre stop igen. 🔴 DEFINERET PÅ BAR :root — ikke i @media/[data-theme]. En custom property opløses hvor den DEFINERES; en tema-scopet definition ville være usynlig for de regler der bruger den. Værn: tests/test_kontrast_token_literal.py */ --tekst-paa-lys-accent:#08131F; /* Semantik (green/amber/red — non-brand) */ /* 🔴 --green-tx mørknet 21-08 #0E7C66→#0D705D. FOREBYGGENDE: målt renderet ligger den kun på #e7f7ee (4,63), #fafefe (5,05) og hvid (5,13) — den faldt ikke. Men et token der er godkendt mod HVID falder den dag nogen sætter det på en tonet flade. Nu 4,80 på husets mørkeste flade. */ --green-bg:#E7F7EE; --green-bd:#9ADBB5; --green-tx:#0D705D; /* §23/10a: --amber-tx mørknet #946B00→#8A6300 (AA på amber-bg-flade). 🔴 MØRKNET IGEN 21-08 #8A6300→#815C00: stod på 4,54 mod den tonede #d5f0f1 — 0,04 over kravet er et sammenfald, ikke en margin. Nu 4,84 på den mørkeste flade. Falder ikke i dag på de flader den FAKTISK ligger på (#fdf4e3 4,97) — ændringen er forebyggende. Se test_tonet_flade_kontrast. */ --amber-bg:#FDF4E3; --amber-bd:#F0D9A6; --amber-tx:#815C00; --red-bg:#FDF0EF; --red-bd:#F2B8B5; --red-tx:#B3261E; /* Info-flade = accent-soft (alias → tema) */ --info-bg:var(--accent-soft); --info-tx:var(--accent-soft-tx); /* BS-pillen «BS-trækkes DD-MM» (25-09-2026). Andreas: «Brug en mørkere blå på BS så den ikke har samme farve som Bogført». Begge var `.p-info`, og --info-* er ALIAS for tenantens accent — derfor en FAST, ikke-brand blå her (som green/amber/red), mørkere og blåere end accent-soft. Målt på malede pixels i rapporter/bsfarve/. Regel: `.p-info[data-bs-booket]`. */ --bs-bg:#C4D5F5; --bs-tx:#16347A; /* Flader */ /* §24.2 CC·lys: tonet app-bg (#EDF3F6) bag HVIDE paneler (--c-surface=255 nedenfor) — den adskillelse Command Center bygger på. --bg-panel forbliver SOLID: 5 komponenter sætter background-color:var(--bg-panel) (en gradient- værdi ville dér blive ugyldig→transparent). Panel-gradienten fra prototypen er en CC.2-flade-adoption, ikke en token-redefinition. */ --bg-app:#EDF3F6; --bg-panel:#fff; --bd-panel:var(--ink-200); /* --papir (24-09-2026): underlaget bag en UNDERSKRIFTS-tegning. Hvidt i BEGGE temaer med vilje, og derfor IKKE overstyret i forta-dark.css: PNG'en har gennemsigtig bund og moerk pen, som forsvinder paa --bg-panel i moerkt tema. Papir er hvidt. Et token frem for #fff i skabelonen, saa hensigten staar ét sted (test_dark_kontrast). */ --papir:#fff; /* §24.2 CC — global app-baggrund m. radial glød (0d). To dobbelt-radials over --bg-app (tonet, IKKE hvid). Static teal-fallback FØR color-mix-linjen (white-label: en tenants egen --accent farver gløden; de 8 tema-var urørte). background-attachment:fixed sættes på body i app.src.css. */ --bg-grad:radial-gradient(1100px 640px at 82% -10%,rgba(43,179,184,.18),transparent 58%),radial-gradient(820px 560px at 2% 112%,rgba(30,150,176,.12),transparent 55%),var(--bg-app); --bg-grad:radial-gradient(1100px 640px at 82% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 58%),radial-gradient(820px 560px at 2% 112%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%),var(--bg-app); --radius-panel:16px; --radius-control:9px; --radius-pill:999px; /* ── 0e KOMPLET TOKEN-PORT (byggeplan 23/7) — prototypens surface-token-sæt ORDRET (LYS). Brand-tonede literals re-afledt af var(--accent*)-parret via color-mix m. STATIC fallback FØR mix-linjen (§24.1); de 8 tema-var urørte. Accent-mapping: prototype var(--accent) LYS → --accent-strong (fyldt) / --accent (link); MØRK → --accent-bright (se forta-dark.css). ───────────── */ --panel:linear-gradient(180deg,#FFFFFF,#FAFEFE); /* kort/panel-flade (LYS) */ --panel-solid:#FFFFFF; --panel-2:var(--bg-panel-2); --border:#D6E5E9; --border-strong:#BDD5DB; --ink:#0C2231; --ink-2:#4A6676; --ink-3:#7B95A3; --glow:0 16px 36px -24px rgba(20,70,90,.40),0 0 40px -30px rgba(27,90,110,.5); --shadow:0 16px 34px -22px rgba(30,80,100,.34); --shadow-float:0 22px 50px -20px rgba(30,80,100,.44); --radius:var(--radius-panel); --radius-sm:11px; --font-display:'Sora',-apple-system,'Segoe UI',system-ui,sans-serif; --font-mono:'JetBrains Mono','SF Mono',Consolas,ui-monospace,monospace; --chip:#FFFFFF; --chip-bd:#C3DAE0; --num-glow:none; --tbl-hover:rgba(20,110,126,.07); --tbl-hover:color-mix(in oklab,var(--accent-strong) 8%,transparent); --grad-btn:linear-gradient(135deg,#15495D,#1C6C7C); --grad-btn:linear-gradient(135deg,var(--accent-strong),color-mix(in oklab,var(--accent-strong),var(--accent) 40%)); /* ── §24 COMMAND CENTER — surface-tokens (LYS). ──────────────────────────── Nye kerne-tokens (§24.2). Brand-bærende (--card-top/--accent-strong/ --accent-bright) AFLEDES af var(--accent) via color-mix — HVER med en statisk fallback FØR color-mix-linjen (samme mønster som forta-dark.css: 45-56). White-label bevares: en anden tenants --accent giver automatisk nye surfaces. De 8 tema-variabler (--accent, --grad, --b-deep …) er URØRTE. Admin arver disse gennem sin egen --accent (slate) → coherent, ikke teal. */ --bg-panel-2:#EBF4F6; /* sænket sekundær-flade (§24.2 lys) */ --elev-card:0 16px 34px -22px rgba(30,80,100,.34); /* kort-elevation (lys) */ --elev-float:0 22px 50px -20px rgba(30,80,100,.44); /* svævende (modal/dropdown) */ --card-top:linear-gradient(90deg,transparent,rgba(27,110,126,.5),transparent); --card-top:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent) 82%,#06222E) 50%,transparent); --accent-strong:#15495D; /* mørknet accent — fyldte elementer i LYS */ /* 🔴 40 %, IKKE 55 % — TOKENETS EGEN KONTRAKT (maalt 21-08-2026). --accent-strong bruges som BAGGRUND med color:#fff elleve steder (.mc-send, .pc-add, .trk-ud_til_levering, .pd-reladd m.fl.), og den blander MOD noget meget moerkt. Kontrakten ER «hvid tekst er laesbar paa mig». Ved 55 % faldt 163 af 899 proevede accenter under AA — de LYSE, fordi mere accent = lysere flade = mindre kontrast med hvid. Vores egen bestod med 5,25:1, og det er grunden til at ingen har set det. TO KNAPPER, BEGGE MAALT: forholdet bestaaende interval 0-45 %. moerkningsfarven kun ren `black` bestaar ved 55 %; #04161e og #020a0e falder stadig. `black` ville ogsaa fjerne en BRANDET literal (#06222E er en moerk teal, som drejer kuloeren for en tenant med fx orange accent) — men den koster vores egen flade meget: 55 % mod black giver 11,37:1 mod dagens 7,31, altsaa en markant moerkere knap. Det er en designbeslutning, ikke en tilgaengelig- hedsrettelse, og den skal traeffes for sig. VALGT: forholdet, og 40 og ikke 45. 45 bestaar med 4,57:1 — 0,07 over AA paa et gitter af 899 punkter i et kontinuum. Det er ikke en margin, det er et sammenfald. 40 giver 5,32:1 (+0,82). Samme argument som 45 frem for 47 og 55 frem for 58. 🔴 PRISEN: vores egen knap bliver moerkere. Lys #135e72 -> #104d5e (7,31 -> 9,35:1), moerk #1c7780 -> #165e69 (5,25 -> 7,40:1). Mindre accent = mindre identitet, som de to foregaaende gange. Literalen ovenfor er IKKE regnet om: dens kontrakt er «≈», ikke «=» (se forta-dark.css' egen note), og den er stadig paa den sikre side — #15495D giver 9,80:1 mod formlens 9,35. Vaern: test_hvid_tekst_er_laesbar_paa_accent_strong_for_hele_gamuttet. */ --accent-strong:color-mix(in oklab,var(--accent) 40%,#06222E); --accent-bright:#43E4E4; /* lysnet accent — glød/aktiv-tekst i MØRK */ --accent-bright:color-mix(in oklab,var(--accent) 70%,white); --bd-control:#A9C3CB; /* §24.3: tydelig sekundærknap-/kontrol-kant (lys) */ /* ── §24.2 CC — SIDEBAR-IDENTITET: ALTID near-black, i BEGGE modes ───────── Prototypens --sb-* (Command near-black, 180deg #050D16→#07131F). Sidebaren følger IKKE lys/mørk-toggle — den er en fast mørk identitet (§24.2). Tokens er mode-UAFHÆNGIGE (defineret her i :root, IKKE i forta-dark.css) → ingen mode kan gøre den lys. Aktiv-tekst = accent-bright (CC.1-afledt af var(--accent), white-label-sikker). 🔴 CC.7 0b (2026-07-23): --sb-bg er nu AFKOBLET fra --b-deep/--b-mid og sat til den faste Command near-black. Tidligere afledte vi sidebaren af de to brand-navy-tokens (white-label-drevet), men live-auditten (§24.2/GLOBAL-1) viste at facit vil have den ægte near-black — ikke tenantens lysere brand- navy. Bevidst white-label-afvejning besluttet af Andreas: sidebar-fladen er Command-identitet, ikke brand-flade. De 8 tema-var (--b-deep/--b-mid inkl.) er STADIG URØRTE — vi bruger dem bare ikke længere til sidebar-baggrunden. Solid #050D16-fallback FØR gradienten → kan aldrig falde til hvid. */ --sb-bg:linear-gradient(180deg,#050D16 0%,#07131F 100%); --sb-ink:#CFE0EC; /* nav-tekst (blød lys på mørk) */ --sb-ink-dim:#6F8AA1; /* gruppe-labels/dæmpet */ --sb-hover:rgba(255,255,255,.06); /* hover-flade */ --sb-active-tx:var(--accent-bright); /* aktiv nav-tekst = accent-bright */ /* D.11 (§20): RGB-KANALER for Tailwind-paletten (torp/surface/border/ neutral/success/warning/danger). tailwind.config.js peger colors mod rgb(var(--c-x) / ). LYS = PRÆCIS de gamle hex-kanaler → lyst tema er byte-identisk. body.dark (forta-dark.css) omdefinerer disse → hele Tailwind-fladen flipper fra ét sted. */ --c-torp-navy:14 42 71; --c-torp-blue:30 74 122; --c-torp-light:57 112 168; --c-torp-bg:230 240 250; --c-surface:255 255 255; /* §24.2 CC·lys: rene HVIDE paneler på tonet --bg-app */ --c-border:238 242 246; --c-border-2:216 222 229; /* Semantik-kanalerne var DRIFTET fra §1's egne green/amber/red-tokens: to parallelle paletter for samme betydning. Målt i lys mode blev Tailwind-parrene liggende under AA (success 4,10 · warning-på-danger-bg 4,27 · danger 4,65), mens §1-parrene består. Kanalerne er nu SAT LIG §1-tokens (--green-tx/-bg, --amber-tx/-bg, --red-tx/-bg) → én palet, og alle tre par kommer over 4,5 (4,63 · 4,89 · 5,88). MØRK var allerede afstemt (forta-dark.css) og er urørt. */ --c-success:13 112 93; --c-success-bg:231 247 238; /* #0D705D / #E7F7EE */ --c-warning:129 92 0; --c-warning-bg:253 244 227; /* #815C00 / #FDF4E3 */ --c-danger:179 38 30; --c-danger-bg:253 240 239; /* #B3261E / #FDF0EF */ --c-neutral:90 107 124; --c-neutral-strong:45 62 82; --c-neutral-bg:241 243 245; } /* ── Typografi-roller (§3). Skrifterne loades via i base.html. ─────── Display = Sora, Data = JetBrains Mono. UI (Inter) sættes på body i app.css. */ .font-display { font-family:'Sora',-apple-system,'Segoe UI',system-ui,sans-serif; } /* Data: ordrenr./fakturanr./varenr./CVR/S/N/snapshot-id */ .mono-id { font-family:'JetBrains Mono','SF Mono',Consolas,ui-monospace,monospace; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; } /* KPI-tal: Sora 600, clamp(26–32px), tabular-nums (§3) 🔴 INGEN letter-spacing på kortet (designens F3, 24-09-2026). Den stod her som −0,02em, og en em-værdi ARVES SOM SIN BEREGNEDE PX: 32 px × −0,02 = −0,64 px på ALT i kortet, også en 11 px «→ se alle», der så ud som ét ord («→sealle»). Målt 24-09 (designens_maal.py): negativ spatiering på tekst uden for tallet på 3 af 18 flader — tech-dashboardet og admins dashboard og virksomhedsside, i admin også på 393. Tallets egen spatiering bor på tallet — `.kpi-value` (tracking-tight, app.src.css) og `.kpi .val` (nedenfor) — og ingen .kpi-skabelon har et tal uden for de to (skannet 24-09: 38 skabeloner). */ /* 🔴 INGEN Sora på kortet (designvalg 26-09-2026, designens (b)). FORTA-DESIGNSYSTEM §3: Sora er «sidetitler, hilsner, KPI-tal, kundenavn», Inter er «alt andet: labels, knapper, tabeller, brødtekst». Kortet satte Sora på ALT i sig, så labels og underlinjer arvede displayskriften — målt: 94 tekstnoder på 15 flader (40 × .kpi-label, 17 × delta-linjer …). Tallene bærer Sora selv: `.kpi-value` (app.src.css) og `.kpi .val` (var(--font-display)); målt 0 tal-elementer uden Sora før og efter. Samme form som `.uds-kpi`-rettelsen 23-09, nu for hele huset. */ .kpi { font-weight:600; font-size:clamp(26px,4vw,32px); font-variant-numeric:tabular-nums; line-height:1.05; } /* D.9/D.12: MRR-KPI'ens gradient-tal defineres nu i app.src.css som .kpi-value.kpi-value-grad (højere specificitet end .kpi-value's color). */ /* D.9: rigt tomt-tilstands-ikon — Lucide i en afrundet ink-100-boks. .empty-ic = kompakt (34px, i kort/paneler); .empty-ic-lg = 44px til fuld-side/fane-tomme-tilstande (D.8-polish). */ .empty-ic { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:var(--ink-100); color:var(--ink-500); margin-bottom:8px; } .empty-ic-lg { width:44px; height:44px; border-radius:11px; margin-bottom:10px; } /* ============================================================================ D.12 — Dashboard-workbench visuel finish. ========================================================================= */ /* "Min dag"-rækker: farvet ikon-chip + titel/undertekst + handling. */ .day-row { display:flex; align-items:center; gap:11px; padding:11px 2px; } .day-row + .day-row { border-top:1px solid var(--ink-100); } .day-chip { flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--ink-100); color:var(--ink-600); } .day-chip.is-amber { background:var(--amber-bg); color:var(--amber-tx); } .day-chip.is-info { background:var(--accent-soft); color:var(--accent-soft-tx); } .day-chip.is-green { background:var(--green-bg); color:var(--green-tx); } .day-chip.is-red { background:var(--red-bg); color:var(--red-tx); } .day-body { flex:1 1 auto; min-width:0; } .day-title { font-weight:600; font-size:13.5px; color:var(--ink-800); } .day-sub { font-size:12px; color:var(--ink-500); } .day-action { flex:0 0 auto; } /* "Seneste aktivitet"-rækker: farve-dot + tekst + højrestillet relativ tid. */ .act-row { display:flex; align-items:center; gap:9px; padding:6px 0; } .act-row + .act-row { border-top:1px solid var(--ink-100); } .act-dot { flex:0 0 auto; width:8px; height:8px; border-radius:999px; background:var(--ink-300); } .act-dot.is-green { background:var(--green-tx); } .act-dot.is-accent { background:var(--accent); } .act-body { flex:1 1 auto; min-width:0; } .act-body strong { font-weight:600; color:var(--ink-800); } .act-time { flex:0 0 auto; margin-left:auto; font-size:11.5px; color:var(--ink-500); font-variant-numeric:tabular-nums; white-space:nowrap; } /* Ensartet "Se alle →"-link på alle paneler (§7). */ .see-all { font-size:12.5px; font-weight:600; color:var(--accent-link); text-decoration:none; white-space:nowrap; } .see-all:hover { text-decoration:underline; } /* Kasse-kortets kv-linjer (§5). */ .kv-line { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; padding:2px 0; } .kv-line .kv-k { color:var(--ink-500); } .kv-line .kv-v { color:var(--ink-700); font-variant-numeric:tabular-nums; } /* Kompakt sekundær pille-knap (selvstændig — ingen .btn-afhængighed). */ .btn-mini { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px; border:1px solid var(--bd-panel); background:var(--bg-panel); font-size:12px; font-weight:600; color:var(--ink-700); text-decoration:none; cursor:pointer; white-space:nowrap; transition:border-color .12s ease, background .12s ease; } .btn-mini:hover { border-color:var(--accent); background:var(--ink-50); } .btn-block { display:flex; width:100%; justify-content:center; } /* Liste-navn med undertekst-mønster (§6): navn 600 + "By · CVR"-linje. */ .list-name { font-weight:600; color:var(--ink-800); } /* Kunde-/entitet-avatar på detaljesider (§7): initial på gradient, Sora. */ .detail-avatar { width:56px; height:56px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Sora',-apple-system,'Segoe UI',system-ui,sans-serif; font-weight:600; font-size:20px; flex:0 0 auto; } /* Beløb/taltabeller: tabular-nums + højrestillet (§3). */ .tnum { font-variant-numeric:tabular-nums; } .amount { font-variant-numeric:tabular-nums; text-align:right; } /* ── Statuspiller — ét semantisk system (§5) ─────────────────────────────── Selve .pill-basen (layout + 5px dot) defineres i app.src.css (Tailwind-laget, indlæses sidst → kanonisk), så den deles af BÅDE de eksisterende .pill-active/ -pending/-overdue/-neutral/-info OG de nye .p-*-varianter herunder. Her står kun farve-varianterne (semantik-tokens). */ /* forta-core@1.1 (§1/§5): semantik-piller (p-wait/p-ok/p-due) får en 1px kant i deres -bd-token — retter Bronze/Smaragd-vagtpost-kollisionen (accent-soft ≈ amber-bg), fundet af Ejendom. p-info/p-draft forbliver KANTLØSE (accent-chip- reglen: semantik-pille = bg+kant+dot · accent-chip = kantløs uden dot). De får en TRANSPARENT 1px kant, så alle piller har samme højde (ingen synlig højde-ændring — border-box). */ .p-draft { background:var(--ink-100); color:var(--ink-600); border:1px solid transparent; } /* Kladde/Inaktiv/neutral */ .p-wait { background:var(--amber-bg); color:var(--amber-tx); border:1px solid var(--amber-bd); } /* Afventer/Rykker */ .p-info { background:var(--info-bg); color:var(--info-tx); border:1px solid transparent; } /* Bekræftet/Info */ .p-info[data-bs-booket] { background:var(--bs-bg); color:var(--bs-tx); } /* BS-trækkes — IKKE Bogført-blå, se --bs-bg */ .p-ok { background:var(--green-bg); color:var(--green-tx); border:1px solid var(--green-bd); } /* Betalt/Aktiv/OK */ .p-due { background:var(--red-bg); color:var(--red-tx); border:1px solid var(--red-bd); } /* Forfalden/Fejl */ /* Nøgletal i alarmtilstand — `kpi--alert` stod på FEM flader (webshop-overblik, -afstemning, -status, lageroversigt) uden én regel, så alarmen var usynlig. Fundet 24-09-2026 da døde-CSS-værnet lærte at se klasser i {% if %}-blokke. Samme tokens som .p-due; de findes i lyst, mørkt og mobil-laget. */ .kpi.kpi--alert { border-color:var(--red-bd); } .kpi.kpi--alert .kpi-value { color:var(--red-tx); } /* Dashboardets fire topfliser (Andreas 24-09-2026, «dashfliser»): hver sammenligning på EGEN linje. `.kpi-delta-*` er inline-flex (app.src.css), så to korte linjer lagde sig side om side når flisen var bred nok — målt ved 1920: «+37 vs. samme dag i august» og «+642 vs. september 2025» på samme y. Scopet til krogen, fordi ti andre flader bruger .kpi-strip og ikke er bedt om at ændre sig. Specificitet 0,2,0 slår app.css' 0,1,0. */ [data-dash-fliser] .kpi-delta-positive, [data-dash-fliser] .kpi-delta-negative, [data-dash-fliser] .kpi-delta-neutral { display:flex; } /* Beløbslinjernes tekst efter ikonet (dashfliser, 24-09-2026). Uden denne span var «+88.087», «kr» og «vs. …» hver sit flex-barn af linjen, og på 393 pressede de teksten ned i en smal søjle — «september» løb 14 px ud over flisen. Spannen er selv en flex med linjens EGET gap (inherit), så afstandene på skrivebordet er de samme som før, og wrap lader «vs. …» falde ned som én bid i stedet for at blive en kolonne. */ [data-dash-fliser] .kpi-delta-tekst { display:flex; flex-wrap:wrap; align-items:inherit; gap:inherit; min-width:0; } /* MRR-broen i «Aktive abonnementer» (designens, 24-09-2026). Den stod som ÉN tekstlinje — «September: 0 nye · 0 op · 0 ned · 0 opsagte · +0 kr/md», 289 px (306 med rigtige tal) i en flise hvis tekstbredde er 186–318 px ved 900–1920 — og brødes derfor midt i et led («0 / kr/md»). Nu to faste led: beløbet med måneden, derunder kundefordelingen. Hvert «N ord» er nowrap, så et led der alligevel ikke kan være der, brydes ved en «·» og aldrig mellem tal og ord. Intet er fjernet; rækkefølgen følger de andre linjer i striben (beløbet først). */ /* 0,3,0: forta-mobil.css giver `.kpi-strip .kpi-delta-*` gap:6px (0,2,0) og indlæses efter kernen; uden den ekstra klasse fik de to led 6 px luft på 393. */ /* ÉN LINJE NÅR DER ER PLADS (designvalg 26-09-2026, designens (c)). Med to faste led var broen to linjer også ved 1920, hvor der er plads til én (flise 147 → 159 px, målt). Nu står leddene på én række med wrap: er der plads, står de side om side; ellers falder led 2 ned som før. Adskilleren «·» står FORAN hvert led, og den foran et led der STARTER en linje klippes væk: broen er rykket .9em til venstre (margin) og klippet .9em fra venstre (clip-path), så linjestartens adskiller ligger i det klippede bånd. Derfor aldrig et «·» i starten eller slutningen af en linje, uanset hvor langt tallene bliver. `/ ""` holder tegnet ude af skærmlæserens tekst. */ [data-dash-fliser] .kpi-delta-neutral[data-abon-bro] { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:0; margin-left:-.9em; clip-path:inset(0 0 0 .9em); } /* 🔴 HÆNGENDE INDRYK (protokode, 28-09-2026). Klippet ovenfor antog at en linje kun kan STARTE med et led — men et led kan selv brydes INDENI, ved et af sine egne «·». Fortsættelseslinjen startede så i det klippede bånd, og båndet åd det der stod dér: målt ved 393×852 stod der «opsagte» og ikke «0 opsagte» — tallet var væk, ikke adskilleren. `padding-left` + negativ `text-indent` lader første linje (med «·»-et) starte i båndet som før, og alle fortsættelseslinjer starte .9em inde, uden for det. Et led der ikke brydes, tegnes pixel for pixel som før. Vagt: tests/test_protokode_r2_kpi_hoejde.py. */ [data-dash-fliser] .kpi-bro-led { display:block; padding-left:.9em; text-indent:-.9em; } [data-dash-fliser] .kpi-bro-led::before { content:"·" / ""; display:inline-block; width:.9em; text-align:center; text-indent:0; /* inline-block arver ledets negative indryk (se nedenfor) */ } [data-dash-fliser] .kpi-bro-led > span { white-space:nowrap; } /* Ens flisehøjder (Andreas via forta-56, 24-09-2026). Grid'et strækker fliserne i SAMME række, men ved 900–1199 er striben 2×2, og rækkerne fik hver sin højde (målt ved 1000: 140 og 123). `grid-auto-rows:1fr` giver alle rækker den højeste. Kun fra 900px: under breakpointet er striben telefonens vandrette karrusel (§31), og den ejes af app-designet. */ @media (min-width: 900px) { [data-dash-fliser] { grid-auto-rows:1fr; } } /* ── CC.7 BATCH 2 (Abonnementer, byggeplan ordret) — delta-tal + forecast-grid. .fc-grid: 4 måneds-celler pr. række; .fc-m.now = indeværende måned fremhævet (accent-kant + accent-soft-flade). ────────────────────────────────────────── */ .delta { font-weight:700; font-size:12px; } .delta.up { color:var(--green-tx); } .delta.down { color:var(--red-tx); } .fc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } @media (max-width:1100px) { .fc-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px) { .fc-grid { grid-template-columns:1fr; } } .fc-m { border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px; background:var(--panel-2); min-width:0; } .fc-m.now { border-color:var(--accent); background:var(--accent-soft); } /* Sekundaerteksten i «nu»-cellen foelger FLADEN: --accent-soft bevaeger sig med tenanten, saa teksten bruger det par der er bygget til den — --accent-soft-tx, maalt over 899 accenter (test_accent_soft_tx_formel). Samme greb som .pal-row-meta. Maalt 26-09: `text-neutral` #7d94a9 paa #174052 = 3,53 i moerkt tema (/abonnementer/forecast). */ .fc-m.now .text-neutral { color:var(--accent-soft-tx); } /* Kundekortets enheder («kr», «dage») og tomt-tegnet «—»: --ink-2, ALDRIG --ink-3 (se «SEKUNDAER TEKST ER --ink-2» laengere nede). Stod inline som --ink-3 i kunder/_tab_oversigt.html — maalt 26-09 paa pixels: 3,11 lys, 3,91 moerk. (Placeret her fordi reglen skal staa FOER mobil-laget.) */ .kd-enhed { color:var(--ink-2); } .fc-m .fc-mlabel { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); } .fc-m .fc-mval { font-family:'JetBrains Mono','SF Mono',Consolas,ui-monospace,monospace; font-size:16px; font-weight:700; color:var(--ink); margin-top:3px; font-variant-numeric:tabular-nums; } /* ── Filter-chips (§23/10c/K4) — ALTID synlig kant: inaktiv 1px ink-200, aktiv (.chip.on) 1.5px solid var(--accent). Bruges i list_toolbar (afløser p-pill p-info/p-draft på chips), så status-pillerne ikke arver chip- interaktion. box-sizing:border-box (global reset) → 1px↔1.5px giver ingen layout-hop. ──────────────────────────────────────────────────────────── */ .chip { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--radius-pill); border:1px solid var(--ink-200); background:var(--bg-panel); color:var(--ink-600); font-size:12.5px; font-weight:600; line-height:1.4; cursor:pointer; text-decoration:none; white-space:nowrap; transition:border-color .15s ease, background .15s ease, color .15s ease; } .chip:hover { border-color:var(--ink-300); color:var(--ink-800); } .chip.on { border:1.5px solid var(--accent); background:var(--accent-soft); color:var(--accent-soft-tx); } /* 🔴 .chips HAVDE INGEN REGEL — KUN EN OMTALE I KOMMENTAREN OVENFOR. Tre skabeloner (ordrer/list, sager/list, regnskab/landing) bruger beholderen til deres filter-chips, og uden reglen stod chippene som inline-elementer uden mellemrum. Vaernet test_doede_css_klasser saa den som "defineret", fordi det laeste CSS'en raat og talte navnet i kommentaren med — se rettelsen i samme commit. Reglen ligger i forta-core (ikke i mobil-laget), fordi beholderen bruges paa BEGGE bredder. NB: app-merge-runde-2 har en identisk regel i forta-mobil.css, altsaa kun under 899px. Ved merge skal den ene fjernes — to regler for samme selektor er en tavs dublet hvor den sidste vinder. */ /* 🔴 DENNE REGEL GÆLDER OGSÅ ADMIN — den er bare uden virkning DER I DAG. Målt i den kørende app 15-08: /admin/ laster forta-core.css (men hverken forta-mobil.css eller forta-dark.css). Reglen her lander altså i admin-fladen. Den gør ingenting, fordi `class="chips"` forekommer 0 gange i admin/templates/ — ikke fordi den er afgrænset. Det er en garanti med en udløbsdato ingen kan se: den dag en admin-skabelon får `class="chips"`, arver den denne regel uden at nogen har besluttet det, og der er ingen test der bliver rød. Skriver du en chips-beholder i admin, så ved du nu hvad du arver. */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } /* `.chips-rad` er en beholder om chip-striben OG «Flere filtre», indfoert fordi en `overflow-x:auto`-stribe klipper skuffens absolut placerede panel (maalt 25-08-2026: x=616 paa en 393px skaerm). Paa skrivebordet maa den ikke kunne ses: wrapperen baerer selv den wrappende flex-raekke, og `.chips` traeder ud af layoutet med `display:contents`, saa chips og
er de SAMME flex-elementer i den SAMME raekke som foer. Maalt: skuddet ved 1280x900 er pixel-identisk foer og efter. */ .chips-rad { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .chips-rad > .chips { display: contents; } /* ── REGNSKAB-KOMPONENTER (regnskabdesign R0, 03-10-2026) ──────────────────── Makroerne bor i tech/templates/regnskab/_ui/ (R0: periodevælger og eksport; R9: tom-tilstand; beløbscellen kommer med sin første bruger i R1/R3 — ikke som død kode før). Begge bredder, derfor her og ikke i mobil-laget. Periodevælgeren er prototypens chips (skærm 07) + et «Tilpas …» der folder husets to datofelter ud; summary'en ER en chip, så egen periode og forvalg står i samme række med samme form. */ .rd-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rd-tilpas { position: relative; } .rd-tilpas > summary { list-style: none; } .rd-tilpas > summary::-webkit-details-marker { display: none; } .rd-tilpas-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; } /* Spejlets rapportvælger, foldet til én række (designkritik §22). «Andre rapporter …» er en
; åben tager den hele bredden, så panelet med de andre grupper står samlet under rækken i stedet for at klemme sig ind i den. */ .rd-rapportvaelger { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .rd-rapport-flere > summary { list-style: none; } .rd-rapport-flere > summary::-webkit-details-marker { display: none; } .rd-rapport-flere[open] { flex-basis: 100%; } .rd-rapport-flere-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } /* R5-1 (designkritik §23): spejlets rapportside på telefonen. «⋯ Del og gem» samler eksport og Gem; på skrivebordet står panelet åbent uden summary. */ .rd-del > summary { list-style: none; display: none; } .rd-del > summary::-webkit-details-marker { display: none; } .rd-rapport-select { display: flex; align-items: center; gap: 8px; } /* Momssidens ene svarkort (designkritik §27): hensættelsen som én talrække under tallet, adskilt af en hårstreg — ikke et kort mere. */ .moms-hens { border-top: 1px solid var(--chip-bd); padding-top: 12px; } .moms-hens-tal { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 12px; margin-top: 6px; } .moms-forklaring > summary { list-style: none; cursor: pointer; display: inline-flex; min-height: 32px; align-items: center; } .moms-forklaring > summary::-webkit-details-marker { display: none; } @media (max-width: 899px) { .rd-del > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; } .rd-del[open] > .header-actions { margin-top: 8px; } /* De to infokort (fravalgte rapporter, Opsætning) er LUKKET to chips på én række; åbnet er de et helt kort. Før: ~240 px før første tal. */ #fravalgte-rapporter:not([open]), #rapport-opsaetning:not([open]) { display: inline-flex; vertical-align: top; padding: 0; margin: 0 6px 12px 0; border: 0; background: none; box-shadow: none; } #fravalgte-rapporter:not([open]) > summary, #rapport-opsaetning:not([open]) > summary { min-height: 44px; padding: 0 14px; border: 1px solid var(--chip-bd); border-radius: 999px; background: var(--bg-panel); font-size: 13px; } #fravalgte-rapporter:not([open]) > summary .text-xs, #rapport-opsaetning:not([open]) > summary .text-xs { display: none; } } /* Kassekladdens to tabeller (kladder og bogførte) står lige under hinanden og skal have SAMME kolonner (designkritik §17: Dato stod ved x=148 mod x=131). Kun på skrivebordet — på telefonen er rækkerne kort (data-app-raekke). */ @media (min-width: 900px) { .kladde-tabel { table-layout: fixed; } .kladde-tabel th:nth-child(1) { width: 7rem; } .kladde-tabel th:nth-child(2) { width: 8rem; } .kladde-tabel th:nth-child(4) { width: 6rem; } .kladde-tabel th:nth-child(5) { width: 11rem; } } /* Tom-tilstand §17.7: ikon i tonet boks + én sætning + højst én handling. Første bruger: cockpittets «Forbind banken» (R9, 03-10). */ .rd-tom { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .rd-tom-ikon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ink-100); color: var(--ink-600); flex: none; } .rd-tom-tekst { margin: 0; flex: 1 1 260px; color: var(--ink-600); } .rd-tom-tekst strong { color: var(--ink-900); } /* Regnskabets menu (R1, 04-10-2026, `regnskab/_regnskab_menu.html`): grupperne er husets .subnav-chip, gruppens sider husets .chip (§8c) på rækken under. Telefonen får ÉN række der folder en hub ud (MØNSTERBOG §7); den er .kun-app og skjules derfor over 899 px af laget længere nede. */ .rd-menu { margin-bottom: 18px; } /* V2 (designkritik F2): grupperne er FANER, ikke piller. Aktiv = --ink + 2 px accent-understregning (§6 budgetpost 2, «aktiv navigation-markering»); en --bd-panel-linje under hele rækken. Undersiderne er tekst. */ .rd-faner { display: flex; align-items: flex-end; gap: 4px 22px; flex-wrap: wrap; border-bottom: 1px solid var(--bd-panel, var(--chip-bd)); } .rd-fane { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0 11px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; } .rd-fane:hover { color: var(--ink); } .rd-fane.on { color: var(--ink); } .rd-fane.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); } .rd-fane-guide { margin-left: auto; font-weight: 500; color: var(--ink-2); } .rd-undersider { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 10px; } .rd-underside { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); text-decoration: none; } .rd-underside:hover { color: var(--ink); } .rd-underside.on { color: var(--ink); font-weight: 600; } .rd-taeller { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--chip); color: var(--ink-2); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .rd-hub-raekke { display: flex; align-items: flex-start; gap: 8px; } .rd-hub-raekke .rd-hub { flex: 1 1 auto; min-width: 0; } .rd-hub-soeg { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--chip-bd); border-radius: 12px; background: var(--bg-panel); color: var(--ink-2); } .rd-hub-knap { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; gap: 8px; } .rd-hub > summary { list-style: none; } .rd-hub > summary::-webkit-details-marker { display: none; } .rd-hub-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px; border: 1px solid var(--chip-bd); border-radius: 12px; background: var(--bg-panel); cursor: pointer; } .rd-hub-sti { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-hub-mere { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 14px; font-weight: 600; color: var(--accent-link, var(--accent)); } .rd-hub[open] > .rd-hub-summary { border-color: var(--accent); } .rd-hub-liste { margin-top: 8px; padding: 4px 0 8px; border: 1px solid var(--chip-bd); border-radius: 12px; background: var(--bg-panel); } .rd-hub-titel { margin: 12px 14px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .rd-hub-gruppe { padding-bottom: 4px; } .rd-hub-gruppe.aktiv .rd-hub-titel { color: var(--accent-link, var(--accent)); } .rd-hub-punkt { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--ink); text-decoration: none; } .rd-hub-punkt.on { background: var(--accent-soft); color: var(--accent-soft-tx); font-weight: 700; } /* ── OVERBLIK — flagskibet (regnskabdesign R1, 04-10-2026, `regnskab/landing.html` + `_overblik_svar/_liste/_naeste.html`). Ingen nye tokens: statusfladerne er pillernes par (--red-bg/--red-tx …, §5), tallene Sora (--font-display, §3). Luften er bevidst større end husets standardkort: siden er det første man ser, og den skal kunne læses på tre sekunder (Andreas 04-10: «simpelt, professionelt og super indbydende»). Mobil-laget står i forta-mobil.css. */ .ov-synk { display: inline-flex; align-items: center; gap: 6px; color: var(--green-tx); font-weight: 600; font-size: 12.5px; } /* BANKNEM punkt 4 (05-10-2026): bankens statuslinje (`regnskab/_bankstatus.html`). Grøn = synket inden for 24 t; gul = synken står stille eller samtykket udløber inden 14 dage. Pillernes tekstfarver (§5), ingen nye tokens. Skrivebordets kopi står i undertitlen; telefonens (`-mobil`) under svaret, som `.ov-synk-mobil`. */ .ov-bankstatus { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; color: var(--green-tx); font-weight: 600; font-size: 12.5px; } .ov-bankstatus[data-bank-status="advarsel"] { color: var(--amber-tx); } .ov-bankstatus > svg { flex: none; } /* Teksten må krympe og ombryde INDE i sin egen boks — ellers lagde flex-wrap ikonet alene på én linje og teksten på den næste (målt 393 px, 05-10). */ .ov-bankstatus > span { flex: 1 1 14rem; min-width: 0; } .ov-bankstatus-mobil { grid-column: 1 / -1; margin: 0; font-size: 12px; } .ov-handlinger { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ov-find { position: relative; } .ov-find .form-input { padding-left: 34px; min-width: 240px; } .ov-find-ikon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; display: inline-flex; } .ov-svar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; padding: 26px 28px; margin-bottom: 16px; } .ov-svar[data-ov-svar="ukendt"] { grid-template-columns: minmax(0, 1fr); } .ov-svar.ov-svar--kompakt { grid-template-columns: minmax(0, 1fr); gap: 14px; } .ov-graf-mobil { display: none; } .ov-svar-linje { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.5; } .ov-svar-linje strong { font-family: var(--font-display); font-size: 18px; } .ov-svar-linje-tal { color: var(--ink-2); } .ov-svar-tekst { min-width: 0; } .ov-svar-spm { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); } .ov-svar-hoved { margin: 6px 0 18px; font-family: var(--font-display); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; color: var(--ink); } .ov-svar-tal { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 0 0 14px; } .ov-svar-tal dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .ov-svar-tal dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); } .ov-svar-hvem { display: block; margin-top: 2px; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--ink-2); } .ov-svar-graf svg { display: block; width: 100%; height: auto; overflow: visible; } .ov-graf-y { font-size: 11px; fill: var(--ink-2); font-variant-numeric: tabular-nums; } /* Egen bogs forløb uden bank (designkritik 6.2-f): tre trin i §33's tilstandssprog — gjort (grøn ✓ + facit), næste (accent + handling), venter (dæmpet nummer). */ .ov-trin { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; } .ov-trin-r { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--chip-bd); } .ov-trin-r:first-child { border-top: 0; } .ov-trin-mk { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 700; border: 1.5px solid var(--bd-panel); color: var(--ink-2); } .ov-trin-gjort .ov-trin-mk { background: var(--green-bg); border-color: transparent; color: var(--green-tx); } .ov-trin-venter .ov-trin-mk { border-style: dashed; } .ov-trin-naeste .ov-trin-mk { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-tx); } .ov-trin-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; } .ov-trin-under { font-size: 13px; color: var(--ink-2); } .ov-trin-gjort .ov-trin-tekst > strong { font-weight: 600; color: var(--ink-2); } @media (max-width: 899px) { .ov-trin-r { flex-wrap: wrap; } .ov-trin-tekst { flex-basis: calc(100% - 40px); } .ov-trin-r > .btn-primary { flex-basis: 100%; justify-content: center; min-height: 44px; } .ov-trin-r > .see-all { margin-left: 40px; } } .ov-svar-akse { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--ink-2); } /* V2 (designkritik F9): svaret er sidens ENE fremhævede sted — en accent-tonet kant og gradient-teksten (§6 budgetpost 3). Mørkt tema slår gradient-teksten fra af hensyn til læsbarheden, som `.kpi-value-grad` (forta-dark.css §4). */ .ov-svar { border-color: color-mix(in oklab, var(--accent) 40%, var(--bd-panel)); } /* `.ov-grad` (gradient-TEKST, background-clip:text) står i app.src.css ved husets `.kpi-value-grad` — pakke 120: kontrast_grad_flade måler tekst PÅ en --grad-flade, og her ER gradienten teksten (samme undtagelse som .kpi-value-grad, med grund). */ body.dark .ov-grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); -webkit-text-fill-color: var(--ink); } /* F5: legenden er tilbage (§25), «i dag» står ved sin streg. */ .ov-graf-etiket { font-size: 11px; fill: var(--ink-3); } .ov-graf-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11.5px; color: var(--ink-2); } .ov-graf-legende span { display: inline-flex; align-items: center; gap: 6px; } .ov-lg { display: inline-block; width: 16px; height: 0; border-top: 3px solid var(--accent); } .ov-lg-fuld { border-top-style: solid; } .ov-lg-stiplet { border-top-style: dashed; } .ov-lg-punkt { width: 10px; height: 10px; border: 3px solid var(--accent); border-radius: 50%; } .ov-lg-nul { border-top: 1px dashed var(--ink-3); } .ov-lg-prik { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--accent); } .ov-kasse-del { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); line-height: 1.5; } /* §21: 400, kun beløbet bærer 600 */ .ov-kasse-del .num { color: var(--ink-2); font-weight: 600; } .ov-lg-spids { color: var(--ink-2); } .ov-brief { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--bd-panel); font-size: 14px; color: var(--ink-2); } .ov-brief-maerke { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-tx); font-size: 11.5px; font-weight: 700; } .ov-synk-mobil { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ink-2); } /* F8: den tomme tilstand siger næste skridt i --ink, ikke et gråt «nej». */ .ov-svar-tom { grid-template-columns: minmax(0, 1fr); } .ov-svar-tom-h { margin: 6px 0 6px; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); } .ov-svar-tom-tekst { margin: 0 0 14px; color: var(--ink-2); } /* F6: KPI-kortene har samme rytme — label · tal · status · links nederst. */ .ov-kpi .kpi { display: flex; flex-direction: column; } .ov-kpi-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 26px; margin-top: 8px; } .ov-kpi-status .pill { white-space: nowrap; } .ov-kpi-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 12px; } .ov-kpi-periode { white-space: nowrap; } .ov-kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ov-ikonknap { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px -6px -6px 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; } .ov-ikonknap:hover { background: var(--chip); color: var(--ink); } .ov-liste { margin-bottom: 16px; padding: 20px 22px 6px; } .ov-liste-hoved { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .ov-liste-hoved h2, .ov-kort-titel { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); } .ov-liste-antal { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--ink-2); font-size: 12px; font-weight: 700; } .ov-opgaver { list-style: none; margin: 0; padding: 0; } .ov-opgave { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 150px; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--chip-bd); } .ov-opgave:first-child { border-top: 0; } .ov-ikon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex: none; } .ov-ikon-due { background: var(--red-bg); color: var(--red-tx); } .ov-ikon-wait { background: var(--amber-bg); color: var(--amber-tx); } .ov-ikon-info { background: var(--info-bg); color: var(--info-tx); } .ov-ikon-ok { background: var(--green-bg); color: var(--green-tx); } .ov-opgave-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ov-opgave-tekst strong { font-size: 15px; font-weight: 600; color: var(--ink); } .ov-opgave-tekst span { font-size: 13px; color: var(--ink-2); } .ov-opgave-hoejre { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .ov-opgave-frist { white-space: nowrap; } /* Forta Calls svævende knap ligger i højre hjørne; listen giver den plads (F7). */ @media (min-width: 900px) { .card.ov-liste { padding-right: 76px; } } /* Samme plads til Forta Calls svævende knap på Pengestrøms dagbog (designkritik §13): ved 1440 stod den oven på nederste rækkes øje-ikon. */ @media (min-width: 900px) { #dagbog.card { padding-right: 76px; } } .ov-opgave-valg { grid-column: 2 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: -6px; } .ov-opgave-valg .btn-ghost { color: var(--ink-2); font-weight: 500; } .ov-opgave-valg .btn-ghost:hover { color: var(--ink); } .ov-valg-tekst { font-size: 12.5px; color: var(--ink-2); margin-right: 6px; } .ov-opgave-udsat > :not(.ov-opgave-valg) { opacity: .55; } .ov-skjult-linje { margin: 4px 0 12px; font-size: 12.5px; color: var(--ink-2); } .ov-intet-h { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); } .ov-intet-t { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); } /* F9: ikonfladerne kan ses i mørkt tema — pillens egen kant. */ .ov-ikon-due { border: 1px solid var(--red-bd); } .ov-ikon-wait { border: 1px solid var(--amber-bd); } .ov-ikon-ok { border: 1px solid var(--green-bd); } .ov-opgave-refs { font-size: 12.5px; } .ov-opgave-beloeb { text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; } .ov-opgave-h { grid-column: 4; justify-self: stretch; justify-content: center; text-align: center; } .ov-intet { display: flex; align-items: center; gap: 14px; padding: 8px 0 14px; } .ov-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .ov-kort { padding: 20px 22px; } .ov-kort-titel { margin-bottom: 14px; font-size: 15px; } .ov-bar-raekke { display: grid; grid-template-columns: 172px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 10px; } .ov-bar-navn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); } .ov-bar { height: 10px; border-radius: 999px; background: var(--chip); overflow: hidden; } .ov-bar-fyld { display: block; height: 100%; border-radius: 999px; } .ov-bar-ind { background: var(--green-tx); } .ov-bar-ud { background: var(--ink-3); } .ov-bar-beloeb { min-width: 112px; text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--ink); } .ov-kort-under { margin: 10px 0 12px; font-size: 12.5px; color: var(--ink-2); } .ov-kort-links { display: flex; flex-wrap: wrap; gap: 16px; } .ov-linjer { margin: 0 0 12px; } .ov-linjer > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--chip-bd); } .ov-linjer > div:first-child { border-top: 0; padding-top: 0; } .ov-linjer dt { font-size: 13.5px; color: var(--ink-2); } .ov-linjer dd { display: flex; align-items: baseline; gap: 8px; margin: 0; } .ov-linjer .num { font-family: var(--font-display); font-weight: 700; color: var(--ink); } .ov-delta { padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; } .ov-delta.op { background: var(--green-bg); color: var(--green-tx); } .ov-delta.ned { background: var(--red-bg); color: var(--red-tx); } .ov-delta.neutral { background: var(--chip); color: var(--ink-2); } /* Kildevalget (R4, 04-10-2026): kun når både e-conomic og Forta-bogen har data. */ .rd-kilde { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rd-kilde-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } /* Kassekladdens bilag (R3, 04-10-2026): én arbejdsflade — linjer, én række til en ny linje, en bund med status og handlinger. */ .kl-ny-knap { white-space: nowrap; } .kl-ny-fold { margin-bottom: 16px; } .bf-kontonr { color: var(--ink-2); margin-right: 6px; font-variant-numeric: tabular-nums; } .bf-ny .card-title { margin-bottom: 10px; } .bf-ny-raekke { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.8fr) auto; gap: 10px; align-items: end; } .bf-felt { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; } .bf-ny-knap { white-space: nowrap; } .bf-ny-knap-bund { display: contents; } /* Kontoplanens sammenfoldning (R10 «til 9»): overskriften er knappen. Pilen er en ren CSS-trekant, så den følger tekstfarven i begge temaer. */ .kp-fold { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; background: none; border: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-align: left; } .kp-fold-pil { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; } .kp-fold[aria-expanded="true"] .kp-fold-pil { transform: rotate(90deg); } .kp-fold-antal { font-size: 12px; font-weight: 400; color: var(--ink-2); } .kp-tabel tr.kp-overskrift > td { vertical-align: middle; } /* Regnskabsår (designkritik2 1d): «Lås» stod en halv række under sin periode, fordi husets tabelceller er top-justeret (`.data-table tbody td`), og knappens tekst sidder længere nede i den højere knap. Midterjusteret står den på rækken. */ table.aar-perioder tbody td { vertical-align: middle; } /* slår `.data-table tbody td` (align-top, 0,1,2) */ .bf-mere { margin-top: 10px; } .bf-mere > summary { list-style: none; cursor: pointer; display: inline-flex; min-height: 32px; align-items: center; } .bf-mere > summary::-webkit-details-marker { display: none; } .bf-bund { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } .bf-bund-tekst { font-size: 14px; } .bf-bund-knapper { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .btn-ghost.bf-kasser { color: var(--red-tx); } .bf-fjern { min-width: 36px; color: var(--ink-2); } .bf-fjern:hover, .bf-fjern:focus-visible { color: var(--red-tx); } .bf-modal-tal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; } .bf-modal-tal dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .bf-modal-tal dd { margin: 4px 0 0; font-weight: 700; color: var(--ink); } /* Kontoplanen (R10, 04-10-2026): en læst liste med grupper og sumlinjer. */ .kp-soeg { min-height: 40px; width: 16rem; } .kp-kort { padding-top: 6px; } .kp-tabel td, .kp-tabel th { padding-top: 7px; padding-bottom: 7px; } .kp-tabel .kp-nr { width: 4.5rem; color: var(--ink-2); font-variant-numeric: tabular-nums; } .kp-tabel .kp-art, .kp-tabel .kp-moms { color: var(--ink-2); } .kp-tabel .kp-saldo { width: 9rem; text-align: right; font-variant-numeric: tabular-nums; } .kp-ny-knap { white-space: nowrap; } .kp-tabel .kp-handling { width: 3.5rem; text-align: right; } .kp-tabel .kp-handling a { color: var(--ink-2); font-size: 12.5px; } .kp-tabel tr:hover .kp-handling a, .kp-tabel .kp-handling a:focus-visible { color: var(--accent-link, var(--accent)); } /* K5 (R10-kritik): «Ret» på overskrifter og sumlinjer står først ved hover/fokus på skrivebordet — 65 × «Ret» var støj. Telefonen viser det altid (ingen hover). */ @media (hover: hover) { .kp-tabel tr.kp-ret-skjult .kp-handling a { opacity: 0; } .kp-tabel tr.kp-ret-skjult:hover .kp-handling a, .kp-tabel tr.kp-ret-skjult .kp-handling a:focus-visible { opacity: 1; } } .kp-tabel tr.kp-overskrift td { padding-top: 18px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--chip-bd); } .kp-tabel tr.kp-overskrift td[data-stack-title] { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; } .kp-tabel tr.kp-sum td { font-weight: 700; border-top: 1px solid var(--chip-bd); } .kp-tabel tr.kp-sum .kp-art { font-weight: 400; font-size: 12px; } .kp-tabel tr.kp-konto td[data-stack-title] { font-weight: 500; color: var(--ink); } .kp-tabel tr.kp-spaerret td { color: var(--ink-2); } .kp-ny { scroll-margin-top: 96px; } .kp-tabel tr.kp-ret td { background: var(--bg-panel-2); } /* pakke 120: et fladt token der findes i begge temaer */ .kp-ret-felter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; justify-content: space-between; } .kp-ret-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; } .kp-ret-form .form-label { display: flex; flex-direction: column; gap: 4px; margin: 0; } .kp-moms-felt { width: 6rem; } /* Pengestrøms dagbog (R12, 04-10-2026): én linje pr. post. */ .rd-dag { display: grid; grid-template-columns: 76px minmax(0, 1fr) 128px 104px 44px; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--chip-bd); } .rd-dag-dato { font-size: 12.5px; color: var(--ink-2); } .rd-dag-tekst { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .rd-dag-navn { font-weight: 600; color: var(--ink); } .rd-dag-hvorfor { flex-basis: 100%; font-size: 12px; color: var(--ink-2); } .rd-dag-beloeb { text-align: right; font-weight: 700; } .rd-dag-saldo { text-align: right; font-size: 12.5px; color: var(--ink-2); } .rd-dag-x { min-width: 44px; } /* Egen bog uden kasse (designkritik §27/§28): samme række uden saldo-kolonnen — fraværet af saldoen er udsagnet. Talrækken over den: ind · ud · forskel. */ .rd-dag--kendt { grid-template-columns: 96px minmax(0, 1fr) 128px 44px; } .rd-ps-tal { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 12px; } .rd-dag-hoved { min-height: 0; padding: 4px 0; border-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .rd-dag-hoved > span { font-size: 11px; font-weight: 700; color: var(--ink-2); } .rd-dag > a { color: var(--ink-2); } .rd-dag > a:hover, .rd-dag > a:focus-visible { color: var(--ink); } .rd-dagbog-resten > summary { list-style: none; cursor: pointer; margin: 12px 0 4px; } .rd-dagbog-resten > summary::-webkit-details-marker { display: none; } .ov-detaljer { margin-bottom: 12px; border: 1px solid var(--chip-bd); border-radius: 14px; background: var(--bg-panel); } .ov-detaljer > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; list-style: none; cursor: pointer; font-weight: 600; color: var(--ink); } .ov-detaljer > summary::-webkit-details-marker { display: none; } .ov-detaljer > summary::after { content: '›'; margin-left: auto; font-size: 20px; color: var(--ink-2); transition: transform .15s ease; } .ov-detaljer[open] > summary::after { transform: rotate(90deg); } .ov-detaljer-under { font-size: 12.5px; font-weight: 400; color: var(--ink-2); } .ov-detaljer[open] > summary { border-bottom: 1px solid var(--chip-bd); } .ov-detaljer > .card, .ov-detaljer > div > .card, .ov-detaljer > section { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } /* ── §24.5 CC — Subview-chip-faner (genbrugelig subnav-kernekomponent) ────── CC.7 0c: løftet 1:1 fra prototypens .chips/.chip-mønster. Erstatter de flade understregnings-faner (.tab/.tab-active) på subview-navigation. Eget navn (.subnav-*) → kolliderer IKKE med filter-.chip ovenfor; de to sameksisterer. Aktiv = accent-soft-fyldt pille (white-label-sikker: bruger de 8 tema-var --accent-soft/--accent-soft-tx, ændrer dem ikke). Bruges af ordre-detalje (BATCH 3), virksomhedsopslag (BATCH 4), kundekort (BATCH 5), regnskab (BATCH 1/8). Server er source-of-truth for aktiv fane (aria-current) — samme mønster som tabs_nav; FortaSubnav-JS'en er kun til rene klient- subview-sider (alle paneler renderet på én gang). */ .subnav { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .subnav-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; line-height:1.5; padding:7px 13px; border-radius:999px; background:var(--chip); border:1px solid var(--chip-bd); color:var(--ink-2); cursor:pointer; text-decoration:none; white-space:nowrap; transition:border-color .15s ease, background .15s ease, color .15s ease; } .subnav-chip:hover { border-color:var(--accent); color:var(--ink); } .subnav-chip.on, .subnav-chip[aria-current="page"] { background:var(--accent-soft); color:var(--accent-soft-tx); /* 🔴 Andreas 24-08-2026: «det er svaert at se at man har trykket paa den». MAALT hvorfor: den aktive chip BYTTEDE en synlig kant for en usynlig tone. inaktiv kant #C3DAE0 mod #FFFFFF 1,46:1 (synlig) aktiv bg #EAF4FB mod #FFFFFF 1,12:1 (naesten intet) aktiv kant transparent (VAEK) Nettoresultatet var at den valgte fane var MINDRE markeret end sine naboer. Den beholder nu en kant — i accent-farven, saa forskellen ligger i FARVE og STYRKE og ikke i om kanten findes: aktiv kant #1E96B0 mod #EAF4FB 3,12:1 (2,1x naboens) moerk tilstand: accent mod panelet 4,35:1 ✅ */ border-color:var(--accent); font-weight:700; } /* Tæller-badge inde i en chip (fx "Fakturaer 28"). */ .subnav-chip .c { opacity:.7; font-variant-numeric:tabular-nums; font-weight:600; } /* ── Kundekort etape 1 (27-09-2026): KRAV og GRUPPE i fanerækken ────────── `.c` er gråt: hvor meget der er. `.krav` er farvet: nogen skal gøre noget («2 forfaldne»). Farverne er statuspillernes egne tokens, så lys/mørk og AA følger med dem (se CLAUDE.md, «Statusfarverne i lyst tema»). */ .c.krav { opacity:1; font-weight:700; border-radius:999px; padding:0 7px; font-variant-numeric:tabular-nums; } .c.krav .krav-antal { font-variant-numeric:tabular-nums; } .krav-due { background:var(--red-bg); color:var(--red-tx); } .krav-wait { background:var(--amber-bg); color:var(--amber-tx); } /* Gruppen er en
med en §33-menu (skal-menu.js placerer panelet). */ .subnav-gruppe { position:relative; display:inline-flex; } .subnav-gruppe > summary { list-style:none; } .subnav-gruppe > summary::-webkit-details-marker { display:none; } .subnav-gruppe[open] > summary { border-color:var(--accent); color:var(--ink); } /* En prik på «Mere» når noget derinde kræver noget — punktet selv siger hvad. */ .krav-prik { width:8px; height:8px; border-radius:50%; flex:0 0 8px; } .krav-prik.krav-wait { background:var(--amber-tx); } .krav-prik.krav-due { background:var(--red-tx); } .subnav-gruppe .fx-menu-tekst { flex:1 1 auto; } .subnav-gruppe .fx-menu-punkt[aria-current="page"] { font-weight:700; background:var(--accent-soft); color:var(--accent-soft-tx); } /* BATCH 8: lodret divider + dæmpede "på vej"-placeholders i regnskab-fanerækken. */ .subnav-div { width:1px; height:20px; background:var(--border); margin:0 4px; flex:0 0 auto; } .subnav-soon { opacity:.55; cursor:default; } .subnav-soon:hover { border-color:var(--chip-bd); color:var(--ink-2); } /* Grupperet mega-chip-klynge (BATCH 5: Salg/Økonomi/Kontakt). Gruppe-label + under-chips samlet i én pille-ramme. */ .subnav-group { display:inline-flex; align-items:center; gap:2px; padding:3px 5px 3px 10px; border-radius:999px; background:var(--bg-panel-2); border:1px solid var(--bd-panel); } .subnav-glabel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500); padding-right:4px; } .subnav-group .subnav-chip { border:0; background:transparent; padding:5px 10px; } .subnav-group .subnav-chip.on, .subnav-group .subnav-chip[aria-current="page"] { background:var(--accent-soft); } /* Grå "· på vej"-placeholder (BATCH 8: roadmap-faner uden rute endnu). */ .subnav-chip.is-coming, .subnav-chip[aria-disabled="true"] { color:var(--ink-500); background:var(--bg-panel-2); border-style:dashed; cursor:default; pointer-events:none; font-weight:600; } .subnav-chip.is-coming:hover { border-color:var(--bd-panel); color:var(--ink-500); } /* Subview-paneler: kun den aktive vises (klient-toggle ELLER server-render). */ .subview { display:none; } .subview.active { display:block; } /* ── CC.7 GATE 1 — detalje-komponenter porteret ORDRET fra design-prototypen (BATCH 3 ordre-detalje / BATCH 5 kundekort). Tokens fra 0e (--panel, --border, --ink-1..3, --grad-btn, --font-display). Prototypens --g-red/--g-green → vores --red-tx/--green-tx; --ink-3 uændret. White-label-sikkert: ingen hex, kun tokens. ──────────────────────────────────────────────────────────────────── */ .card-pad { padding:20px 22px; } /* ── To regler der MANGLEDE (25-08-2026). Begge klasser blev brugt i skabeloner uden at vaere defineret nogen steder, saa de gjorde INTET — fanget af test_doede_css_klasser. De er IKKE omdoebt til noget eksisterende, for der fandtes ikke noget der gjorde det rigtige: .side-scroll er lodret (overflow-y, sidebjaelke) og ville have vaeret et navnesammenfald, ikke en loesning. ───────────────────────────────────── */ /* Vandret rulning for en tabel der er bredere end sin spalte. Uden reglen flyder tabellen ud over kortet i stedet for at rulle inde i det. */ .table-scroll { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; } /* Modstykke til Tailwinds .text-danger. Bruges hvor et resultat LYKKEDES ved siden af en soeskende der fejlede («Virkede sidst …» / «Fejlede …»), saa de to skal ligne hinanden paa naer farven — derfor en tekstfarve og ikke en pille. */ .text-ok { color:var(--green-tx); } /* ── SMS-FLADENS FASTE RAMME (25-08-2026) ──────────────────────────────── Andreas: «naar man trykker mellem Send SMS, SMS-log og Skabeloner hopper menuen til hoejre og venstre. Standardisér saa det bliver staaende.» 🔴 FOERSTE FORKLARING VAR FORKERT, OG DEN STAAR HER FORDI DEN VAR OVERBEVISENDE. Her stod: «`sms_send.html` bar `lg:grid-cols-[1.55fr_1fr]` — en arbitrary value med NUL forekomster i den byggede app.css». Klassen var ganske rigtigt fjernet, men PAASTANDEN om app.css holdt ikke: Tailwind ESCAPER klassenavnet i outputtet (`.lg\:grid-cols-\[1\.55fr_1fr\]`), saa en `grep -F 'grid-cols-[1.55fr_1fr]'` svarer 0 paa en klasse der ER kompileret. Genmaalt 25-08 med escaped opslag OG positiv/negativ kontrol: klassen findes (1 forekomst, brugt af landing.html), og NUL af de 27 arbitrary values i levende markup mangler. Huset har allerede et vaern for netop det: test_dark_kontrast.test_arbitrary_value_klasser_er_ kompileret_ind_i_app_css. 🔴 DEN AEGTE AARSAG LAA I `base.html`, IKKE I INDHOLDET: de tre faner erklaerede hver sin `{% block shell_variant %}`, og de tre varianter har hver sin bredde (app.src.css:160-162). Maalt paa den RENDEREDE `#main`: Send SMS page-shell 1440px SMS-log page-shell page-shell--wide 1760px Skabeloner page-shell page-shell--narrow 820px Bulk-send page-shell 1440px Fane-raekken (`sms/_tabs.html`) staar INDE i `#main`, saa den flyttede sig 940px mellem to naboklik paa en 1920px-skaerm. Kuren er derfor ikke en ny klasse, men at FJERNE de to afvigende blokke: alle fire SMS-flader deler husets standard-shell. Vagt: tests/test_sms_flader_ramme.py. 🔴 OG DERFOR ER `.sms-shell { max-width:1180px }` FJERNET IGEN. Den blev skrevet her 25-08 mod den forkerte forklaring, naaede aldrig en eneste skabelon (0 forekomster i tech/templates), og var en faelde for den naeste: en regel der HEDDER SMS-fladens ramme, men som intet styrer. ───────────────────────────────────────────────────────────────────────── */ /* Send-fanen og Bulk-send deler rammen i to; Log og Skabeloner fylder den ud. Under 1024px stakker begge, saa telefonen er uaendret. */ .sms-split { display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; } @media (min-width:1024px) { .sms-split { grid-template-columns:1.55fr 1fr; } } /* Trin-tallet i Bulk-sendens tre kort (1 · 2 · 3). 🔴 AFLOESER `bg-torp-navy text-white`, SOM VAR ET MAALT BRUD: 1,13:1 i moerkt tema, fordi `torp-navy` flipper til #EAF2F8 mens `text-white` ikke flipper. Det stod som en RAPPORTERET-men-urettet undtagelse i tests/test_dark_kontrast.ALLOW_TW siden 21-08 med begrundelsen «rettelsen er markup, og skabelonerne deles med andre sessioner». Denne runde ejer sms_bulk.html, saa den er rettet frem for rapporteret, og undtagelsen er fjernet — ratchetten (`test_hver_undtagelse_undertrykker_noget`) ville ellers falde over en post der intet undertrykker. Parret er `--blue-700` paa `--accent-soft`: maalt 25-08 til 7,03:1 (lys) og 6,59:1 (moerk), AA-tekst kraever 4,50. Det er SAMME par som `.sms-num-pill:has(:checked)` paa Send-fanen, saa SMS-fladen bruger én markering og ikke to. */ .trin-tal { display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; flex:0 0 auto; border-radius:9999px; background:var(--accent-soft); color:var(--blue-700); font-size:.875rem; font-weight:600; line-height:1; } /* Sektions-mikro-overskrift (KUNDE / STATUS / KONTAKT / …). */ .mini-h { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:10px; } /* To-kolonne detalje-layout: venstre stak (340px) + højre indholds-kort. */ .detail-grid { display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; } @media (max-width:1050px) { .detail-grid { grid-template-columns:1fr; } } /* Status-rækker m. farvet prik + valgfri højre-note (.rr). */ .status-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--border); cursor:pointer; } .status-row:first-of-type { border-top:none; } .s-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; } .s-dot.red { background:var(--red-tx); box-shadow:0 0 8px var(--red-tx); } .s-dot.grn { background:var(--green-tx); box-shadow:0 0 8px var(--green-tx); } .s-dot.gry { background:var(--ink-3); } .status-row .rr { margin-left:auto; color:var(--ink-2); font-size:12.5px; font-weight:600; } /* Totaler i højre-kortet: små rækker + én stor sum-række. */ .totrow { display:flex; justify-content:space-between; font-size:13px; color:var(--ink-2); padding:5px 0; } .totrow.big { font-size:clamp(18px,1.7vw,22px); font-family:var(--font-display); font-weight:600; color:var(--ink); padding-top:12px; margin-top:6px; border-top:1px solid var(--border); white-space:nowrap; gap:16px; align-items:baseline; } /* Aktivitets-feed (tidslinje-rækker). */ .feed-item { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--border); } .feed-item:first-child { border-top:none; } /* Kunde-avatar (initialer på accent-gradient). */ .cc-avatar { width:46px; height:46px; border-radius:12px; background:var(--grad-btn); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:18px; flex:0 0 auto; } /* ── §31.7 APP-RÆKKENS ATOMER — porteret fra dok 26 (skærm 03 + 05) ───────── Prototypens rækkekomponent: [ikon/avatar] hovedlinje/underlinje [beløb/pille]. Tallene er prototypens egne; farverne er mappet som resten af CC.7 (--g-amber/--g-green/--g-red → --amber-tx/--green-tx/--red-tx), så blokken er white-label-sikker og flipper med body.dark. Kun ATOMERNE bor her. Selve udlægningen (griddet der gør en tabelrække til en app-række) er mobil-only og bor i forta-mobil.css §31.7 — skrivebordets tabel er urørt (§31.2). ─────────────────────────────────────────────────── */ /* Kundelistens avatar. 40×40/radius 12 er prototypens .avatar; .cc-avatar ovenfor er 46×46 på gradient og hører til kundekortets HOVED — to forskellige mål, derfor to klasser i stedet for én der passer nogenlunde til begge. */ .app-avatar { width:40px; height:40px; flex:0 0 40px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-soft-tx); font-family:var(--font-display); font-weight:700; font-size:13px; } /* Ordre-/faktura-/sagsrækkens ikon-flise. */ .app-row-ic { width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-soft-tx); } .app-row-ic.amber { background:var(--amber-bg); color:var(--amber-tx); } .app-row-ic.green { background:var(--green-bg); color:var(--green-tx); } .app-row-ic.red { background:var(--red-bg); color:var(--red-tx); } /* Hoved- og underlinje. 🔴 TYPOGRAFIEN ER FLYTTET TIL MOBIL-LAGET 25-08-2026 — KOMPONENTENS ANDEN DEFEKT. Her stod `font-size:13px; font-weight:600; color:var(--ink)` paa `.app-rl-main` og `font-size:11px; color:var(--ink-2)` paa `.app-rl-sub`. Begge er APP-RAEKKENS typografi, og de bor i CORE-laget, saa de ramte OGSAA skrivebordet. `_components/_app_raekke.html` udsender titel- og sub-cellen som ALMINDELIGE tabelceller over 899px (de ER skrivebordets Nr.- og Dato-kolonner), saa hver flade der kalder makroen fik app-typografi paa skrivebordet uden at nogen bad om det. MAALT paa `kunder/_tab_ordrer.html` (husets eneste makro-kalder), 1280x900: foer porteringen (fa45616f^) vaegt 500 · 12px · rgb(30,74,122) efter porteringen vaegt 600 · 13px raekkehoejden i BEGGE 159,5 px — IDENTISK 🔴 HOEJDEN FLYTTEDE SIG IKKE ÉN PIXEL. Et §31.2-vaern der kun maaler px var groent paa hele forskellen, og maalingen blev foerst mulig da vaernet ogsaa pinnede den COMPUTEDE typografi (`rf-fakturaer`s udvidelse: «ingen maa SKIFTE», ikke «ingen maa vaere fed»). Samme defektklasse som `.cell-main` (koordineringen `svar-cellmain-laekage.md`) — en app-beslutning der bor uden for app-laget. Anden forekomst, og derfor loest paa samme maade: reglen bor nu dér hvor den per konstruktion ikke kan naa skrivebordet. Se `forta-mobil.css` ved `.app-rl-main`. ⚠️ `text-decoration:none` og `line-height` BLEV her: de er ikke app-typografi, og et raekke-link skal heller ikke vaere understreget paa skrivebordet — det var det ikke foer makroen fandtes. Kun de tre egenskaber der MAALT flyttede sig, er flyttet. */ .app-rl-main { line-height:1.3; text-decoration:none; } .app-rl-sub { } /* Beløbet i højre kolonne: mono, så cifrene flugter lodret ned gennem listen. */ .app-beloeb { font-family:var(--font-mono); font-size:11.5px; letter-spacing:-.02em; font-weight:600; color:var(--ink); } /* Kort-overskrift MED antal ("ORDRER · 3"). */ .app-kort-t { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); } /* Breddeafhængigt indhold i ÉN celle. Bruges hvor app-rækken og skrivebordets tabel skal vise samme tal i forskelligt format — beløbet er "kr 30.550,00" i tabellen og bart "30.550" i rækken. Alternativet var at lade app-formatet gælde begge steder, men så mistede skrivebordet valutaen. Kun de to spans dubleres, aldrig rækkens struktur. Modstykket står i forta-mobil.css. */ /* 🔴 SKJULES I ET MIN-WIDTH-LAG, IKKE GLOBALT. Et globalt `.kun-app{display:none}` skal laves om igen under 899px, og dét "om igen" må gætte på en display-værdi (inline? block? grid?). Første udgave gættede `inline`, og scan-knappens `display:grid` tabte til den — knappen blev 46×46 med ucentreret ikon. Med reglen i et min-width-lag findes den slet ikke på mobil, og hver komponent beholder sin egen display. */ @media (min-width: 900px) { .kun-app { display: none !important; } } /* 🔴 .filter-skuffe SKAL VÆRE `display:contents` SOM UDGANGSPUNKT (D1). Værktøjslinjens vælgere og datofelter fik en omkring sig, så mobil-laget kan folde dem væk bag «Filtrér». Uden denne regel er den span ÉT flex-element i `.filter-row`, og skrivebordets seks vælgere ville klumpe sammen i én kolonne i stedet for at ligge på rækken — en §31.2-brud forårsaget af MARKUP, ikke af en CSS-regel der lækkede ud af sit lag. Målt med scripts/proto_desktop_uroert.py: uden reglen flyttede 1440px- fladen sig; med den er de 577 elementer uændrede. Reglen bor her og ikke i app.src.css, fordi app.css er en bygget bundle der ikke kan genskabes reproducerbart hos os. Mobil-laget (der loades sidst) overskriver den med none/flex. */ .filter-skuffe { display: contents; } /* 🔴 !important ER IKKE DOVENSKAB HER — DET ER HELE KONTRAKTEN. Uden det tabte reglen til `.app-scan-mini{display:grid}` tretten linjer længere nede: begge selektorer er ÉN klasse (0,1,0), en media-query giver ingen specificitet, og så vinder den SIDSTE. Scan-knappen stod synlig på skrivebordet ved 1440px (målt i merge-runde 4: display=grid, 46×46 på [884,151], søgefeltet skubbet fra 670px til 616px). Rækkefølge er en skrøbelig løsning: den brydes af den næste der indsætter en regel imellem, og fejlen er tavs — et element DUKKER OP hvor det ikke må være. En synlighedsklasse har en absolut kontrakt ("findes ikke over 899px"), og den må hverken afhænge af hvem der står sidst eller af hvor mange klasser næste mand hænger på sin selektor. 🔴 ASYMMETRIEN ER GRUNDEN TIL AT NETOP SKJULE-REGLER SKAL HAVE ET VÆRN: forsvinder noget der burde være der, ser man det med det samme — der står et tomt hul. Dukker noget op på skrivebordet, opdages det først den dag nogen kigger på 1440px. Derfor stod min egen kolonnetælling (6/6 og 4/4) grøn mens værktøjslinjen var brudt: beviset var sandt om det det målte og for smalt om det det påstod. Værnet er `tests/test_kun_app_kaskade.py` — den RESOLVERER kaskaden og fejler hvis !important fjernes. Kommentaren ovenfor beskrev i forvejen præcis denne kollision tre linjer fra fejlen og forhindrede ingenting: en kommentar er ikke et værn. */ /* 🔴 DENNE REGEL LANDER I ADMIN — OGSÅ SELVOM DEN IKKE RAMMER NOGET I DAG. `forta-core.css` lastes af BEGGE apps (målt i den kørende admin-app: core lastet, forta-mobil og forta-dark ikke). Reglen er inert dér, fordi nul admin-skabeloner bruger klassen — men det er en garanti med en udløbsdato ingen kan se: den dag en admin-skabelon tager `.kun-app` i brug, arver den skjulningen over 900px uden at nogen har besluttet det, og uden at en test bliver rød. Navnet er generisk nok til at det kan ske ved et tilfælde. Skal reglen ALDRIG gælde admin, hører den hjemme i forta-theme-crm.css i stedet — det er en bevidst flytning, ikke en fejlretning. */ /* Scan-knappen ved søgefeltet (kundelisten). */ .app-scan-mini { width:46px; height:46px; flex:0 0 46px; border-radius:13px; display:grid; place-items:center; background:var(--grad-btn); color:#fff; border:none; cursor:pointer; box-shadow:var(--shadow); } /* 🔴 --shadow, IKKE prototypens --btn-shadow: den token findes ikke i vores tokensæt (målt 15-08: 0 definitioner). En var() uden definition falder tilbage til ingenting — knappen ville stå helt uden skygge, og CSS'en ville se rigtig ud imens. --shadow er den nærmeste vi HAR. */ /* ── §8a/§17.4 TOPZONE — dokument-detaljens sidehoved (ETAPE 1, 25/7) ──────── Porteret ORDRET fra den godkendte mockup docs/design-prototype/ ordre-redesign-v3a-final.html (Forslag A-rev2), tokens mappet: prototypens --ink-500 → --ink-3, --bd-panel/--bg-panel uændret. Hvorfor eget navnerum (.tz-*): topzonen skal kunne bæres UÆNDRET af ordre- (Etape 1), faktura- (Etape 2) og tilbud-detaljen (Etape 3). Derfor INGEN dokument-specifikke navne her — kun struktur. Markup'en bygges af _components/_topzone.html; alt dokument-specifikt bor i kaldende template. White-label-sikkert: kun tokens, ingen hex → flipper med body.dark. ──────── */ /* Titel-linjen: H1 + statuspille (§5) + dæmpet subhead, alt på én linje. */ .tz-title { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; min-width:0; } .tz-title h1 { margin:0; white-space:nowrap; } /* 🔴 FREMMEDDATA I EN OVERSKRIFT — MAIL-EMNET. `white-space:nowrap` ovenfor er rigtig for de fire flader hvor titlen er HUSETS egen og kort («Ordre #17156», «Faktura #4402», «Tilbud #4711», «SAG-40122»). Den femte er mailind/detalje.html, hvor titlen er et EMNE skrevet af en afsender vi ikke styrer, og laengden er derfor vilkaarlig. Maalt 17-09-2026 ved 393x852, begge temaer, paa /kunder/100/mail/ med et emne paa 78 tegn: h1 x=18 -> hoejre=741,4 (723,4 px bred i et 393 px vindue) body.scrollWidth 741 mod documentElement.clientWidth 393 body overflow-x: clip Emnet var altsaa baade KLIPPET og umuligt at rulle frem til. Brugeren kunne ikke se hvad mailen hed. 🔴 VALGET ER OMBRYDNING, IKKE ELLIPSE. En ellipse kraever at teksten er naabar et andet sted, og det er den ikke: listen paa /mail/ubundet klipper emnet til ÉN linje med vilje (`-webkit-line-clamp:1`, forta-mobil.css — med sin egen skrevne begrundelse), og paa en telefon findes der ingen hover til at hente et `title`-attribut frem med. Afkortede vi ogsaa detaljen, ville emnet vaere naabart INGEN steder. At rulle vandret er heller ikke en mulighed: `body` baerer `overflow-x: clip`, saa overloebet er BORTE og ikke uden for skaermen. 🔴 OG DEN DELTE REGEL ROERES IKKE. Selektoren er `.tz-title.tz-title-fritekst` (0,2,1) og ikke `.tz-title-fritekst` (0,1,1): sidstnaevnte ville vaere LIG med `.tz-title h1` i specificitet og dermed afhaenge af raekkefoelgen i filen — en senere regel med samme vaegt draeber en tidligere tavst, og CSS-teksten ser uaendret ud. Med to klasser vinder den uanset hvor den staar. `overflow-wrap:anywhere` og ikke `break-word`: et emne kan vaere ét ubrudt token (en URL, et sagsnummer, en base64-streng), og `break-word` bryder ikke et ord der staar alene paa sin linje. `min-width:0` fordi h1'en er et flex-barn og ellers ikke maa skrumpe under sin indholdsbredde. Vagt: tests/test_mail_emne_klip.py (rendret maaling i begge temaer). */ .tz-title.tz-title-fritekst h1 { white-space:normal; overflow-wrap:anywhere; min-width:0; } .tz-subhead { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; } /* Info-panelet: ét kort i fuld bredde, kolonner adskilt af hårfine lodrette linjer (ikke af luft) — det er dét der giver e-conomic-tætheden. position:relative er ANKERET for status-stakkens fold-ud-panel nedenfor. */ .tz { display:grid; background:var(--bg-panel); border:1px solid var(--bd-panel); border-radius:var(--radius-panel); padding:14px 0; margin-bottom:14px; position:relative; } .tz-col { padding:2px 16px; border-left:1px solid var(--ink-100); font-size:12.6px; min-width:0; } .tz-col:first-child { border-left:0; } /* Label/værdi-par (OVERSKRIFT / BETALINGSFRIST / VORES REF. …). */ .tz-kv { margin:0 0 7px; line-height:1.45; } .tz-kv:last-child { margin-bottom:0; } /* ÉN felt-label-stil i hele info-panelet (§8a-tillæg 25/7). Panelets to midterkolonner blev bygget hver for sig og arvede derfor hver sin label-stil: .tz-kv > b her, og .detail-info-label (10px, font-medium, tracking-label) fra detaljesidens gamle venstrekolonne. To label-stilarter side om side i SAMME panel var utilsigtet — nu deler alle syv felt-labels .tz-flabel. Typografien er den kolonne-overskrifterne (.mini-h) havde, fordi de netop UDGÅR på kolonne 2+3: labelen bærer nu hele den visuelle rolle alene. Bevidst IKKE .mini-h genbrugt direkte — den har margin-bottom:10px til at sætte afstand ned til et helt kort, hvilket ville gøre panelet HØJERE, og det er præcis det modsatte af dette tillægs formål. */ .tz-flabel { display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); } /* Reference-folden (målt 15-08-2026). `
` bærer de tre referencefelter så telefonen kan folde dem; SKRIVEBORDET SKAL SE PRÆCIS DET SAMME SOM FØR. Derfor to ting her og kun to: elementet er gennemsigtigt i layoutet (ingen margin/padding/kant), og kontakt-rækken er skjult. Skabelonen skriver `open` altid, så indholdet står åbent — hvilket er nøjagtig den tilstand de tre .tz-kv'er havde som direkte børn af kolonnen. Summary vises KUN når static/js/tz_refs.js har sat data-foldet, og det gør den kun under breakpointet (se forta-mobil.css). Uden JavaScript findes folden derfor ikke — hverken her eller på telefonen. */ .tz-refs { display: block; margin: 0; padding: 0; border: 0; } .tz-refs > summary { display: none; } /* ── SAGSFLADEN (/sager/) ──────────────────────────────────────────────── Prototypens `#scr-sagdetalje`. Ruten er ny (15-08-2026), så der findes ingen leveret skrivebordsvisning at værne om — derfor bor GRUNDLAYOUTET her og ikke i mobil-laget. §31.2's krav om ét media-lag beskytter FLADER DER ER LEVERET; en flade der ikke fandtes i går, har ingen tilstand at bevare. Tommelmål og fuldbredde-knapper ligger stadig i mobil-laget, hvor de hører. 🔴 KLASSERNE HER BLEV SKREVET I SKABELONEN FØRST OG GLEMT HER. Fladen stod en time i drift med seksten klassenavne uden én regel: kundekortet var `display:inline`, så avatar, tekst og chevron lå oven i hinanden. Syv grønne tests så det ikke, fordi de asserterede på statuskoder og tekst. `tests/test_klasser_har_regler.py` er vagtposten der ville have fanget det. Målene er prototypens, ikke skønnede: avatar 36×36/r12, ikonflade 36×36/r11, checkboks 22×22/r7, foto-miniature 74×74/r13. */ /* Kundekortet — HELE rækken er målet, som i prototypen. */ /* S · kundekortets polstring er prototypens EGEN, ikke `.mcard`s generelle: `#scr-sagdetalje`s foerste kort har `style="padding:11px 15px"`, fordi det baerer én raekke og ikke en blok. 15/16 gjorde det til et kort paa hoejde med tidslinjen, og saa laeses det som en SEKTION frem for som en genvej. */ /* 🔴 `.card.sag-kunde` OG IKKE `.sag-kunde`. app.css laeses EFTER forta-core.css (base.html:23 mod :25), og dens `.card{@apply p-4}` har samme specificitet — saa den vandt, og polstringen blev staaende paa 15/16 selvom reglen her sagde 11/15. Maalt: vagtposten var GROEN, fordi den spurgte om reglen STAAR der, ikke om den VINDER. To klasser haever specificiteten til (0,2,0) og goer kilde-ordenen ligegyldig. */ .card.sag-kunde { padding:11px 15px; } .sag-kunde { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; margin-bottom:12px; } .sag-kunde:hover { border-color:var(--accent); } .sag-kunde-av { width:36px; height:36px; flex:0 0 36px; border-radius:12px; font-size:13px; background:var(--accent-soft); color:var(--accent-soft-tx); background-image:none; } .sag-kunde-tx { display:flex; flex-direction:column; min-width:0; } .sag-kunde-chev { margin-left:auto; color:var(--ink-2); display:flex; flex:0 0 auto; } /* Tidslinjen — service-audit. Ikonfladen er prototypens 36×36, ikke en prik. */ .sag-tid { list-style:none; margin:0; padding:0; } /* S · tidslinjens raekke er TAET (3px), fordi ikonfladen paa 36px allerede saetter raekkehoejden. 9px oveni gjorde hver haendelse 46px hoej, og en historik paa ti haendelser til en side man skal rulle igennem. */ .sag-tid-r { display:flex; align-items:flex-start; gap:12px; padding:3px 0; border-top:1px solid var(--ink-100); } .sag-tid-r:first-child { border-top:0; padding-top:0; } .sag-tid-ic { width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-soft-tx); } .sag-tid-tx { display:flex; flex-direction:column; min-width:0; } /* Checklisten — og S7: en udført linje er BÅDE grøn boks og gennemstregning. */ .sag-chk { list-style:none; margin:0 0 10px; padding:0; } /* S · checkpunktet baerer selv typografien (13px/600), ikke kun sin tekst. Prototypens `.chk` er 13px/600 paa RAEKKEN; hos os laa vaegten kun paa `.sag-chk-tx`, saa alt andet i raekken — inklusive et fremtidigt tal eller en dato — ville falde tilbage til 12px/400. */ .sag-chk-r { display:flex; align-items:center; gap:11px; padding:10px 0; font-size:13px; font-weight:600; border-top:1px solid var(--ink-100); } .sag-chk-r:first-child { border-top:0; } .sag-chk-box { width:22px; height:22px; flex:0 0 22px; border-radius:7px; border:1.5px solid var(--bd-control,#A9C3CB); display:grid; place-items:center; color:var(--on-status-fill,#fff); } .sag-chk-r.is-done .sag-chk-box { background:var(--green-tx); border-color:var(--green-tx); } .sag-chk-tx { font-size:13px; font-weight:600; color:var(--ink); min-width:0; /* 1,3 og ikke 1,5: et checkpunkt er en linje man afkrydser, ikke en saetning man laeser. Med broedtekst-luft blev to punkter til fire linjers hoejde. */ line-height:1.3; } .sag-chk-r.is-done .sag-chk-tx { color:var(--ink-2); text-decoration:line-through; } /* Foto — miniature i prototypens mål. */ .sag-foto { display:flex; gap:10px; flex-wrap:wrap; } .sag-foto-t { width:74px; height:74px; flex:0 0 74px; border-radius:13px; display:grid; place-items:center; background:var(--bg-panel-2,var(--ink-100)); border:1px solid var(--bd-panel); /* 🔴 --ink-2, ikke --ink-3. Maalt af test_dark_kontrast paa den fulde suite: --ink-3 gav 2,82:1 i lyst og 3,41:1 i moerkt mod panelfladen. Glyffen er et ikke-tekst UI-element, hvor AA kraever 3,0 — den lyse faldt UNDER selv den graense. En 74px flade med en glyf man ikke kan se, er en knap der ligner et hul. */ color:var(--ink-2); } /* Handlingerne. Fuldbredde hører i mobil-laget; her kun stakken. */ .sag-akt { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; } .sag-akt-b { justify-content:center; } /* Tilbage-knappen i titel-linjen — prototypens `.back-btn` (A1). 🔴 40×40 I PROTOTYPEN, 44 I PRAKSIS. Mobil-lagets §31.6-regel giver enhver knap `min-height:44px` under breakpointet, så den måler 40×44 på telefon. Det er ikke en fejl: §31.6 kræver ≥44px for ETHVERT interaktivt element, mens prototypens egen designprincip kun nævner bundnav, betalingsknapper og ring/SMS. Vores regel er strengere med vilje, og en målt regel vinder over en tegning. Målt 15-08 — nævnt her så næste måling ikke melder det som en afvigelse. */ .tz-back { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; padding:0; border-radius:12px; } /* A2 · chevronen der peger paa kundekortet. Den ER linket (se noten i view.html om hvorfor raekken ikke kan vaere det), saa den skal se ud som en vej og ikke som pynt: hoejrestillet, daempet, og med en flade der lyser op naar man er paa vej. */ .tz-kunde-chev { margin-left:auto; display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:10px; color:var(--ink-3); text-decoration:none; } /* 🔴 --accent-link, ikke --accent. Maalt: --accent gav 3,17:1 i lyst og 3,51:1 i moerkt mod hover-fladen. --accent-link er husets AA-sikrede accent — den findes praecis fordi den rene accent ikke baerer tekst. */ .tz-kunde-chev:hover { background:var(--ink-100); color:var(--accent-link); } /* Status-stakken (§8b) som topzone-kolonne. Rækken ER — fold-ud er ren CSS (
), ingen JS. Det åbne panel ankres under HELE topzonen (ikke i den smalle kolonne), så betjeningen får fuld bredde. */ .tz-strow { border-bottom:1px solid var(--ink-100); } .tz-strow:last-of-type { border-bottom:0; } .tz-strow-sum { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12.6px; cursor:pointer; list-style:none; user-select:none; } .tz-strow-sum::-webkit-details-marker { display:none; } .tz-strow-sum::marker { content:''; font-size:0; } /* Status-prikken. Farven kommer fra `--sdot-farve` i markup'en, og fladen laeser den derfra — saa den samme ene farve kan blive til en PRIK her og til en 36x36 flade i mobil-laget (C6), uden at skabelonen skal vide hvilken. Glyffen indeni er skjult paa skrivebordet: §8a's status-stak er leveret med en prik, og den skal blive en prik. */ .tz-sdot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--sdot-farve); } .tz-sdot > svg { display:none; } .tz-strow-lbl { font-weight:600; color:var(--ink); } /* ORDREFIX (24-09-2026): `white-space:normal` + `min-width:0`. Var `nowrap`, og i status-kolonnen (~150 px ved 1400) flød «Afventer kunde» ud over kolonnens kant og ind i totalerne — maalt paa /ordrer/30000 foer rettelsen. Et kort vaerdi-ord ombryder ikke; et langt ombryder i stedet for at flyde. */ .tz-strow-val { margin-left:auto; color:var(--ink-2); font-size:11.5px; white-space:normal; min-width:0; text-align:right; } /* UNDERSKRIFTSTATUS (01-10-2026): underskrift-raekkens VAERDI maa bryde til sin egen linje under etiketten. Kolonnen er 180 px (148 px indhold) ved alle skrivebordsbredder; prik + «Underskrift» efterlader ~50 px, og «Underskrevet 01-10-2026 09:26» er ~160. Maalt foer: fire linjer, datoen brudt i tre, et loest «·» og «Underskrevet» 19 px ud over kolonnens kant. Tilstand og tid er hver sin `nowrap`-enhed, saa de kun kan bryde MELLEM hinanden. Kun `.tz-sig-sum` — Service/Bogfoert er uroerte. */ .tz-sig-sum { flex-wrap:wrap; row-gap:2px; } .tz-sig-val { display:inline-flex; flex-wrap:wrap; justify-content:flex-end; column-gap:6px; max-width:100%; } .tz-sig-tilstand, .tz-sig-tid { white-space:nowrap; } /* «Se underskriften»: husets AA-sikrede link-farve (--accent-link, ikke den rene accent — se .tz-kunde-chev ovenfor), understregning og et info-ikon. Saettes KUN naar der er en underskrift at se (view.html: `data-sig-se`). */ .tz-sig-se { display:inline-flex; align-items:center; gap:4px; color:var(--accent-link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; } .tz-sig-sum:hover .tz-sig-se { text-decoration-thickness:2px; } .tz-sig-ikon { flex:0 0 auto; } .tz-sig-sum:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } .tz-strow-panel { position:absolute; left:0; right:0; top:100%; z-index:25; margin-top:8px; padding:16px 18px; background:var(--bg-panel); border:1px solid var(--bd-panel); border-radius:var(--radius-panel); box-shadow:var(--elev-float); } /* ── UNDERSKRIFTSVINDUET (01-10-2026) ────────────────────────────────────── Andreas 01-10 (via forta-d6): «Underskrift skal redesignes i ordre - den ser mærkelig ud i toppen når man aktiverer som om der ikke er plads til den, og luk funktion er væk». Målt før ved 1280: det ventende kort stod 147 px bredt i status-kolonnen; uden underskrift 956 px under topzonen, ikke centreret. Panelet er nu et VINDUE i husets modal-mønster (samme overlay som ordrer/_create_draft_modal.html): fast over hele siden, mørk baggrund, kortet centreret i op til 640 px. Luk/Esc/klik på baggrunden i static/js/ordre-underskrift-vindue.js. Åbnes med rækkens eller `?underskrift=1` (Butik-kravets knap). 🔴 ID-SELEKTOREN ER NØDVENDIG: mobil-lagets `.tz-strow-panel:has(#signature-card)` har specificitet (1,1,0) og lægger panelet i flowet. (1,3,0) her vinder i begge lag uden !important. *(Erstatter blokkene «ORDREFIX 1 (24-09-2026)» og «UNDERSKRIFTKORT (28-09-2026)», som foldede den VENTENDE tilstand ud fladt I den 180 px kolonne via `data-i-flow`. Den markør sættes ikke længere — kortet har fået vinduets plads, og det var den plads Andreas savnede.)* Vagt: tests/test_underskrift_vindue.py (rendret, 1280 + 393). */ .tz-strow[data-sig-vindue][open] > #underskrift-vindue { position:fixed; inset:0; z-index:70; margin:0; display:flex; align-items:flex-start; justify-content:center; padding:max(16px, 8vh) 16px 16px; overflow-y:auto; background:rgba(0,0,0,.5); border:0; border-radius:0; box-shadow:none; } .tz-strow[data-sig-vindue][open] > #underskrift-vindue > #signature-card { width:100%; max-width:640px; margin:0; box-shadow:var(--elev-float); } html:has(.tz-strow[data-sig-vindue][open]) { overflow:hidden; } /* Ikon + destination på ÉN linje (arvet fra 28-09-kolonnen, hvor reglen stod under `data-i-flow`). Uden den står ikonet på sin egen linje over «Sendt til …». Vagt: tests/test_underskriftkort_28_09.py */ #signature-substatus-text { display:flex; align-items:center; gap:6px; } #signature-substatus-text > svg { flex:0 0 auto; } /* «Butik / Kontor» (01-10-2026): knapperne i valgvinduet og i Ordretype- rækken. 44 px er §31.6's mål og briefens krav — på begge flader, også skrivebordet, fordi valget træffes ved disken, ofte på en tablet. Vagt: tests/test_ordre_underskriftskrav.py */ .ordretype-knap { min-height:44px; min-width:96px; justify-content:center; } .ordretype-valg-knapper > .ordretype-knap { flex:1 1 0; } /* Total-blokken (yderste kolonne, højrestillet, §3-momsreglen). */ .tz-tot { display:flex; flex-direction:column; gap:3px; align-items:flex-end; font-variant-numeric:tabular-nums; } .tz-tot-row { display:flex; gap:18px; font-size:12.6px; white-space:nowrap; } .tz-tot-row > span { color:var(--ink-2); } .tz-tot-sum { font-family:var(--font-display); font-weight:700; font-size:17px; margin-top:2px; white-space:nowrap; color:var(--ink); } .tz-tot-sub { font-size:11px; color:var(--ink-2); } /* A5 · totalens etiket. Prototypen saetter den som en dæmpet versal-linje OVER tallet — den skal kunne skimmes uden at konkurrere med beloebet. */ .tz-tot-lab { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-top:6px; } /* FarPay-raekken i total-blokken (08-09-2026). 🔴 DEN MAA IKKE VAERE EN `tz-tot-row`. De oevrige raekker er «kort etiket + ét tal»; denne er «etiket + dato + pille» og altsaa ~2,5x bredere. `.tz-tot-row` har `white-space:nowrap`, og blokken staar med `align-items:flex-end` i en kolonne med `min-width:0` — en for bred nowrap-raekke kan derfor ikke krympe og floeder UD TIL VENSTRE, hen over STATUS-kolonnen. Maalt paa faktura #17334. Derfor stables den: etiket paa egen linje, vaerdi+pille under — samme form som `tz-tot-lab` + `tz-tot-sum` lige nedenfor. Hver linje er kort nok til at holde sig i kolonnen, og pillen maa ombryde frem for at skubbe. */ .tz-tot-fp { display:flex; flex-direction:column; align-items:flex-end; gap:2px; margin-top:4px; max-width:100%; min-width:0; } .tz-tot-fp-lab { font-size:11px; color:var(--ink-2); white-space:nowrap; } .tz-tot-fp-val { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; font-size:12.6px; } /* Handlingsrækken (§8a): ÉN linje, ingen ombrydning, mellem topzone-panelet og indholds-kortet. */ .tz-acts { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0; margin-bottom:14px; } /* ── BETALINGSLINKETS UDFOLDNING (25-08-2026) ──────────────────────────── Andreas: «Der gaar ogsaa noget designmaessigt galt naar man trykker paa Betalingslink under en ordre.» 🔴 AARSAGEN: udfoldningen (telefonfelt + Send + Fortryd) ligger som soeskende til knappen INDE i `.tz-acts` — en `flex-wrap:nowrap`-raekke. ⚠️ 27-08-2026: KNAPPEN ER FLYTTET TIL ⋯-MENUEN, UDFOLDNINGEN ER IKKE. Reglerne herunder er derfor UAENDREDE og stadig rigtige — de har altid peget paa `[data-betalingslink="felt"]`, aldrig paa knappen. Det der er skiftet, er hvad man trykker paa foer panelet kommer: ⋯ i hoejre ende af raekken frem for en knap i raekken. Panelet aabner stadig ved `left:0`, altsaa i VENSTRE ende — en bevidst uaendret detalje, ikke en overset: ankeret er raekken og ikke udloeseren, og et panel der fulgte ⋯ ville skulle forankres til et element der lukker sig selv i samme klik. Naar `hidden` fjernes, bliver den et flex-ELEMENT i raekken og skubber «Konvertér til faktura», «Vis til kunde» og resten sammen. Skaermbilledet viser dem overlappe hinanden. Kuren er at tage den UD AF FLOWET frem for at kaempe om pladsen i raekken: et panel forankret under knappen, som husets popovers. Raekken maerker intet, og feltet faar den bredde det har brug for. ⚠️ `.tz-acts` faar `position:relative` — den er ankeret. Uden det ville panelet forankre sig til naermeste positionerede forfader, og det er uforudsigeligt fra denne fil. */ .tz-acts { position:relative; } .tz-acts [data-betalingslink="felt"]:not(.hidden) { position:absolute; top:calc(100% - 6px); left:0; z-index:40; background:var(--bg-panel); border:1px solid var(--bd-panel); border-radius:12px; padding:10px 12px; box-shadow:0 12px 32px -16px rgba(0,0,0,.45); } /* Under breakpointet er der ikke plads til et panel ved siden af noget som helst — dér fylder det bredden ud og skubber som en almindelig blok. */ @media (max-width:899px) { .tz-acts [data-betalingslink="felt"]:not(.hidden) { position:static; box-shadow:none; border:0; padding:0; background:transparent; } } .tz-acts-more { display:inline-block; position:relative; flex:0 0 auto; } .tz-acts-more > summary { list-style:none; cursor:pointer; user-select:none; } .tz-acts-more > summary::-webkit-details-marker { display:none; } /* Etiketten ved ⋯ hoerer KUN til telefonens grid (forta-mobil.css §8a-gridet). Paa skrivebordet er raekken ÉN linje og har ikke plads til ordet. */ .tz-mere-etiket { display:none; } /* ⋯-menuens chrome UDEN FOR topzone-rækken (§8d). .tz-acts-more bærer flex:0 0 auto og hører derfor kun hjemme i .tz-acts; alt andet er ens. Findes som KLASSE og ikke som inline-styles fordi et pseudo-element ikke kan skrives inline: uden ::-webkit-details-marker viser WebKit stadig
-trekanten ved siden af ⋯. Præcis det manglede i de to hånd-rullede menuer (tilbuds-detaljen og tilbuds-listens rækker), og inline-mønstret kunne aldrig have rettet det. */ .fx-more { display:inline-block; position:relative; } .fx-more > summary { list-style:none; cursor:pointer; user-select:none; } .fx-more > summary::-webkit-details-marker { display:none; } /* ═══ §33 MENUKOMPONENTEN — ÉN for hele CRM (menuloeft, 24-09-2026) ════════ Andreas 24-09: «Tjek hele CRM igennem for grimme bokse som disse. De skal designoptimeres.» Skuddet var kundekortets «⋯ Mere»: ikonet paa sin EGEN linje over teksten, «Book tid» og «Bekraeft paa tablet» flydt sammen til én linje, ingen luft og ingen hover. 🔴 AARSAGEN VAR IKKE KUNDEKORTET — DET VAR AT HUSET INGEN KOMPONENT HAVDE. `.qa-phone-menu`/`.qa-phone-item` havde NUL regler paa skrivebordet (kun i forta-mobil.css, under 899px). Hver menu skrev sit chrome som inline-style, og hvert punkt sit eget `display:flex; align-items:center; gap…`. Ordrens ⋯ saa rigtig ud fordi dens punkter bar den inline-stil; kundekortets «Mere» blev bygget 24-09 uden den — og saa var et med et SVG (`display:block` fra Tailwinds preflight) og en tekstnode praecis det Andreas saa. Samme aarsag i Udskriv ▾, Print labels ▾ og tablet-menuen i topbaren (maalt: 3+3+7 punkter med ikonet over teksten). Derfor bor udseendet HER, én gang, og markup'en baerer kun klasser:
(valgfri: kun luk/tastatur) ⋯