/* Huisstijl Digitaal Attractie Dossier — kleuren uit het logo.
   Donkerblauw #092E54 en cyaan #57C8D5, opgemeten met scripts/logo-analyse.ts.

   Let op de scheiding tussen --accent en --focus. Cyaan is een lichte kleur: op wit
   haalt het nauwelijks 2:1 contrast, dus het kan wel als vlak of streep maar niet als
   focusrand of tekst. Daarom is --focus donkerblauw. */

:root {
  /* Wit, geen getinte grond. Een lichtblauwgroene achtergrond leek subtiel maar viel
     op als "blauwgroen" en liet het logo erin wegvallen. Kaarten en lijsten staan nu
     op wit met een lijn eromheen; die lijn doet het scheidingswerk. */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --field: #FFFFFF;
  --ink: #1B2B38;
  --ink-soft: #55707F;
  --line: #C7E0E8;
  --brand: #0E4272;
  --brand-deep: #092E54;
  --accent: #57C8D5;
  --focus: #0E4272;
  --ring: rgba(14, 66, 114, .30);
  --sky: #57C8D5;
  --ok: #1E7A4B;
  --warn: #A85B00;
  --btn-bg: #0E4272;
  --btn-ink: #FFFFFF;
}

/* De app is licht, ongeacht de instelling van het apparaat.
 *
 * Eerder volgde de app `prefers-color-scheme` en werd hij donker op een toestel dat op
 * donker staat: grond #0B1A24 met lichte letters. De opdrachtgever wil wit, en zag op
 * telefoon en browser dus steeds een donkerblauwgroene app terwijl het lichte palet
 * klopte. Daarom hangt de donkere stand niet meer aan de apparaatinstelling.
 *
 * De donkere tokens blijven wel staan onder een expliciete keuze
 * (`data-theme="dark"` op het wortelelement). Niets in de app zet dat nu, dus in de
 * praktijk is de app altijd licht; wil je de donkere stand terug, dan is dat één
 * attribuut.
 *
 * `color-scheme: light` hoort hierbij: zonder dat tekenen de browser en het
 * besturingssysteem invoervelden, keuzelijsten en schuifbalken nog steeds donker.
 */
:root { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
    --bg: #0B1A24;
    --surface: #13252F;
    --field: #10202A;
    --ink: #E8F4F8;
    --ink-soft: #9FBDC9;
    --line: #274150;
    --brand: #7FD3E0;
    --brand-deep: #071620;
    --accent: #57C8D5;
    --focus: #7FD3E0;
    --ring: rgba(127, 211, 224, .30);
    --sky: #57C8D5;
    --ok: #63C48E;
    --warn: #F0A32F;
    --btn-bg: #1B5E86;
    --btn-ink: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- chrome ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px clamp(14px, 3vw, 32px);
  background: var(--brand-deep);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}

/* Alleen het beeldmerk in de balk; de naam staat er als echte tekst naast en is
   daardoor scherp op elk formaat. Het volledige logo met de naam eronder wordt in een
   balk van vijftig pixels onleesbaar. */
.brand img {
  height: 42px;
  width: auto;
  display: block;
}

