/* ========================================================================== 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; --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); /* 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; /* 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); 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; /* 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); 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); } /* --- 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); } /* Valgt afsender-filter bruger var(--ink) som BAGGRUND med hvid tekst — --ink flipper til lyst, så gør teksten mørk på den nu lyse flade. */ :root[data-theme="dark"] .afsfilter__k.er-valgt { color: var(--shell); } /* 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); } :root[data-theme="dark"] .btn-outline-primary:hover, :root[data-theme="dark"] .btn-outline-secondary:hover { color: var(--ink); border-color: var(--blue-400); } :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); } .app__content { max-width: 1360px; 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; } .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); } .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; } .topsearch:focus-within { border-color: var(--blue-400); 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); } /* 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; } /* 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; } } /* ========================================================================== 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); } /* 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; } @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); } .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); } /* ========================================================================== 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-afsendere ────────────────────────────────────────────────────── Tre bunker: fejl på egne systemer, ukendte afsendere, og alt der er i orden. Farven bæres af en venstrekant, så alvoren kan skimmes lodret uden at læse. */ .afs-gruppe { margin-top: 1.2rem; } .afs-gruppe:first-of-type { margin-top: 0.4rem; } .afs-gruppe__titel { font-weight: 800; font-size: 0.92rem; cursor: default; } .afs-gruppe__titel--crit { color: var(--crit); } .afs-gruppe__titel--warn { color: var(--warn); } .afs-gruppe__titel--ok { color: var(--good); cursor: pointer; } .afs-gruppe__sub { font-size: 0.82rem; color: var(--muted); margin: 0.15rem 0 0.7rem; max-width: 48rem; } /* Ét kort pr. SYSTEM, ikke pr. IP. Hviletilstanden er én linje: prik, navn, tal, bjælke. Alt andet — råd, serveradresser, godkendelsesknap — hænger under og fylder kun, når der faktisk er noget at sige. */ .afs { border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--r-md); padding: 0.6rem 0.85rem; margin-bottom: 0.4rem; background: var(--paper); } .afs--crit { border-left-color: var(--crit); } .afs--warn { border-left-color: var(--warn); } .afs--ok { border-left-color: var(--good); } .afs__hd { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .afs__flex { flex: 1 1 2rem; } .afs__prik { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); } .afs__prik--crit { background: var(--crit); } .afs__prik--warn { background: var(--warn); } .afs__prik--ok { background: var(--good); } .afs__navn { font-weight: 700; font-size: 0.9rem; } /* Antallet af servere hører til navnet, ikke til tallene: det forklarer, hvorfor der står ét kort, hvor der før stod tyve. */ .afs__badge { font-size: 0.7rem; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 999px; padding: 0.1rem 0.45rem; } .afs__tal { font-size: 0.82rem; white-space: nowrap; } /* Bjælken gør andelen skimbar. Den er lille med vilje — tallet er svaret, bjælken er formen. */ .afs__bar { flex: none; width: 72px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--crit) 55%, transparent); overflow: hidden; } .afs__bar > i { display: block; height: 100%; background: var(--good); } /* Rådet er det, siden findes for — derfor mere fremtrædende end tallene. */ .afs__raad { font-size: 0.84rem; color: var(--ink-2); margin-top: 0.4rem; line-height: 1.5; } .afs__raad code { background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 0.05rem 0.3rem; border-radius: 4px; } .afs__handling { margin-top: 0.5rem; } .afs__knap { margin-top: 0; } /* IP'en sidst og småt: den er dokumentation, ikke svaret. Før stod den som overskrift, og så skulle man selv være detektiv. */ .afs__ip { font-size: 0.74rem; color: var(--faint); margin-top: 0.35rem; } .afs__kilder { margin-top: 0.35rem; } .afs__kilder > summary { font-size: 0.74rem; color: var(--muted); cursor: pointer; } .afs__kilder > summary:hover { color: var(--ink-2); } .afs__kildeliste { margin-top: 0.4rem; border-top: 1px solid var(--line); } .afs__kilde { display: flex; justify-content: space-between; gap: 1rem; padding: 0.28rem 0; font-size: 0.76rem; border-bottom: 1px solid var(--line); } .afs__kilde-ip { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink-2); } .afs__kilde-tal { white-space: nowrap; } /* ── Dmarc: kunde-chip og tværgående tabel ──────────────────────────────── Medarbejderens indgang. Uden kunde-chippen kunne man ikke se, hvis tal man stod og kiggede på — og tallene på tværs af kunder er ikke nogens tal. */ .dm-kunde-chip { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.88rem; color: var(--ink); margin-bottom: 0.75rem; } .dm-kunde-chip svg { width: 16px; height: 16px; color: var(--muted); } .dm-kunder__row { cursor: pointer; } .dm-kunder__row:hover { background: var(--blue-50); } .dm-kunder__row:focus-visible { outline: 2px solid var(--brand, var(--ink-2)); 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