/* ------------------------------------------------------------------
   Vergunningkaart (feature 026, §11.6)
   Visuele kaart + afdruk-vriendelijke print-stylesheet. De kaart-kleur
   komt als CSS-variabele --card-accent uit de snapshot op het dossier.
   Bron: site.scss (geen actieve SCSS-compilatiestap; deze .dist wordt geladen).
   ------------------------------------------------------------------ */

.license-card-wrapper {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.license-card {
  --card-accent: #1f6feb;
  width: 100%;
  max-width: 34rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.license-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--card-accent);
  color: #fff;
}

.license-card-brand {
  display: flex;
  flex-direction: column;
}

.license-card-fed {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.license-card-fed-sub {
  font-size: 0.75rem;
  opacity: 0.9;
}

.license-card-season {
  font-size: 0.9rem;
  font-weight: 600;
}

.license-card-body {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
}

.license-card-photo {
  /* Staand 3:4 conform lastenboek 4.1.1 (beslissing 2026-09-12, issue #319). */
  flex: 0 0 6rem;
  width: 6rem;
  height: 8rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 2px solid var(--card-accent);
  background: #f1f1f4;
}

.license-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.license-card-photo-placeholder {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--card-accent);
  background: #f1f1f4;
}

.license-card-details {
  flex: 1 1 auto;
  min-width: 0;
}

.license-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.license-card-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}

.license-card-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8a8d93;
}

.license-card-value {
  font-size: 0.95rem;
  font-weight: 500;
}

.license-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 2px dashed rgba(0, 0, 0, 0.1);
}

.license-card-number {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--card-accent);
}

