/* 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 (huisstijl-module, CLAUDE.md §5) — 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 toekomstige bedrijfskleur moet dezelfde 7:1-eis halen vóór hij geaccepteerd wordt. */ --accent: #a3123c; --accent-dark: #8a0f33; /* Accent als TEKSTkleur (links/actielabels): moet 7:1 halen t.o.v. de kaartachtergrond van het actieve thema — in donker thema is dat een lichte roze i.p.v. het donkere accent. */ --accent-ink: #a3123c; --accent-ink-h: #8a0f33; --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 zowel --card als de --page-gradient én de chip-/pill-achtergronden waarop ze gebruikt worden. De originele redesign-waarden (--ink2 #55534d, --ink3 #6d675c, --mut #8d8779) haalden resp. 5,9/5,5/3,5:1. */ --ink: #23282e; --ink2: #444138; --ink3: #4a463e; --mut: #4d4941; --thead: #f2ecdd; --theadink: #544c3f; /* 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; --pink-badge-bg: color-mix(in srgb, var(--accent) 9%, #fffdf9); --pink-badge-ink: var(--accent-dark); --sidebar-bg: #1d232a; --radius-card: 12px; --radius-btn: 8px; --radius-pill: 999px; --shadow-overlay: 0 24px 60px rgba(0, 0, 0, .3); /* 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. */ --accent-ink: #ffabc1; --accent-ink-h: #ffc2d1; --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). */ --ink: #e9ebee; --ink2: #d7dade; --ink3: #bfc6cd; --mut: #bbc2c9; --thead: #232a31; --theadink: #bfc6cd; --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; --pink-badge-bg: color-mix(in srgb, var(--accent) 16%, #2a323b); --pink-badge-ink: var(--accent-ink); --focus-ring: #ffffff; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Archivo', system-ui, -apple-system, sans-serif; font-size: 13.5px; /* 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; } .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; } } @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); } /* 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; font-size: 13px; border-radius: var(--radius-btn); padding: 0 16px; border: none; cursor: pointer; transition: filter .15s, border-color .15s, background .15s; 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; } .btn-primary { background: var(--accent); color: #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)); } .btn-secondary:hover:not(:disabled) { border-color: var(--bd-h); } .field { width: 100%; font-family: inherit; font-size: 13.5px; 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); } /* Herbruikbaar zoekveld met icoon: */ .search-field { position: relative; display: block; } .search-field-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--mut); pointer-events: none; } .search-field-input { padding-left: 38px; } .search-field-input::-webkit-search-cancel-button { margin-right: 2px; } /* AAA 2.4.13 (Focus Appearance): één globale, dikke focusring met offset voor ÁLLE interactieve elementen — verving de eerdere beperkte selector die .btn-primary/ .btn-secondary standalone, selects en custom knoppen miste. Componenten op donkere chrome (sidebar/topbar) krijgen in AdminLayout.razor.css een witte ring. */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .field-error { border-color: var(--tamber3); } .pill { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--chip2); color: var(--ink2); display: inline-block; } .pill-blue { background: var(--tblue2); color: var(--tblue3); } .pill-amber { background: var(--tamber2); color: var(--tamber3); } .pill-green { background: var(--tgreen2); color: var(--tgreen3); } .pill-accent { background: var(--pink-badge-bg); color: var(--pink-badge-ink); } .pill-dark { background: #262d34; color: #fff; } /* Machinevertaling-banner (pl/ro/tr, gebruikersverzoek 2026-07-19) — zelfde amber-toon als .pill-amber, maar als volle balk i.p.v. een pil: transparant over vertaalkwaliteit zonder de rest van de pagina te overschreeuwen. */ .mt-banner { display: flex; align-items: center; gap: 8px; background: var(--tamber2); color: var(--tamber3); border: 1px solid var(--tamber3); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; } .mt-banner-icon { flex: none; } /* Kaart-scherm (Leaflet-marker, wwwroot/js/map.js): Leaflet injecteert deze DOM buiten de Blazor-renderboom om (raw JS, geen Razor-markup), dus dit hoort in de GLOBALE tokens.css, niet in Kaart.razor.css — component-scoped CSS zou hier nooit matchen (CLAUDE.md-les: "globale classes zijn hier niet gevoelig voor scoping", nu ook van toepassing op niet-Blazor-elementen, niet alleen op RenderTreeBuilder-markup). */ .qrdb-map-pin span { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); } /* Legenda-control (L.Control.extend, map.js) — zelfde reden als .qrdb-map-pin hierboven: Leaflet's eigen DOM, buiten de Blazor-renderboom. AAA-contrast: --ink/--card halen al ≥7:1 (zelfde tokens als de rest van de app). */ .qrdb-map-legend { background: var(--card); border: 1px solid var(--bd); border-radius: 8px; padding: 7px 12px; font-size: 11px; color: var(--ink2); display: flex; gap: 10px; box-shadow: 0 3px 10px rgba(38, 45, 52, .12); } .qrdb-map-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .qrdb-map-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #262d34; color: #fff; font-size: 13px; font-weight: 600; padding: 12px 20px; border-radius: 10px; box-shadow: var(--shadow-overlay); z-index: 60; animation: pop .25s ease both; } /* ---- Toegankelijkheids-utilities (WCAG 2.2 AAA-pass, 2026-07-19) ---- */ /* Alleen voor schermlezers zichtbaar (labels, context bij symbolen). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Reset voor échte