/* ========================================================================== TodoIT Platform — designsystem Eget layout-sprog (app-shell, sidebar, page-header, bento) oven på en minimal Bootstrap-brug: Public Sans, bløde skygger, bolde overskrifter, pille-knapper — men i støvet blå. ========================================================================== */ @font-face { font-family: "Public Sans"; src: url("fonts/public-sans-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 800; font-display: swap; } :root { --font: "Public Sans", "Segoe UI", system-ui, sans-serif; /* Accenten på det valgte punkt i menuen. Eget token og ikke --brass: brass skifter med temaet (mørkebrun i lyst tema), men MENUEN er marineblå i begge temaer. Brass ville derfor blive mørkebrunt på mørkeblåt, hver gang nogen slog lyst tema til — en fejl, der kun rammer halvdelen af brugerne, og som derfor kunne stå længe. Værdien er den lyse brass, der hører til en mørk flade. Efterregnet i tests/kontrastcheck mod --navy-950. */ --side-accent: #e6bd7c; /* Støvet blå skala */ --navy-950: #131c28; --navy-900: #1b2735; --navy-800: #243449; --navy-700: #33475f; --navy-600: #4a6485; --blue-500: #5c7fa8; --blue-400: #7c9bc0; --blue-300: #a5bcd5; --blue-200: #c8d8e7; --blue-100: #dfe9f2; --blue-50: #eff4f9; /* Varme neutraler */ --paper: #ffffff; /* Fladen er varm, ikke kold. Paletten HAR haft varme neutraler hele tiden (--clay-*), men selve siden brugte dem ikke — den lå på en kold blågrå, og så trak alt på skærmen mod blåt. Retning A, 25. august 2026: papiret bliver varmt, og den blå bliver noget, man bruger, i stedet for noget, alting ligger i. */ --shell: #f6f4f1; --clay-100: #f5efe8; --clay-200: #e6d8c8; /* Messing — den ENESTE accent. Værdien er ikke ny: den er --warn-ink, som allerede er efterregnet i tests/kontrastcheck. Den er bevidst genbrugt frem for opfundet, så paletten ikke vokser med endnu en tone. Bruges til eyebrow, gruppeoverskrifter og aktiv menupost — ALDRIG til status. Status har sine egne tre farver, og en accent, der også kan betyde «advarsel», er ikke en accent. */ --brass: #7d5a24; /* Grafernes linjer. Én farve pr. slags linje, brugt af linjen, forklaringens nøgle OG aflæsningens swatch, så de tre ikke kan glide fra hinanden i et af temaerne: now (grafens linje), prev (perioden før / den anden måling, stiplet og dæmpet), in/out (ind/ud på et netværkskort — de stod som hex inde i live-panelet). */ --series-now: var(--navy-800); --series-prev: var(--muted); --series-in: #1d9e75; --series-out: #378add; --ink: #16202e; --ink-2: #3b4a5d; /* Aliaser: disse tokens blev refereret rundt i filen uden at være defineret, så de faldt tilbage på off-palette-farver (Tailwind-hex eller forkert tone). De peger nu på den rigtige palette-værdi ét sted. --ink-1 = primær, --ink-3 = tertiær (lysere end --ink-2); --brand = accent til fokus-ringe; --blue-600 = mørkere blå til link-hover. */ --ink-1: var(--ink); --ink-3: var(--muted); --brand: var(--blue-400); --blue-600: var(--navy-700); /* The keyboard focus ring (KC, 6 October 2026). --blue-400 was 2.87:1 on --paper and 2.62:1 on --shell, under the 3:1 a focus indicator needs (WCAG 1.4.11). --blue-500 is 4.15:1 on --paper, 3.78:1 on --shell and 3.38:1 on --blue-100. The dark theme sets its own (see there). */ --focus-ring: var(--blue-500); /* Begge er TEKSTfarver, ikke pynt. --faint stod på #94a2b4 = 2,60:1 mod papiret og blev brugt som rigtig brødtekst 237 steder: tidsstempler, tomme tilstande, tal i diagrammer. --muted lå på 4,44:1 og faldt også, bare knap. Begge måles nu i tests/kontrastcheck mod både --paper og --shell, så det ikke kan ske igen. Rangordenen mellem dem er bevaret — faint er stadig den lyseste af de to. */ --muted: #5d6c80; --faint: #627183; --line: rgba(19, 28, 40, 0.085); --line-2: rgba(19, 28, 40, 0.16); --shadow-xs: 0 1px 2px rgba(19, 28, 40, 0.05); --shadow-sm: 0 4px 14px rgba(19, 28, 40, 0.06); --shadow-md: 0 14px 34px rgba(19, 28, 40, 0.09); --shadow-lg: 0 26px 58px rgba(19, 28, 40, 0.14); --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; /* Knapper var pillefformede (999px). En pille er en etiket — den ser ud som noget, man læser, ikke som noget, man trykker på. Egen token, så den kan rulles tilbage alene, hvis den skurrer. */ --r-btn: 8px; --good: #3f8a5c; --good-bg: #e8f2ec; --warn: #b07d33; --warn-bg: #f8f0e2; --crit: #ac4a41; --crit-bg: #f8eae8; /* Tekstfarver til brug PÅ de tre baggrunde ovenfor. --good og --warn er valgt som accentfarver og har ikke kontrast nok til at være tekst på deres egen lyse baggrund — --warn lander på 3,2:1, hvor kravet er 4,5. Disse er mørknet, til de holder. Verificeret i tests/kontrastcheck. */ --good-ink: #2f6b46; --warn-ink: #7d5a24; --crit-ink: #8e3a32; /* Stjernevurdering (kundetilfredshed). Egen guld — de øvrige gule (--warn) er for brune til en stjerne. */ --gold: #f5a623; --sidebar-w: 268px; /* Rammen om en sides indhold. 1360 px kom med den første commit uden en begrundelse og blev aldrig rørt; den bandt fra omkring 1638 px vindue, så alt derover blev tomt felt i højre side — 282 px ved 1920, 1802 px ved 3440. Loftet binder nu først ved 2078 px, så en 1920- skærm bruger hele bredden. Over det holder et loft stadig igen, fordi det, der vokser ukontrolleret, er fritekst-kolonner i tabeller, som ingen wrapper styrer. */ --indhold-max: 1800px; /* Semantiske link-farver. Den blå/navy-skala er dobbeltarbejdende — den er BÅDE mørke flader (sidebar, knapper) OG tekst/links. Links kan derfor ikke bare bruge et skala-trin direkte, for så kan et mørkt tema ikke lysne linket uden også at lysne fladen. Links går nu gennem disse to, så det mørke tema flipper dem alene. */ --link: var(--navy-700); --link-hover: var(--navy-950); /* The overview tiles (Components/Shared/Tiles, the Tiles block after .status). One big-number size in the platform: --tile-fs-num = .stat__value. The lamp, band and bar colours are mixes of the status and blue tokens, so the dark theme only redefines the mix. */ --tile-gap: 1rem; --tile-pad: 1rem 1.15rem 0.95rem 1.4rem; --tile-stripe: 4px; --tile-fs-num: 2.15rem; --tile-fs-of: 1.02rem; --tile-fs-label: 0.68rem; --tile-fs-text: 0.875rem; --tile-fs-meta: 0.78rem; --lamp: 0.72rem; --lamp-big: 1.05rem; --lamp-gap: 0.26rem; /* Full --good in the light theme, not the specimen's 82 % mix: measured in tests/feltcheck, the softer green lamp fell to 2.65:1 on the critical tile's surface and 2.96:1 on an area cell - under the 3:1 a meaningful graphic needs. */ --lamp-ok: var(--good); --lamp-hollow: color-mix(in srgb, var(--muted) 60%, transparent); --band-ok: color-mix(in srgb, var(--good) 45%, var(--paper)); --band-none: color-mix(in srgb, var(--ink) 8%, var(--paper)); --bar: color-mix(in srgb, var(--blue-400) 62%, var(--paper)); --bar-now: var(--blue-500); --bar-zero: var(--line-2); --area-bg: color-mix(in srgb, var(--ink) 2.5%, var(--paper)); color-scheme: light; /* Bootstrap-broer (kun det vi faktisk bruger) */ --bs-body-bg: var(--shell); --bs-body-color: var(--ink); --bs-secondary-color: var(--muted); --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-primary: var(--navy-800); --bs-primary-rgb: 36, 52, 73; --bs-link-color: var(--link); --bs-link-hover-color: var(--link-hover); --bs-success: var(--good); --bs-warning: var(--warn); --bs-danger: var(--crit); --bs-secondary: var(--muted); --bs-font-sans-serif: var(--font); } /* ========================================================================== Mørkt tema. Hele appen er bygget på de semantiske tokens ovenfor, så temaet er i alt væsentligt ét sæt omdefinerede tokens. Vi overskriver KUN det, der bærer lyshed: neutraler, status-tints, streger, skygger, de lyseste blå trin (der bruges som lyse baggrunde) og link-farven. De mørke navy-trin er allerede mørke og bruges til flader, der er mørke i BEGGE temaer (sidebar, topbar, knapper) — dem rører vi ikke. Temaet vælges af et lille script i (tema.js), der sætter data-theme FØR første maling ud fra brugerens valg, ellers systemets indstilling — så der ikke blinker en lys side, før det mørke tema når frem. Derfor er der ingen @media-dublet her; CSS'en behøver kun [data-theme="dark"]. */ :root[data-theme="dark"] { /* Neutraler — hele flippen sker her */ --paper: #1a2431; /* kort og paneler — en anelse lysere end siden */ --shell: #10161f; /* side-baggrund, mørkest */ --clay-100: #221d18; /* varme neutraler, mørk udgave (bruges sjældent) */ --clay-200: #33291f; --ink: #e8eef5; /* primær tekst — næsten hvid */ --ink-2: #b4c1d1; /* sekundær tekst */ --muted: #96a5b8; /* dæmpet tekst — lysnet, så kontrasten holder på mørkt */ --faint: #8494a7; /* svag tekst */ --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.19); /* Skygger skal være sorte og dybere på mørkt — de blålige forsvinder. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.50); --shadow-lg: 0 26px 58px rgba(0, 0, 0, 0.62); /* Status: accenten løftes en smule; -bg bliver en mørk tint; -ink en lys tekst. */ --good: #4c9d6d; --good-bg: #16241b; --good-ink: #83cf9f; --warn: #cc9a48; --warn-bg: #26200f; --warn-ink: #e6bd7c; --crit: #cf5f55; --crit-bg: #291715; --crit-ink: #ec938a; --gold: #f5b73f; /* Messing bærer lyshed og skal derfor flippe. Samme greb som i det lyse tema: værdien er temaets egen --warn-ink, altså allerede efterregnet mod den mørke flade. */ --brass: #e6bd7c; /* Grafernes kurve var mørk navy — det samme som fladen bag den i det mørke tema (1,24:1), så kurven, der er hele pointen med en graf, forsvandt næsten. Den løftes her, i tokenet, og ikke med en regel på .chart__line: sådan en regel slog også ind/ud og perioden før, så båndbreddens to linjer fik samme farve. */ --series-now: var(--blue-300); --series-in: #4fc49c; --series-out: #6aa9ee; /* Kun --blue-50 flipper — det bruges UDELUKKENDE som lys hover-/panel-baggrund og ville ellers stå som lyse pletter. --blue-100 og opefter er lyse nok til tekst på mørk bund (bl.a. sidemenuens tekst = var(--blue-100)) og beholdes; de få steder, der bruger dem som lys BAGGRUND, får en målrettet mørk regel nedenfor. */ --blue-50: #1c2836; /* subtil hover-baggrund */ /* Links lysner alene (mørke navy-flader er urørte). */ --link: var(--blue-300); --link-hover: var(--blue-200); /* The focus ring stays --blue-400 here: 5.45:1 on --paper, 6.32:1 on --shell, 5.20:1 on --blue-50. (--blue-500 would hold 3:1 too, at 3.60:1 on --blue-50, but the lighter one is the clearer ring.) */ --focus-ring: var(--blue-400); /* The overview tiles: the mixes that carry lightness. */ --lamp-ok: color-mix(in srgb, var(--good) 88%, var(--paper)); --band-ok: color-mix(in srgb, var(--good) 55%, var(--paper)); --bar: color-mix(in srgb, var(--blue-300) 50%, var(--paper)); --bar-now: var(--blue-300); color-scheme: dark; /* Bootstrap-broer, der pegede på mørke navy-værdier og skal lysne på mørkt. */ --bs-primary: var(--blue-500); --bs-primary-rgb: 92, 127, 168; --bs-link-color: var(--link); --bs-link-hover-color: var(--link-hover); /* Bootstraps «fremhævede» tekst og dens to flader. Platformens mørke tema er vores eget (data-theme), ikke Bootstraps (data-bs-theme), så uden de her linjer blev de stående på Bootstraps LYSE værdier: #000 og #f8f9fa/#e9ecef. Og det så man. Bootstrap afleder mindst ni farver af --bs-emphasis-color — tabellers hover-, stribe- og aktiv-tekst, listeelementers hover og aktiv, den aktive fane og tooltip'ens flade. Målt i headless Edge med den rigtige app.css den 18. september 2026: en tabelrække, man holdt musen over, skrev rgb(0, 0, 0) på den mørke hover-flade — sort på næsten sort — og et listeelement fik sort tekst på en næsten HVID flade. KC's skærmbillede var «Tid der afventer fakturering» på Tidsoverblikket. Kun her i det mørke tema, så det lyse er pixel for pixel, som det var. Fladerne peger på platformens egne: hover er --blue-50 (som .table's egen hover allerede bruger), og den lidt kraftigere «aktiv/deaktiveret» ligger mellem papir og hover. */ --bs-emphasis-color: var(--ink); --bs-emphasis-color-rgb: 232, 238, 245; --bs-tertiary-bg: var(--blue-50); --bs-tertiary-bg-rgb: 28, 40, 54; --bs-secondary-bg: #243142; --bs-secondary-bg-rgb: 36, 49, 66; /* Bootstraps rgb-tripletter for brødtekst og side. --bs-body-color var broet, men ikke dens -rgb, og det er tripletten, Bootstrap bruger med gennemsigtighed: den svævende etiket i et .form-floating-felt fik rgba(33,37,41,.65) — Bootstraps lyse — oven på den mørke side, 1,11:1. Etiketten i login-feltet forsvandt i det øjeblik, man begyndte at skrive. Dækker også .text-body, .bg-body, .toast og .card-hovedet. Fundet af søgningen efter mørk-på-mørk, 18. september 2026, målt i headless Edge. */ --bs-body-color-rgb: 232, 238, 245; --bs-body-bg-rgb: 16, 22, 31; /* «Sekundær» som dæmpet flade: .alert-secondary, .bg-secondary-subtle, .list-group-item-secondary. Stod på Bootstraps lysegrå #e2e3e5 — en lys plade midt i mørket, hvor kontakten for kundekontakt på Indstillinger havde en titel, man ikke kunne læse (1,10:1). --blue-50 og ikke --shell, så kontaktens spor (--shell) stadig står frem inde i boksen. */ --bs-secondary-text-emphasis: var(--ink-2); --bs-secondary-bg-subtle: var(--blue-50); --bs-secondary-border-subtle: var(--line-2); } /* --- Mørkt tema: komponenter, der hardkoder en lys værdi (pastel, hvid, mørk navy-tekst) og derfor ikke flipper med tokens. Hver får en målrettet mørk variant. --- */ /* Topbar-knapper og bruger-pillen: den halvhvide flade ville stå som en lys plet på den nu mørke topbar. Giv dem en mørk flade, så tekst og ikon (nu lyse) træder frem. */ :root[data-theme="dark"] .topbar__user { background: var(--paper); } :root[data-theme="dark"] .notif__btn, :root[data-theme="dark"] .topbar__signout { background: var(--paper); } :root[data-theme="dark"] .notif__btn:hover, :root[data-theme="dark"] .topbar__signout:hover { background: var(--blue-50); color: var(--ink); } :root[data-theme="dark"] .brugermenu__knap:hover { background: var(--blue-50); } /* Dokument-type-badges: lyse pasteller → mørke tints med lys tekst. */ :root[data-theme="dark"] .doc__ext--pdf { background: #3a2320; color: #f0a79e; } :root[data-theme="dark"] .doc__ext--doc { background: #21304a; color: #a9c3ea; } :root[data-theme="dark"] .doc__ext--sheet { background: #1c3326; color: #8fd3a9; } :root[data-theme="dark"] .doc__ext--img { background: #2e2440; color: #cba9e2; } :root[data-theme="dark"] .doc__ext--zip { color: #e2c69c; } /* «Se som kunde»-banner: varm lys amber → mørk amber. */ :root[data-theme="dark"] .viewas { background: linear-gradient(90deg, #2a2314, #211d10); border-bottom-color: #4a3d1f; color: #e6c98a; } :root[data-theme="dark"] .viewas__exit { background: rgba(255, 255, 255, 0.06); border-color: #6a5628; color: #e6c98a; } :root[data-theme="dark"] .viewas__exit:hover { background: rgba(255, 255, 255, 0.12); } /* Blazor-fejl-toast: egen lys amber → mørk. */ :root[data-theme="dark"] #blazor-error-ui { color-scheme: dark; background: #2a2114; color: #e6c98a; border-top-color: #4a3d1f; } /* Info-boks: mørk navy-tekst ville forsvinde på den nu mørke blå baggrund. */ :root[data-theme="dark"] .alert-info { color: var(--blue-200); border-color: var(--line-2); } /* Sags-chip: lys blå flade + mørk tekst → mørk flade + lys tekst. */ :root[data-theme="dark"] .tkt-chip { background: var(--shell); color: var(--ink-2); } :root[data-theme="dark"] .tkt-chip:hover { background: var(--blue-50); } /* Opfølger- og vidensbase-links bruger mørk navy som tekst → lysnes. */ :root[data-theme="dark"] .tkt-opfoelger a, :root[data-theme="dark"] .kb-article a { color: var(--link); } /* Vidensbasens kode/citat brugte lyseblå (blue-100) som flade/kant. */ :root[data-theme="dark"] .kb-article code { background: var(--shell); color: var(--ink); } :root[data-theme="dark"] .kb-article pre { background: var(--shell); } :root[data-theme="dark"] .kb-article blockquote { border-left-color: var(--line-2); } :root[data-theme="dark"] .kb-article hr { border-top-color: var(--line-2); } :root[data-theme="dark"] .kb-article th, :root[data-theme="dark"] .kb-article td { border-bottom-color: var(--line-2); } :root[data-theme="dark"] .kb-article .kb-opgave input { accent-color: var(--link); } /* Mørk navy brugt som TEKST/ikon står ulæseligt på en nu mørk flade. Det ramte bl.a. outline-knapperne («Ny mappe», «Tjek alle», «Tjek de N vi måler udefra»), et par ikon-/link-farver og et par badges. Her lysnes de, så de kan læses. */ :root[data-theme="dark"] .btn-outline-primary, :root[data-theme="dark"] .btn-outline-secondary { color: var(--ink); border-color: var(--line-2); /* Tastaturfokus og tryk bruger Bootstraps egne udfyldninger, ikke :hover-reglen herunder — og de var lyse nok til at give 3,85:1 bag lys tekst. Nu samme flader som resten af det mørke tema. */ --bs-btn-hover-bg: var(--blue-50); --bs-btn-hover-border-color: var(--blue-400); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--blue-400); } :root[data-theme="dark"] .btn-outline-primary:hover, :root[data-theme="dark"] .btn-outline-secondary:hover { color: var(--ink); border-color: var(--blue-400); } /* Rød og grøn outline samt grøn tekst brugte Bootstraps faste farver (#dc3545, #198754), som står lige under læsbar på mørkt (3,46:1). Temaets egne -ink-farver er beregnet til netop den flade. */ :root[data-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--crit-ink); --bs-btn-border-color: var(--crit); } :root[data-theme="dark"] .btn-outline-success { --bs-btn-color: var(--good-ink); --bs-btn-border-color: var(--good); } :root[data-theme="dark"] .text-success { color: var(--good-ink) !important; } :root[data-theme="dark"] .text-danger, :root[data-theme="dark"] .validation-message { color: var(--crit-ink) !important; } /* Pilen i en valgmenu er et SVG med Bootstraps mørke streg (#343a40), som Bootstrap kun bytter under sit EGET mørke tema. På vores mørke flade var den næsten usynlig (1,36:1), så ~124 valgmenuer lignede tekstfelter. Samme pil, lys streg (= mørk --ink-2). */ :root[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b4c1d1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } /* En kontakt i «fra»-stilling: knappen er en cirkel med 25 % sort — usynlig mod det mørke spor (1,04:1), så en slået-fra kontakt stod som en tom pille, og man kunne ikke se, at den var en kontakt. Lys knap (= mørk --muted). «Til» og fokus har deres egne regler og røres ikke. Since 6 October 2026 the knob no longer changes on focus either (it turned Bootstrap blue after a click and stayed so): focus is shown by the keyboard ring alone, so this rule holds while focused. */ :root[data-theme="dark"] .form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2396a5b8'/%3e%3c/svg%3e"); } :root[data-theme="dark"] .form-check-input { --bs-border-color: var(--line-2); } /* .table-light sætter sine egne tabelvariabler (#000 på #f8f9fa) og overtrumfer dermed .table's — en hvid stribe midt i en mørk tabel. Én forekomst (DmarcMailbox, gruppehovedet), men reglen her gælder den næste, der bruger klassen, også. */ :root[data-theme="dark"] .table-light { --bs-table-color: var(--ink); --bs-table-bg: var(--blue-50); --bs-table-border-color: var(--line); --bs-table-striped-color: var(--ink); --bs-table-striped-bg: var(--bs-secondary-bg); --bs-table-active-color: var(--ink); --bs-table-active-bg: var(--bs-secondary-bg); --bs-table-hover-color: var(--ink); --bs-table-hover-bg: var(--bs-secondary-bg); } :root[data-theme="dark"] .stat__dot { color: var(--blue-300); } :root[data-theme="dark"] .mods__row .icon { color: var(--blue-300); } :root[data-theme="dark"] .sscore__hvem > summary { color: var(--link); } :root[data-theme="dark"] .notif__lyd { color: var(--ink-2); } :root[data-theme="dark"] .form-check-input:checked { background-color: var(--blue-500); border-color: var(--blue-500); } /* Badges med lys blå flade + mørk navy-tekst. */ :root[data-theme="dark"] .badge.bg-primary { background: var(--shell) !important; color: var(--ink) !important; } :root[data-theme="dark"] .badge.bg-info { color: var(--blue-200) !important; } * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100%; font-family: var(--font); color: var(--ink); background: var(--shell); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { font-family: var(--font); color: var(--ink); font-weight: 700; letter-spacing: -0.015em; margin: 0; } /* Blazor's enhanced navigation programmatically focuses the page's

after each navigation (for screen readers). Det fokus er ikke noget en seende bruger nogensinde selv har tabbet sig til — h1 er ikke i tab-rækkefølgen — så vi skjuler ringen helt i stedet for bare at style den, ellers popper den grimt op ved hvert sideskift. */ h1:focus, h1:focus-visible { outline: none; } p { margin: 0; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } /* ========================================================================== Scrollbars — diskrete i stedet for Windows' tykke grå standard, der især dominerer i den mørke sidemenu. To lag, fordi ingen browser kan begge: den moderne standard (scrollbar-width/ -color, arves fra html) dækker Firefox; ::-webkit-scrollbar dækker Chromium/ Edge/Safari. Thumben holdes tynd med en gennemsigtig kant + background-clip, så den flyder som en smal pille i stedet for at fylde hele sporet. ========================================================================== */ /* scrollbar-width arves ikke pålideligt til indre scroll-områder, så den sættes bredt (rammer kun elementer, der faktisk kan rulle). Gælder Firefox; Chromium/Edge/Safari styres af ::-webkit-scrollbar nedenfor. */ * { scrollbar-width: thin; scrollbar-color: rgba(19, 28, 40, 0.22) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(19, 28, 40, 0.22); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(19, 28, 40, 0.36); } /* Den mørke sidemenu: en mørk thumb ville forsvinde — lys, men stadig diskret. */ .side__nav { scrollbar-color: rgba(255, 255, 255, 0.24) transparent; } .side__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.24); } .side__nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.42); } /* ========================================================================== App shell ========================================================================== */ .app { display: flex; min-height: 100vh; } .app__main { flex: 1; min-width: 0; position: relative; background: radial-gradient(1100px 520px at 78% -8%, rgba(168, 192, 216, 0.28), transparent 65%), radial-gradient(760px 420px at 8% 108%, rgba(230, 216, 200, 0.32), transparent 62%), var(--shell); } /* Stadig en almindelig blok — se advarslen nedenfor. Ikke centreret: topbjælken er i fuld bredde med den samme 2,5rem venstre-padding, så indhold og topbjælke deler venstrekant. Centrering ville bryde den flugt for at lave en ny. Læseflader og formularer har hver deres eget loft, dér hvor de bor. */ .app__content { max-width: var(--indhold-max); padding: 2.25rem 2.5rem 3.5rem; } /* One vertical rhythm for stacked page blocks. .panel carried no bottom margin, so two panels — or a panel next to another card — sat flush against each other, while .hero/.bento/.status/.aftale each brought their own margin; the spacing between top-level cards was therefore uneven from page to page. This gives every top-level block the same gap above it. Adjacent vertical margins collapse in this block container, so the existing per-card margins are absorbed into this one value rather than doubling. IMPORTANT: keep .app__content a plain block — do NOT add display:flex/grid, overflow, or contain to it, or margin-collapse stops and every gap becomes additive (a header's 1.9rem + this 1.5rem = 3.4rem). */ .app__content > * + * { margin-top: 1.5rem; } /* The same rhythm for the few page bodies that do NOT sit directly under .app__content, so their stacked panels/cards are grandchildren the rule above cannot reach: a page wrapped in one max-width column (.doc-col), the account-settings content column (.acct__col), the public pages under PublicLayout (.pub__inner) and the auth/receipt card (.auth__card). Same collapsing owl selector, so no doubling. */ .doc-col { max-width: 52rem; } /* Kontosidernes indholdskolonne havde kun rytme-reglen, intet loft: den fulgte rammen hele vejen ud. Samme mål som læsespalten — det er formularer og korte afsnit, ikke en tabel. */ .acct__col { max-width: 52rem; } .doc-col > * + *, .acct__col > * + *, .pub__inner > * + * { margin-top: 1.5rem; } .auth__card > .panel + .panel, .auth__card > .panel + .alert { margin-top: 1.25rem; } /* Two panels stacked inside one bento cell (e.g. the ticket-detail columns): the bento's own gap spaces the cells, not siblings within a cell, and .panel has no margin — match the bento gap between them. */ .bento .panel + .panel { margin-top: 1.15rem; } /* ========================================================================== Sidebar ========================================================================== */ .side { width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient(178deg, var(--navy-900) 0%, var(--navy-950) 100%); color: var(--blue-100); /* Menuen er navigation — ikke tekst man markerer. Uden dette markerer et dobbeltklik (eller et lille træk) på en sektionsoverskrift som «Administration» linjerne omkring den, og browserens markeringsfarve lægger sig som en bjælke hen over overskriften. Overskrifterne selv var allerede umarkerbare, men linkene rundt om var det ikke — så markeringen spændte hen over dem. */ -webkit-user-select: none; user-select: none; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: width 0.18s ease; /* Klip alt der stikker uden for de 100vh. .side__nav ruller selv indeni (overflow-y:auto), men de absolut-positionerede fold-checkbokse (checkbox-hacket for de sammenklappelige sektioner) lå ellers nederst i menu-flowet UDEN for højden og forlængede hele sidens rullehøjde — så man kunne rulle ned i tomt hvidt rum under indholdet på moduler, hvor menuen var højere end selve siden. */ overflow: hidden; } /* ========================================================================== Test-/demo-miljøbanner (App.razor) Banneret ligger fast øverst i en 24px stribe. Når det er der (body.har-testbanner), skubbes hele app-shellen ned under det, så det ikke længere dækker top-baren eller sidemenuen. De top-forankrede sticky-elementer (.topbar, .side) klæber nu under banneret i stedet for op under det. ========================================================================== */ body.har-testbanner { padding-top: 24px; } body.har-testbanner .app { min-height: calc(100vh - 24px); } body.har-testbanner .topbar { top: 24px; } @media (min-width: 901px) { /* Kun på desktop er .side sticky/100vh — på mobil er den relativ og flyder selv med under banneret via body-paddingen, så den må ikke røres her. */ body.har-testbanner .side { top: 24px; height: calc(100vh - 24px); } } /* Menuen og topbaren bliver staaende, mens en dialog er aaben. Det haandteres i todoitModal i shortcuts.js — se klaebTilbage() dér. Det er med vilje ikke loest her i CSS: forskydningen maales paa det enkelte element frem for at blive regnet ud, saa den ogsaa passer for klaebende elementer laengere nede paa siden. */ .side__brand { display: flex; align-items: center; gap: 0.7rem; padding: 1.4rem 1.35rem 1.25rem; color: #fff; } /* Den globale "a:hover" nedenfor slår ellers ordmærket mørkt (næsten usynligt på den mørke sidebar). */ .side__brand:hover { color: #fff; } .side__mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, var(--blue-400), var(--navy-600)); display: grid; place-items: center; font-weight: 800; font-size: 0.86rem; letter-spacing: -0.02em; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); flex-shrink: 0; } .side__wordmark { font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.15; } .side__wordmark span { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue-400); } .side__nav { flex: 1; /* min-height:0 er nødvendig: uden den har et flex-barn min-height:auto og kan ikke krympe under sit indhold — så en menu, der er højere end skærmen (fx når «Administration» foldes ud), RULLER ikke indeni, men vokser i stedet forbi skærmen og skubber fold-knappen ned med et mørkt tomrum under sig. Med min-height:0 ruller .side__nav selv, og skinnen bliver stående nederst. */ min-height: 0; overflow-y: auto; padding: 0.4rem 0.85rem 1rem; } .side__section { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(165, 188, 213, 0.62); padding: 1.15rem 0.75rem 0.45rem; } .side__link { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: 11px; color: var(--blue-200); font-size: 0.875rem; font-weight: 600; line-height: 1.3; margin-bottom: 2px; transition: background-color 0.13s ease, color 0.13s ease; } .side__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .side__link.active { background: rgba(124, 155, 192, 0.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(165, 188, 213, 0.2); } /* Et FASTGJORT punkt står to steder: som genvej i toppen og på sin egen plads i modullisten. Kun genvejen lyser. Originalen beholder sin «active» fra NavLink — den er bare ikke tegnet som aktiv her, så markeringen bliver ved med at betyde ét sted, ikke to. Sættes af pins.js; se side__row--dublet dér. */ .side__row--dublet > .side__link.active { background: transparent; color: var(--blue-200); box-shadow: none; } .side__row--dublet > .side__link.active:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .side__row--dublet > .side__link.active .icon { opacity: 0.85; } .side__link .icon { flex-shrink: 0; opacity: 0.85; } /* Ikonet tager accenten på det valgte punkt. Uden den var det aktive punkt kun en blågrå vask — samme familie som resten af menuen, så øjet skulle lede efter det. Accenten sidder på IKONET og ikke på teksten: teksten er allerede hvid og fed, og en farvet etiket oveni ville gøre punktet skrigende frem for tydeligt. */ .side__link.active .icon { opacity: 1; color: var(--side-accent); } /* Dubletten skal heller ikke have accenten — ellers ville den lyse på anden vis end resten af listen og stadig se ud som «her er du». Se .side__row--dublet. */ .side__row--dublet > .side__link.active .icon { color: inherit; } .side__toggle { display: none; } /* Foldbare menu-sektioner. Selve foldningen er ren CSS: en skjult checkbox pr. sektion, hvis :checked-tilstand styrer, om gruppen under den vises. nav-fold.js husker blot valget pr. bruger. */ .side__fold { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .side__section--fold { display: flex; align-items: center; cursor: pointer; user-select: none; transition: color 0.12s ease; } .side__section--fold:hover { color: rgba(165, 188, 213, 0.92); } /* Pilen: peger til højre når foldet, ned når åben. */ .side__section--fold::after { content: ""; margin-left: auto; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; opacity: 0.7; } .side__fold:checked ~ .side__section--fold::after { transform: rotate(45deg); } .side__fold:not(:checked) ~ .side__group { display: none; } /* Fastgør-knappen ligger over linkets højre ende og vises kun ved hover, så den ikke støjer. Er punktet fastgjort, står den gyldne stift fast — også som markering. */ .side__row { position: relative; } .side__row .side__link { padding-right: 2.1rem; } /* Tallet ved et menupunkt («3 åbne hændelser»). Tegnes fra data-tal på rækken og ikke som markup, fordi de fastgjorte genveje er KLONER — se menutal.js. Klonen arver attributtet og dermed mærket, uden at der skal gøres noget. Nul findes ikke: menutal.js fjerner attributtet i stedet for at skrive "0". Et menupunkt med et gråt 0 ved siden af ligner noget, der er gået i stå — er der ingenting, står der ingenting. */ .side__row[data-tal]:not([data-tal=""])::after { content: attr(data-tal); position: absolute; /* Til venstre for nålen, som sidder på 6px. Uden for redigeringstilstand er nålen usynlig, men pladsen er den samme — så tallet flytter sig ikke, når man slår rediger til. */ right: 1.6rem; top: 50%; transform: translateY(-50%); font-size: 0.68rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--crit); pointer-events: none; } /* Sammenklappet menu: der er ikke plads til et tal ved siden af ikonet, så det bliver til en prik oppe i hjørnet. Tallet er væk, men «her er noget» er det, der skal bæres videre — ellers ville en sammenklappet menu tie om et nedbrud. */ :root[data-rail="1"] .side__row[data-tal]:not([data-tal=""])::after { content: ""; right: 8px; top: 7px; transform: none; width: 6px; height: 6px; border-radius: 50%; background: var(--crit); } /* A folded section that holds an item with a number gets a dot after its title (25 October 2026), the rail's rule: the number is hidden, «something is here» is not. The error log's badge sits in a section that starts folded, and so does every section a person has folded away. Pure CSS on the same data-tal, so menutal.js keeps it live without knowing. The chevron is ordered last, so the dot stands by the title and the chevron stays at the right edge. The staff menu only (review of 25 October 2026): a customer's menu is drawn with the same fold markup, and the change was for Todo-IT's menu. NavMenu sets data-menu; "view as customer" gives a customer's menu, without the dot. */ .side__nav[data-menu="staff"] .side__section--fold::after { order: 2; } .side__nav[data-menu="staff"] .side__fold:not(:checked) ~ .side__section--fold:has(~ .side__group .side__row[data-tal]:not([data-tal=""]))::before { content: ""; order: 1; width: 6px; height: 6px; margin-left: 0.45rem; border-radius: 50%; background: var(--crit); } .side__pin { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--blue-300); cursor: pointer; padding: 4px; line-height: 0; border-radius: 6px; /* Skjult uden for rediger-tilstand: menuen er ren, og ét tryk navigerer — også på mobil, hvor en synlig nål før stjal det første tryk. Nålene vises kun i «rediger genveje». */ display: none; opacity: 0.55; transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease; } .side--edit .side__pin { display: inline-flex; } .side--edit .side__pin:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); color: #fff; } .side__pin--on { opacity: 1; color: var(--gold); } .side__pin--on .icon { fill: currentColor; } /* «Genveje»-sektionen bruger de samme rækker/links som resten af menuen — ingen særlig stil udover en anelse luft under sig. */ .side__genveje { margin-bottom: 0.35rem; } /* Genveje kan omordnes ved træk-og-slip. Gribe-markøren er selve signalet om, at rækkerne kan trækkes; klik navigerer stadig. (pins.js håndterer trækket; kun desktop — touch har ikke HTML5-DND.) */ /* Genveje kan omordnes ved at trække håndtaget — kun i rediger-tilstand. */ .side--edit .side__genveje .side__row { cursor: grab; } .side__row--traekker { opacity: 0.4; cursor: grabbing; } /* Indsæt-streg, der viser hvor rækken lander — tegnet med en inderskygge, så den ikke flytter layout. */ .side__row--drop-foer { box-shadow: inset 0 2px 0 0 var(--gold); } .side__row--drop-efter { box-shadow: inset 0 -2px 0 0 var(--gold); } /* Trækhåndtag i Genveje — kun synligt i rediger-tilstand (nålen ligger til højre, håndtaget til venstre). I rediger fanger håndtaget selv trækket (pointer-events:auto) med touch-action:none, så en finger kan trække uden at rulle siden — virker med både mus og berøring (iPad/mobil). pins.js indsætter ⠿-tegnet i klonerne. */ .side--edit #side-genveje-list .side__row .side__link { padding-left: 1.75rem; } .side__grip { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 0.95rem; line-height: 1; user-select: none; display: none; } .side--edit .side__grip { display: block; cursor: grab; opacity: 0.75; pointer-events: auto; touch-action: none; } .side--edit .side__grip:hover { opacity: 1; color: var(--muted); } /* I skinne-tilstand er linkene kun ikoner og centreret — hverken plads til grebet eller den ekstra venstremargen. */ :root[data-rail="1"] .side__grip { display: none; } :root[data-rail="1"] #side-genveje-list .side__row .side__link { padding-left: 0; } /* I skinne-tilstand er der hverken plads til eller mening i fastgør-knapper. */ :root[data-rail="1"] .side__pin { display: none; } :root[data-rail="1"] .side__row .side__link { padding-right: 0; } /* ========================================================================== Ikon-skinne: sidemenuen foldet til kun ikoner. Tilstanden (data-rail på ) sættes af nav.js — før første maling, så bredden ikke hopper — og genanvendes efter Blazor-navigation, ligesom temaet. ========================================================================== */ /* Sidemenuens bund: «Rediger genveje» + «Fold sammen/ud», som en samlet fod frem for en løs knap, der før sad og flød nederst. */ .side__foot { margin: 0.35rem 0.7rem 0.7rem; flex-shrink: 0; } .side__edit-hint { display: none; font-size: 0.72rem; color: var(--muted); line-height: 1.4; padding: 0 0.3rem 0.5rem; } .side--edit .side__edit-hint { display: block; } .side__foot-row { display: flex; gap: 0.4rem; } .side__foot-btn { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.7rem; border: 0; border-radius: 11px; background: rgba(255, 255, 255, 0.05); color: var(--blue-300); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background-color 0.13s ease, color 0.13s ease; } .side__foot-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .side__foot-btn .icon { flex-shrink: 0; } /* «Rediger genveje» fylder bredden; «Fold sammen» er kun et ikon ved siden af. */ .side__edit { flex: 1 1 auto; } .side__edit[aria-pressed="true"] { background: rgba(212, 175, 55, 0.16); color: var(--gold); } .side__rail { flex: 0 0 auto; } /* ========================================================================== Host-monitor picker («Overvåg en vært») — opdag → flueben → tærskel-dialogen. ========================================================================== */ .hm-sec { margin-top: 1rem; } .hm-sec__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; } .hm-count { font-weight: 600; color: var(--gold); margin-left: 0.3rem; } .hm-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.3rem; cursor: pointer; border-radius: 7px; } .hm-row:hover { background: rgba(127, 127, 127, 0.09); } .hm-row input[type="checkbox"] { flex-shrink: 0; margin: 0; } .hm-row__name { flex: 1 1 auto; min-width: 0; } .hm-row__detail { color: var(--muted); font-size: 0.82rem; margin-left: 0.4rem; } .hm-row__thr { flex-shrink: 0; font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; } .hm-num { width: 4.4rem; padding: 0.25rem 0.45rem; border-radius: 7px; border: 1px solid rgba(127, 127, 127, 0.35); background: var(--paper, transparent); color: inherit; font: inherit; font-size: 0.85rem; } .hm-num:disabled { opacity: 0.5; } .hm-list { max-height: 260px; overflow-y: auto; margin-top: 0.45rem; border: 1px solid rgba(127, 127, 127, 0.22); border-radius: 9px; padding: 0.25rem 0.45rem; } /* Sensor management: one card per reading, thresholds that WRAP so nothing is ever clipped off the right edge of the modal (the old wide table hid "critical above"). */ .sensor-edit { display: flex; flex-direction: column; gap: 0.6rem; } .sensor-edit__row { border: 1px solid rgba(127, 127, 127, 0.22); border-radius: 9px; padding: 0.55rem 0.7rem; } .sensor-edit__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .sensor-edit__name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .sensor-edit__thr { display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; margin-top: 0.55rem; } .sensor-edit__thr label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); } .sensor-edit__note { margin-top: 0.4rem; font-size: 0.78rem; color: var(--muted); } :root[data-rail="1"] .side { width: 66px; } :root[data-rail="1"] .side__brand { justify-content: center; padding-left: 0; padding-right: 0; } :root[data-rail="1"] .side__wordmark { display: none; } :root[data-rail="1"] .side__label { display: none; } /* Skjuler både fold-overskrifterne og «Genveje»/«Konto»-overskrifterne. */ :root[data-rail="1"] .side__section { display: none; } :root[data-rail="1"] .side__nav { padding-left: 0.5rem; padding-right: 0.5rem; } :root[data-rail="1"] .side__link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } /* Skinnen viser ALLE ikoner: fold-tilstanden ignoreres, så intet er skjult bag en foldet sektion. */ :root[data-rail="1"] .side__group { display: block !important; } /* I skinne-tilstand stables fod-knapperne og vises kun som ikoner; hintet giver ingen mening der. */ :root[data-rail="1"] .side__foot { margin-left: 0.5rem; margin-right: 0.5rem; } :root[data-rail="1"] .side__foot-row { flex-direction: column; } :root[data-rail="1"] .side__foot-btn { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } :root[data-rail="1"] .side__foot-label { display: none; } :root[data-rail="1"] .side__edit-hint { display: none !important; } /* ========================================================================== Topbar (bruger + notifikationer, øverst til højre) ========================================================================== */ /* Bliver stående i toppen. Klokken opdaterer sig selv nu, og en klokke, der ruller ud af skærmen, kan lyse så meget den vil uden at nogen ser det. Søgefeltet får den samme tur med — det er alligevel det, man rækker ud efter først. z-index under 900: hurtig tidsregistrering (900), modaler og notifikationspanelet (950/951) skal stadig ligge ovenpå. */ .topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 2.5rem 0.85rem; position: sticky; top: 0; z-index: 800; border-bottom: 1px solid transparent; } /* Baggrunden og sløringen ligger i et pseudoelement, ikke på baren selv. Grunden er ikke kosmetisk: backdrop-filter gør elementet til holdeblok for efterkommere med position: fixed. Notifikationspanelet er på mobil et bundark med position: fixed og bottom: 0 — og det målte pludselig fra topbarens bund i stedet for skærmens. Panelet landede på y −426, altså over skærmkanten, og man kunne kun se den nederste stump. Meldt ind som sag #1016. Et pseudoelement har ingen efterkommere, så filteret kan ikke fange noget. */ .topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; /* Sløringen lader farverne bag skinne igennem, så baren ikke bliver en kasse oven på den tonede baggrund. */ background: color-mix(in srgb, var(--shell) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Kanten kommer først, når der faktisk er rullet — ellers ligger der en streg under baren på en side, der ikke kan rulle. */ .topbar--rullet { border-bottom-color: var(--line); box-shadow: 0 6px 18px -12px rgba(22, 32, 46, 0.35); } /* Global søgning. Ligger til venstre i topbaren, hvor øjet lander først. */ .topsearch { display: flex; align-items: center; gap: 0.55rem; flex: 0 1 26rem; padding: 0.42rem 0.85rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* The search field's focus border is its cue: --focus-ring, 3:1 in both themes (KC, 6 October 2026). */ .topsearch:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(94, 129, 172, 0.14); } .topsearch__input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 0.86rem; color: var(--ink); outline: none; } .topsearch__input::placeholder { color: var(--faint); } /* Krydset i type="search" er browserens eget og passer ikke ind i feltet. */ .topsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; } /* Tema-skifteren (sol/måne) i topbaren. Token-drevet, så den selv følger temaet: lys knap + dæmpet ikon på lyst, mørk knap + lyst ikon på mørkt. */ .themetoggle { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .themetoggle:hover { background: var(--blue-50); color: var(--ink); } /* «Spørg platformen» — diskret ikon i topbaren, samme runde form som tema-skifteren, så AI'en ikke fylder et helt menupunkt. */ .topbar__ask { width: 34px; height: 34px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; text-decoration: none; transition: color 0.15s ease, background 0.15s ease; } .topbar__ask:hover { background: var(--blue-50); color: var(--ink); } /* The panel grid's layout control (js/gitter.js): an icon beside the others while the page is locked, with a small menu under it. Empty — and gone — on pages without a grid. */ .topbar__gitter { position: relative; display: flex; align-items: center; gap: 0.5rem; } .topbar__gitter:empty { display: none; } .gitter-knap { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .gitter-knap:hover, .gitter-knap[aria-expanded="true"], .gitter-knap--aktiv { background: var(--blue-50); color: var(--ink); } /* How many panels the layout hides — on the icon, so it is seen without opening anything. */ .gitter-knap { position: relative; } .gitter-knap__antal { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; color: #fff; background: var(--blue-500, #3b6fd8); box-shadow: 0 0 0 2px var(--paper); pointer-events: none; } /* Capped: a long error must not push the bell and the user menu out of the top bar. The whole text is in the title and read out by the script. */ .gitter-knap__besked { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem; color: var(--muted); white-space: nowrap; } .gitter-knap__besked--fejl { color: var(--crit-ink); } /* z-index: without it the menu is an ordinary positioned element and paints in document order — so in a list, the NEXT row's buttons (themselves positioned) were drawn on top of an open menu. Above page content and the layout overlay (40), well below the sticky topbar (800) and dialogues (950). */ .gitter-menu { position: absolute; z-index: 50; top: calc(100% + 0.5rem); right: 0; min-width: 14rem; /* The top bar is sticky, so a menu taller than the screen could not be scrolled into view — with many own layouts on a low screen the last entries would sit below the edge. */ max-height: calc(100vh - 6.5rem); overflow-y: auto; overscroll-behavior: contain; padding: 0.35rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 14px 34px -14px rgba(22, 32, 46, 0.45); } .gitter-menu__etiket { padding: 0.45rem 0.6rem 0.2rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .gitter-menu__punkt { display: flex; align-items: center; gap: 0.45rem; width: 100%; padding: 0.4rem 0.6rem; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink); font: inherit; font-size: 0.85rem; text-align: left; white-space: nowrap; cursor: pointer; } .gitter-menu__punkt:hover { background: var(--blue-50); } /* The background alone is next to invisible against the menu (about 1.05:1 in the dark theme), so keyboard focus keeps a ring — drawn inside, where the menu's padding has room for it. */ .gitter-menu__punkt:focus-visible { background: var(--blue-50); outline: 2px solid var(--focus-ring); outline-offset: -2px; } .gitter-menu__maerke { width: 1rem; flex-shrink: 0; color: var(--blue-500, #3b6fd8); font-weight: 700; } .gitter-menu__skille { height: 1px; margin: 0.35rem 0.3rem; background: var(--line); } /* Ikonet følger [data-theme] i CSS, så det aldrig kommer ud af sync med det faktiske tema. Lyst tema viser månen (klik → mørkt); mørkt tema viser solen (klik → lyst). */ .themetoggle__ikon { display: none; } .themetoggle__ikon--maane { display: inline-flex; } :root[data-theme="dark"] .themetoggle__ikon--maane { display: none; } :root[data-theme="dark"] .themetoggle__ikon--sol { display: inline-flex; } .topbar__right { display: flex; align-items: center; gap: 0.6rem; } .topbar__user { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.75rem 0.3rem 0.3rem; border-radius: 999px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--line); } .topbar__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(140deg, var(--blue-400), var(--navy-700)); display: grid; place-items: center; font-size: 0.73rem; font-weight: 800; color: #fff; flex-shrink: 0; } .topbar__avatar:hover { color: #fff; } .topbar__who { min-width: 0; line-height: 1.2; } .topbar__who b { display: block; font-size: 0.79rem; font-weight: 700; color: var(--ink); max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__who span { display: block; font-size: 0.68rem; color: var(--muted); } .topbar__signout { background: rgba(255, 255, 255, 0.7); border: 0; box-shadow: inset 0 0 0 1px var(--line); width: 34px; height: 34px; border-radius: 50%; color: var(--muted); cursor: pointer; display: grid; place-items: center; } .topbar__signout:hover { background: #fff; color: var(--ink); } /* Topbaren giver allerede luft i toppen — undgå dobbelt padding på indholdet. */ .topbar ~ .app__content { padding-top: 1.25rem; } /* Trykmål på telefon. Ikonerne i topbjælken måler 32–34 px, hvilket er fint at ramme med en mus og for småt til en tommelfinger. Apple og Google anbefaler begge 44. Cirklen vokser ikke — det er trykfeltet omkring den, der gør, via padding. Så ser den ens ud, men rammer bedre. */ @media (max-width: 700px) { .topbar__avatar, .topbar__signout, .notif__btn { min-width: 44px; min-height: 44px; } /* Avataren har sin egen baggrund og må ikke blive en stor firkant — den centreres i stedet inde i det større trykfelt. */ .topbar__avatar { background-clip: content-box; padding: 6px; } } /* ========================================================================== "Se som kunde"-banner ========================================================================== */ .viewas { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.7rem 2.5rem; background: linear-gradient(90deg, #f3e6cd, #f8f0e2); border-bottom: 1px solid #e3cfa5; color: #6d4d16; font-size: 0.87rem; font-weight: 600; } .viewas__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(176, 125, 51, 0.22); } .viewas form { margin-left: auto; } .viewas__exit { border: 1px solid #d9bd8a; background: rgba(255, 255, 255, 0.75); color: #6d4d16; border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; } .viewas__exit:hover { background: #fff; border-color: var(--warn); } @media (max-width: 900px) { .viewas { padding: 0.7rem 1.25rem; } } /* ========================================================================== Page header ========================================================================== */ .ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.9rem; } .ph__eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.7rem; } /* Stregen er tyndere og uden opacity: 1 px i fuld farve læses skarpere end 2 px i 75 %, som bare bliver grumset. */ .ph__eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; } .ph__title { font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 800; letter-spacing: -0.028em; line-height: 1.08; } .ph__help { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; margin-left: 0.55rem; vertical-align: middle; font-size: 0.9rem; font-weight: 700; line-height: 1; color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 999px; text-decoration: none; transition: background 0.12s, color 0.12s; } .ph__help:hover, .ph__help:focus-visible { color: #fff; background: var(--blue-500); } .ph__lead { margin-top: 0.5rem; color: var(--muted); font-size: 1rem; max-width: 62ch; } .ph__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* Hard state under the title (PageHeader.Badges): dot-and-word marks in a row that wraps. */ .ph__badges { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.6rem; } /* På smal skærm bliver knapperne ÉN linje, man kan rulle i — ikke tre stablede. Målt på driftsovervågningen den 13. september 2026: fem knapper brød til tre rækker og fyldte 151 px, alle sammen handlinger der OPRETTER noget, oven over den første måling — på den skærm der har mindst plads. Én rullelinje koster 47 px. Intet er skjult, og den afskårne kant på den sidste knap er selve signalet om, at der er mere. */ @media (max-width: 780px) { .ph__actions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.2rem; } .ph__actions > * { flex: 0 0 auto; } /* The phone block's flex: 1 1 auto on .ph__actions .btn outranks the line above, and a .btn wraps its text: the buttons shrank to their longest word and broke onto two lines. Kept on one line, the row scrolls as meant. */ .ph__actions .btn { white-space: nowrap; } /* A menu in the header (a details element: the monitoring page's add menu, the customer page's more menu) hangs below its button; the scrolling row would clip it to the row's own height. While one is open the row lets it out, and wraps rather than pushing the page sideways. */ .ph__actions:has(> details[open]) { overflow: visible; flex-wrap: wrap; } } /* ========================================================================== Surfaces ========================================================================== */ /* Skygge er hierarki, ikke pynt. Hvert panel havde --shadow-sm, og når alt er løftet, er intet løftet — øjet får ingen hjælp til at finde det, der haster. Panelet står nu på en hårstreg, og elevationen er flyttet til .panel--haster, som må optræde ÉN gang pr. side. */ .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.6rem; } /* Den ene forhøjede flade: det, der kræver handling nu. Venstrekanten bærer status-farven, så panelet siger hvad OG hvor slemt uden en overskrift. Sættes med --haster-farve; standard er kritisk, fordi det er den hyppigste brug. */ .panel--haster { --haster-farve: var(--crit); border-color: color-mix(in srgb, var(--haster-farve) 30%, var(--line)); border-left: 3px solid var(--haster-farve); border-radius: 4px var(--r-lg) var(--r-lg) 4px; box-shadow: var(--shadow-md); } .panel--haster.panel--obs { --haster-farve: var(--warn); } .panel--haster.panel--ok { --haster-farve: var(--good); } /* Målestregen — signaturmotivet i retning A. En fin skala under et nøgletal, som på et måleinstrument. Den siger ingenting præcist, og det er meningen: den fortæller, at tallet ER en måling og ikke bare et tal, nogen har skrevet. Rent dekorativt, derfor aria-hidden i markup. Tegnet med gradienter frem for SVG, så farven følger currentColor og dermed temaet. */ .maalestreg { height: 9px; margin-top: 0.5rem; color: color-mix(in srgb, var(--ink) 22%, transparent); border-bottom: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) left bottom / 1px 9px no-repeat, linear-gradient(currentColor, currentColor) right bottom / 1px 9px no-repeat, repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 20%) left bottom / 100% 5px no-repeat; } /* Nøgletal med målestreg. Tallet er helten, mærkatet er lille, noten er dæmpet — og stregen under fortæller, at tallet ER en måling. Bruges på forsiden og hører til overalt, hvor et tal skal læses frem for tælles. */ .noegletal { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2.4rem; margin-bottom: 2.2rem; } .noegletal__mærkat { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .noegletal__tal { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin-top: 0.4rem; font-variant-numeric: tabular-nums; } .noegletal__tal--obs { color: var(--warn-ink); } .noegletal__tal--krit { color: var(--crit-ink); } .noegletal__note { font-size: 0.8rem; color: var(--muted); margin-top: 0.55rem; } .maalestreg--ok { color: color-mix(in srgb, var(--good) 38%, transparent); } .maalestreg--obs { color: color-mix(in srgb, var(--warn) 38%, transparent); } .maalestreg--krit { color: color-mix(in srgb, var(--crit) 38%, transparent); } .panel--flush { padding: 0; overflow: hidden; } .panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; } .panel__title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.012em; } .panel__sub { font-size: 0.83rem; color: var(--muted); margin-top: 0.15rem; } /* Hero band */ .hero { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 1.9rem 2.1rem; margin-bottom: 1.5rem; color: #fff; background: linear-gradient(128deg, var(--navy-900) 0%, var(--navy-800) 46%, var(--navy-600) 100%); box-shadow: var(--shadow-md); } .hero::after { content: ""; position: absolute; right: -70px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(197, 217, 236, 0.24), transparent 68%); pointer-events: none; } .hero__eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-300); } .hero__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; margin-top: 0.4rem; line-height: 1.05; } .hero__chips { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: 1.2rem; position: relative; } .chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(4px); } .chip--good { background: rgba(94, 186, 133, 0.2); border-color: rgba(94, 186, 133, 0.38); } .chip--warn { background: rgba(226, 178, 96, 0.2); border-color: rgba(226, 178, 96, 0.4); } .chip--crit { background: rgba(224, 130, 120, 0.2); border-color: rgba(224, 130, 120, 0.42); } /* Statuspille på lys flade. .chip ovenfor har hvid tekst og er bygget til at ligge oven på en mørk hero — den har endda backdrop-filter. Bruges den på et almindeligt hvidt panel, bliver det hvid tekst på 20 % gennemsigtig farve, og så forsvinder den næsten. Denne bruger temaets lyse status-baggrunde med en mørknet tekstfarve, så kontrasten holder WCAG AA (4,5:1). Tallene er efterregnet i tests/kontrastcheck. */ .pil { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0; font-size: 0.8rem; font-weight: 600; white-space: nowrap; } /* Prik og ord frem for fyldt pille. En række fyldte piller under hinanden bliver til et farvet gardin, hvor ingen enkelt skiller sig ud. Prikken bærer farven, ordet bærer betydningen, og fladen forbliver rolig — så er det den ENE røde, der springer i øjnene, og ikke alle tredive tilsammen. Prikken tegnes med ::before, så ingen markup skal røres. */ .pil::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex-shrink: 0; } .pil--good { color: var(--good-ink); } .pil--warn { color: var(--warn-ink); } .pil--crit { color: var(--crit-ink); } /* A mark whose words are data — a customer's name, a time and who set it — and may be wider than a phone. It wraps (a long address breaks where it must) instead of pushing the page sideways; the dot stays on the first line rather than centring on the whole block, and the lines start next to it — also in a right-aligned .kv__val, where a wrapped mark takes the whole width. */ .pil--wrap { white-space: normal; overflow-wrap: anywhere; align-items: flex-start; max-width: 100%; text-align: left; } .pil--wrap::before { margin-top: calc(0.75em - 3.5px); } /* Neutral = «vi ved det ikke». Den er åben frem for fyldt, fordi et hult mærke læses som et fravær af svar, hvor et fyldt læses som et svar. Det er præcis forskellen på «ukendt» og de tre andre. */ .pil--neutral { color: var(--muted); } .pil--neutral::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; } /* ========================================================================== Bento grid ========================================================================== */ .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.15rem; margin-bottom: 1.5rem; } /* Egne span-klasser — IKKE .col-N: Bootstraps .col-N sætter width:25% o.l., hvilket vinder over grid-column og klemmer felterne sammen. */ .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; } /* ========================================================================== Panelgitteret (js/gitter.js) Siden markerer en beholder med data-gitter og sine paneler med data-gitter-panel. Selve placeringen skrives af scriptet som regler i — her står kun det, der gælder, uanset om gitteret er aktivt. ========================================================================== */ /* Until the script places the panels — and whenever it does not: a container narrower than 880 px, a page with a single panel — the container behaves like the .bento the panels used to sit in: span-6 side by side, everything else full width, the page's 1.5rem between them. The panels are grandchildren of .app__content, so its * + * rhythm does not reach them. Margin 0 at two attribute selectors' weight, because .status brings a margin-bottom that a grid would add to the gap. The script's own rules start with "html" and outweigh all of this once it takes over. */ [data-gitter] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; } /* Full width by default, at no weight at all: a panel carrying one of the house's .span-N classes keeps that width here, and with it the breakpoints further down (span-7 full width under 1180 px, span-6 under 640 px) — the same as in the .bento it came from. */ :where([data-gitter]) > * { grid-column: 1 / -1; } [data-gitter] > [data-gitter-panel] { margin: 0; } /* A grid container never collapses margins, so an empty one would double the gap around it. */ [data-gitter]:not(:has(> *)) { display: none; } [data-gitter-bar]:empty { display: none; } /* Scrolled to from the top bar's layout menu: stop below the sticky top bar, not under it. */ [data-gitter-bar] { scroll-margin-top: 5.5rem; } /* An empty bar first on the page (the staff front page, where the page header is a panel) would give the grid .app__content's * + * margin above the header — the header would sit lower than on every other page. Only there: where something comes before the bar (a page header, a status line, a customer picker), that margin is the gap between it and the panels. */ [data-gitter-bar]:empty:first-child + [data-gitter] { margin-top: 0; } .gitter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: flex-end; } .gitter-bar__valg { width: auto; min-width: 11rem; } .gitter-bar__hint, .gitter-bar__besked { font-size: 0.8rem; color: var(--muted); } .gitter-bar__besked { color: var(--ink-2); } .gitter-bar__besked--fejl { color: var(--crit-ink); } /* The page header as a panel: its own bottom margin would come on top of the grid's gap. */ [data-gitter] > [data-gitter-panel] > .ph { margin-bottom: 0; } .gitter-bar__gruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .gitter-bar__etiket { font-size: 0.8rem; color: var(--muted); } .gitter-bar__navn { width: 14rem; } /* Hide button on a handle in edit mode — a sibling of the handle in the overlay, placed at its top right by the script, because a button inside a role=button element is not allowed. */ .gitter-skjul { position: absolute; z-index: 1; transform: translateX(calc(-100% - 0.5rem)); padding: 0.1rem 0.6rem; border: 1px solid var(--blue-500, #3b6fd8); border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.4; color: var(--blue-500, #3b6fd8); background: var(--paper); cursor: pointer; } .gitter-skjul:hover, .gitter-skjul:focus-visible { color: #fff; background: var(--blue-500, #3b6fd8); } .gitter-overlay { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 40; } .gitter-greb { position: absolute; border-radius: var(--r-lg); background: color-mix(in srgb, var(--blue-500, #3b6fd8) 6%, transparent); cursor: grab; touch-action: none; /* kun på håndtagene i redigering — ellers ville siden ikke kunne scrolles på en telefon */ } .gitter-greb:focus-visible { outline: 2px solid var(--blue-500, #3b6fd8); outline-offset: 2px; } .gitter-greb--aktiv { cursor: grabbing; background: color-mix(in srgb, var(--blue-500, #3b6fd8) 14%, transparent); } .gitter-greb__navn { position: absolute; top: 0.45rem; left: 50%; transform: translateX(-50%); padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; color: #fff; background: var(--blue-500, #3b6fd8); pointer-events: none; } .gitter-hjoerne { position: absolute; right: 0.3rem; bottom: 0.3rem; width: 1.1rem; height: 1.1rem; cursor: nwse-resize; border-right: 3px solid var(--blue-500, #3b6fd8); border-bottom: 3px solid var(--blue-500, #3b6fd8); border-radius: 0 0 4px 0; } @media (max-width: 1180px) { .span-3, .span-4 { grid-column: span 6; } .span-5, .span-7, .span-8 { grid-column: span 12; } } @media (max-width: 640px) { /* span-6 er store paneler og skal have hele bredden. span-3 er nøgletalsfelter — dem beholder vi to og to. De stod før i fuld bredde hver for sig, og fire felter fyldte omkring 600 px: tre skærmfulde rulning på en telefon, før man overhovedet nåede indholdet. Et felt med ét tal har ikke brug for 375 px. */ .span-6 { grid-column: span 12; } /* span-4 manglede. Den blev til span 6 ved 1180 px, og der stoppede den — så sidepanelet med sagens detaljer stod i halv bredde på en telefon, med felter klemt ned i 160 px. Det så ud som en fejl, fordi det var en. */ .span-4 { grid-column: span 12; } } /* ========================================================================== Stat tile ========================================================================== */ .stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; position: relative; min-height: 100%; transition: box-shadow 0.16s ease, transform 0.16s ease; } .stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* A tile that leads to the list behind its number (StatTile Href). */ a.stat--link { color: inherit; text-decoration: none; cursor: pointer; } a.stat--link:focus-visible { outline: 2px solid var(--blue-500, currentColor); outline-offset: 2px; } .stat__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.15rem; } .stat__label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .stat__dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-50); color: var(--navy-700); flex-shrink: 0; } .stat--good .stat__dot { background: var(--good-bg); color: var(--good); } .stat--warn .stat__dot { background: var(--warn-bg); color: var(--warn); } .stat--crit .stat__dot { background: var(--crit-bg); color: var(--crit); } .stat__value { font-size: 2.15rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); } .stat__meta { font-size: 0.81rem; color: var(--faint); } /* A row of stat tiles inside a panel (the device page, device merge). The class never had a rule, so the tiles stood in one column at full width - fourteen of them, one under the other, on a device page. As many columns as fit at 13rem; a long value (a processor, MAC addresses) wraps inside its tile instead of running out of it, at the lean tile size (1.6rem) so a model name is two lines, not five. */ .stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1rem; } .stat-row .stat__value { font-size: 1.6rem; line-height: 1.15; overflow-wrap: anywhere; } /* Two by two on a phone, like the key-figure tiles (.span-3): a tile with one number does not need 375 px. */ @media (max-width: 640px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } } /* ========================================================================== Meter / progress ========================================================================== */ .meter { height: 10px; border-radius: 999px; background: var(--blue-50); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); } .meter__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy-700), var(--blue-500)); } .meter__fill--warn { background: linear-gradient(90deg, #a06f28, var(--warn)); } .meter__fill--crit { background: linear-gradient(90deg, #8f3a33, var(--crit)); } .bigfig { font-size: 2.9rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); } .bigfig small { font-size: 1.05rem; font-weight: 700; color: var(--faint); letter-spacing: -0.01em; } /* ========================================================================== Module list (dashboard) ========================================================================== */ .mods { display: flex; flex-direction: column; gap: 0.45rem; } .mods__row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: var(--r-sm); background: var(--blue-50); font-size: 0.87rem; font-weight: 600; color: var(--ink-2); } .mods__row .icon { color: var(--navy-700); flex-shrink: 0; } .mods__row span { margin-left: auto; font-size: 0.75rem; font-weight: 700; color: var(--good); } /* ========================================================================== Aftalekort ========================================================================== */ .agr-list { display: flex; flex-direction: column; gap: 1rem; } .agr { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.2rem; background: linear-gradient(180deg, var(--blue-50), var(--paper)); } .agr__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .agr__name { font-weight: 700; font-size: 0.98rem; color: var(--ink); } .agr__bill { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--line-2); font-size: 0.83rem; color: var(--warn); } .agr__outside { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.85rem; padding: 0.6rem 0.75rem; border-radius: var(--r-sm); background: var(--paper); border: 1px dashed var(--line-2); font-size: 0.83rem; color: var(--ink-2); } .agr__outside span { display: flex; flex-direction: column; } .agr__outside .icon { margin-top: 2px; color: var(--blue-500); } /* ========================================================================== Domænekort (Domænesikkerhed) — grupperet pr. kunde i stedet for én flad tabel, så det stadig er overskueligt med flere domæner pr. kunde og flere checks. ========================================================================== */ .dgroup { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); margin-bottom: 1rem; overflow: hidden; } .dgroup__summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none; user-select: none; } .dgroup__summary::-webkit-details-marker { display: none; } .dgroup__summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); transition: transform 0.15s ease; margin-right: 0.5rem; flex-shrink: 0; } .dgroup[open] > .dgroup__summary::before { transform: rotate(45deg); } .dgroup__name { font-weight: 700; font-size: 0.95rem; } /* ── Dmarc: the customer table (staff overview, and the mailboxes per customer) ── */ .dm-kunder__row { cursor: pointer; } .dm-kunder__row:hover { background: var(--blue-50); } .dm-kunder__row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .dm-kunder__navn { font-weight: 700; } /* Den valgte kunde bliver stående markeret, så man kan se hvis postkasse panelet nedenunder hører til, mens man arbejder i den. */ .dm-kunder__row.er-valgt { background: var(--blue-50); } .dm-kunder__row.er-valgt td:first-child { box-shadow: inset 3px 0 0 var(--ink-2); } .dm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; background: var(--faint); } .dm-dot--ok { background: var(--good); } .dm-dot--warn { background: var(--warn); } .dm-dot--crit { background: var(--crit); } /* Ingen rapporter modtaget. Hul frem for fyldt, saa den ikke kan forveksles med en maalt tilstand — hverken den groenne eller den roede. */ .dm-dot--tom { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); } .dm-rate { font-variant-numeric: tabular-nums; } .dm-bar { display: block; width: 80px; height: 5px; margin-left: auto; margin-top: 0.25rem; border-radius: 999px; background: color-mix(in srgb, var(--crit) 55%, transparent); overflow: hidden; } .dm-bar > i { display: block; height: 100%; background: var(--good); } .txt-crit { color: var(--crit); } .txt-warn { color: var(--warn); } .txt-faint { color: var(--faint); } .txt-muted { color: var(--muted); } /* Klik-for-at-rette-markør: prikket understregning, så inline-redigering er synlig som redigerbar uden at man skal hovere. Samlet cue for de steder, der før kun havde cursor+title. */ .editcue { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; text-decoration-thickness: 1px; } .editcue:hover { text-decoration-color: var(--blue-400); } /* Klikbar række UDEN ugyldig ARIA-nesting. Før var rækken selv role="button" med rigtige