/* Afdrukken: enkel de kaart, geen shell/menu/knoppen (FR-008/SC-003). */
@media print {
  body * {
    visibility: hidden;
  }

  .license-card-wrapper,
  .license-card-wrapper * {
    visibility: visible;
  }

  .license-card-wrapper {
    position: absolute;
    inset: 0;
    padding: 0;
    display: block;
  }

  .license-card {
    box-shadow: none;
    margin: 0 auto;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .license-card-noprint {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   Imitatiebanner (feature 013, issue #231)
   De banner staat als sticky element bovenaan de body, maar Sneat pint
   het verticale menu en de navbar met position:fixed op de viewport-top.
   Zonder compensatie tekent de banner over logo, menu en navbar heen.
   Enkel tijdens imitatie (body.is-impersonating) zakken die vaste
   elementen met exact de bannerhoogte. De banner krijgt daarom een
   vaste hoogte, zodat de offset op elk breekpunt klopt. De Sneat-
   vendorstylesheets blijven ongemoeid; dit zijn overrides.
   ------------------------------------------------------------------ */

body.is-impersonating {
  --mv-impersonation-banner-block-size: 3rem;
}

.mv-impersonation-banner {
  position: sticky;
  inset-block-start: 0;
  z-index: 1090;
  block-size: var(--mv-impersonation-banner-block-size, 3rem);
}

/* Vaste navbar, inclusief de navbar-detached- en navbar-full-varianten. */
.layout-navbar-fixed body.is-impersonating .layout-navbar,
.layout-menu-fixed body.is-impersonating .layout-navbar-full .layout-navbar,
.layout-menu-fixed-offcanvas body.is-impersonating .layout-navbar-full .layout-navbar {
  inset-block-start: var(--mv-impersonation-banner-block-size);
}

/* Vast verticaal menu (met het logo): enkel de bovenkant zakt, de onderkant blijft op 0. */
.layout-menu-fixed body.is-impersonating .layout-menu,
.layout-menu-fixed-offcanvas body.is-impersonating .layout-menu {
  inset-block-start: var(--mv-impersonation-banner-block-size);
}

/* Sneat's vervagingsstrook bovenaan de pagina zakt mee met de navbar. */
.layout-navbar-fixed body.is-impersonating .layout-wrapper:not(.layout-horizontal) .layout-page::before {
  inset-block-start: var(--mv-impersonation-banner-block-size);
}

/* ------------------------------------------------------------------
   Lege validatiesamenvatting (issue #242)
   Bron: site.scss (geen actieve SCSS-compilatiestap; deze .dist wordt geladen).
   Een <div asp-validation-summary="All"> rendert ook zonder fouten: de
   tag helper laat de container staan zodat jQuery-unobtrusive er
   client-side meldingen in kan hangen. Met class="alert alert-danger"
   erop levert dat op een verse GET een lege rode balk op
   (Clubs/Contacts, aanvraag-wizard tab Algemeen). Unobtrusive wisselt
   bij echte fouten naar .validation-summary-errors, dus enkel de
   -valid-variant verbergen laat de alert precies verschijnen wanneer er
   iets te melden valt. ModelOnly-samenvattingen rendert de tag helper
   sowieso niet zonder fout; die zijn hier ongemoeid.
   ------------------------------------------------------------------ */

.validation-summary-valid {
  display: none;
}

/* ------------------------------------------------------------------
   Mijn documenten: tegels met zijpaneel (issue #246)
   Bron: site.scss (geen actieve SCSS-compilatiestap; deze .dist wordt geladen).
   Bootstrap en Sneat dekken bijna alles (card, badge, avatar, offcanvas,
   modal). Wat hier staat, kunnen ze niet: de gekleurde bovenrand van een
   tegel, het gestippelde lege kader, het paneel als blad onderaan op een
   telefoon, de bijsnijmodal boven het paneel, en de weergave zonder
   JavaScript. Geen vendorbestand gepatcht, dit zijn overrides.
   ------------------------------------------------------------------ */

/* De bovenrand kleurt de toestand; de badge en het icoon zeggen ze ook. */
.mv-doc-tile {
  overflow: hidden;
}

/* Het blok "In te dienen" (feature 086): een gekleurde bovenrand zoals de tegels, in de kleur van de
   aandachtsbalk zelf, zodat het lid het bovenaan meteen herkent. Rood zodra er iets ontbreekt,
   verlopen of afgekeurd is; oranje wanneer er enkel iets binnenkort verloopt. */
.mv-doc-todo {
  border-block-start: 4px solid var(--bs-danger);
}

.mv-doc-todo-warning {
  border-block-start-color: var(--bs-warning);
}

.mv-doc-tile-bar {
  block-size: 6px;
}

/* Miniatuur van een pasfoto: staand 3:4, zoals op de vergunningkaart. */
.mv-doc-thumb {
  inline-size: 72px;
  block-size: 96px;
  object-fit: cover;
}

/* Leeg kader wanneer er nog niets opgeladen is. */
.mv-doc-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 72px;
  block-size: 90px;
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

/* Kleurstaafje in de legende onder het raster. */
.mv-doc-legend {
  display: inline-block;
  inline-size: 14px;
  block-size: 6px;
  border-radius: 2px;
}

/* De bijsnijmodal opent bovenop een geopend zijpaneel. Let op: Sneat verhoogt de
   Bootstrap-standaarden in vendor/css/core.dist.css (modal 1090, modal-backdrop 1089,
   offcanvas 1090). Alles onder 1090 valt dus achter het paneel en zelfs achter de eigen
   backdrop van de modal, waardoor het scherm enkel dimt en de uitsnede onzichtbaar blijft. */
.mv-crop-modal {
  --bs-modal-zindex: 1095;
}

/* Voorbeeld van de bevestigde uitsnede in het paneel: iets groter dan de tegelminiatuur en
   staand 3:4, zodat het lid ziet wat er straks op de vergunningkaart komt. */
.mv-crop-preview {
  inline-size: 84px;
  block-size: 112px;
  object-fit: cover;
}

/* Smal scherm: het paneel schuift als blad van onderen omhoog, volle hoogte. De grens ligt
   op lg, want pas vanaf daar staat het raster op drie kolommen en is er plaats voor een
   paneel rechts ernaast. */
@media (max-width: 991.98px) {
  .mv-doc-panel.offcanvas-end {
    inset: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    transform: translateY(100%);
    border-inline-start: 0;
  }

  .mv-doc-panel.offcanvas-end.show,
  .mv-doc-panel.offcanvas-end.showing {
    transform: none;
  }
}

/* Zonder JavaScript onderdrukt Bootstrap de ankersprong niet: de browser springt
   naar het paneel en :target toont het als gewone sectie onder het raster. Met
   JavaScript blijft de URL ongewijzigd, dus dan komt deze regel nooit aan bod. */
.mv-doc-panel:target {
  position: static;
  visibility: visible;
  transform: none;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  margin-block-start: 1.5rem;
  border-width: var(--bs-offcanvas-border-width);
  border-style: solid;
  border-radius: var(--bs-border-radius);
}

/* ---------------------------------------------------------------------------------------
   Toelatingsvereisten: de alternatieven van een OF-groep (issue #256).
   De gedeelde inspring liet drie of vier opties met dezelfde gele badge als één blok lezen.
   Elk alternatief krijgt een eigen kader met een subtiele achtergrond en de titel is de
   blikvanger. Het kader gebruikt enkel nog de kaart Vereisten van het beoordelingsscherm
   (Approvals/Review; het "Optie N"-bovenschriftje verdween met feature 087, issue #396); de
   Vereisten-stap van de wizard (feature 082, resultaat eerst, hieronder) hergebruikt alleen
   de titelstijl.
   Bron: site.scss (geen actieve SCSS-compilatiestap; deze .dist wordt geladen).
   -------------------------------------------------------------------------------------- */
.mv-requirement-option {
  padding: 0.75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
}

/* De titel van het alternatief is waar het oog moet landen. */
.mv-requirement-option-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bs-heading-color, var(--bs-body-color));
}

/* ---------------------------------------------------------------------------------------
   Vereisten, vraag voor vraag (feature 084, na resultaat eerst uit feature 082).
   Eén banner zegt of de toelatingsvoorwaarde voldaan is en waarom; daaronder staan de vragen
   (RACB, automatisch gecontroleerd, bewijsstuk) genummerd in volgorde. De kleuren volgen de
   bg-label-mengregel van Sneat (paper-bg met 16% statuskleur), zodat ze in beide thema's lezen.
   -------------------------------------------------------------------------------------- */
.mv-requirement-result {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border-radius: var(--bs-border-radius);
}

.mv-requirement-result .icon-base {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.mv-requirement-result-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bs-heading-color, var(--bs-body-color));
}

.mv-requirement-result-met {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 84%, var(--bs-success));
}