.brand span {
  font-family: "Libre Franklin", "Inter", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  max-width: 12ch;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nav { display: flex; gap: 4px; flex-wrap: wrap; }

.whoami {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.whoami-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
  max-width: 42vw;
}

.whoami-text strong {
  color: #fff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whoami form { margin: 0; }

button.nav-logout {
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

@media (max-width: 620px) {
  .whoami { width: 100%; padding-left: 0; border-left: none; justify-content: space-between; }
  .whoami-text { max-width: none; }
}

.nav-link {
  padding: 9px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-link.is-active { background: #fff; color: var(--brand-deep); }

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) clamp(14px, 3vw, 24px) 60px;
}

.sitefoot {
  border-top: 1px solid var(--line);
  padding: 18px clamp(14px, 3vw, 32px);
  color: var(--ink-soft);
  font-size: 12.5px;
}

.sitefoot p { margin: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.crumbs .sep { color: var(--line); }
.crumbs a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- typografie ---------- */

h1, h2, h3 {
  font-family: "Libre Franklin", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(23px, 2.6vw, 30px); color: var(--brand); }
h2 { font-size: clamp(18px, 2vw, 21px); }
h3 { font-size: 16px; }

.lede { margin: 8px 0 0; color: var(--ink-soft); }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 30px 0 12px;
}

/* ---------- knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: 11px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--line);
}

.btn-ghost:hover { background: var(--surface); filter: none; }

.btn-lg { min-height: 54px; font-size: 16px; padding: 0 22px; width: 100%; }
.btn-sm { min-height: 38px; font-size: 14px; padding: 0 13px; }

/* ---------- kaarten en lijsten ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(9, 46, 84, .04);
  border-radius: 14px;
  padding: clamp(14px, 2.4vw, 20px);
}

.stack { display: flex; flex-direction: column; gap: 12px; }

.tree { display: flex; flex-direction: column; gap: 12px; }

.tree-item {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(9, 46, 84, .04);
  border-radius: 14px;
  overflow: hidden;
}

.tree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}

/* Neutraal grijs bij zweven, geen cyaan mengsel: dat gaf een blauwgroene tint. */
.tree-row:hover { background: #F2F4F5; }

.tree-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.tree-meta { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

.tree-children {
  border-top: 1px solid var(--line);
  /* Subbedrijven stonden op een cyaan mengsel en dat las als een blauwgroene achtergrond.
     Nu wit; de inspringing en de lijn doen het onderscheid. */
  background: var(--surface);
}

.tree-children .tree-row {
  padding-left: 34px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.tree-children .tree-row:last-child { border-bottom: none; }

.chev { color: var(--ink-soft); flex: none; }

/* ---------- pillen en status ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .015em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.pill-sub { border-color: color-mix(in srgb, var(--sky) 45%, var(--line)); color: var(--sky); }
.pill-wefact { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--brand); }
.pill-ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); color: var(--ok); }
.pill-warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); color: var(--warn); }

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---------- formulieren ---------- */

form.stack { gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field label { font-size: 13px; font-weight: 600; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--field);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
}

.field textarea { min-height: 90px; resize: vertical; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--ring);
}

.field .hint { font-size: 12.5px; color: var(--ink-soft); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.searchbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.searchbar .field { flex: 1 1 220px; }

/* ---------- meldingen ---------- */

.flash {
  margin: 0 0 18px;
  padding: 12px 15px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14.5px;
}

.flash-ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.flash-fout { border-color: color-mix(in srgb, #C0392B 50%, var(--line)); }
.flash-let-op { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }

.empty {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 26px 20px;
  text-align: center;
  color: var(--ink-soft);
}

.empty p { margin: 0 0 14px; }

.callout {
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  border-left: 5px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px 18px;
}

.callout h2 { margin-bottom: 6px; }
.callout p { margin: 0 0 14px; color: var(--ink-soft); }

/* ---------- definitielijst ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 22px;
  margin: 0;
}

.facts div { min-width: 0; }
.facts dt { font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em; }
.facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

/* ---------- scanner ---------- */

.scanner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 3 / 4;
  max-height: 62vh;
}

.scanner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scanner .reticle {
  position: absolute;
  inset: 16%;
  border: 3px solid rgba(255, 255, 255, .85);
  border-radius: 16px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
  pointer-events: none;
}

.scanner .status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 10px 13px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .66);
  color: #fff;
  font-size: 13.5px;
  text-align: center;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 13px;
  margin: 22px 0 16px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Het raster met labelvoorbeelden. De kolom moet minstens zo breed zijn als het label
   zelf, anders lopen de labels over elkaar heen — dat gebeurde toen het ronde ontwerp
   werd vervangen door het rechthoekige, dat drie keer zo breed is als hoog. Een
   voorbeeld wordt op 60 mm getekend, en 60 mm is ongeveer 227 px. */
.qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  align-items: start;
}

/* Geen kader of witte vulling om een labelvoorbeeld: het label heeft zijn eigen rand. */
.qr-cell {
  padding: 0;
  text-align: center;
  min-width: 0;
}

/* Het label schaalt mee met de kolom in plaats van eruit te lopen. */
.qr-cell .label-rechthoek {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 1;
}

.qr-cell .code { color: var(--ink-soft); }
.qr-cell .code { margin: 8px 0 0; font-size: 12px; }

.table-scroll { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; letter-spacing: .03em; color: var(--ink-soft); text-transform: uppercase; }
td.num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Foto van een glijbaan op de detailpagina. */
.slide-photo {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* De miniatuur van een net gemaakte foto vult hetzelfde kader als de camera. */
.scanner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Inline formuliertje in de beheertabel: e-mailadres plus knop op één regel. */
.account-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

.account-form input {
  min-width: 200px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--field);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}

.account-form input:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ---------- beheer: acties in een tabelrij ---------- */

.inline-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.inline-form select {
  min-height: 38px;
  padding: 6px 10px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--field);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}

.acties {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- lange lijsten: verticaal scrollen met een vaste kop ---------- */

.list-scroll {
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.list-scroll table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line);
}

/* De bedrijvenboom op /bedrijven wordt met 357 bedrijven te lang voor één pagina. */
.tree.list-scroll {
  padding-right: 4px;
}

/* ---------- scrollbar in de huisstijl ---------- */

/* Firefox */
.list-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}

/* Chrome, Edge, Safari */
.list-scroll::-webkit-scrollbar {
  width: 12px;
}

.list-scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-radius: 999px;
}

.list-scroll::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: 999px;
  /* Rand in de achtergrondkleur, zodat de duim smaller lijkt dan de baan. */
  border: 3px solid var(--bg);
}

.list-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--brand) 82%, #000);
}

