(Geleend.razor)
— reset alleen de browser-standaard knop-chrome, .emp-card's eigen achtergrond/rand/padding
blijven gewoon gelden (CSS-class-regels komen ná user-agent-defaults). */
.emp-card-button {
width: 100%;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
appearance: none;
}
/* Tapfeedback (heraudit 2026-09-05): even groot tapdoel als .emp-btn-* op dezelfde touch-first
schermen, zie de motivatie bij het :active-blok van .emp-btn-primary hieronder. */
.emp-card-button:active:not(:disabled) {
transform: scale(.98);
}
.emp-empty {
text-align: center;
padding: 40px 16px;
color: var(--mut);
font-size: 15px;
}
.emp-cta-dashed {
border: 2px dashed var(--bd3);
border-radius: 14px;
padding: 18px;
text-align: center;
/* --accent-ink-page i.p.v. --accent-ink (heraudit 2026-09-05): staat direct in .emp-main op
de --page-gradient, geen kaart — --accent-ink haalt daar 5,63:1. */
color: var(--accent-ink-page, var(--accent-ink));
font-weight: 700;
font-size: 15px;
text-decoration: none;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* Zelfde probleem als .emp-nav-icon hierboven: erfde 13.5px van de knoptekst. */
.emp-cta-icon {
font-size: 20px;
line-height: 1;
}
/* ---- Mobiele knoppen (44px-tapdoel, groter dan de desktop .btn-primary/.btn-secondary) ---- */
.emp-btn-primary,
.emp-btn-secondary {
font-family: inherit;
font-weight: 700;
font-size: 15px;
border-radius: 11px;
min-height: 44px;
padding: 0 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
width: 100%;
text-decoration: none;
box-sizing: border-box;
}
.emp-btn-primary {
background: var(--accent);
color: var(--accent-fg, #fff);
}
.emp-btn-primary:hover:not(:disabled) {
background: var(--accent-dark);
}
.emp-btn-secondary {
background: var(--card);
color: var(--ink);
/* --bd-input i.p.v. --bd3 (audit-bevinding 2026-07-20, patroon tokens.css .btn-secondary):
--bd3 haalt maar ~1,45:1 contrast tegen --card, onder de WCAG 1.4.11-eis van 3:1. */
border: 1.5px solid var(--bd-input, var(--bd3));
}
.emp-btn-secondary:hover:not(:disabled) {
border-color: var(--bd-h);
}
.emp-btn-primary:disabled,
.emp-btn-secondary:disabled {
opacity: .55;
cursor: not-allowed;
}
/* Tapfeedback (audit 2026-09-04, patroon tokens.css .btn/.btn-primary/.btn-secondary): ontbrak
hier volledig, terwijl deze knoppen op de touch-first medewerker-PWA staan — geen hover-state
op mobiel, dus zonder :active is een tap onbevestigd. */
.emp-btn-primary:active:not(:disabled),
.emp-btn-secondary:active:not(:disabled),
.emp-btn-dark:active:not(:disabled) {
transform: scale(.97);
}
.emp-btn-dark {
background: #262d34; /* contrastcheck: zie .emp-header hierboven */
color: #fff;
}
/* ---- Scanner ---- */
.emp-scanner {
position: relative;
border-radius: 16px;
overflow: hidden;
background: #242b32; /* geen tekst op deze achtergrond (camerabeeld) — geen contrastcheck nodig */
aspect-ratio: 3 / 4;
}
.emp-scanner video {
width: 100%;
height: 100%;
object-fit: cover;
}
.emp-scanner-frame {
position: absolute;
inset: 15%;
border: 3px solid #fff;
border-radius: 12px;
pointer-events: none;
}
.emp-scanner-controls {
display: flex;
gap: 8px;
justify-content: center;
}
.emp-scanner-controls button {
/* Knoppen staan onder de video op paginabackground, niet als overlay erover — vaste
witte tekst op halftransparant wit (bugmelding: onzichtbaar/slecht contrast in light
mode) gaf er nu een --bd-input-boord voor de niet-actieve staat, zelfde patroon als
.emp-btn-secondary. */
background: var(--card);
color: var(--ink);
border: 1.5px solid var(--bd-input, var(--bd3));
border-radius: 10px;
padding: 10px 14px;
font-size: 13.5px;
font-weight: 600;
min-height: 44px;
cursor: pointer;
}
.emp-scanner-controls button:hover:not(:disabled) {
border-color: var(--bd-h);
}
.emp-scanner-controls button[aria-pressed="true"] {
background: var(--accent);
color: var(--accent-fg, #fff);
border-color: var(--accent);
}
.emp-scanner-controls button:disabled {
opacity: .55;
cursor: not-allowed;
}
/* ---- Chips (project-keuze) ---- */
.emp-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.emp-chip {
/* --bd-input i.p.v. --bd3 (audit-bevinding 2026-07-20): niet-geselecteerde staat is anders
onder de WCAG 1.4.11-eis van 3:1 (zie .emp-btn-secondary/tokens.css .btn-secondary). */
border: 1.5px solid var(--bd-input, var(--bd3));
background: var(--card);
color: var(--ink);
border-radius: 999px;
padding: 0 14px;
min-height: 44px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.emp-chip[aria-pressed="true"] {
background: var(--pink-badge-bg);
border-color: var(--accent);
color: var(--pink-badge-ink);
}
/* Tapfeedback (heraudit 2026-09-05), zelfde :not(:disabled)-patroon als .emp-btn-*. */
.emp-chip:active:not(:disabled) {
transform: scale(.97);
}
/* ---- Confirmatie ---- */
.emp-confirm {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: 40px 12px;
}
/* Een class-selector met dezelfde specificiteit als het UA-stylesheet's [hidden] { display:
none } wint normaliter van die browser-default (auteur-CSS komt later in de cascade) —
zonder deze regel bleef #gast-done zichtbaar ondanks het hidden-attribuut (bevinding
live-verificatie 2026-07-20, gastscan-bevestigingsscherm stond meteen open). */
.emp-confirm[hidden] {
display: none;
}
.emp-confirm-icon {
width: 74px;
height: 74px;
border-radius: 50%;
background: var(--tgreen2);
color: var(--tgreen3);
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
}
.emp-confirm-title {
font-size: 16px;
font-weight: 700;
}
.emp-confirm-text {
font-size: 15px;
color: var(--ink2);
}
/* ---- Auto-terug-voortgangsbalk (Klaar.razor, 4s countdown) ---- */
.emp-confirm-autoreturn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-top: 4px;
width: 100%;
max-width: 220px;
}
.emp-confirm-autoreturn-track {
width: 100%;
height: 4px;
border-radius: 999px;
background: var(--bd2);
overflow: hidden;
}
.emp-confirm-autoreturn-bar {
height: 100%;
width: 100%;
background: var(--accent);
border-radius: 999px;
transform-origin: left;
animation: emp-confirm-countdown 4s linear forwards;
}
/* De globale prefers-reduced-motion-regel (tokens.css: "* { animation-duration: .001ms
!important }") dekt dit juist NIET af (heraudit 2026-09-05): met `forwards` staat de balk dan
na 1 ms op scaleX(0) terwijl de 4s-teller (Klaar.razor) gewoon doorloopt — de indicatie van de
resterende tijd ontbrak volledig. Hieronder blijft de balk vol staan; tekst + "Blijf hier"-
knop dragen de informatie. `forwards` op een transform-keyframe is hier bewust (leaf-element
zonder fixed-nakomelingen, allowlist OverlayContainingBlockTests). */
@keyframes emp-confirm-countdown {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
.emp-confirm-autoreturn-bar {
animation: none;
transform: none;
}
}
.emp-confirm-autoreturn-text {
font-size: 12.5px;
color: var(--mut);
margin: 0;
}
/* ---- Schade-melden ---- */
.emp-photo-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.emp-photo-thumb {
width: 66px;
height: 66px;
border-radius: 10px;
object-fit: cover;
border: 1px solid var(--bd);
}
.emp-photo-add {
width: 66px;
height: 66px;
border-radius: 10px;
border: 2px dashed var(--bd3);
display: flex;
align-items: center;
justify-content: center;
color: var(--mut);
font-size: 22px;
cursor: pointer;
position: relative;
}
.emp-photo-add input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
/* ---- FAQ-accordion ---- */
.emp-faq-item {
background: var(--card);
border: 1px solid var(--bd);
border-radius: var(--radius-card, 12px);
overflow: hidden;
box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.emp-faq-item:has(.emp-faq-q[aria-expanded="true"]) {
border-color: var(--bd-h);
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}
.emp-faq-q {
width: 100%;
text-align: left;
background: transparent;
border: none;
padding: 14px;
font-weight: 700;
font-size: 15px;
color: var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
min-height: 44px;
transition: background-color 0.15s ease;
}
.emp-faq-q:hover {
background: var(--chip);
}
.emp-faq-q:focus-visible {
outline: 2.5px solid var(--accent-ink, var(--accent));
outline-offset: -2.5px;
}
.emp-faq-q[aria-expanded="true"] {
color: var(--accent-ink);
}
.emp-faq-q > span:last-child {
flex: none;
font-size: 13.5px;
color: var(--mut);
transition: transform 0.15s ease;
}
.emp-faq-q[aria-expanded="true"] > span:last-child {
transform: rotate(90deg);
color: var(--accent-ink);
}
.emp-faq-a {
padding: 0 14px 16px;
font-size: 15px;
line-height: 1.5;
color: var(--ink2);
white-space: pre-line;
animation: faqAnswerIn 0.18s ease backwards;
}
@keyframes faqAnswerIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.emp-faq-a {
animation: none;
}
}
/* ---- Keurmeester-wachtrij ---- */
/* .emp-keur-scope/.emp-keur-warning verwijderd (heraudit 2026-09-05): in geen enkele .razor gebruikt. */
.emp-keur-form {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
@media (min-width: 481px) {
.emp-bottom-nav,
.emp-install-banner {
left: 50%;
}
}
/* ---- Gast-scanpagina (GastScan.razor, statisch/publiek, geen bottom-nav/FAB-chrome) ---- */
.emp-gast-page {
max-width: 480px;
margin: 0 auto;
padding: 0 16px 32px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Compactere kaart/tabel/formulier op de publieke gastpagina — de gedeelde .emp-card/
.emp-gast-table-maten elders zijn getuned op de medewerker-app, hier bewust krapper
(gebruikersverzoek 2026-07-26). */
.emp-gast-page .emp-card {
padding: 10px;
gap: 10px;
}
.emp-gast-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 6px 0 0;
}
.emp-gast-header .emp-header-brand,
.emp-gast-header .emp-gast-url {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.emp-gast-lang-row {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex: none;
}
/* .pub-lang-menu(-*) — zelfde klassen/opmaak als PublicLayout.razor's taalmenu (public-
layout.css), hier gedupliceerd omdat public-layout.css alleen op de pure marketingpagina's
laadt (App.razor's _isPublicMarketingPage) en GastScan.razor (/s/{guid}) daar geen deel van
is. De klassenaam blijft ongewijzigd zodat het al geladen lang-menu.js (outside-click/
Escape sluit het open menu, selector .pub-lang-menu[open]) hier zonder aanpassing werkt. */
.pub-lang-menu {
position: relative;
}
.pub-lang-menu-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
height: var(--control-height);
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--bd3, var(--bd));
background: var(--card);
color: var(--ink2);
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
list-style: none;
}
.pub-lang-menu-toggle::-webkit-details-marker { display: none; }
.pub-lang-menu-toggle::marker { content: ""; }
.pub-lang-menu-toggle:hover,
.pub-lang-menu[open] > .pub-lang-menu-toggle {
border-color: var(--accent-ink, var(--accent));
color: var(--accent-ink, var(--accent));
background: var(--pink-badge-bg, var(--bg2));
}
/* Vlag-chip: vaste 18x13-verhouding (3:2), afgeronde hoeken — employee.css is een globaal
(niet component-scoped) stijlblad, dus geen ::deep nodig. */
.pub-lang-menu-flag {
display: inline-flex;
flex: none;
width: 18px;
height: 13px;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--bd3, var(--bd));
}
.pub-lang-menu-flag svg {
display: block;
width: 100%;
height: 100%;
}
.pub-lang-menu-code {
line-height: 1;
}
.pub-lang-menu-chevron {
flex: none;
transition: transform 0.15s ease;
}
.pub-lang-menu[open] .pub-lang-menu-chevron {
transform: rotate(180deg);
}
.pub-lang-menu-list {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 50;
margin: 0;
padding: 6px;
list-style: none;
min-width: 170px;
max-height: 320px;
overflow-y: auto;
background: var(--card);
border: 1px solid var(--bd3, var(--bd));
border-radius: 12px;
box-shadow: 0 14px 30px rgba(20, 24, 28, 0.18);
}
/* Knop i.p.v. PublicLayout's
(GastScan zet een cookie + herlaadt, navigeert niet naar een
andere URL) — reset naar linkweergave zodat 'm visueel niet als knop oogt. */
.pub-lang-menu-link {
display: flex;
align-items: center;
width: 100%;
/* 44px i.p.v. 38px (heraudit 2026-09-05): gelijk aan public-layout.css, mobiel-eerst scherm
(WCAG 2.5.5); de lijst is max-height:320px + overflow-y:auto, dus zeven opties blijven scrollbaar. */
min-height: 44px;
padding: 0 10px;
border: none;
border-radius: 8px;
background: none;
color: var(--ink);
text-align: left;
text-decoration: none;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.pub-lang-menu-link:hover {
background: var(--pink-badge-bg, var(--bg2));
color: var(--accent-ink, var(--accent));
}
.pub-lang-menu-link[aria-current="true"] {
color: var(--accent-ink, var(--accent));
background: var(--pink-badge-bg, var(--bg2));
}
.pub-lang-menu-link-flag {
display: inline-flex;
flex: none;
width: 18px;
height: 13px;
border-radius: 2px;
overflow: hidden;
margin-right: 8px;
box-shadow: 0 0 0 1px var(--bd3, var(--bd));
}
.pub-lang-menu-link-flag svg {
display: block;
width: 100%;
height: 100%;
}
.emp-gast-url {
font-size: 12.5px;
color: var(--mut);
}
.emp-gast-hint {
font-size: 13.5px;
color: var(--mut);
margin: 0;
}
.emp-gast-error {
color: var(--tamber3);
font-size: 13.5px;
margin: 0;
}
.emp-gast-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.emp-gast-table th,
.emp-gast-table td {
text-align: left;
padding: 6px 0;
border-bottom: 1px solid var(--bd2);
font-weight: 400;
color: var(--ink2);
}
.emp-gast-table th {
color: var(--mut);
font-weight: 600;
width: 45%;
}
.emp-gast-exam-statuses {
display: flex;
flex-direction: column;
gap: 4px;
margin: 4px 0;
}
.emp-gast-documents {
margin: 4px 0;
}
.emp-gast-documents-title {
font-size: 12.5px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--mut);
margin: 0 0 8px;
}
.emp-gast-documents-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
/* ---- Gast-scanpagina: hero-foto + duidelijkere titel/status/knoppen ---- */
.emp-gast-hero {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, var(--bd2) 25%, var(--bd) 25%, var(--bd) 50%, var(--bd2) 50%, var(--bd2) 75%, var(--bd) 75%);
background-size: 14px 14px;
}
.emp-gast-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.emp-gast-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
/* Formuliervelden hadden geen onderlinge ruimte (globale reset zet marges op 0, tokens.css
kent geen generieke form-layout) — flex-column + gap geeft elk label/veld/knoppenblok
consistente afstand, zonder de gedeelde .field/label-stijlen elders aan te raken. */
#gast-form {
display: flex;
flex-direction: column;
gap: 8px;
}
#gast-form label {
font-size: 13.5px;
font-weight: 600;
color: var(--ink2);
}
/* Grotere, duidelijkere tapdoelen dan de standaard .emp-btn-primary/.emp-btn-secondary
(44px) — dit is de enige actie op een publieke, vaak op straat/in het magazijn bekeken
pagina, dus mag opvallender dan de medewerker-schermen. */
.emp-gast-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 2px;
}
.emp-gast-actions .emp-btn-primary,
.emp-gast-actions .emp-btn-secondary {
min-height: 46px;
font-size: 16px;
border-radius: 12px;
}