.mv-requirement-result-met .icon-base {
  color: var(--bs-success);
}

.mv-requirement-result-pending {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 84%, var(--bs-warning));
}

.mv-requirement-result-pending .icon-base {
  color: var(--bs-warning);
}

.mv-requirement-result-notmet {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 84%, var(--bs-danger));
}

.mv-requirement-result-notmet .icon-base {
  color: var(--bs-danger);
}

/* Eén vraag: het nummer links, de inhoud rechts. */
.mv-requirement-question {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.mv-requirement-question + .mv-requirement-question {
  margin-top: 1.5rem;
}

/* Het nummer als bolletje; groen met een vinkje zodra de vraag iets opleverde. */
.mv-requirement-question-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-white);
  background-color: var(--bs-heading-color, var(--bs-body-color));
}

/* Donker thema: --bs-heading-color is dan bijna wit, dus wit op wit. De voorgrond volgt de
   achtergrond van de kaart, net als de andere donkere overrides hieronder. */
[data-bs-theme="dark"] .mv-requirement-question-number {
  color: var(--bs-paper-bg);
}

.mv-requirement-question-number.is-settled {
  background-color: var(--bs-success);
}

.mv-requirement-question-number .icon-base {
  font-size: 1.125rem;
}

.mv-requirement-question-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* De vraagtitel (ook als legend van de Ja/Nee-groep): op één lijn met het nummer. */
.mv-requirement-question-title {
  float: none;
  width: auto;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 2rem;
  color: var(--bs-heading-color, var(--bs-body-color));
}

.mv-requirement-fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* De automatische controles als feiten in één kader, een rij per alternatief. */
.mv-requirement-facts {
  padding: 0 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.mv-requirement-fact {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  padding: 0.75rem 0;
}

.mv-requirement-fact + .mv-requirement-fact {
  border-top: 1px solid var(--bs-border-color);
}

.mv-requirement-fact-icon {
  flex-shrink: 0;
  width: 1.25rem;
  font-size: 1.25rem;
  line-height: 1;
}

.mv-requirement-fact-title {
  font-weight: 500;
  color: var(--bs-heading-color, var(--bs-body-color));
}

/* Het geslaagde feit krijgt de groene tint van de banner. */
.mv-requirement-fact-met {
  margin: 0 -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 84%, var(--bs-success));
}

/* Keuzekaart voor het bewijsstuk: radio plus titel en één regel uitleg; de gekozen kaart
   kleurt in de primaire kleur. */
.mv-requirement-choice {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
}

.mv-requirement-choice:has(input:checked) {
  border-color: var(--bs-primary);
  background-color: color-mix(in sRGB, var(--bs-paper-bg) 92%, var(--bs-primary));
}

.mv-requirement-choice:has(input:focus-visible) {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Een flex-kind mag onder zijn inhoudsbreedte krimpen, zodat lange tekst afbreekt in plaats van
   de rij te verbreden. Bootstrap heeft hier geen hulpklasse voor. */
.mv-min-w-0 {
  min-width: 0;
}

.mv-requirement-choice-title {
  font-weight: 600;
  color: var(--bs-heading-color, var(--bs-body-color));
}

.mv-requirement-override summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
}