/* In een flex-kolom met een max-height krimpen de kinderen om te passen in plaats van
   over te lopen. Met 357 bedrijven werd elke regel daardoor tot anderhalve pixel
   samengedrukt: je zag alleen de randjes. flex-shrink uitzetten laat elke regel zijn
   eigen hoogte houden, waarna de container pas gaat scrollen. */
.tree > .tree-item {
  flex: 0 0 auto;
}

/* ---------- uitklapbare panelen ---------- */

.paneel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}

.paneel > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-family: "Libre Franklin", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.9vw, 19px);
  color: var(--brand);
}

/* De standaard driehoek van de browser weg; we tekenen zelf een pijl. */
.paneel > summary::-webkit-details-marker { display: none; }
.paneel > summary::marker { content: ''; }

.paneel > summary:hover { background: #F2F4F5; }

.paneel > summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.paneel-titel { flex: 1 1 auto; }

.paneel-pijl {
  flex: none;
  color: var(--ink-soft);
  font-size: 14px;
  transition: transform .15s ease;
}

.paneel[open] > summary .paneel-pijl { transform: rotate(180deg); }

.paneel-inhoud {
  padding: 0 18px 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

/* Binnen een paneel hoeft de tabel geen eigen kader meer. */
.paneel-inhoud > .card {
  border: none;
  padding: 0;
  background: none;
}

/* ---------- label met het ontwerp van de opdrachtgever ----------
   Staat in app.css en niet in print.css, zodat de label er op het scherm
   precies zo uitziet als op papier: in het batchoverzicht, op de attractiepagina
   en op het afdrukvel. */

/* Het ontwerp vult de hele label; de app zet alleen de QR in het lege vlak. De
   maten van dat vlak staan in procenten, zodat ze bij elk formaat kloppen. Opgemeten
   met scripts/label-meten.ts. */
.label.ontwerp {
  /* Vierkant houden ongeacht de opgegeven breedte: bij een hoogte van 100% zonder
     vaste hoogte in de ouder werd de label platgedrukt tot een ovaal. */
  aspect-ratio: 1 / 1;
  position: relative;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  display: block;
  overflow: visible;
}

.label.ontwerp .achtergrond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* In het witte vlak staan de QR en de code eronder. Vaste verhoudingen en
   flex-shrink uit: in een flex-kolom met een vaste hoogte zouden de kinderen anders
   krimpen in plaats van hun eigen maat te houden. */
.label.ontwerp .qr-vlak {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.label.ontwerp .qr-code {
  flex: 0 0 auto;
  width: 86%;
  line-height: 0;
}

.label.ontwerp .qr-code svg {
  width: 100%;
  height: auto;
  display: block;
}

.label.ontwerp .qr-tekst {
  flex: 0 0 auto;
  margin-top: 1.5%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 3.4mm;
  letter-spacing: .06em;
  color: #2A2A2A;
  white-space: nowrap;
}

/* De code in leesletters, buiten de label, als hulp bij het sorteren voor de
   drukker. Verdwijnt op papier niet, maar staat onder de snijlijn. */
.label.ontwerp .code-onder {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6mm;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 3mm;
  letter-spacing: .05em;
  color: #5F5F5F;
}

/* ---------- aanmeldformulier ---------- */

.aanmeld-kop {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.aanmeld-kop .hint { max-width: 34ch; }

/* Een keuzelijst met honderden bedrijven: laat er meerdere tegelijk zien in plaats van
   een uitklapmenu, dat scrollt op een telefoon prettiger. */
#company_id {
  min-height: 0;
  padding: 6px;
}

/* ---------- foto maken ---------- */

.foto-blok {
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface);
}

/* Het beeldvak krijgt de verhouding van de camerastroom mee uit foto.js. Daardoor is
   wat de monteur ziet precies wat er wordt vastgelegd. De maximumhoogte voorkomt dat
   een breedbeeldstroom op een groot scherm het formulier wegduwt. */
.foto-beeld {
  max-height: 56vh;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.foto-beeld video,
.foto-beeld canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.foto-status {
  margin: 12px 0;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- rechthoekige label: Digitaal Attractie Dossier ----------
   Drie kolommen: logo, QR-code, en het dossiernummer met de twee adressen. Witte
   grond met het transparante logo eroverheen, dunne kaderlijn in het donkerblauw van
   het logo, cyaan als scheidingslijn. Maten in millimeters, want dit gaat naar een
   printer; de blokmaten komen uit de hoogte van de label. */

.label-rechthoek {
  /* Het label is zwart-wit, in alles. Het logo is de zwarte variant en de QR-code is
     zwart op wit, dus een blauwe rand of een cyaan streepje ernaast valt uit de toon en
     maakt het drukwerk tweekleurig. Zwart is bovendien het meest leesbare dat er is en
     blijft dat na jaren buiten. */
  --lr-ink: #000000;
  box-sizing: border-box;
  background: #fff;
  color: var(--lr-ink);
  border: 0.4mm solid var(--lr-ink);
  border-radius: 2mm;
  display: flex;
  align-items: center;
  gap: 4mm;
  font-family: "Inter", system-ui, sans-serif;
  overflow: hidden;
}

/* Logo en QR houden hun vierkante maat; alleen de tekstkolom mag meegeven. */
.label-rechthoek .lr-logo,
.label-rechthoek .lr-qr {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.label-rechthoek .lr-qr svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Het logo past zich aan zijn vak aan in plaats van het te vullen: de label heeft
   overflow hidden, dus een logo dat buiten zijn vak valt wordt zonder melding
   afgekapt. Met max-* kan dat niet gebeuren, wat de verhouding van het bestand ook is. */
.label-rechthoek .lr-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.label-rechthoek .lr-tekst {
  flex: 1 1 auto;
  min-width: 0;
  border-left: 0.3mm solid var(--lr-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4mm;
}

.label-rechthoek .lr-tekst p { margin: 0; }

.label-rechthoek .lr-label {
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lr-ink);
}

.label-rechthoek .lr-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 1mm;
  white-space: nowrap;
}

.label-rechthoek .lr-urls {
  font-weight: 600;
  line-height: 1.35;
  color: var(--lr-ink);
  /* Vangnet: valt de berekende lettergrootte toch te ruim uit, dan breekt het adres af
     in plaats van onzichtbaar buiten de label te vallen. Een afgebroken adres is
     lelijk maar leesbaar; een afgekapt adres is onbruikbaar. */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Een ontbrekende bronverwijzing bij een controlepunt moet opvallen: wie deze checklist
   als standaard voorlegt aan een toezichthouder, moet bij elk punt kunnen zeggen waar
   het vandaan komt. */
.hint-let-op {
  color: #8a5a00;
  font-weight: 600;
}

/* ---------- wizard ----------
   Eén vraag per scherm, knoppen groot genoeg voor een handschoen op een natte trap.
   De monteur hoeft niet te typen, dus alles draait om aantikken. */
.wizard { max-width: 640px; margin: 0 auto; }

.wizard-voortgang {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wizard-vraag {
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.25;
  margin: 0 0 8px;
}

.keuze-rij {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-keuze {
  width: 100%;
  min-height: 64px;
  font-size: 18px;
  justify-content: flex-start;
  padding-left: 22px;
}

.btn-keuze.is-gekozen {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width: 620px) {
  .keuze-rij { flex-direction: row; flex-wrap: wrap; }
  .btn-keuze { flex: 1 1 180px; justify-content: center; padding-left: 0; }
}

/* Urgentie van een schade: 1 is hoog, 4 is laag. Kleur is een hulpje, geen boodschap op
   zichzelf — het cijfer staat er altijd bij, want kleur alleen is onleesbaar voor wie
   kleurenblind is en verdwijnt in een zwart-witte afdruk. */
.pill-urgentie-1 { border-color: #B3261E; color: #B3261E; }
.pill-urgentie-2 { border-color: #B26A00; color: #B26A00; }
.pill-urgentie-3 { border-color: #6B6B00; color: #6B6B00; }
.pill-urgentie-4 { border-color: var(--line); color: var(--ink-soft); }

.keuze-rij-urgentie .btn-keuze { font-variant-numeric: tabular-nums; }
.btn-urgentie-1 { background: #B3261E; }
.btn-urgentie-2 { background: #B26A00; }
.btn-urgentie-3 { background: #6B6B00; }
.btn-urgentie-4 { background: var(--brand); }

/* Verwijderknop onder een label in het batchoverzicht. Klein en onopvallend: het is
   een uitzondering, geen dagelijkse handeling. */
.qr-cel-actie { margin-top: 6px; }
.btn-sm { min-height: 32px; padding: 4px 12px; font-size: 13px; }