/* ============================================================================
   Frontoffice — controleur (mobiel) + supervisor (app-shell)
   Bron: "Vias Controleur.dc.html" / "Vias Supervisor.dc.html".
   Bouwt voort op de tokens uit backoffice.css (--bo-*). Lato + mint-accent.
   ============================================================================ */

/* ===========================================================================
   CONTROLEUR — mobiele flow (volledig scherm, één kolom)
   =========================================================================== */
body.ctr-app { margin: 0; background: var(--bo-bg); font-family: var(--bo-font); -webkit-font-smoothing: antialiased; }
.ctr-flow { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.ctr-screen { flex: 1; display: flex; flex-direction: column; }
.ctr-pad { padding: 24px 22px; }
.ctr-main { width: 100%; max-width: 480px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }

/* Donker code/QR-scherm */
.ctr-dark { background: var(--bo-side); color: #fff; }
.ctr-dark .ctr-brand { text-align: center; line-height: 1; margin: 8px 0 22px; }
.ctr-dark .ctr-brand .b1 { font-weight: 900; font-size: 21px; color: #fff; }
.ctr-dark .ctr-brand .b2 { font-weight: 300; font-size: 21px; color: var(--bo-mint); margin-left: 2px; }
.ctr-dark .ctr-brand .b3 { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--bo-side-muted); margin-top: 4px; font-weight: 700; }
.ctr-qr { position: relative; width: 240px; max-width: 70vw; aspect-ratio: 1/1; border-radius: 22px; background: #22323E; margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ctr-qr .corner { position: absolute; width: 34px; height: 34px; }
.ctr-qr .c-tl { left: 18px; top: 18px; border-left: 4px solid var(--bo-mint); border-top: 4px solid var(--bo-mint); border-radius: 8px 0 0 0; }
.ctr-qr .c-tr { right: 18px; top: 18px; border-right: 4px solid var(--bo-mint); border-top: 4px solid var(--bo-mint); border-radius: 0 8px 0 0; }
.ctr-qr .c-bl { left: 18px; bottom: 18px; border-left: 4px solid var(--bo-mint); border-bottom: 4px solid var(--bo-mint); border-radius: 0 0 0 8px; }
.ctr-qr .c-br { right: 18px; bottom: 18px; border-right: 4px solid var(--bo-mint); border-bottom: 4px solid var(--bo-mint); border-radius: 0 0 8px 0; }
.ctr-qr .scan { position: absolute; left: 18px; right: 18px; height: 3px; background: var(--bo-mint); box-shadow: 0 0 14px 2px var(--bo-mint); top: 50%; }
.ctr-dark .ctr-hint { color: #A7B6BF; font-size: 14px; margin: 18px 0 22px; text-align: center; }
.ctr-or { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 16px; }
.ctr-or .line { flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.ctr-or span { color: var(--bo-side-muted); font-size: 12px; font-weight: 700; }
/* Code-invoer op het donkere scherm */
.ctr-dark .ctr-code-input {
  width: 100%; height: 56px; border: 1.5px solid var(--bo-mint); border-radius: 12px;
  background: #22323E; color: #fff; text-align: center; letter-spacing: 12px;
  font-size: 24px; font-weight: 900; font-family: ui-monospace, Menlo, Consolas, monospace; outline: none;
  text-transform: uppercase; padding-left: 12px;
}
.ctr-dark .ctr-code-input::placeholder { color: #566975; letter-spacing: 8px; }

/* Lichte schermen (naam / resultaat) */
.ctr-icon { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; }
.ctr-icon--ok { background: var(--bo-green-bg); color: var(--bo-green-ink); }
.ctr-h1 { font-size: 24px; font-weight: 900; color: var(--bo-ink); letter-spacing: -.5px; margin: 8px 0 0; }
.ctr-lead { font-size: 14px; color: #6B7780; line-height: 1.5; margin: 6px 0 22px; }
.ctr-field-label { font-size: 12px; font-weight: 900; color: var(--bo-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 7px; display: block; }
.ctr-input { width: 100%; height: 52px; border: 1px solid var(--bo-border); border-radius: 12px; padding: 0 14px; font-size: 16px; color: var(--bo-ink); outline: none; background: #fff; }
.ctr-input:focus { border-color: var(--bo-mint); box-shadow: 0 0 0 3px rgba(81,222,184,.18); }
.ctr-infocard { margin-top: 18px; padding: 14px; background: #fff; border: 1px solid var(--bo-border); border-radius: 12px; }
.ctr-infocard .k { font-size: 12px; color: var(--bo-muted-2); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ctr-infocard .v1 { font-size: 15px; color: var(--bo-ink); font-weight: 700; margin-top: 3px; }
.ctr-infocard .v2 { font-size: 13px; color: var(--bo-muted-2); }
.ctr-spacer { flex: 1; min-height: 18px; }

/* Knoppen (groot, mobiel) */
.ctr-btn { display: block; width: 100%; height: 54px; border-radius: 13px; border: none; font-size: 16px; font-weight: 900; cursor: pointer; text-align: center; line-height: 54px; text-decoration: none; }
.ctr-btn--primary { background: var(--bo-green); color: #fff; }
.ctr-btn--primary:hover { background: var(--bo-green-d); color: #fff; }
.ctr-btn--mint { background: var(--bo-mint); color: #0E3A2E; }
/* Overschrijf de algemene .bo-app a-linkkleur op <a>-knoppen (anders groen-op-groen). */
.ctr-app a.ctr-btn--primary, .ctr-app a.ctr-btn--primary:hover { color: #fff; }
.ctr-app a.ctr-btn--mint, .ctr-app a.ctr-btn--mint:hover { color: #0E3A2E; }

/* Lijst-scherm */
.ctr-listhead { flex: 0 0 auto; background: #fff; border-bottom: 1px solid var(--bo-border-2); padding: 12px 20px 14px; }
.ctr-listhead .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ctr-listhead .crumb { font-size: 11px; color: var(--bo-muted-2); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ctr-listhead .title { font-size: 18px; font-weight: 900; color: var(--bo-ink); }
.ctr-close { height: 34px; padding: 0 13px; border-radius: 9px; border: 1px solid #F0C9C3; background: #FCEEEC; color: #B4554A; font-size: 13px; font-weight: 700; cursor: pointer; }
.ctr-afronden { margin-top: 16px; }
.ctr-afgerond-melding { color: var(--bo-mint); text-align: center; font-weight: 700; margin: 0 0 4px; }
.ctr-prog-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.ctr-prog-row .lab { font-weight: 700; color: var(--bo-ink); }
.ctr-prog-row .pct { color: var(--bo-muted-2); font-size: 12px; }
.ctr-prog { height: 8px; border-radius: 5px; background: #EEF1F3; overflow: hidden; }
.ctr-prog > i { display: block; height: 100%; background: var(--bo-mint); border-radius: 5px; }
.ctr-search { position: relative; margin-top: 13px; }
.ctr-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9AA7B0; font-size: 15px; }
.ctr-search input { width: 100%; height: 42px; border: 1px solid var(--bo-border); border-radius: 11px; padding: 0 12px 0 34px; font-size: 15px; color: var(--bo-ink); background: var(--bo-surface-2); outline: none; }
.ctr-filters { display: flex; gap: 8px; margin-top: 11px; align-items: center; }
.ctr-filters select { flex: 1; height: 38px; border: 1px solid var(--bo-border); border-radius: 10px; padding: 0 10px; font-size: 13px; color: var(--bo-ink); background: #fff; font-weight: 700; }
.ctr-toggle { height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--bo-border); background: #fff; color: var(--bo-muted); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.ctr-toggle.on { border-color: var(--bo-green); background: var(--bo-green-bg); color: var(--bo-green-ink); }
.ctr-toggle .box { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid currentColor; display: inline-block; }
.ctr-toggle.on .box { background: var(--bo-green); border-color: var(--bo-green); }
.ctr-list { flex: 1; overflow-y: auto; padding: 10px 16px 18px; }
.ctr-person { display: flex; align-items: center; gap: 13px; padding: 13px 14px; background: #fff; border: 1px solid var(--bo-border-2); border-radius: 13px; margin-bottom: 9px; cursor: pointer; text-decoration: none; }
.ctr-person:hover { border-color: #C9D3D9; }
.ctr-av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; flex: 0 0 42px; background: #EFF3F5; color: var(--bo-muted-2); }
.ctr-person.done .ctr-av { background: var(--bo-green-bg); color: var(--bo-green-ink); }
.ctr-person .nm { flex: 1; min-width: 0; }
.ctr-person .nm .n1 { font-size: 15.5px; font-weight: 700; color: var(--bo-ink); }
.ctr-person .nm .n2 { font-size: 12.5px; color: var(--bo-muted-2); }
.ctr-person .arr { color: #C4CED4; font-size: 18px; }

/* Form-scherm: kop met segmented toggle + sticky bevestig-knop */
.ctr-formhead { flex: 0 0 auto; background: #fff; border-bottom: 1px solid var(--bo-border-2); padding: 11px 18px 13px; }
.ctr-formhead .row1 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ctr-back { font-size: 22px; color: var(--bo-green); cursor: pointer; line-height: 1; text-decoration: none; }
.ctr-formhead .nm { flex: 1; min-width: 0; }
.ctr-formhead .nm .n1 { font-size: 16px; font-weight: 900; color: var(--bo-ink); }
.ctr-formhead .nm .n2 { font-size: 12px; color: var(--bo-muted-2); }
.ctr-okcount { font-size: 12.5px; font-weight: 700; color: var(--bo-green-ink); white-space: nowrap; }
/* Segmented Voertuig/Lijst (hangt aan #wvVoertuig/#wvLijst van controle-visueel.js) */
.ctr-seg { display: flex; background: #EFF3F5; border-radius: 11px; padding: 4px; }
.ctr-seg .btn { flex: 1; height: 38px; border: none; border-radius: 8px; background: transparent; color: var(--bo-muted-2); font-size: 14px; font-weight: 900; cursor: pointer; }
.ctr-seg .btn.active { background: #fff; color: var(--bo-green); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ctr-herbanner { font-size: 12px; color: #B5651D; background: #FDECDC; border-radius: 8px; padding: 6px 11px; font-weight: 700; margin: 10px 18px 0; display: inline-block; }
.ctr-formbody { flex: 1; overflow-y: auto; padding: 14px 18px 16px; }
.ctr-formfoot { flex: 0 0 auto; padding: 12px 18px 16px; background: #fff; border-top: 1px solid var(--bo-border-2); }
/* OK/NOK-rij in de lijstweergave */
/* Tussentitel per groep controlepunten (remmen, lichten, reflectoren, documenten, ...). */
.ctr-cp-groep { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; color: var(--bo-muted); margin: 16px 2px 7px; }
.ctr-cp-groep:first-child { margin-top: 0; }

/* Voertuigkeuze: knoppenrij die op smalle schermen doorloopt naar de volgende regel. */
.ctr-vm-keuze { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ctr-vm-knop {
  flex: 1 1 auto; min-height: 44px; padding: 9px 14px;   /* 44px = comfortabel touch-target */
  background: #fff; border: 1px solid var(--bo-border-2); border-radius: 11px;
  font-size: 14.5px; font-weight: 800; color: var(--bo-ink); cursor: pointer;
}
.ctr-vm-knop:hover { border-color: var(--bo-green); }
.ctr-vm-knop.is-actief { background: var(--bo-green); border-color: var(--bo-green); color: #fff; }
.ctr-vm-knop:focus-visible { outline: 2px solid var(--bo-green); outline-offset: 2px; }

/* Verfijning van het voertuig: subcategorie + de vervolgvraag bij dit hoofdtype. */
.ctr-vm-detail { background: #fff; border: 1px solid var(--bo-border-2); border-radius: 12px; padding: 12px 13px; margin-bottom: 14px; }
.ctr-vm-vraag { margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ctr-veldlabel { display: block; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--bo-muted); margin-bottom: 6px; }
.ctr-vm-vraag .ctr-veldlabel { margin-bottom: 0; margin-right: 4px; flex: 1 0 100%; }

/* Vrij tekstveld van de controleur; gaat mee in de resultaatmail. */
.ctr-feedback { margin-top: 18px; }

.ctr-cp { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: #fff; border: 1px solid var(--bo-border-2); border-radius: 12px; margin-bottom: 9px; }
.ctr-cp .num { width: 24px; height: 24px; border-radius: 50%; background: #EFF3F5; color: var(--bo-muted); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; flex: 0 0 24px; }
.ctr-cp .lbl { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--bo-ink); }
.ctr-cp .ok, .ctr-cp .nok { height: 36px; min-width: 54px; border-radius: 9px; font-size: 13px; font-weight: 900; }
.ctr-resultcard { background: #fff; border: 1px solid var(--bo-border); border-radius: 12px; overflow: hidden; margin-top: 16px; }
.ctr-resultcard .h { padding: 12px 16px; border-bottom: 1px solid var(--bo-line); font-size: 12px; font-weight: 900; color: var(--bo-muted-2); text-transform: uppercase; letter-spacing: .4px; }
.ctr-resultcard .row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #F2F5F6; font-size: 14.5px; color: var(--bo-ink); font-weight: 700; }
.ctr-resultcard .row:last-child { border-bottom: 0; }
.ctr-resultcard .mark { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; flex: 0 0 22px; }
.ctr-resultcard .mark.bad { background: #FBE6E3; color: #C0473A; }
.ctr-resultcard .mark.good { background: var(--bo-green-bg); color: var(--bo-green-ink); }
.ctr-resicon { width: 84px; height: 84px; border-radius: 50%; margin: 18px auto 0; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 900; }
.ctr-resicon--ok { background: var(--bo-green-bg); color: var(--bo-green-ink); }
.ctr-resicon--nok { background: #FDECDC; color: #B5651D; }
.ctr-hernote { margin-top: 16px; padding: 13px 15px; background: var(--bo-green-bg); border: 1px solid #BDEBDD; border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #0E5E48; font-weight: 700; }

/* ===========================================================================
   SUPERVISOR — app-shell extra's (bovenop de backoffice-shell .bo-*)
   =========================================================================== */
/* De kop draagt hier ook de sitekiezer, dus hij mag hoger zijn dan de 64px van de backoffice.
   Enkel "height: auto" volstond niet: de zijbalk is een flexkolom en de flex-basis van 64px
   bleef gelden, waardoor de sitenaam onder de rand wegviel (overflow: hidden). */
.bo-side .sup-head { display: block; height: auto; flex: 0 0 auto; padding: 16px 18px; }
.bo-side .sup-head::after { width: 120px; height: 120px; }
.sup-switch-label { font-size: 11px; color: var(--bo-side-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }
.sup-switch { width: 100%; height: 40px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: #22323E; color: #fff; font-size: 14px; font-weight: 700; padding: 0 10px; outline: none; }
.sup-switch:focus { border-color: var(--bo-mint); }
.sup-switch--static { display: flex; align-items: center; }
.bo-side .sup-back { color: var(--bo-side-muted); font-size: 13px; font-weight: 700; padding: 9px 22px; }
.bo-side .sup-back:hover { color: #fff; background: rgba(255,255,255,.04); }
.sup-divider { height: 1px; background: rgba(255,255,255,.07); margin: 8px 16px 10px; }


/* Voertuig-stage binnen de controleur.
   Het vak moet dezelfde verhouding hebben als de tekening: de voertuig-SVG's zijn vierkant
   (viewBox 450×450) en worden met preserveAspectRatio ingepast, terwijl de controlepunten in
   procenten van het vák gepositioneerd worden — dezelfde procenten die in de backoffice op een
   vierkant vak aangeduid zijn. Stond dit vak op 100% × 300px, dan kreeg de tekening links en
   rechts loze marge en schoven de punten naast de fiets, hoe breder het scherm hoe verder. */
.ctr-formbody .vc-stage { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; height: auto;
                          margin: 0 auto; border-radius: 14px; border: 1px solid var(--bo-border-2); }
/* Liggend op een lage schermhoogte: vierkant houden, maar binnen beeld. */
@media (orientation: landscape) and (max-height: 600px) {
    .ctr-formbody .vc-stage { max-width: min(360px, 46vh); }
}
.ctr-formbody .vc-hint { text-align: center; font-size: 12.5px; color: var(--bo-muted-2); margin-top: 10px; }
.ctr-leg { display: flex; gap: 16px; justify-content: center; margin-top: 8px; }
.ctr-leg span { font-size: 12px; color: var(--bo-muted); display: flex; align-items: center; gap: 6px; }
.ctr-leg .d { width: 13px; height: 13px; border-radius: 50%; }
.ctr-vm-select { margin-top: 10px; }
.ctr-vm-select select { width: 100%; height: 42px; border: 1px solid var(--bo-border); border-radius: 11px; padding: 0 12px; font-size: 14px; color: var(--bo-ink); background: #fff; font-weight: 700; }

/* Helpdeskblok: bij wie kan de beheerder terecht? In de donkere zijbalk en op het
   startscherm, met dezelfde inhoud maar een andere achtergrond. */
.sup-helpdesk { margin: auto 14px 10px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.06); font-size: 12px; line-height: 1.5; }
.sup-helpdesk .k { font-weight: 900; text-transform: uppercase; letter-spacing: .4px;
  font-size: 11px; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.sup-helpdesk .r { color: rgba(255,255,255,.85); }
.sup-helpdesk a { color: #7FD1B0; text-decoration: none; }
.sup-helpdesk a:hover { text-decoration: underline; }

.fo-helpdesk { margin-top: 18px; padding: 14px 16px; border-radius: 10px;
  background: var(--bo-bg-2, #F4F7F8); border: 1px solid var(--bo-border); }
.fo-helpdesk .k { font-size: 12px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .4px; color: var(--bo-muted-2); margin-bottom: 4px; }