/* ---------------------------------------------------------------------------------------
   Kaart Vereisten op het beslisscherm, uitkomst eerst (feature 087, FR-027, issue #396).
   De banner hergebruikt mv-requirement-result; de vervulde optie staat erin zonder eigen kader.
   De open opties hergebruiken mv-requirement-option (compact onder elkaar); de rest staat achter
   een details/summary met een pijl die draait, zoals de rijen van de bewijsstrook. De manuele
   override is één regel. Enkel var(--bs-...), dus beide thema's.
   -------------------------------------------------------------------------------------- */
.mv-requirement-fulfilled {
  margin-top: 0.5rem;
}

.mv-requirement-option + .mv-requirement-option {
  margin-top: 0.5rem;
}

.mv-requirement-list-heading {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.mv-requirement-alt > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  list-style: none;
  cursor: pointer;
  color: var(--bs-body-color);
}

.mv-requirement-alt > summary::-webkit-details-marker {
  display: none;
}

.mv-requirement-alt > summary:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: var(--bs-border-radius);
}

.mv-requirement-alt-toggle {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bs-secondary-color);
  transition: transform 0.15s ease-in-out;
}

.mv-requirement-alt[open] .mv-requirement-alt-toggle {
  transform: rotate(180deg);
}

.mv-requirement-alt-body {
  padding-top: 0.5rem;
}

.mv-requirement-override-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--bs-border-color);
}

.mv-requirement-override-line .form-control {
  flex: 1 1 12rem;
  max-width: 24rem;
}

/* Stap Medisch (feature 085): de opmerking voor de arts of VAS staat achter dezelfde soort link. */
.mv-medical-remarks summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
}

/* ---------------------------------------------------------------------------------------
   Wizard-stepper: toestand per stap (issues #261 en #282, keuze van 10/9/2026: vinkje-badge).
   bs-steppers eigen "crossed"-klasse staat op stap-index en kleurt in een niet-lineaire stepper
   elke stap voor de actieve stap blauw, ook een lege. Hier: de volgorde zegt niets meer, het icoon
   blijft neutraal en herkenbaar, een voldane stap (server-side klasse step-complete uit
   WizardStepCompletion) krijgt een groene vink-badge op de hoek en een donker, vet label, de actieve
   stap een ring in de primaire kleur, en de stap Goedkeuring een oranje klok-badge zolang het dossier
   bij club, PAK of VAS ligt (klasse step-waiting). De klasse step-attention zet een oranje
   uitroepteken-badge wanneer de aanvrager zelf nog iets moet aanvullen (issue #292). Sinds issue #369 dragen ook de stappen
   Vereisten, Medisch en Vergunning deze klassen, plus step-failed, met dezelfde regels als de stappenbalk op het beslisscherm;
   step-todo blijft voorbehouden aan dat beslisscherm, want de wizard-stappen blijven klikbaar. Elke niet-actieve stap krijgt dezelfde neutrale
   kleur (--bs-body-color), ook in het donkere thema, waar de vendor-kleur van de trigger anders
   afwijkt van de crossed-kleur. De selectors staan bewust op
   .bs-stepper.wizard-icons .bs-stepper-header zodat ze zwaarder wegen dan de crossed-regels uit
   bs-stepper.dist.css, die na deze stylesheet geladen wordt.
   Bron: site.scss (geen actieve SCSS-compilatiestap; deze .dist wordt geladen).
   -------------------------------------------------------------------------------------- */
.bs-stepper.wizard-icons .bs-stepper-header .step:not(.active) .step-trigger .bs-stepper-label,
.bs-stepper.wizard-icons .bs-stepper-header .step:not(.active) .step-trigger .bs-stepper-icon .icon-base {
  color: var(--bs-body-color);
}

.bs-stepper.wizard-icons .bs-stepper-header .step:not(.active) .step-trigger .bs-stepper-icon svg {
  fill: var(--bs-body-color);
}

.bs-stepper.wizard-icons .bs-stepper-header .step .step-trigger .bs-stepper-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bs-stepper.wizard-icons .bs-stepper-header .step.active .step-trigger .bs-stepper-icon::before {
  content: "";
  position: absolute;
  inset: -0.4rem;
  border: 2px solid var(--bs-primary);
  border-radius: 50%;
  opacity: 0.6;
  pointer-events: none;
}

