/* Design tokens — QR-Database redesign v2 (juli 2026). Bron: "Van QR-database redesign/design_handoff_qr_database_redesign/README.md" (bindend, CLAUDE.md §5). Kleuren/typografie/maten zijn definitief; niet aanpassen zonder de design-handoff bij te werken. Thema-omschakeling via het [data-dark="1"]-attribuut op (zie ThemeService), exact zoals in de klikbare prototypes. */ :root { /* Accent is PER BEDRIJF instelbaar (white-labeling-module, CompanyAccentCss) — dit zijn de platform-defaults totdat een bedrijf een eigen kleur instelt. WCAG 2.2 AAA (1.4.6, contrast 7:1): het redesign-accent #e42a5e haalt met witte knoptekst slechts 4,4:1 — verdonkerd naar #a3123c (7,8:1 met wit). Een bedrijfskleur is sinds white-labeling (gebruikersbesluit 2026-07-23) vrij — CompanyAccentCss leidt dan zelf leesbare --accent-fg/-ink-waarden af. */ --accent: #a3123c; --accent-dark: #8a0f33; /* Tekst óp de accentkleur (knoppen, actieve navitems, badges) — per bedrijf wit of zwart, afhankelijk van wat het meeste contrast geeft tegen de gekozen accentkleur. */ --accent-fg: #fff; /* Accent als TEKSTkleur (links/actielabels): moet 7:1 halen t.o.v. het DONKERSTE vlak waarop de globale `a { color: var(--accent-ink) }` landt — niet alleen de kaart, ook het --page-gradient-eindpunt (#e2dbcd), --chip2 en --thead (heraudit 2026-09-05: #a3123c haalde daar 5,6–6,6:1). #830f2e = 7,4:1 op #e2dbcd, 7,8:1 op --chip2; hover verder verdonkerd zodat die onderscheidbaar blijft. In donker thema is dit een lichte roze i.p.v. het donkere accent. */ --accent-ink: #830f2e; --accent-ink-h: #6e0c27; /* Accent als tekstkleur BUITEN een kaart, direct op de --page-gradient (heraudit 2026-09-05): eigen token voor marketing-eyebrows/.emp-cta-dashed, met ruime marge tegen de donkerste page-stop #e2dbcd (7,96:1). CompanyAccentCss leidt per bedrijf een eigen waarde af tegen diezelfde page-stop — --accent-ink is daar alleen tegen --card gegarandeerd. */ --accent-ink-page: #7a0c2c; /* Navigatie-chrome (admin-sidebar + -topbar + medewerker-PWA-header) — altijd donker, ongeacht licht/donker-thema, maar per bedrijf overschrijfbaar (white-labeling). */ --nav-bg: #262d34; --nav-hover: #313943; --nav-bd: #333b43; --nav-fg: #b8c0c8; --nav-fg-strong: #fff; --page: linear-gradient(160deg, #ece5d4 0%, #e7dfcf 55%, #e2dbcd 100%); --card: #fffdf9; --card-h: #faf8f3; --tint: #fffdf9; --bd: #e6e2da; --bd2: #f0ede6; --bd3: #d9d4ca; --bd-h: #b8b2a6; /* Rand van invoervelden/switches: 1.4.11 (non-text contrast ≥3:1) — de decoratieve --bd3 haalt maar 1,45:1 tegen de kaartachtergrond. */ --bd-input: #8a857b; /* Tekstkleuren: allemaal ≥7:1 (AAA 1.4.6) tegen --card, het donkerste --page-gradient- eindpunt (#e2dbcd), --chip2 (#e6e1d6) én --tamber2 (#eadaa8). De originele redesign-waarden (--ink2 #55534d, --ink3 #6d675c, --mut #8d8779) haalden resp. 5,9/5,5/3,5:1; de eerdere AAA-waarden (--ink3 #4a463e, --mut #4d4941, --theadink #544c3f) haalden wél 7:1 op --card maar niet op het gradient-eindpunt/--chip2 (6,5–6,9:1) — verdonkerd (heraudit 2026-09-05): --ink3 7,5:1 / --mut 7,4:1 op #e2dbcd, --theadink 7,8:1 op --chip2. */ --ink: #23282e; --ink2: #444138; --ink3: #43403a; --mut: #454138; --thead: #f2ecdd; --theadink: #484034; /* Focusring (2.4.13 Focus Appearance): ≥3px dik, met offset, ≥3:1 tegen de omgeving. */ --focus-ring: #1d232a; --chip: #f4f2ee; --chip2: #e6e1d6; --chip3: #eeeae2; /* Pill-/badge-inktkleuren verdonkerd naar ≥7:1 tegen hun eigen "2"-achtergrond (AAA 1.4.6 — origineel: blauw 5,2:1, amber 3,5:1, groen 3,9:1). */ --tblue: #e7eaf7; --tblue2: #c9d0ea; --tblue3: #2b3768; --tamber: #f9eed6; --tamber2: #eadaa8; --tamber3: #5e3504; --tgreen: #e0f1e7; --tgreen2: #b9dfc9; --tgreen3: #0d4530; /* Rood + lime vullen de amber/groen-set aan tot een rood→groen-schaal voor keuringsdeadlines (gebruikersverzoek 2026-07-25, ExaminationDeadlineStatus). Zelfde 7:1-eis als hierboven: rood 8,9:1, lime 8,4:1 tegen hun eigen "2"-achtergrond. */ --tred: #f7e2e2; --tred2: #eec9c9; --tred3: #5d1111; --tlime: #eef3d9; --tlime2: #dde7b3; --tlime3: #33420b; --pink-badge-bg: color-mix(in srgb, var(--accent) 9%, #fffdf9); --pink-badge-ink: var(--accent-dark); /* Categorische grafiek-marks (dashboard-grafieken, gebruikersverzoek 2026-07-23) — apart van de tekst-/pill-tokens hierboven: dit zijn verzadigde vlakkleuren voor balken/segmenten, geen 7:1-tekstcontrast nodig. Vaste volgorde, nooit cyclisch toegewezen (dataviz-skill): --chart-1 identiteit "rose/accent", --chart-2 "blauw", --chart-3 "groen", --chart-4 "amber". Gevalideerd met de dataviz-skill validate_palette.js tegen --card (lichtheidsband, chromavloer, CVD-scheiding, contrast) — alle checks slagen. */ --chart-1: var(--accent); --chart-2: #2f5fd6; --chart-3: #1f9d55; --chart-4: #b6540a; --sidebar-bg: #1d232a; --radius-card: 12px; --radius-btn: 8px; --radius-md: 8px; --radius-pill: 999px; --shadow-overlay: 0 24px 60px rgba(0, 0, 0, .3); /* Kaartschaduw van de auth-/statuspagina's (Login/Onboarding/Error/NotFound/Wachtstand/ WachtwoordX): stond 7× hardcoded als rgba(38,45,52,.08) — in het donkere thema tegen de --page-gradient (#1d232a) effectief onzichtbaar, waardoor de kaart zijn elevatie verloor. Eén token, met een zwaardere dark-variant hieronder (heraudit 2026-09-05). */ --shadow-card: 0 12px 34px rgba(38, 45, 52, .08); /* Dialoog-backdrop: rgba(20,20,20,.35) dimt de lichte pagina duidelijk, maar de al donkere pagina nauwelijks (#1d232a → ≈#151a1e), zodat de dialoogkaart zich in dark zwak aftekent — dark-variant hieronder. Bestaande .razor.css-backdrops migreren bij aanraking naar var(--backdrop) (heraudit 2026-09-05). */ --backdrop: rgba(20, 20, 20, .35); /* Alias-tokens (bevinding item 98, 2026-07-23): CategorieDetail.razor.css/ProductDetail.razor.css gebruikten var(--line-strong, #c7bfab)/var(--surface, transparent) zonder dat deze ooit gedefinieerd waren — de light-mode-fallbackwaarde gold daardoor ook in donkere modus. Alias naar bestaande, al thema-bewuste tokens i.p.v. losse waarden (automatisch correct in beide thema's, geen aparte override in het [data-dark="1"]-blok nodig). */ --line-strong: var(--bd-h); --surface: var(--card-h); /* Zelfde bevinding, gevonden bij een bredere doorloop (item 99): employee.css/public- layout.css/marketing.css gebruikten var(--bg)/var(--bg2) zonder ooit gedefinieerd token — zonder fallbackwaarde in de meeste aanroepen viel de eigenschap dus terug op de browserdefault (transparant), niet alleen een verkeerde light-mode-kleur. */ --bg: var(--page); --bg2: var(--chip); /* Gedeelde hoogte voor knoppen én zoekvelden op de admin-werkplek (audit-bevinding 2026-07-19) — zodat een knop naast een zoekveld altijd exact even hoog is, ongeacht padding-/borderverschillen tussen varianten. */ --control-height: 34px; color-scheme: light; } :root[data-dark="1"] { /* Hover van accent-knoppen: iets lichter dan de basis, maar nog steeds ≥7:1 met wit. */ --accent-dark: #ad1440; /* Accent-tekst op donkere kaarten: lichte roze, ≥7:1 tegen --card ÉN tegen --card-h/--chip/ --chip2 (hover-/zebra-rijen, chip-vlakken — heraudit 2026-09-05: #ffabc1 haalde op --chip2 maar 5,7:1). #ffcfdb = 7,3:1 op --chip2; hover nog lichter zodat die onderscheidbaar blijft. */ --accent-ink: #ffcfdb; --accent-ink-h: #ffe0e8; /* Donker: --accent-ink haalt op de page-gradient al 9,6:1, dus geen aparte afgeleide nodig (heraudit 2026-09-05). */ --accent-ink-page: var(--accent-ink); --page: linear-gradient(160deg, #1d232a, #1a2026 55%, #171d23); --card: #2a323b; --card-h: #323c46; --tint: #2a323b; --bd: #3a434d; --bd2: #323a43; --bd3: #4a545f; --bd-h: #5a6672; --bd-input: #77828d; /* AAA 1.4.6: opgelicht t.o.v. het redesign (--ink2 5,9:1 op pill-achtergrond, --ink3 5,5:1, --mut 3,7:1, --theadink 6,2:1). Heraudit 2026-09-05: --ink3 #bfc6cd/--mut #bbc2c9 haalden op --card-h/--chip/--chip2 (hover-/zebra-rijen, chip-vlakken met gedempte hints) slechts 5,6–6,9:1 — verder opgelicht: --mut/--theadink #d5dbe1 = 7,2:1 op --chip2, --ink3 #d8dde2 = 7,4:1. */ --ink: #e9ebee; --ink2: #d7dade; --ink3: #d8dde2; --mut: #d5dbe1; --thead: #232a31; --theadink: #d5dbe1; --chip: #2f3841; --chip2: #3a434d; --chip3: #333c45; /* Donkere pills: donkerdere achtergrond + lichtere inkt om 7:1 te halen — de originele "2"-achtergronden waren te licht om er ooit AAA-tekst op te krijgen. */ --tblue: #2b3450; --tblue2: #2b3450; --tblue3: #bcc7ee; --tamber: #3a3122; --tamber2: #3a3122; --tamber3: #e9bd7e; --tgreen: #22352b; --tgreen2: #22352b; --tgreen3: #90d5af; --tred: #3b2323; --tred2: #3b2323; --tred3: #f0a9a9; --tlime: #313a22; --tlime2: #313a22; --tlime3: #c6dc8c; --pink-badge-bg: color-mix(in srgb, var(--accent) 16%, #2a323b); --pink-badge-ink: var(--accent-ink); /* Grafiek-marks lichter/verzadigder dan het lichte thema — apart gevalideerd tegen --card #2a323b (donkere lichtheidsband L 0.48–0.67), niet zomaar de lichte set hergebruikt. */ --chart-1: #e0546f; --chart-2: #5c86e8; --chart-3: #2fa870; --chart-4: #cf7e2f; --focus-ring: #ffffff; /* Zie de light-definities: zwaardere schaduw/dimming, anders onzichtbaar op de donkere --page-gradient (heraudit 2026-09-05). */ --shadow-card: 0 12px 34px rgba(0, 0, 0, .45); --backdrop: rgba(0, 0, 0, .6); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overscroll-behavior: none; } body { font-family: 'Archivo', system-ui, -apple-system, sans-serif; font-size: 15px; /* AAA 1.4.8 (Visual Presentation): regelafstand ≥1,5 binnen alinea's. */ line-height: 1.5; color: var(--ink); background: var(--page); min-height: 100vh; /* dvh i.p.v. vh: op mobiel Safari/Chrome krimpt/groeit de adresbalk na navigatie (bv. redirect ná inloggen); 100vh blijft de volledige layout-viewport meten, waardoor de pagina tijdelijk hoger is dan het zichtbare gebied en de browser ná navigatie zelf bijscrolt. Een position:fixed-element (bv. .emp-bottom-nav) lijkt daardoor "op te schuiven" tijdens die settle-scroll. dvh meet de échte zichtbare hoogte, dus geen overtollige scrollruimte, geen settle-jump. */ min-height: 100dvh; } .mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; } /* Kale tekstlinks: accent-INKT (7:1 in beide thema's) + onderstreping, zodat een link nooit alleen door kleur te herkennen is (1.4.1). Knop-/nav-gestileerde links zetten text-decoration zelf weer uit. */ a { color: var(--accent-ink); text-decoration: underline; } a:hover { color: var(--accent-ink-h); } h1, h2, h3, h4 { font-weight: 800; margin: 0; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes slideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } /* Dialoogkaart-animatie (gebruikersverzoek 2026-07-24, "animaties bij laden etc"): licht schaal+fade-in op de dialoogkaart zelf, los van een eventuele backdrop-fade (fadeUp) op de omhullende overlay — die twee animeren daardoor onafhankelijk, geen dubbele beweging. */ @keyframes dialogPop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } } /* Skeleton-shimmer (gebruikersverzoek 2026-07-24) — CLAUDE.md-conventie: elke nieuwe laadstatus voor lijst-/detailpagina's gebruikt dit i.p.v. kale statustekst. */ @keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Transform-vrije entree-fade — bewust GEEN translateY (i.t.t. fadeUp), bedoeld voor elementen die een `position: fixed`-overlay omhullen (.admin-content / .route-fade). Reden (bugmelding 2026-07-25, dialoog "Nieuwe set" half buiten beeld): een element met een actieve óf fill-mode-vastgehouden transform-animatie wordt het *containing block* van al zijn fixed-gepositioneerde nakomelingen. `inset: 0` op een .xxx-overlay-backdrop rekende daardoor niet meer tegen de viewport maar tegen de (korte) paginawrapper — de dialoog werd binnen die strook gecentreerd en liep boven- én onderlangs buiten beeld, zonder scrollmogelijkheid. Ook `to { transform: none }` helpt niet: de browser houdt bij fill-mode both de identiteits- matrix aan (computed `matrix(1,0,0,1,0,0)`), en dat telt óók als containing block. */ @keyframes fadeInOnly { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---- Herbruikbare bouwstenen (CLAUDE.md §4: "eigen componentenbibliotheek") ---- */ /* Vierkant merkicoon (het app.qr-database.nl-favicon/PWA-icoon, wwwroot/img/pwa-icons/) — het volledige woordmerk (qrdb-logo-*-bg.png, 750×622) is niet vierkant en werd voorheen in vaste 24-56px-vierkanten geforceerd (AdminLayout/EmployeeLayout/GastScan/Login/ WachtwoordVergeten/WachtwoordResetten), wat het beeldmerk vervormde. Overal waar een compact icoon naast een los "QR-DATABASE"-tekstlabel staat (i.p.v. het volledige woordmerk zelf, zoals op de publieke marketingsite) hoort dit vierkante merkicoon. */ .brand-mark { display: block; border-radius: 22%; flex: none; } .card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--radius-card); /* .admin-content (AdminLayout.razor.css) is display:flex;flex-direction:column — zonder deze reset kregen tabelkaarten die tegelijk overflow-x:auto zetten (bv. de globale .tablewrap, voorheen .cat-tablewrap) ook een browser-geforceerde overflow-y:auto (CSS-overflow-spec: alleen-x niet-"visible" laat de y-as meecomputen naar "auto"). Flexbox kneep zo'n kaart dan tot minder dan zijn inhoud, wat een eigen interne scrollbalk opleverde met de paginatie erin verstopt onderaan — i.p.v. dat de bedoelde buitenste .admin-content-scroll het hele blok toont (browserverificatie 2026-07-21: "paginatie verdwijnt bij scrollen"). */ flex-shrink: 0; } /* Basis uit Admin.dc.html regel 1694-1695 (btn/btn2) — desktop-werkplek-knoppen, bewust compacter dan een 44px-mobiel-tapdoel. De medewerker-PWA (390×844, scan-first) krijgt zijn eigen, grotere knop-maten zodra dat scherm gebouwd wordt (CLAUDE.md §16.4: hit targets ≥44px "mobiel" — die eis geldt voor de mobiele PWA, niet voor de desktop-admin-werkplek). */ /* Op .btn-primary/.btn-secondary zelf herhaald (niet alleen op .btn) — audit-bevinding 2026-07-19 (gebruikersmelding "knoppen komen niet overeen met wireframe, alle pagina's"): de Razor-markup gebruikt overal `class="btn-primary"`/`class="btn-secondary"` los, zonder de aparte basisklasse `.btn` erbij. Zolang de basisopmaak alleen op `.btn` stond, kregen die knoppen dus GEEN font/padding/radius/display van hier — enkel de achtergrondkleur (die toevallig ook op body/globaal leek te kloppen) en verder browser-defaultstyling (Arial, blokweergave, geen radius). Nu op beide varianten zelf, zodat ze ook standalone correct zijn; `.btn` blijft daarnaast bestaan voor eventuele toekomstige neutrale knoppen. */ .btn, .btn-primary, .btn-secondary { font-family: inherit; font-weight: 600; /* 13.5px i.p.v. 15px (leesbaarheidsaudit 2026-08-23, gebruikersmelding "lettertype van de knoppen te groot"). Gemeten hierarchie-inversie: knoptekst stond op 15/600, vrijwel gelijk aan de kaartkop (15.5/700) en zwaarder dan de eigenlijke data (13.5/12.5) - chrome overschreeuwde de inhoud. Bijkomend: dezelfde 15px zat in een 34px-hoge control (--control-height) terwijl .field 15px in 44px heeft, waardoor knoppen ook naast invoervelden zwaarder oogden, en de nowrap-knoppen toolbars onnodig breed maakten. 13.5px is de dominante label-/datagrootte van de app, dus knoppen zakken nu netjes onder de koppen. Hoogte en tapdoel blijven ongewijzigd (34px + .hit-target 44px). */ font-size: 13.5px; border-radius: var(--radius-btn); padding: 0 16px; border: none; cursor: pointer; transition: filter .15s, border-color .15s, background .15s, transform .1s ease-out; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; flex: none; text-decoration: none; /* knop-gestileerde -elementen (bv. QR-download) */ position: relative; /* anker voor de 44px-hit-area (::before, AAA 2.5.5) */ /* Vaste hoogte i.p.v. verticale padding (audit-bevinding 2026-07-19, gebruikersmelding "knoppen op 1 lijn, zelfde hoogte als zoeken"): .btn-secondary's 1px-border gaf er eerder 3px bovenop .btn-primary (35px vs 32px) — beide leunden op padding+border om hun hoogte organisch af te leiden, wat nooit exact gelijk uitkomt. Zelfde --control-height als de zoekvelden (.cat-search/.geb-search), zodat ze altijd precies uitlijnen. */ height: var(--control-height); box-sizing: border-box; } /* AAA 2.5.5 (Target Size Enhanced, 44×44px): de visuele knophoogte blijft 34px (wireframe-conform), maar het aanraakdoel wordt onzichtbaar uitgebreid tot ≥44px via een pseudo-element — kliks op het pseudo-element activeren het element zelf. */ .btn::before, .btn-primary::before, .btn-secondary::before { content: ""; position: absolute; inset: -5px; } .btn:disabled, .btn-primary:disabled, .btn-secondary:disabled { cursor: not-allowed; opacity: .6; } /* Micro-interactie (gebruikersverzoek 2026-07-24): lichte druk-feedback bij klikken, alleen op een echte klik (niet :focus) zodat het geen tweede focus-indicator suggereert naast de AAA-focusring hierboven. */ .btn:active:not(:disabled), .btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled) { transform: scale(.97); } .btn-primary { background: var(--accent); color: var(--accent-fg, #fff); } .btn-primary:hover:not(:disabled) { background: var(--accent-dark); } .btn-secondary { background: var(--card); color: var(--ink); padding: 0 15px; /* --bd-input i.p.v. --bd3 (audit-bevinding 2026-07-20): --bd3 haalt maar ~1,45:1 contrast tegen --card — voor deze knop is de rand de enige visuele afbakening in de standaardstaat (geen hover/focus), dus moet hij aan de WCAG 1.4.11-non-text-contrasteis (≥3:1) voldoen, net als --bd-input al voor invoervelden doet. */ border: 1px solid var(--bd-input, var(--bd3)); } /* --ink3 i.p.v. --bd-h (heraudit 2026-09-05, WCAG 1.4.11): --bd-h haalde maar 2,08:1 (licht) / 2,21:1 (donker), waardoor de hover-staat zwakker afgebakend was dan de ruststaat hierboven. Het hover-signaal komt aanvullend van de achtergrond, niet alleen van de rand. */ .btn-secondary:hover:not(:disabled) { border-color: var(--ink3); background: var(--card-h); } .field { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--tint); border: 1.5px solid var(--bd-input); /* 1.4.11: veldrand ≥3:1 tegen de achtergrond */ border-radius: 10px; padding: 12px 14px; min-height: 44px; } .field::placeholder { color: var(--mut); } .field:focus-visible { border-color: var(--accent); } /* Herbruikbare bestandskiezer (gebruikersmelding 2026-07-25: "niet stijl" op de native "Bestand kiezen | Geen bestand gekozen"-widget). Het native is niet token-conform te stijlen (OS-eigen knop, eigen font, geen radius/kleur) — daarom hetzelfde patroon als Categorieen/CategorieDetail/Rapportage/Instellingen/ToolboxInstructies al per pagina hadden: het