.bs-stepper.wizard-icons .bs-stepper-header .step.step-complete .step-trigger .bs-stepper-icon::after,
.bs-stepper.wizard-icons .bs-stepper-header .step.step-waiting .step-trigger .bs-stepper-icon::after,
.bs-stepper.wizard-icons .bs-stepper-header .step.step-attention .step-trigger .bs-stepper-icon::after,
.bs-stepper.wizard-icons .bs-stepper-header .step.step-failed .step-trigger .bs-stepper-icon::after,
.bs-stepper.wizard-icons .bs-stepper-header .step.step-todo .step-trigger .bs-stepper-icon::after {
  content: "";
  position: absolute;
  top: -0.55rem;
  inset-inline-end: -0.55rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--bs-paper-bg);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.bs-stepper.wizard-icons .bs-stepper-header .step.step-complete .step-trigger .bs-stepper-icon::after {
  background-color: var(--bs-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 0.7rem;
}

.bs-stepper.wizard-icons .bs-stepper-header .step.step-complete:not(.active) .step-trigger .bs-stepper-label {
  color: var(--bs-heading-color);
  font-weight: 600;
}

.bs-stepper.wizard-icons .bs-stepper-header .step.step-waiting .step-trigger .bs-stepper-icon::after {
  background-color: var(--bs-warning);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4.5l3 2'/%3E%3C/svg%3E");
  background-size: 0.75rem;
}

/* Issue #292: step-attention betekent "de aanvrager zelf moet nog iets doen" (bv. de pasfoto
   ontbreekt). Bewust een ander teken dan de klok van step-waiting, want die staat voor
   "ligt bij club, PAK of VAS" (issue #282). */
.bs-stepper.wizard-icons .bs-stepper-header .step.step-attention .step-trigger .bs-stepper-icon::after {
  background-color: var(--bs-warning);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 17.5v0.01'/%3E%3C/svg%3E");
  background-size: 0.75rem;
}

/* Issue #302: step-failed zet een rood kruis (niet voldaan, ongeschikt, afgekeurd door dit niveau,
   uitgeschakeld), sinds issue #369 ook op Vereisten en Medisch in de wizard van het lid;
   step-todo zet een grijze stip zonder glyph voor een ketenniveau dat nog niet aan
   zet was, met icoon en label in de secundaire tekstkleur. Zelfde badge-opbouw en dezelfde lange
   selectorketen als hierboven, want bs-stepper.dist.css laadt na deze stylesheet. */
.bs-stepper.wizard-icons .bs-stepper-header .step.step-failed .step-trigger .bs-stepper-icon::after {
  background-color: var(--bs-danger);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10'/%3E%3Cpath d='M17 7L7 17'/%3E%3C/svg%3E");
  background-size: 0.7rem;
}

.bs-stepper.wizard-icons .bs-stepper-header .step.step-todo .step-trigger .bs-stepper-icon::after {
  background-color: var(--bs-secondary);
}

.bs-stepper.wizard-icons .bs-stepper-header .step.step-todo:not(.active) .step-trigger .bs-stepper-label,
.bs-stepper.wizard-icons .bs-stepper-header .step.step-todo:not(.active) .step-trigger .bs-stepper-icon .icon-base {
  color: var(--bs-secondary-color);
}

/* De gevulde flow-pijl tussen de wizard-stappen (rechthoek plus pijlpunt, getekend met clip-path).
   Issue #302: verhuisd uit Wizard.cshtml, zodat de read-only balk op het beslisscherm dezelfde bron
   deelt. Het lichte thema behoudt zijn waarde; het donkere krijgt een tint die niet oplicht. */
.wizard-icons .bs-stepper-header .line {
  flex: 0 1 auto;
  min-width: 3rem;
  margin: 0 0.5rem;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.wizard-icons .wizard-step-arrow {
  display: inline-block;
  width: 2.75rem;
  height: 1.2rem;
  background-color: #c4c8cf;
  clip-path: polygon(0 32%, 68% 32%, 68% 0, 100% 50%, 68% 100%, 68% 68%, 0 68%);
}

[data-bs-theme="dark"] .wizard-icons .wizard-step-arrow {
  background-color: #4e4f6c;
}

/* De pijl die naar de actieve stap wijst krijgt de accentkleur, zodat de voortgang oplicht. */
.wizard-icons .line:has(+ .step.active) .wizard-step-arrow {
  background-color: var(--bs-primary, #ff9f43);
}

/* Issue #302: de read-only stappenbalk op het beslisscherm (klasse wizard-readonly naast
   wizard-icons). De stap-trigger is een div, geen knop: geen klik, geen hover-achtergrond, geen
   focus-kleur, geen dimming. De vendor zet cursor: pointer op elke .step-trigger die niet disabled
   is, dus hier expliciet terug naar default. Zonder inhoud onder de kop valt ook de onderrand weg. */
.bs-stepper.wizard-icons.wizard-readonly .bs-stepper-header {
  border-block-end: 0;
  /* Zes stappen, pijlen, scheiding en de pil "Nu bij u (namens club)" moeten in de kaart passen,
     ook op 1440px met open zijbalk. De vendor laat niets krimpen (space-around, gap 1rem, padding
     1.25rem rondom), dus hier minder tussenruimte, en wikkelen als vangnet voor smalle desktops. */
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bs-stepper.wizard-icons.wizard-readonly .bs-stepper-header .step .step-trigger {
  padding: 1.25rem 0.5rem;
}

.bs-stepper.wizard-icons.wizard-readonly .bs-stepper-header .line {
  margin: 0;
}

.bs-stepper.wizard-icons.wizard-readonly .wizard-chain-sep {
  margin: 0 0.5rem;
}

.bs-stepper.wizard-icons.wizard-readonly .bs-stepper-header .step .step-trigger,
.bs-stepper.wizard-icons.wizard-readonly .bs-stepper-header .step .step-trigger:hover,
.bs-stepper.wizard-icons.wizard-readonly .bs-stepper-header .step .step-trigger:focus {
  cursor: default;
  background-color: transparent;
  color: inherit;
  opacity: 1;
}

/* De scheiding tussen de inhoudsstappen en de ketenniveaus: een verticale lijn met het
   bovenschrift "Beslist door" erboven, links uitgelijnd. */
.wizard-icons .wizard-chain-sep {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  gap: 0.25rem;
  margin: 0 1rem;
}

.wizard-icons .wizard-chain-sep span {
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Body-kleur, niet de secundaire: die haalt op 11px geen leesbaar contrast (ongeveer 2,2:1). */
  color: var(--bs-body-color);
}

.wizard-icons .wizard-chain-sep::after {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  background-color: var(--bs-border-color);
}

/* De tekstpil "Nu bij u" naast het ketenniveau dat aan zet is. Sneat's bg-label-primary zet
   accentoranje tekst op een bleke oranje vlek (ongeveer 1,7:1) en staat hier pal naast de oranje
   klok. Zelfde vlek, maar een donkerder woord en een dunne rand, zoals de mockup. Gezet via de
   badge-variabelen van Sneat, dus zonder een vendorregel te overschrijven; de padding compenseert
   de rand, zoals de vendor dat bij zijn eigen outline-badge doet. */
.bs-stepper.wizard-icons.wizard-readonly .wizard-now-pill {
  --bs-badge-color: #8a5200;
  --bs-badge-bg-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-primary));
  --bs-badge-border-width: 1px;
  --bs-badge-border-color: var(--bs-primary);
  --bs-badge-padding-x: calc(0.77em - 0.0625rem);
  --bs-badge-padding-y: calc(0.4235em - 0.0625rem);
}

[data-bs-theme="dark"] .bs-stepper.wizard-icons.wizard-readonly .wizard-now-pill {
  --bs-badge-color: #ffc46b;
}

/* Onder 992px zet de vendor de stepper-kop in kolomrichting. De read-only balk wordt dan een rij
   die wikkelt: teken naast label per stap, zonder pijlen en zonder scheidingslijn; het bovenschrift
   "Beslist door" begint een nieuwe rij. Geen aparte telefoon-markup. */
@media (max-width: 991.98px) {
  .bs-stepper.wizard-icons.wizard-readonly .bs-stepper-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .bs-stepper.wizard-icons.wizard-readonly .bs-stepper-header .line,
  .bs-stepper.wizard-icons.wizard-readonly .wizard-chain-sep::after {
    display: none;
  }

  .bs-stepper.wizard-icons.wizard-readonly .wizard-chain-sep {
    flex-basis: 100%;
    margin: 0.25rem 0 0;
  }

  .bs-stepper.wizard-icons.wizard-readonly .bs-stepper-header .step .step-trigger {
    flex-direction: row;
    padding: 0.5rem 0.75rem;
  }
}

/* Issue #312: een rij die naar het dossier verwijst, gedraagt zich ook zo. De klik zelf komt uit
   js/clickable-row.js; dit is enkel de aanwijzing dat er iets te openen valt. De eerste kolom
   draagt een gewone link, dus zonder JavaScript blijft de rij bruikbaar. */
tr.row-linked {
  cursor: pointer;
}

tr.row-linked:hover {
  background-color: var(--bs-tertiary-bg);
}

/* Issue #375: het GSM-veld met intl-tel-input volgt de stijl van de andere velden. Het veld zelf
   blijft een form-control (rand, focusring, thema); deze regels stemmen de landkeuze en de
   keuzelijst van de bibliotheek af op de Sneat-variabelen, zodat licht en donker thema meevolgen. */
.iti {
  width: 100%;
  --iti-border-color: var(--bs-border-color);
  --iti-border-width: var(--bs-border-width);
  --iti-country-selector-bg: var(--bs-paper-bg);
  --iti-hover-color: rgba(var(--bs-base-color-rgb), 0.06);
  --iti-icon-color: var(--bs-heading-color);
  --iti-spacer-horizontal: 0.9375rem;
}

/* Sneat verdikt de rand van een veld met focus tot 2px; de landknop erin volgt. */
.iti:has(.iti__tel-input:focus) {
  --iti-border-width: 2px;
}

/* Het voorvoegsel "form" geeft deze regels voorrang op de gelijknamige regels van de bibliotheek,
   die de layout ná site.dist.css laadt (VendorStyles). */
form .iti__selected-country {
  color: var(--bs-heading-color);
}

form .iti__selected-country-primary {
  border-radius: calc(var(--bs-border-radius) - var(--bs-border-width)) 0 0 calc(var(--bs-border-radius) - var(--bs-border-width));
}

/* De keuzelijst als een Sneat-dropdown: geen rand, dezelfde schaduw, hoeken en kleuren. */
form .iti__country-selector {
  border-radius: var(--bs-border-radius);
  color: var(--bs-heading-color);
  font-size: 0.9375rem;
}

form .iti--inline-country-selector .iti__country-selector {
  border: 0;
  box-shadow: var(--bs-box-shadow-lg);
}

form .iti__search-input {
  padding-top: 0.543rem;
  padding-bottom: 0.543rem;
  background-color: transparent;
  color: var(--bs-heading-color);
  font-size: 0.9375rem;
  outline: 0;
}

form .iti__search-input::placeholder {
  color: var(--bs-secondary-color);
}

form .iti__country {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

form .iti__country.iti__highlight {
  color: var(--bs-heading-color);
}

form .iti__no-results {
  color: var(--bs-secondary-color);
}

/* ------------------------------------------------------------------
   Beslisscherm: dossier met bewijsstrook (feature 087)
   Twee kolommen op xl en breder; de rechterkolom (bewijsstrook en
   beslissing) blijft onder de vaste navbar staan (74px) en schuift mee
   met de imitatiebanner. Miniaturen en tegels van bewijsstukken, de
   uitklaprijen (details/summary), het feitenrooster van het blok
   Aanvrager, de rijen van de kaart Medische geschiktheid en het
   viewer-modaal. Enkel var(--bs-...), zodat licht en donker meevolgen;
   geen vendorbestand gepatcht.
   Bron: site.scss (geen actieve SCSS-compilatiestap; deze .dist wordt geladen).
   ------------------------------------------------------------------ */

@media (min-width: 1200px) {
  .mv-evidence-panel {
    position: sticky;
    inset-block-start: calc(74px + 1rem);
    max-block-size: calc(100vh - 74px - 2rem);
    overflow: auto;
    scrollbar-width: thin;
  }

  body.is-impersonating .mv-evidence-panel {
    inset-block-start: calc(74px + 1rem + var(--mv-impersonation-banner-block-size, 3rem));
    max-block-size: calc(100vh - 74px - 2rem - var(--mv-impersonation-banner-block-size, 3rem));
  }
}

/* Feit met een klein kapitaalopschrift en de waarde eronder (blok Aanvrager en Aanvraag). */
.mv-fact {
  min-inline-size: 0;
}

.mv-fact-label {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color);
}

.mv-fact-value {
  color: var(--bs-heading-color, var(--bs-body-color));
  overflow-wrap: anywhere;
}

/* De pasfoto in het blok Aanvrager: staand 3:4; het lege kader draagt de initialen. De kolom is
   breder dan de foto zodat de statuschip eronder wikkelt in plaats van over de feiten te lopen. */
.mv-dossier-photo-slot {
  inline-size: 128px;
}

.mv-dossier-photo-slot .badge {
  white-space: normal;
}

/* De tekst naast een miniatuur of tegel: krimpt mee en breekt, valt niet eronder. */
.mv-evidence-text {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.mv-dossier-photo-empty {
  inline-size: 96px;
  block-size: 128px;
}

/* Miniaturen: het bestand zelf, geschaald met CSS. Staand voor foto en pdf-tegel, liggend voor
   kaarten (rijbewijs, RACB), groot in een opengeklapte rij. */
.mv-evidence-thumb-link {
  display: inline-block;
  line-height: 0;
  border-radius: var(--bs-border-radius);
  flex-shrink: 0;
}

.mv-evidence-thumb-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.mv-evidence-thumb,
.mv-evidence-tile {
  inline-size: 48px;
  block-size: 64px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
  vertical-align: middle;
}

.mv-evidence-thumb {
  display: block;
  object-fit: cover;
}

.mv-evidence-thumb--wide,
.mv-evidence-tile--wide {
  inline-size: 72px;
  block-size: 48px;
}

.mv-evidence-thumb--photo,
.mv-evidence-tile--photo {
  inline-size: 96px;
  block-size: 128px;
}

.mv-evidence-thumb--large,
.mv-evidence-tile--large {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 320px;
}

.mv-evidence-thumb--large {
  object-fit: contain;
  background-color: var(--bs-tertiary-bg);
}

/* Generieke tegel voor een pdf, een medisch stuk, een ontbrekend of afgeschermd bestand. */
.mv-evidence-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  border-style: dashed;
  color: var(--bs-secondary-color);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
}

.mv-evidence-tile .icon-base {
  font-size: 1.25rem;
}

.mv-evidence-tile--large {
  min-block-size: 160px;
  font-size: 0.8125rem;
}

.mv-evidence-tile--large .icon-base {
  font-size: 2.5rem;
}

/* De uitklaprij: summary zonder marker, de pijl draait bij open. */
.mv-evidence-group-title {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.mv-evidence-row + .mv-evidence-row {
  border-block-start: 1px solid var(--bs-border-color);
}

.mv-evidence-row > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0;
  list-style: none;
  cursor: pointer;
}

.mv-evidence-row > summary::-webkit-details-marker {
  display: none;
}

.mv-evidence-row > summary:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: var(--bs-border-radius);
}

.mv-evidence-row-toggle {
  margin-inline-start: auto;
  color: var(--bs-secondary-color);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.15s ease-in-out;
}

.mv-evidence-row[open] .mv-evidence-row-toggle {
  transform: rotate(180deg);
}

.mv-evidence-row-body {
  padding: 0 0 0.75rem;
}

/* Kaart Medische geschiktheid: een vast label links (220px) en de inhoud rechts; onder elkaar op een telefoon. */
.mv-medical-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
}

.mv-medical-row + .mv-medical-row {
  border-block-start: 1px solid var(--bs-border-color);
}

.mv-medical-label {
  font-weight: 600;
  color: var(--bs-heading-color, var(--bs-body-color));
}

@media (max-width: 767.98px) {
  .mv-medical-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* De viewer: de kop houdt rechts ruimte vrij voor de zwevende sluitknop van Sneat (absoluut in de
   hoek, 23px naar buiten geschoven), zodat de knoppen Nieuw tabblad en Downloaden er niet onder vallen. */
.mv-evidence-viewer-header {
  padding-inline-end: 3.5rem;
}

/* De viewer: donkere achtergrond rond het bestand, vorige en volgende aan de zijkanten. */
.mv-evidence-preview {
  display: flex;
  align-items: center;
  min-block-size: 40vh;
  background-color: var(--bs-dark);
}

[data-bs-theme="dark"] .mv-evidence-preview {
  background-color: var(--bs-body-bg);
}

.mv-evidence-stage {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  padding: 0.5rem 0;
}

.mv-evidence-stage img {
  max-inline-size: 100%;
  max-block-size: 70vh;
  object-fit: contain;
}

.mv-evidence-stage iframe {
  inline-size: 100%;
  block-size: 70vh;
  border: 0;
  background-color: var(--bs-paper-bg);
}

.mv-evidence-nav {
  flex: 0 0 auto;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: transparent;
  color: var(--bs-white);
  font-size: 2rem;
  line-height: 1;
}

[data-bs-theme="dark"] .mv-evidence-nav {
  color: var(--bs-heading-color);
}

.mv-evidence-nav:hover:not(:disabled) {
  color: var(--bs-primary);
}

.mv-evidence-nav:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

.mv-evidence-nav:disabled {
  opacity: 0.35;
}

@media (max-width: 575.98px) {
  .mv-evidence-stage img,
  .mv-evidence-stage iframe {
    max-block-size: 60vh;
    block-size: 60vh;
  }

  .mv-evidence-stage img {
    block-size: auto;
  }
}