/* ============================================================================
 * wf-2026-system.css  —  Webfix systeembrede stijl (2026)
 * ----------------------------------------------------------------------------
 * DE leidende, centrale stylesheet voor het hele dashboard + admin. Alles wat
 * we systeembreed nieuw ontwerpen (via Claude Design) komt HIER terecht en
 * wordt 1:1 getoond op de levende stijlgids: /Admin/Stijlgids.
 *
 * ZELFSTANDIG (belangrijk): dit bestand staat LOS van de oude styling. Het
 * definieert zijn eigen tokens, knop-kleuren en knop-CSS en leunt NERGENS op
 * webfix.css. Je kunt de oude CSS-bestanden later verwijderen en alles wat hier
 * staat blijft exact werken. Ontbreekt er daarna iets? Dan migreren we dat stuk
 * hierheen — dit bestand is de bestemming.
 *
 * VOORRANG: laadt ALTIJD ná webfix.css (zie _Layout.cshtml + _DashboardLayout.cshtml)
 * en WINT dus in de cascade. Tijdens de overgang bestaan oud en nieuw naast
 * elkaar met dezelfde waarden → geen visueel verschil; daarna blijft dít over.
 *
 * KNOPPEN — twee systemen (nooit zelf namaken):
 *   • AI-actie      → .wf-flow-btn / <partial _WfFlowButton>  (levende gradient + "Flows™"-woordmerk)
 *   • Niet-AI-actie → .wf-btn / <partial _WfButton>        (chip: wit rondje + icoon + pijl)
 *                     of een gewone .btn btn-<rol> (zelfde kleuren, geen chip)
 * Het chip-uiterlijk (wit rondje + icoon) ontstaat door de MARKUP (.wf-btn-chip);
 * een gewone <button class="btn"> wordt dus GEEN chip zonder markup-wijziging.
 * "Buttons conform stijlgids" = de markup omzetten naar _WfButton / _WfFlowButton.
 *
 * Flows houdt bewust een eigen laag (flows.css / demoflow.css).
 * ========================================================================== */

/* ── Design-tokens (zelfstandig) ───────────────────────────────────────────── */
:root {
  --wf-green:        #b0d136;
  --wf-green-dark:   #8aaa1e;
  --wf-green-subtle: #f3fad7;
  --wf-green-text:   #5a6e0e;
  --wf-pink:         #da176c;
  --wf-pink-dark:    #b8115a;
  --wf-blue:         #32bcee;
  /* Standaard tekstuele linkkleur (2026-09-07, overgenomen uit het vernieuwde inlogscherm
     auth-login.css) — géén --wf-blue (dat is de bestaande, feller-cyaan accentkleur), dit is
     specifiek de kleur voor een kaal <a>-linkje in lopende tekst/tabellen. Hover = --wf-pink,
     zelfde kleur die overal al de hover-/actiekleur is. */
  --wf-link:         #1A9BD1;
  --wf-title:        #a12359;
  --wf-bg:           #f5f6fa;
  --wf-surface:      #ffffff;
  --wf-border:       #e2e8f0;
  --wf-border-lt:    #f1f5f9;
  --wf-muted:        #94a3b8;
  /* Hintkleur in een leeg invoerveld -- lichter dan de tekst die de klant zelf typt. */
  --wf-placeholder:  #9aa2b1;
  --wf-text:         #1e293b;
  --wf-text-soft:    #475569;
  --wf-hover-bg:     #f8fafc;

  /* Bootstrap merk-rollen (kleuren = Webfix). */
  --bs-primary:             #b0d136 !important;
  --bs-primary-rgb:         176, 209, 54 !important;
  --bs-primary-bg-subtle:   rgba(176, 209, 54, 0.12) !important;
  --bs-secondary:           #da176c !important;
  --bs-secondary-rgb:       218, 23, 108 !important;
  --bs-secondary-bg-subtle: rgba(218, 23, 108, 0.10) !important;
  --bs-info:                #32bcee !important;
  --bs-info-rgb:            50, 188, 238 !important;
  --bs-info-bg-subtle:      rgba(50, 188, 238, 0.10) !important;
}

/* Verwijder-/danger is echt rood (#d81f25), ook als globale rol. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-danger: #d81f25;
  --bs-danger-rgb: 216, 31, 37;
}

/* Dark mode: neutrale tokens klappen om, merk-accenten blijven. */
[data-bs-theme="dark"] {
  --wf-bg:           #1b2333;
  --wf-surface:      #2a3447;
  --wf-border:       #3a4658;
  --wf-border-lt:    #313c4f;
  --wf-muted:        #8190a8;
  --wf-placeholder:  #8190a8;
  --wf-text:         #e6eaf0;
  --wf-text-soft:    #9aa7bd;
  --wf-hover-bg:     rgba(255, 255, 255, 0.05);
  --wf-green-subtle: rgba(176, 209, 54, 0.16);
  --wf-green-text:   #b6dc63;
  --wf-title:        #f1a9cb;
}

/* ── Nog onderhanden ─────────────────────────────────────────────────────────
 * Voor een scherm dat er al staat maar nog niet werkt. Er komt een laag overheen en niets is aan
 * te klikken, met in het midden schuin een bordje dat zegt waar de klant aan toe is. Beter dan
 * halve knoppen die niets doen -- en beter dan het scherm weghalen, want dan denkt hij dat het er
 * nooit komt.
 *
 * Gebruik:  <div class="wf-onderhanden" data-melding="Under construction" aria-hidden="true"> … </div>
 * De tekst komt uit data-melding, zodat hij door de vertaallaag kan.
 *
 * Geen blur: die maakte het scherm onleesbaar terwijl juist te zien mag zijn wát er komt. Een
 * lichte laag dempt genoeg. pointer-events staat uit op de inhoud én op de laag, zodat er niets te
 * klikken valt en de laag ook geen klikken afvangt die verderop nog wel moeten werken. */
.wf-onderhanden { position: relative; }
.wf-onderhanden > * { pointer-events: none; user-select: none; }
.wf-onderhanden::before {
  content: ""; position: absolute; inset: -6px; z-index: 2; pointer-events: none;
  border-radius: 18px;
  background: rgba(247, 248, 252, .62);
}
:root[data-bs-theme="dark"] .wf-onderhanden::before { background: rgba(20, 26, 38, .62); }

/* Het bordje: midden in het vlak, licht gedraaid. Grijs en rustig -- het is een mededeling, geen
   waarschuwing, en een felle band trekt de aandacht weg van wat eronder te zien is. */
.wf-onderhanden::after {
  content: attr(data-melding);
  position: absolute; z-index: 3; pointer-events: none;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  padding: 26px 64px;
  border: 1px solid rgba(1, 16, 61, .12);
  border-radius: 14px;
  background: #fff;
  color: var(--wf-text-soft, #475569);
  font-family: Quicksand, var(--font-body, inherit), sans-serif;
  font-weight: 700; font-size: clamp(.95rem, 2.4vw, 1.35rem);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(1, 16, 61, .10);
}
:root[data-bs-theme="dark"] .wf-onderhanden::after {
  background: #232c3d; border-color: rgba(255, 255, 255, .14); color: #c7d0dd;
}
@media (max-width: 767.98px) {
  .wf-onderhanden::after { padding: 18px 30px; letter-spacing: .06em; }
}

/* ── Lucht onderaan elke pagina ──────────────────────────────────────────────
 * Zonder dit plakt de laatste kaart tegen de onderkant van het scherm. Op een iPhone is dat meer
 * dan lelijk: Safari schuift daar zijn eigen balk overheen, en dan opent je eerste tik die balk in
 * plaats van de knop eronder -- je moet twee keer klikken.
 *
 * .page-wrapper omsluit de pagina-inhoud in ALLEBEI de schillen (_Layout voor /admin en
 * _DashboardLayout voor de klant), dus dit geldt in één keer overal. Het thema zet daar alleen
 * min-height en margin-left; niemand anders raakt de onderkant aan, dus er telt niets dubbel.
 *
 * env(safe-area-inset-bottom) komt erbij voor de streep onderaan een iPhone zonder thuisknop; op
 * elk ander apparaat is die nul en blijft het gewoon 50px. */
.page-wrapper { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }

/* ── Kale tekstuele link ──────────────────────────────────────────────────────
 * Systeembrede standaard voor een los <a>-linkje (lopende tekst, tabellen, lijstjes) — overname
 * uit het vernieuwde inlogscherm (auth-login.css). Wint van webfix.css's oudere grijze a{}/a:hover{}
 * (dit bestand laadt daarna).
 *
 * Staat in :where() en heeft dus specificiteit NUL. Dat is wezenlijk: een <a> die als KNOP is
 * opgemaakt (.wflg-btn, .wf-flow-btn, .btn, …) zet zijn kleur meestal alleen in zijn grondregel en
 * niet nog eens op :hover. Een gewone `a:hover` verslaat zo'n enkele klasse en kleurde het label
 * van die knoppen dan roze bij hover. Met :where() wint élke component altijd van deze regel — een
 * knoplabel blijft dus staan — en houdt alleen een <a> die niemand anders kleurt de linkkleur over.
 * Zie /Admin/Stijlgids, sectie "Links". */
:where(a)       { color: var(--wf-link, #1A9BD1); }
:where(a:hover) { color: var(--wf-pink, #da176c); }

/* ── Geen automatische zoom op de iPhone ─────────────────────────────────────
 * Safari op iOS zoomt de pagina in zodra je een veld aantikt waarvan de letters
 * kleiner zijn dan 16px. Bedoeld als leeshulp, maar bij ons schoot het scherm
 * daardoor bij élk veld scheef: onze velden staan op 11,5 tot 15px. Vanaf 16px
 * laat iOS het met rust. Android/Chrome doet dit sowieso niet.
 *
 * Alleen op een aanraakscherm (pointer: coarse), dus het ontwerp op de desktop
 * blijft zoals het is. Knoppen en vinkjes vallen erbuiten: daar typ je niet in,
 * dus die zoomen niet, en hun tekstgrootte hoort bij het ontwerp.
 *
 * De viewport-meta met user-scalable=no zou het ook stilzetten, maar die haalt
 * het knijp-zoomen wég voor wie slecht ziet — en Safari negeert hem sinds iOS 10
 * grotendeels toch. Dit is de manier die Apple zelf voorschrijft. */
@media (pointer: coarse) {
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea { font-size: 16px !important; }
}

/* ── Standaardknoppen: Bootstrap-rollen in Webfix-kleuren ────────────────────
 * Elke gewone .btn-<rol> krijgt automatisch de merk-kleur; views passen niets aan.
 * (Voor AI-acties: NOOIT deze, maar .wf-flow-btn / _WfFlowButton.) */
.btn-primary {                        /* hoofdactie — magenta */
  --bs-btn-bg: #a12359; --bs-btn-border-color: #a12359; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8a1d4d; --bs-btn-hover-border-color: #8a1d4d; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #7a1a43; --bs-btn-active-border-color: #7a1a43; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #a12359; --bs-btn-disabled-border-color: #a12359; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 161, 35, 89;
}
.btn-outline-primary {
  --bs-btn-color: #a12359; --bs-btn-border-color: #a12359;
  --bs-btn-hover-bg: #a12359; --bs-btn-hover-border-color: #a12359;
  --bs-btn-active-bg: #a12359; --bs-btn-active-border-color: #a12359;
  --bs-btn-disabled-color: #a12359; --bs-btn-disabled-border-color: #a12359;
  --bs-btn-focus-shadow-rgb: 161, 35, 89;
}
.btn-secondary {                      /* tweede actie — roze */
  --bs-btn-bg: #da176c; --bs-btn-border-color: #da176c; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #b8115a; --bs-btn-hover-border-color: #b8115a; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #a30f50; --bs-btn-active-border-color: #a30f50; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #da176c; --bs-btn-disabled-border-color: #da176c; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 218, 23, 108;
}
/* Waarom deze twee er nóg een keer staan, met een zwaardere selector:
 *
 * Het Spike-thema in `styles.css` zet .btn-primary en .btn-secondary óók per kleurthema, en doet dat met
 * `[data-bs-theme=light][data-color-theme=Blue_Theme]:root .btn-primary`. Die selector weegt zwaarder dan
 * onze losse `.btn-primary`, dus won het blauw van Spike — ongeacht de laadvolgorde. Het gevolg was dat
 * élke hoofdknop in het hele platform blauw was in plaats van magenta, terwijl de stijlgids en drie
 * CSS-bestanden magenta voorschreven.
 *
 * Deze regels hebben hetzelfde gewicht en staan later in de cascade, dus ze winnen — en ze zijn niet aan
 * één thema gebonden, zodat het blijft kloppen als de thema-attributen ooit veranderen. De andere rollen
 * (success/info/warning/danger) scoopt Spike niet per thema; die hebben dit dus niet nodig. */
[data-bs-theme][data-color-theme]:root .btn-primary {
  --bs-btn-bg: #a12359; --bs-btn-border-color: #a12359; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8a1d4d; --bs-btn-hover-border-color: #8a1d4d; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #7a1a43; --bs-btn-active-border-color: #7a1a43; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #a12359; --bs-btn-disabled-border-color: #a12359; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 161, 35, 89;
}
[data-bs-theme][data-color-theme]:root .btn-secondary {
  --bs-btn-bg: #da176c; --bs-btn-border-color: #da176c; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #b8115a; --bs-btn-hover-border-color: #b8115a; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #a30f50; --bs-btn-active-border-color: #a30f50; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #da176c; --bs-btn-disabled-border-color: #da176c; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 218, 23, 108;
}

.btn-success {                        /* gelukt — groen */
  --bs-btn-bg: #b0d136; --bs-btn-border-color: #b0d136; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #9cbc2d; --bs-btn-hover-border-color: #9cbc2d; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #8ba828; --bs-btn-active-border-color: #8ba828; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #b0d136; --bs-btn-disabled-border-color: #b0d136; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 176, 209, 54;
}
.btn-info {                           /* informatie — blauw */
  --bs-btn-bg: #32bcee; --bs-btn-border-color: #32bcee; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #26a7d6; --bs-btn-hover-border-color: #26a7d6; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1f97c4; --bs-btn-active-border-color: #1f97c4; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #32bcee; --bs-btn-disabled-border-color: #32bcee; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 50, 188, 238;
}
.btn-warning {                        /* let op — amber */
  --bs-btn-bg: #dc9e2f; --bs-btn-border-color: #dc9e2f; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #c78a20; --bs-btn-hover-border-color: #c78a20; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #b07a1c; --bs-btn-active-border-color: #b07a1c; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #dc9e2f; --bs-btn-disabled-border-color: #dc9e2f; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 220, 158, 47;
}
.btn-danger {                         /* verwijderen — rood */
  --bs-btn-bg: #d81f25; --bs-btn-border-color: #d81f25; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #be1a1f; --bs-btn-hover-border-color: #be1a1f; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #a5161b; --bs-btn-active-border-color: #a5161b; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #d81f25; --bs-btn-disabled-border-color: #d81f25; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 216, 31, 37;
}
.btn-outline-danger {
  --bs-btn-color: #d81f25; --bs-btn-border-color: #d81f25;
  --bs-btn-hover-bg: #d81f25; --bs-btn-hover-border-color: #d81f25;
  --bs-btn-active-bg: #d81f25; --bs-btn-active-border-color: #d81f25;
  --bs-btn-disabled-color: #d81f25; --bs-btn-disabled-border-color: #d81f25;
  --bs-btn-focus-shadow-rgb: 216, 31, 37;
}
.btn-light {                          /* subtiel vlak */
  --bs-btn-bg: #f0f0f7; --bs-btn-border-color: rgba(1, 16, 61, .10); --bs-btn-color: #000229;
  --bs-btn-hover-bg: #e4e4ee; --bs-btn-hover-border-color: rgba(1, 16, 61, .12); --bs-btn-hover-color: #000229;
  --bs-btn-active-bg: #d9d9e6; --bs-btn-active-border-color: rgba(1, 16, 61, .14); --bs-btn-active-color: #000229;
  --bs-btn-disabled-bg: #f0f0f7; --bs-btn-disabled-border-color: rgba(1, 16, 61, .10); --bs-btn-disabled-color: #000229;
  --bs-btn-focus-shadow-rgb: 1, 16, 61;
}
.btn-dark {                           /* donker vlak */
  --bs-btn-bg: #000229; --bs-btn-border-color: #000229; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #0e1130; --bs-btn-hover-border-color: #0e1130; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #191d40; --bs-btn-active-border-color: #191d40; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #000229; --bs-btn-disabled-border-color: #000229; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 0, 2, 41;
}

/* ══ Voortgangsbalk bij een sync (_WfSyncModal + wf-sync.js) ═══════════════════
 * De balk is een SCHATTING — de server werkt de hele ronde in één verzoek af en
 * meldt pas iets als hij klaar is. De streepjes-animatie zegt "er gebeurt iets";
 * de breedte zegt "ongeveer zo ver". Zodra het antwoord binnen is stopt de
 * animatie en staat de balk stil op 100%: dan is het geen schatting meer. */
.wf-sync-spoor {
  height: 10px; border-radius: 9999px; background: #eceef3; overflow: hidden;
}
.wf-sync-balk {
  height: 100%; border-radius: 9999px; width: 0;
  background: linear-gradient(90deg, #b0d136, #32bcee);
  transition: width .18s linear;
}
.wf-sync-balk.-bezig {
  background-image:
    linear-gradient(90deg, #b0d136, #32bcee),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .30) 0 10px, transparent 10px 20px);
  background-size: 100% 100%, 40px 40px;
  animation: wf-sync-streep .8s linear infinite;
}
@keyframes wf-sync-streep { to { background-position: 0 0, 40px 0; } }

/* Klaar, maar niet gelukt. De balk staat vol - het werk is af - en de kleur zegt hoe het afliep. Groen
   laten zou "gelukt" suggereren terwijl er niets geboekt is. */
.wf-sync-balk.-fout { background: linear-gradient(90deg, #e85d62, #d81f25); }

/* Wie beweging heeft uitgezet krijgt een stilstaande balk. De breedte vertelt het verhaal ook. */
@media (prefers-reduced-motion: reduce) {
  .wf-sync-balk.-bezig { animation: none; }
}

/* ══ Betaalgedrag: het oordeel in vijf kleuren ═════════════════════════════════
 * Van goud tot paars, met het label ernaast. Goud krijgt een ster in plaats van
 * een stip: "de allerbeste" is een andere soort mededeling dan een stand op een
 * schaal, en dat mag je zien zonder de kleuren te kennen.
 *   <span class="wf-score -goud"><i class="bi bi-star-fill"></i>Uitstekend</span> */
.wf-score {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 26px; padding: 0 12px; border-radius: 9999px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.wf-score .bi { font-size: 9px; }
.wf-score.-goud     { background: #fdf4dc; color: #8a6410; border-color: #f0d79a; }
.wf-score.-goud .bi { font-size: 11px; color: #d9a520; }
.wf-score.-groen    { background: #eef7dc; color: #5b7317; border-color: #cfe49a; }
.wf-score.-oranje   { background: #fdf1de; color: #8a5a12; border-color: #f2d3a0; }
.wf-score.-rood     { background: #fdeaea; color: #a8181d; border-color: #f2b6b8; }
/* Paars: één stap voorbij rood. Rood is "traag", paars is "hier moet iets gebeuren". */
.wf-score.-paars    { background: #f2ecfb; color: #5b2ea6; border-color: #d6c4f0; }
.wf-score.-onbekend { background: #eef0f4; color: #6b7280; border-color: #dfe3ea; }

:root[data-bs-theme="dark"] .wf-score.-goud     { background: rgba(217, 165, 32, .18); color: #f0cd72; border-color: rgba(217, 165, 32, .35); }
:root[data-bs-theme="dark"] .wf-score.-groen    { background: rgba(176, 209, 54, .16); color: #cbe479; border-color: rgba(176, 209, 54, .32); }
:root[data-bs-theme="dark"] .wf-score.-oranje   { background: rgba(220, 158, 47, .16); color: #efc172; border-color: rgba(220, 158, 47, .32); }
:root[data-bs-theme="dark"] .wf-score.-rood     { background: rgba(216, 31, 37, .18); color: #f0a9ab; border-color: rgba(216, 31, 37, .34); }
:root[data-bs-theme="dark"] .wf-score.-paars    { background: rgba(123, 62, 214, .20); color: #c9b0f2; border-color: rgba(123, 62, 214, .38); }
:root[data-bs-theme="dark"] .wf-score.-onbekend { background: rgba(255, 255, 255, .07); color: #93a1b3; border-color: rgba(255, 255, 255, .12); }

/* Het kader bovenaan de betaalhistorie: hetzelfde oordeel, maar dan met de toelichting erbij. De
   linkerrand draagt de kleur, zodat het blok in één oogopslag leest zonder dat het schreeuwt. */
.wf-scorekaart {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(1, 16, 61, .07);
  border-left-width: 4px; background: rgba(1, 16, 61, .015);
}
.wf-scorekaart.-goud   { border-left-color: #d9a520; }
.wf-scorekaart.-groen  { border-left-color: #b0d136; }
.wf-scorekaart.-oranje { border-left-color: #dc9e2f; }
.wf-scorekaart.-rood   { border-left-color: #d81f25; }
.wf-scorekaart.-paars  { border-left-color: #7b3ed6; }
.wf-scorekaart.-onbekend { border-left-color: #b9c0cc; }

/* Een cijferbadge die om aandacht vraagt: nieuwe post in de factuurmailbox. Pulseert rustig - genoeg
   om op te vallen in een balk vol tabbladen, niet zo dat je ernaar moet blijven kijken. */
.wf-stats-chip.-nieuw {
  background: #d81f25; color: #fff;
  animation: wf-chip-pulse 1.6s ease-in-out infinite;
}
@keyframes wf-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 31, 37, .45); }
  50%      { box-shadow: 0 0 0 5px rgba(216, 31, 37, 0); }
}
/* Wie beweging heeft uitgezet krijgt alleen de kleur; die valt op zichzelf al genoeg op. */
@media (prefers-reduced-motion: reduce) {
  .wf-stats-chip.-nieuw { animation: none; }
}

/* Ruimte van 25px. Bootstrap springt van 16px (mb-3) naar 24px (mb-4) en heeft dus geen stap die hier
   past; dit is de maat die op het werklijstje tussen de kaarten hoort te staan. */
.wf-mt-25 { margin-top: 25px; }
.wf-mb-25 { margin-bottom: 25px; }

/* Een knop die in dezelfde formulierregel staat als een .wf-inp (48px). Met btn-sm ernaast staat de
   knop een kop kleiner dan het veld waar hij bij hoort en oogt de regel scheef. */
.wf-btn-veldhoog { height: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* ══ Webfix AI-knop (.wf-flow-btn) ═════════════════════════════════════════════
 * DÉ knop voor élke AI-actie. Gevulde merkgradient die "leeft" (drift), witte
 * diamant-chip links, optioneel "AI"-label, pijl rechts. Markup: _WfFlowButton.
 * Formaten: -sm (44px) · standaard (50px) · -lg (60px). -static zet drift uit. */
@keyframes wf-ai-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.wf-flow-btn {
  display: inline-flex; align-items: center; gap: 13px;
  height: 50px; padding: 0 23px;
  border: none; border-radius: 9999px; color: #fff;
  font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer; vertical-align: middle;
  background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%);
  background-size: 200% 100%;
  box-shadow: 0 2px 8px rgba(50, 188, 238, .15), 0 2px 8px rgba(218, 23, 108, .10);
  animation: wf-ai-drift 9s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), filter .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
  will-change: transform;
}
.wf-flow-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.05) saturate(1.06); }
.wf-flow-btn:active { transform: translateY(0); }
.wf-flow-btn:focus-visible { outline: 3px solid rgba(50, 188, 238, .5); outline-offset: 2px; }

/* "Flows™"-woordmerk in de knop (wit; de bewegende gradient zit in de knop-achtergrond). */
.wf-flow-btn-word { font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.01em; font-size: 22px; line-height: 1; color: #fff; }
.wf-flow-btn-tm { font-family: inherit; font-weight: 700; font-size: .4em; vertical-align: text-top; position: relative; top: .18em; margin-left: .04em; color: rgba(255, 255, 255, .72); }
.wf-flow-btn-div { width: 1px; height: 18px; background: rgba(255, 255, 255, .42); flex: none; }

.wf-flow-btn-body { display: inline-flex; align-items: center; gap: 9px; padding-left: 1px; }
.wf-flow-btn-arrow { width: 15px; height: 15px; display: block; flex: none; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.wf-flow-btn:hover .wf-flow-btn-arrow { transform: translateX(4px); }
/* Laadstaat: sommige flows vervangen de knop-inhoud door een spinner in een wit chip-rondje. */
.wf-flow-btn-chip { flex: none; width: 30px; height: 30px; border-radius: 9999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .05); }

.wf-flow-btn-static { animation: none; }

/* Uitgeschakeld — grijze pil, geen drift/hover. */
.wf-flow-btn:disabled, .wf-flow-btn.disabled {
  cursor: not-allowed; color: #a9adb6;
  background: linear-gradient(120deg, #ececf2, #e2e2ea);
  box-shadow: none; animation: none; transform: none; filter: none;
}
.wf-flow-btn:disabled .wf-flow-btn-word, .wf-flow-btn.disabled .wf-flow-btn-word { color: #b6bac2; }
.wf-flow-btn:disabled .wf-flow-btn-tm, .wf-flow-btn.disabled .wf-flow-btn-tm { color: #c2c5cd; }
.wf-flow-btn:disabled .wf-flow-btn-div, .wf-flow-btn.disabled .wf-flow-btn-div { background: rgba(1, 16, 61, .12); }
.wf-flow-btn:disabled .wf-flow-btn-arrow, .wf-flow-btn.disabled .wf-flow-btn-arrow { color: #c2c5cd; }
.wf-flow-btn:disabled:hover .wf-flow-btn-arrow, .wf-flow-btn.disabled:hover .wf-flow-btn-arrow { transform: none; }

/* Maten — Flows™-woordmerk, divider en pijl schalen mee. xs 37 · sm 44 · md 50 (basis) · lg 60px. */
.wf-flow-btn-sm { gap: 11px; height: 44px; padding: 0 20px; font-size: 14px; box-shadow: 0 2px 8px rgba(50, 188, 238, .14), 0 2px 8px rgba(218, 23, 108, .09); }
.wf-flow-btn-sm .wf-flow-btn-word { font-size: 19px; }
.wf-flow-btn-sm .wf-flow-btn-div { height: 16px; }
.wf-flow-btn-sm .wf-flow-btn-arrow { width: 13px; height: 13px; }

.wf-flow-btn-xs { gap: 9px; height: 37px; padding: 0 17px; font-size: 12px; box-shadow: 0 2px 6px rgba(50, 188, 238, .12), 0 2px 6px rgba(218, 23, 108, .08); }
.wf-flow-btn-xs .wf-flow-btn-word { font-size: 16px; }
.wf-flow-btn-xs .wf-flow-btn-div { height: 14px; }
.wf-flow-btn-xs .wf-flow-btn-arrow { width: 12px; height: 12px; }
/* .wf-flow-btn-mini: even hoog als een .wf-badge (30px), voor een rij waarin de knop naast
   badgeknopjes staat -- zoals Demo-Flow in de klantenlijst (Tom, 17-09-2026). */
.wf-flow-btn-mini { gap: 7px; height: 30px; padding: 0 13px; font-size: 11px; }
.wf-flow-btn-mini .wf-flow-btn-word { font-size: 13px; }
.wf-flow-btn-mini .wf-flow-btn-div { height: 12px; }
.wf-flow-btn-mini .wf-flow-btn-arrow { width: 11px; height: 11px; }

.wf-flow-btn-lg { gap: 15px; height: 60px; padding: 0 27px; font-size: 18px; box-shadow: 0 2px 8px rgba(50, 188, 238, .16), 0 2px 8px rgba(218, 23, 108, .11); }
.wf-flow-btn-lg .wf-flow-btn-word { font-size: 26px; }
.wf-flow-btn-lg .wf-flow-btn-div { height: 22px; }
.wf-flow-btn-lg .wf-flow-btn-arrow { width: 17px; height: 17px; }

/* Light-variant — witte pil met een (langzaam driftende) merk-gradient-rand i.p.v. de volle
   gradient-vulling. Voor AI-acties waar een volle gekleurde knop te zwaar oogt, bv. secundaire
   AI-triggers in een modal of kaart. Zelfde maten (-xs/-sm/-lg) en gedrag; alleen de invulling
   is licht: donker label, "Flows™" in merkkleur, grijze divider. Model: WfFlowButtonModel.Light = true. */
.wf-flow-btn-light {
  color: var(--wf-text, #1e293b);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%) border-box;
  background-size: auto, 200% 100%;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 10px rgba(50, 188, 238, .10), 0 2px 8px rgba(218, 23, 108, .06);
}
.wf-flow-btn-light:hover { color: var(--wf-text, #1e293b); filter: none; box-shadow: 0 6px 16px rgba(50, 188, 238, .16), 0 4px 12px rgba(218, 23, 108, .10); }
.wf-flow-btn-light .wf-flow-btn-word { color: var(--wf-title, #a12359); }
.wf-flow-btn-light .wf-flow-btn-tm { color: rgba(161, 35, 89, .55); }
.wf-flow-btn-light .wf-flow-btn-div { background: rgba(1, 16, 61, .14); }
.wf-flow-btn-light .wf-flow-btn-arrow { color: var(--wf-text, #1e293b); }

/* ══ Rol-knoppen met flow-gradient (Stijlgids-experiment, tab Buttons) ══════════
 * Kandidaat-vervanger voor de platte `btn btn-<rol>`. Zelfde motor als .wf-flow-btn
 * (bewegende gradient-pil, pijl, maten) — render met _WfFlowButton + ShowAi=false +
 * CssClass="wf-flow-btn-role-<rol>" (of "-outline-<rol>"). Geen "Flows"-woordmerk:
 * i.p.v. de vaste merkgradient een subtiele 3-tint drift IN DE EIGEN ROL-KLEUR
 * (basiskleur + een lichtere en een donkerdere afgeleide) — blijft herkenbaar als
 * "die rol", oogt niet als een AI-actie. --rc1/--rc2/--rc3 = licht → basis → donker. */
.wf-flow-btn-role-primary,   .wf-flow-btn-role-outline-primary,   .wf-link-primary,   .wf-badge-primary   { --rc1: #c1487d; --rc2: #A12359; --rc3: #7a1a43; --rcsh: 161, 35, 89; }
.wf-flow-btn-role-secondary, .wf-flow-btn-role-outline-secondary, .wf-link-secondary, .wf-badge-secondary { --rc1: #ea5490; --rc2: #DA176C; --rc3: #ad1257; --rcsh: 218, 23, 108; }
.wf-flow-btn-role-success,   .wf-flow-btn-role-outline-success,   .wf-link-success,   .wf-badge-success   { --rc1: #c7e067; --rc2: #B0D136; --rc3: #8ea82c; --rcsh: 176, 209, 54; }
.wf-flow-btn-role-info,      .wf-flow-btn-role-outline-info,      .wf-link-info,      .wf-badge-info      { --rc1: #6fd2f2; --rc2: #32BCEE; --rc3: #1f93bd; --rcsh: 50, 188, 238; }
.wf-flow-btn-role-warning,   .wf-flow-btn-role-outline-warning,   .wf-link-warning,   .wf-badge-warning   { --rc1: #e8b962; --rc2: #DC9E2F; --rc3: #b17e21; --rcsh: 220, 158, 47; }
.wf-flow-btn-role-danger,    .wf-flow-btn-role-outline-danger,    .wf-link-danger,    .wf-badge-danger    { --rc1: #e85d62; --rc2: #D81F25; --rc3: #a8181d; --rcsh: 216, 31, 37; }
.wf-flow-btn-role-light,     .wf-flow-btn-role-outline-light,     .wf-link-light,     .wf-badge-light     { --rc1: #ffffff; --rc2: #F0F0F7; --rc3: #dcdce6; --rcsh: 1, 16, 61; }
.wf-flow-btn-role-dark,      .wf-flow-btn-role-outline-dark,      .wf-link-dark,      .wf-badge-dark      { --rc1: #2b325c; --rc2: #000229; --rc3: #00010f; --rcsh: 0, 2, 41; }
/* "ai"/"flow" = de vaste merkgradient (géén rolkleur-afgeleide) — zelfde 3 kleuren als .wf-aibtn/
   .wf-flow-btn (b0d136 → da176c → 32bcee), zodat die twee ook als compact Label/Badge bestaan. */
.wf-label-ai, .wf-badge-ai, .wf-label-flow, .wf-badge-flow { --rc1: #b0d136; --rc2: #da176c; --rc3: #32bcee; --rcsh: 218, 23, 108; }

/* Gevuld — zelfde drift-animatie als .wf-flow-btn, alleen de gradient-kleur verandert. */
[class*="wf-flow-btn-role-"]:not([class*="-outline-"]) {
  background: linear-gradient(90deg, var(--rc1) 0%, var(--rc2) 50%, var(--rc3) 100%);
  box-shadow: 0 2px 8px rgba(var(--rcsh), .24);
}
/* Hover: zelfde "Satin"-glans-sweep als de Badge-knopjes — alleen bij mouseover (rust = de gewone
   vlakke rol-gradient hierboven). .wf-flow-btn-role-satin heeft z'n eigen altijd-actieve versie,
   dus die hier uitsluiten. */
[class*="wf-flow-btn-role-"]:not([class*="-outline-"]):not(.wf-flow-btn-role-satin):hover {
  background-image:
    linear-gradient(100deg, transparent 30%, color-mix(in srgb, white 30%, transparent) 50%, transparent 70%),
    linear-gradient(135deg, var(--rc1) 0%, var(--rc2) 55%, var(--rc3) 100%);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: wf-satin-sweep 1.6s ease-in-out infinite;
}
.wf-flow-btn-role-light { color: #3a4759; }
.wf-flow-btn-role-light .wf-flow-btn-arrow { color: #3a4759; }
.wf-flow-btn-role-light:hover { color: #000229; }
.wf-flow-btn-role-light:hover .wf-flow-btn-arrow { color: #000229; }

/* "Satin" — dé standaard extra-beweging-variant (gekozen boven de eerdere "Shiny"/"Glass"-kandidaten,
   die zijn verwijderd). Zachte, langzame lichtstreep die over een vlakke, ALTIJD ondoorzichtige 2-tint
   rol-gradient schuift (satijn-glans i.p.v. een felle drift). 2 lagen: laag 1 = de streep (schuift,
   `background-position` verandert), laag 2 = de vaste kleur (positie blijft "0 0", staat stil) — dus
   nooit de alpha-tegen-pagina-bug van de eerdere versie, want de streep composit tegen de opake
   laag 2 vlak eronder, niet tegen de paginabodem. */
[class*="wf-flow-btn-role-"].wf-flow-btn-role-satin:not([class*="-outline-"]) {
  background-image:
    linear-gradient(100deg, transparent 30%, color-mix(in srgb, white 30%, transparent) 50%, transparent 70%),
    linear-gradient(135deg, var(--rc1) 0%, var(--rc2) 55%, var(--rc3) 100%);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: wf-satin-sweep 7s ease-in-out infinite;
  box-shadow: 0 2px 9px rgba(var(--rcsh), .22);
}
@keyframes wf-satin-sweep { 0%, 100% { background-position: -40% 0, 0 0; } 50% { background-position: 140% 0, 0 0; } }

/* Outline — transparante vulling + gradient-rand (zelfde dubbele-achtergrond-truc als
   .wf-flow-btn-light). Label + pijl in de donkerste afgeleide tint (--rc3), GEEN gradient-tekst
   meer: background-clip:text sneed de onderkant van letters met een staart (g/y/p) af en was op
   -light nauwelijks leesbaar (te lichte tint). Eén vlakke kleur = altijd scherp en leesbaar. */
[class*="wf-flow-btn-role-outline-"] {
  color: var(--rc3);
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--rc1) 0%, var(--rc2) 50%, var(--rc3) 100%) border-box;
  background-size: auto, 200% 100%;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 8px rgba(var(--rcsh), .12);
}
[class*="wf-flow-btn-role-outline-"]:hover { color: var(--rc3); filter: none; box-shadow: 0 4px 14px rgba(var(--rcsh), .20); }
/* -light's eigen tinten zijn allemaal (bijna-)wit — --rc3 is daar nog te licht, dus expliciet donker. */
.wf-flow-btn-role-outline-light, .wf-flow-btn-role-outline-light:hover { color: #3a4759; }

/* ══ Tekst-linkjes met rol-gradient (.wf-link, tab Buttons & links) ═════════════
 * Zelfde --rc1/--rc2/--rc3-tinten per rol als de rol-knoppen hierboven (gedeelde
 * variabelen, geen nieuwe kleuren). Levende gradient-tekst via background-clip —
 * "dynamisch" is de voorkeur; @media reduced-motion zet 'm stil, geen zwaar JS.
 * Twee smaken: .wf-link (zonder underline, hover ONTHULT 'm) en .wf-link-underline
 * (altijd underlined, hover verdikt 'm). Underline zelf is een vlakke kleur
 * (--rc2) — een gradient-underline bestaat niet in CSS zonder pseudo-element-truc. */
.wf-link, .wf-link-underline {
  font-weight: 600; cursor: pointer; text-decoration-color: transparent;
  text-underline-offset: .22em; transition: text-decoration-color .2s ease;
  background-image: linear-gradient(90deg, var(--rc1) 0%, var(--rc2) 50%, var(--rc3) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: wf-ai-drift 9s ease-in-out infinite;
}
.wf-link { text-decoration: none; }
.wf-link:hover { text-decoration: underline; text-decoration-color: var(--rc2); }
.wf-link-underline { text-decoration: underline; text-decoration-color: var(--rc2); }
.wf-link-underline:hover { text-decoration-thickness: 2px; }
/* -light's tinten zijn allemaal (bijna-)wit — onleesbaar op de witte pagina-achtergrond, dus een
   vlakke leesbare kleur i.p.v. de gradient (zelfde aanpak als .wf-flow-btn-role-outline-light). */
.wf-link-light, .wf-link-underline.wf-link-light {
  background: none; animation: none; color: #3a4759; -webkit-text-fill-color: #3a4759;
}
.wf-link-light:hover, .wf-link-underline.wf-link-light:hover { text-decoration-color: #3a4759; }

@media (prefers-reduced-motion: reduce) { .wf-flow-btn { animation: none; } .wf-link, .wf-link-underline { animation: none; } .wf-flow-btn-role-satin, .wf-badge:hover, [class*="wf-flow-btn-role-"]:hover { animation: none; } }

/* ── Paginakop: terug-/back-knop op mobiel verbergen ──────────────────────────
 * Zet .wf-header-back op de terug-knop in ELKE paginakop; op smalle schermen verdwijnt hij
 * (mobiel gebruikt de app-/browser-terugnavigatie). Systeembrede afspraak — zie docs/stijl.md. */
@media (max-width: 575.98px) { .wf-header-back { display: none !important; } }

/* ── "Webfix AI" merk-in-tekst ────────────────────────────────────────────────
 * "Webfix" in de tekstkleur (Sansation) + "AI" in de merkgradient (statisch). Handmatig:
 *   <span class="wf-ai-mark"><span class="wf-ai-word">Webfix</span> <span class="wf-ai-grad">AI</span></span>
 * of AUTOMATISCH via wf-ai-text.js (wrapt "Webfix AI" en losstaand "AI" in lopende tekst;
 * laat "AI-tools"/"AI-knop" met streepje met rust). Opt-out: class="no-ai-text" op een element.
 * Dark mode: "Webfix" wordt wit, de "AI"-gradient blijft gelijk. */
/* Sansation-woordmerken: gladdere fontrendering (grijswaarde-AA i.p.v. ClearType-kleurfringe),
 * tegen de "korrelige" look. Effect vooral op macOS/Chrome; op Windows beperkt (dan evt. SVG-route). */
.wf-ai-mark, .wf-ai-word, .wf-ai-grad, .wf-flow-btn-word, .wf-flows-wm, .lg-flows, .lg-uni-fl {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.wf-ai-mark { white-space: nowrap; font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.005em; }
.wf-ai-word { color: var(--wf-black, #000229); }
.wf-ai-grad { font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: .01em; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* "Webfix AI"-woordmerk als SVG (partial _WfAiWordmark): scherp + herkleurbaar. Schaalt op font-size/height. */
.wf-ai-svg { height: 1em; width: auto; display: block; shape-rendering: geometricPrecision; }
.wf-aibtn .wf-ai-svg { height: 17px; }
.wf-aibtn-xs .wf-ai-svg { height: 14px; } .wf-aibtn-sm .wf-ai-svg { height: 15px; } .wf-aibtn-lg .wf-ai-svg { height: 20px; }
[data-bs-theme="dark"] .wf-ai-word { color: #fff; }
/* "Webfix AI" op een donkere/gradient achtergrond → de HELE "Webfix AI" wit ("Webfix" én "AI";
 * een gradient-"AI" heeft te weinig contrast op de gradient-bg). Automatisch in de Flows-headers;
 * elders opt-in met class .wf-ai-dark op het element of een ouder. */
.wf-flows-header .wf-ai-word, .wf-flows-modalhead .wf-ai-word,
.wf-ai-bg .wf-ai-word,
.wf-chat-msg.mine .wf-chat-bubble .wf-ai-word,
.wf-ai-dark .wf-ai-word, .wf-ai-word.wf-ai-dark { color: #fff; }
.wf-flows-header .wf-ai-grad, .wf-flows-modalhead .wf-ai-grad,
.wf-ai-bg .wf-ai-grad,
.wf-chat-msg.mine .wf-chat-bubble .wf-ai-grad,
.wf-ai-dark .wf-ai-grad, .wf-ai-grad.wf-ai-dark { background: none; -webkit-text-fill-color: #fff; color: #fff; }

/* ── Standaard paginakop (2026) ───────────────────────────────────────────────
 * Lichte gradient-card met een bewegende gradient-accentbalk onderaan, een gradient-getint
 * icoonvak (diamant), breadcrumb + titel, en rechts een subtiele "Terug"-pil (.wf-back).
 *   <div class="wf-pagehdr"> <div class="wf-pagehdr-main"> icoon + (crumb + titel) </div> Terug </div> */
.wf-pagehdr { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(135deg, #fbfbfe, #f6f8fc); border: 1px solid #e9edf4; border-radius: 16px; padding: 20px 28px 22px; box-shadow: 0 1px 3px rgba(18, 20, 32, .10); }
.wf-pagehdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 200% 100%; animation: wf-ai-drift 11s ease-in-out infinite; }
.wf-pagehdr-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.wf-pagehdr-icon { flex: none; width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, rgba(176, 209, 54, .16), rgba(218, 23, 108, .14), rgba(50, 188, 238, .18)); display: inline-flex; align-items: center; justify-content: center; }
.wf-pagehdr-icon img { width: 29px; height: 29px; object-fit: contain; display: block; }
.wf-pagehdr-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--font-body, inherit); font-size: 12px; font-weight: 600; }
.wf-pagehdr-crumb a { color: var(--wf-pink, #da176c); text-decoration: none; }
.wf-pagehdr-crumb .sep { font-size: 10px; color: #c2c8d2; }
.wf-pagehdr-crumb .cur { color: #9aa2b1; }
.wf-pagehdr-title { margin: 0; font-family: var(--font-heading, inherit); font-weight: 800; font-size: 21px; color: var(--wf-black, #000229); line-height: 1.1; }
:root[data-bs-theme="dark"] .wf-pagehdr { background: linear-gradient(135deg, #232a38, #1b2130); border-color: #313c4f; }
:root[data-bs-theme="dark"] .wf-pagehdr-title { color: #e6eaf0; }

/* Subtiele "Terug"-pil in de paginakop (magenta-getint). */
.wf-back { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 20px; border-radius: 9999px; text-decoration: none; font-family: var(--font-body, inherit); font-weight: 700; font-size: 14px; color: var(--wf-title, #a12359); background: rgba(218, 23, 108, .07); border: 1px solid rgba(218, 23, 108, .18); box-shadow: 0 1px 3px rgba(18, 20, 32, .06); cursor: pointer; transition: transform .3s, filter .3s, background .2s; }
.wf-back:hover { color: var(--wf-title, #a12359); background: rgba(218, 23, 108, .12); }
.wf-back .bi { font-size: 13px; color: var(--wf-pink, #da176c); transition: transform .3s; }
.wf-back:hover .bi { transform: translateX(-3px); }
:root[data-bs-theme="dark"] .wf-back { color: #f1a9cb; background: rgba(218, 23, 108, .14); border-color: rgba(218, 23, 108, .30); }

/* ── Glazige knop (op de gekleurde Flows-header) ─────────────────────────────
 * Frosted pil met witte icoon-chip; voor een Terug-knop óp de gradient-header. */
.wf-glassbtn { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px 0 5px; border-radius: 9999px; text-decoration: none; font-family: var(--font-body, inherit); font-weight: 700; font-size: 14px; color: #fff; background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(1, 16, 61, .12); white-space: nowrap; cursor: pointer; transition: transform .3s, filter .3s; }
.wf-glassbtn:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.04); }
.wf-glassbtn-chip { flex: none; width: 34px; height: 34px; border-radius: 9999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(1, 16, 61, .16); color: var(--wf-title, #a12359); font-size: 14px; transition: transform .3s; }
.wf-glassbtn:hover .wf-glassbtn-chip .bi { transform: translateX(-3px); }

/* Kaartknop: witte pil met ronde icoon-chip links — secundaire acties op een kaart of in een flow
   (bv. "Meer modules activeren", "Terug naar dashboard", "Referentie bewerken"). Uit Claude Design
   "Webfix AI Knoppen" → Kaartknoppen. Hover (1:1 met ontwerp): hele knop tilt op + licht helderder;
   de chip schaalt+draait; in de terug-chip schuift de pijl zelf naar links. */
.wf-cardbtn { box-sizing: border-box; display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 20px 0 6px; border-radius: 9999px; text-decoration: none; font-family: var(--font-body, inherit); font-weight: 700; font-size: 14px; line-height: 1; color: var(--wf-black, #000229); background: #fff; border: 1px solid rgba(1, 16, 61, .12); white-space: nowrap; cursor: pointer; will-change: transform; transition: transform .35s cubic-bezier(.16,1,.3,1), filter .35s cubic-bezier(.16,1,.3,1); }
.wf-cardbtn:hover { color: var(--wf-black, #000229); transform: translateY(-2px); filter: brightness(1.05) saturate(1.06); }
.wf-cardbtn:active { transform: translateY(0); }
.wf-cardbtn-chip { flex: none; width: 32px; height: 32px; border-radius: 9999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 6px rgba(1, 16, 61, .12), inset 0 0 0 1px rgba(1, 16, 61, .05); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.wf-cardbtn-chip .bi { color: var(--wf-title, #a12359); }
.wf-cardbtn-chip .bi { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.wf-cardbtn:hover .wf-cardbtn-chip { transform: scale(1.07) rotate(-4deg); }
/* Terug-chip: de pijl schuift bovendien subtiel naar links (chip zelf draait ook mee, zoals in het ontwerp). */
.wf-cardbtn:hover .wf-cardbtn-chip .bi-arrow-left { transform: translateX(-3px); }
[data-bs-theme="dark"] .wf-cardbtn { color: var(--wf-black, #000229); }

@media (prefers-reduced-motion: reduce) { .wf-pagehdr::after { animation: none; } .wf-cardbtn, .wf-cardbtn-chip, .wf-cardbtn-chip .bi { transition: none; } }
/* Uitzondering: .clean-ai houdt "AI" (of een heel stukje) plat — overrulet de gradient-opmaak. */
.clean-ai, .clean-ai .wf-ai-grad, .clean-ai .wf-ai-word, .wf-ai-grad.clean-ai, .wf-ai-word.clean-ai {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; font-family: inherit !important;
}

/* ── Webfix AI-knop (tekst) ───────────────────────────────────────────────────
 * Lichte pil met het "Webfix AI"-woordmerk (Webfix in tekstkleur + AI-gradient) · divider ·
 * label · pijl. Geen diamant. Vier maten: xs 37 · sm 44 · md 50 (basis) · lg 60px.
 * Dark mode: transparante pil + wit "Webfix". */
/* Bewegende gradient-RAND (2px) via de dubbele-achtergrond-truc: witte vulling op de padding-box
 * + merk-gradient op de border-box, met een transparante border. background-size auto,200% laat de
 * bestaande wf-ai-drift alléén de rand-laag driften (de witte vulling staat stil). */
.wf-aibtn { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 26px; border-radius: 9999px; border: 2px solid transparent; text-decoration: none; color: #000229; font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%) border-box; background-size: auto, 200% 100%; box-shadow: 0 2px 10px rgba(50, 188, 238, .10), 0 2px 8px rgba(218, 23, 108, .06); cursor: pointer; animation: wf-ai-drift 9s ease-in-out infinite; transition: transform .35s cubic-bezier(.16, 1, .3, 1), filter .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease; will-change: transform; }
.wf-aibtn:hover { transform: translateY(-2px); filter: brightness(1.02); color: #000229; }
.wf-aibtn:active { transform: translateY(0); }
.wf-aibtn .wf-ai-mark { display: inline-flex; align-items: baseline; font-size: 17px; }
.wf-aibtn .wf-ai-grad { margin-left: .22em; }   /* ruimte tussen "Webfix" en "AI" (spatie valt weg in inline-flex) */
.wf-aibtn-div { width: 1px; height: 18px; background: rgba(1, 16, 61, .14); flex: none; }
.wf-aibtn-body { display: inline-flex; align-items: center; gap: 9px; }
.wf-aibtn-arrow { font-size: 15px; display: inline-flex; flex: none; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.wf-aibtn:hover .wf-aibtn-arrow { transform: translateX(4px); }
.wf-aibtn-xs { height: 37px; padding: 0 16px; } .wf-aibtn-xs .wf-ai-mark { font-size: 14px; } .wf-aibtn-xs .wf-aibtn-div { height: 13px; } .wf-aibtn-xs .wf-aibtn-arrow { font-size: 12px; }
.wf-aibtn-sm { height: 44px; padding: 0 22px; } .wf-aibtn-sm .wf-ai-mark { font-size: 15px; } .wf-aibtn-sm .wf-aibtn-div { height: 15px; } .wf-aibtn-sm .wf-aibtn-arrow { font-size: 13px; }
.wf-aibtn-lg { height: 60px; padding: 0 30px; } .wf-aibtn-lg .wf-ai-mark { font-size: 20px; } .wf-aibtn-lg .wf-aibtn-div { height: 22px; } .wf-aibtn-lg .wf-aibtn-arrow { font-size: 17px; }
/* Uit: nog niets om mee te doen (leeg invoerveld) of al bezig. Alles wat de knop "levend" maakt gaat
   eraf — de merk-gradient, de schaduw en de drift — zodat je aan één blik ziet dat klikken zinloos is.
   Ook op een <a>, want die kent geen disabled-attribuut. */
.wf-aibtn.disabled,
.wf-aibtn:disabled,
.wf-aibtn[aria-disabled="true"] {
  background: #f2f3f7;
  border-color: rgba(1, 16, 61, .10);
  box-shadow: none;
  animation: none;
  color: #a3a9ba;
  cursor: not-allowed;
  pointer-events: none;
}
.wf-aibtn.disabled .wf-ai-mark,
.wf-aibtn:disabled .wf-ai-mark,
.wf-aibtn[aria-disabled="true"] .wf-ai-mark { filter: grayscale(1); opacity: .5; }
.wf-aibtn.disabled .wf-aibtn-div,
.wf-aibtn:disabled .wf-aibtn-div,
.wf-aibtn[aria-disabled="true"] .wf-aibtn-div { background: rgba(1, 16, 61, .10); }

[data-bs-theme="dark"] .wf-aibtn { background: linear-gradient(#1f2733, #1f2733) padding-box, linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%) border-box; box-shadow: 0 2px 10px rgba(0, 0, 0, .30); color: #fff; }
[data-bs-theme="dark"] .wf-aibtn.disabled,
[data-bs-theme="dark"] .wf-aibtn:disabled,
[data-bs-theme="dark"] .wf-aibtn[aria-disabled="true"] { background: #262a33; border-color: rgba(255, 255, 255, .10); color: #6b7280; }
[data-bs-theme="dark"] .wf-aibtn-div { background: rgba(255, 255, 255, .30); }
@media (prefers-reduced-motion: reduce) { .wf-aibtn { animation: none; } }

/* Wit "Flows™"-woordmerk — het beeldmerk op een gekleurde/gradient achtergrond (Flows-header,
 * modal-header). Solide wit met subtiele schaduw; het ™ klein superscript. */
.wf-flows-wm { font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.01em; color: #fff; line-height: 1; text-shadow: 0 1px 6px rgba(1, 16, 61, .28); }
.wf-flows-wm .tm { font-family: var(--font-body, inherit); font-weight: 700; font-size: clamp(9px, .4em, 14px); vertical-align: text-top; position: relative; top: .18em; margin-left: .04em; color: rgba(255, 255, 255, .72); text-shadow: none; }
/* Kruimelpad in de branded header (CMS-variant): wit-op-gradient, conform de eyebrow-tekst.
   Zelfde vormtaal als de Flows-header — alleen de tagline is vervangen door een pad. */
.wf-flows-header-crumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 15px; letter-spacing: .01em; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 6px rgba(1, 16, 61, .28); }
.wf-flows-header-crumb a { color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .15s ease; }
.wf-flows-header-crumb a:hover { color: #fff; text-decoration: underline; }
.wf-flows-header-crumb .sep { opacity: .5; font-weight: 400; }
.wf-flows-header-crumb .current { color: #fff; }

/* ── Typografie ───────────────────────────────────────────────────────────────
 * Koppen (h1..h6) komen uit het thema (styles.css). Pagina-/sectie-/kaart-titel =
 *   <h2 class="h5 fw-semibold">  → 18px / 600 (de systeembrede titel-look).
 * Vaste SUBTEKST (helptekst/subzin direct onder een titel) = .wf-subtext: overal 14px,
 * i.p.v. Bootstrap .small (~12.6px, te klein). NIET voor afgeleide/AI-content — die mag afwijken. */
.wf-subtext { font-size: 14px; line-height: 1.35; color: var(--wf-muted, #94a3b8); }
[data-bs-theme="dark"] .wf-subtext { color: var(--wf-muted, #8190a8); }

/* ══ Webfix standaardknop — chip-formaat (.wf-btn, niet-AI) ═══════════════════
 * Pil met een witte cirkel-chip (passend icoon) links, label, pijl rechts.
 * Zelfde beweging als de AI-knop, zónder de levende gradient. Markup: _WfButton.
 * Formaten: -sm (44px) · standaard (50px) · -lg (60px).
 * Varianten: -primary -secondary -success -info -warning -danger -light -dark. */
.wf-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 50px; padding: 0 26px 0 7px;
  border: none; border-radius: 9999px; color: #fff;
  font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer; vertical-align: middle;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), filter .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
  will-change: transform;
}
.wf-btn:hover, .wf-btn:focus { color: #fff; transform: translateY(-2px); filter: brightness(1.05); }
.wf-btn:active { transform: translateY(0); }
.wf-btn:focus-visible { outline: 3px solid rgba(50, 188, 238, .5); outline-offset: 2px; }

.wf-btn-chip {
  flex: none; width: 38px; height: 38px; border-radius: 9999px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1;
  box-shadow: 0 2px 8px rgba(1, 16, 61, .10), inset 0 0 0 1px rgba(1, 16, 61, .05);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.wf-btn-chip i { display: block; }
.wf-btn:hover .wf-btn-chip { transform: scale(1.07) rotate(-4deg); }

.wf-btn-body { display: inline-flex; align-items: center; gap: 9px; padding-left: 2px; }
.wf-btn-arrow { font-size: 15px; display: inline-flex; flex: none; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.wf-btn:hover .wf-btn-arrow { transform: translateX(4px); }

.wf-btn-primary   { background: linear-gradient(120deg, #b52c68, #8a1d4d); box-shadow: 0 2px 8px rgba(161, 35, 89, .15); }
.wf-btn-primary   .wf-btn-chip i { color: #a12359; }
.wf-btn-secondary { background: linear-gradient(120deg, #e83b86, #c2135f); box-shadow: 0 2px 8px rgba(218, 23, 108, .15); }
.wf-btn-secondary .wf-btn-chip i { color: #da176c; }
.wf-btn-success   { background: linear-gradient(120deg, #bcd94e, #a3c62b); box-shadow: 0 2px 8px rgba(176, 209, 54, .16); }
.wf-btn-success   .wf-btn-chip i { color: #7d9a1f; }
.wf-btn-info      { background: linear-gradient(120deg, #3fc4f2, #26a7d6); box-shadow: 0 2px 8px rgba(50, 188, 238, .15); }
.wf-btn-info      .wf-btn-chip i { color: #1f97c4; }
.wf-btn-warning   { background: linear-gradient(120deg, #e6ad45, #cf8f22); box-shadow: 0 2px 8px rgba(220, 158, 47, .15); }
.wf-btn-warning   .wf-btn-chip i { color: #bd8420; }
.wf-btn-danger    { background: linear-gradient(120deg, #e8474c, #d81f25); box-shadow: 0 2px 8px rgba(216, 31, 37, .15); }
.wf-btn-danger    .wf-btn-chip i { color: #d81f25; }
.wf-btn-light     { background: linear-gradient(120deg, #f4f4f9, #e9e9f1); color: #000229; box-shadow: 0 2px 8px rgba(1, 16, 61, .05), inset 0 0 0 1px rgba(1, 16, 61, .10); }
.wf-btn-light, .wf-btn-light:hover, .wf-btn-light:focus { color: #000229; }
.wf-btn-light     .wf-btn-chip i { color: #5F6368; }
.wf-btn-light     .wf-btn-arrow  { color: #888B95; }
.wf-btn-dark      { background: linear-gradient(120deg, #141a3d, #000229); box-shadow: 0 2px 8px rgba(0, 2, 41, .18); }
.wf-btn-dark      .wf-btn-chip i { color: #000229; }

.wf-btn:disabled, .wf-btn.disabled {
  cursor: not-allowed; color: #a9adb6;
  background: linear-gradient(120deg, #ececf2, #e2e2ea);
  box-shadow: none; transform: none; filter: none;
}
.wf-btn:disabled .wf-btn-chip, .wf-btn.disabled .wf-btn-chip { box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .06); }
.wf-btn:disabled .wf-btn-chip i, .wf-btn.disabled .wf-btn-chip i { color: #c2c5cd; }
.wf-btn:disabled .wf-btn-arrow, .wf-btn.disabled .wf-btn-arrow { color: #c2c5cd; }
.wf-btn:disabled:hover .wf-btn-chip, .wf-btn.disabled:hover .wf-btn-chip { transform: none; }
.wf-btn:disabled:hover .wf-btn-arrow, .wf-btn.disabled:hover .wf-btn-arrow { transform: none; }

/* Volle breedte: chip + label gecentreerd. */
.wf-btn.w-100 { justify-content: center; }

.wf-btn-sm { gap: 10px; height: 44px; padding: 0 20px 0 6px; font-size: 14px; }
.wf-btn-sm .wf-btn-chip { width: 30px; height: 30px; font-size: 14px; }
.wf-btn-sm .wf-btn-body { gap: 8px; padding-left: 1px; }
.wf-btn-sm .wf-btn-arrow { font-size: 13px; }

/* ══ Knop aan het werk ═════════════════════════════════════════════════════════════════════
 * Een actieknop waar even op gewacht moet worden (een flow starten, publiceren): een draaiend rondje
 * en "Bezig…". Gedrag: assets/js/wf-knop-bezig.js (window.wfKnop).
 * Bewust GEEN grijze disabled-stand: de knop houdt zijn kleur, alleen het rondje en de aanwijzer zeggen
 * dat er iets loopt. Grijs zou hem laten lijken op iets dat kapot is in plaats van op iets dat bezig is.
 * Het rondje neemt de tekstkleur van de knop aan (wit op een gekleurde knop, donker op een lichte). */
.wf-knopspin {
  display: inline-block; flex: none; box-sizing: border-box;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: wf-knopspin .7s linear infinite;
}
@keyframes wf-knopspin { to { transform: rotate(360deg); } }

.wf-knop-bezig { cursor: progress !important; }
.wf-flow-btn.wf-knop-bezig, .wf-flow-btn.wf-knop-bezig:hover,
.wf-btn.wf-knop-bezig, .wf-btn.wf-knop-bezig:hover { transform: none; filter: none; }
.wf-btn.wf-knop-bezig:hover .wf-btn-chip { transform: none; }
.wf-flow-btn-sm .wf-knopspin, .wf-btn-sm .wf-knopspin { width: 14px; height: 14px; }
/* De knop houdt zijn breedte (anders verspringt de rij); "Bezig…" is korter dan het label, dus zet het
   in het midden van de ruimte die overblijft in plaats van tegen het woordmerk aan. */
.wf-flow-btn.wf-knop-bezig .wf-flow-btn-body, .wf-btn.wf-knop-bezig .wf-btn-body { flex: 1 1 auto; justify-content: center; }

/* In het witte rondje van een gewone knop: het rondje in de kleur van het icoon dat er stond. */
.wf-btn-chip .wf-knopspin { border-color: rgba(1, 16, 61, .14); border-top-color: #5f6368; }
.wf-btn-primary   .wf-btn-chip .wf-knopspin { border-top-color: #a12359; }
.wf-btn-secondary .wf-btn-chip .wf-knopspin { border-top-color: #da176c; }
.wf-btn-success   .wf-btn-chip .wf-knopspin { border-top-color: #7d9a1f; }
.wf-btn-info      .wf-btn-chip .wf-knopspin { border-top-color: #1f97c4; }
.wf-btn-warning   .wf-btn-chip .wf-knopspin { border-top-color: #bd8420; }
.wf-btn-danger    .wf-btn-chip .wf-knopspin { border-top-color: #d81f25; }
.wf-btn-dark      .wf-btn-chip .wf-knopspin { border-top-color: #000229; }

/* Een Bootstrap-knop: het rondje staat voor de tekst. */
.btn .wf-knopspin { width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; }

/* Wie beweging heeft uitgezet krijgt geen draaiend rondje maar een rustige puls: het gaat erom dát er
   iets gebeurt, niet om de animatie. */
@media (prefers-reduced-motion: reduce) {
  .wf-knopspin { animation: wf-knopspin-puls 1.2s ease-in-out infinite; }
  @keyframes wf-knopspin-puls { 50% { opacity: .35; } }
}

/* xs — extra klein (mobiel), ~37px; proportioneel kleiner dan sm. */
.wf-btn-xs { gap: 8px; height: 37px; padding: 0 16px 0 5px; font-size: 13px; }
.wf-btn-xs .wf-btn-chip { width: 26px; height: 26px; font-size: 13px; }
.wf-btn-xs .wf-btn-body { gap: 7px; padding-left: 1px; }
.wf-btn-xs .wf-btn-arrow { font-size: 12px; }

.wf-btn-lg { gap: 15px; height: 60px; padding: 0 32px 0 9px; font-size: 18px; }
.wf-btn-lg .wf-btn-chip { width: 46px; height: 46px; font-size: 18px; }
.wf-btn-lg .wf-btn-arrow { font-size: 17px; }

/* ── Panel / card met knoppen op de onderrand ────────────────────────────────
 * Een omkaderd vlak (grijze card) waar de bijbehorende knoppen ONDER op de rand
 * "hangen" — zodat duidelijk is dat die knoppen bij de card horen.
 *   <div class="wf-panel"> … <div class="wf-panel-actions"> …knoppen… </div> </div> */
.wf-panel {
  position: relative;
  background: var(--wf-hover-bg, #f6f7f9);
  border: 1px solid var(--wf-border, #e9edf2);
  border-radius: 18px;
  padding: clamp(18px, 2.5vw, 34px);
  margin-bottom: 2.6rem;              /* ruimte voor de knoppen die op de onderrand hangen */
}
.wf-panel-actions {
  position: absolute; left: clamp(14px, 2.5vw, 28px); bottom: 0;
  transform: translateY(50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; z-index: 3;
}
.wf-panel-actions.end { left: auto; right: clamp(14px, 2.5vw, 28px); }
.wf-panel-media { padding: 10px; }   /* dunne rand rond een foto */

@media (max-width: 575.98px) {
  .wf-panel { padding: 16px; border-radius: 14px; margin-bottom: 2.2rem; }
  .wf-panel-actions { left: 12px; gap: 8px; }
  .wf-panel-actions.end { right: 12px; }

  /* Standaard/md-knoppen automatisch naar SM op mobiel — views hoeven niets te wijzigen.
     Knoppen die expliciet sm/lg/xs zetten blijven ongemoeid (via :not(...)).

     Was xs (37px). Dat gaf twee problemen. Het viel op naast een knop die wél sm zei: in dezelfde
     doorloop stond de ene op 37px en de andere op 44px, zonder dat een view iets bijzonders deed.
     En 37px ligt ónder de 44px die we zelf als kleinste aanraakvlak aanhouden (zie de
     responsive-regels): met een duim mis je zo'n knop net. Sm lost allebei op en is nog steeds
     kleiner dan de 50px van md. */
  .wf-btn:not(.wf-btn-sm):not(.wf-btn-lg):not(.wf-btn-xs) { gap: 10px; height: 44px; padding: 0 20px 0 6px; font-size: 14px; }
  .wf-btn:not(.wf-btn-sm):not(.wf-btn-lg):not(.wf-btn-xs) .wf-btn-chip { width: 30px; height: 30px; font-size: 14px; }
  .wf-btn:not(.wf-btn-sm):not(.wf-btn-lg):not(.wf-btn-xs) .wf-btn-body { gap: 8px; padding-left: 1px; }
  .wf-btn:not(.wf-btn-sm):not(.wf-btn-lg):not(.wf-btn-xs) .wf-btn-arrow { font-size: 13px; }

  .wf-flow-btn:not(.wf-flow-btn-sm):not(.wf-flow-btn-lg):not(.wf-flow-btn-xs) { gap: 11px; height: 44px; padding: 0 20px; font-size: 14px; }
  .wf-flow-btn:not(.wf-flow-btn-sm):not(.wf-flow-btn-lg):not(.wf-flow-btn-xs) .wf-flow-btn-word { font-size: 19px; }
  .wf-flow-btn:not(.wf-flow-btn-sm):not(.wf-flow-btn-lg):not(.wf-flow-btn-xs) .wf-flow-btn-div { height: 16px; }
  .wf-flow-btn:not(.wf-flow-btn-sm):not(.wf-flow-btn-lg):not(.wf-flow-btn-xs) .wf-flow-btn-arrow { width: 13px; height: 13px; }

}

/* ── Actiebalk onderaan (divider-regel) ──────────────────────────────────────
 * REGEL: centrale knoppen onderaan een modal of scherm staan ALTIJD onder een
 * divider-lijn, rechts uitgelijnd (hoofdactie het meest rechts).
 *   <div class="wf-actionbar"> …knoppen… </div>   ·   .split = links/rechts */
.wf-actionbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 12px; padding-top: 18px; margin-top: 24px;
  border-top: 1px solid var(--wf-border, #e9edf2);
}
.wf-actionbar.split { justify-content: space-between; }
.modal-footer.wf-actionbar { margin-top: 0; }

/* ── Leesoverlay (Webfix AI leest een factuur) ───────────────────────────────
 * Volledig scherm, lichte blur, gecentreerde kaart met spinner. Verschijnt tijdens
 * het uitlezen van een zojuist geüploade inkoopfactuur. */
.wf-lees-overlay {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 18, 26, .55); backdrop-filter: blur(4px);
}
.wf-lees-card {
  background: var(--wf-surface, #fff); border-radius: 18px;
  padding: 34px 42px; text-align: center; max-width: 90vw;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.wf-lees-spin {
  width: 46px; height: 46px; margin: 0 auto 18px;
  border-radius: 50%;
  border: 4px solid var(--wf-border, #e9edf2);
  border-top-color: var(--wf-primary, #ff5b24);
  animation: wf-lees-turn .8s linear infinite;
}
@keyframes wf-lees-turn { to { transform: rotate(360deg); } }
.wf-lees-title { font-weight: 700; font-size: 1.05rem; color: var(--wf-ink, #1b2431); }
.wf-lees-sub { margin-top: 6px; font-size: .82rem; color: var(--wf-muted, #7a8699); }
:root[data-bs-theme="dark"] .wf-lees-card { background: #1a1f2b; }
:root[data-bs-theme="dark"] .wf-lees-title { color: #eef2f7; }

/* ── Magic edit-card (AI-popover) ────────────────────────────────────────────
 * Een bewerkkaart met levende gradient-RAND die onder een AI-knop openklapt (fade).
 * Bevat: kop (diamant-icoon + titel/subtitel + quota rechts), een strip met kiesbare
 * foto-thumbnails, een prompt-textarea met mic, en rechtsonder een AI-genereerknop.
 * 1:1 uit claude-design/…/webfix-flow-magic-edit-card. Gebruikt bv. in de flow-preview
 * ("Foto aanpassen"). Opent door .wf-magic-open op de wrap te zetten (JS).
 *
 *   <div class="wf-magic-wrap">                 (position:relative)
 *     …AI-trigger (_WfFlowButton)…
 *     <div class="wf-magic-card"> …inhoud… </div>
 *   </div>
 */
.wf-magic-wrap { position: relative; }

/* In-flow collapsible: de kaart staat IN de content (niet zwevend). Dicht = 0 hoogte; open = klapt uit
   en duwt de content eronder naar beneden (grid 0fr→1fr-truc). Volle breedte binnen de wrap. */
.wf-magic-card {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, margin-top .35s cubic-bezier(.16, 1, .3, 1);
}
.wf-magic-open .wf-magic-card { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
.wf-magic-open .wf-flow-btn { box-shadow: 0 8px 22px rgba(50, 188, 238, .20); }

/* De zichtbare kaart (gradient-rand). overflow + min-height:0 laten 'm netjes dicht-/openklappen. */
.wf-magic-cardinner {
  overflow: hidden; min-height: 0;
  /* Witte vulling + gradient-rand via padding-box/border-box. */
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #b0d136, #da176c, #32bcee) border-box;
  border: 3px solid transparent; border-radius: 22px;
  box-shadow: 0 16px 40px rgba(1, 6, 20, .12); padding: 22px;
}

.wf-magic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.wf-magic-head-main { display: flex; align-items: center; gap: 11px; }
.wf-magic-headicon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(176, 209, 54, .16); display: inline-flex; align-items: center; justify-content: center; }
.wf-magic-headicon img { width: 25px; height: 25px; object-fit: contain; display: block; }
.wf-magic-title { font-weight: 600; font-size: 18px; color: #000229; line-height: 1.25; }
/* Taalvlag op de magic card (alleen bij een vertaaltab): netjes inline naast de titel. */
.wf-magic-langflag { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; }
.wf-magic-langflag .wf-langflag { width: 18px; height: 18px; }
.wf-magic-sub { font-size: 14px; color: #8a93a3; line-height: 1.2; margin-top: 1px; }
.wf-magic-quota { flex: none; max-width: 150px; text-align: right; font-size: 11.5px; line-height: 1.45; color: #8a93a3; }
.wf-magic-quota b { color: #7d9a1f; }
/* Vanaf 80% verbruikt oranje: dezelfde drempel en dezelfde kleur als in het fotovenster
   (.wf-aif-tegoed), zodat het overal hetzelfde signaal is. */
.wf-magic-quota.-bijna,
.wf-magic-quota.-bijna b { color: var(--wf-warning, #dc9e2f); }

.wf-magic-sectlabel { font-size: 14px; font-weight: 600; color: #8a93a3; margin-bottom: 11px; }

.wf-magic-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
/* Werkt als <div> (demo) én als echte <button> (foto-picker): daarom padding/border-reset.
   Dun, licht kader; het beeld wordt gestretcht en vult het hele kader. */
.wf-magic-thumb {
  position: relative;
  width: 104px; height: 68px; border-radius: 10px; overflow: hidden;   /* iets groter + breder in verhouding */
  padding: 0; border: 2px solid #b0d136; background: #eef1f6;   /* groene 2px rand op álle thumbs */
  display: flex; align-items: center; justify-content: center; color: #b6bcc8; cursor: pointer;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.wf-magic-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-magic-thumb:hover { transform: translateY(-2px); }
/* Hoofdfoto: 3px blauwe rand + "main"-tabje vast aan de bovenrand (midden), boven op de foto. */
.wf-magic-thumb.sel { border: 3px solid #32bcee; }
.wf-magic-thumb-main {
  display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
  padding: 1px 7px 2px; border-radius: 0 0 6px 6px; background: #32bcee; color: #fff;
  font-size: 8.5px; font-weight: 800; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase;
  pointer-events: none;
}
.wf-magic-thumb.sel .wf-magic-thumb-main { display: block; }

.wf-magic-textarea-wrap { position: relative; }
/* Grote schermen: 70% breedte i.p.v. de volle kolombreedte. */
@media (min-width: 992px) {
  .wf-magic-textarea-wrap { max-width: 70%; }
}
.wf-magic-textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #e3e7ee; border-radius: 14px;
  padding: 12px 42px 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.4; color: #000229; resize: none;
  overflow-y: hidden; /* groeit mee via wf-composer.js, geen scrollbalk nodig */
  min-height: 84px; /* 3 regels, op alle schermtypes gelijk (14px * 1.4 * 3 + 24px padding),
                       i.p.v. te vertrouwen op het rows="3"-attribuut. */
  transition: border-color .2s, box-shadow .2s;
}
.wf-magic-textarea:focus { border-color: #32bcee; box-shadow: 0 0 0 3px rgba(50, 188, 238, .15); outline: none; }
/* Werkt als icoon (demo) én als echte knop (mic met data-wf-mic in de flow-preview). */
.wf-magic-mic { position: absolute; right: 14px; bottom: 13px; color: #9aa2b1; font-size: 15px; background: none; border: 0; padding: 0; line-height: 1; cursor: pointer; }
.wf-magic-mic:hover { color: #32bcee; }

.wf-magic-actions { display: flex; justify-content: flex-start; margin-top: 16px; }

/* ── Donker (data-bs-theme="dark") voor de nieuwe componenten ───────────────── */
:root[data-bs-theme="dark"] .wf-panel { background: #1c1f26; border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .wf-actionbar { border-top-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .wf-magic-cardinner { background: linear-gradient(#1c1f26, #1c1f26) padding-box, linear-gradient(135deg, #b0d136, #da176c, #32bcee) border-box; }
:root[data-bs-theme="dark"] .wf-magic-title, :root[data-bs-theme="dark"] .wf-magic-sectlabel { color: #e6eaf0; }
:root[data-bs-theme="dark"] .wf-magic-thumb { background: #2a3040; color: #6b7688; }
:root[data-bs-theme="dark"] .wf-magic-textarea { background: #22262f; border-color: rgba(255, 255, 255, .12); color: #e6eaf0; }

/* ── Stap-badge (gradient-pil met nummer) ────────────────────────────────────
 * De "Stap 1"-badge uit het flow-ontwerp: bewegende merk-gradient met een wit
 * cijferbolletje links. Gebruik bij stapsgewijze flows.
 *   <span class="wf-step-badge"><span class="wf-step-badge-num">1</span><span class="wf-step-badge-label">Stap 1</span></span> */
.wf-step-badge {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px 0 5px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%);
  background-size: 200% 100%;
  animation: wf-ai-drift 10s ease-in-out infinite;   /* zelfde drift als de AI-knop */
  box-shadow: 0 4px 12px rgba(50, 188, 238, .22);
}
.wf-step-badge-num { flex: none; width: 26px; height: 26px; border-radius: 9999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #a12359; }
.wf-step-badge-label { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .wf-step-badge { animation: none; } }

/* ── Dropzone (upload) ───────────────────────────────────────────────────────
 * 1:1 uit het flow-ontwerp: een licht vlak met een gestreepte merk-gradient-rand
 * (als inline-SVG achtergrond) en een gradient-cloud-icoon dat op hover opschaalt.
 *   <div class="wf-dropzone">
 *     <i class="bi bi-cloud-arrow-up wf-dropicon"></i>
 *     <div class="wf-dropzone-title">Sleep uw foto's hierheen of klik om te kiezen</div>
 *     <div class="wf-dropzone-hint">…</div>
 *   </div>
 * (Voor de bestaande flow-upload bestaat ook .wf-flow-dropzone in flows.css; dít is de
 *  nieuwe systeembrede variant.) */
.wf-dropzone {
  border-radius: 18px; padding: 27px 24px; text-align: center; cursor: pointer;
  background-color: #fafcff;
  /* Gestreepte gradient-rand (groen→roze→blauw) als SVG, zodat de rand écht de merkgradient is. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='wfg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23b0d136'/%3E%3Cstop offset='0.5' stop-color='%23da176c'/%3E%3Cstop offset='1' stop-color='%2332bcee'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='100%25' height='100%25' rx='18' ry='18' fill='none' stroke='url(%23wfg)' stroke-width='2.5' stroke-dasharray='10 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  transition: background-color .25s, box-shadow .25s;
}
.wf-dropzone:hover, .wf-dropzone.is-dragover { background-color: #f2f8fe; box-shadow: 0 8px 26px rgba(50, 188, 238, .14); }
/* Toetsenbord-focus (tabindex="0", nodig zodat plakken/Ctrl+V op de dropzone kan vuren) — zonder dit
   zou een Tab-gebruiker geen idee hebben waar hij is. */
.wf-dropzone:focus-visible { outline: 3px solid rgba(50, 188, 238, .5); outline-offset: 2px; background-color: #f2f8fe; }
.wf-dropicon {
  font-size: 46px; display: inline-block; line-height: 1; margin-bottom: 18px;
  background: linear-gradient(135deg, #b0d136, #da176c, #32bcee);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.wf-dropzone:hover .wf-dropicon { transform: scale(1.08); }
.wf-dropzone-title { font-family: inherit; font-weight: 700; font-size: 16px; color: #0e1c2e; }
.wf-dropzone-hint { font-family: inherit; font-size: 14px; color: #6b7a8d; margin-top: 7px; }
:root[data-bs-theme="dark"] .wf-dropzone { background-color: #1c1f26; }
:root[data-bs-theme="dark"] .wf-dropzone-title { color: #e6eaf0; }

/* Compacte variant: voor één klein bestand naast een invoerveld (bv. de betaal-QR bij een factuur),
 * waar de volle dropzone het formulier zou overheersen. Zelfde rand en gedrag, alles kleiner en het
 * icoon naast de tekst in plaats van erboven.
 *   <div class="wf-dropzone wf-dropzone-sm"> … </div> */
.wf-dropzone-sm { padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-align: left; }
.wf-dropzone-sm .wf-dropicon { font-size: 26px; margin-bottom: 0; }
.wf-dropzone-sm .wf-dropzone-title { font-size: 14px; }
.wf-dropzone-sm .wf-dropzone-hint { font-size: 12px; margin-top: 2px; }

/* Het ontvangeradres onder een regel in een lijst. Iets kleiner en zachter dan de regel erboven: het
 * is een controlegegeven, geen kop — je leest het alleen als je twijfelt of de mail goed gaat. */
/* Ontvangeradressen onder de naam. Het envelopje blijft naast de eerste regel staan (flex:none), de
 * adressen zelf wikkelen per blok: past het tweede adres er niet bij, dan gaat dát hele blok naar de
 * volgende regel — de breuk valt vóór de punt van "· bij her." en nooit midden in een adres. */
/* white-space/overflow terugzetten: .wf-lrow-id .wf-cell-sub zet nowrap + overflow:hidden op elke
   subregel, en die regel klipte deze hele bak nog vóór de blokken hieronder aan wikkelen toekwamen. */
.wf-lrow-id .wf-cell-sub.wf-ontvanger,
.wf-ontvanger { font-size: 11.5px; margin-top: 2px; display: flex; align-items: baseline; gap: 5px;
  min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; }
.wf-ontvanger i { flex: none; font-size: 11px; color: #32bcee; }
.wf-ontvanger-tekst { min-width: 0; display: flex; flex-wrap: wrap; column-gap: 4px; row-gap: 1px; }
/* Past een blok in zijn eentje niet op één regel, dan wikkelt het door in plaats van af te kappen: een
   half mailadres met puntjes erachter kun je niet controleren, en dat is precies waarvoor het er staat.
   De eerste breuk valt nog steeds tussen de blokken (dus vóór de punt van "· bij her."), want de flex-
   container zet het tweede blok eerst op een eigen regel voordat er binnenin gebroken wordt. */
.wf-ontvanger-deel { max-width: 100%; overflow-wrap: anywhere; }

/* ── Verzendstempel onder een knop ───────────────────────────────────────────
 * Een knop die iets verstuurt, met eronder wanneer dat voor het laatst gebeurd is. Gebruikt in het
 * facturenoverzicht onder "origineel", "1e her" en "laatste her".
 *   <div class="wf-sendcol"><button …>1e her</button><span class="wf-sendstamp">…</span></div>
 * De lege <span> blijft staan als er nog niets uitging: zonder die hoogte springen de knoppen in een
 * rij ongelijk uit. */
.wf-sendcol {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  /* Elk blokje staat op zichzelf: knop + oogje + datum horen bij elkaar en niet bij de buurman.
     Een eigen vlak met wat lucht eromheen scheidt ze zonder er drie kaders van te maken. */
  padding: 5px 5px 4px; margin: 0 1px; border-radius: 12px;
  background: rgba(1, 16, 61, .028);
  transition: background-color .2s;
}
.wf-sendcol:hover { background: rgba(50, 188, 238, .09); }
.wf-sendrow { display: flex; align-items: center; gap: 5px; }
/* Losse eindhandelingen op een rij (betaald, crediteren) onder elkaar in plaats van naast elkaar:
 * naast elkaar duwen ze de rij te breed, en het zijn geen stappen in een volgorde maar twee aparte
 * keuzes. De knoppen rekken tot dezelfde breedte zodat het één blokje blijft.
 *   <div class="wf-actiestapel"><button class="wf-badge …">betaald</button><button …>crediteer</button></div> */
/* width:100% — de stapel vult zijn kolom, waardoor élke knop even breed is: zonder dit was de stapel
   zo breed als zijn langste knop, en stond "open" in een rij zonder "crediteer" ineens smaller. */
.wf-actiestapel { display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: none; width: 100%; }
.wf-sendstamp {
  min-height: 13px; font-size: 11px; line-height: 13px; color: #6b7a8d;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.wf-sendstamp i { font-size: 11px; color: #b0d136; }
:root[data-bs-theme="dark"] .wf-sendcol { background: rgba(255, 255, 255, .04); }
:root[data-bs-theme="dark"] .wf-sendcol:hover { background: rgba(50, 188, 238, .14); }
:root[data-bs-theme="dark"] .wf-sendstamp { color: #93a1b3; }

/* Miniatuur van wat er geüpload is, met een kruisje om het weer weg te halen. Hoort bij de dropzone:
 * zodra er een bestand staat vervangt dit blokje de dropzone.
 *   <div class="wf-dropthumb"><img src="…" alt=""><button class="wf-dropthumb-x">…</button></div> */
.wf-dropthumb { position: relative; display: inline-block; border-radius: 14px; background: #fff;
  border: 1px solid rgba(1, 16, 61, .12); padding: 8px; line-height: 0; }
.wf-dropthumb img { width: 96px; height: 96px; object-fit: contain; border-radius: 8px; }
.wf-dropthumb-x {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 9999px;
  border: 0; background: #d81f25; color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(216, 31, 37, .35); transition: transform .2s, background-color .2s;
}
.wf-dropthumb-x:hover { background: #b3181d; transform: scale(1.1); }
:root[data-bs-theme="dark"] .wf-dropthumb { background: #1c1f26; border-color: rgba(255, 255, 255, .14); }

/* ── Voortgangsbalken (gradient) ─────────────────────────────────────────────
 * 1:1 uit het systeemelementen-ontwerp. Track + gradient-fill; drie maten.
 *   <div class="wf-prog wf-prog-md"><div class="wf-prog-fill" style="width:65%"></div></div>
 * Maten: -sm (6px) · -md (10px, standaard) · -lg (14px). Zet de breedte van .wf-prog-fill in %. */
.wf-prog { height: 10px; background: #eceef4; border-radius: 9999px; overflow: hidden; }
.wf-prog-sm { height: 6px; }
.wf-prog-lg { height: 14px; }
.wf-prog-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #b0d136, #da176c, #32bcee); transition: width .5s cubic-bezier(.22, 1, .36, 1); }
:root[data-bs-theme="dark"] .wf-prog { background: #2a3040; }

/* ── Spinners (merk-gradient) ────────────────────────────────────────────────
 * 1:1 uit het systeemelementen-ontwerp. Twee varianten, elk in drie maten. Maat en
 * ringdikte via de custom properties --sz en --th (op de maat-modifiers gezet).
 *
 *   Volledige ring:  <span class="wf-spinner wf-spinner-md"></span>
 *   Deels gradient:  <span class="wf-spinner-part wf-spinner-part-md"></span>
 * Maten: -sm · -md (standaard) · -lg. */
@keyframes wf-spin { to { transform: rotate(360deg); } }

.wf-spinner {
  --sz: 38px; --th: 4px;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  background: conic-gradient(from 0deg, #32bcee, #b0d136, #da176c, #32bcee);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--th)), #000 0);
  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--th)), #000 0);
  animation: wf-spin 1.3s linear infinite;
}
.wf-spinner-sm { --sz: 24px; --th: 3px; }
.wf-spinner-lg { --sz: 52px; --th: 5px; }

/* Deels-gradient: grijze "geul" (::before) + draaiende gradient-boog (::after). */
.wf-spinner-part { --sz: 38px; --th: 4px; position: relative; width: var(--sz); height: var(--sz); }
.wf-spinner-part::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #e9ecf3;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--th)), #000 0);
  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--th)), #000 0);
}
.wf-spinner-part::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 0, 0, 0) 0deg, #b0d136 30deg, #da176c 90deg, #32bcee 150deg, rgba(0, 0, 0, 0) 150deg);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--th)), #000 0);
  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--th)), #000 0);
  animation: wf-spin 1.3s linear infinite;
}
.wf-spinner-part-sm { --sz: 24px; --th: 3px; }
.wf-spinner-part-lg { --sz: 52px; --th: 5px; }
:root[data-bs-theme="dark"] .wf-spinner-part::before { background: #3a4150; }

/* ── Statistiekenbalk (.wf-stats) ────────────────────────────────────────────
 * 1:1 uit Claude Design "Webfix-CMS-main" (STATS CARD). Compacte ivory kaart met een
 * "Statistieken"-pil op de bovenrand, twee rijen:
 *   Rij 1 — gecentreerde cijfers + scheidingslijntjes, chevron (in-/uitklappen) én sluitknop (×)
 *           rechts naast elkaar (× altijd rechts van de chevron, .wf-stats-btns).
 *   Rij 2 — uitsplitsing (meerprijs-modules, top templates), "Meer stats bekijken"-link.
 *           Gescheiden van rij 1 door een dunne lijn.
 *
 * De × stond eerder op rij 2 zelf — daardoor onbereikbaar zodra je had ingeklapt (rij 2 verdwijnt
 * dan juist). Nu staat 'm altijd op rij 1, dus je kunt de hele kaart ook ingeklapt nog sluiten.
 *
 *   <div class="wf-stats"><span class="wf-stats-tab">…</span>
 *     <div class="wf-stats-row1">
 *       <span class="wf-stats-spacer"></span>  (spiegelt de knoppenbreedte, voor echt centreren)
 *       <div class="wf-stats-row">
 *         <div class="wf-stat"><span class="wf-stat-ic -pink"><i class="bi bi-people"></i></span>
 *           <span class="wf-stat-txt"><span class="wf-stat-num">426</span> <span class="wf-stat-lbl">klanten</span></span></div>
 *         <span class="wf-stats-div"></span> …
 *       </div>
 *       <div class="wf-stats-btns">
 *         <button class="wf-stats-btn wf-stats-collapse"><i class="bi bi-chevron-up"></i></button>
 *         <button class="wf-stats-btn wf-stats-close"><i class="bi bi-x-lg"></i></button>
 *       </div>
 *     </div>
 *     <div class="wf-stats-meta">
 *       <div class="wf-stats-meta-txt">…chips + "Meer stats bekijken"…</div>
 *     </div>
 *   </div> */
.wf-stats {
  position: relative; margin-top: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  border: 1px solid rgba(1, 16, 61, .08); border-radius: 24px; padding: 25px 26px 22px;
}
.wf-stats-tab {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 13px;
  border-radius: 9999px; background: #fff; border: 1px solid rgba(1, 16, 61, .08);
  font-weight: 800; font-size: 11.5px; color: #000229; white-space: nowrap;
}
.wf-stats-tab i { font-size: 10px; color: #da176c; }

.wf-stats-row1 { display: flex; align-items: center; gap: 12px; }
/* Groepje van chevron + × rechts op rij 1 (zie .wf-stats-btns hieronder). Spiegelt de breedte van
   dat groepje zodat de cijfers echt op het midden van de kaart centreren, niet op het midden van
   (kaart minus knoppengroep). :has() omdat oudere pagina's nog maar 1 knop (chevron) in rij 1 hebben
   en dan gewoon de smallere 30px-standaard moeten houden — geen aparte modifier-class nodig. */
.wf-stats-spacer { flex: none; width: 30px; }
.wf-stats-row1:has(.wf-stats-btns) .wf-stats-spacer { width: 64px; }
/* Breekt af naar een tweede regel in plaats van horizontaal te scrollen. Met `nowrap` + `overflow-x:auto`
   verscheen er een scrollbalk zodra de cijfers net niet pasten, en dan staat een deel van je kerncijfers
   buiten beeld — precies wat je op een dashboard niet wil. Zelfde aanpak als .wf-stats-sub hieronder. */
.wf-stats-row { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; row-gap: 14px; overflow-x: visible; }
/* Onder een breed scherm passen zes cijfers net niet op één regel (op 1440 kwam de rij 38px tekort
   en viel "585 e-mail" er alleen onder, met een gat ernaast). Een iets krappere tussenruimte houdt
   ze bij elkaar; het scheelt alleen lucht, geen leesbaarheid. */
@media (max-width: 1599.98px) { .wf-stats-row { column-gap: 14px; } }
/* Onder 1200px wikkelt de rij hoe dan ook. Een streepje tussen twee cijfers heeft dan geen
   betekenis meer — het bleef als los verticaal lijntje aan het begin of eind van een regel hangen,
   wat eruitziet als een weeffout. Weg dus; de tussenruimte scheidt daar al genoeg. */
@media (max-width: 1199.98px) { .wf-stats-div { display: none; } }
.wf-stat { display: flex; align-items: center; gap: 9px; flex: none; }
.wf-stat-ic {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px;
  background: rgba(1, 16, 61, .06); color: #5F6368;
}
.wf-stat-ic.-pink  { background: rgba(218, 23, 108, .10); color: #da176c; }
.wf-stat-ic.-blue  { background: rgba(50, 188, 238, .10); color: #1f8fbb; }
.wf-stat-ic.-green { background: rgba(176, 209, 54, .18); color: #6f8a1b; }
.wf-stat-ic.-amber { background: rgba(220, 158, 47, .14); color: #b07d1e; }
.wf-stat-ic.-title { background: rgba(161, 35, 89, .10); color: #a12359; }
.wf-stat-ic.-red   { background: rgba(216, 31, 37, .10); color: #d81f25; }
.wf-stat-txt { white-space: nowrap; }
.wf-stat-num { font-weight: 800; font-size: 16px; color: #000229; }
.wf-stat-lbl { font-size: 12px; font-weight: 600; color: #888B95; }
.wf-stats-div { width: 1px; height: 22px; background: rgba(1, 16, 61, .08); flex: none; }

/* Rij 2 — uitsplitsing + "Meer stats bekijken", gescheiden door een lijn. */
.wf-stats-meta {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(1, 16, 61, .06);
  display: flex; align-items: flex-end; gap: 12px;
}
.wf-stats-meta-txt {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 8px; font-size: 12px; color: #9aa2b1;
}
.wf-stats-meta-txt b { color: #5F6368; font-weight: 700; }
.wf-stats-meta-sep { color: #d8dce3; }
.wf-stats-chip { display: inline-flex; padding: 1px 7px; border-radius: 6px; background: rgba(1, 16, 61, .07); color: #3d4453; font-weight: 800; }
.wf-stats-meta-txt a { color: #9aa2b1; font-weight: 600; text-decoration: none; }
.wf-stats-meta-txt a:hover { color: #1f8fbb; text-decoration: underline; }

/* In-/uitklappen + sluiten (wf-tables.js). Ingeklapt verdwijnt alleen rij 2 (uitsplitsing);
   rij 1 met de cijfers en de knoppen blijft altijd zichtbaar. Gesloten (×) verdwijnt de hele kaart
   en verschijnt de "Statistieken"-link naast Exporteren. De × staat bewust op rij 1, naast de
   chevron — op rij 2 zou 'm onbereikbaar zijn zodra je juist hebt ingeklapt. */
.wf-stats-btns { flex: none; display: flex; align-items: center; gap: 4px; }
.wf-stats-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9999px; border: none; background: transparent;
  color: #9aa2b1; cursor: pointer; font-size: 13px; transition: background .2s, color .2s, transform .3s;
}
.wf-stats-btn:hover { background: rgba(1, 16, 61, .05); color: #5F6368; }
/* Ingeklapt verdwijnt alléén rij 2 (uitsplitsing + de scheidingslijn errboven) — de hoofdrij met
   de cijfers blijft altijd zichtbaar en gecentreerd. Pas het kruisje (×) verbergt de hele kaart. */
.wf-stats.is-collapsed .wf-stats-meta { display: none; }
.wf-stats.is-collapsed .wf-stats-collapse { transform: rotate(180deg); }
.wf-stats.is-hidden { display: none; }

/* Alleen zichtbaar in de ingeklapte staat op een smal scherm — zie het mobiele blok hieronder. */
.wf-stats-meer { display: none; }

/* ── Statistiekenbalk op een smal scherm ─────────────────────────────────────
 * Zes tegels onder elkaar maakten deze balk 330px hoog op een telefoon en 660px op 320px: je
 * scrolde een heel scherm statistiek voordat de lijst begon. Daarbij bleven de scheidingsstreepjes
 * als losse verticale lijntjes zweven zodra de tegels wikkelden, en dreven de chevron en het
 * kruisje halverwege de kolom weg omdat ze verticaal gecentreerd stonden naast een hoge rij.
 *
 * Op mobiel start de balk daarom ingeklapt (wf-tables.js) en toont dan één regel; uitgeklapt staan
 * de tegels in twee kolommen. De knoppen staan vast rechtsboven. */
@media (max-width: 767.98px) {
  .wf-stats { padding: 18px 16px 16px; }
  .wf-stats-row1 { align-items: flex-start; gap: 0; }
  .wf-stats-spacer { display: none; }
  .wf-stats-btns { position: absolute; top: 12px; right: 12px; }

  /* Twee kolommen in plaats van een gecentreerde wikkelende rij; de streepjes ertussen hebben in
     een raster geen betekenis meer. */
  .wf-stats-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; justify-content: stretch; }
  .wf-stats-div { display: none; }
  .wf-stat { min-width: 0; }
  .wf-stat-txt { white-space: normal; }

  /* Ingeklapt: alleen het eerste cijfer plus "statistieken tonen". */
  .wf-stats.is-collapsed .wf-stats-row { display: flex; gap: 10px; justify-content: flex-start; }
  .wf-stats.is-collapsed .wf-stat:not(:first-child) { display: none; }
  .wf-stats.is-collapsed .wf-stats-meer { display: inline-flex; align-items: center; }

  /* De meta-regel stapelt; de losse | ertussen zou dan alleen op een regel staan. */
  .wf-stats-meta-txt { justify-content: flex-start; }
  .wf-stats-meta-sep { display: none; }
  .wf-stats-meta-txt > span { flex: 1 1 100%; }
}
.wf-stats-meer { font-size: 12px; font-weight: 600; color: #9aa2b1; align-self: center; }
:root[data-bs-theme="dark"] .wf-stats-meer { color: #7b8393; }

/* Sub-balk: een tweede cijferrij (bv. Legacy) ónder de hoofdrij, binnen dezelfde kaart. Klapt mee
   weg bij inklappen (chevron); het kruisje (×) verbergt de hele kaart. Een eigen label links. */
.wf-stats-sub {
  margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(1, 16, 61, .06);
  display: flex; align-items: center; gap: 14px;
}
.wf-stats-sub-label {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: #9aa2b1;
}
.wf-stats-sub-label i { color: #1f8fbb; font-size: 12px; }
.wf-stats-sub .wf-stats-row { flex-wrap: wrap; overflow-x: visible; row-gap: 12px; }
.wf-stats.is-collapsed .wf-stats-sub { display: none; }

/* Heropen-subtab in de tabbalk (alleen op het admin-dashboard): wf-tables.js toont deze wrap door de
   inline display:none weg te halen → valt terug op deze block-default. Eigen klasse i.p.v. .wf-subrow
   (die is standaard display:none). De stijlgids-subtab-onderdelen (divider + subrow) staan standaard óók
   op display:none, dus binnen deze wrap forceren we ze zichtbaar. */
.wf-stats-subrow { display: block; }
.wf-stats-subrow .wf-subrow-divider,
.wf-stats-subrow .wf-subrow { display: block; }

/* Dashboard-variant (-dash): geen aparte detailrij, alle tegels staan in de hoofdrij en mogen op
   smallere schermen doorlopen naar een tweede regel. De chevron vouwt hier de tégelrij zelf op
   (er is geen rij 2 om te verbergen). Ingeklapt blijft alleen de smalle balk met de "Statistieken"-
   pil en de chevron over. */
.wf-stats.-dash .wf-stats-row { flex-wrap: wrap; overflow-x: visible; row-gap: 14px; }
.wf-stats.-dash.is-collapsed .wf-stats-row,
.wf-stats.-dash.is-collapsed .wf-stats-spacer { display: none; }
.wf-stats.-dash.is-collapsed { padding-top: 16px; padding-bottom: 16px; }

/* Rustige tekstlink naast de kaartkop (Exporteren, Prijzen, Statistieken). */
.wf-link-soft {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13px; color: #9aa2b1; text-decoration: none;
  border: none; background: transparent; padding: 0; cursor: pointer;
}
.wf-link-soft:hover { color: #5F6368; text-decoration: underline; }
.wf-link-soft i { font-size: 11.5px; }
.wf-link-divider { width: 1px; height: 16px; background: rgba(1, 16, 61, .12); }
.wf-head-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ── Overzichtskaart met tabel (.wf-tcard) ───────────────────────────────────
 * 1:1 uit Claude Design "Ivory Stats & Klantentabel" (TABLE CARD): glossy kaart met
 * kop + filterpillen, een strakke tabel met uppercase-koppen en ronde actieknopjes,
 * en een voettekst met telling + paginering. Systeembreed voor admin-overzichten. */
.wf-tcard {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  border: 1px solid rgba(1, 16, 61, .08); border-radius: 24px;
}
/* Glossy sheen — puur decoratief, mag geen klikken opvangen. */
.wf-tcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 30%);
}
.wf-tcard > * { position: relative; z-index: 1; }

/* Kop + filters op één regel, verticaal gecentreerd — titel en velden op dezelfde hoogte
   (1:1 uit Claude Design "Webfix-CMS-main", de MERGED KLANTEN CARD). */
.wf-tcard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 26px 26px 18px; }
.wf-tcard-title { margin: 0; font-weight: 800; font-size: 21px; color: #000229; }
.wf-tcard-sub { margin: 6px 0 0; font-size: 14px; color: #888B95; max-width: 460px; }
/* Filterregel onder de kop. De velden delen de breedte gelijk op, zodat vier filters op één regel
   passen in plaats van dat de laatste als eenling naar een derde regel valt; onder de 180px per veld
   wikkelen ze alsnog, want een dropdown waarin niets meer leesbaar is helpt niemand. */
.wf-tcard-tools { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px 30px 22px; }
.wf-tcard-tools > .wf-pill-field { flex: 1 1 180px; min-width: 180px; }

/* Filterveld als pil (zoekveld en selects) — compact, zelfde hoogte als de kop ernaast. */
.wf-pill-field {
  display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px;
  background: #fff; border: 1px solid rgba(1, 16, 61, .09); border-radius: 9999px;
}
.wf-pill-field > i { color: #9aa2b1; font-size: 12.5px; flex: none; }
.wf-pill-field input, .wf-pill-field select {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 13px; color: #000229; appearance: none; cursor: inherit;
}
.wf-pill-field input { width: 180px; }
.wf-pill-field select { font-weight: 600; cursor: pointer; }
.wf-pill-field.-grow { flex: 1 1 340px; }
.wf-pill-field.-grow input { width: auto; }

.wf-dtable-wrap { overflow-x: auto; padding: 0 10px 8px; }
.wf-dtable { width: 100%; border-collapse: collapse; }
.wf-dtable th {
  text-align: left; padding: 12px 18px; font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: #9aa2b1;
  border-bottom: 1px solid rgba(1, 16, 61, .10); white-space: nowrap;
}
.wf-dtable td { padding: 14px 18px; border-bottom: 1px solid rgba(1, 16, 61, .07); font-size: 13.5px; color: #000229; }
.wf-dtable tbody tr { transition: background .18s; }
/* Klikbare rij (wf-tables.js volgt data-href). */
.wf-dtable tbody tr.wf-row-link { cursor: pointer; }
.wf-dtable tbody tr:hover { background: rgba(1, 16, 61, .028); }
.wf-dtable tbody tr:last-child td { border-bottom: none; }
.wf-dtable .-right { text-align: right; }
.wf-dtable .-center { text-align: center; }
.wf-dtable .-muted { color: #c7cbd3; font-weight: 600; }
.wf-dtable a.-link { color: #1f8fbb; font-weight: 600; }

/* Avatar-rondje met initialen; kleurvariant per rij (‑1 t/m ‑4). */
.wf-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 9999px; color: #fff;
  font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #da176c, #a12359);
}
.wf-avatar.-c2 { background: linear-gradient(135deg, #32bcee, #1f8fbb); }
.wf-avatar.-c3 { background: linear-gradient(135deg, #b0d136, #6f8a1b); }
.wf-avatar.-c4 { background: linear-gradient(135deg, #dc9e2f, #b07d1e); }
/*  Staat er een profielfoto, dan vult die het rondje. Het rondje blijft dus de baas over de vorm —
    daarom overflow:hidden en een foto die zichzelf bijsnijdt in plaats van uitrekt. */
.wf-avatar { overflow: hidden; }
.wf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-avatar.-sm { width: 32px; height: 32px; font-size: 11.5px; }
.wf-avatar.-lg { width: 56px; height: 56px; font-size: 18px; }
/* Hoe ver deze klant met zijn aanbieding is, op de plek van het initialen-rondje en alleen op de
 * tabbladen waar hij al verstuurd is. Drie standen in de volgorde waarin een klant ze doorloopt:
 * rood = nooit geopend, amber = geopend maar nog geen besluit, groen met vinkje = akkoord. Groen is
 * dus voorbehouden aan het einddoel, en aan de kleur alleen zie je al hoe de stapel ervoor staat.
 *
 * Alle drie even breed, zodat de bedrijfsnamen ernaast op één lijn blijven staan -- anders schuift
 * elke rij een paar pixels op en leest de kolom onrustig. Smal gehouden en "Niet bekeken" breekt over
 * twee regels: dit blokje staat in de plaats van een rondje van 38px, en elke pixel die het breder is
 * gaat rechtstreeks van de bedrijfsnaam ernaast af. */
.wf-bekeken {
  flex: none; width: 62px; min-height: 38px; border-radius: 10px; padding: 3px 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  font-weight: 700; font-size: 10.5px; letter-spacing: .01em; text-align: center; line-height: 1.15;
  white-space: normal;
  background: rgba(216, 31, 37, .10); border: 1px solid rgba(216, 31, 37, .34); color: #b0181d;
}
.wf-bekeken .bi { font-size: 13px; }
.wf-bekeken.-bekeken {
  background: rgba(220, 158, 47, .14); border-color: rgba(176, 125, 30, .40); color: #8a5f14;
}
.wf-bekeken.-akkoord {
  background: rgba(176, 209, 54, .18); border-color: rgba(95, 122, 18, .42); color: #5f7a12;
}
/* Nog geen persoonlijke mail (Hotlist): neutraal, het is nog geen uitslag. */
.wf-bekeken.-geen {
  background: rgba(1, 16, 61, .05); border-color: rgba(1, 16, 61, .18); color: #5a6070;
}
/* Datum en tijd klein onder de stand (Tom, 02-10-2026). */
.wf-bekeken-op {
  display: block; margin-top: 1px; font-weight: 600; font-size: 9px; letter-spacing: 0; opacity: .85;
  white-space: nowrap;
}

.wf-cell-id { display: flex; align-items: center; gap: 12px; line-height: 1.3; }
.wf-cell-title { font-weight: 700; font-size: 14px; color: #000229; }
.wf-cell-sub { font-size: 12.5px; color: #9aa2b1; }

/* Statuspil met stipje. */
.wf-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px;
  font-weight: 700; font-size: 12px; white-space: nowrap;
  background: rgba(1, 16, 61, .055); color: #888B95;
}
.wf-tag::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: #b7bcc6; }
.wf-tag.-ok    { background: rgba(176, 209, 54, .18); color: #5f7a12; }
.wf-tag.-ok::before { background: #7d9a1f; }
.wf-tag.-info  { background: rgba(50, 188, 238, .14); color: #1f8fbb; }
.wf-tag.-info::before { background: #32bcee; }
.wf-tag.-warn  { background: rgba(220, 158, 47, .16); color: #b07d1e; }
.wf-tag.-warn::before { background: #dc9e2f; }
.wf-tag.-bad   { background: rgba(216, 31, 37, .10); color: #d81f25; }
.wf-tag.-bad::before { background: #d81f25; }
/* Zonder stip (bv. inline statuslabel in een cel). */
.wf-tag.-plain::before { display: none; }

/* Rond actieknopje in de acties-kolom. */
.wf-ico-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px;
  border: none; padding: 0; border-radius: 9999px; cursor: pointer; font-size: 14px;
  background: rgba(50, 188, 238, .10); color: #1f8fbb; transition: background .2s, color .2s;
}
.wf-ico-btn:hover { background: #32bcee; color: #fff; }
.wf-ico-btn.-pink  { background: rgba(218, 23, 108, .10); color: #c2135f; }
.wf-ico-btn.-pink:hover { background: #da176c; color: #fff; }
.wf-ico-btn.-green { background: rgba(176, 209, 54, .20); color: #5f7a12; }
.wf-ico-btn.-green:hover { background: #8aaa1e; color: #fff; }
.wf-ico-btn.-red   { background: rgba(216, 31, 37, .10); color: #d81f25; }
.wf-ico-btn.-red:hover { background: #d81f25; color: #fff; }
.wf-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.wf-actions form { margin: 0; }


/* ── De beheerpagina's van de klant (/dashboard/Account, Password, Gebruikers, Finance,
   e-mailtemplates, Domein & e-mail) ──────────────────────────────────────────
   Deze schermen zijn geen moduleschermen, maar dezelfde regels gelden: t/m iPad liggend is alles
   wat je aanraakt minstens 44 pixels, en een knop hoort onze chip te zijn. De regels staan onder
   .webfix-beheer zodat ze precies hier gelden en niet in het hele dashboard (Tom, 04-09-2026). */
@media (max-width: 1024.98px) {
  /*  Een tabblad is overal even hoog: 41px in het ontwerp, maar t/m iPad liggend 44 zodat je
      hem raakt. Dit geldt voor elke .wf-tabx, niet alleen in het beheer. */
  .wf-tabx { min-height: 44px; }
  .webfix-beheer .nav-link { min-height: 44px; display: flex; align-items: center; }
  .webfix-beheer .wf-btn,
  .webfix-beheer .wf-badge,
  .webfix-beheer .btn { min-height: 44px; }
  .webfix-beheer .fin-btn-green, .webfix-beheer .fin-btn-line { min-height: 44px; }
  /*  De Webfix AI-knop (vertalen) is 37px in het ontwerp; t/m iPad liggend raak je die niet.
      Buiten een .wf-tcard-head gold de maat nog niet (Tom, 11-09-2026). */
  .webfix-beheer .wf-aibtn { min-height: 44px; }
  .webfix-beheer .wf-ico-link,
  .webfix-beheer .wf-stats-btn { min-width: 44px; min-height: 44px; }
  .webfix-beheer .form-control,
  .webfix-beheer .form-select,
  .webfix-beheer .wf-inp,
  .webfix-beheer .wf-select { min-height: 44px; }
  /*  Een vinkje of schuifje is zestien pixels; het aanraakvlak is het LABEL ernaast. Dat krijgt
      hier lucht boven en onder, zodat de regel 44px hoog is en je hem met een duim raakt. De
      opmaak van Bootstrap blijft staan: het vinkje hangt in de linkermarge van .form-check, dus
      hier niets aan display veranderen — dan plakt het label tegen het vinkje aan. */
  .webfix-beheer .form-check {
    min-height: 44px; display: flex; align-items: center; gap: .5em;
    padding-left: 0; /* de linkermarge van Bootstrap is hier niet nodig: het vinkje staat in de rij */
  }
  .webfix-beheer .form-check > .form-check-input { flex: none; margin: 0; }
  .webfix-beheer .form-check > .form-check-label { margin: 0; }
  /*  Het zoekveld is een pil met een invoerveld erin; dan moet dat veld meerekken, anders tik je
      naast het veld en gebeurt er niets. */
  .webfix-beheer .wf-pill-field { min-height: 44px; align-items: stretch; }
  .webfix-beheer .wf-pill-field > i { align-self: center; }
  .webfix-beheer .wf-pill-field input { align-self: stretch; height: auto; min-height: 44px; }
  /*  Een keuzelijst in zo'n pil (het filter naast het zoekveld, en "rijen per pagina" onderaan)
      hoort net zo goed te raken te zijn als het veld ernaast. */
  .webfix-beheer .wf-pill-field select { align-self: stretch; height: auto; min-height: 44px; }
  .webfix-beheer .wf-perpage { min-height: 44px; }
  /*  Een link die als knop werkt ("Abonnement opzeggen") is ook een aanraakdoel. */
  .webfix-beheer .fin-cancel-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Rijenlijst (.wf-lrow) ────────────────────────────────────────────────────
 * 1:1 uit Claude Design "Webfix-CMS-main" (MERGED KLANTEN CARD): geen kolomkoppen, de rijen
 * lopen randloos door tot de kaartranden (bleed via negatieve marge = de kaart-padding),
 * status is een stip + tekst (geen pil), en de acties zijn subtiele icoon-links i.p.v.
 * gekleurde rondjes. Gebruikt op /admin/clients en /admin/domains.
 *
 *   <div class="wf-list-bleed"><div style="min-width:960px;">
 *     <div class="wf-lrow wf-row-link" data-href="...">
 *       <span class="wf-avatar">JZ</span>
 *       <div class="wf-lrow-id"><div class="wf-cell-title">Naam</div><div class="wf-cell-sub">domein · extra</div></div>
 *       <span class="wf-lrow-status -live">Live</span>
 *       <button class="wf-meekijk"><i class="bi bi-eye"></i>Meekijken</button>
 *       <span class="wf-badge-metal -gold">Premium</span>
 *       <div class="wf-lrow-actions">
 *         <a class="wf-ico-link"><i class="bi bi-box-arrow-up-right"></i></a>
 *         <span class="wf-lrow-div"></span>
 *         <button class="wf-ico-link -del"><i class="bi bi-trash"></i></button>
 *       </div>
 *     </div>
 *   </div></div> */
/* Geen negatieve marge nodig: #wfClientsResults heeft zelf geen padding om te compenseren
   (anders dan het Claude-Design-origineel, dat alles-in-één-div met kaart-padding gebruikt) —
   de rijenlijst staat al vlak tegen de kaartrand. Een -26px marge hier duwt 'm er juist voorbij. */
/*  Aanraakmaten in de kop en de voet van een lijstkaart: t/m iPad liggend is alles minstens 44px.
    Het zoekveld is een pil met een invoerveld erin - dan moet dat veld meerekken, anders tik je naast
    het veld en gebeurt er niets. */
@media (max-width: 1024.98px) {
  .wf-tcard-head .wf-pill-field { min-height: 44px; align-items: stretch; }
  .wf-tcard-head .wf-pill-field > i { align-self: center; }
  .wf-tcard-head .wf-pill-field input { align-self: stretch; height: auto; min-height: 44px; }
  .wf-tcard-head .wf-badge,
  .wf-tcard-head .wf-aibtn { min-height: 44px; }
  .wf-tcard-foot .wf-perpage { min-height: 44px; }
  /*  De paginaknopjes en de knop naar de statistieken van een nieuwsbrief waren 30 en 34 pixels. */
  .wf-pager a, .wf-pager span { min-width: 44px; height: 44px; }
  .wf-stats-btn { min-width: 44px; min-height: 44px; }
  .wf-tcard .wf-flow-btn, .wf-tcard-head .wf-flow-btn { min-height: 44px; }
}


/*  Een blok rijen binnen een kaart die geen modulescherm is (de statistieken en de geblokkeerde
    adressen van de nieuwsbrief). De rijen zelf zijn .wf-ms-row uit module-scherm.css; dit zorgt
    alleen dat het blok netjes tegen de randen van de kaart loopt. */
.wf-nb-rijenblok { display: block; }
.wf-nb-rijenblok .wf-ms-row:first-child { border-top: 0; }

/*  De nieuwsbrieflijst (klant en beheer delen dezelfde partial). Op een breed scherm houden de rijen
    hun kolommen; op een tablet en kleiner wikkelt de rij in plaats van het scherm uit te schuiven -
    de klant zag anders alleen de linkerhelft van zijn nieuwsbrief (Tom, 03-09-2026). */
.wf-nb-rijen { min-width: 960px; }
@media (max-width: 980px) {
  .wf-nb-rijen { min-width: 0; }
  .wf-nb-rijen .wf-lrow { flex-wrap: wrap; gap: 10px 12px; padding: 16px; }
  .wf-nb-rijen .wf-lrow-id { flex: 1 0 100%; min-width: 0; order: 1; }
  .wf-nb-rijen .wf-lrow-status { order: 2; }
  .wf-nb-rijen .wf-badge { order: 3; }
  .wf-nb-rijen .wf-lrow-actions { order: 4; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  /*  Aanraakmaten: de icoontjes in de rij zijn hier de enige manier om iets te doen. */
  .wf-nb-rijen .wf-ico-link { min-width: 44px; min-height: 44px; }
  .wf-nb-rijen .wf-badge { min-height: 44px; }
  /*  De voortgangsbalk van een verzending mag de regel niet uit duwen. */
  .wf-nb-rijen .wf-prog-sm { width: auto; }
}

.wf-list-bleed { margin-top: 18px; overflow-x: auto; }
.wf-lrow {
  display: flex; align-items: center; gap: 18px; padding: 18px 26px;
  border-top: 1px solid rgba(1, 16, 61, .06); transition: background .18s;
}
/* Bovenste rij houdt ZIJN border-top (was: onderdrukt via :first-child) — een tabel/lijst hoort
   altijd een scheidingslijn boven de bovenste rij te tonen, 18px onder de kop (.wf-list-bleed
   hierboven). Zelfde regel als .wf-lrow-block hieronder (/admin/clients). */
.wf-lrow:hover { background: rgba(1, 16, 61, .028); }
/* Dichte variant voor lijsten met veel knoppen per rij (de facturen): smallere tussenruimtes zodat de
   naamkolom niet als enige rekbare kolom wordt platgedrukt. Alleen afstanden, geen andere opmaak. */
.wf-lrow.-dicht { gap: 12px; padding-left: 20px; padding-right: 20px; }
.wf-lrow.wf-row-link { cursor: pointer; }
.wf-lrow-id { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
/* In de dichte variant (facturen) staat de naamkolom bovenaan in plaats van gecentreerd, zodat het
   nummerkader ernaast — dat ook bovenaan staat — er precies mee gelijk loopt. Bij een rij met twee
   regels zakte de naam anders een paar pixels weg terwijl het kader bleef staan. */
.wf-lrow.-dicht > .wf-lrow-id { align-self: flex-start; }
.wf-lrow-id .wf-cell-title, .wf-lrow-id .wf-cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Titelcel mét labels: de naam kapt af, de labels ernaast blijven altijd volledig zichtbaar
   (anders knipt de overflow:hidden hierboven een label achter een lange naam weg). */
.wf-lrow-id .wf-cell-title.-with-labels { display: flex; align-items: center; gap: 8px; overflow: visible; }
.wf-lrow-id .wf-cell-title.-with-labels .wf-cell-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-lrow-id .wf-cell-title.-with-labels > .wf-label { flex: none; }
/* Het klantnummer vóór de naam: klein, grijs en tabulair, zodat de nummers onder elkaar uitlijnen en
 * de naam ernaast de blikvanger blijft. Krimpt nooit mee -- een half nummer is geen nummer.
 * Heet -nr en niet -id, want .wf-cell-id bestaat hierboven al voor een heel ander onderdeel. */
.wf-cell-nr {
  flex: none; font-size: 11.5px; font-weight: 600; color: #9aa2b1;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* Status: stip + tekst, vaste breedte zodat de kolom uitlijnt (geen pil-achtergrond). */
.wf-lrow-status {
  flex: none; width: 118px; display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 13px; color: #888B95; white-space: nowrap; overflow: hidden;
}
.wf-lrow-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b7bcc6; flex: none; }
.wf-lrow-status.-live   { color: #5f7a12; } .wf-lrow-status.-live::before   { background: #7d9a1f; }
.wf-lrow-status.-opbouw { color: #1f8fbb; } .wf-lrow-status.-opbouw::before { background: #32bcee; }
.wf-lrow-status.-temp   { color: #b07d1e; } .wf-lrow-status.-temp::before   { background: #dc9e2f; }
.wf-lrow-status.-unpaid { color: #d81f25; } .wf-lrow-status.-unpaid::before { background: #d81f25; }
/* Neutraal zwart: voor een stand die een feit is en geen signaal — een creditfactuur is niet goed of
   fout, hij hoort er gewoon te zijn. Groen of rood zou er een oordeel van maken. */
.wf-lrow-status.-krediet { width: 190px; color: #000229; } .wf-lrow-status.-krediet::before { background: #000229; }
:root[data-bs-theme="dark"] .wf-lrow-status.-krediet { color: #fff; }
:root[data-bs-theme="dark"] .wf-lrow-status.-krediet::before { background: #fff; }
/* Alleen de ouderdom, zonder stip en zonder het woord ervoor: bij een openstaande factuur zegt "8
 * dagen" alles, en of dat erg is leest de kleur al voor. Scheelt een halve kolom breedte.
 *   <span class="wf-lrow-status -unpaid -alleendagen">34 dagen</span> */
.wf-lrow-status.-alleendagen { width: auto; }
.wf-lrow-status.-alleendagen::before { display: none; }
.wf-lrow-status .wf-status-dagen { font-weight: 600; opacity: .68; }
/* ── Factuurpaneel in de admin-modal (_FactuurPaneel.cshtml) ─────────────────
 * Kop per tab (titel links, knoppen rechts), een voettekst met de acties zoals de flow-preview, en
 * een sleutel/waarde-lijstje voor de totalen.
 *   <div class="wf-fp-kop"><div><div class="wf-fp-titel">…</div></div><div>knoppen</div></div>
 *   <div class="wf-kv"><span>Btw</span><b>€ 58,59</b></div>
 *   <div class="wf-fp-foot">links tekst · rechts knoppen</div> */
/* Lucht tussen de inhoud en de rand van het venster, en meteen de schuifbalk onderin weg.
 *
 * Die twee horen bij elkaar. Een Bootstrap-`.row` trekt zichzelf met een negatieve marge naar buiten
 * (de helft van de kolomruimte aan elke kant); dat is bedoeld om de padding van een omhullende
 * container te compenseren. Hier had het tabblad geen zijpadding, dus stak de rij er 8 pixels buiten
 * en verscheen er een horizontale schuifbalk over de volle breedte van het venster. Met padding op
 * het paneel valt die marge weg tégen de padding — en staat de inhoud meteen niet meer tegen het
 * kader aan (Jenny, 04-09-2026). */
/* Hetzelfde geldt voor het klantpaneel: het tabblad Administratie begint met een `.row g-4`, en die
   stak er 12 pixels buiten. Vandaar dezelfde regel; de tabbladen die geen rij gebruiken krijgen er
   meteen de lucht bij die ze misten. */
.wf-fp .wf-tabpanel,
.wf-kp .wf-tabpanel { padding-left: 14px; padding-right: 14px; }

.wf-fp-kop {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.wf-fp-titel { font-weight: 800; font-size: 19px; color: #000229; line-height: 1.25; }
.wf-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; color: #5F6368; }
.wf-kv + .wf-kv { border-top: 1px solid rgba(1, 16, 61, .06); }
.wf-kv b { color: #000229; }
.wf-kv.-groot { font-size: 15px; } .wf-kv.-groot b { font-size: 17px; }
/* Voettekst met de acties: lijn erboven, adres links, knoppen rechts — zelfde opbouw als de
   flow-preview, zodat een venster met knoppen onderin er overal hetzelfde uitziet. */
.wf-fp-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(1, 16, 61, .10);
}
/* Adres links, knoppen rechts, op één regel. Het invoerveld heeft een eigen maat en het adresblok mag
   krimpen (min-width:0 + flex-shrink), zodat de knoppen blijven staan waar ze staan in plaats van naar
   een regel eronder te springen zodra het veld erbij komt. */
.wf-fp-naar { flex: 1 1 300px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wf-fp-naar .wf-inp { flex: 1 1 180px; max-width: 300px; min-width: 0; height: 38px; padding: 8px 12px; font-size: 13px; }
.wf-fp-knoppen { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }

/* Een bevestiging hoort altijd bovenop te liggen, óók als hij over een ander venster heen komt (zoals
   "Opslaan en verzenden" in de factuurmodal). Bootstrap geeft elke modal dezelfde z-index en dan wint
   degene die het laatst in de pagina staat — de bevestiging verdween daardoor achter de factuur. */
#wfConfirmModal { z-index: 1085; }

/* Het ontvangeradres onderin de verzendmodal in de primary kleur: dát is de regel waarop je controleert
   voordat er iets de deur uit gaat, en die hoort niet in hetzelfde grijs als de rest van de zin. */
.wf-vz-naar { color: #A12359; }
:root[data-bs-theme="dark"] .wf-vz-naar { color: #ea5490; }
.wf-fp-voorbeeld { border: 1px solid rgba(1, 16, 61, .10); border-radius: 14px; overflow: hidden; background: #fff; }
/* Invoervelden in de regeltabel: krapper dan een gewoon formulierveld, anders past een aantal of een
   btw-percentage niet in zijn kolom en zie je alleen het randje. */
[data-fp-regels] td { padding: 8px 10px; }
[data-fp-regels] .wf-inp { padding: 8px 10px; font-size: 13px; }
:root[data-bs-theme="dark"] .wf-fp-titel, :root[data-bs-theme="dark"] .wf-kv b { color: #fff; }
:root[data-bs-theme="dark"] .wf-fp-foot { border-top-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .wf-kv + .wf-kv { border-top-color: rgba(255, 255, 255, .08); }

/* Nummerkader vooraan een rij — waar anders het ronde icoon staat. Voor lijsten waar het nummer het
 * kenmerk is waarop je zoekt (facturen): een strak kadertje leest als een stempel op een document en
 * is op een rij afstand nog te lezen.
 *   <span class="wf-nrkader">9117</span> */
.wf-nrkader {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  /* Vaste breedte, geen min-width: een langer nummer (TEST-9117) maakte het kader breder waardoor de
     naamkolom op die rij verderop begon en de tabel scheef stond. Past het niet, dan kapt hij af. */
  width: 88px; height: 38px; padding: 0 8px; border-radius: 9px;
  /* Blauwe rand in de admin-rolkleur, verder leeg: het nummer moet leesbaar zijn, niet opvallen.
     Een gevuld vlak trok in een lijst van vijftig rijen te veel aandacht naar de kolom vooraan. */
  border: 1px solid #32bcee; background: transparent;
  overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; font-size: 14.5px; letter-spacing: .01em; color: #000229; white-space: nowrap;
  /* Bovenaan meelopen met de eerste regel van de naamkolom, ook als daar drie regels staan: het kader
     hoort bij de klantnaam ernaast en niet bij het midden van de rij. De -1px trekt de rand gelijk met
     de bovenkant van de letters. De datum, status en het bedrag blijven wél gecentreerd — die horen
     bij de rij als geheel. */
  align-self: flex-start; margin-top: -1px;
}

/* Statuskolom met een regel eronder (bijvoorbeeld de betaaldatum). De onderregel lijnt uit met de
 * tekst, niet met de stip — vandaar de inspringing ter breedte van stip + tussenruimte.
 *   <div class="wf-statuscel">
 *     <span class="wf-lrow-status -live">Betaald</span><span class="wf-status-sub">12 aug 2026</span>
 *   </div> */
/* Vaste breedte — meegroeien betekent dat de kolom per rij ergens anders staat. De maat wordt per lijst
   gezet (--wf-statuscel): smal waar alleen "8 dagen" of "Betaald" staat, breed op de tabbladen waar een
   creditfactuur tussen kan zitten ("Creditfactuur → factuur 9117" is nu eenmaal langer). */
/* Ouderdomskleuren op de rand: dezelfde grenzen als de dagenteller ernaast (14 en 30 dagen), zodat de
   twee nooit iets anders beweren. Alleen de rand — het nummer zelf blijft leesbaar zwart. */
.wf-nrkader.-warn  { border-color: #dc9e2f; }
.wf-nrkader.-alarm { border-color: #d81f25; }
:root[data-bs-theme="dark"] .wf-nrkader { color: #fff; }

/* Kader met twee regels: het factuurnummer groot, het debiteurnummer er klein onder — bínnen dezelfde
 * rand. Dat zijn de twee nummers waarmee een regel in de boekhouding terug te vinden is, en samen in
 * één blokje blijft de kolom rustig. Zonder debiteurnummer blijft het kader gewoon één regel hoog.
 *   <span class="wf-nrkader -metdebi">
 *     <span class="wf-nrkader-nr">9117</span><span class="wf-nrdebi">debi 332</span>
 *   </span> */
.wf-nrkader.-metdebi {
  flex-direction: column; gap: 0; height: auto; min-height: 38px; padding: 4px 8px; line-height: 1.1;
}
.wf-nrkader-nr { font-size: 14.5px; font-weight: 700; }

/* Meegroeien met de inhoud, maar wél allemaal even breed. Op de verkoopkant is een factuurnummer
   altijd vier cijfers en volstaat een vaste maat; leveranciersnummers lopen van "OP1792708" tot
   "MOL-NL-R2026.0000961722" en worden dan afgekapt tot iets onherkenbaars.
   Elk kader apart laten groeien geeft een rafelige kolom, dus de breedste bepaalt de breedte voor
   allemaal: --wf-nrw wordt op de lijst gezet (geschat door de view, exact bijgesteld door het script
   in Inkoop.cshtml zodra de tekst gemeten kan worden). */
.wf-nrkader.-breed {
  width: var(--wf-nrw, auto); min-width: 88px; max-width: 320px;
  padding-left: 10px; padding-right: 10px;
}
.wf-nrkader.-breed.-metdebi { padding-left: 10px; padding-right: 10px; }
.wf-nrdebi {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: #888B95; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
:root[data-bs-theme="dark"] .wf-nrdebi { color: #93a1b3; }
.wf-statuscel { flex: none; width: var(--wf-statuscel, 196px); display: flex; flex-direction: column; gap: 1px; }
.wf-statuscel > .wf-lrow-status { width: auto; }
.wf-status-sub { font-size: 11.5px; line-height: 14px; color: #888B95; padding-left: 14px; white-space: nowrap; }
:root[data-bs-theme="dark"] .wf-status-sub { color: #93a1b3; }
/* Datumkolom tussen de naam en de status, in hetzelfde formaat als die naam zodat de twee kolommen op
   dezelfde regel gelijk oplopen. Bovenaan uitgelijnd: de naamkolom eronder kan meerdere regels hebben. */
/* Verticaal gecentreerd, net als de status en het bedrag ernaast — bovenaan uitgelijnd stond hij uit
   de pas met de rest van de rij zodra de naamkolom twee regels had. */
.wf-datumcel {
  flex: none; width: 96px;
  font-size: 14px; font-weight: 600; line-height: 1.3; color: #000229; white-space: nowrap;
}
:root[data-bs-theme="dark"] .wf-datumcel { color: #fff; }

/* "Meekijken" — vaste-breedte pil-knop (zelfde blauw als het accent op de rij). */
.wf-meekijk {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 126px; height: 34px; padding: 0 15px; border-radius: 9999px; border: none;
  background: rgba(31, 143, 187, .10); color: #1f8fbb; font-weight: 700; font-size: 12.5px;
  cursor: pointer; white-space: nowrap; transition: background .18s;
}
.wf-meekijk:hover { background: rgba(31, 143, 187, .18); }
.wf-meekijk i { font-size: 12px; }

/* Pakket-badge — vaste breedte, "metaalkleur" per niveau. */
.wf-badge-metal {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 104px;
  padding: 6px 10px; border-radius: 9999px; font-weight: 700; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; text-align: center;
}
/* ── Package-badges ───────────────────────────────────────────────────────────
 * Legacy Perfectmanage-pakketten = metallic tiers (bronze < silver < gold < platinum).
 * Nieuwe Webfix-pakketten (Budget/Premium/Shop) = de merk-gradient, zoals de Webfix-pil.
 * NB: dit zijn de "standaard" badges; de echte design-labels komen later (zie Stijlgids > Packages). */
.wf-badge-metal.-bronze   { background: linear-gradient(135deg, #e3b485, #c17d42); color: #4a2c11; }
.wf-badge-metal.-silver   { background: linear-gradient(135deg, #e9ecef, #c2c8d0); color: #3a4048; }
.wf-badge-metal.-gold     { background: linear-gradient(135deg, #f2d987, #d9af3c); color: #5c4708; }
.wf-badge-metal.-platinum { background: linear-gradient(135deg, #dfe7ea, #aebfc6); color: #2f4952; }
.wf-badge-metal.-webfix   { background: linear-gradient(90deg, #b0d136, #da176c, #32bcee); color: #fff; box-shadow: 0 3px 9px rgba(50, 188, 238, .25); }
.wf-badge-metal.-muted { background: rgba(1, 16, 61, .045); color: #c7cbd3; font-weight: 600; }
/* Freebie: klant die niets betaalt (familie/vrienden/eigen project). Bewust een eigen, duidelijk
   afwijkende kleur — dit is geen pakketniveau maar "hier gaat geen factuur heen". */
/* Freebie = bewust gratis, en dat is geen tekort maar een keuze — vandaar groen en niet grijs.
   (Stond op blauw en werd nergens gebruikt; groen sluit aan op het Freebie-label naast de naam.) */
.wf-badge-metal.-freebie { background: rgba(176, 209, 54, .22); color: #5f7a12; }

/* ── Incasso-pil (klantenoverzicht) ───────────────────────────────────────────
 * Hoe een klant betaalt, in één compacte pil naast de pakketbadge. Smal en zonder vaste breedte: hij
 * staat er alleen bij de klanten waar hij iets zegt, en mag de naamkolom niet opeten.
 *   <span class="wf-incassopil -actief"><i class="bi bi-arrow-repeat"></i>Incasso</span>
 * Standen: -actief (groen) · -bezig (blauw) · -nodig (amber) · -probleem (rood). */
.wf-incassopil {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 9999px;
  font-weight: 700; font-size: 11.5px; white-space: nowrap;
  background: rgba(1, 16, 61, .05); color: #666c73;
}
.wf-incassopil > i { font-size: 11px; line-height: 1; }
/*  Eén breedte voor alle standen (en voor de lege plek bij een klant zonder melding), zodat de rijen
    in de klantenlijst uitlijnen (Tom, 20-09-2026). */
.wf-incassopil { box-sizing: border-box; width: 116px; justify-content: center; overflow: hidden; }
.wf-incassopil.-leeg { background: none; }
.wf-incassopil.-actief   { background: rgba(176, 209, 54, .2);  color: #4e6711; }
.wf-incassopil.-bezig    { background: rgba(50, 188, 238, .16); color: #1f6c8b; }
.wf-incassopil.-nodig    { background: rgba(220, 158, 47, .18); color: #8a5f10; }
.wf-incassopil.-probleem { background: rgba(216, 31, 37, .14);  color: #b3181d; }

/* Subtiele icoon-links in de actiekolom — geen kleurvlak, alleen kleur bij hover. */
.wf-lrow-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.wf-lrow-actions form { margin: 0; }

/* ── Vaste kolommen in de actiekolom ──────────────────────────────────────────
 * Heeft de ene rij een knop die de andere niet heeft, dan schuift met een gewone
 * flexrij alles ernaast op en staat de tabel schots en scheef. Met deze variant
 * krijgt elke knop een eigen kolom van vaste breedte: ontbreekt hij, dan blijft
 * de kolom leeg en houdt de rest zijn plek.
 *
 *   <div class="wf-lrow-actions -kolommen" style="--wf-kol: 150px 190px 130px">
 *     <span class="wf-lrow-slot">…</span>   <- leeg mag
 *     <span class="wf-lrow-slot">…</span>
 *   </div>
 *
 * De breedtes staan per scherm in --wf-kol, want ze hangen af van de labels die
 * daar staan. Zonder die variabele krijgt elke kolom evenveel ruimte. */
.wf-lrow-actions.-kolommen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-columns: var(--wf-kol, none);
  align-items: center;
  gap: 8px;
}
/* Rechts uitlijnen: de knoppen staan aan het einde van de rij, dus ze horen tegen
 * de rechterkant van hun kolom aan te sluiten en niet in het midden te zweven. */
.wf-lrow-actions.-kolommen > .wf-lrow-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.wf-lrow-actions.-kolommen > .wf-lrow-slot > form { display: contents; }

/* Onder elkaar in één kolom (-stapel). Voor rijen met twee knoppen die naast elkaar niet
 * passen: bij een uitgeklapte sidebar liep de tweede knop over de eerste heen en viel een
 * deel buiten beeld (Tom, 28-09-2026, /admin/early-birds?tab=hotlist). Zet --wf-kol op één
 * breedte; beide knoppen worden dan even breed, met 5px ertussen. */
.wf-lrow-actions.-kolommen.-stapel {
  grid-auto-flow: row;
  grid-template-columns: var(--wf-kol, 1fr);
  gap: 5px;
}
.wf-lrow-actions.-kolommen.-stapel > .wf-lrow-slot { justify-content: stretch; }
.wf-lrow-actions.-kolommen.-stapel > .wf-lrow-slot > .wf-badge { width: 100%; }

/* Een vinkje in een rij dat meteen opslaat -- bedoeld voor één beslissing per regel op een
 * aflooplijst ("betaald", "afgehandeld"). Bewust een <label> om het vakje heen: dan is het woord
 * ernaast ook aanklikbaar en hoef je niet op een vierkantje van 15 pixels te mikken.
 *
 * Geen opslaan-knop erbij; het scherm slaat op bij het aanvinken. Zie de toelichting in
 * Views/Admin/EarlyBirds/Index.cshtml voor waarom dat hier klopt. */
.wf-betaald {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 11px 5px 9px;
  border-radius: 9999px;
  border: 1px solid rgba(1, 16, 61, .12);
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wf-text-soft, #5f6368);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.wf-betaald input { width: 15px; height: 15px; margin: 0; accent-color: var(--wf-green, #b0d136); cursor: pointer; }
.wf-betaald:hover { border-color: rgba(1, 16, 61, .22); }
/* Aangevinkt: groen, zodat je in één blik over de lijst ziet wie er binnen is. */
.wf-betaald:has(input:checked) {
  background: rgba(176, 209, 54, .14);
  border-color: rgba(95, 122, 18, .35);
  color: #5f7a12;
}
.wf-betaald input:disabled { cursor: progress; }

/* De rij vervaagt zodra het vinkje staat: hij hoort vanaf dat moment op een ander tabblad, en pas
 * bij de volgende verversing is hij daar ook echt. Tot die tijd moet hij niet meer meetellen als
 * werk dat nog gedaan moet worden. */
.wf-lrow-block.is-betaald { opacity: .55; }
.wf-lrow-div { width: 1px; height: 20px; background: rgba(1, 16, 61, .08); margin: 0 4px; flex: none; }
.wf-ico-link {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: none; padding: 0; border-radius: 9999px; cursor: pointer; font-size: 13px;
  background: transparent; color: #9aa2b1; text-decoration: none; transition: background .18s, color .18s;
}
.wf-ico-link:hover { background: rgba(50, 188, 238, .10); color: #1f8fbb; }
.wf-ico-link.-del:hover { background: rgba(216, 31, 37, .12); color: #d81f25; }
/* Een icoonknop die een STAND toont in plaats van alleen een handeling: sponsoring staat aan, het bedrag
   is met de hand gezet. Zonder dit zie je pas in de tooltip dat er iets afwijkt van de standaard. */
.wf-ico-link.-actief { color: #c2135f; }
.wf-ico-link.-actief:hover { background: rgba(194, 19, 95, .10); color: #c2135f; }
:root[data-bs-theme="dark"] .wf-ico-link.-actief { color: #f06fa8; }
.wf-ico-link.invisible { pointer-events: none; }
/* Mini-variant: een icoonknop die IN een tekstregel staat (kopiëren achter een mailadres, openen achter een
   domein). 34px zou de regel uit elkaar duwen; dit blijft binnen de regelhoogte. */
.wf-ico-link.-mini { width: 22px; height: 22px; font-size: 11.5px; }

/* Contact en bron als eigen kolom in een aanvraagrij: twee regels onder elkaar, elk met een icoon, de tekst
   afgekapt en een knopje erachter. Vaste breedte zodat de kolom onder elkaar uitlijnt (Tom, 18-09-2026). */
/*  De knop "Bekijk contacts" onder de bedrijfsnaam, en de kaartjes in het venster erachter. Staat
    hier bij de andere .wf-aanvraag-*-regels, want het hoort bij diezelfde rij. */
.wf-aanvraag-contacts { margin-top: 6px; }
.wf-ct-kaart { padding: 14px 16px; border: 1px solid rgba(1, 16, 61, .10); border-radius: 14px; background: #fff; }
.wf-ct-kaart + .wf-ct-kaart { margin-top: 10px; }
.wf-ct-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wf-ct-kop > b { font-weight: 700; font-size: 14.5px; color: var(--wf-black, #000229); }
.wf-ct-rij { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; color: #6b7280; }
.wf-ct-rij + .wf-ct-rij { margin-top: 4px; }
.wf-ct-rij > .bi { flex: none; font-size: 12px; color: #9aa2b1; }
.wf-ct-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-ct-leeg { font-size: 12.5px; color: #9aa2b1; }
:root[data-bs-theme="dark"] .wf-ct-kaart { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .10); }
:root[data-bs-theme="dark"] .wf-ct-kop > b { color: #e7eaf0; }

.wf-aanvraag-cb { flex: 0 1 230px; min-width: 130px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.wf-aanvraag-cb-rij { display: flex; align-items: center; gap: 5px; min-width: 0; color: #6b7280; }
.wf-aanvraag-cb-rij > .bi { flex: none; font-size: 11.5px; color: #9aa2b1; }
.wf-aanvraag-cb-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991.98px) { .wf-aanvraag-cb { flex-basis: 100%; } }
/* Kaart Voortgang in het rapport van een demo-aanvraag: de mijlpalen onder elkaar, met uitleg (Tom, 28-09-2026). */
.wf-voortgang { list-style: none; margin: 0; padding: 0; }
.wf-voortgang > li { display: flex; gap: 10px; padding: 6px 0; position: relative; }
.wf-voortgang > li + li::before { content: ""; position: absolute; left: 13px; top: -6px; height: 12px; border-left: 2px solid #e5e7eb; }
.wf-voortgang-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #eef0f3; color: #9aa0a6; font-size: 13px; }
.wf-voortgang > li.-klaar .wf-voortgang-ic { background: var(--webfix-green, #6f8a1b); color: #fff; }
.wf-voortgang > li.-nu .wf-voortgang-ic { background: var(--wf-pink, #da176c); color: #fff; }
.wf-voortgang-t { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.35; }
.wf-voortgang-kop { font-weight: 600; color: var(--wf-text, #1b1d29); }
.wf-voortgang > li:not(.-klaar):not(.-nu) .wf-voortgang-kop { color: #8b909a; font-weight: 500; }
.wf-voortgang-op { font-weight: 400; color: #6b7280; font-size: 12px; margin-left: 4px; }
.wf-voortgang-uitleg { color: #8b909a; font-size: 12px; }
/* Laatste login onder de status van een lopende demo: groen, oranje (> 5 dagen), rood (> 11 dagen). */
.wf-aanvraag-status { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-aanvraag-inlog { font-size: 11.5px; line-height: 1.3; max-width: 240px; overflow-wrap: anywhere; }
.wf-aanvraag-inlog.-groen { color: #4f8a10; }
.wf-aanvraag-inlog.-oranje { color: #d97706; }
.wf-aanvraag-inlog.-rood { color: #dc2626; }
.wf-aanvraag-inlog.-nooit { color: #8b909a; }
/* Templatekolommetje op /admin/demo-aanvragen: de huidige template, daaronder de andere als grijze linkjes. */
.wf-aanvraag-tpl { flex: 0 0 130px; display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.35; }
.wf-aanvraag-tpl-nu { font-weight: 600; color: var(--wf-text, #1b1d29); display: inline-flex; align-items: center; gap: 4px; }
.wf-aanvraag-tpl-ander { display: inline-flex; align-items: center; gap: 2px; }
.wf-aanvraag-tpl-ander > a:first-child { color: #8b909a; text-decoration: none; }
.wf-aanvraag-tpl-ander > a:first-child:hover { color: var(--wf-primary, #A12359); text-decoration: underline; }
@media (max-width: 991.98px) { .wf-aanvraag-tpl { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 10px; } }
/* Tab SalesMaster op /admin/demo-aanvragen: opvallend, in de goudtint van de verkooplijn (Tom, 27-09-2026). */
.wf-tabx.wf-tab-salesmaster { color: #9a6b00; }
.wf-tabx.wf-tab-salesmaster i { color: #e0a100; }
.wf-tabx.wf-tab-salesmaster.is-active { background: #fff6dc; color: #7a5400; box-shadow: inset 0 0 0 1px #f0cf73; }
/* De rij mag afbreken zoals in /admin/clients, en de bedrijfsnaam houdt voorrang: die is waar je de rij op
   leest. Zonder dit drukte de nieuwe contactkolom de naam weg op een laptopscherm (Tom, 18-09-2026). */
#wfAanvragenResults .wf-lrow { flex-wrap: wrap; row-gap: 10px; }
/* Alle knoppen (rapport, meekijken, website, activeren) op de eerste regel; de bedrijfsnaam krimpt en mag over
   hoogstens drie regels lopen in plaats van afgekapt te worden (Tom, 28-09-2026). */
#wfAanvragenResults .wf-lrow-id { flex: 1 1 120px; min-width: 100px; }
#wfAanvragenResults .wf-lrow-id .wf-cell-title.-with-labels { align-items: flex-start; }
#wfAanvragenResults .wf-lrow-id .wf-cell-title.-with-labels .wf-cell-name {
  white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow-wrap: break-word; hyphens: auto;
}
#wfAanvragenResults .wf-aanvraag-cb { flex: 0 1 200px; min-width: 120px; }
#wfAanvragenResults .wf-hosting-col { width: auto; }
#wfAanvragenResults .wf-activeer-col { width: auto; }
#wfAanvragenResults .wf-activeer-col:empty, #wfAanvragenResults .wf-hosting-col:empty { display: none; }
/* Vanaf een laptopscherm niet afbreken maar krimpen: bij afbreken schoven de knoppen naar een tweede regel terwijl de
   naam, het e-mailadres en de templatekolom nog ruimte konden afstaan. */
@media (min-width: 1200px) {
  #wfAanvragenResults .wf-lrow { flex-wrap: nowrap; column-gap: 10px; }
  #wfAanvragenResults .wf-lrow-id { min-width: 130px; }
  #wfAanvragenResults .wf-aanvraag-cb { flex: 0 1 190px; min-width: 90px; }
  #wfAanvragenResults .wf-aanvraag-tpl { flex: 0 1 110px; min-width: 80px; }
  #wfAanvragenResults .wf-aanvraag-status { flex: 0 1 150px; min-width: 96px; }
  #wfAanvragenResults .wf-lrow > .wf-badge, #wfAanvragenResults .wf-lrow > form,
  #wfAanvragenResults .wf-hosting-col, #wfAanvragenResults .wf-activeer-col { flex: none; }
}

/* Het Rapport-venster: zo breed en hoog als het scherm toelaat, met lucht eromheen. Op een groot scherm 200px
   marge links en rechts en 50px boven en onder; op een telefoon de gewone modal-marge (Tom, 18-09-2026). De
   inhoud scrollt binnen het venster (modal-dialog-scrollable), zodat de kop met het kruisje blijft staan. */
.wf-modal-rapport { max-width: none; width: calc(100vw - 400px); margin: 50px auto; height: calc(100vh - 100px); }
.wf-modal-rapport > .modal-content { height: 100%; }
@media (max-width: 1399.98px) { .wf-modal-rapport { width: calc(100vw - 120px); } }
@media (max-width: 767.98px) {
  .wf-modal-rapport { width: auto; margin: .5rem; height: calc(100vh - 1rem); }
}

/* De kolom met de gouden activeerknop, naast de websiteknop. Eigen kolom en niet in .wf-hosting-col: die is 150px
   breed en bedoeld voor één knop; twee knoppen erin lopen over de rand. */
.wf-activeer-col { flex: none; width: 170px; display: flex; align-items: center; justify-content: flex-start; }
@media (max-width: 991.98px) { .wf-activeer-col { width: auto; } }

/* Ronde icoonknoppen (bewerken, verwijderen, inlogmails) staan op 33-34px. Op een muis is dat ruim
   genoeg, met een duim niet: je mikt op een rondje dat kleiner is dan je vingertop, en op een rij
   waar verwijderen naast bewerken staat is missen duur. Op een telefoon dus 44px, de maat die we
   zelf als kleinste aanraakvlak aanhouden.

   Alleen het RAAKVLAK groeit, niet het icoontje: font-size blijft, dus de rij oogt hetzelfde met
   wat meer lucht eromheen. Deze regel staat hier en niet bij de andere mobiele maten hogerop, want
   daar stond hij vóór de definities van .wf-ico-btn/.wf-ico-link -- gelijke selectiviteit, dus won
   de definitie gewoon omdat die later komt. */
@media (max-width: 767.98px) {
  .wf-ico-btn, .wf-ico-link { width: 44px; height: 44px; }
}

:root[data-bs-theme="dark"] .wf-lrow { border-top-color: rgba(255, 255, 255, .07); }
:root[data-bs-theme="dark"] .wf-lrow:hover { background: rgba(255, 255, 255, .035); }
:root[data-bs-theme="dark"] .wf-pill-field { background: #1a1d24; }
:root[data-bs-theme="dark"] .wf-ico-link { color: #7d8697; }

/* Voettekst in drieën: telling links, paginering in het midden, "rijen per pagina" rechts. */
.wf-tcard-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 18px 30px 26px; border-top: 1px solid rgba(1, 16, 61, .08); margin-top: 6px;
  font-size: 13px; color: #9aa2b1;
}
.wf-tcard-foot b { color: #000229; }
.wf-foot-l { flex: 1 1 0; min-width: 0; }
.wf-foot-c { flex: none; display: flex; justify-content: center; }
.wf-foot-r { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Kleine pil-select voor het aantal rijen. */
.wf-perpage {
  height: 32px; padding: 0 30px 0 12px; border-radius: 9999px;
  background: #fbfbfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239aa2b1'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;
  border: 1px solid rgba(1, 16, 61, .08); color: #5F6368; font-weight: 600; font-size: 12.5px;
  appearance: none; cursor: pointer;
}
.wf-pager { display: flex; align-items: center; gap: 8px; }
.wf-pager a, .wf-pager span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
  padding: 0 6px; border-radius: 9999px; font-weight: 700; font-size: 13px; color: #5F6368;
  text-decoration: none; transition: background .2s, color .2s;
}
.wf-pager a:hover { background: rgba(1, 16, 61, .05); color: #000229; }
.wf-pager .is-active { background: linear-gradient(120deg, #bcd94e, #a3c62b); color: #fff; }
.wf-pager .is-disabled { color: #c7cbd3; pointer-events: none; }

/* Lege staat binnen de kaart. */
/*  Advies bovenaan de cookiepagina: heb ik dit ding eigenlijk nodig? Drie standen met elk hun
    eigen kleur -- groen als het niet hoeft, amber als het moet, blauw als het aanstaat terwijl het
    niet hoeft. Geen rood: er is niets stuk, het is uitleg. */
.ck-advies {
  display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; padding: 15px 18px;
  border-radius: 18px; border: 1px solid rgba(176, 209, 54, .40); background: rgba(176, 209, 54, .10);
}
.ck-advies.-moet { border-color: rgba(220, 158, 47, .40); background: rgba(220, 158, 47, .10); }
.ck-advies.-mag  { border-color: rgba(50, 188, 238, .34); background: rgba(50, 188, 238, .09); }
.ck-advies-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 11px; background: rgba(255, 255, 255, .75); font-size: 15px; color: #4e6711;
}
.ck-advies.-moet .ck-advies-ic { color: #8a6117; }
.ck-advies.-mag  .ck-advies-ic { color: #12667f; }
.ck-advies-t { flex: 1; min-width: 0; }
.ck-advies-t b { display: block; font-weight: 700; font-size: 14.5px; color: var(--wf-text, #1e293b); }
.ck-advies-t > span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }
.ck-advies-l {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
  font-weight: 700; font-size: 12.5px; color: var(--wf-title, #a12359); text-decoration: none;
}
.ck-advies-l:hover { text-decoration: underline; }
.ck-advies-l i { font-size: 11px; }
[data-bs-theme="dark"] .ck-advies-ic { background: rgba(255, 255, 255, .10); color: #cbe479; }
[data-bs-theme="dark"] .ck-advies.-moet .ck-advies-ic { color: #efc172; }
[data-bs-theme="dark"] .ck-advies.-mag .ck-advies-ic { color: #8fd8f2; }
[data-bs-theme="dark"] .ck-advies-l { color: #f1a9cb; }

/* ── Cookiemelding: het live voorbeeld (Integraties) ─────────────────────────
   Naar het ontwerp "Webfix Cookiemelding". De klant typt niet in losse velden maar IN de melding
   die zijn bezoeker straks ziet -- daardoor hoeft hij niet te bedenken hoe het eruit gaat zien.
   De kleuren van de knoppen zijn die van het ontwerp en staan los van de huisstijl van de klant:
   dit is een voorbeeld van de vorm, niet van zijn kleuren. */
/*  Het voorbeeld krijgt de VOLLE breedte van het paneel; de status en Webfix AI delen de rij
    eronder. Het ontwerp zet ze naast elkaar, maar dat ging uit van 1360px en deze beheerkolom is
    772px -- dan wordt de melding zelf een smal strookje, en juist die moet de klant kunnen lezen. */
.ck-cards > .ck-voorbeeld { grid-column: 1 / -1; }

.ck-stage {
  position: relative; overflow: hidden; border-radius: 18px; padding: 26px 22px 22px; background: #eef1f6;
}
/*  Vage donkere band bovenaan: geeft het gevoel van een pagina waar de melding overheen ligt. */
.ck-stage::before {
  content: ""; position: absolute; top: 0; right: 0; left: 0; height: 74px;
  background: linear-gradient(180deg, rgba(1, 16, 61, .05), rgba(1, 16, 61, 0));
}
.ck-stage-l {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 5px 12px; border-radius: 9999px; background: #fff; border: 1px solid rgba(1, 16, 61, .10);
  font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--wf-text-soft, #666c73);
}
.ck-stage-l i { font-size: 11px; color: var(--wf-title, #a12359); }

.ck-pop {
  position: relative; z-index: 1; max-width: 520px; padding: 22px 24px 24px; border-radius: 16px;
  background: #fff; box-shadow: 0 22px 50px rgba(1, 16, 61, .18);
}
/*  Titel en tekst zijn invoervelden die eruitzien als de melding zelf. Pas bij zweven en focus
    verschijnt een rand -- anders leest het als een formulier in plaats van als een voorbeeld. */
.ck-tin, .ck-tar {
  display: block; box-sizing: border-box; width: 100%; border: 1px solid transparent; border-radius: 9px;
  background: transparent; transition: border-color .2s, background .2s, box-shadow .2s;
}
.ck-tin { padding: 5px 9px; margin: -5px -9px 8px; font-family: var(--font-heading, inherit); font-weight: 800; font-size: 19px; line-height: 1.3; color: var(--wf-text, #22242e); }
.ck-tar { padding: 7px 9px; margin: 0 -9px 18px; min-height: 78px; resize: vertical; font-size: 14px; line-height: 1.65; color: #5b6470; }
.ck-tin:hover, .ck-tar:hover { border-color: rgba(1, 16, 61, .14); background: #fbfbfd; }
.ck-tin:focus, .ck-tar:focus {
  outline: none; border-color: var(--wf-blue, #32bcee); background: #fff;
  box-shadow: 0 0 0 3px rgba(50, 188, 238, .14);
}
.ck-more { display: inline-block; margin: -12px 0 18px; font-size: 13.5px; color: #a58128; text-decoration: underline; }

/*  De categorielijst achter "Voorkeuren": dezelfde vier als op de echte website. Uitgeschakeld,
    want dit is een voorbeeld -- er valt hier niets toe te staan. */
.ck-prefs { display: grid; gap: 10px; margin: -6px 0 18px; padding: 14px; border-radius: 12px; background: #f6f8fb; }
.ck-prefs[hidden] { display: none; }
.ck-prefs label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13px; color: var(--wf-text, #1e293b); }
.ck-prefs input { flex: none; margin-top: 3px; }
.ck-prefs small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }

.ck-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-b1, .ck-b2, .ck-b3, .ck-b4 {
  display: inline-flex; align-items: center; height: 42px; padding: 0 22px; border-radius: 9999px;
  font-weight: 700; font-size: 13.5px; border: none;
}
.ck-b1 { background: #a58128; color: #fff; }
.ck-b2 { background: #3c4759; color: #fff; }
.ck-b4 { background: #f0f2f7; color: #3c4759; }
.ck-b4[hidden] { display: none; }
/*  Alleen "Voorkeuren" doet echt iets; de andere twee zijn spans zonder klik. */
/*  Vaste kleuren, geen thema-variabelen: deze knop staat IN de melding, en die is voor de bezoeker
    altijd wit. Met var(--wf-surface) werd hij in de donkere modus donker-op-wit en viel hij weg. */
.ck-b3 {
  background: #fff; border: 1px solid rgba(1, 16, 61, .16); color: #3c4759; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.ck-b3:hover { border-color: var(--wf-pink, #da176c); color: var(--wf-title, #a12359); }
.ck-b3:focus-visible { outline: 3px solid rgba(50, 188, 238, .45); outline-offset: 2px; }

.ck-hint { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }
.ck-hint i { margin-right: 7px; font-size: 13px; color: var(--wf-muted, #9aa2b1); }
.ck-hint b { font-weight: 700; color: var(--wf-text, #1e293b); }

@media (max-width: 600px) {
  .ck-stage { padding: 20px 14px 16px; }
  .ck-pop { padding: 18px 16px 20px; }
  .ck-btns > * { flex: 1; justify-content: center; }
}

/*  Donkere modus: het voorbeeld blijft een LICHTE melding, want zo ziet de bezoeker hem ook. Alleen
    het vlak eromheen en de invoervelden volgen het donkere thema. */
[data-bs-theme="dark"] .ck-stage { background: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .ck-tin { color: #22242e; }
[data-bs-theme="dark"] .ck-tin:hover, [data-bs-theme="dark"] .ck-tar:hover { background: #f4f6fa; }
[data-bs-theme="dark"] .ck-prefs { background: #f6f8fb; }
[data-bs-theme="dark"] .ck-prefs label { color: #1e293b; }

/*  Tabblad "Juridisch" op /dashboard/Pages. De rijen lenen de opmaak van het gewone overzicht; dit
    zijn de twee dingen die daar niet in zitten: een uitleg bovenaan en wat meer lucht tussen de
    knoppen, want hier staan een schakelaar en twee knoppen naast elkaar in plaats van icoontjes. */
/*  Juridische links per taal, in de voettekst-editor. Ingeklapt achter een <details>: bij een
    eentalige klant staat het er niet, en bij een meertalige is het een uitzondering die je maar
    zelden nodig hebt -- die hoort niet altijd open te staan onder elk van de vier links. */
.fb-talen { margin-top: 14px; border-top: 1px solid rgba(1, 16, 61, .08); padding-top: 12px; }
.fb-talen > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 12.5px; color: var(--wf-text-soft, #666c73);
}
.fb-talen > summary::-webkit-details-marker { display: none; }
.fb-talen > summary:hover { color: var(--wf-title, #a12359); }
.fb-talen > summary i { font-size: 13px; }
.fb-talen-n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px;
  padding: 0 6px; border-radius: 9999px; background: rgba(1, 16, 61, .07); font-size: 11px;
}
.fb-taal { margin-top: 12px; padding: 12px 14px; border-radius: 13px; background: #fbfbfd; border: 1px solid rgba(1, 16, 61, .08); }
.fb-taal-k { display: block; margin-bottom: 8px; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.fb-taal .fb-dest { margin-top: 10px; }
.fb-taal .fb-in { margin-top: 0; }
.fb-taal select.fb-in, .fb-taal .legal-t-file { margin-top: 10px; }
[data-bs-theme="dark"] .fb-taal { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .fb-talen { border-top-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .fb-talen-n { background: rgba(255, 255, 255, .10); }

.wf-juri-note {
  display: flex; align-items: flex-start; gap: 11px; margin: 0 0 14px; padding: 13px 16px;
  border-radius: 14px; background: rgba(50, 188, 238, .09);
  font-size: 12.5px; line-height: 1.6; color: var(--wf-text-soft, #666c73);
}
.wf-juri-note i { flex: none; margin-top: 2px; font-size: 13px; color: #12667f; }
.wf-juri-acties { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/*  Waarom de schakelaar op slot staat, naast de schakelaar zelf. In een tooltip zou niemand het vinden:
    je klikt, er gebeurt niets, en dan ga je zoeken naar een storing die er niet is. */
.wf-juri-slot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--wf-muted, #94a3b8); white-space: nowrap;
}
.wf-juri-slot i { font-size: 11px; }
[data-bs-theme="dark"] .wf-juri-note { background: rgba(50, 188, 238, .12); }
[data-bs-theme="dark"] .wf-juri-note i { color: #8fd8f2; }
/*  Op een telefoon: de rij breekt af in plaats van zijwaarts te schuiven ────────
 *  De juridische rijen zitten in dezelfde kaart als het pagina-overzicht en erfden daar
 *  `flex-wrap: nowrap` van (.wf-modov-resp, trap C). Bij een gewone paginarij kan dat: daar
 *  verdwijnen de knoppen op een telefoon en blijft alleen de naam over. Hier staan een schakelaar,
 *  een AI-knop en "Bewerken" in de rij, en die liepen samen 70px buiten beeld -- je moest opzij
 *  vegen om bij de schakelaar te komen (Tom, 12-09-2026).
 *
 *  Vier rijen met één knop hebben geen schuifbalk nodig: de tekst komt op een eigen regel en de
 *  knoppen eronder. "Bewerken" vervalt daar, net als in de lijst ernaast -- de hele rij is al de
 *  weg naar het bewerkscherm. */
@media (max-width: 700px) {
  .wf-juri-lijst { overflow-x: visible; }
  .wf-modov-resp .wf-juri-lijst .wf-lrow { flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; }
  .wf-juri-lijst .wf-lrow-id { flex: 1 1 100%; min-width: 0; }
  .wf-juri-lijst .wf-cell-title { white-space: normal; overflow-wrap: anywhere; }
  .wf-juri-lijst .wf-juri-acties { flex: 1 1 100%; justify-content: flex-start; gap: 10px; }
  /*  De uitleg bij een schakelaar op slot mag hier over twee regels; nowrap duwde hem buiten beeld. */
  .wf-juri-lijst .wf-juri-slot { white-space: normal; flex: 1 1 100%; }
  /*  De rij zelf opent het bewerkscherm, dus deze knop is dubbelop -- precies zoals bij de
      paginarijen ernaast (.wf-flowrow-open). */
  .wf-juri-lijst .wf-juri-acties > .wf-btn { display: none; }
  /*  Wat er wél staat (de schakelaar, "Bijwerken") mag de volle breedte pakken. */
  .wf-juri-lijst .wf-juri-acties > .wf-aibtn { flex: 1 1 100%; justify-content: center; }
}

.wf-tcard-empty { padding: 44px 30px; text-align: center; color: #9aa2b1; font-size: 14px; }
.wf-tcard-empty i { display: block; font-size: 26px; margin-bottom: 10px; color: #c7cbd3; }

/* Donkere modus. */
:root[data-bs-theme="dark"] .wf-stats,
:root[data-bs-theme="dark"] .wf-tcard { background: linear-gradient(180deg, #232733 0%, #1c1f26 100%); border-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .wf-tcard::before { background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 30%); }
:root[data-bs-theme="dark"] .wf-stats-tab { background: #232733; border-color: rgba(255, 255, 255, .1); color: #fff; }
:root[data-bs-theme="dark"] .wf-stat-num,
:root[data-bs-theme="dark"] .wf-tcard-title,
:root[data-bs-theme="dark"] .wf-cell-title,
:root[data-bs-theme="dark"] .wf-dtable td,
:root[data-bs-theme="dark"] .wf-tcard-foot b { color: #e7ebf2; }
:root[data-bs-theme="dark"] .wf-pill-field { background: #1a1d24; border-color: rgba(255, 255, 255, .1); }
:root[data-bs-theme="dark"] .wf-pill-field input,
:root[data-bs-theme="dark"] .wf-pill-field select { color: #e7ebf2; }
:root[data-bs-theme="dark"] .wf-pill-field select option { color: #1a1d24; }
:root[data-bs-theme="dark"] .wf-dtable th { border-bottom-color: rgba(255, 255, 255, .1); }
:root[data-bs-theme="dark"] .wf-dtable td { border-bottom-color: rgba(255, 255, 255, .07); }
:root[data-bs-theme="dark"] .wf-dtable tbody tr:hover { background: rgba(255, 255, 255, .04); }
:root[data-bs-theme="dark"] .wf-tcard-foot { border-top-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .wf-stats-div { background: rgba(255, 255, 255, .1); }
:root[data-bs-theme="dark"] .wf-stats-meta { border-top-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .wf-stats-chip { background: rgba(255, 255, 255, .08); color: #d7dbe3; }
:root[data-bs-theme="dark"] .wf-stats-meta-txt b { color: #c7cbd3; }
:root[data-bs-theme="dark"] .wf-perpage { background-color: #1a1d24; border-color: rgba(255, 255, 255, .1); color: #e7ebf2; }
:root[data-bs-theme="dark"] .wf-perpage option { color: #1a1d24; }
:root[data-bs-theme="dark"] .wf-link-divider { background: rgba(255, 255, 255, .14); }

/* ── Labels (.wf-label) ───────────────────────────────────────────────────────
 * Kleine pil-labels in exact dezelfde rollen/kleuren als de standaardknoppen
 * (btn btn-<rol> — zie webfix.css), maar compact en met een subtiele gradient
 * (basiskleur → de bestaande hover-tint van die knop, 135deg) i.p.v. een vlakke
 * kleur. Voor statuslabels/tags in lopende tekst of tabellen — geen actie, dus
 * <span>, geen <button>.
 *
 *   <span class="wf-label wf-label-primary">Nieuw</span>
 *   <span class="wf-label wf-label-success">Actief</span>
 * Rollen: primary · secondary · success · info · warning · danger · light · dark. */
.wf-label {
  display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 0 12px;
  border-radius: 9999px; font-weight: 700; font-size: 12px; letter-spacing: .02em;
  line-height: 1; white-space: nowrap; color: #fff;
}
/* "™" achter "Flows" in een Label/Badge — kleiner + iets lichter, zelfde geest als .wf-flow-btn-tm
   op de grote knop, alleen hier zonder vaste witte kleur (deze chip is niet altijd wit). */
.wf-tm { font-weight: 700; font-size: .6em; vertical-align: text-top; position: relative; top: -.05em; margin-left: .04em; opacity: .72; }
.wf-label-primary   { background: linear-gradient(135deg, #a12359, #8a1d4d); }
.wf-label-secondary { background: linear-gradient(135deg, #da176c, #b8115a); }
.wf-label-success   { background: linear-gradient(135deg, #b0d136, #9cbc2d); }
.wf-label-info      { background: linear-gradient(135deg, #32bcee, #1a9fd0); }
.wf-label-warning   { background: linear-gradient(135deg, #dc9e2f, #c78a20); }
.wf-label-danger    { background: linear-gradient(135deg, #d81f25, #be1a1f); }
.wf-label-light     { background: linear-gradient(135deg, #f0f0f7, #e4e4ee); color: #000229; border: 1px solid rgba(1, 16, 61, .08); }
.wf-label-dark      { background: linear-gradient(135deg, #000229, #0e1130); }
/* "flow" = zelfde opmaak als de grote Flows-knop: vlakke, bewegende merkgradient (90deg), witte tekst. */
.wf-label-flow      { background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 200% 100%; animation: wf-ai-drift 9s ease-in-out infinite; }
/* "ai" = zelfde opmaak als de grote Webfix AI-knop: witte vulling + bewegende gradient-RAND (i.p.v.
   vlakke vulling), donkere tekst — dubbele-achtergrond-truc, identiek aan .wf-aibtn hierboven. */
.wf-label-ai {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%) border-box;
  background-size: auto, 200% 100%; border: 1.5px solid transparent; color: #000229;
  animation: wf-ai-drift 9s ease-in-out infinite;
}
/* Kleine variant, voor labels die ONDER een naam staan in plaats van ernaast. Naast de naam eten ze
   de breedte op waar die naam het van moet hebben; op een eigen regel eronder mogen ze bescheidener.
   Zie de rijen op /admin/early-birds. */
.wf-label.-mini { height: 18px; padding: 0 8px; font-size: 10.5px; letter-spacing: .01em; }
/* Het regeltje waar ze op staan: wikkelt door als het er meer dan een paar zijn. */
.wf-labelrij { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }

/* Hover: labeltekst blijft gewoon wit (zoals in rust) — geen kleurverandering. De "gloss"-beweging
   is voor de Badge-knopjes hieronder, niet voor Labels (die blijven puur statuslabels). */
.wf-label:hover { color: #fff; }
.wf-label-light:hover { color: #000229; }
.wf-label-ai:hover { color: #000229; }

/* ── Badge-knopjes (.wf-badge) ─────────────────────────────────────────────────
 * Zelfde 8 rollen/gradients als .wf-label hierboven (135deg basiskleur → hover-tint),
 * maar in het formaat van de pakket-badges op /admin/clients (.wf-badge-metal):
 * compacte pil met ruimere padding, voor gebruik in tabellen naast/i.p.v. metallic
 * pakket-badges. Geen fixed width (rolnamen als "Secondary" zijn langer dan "Gold").
 *
 *   <span class="wf-badge wf-badge-success">Actief</span> */
.wf-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 30px; padding: 0 15px; border-radius: 9999px; font-weight: 700; font-size: 12px;
  letter-spacing: .01em; line-height: 1; white-space: nowrap; text-align: center; color: #fff;
  /* border:none + font:inherit → een <button> met .wf-badge (bv. Meekijken) toont geen UA-button-rand
     en erft het paginafont. De .wf-badge-light-variant zet hierna z'n eigen (lichte) rand terug. */
  border: none; font-family: inherit; cursor: pointer;
}
/* Uitgeschakeld: de badge is er wel, maar doet niets tot er iets te doen valt. Grijs en zonder
   glans-sweep, want een knop die oplicht als je eroverheen gaat belooft dat er iets gebeurt. */
.wf-badge[disabled], .wf-badge:disabled {
  background: #eceef3; color: #8a93a6; border: 1px solid rgba(1, 16, 61, .07);
  cursor: default; box-shadow: none;
}
.wf-badge[disabled]:hover, .wf-badge:disabled:hover {
  background: #eceef3; color: #8a93a6; background-image: none; animation: none;
}

.wf-badge-primary   { background: linear-gradient(135deg, #a12359, #8a1d4d); }
.wf-badge-secondary { background: linear-gradient(135deg, #da176c, #b8115a); }
.wf-badge-success   { background: linear-gradient(135deg, #b0d136, #9cbc2d); }
.wf-badge-info      { background: linear-gradient(135deg, #32bcee, #1a9fd0); }
.wf-badge-warning   { background: linear-gradient(135deg, #dc9e2f, #c78a20); }
.wf-badge-danger    { background: linear-gradient(135deg, #d81f25, #be1a1f); }
.wf-badge-light     { background: linear-gradient(135deg, #f0f0f7, #e4e4ee); color: #000229; border: 1px solid rgba(1, 16, 61, .08); }
/* "goud" = de kleur van Demo's in de zijbalk (.sidebar-link.-goudglas): daar staat het toekomstige geld, en de
   knop die een demo activeert hoort die kleur te delen (Tom, 18-09-2026). Liggende glanslaag over het verloop
   (licht boven, schaduw onder de middellijn) plus een fijne tekstschaduw, zodat wit leesbaar blijft op de lichte
   kant. Eigen hover, want de satin-sweep hieronder is voor een vlakke vulling gemaakt. */
.wf-badge-goud {
  /* --rc1/2/3 zijn de kleuren die de gedeelde satin-hover hieronder gebruikt. Zonder deze drie viel de knop bij
     mouseover terug op een LEEG verloop (onbekende variabelen) en werd hij wit (Tom, 18-09-2026). */
  --rc1: #e0c163; --rc2: #cda52f; --rc3: #b2891f; --rcsh: 178, 137, 31;
  background: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .08) 46%,
                                      rgba(0, 0, 0, .10) 54%, rgba(0, 0, 0, .03) 100%),
              linear-gradient(90deg, #b2891f 0%, #cda52f 48%, #e0c163 100%);
  color: #fff; text-shadow: 0 1px 2px rgba(60, 42, 5, .45);
}
.wf-badge-dark      { background: linear-gradient(135deg, #000229, #0e1130); }
/* "flow" = zelfde opmaak als de grote Flows-knop: vlakke, bewegende merkgradient (90deg), witte tekst.
   Krijgt de gewone satin-hover hieronder (--rc1/2/3 = dezelfde 3 kleuren), zoals elke andere rol. */
.wf-badge-flow      { background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 200% 100%; animation: wf-ai-drift 9s ease-in-out infinite; }
/* "ai" = zelfde opmaak als de grote Webfix AI-knop: witte vulling + bewegende gradient-RAND i.p.v.
   vlakke vulling, donkere tekst — dubbele-achtergrond-truc, identiek aan .wf-aibtn. Eigen (simpele)
   hover i.p.v. de satin-sweep hieronder: die is gebouwd voor een vlakke vulling, niet voor een rand. */
.wf-badge-ai {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%) border-box;
  background-size: auto, 200% 100%; border: 1.5px solid transparent; color: #000229;
  animation: wf-ai-drift 9s ease-in-out infinite;
}
/* .wf-badge.wf-badge-ai (3 klassen incl. pseudo) i.p.v. .wf-badge-ai: moet de generieke satin-hover
   hieronder verslaan ongeacht bestandsvolgorde. background-image herhaalt hier bewust de basislaag
   (wit + gradient-rand) i.p.v. 'm leeg te laten -- anders verdwijnt de rand zelf ook bij hover. */
.wf-badge.wf-badge-ai:hover {
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%);
  background-size: auto, 200% 100%;
  color: #000229; transform: translateY(-1px); filter: brightness(1.03);
}

/* Hover: zelfde "Satin"-glans-sweep als de Standaardknoppen, maar alleen bij mouseover (rust = de
   gewone vlakke badge hierboven). Zelfde --rc1/--rc2/--rc3-vars, gedeeld met de rol-knoppen/links. */
.wf-badge:hover {
  background-image:
    linear-gradient(100deg, transparent 30%, color-mix(in srgb, white 30%, transparent) 50%, transparent 70%),
    linear-gradient(135deg, var(--rc1) 0%, var(--rc2) 55%, var(--rc3) 100%);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: wf-satin-sweep 1.6s ease-in-out infinite;
}
/* Tekstkleur expliciet forceren op hover: webfix.css heeft `a:hover { color:#1e293b }` — die is
   specifieker (element+pseudo-klasse) dan de kale `.wf-badge { color:#fff }`, dus zonder deze regel
   won dat globale donkere `a:hover` het en werd het label onleesbaar donker i.p.v. wit. */
.wf-badge:hover { color: #fff; }
.wf-badge-light:hover { color: #000229; }

/* ── Webfix-merkpil (compact) ─────────────────────────────────────────────────
 * Compacte variant van de "Badge · gradient-pill" uit de stijlgids (logo's): de
 * merk-gradient met het diamant-logo in een wit rondje + de tekst "Webfix". Voor
 * in tabellen — markeert een klant die op het nieuwe Webfix draait. Geen actie -> span. */
.wf-webfix-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px 0 3px;
  border-radius: 9999px; background: linear-gradient(90deg, #b0d136, #da176c, #32bcee);
  box-shadow: 0 3px 9px rgba(50, 188, 238, .28); white-space: nowrap; border: none;
}
.wf-webfix-pill .wf-webfix-dot {
  flex: none; width: 18px; height: 18px; border-radius: 9999px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.wf-webfix-pill .wf-webfix-dot img { width: 12px; height: 12px; object-fit: contain; }
.wf-webfix-pill .wf-webfix-txt { font-weight: 700; font-size: 12px; color: #fff; letter-spacing: .01em; }
/* Kolom in de klantenrij (vóór de status) die de checkbox óf de Webfix-pil bevat. Vaste breedte
   zodat alle rijen uitlijnen, ongeacht of er een vinkje of een pil staat. */
.wf-webfix-col { flex: none; width: 104px; display: flex; align-items: center; justify-content: center; }

/* Veldje in een lijstrij: klein grijs label met de waarde eronder ("Gaat naar" + het e-mailadres,
   "Bedrag incl. btw" + het bedrag). Bewust een eigen klasse en niet .wf-webfix-col met een override:
   die is een gecentreerde flex-cel, waardoor label en waarde náást elkaar belanden en tegen elkaar
   aan plakken. Breedte per gebruik meegeven met --wf-field-w. */
.wf-lrow-field { flex: none; width: var(--wf-field-w, 160px); display: block; line-height: 1.35; }
.wf-lrow-field .wf-field-lbl { display: block; font-size: 11px; color: #adb5bd; margin-bottom: 1px; }
.wf-lrow-field .wf-field-val { display: block; font-weight: 700; word-break: break-word; }
.wf-webfix-col .wf-webfix-toggle { width: 18px; height: 18px; cursor: pointer; }
/* Vinkje met klein bijschrift "over naar webfix" eronder (lichtgrijs), gecentreerd onder elkaar. */
.wf-webfix-col .wf-webfix-check { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; cursor: pointer; }
.wf-webfix-check .wf-webfix-check-lbl { font-size: 10px; line-height: 1.1; color: #adb5bd; text-align: center; white-space: nowrap; }

/* ── /admin/clients — status klant (demo/live) en mail naar superadmin (nee/ja) ──
 * Twee kleine schuifjes achteraan de klantrij. Het bijschrift staat BOVEN de
 * knop en het woord aan WEERSZIJDEN ervan:
 *
 *      status klant            mail -> superadmin
 *    demo (o--) live              nee (--o) ja
 *
 * Twee redenen voor die vorm. Een kaal vinkje met één woord laat je raden of
 * dat woord de huidige stand is of wat er gebeurt als je klikt, en dat leest
 * iedereen anders; nu is de actieve kant donker en de andere grijs. En het
 * bijschrift staat los uit de flow (absoluut, boven de rij), zodat de knop
 * zelf midden in de rij blijft staan -- op dezelfde hoogte als de icoontjes
 * rechts ervan. Zat het bijschrift in de flow, dan zakte of steeg de knop
 * precies een halve regel en stond hij scheef ten opzichte van de rest.
 *
 *   <div class="wf-rijschakels">
 *     <div class="wf-rijschakel">          <- status klant
 *     <div class="wf-rijschakel -mail">    <- mail, alleen bij een DEMO-klant
 */
.wf-rijschakels { flex: none; width: 250px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.wf-rijschakel { position: relative; display: flex; align-items: center; }
.wf-rijschakel-rij { display: flex; align-items: center; gap: 5px; }
/* De twee woorden. De actieve kant is donker en vet, de andere blijft grijs — zo hoef je de stand van
   de knop niet te lezen om te zien wat er aan staat. */
.wf-rijschakel-kant { font-size: 10.5px; line-height: 1; color: #c2c7d0; letter-spacing: .01em; }
.wf-rijschakel-kant.is-aan { color: #000229; font-weight: 700; }
/* Waar het schuifje over gaat. Bewust klein en grijs: je leest de rij op de naam, niet hierop.
   Uit de flow gehaald zodat de knop eronder op rijhoogte blijft staan. */
.wf-rijschakel-cap {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px;
  font-size: 9.5px; line-height: 1.2; color: #adb5bd; letter-spacing: .02em; white-space: nowrap;
}

/* Bootstrap-switch op rij-formaat. Marge eraf: .form-check zet er standaard een inspring- en
   ondermarge omheen die hier de woorden scheeftrekt.
   De .wf-lrow ervoor is nodig en geen slordigheid: verderop in dit bestand staat
   `.wf-lrow .form-check-input { width: 16px; height: 16px }` voor de gewone vinkjes in een rij, en
   die maakte van dit schuifje een rondje. Even zwaar en later in het bestand = die wint; met de rij
   erbij wint deze. */
.wf-mini-switch { min-height: 0; margin: 0; padding: 0; display: flex; align-items: center; }
.wf-lrow .wf-mini-switch .form-check-input { width: 30px; height: 16px; margin: 0; cursor: pointer; flex: none; }

/* Ja = de post komt bij de superadmin binnen. Amber, net als het "Geen post"-label naast de naam: dit
   is geen fout, maar het is wel iets waar iemand naar moet kijken voordat de klant live gaat. */
.wf-rijschakel.-mail .form-check-input:checked { background-color: #dc9e2f; border-color: #dc9e2f; }
.wf-rijschakel.-mail .wf-rijschakel-kant.is-aan:last-child { color: #b47d18; }

/* Bij een LIVE-klant hoort het mail-schuifje er niet te zijn: die krijgt zijn eigen post, punt. De
   ruimte blijft staan zodat de kolommen van alle rijen op elkaar blijven liggen. */
.wf-rijschakel.is-verborgen { visibility: hidden; }

[data-bs-theme="dark"] .wf-rijschakel-kant { color: #5c626f; }
[data-bs-theme="dark"] .wf-rijschakel-kant.is-aan { color: #e9ecef; }
[data-bs-theme="dark"] .wf-rijschakel-cap { color: #6c7382; }
[data-bs-theme="dark"] .wf-rijschakel.-mail .wf-rijschakel-kant.is-aan:last-child { color: #e5b455; }

/* ── /admin/hosting — VPS-chip (ook op /admin/clients), samenvattingstegels, tabellen, DNS ── */
.wf-vps-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; line-height: 1.4; }
.wf-vps-chip.-on  { background: linear-gradient(90deg, rgba(50,188,238,.14), rgba(176,209,54,.14)); color: #146c86; border: 1px solid rgba(50,188,238,.3); }
.wf-vps-chip.-off { background: rgba(1,16,61,.045); color: #8a90a0; border: 1px solid rgba(1,16,61,.08); }
a.wf-vps-chip:hover { filter: brightness(.96); }

.wf-hstat { display: flex; align-items: center; gap: 12px; min-width: 150px; }
.wf-hstat-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.wf-hstat-ic.-blue  { background: rgba(50,188,238,.14); color: #1f9dcb; }
.wf-hstat-ic.-green { background: rgba(176,209,54,.18); color: #7a9414; }
.wf-hstat-ic.-pink  { background: rgba(218,23,108,.12); color: #c0155f; }
.wf-hstat-ic.-amber { background: rgba(220,158,47,.16); color: #b47d17; }
.wf-hstat-num { font-size: 19px; font-weight: 700; color: #01103d; line-height: 1.1; }
.wf-hstat-lbl { font-size: 12.5px; color: #8a90a0; }

.wf-hmeta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; color: #5F6368;
  padding: 12px 16px; background: rgba(1,16,61,.025); border-radius: 14px; }
.wf-hmeta b { color: #01103d; font-weight: 600; }

.wf-htable thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: #8a90a0; font-weight: 600; }
.wf-htable td { font-size: 14px; }
.wf-dns-type { display: inline-block; min-width: 44px; text-align: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(1,16,61,.06); color: #3a4048; }
.wf-dns-val { font-size: 12.5px; color: #3a4048; background: none; padding: 0; }

/* ── /admin/clients — 2-rijige klantrij: hoofdrij + subtiel lichtgrijs meta-bandje ── */
/* Marge kop→bovenste rij = 18px totaal: kop heeft al 18px padding-bottom, dus hier geen extra
   margin-top op de rijenlijst (alleen op /admin/clients; andere lijsten houden hun 18px bleed-marge). */
#wfClientsResults .wf-list-bleed { margin-top: 0; }
.wf-lrow-block { border-top: 1px solid rgba(1,16,61,.06); transition: background .18s; }
.wf-lrow-block.wf-row-link { cursor: pointer; }
.wf-lrow-block:hover { background: rgba(1,16,61,.026); }
/* Hoofdrij zit nu in het blok: geen eigen border/hover, en strak onderaan zodat de meta-rij er dicht
   tegenaan komt (meta-bandje sluit aan op de bovenste rij). */
.wf-lrow-block > .wf-lrow { border-top: none; padding-top: 12px; padding-bottom: 12px; }
.wf-lrow-block > .wf-lrow:hover { background: transparent; }
/* Meta-rij: subtiel lichtgrijs bandje (volle breedte), tekst uitgelijnd onder de naam (26+38+18=82px).
   Gelijke boven/onder-padding + align-items:center → inhoud staat verticaal gecentreerd in het bandje. */
.wf-lrow-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 11px;
  padding: 8px 26px 8px 82px; font-size: 12.5px; color: #7a8090; line-height: 1.5;
  background: rgba(1,16,61,.022);
}
.wf-lrow-meta b { color: #5a6070; font-weight: 600; }
/* ── Hotlist (early birds) ────────────────────────────────────────────────────────────────────
   De bellijst met de honderd beste kandidaten. Het rondje links draagt de positie in plaats van
   initialen: op deze lijst is de volgorde het onderwerp. */
.wf-hot-pos {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 9999px;
  background: rgba(194, 19, 95, .10); color: #c2135f;
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
/* Een regel met een waarde en een kopieerknopje erachter (naam, e-mail, telefoon). Het knopje blijft
   binnen de regelhoogte staan, zodat de twee regels onder elkaar even hoog blijven. */
.wf-hot-regel { display: flex; align-items: center; gap: 4px; min-width: 0; }
.wf-hot-regel > a, .wf-hot-regel > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*  De bereikbaarheidskolom: naam, e-mail en telefoon onder elkaar. De herkomst van het nummer
    ("mobiel") staat er achter en niet eronder, zodat de kolom niet nog een regel langer wordt. */
.wf-hot-contact { min-width: 0; line-height: 1.35; }
.wf-hot-contact .wf-hot-regel + .wf-hot-regel { margin-top: 1px; }

/*  De Hotlist-rij is een RASTER en geen flexrij. Met flex bepaalde de inhoud de breedte van elke cel:
    een lang e-mailadres duwde alles erachter naar rechts, zodat geen twee rijen dezelfde kolomstart
    hadden. Nu liggen de kolommen vast en staat elke cel op elke rij op dezelfde plek — ook als hij
    leeg is of over twee regels loopt. align-items:start houdt alles bovenaan uitgelijnd in plaats van
    per rij te centreren (Tom, 28-09-2026). De lijst schuift horizontaal mee; zie de min-width op de
    wikkel in _Hotlist.cshtml -- die moet minstens zo breed zijn als het raster PLUS de 2x26px
    rijpadding, anders loopt de laatste kolom er alsnog uit. */
.wf-lrow.-hot {
  display: grid;
  grid-template-columns: 18px 34px 66px minmax(240px, 1.4fr) minmax(225px, 1fr) 150px 104px 150px 124px;
  align-items: start;
  column-gap: 18px;
}
/*  Hotlist (02-10-2026): het exportvinkje, de rij van een klant die nog geen persoonlijke mail kreeg
    (zacht geel tot hij in een export zit), en de stand van de ronde boven de lijst. */
.wf-hot-vink { display: flex; align-items: center; height: 34px; margin: 0; cursor: pointer; }
.wf-hot-vink .form-check-input { margin: 0; cursor: pointer; }
.wf-lrow.-hot.-nieuw { background: rgba(255, 196, 0, .10); box-shadow: inset 3px 0 0 rgba(214, 160, 0, .75); }
.wf-hot-stand { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-hot-stat {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 12px; border-radius: 9999px;
  background: rgba(1, 16, 61, .05); font-size: 12.5px; color: #5a6070;
}
.wf-hot-stat b { color: #000229; font-size: 14px; font-variant-numeric: tabular-nums; }
.wf-hot-stat.-bekeken { background: rgba(220, 158, 47, .14); }
.wf-hot-stat.-besteld { background: rgba(176, 209, 54, .18); }
.wf-hot-stat.-nieuw { background: rgba(255, 196, 0, .16); }
:root[data-bs-theme="dark"] .wf-hot-stat { background: rgba(255, 255, 255, .06); color: #b9bfcc; }
:root[data-bs-theme="dark"] .wf-hot-stat b { color: #fff; }
:root[data-bs-theme="dark"] .wf-lrow.-hot.-nieuw { background: rgba(255, 196, 0, .08); }
/*  De redenregel onder de bedrijfsnaam, met achter een streepje het "Voor later"-linkje. Grijs en
    onnadrukkelijk: het is een uitweg tijdens het bellen, geen knop die om aandacht vraagt. Pas bij
    hover kleurt hij op, zodat je ziet dat er iets gebeurt. */
.wf-hot-reden { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wf-hot-sep { color: rgba(1, 16, 61, .22); }
.wf-hot-later {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--wf-muted, #9aa2b1); text-decoration: underline; text-underline-offset: 2px;
}
.wf-hot-later:hover { color: var(--wf-pink, #da176c); }
:root[data-bs-theme="dark"] .wf-hot-sep { color: rgba(255, 255, 255, .22); }
:root[data-bs-theme="dark"] .wf-hot-pos { background: rgba(240, 111, 168, .16); color: #f06fa8; }

/* Adresregel in een meta-rij: per e-mailadres een vinkje (early birds — "post naar"). De labels
   wikkelen, want een vereniging heeft zo vier adressen en die mogen de rij niet breed maken. */
.wf-mailrij { gap: 6px 14px; }
.wf-mailrij-kop { font-weight: 600; color: #5a6070; }
.wf-mailrij-kop i { margin-right: 4px; }
.wf-mailadres { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.wf-mailadres .form-check-input { margin: 0; flex: none; width: 14px; height: 14px; }
.wf-mailadres .form-check-input:disabled { cursor: not-allowed; }
.wf-mailadres-bron { color: #a2a8b6; font-size: 11.5px; }
/* Uitgevinkt: doorgestreept en lichter. Je ziet dat het adres bestaat én dat het niets krijgt. */
.wf-mailadres.-uit .wf-mailadres-adres { text-decoration: line-through; opacity: .55; }
:root[data-bs-theme="dark"] .wf-mailrij-kop { color: #b6bdc9; }
:root[data-bs-theme="dark"] .wf-mailadres-bron { color: #7e8696; }
.wf-lrow-meta .wf-meta-dot { color: #c2c7d2; font-weight: 700; }
/* TIJDELIJK (testfase): Frenque-testbedrijf-rij subtiel info-blauw gemarkeerd. */
.wf-lrow-block.-test { background: rgba(50, 188, 238, .07); }
.wf-lrow-block.-test:hover { background: rgba(50, 188, 238, .11); }
.wf-lrow-block.-test > .wf-lrow-meta { background: rgba(50, 188, 238, .05); }
/* Hosting-badgeknop-kolom (rechts van Meekijken). */
/* "Open website"-kolom: vaste breedte + gecentreerd, zodat de kolommen ernaast (status, pakket,
   Meekijken) altijd uitlijnen — ook bij klanten zónder website, waar deze cel leeg blijft. */
.wf-hosting-col { flex: none; width: 150px; display: flex; align-items: center; justify-content: center; }

/* Badge als klikbare knop (op een <a>): geen onderstreping + subtiele hover-lift. */
a.wf-badge { text-decoration: none; transition: filter .15s, box-shadow .15s; }
a.wf-badge:hover { filter: brightness(1.07); box-shadow: 0 2px 9px rgba(1,16,61,.16); }
.wf-badge-sm { height: 24px; padding: 0 11px; font-size: 11px; }
.wf-badge i { font-size: 12px; }
:root[data-bs-theme="dark"] .wf-lrow-block { border-top-color: rgba(255,255,255,.07); }
:root[data-bs-theme="dark"] .wf-lrow-block:hover { background: rgba(255,255,255,.035); }
:root[data-bs-theme="dark"] .wf-lrow-meta { background: rgba(255,255,255,.03); color: #9aa2b1; }

/* ── /admin/clients — de rij breekt af in plaats van de naam plat te drukken ──
 * De vaste kolommen van een klantrij tellen op tot 1152px (avatar 38 + Webfix 104 + status 118 +
 * pakket 104 + Meekijken 107 + website 150 + schakelaars 250 + acties 85, plus 8 gaps en de
 * padding). `.wf-lrow-id` is de enige rekbare kolom, dus die werd als eerste tot NUL geknepen: de
 * klantnaam was onzichtbaar tot ongeveer 1600px schermbreedte — je las de lijst op nummer.
 *
 * `flex-wrap` lost dat op zónder breekpunten: past alles, dan blijft het één regel (ongewijzigd op
 * een breed scherm); past het niet, dan zakken de laatste kolommen naar een tweede regel en houdt
 * de naam zijn ruimte. Geen horizontale scrollbalk meer.
 *
 * De regelbrekers (.wf-lrow-break) doen hier nog niets; die horen bij de kaartweergave hieronder. */
#wfClientsResults .wf-lrow { flex-wrap: wrap; row-gap: 10px; }

/* De organisatienaam is waar je een klantrij op leest, dus die moet je kunnen lezen. De naamkolom
   eist minstens ~30 tekens op en kapt pas daarna af (met een title-tooltip voor de rest). Eerder
   stonden de classificatie-labels ernaast en aten die precies deze ruimte op; die staan sinds
   01-09-2026 in het bandje eronder, vóór "Betaalt tot".

   min(...,100%) zodat de eis nooit breder wordt dan de rij zelf, en pas vanaf 900px: daaronder wordt
   de rij een kaartje waarin de naam toch al de volle breedte krijgt. */
@media (min-width: 900px) {
  #wfClientsResults .wf-lrow-id { min-width: min(34ch, 100%); }
  #wfClientsResults .wf-cell-name { min-width: min(30ch, 100%); }
}
/* 180px startbreedte en niet meer: de vaste kolommen vragen samen 1152px, en op een breed scherm
   (1920 → 1362px voor de lijst) moet de naam er nog náást passen, anders breekt de rij af terwijl
   dat niet nodig is. Vanaf die basis groeit hij mee met de vrije ruimte. */
#wfClientsResults .wf-lrow-id { flex: 1 1 180px; min-width: 150px; }
/* Zakken de schakelaars en de acties naar een tweede regel, dan horen ze rechts te staan — onder de
   kolommen waar ze bij horen, niet links onder de naam. Past alles op één regel, dan slokt de
   naamkolom (flex-grow) de vrije ruimte al op en doet deze marge niets. */
#wfClientsResults .wf-rijschakels { margin-left: auto; }
.wf-lrow-break { display: none; }

/* ── Kaartweergave onder 900px ───────────────────────────────────────────────
 * Onder dit punt past de rij niet meer als rij: er bleef 800px zijwaarts scrollen over in een
 * venster van 334px, waardoor alles vanaf het pakket — Meekijken, Open website, de schakelaars en
 * verwijderen — onbereikbaar was. Elke klant wordt hier een kaartje: naam bovenaan met de acties
 * ernaast, dan de badges, dan de schakelaars, met het meta-bandje eronder. */
@media (max-width: 899.98px) {
  #wfClientsResults .wf-list-bleed { padding: 14px 14px 2px; overflow-x: visible; }

  #wfClientsResults .wf-lrow-block {
    border: 1px solid rgba(1, 16, 61, .10); border-radius: 16px; overflow: hidden;
    margin-bottom: 10px; border-top: 1px solid rgba(1, 16, 61, .10);
  }
  /* De lichte rand valt in donkere modus weg tegen de achtergrond. */
  :root[data-bs-theme="dark"] #wfClientsResults .wf-lrow-block { border-color: rgba(255, 255, 255, .10); }

  #wfClientsResults .wf-lrow { align-items: center; gap: 8px 10px; padding: 14px 14px 12px; }

  /* De naam krijgt de volle kaartbreedte: dat is waar het op dit scherm om draait. De twee
     actie-icoontjes (mailen, verwijderen) stonden eerst naast de naam, maar die 85px lieten er nog
     133px voor de naam over — te weinig, hij brak dan alsnog af. Ze staan nu rechts onderaan. */
  #wfClientsResults .wf-avatar        { order: 1; }
  #wfClientsResults .wf-lrow-id       { order: 2; flex: 1 1 0; min-width: 0; }
  #wfClientsResults .wf-lrow-actions  { order: 12; flex: none; margin-left: auto; }

  /* Op een kaartje mag de naam over twee regels: hem hier afkappen met puntjes was precies het
     probleem dat we aan het oplossen zijn, en verticaal is er ruimte zat. */
  #wfClientsResults .wf-lrow-id .wf-cell-title.-with-labels { flex-wrap: wrap; row-gap: 4px; }
  #wfClientsResults .wf-lrow-id .wf-cell-title,
  #wfClientsResults .wf-lrow-id .wf-cell-title.-with-labels .wf-cell-name {
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  /* De naam krimpt en wikkelt bínnen zijn eigen vak. Zonder deze regel rekende hij zijn volle
     tekstbreedte als startmaat, paste daarmee niet naast het klantnummer, en zakte hij als geheel
     naar een regel eronder — met het nummer eenzaam erboven. */
  #wfClientsResults .wf-lrow-id .wf-cell-title.-with-labels .wf-cell-name { flex: 1 1 auto; min-width: 0; }
  #wfClientsResults .wf-lrow-break    { order: 4; display: block; flex-basis: 100%; height: 0; margin: 0; }
  #wfClientsResults .wf-webfix-col    { order: 5; }
  #wfClientsResults .wf-lrow-status   { order: 6; }
  #wfClientsResults .wf-badge-metal   { order: 7; }
  #wfClientsResults .wf-lrow > form   { order: 8; }
  #wfClientsResults .wf-hosting-col   { order: 9; }
  #wfClientsResults .wf-lrow-break.-tweede { order: 10; }
  #wfClientsResults .wf-rijschakels   { order: 11; }

  /* De vaste kolombreedtes zijn hier zinloos — ze staan er om rijen te laten uitlijnen, en er zijn
     geen rijen meer. Alles krimpt naar zijn eigen inhoud en wikkelt netjes. */
  #wfClientsResults .wf-webfix-col,
  #wfClientsResults .wf-lrow-status,
  #wfClientsResults .wf-hosting-col { width: auto; flex: none; }
  /* De schakelaars delen de onderste regel met de twee actie-icoontjes; past dat niet, dan zakken
     de icoontjes eronder en staan ze rechts. */
  #wfClientsResults .wf-rijschakels { width: auto; flex: 1 1 auto; justify-content: flex-start; gap: 18px; flex-wrap: wrap; }

  /* Het bijschrift "over naar webfix" stak buiten zijn kolom van 104px; hier mag het gewoon naast
     het vinkje staan. */
  #wfClientsResults .wf-webfix-col .wf-webfix-check { flex-direction: row; gap: 7px; }
  #wfClientsResults .wf-webfix-check .wf-webfix-check-lbl { text-align: left; }

  /* Het meta-bandje lijnde uit onder de naam (82px inspringing); op een kaartje hoort het gewoon
     tegen de rand. */
  #wfClientsResults .wf-lrow-meta { padding: 9px 14px; }

  /* Een lege "Open website"-kolom hoeft op een kaartje geen ruimte te houden. */
  #wfClientsResults .wf-hosting-col:empty { display: none; }
}

/* ── Kaartkop op een telefoon ────────────────────────────────────────────────
 * "Nieuwe klant" is de hoofdactie van dit scherm en hoort dus over de volle breedte; Exporteren en
 * VPS-sync zijn tekstlinkjes van 20px hoog — te klein om te raken. */
@media (max-width: 575.98px) {
  .wf-tcard-head { flex-wrap: wrap; }
  .wf-tcard-head .wf-head-links { width: 100%; flex-wrap: wrap; gap: 8px; }
  .wf-tcard-head .wf-head-links > .wf-badge-primary { width: 100%; justify-content: center; height: 42px; }
  .wf-tcard-head .wf-head-links > .wf-link-soft { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ── Tabbalk + subtabs (.wf-tabblock) ─────────────────────────────────────────
 * 1:1 uit Claude Design "Webfix Systeemelementen" (sectie Tabbar, variant 1 · Glazig
 * — gekoppelde subtabs). Frosted-glass pil met de hoofdtabs; een tab met subtabs
 * (data-has-sub="1") klapt een tweede, grijze pil-rij open eronder. Klikgedrag in
 * wf-tabs.js (systeembreed, geen eigen JS per pagina nodig).
 *
 *   <div class="wf-tabblock">
 *     <div class="wf-tabbar-unit">
 *       <div class="wf-tabgroup wf-tg-glass">
 *         <button class="wf-tabx is-active" data-tab="a" data-has-sub="0"><i class="bi bi-x"></i><span>A</span></button>
 *         <button class="wf-tabx" data-tab="b" data-has-sub="1"><i class="bi bi-x"></i><span>B</span><i class="bi bi-chevron-down wf-subcaret"></i></button>
 *       </div>
 *       <div class="wf-subrow-divider"></div>
 *       <div class="wf-subrow">
 *         <div class="wf-subgroup wf-tg-sub" data-parent-tab="b">
 *           <button class="wf-tabx is-active">Sub 1</button>
 *           <button class="wf-tabx">Sub 2</button>
 *         </div>
 *       </div>
 *     </div>
 *     <div class="wf-tabpanels">
 *       <div class="wf-tabpanel" data-tab="a">…</div>
 *       <div class="wf-tabpanel" data-tab="b" style="display:none;">…</div>
 *     </div>
 *   </div> */
.wf-tabx { transition: color .2s, background .2s, box-shadow .2s, border-color .2s; }
/* .wf-tabx kan ook een <a> zijn (link-tabs, bv. de administratie-tabbalk) — nooit onderstreept. */
a.wf-tabx { text-decoration: none; }
.wf-tabx.is-active { font-weight: 700 !important; }
.wf-subcaret { transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s; }
.wf-tabx.is-active .wf-subcaret { opacity: .85; transform: rotate(180deg); }

.wf-tabbar-unit {
  width: fit-content; max-width: 100%; background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 18px; padding: 6px;
  box-shadow: 0 4px 16px rgba(1, 16, 61, .07);
}
/* overflow-x:auto blijft nodig als vangnet (heel veel tabs op een heel smal scherm), maar mag NOOIT
   als een klassieke scrollbar ogen — op tablet/mobiel hoort dit aan te voelen als swipen, niet
   scrollen. Scrollbar zelf onzichtbaar (native touch-swipe/momentum blijft gewoon werken). */
.wf-tabgroup, .wf-subgroup {
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.wf-tabgroup::-webkit-scrollbar, .wf-subgroup::-webkit-scrollbar { display: none; }

.wf-tabgroup { display: flex; gap: 10px; overflow-x: auto; }
/*  De tabgroep is soms een <ul> (taaltabs) en soms een <div>. Als <ul> erfde hij Bootstraps
    lijst-reset: 16px marge onderaan en een opsommingsteken-inspringing. Daardoor stond er onder de
    tabs een strook grijze achtergrond die er bovenaan niet was -- de balk oogde scheef. */
.wf-tabgroup, .wf-subgroup { margin: 0; padding-left: 0; list-style: none; }
.wf-tabgroup > li, .wf-subgroup > li { display: flex; }
/* Veegschaduw aan de randen: verschijnt alléén aan de kant waar nog tabs staan, en verdwijnt zodra
   je die kant bereikt. Zonder dit liep de balk op een telefoon gewoon af aan de rand — hij scrolde
   wél (de klantmodal heeft zes tabs in 260px), maar niets vertelde je dat er meer was.
   Puur CSS: de twee `local`-lagen schuiven mee met de inhoud en dekken de schaduw af zodra je aan
   het begin of het einde staat; de twee `scroll`-lagen blijven staan. Geen JS nodig. */
/* Alleen wanneer er te vegen valt; wf-tabs.js zet .wf-tg-scroll zodra de balk overloopt. */
.wf-tabgroup.wf-tg-scroll {
  --wf-tabfade: 255, 255, 255;
  background-image:
    linear-gradient(90deg, rgba(var(--wf-tabfade), .95), rgba(var(--wf-tabfade), 0)),
    linear-gradient(90deg, rgba(var(--wf-tabfade), 0), rgba(var(--wf-tabfade), .95)),
    radial-gradient(farthest-side at 0 50%, rgba(1, 16, 61, .13), rgba(1, 16, 61, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(1, 16, 61, .13), rgba(1, 16, 61, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
:root[data-bs-theme="dark"] .wf-tabgroup.wf-tg-scroll { --wf-tabfade: 26, 29, 39; }
/* Loopt de balk over, dan is hij ook met de muis te verschuiven (wf-tabs.js): het handje zegt dat.
   Tijdens het slepen selecteert de balk geen tekst meer -- anders trek je de labels blauw. */
.wf-tabgroup.wf-tg-scroll, .wf-subgroup.wf-tg-scroll { cursor: grab; }
.wf-tabgroup.is-sleepend, .wf-subgroup.is-sleepend { cursor: grabbing; user-select: none; }
.wf-tabgroup.is-sleepend .wf-tabx, .wf-subgroup.is-sleepend .wf-tabx { cursor: grabbing; }
/* Compact-fallback (JS, wf-tabs.js) — alleen gezet op grote schermen (≥992px) als de tabbalk daar
   ZELF nog zou overlopen/scrollen: iconen weg + kleinere marge, om zonder scroll te passen. Op
   kleinere schermen blijft dit uit (daar mag het gewoon swipen) en staan de iconen altijd aan. */
.wf-tabgroup.wf-tg-compact { gap: 6px; }
.wf-tabgroup.wf-tg-compact .wf-tabx i:not(.wf-subcaret) { display: none; }

/* Twee rijen in plaats van schuiven (.-wrap). Voor een balk met zoveel tabbladen dat schuiven niet
   meer prettig werkt: dan is een tab die je niet ziet erger dan een balk die twee regels hoog is
   (Tom, 22-09-2026, Early Birds met zeventien tabbladen). De veegschaduw en de compact-stand blijven
   vanzelf weg: er valt niets te schuiven, dus wf-tabs.js zet die klassen niet. */
.wf-tabgroup.-wrap { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }

/* ── Taaltabs (.wf-tg-lang) — systeembreed, zie /Admin/Stijlgids "Taaltabs en landcodes" ──────────
 * Voor een tabbalk die talen kiest (vlag + naam per tab): wikkelt (flex-wrap) i.p.v. horizontaal
 * te scrollen — een taal die wegscrolt kost een extra handeling boven op de klik die vertalen al
 * kost. Past de balk niet op één regel, dan zet wf-tabs.js (fitLangTabs) er .wf-tg-kort op: de
 * opmaak toont dan alleen nog de landcode naast de vlag, de volledige naam blijft in de tooltip
 * van de vlag zelf (_LangFlag). Markup per tab: <span class="wf-tabx-lang">Nederlands</span>
 * <span class="wf-tabx-lang-kort">NL</span> naast de _LangFlag-partial. */
.wf-tg-lang { flex-wrap: wrap; overflow: visible; background-image: none; }
.wf-tabx-lang-kort { display: none; }
.wf-tg-lang.wf-tg-kort .wf-tabx-lang { display: none; }
.wf-tg-lang.wf-tg-kort .wf-tabx-lang-kort { display: inline; }
.wf-tg-lang.wf-tg-kort .wf-tabx { padding-left: 10px; padding-right: 10px; gap: 6px; }

.wf-tg-glass .wf-tabx {
  display: inline-flex; align-items: center; gap: 8px; padding: 8.5px 18px;
  border: none; border-radius: 11px; background: transparent; cursor: pointer;
  font-weight: 600; font-size: 14.5px; color: #5b6b7d; white-space: nowrap;
}
.wf-tg-glass .wf-tabx:hover { background: rgba(1, 16, 61, .05); color: #0e1c2e; }
.wf-tg-glass .wf-tabx.is-active {
  background: linear-gradient(90deg, #b0d136, #da176c, #32bcee) !important; background-size: 200% 100% !important;
  animation: wf-ai-drift 9s ease-in-out infinite; color: #fff !important;
  box-shadow: 0 4px 14px rgba(218, 23, 108, .20);
  /* Inactieve tabs houden altijd hun 1px randje (ook in .-flush, zie hieronder) — de actieve tab NIET:
     die heeft al de volle gradient-vulling + schaduw, en een randje daar bovenop las als een hoekig
     kadertje i.p.v. een losse, ronde, "vrijstaande" pil. !important nodig om een eventuele inline
     border (bv. in een demo/pagina die 'm uit gewoonte overal zet) alsnog te overrulen. */
  border-color: transparent !important;
}
.wf-tg-glass .wf-tabx.is-active i { color: #fff !important; }
/* Admin-variant — blauwtinten in plaats van de merkgradient. Het beheerdeel (administratie, de
 * klantmodal) draagt de info-rolkleur, net als de admin-header en de admin-modalheader in de
 * stijlgids: zo zie je aan de kleur dat je in het beheer zit en niet in het CMS van een klant.
 * Bewust statisch — de drift hoort bij het merk, niet bij beheerschermen.
 *   <div class="wf-tabgroup wf-tg-glass -admin"> … </div> */
.wf-tg-glass.-admin .wf-tabx.is-active {
  background: linear-gradient(90deg, #1f93bd 0%, #32bcee 50%, #6fd2f2 100%) !important;
  animation: none;
  box-shadow: 0 4px 14px rgba(31, 143, 187, .22);
}
.wf-tg-sub.-admin .wf-tabx.is-active { color: #1f8fbb !important; }

/* ── Administratiedeel: alles in de admin-rolkleur ───────────────────────────
 * <body class="wf-adminsectie"> (gezet door _Layout op /admin/administratie/*). Daarbinnen dragen de
 * primaire knoppen en de actieve filterpillen dezelfde blauwtinten als de header en de tabs, zodat
 * het scherm één kleur spreekt in plaats van magenta accenten op een blauwe kop. Buiten deze sectie
 * verandert er niets. */
body.wf-adminsectie .wf-badge-primary,
body.wf-adminsectie .btn-primary {
  background: linear-gradient(90deg, #1f93bd 0%, #32bcee 50%, #6fd2f2 100%) !important;
  border-color: #1f93bd !important;
  color: #fff !important;
}
body.wf-adminsectie .wf-badge-primary:hover,
body.wf-adminsectie .btn-primary:hover {
  background: linear-gradient(90deg, #1a7fa3 0%, #23a9db 50%, #57c7ec 100%) !important;
}
/* De actieve pil in een filterrij (Ouder dan: alles · 7 · 14 · 30) is een .wf-badge-primary en valt
 * dus al onder de regel hierboven; deze regel houdt alleen de tekstkleur leesbaar. */
body.wf-adminsectie .wf-pill-field .wf-badge-primary { color: #fff !important; }

/* Knopbadges met een icoon + woord (potlood + "open") stonden links uitgelijnd zodra ze in een
 * kolom met vaste breedte rekken. In het midden staat de inhoud rustiger onder elkaar. */
.wf-actiestapel > .wf-badge { justify-content: center; }

/* Geen eigen horizontale marge/padding meer op divider/subrow — .wf-tabbar-unit padt zelf al
   links/rechts, dus divider en subtabs lijnen zo vanzelf uit met de main tabs erboven i.p.v. een
   dubbele inset (was: eigen 6px bovenop de padding van de unit → subtabs schoven naar binnen). */
.wf-subrow-divider { display: none; height: 1px; background: rgba(1, 16, 61, .07); margin: 6px 0 4px; }
.wf-subrow { display: none; padding: 0 0 2px; }
.wf-subgroup {
  display: flex; width: fit-content; max-width: 100%; overflow-x: auto; gap: 10px;
  background: #f2f4f9; border-radius: 11px; padding: 4px;
}
.wf-tg-sub .wf-tabx {
  font-size: 13px; font-weight: 600; padding: 8px 14px; border: none; border-radius: 8px;
  background: transparent; cursor: pointer; color: #67748a; white-space: nowrap;
}
.wf-tg-sub .wf-tabx:hover { color: #0e1c2e; }
.wf-tg-sub .wf-tabx.is-active { background: #fff !important; color: var(--wf-title, #a12359) !important; box-shadow: 0 2px 6px rgba(1, 16, 61, .10); }

.wf-tabpanels { margin-top: 20px; padding-top: 20px; border-top: 1px solid #f0f1f6; }
.wf-tabpanel { display: flex; align-items: center; gap: 16px; }

:root[data-bs-theme="dark"] .wf-tabbar-unit { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
:root[data-bs-theme="dark"] .wf-tg-glass .wf-tabx { color: #b7bec9; }
:root[data-bs-theme="dark"] .wf-tg-glass .wf-tabx:hover { background: rgba(255, 255, 255, .07); color: #fff; }
:root[data-bs-theme="dark"] .wf-subgroup { background: rgba(255, 255, 255, .06); }
:root[data-bs-theme="dark"] .wf-tg-sub .wf-tabx { color: #9aa2b1; }
:root[data-bs-theme="dark"] .wf-tg-sub .wf-tabx.is-active { background: #232733 !important; color: #fff !important; }
:root[data-bs-theme="dark"] .wf-tabpanels { border-top-color: rgba(255, 255, 255, .08); }

/* ── Tabbalk in een kaart ─────────────────────────────────────────────────────
 * Variant waarin de tabbalk de BOVENRAND van een kaart vormt (Claude Design
 * "Systeemelementen" → "Tabbar in een kaart", variant B). De tabbalk zit flush tegen de ronde
 * hoeken met alleen een onderrand; de tab-inhoud staat eronder in het kaart-lijf. Gebruikt als
 * schil om elke administratie-tab (link-tabs, geen client-side panel-switch).
 *
 *   <div class="wf-tabcard">
 *     <nav class="wf-tabbar-unit -flush"><div class="wf-tabgroup wf-tg-glass"> …<a class="wf-tabx">… </div></nav>
 *     <div class="wf-tabcard-body"> …inhoud… </div>
 *   </div> */
.wf-tabcard {
  background: #fff; border: 1px solid rgba(1, 16, 61, .08); border-radius: 24px;
  box-shadow: 0 1px 3px rgba(18, 20, 32, .06); overflow: hidden;
}
/* Exact de balk uit de stijlgids (tab Standaard → "Tabbalk in een kaart"). Die stond daar met inline
   stijlen; hier staan dezelfde waarden in de klasse, zodat elke pagina er hetzelfde uitziet als het
   voorbeeld. Twee lagen: een witte glans bovenin over een koele blauwgrijze verloop. Backdrop-filter
   staat expliciet uit — .wf-tabbar-unit heeft die aan voor de losse zwevende variant, en die blur
   negeert de afronding van de kaart eromheen, waardoor de hoeken vierkant ogen. */
.wf-tabbar-unit.-flush {
  width: auto; max-width: none; border: none; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #eef2fa 0%, #f7f9fd 55%, #eef4f8 100%);
  border-bottom: 1px solid rgba(1, 16, 61, .08); padding: 11px 26px;
}
/* Loopt de balk over, dan volgt de veegschaduw de kleur van díe balk (en niet die van de kaart). */
.wf-tabbar-unit.-flush .wf-tabgroup.wf-tg-scroll { --wf-tabfade: 244, 247, 252; }
/* Volgt er een panelenblok direct op zo'n balk, dan brengt dat blok GEEN tweede scheidingslijn mee:
   de balk heeft er al een. Twee lijnen vlak onder elkaar lazen als een streep die er per ongeluk stond. */
.wf-tabbar-unit.-flush + .wf-tabpanels { margin-top: 0; padding-top: 0; border-top: none; }
.wf-tabbar-unit.-flush .wf-tg-glass .wf-tabx,
.wf-tabbar-unit.-flush .wf-tabx { border: 1px solid rgba(1, 16, 61, .08); }
/* Het factuurpaneel in een admin-modal: de tabbalk ligt strak onder de kop en loopt van rand tot rand.
 *
 * De -flush-balk hóórt tegen de rand aan te liggen, maar hij staat hier in een `.modal-body` met
 * padding (`p-3 p-md-4`). Daardoor zat er links, rechts en boven een marge omheen en zweefde hij als
 * los blokje onder de blauwe kop. De negatieve marges hieronder trekken hem weer tot de rand; de
 * getallen zijn precies de padding van Bootstrap (1rem, en vanaf 768px 1,5rem), dus ze schuiven mee
 * als die verandert.
 *
 * De balk houdt zijn eigen binnenmarge (11px 26px), zodat de tabs niet tegen de rand van het venster
 * plakken — het gaat om het gríjze vlak dat doorloopt, niet om de knoppen. */
.wf-fp > .wf-tabblock > .wf-tabbar-unit.-flush { margin: -1rem -1rem 0; }
@media (min-width: 768px) {
  .wf-fp > .wf-tabblock > .wf-tabbar-unit.-flush { margin: -1.5rem -1.5rem 0; }
}
.wf-fp > .wf-tabblock > .wf-tabbar-unit.-flush + .wf-tabpanels { padding-top: 24px; }

.wf-tabcard-body { padding: 22px 24px 26px; }
@media (max-width: 575.98px) { .wf-tabcard-body { padding: 16px 14px 20px; } }

/* ── Klantpaneel in de admin-modal (.wf-kp) ──────────────────────────────────
 * Twee kolommen met ruime marges: links de tabkaart met orders/facturen/domeinen, rechts het pakket.
 * Twee omhulsels, precies zoals de stijlgids ze onderscheidt: een "clean kader" (alleen een dunne
 * rand, voor toelichting en formulieren) en een echte kaart (witte achtergrond, voor gegevens). */
/* Marge links en rechts gelijk. `calc(100vw - 48px)` deed dat níét: 100vw telt de verticale
   scrollbalk mee, en onder 576px heeft Bootstrap's .modal-dialog geen `margin: auto`, dus viel alle
   overgebleven ruimte aan de rechterkant (gemeten op 375px: 8px links, 40px rechts). Met marges in
   plaats van een viewport-berekening klopt het aan beide zijden — zelfde aanpak als de
   media-kies-modal. */
/* 1400 sinds 04-09-2026, gelijk aan het factuurvenster op het facturenoverzicht
   (.wf-flow-preview-dialog in flows.css): vanuit dít venster open je dezelfde factuur met dezelfde
   regeltabel, en dan hoort die niet ineens smaller te zijn. */
.wf-klant-dialog { max-width: 1400px; margin-left: 24px; margin-right: 24px; }
@media (min-width: 1448px) { .wf-klant-dialog { margin-left: auto; margin-right: auto; } }
@media (max-width: 575.98px) { .wf-klant-dialog { margin-left: 8px; margin-right: 8px; } }
/* Geen padding meer op het paneel zelf: de hoofdtabbalk loopt van rand tot rand van de modal, en elke
   tab brengt zijn eigen marge mee. */
.wf-kp { padding: 0; }
.wf-kp-kaderkop { font-weight: 700; font-size: 15px; color: #000229; margin-bottom: 10px; }
.wf-kp-kader { border: 1px solid rgba(1, 16, 61, .12); border-radius: 20px; padding: 22px 24px; }
.wf-kp-card {
  background: #fff; border: 1px solid rgba(1, 16, 61, .08); border-radius: 20px;
  box-shadow: 0 1px 3px rgba(18, 20, 32, .06); padding: 20px 24px;
}
/* Definitielijst in twee kolommen — labels links, waarden rechts, met een rustige scheiding. */
.wf-kp-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.wf-kp-dl dt { padding: 7px 0; font-weight: 400; color: #888B95; font-size: 14px; }
.wf-kp-dl dd { padding: 7px 0; margin: 0; font-weight: 600; color: #000229; font-size: 14px; text-align: right; }
.wf-kp-dl dt + dd { border-bottom: 1px solid rgba(1, 16, 61, .05); }
.wf-kp-dl dt { border-bottom: 1px solid rgba(1, 16, 61, .05); }
.wf-kp-dl dt:nth-last-of-type(1), .wf-kp-dl dd:nth-last-of-type(1) { border-bottom: none; }
/* Aanklikbare regel in de facturen- en domeinenlijst. */
.wf-kp-rij {
  display: flex; align-items: center; gap: 14px; padding: 13px 20px; text-decoration: none;
  color: inherit; border-top: 1px solid rgba(1, 16, 61, .06); transition: background .18s;
}
.wf-kp-rij:first-child { border-top: none; }
.wf-kp-rij:hover { background: rgba(50, 188, 238, .05); color: inherit; }
.wf-kp-tabs .wf-tabbar-unit.-flush { border-radius: 20px 20px 0 0; }
.wf-kp-tabs { border: 1px solid rgba(1, 16, 61, .08); border-radius: 20px; overflow: hidden; }

/* De hoofdtabbalk van de klantmodal (Gegevens · Administratie · Domeinen · Modules · Social · Overig).
   Vormt de bovenrand van het venster: geen eigen kader, want de modal is het kader al. De tabkaart
   ván de administratie (.wf-kp-tabs) zit daarbinnen en houdt wél zijn eigen rand. */
.wf-kt { border: none; border-radius: 0; }
.wf-kt > .wf-tabbar-unit.-flush { border-radius: 0; padding: 13px 26px; }

/* Order als open te klappen rij. De kop leest als een gewone tabelrij; het lijf eronder is het
   werkblad met de velden en de regels, en brengt zijn eigen marge mee — de tabkaart zelf staat op
   padding 0 omdat de rijen van rand tot rand horen te lopen. */
.wf-kp-order + .wf-kp-order .wf-lrow { border-top: 1px solid rgba(1, 16, 61, .06); }
.wf-kp-order.is-open > .wf-lrow { background: rgba(50, 188, 238, .05); }
.wf-kp-orderbody {
  padding: 4px 26px 24px; border-top: 1px solid rgba(1, 16, 61, .06);
  background: rgba(249, 251, 253, .7);
}
.wf-kp-caret { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
/* Het regeltabelletje mag zelf schuiven op een smal scherm; het formulier eromheen niet, anders
   schuift de hele order uit beeld. */
.wf-kp-orderbody .table-responsive { overflow-x: auto; }
.wf-kp-orderbody .wf-kp-regeltabel { min-width: 560px; }
.wf-kp-orderbody .wf-kp-regeltabel td,
.wf-kp-orderbody .wf-kp-regeltabel th { padding: 6px 8px; }
.wf-kp-orderbody .wf-kp-regeltabel .wf-inp { padding: 7px 10px; font-size: 13.5px; }
.wf-kp-tabs .wf-tabpanels { overflow-x: hidden; }
:root[data-bs-theme="dark"] .wf-kp-orderbody { background: rgba(255, 255, 255, .03); }
@media (max-width: 575.98px) {
  .wf-kp { padding: 18px 16px 22px; }
  /* 24px binnenmarge liet op een telefoon van 320px nog maar 233px over voor de velden. */
  .wf-kp-kader { padding: 18px 16px; }
}

/* ── /dashboard/Account — "Mijn gegevens" ────────────────────────────────────
 * Eén kaart met tabbladen (Bedrijf · Contactpersoon · Adressen · Social · Contactpagina), zelfde
 * tabbalk als het klantpaneel in de beheerkant. Daarvóór stonden hier vier Bootstrap-kaarten in
 * twee kolommen met vijfendertig velden onder elkaar — op een telefoon een lint van een halve meter.
 * De klassen hieronder zijn alleen de lijm; velden, kaders en knoppen komen uit de stijlgids. */
.wf-acc-vak { padding: 22px 0 4px; }
.wf-acc .wf-tabpanels { margin-top: 0; padding: 0; border-top: none; }

/* De kaders op deze pagina waren doorzichtig: alleen een rand op de paginakleur. Overal elders in het
   dashboard is een kaart wit, dus hier ook (Tom, 04-09-2026). */
.wf-acc .wf-kp-kader {
  background: var(--wf-surface, #fff);
  border-color: rgba(1, 16, 61, .08);
  box-shadow: 0 1px 3px rgba(18, 20, 32, .06);
}

/* Het bedrijfsblok in drie kolommen: de gegevens links over twee kolommen, "Inschrijving en btw"
   rechts in een eigen kader. Onder de 1100px past dat niet meer naast elkaar en staat het onder
   elkaar; het kader blijft dan gewoon een kader. */
.wf-acc-3kol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1100px) {
  .wf-acc-3kol { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 26px; }
}
.wf-acc-hoofd { min-width: 0; }
.wf-acc-zijkader {
  min-width: 0; border-radius: 16px; padding: 18px 18px 20px;
  background: var(--wf-bg, #f5f6fa);
}
[data-bs-theme="dark"] .wf-acc-zijkader { background: rgba(255, 255, 255, .05); }
@media (max-width: 575.98px) { .wf-acc-zijkader { padding: 16px 14px 18px; } }

/* Opslaan staat linksonder; de geruststelling erover schuift naar rechts. */
.wf-acc-balk .wf-acc-hint { margin-left: auto; }

/* Alleen-lezen waarde (sector, branche, omschrijving bedrijfstak): ziet er bewust níét uit als een
   invoerveld, want dan ga je erin klikken en gebeurt er niets. Vandaar geen rand en een rustige
   achtergrond — het leest als een gegeven, niet als een veld. */
.wf-acc-lees {
  min-height: 44px; display: flex; align-items: center;
  padding: 10px 14px; border-radius: 12px;
  background: var(--wf-bg, #f5f6fa); color: var(--wf-text, #1e293b);
  font-weight: 600; font-size: 14px; word-break: break-word;
}
.wf-acc-vast .wf-kp-kaderkop { display: flex; align-items: center; gap: 8px; }
.wf-acc-vast .wf-kp-kaderkop i { font-size: 13px; color: var(--wf-muted, #94a3b8); }

/* Aanhef: drie keuzerondjes met een echt aanraakvlak eromheen in plaats van losse radio's. */
.wf-acc-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-acc-keuze {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 0 16px 0 13px; border-radius: 9999px;
  border: 1px solid var(--wf-border, #e2e8f0); background: var(--wf-surface, #fff);
  cursor: pointer; font-weight: 600; font-size: 14px; margin: 0;
  transition: border-color .2s, background .2s;
}
.wf-acc-keuze:hover { border-color: var(--wf-muted, #94a3b8); }
.wf-acc-keuze:has(input:checked) { border-color: var(--wf-pink, #da176c); background: rgba(218, 23, 108, .06); }
/* "1 maand gratis" hoort op de knop zelf: dat is de reden om per jaar te kiezen, en die hoort niet
   drie regels lager in een uitleg te staan (Tom, 04-09-2026). */
.wf-acc-gratis {
  display: inline-flex; align-items: center; margin-left: 2px; padding: 3px 9px;
  border-radius: 9999px; font-size: 11.5px; font-weight: 700; line-height: 1;
  background: var(--wf-green-subtle, rgba(176, 209, 54, .18)); color: #4d6b00;
}
[data-bs-theme="dark"] .wf-acc-gratis { color: var(--wf-green-text, #b0d136); }
.wf-acc-keuze input { margin: 0; }

/* Schakelaar met uitleg ernaast in plaats van een kaal schuifje met één woord. */
.wf-acc-schakel { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 4px; cursor: pointer; }
.wf-acc-schakel .form-check-input { margin: 0; cursor: pointer; }
.wf-acc-schakel-txt { font-size: 14px; line-height: 1.4; }
.wf-acc-schakel-txt .wf-subtext { margin-top: 2px; }

/* ── /dashboard/Templates — de template-kiezer (.tk-*) ───────────────────────
 * 1:1 uit Claude Design "Webfix Template Keuze". De maten, radii en schaduwen komen uit dat
 * ontwerp; de kleuren zijn vertaald naar onze tokens zodat donkere modus meekomt in plaats van
 * alleen daar waar iemand een uitzondering had geschreven.
 *
 * De beheerkant (/admin/templates) gebruikt nog het oudere gedeelde overzicht; deze klassen zijn
 * dus bewust alleen voor de klantkant. */
/* Paginakaarten lopen even breed als de headerbalk erboven: geen eigen max-width, gewoon de
   breedte van de pagina-container. De maten uit de Claude Design-ontwerpen (1220-1420px) maakten
   ze op een breed scherm smaller dan die balk, en een kaart die niet uitlijnt valt meteen op. */
.tk { width: 100%; }

/* -- Kop -- */
.tk-top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tk-h1 { margin: 0; font-weight: 800; font-size: 26px; letter-spacing: -.025em; color: var(--wf-text, #1e293b); }
.tk-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--wf-text-soft, #666c73); }
.tk-cur {
  display: inline-flex; align-items: center; gap: 9px; margin-left: auto; height: 38px;
  padding: 0 8px 0 15px; border-radius: 9999px; background: rgba(176, 209, 54, .16);
  font-weight: 700; font-size: 12.5px; color: #4e6711;
}
.tk-cur b {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 9999px;
  background: var(--wf-surface, #fff); font-weight: 800; color: var(--wf-text, #1e293b);
}

/* -- Filterbalk -- */
.tk-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 16px;
  background: var(--wf-surface, #fff); border: 1px solid rgba(1, 16, 61, .07); border-radius: 20px;
  box-shadow: 0 10px 26px rgba(1, 16, 61, .05);
}
.tk-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 9999px; background: var(--wf-bg, #f4f5f9); }
.tk-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: none;
  border-radius: 9999px; background: transparent; cursor: pointer; font-weight: 600; font-size: 13px;
  color: var(--wf-text-soft, #666c73); white-space: nowrap; transition: color .2s cubic-bezier(.4, 0, .2, 1);
}
.tk-tab:hover { color: var(--wf-text, #1e293b); }
.tk-tab.is-on { background: var(--wf-title, #a12359); color: #fff; font-weight: 700; }
.tk-tab i { font-size: 12.5px; }

.tk-sbox { position: relative; display: inline-flex; align-items: center; margin-left: auto; width: 250px; }
.tk-sbox > i { position: absolute; left: 15px; font-size: 13px; color: var(--wf-muted, #9aa2b1); pointer-events: none; }
.tk-sbox input {
  box-sizing: border-box; width: 100%; height: 40px; padding: 0 16px 0 38px; font-size: 13.5px;
  border: 1px solid rgba(1, 16, 61, .12); border-radius: 12px; background: #fbfbfd;
  color: var(--wf-text, #1e293b); outline: none;
}
.tk-sbox input:focus { background: var(--wf-surface, #fff); border-color: var(--wf-blue, #32bcee); box-shadow: 0 0 0 3px rgba(50, 188, 238, .16); }

.tk-dark {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 15px 0 7px;
  border-radius: 9999px; border: 1px solid rgba(1, 16, 61, .12); background: var(--wf-surface, #fff); cursor: pointer;
}
.tk-track { flex: none; position: relative; width: 40px; height: 24px; border-radius: 9999px; background: #d7dae2; transition: background .28s cubic-bezier(.4, 0, .2, 1); }
.tk-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 4px rgba(1, 16, 61, .28); transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.tk-dark.is-on .tk-track { background: var(--wf-title, #a12359); }
.tk-dark.is-on .tk-knob { transform: translateX(16px); }
.tk-dark > span:last-child { font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b); white-space: nowrap; }

/* -- Raster -- */
.tk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.tk-card {
  display: flex; flex-direction: column; background: var(--wf-surface, #fff);
  border: 1px solid rgba(1, 16, 61, .07); border-radius: 24px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(1, 16, 61, .06);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .26s cubic-bezier(.4, 0, .2, 1), border-color .26s cubic-bezier(.4, 0, .2, 1);
}
.tk-card[hidden] { display: none; }
.tk-card:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(1, 6, 20, .11); border-color: rgba(1, 16, 61, .12); }
.tk-card.-cur { border-color: rgba(111, 138, 27, .45); box-shadow: 0 0 0 2px rgba(176, 209, 54, .28), 0 12px 30px rgba(1, 16, 61, .06); }

/* Voorbeeldvenster: bij ons de échte site in een iframe; het gradient-vlak is de terugval. */
.tk-shot { position: relative; margin: 12px 12px 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--wf-bg, #f5f6fa); }
.tk-shot iframe {
  /* De site rendert op desktopbreedte en wordt daarna teruggeschaald, zodat het kadertje de echte
     indeling toont. 560% en niet minder: het venster is in dit vier-koloms raster maar ~217px
     breed, en met 400% kwam de render op 869px uit — onder de 992px waar de templates naar hun
     tabletindeling overschakelen. Je zag dan een mobiel menu in het voorbeeld. */
  position: absolute; top: 0; left: 0; width: 560%; height: 560%; border: 0;
  transform: scale(.178571); transform-origin: 0 0; pointer-events: none;
}
.tk-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: rgba(255, 255, 255, .9); }
.tk-ph.-g1 { background: linear-gradient(135deg, rgba(50, 188, 238, .85), rgba(176, 209, 54, .9)); }
.tk-ph.-g2 { background: linear-gradient(135deg, rgba(218, 23, 108, .82), rgba(50, 188, 238, .88)); }
.tk-ph.-g3 { background: linear-gradient(135deg, rgba(220, 158, 47, .85), rgba(218, 23, 108, .8)); }
.tk-ph.-g4 { background: linear-gradient(135deg, rgba(176, 209, 54, .85), rgba(50, 188, 238, .85)); }
.tk-soonwrap {
  position: absolute; inset: 0; background: rgba(1, 16, 61, .32);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.tk-soon {
  padding: 7px 16px; border-radius: 9999px; background: rgba(255, 255, 255, .94);
  font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wf-title, #a12359); transform: rotate(-6deg);
}
.tk-chosen {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px; border-radius: 9999px; background: rgba(255, 255, 255, .95);
  font-weight: 700; font-size: 11.5px; color: #4e6711;
}
.tk-chosen i { font-size: 10px; color: #6f8a1b; }

/* -- Tekst -- */
.tk-body { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 0; }
.tk-nm { font-weight: 800; font-size: 16.5px; letter-spacing: -.015em; line-height: 1.25; color: var(--wf-text, #1e293b); }
.tk-cat { margin-top: 3px; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.tk-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tk-tag { display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 9px; border-radius: 9999px; font-weight: 700; font-size: 11px; }
.tk-tag i { font-size: 9.5px; }
.tk-tag.-shop   { background: rgba(176, 209, 54, .18); color: #4e6711; }
.tk-tag.-geen   { background: rgba(1, 16, 61, .06); color: #5b6b7d; }
.tk-tag.-dark   { background: rgba(1, 16, 61, .06); color: #5b6b7d; }
.tk-tag.-prem   { background: rgba(218, 23, 108, .10); color: var(--wf-title, #a12359); }
.tk-tag.-budget { background: rgba(50, 188, 238, .12); color: #1a7fa3; }
/*  "Super only" (Tom 01-10-2026): wat de klant zelf niet ziet maar een meekijkende superadmin wel. Op het tabblad een
    klein donker pilletje, boven de kaart een balkje. Donker en neutraal: het hoort bij ons, niet bij de klant. */
.tk-superonly { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; height: 18px; padding: 0 7px; border-radius: 9999px; background: #1e293b; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.tk-tab.is-on .tk-superonly { background: rgba(255, 255, 255, .22); }
.tk-card:has(> .tk-superonly) { position: relative; }
.tk-superonly.-kaart { position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0; height: 22px; padding: 0 10px; font-size: 10.5px; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.tk-superonly.-kaart i { font-size: 10px; }
.tk-desc {
  flex: 1; margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--wf-text-soft, #666c73);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tk-note { margin: 9px 0 0; font-size: 12px; color: var(--wf-muted, #94a3b8); }
.tk-note i { margin-right: 5px; }

/* -- Acties: onder elkaar, zodat de labels ook in de smalste kolom passen -- */
.tk-act { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.tk-act form { margin: 0; }
.tk-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
  height: 36px; padding: 0 14px; border-radius: 9999px; border: 1px solid transparent; cursor: pointer;
  font-weight: 600; font-size: 14px; text-decoration: none; transition: background .18s, border-color .18s, color .18s;
}
.tk-btn i { font-size: 12px; }
.tk-btn.-wit { background: var(--wf-surface, #fff); border-color: rgba(218, 23, 108, .3); color: var(--wf-title, #a12359); }
.tk-btn.-wit:hover { background: rgba(218, 23, 108, .06); color: var(--wf-title, #a12359); }
.tk-btn.-roze { background: var(--wf-pink, #da176c); color: #fff; }
.tk-btn.-roze:hover { background: #c2135f; color: #fff; }
/* "Binnenkort"-templates hebben nog geen voorbeeld -- geen klikbare knop, geen hover-belofte. */
.tk-btn.-disabled { opacity: .48; cursor: not-allowed; pointer-events: none; }
.tk-btn.-disabled:hover { background: var(--wf-surface, #fff); }
.tk-pill {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
  height: 36px; padding: 0 14px; border-radius: 9999px; font-weight: 600; font-size: 14px;
}
.tk-pill i { font-size: 12px; }
.tk-pill.-now  { background: rgba(176, 209, 54, .18); border: 1px solid rgba(111, 138, 27, .42); color: #4e6711; }
.tk-pill.-wait { background: var(--wf-bg, #f4f5f9); color: var(--wf-text-soft, #666c73); }
.tk-pill.-slot { background: var(--wf-bg, #f4f5f9); color: var(--wf-text-soft, #666c73); }

/* -- Meer volgt / lege staat -- */
.tk-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 280px; padding: 26px 22px; border-radius: 24px;
  border: 1.5px dashed rgba(218, 23, 108, .3); background: var(--wf-surface, #fff); text-align: center;
}
.tk-more[hidden] { display: none; }
.tk-more-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px;
  border-radius: 18px; background: rgba(218, 23, 108, .10); color: var(--wf-title, #a12359); font-size: 19px;
}
.tk-more-t { font-weight: 800; font-size: 15.5px; color: var(--wf-text, #1e293b); }
.tk-more-s { margin: 4px 0 0; max-width: 210px; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }

/* -- Donkere modus -- */
:root[data-bs-theme="dark"] .tk-card,
:root[data-bs-theme="dark"] .tk-bar,
:root[data-bs-theme="dark"] .tk-more { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
:root[data-bs-theme="dark"] .tk-tabs { background: rgba(255, 255, 255, .05); }
:root[data-bs-theme="dark"] .tk-sbox input { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #e7ebf2; }
:root[data-bs-theme="dark"] .tk-dark { background: #232733; border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .tk-cur b { background: #232733; color: #e7ebf2; }
:root[data-bs-theme="dark"] .tk-btn.-wit { background: #232733; color: #f1a9cb; }
:root[data-bs-theme="dark"] .tk-tag.-geen,
:root[data-bs-theme="dark"] .tk-tag.-dark { background: rgba(255, 255, 255, .07); color: #b6bfcd; }

/* -- Responsief: exact de breekpunten uit het ontwerp -- */
@media (max-width: 1240px) { .tk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .tk-grid { grid-template-columns: 1fr; }
  .tk-sbox { margin-left: 0; width: 100%; }
  .tk-tabs { width: 100%; }
  .tk-tab { flex: 1 1 0; justify-content: center; padding: 0 8px; }
  .tk-cur { margin-left: 0; }
  .tk-dark { width: 100%; justify-content: center; }
}
/* Onder 460px passen vijf tabs niet meer op één regel; ze wikkelen dan netjes in twee rijen in
   plaats van de balk uit te duwen. */
@media (max-width: 460px) {
  .tk-tabs { flex-wrap: wrap; }
  .tk-tab { flex: 1 1 auto; min-width: 88px; }
  .tk-h1 { font-size: 22px; }
}

/* ── /dashboard/layout/kleuren (.kl-*) ───────────────────────────────────────
 * 1:1 uit Claude Design "Webfix Kleuren". Maten, radii en schaduwen komen uit dat ontwerp; de
 * kleuren zijn vertaald naar onze tokens zodat donkere modus meekomt. De oudere wf-kl-*-opmaak in
 * het legacy webfix.css wordt door deze pagina niet meer gebruikt. */
.kl {
  width: 100%; background: var(--wf-surface, #fff);
  border: 1px solid rgba(1, 16, 61, .07); border-radius: 26px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(1, 16, 61, .07);
}
.kl-donker { margin-top: 24px; }

/* -- Kop -- */
.kl-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 20px 24px 0; }
.kl-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 13px; background: rgba(218, 23, 108, .10); color: var(--wf-title, #a12359); font-size: 15px;
}
.kl-h1 { margin: 0; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--wf-text, #1e293b); }
.kl-lead { margin: 12px 24px 0; font-size: 14px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }
.kl-lead b { color: var(--wf-text, #1e293b); font-weight: 700; }

/* -- Strook met het kleurvoorstel + het logo -- */
.kl-flowbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 18px 24px 0; padding: 14px 16px;
  border-radius: 20px; border: 1px solid rgba(1, 16, 61, .07);
  background: linear-gradient(120deg, rgba(176, 209, 54, .10), rgba(218, 23, 108, .07) 48%, rgba(50, 188, 238, .10));
}
.kl-flowtxt { flex: 1; min-width: 200px; font-size: 13.5px; line-height: 1.55; color: #4e6711; }
.kl-logo {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  width: 186px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(1, 16, 61, .09);
  background: var(--wf-surface, #fff);
}
.kl-logo img { max-width: 100%; height: 30px; object-fit: contain; display: block; }
.kl-logo-leeg { display: inline-flex; align-items: center; justify-content: center; height: 30px; color: var(--wf-muted, #94a3b8); font-size: 20px; }
.kl-logo-l { font-weight: 700; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }

/* -- Twee gelijke kaarten -- */
.kl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 24px 0; align-items: stretch; }
.kl-card { display: flex; flex-direction: column; border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; overflow: hidden; background: var(--wf-surface, #fff); }
.kl-card-h {
  display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--wf-border, #e2e8f0);
  background: #fbfbfd; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wf-text-soft, #666c73);
}
.kl-card-h i { font-size: 12px; color: var(--wf-muted, #9aa2b1); }
.kl-card-b { flex: 1; padding: 16px; }

/* Kleurvelden */
.kl-row + .kl-row { margin-top: 14px; }
.kl-lbl { display: block; margin-bottom: 7px; font-weight: 700; font-size: 13px; color: var(--wf-text, #1e293b); }
.kl-lbl small { display: block; margin-top: 2px; font-weight: 500; font-size: 11.5px; color: var(--wf-text-soft, #666c73); }
.kl-field { display: flex; align-items: center; gap: 10px; }
.kl-tip { margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: var(--wf-muted, #9aa2b1); }
.kl-sw {
  flex: none; position: relative; width: 54px; height: 44px; border-radius: 13px; overflow: hidden;
  border: 1px solid rgba(1, 16, 61, .10); cursor: pointer; padding: 0;
  transition: box-shadow .22s cubic-bezier(.4, 0, .2, 1), border-color .22s cubic-bezier(.4, 0, .2, 1);
}
.kl-sw:hover { border-color: rgba(1, 16, 61, .2); box-shadow: 0 4px 12px rgba(1, 6, 20, .12); }
/* De kleurkiezer zelf ligt iets buiten het vakje, zodat je alleen de kleur ziet en niet het
   browser-eigen randje eromheen. */
.kl-sw input {
  position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px;
  width: calc(100% + 12px); height: calc(100% + 12px); border: none; padding: 0; background: none; cursor: pointer;
}
.kl-hex {
  display: flex; align-items: center; flex: 1; min-width: 0; height: 44px; border-radius: 13px;
  border: 1px solid rgba(1, 16, 61, .12); background: #fbfbfd; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.kl-hex:focus-within { background: var(--wf-surface, #fff); border-color: var(--wf-blue, #32bcee); box-shadow: 0 0 0 3px rgba(50, 188, 238, .15); }
.kl-hash { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 100%; border-right: 1px solid rgba(1, 16, 61, .09); font-size: 14px; color: var(--wf-muted, #9aa2b1); }
.kl-hex input {
  flex: 1; min-width: 0; height: 100%; border: none; background: transparent; padding: 0 14px;
  font-weight: 700; font-size: 14.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--wf-text, #1e293b);
}
.kl-hex input:focus { outline: none; }
/*  Eén stap terug voor deze kleur. Subtiel grijs en pas zichtbaar als er iets terug te zetten is:
    een knop die er altijd staat maar meestal niets doet, leest als een risico. */
.kl-undo {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 100%;
  border: none; background: transparent; color: var(--wf-muted, #9aa2b1); cursor: pointer; font-size: 13px;
  transition: color .2s ease, background .2s ease;
}
.kl-undo:hover { color: var(--wf-text, #1e293b); background: rgba(1, 16, 61, .05); }
.kl-undo:focus-visible { outline: 2px solid var(--wf-blue, #32bcee); outline-offset: -2px; }
.kl-undo[hidden] { display: none; }
/*  Dezelfde knop in de kop van de kleurenkaart, maar dan voor alle drie tegelijk: rechts uitgelijnd
    en even hoog als de koptekst. */
.kl-undo-alles { margin-left: auto; width: 28px; height: 28px; border-radius: 9px; }
:root[data-bs-theme="dark"] .kl-undo:hover { background: rgba(255, 255, 255, .08); color: #e6eaf0; }
/*  Op touch is elk aanraakvlak minstens 44px. De knop in de kaartkop krijgt dat vlak zonder de
    kop hoger te maken: de negatieve marge houdt de balk op zijn eigen hoogte. */
@media (max-width: 1100px) {
  .kl-undo { width: 44px; }
  .kl-undo-alles { width: 44px; height: 44px; margin-top: -8px; margin-bottom: -8px; }
}

/* Voorbeeld */
.kl-prev { border-radius: 16px; overflow: hidden; border: 1px solid rgba(1, 16, 61, .08); }
.kl-prev-top { padding: 18px 18px 20px; color: #fff; }
.kl-prev-t { font-weight: 800; font-size: 17px; letter-spacing: -.015em; }
.kl-prev-s { margin: 4px 0 0; font-size: 13px; opacity: .92; }
.kl-prev-b { padding: 16px 18px 18px; background: var(--wf-surface, #fff); }
.kl-prev-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kl-pbtn { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 9999px; border: none; font-weight: 700; font-size: 14px; color: #fff; }
.kl-plink { font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.kl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kl-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 9999px; font-weight: 700; font-size: 12.5px; color: #fff; }
.kl-note { margin: 12px 0 0; font-size: 12px; color: var(--wf-muted, #9aa2b1); }

/* -- Voet -- */
.kl-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding: 16px 24px 22px;
  border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd;
}
.kl-foot-n { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.kl-foot-n i { color: var(--wf-muted, #9aa2b1); }
.kl-foot-a { display: flex; align-items: center; gap: 9px; }
/* Het rooster met de donkere achtergrondkleuren staat binnen dezelfde kaart. */
.kl-darkgrid { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 24px 0; }

/* -- Donkere modus -- */
:root[data-bs-theme="dark"] .kl,
:root[data-bs-theme="dark"] .kl-card,
:root[data-bs-theme="dark"] .kl-logo,
:root[data-bs-theme="dark"] .kl-prev-b { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
:root[data-bs-theme="dark"] .kl-card-h,
:root[data-bs-theme="dark"] .kl-foot { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
:root[data-bs-theme="dark"] .kl-hex { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .kl-hex:focus-within { background: rgba(255, 255, 255, .08); }

/* -- Responsief: de breekpunten uit het ontwerp -- */
@media (max-width: 900px) {
  .kl-cols { grid-template-columns: 1fr; }
  .kl-head, .kl-cols, .kl-foot { padding-left: 16px; padding-right: 16px; }
  .kl-flowbar, .kl-lead, .kl-darkgrid { margin-left: 16px; margin-right: 16px; }
  .kl-logo { width: 100%; }
  .kl-foot-a { width: 100%; margin-left: 0; }
  .kl-foot-a > * { flex: 1; }
}
@media (max-width: 575.98px) {
  /* De AI-knop is een pil met vaste hoogte; op de smalste schermen krijgt hij de volle regel en
     kapt het label netjes af in plaats van de strook uit te duwen. */
  .kl-flowbar .wf-aibtn { width: 100%; justify-content: center; min-width: 0; }
  .kl-flowbar .wf-aibtn-body { min-width: 0; }
  .kl-flowbar .wf-aibtn-body > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kl-foot-a { flex-wrap: wrap; }
  .kl-foot-a > * { flex: 1 1 100%; justify-content: center; }
}


/* -- Uitlegvenster (gedeeld: kleurenpagina, later meer schermen) -------------
   Videoplek + korte uitleg. De plek voor de opname staat er alvast in zodat zichtbaar is hoe het
   venster eruitziet zodra we de video toevoegen. */
.wf-uitleg-video {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  aspect-ratio: 16 / 9; margin-bottom: 20px;
  border: 1px dashed var(--wf-border, #e2e8f0); border-radius: 16px;
  background: var(--wf-bg, #f5f6fa); color: var(--wf-muted, #94a3b8);
}
.wf-uitleg-video-play {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 9999px; background: var(--wf-surface, #fff); color: var(--wf-title, #a12359);
  font-size: 22px; box-shadow: 0 2px 10px rgba(1, 16, 61, .10);
}
.wf-uitleg-video-txt { font-size: 12.5px; font-weight: 600; }
.wf-uitleg-lead { font-size: 14px; line-height: 1.55; color: var(--wf-text-soft, #475569); margin: 0 0 16px; }
.wf-uitleg-lijst { margin: 0 0 4px; }
.wf-uitleg-lijst dt { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: var(--wf-text, #1e293b); margin-top: 14px; }
.wf-uitleg-lijst dt:first-child { margin-top: 0; }
.wf-uitleg-lijst dd { margin: 3px 0 0 25px; font-size: 13.5px; line-height: 1.5; color: var(--wf-text-soft, #475569); }
.wf-uitleg-stip { flex: none; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .12); }
.wf-uitleg-tip {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px;
  border-radius: 14px; background: var(--wf-hover-bg, #f8fafc);
  font-size: 13px; line-height: 1.55; color: var(--wf-text-soft, #475569);
}
.wf-uitleg-tip i { flex: none; margin-top: 2px; color: var(--wf-blue, #32bcee); font-size: 14px; }
:root[data-bs-theme="dark"] .wf-uitleg-video { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .wf-uitleg-video-play { background: #232733; }

/* De social-beheerder zit hier in een tabblad en niet in een eigen kaart (zoals op
   /dashboard/marketing/social). Hij krijgt daarom hier zijn kader, met overflow:hidden zodat de
   grijze kanalenrail tot tegen de ronde hoeken doorloopt. */
.wf-acc-socmgr {
  border: 1px solid var(--wf-border, #e2e8f0); border-radius: 20px; overflow: hidden;
  background: var(--wf-surface, #fff);
}
:root[data-bs-theme="dark"] .wf-acc-socmgr { border-color: rgba(255, 255, 255, .10); background: #1a1d27; }

/* Actiebalk onderaan: melding links, knop rechts. */
.wf-acc-balk { align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wf-acc-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--wf-muted, #94a3b8); }
.wf-acc-hint i { color: #6f8a1b; }

@media (max-width: 767.98px) {
  .wf-acc-vak { padding: 18px 0 2px; }
  /* Hoofdactie over de volle breedte, melding eronder. */
  .wf-acc-balk { flex-direction: column-reverse; align-items: stretch; }
  .wf-acc-balk .wf-btn { width: 100%; justify-content: center; }
  .wf-acc-hint { justify-content: center; }
}

:root[data-bs-theme="dark"] .wf-acc-lees { background: rgba(255, 255, 255, .05); color: #e7ebf2; }
:root[data-bs-theme="dark"] .wf-acc-keuze { background: #232733; border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .wf-acc-keuze:has(input:checked) { background: rgba(218, 23, 108, .18); }
:root[data-bs-theme="dark"] .wf-kp-card { background: #232733; border-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .wf-kp-kader { border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .wf-kp-kaderkop,
:root[data-bs-theme="dark"] .wf-kp-dl dd { color: #e7ebf2; }

/* Tabkaart met een rijenlijst erin (.wf-lrow) — dan hoort de kaart zélf geen padding te hebben: de
   rijen lopen van rand tot rand, precies zoals op /admin/clients, en de kop en voet brengen hun eigen
   marge mee. Met de standaardpadding zou er een tweede kader binnen het kader ontstaan. */
.wf-tabcard-body.-flush { padding: 0; }
.wf-tabcard-body.-flush > .wf-list-bleed:first-child { margin-top: 0; }
:root[data-bs-theme="dark"] .wf-tabcard { background: #1a1d27; border-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .wf-tabbar-unit.-flush {
  background: rgba(255, 255, 255, .05); border-bottom-color: rgba(255, 255, 255, .1);
}

/* ── Formulieren & inputvelden (.wf-flabel / .wf-inp / .wf-select) ────────────────
 * Systeembrede basis-styling voor gewone formuliervelden — bestond nog niet (alles
 * draaide tot nu toe op kale Bootstrap-defaults). Subtiel getint vlak i.p.v. vlak wit,
 * dunne rand, blauwe focusring (zelfde blauw als overal elders: #32bcee). Gebruik op
 * <input>/<textarea>/<select> door de klasse toe te voegen — geen wrapper nodig. */
.wf-flabel { display: block; font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--wf-text-soft, #475569); margin-bottom: 7px; }
.wf-inp, .wf-select {
  display: block; width: 100%; height: 48px; padding: 0 16px;
  border: 1px solid rgba(1, 16, 61, .10); border-radius: 12px;
  background: rgba(1, 16, 61, .015);
  font-family: inherit; font-size: 15px; color: var(--wf-black, #000229);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.wf-inp::placeholder { color: var(--wf-placeholder, #9aa2b1); }

/* ── Placeholders ────────────────────────────────────────────────────────────
   Een placeholder is een hint, geen ingevulde waarde. Bootstrap tekent hem bijna zo donker als
   echte tekst (--bs-secondary-color, rond rgba(33,37,41,.75)), en dan lijkt een leeg veld gevuld.
   Onze eigen velden stonden al op #9aa2b1; deze regel trekt dat door naar élk invoerveld, ook de
   Bootstrap-velden en alles wat later wordt toegevoegd.

   opacity:1 hoort erbij: Firefox zet er uit zichzelf doorzichtigheid op, en dan valt hij alsnog
   ergens tussen de kleur die je koos en de achtergrond.

   font-weight:400 ook: een placeholder erft het gewicht van zijn veld, en staat dat veld ergens
   vet (een zoekbalk, een bedragveld), dan schreeuwt de hint harder dan de ingevulde tekst.

   Selectiviteit gelijk aan die van Bootstrap; dit bestand laadt daarna en wint daarmee. Een veld
   dat zelf een andere placeholderkleur zet, houdt die gewoon. */
input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.form-select::placeholder {
  color: var(--wf-placeholder, #9aa2b1);
  font-weight: 400;
  opacity: 1;
}
.wf-inp:focus, .wf-select:focus {
  outline: none; border-color: var(--wf-blue, #32bcee); background: #fff;
  box-shadow: 0 0 0 3px rgba(50, 188, 238, .14);
}
.wf-inp:disabled, .wf-select:disabled { background: rgba(1, 16, 61, .04); color: #aab0bd; cursor: not-allowed; }
textarea.wf-inp { height: auto; min-height: 112px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.wf-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239aa2b1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
}
:root[data-bs-theme="dark"] .wf-inp, :root[data-bs-theme="dark"] .wf-select { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e6eaf0; }
:root[data-bs-theme="dark"] .wf-inp:focus, :root[data-bs-theme="dark"] .wf-select:focus { background: rgba(255, 255, 255, .07); }

/* ── Sluiten-knop (×) ────────────────────────────────────────────────────────
 * 1:1 uit het systeemelementen-ontwerp. Twee varianten:
 *
 *   A · Ghost minimal — <button class="wf-close wf-close-ghost"><i class="ti ti-x"></i></button>
 *       Rustig en onopvallend; voor sluitknoppen ín een kaart/paneel waar de × geen
 *       aandacht mag trekken.
 *   B · Gradient-ring — vereist een inner-span voor de witte kern:
 *       <button class="wf-close wf-close-ring"><span class="wf-close-inner"><i class="ti ti-x"></i></span></button>
 *       Merk-accent; voor prominente sluitknoppen (bv. de uitgeschoven mobiele sidebar).
 *       Het kruis draait bij hover een kwartslag. */
.wf-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: none; padding: 0; border-radius: 9999px; background: transparent;
  cursor: pointer; text-decoration: none;
  transition: background .2s, color .2s, box-shadow .2s, transform .2s, filter .2s;
}
.wf-close-ghost { width: 34px; height: 34px; color: #aab0bd; font-size: 16px; }
.wf-close-ghost:hover { background: rgba(1, 16, 61, .07); color: #5b6b7d; }

.wf-close-ring { width: 36px; height: 36px; padding: 1.5px; background: linear-gradient(90deg, #b0d136, #da176c, #32bcee); }
.wf-close-ring:hover { filter: brightness(1.08); }
.wf-close-ring .wf-close-inner {
  width: 100%; height: 100%; border-radius: 9999px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #000229; font-size: 15px; line-height: 1;
}
.wf-close-ring .wf-close-inner i { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.wf-close-ring:hover .wf-close-inner i { transform: rotate(90deg); }

:root[data-bs-theme="dark"] .wf-close-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
:root[data-bs-theme="dark"] .wf-close-ring .wf-close-inner { background: #232733; color: #fff; }

/* ── Logo's & Webfix Flows-woordmerk ─────────────────────────────────────────
 * 1:1 uit het Claude-Design-ontwerp "Webfix Logo's". Herbruikbaar binnen het CMS
 * én later elders (bv. sales-site): het "Flows"-woordmerk (gradient-tekst, evt.
 * bewegend), de diamant+Flows-lockup, en de logo-showcasekaarten.
 * Vereist: Sansation-font (hieronder) + /assets/img/webfix-diamond.png (mask). */
@font-face { font-family: 'Sansation'; font-weight: 300; font-style: normal; font-display: swap; src: url('/assets/fonts/sansation/Sansation_Light.ttf') format('truetype'); }
@font-face { font-family: 'Sansation'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/sansation/Sansation_Regular.ttf') format('truetype'); }
@font-face { font-family: 'Sansation'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/sansation/Sansation_Bold.ttf') format('truetype'); }

@keyframes lg-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* "Flows"-woordmerk als gradient-tekst; .move laat de gradient rustig bewegen (zoals de AI-knop). */
.lg-flows { font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: 0; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lg-flows.move { background-size: 200% 100%; animation: lg-drift 9s ease-in-out infinite; }
.lg-tm { font-family: var(--font-body, inherit); font-weight: 700; font-size: clamp(9px, .38em, 14px); vertical-align: text-top; position: relative; top: 0.45em; line-height: 1; margin-left: .06em; -webkit-text-fill-color: #9aa2b1; color: #9aa2b1; }
/* Herbruikbaar "Webfix"-woordmerk als scherpe inline-SVG (partial _WfWordmark). Schaal via font-size
   op de ouder; recolor via `color` (fill=currentColor). */
.wf-wm-svg { height: 1em; width: auto; display: block; shape-rendering: geometricPrecision; }

/* Diamant + Flows als één doorlopende gradient (diamant via mask, Flows via text-clip). */
@property --lgp { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes lg-unite { 0% { --lgp: 0px; } 50% { --lgp: -244.2px; } 100% { --lgp: 0px; } }
.lg-uni { display: inline-flex; align-items: center; gap: 14px; }
.lg-uni-dia { width: 64px; height: 64px; flex: none; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-repeat: no-repeat; background-size: 244.2px 100%; background-position: 0 0; -webkit-mask: url('/assets/img/webfix-diamond.png') center/contain no-repeat; mask: url('/assets/img/webfix-diamond.png') center/contain no-repeat; }
.lg-uni-fl { font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 56px; letter-spacing: -.02em; line-height: 1; background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%); background-repeat: no-repeat; background-size: 244.2px 100%; background-position: -78px 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lg-uni.move .lg-uni-dia { background-size: 488.4px 100%; background-position: calc(var(--lgp)) 0; animation: lg-unite 9s ease-in-out infinite; }
.lg-uni.move .lg-uni-fl { background-size: 488.4px 100%; background-position: calc(var(--lgp) - 78px) 0; animation: lg-unite 9s ease-in-out infinite; }

/* Showcasekaart voor een logo (licht of donker vlak) + onderschrift. */
.lg-card { background: #fff; border: 1px solid var(--border-hairline, #EDF5FA); border-radius: 26px; box-shadow: 0 1px 3px rgba(18, 20, 32, .08); display: flex; align-items: center; justify-content: center; }
.lg-card.dark { background: #000229; border-color: rgba(255, 255, 255, .08); }
.lg-cap { font-family: var(--font-body, inherit); font-size: 12.5px; font-weight: 600; color: #8a93a3; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) { .lg-flows.move, .lg-uni.move .lg-uni-dia, .lg-uni.move .lg-uni-fl { animation: none; } }

/* ── W-Sync — het submerk voor synchroniseren ────────────────────────────────
 * 1:1 uit het Claude-Design-ontwerp "Webfix Logo's" (sectie Webfix Sync). Waar Flows™ de
 * volle merkgradient draagt, neemt W-Sync alleen de blauw-groene helft ervan: dezelfde
 * familie, maar rustiger en technischer. Het beeldmerk is een dubbele ring die twee kanten
 * om elkaar heen beweegt — het uitwisselen zelf.
 *
 * Schrijf de naam nooit als kale tekst: gebruik de partial _WfSyncMark, dan komt het
 * beeldmerk automatisch mee. Zie docs/stijl.md §5c en /admin/stijlgids → Logo's.
 *
 *   Woordmerk + beeldmerk:  <partial name="_WfSyncMark" />            → ◎ W-Sync™
 *   Alleen het beeldmerk:   <span class="wf-sync-ic wf-sync-ic-md"></span>
 *   Als laadindicator:      diezelfde ring + .is-bezig (blijft draaien)
 * Maten van het losse beeldmerk: -sm (16px) · -md (24px) · -lg (38px), verder via font-size. */
@keyframes wf-sync-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/*  De lockup: beeldmerk + woord blijven altijd samen op één regel en schalen mee met de
    tekst eromheen (alles in em). vertical-align tilt hem op de basislijn van een zin. */
.wf-sync-mark { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; line-height: 1; vertical-align: -.14em; }
.wf-sync-word {
  font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -.01em;
  background-image: linear-gradient(90deg, #32bcee 0%, #6fc8a8 50%, #b0d136 100%); background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.wf-sync-mark.move .wf-sync-word { background-size: 200% 100%; animation: wf-sync-drift 7s ease-in-out infinite; }
.wf-sync-tm { font-family: var(--font-body, inherit); font-weight: 700; font-size: max(8px, .34em); line-height: 1; vertical-align: text-top; position: relative; top: .2em; margin-left: .08em; -webkit-text-fill-color: var(--wf-muted, #9aa2b1); color: var(--wf-muted, #9aa2b1); }

/*  Het beeldmerk: twee halve ringen, de buitenste blauw (rechtsom), de binnenste groen
    (linksom). Staand staat het stil; met .move of .is-bezig draaien ze om elkaar heen. */
.wf-sync-ic { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; vertical-align: -.16em; }
.wf-sync-mark .wf-sync-ic { font-size: .84em; }
.wf-sync-ic::before, .wf-sync-ic::after { content: ""; position: absolute; border-radius: 9999px; border: .125em solid transparent; }
.wf-sync-ic::before { inset: 0; border-top-color: #32bcee; border-right-color: #32bcee; }
.wf-sync-ic::after { inset: .2em; border-bottom-color: #b0d136; border-left-color: #b0d136; }
.wf-sync-ic.move::before, .wf-sync-ic.is-bezig::before { animation: wf-spin 3.6s linear infinite; }
.wf-sync-ic.move::after, .wf-sync-ic.is-bezig::after { animation: wf-spin 2.6s linear infinite reverse; }
/*  Als laadindicator draait hij merkbaar vlotter: de klant moet zien dat er íets gebeurt. */
.wf-sync-ic.is-bezig::before { animation-duration: 1.3s; }
.wf-sync-ic.is-bezig::after { animation-duration: .95s; }
/*  Losse maten voor het beeldmerk zonder woord (knoppen, kaarten, favicon-achtige plekken). */
.wf-sync-ic-sm { font-size: 16px; }
.wf-sync-ic-md { font-size: 24px; }
.wf-sync-ic-lg { font-size: 38px; }

/*  Op een donkere of gekleurde ondergrond: woord vol wit, ring wit met een zachte tweede boog. */
.wf-sync-mark.-wit .wf-sync-word { background-image: none; -webkit-text-fill-color: #fff; color: #fff; }
.wf-sync-mark.-wit .wf-sync-tm { -webkit-text-fill-color: rgba(255, 255, 255, .7); color: rgba(255, 255, 255, .7); }
.wf-sync-ic.-wit::before { border-top-color: #fff; border-right-color: #fff; }
.wf-sync-ic.-wit::after { border-bottom-color: rgba(255, 255, 255, .72); border-left-color: rgba(255, 255, 255, .72); }

/*  De gradient-pil: het submerk als badge, bijvoorbeeld boven een rapport of in een header. */
.wf-sync-badge { display: inline-flex; align-items: center; gap: .46em; padding: .3em 1.15em .3em .38em; border-radius: 9999px; background: linear-gradient(90deg, #32bcee, #6fc8a8, #b0d136); box-shadow: 0 8px 20px rgba(50, 188, 238, .24); }
.wf-sync-badge-dot { flex: none; width: 1.85em; height: 1.85em; border-radius: 9999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .06); }
.wf-sync-badge-dot .wf-sync-ic { font-size: 1.08em; }
.wf-sync-badge .wf-sync-word { background-image: none; -webkit-text-fill-color: #fff; color: #fff; }
.wf-sync-badge .wf-sync-tm { -webkit-text-fill-color: rgba(255, 255, 255, .85); color: rgba(255, 255, 255, .85); }

@media (prefers-reduced-motion: reduce) { .wf-sync-mark.move .wf-sync-word, .wf-sync-ic.move::before, .wf-sync-ic.move::after { animation: none; } }

/* ── Vaste bodemmarge onder de laatste kaart (systeembreed) ───────────────────
 * Oorzaak van de grijze balk onderaan een pagina: <body> heeft een lichtgrijze
 * achtergrond (--wf-bg, #f5f6fa) die afwijkt van de witte kaarten, en
 * .body-wrapper (Spike-template) heeft min-height:100vh zonder eigen
 * bottom-padding — is de pagina-inhoud korter dan het scherm, dan vult die
 * grijze <body>-kleur de rest van de 100vh-doos, direct onder de laatste
 * kaart, zonder enige marge. Dit dwingt een vaste 30px marge af, ongeacht
 * paginahoogte — laadt ná Spike's styles.css en wint. */
.body-wrapper { padding-bottom: 30px !important; }

/* ── Bootstrap-validatie op .wf-inp/.wf-select ─────────────────────────────────
 * Bootstrap's eigen was-validated-CSS kleurt alleen .form-control rood/groen; onze
 * .wf-inp/.wf-select zijn geen .form-control, dus die styling hieronder toevoegen.
 * De .invalid-feedback/.valid-feedback show/hide-logica van Bootstrap zelf werkt al
 * (die is generiek op :invalid/:valid, niet aan .form-control gebonden). */
.was-validated .wf-inp:invalid, .was-validated .wf-select:invalid, .wf-inp.is-invalid, .wf-select.is-invalid {
  border-color: #d81f25; background-color: rgba(216, 31, 37, .03);
}
.was-validated .wf-inp:invalid:focus, .was-validated .wf-select:invalid:focus, .wf-inp.is-invalid:focus, .wf-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(216, 31, 37, .14);
}
.was-validated .wf-inp:valid, .was-validated .wf-select:valid, .wf-inp.is-valid, .wf-select.is-valid {
  border-color: #8ea82c;
}


/* Onbepaalde voortgang: een balk die doorloopt zonder te weten hoe ver het is. Voor wachten waarbij
   de server geen voortgang meldt — een verzonnen percentage dat op 90% blijft staan is erger dan
   geen percentage. Zet 'm naast .wf-prog. */
.wf-prog-onbepaald .wf-prog-fill {
  width: 38%;
  animation: wf-prog-loop 1.5s ease-in-out infinite;
}
@keyframes wf-prog-loop {
  0%   { margin-left: -38%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-prog-onbepaald .wf-prog-fill { animation: none; width: 100%; margin-left: 0; opacity: .5; }
}

/* ── Glazen zweefknoppen: "naar boven" + chatknop (2026-08-09) ────────────────
 * Zelfde "Webfix Scroll To Top" uit claude-design als op de publieke site/aanbiedingspagina's
 * (wf-sales.css: .wf-naar-boven / .wf-chatknop) — hier overgezet naar het CMS zelf: een glasring
 * om een opake witte schijf, met alleen het icoon erin. Inkt-glas (donkere tint), want deze knoppen
 * hangen op de lichte CMS-achtergrond — wit-glas zou daar wegvallen.
 *
 * .wf-naar-boven: verschijnt pas na scrollen (wf-scrolltop.js zet .is-visible), anders onzichtbaar.
 *   <button type="button" class="wf-naar-boven" aria-label="Terug naar boven">
 *     <span class="wf-naar-boven-schijf"><i class="bi bi-arrow-up"></i></span>
 *   </button>
 *
 * .wf-chatknop: altijd zichtbaar, opent de eigen livechat-widget (klantdashboard: vervangt de oude
 *   roze pil-met-label .wf-chat-launcher — die staat nog gedemonstreerd in Stijlgids als backup).
 *   Zit .wf-chatknop in dezelfde hoek als .wf-naar-boven (het klantdashboard, via #wfLiveChat), dan
 *   schuift "naar boven" automatisch een stukje omhoog zodat ze elkaar niet raken. */
.wf-naar-boven, .wf-chatknop {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 60px; height: 60px; padding: 6px;
  border: 1.5px solid rgba(1, 16, 61, .14); border-radius: 9999px;
  background: rgba(1, 16, 61, .07);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 22px rgba(1, 6, 20, .12);
  cursor: pointer;
  transition: background .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1),
              opacity .3s, visibility .3s;
}
/* Alleen "naar boven" zweeft zelf (position:fixed). .wf-chatknop krijgt zijn plek altijd van een
   bestaande wrapper (#wfLiveChat/.wf-chat of #wfAdminBar/.wf-abar, allebei al position:fixed) — zet
   hier ZELF geen position/right/bottom op .wf-chatknop: dat botste met de position:relative die
   .wf-chat-launcher/.wf-abar-pill nodig hebben (right/bottom bleven dan als offset toegepast op de
   relative-positionering, en schoof de knop 24px omhoog/naar links het "naar boven"-knopje in). */
/* ── Plaatsing van de zwevende knoppen — één plek voor álle schermen ─────────
   De chatknop staat onderaan en bepaalt de marges; "naar boven" staat er recht bovenop. Beide
   lezen dezelfde tokens (chat.css doet dat ook voor .wf-abar en .wf-chat), zodat ze niet meer uit
   elkaar kunnen lopen. Dat gebeurde wél: op een telefoon zat de adminchatknop op 12px van de rand
   en "naar boven" op 24px, dus stonden ze schuin boven elkaar.

   Wil je de hele stapel verschuiven (bijvoorbeeld omdat er een balk onderin het scherm plakt),
   zet dan `--wf-zweef-onder` hoger op de body — beide knoppen schuiven dan samen mee. */
:root {
  --wf-zweef-rechts: 22px;   /* marge van de adminchatknop (#wfAdminBar) = de standaard */
  --wf-zweef-onder:  22px;
  --wf-zweef-maat:   60px;   /* hoogte van de chatknop */
  --wf-zweef-lucht:  10px;   /* ruimte tussen de twee */
}
/* De klantdashboard-widget staat iets ruimer; `body:has(#id)` weegt zwaarder dan `:root`, dus deze
   wint ook binnen de mobiele query hieronder. */
body:has(#wfLiveChat) { --wf-zweef-rechts: 24px; --wf-zweef-onder: 24px; }
@media (max-width: 575.98px) {
  :root { --wf-zweef-rechts: 12px; --wf-zweef-onder: 12px; }
  body:has(#wfLiveChat) { --wf-zweef-rechts: 14px; --wf-zweef-onder: 14px; }
}

/* Ruimte onder een blok dat onderaan de pagina eindigt, zodat het niet ónder de zwevende knoppen
   doorloopt. Nodig zodra een actieknop de volle breedte krijgt: dan raakt hij de chatknop rechtsonder
   en tik je chat in plaats van opslaan. Uitgerekend uit dezelfde tokens als die knoppen zelf.
   Alleen op smalle schermen: daarboven staat een knop nooit zo breed. */
@media (max-width: 767.98px) {
  /* Zet deze klasse op een NEUTRAAL element (een form, een kaart) en niet op .container-fluid:
     daar wint `html[data-boxed-layout] .container-fluid { margin: 0 auto }` uit het Spike-thema, en
     reserveert de helper stilletjes niets. */
  .wf-zweef-vrij { margin-bottom: calc(var(--wf-zweef-onder, 14px) + var(--wf-zweef-maat, 60px) + 12px); }
}

.wf-naar-boven { position: fixed; right: var(--wf-zweef-rechts); bottom: var(--wf-zweef-onder); z-index: 9; }
.wf-naar-boven:hover, .wf-chatknop:hover { background: rgba(1, 16, 61, .12); transform: translateY(-3px); }
.wf-naar-boven:focus-visible, .wf-chatknop:focus-visible { outline: 3px solid rgba(50, 188, 238, .55); outline-offset: 2px; }

.wf-naar-boven-schijf, .wf-chatknop-kern {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 9999px;
  background: #fff; box-shadow: 0 1px 3px rgba(18, 20, 32, .14);
}
.wf-naar-boven i, .wf-chatknop i {
  font-size: 16px; color: var(--wf-title, #a12359);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.wf-naar-boven:hover i, .wf-chatknop:hover i { transform: translateY(-2px); }

/* Onzichtbaar tot voorbij de scroll-drempel (wf-scrolltop.js) — geen layout-sprong, alleen
   opacity/visibility, dus ook geen per-ongeluk-klik zolang hij nog "weg" is. */
.wf-naar-boven { opacity: 0; visibility: hidden; }
.wf-naar-boven.is-visible { opacity: 1; visibility: visible; }
.wf-naar-boven.is-visible:hover { transform: translateY(-3px); }

/* Staat er ook een chatknop op de pagina — het klantdashboard (#wfLiveChat) of de adminbalk
   (#wfAdminBar, met een veel hogere z-index, waar "naar boven" anders helemaal achter verdwijnt) —
   dan schuift "naar boven" precies één plek omhoog. Uitgerekend in plaats van ingetypt, zodat het
   klopt op elke breedte: de knoppen delen immers dezelfde marge-tokens. */
body:has(#wfLiveChat) .wf-naar-boven,
body:has(#wfAdminBar) .wf-naar-boven {
  bottom: calc(var(--wf-zweef-onder) + var(--wf-zweef-maat) + var(--wf-zweef-lucht));
}

/* Staat er ook nog een "Bug melden"-knop (#wfBugMelden, het klantdashboard), dan is de stapel drie
   hoog: chat onderaan, bug melden ertussen, "naar boven" bovenaan. Zelfde rekensom, één plek verder.
   Zonder chatknop zakt bug melden zelf naar beneden (zie wf-bugmelden.css) en is dit er één. */
body:has(#wfBugMelden) .wf-naar-boven {
  bottom: calc(var(--wf-zweef-onder) + var(--wf-zweef-maat) + var(--wf-zweef-lucht));
}
body:has(#wfBugMelden):has(#wfLiveChat) .wf-naar-boven,
body:has(#wfBugMelden):has(#wfAdminBar) .wf-naar-boven {
  bottom: calc(var(--wf-zweef-onder) + 2 * (var(--wf-zweef-maat) + var(--wf-zweef-lucht)));
}

/* Groen stipje = experts online (klantdashboard-chatknop; wfLcLauncherDot, live-chat.js). Herpositie
   t.o.v. de oude pil-vorm: dit zit nu ín de rand van de ronde glasknop, niet meer naast het label. */
.wf-chatknop .wf-chat-launcher-dot {
  top: 2px; right: 2px; left: auto;
  width: 14px; height: 14px; border-width: 2px;
}

/* #wfLcLauncher (_LiveChatWidget.cshtml) draagt zowel .wf-chat-launcher (chat.css, het gedragshaakje
   voor live-chat.js: .is-open verbergt 'm, position:relative voor de badges) als .wf-chatknop
   (hierboven, het glazen uiterlijk). Beide zijn losse klassen met gelijke specificiteit — welke wint
   voor overlappende eigenschappen (hoogte/padding/achtergrond/rand) hangt dan af van de laadvolgorde
   van chat.css vs. wf-2026-system.css, en dat willen we niet laten gokken. Daarom hier het volledige
   glazen uiterlijk nog eens op de ID-selector, die wint altijd — ongeacht laadvolgorde. Chat.css's
   eigen .wf-chat-launcher-regels (de oude pil) blijven zelf ongemoeid en tonen dus nog gewoon correct
   in de Stijlgids-demo "Backup — vorige chatknop" (die #wfLcLauncher niet als id gebruikt). */
#wfLcLauncher.wf-chatknop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  box-sizing: border-box; width: 60px; height: 60px; padding: 6px;
  border: 1.5px solid rgba(1, 16, 61, .14); border-radius: 9999px;
  background: rgba(1, 16, 61, .07); color: inherit;
  box-shadow: 0 8px 22px rgba(1, 6, 20, .12);
}
#wfLcLauncher.wf-chatknop:hover { background: rgba(1, 16, 61, .12); }
:root[data-bs-theme="dark"] #wfLcLauncher.wf-chatknop { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
:root[data-bs-theme="dark"] #wfLcLauncher.wf-chatknop:hover { background: rgba(255, 255, 255, .13); }

/* Zelfde verhaal voor #wfAbarToggle (_AdminChatBar.cshtml, admin-op-elke-pagina): draagt zowel
   .wf-abar-pill (chat.css, gedragshaakje voor admin-bar.js) als .wf-chatknop (glazen uiterlijk). */
#wfAbarToggle.wf-chatknop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  box-sizing: border-box; width: 60px; height: 60px; padding: 6px;
  border: 1.5px solid rgba(1, 16, 61, .14); border-radius: 9999px;
  background: rgba(1, 16, 61, .07); color: inherit;
  box-shadow: 0 8px 22px rgba(1, 6, 20, .12);
}
#wfAbarToggle.wf-chatknop:hover { background: rgba(1, 16, 61, .12); }
:root[data-bs-theme="dark"] #wfAbarToggle.wf-chatknop { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
:root[data-bs-theme="dark"] #wfAbarToggle.wf-chatknop:hover { background: rgba(255, 255, 255, .13); }

/* .wf-abar-ico is de kern hier (i.p.v. .wf-chatknop-kern): een 32px accentcirkel die al de
   beschikbaarheidskleur draagt (groen = beschikbaar, grijs = .wf-abar.is-away, rood =
   .wf-abar.has-unread, zie chat.css) — die kleursignalen zijn nuttig en blijven dus, alleen groter
   getrokken zodat 'm de hele glasring vult zoals de andere kernen. */
.wf-chatknop .wf-abar-ico { width: 100%; height: 100%; font-size: 18px; }

:root[data-bs-theme="dark"] .wf-naar-boven,
:root[data-bs-theme="dark"] .wf-chatknop { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
:root[data-bs-theme="dark"] .wf-naar-boven:hover,
:root[data-bs-theme="dark"] .wf-chatknop:hover { background: rgba(255, 255, 255, .13); }
:root[data-bs-theme="dark"] .wf-naar-boven-schijf,
:root[data-bs-theme="dark"] .wf-chatknop-kern { background: var(--wf-surface, #1e293b); }

@media (prefers-reduced-motion: reduce) {
  .wf-naar-boven, .wf-chatknop, .wf-naar-boven i, .wf-chatknop i { transition: none; }
}

/* ── Taalvlag (rond) ───────────────────────────────────────────────────────────────────────────
   Round language flag used across the client dashboard (Meertalig + module-editor tabs), rendered
   by the _LangFlag partial. A square-ish SVG flag cropped to a circle (cover), no shadow. */
.wf-langflag {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  object-fit: cover;               /* crop the 4:3 flag into the circle */
  vertical-align: -0.25em;
  background: var(--bs-white, #fff);
  box-shadow: none;
}
.wf-langflag--sm { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.wf-langflag--lg { width: 2em;   height: 2em;   vertical-align: -0.5em; }
/* Neutral fallback (unknown language) — a globe in a soft round chip. */
.wf-langflag--none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wf-muted, #6b7280);
  background: var(--wf-surface-2, #f1f5f9);
  font-size: .8em;
  object-fit: unset;
}
:root[data-bs-theme="dark"] .wf-langflag--none { background: rgba(255, 255, 255, .08); }

/* ── Centraal social-beheer (_SocialSettingsManager) ───────────────────────────────────────────
   1:1 uit Claude Design "Webfix Social Media Beheer". Master-detail: links een grijze rail met de
   kanalen (loopt door tot onderaan het venster), rechts per kanaal twee kaarten naast elkaar —
   "Op uw website" en "Koppelen voor doorplaatsen". Eén bron: de dashboard-modal en
   /dashboard/marketing/social renderen dezelfde partial. */
/* minmax(0,…) op beide kolommen: zonder die 0 krijgt een track min-width:auto en kan lange inhoud
   (een URL, een lange labelregel) het hele raster breder duwen dan het scherm. */
/* ── Beheerder met keuzelijst links en een paneel rechts (.wf-mgr-*) ─────────
 * De basis achter /dashboard/marketing/social, de "Social Media beheren"-modal op het dashboard,
 * het tabblad Social op Mijn gegevens én /dashboard/Integraties: links een rail met de items, rechts
 * het paneel van het gekozen item. Heette eerst .wf-socmgr-*, maar de vorm is niet van social —
 * alleen de merkkleuren hieronder (.wf-soc-fb enz.) zijn dat.
 *
 * Onder 860px wordt de rail een veegbare iconenrij boven het paneel. */
.wf-mgr { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: stretch; height: 100%; min-height: 0; }
.wf-mgr-rail { min-width: 0; overflow: hidden; }

/* Rail — de grijze kolom links. stretch + height:100% zorgt dat de achtergrond doorloopt tot de
   onderkant van de modal, ook als het paneel rechts korter is. */
.wf-mgr-rail {
  border-right: 1px solid rgba(1, 16, 61, .08); padding: 22px 18px 26px;
  background: linear-gradient(180deg, rgba(249, 251, 253, .92), rgba(243, 246, 251, .86));
}
/* Kopje bovenaan de rail. Sinds de rail groepskopjes heeft ("Actieve kanalen", "Toestemming")
   staat er altijd al een label, dus dit tweede kopje wordt nergens meer gebruikt. De opmaak blijft
   staan voor een rail zonder groepen. */
.wf-mgr-rail-label {
  padding: 0 8px 12px; font-weight: 700; font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; color: #666c73;
}
.wf-mgr-list { display: flex; flex-direction: column; gap: 4px; }
.wf-mgr-item {
  display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 13px;
  border: 1px solid transparent; border-radius: 14px; background: transparent; cursor: pointer;
  text-align: left; color: var(--wf-text, #16233a);
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.wf-mgr-item:hover { background: rgba(1, 16, 61, .045); }
.wf-mgr-item.active { background: #fff; border-color: rgba(1, 16, 61, .10); box-shadow: 0 2px 8px rgba(1, 6, 20, .06); }
.wf-mgr-ico {
  width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-size: 16px; flex: none; background: #6b7280;
}
.wf-mgr-ico-lg { width: 42px; height: 42px; border-radius: 14px; font-size: 18px; }
.wf-mgr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; }
.wf-mgr-item.active .wf-mgr-name { font-weight: 700; }
.wf-mgr-dot { width: 9px; height: 9px; border-radius: 9999px; background: #d3d7e0; flex: none; }
.wf-mgr-dot.on { background: #6f8a1b; box-shadow: 0 0 0 3px rgba(176, 209, 54, .24); }

/* Paneel rechts. */
.wf-mgr-detail { min-width: 0; padding: 24px 26px 28px; }
.wf-mgr-panel-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.wf-mgr-panel-t { font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--wf-text, #16233a); }
.wf-mgr-status {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px;
  border-radius: 9999px; font-weight: 700; font-size: 12px;
}
.wf-mgr-status i { font-size: 12px; }
.wf-mgr-status.-on { background: rgba(176, 209, 54, .22); color: #4e6711; }
.wf-mgr-status.-off { background: #f0f1f5; color: #666c73; }

.wf-mgr-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.wf-mgr-block {
  border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; padding: 20px 20px 22px;
  background: #fff; margin: 0;
}
.wf-mgr-block-title { font-weight: 700; font-size: 16px; margin: 0; color: var(--wf-text, #16233a); }
.wf-mgr-block-sub { margin: 4px 0 16px; font-size: 12.5px; line-height: 1.55; color: #666c73; }
.wf-mgr-hint, .wf-mgr-secure { font-weight: 400; font-size: 12px; color: #666c73; }
.wf-mgr-secure { margin: 0; display: inline-flex; align-items: center; gap: 9px; }
.wf-mgr-secure i { color: #9aa2b1; }

/* Velden — hoger en ronder dan de Bootstrap-standaard, conform het ontwerp. */
.wf-mgr-field { margin-bottom: 14px; }
.wf-mgr-field:last-child { margin-bottom: 0; }
.wf-mgr-field .form-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 12.5px; color: var(--wf-text, #16233a); }
.wf-mgr-field .form-control {
  height: 44px; padding: 0 15px; border-radius: 12px; border: 1px solid rgba(1, 16, 61, .12);
  background: #fff; font-size: 14px; color: var(--wf-text, #16233a);
}
.wf-mgr-field .form-control::placeholder { color: #9aa2b1; }
.wf-mgr-field .form-control:focus { border-color: var(--wf-blue, #32bcee); box-shadow: 0 0 0 3px rgba(50, 188, 238, .16); }
/* Ingevuld veld krijgt de blauwe tint uit het ontwerp (.sm-in.-filled). */
.wf-mgr-field .form-control:not(:placeholder-shown):not(:focus) { background: rgba(50, 188, 238, .07); border-color: rgba(50, 188, 238, .28); }

/* Schakelaars — Bootstrap-switch in de vormtaal van het ontwerp (roze in de aan-stand). */
.wf-mgr-opt {
  display: flex; align-items: center; gap: 12px; margin: 0 0 2px; padding: 9px 10px;
  border-radius: 12px; cursor: pointer; transition: background .2s ease;
}
.wf-mgr-opt:hover { background: rgba(1, 16, 61, .035); }
.wf-mgr-opt .form-check-input { margin: 0; float: none; flex: none; width: 38px; height: 22px; background-color: #dcdfe7; border: 0; cursor: pointer; }
.wf-mgr-opt .form-check-input:checked { background-color: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); }
.wf-mgr-opt .form-check-input:focus { box-shadow: 0 0 0 3px rgba(218, 23, 108, .18); border-color: transparent; }
.wf-mgr-opt .form-check-label { font-size: 14px; color: var(--wf-text, #16233a); cursor: pointer; }
/* De schakelaarrij zit tussen twee velden in; iets lucht eronder. */
.wf-mgr-block .wf-mgr-opt + .wf-mgr-field { margin-top: 16px; }

/* Merkkleuren voor de kanaal-icoontjes (compound, botst niet met de .wf-flow-btn-varianten). */
.wf-mgr-ico.wf-soc-fb  { background: #1877f2; }
.wf-mgr-ico.wf-soc-ig  { background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7); }
.wf-mgr-ico.wf-soc-x   { background: #0b0b0c; }
.wf-mgr-ico.wf-soc-in  { background: #0a66c2; }
.wf-mgr-ico.wf-soc-yt  { background: #ff0000; }
.wf-mgr-ico.wf-soc-tt  { background: #0b0b0c; }
.wf-mgr-ico.wf-soc-pin { background: #e60023; }
.wf-mgr-ico.wf-soc-wa  { background: #25d366; }
.wf-mgr-ico.wf-soc-sc  { background: #fffc00; color: #0b0b0c; }
/* De deelnetwerken die alleen in "Uw content laten delen" staan (Services/Sites/ShareNetworks). */
.wf-mgr-ico.wf-soc-th   { background: #0b0b0c; }
.wf-mgr-ico.wf-soc-bs   { background: #1185fe; }
.wf-mgr-ico.wf-soc-tg   { background: #26a5e4; }
.wf-mgr-ico.wf-soc-rd   { background: #ff4500; }
.wf-mgr-ico.wf-soc-xi   { background: #006567; }
.wf-mgr-ico.wf-soc-mail { background: #475569; }

/* Bluesky als gewoon Bootstrap-icoon (<i class="bi bi-bluesky">). Bootstrap Icons 1.11.3, die het dashboard
   laadt, kent hem nog niet (pas vanaf 1.13); dit tekent hetzelfde vlinderlogo als masker in de tekstkleur,
   zodat het overal meekleurt zoals de andere merkicoontjes (28-09-2026). */
.bi-bluesky::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.698-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.698-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* "Uw content laten delen" is geen kanaal maar een instelling: het tandwiel in de Webfix-kleur. */
.wf-mgr-ico.wf-soc-delen { background: var(--wf-pink, #da176c); }
/*  W-Sync krijgt de eigen blauw-groene helft van de merkgradient en het beeldmerk in wit;
    het rondje blijft even groot als dat van de andere kanalen. */
.wf-mgr-ico.wf-soc-sync { background: linear-gradient(135deg, #32bcee, #6fc8a8 52%, #b0d136); }
.wf-mgr-ico .wf-sync-ic { font-size: 1.15em; }
/* Bluesky en Xing staan niet in Bootstrap Icons 1.11.3; die komen via iconify en erven de tekstkleur. */
.wf-mgr-ico iconify-icon { display: inline-flex; font-size: 1em; }

/* ── Kaart "Koppelen voor doorplaatsen" (_SocialSettingsManager): stand + knoppen, geen velden ── */
.wf-mgr-koppel-stand {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; padding: 10px 12px;
  border-radius: 12px; background: #f6f7fb; color: #3d4555; font-size: 13.5px; line-height: 1.4;
}
.wf-mgr-koppel-stand i { font-size: 16px; flex: none; }
.wf-mgr-koppel-stand.-aan { background: rgba(176, 209, 54, .16); color: #4e6711; }
.wf-mgr-koppel-stand.-let { background: rgba(220, 158, 47, .14); color: #8a5a00; }
.wf-mgr-koppel-feiten { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.5; color: #666c73; }
.wf-mgr-koppel-feiten li { display: flex; gap: 8px; align-items: flex-start; }
.wf-mgr-koppel-feiten i { color: #9aa2b1; line-height: 1.5; }
.wf-mgr-koppel-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wf-mgr-koppel-eis { margin: 10px 0 0; font-size: 12px; color: #8a909a; }
:root[data-bs-theme="dark"] .wf-mgr-koppel-stand { background: rgba(255, 255, 255, .05); color: #d7dae3; }
:root[data-bs-theme="dark"] .wf-mgr-koppel-stand.-aan { background: rgba(176, 209, 54, .12); color: #c9e27a; }
:root[data-bs-theme="dark"] .wf-mgr-koppel-stand.-let { background: rgba(220, 158, 47, .12); color: #f0c46e; }
:root[data-bs-theme="dark"] .wf-mgr-koppel-feiten { color: #aeb4c0; }

/* ── Venster "Plaatsen op Instagram" op het Flows-eindscherm (_InstagramPublishModal) ── */
.wf-igp { border-radius: 18px; overflow: hidden; }
.wf-igp-kop { display: flex; align-items: baseline; gap: 10px; }
.wf-igp-wm { font-size: 23px; }
.wf-igp-kopstreep { flex: none; width: 1px; height: 14px; background: rgba(255, 255, 255, .5); }
.wf-igp-tag { margin: 0; font-size: 14px; }
.wf-igp-body { padding: 22px 24px; background: #f8fafc; }
.wf-igp-voet { background: #f8fafc; border-top: 1px solid var(--wf-border, #e2e8f0); gap: 10px; }
.wf-igp-laden { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 160px; color: #666c73; }
.wf-igp-koppel, .wf-igp-klaar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 18px 8px; }
.wf-igp-koppel-ic, .wf-igp-klaar-ic { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; }
.wf-igp-koppel-ic { background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7); }
.wf-igp-klaar-ic { background: #6f8a1b; }
.wf-igp-koppel-t, .wf-igp-klaar-t { max-width: 460px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--wf-text, #1e293b); }
.wf-igp-hint { margin: 0; font-size: 12.5px; color: #8a909a; }
.wf-igp-account { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--wf-border, #e2e8f0); font-size: 13.5px; color: #3d4555; }
.wf-igp-account i { color: #ee2a7b; }
.wf-igp-veld { margin-bottom: 18px; }
.wf-igp-label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 14px; color: var(--wf-text, #1e293b); }
.wf-igp-sub { font-weight: 400; font-size: 12.5px; color: #8a909a; margin-left: 6px; }
.wf-igp-labelrij { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wf-igp-teller { font-size: 12px; color: #8a909a; }
.wf-igp-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.wf-igp-foto {
  position: relative; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: 12px; background: #e9ebef;
  transition: border-color .15s ease, transform .15s ease;
}
.wf-igp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .72; transition: opacity .15s ease; }
.wf-igp-foto:hover img { opacity: 1; }
.wf-igp-foto.is-gekozen { border-color: var(--wf-pink, #da176c); }
.wf-igp-foto.is-gekozen img { opacity: 1; }
.wf-igp-nr {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 0, 0, .12); color: transparent;
}
.wf-igp-foto.is-gekozen .wf-igp-nr { background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff; }
.wf-igp-leeg { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(220, 158, 47, .12); color: #8a5a00; font-size: 13px; }
.wf-igp-tekst { border-radius: 12px; font-size: 14px; line-height: 1.55; resize: vertical; }
.wf-igp-ai { margin-top: 10px; }
.wf-igp-moment { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wf-igp-optie { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--wf-border, #e2e8f0); cursor: pointer; font-size: 14px; }
.wf-igp-optie:has(input:checked) { border-color: var(--wf-pink, #da176c); background: rgba(218, 23, 108, .05); }
.wf-igp-datum { width: auto; min-width: 220px; border-radius: 999px; }
.wf-igp-fout { margin: 4px 0 0; border-radius: 12px; }
@media (max-width: 575.98px) {
  .wf-igp-body { padding: 16px; }
  .wf-igp-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wf-igp-datum { width: 100%; }
}
:root[data-bs-theme="dark"] .wf-igp-body,
:root[data-bs-theme="dark"] .wf-igp-voet { background: #1b1f27; border-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .wf-igp-account,
:root[data-bs-theme="dark"] .wf-igp-optie { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #d7dae3; }
:root[data-bs-theme="dark"] .wf-igp-label,
:root[data-bs-theme="dark"] .wf-igp-koppel-t,
:root[data-bs-theme="dark"] .wf-igp-klaar-t { color: #e8eaf0; }
:root[data-bs-theme="dark"] .wf-igp-foto { background: rgba(255, 255, 255, .06); }

/* ── Paneel "Uw content laten delen": elk netwerk een rij met schakelaar, in twee kolommen ── */
.wf-mgr-delen { grid-column: 1 / -1; }
.wf-mgr-delen-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 14px; }
.wf-mgr-delen-rij {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 12px;
  border: 1px solid var(--wf-border, #e6e8ef); border-radius: 12px; background: #fff;
  cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.wf-mgr-delen-rij:hover { border-color: #cfd4df; }
.wf-mgr-delen-rij.is-aan { border-color: rgba(218, 23, 108, .35); background: rgba(218, 23, 108, .03); }
.wf-mgr-delen-naam { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--wf-text, #16233a); }
.wf-mgr-delen-rij .form-check { margin: 0; padding: 0; min-height: 0; }
.wf-mgr-delen-rij .form-check-input { margin: 0; float: none; width: 38px; height: 22px; background-color: #dcdfe7; border: 0; cursor: pointer; }
.wf-mgr-delen-rij .form-check-input:checked { background-color: var(--wf-pink, #da176c); }
.wf-mgr-delen-rij .form-check-input:focus { box-shadow: 0 0 0 3px rgba(218, 23, 108, .18); }
/*  Social sync: de keuze "eerst als concept" hangt onder de rij van zijn eigen kanaal, iets ingesprongen
    zodat te zien is dat hij daarbij hoort. Verschijnt pas als de sync voor dat kanaal aan staat. */
/*  Eén kanaal per regel, met zijn eigen keuze eronder. De deellijst hiernaast is een raster van twee
    kolommen; dat werkt hier niet, want dan komt de keuze naast het kanaal te staan. */
.wf-mgr-synclijst { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.wf-mgr-synckanaal { display: block; }
.wf-mgr-syncopties { margin: -2px 0 6px 46px; padding: 0 0 0 2px; }
.wf-mgr-syncopties .wf-mgr-opt { margin: 0; font-size: 13px; }
.wf-mgr-syncopties .form-check-input { width: 32px; height: 19px; }
:root[data-bs-theme="dark"] .wf-mgr-syncopties .wf-mgr-opt { color: #aeb4c0; }

.wf-mgr-delen-tip {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px;
  border-radius: 12px; background: #f6f7fb; font-size: 13px; line-height: 1.5; color: #5b6475;
}
.wf-mgr-delen-tip i { font-size: 16px; line-height: 1.3; color: var(--wf-pink, #da176c); }
@media (max-width: 575.98px) {
  .wf-mgr-delen-lijst { grid-template-columns: 1fr; }
}
:root[data-bs-theme="dark"] .wf-mgr-delen-rij { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .10); }
:root[data-bs-theme="dark"] .wf-mgr-delen-rij.is-aan { background: rgba(218, 23, 108, .10); border-color: rgba(218, 23, 108, .45); }
:root[data-bs-theme="dark"] .wf-mgr-delen-naam { color: #e8eaf0; }
:root[data-bs-theme="dark"] .wf-mgr-delen-tip { background: rgba(255, 255, 255, .05); color: #aeb4c0; }

:root[data-bs-theme="dark"] .wf-mgr-rail { background: rgba(255, 255, 255, .04); border-right-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .wf-mgr-rail-label { color: #9aa2b1; }
:root[data-bs-theme="dark"] .wf-mgr-item:hover { background: rgba(255, 255, 255, .06); }
:root[data-bs-theme="dark"] .wf-mgr-item.active { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
:root[data-bs-theme="dark"] .wf-mgr-block { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }
:root[data-bs-theme="dark"] .wf-mgr-block-sub,
:root[data-bs-theme="dark"] .wf-mgr-secure { color: #9aa2b1; }
:root[data-bs-theme="dark"] .wf-mgr-status.-off { background: rgba(255, 255, 255, .08); color: #9aa2b1; }
:root[data-bs-theme="dark"] .wf-mgr-field .form-control { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #e8eaef; }
:root[data-bs-theme="dark"] .wf-mgr-field .form-control:not(:placeholder-shown):not(:focus) { background: rgba(50, 188, 238, .12); }

/* Schil op /dashboard/marketing/social: dezelfde component, maar in een kaart in plaats van een
   modal. Geen eigen padding + overflow:hidden, zodat de rail tot tegen de ronde randen doorloopt. */
.wf-mgr-card { overflow: hidden; }
.wf-mgr-card > .wf-mgr { min-height: 520px; }
.wf-mgr-cardfoot {
  padding: 16px 26px; border-top: 1px solid rgba(1, 16, 61, .08); background: #fbfbfd;
}
:root[data-bs-theme="dark"] .wf-mgr-cardfoot { background: rgba(255, 255, 255, .03); border-top-color: rgba(255, 255, 255, .08); }

/* Onder 1060px stapelen de twee kaarten; onder 860px wordt de rail een swipe-bare iconenrij. */
@media (max-width: 1060px) {
  .wf-mgr-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* minmax(0,1fr) i.p.v. 1fr: een grid-track krimpt anders niet onder zijn min-content-breedte en
     duwt de hele kaart voorbij de schermrand (viel op op de telefoon). */
  .wf-mgr { grid-template-columns: minmax(0, 1fr); height: auto; }
  .wf-mgr-rail { border-right: 0; border-bottom: 1px solid rgba(1, 16, 61, .08); padding: 14px; }
  .wf-mgr-rail-label { display: none; }
  /* Kanalenrij swipe-baar; overflow op de rail zelf houdt de rij binnen de kaart. */
  .wf-mgr-list { flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
  .wf-mgr-list::-webkit-scrollbar { display: none; }
  /* Veegschaduw aan de randen, dezelfde truc als bij de tabbalken (.wf-tabgroup): verschijnt alléén
     aan de kant waar nog kanalen staan. Zonder dit liep de rij gewoon af aan de rand — negen kanalen
     in ~320px, waarvan er vijf onzichtbaar waren zonder dat iets vertelde dat je kon vegen. De twee
     `local`-lagen schuiven mee en dekken de schaduw af zodra je die kant bereikt. Geen JS nodig. */
  .wf-mgr-list {
    --wf-railfade: 244, 245, 249;
    background-image:
      linear-gradient(90deg, rgba(var(--wf-railfade), .95), rgba(var(--wf-railfade), 0)),
      linear-gradient(90deg, rgba(var(--wf-railfade), 0), rgba(var(--wf-railfade), .95)),
      radial-gradient(farthest-side at 0 50%, rgba(1, 16, 61, .13), rgba(1, 16, 61, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(1, 16, 61, .13), rgba(1, 16, 61, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  :root[data-bs-theme="dark"] .wf-mgr-list { --wf-railfade: 26, 29, 39; }
  /* Aanraakmaat: een schakelaarregel van 38px is met een duim te krap. */
  .wf-mgr-opt { min-height: 44px; }
  .wf-mgr-item { flex: none; width: auto; padding: 9px; }
  .wf-mgr-name { display: none; }
  .wf-mgr-detail { padding: 18px 14px 22px; }
  .wf-mgr-panel-head { margin-bottom: 16px; }
  .wf-mgr-panel-t { font-size: 19px; }
  .wf-mgr-block { padding: 16px 15px 18px; border-radius: 16px; }
  .wf-mgr-cardfoot { padding: 14px 16px; }
}
/* Telefoon: kop mag afbreken en de schakelaars krijgen wat minder inspringing. */
@media (max-width: 480px) {
  .wf-mgr-panel-head { flex-wrap: wrap; gap: 10px; }
  .wf-mgr-opt { padding: 8px 4px; gap: 10px; }
  .wf-mgr-detail { padding: 16px 12px 20px; }
  .wf-mgr-block { padding: 14px 13px 16px; }
}

/* ── Modules-modal (.wf-mm-*) ─────────────────────────────────────────────────
 * 1:1 uit Claude Design "Webfix Modules Modal" — de centrale modal achter
 * "Modules beheren" op het dashboard (ViewComponent ModuleActivatie).
 *
 * Twee bewuste afwijkingen van dat ontwerp:
 *   1. de kop is de CMS-header uit de stijlgids (.wf-flows-modalhead -std), niet de
 *      eigen gradient-kop uit het ontwerp;
 *   2. de tabs zijn de systeembrede .wf-tabblock ("Tabbalk in een kaart"), dus het
 *      klikgedrag komt uit wf-tabs.js en de actieve tab draagt de merkgradient.
 *
 *   <div class="modal-content wf-mm-content">
 *     <div class="wf-flows-modalhead wf-flows-modalhead-std"> … <span class="wf-mm-count">…</span> </div>
 *     <div class="wf-tabblock">
 *       <div class="wf-tabbar-unit -flush wf-mm-tabbar"> …tabs… <a class="wf-mm-help">…</a> </div>
 *       <div class="wf-tabpanels wf-mm-body modal-body"> …panelen met .wf-mm-grid… </div>
 *     </div>
 *     <div class="wf-mm-foot"> … </div>
 *   </div> */
/* Venstermaat: --wf-mm-gap stuurt de breedte (--bs-modal-width) en groeit op grote schermen naar
   ruime lucht opzij (200px), in stappen terug naar de Bootstrap-standaardbreedte op tablet en
   telefoon. --wf-mm-gapy stuurt apart de marge boven/onder (--bs-modal-margin) — vanaf 576px vast op
   30px (2026-08-30, was 70px vanaf 992px: te veel lucht boven de modal), alleen op mobiel (<576px)
   de Bootstrap-standaard .5rem. */
.wf-mm-dialog {
  --wf-mm-gap: .5rem;   /* links/rechts */
  --wf-mm-gapy: .5rem;  /* boven/onder */
  --bs-modal-margin: var(--wf-mm-gapy);
  --bs-modal-width: calc(100% - var(--wf-mm-gap) * 2);
  max-width: var(--bs-modal-width);
}
@media (min-width: 576px)  { .wf-mm-dialog { --wf-mm-gap: 1.75rem; --wf-mm-gapy: 30px; } }
@media (min-width: 992px)  { .wf-mm-dialog { --wf-mm-gap: 48px; } }
@media (min-width: 1200px) { .wf-mm-dialog { --wf-mm-gap: 80px; } }
@media (min-width: 1400px) { .wf-mm-dialog { --wf-mm-gap: 128px; } }
@media (min-width: 1800px) { .wf-mm-dialog { --wf-mm-gap: 200px; } }
/* Social-beheer draagt dezelfde schil (kop, marges, voet) maar mag iets smaller: twee kaarten naast
   elkaar hebben minder breedte nodig dan een raster van moduletegels. */
.wf-mm-dialog.-social { max-width: min(1280px, calc(100% - var(--wf-mm-gap) * 2)); }
/* Body zonder padding — het social-beheer brengt zijn eigen kolommen mee en de grijze kanalen-rail
   moet tot tegen de randen van het venster doorlopen. Flex-kolom (i.p.v. een blok) omdat een
   percentage-hoogte niet resolvet tegen een auto-hoog flex-item; met flex:1 op het raster erin
   rekt de rail wél mee tot aan de voet. */
.modal-body.wf-mm-body-flush { padding: 0; min-height: 0; display: flex; flex-direction: column; }
.modal-body.wf-mm-body-flush > .wf-mgr { flex: 1 1 auto; }
/* Bewust GEEN .modal-dialog-scrollable: het venster groeit mee met zijn inhoud en je scrollt met de
   gewone scrollbalk van de modal-overlay, niet in een kadertje bínnen de modal.
   De min-height houdt de onderkant op 70px van de schermrand ook als de tab kort is — dan staat er
   gewoon witruimte in het venster; bij meer inhoud groeit het venster daar voorbij. */
@media (min-width: 992px) {
  .wf-mm-content { min-height: calc(100vh - var(--wf-mm-gapy, 70px) * 2); }
}
.wf-mm-content { border: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px rgba(1, 16, 61, .28); }
.wf-mm-content .wf-flows-modalhead { border-radius: 0; flex: none; }
.wf-mm-content > .wf-tabblock { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* Teller-pil + sluitkruis rechts in de CMS-header. */
.wf-mm-headright { position: relative; display: flex; align-items: center; gap: 12px; }
.wf-mm-count {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px;
  border-radius: 9999px; background: rgba(255, 255, 255, .94); font-weight: 700; font-size: 13.5px;
  color: var(--wf-title, #a12359); white-space: nowrap; box-shadow: 0 3px 10px rgba(1, 16, 61, .16);
}
.wf-mm-count i { font-size: 14px; color: #6f8a1b; }

/* Tabbalk-rij: tabs links, "Heeft u vragen?" rechts (verdwijnt op smalle schermen). */
.wf-mm-tabbar { flex: none; display: flex; align-items: center; gap: 16px; }
.wf-mm-tabbar > .wf-tabgroup { flex: 1 1 auto; min-width: 0; }
/* Alleen de vorm; de kleur en de streep komen van .wf-link-primary + .wf-link-underline uit de
   stijlgids. Stond hier eerder zelf een grijstint met een eigen hover -- die vocht met dat
   onderdeel, en twee plekken die dezelfde link beschrijven lopen vroeg of laat uiteen. */
.wf-mm-help {
  flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  white-space: nowrap;
}
/* Korte tablabels ("Actief" · "Voeg toe" · "Meerprijs") nemen het over zodra de volledige
   labels niet meer passen — zie de media query onderaan dit blok. */
.wf-mm-tabshort { display: none; }

/* Body + secties. */
.wf-tabpanels.wf-mm-body { margin-top: 0; padding: 30px 26px 26px; border-top: none; min-height: 0; }
/* De -flush-tabbalk-reset hierboven (.wf-tabbar-unit.-flush + .wf-tabpanels) heeft 3 klassen en wint
   dus van de regel hierboven (2 klassen): de kaarten in elke tab plakten daardoor tegen de tabbalk
   aan i.p.v. de bedoelde 30px lucht erboven. Preciezere selector om dat terug te zetten. */
.wf-tabbar-unit.-flush + .wf-tabpanels.wf-mm-body { padding-top: 30px; }
.wf-mm-seclabel { font-weight: 700; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: #666c73; }
.wf-mm-sectext { margin: 5px 0 14px; font-size: 13.5px; line-height: 1.55; color: #5f6c82; }
/* Kolommen groeien mee met het bredere venster, tot maximaal vijf; de tussenruimte wordt daarbij ruimer
   zodat de tegels niet tegen elkaar aan gaan plakken op een groot scherm. */
.wf-mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
@media (min-width: 992px)  { .wf-mm-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .wf-mm-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (min-width: 1800px) { .wf-mm-grid { grid-template-columns: repeat(5, 1fr); gap: 24px; } }
/* Meerprijs-tab: een handvol tegels op hetzelfde brede venster. Met minder kolommen worden ze breed
   genoeg om naam ("Meertalige website") én omschrijving elk op één regel te houden. */
@media (min-width: 992px)  { .wf-mm-grid.-breed { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .wf-mm-grid.-breed { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1800px) { .wf-mm-grid.-breed { grid-template-columns: repeat(4, 1fr); } }
.wf-mm-grid + .wf-mm-seclabel { display: block; margin-top: 24px; }
.wf-mm-empty { margin: 0; font-size: 13.5px; color: #5f6c82; }
/* Lege staat als kaart (2026-08-30, "Gratis te activeren" als alles al aanstaat): clean 1px rand
   i.p.v. losse tekst — dezelfde "alleen-rand"-kaart als in de stijlgids (Formulieren-omhulsels). */
.wf-mm-empty-card {
  margin: 0; text-align: center; padding: 34px 24px;
  border: 1px solid rgba(1, 16, 61, .10); border-radius: 20px;
  font-size: 13.5px; font-weight: 600; color: #5f6c82;
}

/* Moduletegel. -fixed = standaardmodule (altijd aan), -on = actief, -trial = proefperiode. */
.wf-mm-tile {
  position: relative; display: flex; flex-direction: column; padding: 15px 14px; border-radius: 18px;
  border: 1px solid rgba(1, 16, 61, .09); background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.wf-mm-tile:hover { border-color: rgba(1, 16, 61, .16); box-shadow: 0 6px 16px rgba(1, 6, 20, .07); }
.wf-mm-tile.-on { border-color: rgba(218, 23, 108, .26); background: rgba(218, 23, 108, .028); }
.wf-mm-tile.-fixed { border-color: rgba(111, 138, 27, .28); background: rgba(176, 209, 54, .06); }
/*  Op slot: de module bestaat wel, maar kan nu niet aan — de grens van het pakket is bereikt of de
    module hoort bij een hoger pakket (Tom 21-09-2026). De tegel blijft leesbaar (de klant hoort te
    zien wát er is) maar oogt grijs, met een schuin bandje in de hoek dat zegt waarom. */
.wf-mm-tile.-slot {
  border-color: rgba(1, 16, 61, .08); background: #f7f8fa; overflow: hidden;
}
.wf-mm-tile.-slot:hover { border-color: rgba(1, 16, 61, .12); box-shadow: none; }
.wf-mm-tile.-slot .wf-mm-ic { filter: grayscale(1); opacity: .5; }
.wf-mm-tile.-slot .wf-mm-t, .wf-mm-tile.-slot .wf-mm-t a { color: #6b7280; }
.wf-mm-tile.-slot .wf-mm-s, .wf-mm-tile.-slot .wf-mm-price { color: #8a9099; }
/*  Het schuine bandje. Rechtsboven over de hoek, met dezelfde magenta als de rest van de
    upgrade-taal; bij een bereikte grens grijsblauw, want dat is geen verkoop maar een stand. */
.wf-mm-slotband {
  position: absolute; top: 14px; right: -46px; width: 168px; z-index: 2;
  transform: rotate(38deg); transform-origin: center;
  background: linear-gradient(135deg, var(--webfix-magenta, #da176c), #a12359);
  color: #fff; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 0; box-shadow: 0 2px 8px rgba(1, 6, 20, .18);
  pointer-events: none;
}
/*  Een bereikte grens is geen aanbod maar een mededeling: grijsblauw in plaats van magenta. */
.wf-mm-slotband.-stand { background: linear-gradient(135deg, #4b5563, #2f3742); }
.wf-mm-slotuitleg { margin: 2px 0 8px; font-size: 11.5px; line-height: 1.45; color: #6b7280; }
.wf-mm-upgrade, .wf-mm-order.-upgrade {
  align-self: stretch; margin-top: auto; border: 0; border-radius: 9999px; cursor: pointer;
  padding: 9px 14px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--webfix-magenta, #da176c), #a12359);
  transition: filter .2s ease;
}
.wf-mm-upgrade:hover, .wf-mm-order.-upgrade:hover { filter: brightness(1.08); }
/* Een lopende proef moet er meteen uitspringen — amber rand + gloed, dezelfde rolkleur als de
   "Proef"-badge. (Een aftelklok kan hier later bij; de tegel heeft er ruimte voor.) */
.wf-mm-tile.-trial {
  border-color: rgba(220, 158, 47, .45); background: rgba(220, 158, 47, .07);
  box-shadow: 0 0 0 3px rgba(220, 158, 47, .10);
}
/* Opgezegd: loopt nog, maar stopt op de vervaldatum — daarom neutraal grijs i.p.v. groen. */
.wf-mm-tile.-opgezegd { border-color: rgba(1, 16, 61, .16); background: rgba(1, 16, 61, .025); }
.wf-mm-tile-top { display: flex; align-items: center; gap: 12px; }
.wf-mm-ic.prt-module-icon { width: 38px; height: 38px; min-width: 38px; border-radius: 12px; font-size: 19px; }
/* overflow-wrap houdt een lange modulenaam binnen zijn eigen kolom i.p.v. over de knop heen. break-word
   en niet anywhere: anywhere breekt ook midden in een woord dat prima op de volgende regel past, wat
   "Nieuwsbrief" tot "Nieuwsbri / ef" maakte zodra er een knop naast de naam kwam te staan. break-word
   laat het woord heel en wikkelt het naar de volgende regel; alleen iets wat op geen enkele regel past
   wordt alsnog gebroken. */
.wf-mm-t { flex: 1; min-width: 0; font-weight: 700; font-size: 15.5px; line-height: 1.3; color: #0e1c2e; overflow-wrap: break-word; }
a.wf-mm-t { text-decoration: none; }
a.wf-mm-t:hover { color: var(--wf-title, #a12359); }
.wf-mm-s { margin: 10px 0 12px; font-size: 12.5px; line-height: 1.5; color: #5f6c82; }
.wf-mm-tile .wf-mm-s:last-child { margin-bottom: 0; }

/* Statuslabel rechtsboven in de tegel. */
.wf-mm-lbl {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 9999px;
  font-weight: 700; font-size: 10px; letter-spacing: .03em; white-space: nowrap;
}
.wf-mm-lbl i { font-size: 9px; }
.wf-mm-lbl.-vast, .wf-mm-lbl.-actief { background: rgba(176, 209, 54, .22); color: #4e6711; }
.wf-mm-lbl.-proef { background: rgba(220, 158, 47, .22); color: #8a5f06; }
.wf-mm-lbl.-opgezegd { background: rgba(1, 16, 61, .07); color: #5f6c82; }

/* Prijs-pil en de kleine statusregels eronder (proef afgelopen, pakket loopt door…). */
.wf-mm-metarow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.wf-mm-price {
  display: inline-flex; align-self: flex-start; align-items: baseline; gap: 3px;
  padding: 4px 10px; border-radius: 9999px; background: #f5f5f8; font-weight: 800; font-size: 13.5px; color: #0e1c2e;
}
.wf-mm-price .pm { font-weight: 700; font-size: 11px; color: #666c73; }
.wf-mm-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: #5f6c82; }
.wf-mm-hint.-go { color: #598f2b; font-weight: 600; }
.wf-mm-hint.-stop { color: #8a5f06; font-weight: 600; }

/* Ronde actieknopjes rechts in de tegel. */
.wf-mm-act {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9999px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 13px;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.wf-mm-act:disabled { opacity: .5; cursor: default; }
.wf-mm-act.-del { color: var(--wf-title, #a12359); border-color: rgba(218, 23, 108, .28); }
.wf-mm-act.-del:hover:not(:disabled) { background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff; }
.wf-mm-act.-add { border-color: rgba(1, 16, 61, .16); color: #0e1c2e; font-size: 14px; }
/*  Op een tablet en telefoon zijn de rondjes 44px: ze staan naast elkaar in een tegel en met
    dertig pixels tik je er net naast (Tom, 07-09-2026). */
@media (max-width: 1024.98px) { .wf-mm-act { width: 44px; height: 44px; } }
.wf-mm-act.-add:hover:not(:disabled) { background: #0e1c2e; border-color: #0e1c2e; color: #fff; }
/* Besteld maar uitgezet: weer aanzetten kost niets extra → groen i.p.v. neutraal. */
.wf-mm-act.-back { border-color: rgba(111, 138, 27, .38); color: #4e6711; font-size: 14px; }
.wf-mm-act.-back:hover:not(:disabled) { background: #6f8a1b; border-color: #6f8a1b; color: #fff; }
/* Onderste knop van een meerprijs-tegel (bestellen / opzeggen). Vol breed, zodat elke tegel dezelfde
   indeling houdt en de knoppen op één lijn eindigen. */
.wf-mm-order {
  width: 100%; margin-top: 10px; border: none; border-radius: 11px; padding: 9px 13px;
  background: var(--wf-pink, #da176c); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.wf-mm-order:hover:not(:disabled) { background: var(--wf-title, #a12359); }
.wf-mm-order:disabled { background: #b9c0cc; cursor: default; }
/* Groen = "gelukt/gratis" (dezelfde tinten als .btn-success): de proefknop is een uitnodiging, geen
   verkoopknop, en moet zich onderscheiden van het roze "Definitief bestellen" / "Module opzeggen". */
.wf-mm-order.-success { background: #b0d136; }
.wf-mm-order.-success:hover:not(:disabled) { background: #9cbc2d; }

/* Redenen in het venster "Nee, bedankt" na een proefperiode. Klikbare chips en geen radioknopjes:
   het zijn er vijf, ze passen op twee regels, en aanwijzen leest sneller dan lezen-en-aankruisen.
   Eén tegelijk aan — dat regelt module-activatie.js. */
.wf-proef-redenen { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-proef-reden {
  border: 1px solid var(--wf-line, #e5e7ec); border-radius: 999px; padding: 8px 15px;
  background: #fff; color: var(--wf-text, #000229); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.wf-proef-reden:hover { border-color: var(--wf-pink, #da176c); color: var(--wf-pink, #da176c); }
.wf-proef-reden.-aan {
  background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff;
}

/* Voet. */
.wf-mm-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 26px; border-top: 1px solid rgba(1, 16, 61, .08); background: #fbfbfd; flex-wrap: wrap;
}
.wf-mm-fnote { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: #666c73; }
.wf-mm-fnote i { color: #9aa2b1; font-size: 15px; }
.wf-mm-fbtns { display: flex; align-items: center; gap: 10px; }
/* Op een smal scherm onder elkaar; naast elkaar worden het twee half afgekapte knoppen. */
@media (max-width: 575.98px) {
  .wf-mm-foot { flex-direction: column; align-items: stretch; }
  .wf-mm-foot .wf-btn { width: 100%; justify-content: center; }
}

:root[data-bs-theme="dark"] .wf-mm-content { box-shadow: 0 40px 90px rgba(0, 0, 0, .55); }
:root[data-bs-theme="dark"] .wf-mm-count { background: rgba(255, 255, 255, .92); }
:root[data-bs-theme="dark"] .wf-mm-seclabel { color: #9aa2b1; }
:root[data-bs-theme="dark"] .wf-mm-sectext,
:root[data-bs-theme="dark"] .wf-mm-s,
:root[data-bs-theme="dark"] .wf-mm-hint,
:root[data-bs-theme="dark"] .wf-mm-empty { color: #9aa2b1; }
:root[data-bs-theme="dark"] .wf-mm-empty-card { color: #9aa2b1; border-color: rgba(255, 255, 255, .10); }
:root[data-bs-theme="dark"] .wf-mm-tile { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }
:root[data-bs-theme="dark"] .wf-mm-tile:hover { border-color: rgba(255, 255, 255, .20); box-shadow: none; }
:root[data-bs-theme="dark"] .wf-mm-tile.-on { background: rgba(218, 23, 108, .14); border-color: rgba(218, 23, 108, .45); }
:root[data-bs-theme="dark"] .wf-mm-tile.-fixed { background: rgba(176, 209, 54, .10); border-color: rgba(176, 209, 54, .35); }
:root[data-bs-theme="dark"] .wf-mm-tile.-trial { background: rgba(220, 158, 47, .14); border-color: rgba(220, 158, 47, .5); }
:root[data-bs-theme="dark"] .wf-mm-t { color: #e8eaef; }
:root[data-bs-theme="dark"] a.wf-mm-t:hover { color: #fff; }
:root[data-bs-theme="dark"] .wf-mm-price { background: rgba(255, 255, 255, .08); color: #e8eaef; }
:root[data-bs-theme="dark"] .wf-mm-price .pm { color: #9aa2b1; }
:root[data-bs-theme="dark"] .wf-mm-lbl.-vast, :root[data-bs-theme="dark"] .wf-mm-lbl.-actief { background: rgba(176, 209, 54, .20); color: #c3dd6e; }
:root[data-bs-theme="dark"] .wf-mm-lbl.-proef { background: rgba(220, 158, 47, .22); color: #f0c069; }
:root[data-bs-theme="dark"] .wf-mm-act.-add { border-color: rgba(255, 255, 255, .22); color: #e8eaef; }
:root[data-bs-theme="dark"] .wf-mm-act.-add:hover:not(:disabled) { background: #e8eaef; border-color: #e8eaef; color: #0e1c2e; }
:root[data-bs-theme="dark"] .wf-mm-foot { background: rgba(255, 255, 255, .03); border-top-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme="dark"] .wf-mm-fnote { color: #9aa2b1; }

/* Meer lucht in kop, tabbalk, body en voet zodra het venster bijna schermvullend opent. */
@media (min-width: 1200px) {
  .wf-mm-content .wf-flows-modalhead { padding: 18px 32px; }
  .wf-mm-tabbar.wf-tabbar-unit { padding: 13px 32px; }
  .wf-tabpanels.wf-mm-body { padding: 30px 32px 32px; }
  .wf-mm-foot { padding: 18px 32px; }
}

/* Tablet: de "Heeft u vragen?"-link kost te veel breedte naast de tabs. */
@media (max-width: 991.98px) {
  .wf-mm-help { display: none; }
}
/* Mobiel: korte tablabels, krappere randen, één kolom. */
@media (max-width: 720px) {
  .wf-mm-content { border-radius: 20px; }
  .wf-mm-tablong { display: none; }
  .wf-mm-tabshort { display: inline; }
  .wf-mm-tabbar.wf-tabbar-unit { padding: 10px 16px; }
  .wf-tabpanels.wf-mm-body { padding: 20px 16px 22px; }
  .wf-tabbar-unit.-flush + .wf-tabpanels.wf-mm-body { padding-top: 20px; }
  .wf-mm-grid { grid-template-columns: 1fr; }
  .wf-mm-foot { padding: 14px 16px; }
  .wf-mm-fbtns { width: 100%; }
  .wf-mm-fbtns > * { flex: 1 1 0; }
  .wf-mm-count { height: 32px; padding: 0 12px; font-size: 12.5px; }
}
/* Telefoon: "CMS · Modules beheren" + teller + kruis passen niet naast elkaar. De tagline gaat weg —
   de tabs en de sectiekop vertellen al waar je bent. */
@media (max-width: 560px) {
  .wf-mm-content .wf-flows-modalhead-main .wf-mm-headtag { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Visuele keuzekaarten (wf-pick) — voor een keuze die je moet ZIEN, niet lezen:
   twee of drie kaarten met een mini-mockup, een titel en één zin uitleg. Eerst
   gebruikt bij Layoutspecifieke settings -> "Opening van de voorpagina", waar de
   klant kiest welke hero zijn site opent. Bewust een radio-groep, zodat de keuze
   met het toetsenbord te maken is en de autosave er vanzelf op reageert.
   ════════════════════════════════════════════════════════════════════════════ */
.wf-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.wf-pick input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.wf-pick label {
  display: block; cursor: pointer; margin: 0; border-radius: 16px; overflow: hidden;
  background: #fff; border: 2px solid #e6e8ee;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wf-pick label:hover { border-color: rgba(218, 23, 108, .45); box-shadow: 0 12px 28px rgba(20, 24, 40, .10); transform: translateY(-2px); }
.wf-pick input:focus-visible + label { outline: 2px solid var(--webfix-magenta, #A12359); outline-offset: 2px; }
.wf-pick input:checked + label { border-color: var(--webfix-magenta, #A12359); box-shadow: 0 12px 30px rgba(161, 35, 89, .18); }

/* De mini-mockup. Vaste verhouding zodat de twee kaarten even hoog blijven, ook als de
   uitlegtekst van de een langer is dan die van de ander. */
/*  display:block is hier essentieel: dit is een <span> (een label mag geen <div> bevatten als je
    hem klikbaar wilt houden zonder gedoe), en als inline-element negeert hij aspect-ratio en duwt
    hij de tekst eronder buiten de kaart. */
.wf-pick-art { display: block; position: relative; aspect-ratio: 16 / 9; background: #f4f6fa; border-bottom: 1px solid #e6e8ee; }
.wf-pick-art svg { display: block; width: 100%; height: 100%; }

.wf-pick-body { padding: 14px 16px 16px; display: flex; align-items: flex-start; gap: 10px; }
.wf-pick-tick {
  flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  border: 2px solid #c9cede; display: grid; place-items: center;
  transition: border-color .2s ease, background-color .2s ease;
}
.wf-pick-tick::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background-color .2s ease; }
.wf-pick input:checked + label .wf-pick-tick { border-color: var(--webfix-magenta, #A12359); background: rgba(161, 35, 89, .08); }
.wf-pick input:checked + label .wf-pick-tick::after { background: var(--webfix-magenta, #A12359); }

.wf-pick-t { display: block; font-weight: 600; font-size: 15px; color: #23252a; }
.wf-pick-s { display: block; font-size: 12.5px; line-height: 1.45; color: #6b7280; margin-top: 2px; }
.wf-pick-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  background: rgba(50, 188, 238, .16); color: #1d7ea6; vertical-align: middle;
}

:root[data-bs-theme="dark"] .wf-pick label { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme="dark"] .wf-pick label:hover { border-color: rgba(218, 23, 108, .55); box-shadow: none; }
:root[data-bs-theme="dark"] .wf-pick input:checked + label { border-color: #DA176C; box-shadow: none; }
:root[data-bs-theme="dark"] .wf-pick-art { background: rgba(255, 255, 255, .03); border-bottom-color: rgba(255, 255, 255, .10); }
:root[data-bs-theme="dark"] .wf-pick-tick { border-color: rgba(255, 255, 255, .28); }
:root[data-bs-theme="dark"] .wf-pick input:checked + label .wf-pick-tick { border-color: #DA176C; background: rgba(218, 23, 108, .18); }
:root[data-bs-theme="dark"] .wf-pick input:checked + label .wf-pick-tick::after { background: #DA176C; }
:root[data-bs-theme="dark"] .wf-pick-t { color: #e8eaef; }
:root[data-bs-theme="dark"] .wf-pick-s { color: #9aa2b1; }
:root[data-bs-theme="dark"] .wf-pick-badge { background: rgba(50, 188, 238, .18); color: #7fd3f3; }

/* Telefoon: kaarten onder elkaar, mockup iets platter zodat de tekst boven de vouw blijft. */
@media (max-width: 575.98px) {
  .wf-pick { grid-template-columns: 1fr; gap: 12px; }
  .wf-pick-art { aspect-ratio: 2 / 1; }
}

/* ── Grote schuifknop — .wf-switch-lg ────────────────────────────────────────────────────────
 *
 * Een Bootstrap-switch (.form-check.form-switch) op formaat van een échte knop. Bedoeld voor een
 * schakelaar die een heel blok velden aan- of uitzet: daar is het standaardschuifje van 2em te klein
 * voor. Je moet in één oogopslag zien of hij aanstaat, want anders zoek je naar velden die er wel
 * zijn maar verborgen.
 *
 * Zet de klasse op de .form-check-wrapper, niet op de input:
 *     <div class="form-check form-switch wf-switch-lg"> … </div>
 *
 * Kleur komt uit --bs-primary (webfix.css); alleen de maatvoering staat hier.
 */
.wf-switch-lg { padding-left: 3.6em; min-height: 2em; }

.wf-switch-lg .form-check-input {
  width: 3em;
  height: 1.6em;
  margin-left: -3.6em;
  margin-top: .1em;
  cursor: pointer;
}

.wf-switch-lg .form-check-label {
  font-weight: 600;
  line-height: 1.6em;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Import-voortgang (.wf-import-*)
 *
 * De stappenlijst van een langlopende achtergrondactie: per stap de naam, waar de gegevens vandaan
 * komen en waar ze heen gaan, en de telling. Vier toestanden, elk met een eigen bolletje:
 *
 *     wacht   – grijs, nog niet aan de beurt
 *     bezig   – kloppend hartje in merkkleur
 *     klaar   – groen vinkje + aantal
 *     leeg    – groen randje zonder vulling: uitgevoerd, maar er was niets over te zetten
 *     mislukt – rood kruisje + de foutregel eronder
 *
 * "Leeg" is bewust géén fout: nul vacatures is een prima uitkomst, maar verdient ook geen vinkje
 * dat suggereert dat er iets is overgezet.
 *
 *     <ul class="wf-import-stappen">
 *       <li class="wf-import-stap -klaar">…</li>
 *     </ul>
 */
.wf-import-balk { height: 10px; border-radius: 6px; }

.wf-import-stappen { max-height: 46vh; overflow-y: auto; }

.wf-import-stap {
  display: grid;
  grid-template-columns: 18px minmax(9rem, auto) 1fr auto;
  align-items: center;
  gap: .25rem .6rem;
  padding: .3rem .1rem;
  border-bottom: 1px solid var(--bs-border-color, #e9ecef);
  font-size: .85rem;
  color: #9aa0ae;
  transition: color .2s ease;
}

.wf-import-stap:last-child { border-bottom: 0; }

.wf-import-vink {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #d7dae1;
  justify-self: center;
}

.wf-import-naam { font-weight: 600; }

/* Bron → doel: bewust klein en grijs. Het is naslag voor wie wil weten waar iets vandaan komt,
   geen informatie die je bij elke stap hoeft te lezen. */
.wf-import-herkomst {
  font-family: var(--bs-font-monospace, monospace);
  font-size: .72rem;
  color: #b3b8c4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wf-import-pijl { opacity: .55; }

.wf-import-telling {
  font-weight: 700;
  color: #5a8f00;
  background: #f2f8e3;
  border-radius: 999px;
  padding: .05rem .5rem;
  font-size: .75rem;
}

.wf-import-telling.-leeg { color: #a9aeb9; background: #f4f5f7; font-weight: 500; }

.wf-import-stap.-bezig { color: var(--bs-primary, #A12359); }
.wf-import-stap.-bezig .wf-import-vink {
  border-color: var(--bs-primary, #A12359);
  background: var(--bs-primary, #A12359);
  animation: wf-import-klop 1s ease-in-out infinite;
}

.wf-import-stap.-klaar,
.wf-import-stap.-leeg { color: #414552; }

.wf-import-stap.-klaar .wf-import-vink { border-color: #B0D136; background: #B0D136; }
.wf-import-stap.-leeg .wf-import-vink { border-color: #ced3dc; }

.wf-import-stap.-mislukt { color: #D81F25; }
.wf-import-stap.-mislukt .wf-import-vink { border-color: #D81F25; background: #D81F25; }

.wf-import-stapfout {
  grid-column: 2 / -1;
  font-size: .78rem;
  color: #D81F25;
  white-space: pre-wrap;
}

.wf-import-trace { max-height: 12rem; overflow: auto; white-space: pre-wrap; }

@keyframes wf-import-klop {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.6); opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-import-stap.-bezig .wf-import-vink { animation: none; }
}

/* Bewust overgeslagen stap: grijs, en de reden eronder in gewone tekstkleur -- het is geen fout. */
.wf-import-stap.-overgeslagen { color: #9aa0ae; }
.wf-import-stap.-overgeslagen .wf-import-vink { border-color: #e2e5ea; background: #e2e5ea; }

.wf-import-stapreden {
  grid-column: 2 / -1;
  font-size: .78rem;
  color: #a9aeb9;
}

/* Tussenstand binnen de lopende stap ("3.400 van 10.835 bekeken"). */
.wf-import-telling.-bezig {
  color: var(--bs-primary, #A12359);
  background: #fbeef4;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Leesbaarheid: alert-light ─────────────────────────────────────────────────────────────────────
   In dit thema staat `--bs-light-text-emphasis` op #e7ecf0. Bootstrap gebruikt die waarde als
   tekstkleur van `.alert-light`, en de achtergrond van diezelfde alert is #f3f6f8. Bijna-witte letters
   op een bijna-witte achtergrond: het contrast is ongeveer 1,1:1 en daarmee is de tekst in de praktijk
   onzichtbaar. Zichtbaar geworden op /admin/administratie/omzet/maanden, maar het gold overal —
   39 plekken in 24 views, van het adminsysteem tot het klantdashboard.

   Hier centraal rechtgezet in plaats van per view: het is één verkeerde variabele, en die 39 plekken
   doen niets fout. De achtergrond blijft zoals hij is; alleen de letters worden leesbaar.
   #495057 op #f3f6f8 geeft 7,5:1 en haalt daarmee WCAG AA (4,5:1) ruim, en AAA op de rand. */
.alert-light {
  --bs-alert-color: #495057;
  --bs-alert-link-color: var(--bs-primary, #A12359);
}

/* Iconen en gedempte tekst bínnen zo'n alert kleuren mee; die zouden anders alsnog wegvallen. */
.alert-light .text-muted { color: #5f6975 !important; }

/* ── GEO/SEO/AEO-modal (_SeoGeoModal) ─────────────────────────────────────────
   Herbruikbaar over alle content-editors. "Niet indexeren" bovenaan → tabs conform
   stijlgids (.wf-tabblock): taal-hoofdtabs + subtab-rij (meertalig) of de onderdelen
   als hoofdtabs (ééntalig). Klikgedrag: dashboard-seo.js. */
.wf-seo-noindex {
  background: #fff8ec; border: 1px solid #f2e2c4; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 16px;
}
.wf-seo-noindex .form-check-label { cursor: pointer; }
.wf-seo-noindex-hint {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #475569);
}
.wf-seo-noindex-hint > i { color: #c98a12; font-size: 15px; flex: none; margin-top: 1px; }

/* Tabbalk in de modal: laat de glazige unit de volle breedte pakken (geen fit-content-eiland). */
.wf-seo-tabs .wf-tabbar-unit { width: auto; }
/* Subtab-rij netjes onder de taaltabs. */
.wf-seo-subbar { margin-top: 10px; }
/* Panelen: onze secties stapelen (block), niet de standaard flex-rij van .wf-tabpanel. */
.wf-seo-panels { margin-top: 18px; padding-top: 18px; }
.wf-seo-langpanel { display: block; }
.wf-seo-section { display: block; }
.wf-seo-tabnote { font-size: 12.5px; line-height: 1.5; color: var(--wf-muted, #94a3b8); margin: 0 0 14px; }

/* Read-only structured-data-voorbeeld. */
.wf-seo-ld {
  background: #f8fafc; border: 1px solid var(--wf-border, #e2e8f0); border-radius: 10px;
  padding: 12px 14px; margin: 0; max-height: 240px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.55; color: #334155; white-space: pre-wrap; word-break: break-word;
}
.wf-seo-ld.wf-seo-ld-empty {
  font-family: inherit; color: var(--wf-muted, #94a3b8); font-style: italic; white-space: normal;
}

/* AEO-tab: melding als FAQ centraal is uitgezet door beheer. */
.wf-seo-faq-off {
  display: flex; gap: 8px; align-items: flex-start;
  background: #e6f7fd; border: 1px solid #bfe9f8; border-radius: 12px;
  padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #1a7fa3;
}
.wf-seo-faq-off > i { color: #1a7fa3; font-size: 16px; flex: none; margin-top: 1px; }

/* ── Koprij boven een rijenlijst (.wf-lrow-head) ───────────────────────────────────────────────────
   De rijenlijst is bewust zonder kolomkoppen ontworpen: elke cel draagt daar zijn eigen labeltje. Dat
   werkt bij een lijst met twee of drie brede kolommen, maar niet bij een tabel met zes smalle — dan
   staat het label vaker dan de waarde en leest niemand het nog.

   Deze koprij zet die labels één keer bovenaan. De cellen eronder gebruiken dezelfde breedtes, dus de
   kolommen lopen recht. Subtiel grijs, want het is een kop en geen rij. */
.wf-lrow-head {
  display: flex; align-items: center; gap: 18px; padding: 10px 26px;
  background: rgba(1, 16, 61, .025);
  border-top: 1px solid rgba(1, 16, 61, .06);
  border-bottom: 1px solid rgba(1, 16, 61, .06);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: #6b7280; text-transform: uppercase;
}

/* Een tussenkop in een lijst die ergens voor waarschuwt in plaats van alleen te groeperen: "Eerst
   goedkeuren" op het werklijstje. Subtiel rood, geen alarm - er is niets stuk, er moet alleen eerst
   iemand naar kijken voordat die rijen mee mogen. */
.wf-lrow-head.-let-op { background: rgba(216, 31, 37, .055); color: #a8181d; }
.wf-lrow-head.-let-op .bi { color: #d81f25; }
:root[data-bs-theme="dark"] .wf-lrow-head.-let-op { background: rgba(216, 31, 37, .16); color: #f0a9ab; }
.wf-lrow-head > * { min-width: 0; }
/* Hoort bij .wf-lrow.-dicht, zodat kop en rijen dezelfde afstanden houden. */
.wf-lrow-head.-dicht { gap: 12px; padding-left: 20px; padding-right: 20px; }

/* ── Statusstip (.wf-dot) ──────────────────────────────────────────────────────────────────────────
   Kleine gekleurde stip vóór een statuswoord. Oranje = nog niet af (concept), groen = klaar
   (definitief ingeboekt). Zelfde betekenis als de stippen in de rijenlijst, maar dan als los
   element zodat hij ook in een tabelcel past. */
.wf-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; flex: none;
}
.wf-dot.-concept { background: #f59e0b; }
.wf-dot.-definitief { background: #22c55e; }
.wf-status-concept { color: #b45309; font-weight: 600; }
.wf-status-definitief { color: #15803d; font-weight: 600; }

/* ── Zwevende actieknop (.wf-zweefknop) ────────────────────────────────────────────────────────────
   Verschijnt rechts in beeld zodra er iets is aangevinkt, en verdwijnt weer als je alles uitvinkt.
   Bedoeld voor lijsten waar de knop anders onder aan een lange pagina staat: op het Twinfield-
   werklijstje moest je na elk vinkje naar beneden scrollen om iets te kunnen doen.

   Verticaal gecentreerd, want dat is de plek die niet meebeweegt met de lengte van de lijst. Zelfde
   vormtaal als .wf-naar-boven: vast in beeld, schaduw, en in/uit met opacity in plaats van met
   display — dat geeft geen sprong in de layout en voorkomt een klik op een knop die er nog niet is.

     <button class="wf-zweefknop wf-badge wf-badge-primary" data-...>
       <i class="bi bi-upload"></i>Sync naar Twinfield <span class="wf-zweef-telling">3</span>
     </button>
*/
.wf-zweefknop {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%) translateX(12px);
  z-index: 10; height: 44px; padding: 0 20px; font-size: 13px; gap: 8px;
  box-shadow: 0 6px 20px rgba(1, 16, 61, .22);
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.wf-zweefknop.is-visible { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.wf-zweefknop.is-visible:hover { transform: translateY(-50%) translateX(-2px); }
.wf-zweefknop:focus-visible { outline: 3px solid rgba(50, 188, 238, .55); outline-offset: 2px; }

/* Het aantal in de knop. Wit-op-doorzichtig, zodat het bij elke kleurvariant past. */
.wf-zweef-telling {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 9999px;
  background: rgba(255, 255, 255, .22); font-size: 11px; font-weight: 700;
}

/* Op een smal scherm past een zwevende knop naast de inhoud niet meer; daar hoort hij onderaan over
   de volle breedte, waar de duim hem kan bereiken. */
@media (max-width: 767.98px) {
  .wf-zweefknop {
    right: 12px; left: 12px; top: auto; bottom: 16px;
    transform: translateY(12px); width: auto;
  }
  .wf-zweefknop.is-visible { transform: translateY(0); }
  .wf-zweefknop.is-visible:hover { transform: translateY(-2px); }
}

/* Vinkjes in een rijenlijst even groot houden. Bootstrap geeft ze `1.125em`, dus ze schalen mee met
   de tekst eromheen — en de koprij staat op 11,5px terwijl een rij op de gewone maat staat. Het
   "alles"-vinkje kwam daardoor zichtbaar kleiner uit dan de vinkjes eronder. Een vaste maat is hier
   het enige dat ze gelijk houdt, want de twee contexten hóren verschillende tekstgroottes te hebben. */
.wf-lrow .form-check-input,
.wf-lrow-head .form-check-input { width: 16px; height: 16px; margin-top: 0; }

/* Het woord naast het "alles"-vinkje. Grijs en klein: het is een label bij een bedieningselement,
   geen kolomkop. */
.wf-lrow-head .wf-alles-label {
  margin-left: 8px; font-weight: 600; color: #9aa1ad; letter-spacing: .04em;
}

/* Zwevende knop die aan het werk is. Blijft in beeld en houdt zijn kleur — alleen de aanwijzer en het
   draaiende rondje vertellen dat er iets loopt. Grijs maken zou hem laten lijken op iets dat kapot is
   in plaats van op iets dat bezig is. */
.wf-zweefknop.is-bezig { cursor: progress; opacity: .85; }
.wf-zweefknop.is-bezig:hover { transform: translateY(-50%) translateX(0); }

.wf-zweef-spin {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: wf-zweef-draai .7s linear infinite;
}
@keyframes wf-zweef-draai { to { transform: rotate(360deg); } }

/* Wie beweging heeft uitgezet krijgt geen draaiend rondje maar een rustige puls: het gaat erom dát er
   iets gebeurt, niet om de animatie. */
@media (prefers-reduced-motion: reduce) {
  .wf-zweef-spin { animation: wf-zweef-puls 1.2s ease-in-out infinite; }
  @keyframes wf-zweef-puls { 50% { opacity: .35; } }
}

/* Bevestigingsmodal die niets verwijdert. Het rondje is rood ontworpen omdat de modal als
   verwijderdialoog is gebouwd; bij "crediteur aanmaken" of "mail versturen" hoort daar geen alarm bij.
   wf-confirm.js zet deze klasse zodra de bevestigingsknop niet rood is. */
.wf-confirm-ic.-neutraal {
  background: rgba(50, 188, 238, .12);
  color: #1f93bd;
}
[data-bs-theme="dark"] .wf-confirm-ic.-neutraal { background: rgba(50, 188, 238, .20); }

/* Zelfde rondje, maar voor een waarschuwing die geen verwijdering is: "deze maand is nog niet
   compleet, toch versturen?". Amber en niet rood — er gaat niets stuk, er ontbreekt iets. */
.wf-confirm-ic.-waarschuwing {
  background: rgba(220, 158, 47, .14);
  color: #b17e21;
}
[data-bs-theme="dark"] .wf-confirm-ic.-waarschuwing { background: rgba(220, 158, 47, .22); }

/* Het draaiende rondje is wit, want het staat normaal op een gekleurde knop. Op een witte
   modal-achtergrond is dat een onzichtbare cirkel; deze variant kleurt mee met de tekst. */
.wf-zweef-spin.-donker {
  border-color: rgba(1, 16, 61, .16);
  border-top-color: #1f93bd;
  vertical-align: -2px;
}

/* ── Welkomstmodal: de twee factuurtermijn-kaarten ─────────────────────────────
   Geen eigen bestand: de kop (.wf-flows-modalhead-admin) en de stappenbalk
   (.wf-wizard-*) komen uit flows.css, dat het dashboard al inlaadt. Alleen deze
   twee kaarten bestonden nog nergens.

   Alles op tokens, dus donkere modus werkt vanzelf mee: --wf-border en --wf-surface
   worden onder [data-bs-theme="dark"] in webfix.css al omgezet. Groen als
   selectiekleur, niet roze — roze is per stijlgids gereserveerd voor maximaal één
   zware CTA per pagina, en dit is een keuze, geen CTA. */
.wf-termijnkaart {
  display: block;
  padding: 16px 18px;
  background: var(--wf-surface);
  border: 2px solid var(--wf-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .35s ease, background-color .35s ease;
}
.wf-termijnkaart:hover { border-color: var(--wf-green); }
.wf-termijnkaart:has(input:checked) {
  border-color: var(--wf-green);
  background: var(--wf-green-subtle, rgba(176, 209, 54, .12));
}

/* ── Leesbaarheid: uitleg-waarschuwing in een instelscherm ────────────────────────────────────────
   Zelfde soort probleem als bij `.alert-light` hierboven, maar dan bij `.alert-warning`: de tekstkleur
   komt in dit thema uit op #707A82 en de achtergrond op #FFF6EA. Nagemeten in de browser: 4,09:1 —
   net onder de eis van 4,5, en dat voor uitleg die de klant juist móet lezen ("de banner verschijnt
   niet omdat er geen kop staat").

   Bewust NIET `.alert-warning` in het algemeen aangepast: dat is een systeembrede wijziging en die
   hoort via Tom te lopen. Deze klasse zet alleen de letterkleur van dit soort uitlegblokken goed.
   #664d03 op #FFF6EA geeft 7,5:1. */
.wf-uitleg-waarschuwing {
  --bs-alert-color: #664d03;
  color: #664d03;
}
/* In donkere modus wordt de achtergrond van zo'n alert #403937; die donkerbruine letter geeft daar
   1,41:1 en is dus onleesbaar. Daar wint een lichte amber: #e8b84b op #403937 = 6,1:1. */
[data-bs-theme="dark"] .wf-uitleg-waarschuwing {
  --bs-alert-color: #e8b84b;
  color: #e8b84b;
}

/* ── Webfix AI-vlak (.wf-ai-bg) ───────────────────────────────────────────────────────────────────
   De achtergrond van de "Webfix AI header" uit de stijlgids (/Admin/Stijlgids, tab Standaard):
   donkere AI-navy die naar lichtblauw drift. Stond alleen in flows.css als .wf-flows-modalhead-ai,
   maar dat bestand wordt niet overal geladen — de chatwidget en de bezoekersconsole hebben het niet.
   Daarom hier systeembreed, met een eigen keyframe zodat hij ook werkt op pagina's zonder flows.css.

   Zet hem op het element zelf; de inhoud moet position:relative krijgen, want ::before legt er een
   subtiele lichtsluier overheen (net als bij de modal-kop). */
.wf-ai-bg {
  position: relative;
  color: #fff;
  background: linear-gradient(90deg, #000229 0%, #2b325c 50%, #6fd2f2 100%);
  background-size: 200% 100%;
  animation: wf-ai-headdrift 11s ease-in-out infinite;
}
.wf-ai-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%);
}
@keyframes wf-ai-headdrift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
/* Wie beweging heeft uitgezet krijgt dezelfde kleuren, maar dan stil. */
@media (prefers-reduced-motion: reduce) { .wf-ai-bg { animation: none; } }

/* ── Admin-klantpaneel · modulebeheer (Actieve modules / Modules toevoegen) ──────────────────────
   De grote schuifknop krijgt een ZICHTBARE track: standaard is 'ie op een witte kaart bijna
   onzichtbaar (alleen het knopje valt op → leest als een rondje). Grijs uit, merkkleur aan, en een
   3-class-selector zodat de maat wint van de 16px-rijvinkjesregel. */
.wf-lrow .wf-switch-lg .form-check-input {
  width: 3em; height: 1.6em; margin-left: -3.6em; margin-top: .1em; flex: none; cursor: pointer;
  background-color: #cbd4df; border-color: #cbd4df; box-shadow: none;
}
.wf-lrow .wf-switch-lg .form-check-input:checked {
  background-color: var(--bs-primary, #a12359); border-color: var(--bs-primary, #a12359);
}
.wf-lrow .wf-switch-lg .form-check-input:focus {
  border-color: var(--bs-primary, #a12359); box-shadow: 0 0 0 3px rgba(161, 35, 89, .15);
}

/* Modules twee-koloms op grotere schermen (de kaart is al col-xl-6; daar past 2 naast elkaar). */
@media (min-width: 1400px) {
  .wf-kpmod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
  .wf-kpmod-grid > [data-kp-empty] { grid-column: 1 / -1; }
}

/* "Cadeau geven / intrekken" onder een meerprijs-module in het klantpaneel: een tekstknop, geen
   volle knop, want het is een uitzondering en niet de gewone handeling. */
.wf-kp-cadeau {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 0; border: 0;
  background: none; font-size: 12px; font-weight: 600; color: var(--wf-title, #a12359); cursor: pointer;
}
.wf-kp-cadeau:hover { text-decoration: underline; }
.wf-kp-cadeau[data-kp-cadeau="intrekken"] { color: var(--wf-text-muted, #6c757d); }
[data-bs-theme="dark"] .wf-kp-cadeau { color: #e58ab2; }
[data-bs-theme="dark"] .wf-kp-cadeau[data-kp-cadeau="intrekken"] { color: #aab2c0; }

/* Tabs conform stijlgids: een inactieve tab krijgt een grijze 1px-rand; de teller wordt een witte
   badge met het cijfer erin. */
.wf-kpmod-tabs .wf-tabx { border: 1px solid var(--border-hairline, #e3e9f0); }
.wf-kpmod-tabs .wf-tabx.is-active { border-color: transparent; }
.wf-tab-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; margin-left: 7px; border-radius: 9999px; background: #fff; color: #5b6b7d;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.wf-kpmod-tabs .wf-tabx.is-active .wf-tab-badge { color: #c1206a; }

/* ── Formuliersecties in een modal: .wf-fcard + keuzekaarten .wf-optcard ────────────────────
   Een lange modal in genummerde secties opdelen ("Algemeen", "Wachtwoord", "Type gebruiker")
   in plaats van één rij losse velden. Gebruikt in de gebruikersmodals van /dashboard/Gebruikers
   en de Users-tab van /admin/clients; die twee horen identiek te zijn.

   Kleuren komen uit de tokens, zodat de donkere modus meekomt zonder een tweede regelset. */
.wf-fcard {
  border: 1px solid var(--wf-border);
  border-radius: 10px;
  padding: 16px 18px 18px;
  background: var(--wf-surface);
}
.wf-fcard + .wf-fcard { margin-top: 14px; }
.wf-fcard-kop {
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--wf-title);
  margin: 0 0 14px;
}

/* Keuzekaart: het HELE vak is klikbaar, want het is een <label> om de radio heen. Daarom ook
   overal het handje — een vak dat er klikbaar uitziet maar alleen op het bolletje reageert is
   precies waar iemand op vastloopt. */
.wf-optcard {
  display: flex; gap: 11px; align-items: flex-start;
  width: 100%; height: 100%; margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--wf-border);
  border-radius: 9px;
  background: var(--wf-surface);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wf-optcard:hover { border-color: var(--wf-pink); background: var(--wf-hover-bg); }

/* De radio staat BINNEN de rand. Stond hij in een .form-check, dan trok de negatieve marge van
   Bootstrap hem buiten het vak — precies wat hier eerder misging. */
.wf-optcard > input[type="radio"] {
  flex: none; margin: 2px 0 0; cursor: pointer;
}
.wf-optcard-body { display: block; }
.wf-optcard-titel { display: block; font-weight: 600; color: var(--wf-text); }
.wf-optcard-uitleg { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--wf-text-soft); }

/* Gekozen kaart. :has() is de enige manier om dit zonder JS te doen; browsers die het niet
   kennen tonen gewoon de rustige kaart met een gevuld radiobolletje — niets gaat stuk. */
.wf-optcard:has(> input:checked) {
  border-color: var(--wf-pink);
  box-shadow: 0 0 0 1px var(--wf-pink) inset;
  background: var(--wf-hover-bg);
}
.wf-optcard:focus-within { outline: 2px solid var(--wf-blue); outline-offset: 2px; }

/* Extra klein (37px). WfButtonModel documenteerde deze maat al ("xs") en _WfButton zette de klasse
   er ook op, maar er stond nergens CSS bij — een xs-knop kwam dus gewoon op 50px uit. */
.wf-btn-xs { gap: 8px; height: 37px; padding: 0 16px 0 5px; font-size: 13px; }
.wf-btn-xs .wf-btn-chip { width: 27px; height: 27px; font-size: 12px; }
.wf-btn-xs .wf-btn-body { gap: 7px; padding-left: 0; }
.wf-btn-xs .wf-btn-arrow { font-size: 12px; }

/* ── Kaartkop met gecentreerd zoekveld (.wf-head-3col) ──────────────────────────────────────
   Drie zones op één regel: titel links, zoekveld in het MIDDEN, acties rechts.

   De twee buitenste zones krijgen allebei `flex: 1 1 0`, dus exact dezelfde breedte, ongeacht hoe
   lang de titel is of hoeveel knoppen er rechts staan. Alleen dan valt het middenvak op het midden
   van de KAART. Met een middenvak dat de restruimte opvult (de voor de hand liggende opzet) staat
   het zoekveld in het midden van wat er tussen titel en knop overblijft — en dus zichtbaar scheef. */
.wf-head-3col { flex-wrap: nowrap; }
.wf-head-3col > .wf-tcard-title { flex: 1 1 0; min-width: 0; }
.wf-head-3col > .wf-head-mid    { flex: 0 0 auto; display: flex; justify-content: center; min-width: 0; }
.wf-head-3col > .wf-head-right  { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.wf-head-3col .wf-head-mid .wf-pill-field { width: 340px; max-width: 100%; min-width: 0; }

/* Mobiel: titel en zoekveld samen op de eerste regel (zoekveld rechts van de titel), de acties op
   een eigen regel eronder over de volle breedte. Een chip-knop van 37px naast een zoekveld op een
   telefoon wordt anders een duimoefening.

   Het zoekveld mag hier wél krimpen (flex 1 1 auto + min-width 0). Zonder dat laatste houdt een
   input zijn eigen minimumbreedte aan, past de regel niet, en valt het veld alsnog onder de titel. */
@media (max-width: 767.98px) {
  .wf-head-3col { flex-wrap: wrap; gap: 12px; }
  .wf-head-3col > .wf-tcard-title { flex: 0 0 auto; }
  .wf-head-3col > .wf-head-mid { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
  .wf-head-3col .wf-head-mid .wf-pill-field { width: auto; flex: 1 1 0; min-width: 0; }
  /* Een <input> houdt zonder dit zijn eigen minimumbreedte (de `size`-standaard van de browser)
     aan. De regel past dan niet en het zoekveld valt alsnog onder de titel. */
  .wf-head-3col .wf-head-mid .wf-pill-field input { min-width: 0; width: 100%; }
  .wf-head-3col > .wf-head-right { order: 3; flex: 0 0 100%; justify-content: center; flex-wrap: wrap; }
  .wf-head-3col > .wf-head-right > .wf-btn { width: 100%; justify-content: center; height: 42px; }
}

/* ── /dashboard/layout/logo (.lgf-*) ──────────────────────────────────────────
 * 1:1 uit Claude Design "Webfix Logo en Favicon". Maten, radii en schaduwen komen uit dat ontwerp;
 * kleuren zijn vertaald naar onze tokens zodat de donkere modus meekomt.
 *
 * Twee kaarten naast elkaar (logo | logo voor donkere achtergrond) met daaronder de favicon over de
 * volle breedte. De AI-knop in de rechterkaart is de gedeelde Webfix AI-knop (.wf-aibtn) en niet de
 * pil uit het ontwerp — een AI-actie hoort er overal hetzelfde uit te zien.
 *
 * Voorvoegsel lgf- en niet lg-: .lg-card / .lg-cap / .lg-uni zijn hierboven al in gebruik door
 * het LOGO-hoofdstuk van de stijlgids. Met lg- erfde elke kaart hier stilletjes
 * `align-items: center` uit die showcasekaart, waardoor de faviconkaart zijn inhoud
 * gecentreerd toonde in plaats van links. */
.lgf { width: 100%; }

/* Sinds 30-08-2026 staan de drie onderdelen in tabbladen (.wf-tabblock in een .wf-tabcard) in plaats
   van in drie kaarten onder elkaar. Elk paneel draagt de inhoud die eerst in een kaart zat; de kaart
   zelf komt nu van .wf-tabcard. */
/* Het paneel is een kolom, zodat de tip onderaan kan blijven plakken (margin-top: auto). De drie
   tabbladen zijn even hoog gemaakt; zonder dat zou de tip bij het korte tabblad halverwege hangen. */
/* Flex en niet block: het open tabblad heeft geen inline display (die zet wf-tabs.js pas bij het
   klikken), dus zonder dit stond het eerste tabblad bij het laden als block en zakte de tip daar
   niet naar de onderkant. De gesloten panelen dragen hun eigen inline display:none. */
/* align-items expliciet op stretch: .wf-tabpanel zet 'center', en in een kolom betekent dat
   'zo smal als de inhoud'. De kaarten stonden daardoor ingesnoerd in plaats van over de volle
   breedte van het tabblad. */
.lgf-paneel { display: flex; flex-direction: column; align-items: stretch; }
.lgf-paneel > .lgf-head { padding: 20px 24px 0; }
.lgf-paneel > .lgf-body { padding: 14px 24px 0; }
.lgf-paneel > .lgf-hint { margin: auto 24px 22px; }
/* Twee kaarten naast elkaar binnen een tabblad (het tabblad "Logo dark"). Bewust NIET samen met
   .lgf-body op hetzelfde element: die zet display:flex en staat verderop in dit bestand, dus dan
   won de kolomstapel het van dit rooster. */
.lgf-tweekolom {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch;
  padding: 14px 24px 0;
}
/* Eén kaart over de volle breedte (de tabbladen Logo en Favicon). */
.lgf-eenkolom { padding: 14px 24px 0; }
.lgf-eenkolom > .lgf-kaart { height: 100%; }
/* Allebei even hoog: de kaarten rekken tot de hoogste van de twee (align-items: stretch hierboven) en
   hun lijf vult de rest op. Zonder dat laatste bleef de korte kaart met een witte onderrand achter. */
.lgf-kaart {
  display: flex; flex-direction: column;
  border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; overflow: hidden; background: var(--wf-surface, #fff);
}
.lgf-kaart-b { flex: 1; }
.lgf-kaart-h {
  display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--wf-border, #e2e8f0);
  background: #fbfbfd; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wf-text-soft, #666c73);
}
.lgf-kaart-h i { font-size: 12px; color: var(--wf-muted, #9aa2b1); }
.lgf-kaart-b { padding: 16px; }
/* De AI-kaart draagt de Webfix AI-kop uit de stijlgids; die maakt zijn eigen bovenrand. */
.lgf-kaart-ai .wf-flows-modalhead { border-radius: 0; }
.lgf-kaart-ai .lgf-ai-t { margin-top: 0; }
.lgf-kaart-ai .lgf-mk { margin-top: 18px; padding-top: 16px; }
[data-bs-theme="dark"] .lgf-keuze-k,
[data-bs-theme="dark"] .lgf-fmt .box { background: #1a1d27; border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .lgf-kaart { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .lgf-kaart-h { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }

/* ── Bezig-overlay (.wf-bezig) ────────────────────────────────────────────────
 * Legt de héle pagina onder een donkere laag zolang er iets draait dat je niet halverwege moet
 * onderbreken — nu: Webfix AI die een lichte versie van een logo maakt. Zonder dit gebeurde er na de
 * klik ogenschijnlijk niets: de knop ging op slot en verder bleef alles staan, dus klikte je door.
 *
 *   <div class="wf-bezig" id="…" hidden>
 *     <div class="wf-bezig-kaart">
 *       <span class="wf-bezig-ring"></span>
 *       <div class="wf-bezig-t">…</div><p class="wf-bezig-s">…</p>
 *       <div class="wf-bezig-bar"><span class="wf-bezig-fill"></span></div>
 *     </div>
 *   </div>
 *
 * De balk is een SCHATTING, geen echte voortgang: de AI meldt onderweg niets. Hij kruipt daarom naar
 * 90% en springt pas op 100% als het antwoord er is — eerlijker dan een balk die stilstaat. */
.wf-bezig {
  position: fixed; inset: 0; z-index: 1085; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(3, 8, 26, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.wf-bezig[hidden] { display: none; }
.wf-bezig-kaart {
  width: 100%; max-width: 360px; padding: 28px 26px 24px; border-radius: 22px; text-align: center;
  background: var(--wf-surface, #fff); box-shadow: 0 24px 60px rgba(1, 6, 20, .35);
}
/* Het woordmerk staat midden boven de kaart. De kleur moet er expliciet op: in de SVG is "Webfix"
   currentColor, en zonder deze regel erft hij de grijze bodytekst. Zelfde kop als in de
   fotobewerker, zodat elke AI-actie er hetzelfde uitziet. */
.wf-bezig-merk {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: var(--wf-black, #000229);
}
.wf-bezig-merk .wf-ai-svg { height: 1em; font-size: 21px; }
.wf-bezig-ring {
  display: block; width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 9999px;
  border: 3px solid rgba(1, 16, 61, .10); border-top-color: var(--wf-pink, #da176c);
  animation: wf-bezig-draai .9s linear infinite;
}
@keyframes wf-bezig-draai { to { transform: rotate(360deg); } }
.wf-bezig-t { font-weight: 800; font-size: 16px; color: var(--wf-text, #1e293b); }
.wf-bezig-s { margin: 6px 0 18px; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }
.wf-bezig-bar { height: 8px; border-radius: 8px; background: #edf1f5; overflow: hidden; }
.wf-bezig-fill {
  display: block; width: 0; height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--wf-green, #b0d136), var(--wf-pink, #da176c) 55%, var(--wf-blue, #32bcee));
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
[data-bs-theme="dark"] .wf-bezig-kaart { background: #1a1d27; }
[data-bs-theme="dark"] .wf-bezig-merk { color: #fff; }
[data-bs-theme="dark"] .wf-bezig-bar { background: rgba(255, 255, 255, .10); }
@media (prefers-reduced-motion: reduce) { .wf-bezig-ring { animation-duration: 2.4s; } }

/* Eigen kleur: een rond vakje dat alleen de KLEUR laat zien. De browser tekent om een
   <input type="color"> een eigen grijs randje met binnenmarge; dat zag er rommelig uit naast de
   ronde merkkleur-bolletjes. Daarom ligt de invoer iets búiten het vakje en snijdt het vakje hem af
   — dezelfde truc als bij .kl-sw op de kleurenpagina. */
/* Scheiding tussen de vaste merkkleuren en de vrije keuze. */
.lgf-sws-div { flex: none; width: 1px; height: 26px; margin: 0 4px; background: rgba(1, 16, 61, .14); }
/* Bewust RECHTHOEKIG (met ronde hoeken): zo zie je meteen dat dit geen voorgestelde kleur is maar je
   eigen keuze. De browser tekent om een <input type="color"> een grijs randje met binnenmarge; die
   ligt daarom iets buiten het vakje en wordt weggesneden. */
.lgf-eigen {
  position: relative; flex: none; display: inline-flex; width: 46px; height: 34px; border-radius: 10px;
  overflow: hidden; border: 1.5px solid rgba(1, 16, 61, .10); cursor: pointer;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}
.lgf-eigen:hover { transform: scale(1.08); }
.lgf-eigen input {
  position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px;
  width: calc(100% + 12px); height: calc(100% + 12px); border: none; padding: 0; background: none; cursor: pointer;
}
.lgf-eigen-l { font-size: 12.5px; color: var(--wf-text-soft, #666c73); }

/* Het voorbeeldvlak mag in een tabblad hoger: er staat er nog maar één op het scherm. */
.lgf-paneel .lgf-stage { height: 200px; }
.lgf-paneel .lgf-stage img { max-height: 140px; }

/* -- Tabblad Settings: het logo in de menubalk --
   Bovenaan de echte header van de website: /preview/{klant}?hero=1 in een iframe dat 1280px breed
   rendert (dus de desktopopmaak van de template) en met transform: scale() in de kaart past. Het kader
   snijdt af net onder de menubalk; die hoogte en de schaal zet het script. */
.lgf-header-vb {
  position: relative; overflow: hidden; height: 140px; border-radius: 16px;
  border: 1px solid rgba(1, 16, 61, .08); background: var(--wf-hover-bg, #f1f3f8);
}
.lgf-header-vb iframe {
  position: absolute; top: 0; left: 0; width: 1280px; height: 760px; border: 0;
  transform-origin: 0 0; pointer-events: none; background: #fff;
}
.lgf-header-laden {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; color: var(--wf-text-soft, #666c73); background: var(--wf-hover-bg, #f1f3f8);
}
/* Terugval voor een template die de instelling nog niet leest: het logo los op het raster. */
.lgf-paneel .lgf-maat-stage { height: 290px; }
.lgf-paneel .lgf-maat-stage img { max-height: none; max-width: 92%; object-fit: contain; }
.lgf-maat { display: flex; align-items: center; gap: 6px 14px; margin-top: 14px; flex-wrap: wrap; }
.lgf-maat-l { flex: 0 0 124px; font-size: 13px; font-weight: 600; color: var(--wf-text, #1e293b); margin: 0; }
.lgf-maat-range { flex: 1 1 220px; min-width: 0; accent-color: var(--wf-pink, #da176c); height: 44px; }
.lgf-maat-w {
  flex: none; min-width: 74px; text-align: center; font-weight: 700; font-size: 13px;
  padding: 6px 10px; border-radius: 999px; background: var(--wf-hover-bg, #f1f3f8); color: var(--wf-text, #1e293b);
}
@media (max-width: 575.98px) { .lgf-maat-l { flex-basis: 100%; } }
.lgf-maat-grens { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.lgf-maat-grens i { color: #d98a00; margin-top: 1px; }
.lgf-maat-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.lgf-maat-status { font-size: 12.5px; color: var(--wf-text-soft, #666c73); }

/* -- Kop -- */
.lgf-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 0; }
.lgf-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 12px; font-size: 14px;
}
.lgf-ic.-g { background: rgba(176, 209, 54, .18); color: #4e6711; }
.lgf-ic.-d { background: rgba(1, 16, 61, .06); color: #3b4657; }
.lgf-ic.-b { background: rgba(50, 188, 238, .16); color: #12667f; }
.lgf-t { font-weight: 800; font-size: 16.5px; letter-spacing: -.015em; color: var(--wf-text, #1e293b); }
.lgf-s { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }
.lgf-body { flex: 1; display: flex; flex-direction: column; padding: 14px 20px 0; }

/* -- Voorbeeldvlak -- */
.lgf-stage {
  position: relative; height: 150px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(1, 16, 61, .08); display: flex; align-items: center; justify-content: center;
}
/* Het ruitjespatroon maakt zichtbaar waar het logo transparant is — precies waar het bij een logo om
   draait, en de reden dat de tip eronder over transparantie gaat. */
.lgf-stage.-light {
  background-color: #fbfbfd;
  background-image: linear-gradient(45deg, #eceef4 25%, transparent 25%), linear-gradient(-45deg, #eceef4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceef4 75%), linear-gradient(-45deg, transparent 75%, #eceef4 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.lgf-stage.-dark { background: #111a2e; border-color: rgba(255, 255, 255, .08); }
.lgf-stage img { max-width: 76%; max-height: 96px; object-fit: contain; display: block; }
.lgf-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; color: var(--wf-muted, #94a3b8); }
.lgf-empty i { font-size: 19px; opacity: .7; }
.lgf-stage.-dark .lgf-empty { color: rgba(255, 255, 255, .6); }
.lgf-stage.-dark .lgf-empty i { color: rgba(255, 255, 255, .32); }

/* Glazige bewerkknop bovenop het voorbeeld. */
.lgf-edit { position: absolute; top: 10px; right: 10px; z-index: 2; }
.lgf-edit .wf-btn {
  height: 32px; padding: 0 14px 0 4px; font-size: 12.5px;
  background: rgba(255, 255, 255, .9); color: #000229;
  border: 1px solid rgba(1, 16, 61, .10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(1, 6, 20, .10);
}
.lgf-edit .wf-btn:hover { background: #fff; color: #000229; }
.lgf-edit .wf-btn-chip { width: 24px; height: 24px; font-size: 11px; }

/* -- Ideale-maat-hulplijn (opt-in: WfFotoKaderModel.IdealeBreedte/-Hoogte) -----------------------------
   Het kader neemt zélf de ideale verhouding aan (--wf-gids-ratio = breedte/hoogte) en de gestippelde rand
   markeert dus precies het bannervlak. De foto VULT dat vlak (cover, met uitsnede) — net als op de site,
   waar de banner een cover-achtergrond is: zo zie je hier meteen wat de bezoeker straks ziet, inclusief
   wat er aan de randen wegvalt. Schaalt vanzelf mee op een kleiner scherm, want de verhouding blijft
   gelijk. Hogere specificiteit dan de .wf-fotokader-overrides in module-scherm.css, zodat die de
   hoogte/vulling hier niet terugzetten. */
.wf-fotokader .lgf-stage.-gids,
.lgf-stage.-gids {
  height: auto; min-height: 0; padding: 18px;
  align-items: stretch; justify-content: stretch;
}

/*  De foto, HEEL en in zijn eigen verhouding. Hij past binnen de werkvloer (contain), dus u ziet hem
    zoals hij is — geen uitsnede, geen vervorming. Dat is de reden dat een staande teamfoto hier niet
    meer als een strookje mond in beeld komt. Wat er bij het bijsnijden afvalt, laat het gestippelde vlak
    hieronder zien: dat dimt alles wat erbuiten ligt. */
.lgf-stage.-gids .lgf-heel {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  /* Geen eigen ronding: de werkvloer snijdt zelf al af. Met een ronding erop (die module-scherm.css aan
     elke foto in een kader geeft) bleven er witte hoekjes over. */
  border-radius: 0;
  object-fit: contain; display: block; pointer-events: none;
}
.lgf-stage.-gids .lgf-heel.d-none { display: none; }

/*  Het bannervlak: precies de ideale verhouding, met de foto erin zoals de bezoeker hem krijgt. Dit is
    het enige element in de stroom, dus het bepaalt de hoogte van de werkvloer — de padding hierboven is
    dan vanzelf de marge eromheen. Tegelijk is dit de dropzone. */
/*  Het ideale vlak. Het ligt óver de foto en werpt een enorme lichte schaduw naar buiten; de werkvloer
    snijdt die af. Zo is alles buiten de stippellijn gedimd zonder een tweede kopie van de foto. Het vlak
    bepaalt ook de hoogte van de werkvloer: het is het enige element in de stroom. */
.lgf-gids {
  position: relative; z-index: 1;
  /*  Breed vlak: net zo breed als de kolom. Staand vlak (een teamfoto): dan zou 100% breed een kader van
      meer dan een meter hoog opleveren, dus daar begrenst de hoogte de breedte. Vandaar de rekensom in
      plaats van een vaste 100%. */
  aspect-ratio: var(--wf-gids-ratio, 3.2);
  width: min(100%, calc(var(--wf-gids-maxh, 420px) * var(--wf-gids-ratio, 3.2)));
  margin: 0 auto;
  border: 2px dashed rgba(50, 188, 238, .55); border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, .55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  transition: border-color .22s ease, background-color .22s ease;
}
/* Zolang er geen foto is, is het vlak zelf licht gevuld; met een foto erachter zou dat hem verbergen. */
.lgf-stage.-gids:not(:has(.lgf-heel:not(.d-none))) .lgf-gids { background: rgba(255, 255, 255, .55); }

/*  Een KLEIN kader (een avatar, een omslag, de afbeelding van een pop-up) met een hulplijn erop.

    module-scherm.css geeft `.wf-fotokader.-klein .lgf-stage` een vaste 168px, en dat is precies even
    zwaar als de -gids-regel hierboven. Dat bestand laadt later, dus zonder deze regel wint de vaste
    hoogte en wordt het gestippelde vlak platgedrukt. Vier klassen is zwaarder dan drie, dus hiermee
    staat het vast.

    En een lagere bovengrens: een vierkante hulplijn zou met de standaard 420px een kader van meer
    dan een halve meter opleveren in een venster dat zelf nauwelijks hoger is. */
.wf-fotokader.-klein .lgf-stage.-gids { height: auto; min-height: 0; --wf-gids-maxh: 200px; }

/*  DEKKEND. Heeft de foto ongeveer de vorm van het bannervlak, dan zetten we hem er dekkend in --
    precies wat de bezoeker krijgt, want op de site is de banner ook een achtergrond op cover.

    De foto lag hier altijd HEEL in het vlak, en dat las verkeerd bij een liggende foto: die raakte
    boven en onder de rand en kwam links en rechts tekort, dus zag je ruitjes binnen de stippellijn
    en dacht je dat je foto de banner niet vulde. Wijkt de vorm er ver van af (een staande teamfoto
    in een brede banner), dan blijft hij heel in beeld: dan moet u juist zien dat hij niet past.
    wf-fotokader.js meet de foto en zet is-dekkend; zoek daar op GRENS.

    Als achtergrond en niet als <img>: het vlak heeft de juiste verhouding al, dus cover doet hier
    precies hetzelfde als op de site. De <img> gaat weg, anders lag hij eroverheen.

    De schaduw eromheen dimt normaal het stuk foto dat buiten de banner valt. Dekkend valt er niets
    buiten, dus dan zou hij alleen de ruitjes bleek maken. */
.lgf-stage.-gids.is-dekkend .lgf-heel { display: none; }
.lgf-stage.-gids.is-dekkend .lgf-gids {
  background-image: var(--wf-gids-foto);
  background-size: cover;
  background-position: center;
  box-shadow: none;
}

/*  Slepen. Het kader licht op zodra er een bestand boven hangt; zonder dat weet u niet of u goed mikt. */
.lgf-stage.-gids:hover .lgf-gids { border-color: rgba(50, 188, 238, .9); }
.wf-fotokader.is-sleep .lgf-gids {
  border-color: var(--wf-green, #b0d136); background: rgba(176, 209, 54, .12);
}
/* Terwijl de gesleepte foto geüpload wordt: even niets aanklikken. */
.wf-fotokader.is-bezig { pointer-events: none; cursor: progress; }

/*  Het laagje over het kader terwijl de foto onderweg is: een draaiend ringetje, een regel tekst en een
    balkje dat meeloopt met de upload. Een groot bestand op een trage lijn duurt seconden; zonder dit
    lijkt het alsof er niets gebeurt en sleept iemand hem nog een keer. */
.lgf-bezig {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
  border-radius: inherit;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: wfkaderbezig .18s ease both;
}

@keyframes wfkaderbezig { from { opacity: 0; } to { opacity: 1; } }

.lgf-bezig-ring {
  width: 30px; height: 30px; border-radius: 9999px;
  border: 3px solid rgba(1, 16, 61, .12);
  border-top-color: var(--wf-pink, #da176c);
  animation: wfkaderdraai .8s linear infinite;
}

@keyframes wfkaderdraai { to { transform: rotate(360deg); } }

.lgf-bezig-t { font-weight: 700; font-size: 13px; color: var(--wf-text, #1e293b); }

.lgf-bezig-balk {
  width: min(240px, 70%); height: 6px; border-radius: 9999px; overflow: hidden;
  background: rgba(1, 16, 61, .10);
}

.lgf-bezig-balk > span {
  display: block; width: 0; height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, var(--wf-green, #b0d136), var(--wf-blue, #32bcee));
  transition: width .25s ease;
}

/* In een laag kader (de kleine kaders voor een logo of icoon) past alleen het ringetje. */
@media (max-width: 560px) {
  .lgf-bezig { gap: 8px; }
  .lgf-bezig-ring { width: 24px; height: 24px; border-width: 2px; }
  .lgf-bezig-t { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lgf-bezig-ring { animation-duration: 2.4s; }
  .lgf-bezig { animation: none; }
}

/* De uitnodiging in een leeg bannervlak. */
.lgf-gids .lgf-empty { position: relative; z-index: 1; gap: 9px; text-align: center; }
.lgf-gids .lgf-empty b { font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.lgf-gids .lgf-empty > span:not(.lgf-empty-ic) { font-size: 12.5px; color: var(--wf-text-soft, #666c73); }

/* "of kies er een uit uw mediabeheer" is een echte knop: hij opent de mediabibliotheek. Hij ziet eruit
   als een tekstlink, want naast de grote knoppen eronder is dit de rustige tweede weg. */
.lgf-empty-link {
  padding: 0; border: none; background: none; cursor: pointer;
  font-size: 12.5px; color: var(--wf-text-soft, #666c73);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(1, 16, 61, .28);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.lgf-empty-link:hover { color: var(--wf-title, #a12359); text-decoration-color: currentColor; }
.lgf-empty-link:focus-visible { outline: 2px solid var(--wf-blue, #32bcee); outline-offset: 3px; border-radius: 4px; }
.lgf-empty-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 9999px; background: #fff; box-shadow: 0 4px 14px rgba(1, 16, 61, .10);
  font-size: 17px; color: var(--wf-title, #a12359);
}
.lgf-empty-ic i { opacity: 1; font-size: 17px; }

/* Maatlabel onderin het bannervlak — klein en rustig; het is een hulpmiddel, geen mededeling. */
.lgf-gids-maat {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .88); color: #4a5568;
  font-size: 11px; line-height: 1.5; letter-spacing: .01em;
  border: 1px solid rgba(1, 16, 61, .08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/*  Op een telefoon is het bannervlak nog geen 100px hoog: dan passen de uitnodiging en het maatlabel niet
    samen. Het label valt weg zolang het vlak leeg is — de gestippelde rand vertelt al waar het vlak ligt,
    en de precieze maat leest u op een groter scherm. */
@media (max-width: 560px) {
  .wf-fotokader .lgf-stage.-gids,
  .lgf-stage.-gids { padding: 10px; --wf-gids-maxh: 300px; }
  .lgf-gids:has(.lgf-empty:not(.d-none)) .lgf-gids-maat { display: none; }
  /*  Slepen kan hier niet, dus de uitnodiging daartoe vervalt en het linkje naar de mediabibliotheek
      blijft staan — dat is op een telefoon de enige weg naar een foto. */
  .lgf-gids .lgf-empty b { display: none; }
  .lgf-empty-ic { width: 36px; height: 36px; font-size: 14px; }
  .lgf-empty-ic i { font-size: 14px; }
}
@media (max-width: 575.98px) { .lgf-gids-maat { font-size: 10px; padding: 1px 7px; } }

/* -- Knoppenrij -- */
.lgf-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Een knop die niet bij de rij hoort maar bij de kaart: helemaal rechts ("Maak vrijstaand"). */
.lgf-acts .lgf-rechts { margin-left: auto; }

/* -- Keuzestand na "Maak vrijstaand" --------------------------------------
   Zolang er een voorstel ligt is er maar één ding te doen: kijken en kiezen. De rest van de pagina
   gaat daarom onder een dimlaag, en het logokader plus de twee knoppen komen erbovenop. Er zit geen
   kruisje op en klikken naast de laag doet niets: "Goedgekeurd?" of "Annuleren" is de uitweg. */
.lgf-keurlaag {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(1, 16, 61, .6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.lgf-keurkader { display: flex; flex-direction: column; gap: 16px; width: min(720px, 92vw); }
/* Het kader houdt zijn eigen opmaak (ruitjes, hoogte); alleen de breedte volgt de laag. */
.lgf-keurkader .lgf-stage { width: 100%; margin: 0; }
.lgf-keurkader .lgf-acts { margin-top: 0; justify-content: center; }
.lgf-keurkader .lgf-s { color: #fff; text-align: center; margin: 0; }
/*  In de beoordeellaag mag het logo veel groter: daar wijst de klant witte plekken aan, en op een
    voorbeeld van 96px hoog kun je niet in een lettergaatje mikken. */
.lgf-keurkader .lgf-stage { height: 340px; }
.lgf-keurkader .lgf-stage img { max-width: 92%; max-height: 300px; }

/*  Witte plekken wegklikken. Het kruisje zegt dat er aangewezen mag worden; tijdens het weghalen
    staat de cursor op wachten zodat er geen tweede klik tussendoor gaat. */
.lgf-stage.-prikken { cursor: crosshair; }
.lgf-stage.-prikken.-bezig { cursor: progress; }
.lgf-stage.-prikken.-bezig img { opacity: .55; transition: opacity .15s; }
.lgf-prik {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  font-size: 13px; line-height: 1.45; color: #fff; text-align: left;
}
.lgf-prik i { flex: none; margin-top: 2px; opacity: .75; }
/* Niet meescrollen achter de laag: daar is op dat moment toch niets te doen. */
body.lgf-keuren { overflow: hidden; }

/* -- AI-blok -- */
.lgf-ai {
  margin-top: 16px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(1, 16, 61, .08);
  background: linear-gradient(120deg, rgba(176, 209, 54, .08), rgba(218, 23, 108, .05) 48%, rgba(50, 188, 238, .08));
}
/* Lopende zin met het woordmerk erin: geen flexrij, anders krijgt elk woord de gap-ruimte ertussen. */
.lgf-ai-t { display: block; font-weight: 700; font-size: 13.5px; line-height: 1.5; color: var(--wf-text, #1e293b); }
/* Het woordmerk staat MIDDEN in een lopende zin. Zonder inline-block zet de basisregel het als
   blok neer en breekt de zin in drieën: "Geen lichte versie? Laat" / "Webfix AI" / "helpen". */
.lgf-ai-t .wf-ai-svg { display: inline-block; height: 12.5px; vertical-align: -1px; margin: 0 2px; }
.lgf-ai-s { margin: 5px 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }
.lgf-ai-rij { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.lgf-adv {
  display: inline-flex; align-items: center; gap: 7px; padding: 0; border: none; background: none;
  cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--wf-text-soft, #666c73);
}
.lgf-adv:hover { color: var(--wf-title, #a12359); }
.lgf-prompt { margin-top: 12px; }
.lgf-prompt textarea {
  width: 100%; border-radius: 12px; border: 1px solid rgba(1, 16, 61, .12);
  background: var(--wf-surface, #fff); padding: 10px 12px; font-size: 12.5px; line-height: 1.55;
  color: var(--wf-text, #1e293b); resize: vertical;
}
.lgf-prompt textarea:focus { outline: none; border-color: var(--wf-blue, #32bcee); box-shadow: 0 0 0 3px rgba(50, 188, 238, .15); }

/* -- Merkkleur -- */
.lgf-mk { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wf-border, #e2e8f0); }
.lgf-mk-t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--wf-text, #1e293b); }
.lgf-mk-t i { color: #6f8a1b; font-size: 12px; }
.lgf-mk-s { margin: 5px 0 11px; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }
.lgf-sws { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lgf-sw {
  width: 34px; height: 34px; border-radius: 9999px; border: 1.5px solid rgba(1, 16, 61, .10);
  cursor: pointer; padding: 0; transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}
.lgf-sw:hover { transform: scale(1.08); }
.lgf-sw.is-on { box-shadow: 0 0 0 2px var(--wf-surface, #fff), 0 0 0 4px var(--wf-title, #a12359); }

/* -- Favicon -- */
.lgf-fav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lgf-favbox {
  flex: none; width: 74px; height: 74px; border-radius: 14px; overflow: hidden; position: relative;
  border: 1px solid rgba(1, 16, 61, .08); background-color: #fbfbfd;
  background-image: linear-gradient(45deg, #eceef4 25%, transparent 25%), linear-gradient(-45deg, #eceef4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceef4 75%), linear-gradient(-45deg, transparent 75%, #eceef4 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  display: flex; align-items: center; justify-content: center;
}
.lgf-favbox img { max-width: 70%; max-height: 70%; object-fit: contain; display: block; }
.lgf-favleeg { font-size: 11px; color: var(--wf-muted, #94a3b8); }
.lgf-sizes { display: flex; flex-direction: column; gap: 8px; }
.lgf-size { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.lgf-size .box {
  flex: none; border-radius: 5px; border: 1px solid rgba(1, 16, 61, .12); background: var(--wf-surface, #fff);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lgf-size .box img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* De acties staan rechts op de regel; op smalle schermen valt dat vanzelf terug naar links. */
.lgf-fav .lgf-acts { margin-top: 0; margin-left: auto; }

/* -- Kiezen tussen twee AI-versies --------------------------------------------
   Het beeldmodel levert geen alfakanaal; het TEKENT het ruitjespatroon. Wij knippen die achtergrond
   er zelf af en tonen beide versies naast elkaar. Het vlak eronder is donker, want daar is het
   verschil meteen te zien: een echt vrijstaand logo staat crisp op het donker, de versie met een
   ingebakken achtergrond zit in een lichtgrijs blok. */
.lgf-keuze { margin-top: 14px; }
.lgf-keuze-t { font-weight: 700; font-size: 13px; color: var(--wf-text, #1e293b); }
.lgf-keuze-s { margin: 4px 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }
.lgf-keuze-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lgf-keuze-k {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; text-align: left;
  border: 1px solid rgba(1, 16, 61, .12); border-radius: 14px; background: var(--wf-surface, #fff);
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.lgf-keuze-k:hover { border-color: rgba(1, 16, 61, .24); }
.lgf-keuze-k.is-on { border-color: var(--wf-title, #a12359); box-shadow: 0 0 0 3px rgba(161, 35, 89, .12); }
.lgf-keuze-vlak {
  display: flex; align-items: center; justify-content: center;
  height: 84px; border-radius: 10px; overflow: hidden; background: #111a2e;
}
.lgf-keuze-vlak img { max-width: 78%; max-height: 62px; object-fit: contain; display: block; }
.lgf-keuze-l { font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b); }
.lgf-keuze-l em { display: block; margin-top: 2px; font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--wf-text-soft, #666c73); }

/* -- Favicon: links het icoontje op het raster, rechts de echte formaten -------- */
/* Een favicon is klein; zonder plafond zou hij tot 140px opgeblazen worden en zichtbaar rafelen. */
.lgf-paneel .lgf-favstage img { max-width: 120px; max-height: 120px; }
/* De formaten staan naast elkaar en wrappen; elk vakje toont het icoontje op ware grootte. */
.lgf-fmts { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.lgf-fmt { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.lgf-fmt .box {
  flex: none; border-radius: 6px; border: 1px solid rgba(1, 16, 61, .12); background: var(--wf-surface, #fff);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lgf-fmt .box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lgf-fmt span { font-size: 11.5px; color: var(--wf-text-soft, #666c73); white-space: nowrap; }
.lgf-fmt em { display: block; font-style: normal; font-size: 10.5px; color: var(--wf-muted, #94a3b8); }
/*  Downloadpijltje: subtiel grijs, en pas duidelijk zodra u eroverheen gaat. Staat zowel rechts in de
    kop van een kaart (het bestand zoals het is) als onder elk formaat (die maat, hier ter plekke
    getekend). */
.lgf-dl {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: none; border-radius: 9px; background: transparent; color: var(--wf-muted, #9aa2b1);
  cursor: pointer; font-size: 13px; text-decoration: none; transition: color .2s ease, background .2s ease;
}
.lgf-dl:hover { color: var(--wf-text, #1e293b); background: rgba(1, 16, 61, .05); }
.lgf-dl:focus-visible { outline: 2px solid var(--wf-blue, #32bcee); outline-offset: -2px; }
.lgf-kaart-h .lgf-dl { margin-left: auto; margin-top: -6px; margin-bottom: -6px; }
/*  Het pijltje staat naast het icoontje, verticaal gecentreerd, met 10px ertussen; daarna weer 10px
    tot het volgende formaat (de gap van .lgf-fmts). */
.lgf-fmt-rij { display: flex; align-items: center; gap: 10px; }
.lgf-fmt .lgf-dl.-mini { width: 22px; height: 22px; font-size: 12px; border-radius: 7px; }
/*  De formaten staan bovenaan de kaart, boven het voorbeeldraster: bij een favicon gaat het juist om
    hoe klein hij wordt. */
.lgf-fmtblok { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--wf-border-lt, #edf5fa); }
.lgf-fmt-kop {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--wf-text-soft, #666c73);
}
.lgf-fmt-kop i { font-size: 12px; color: var(--wf-muted, #9aa2b1); }
.lgf-prompt-a { margin-top: 8px; }
:root[data-bs-theme="dark"] .lgf-dl:hover { background: rgba(255, 255, 255, .08); color: #e6eaf0; }
/* Op touch is elk aanraakvlak minstens 44px. */
@media (max-width: 1100px) { .lgf-dl { width: 44px; height: 44px; } .lgf-fmt .lgf-dl.-mini { width: 44px; height: 44px; } }

/* -- Tip onderaan de kaart -- */
.lgf-hint {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 20px 18px; padding: 11px 14px;
  border-radius: 14px; background: #fbfbfd; border: 1px solid rgba(1, 16, 61, .06);
  font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73);
}
.lgf-hint i { flex: none; margin-top: 2px; color: #dc9e2f; font-size: 12px; }
.lgf-hint b { color: var(--wf-text, #1e293b); font-weight: 700; }

/* -- Donkere modus -- */
[data-bs-theme="dark"] .lgf-hint,
[data-bs-theme="dark"] .lgf-prompt textarea,
[data-bs-theme="dark"] .lgf-own input,
[data-bs-theme="dark"] .lgf-size .box { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .lgf-mk { border-top-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .lgf-ai { border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .lgf-edit .wf-btn { background: rgba(26, 29, 39, .88); color: #e7ebf2; border-color: rgba(255, 255, 255, .14); }
[data-bs-theme="dark"] .lgf-edit .wf-btn:hover { background: #1a1d27; color: #fff; }
/* De icoonvakjes lenen hun tekstkleur van een lichte achtergrond; op donker moeten ze mee. */
[data-bs-theme="dark"] .lgf-ic.-g { color: #c3dd76; }
[data-bs-theme="dark"] .lgf-ic.-d { background: rgba(255, 255, 255, .08); color: #c9d2e0; }
[data-bs-theme="dark"] .lgf-ic.-b { color: #7fd6f2; }

/* -- Responsief -- */
@media (max-width: 1100px) {
  /* Onder elkaar zodra de twee kaarten te smal worden: in de rechterkaart staan een AI-knop, een
     tekstvak en een rij kleurbolletjes, en die knijpen als eerste dicht. */
  .lgf-tweekolom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lgf-paneel > .lgf-head { padding: 16px 16px 0; }
  .lgf-paneel > .lgf-body { padding: 12px 16px 0; }
  .lgf-tweekolom, .lgf-eenkolom { padding: 12px 16px 0; }
  .lgf-paneel > .lgf-hint { margin: 14px 16px 16px; }
  .lgf-paneel .lgf-stage { height: 160px; }
  .lgf-fav { gap: 12px; }
  .lgf-fav .lgf-acts { margin-left: 0; }
  /* Uploaden is de hoofdactie en krijgt altijd de volle regel. De twee andere knoppen mogen de regel
     eronder delen, maar alleen als hun tekst er echt naast past: een chipknop krimpt niet onder zijn
     eigen label, dus op een telefoon (~415px) komen ze vanzelf onder elkaar en op een breder toestel
     naast elkaar. Dat is precies de bedoeling -- "Uit mediabibliotheek" afkappen is geen winst. */
  .lgf-acts > * { flex: 1 1 calc(50% - 4px); }
  .lgf-acts > .lgf-hoofd { flex: 1 1 100%; }
  .lgf-acts .wf-btn { width: 100%; justify-content: center; }
  /* Aanraakmaat: 34px is met een vinger te klein om een kleur zeker te raken. Dat geldt ook voor de
     kleine bewerkknoppen en voor "Opdracht aanpassen", dat als tekstregel maar 19px hoog is. */
  .lgf-sw { width: 44px; height: 44px; }
  .lgf-eigen { width: 56px; height: 44px; }
  .lgf-edit .wf-btn { height: 40px; }
  .lgf-fav .wf-btn-xs { height: 44px; }
  .lgf-adv { min-height: 44px; }
  /* De AI-knop is een pil met een vaste hoogte. Op een telefoon krijgt hij de volle regel en blijft
     het label op één regel; anders breekt "Maak lichte versie" middenin de pil af. */
  .lgf-ai .wf-aibtn, .lgf-kaart-ai .wf-aibtn { width: 100%; justify-content: center; }
  .lgf-ai .wf-aibtn-body > span, .lgf-kaart-ai .wf-aibtn-body > span { white-space: nowrap; }
  /* De AI-kop compacter, zodat de tagline naast het woordmerk blijft passen. */
  .lgf-kaart-ai .wf-flows-modalhead-tag { font-size: 12px; }
}

/* ── Uitlegknop (gedeeld) ────────────────────────────────────────────────────
 * De ronde "Uitleg"-knop rechtsboven in een kaartkop, met het roze vraagteken ervoor. Stond eerst
 * alleen op de kleurenpagina (.kl-uitleg); nu gedeeld, zodat elke Layout-pagina dezelfde knop krijgt
 * en er niet per pagina een eigen variant ontstaat. Opent altijd een venster met de CMS-kop. */
.wf-uitleg-knop {
  display: inline-flex; align-items: center; gap: 9px; margin-left: auto; height: 40px; padding: 0 18px 0 7px;
  border-radius: 9999px; border: 1px solid rgba(1, 16, 61, .12); background: var(--wf-surface, #fff);
  cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); white-space: nowrap;
  transition: border-color .22s cubic-bezier(.4, 0, .2, 1), color .22s cubic-bezier(.4, 0, .2, 1);
}
.wf-uitleg-knop:hover { border-color: var(--wf-pink, #da176c); color: var(--wf-title, #a12359); }
.wf-uitleg-knop-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 9999px; background: var(--wf-pink, #da176c); color: #fff; font-size: 11px;
}
[data-bs-theme="dark"] .wf-uitleg-knop { background: #232733; border-color: rgba(255, 255, 255, .12); color: #e7ebf2; }

/* ── /dashboard/layout/fonts (.ft-*) ─────────────────────────────────────────
 * 1:1 uit Claude Design "Webfix Lettertype". Maten, radii en schaduwen komen uit dat ontwerp; de
 * kleuren zijn vertaald naar onze tokens zodat de donkere modus meekomt.
 *
 * De oudere wf-ft-*-opmaak staat nog in het beschermde webfix.css en wordt door deze pagina niet
 * meer gebruikt; die gaat mee in de opruimronde van dat bestand. */
.ft {
  width: 100%; background: var(--wf-surface, #fff);
  border: 1px solid rgba(1, 16, 61, .07); border-radius: 26px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(1, 16, 61, .07);
}

/* -- Kop -- */
.ft-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 20px 24px 0; }
.ft-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 13px; background: rgba(176, 209, 54, .18); color: #4e6711; font-size: 15px;
}
.ft-h1 { margin: 0; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--wf-text, #1e293b); }
.ft-lead { margin: 12px 24px 0; font-size: 14px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }
/* Het woordmerk staat midden in een lopende zin; zonder inline-block breekt de zin eromheen. */
.ft-lead .wf-ai-svg, .ft-ai-t .wf-ai-svg { display: inline-block; height: 12.5px; vertical-align: -1px; margin: 0 2px; }

/* -- AI-strook -- */
.ft-ai {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 24px 0; padding: 14px 16px;
  border-radius: 20px; border: 1px solid rgba(1, 16, 61, .07);
  background: linear-gradient(120deg, rgba(176, 209, 54, .09), rgba(218, 23, 108, .06) 48%, rgba(50, 188, 238, .09));
}
.ft-ai-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 14px; background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); font-size: 15px;
  box-shadow: 0 3px 10px rgba(1, 16, 61, .08);
}
.ft-ai-b { flex: 1; min-width: 200px; }
.ft-ai-t { font-weight: 700; font-size: 14px; line-height: 1.45; color: var(--wf-text, #1e293b); }
.ft-ai-s { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }

/* De drie AI-voorstellen; verschijnen pas na een klik op de knop. */
/*  De drie AI-voorstellen in een eigen kader: dit is het antwoord op wat de klant zojuist vroeg, en
    dat mag opvallen tussen de rest van de pagina. Eén dunne groene rand (dezelfde rol als een
    geslaagde actie), ruime binnenmarge, en 25px lucht boven en onder zodat het los staat. */
.ft-voorstel {
  margin: 25px 24px; padding: 22px 24px; border: 1px solid var(--wf-green, #b0d136); border-radius: 18px;
  background: var(--wf-surface, #fff);
}
.ft-voorstel.d-none { display: none !important; }
.ft-voorstel-k { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ft-voorstel-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 11px; background: rgba(176, 209, 54, .16); color: #4e6711; font-size: 15px;
}
.ft-voorstel-t { display: block; font-weight: 800; font-size: 14.5px; color: var(--wf-black, #000229); }
.ft-voorstel-s { display: block; margin-top: 2px; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.ft-voorstel .ft-chips { margin: 0; }
[data-bs-theme="dark"] .ft-voorstel { background: rgba(255, 255, 255, .04); border-color: rgba(176, 209, 54, .55); }
[data-bs-theme="dark"] .ft-voorstel-ic { background: rgba(176, 209, 54, .18); color: #cbe479; }
[data-bs-theme="dark"] .ft-voorstel-t { color: #e8eaf1; }

.ft-chips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 10px 24px 0; }
.ft-chips-l { font-weight: 700; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.ft-chip {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 7px; border-radius: 9999px;
  border: 1px solid rgba(1, 16, 61, .12); background: var(--wf-surface, #fff); cursor: pointer;
  font-weight: 700; font-size: 13px; color: var(--wf-text, #1e293b);
  transition: border-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
}
.ft-chip:hover { border-color: var(--wf-pink, #da176c); color: var(--wf-title, #a12359); }
.ft-chip .staal {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 9999px; background: #f4f5f9; font-size: 13px; color: var(--wf-text, #1e293b);
}

/* -- Waarschuwing -- staat onder de Voorbeeld-kaart (.ft-col-r), dus geen eigen zijmarge meer nodig:
   die komt al van .ft-cols' eigen padding. */
.ft-warn {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 14px;
  border-radius: 14px; border: 1px solid rgba(220, 158, 47, .28); background: rgba(220, 158, 47, .08);
  font-size: 12.5px; line-height: 1.55; color: #6b4b11;
}
.ft-warn i { flex: none; margin-top: 2px; font-size: 12px; color: #8a6117; }

/* -- Twee kolommen: de lijst links, het voorbeeld rechts -- */
.ft-cols { display: grid; grid-template-columns: 352px 1fr; gap: 16px; padding: 18px 24px 0; align-items: start; }
/* Rechterkolom: de Voorbeeld-kaart + de waarschuwing eronder, als één verticale stapel — zo loopt deze
   kolom als geheel door tot onder de langere Lettertype-lijst hiernaast i.p.v. losjes hoger te eindigen. */
.ft-col-r { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ft-card { border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; overflow: hidden; background: var(--wf-surface, #fff); }
.ft-ch {
  display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--wf-border, #e2e8f0);
  background: #fbfbfd; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wf-text-soft, #666c73);
}
.ft-ch i { font-size: 12px; color: var(--wf-muted, #9aa2b1); }
.ft-ch .rechts { margin-left: auto; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.ft-ch .rechts b { color: var(--wf-title, #a12359); font-weight: 800; }

/* Zoekveld */
.ft-sbox { position: relative; padding: 12px 12px 0; }
.ft-sbox i { position: absolute; top: 26px; left: 28px; font-size: 13px; color: var(--wf-muted, #9aa2b1); pointer-events: none; }
.ft-sbox input {
  width: 100%; height: 42px; padding: 0 16px 0 40px; border-radius: 12px; border: 1px solid rgba(1, 16, 61, .12);
  background: #fbfbfd; font-size: 13.5px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ft-sbox input:focus { outline: none; background: var(--wf-surface, #fff); border-color: var(--wf-blue, #32bcee); box-shadow: 0 0 0 3px rgba(50, 188, 238, .15); }

/* Fontlijst */
.ft-list { max-height: 420px; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ft-row {
  box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 11px;
  border: 1px solid transparent; border-radius: 14px; background: transparent; cursor: pointer; text-align: left;
  transition: background .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}
.ft-row:hover { background: rgba(1, 16, 61, .035); }
.ft-row:focus-visible { outline: none; border-color: var(--wf-pink, #da176c); box-shadow: 0 0 0 3px rgba(218, 23, 108, .16); }
.ft-row.is-on { background: rgba(218, 23, 108, .07); border-color: rgba(218, 23, 108, .18); }
.ft-ag {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 12px; background: #f4f5f9; font-size: 16px; font-weight: 700; color: var(--wf-text, #1e293b);
}
.ft-row.is-on .ft-ag { background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); }
.ft-nm { display: block; flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--wf-text, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-row.is-on .ft-nm { color: var(--wf-title, #a12359); }
.ft-kind { flex: none; font-size: 11.5px; color: var(--wf-text-soft, #666c73); }
.ft-leeg { padding: 14px 11px; font-size: 12.5px; color: var(--wf-muted, #9aa2b1); }

/* -- Voorbeeld -- */
.ft-prev { padding: 18px; }
.ft-eyebrow { font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.ft-pt { margin: 9px 0 0; font-weight: 800; font-size: 29px; line-height: 1.2; letter-spacing: -.02em; color: var(--wf-text, #1e293b); }
/* Ondertitel — iets kleiner en lichter dan de titel, geen aparte alinea. */
.ft-psub { margin: 6px 0 0; font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--wf-text-soft, #666c73); }
/* Introtekst — groter/rustiger dan de normale alinea eronder, zodat het verschil in gewicht tussen
   "lead" en lopende tekst ook in het lettertype-voorbeeld te zien is. */
.ft-pintro { margin: 14px 0 0; font-weight: 500; font-size: 16.5px; line-height: 1.6; color: var(--wf-text, #1e293b); }
.ft-pp { margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: #5F6368; }
.ft-pact { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.ft-pbtn { display: inline-flex; align-items: center; height: 42px; padding: 0 22px; border-radius: 9999px; background: var(--wf-text, #1e293b); font-weight: 700; font-size: 14px; color: #fff; }
.ft-plink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #4e6711; }
.ft-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--wf-border, #e2e8f0); }
.ft-spec-l { font-weight: 700; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.ft-spec-v { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--wf-text, #1e293b); }
.ft-spec-v.-kop { font-weight: 800; }

/* -- Groene "van onze eigen server"-strook -- */
.ft-safe {
  display: flex; align-items: flex-start; gap: 10px; margin: 18px 24px 0; padding: 11px 14px;
  border-radius: 14px; border: 1px solid rgba(111, 138, 27, .26); background: rgba(176, 209, 54, .12);
  font-size: 12.5px; line-height: 1.55; color: #4e6711;
}
.ft-safe i { flex: none; margin-top: 2px; font-size: 12px; color: #5f7a12; }

/* -- Voet -- */
.ft-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 16px 24px 20px;
  border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd;
}
.ft-foot-n { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.ft-foot-n i { color: var(--wf-muted, #9aa2b1); }
.ft-foot-a { display: flex; align-items: center; gap: 9px; }

/* -- Donkere modus -- */
[data-bs-theme="dark"] .ft,
[data-bs-theme="dark"] .ft-card,
[data-bs-theme="dark"] .ft-ai-ic,
[data-bs-theme="dark"] .ft-chip { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .ft-ch,
[data-bs-theme="dark"] .ft-foot { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .ft-sbox input { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #e7ebf2; }
[data-bs-theme="dark"] .ft-sbox input:focus { background: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .ft-row:hover { background: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .ft-row.is-on { background: rgba(218, 23, 108, .16); }
[data-bs-theme="dark"] .ft-ag { background: rgba(255, 255, 255, .07); color: #e7ebf2; }
[data-bs-theme="dark"] .ft-row.is-on .ft-ag { background: #232733; }
[data-bs-theme="dark"] .ft-chip .staal { background: rgba(255, 255, 255, .07); color: #e7ebf2; }
[data-bs-theme="dark"] .ft-pp { color: #a7aeba; }
[data-bs-theme="dark"] .ft-pbtn { background: #e7ebf2; color: #12141f; }
[data-bs-theme="dark"] .ft-warn { color: #e6c58a; }
[data-bs-theme="dark"] .ft-safe { color: #c3dd76; }
/* De donkergroene tekstkleuren uit het ontwerp zijn op een donkere kaart niet te lezen. */
[data-bs-theme="dark"] .ft-ic,
[data-bs-theme="dark"] .ft-plink { color: #c3dd76; }

/* -- Responsief: de breekpunten uit het ontwerp -- */
@media (max-width: 960px) {
  .ft-cols { grid-template-columns: 1fr; }
  .ft-list { max-height: 300px; }
  /*  Hier staat het voorbeeld ónder de lijst en scrollen we er na een keuze naartoe (zie Fonts.cshtml).
      Een beetje lucht boven de kaart, anders plakt hij tegen de bovenrand van het scherm. */
  .ft-col-r .ft-card { scroll-margin-top: 14px; }
}
@media (max-width: 640px) {
  .ft-head, .ft-cols, .ft-foot { padding-left: 16px; padding-right: 16px; }
  .ft-lead, .ft-ai, .ft-safe, .ft-chips { margin-left: 16px; margin-right: 16px; }
  .ft-voorstel { margin-left: 16px; margin-right: 16px; padding: 18px 16px; }
  /* Op touch is elk aanraakvlak minstens 44px; de voorstel-chips horen daarbij. */
  .ft-chip { height: 44px; }
  .ft-voorstel .ft-chips { margin-left: 0; margin-right: 0; }
  .ft-pt { font-size: 24px; }
  /* De AI-knop is een pil met vaste hoogte; op een telefoon krijgt hij de volle regel en blijft het
     label op één regel staan. */
  .ft-ai .wf-aibtn { width: 100%; justify-content: center; }
  .ft-ai .wf-aibtn-body > span { white-space: nowrap; }
  /* Opslaan is de hoofdactie: volle breedte, met Annuleren eronder. */
  .ft-foot-a { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .ft-foot-a > * { flex: 1 1 100%; }
  .ft-foot-a .wf-btn { width: 100%; justify-content: center; }
  /* Aanraakmaat. */
  .ft-sbox input { height: 44px; }
  .ft-sbox i { top: 27px; }
  .wf-uitleg-knop { margin-left: 0; }
}

/* ── /dashboard/layout/menu (.mn-*) ──────────────────────────────────────────
 * 1:1 uit Claude Design "Webfix Menu Instellingen". Maten, radii en schaduwen komen uit dat ontwerp;
 * de kleuren zijn vertaald naar onze tokens zodat de donkere modus meekomt.
 *
 * Eén kaart met drie tabbladen (items & volgorde | actieknoppen | stijl & gedrag). Elk tabblad heeft
 * links de instellingen en rechts een voorbeeldbalk. */
.mn {
  width: 100%; background: var(--wf-surface, #fff);
  border: 1px solid rgba(1, 16, 61, .07); border-radius: 26px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(1, 16, 61, .07);
}

/* -- Kop -- */
.mn-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 20px 24px 0; }
.mn-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 13px; background: rgba(218, 23, 108, .10); color: var(--wf-title, #a12359); font-size: 15px;
}
.mn-h1 { margin: 0; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--wf-text, #1e293b); }
.mn-lead { margin: 12px 24px 0; max-width: 760px; font-size: 14px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }

/* -- Tabbalk -- */
.mn-tabs {
  display: flex; gap: 12px; margin-top: 16px; padding: 11px 24px;
  border-top: 1px solid var(--wf-border, #e2e8f0); border-bottom: 1px solid var(--wf-border, #e2e8f0);
  background: linear-gradient(180deg, rgba(249, 251, 253, .92), rgba(243, 246, 251, .86)); overflow-x: auto;
}
.mn-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid rgba(1, 16, 61, .08);
  border-radius: 11px; background: transparent; cursor: pointer; font-weight: 600; font-size: 14.5px;
  color: #5b6b7d; white-space: nowrap;
  transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}
.mn-tab:hover { background: rgba(1, 16, 61, .05); color: #0e1c2e; }
.mn-tab.is-on {
  border-color: transparent; color: #fff; font-weight: 700;
  background: linear-gradient(90deg, #b0d136, #da176c, #32bcee); background-size: 200% 100%;
  animation: wf-ai-drift 9s ease-in-out infinite;
}
.mn-tab.is-on i { color: #fff; }
.mn-tab i { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .mn-tab.is-on { animation: none; } }

/* -- Panelen -- */
.mn-body { padding: 22px 24px 24px; }
.mn-panel { display: none; }
.mn-panel.is-on { display: block; }
/*  De rechterkolom is 392px: dan is de telefoon in de preview even breed als op de andere
    layoutschermen (Voettekst, Contactpagina), waar hij ~318px haalt. Op 330px bleef hij op 256px
    steken en leek het toestel daar kleiner dan elders (Tom, 21-09-2026). */
.mn-cols { display: grid; grid-template-columns: 1fr 392px; gap: 18px; align-items: start; }
.mn-stapel { display: flex; flex-direction: column; gap: 18px; }
/*  De preview (het gedeelde venster) blijft in beeld terwijl u door de menulijst scrolt. In de
    tabletstand mag hij de hele kaart vullen en wijkt de lijst ernaast even -- net als op de
    footerpagina. Die grens ligt op 1021px: daaronder staat de kolom al ONDER de lijst, en dan zou het
    verbergen van die lijst de pagina leeghalen. */
.mn-prev { position: sticky; top: 22px; }
@media (min-width: 1021px) {
  .mn-cols.-vbtablet { grid-template-columns: minmax(0, 1fr); }
  .mn-cols.-vbtablet > :first-child { display: none; }
  .mn-cols.-vbtablet .mn-prev { position: static; }
}
/* De drie stijlkaarten naast elkaar zolang er ruimte is, anders onder elkaar. */
.mn-drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }

.mn-card { border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; overflow: hidden; background: var(--wf-surface, #fff); }
.mn-ch { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; }
.mn-ch i { font-size: 13px; color: var(--wf-title, #a12359); }
.mn-ct { font-weight: 700; font-size: 14.5px; color: var(--wf-text, #1e293b); }
.mn-ch .n { margin-left: auto; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.mn-cb { padding: 16px 18px 18px; }
.mn-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }

/* -- Taalkeuze -- */
/*  De taalknoppen met de WAI-vertaalknop ernaast: links kiezen welke taal je invult, rechts in één
    klik de rest laten vertalen. Onder de 700px zakt de knop onder de taalrij, want dan knijpen ze
    elkaar plat (Tom, 05-09-2026). */
.mn-langrij-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mn-langrij-kop .mn-langs { flex: 1 1 auto; min-width: 0; }
.mn-vertaalknop { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 700px) {
  .mn-vertaalknop { margin-left: 0; width: 100%; justify-content: center; }
}
/* Aanraakmaat t/m iPad liggend. */
@media (max-width: 1024.98px) { .mn-vertaalknop { min-height: 44px; } }
.mn-langs { display: flex; gap: 7px; flex-wrap: wrap; }
.mn-lang {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: 9999px;
  border: 1px solid rgba(1, 16, 61, .12); background: var(--wf-surface, #fff); cursor: pointer;
  font-weight: 600; font-size: 13.5px; color: #5b6b7d;
  transition: border-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), background .2s cubic-bezier(.4, 0, .2, 1);
}
.mn-lang:hover { border-color: rgba(1, 16, 61, .2); color: var(--wf-text, #1e293b); }
.mn-lang.is-on { border-color: var(--wf-pink, #da176c); background: rgba(218, 23, 108, .07); color: var(--wf-title, #a12359); font-weight: 700; }

/* -- Menu-items -- */
.mn-items { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.mn-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid var(--wf-border, #e2e8f0);
  border-radius: 14px; background: var(--wf-surface, #fff);
  transition: border-color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}
.mn-item:hover { border-color: rgba(1, 16, 61, .16); box-shadow: 0 4px 12px rgba(1, 6, 20, .06); }
.mn-grip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px;
  border: none; border-radius: 9px; background: transparent; cursor: grab; font-size: 13px; color: var(--wf-muted, #9aa2b1);
  transition: background .2s, color .2s;
}
.mn-grip:hover { background: rgba(1, 16, 61, .05); color: var(--wf-title, #a12359); }
.mn-tin {
  flex: 1; min-width: 0; box-sizing: border-box; height: 38px; padding: 0 13px; border-radius: 10px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 14px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.mn-tin:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.mn-kind { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 9999px; font-weight: 700; font-size: 11px; letter-spacing: .03em; }
.mn-kind.-mod { background: rgba(50, 188, 238, .16); color: #12667f; }
.mn-kind.-pag { background: rgba(176, 209, 54, .18); color: #4e6711; }
/*  Home en Contact zijn vaste onderdelen en dragen geen soort-label. Het vakje blijft wél staan (leeg en
    onzichtbaar), zodat de labels van de andere rijen onder elkaar blijven staan (Tom, 20-09-2026). */
.mn-kind.-leeg { background: none; min-width: 64px; }
/* "Plaats in het menu" bij een module: zelfde veld als de titel, maar vast smal naast de titel.
   Een module die onder een ander menu-item hangt springt in, zodat de lijst de menustructuur toont. */
.mn-parent { flex: none; width: 190px; padding-right: 30px; cursor: pointer; }
.mn-item.is-kind { margin-left: 32px; border-style: dashed; }
@media (max-width: 575.98px) {
  .mn-item { flex-wrap: wrap; }
  .mn-parent { flex: 1 1 100%; width: auto; order: 3; }
  .mn-item.is-kind { margin-left: 16px; }
}
.mn-auto { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: #4e6711; }
.mn-auto i { color: #5f7a12; font-size: 12px; }
/* Een pagina die in de getoonde taal niet op de site komt: rij gedimd, met de reden eronder. */
.mn-item.is-weg { opacity: .55; }
/*  "In het menu" per regel: uit = het item staat wél op de website (voorpagina, footer, directe link,
    Google) maar niet in het menu. De rij dimt mee zodat je in één oogopslag ziet wat er straks in het
    menu staat en wat niet (Jenny, 21-09-2026). Home en Contact krijgen dit schuifje niet. */
.mn-toon { flex: none; margin: 0; }
.mn-toon .wf-switch-l { font-size: 11.5px; color: var(--wf-text-soft, #666c73); white-space: nowrap; }
.mn-item.-uitmenu { opacity: .62; border-style: dashed; }
.mn-item.-uitmenu:hover { opacity: 1; }
.mn-mis { flex: 1 1 100%; order: 4; margin: 2px 0 0 39px; font-size: 11.5px; line-height: 1.45; color: #8a6117; }
.mn-mis i { margin-right: 5px; }
/* Een hernoemde module: onze naam klein achter het naamveld, en het webadres dat de naam volgt eronder.
   De rij mag dan op twee regels; het adres lijnt uit met het naamveld (greepje + tussenruimte). */
.mn-orig { flex: none; font-size: 12px; color: var(--wf-muted, #9aa2b1); white-space: nowrap; }
/*  De naam is het belangrijkste veld van de rij en mag niet wegvallen achter de keuzelijst ernaast.
    Allebei droegen ze .mn-tin met flex:1, maar een <select> houdt zijn inhoud ("Onder Over ons")
    als minimum vast terwijl een <input> met min-width:0 helemaal dichtklapt. Bij Stichting Urban
    Skillsz was het naamveld daardoor 72px terwijl de keuzelijst er 220 pakte: je las nog net "Vacat"
    (Tom, 08-10-2026). Nu heeft de naam een ondergrens en de keuzelijst een plafond, en wipt de
    keuzelijst naar de volgende regel zodra het niet meer naast elkaar past. */
.mn-item { flex-wrap: wrap; }
.mn-item > .wf-menu-label { flex: 1 1 260px; min-width: 190px; }
.mn-parent { flex: 0 1 220px; min-width: 160px; }

.mn-adres {
  flex: 1 1 100%; order: 5; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
  margin: 6px 0 0 39px; padding: 4px 10px; border-radius: 7px; background: rgba(1, 16, 61, .04);
  font-size: 11.5px; line-height: 1.45; color: var(--wf-text-soft, #666c73);
}
.mn-adres i { font-size: 12px; }
.mn-adres em { flex-basis: 100%; font-style: normal; color: #8a6117; }
.mn-volg { margin-top: 12px; }
/*  De boom (Tom 04-10-2026). Elke hoofdregel is een groep met zijn kinderen eronder in een bakje: ingesprongen,
    met een dunne verticale lijn vanaf de ouder en een kort streepje naar elk kind. Eerst de subpagina's, dan de
    modules die de klant onder dit item zette. Een leeg bakje neemt geen ruimte in. */
.mn-groep { display: flex; flex-direction: column; gap: 7px; }
.mn-kinderen { position: relative; display: flex; flex-direction: column; gap: 7px; margin-left: 22px; padding-left: 18px; }
.mn-kinderen::before { content: ""; position: absolute; left: 0; top: -7px; bottom: 24px; border-left: 1px solid rgba(1, 16, 61, .16); }
.mn-kinderen:not(:has(.wf-menu-row)) { display: none; }
.mn-bak { display: flex; flex-direction: column; gap: 7px; }
.mn-bak:empty { display: none; }
.mn-bak > .mn-item, .mn-bak > .mn-groep > .mn-item { position: relative; }
.mn-bak > .mn-item::before, .mn-bak > .mn-groep > .mn-item::before {
  content: ""; position: absolute; left: -19px; top: 50%; width: 14px; border-top: 1px solid rgba(1, 16, 61, .16);
}
.mn-bak > .mn-groep > .mn-item:has(.mn-zelf:not(.d-none))::before { top: 27px; }
.mn-bak .mn-item.is-kind { margin-left: 0; }
.mn-kind.-sub { background: rgba(176, 209, 54, .10); color: #5b7417; box-shadow: inset 0 0 0 1px rgba(176, 209, 54, .35); }
.mn-subnaam { display: flex; align-items: center; border-color: transparent; background: transparent; font-weight: 600; cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-subopen {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
  color: var(--wf-muted, #9aa2b1); font-size: 13px; transition: background .2s, color .2s;
}
.mn-subopen:hover { background: rgba(1, 16, 61, .05); color: var(--wf-title, #a12359); }
/*  "Bovenaan het uitklapmenu": een tweede regel in de rij van een hoofdpagina met kinderen, onder het naamveld. */
.mn-item:has(.mn-zelf:not(.d-none)) { flex-wrap: wrap; }
.mn-zelf { flex: 1 1 100%; order: 6; display: flex; align-items: center; gap: 10px; margin: 2px 0 0 39px; }
.mn-zelf-l { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.mn-zelf-l i { color: var(--wf-muted, #9aa2b1); }
.mn-zelfin { flex: 1; height: 34px; max-width: 360px; }
/*  Een modulerij met "Plaats in het menu": de keuzelijst op een tweede regel, met het webadres ernaast. Op één regel
    hield het naamveld naast keuzelijst, schuifje en label maar een paar letters over ("V" voor Vacatures), en in de
    ingesprongen boom nog minder. */
.mn-item:has(.mn-parent) { flex-wrap: wrap; row-gap: 6px; }
.mn-item .mn-parent { order: 4; width: 220px; height: 34px; margin-left: 39px; }
.mn-item:has(.mn-parent) .mn-adres { flex: 1 1 180px; align-self: center; margin-left: 4px; }
[data-bs-theme="dark"] .mn-kinderen::before,
[data-bs-theme="dark"] .mn-bak > .mn-item::before,
[data-bs-theme="dark"] .mn-bak > .mn-groep > .mn-item::before { border-color: rgba(255, 255, 255, .16); }
@media (max-width: 575.98px) {
  .mn-kinderen { margin-left: 10px; padding-left: 12px; }
  .mn-bak > .mn-item::before, .mn-bak > .mn-groep > .mn-item::before { left: -13px; width: 9px; }
  .mn-zelf { flex-wrap: wrap; margin-left: 0; gap: 6px; }
  .mn-zelfin { flex: 1 1 100%; max-width: none; }
  .mn-item .mn-parent { flex: 1 1 100%; width: auto; height: 44px; margin-left: 0; }
  .mn-item:has(.mn-parent) .mn-adres { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 575.98px) {
  .mn-orig { order: 2; }
  .mn-adres { margin-left: 0; }
}

/* -- Keuzekaartjes -- */
.mn-opts { display: flex; flex-direction: column; gap: 8px; }
.mn-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid rgba(1, 16, 61, .10); border-radius: 15px; background: var(--wf-surface, #fff); cursor: pointer;
  text-align: left; transition: border-color .2s cubic-bezier(.4, 0, .2, 1), background .2s cubic-bezier(.4, 0, .2, 1);
}
.mn-opt:hover { border-color: rgba(218, 23, 108, .3); }
.mn-opt.is-on { border-color: var(--wf-pink, #da176c); background: rgba(218, 23, 108, .07); }
.mn-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(218, 23, 108, .18); }
.mn-opt-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 10px; background: #f4f5f9; color: var(--wf-text-soft, #666c73); font-size: 13px;
}
.mn-opt.is-on .mn-opt-ic { background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); }
.mn-opt-t { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--wf-text, #1e293b); }
.mn-opt.is-on .mn-opt-t { color: var(--wf-title, #a12359); }
.mn-opt-s { display: block; margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }

/* -- Velden in de knopkaarten -- */
.mn-lbl { display: block; margin: 16px 0 7px; font-weight: 700; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.mn-lbl:first-child { margin-top: 0; }
.mn-lbl .opt { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--wf-text-soft, #666c73); }
.mn-in {
  display: block; box-sizing: border-box; width: 100%; height: 42px; padding: 0 15px; border-radius: 11px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 14px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.mn-in::placeholder { color: var(--wf-muted, #9aa2b1); }
.mn-in:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.mn-hint { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }

/* -- Schakelaar -- */
/* Schakelaar in de vormtaal van de ontwerpen (spoor + knop, roze in de aan-stand). Gedeeld: begon op
   de menupagina als .mn-sw, staat nu ook op de footerpagina. Markup:
     <label class="wf-switch"><input type="checkbox" name="…" value="true">
       <span class="wf-switch-track"><span class="wf-switch-knob"></span></span>
       <span class="wf-switch-l">Label</span></label>   (het label is optioneel) */
.wf-switch { position: relative; display: inline-flex; align-items: center; gap: 11px; cursor: pointer; }
/* Het echte vinkje ligt onzichtbaar OVER de hele schakelaar in plaats van als 0x0-veld ergens in een
   hoek. Zo is het hele blokje (spoor + label) het klikvlak, blijft toetsenbordbediening gewoon
   werken, en kan een test er ook echt op klikken — bij een veld van 0x0 lukt dat geen van drieën. */
.wf-switch input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* Het spoor en de knop staan ná het vinkje in de DOM en zouden anders de klik opvangen. */
.wf-switch-track { z-index: 1; }
/*  Een schakelaar die (nog) niet om mag, hoort daar ook uit te zien. Stond hij er gewoon bij, dan klikte
    je erop, gebeurde er niets, en was de enige uitleg een tooltip die je moet zien te vinden. */
.wf-switch:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.wf-switch:has(input:disabled) input { cursor: not-allowed; }
.wf-switch-track { flex: none; position: relative; width: 44px; height: 25px; border-radius: 9999px; background: #dfe2ea; transition: background .25s cubic-bezier(.4, 0, .2, 1); }
.wf-switch-knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(1, 16, 61, .2); transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.wf-switch input:checked ~ .wf-switch-track { background: var(--wf-pink, #da176c); }
.wf-switch input:checked ~ .wf-switch-track .wf-switch-knob { transform: translateX(19px); }
.wf-switch input:focus-visible ~ .wf-switch-track { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }
.wf-switch-l { font-weight: 700; font-size: 14px; color: var(--wf-text, #1e293b); }
/* Kleiner formaat, voor een schakelaar die bij één regel in een lijst hoort in plaats van bij een
   heel blok. Zelfde vorm, alleen compacter. */
.wf-switch-sm { gap: 9px; }
.wf-switch-sm .wf-switch-track { width: 36px; height: 20px; }
.wf-switch-sm .wf-switch-knob { top: 2px; left: 2px; width: 16px; height: 16px; }
.wf-switch-sm input:checked ~ .wf-switch-track .wf-switch-knob { transform: translateX(16px); }
.wf-switch-sm .wf-switch-l { font-size: 12.5px; }
/* De "Activeren"-pil uit de ontwerpen: de schakelaar zit in een eigen pilletje dat groen kleurt zodra
   het blok aanstaat. Groen en niet roze, want dit zegt "dit staat op uw website" en niet "let op". */
.wf-switch.-pil { flex: none; padding: 6px 13px 6px 10px; border-radius: 9999px; background: #f2f4f8; transition: background .25s cubic-bezier(.4, 0, .2, 1); }
.wf-switch.-pil:has(input:checked) { background: rgba(176, 209, 54, .2); }
.wf-switch.-pil input:checked ~ .wf-switch-track { background: #6f8a1b; }
.wf-switch.-pil .wf-switch-l { font-weight: 600; font-size: 12.5px; color: var(--wf-text-soft, #666c73); white-space: nowrap; }
.wf-switch.-pil:has(input:checked) .wf-switch-l { color: #4e6711; font-weight: 700; }
[data-bs-theme="dark"] .wf-switch.-pil { background: rgba(255, 255, 255, .06); }

/* -- Voorbeeldbalk -- */
/* Twee knopkaarten naast elkaar zolang er ruimte is (tabblad Actieknoppen). Onder de 900px komen
   ze onder elkaar; twee smalle kolommen met een invoerveld erin leest niemand prettig. */
.mn-tweekolom { display: grid; gap: 18px; align-items: start; }
/* Bewust een vaste grens en geen auto-fit: met auto-fit pasten er op tabletportret nét twee kolommen
   van 395px naast elkaar, en dan staat er een invoerveld met een vlag ervoor in een te smalle koker. */
@media (min-width: 1100px) { .mn-tweekolom { grid-template-columns: 1fr 1fr; } }

/* -- Taalrijen (in plaats van taal-tabbladen) -------------------------------
   Voor één regel knoptekst waren tabbladen te veel: drie keer klikken om drie woorden te vullen, en
   je zag nooit in één oogopslag welke taal nog leeg was. Nu staat elke taal op een eigen regel met
   zijn vlag ervoor. */
.mn-langset { display: flex; flex-direction: column; gap: 9px; }
.mn-langrij { display: flex; align-items: center; gap: 10px; }
.mn-langvlag {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 42px;
}
.mn-langvlag img, .mn-langvlag svg { display: block; }
.mn-langrij .mn-in { flex: 1 1 auto; min-width: 0; }

/* Scheidingslijn boven een losse actie onderaan een kaart (de vertaalknop). Ruim aan beide kanten:
   de knop moet duidelijk bij de hele taalgroep horen en niet bij het laatste veld. */
.mn-scheiding { height: 1px; margin: 22px 0; background: linear-gradient(90deg, rgba(1, 16, 61, .13), rgba(1, 16, 61, .04) 65%, transparent); }

.mn-prev { padding: 16px 18px 18px; }
.mn-bar {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(1, 16, 61, .08); background: var(--wf-surface, #fff); box-shadow: 0 4px 14px rgba(1, 6, 20, .05);
}
.mn-bar-logo { flex: none; margin-right: auto; font-weight: 800; font-size: 13.5px; color: var(--wf-title, #a12359); }
.mn-bar-nav { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mn-bar-nav:empty { display: none; }
.mn-bar-nav span { font-weight: 600; font-size: 12.5px; color: #5b6b7d; white-space: nowrap; }
.mn-bar-a, .mn-bar-b {
  flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
  border-radius: 9999px; font-weight: 700; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-bar-a { border: 1px solid var(--wf-title, #a12359); color: var(--wf-title, #a12359); }
.mn-bar-b { background: var(--wf-title, #a12359); color: #fff; }
.mn-bar-h { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; border-radius: 9px; border: 1px solid rgba(1, 16, 61, .12); color: #5b6b7d; font-size: 13px; }

/* -- Uitlegregels -- */

/* -- Voet -- */
.mn-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 24px 20px;
  border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd;
}
.mn-foot-a { display: flex; align-items: center; gap: 9px; }
/*  Annuleren staat op deze pagina aan de andere kant van de balk, weg van de opslagknop (Tom,
    12-09-2026). Gestapeld op een telefoon vervalt dat vanzelf: de groep is daar schermbreed. */
.mn-foot-r { margin-left: auto; }

/* -- Donkere modus -- */
[data-bs-theme="dark"] .mn,
[data-bs-theme="dark"] .mn-scheiding { background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 65%, transparent); }
[data-bs-theme="dark"] .mn-card,
[data-bs-theme="dark"] .mn-item,
[data-bs-theme="dark"] .mn-lang,
[data-bs-theme="dark"] .mn-opt { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
/* De voorbeeldbalk blijft ook in donkere modus LICHT: hij laat zien wat de bezoeker op de website
   krijgt, en die is licht. Zelfde afweging als het ruitjesvlak op de logopagina. */
[data-bs-theme="dark"] .mn-bar { background: #fff; border-color: rgba(1, 16, 61, .10); }
[data-bs-theme="dark"] .mn-ch,
[data-bs-theme="dark"] .mn-foot { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .mn-tabs { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .mn-tab { color: #a7aeba; border-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .mn-tab:hover { background: rgba(255, 255, 255, .06); color: #e7ebf2; }
[data-bs-theme="dark"] .mn-tin,
[data-bs-theme="dark"] .mn-in { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #e7ebf2; }
[data-bs-theme="dark"] .mn-tin:focus,
[data-bs-theme="dark"] .mn-in:focus { background: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .mn-lang.is-on,
[data-bs-theme="dark"] .mn-opt.is-on { background: rgba(218, 23, 108, .16); border-color: var(--wf-pink, #da176c); }
[data-bs-theme="dark"] .mn-opt-ic { background: rgba(255, 255, 255, .07); color: #c9d2e0; }
[data-bs-theme="dark"] .mn-opt.is-on .mn-opt-ic { background: #232733; }
[data-bs-theme="dark"] .wf-switch-track { background: rgba(255, 255, 255, .16); }
[data-bs-theme="dark"] .mn-auto { color: #c3dd76; }
[data-bs-theme="dark"] .mn-mis { color: #e6c58a; }

/* -- Responsief: de breekpunten uit het ontwerp -- */
@media (max-width: 1020px) {
  .mn-cols { grid-template-columns: 1fr; }
  /* Gestapeld heeft plakken geen zin: de preview staat dan onder de lijst. */
  .mn-prev { position: static; }
}
@media (max-width: 640px) {
  .mn-head, .mn-tabs, .mn-body, .mn-foot { padding-left: 16px; padding-right: 16px; }
  .mn-lead { margin-left: 16px; margin-right: 16px; }
  /* Het titelveld krijgt de volle regel onder greepje, soort en taal; anders houdt het maar een
     centimeter of drie over en is er niets meer te lezen van wat je typt. */
  .mn-item { flex-wrap: wrap; }
  .mn-tin { flex: 1 1 100%; order: 3; }
  .mn-mis { margin-left: 0; }
  .mn-foot-a { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .mn-foot-a > * { flex: 1 1 100%; }
  .mn-foot-a .wf-btn { width: 100%; justify-content: center; }
  /* De tabbalk mag hier WRAPPEN in plaats van zijwaarts scrollen: met drie tabbladen op een
     telefoon valt de derde anders buiten beeld, en een tabblad dat je niet ziet bestaat niet. */
  .mn-tabs { flex-wrap: wrap; overflow-x: visible; gap: 8px; }
  /* Aanraakmaat. */
  .mn-tin, .mn-lang { height: 44px; }
  .mn-grip { height: 44px; width: 44px; }
  .wf-uitleg-knop { margin-left: 0; }
}

/* ── /dashboard/Integraties op de gedeelde beheerder (.wf-mgr-* + .wf-int-*) ──
 * Zelfde vorm als /dashboard/marketing/social: links de rail met koppelingen, rechts het paneel van
 * de gekozen koppeling. Alleen wat hier écht anders is dan bij social staat hieronder. */

/* Een tekstvak mag niet de vaste veldhoogte van 44px krijgen — daar past geen code in. */
.wf-mgr-field textarea.form-control { height: auto; min-height: 96px; padding: 12px 15px; line-height: 1.5; }
.wf-mgr-field textarea.font-monospace { font-size: 12.5px; }
/* Een keuzelijst volgt wél de veldhoogte, met ruimte voor het pijltje. */
.wf-mgr-field .form-select {
  height: 44px; padding: 0 38px 0 15px; border-radius: 12px; border: 1px solid rgba(1, 16, 61, .12);
  background-color: #fff; font-size: 14px; color: var(--wf-text, #16233a);
}
.wf-mgr-field .form-select:focus { border-color: var(--wf-blue, #32bcee); box-shadow: 0 0 0 3px rgba(50, 188, 238, .16); }
.wf-mgr-field .form-text { margin-top: 6px; font-size: 12px; line-height: 1.5; color: #666c73; }

/* ── Brede "Activeren"-kaart bovenaan een paneel ──────────────────────────────
 * Eén duidelijke plek per item met de vraag "staat dit aan op mijn website?", boven de twee
 * kaarten met de details. Hij loopt over beide kolommen.
 *
 * .wf-mgr-vorm krijgt display:contents zodat een formulier dat de kaart én een blok omvat geen
 * eigen roostervakje wordt — anders zouden die twee samen in één kolom belanden. */
.wf-mgr-vorm { display: contents; }
.wf-mgr-aan {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 15px 18px; border: 1px solid rgba(1, 16, 61, .09); border-radius: 18px;
  background: #fbfbfd; transition: border-color .22s cubic-bezier(.4, 0, .2, 1), background .22s cubic-bezier(.4, 0, .2, 1);
}
.wf-mgr-aan.is-aan { border-color: rgba(176, 209, 54, .45); background: rgba(176, 209, 54, .10); }
.wf-mgr-aan.is-slot { opacity: .72; }
.wf-mgr-aan-t { flex: 1; min-width: 200px; }
.wf-mgr-aan-h { display: block; font-weight: 700; font-size: 15px; color: var(--wf-text, #16233a); }
.wf-mgr-aan-s { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }
.wf-mgr-aan .wf-mgr-opt { flex: none; margin: 0; padding: 6px 0; }
.wf-mgr-aan .wf-mgr-opt:hover { background: transparent; }
.wf-mgr-aan .form-check-label { font-weight: 700; }
/* Op slot: de schakelaar blijft zichtbaar, maar je ziet dat er eerst iets anders moet gebeuren. */
.wf-mgr-aan .form-check-input:disabled { opacity: .5; cursor: not-allowed; }
.wf-mgr-aan .form-check-input:disabled ~ .form-check-label { color: var(--wf-muted, #9aa2b1); cursor: not-allowed; }

[data-bs-theme="dark"] .wf-mgr-aan { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .wf-mgr-aan.is-aan { background: rgba(176, 209, 54, .12); border-color: rgba(176, 209, 54, .32); }

@media (max-width: 640px) {
  /* Op een telefoon onder elkaar: tekst boven, schakelaar eronder over de volle regel. */
  .wf-mgr-aan { align-items: flex-start; gap: 10px; }
  .wf-mgr-aan-t { flex: 1 1 100%; min-width: 0; }
  .wf-mgr-aan .wf-mgr-opt { min-height: 44px; }
}

/* Chip met de cookiecategorie onder het ID-veld. */
.wf-mgr-chip {
  display: inline-flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 9px 13px;
  border-radius: 12px; background: #f4f5f9; font-size: 12.5px; line-height: 1.5; color: #666c73;
}
.wf-mgr-chip i { flex: none; margin-top: 2px; font-size: 12px; color: #9aa2b1; }
.wf-mgr-chip.-let { background: rgba(220, 158, 47, .12); color: #6b4b11; }
.wf-mgr-chip.-let i { color: #8a6117; }

/* "Geavanceerd: plak de volledige code" — dicht tenzij de klant hem opent. */
.wf-mgr-adv { margin-top: 16px; border-top: 1px solid var(--wf-border, #e2e8f0); padding-top: 14px; }
.wf-mgr-adv > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 13px; color: var(--wf-title, #a12359);
}
.wf-mgr-adv > summary::-webkit-details-marker { display: none; }
.wf-mgr-adv > summary i { font-size: 11px; transition: transform .2s cubic-bezier(.4, 0, .2, 1); }
.wf-mgr-adv[open] > summary i { transform: rotate(90deg); }
.wf-mgr-adv-b { margin-top: 12px; }

/* De aan/uit-schakelaar staat bovenaan het paneel, naast de titel. */
.wf-mgr-panel-head .wf-mgr-opt { margin-left: auto; padding-right: 0; }

/* Tegels per koppeling — herkenbaar, maar rustiger dan de merkkleuren van social. */
.wf-mgr-ico.wf-int-ga4        { background: #e8710a; }
.wf-mgr-ico.wf-int-gtm        { background: #4285f4; }
.wf-mgr-ico.wf-int-gsc        { background: #34a853; }
.wf-mgr-ico.wf-int-fbpixel    { background: #1877f2; }
.wf-mgr-ico.wf-int-clarity    { background: #0078d4; }
.wf-mgr-ico.wf-int-hotjar     { background: #fd3a5c; }
.wf-mgr-ico.wf-int-linkedin   { background: #0a66c2; }
.wf-mgr-ico.wf-int-tiktok     { background: #0b0b0c; }
.wf-mgr-ico.wf-int-chat       { background: #6f8a1b; }
.wf-mgr-ico.wf-int-customhead,
.wf-mgr-ico.wf-int-custombody { background: #3b4657; }
.wf-mgr-ico.wf-int-cookies    { background: var(--wf-title, #a12359); }

/* Bredere rail voor lijsten met lange namen ("Google Search Console", "Eigen code — bovenin").
   Bij social passen de namen in 290px; hier niet, en een afgekapte naam is lastig kiezen.
   In een min-width-query en niet kaal: deze regel staat NA het 860px-blok hierboven, en zou anders
   ook op een telefoon een rail van 330px afdwingen — precies de kolom die daar juist moet verdwijnen. */
@media (min-width: 861px) {
  .wf-mgr-breed { grid-template-columns: 330px minmax(0, 1fr); }
}

/* Kopje boven een groep in de rail ("Actieve kanalen", "Inactieve koppelingen"), met een
   scheidingslijn erboven. Het eerste kopje van de lijst krijgt die lijn niet: daar valt niets te
   scheiden. */
.wf-mgr-railsep {
  margin: 12px 2px 10px; padding-top: 12px; border-top: 1px solid rgba(1, 16, 61, .10);
  font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9aa2b1;
}
.wf-mgr-railsep.-eerste { margin-top: 0; padding-top: 0; border-top: 0; }

/* De voet draagt hier ook de opslaanknop; op een telefoon eronder over de volle breedte. */
.wf-mgr-cardfoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wf-mgr-cardfoot .wf-btn { margin-left: auto; }

[data-bs-theme="dark"] .wf-mgr-chip { background: rgba(255, 255, 255, .06); color: #a7aeba; }
[data-bs-theme="dark"] .wf-mgr-chip.-let { background: rgba(220, 158, 47, .16); color: #e6c58a; }
[data-bs-theme="dark"] .wf-mgr-field .form-select { background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #e8eaef; }
[data-bs-theme="dark"] .wf-mgr-adv { border-top-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .wf-mgr-railsep { border-top-color: rgba(255, 255, 255, .12); }

@media (max-width: 860px) {
  /* In de veegbare iconenrij passen geen groepskopjes; de volgorde blijft wél staan, dus de actieve
     items staan daar vooraan en je veegt naar de rest. */
  .wf-mgr-railsep { display: none; }
}
@media (max-width: 640px) {
  .wf-mgr-cardfoot .wf-btn { margin-left: 0; width: 100%; justify-content: center; }
  /* De schakelaar mag op een smalle telefoon onder de titel; anders knijpt de titel dicht. */
  .wf-mgr-panel-head .wf-mgr-opt { margin-left: 0; padding-left: 0; }
}

/* ── /dashboard/layout/footer (.fb-*) ────────────────────────────────────────
 * 1:1 uit Claude Design "Webfix Footer Beheer". Maten, radii en schaduwen komen uit dat ontwerp; de
 * kleuren zijn vertaald naar onze tokens zodat de donkere modus meekomt.
 *
 * Eén kaart met drie tabbladen (bedrijf & contact | kolommen | onderregel & juridisch). Links per
 * blok een kaartje met een schakelaar — staat het blok uit, dan klapt de inhoud dicht en verkleurt
 * de kaart. Rechts een meelopend voorbeeld dat blijft plakken bij het scrollen. */
.fb {
  width: 100%; background: var(--wf-surface, #fff);
  border: 1px solid rgba(1, 16, 61, .07); border-radius: 26px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(1, 16, 61, .07);
}

/* -- Kop -- */
.fb-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 20px 24px 0; }
.fb-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 13px; background: rgba(50, 188, 238, .16); color: #12667f; font-size: 15px;
}
.fb-h1 { margin: 0; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--wf-text, #1e293b); }
.fb-lead { margin: 12px 24px 0; max-width: 780px; font-size: 14px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }

/* -- Tabbalk -- */
.fb-tabs {
  display: flex; gap: 12px; margin-top: 16px; padding: 11px 24px;
  border-top: 1px solid var(--wf-border, #e2e8f0); border-bottom: 1px solid var(--wf-border, #e2e8f0);
  background: linear-gradient(180deg, rgba(249, 251, 253, .92), rgba(243, 246, 251, .86)); overflow-x: auto;
}
.fb-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid rgba(1, 16, 61, .08);
  border-radius: 11px; background: transparent; cursor: pointer; font-weight: 600; font-size: 14.5px;
  color: #5b6b7d; white-space: nowrap;
  transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}
.fb-tab:hover { background: rgba(1, 16, 61, .05); color: #0e1c2e; }
.fb-tab.is-on {
  border-color: transparent; color: #fff; font-weight: 700;
  background: linear-gradient(90deg, #b0d136, #da176c, #32bcee); background-size: 200% 100%;
  animation: wf-ai-drift 9s ease-in-out infinite;
}
.fb-tab.is-on i, .fb-tab.is-on .n { color: #fff; }
.fb-tab i { font-size: 13px; }
/* De teller als badge in plaats van als losse tekst ("2" i.p.v. "2 aan"): een rondje leest sneller
   en houdt de tabbalk smal genoeg om op een telefoon te wrappen. */
.fb-tab .n {
  display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px;
  border-radius: 9999px; background: var(--wf-surface, #fff); border: 1px solid rgba(1, 16, 61, .10);
  font-weight: 700; font-size: 11.5px; line-height: 1; color: var(--wf-text, #1e293b);
}
.fb-tab.is-on .n { border-color: rgba(255, 255, 255, .7); color: var(--wf-text, #1e293b); }
@media (prefers-reduced-motion: reduce) { .fb-tab.is-on { animation: none; } }

/* -- Lijf: blokken links, voorbeeld rechts -- */
.fb-body { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 20px; padding: 22px 24px 24px; align-items: start; }
.fb-panel { display: none; }
.fb-panel.is-on { display: flex; flex-direction: column; gap: 14px; }

/* -- Blokkaart met schakelaar -- */
.fb-card {
  border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; overflow: hidden; background: var(--wf-surface, #fff);
  transition: border-color .22s cubic-bezier(.4, 0, .2, 1), background .22s cubic-bezier(.4, 0, .2, 1);
}
.fb-card.-off { background: #fbfbfd; }
.fb-ch { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #f8f9fc; }
.fb-card:not(.-off) .fb-ch { border-bottom: 1px solid var(--wf-border, #e2e8f0); }
.fb-cic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 10px; background: rgba(218, 23, 108, .10); color: var(--wf-title, #a12359); font-size: 13px;
}
.fb-card.-off .fb-cic { background: #f4f5f9; color: var(--wf-muted, #9aa2b1); }
.fb-ct { flex: 1; min-width: 0; }
.fb-ct b { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--wf-text, #1e293b); }
.fb-ct span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.fb-cb { padding: 16px 18px 18px; }
/* Uit = dicht. Het blok verdwijnt van de website, dus zijn velden hebben even niets te vertellen. */
.fb-card.-off .fb-cb { display: none; }

/* -- Velden -- */
.fb-lbl { display: block; margin: 0 0 7px; font-weight: 700; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.fb-lbl.-los { margin-top: 16px; }
.fb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fb-in {
  display: block; box-sizing: border-box; width: 100%; height: 42px; padding: 0 15px; border-radius: 11px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 14px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.fb-in::placeholder { color: var(--wf-muted, #9aa2b1); }
.fb-in:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
select.fb-in { padding-right: 38px; }
.fb-hint { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.fb-hint code { padding: 1px 6px; border-radius: 6px; background: #f2f3f8; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--wf-title, #a12359); }

/* De rich editor van Tom staat in dit kaartje; alleen de omlijsting komt uit het ontwerp. */
.fb-cb .om-editor-wrap, .fb-cb .om-editor { border-radius: 14px; }

/* -- Alleen-lezen gegevens die van een andere pagina komen -- */
.fb-src {
  display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; border-radius: 13px;
  border: 1px dashed rgba(1, 16, 61, .14); background: #fbfbfd;
}
.fb-src-r { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.fb-src-r i { flex: none; width: 15px; text-align: center; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.fb-socials { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-soc {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9999px; border: 1px solid rgba(1, 16, 61, .10); background: var(--wf-surface, #fff);
  font-size: 13px; color: #5b6b7d;
}

/* -- Meldingen -- */
.fb-warn {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 10px 13px; border-radius: 12px;
  border: 1px solid rgba(220, 158, 47, .28); background: rgba(220, 158, 47, .08); font-size: 12.5px; line-height: 1.55; color: #6b4b11;
}
.fb-warn i { flex: none; margin-top: 2px; font-size: 11.5px; color: #8a6117; }
.fb-info {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-radius: 13px;
  border: 1px solid rgba(50, 188, 238, .26); background: rgba(50, 188, 238, .10); font-size: 12.5px; line-height: 1.55; color: #12667f;
}
.fb-info i { flex: none; margin-top: 2px; font-size: 11.5px; color: #1f8fbb; }

/* -- Openingstijden -- */
.fb-open {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 15px; border-radius: 13px;
  background: #fbfbfd; border: 1px solid rgba(1, 16, 61, .08);
}
.fb-open-b { flex: 1; min-width: 180px; }
.fb-open-b b { display: block; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.fb-open-b span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }

/* -- Snelle links -- */
.fb-links { display: flex; flex-direction: column; gap: 7px; }
.fb-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--wf-border, #e2e8f0); border-radius: 13px; background: var(--wf-surface, #fff); }
.fb-grip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 30px;
  border: none; border-radius: 8px; background: transparent; cursor: grab; font-size: 12px; color: var(--wf-muted, #9aa2b1);
}
.fb-grip:hover { background: rgba(1, 16, 61, .05); color: var(--wf-title, #a12359); }
.fb-link .fb-in { height: 36px; border-radius: 9px; font-size: 13.5px; }
.fb-del {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: none; border-radius: 9999px; background: transparent; cursor: pointer; font-size: 12px;
  color: var(--wf-muted, #9aa2b1); transition: background .2s, color .2s;
}
.fb-del:hover { background: rgba(216, 31, 37, .1); color: #b3181d; }
.fb-add {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 11px; height: 34px; padding: 0 14px;
  border: 1px dashed rgba(1, 16, 61, .2); border-radius: 9999px; background: transparent; cursor: pointer;
  font-weight: 700; font-size: 12.5px; color: #5b6b7d; transition: border-color .2s, color .2s;
}
.fb-add:hover { border-color: var(--wf-pink, #da176c); color: var(--wf-title, #a12359); }

/* -- Juridische links -- */
.fb-legal { border: 1px solid rgba(1, 16, 61, .09); border-radius: 15px; overflow: hidden; background: var(--wf-surface, #fff); }
.fb-legal + .fb-legal { margin-top: 9px; }
.fb-legal-h { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.fb-legal-h b { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.fb-legal-b { padding: 0 14px 14px; }
.fb-legal.-off { background: #fbfbfd; }
.fb-legal.-off .fb-legal-b { display: none; }
.fb-legal.-off .fb-legal-h b { color: var(--wf-text-soft, #666c73); }
.fb-dest { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.fb-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--wf-text, #1e293b); }
.fb-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-dot { flex: none; position: relative; width: 17px; height: 17px; border-radius: 9999px; border: 1.5px solid rgba(1, 16, 61, .24); background: var(--wf-surface, #fff); transition: border-color .2s; }
.fb-radio input:checked ~ .fb-dot { border-color: var(--wf-pink, #da176c); }
.fb-radio input:checked ~ .fb-dot::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 9999px; background: var(--wf-pink, #da176c); }
.fb-radio input:focus-visible ~ .fb-dot { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }

/* -- Voorbeeld -- */
.fb-prev { position: sticky; top: 22px; border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; overflow: hidden; background: var(--wf-surface, #fff); }
.fb-prev-h { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; }
.fb-prev-h i { font-size: 13px; color: var(--wf-title, #a12359); }
.fb-prev-h b { font-weight: 700; font-size: 14.5px; color: var(--wf-text, #1e293b); }
.fb-prev-b { padding: 16px 18px 18px; }
/*  Tabletstand van het voorbeeldvenster: het voorbeeld neemt de hele kaart, de instellingen wijken
    even. Zo zie je de tablet op ware verhouding in plaats van geperst in een kolom van 348px
    (Tom, 12-09-2026). De klasse wordt gezet door wf-voorbeeld.js (BreedSelector=".fb-body"). */
@media (min-width: 992px) {
  .fb-body.-vbtablet { grid-template-columns: minmax(0, 1fr); }
  .fb-body.-vbtablet > :first-child { display: none; }
  .fb-body.-vbtablet .fb-prev { position: static; }
}
/*  Grote stand: het volledige scherm dekt alles af, dus de kaart eronder hoeft niets te doen. */
.fb-body.-vbgroot > :first-child { visibility: hidden; }
.fb-mock { border-radius: 16px; padding: 18px; background: #0B1030; }
.fb-mock-t { font-weight: 800; font-size: 15px; color: #fff; }
.fb-mock-s { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.fb-mock-r { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 12.5px; color: rgba(255, 255, 255, .84); }
.fb-mock-r i { flex: none; width: 14px; text-align: center; font-size: 11px; color: rgba(255, 255, 255, .6); }
.fb-mock-soc { display: flex; gap: 9px; margin-top: 12px; color: rgba(255, 255, 255, .78); font-size: 12.5px; }
.fb-mock-l { margin: 16px 0 7px; font-weight: 700; font-size: 11.5px; color: #fff; }
.fb-mock-b { font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.fb-mock-b p { margin: 0 0 6px; }
.fb-mock-b :last-child { margin-bottom: 0; }
.fb-mock-c { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.fb-prev-n { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }
/*  "Voorbeeld mobiel": de echte footer van de template in een venster van 390px. Het venster wordt
    met transform geschaald zodat het altijd in de kolom past; het vak eromheen krijgt de geschaalde
    hoogte, anders blijft er lucht onder staan. */
.fb-prev-x {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: none; border-radius: 9px; background: transparent; color: var(--wf-muted, #9aa2b1); cursor: pointer; font-size: 13px;
}
.fb-prev-x:hover { background: rgba(1, 16, 61, .05); color: var(--wf-text, #1e293b); }
.fb-tel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wf-border-lt, #edf5fa); }
.fb-tel-k { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.fb-tel-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b); }
.fb-tel-t i { color: var(--wf-green, #b0d136); font-size: 12px; }
.fb-tel-s { margin-left: auto; font-size: 11.5px; color: var(--wf-muted, #9aa2b1); }
.fb-tel-vak {
  position: relative; overflow: hidden; border-radius: 14px; border: 1px solid rgba(1, 16, 61, .12);
  background: #fbfbfd;
}
.fb-tel-vak iframe { display: block; border: 0; transform-origin: top left; background: #fff; }
[data-bs-theme="dark"] .fb-tel-vak { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .fb-prev-x:hover { background: rgba(255, 255, 255, .08); color: #e6eaf0; }

/* -- Voet -- */
.fb-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 24px 20px;
  border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd;
}
.fb-foot-n { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.fb-foot-n i { color: var(--wf-muted, #9aa2b1); }
.fb-foot-a { display: flex; align-items: center; gap: 9px; }

/* -- Donkere modus -- */
[data-bs-theme="dark"] .fb,
[data-bs-theme="dark"] .fb-ch { background: rgba(255, 255, 255, .03); }
[data-bs-theme="dark"] .fb-tab .n { background: #1a1d27; border-color: rgba(255, 255, 255, .14); color: #e8eaf1; }
[data-bs-theme="dark"] .fb-card,
[data-bs-theme="dark"] .fb-link,
[data-bs-theme="dark"] .fb-legal,
[data-bs-theme="dark"] .fb-soc,
[data-bs-theme="dark"] .fb-prev { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .fb-card.-off,
[data-bs-theme="dark"] .fb-legal.-off,
[data-bs-theme="dark"] .fb-src,
[data-bs-theme="dark"] .fb-open,
[data-bs-theme="dark"] .fb-prev-h,
[data-bs-theme="dark"] .fb-foot,
[data-bs-theme="dark"] .fb-tabs { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .fb-tab { color: #a7aeba; border-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .fb-tab:hover { background: rgba(255, 255, 255, .06); color: #e7ebf2; }
[data-bs-theme="dark"] .fb-in { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #e7ebf2; }
[data-bs-theme="dark"] .fb-in:focus { background: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .fb-cic { background: rgba(218, 23, 108, .18); }
[data-bs-theme="dark"] .fb-card.-off .fb-cic { background: rgba(255, 255, 255, .07); }
[data-bs-theme="dark"] .fb-hint code { background: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .fb-add { color: #a7aeba; border-color: rgba(255, 255, 255, .2); }
/* De donkerblauwe en donkergroene tekstkleuren uit het ontwerp zijn op een donkere kaart niet
   te lezen; hetzelfde geldt voor de links in de inleiding en de hints. */
[data-bs-theme="dark"] .fb-info { color: #7fd6f2; }
[data-bs-theme="dark"] .fb-info i { color: #7fd6f2; }
[data-bs-theme="dark"] .fb-warn { color: #e6c58a; }
[data-bs-theme="dark"] .fb-lead a,
[data-bs-theme="dark"] .fb-hint a,
[data-bs-theme="dark"] .fb-ct span a { color: #7fd6f2; }

/* -- Responsief: de breekpunten uit het ontwerp -- */
@media (max-width: 1060px) {
  .fb-body { grid-template-columns: minmax(0, 1fr); }
  /* Onder elkaar heeft plakken geen zin meer; het voorbeeld staat dan gewoon onderaan. */
  .fb-prev { position: static; }
}
@media (max-width: 640px) {
  .fb-head, .fb-tabs, .fb-body, .fb-foot { padding-left: 16px; padding-right: 16px; }
  .fb-lead { margin-left: 16px; margin-right: 16px; }
  .fb-row2 { grid-template-columns: 1fr; }
  /* De tabbalk wrapt in plaats van zijwaarts te scrollen: een tabblad dat je niet ziet, bestaat niet. */
  .fb-tabs { flex-wrap: wrap; overflow-x: visible; gap: 8px; }
  .fb-foot-a { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .fb-foot-a > * { flex: 1 1 100%; }
  .fb-foot-a .wf-btn { width: 100%; justify-content: center; }
  /* Aanraakmaat. */
  .fb-in { height: 44px; }
  .fb-link { flex-wrap: wrap; }
  .fb-link .fb-in { flex: 1 1 100%; height: 44px; }
  .fb-grip, .fb-del { width: 44px; height: 44px; }
}

/* ── Contactpagina beheren (/dashboard/layout/contact) ────────────────────────
   Gebouwd naar het ontwerp "Webfix Contactpagina Beheer". Vier tabbladen met per onderdeel een
   kaart die je aan of uit kunt zetten, en rechts een voorbeeld dat meeloopt. De tabbalk is de
   variant uit het ontwerp (.cp-tab, met teller) en niet .wf-tabblock: die laatste heeft geen
   telling en het ontwerp leunt er hier op om te laten zien hoeveel er per tabblad aanstaat. */
.cp {
  width: 100%; background: var(--wf-surface, #fff);
  border: 1px solid rgba(1, 16, 61, .07); border-radius: 26px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(1, 16, 61, .07);
}
.cp-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 20px 26px 0; }
.cp-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 13px;
  background: var(--wf-pink-50, rgba(218, 23, 108, .08)); color: var(--wf-title, #a12359); font-size: 15px;
}
.cp-h1 { margin: 0; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--wf-text, #1e293b); }
.cp-head-a { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.cp-lead { margin: 12px 26px 0; max-width: 820px; font-size: 14px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }

/* -- Tabbalk met teller -- */
.cp-tabs {
  display: flex; gap: 12px; margin-top: 16px; padding: 11px 26px;
  border-top: 1px solid var(--wf-border, #e2e8f0); border-bottom: 1px solid var(--wf-border, #e2e8f0);
  background: linear-gradient(180deg, rgba(249, 251, 253, .92), rgba(243, 246, 251, .86));
  overflow-x: auto;
}
.cp-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border: 1px solid rgba(1, 16, 61, .08); border-radius: 11px; background: transparent; cursor: pointer;
  font-weight: 600; font-size: 14.5px; color: #5b6b7d; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.cp-tab:hover { background: rgba(1, 16, 61, .05); color: #0e1c2e; }
/* De actieve tab draagt het bewegende merkverloop, net als elders in de huisstijl. */
.cp-tab.is-on {
  border-color: transparent; color: #fff; font-weight: 700;
  background: linear-gradient(90deg, #b0d136, #da176c, #32bcee); background-size: 200% 100%;
  animation: cp-drift 9s ease-in-out infinite;
}
@keyframes cp-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.cp-tab.is-on i, .cp-tab.is-on .n { color: #fff; }
.cp-tab i { font-size: 13px; }
/* De teller zegt hoeveel onderdelen in dat tabblad aanstaan; zo zie je zonder klikken waar iets uit staat. */
.cp-tab .n {
  display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px;
  border-radius: 9999px; background: #fff; border: 1px solid rgba(1, 16, 61, .10);
  font-weight: 700; font-size: 11.5px; line-height: 1; color: var(--wf-text, #1e293b);
}
.cp-tab.is-on .n { border-color: rgba(255, 255, 255, .7); color: var(--wf-text, #1e293b); }
@media (prefers-reduced-motion: reduce) { .cp-tab.is-on { animation: none; } }

/* -- Lijf: instellingen links, voorbeeld rechts -- */
.cp-body { display: grid; grid-template-columns: minmax(0, 1fr) 428px; gap: 22px; padding: 22px 26px 26px; align-items: start; }
@media (min-width: 1750px) { .cp-body { grid-template-columns: minmax(0, 1fr) 480px; } }
.cp-panel { display: none; }
.cp-panel.is-on { display: flex; flex-direction: column; gap: 14px; }
.cp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
/*  Drie fotoplekken naast elkaar (foto's naast het contactformulier). Ze krimpen mee; onder de 900px
    gaan ze onder elkaar, want drie vakjes van 90px zegt niemand iets. */
.cp-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cp-foto { border: 1px solid rgba(1, 16, 61, .09); border-radius: 15px; background: #fbfbfd; padding: 12px; }
.cp-foto .cp-stage { margin-bottom: 8px; }
.cp-foto .cp-stage-img { height: 116px; }
.cp-foto .cp-stage-a { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cp-foto .cp-in { font-size: 12.5px; }
@media (max-width: 900px) { .cp-fotos { grid-template-columns: 1fr; } }

/*  De rand om die foto's: dikte als schuif, kleur als rondjes met de huisstijl + een eigen kiezer.
    Staat de rand uit, dan verbleken de velden -- ze doen dan even niets. */
.cp-box2.-uit .cp-rand { opacity: .45; pointer-events: none; }
.cp-rand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
@media (max-width: 700px) { .cp-rand { grid-template-columns: 1fr; } }
.cp-range { width: 100%; accent-color: var(--wf-pink, #da176c); }
.cp-kleuren { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-kleur {
  width: 28px; height: 28px; border-radius: 9999px; border: 2px solid rgba(1, 16, 61, .12); cursor: pointer; padding: 0;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cp-kleur:hover { transform: translateY(-1px); }
.cp-kleur.is-on { border-color: var(--wf-black, #000229); box-shadow: 0 0 0 3px rgba(1, 16, 61, .10); }
.cp-kleur-eigen {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 6px;
  border: 1px solid rgba(1, 16, 61, .14); border-radius: 8px; background: var(--wf-surface, #fff);
  font-size: 11.5px; font-weight: 600; color: var(--wf-text-soft, #666c73); cursor: pointer;
}
.cp-kleur-eigen input[type="color"] {
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 5px; background: none; cursor: pointer;
}
[data-bs-theme="dark"] .cp-foto { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .cp-kleur-eigen { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
.cp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* -- Subtabbladen binnen een tabblad (platte pillen op een lichte strook) -- */
.cp-subtabs { display: flex; gap: 4px; padding: 6px; border-radius: 13px; background: #f4f5f9; overflow-x: auto; }
.cp-st {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px; border: none;
  border-radius: 9px; background: transparent; cursor: pointer; font-weight: 600; font-size: 13.5px;
  color: var(--wf-text-soft, #666c73); white-space: nowrap; transition: background .2s, color .2s;
}
.cp-st:hover { color: var(--wf-text, #1e293b); }
.cp-st.is-on { background: #fff; color: var(--wf-title, #a12359); font-weight: 700; box-shadow: 0 1px 3px rgba(18, 20, 32, .14); }
/* Het stipje vertelt of dat onderdeel aanstaat, zodat je het niet hoeft open te klikken. */
.cp-st .dot { width: 7px; height: 7px; border-radius: 9999px; background: #cfd4de; }
.cp-st .dot.-on { background: #6f8a1b; }
.cp-sp { display: none; }
.cp-sp.is-on { display: flex; flex-direction: column; gap: 14px; }

/* -- Blokkaart -- */
.cp-card { position: relative; border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; overflow: hidden; background: var(--wf-surface, #fff); }
/* Uit = alleen de kop blijft staan. Het blok staat niet op de website, dus zijn velden hebben even
   niets te vertellen -- en het scheelt een hoop scrollen langs instellingen die niets doen. */
.cp-card.-off { background: #fbfbfd; }
.cp-card.-off .cp-cb { display: none; }
.cp-ch { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #f8f9fc; }
.cp-ch.-line { border-bottom: 1px solid var(--wf-border, #e2e8f0); }
.cp-card.-off .cp-ch.-line { border-bottom: none; }
.cp-cic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 10px; background: var(--wf-pink-50, rgba(218, 23, 108, .08)); color: var(--wf-title, #a12359); font-size: 13px;
}
.cp-card.-off .cp-cic { background: #f4f5f9; color: var(--wf-muted, #9aa2b1); }
.cp-ct { flex: 1; min-width: 0; }
.cp-ct b { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--wf-text, #1e293b); }
.cp-ct > span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.cp-cb { padding: 16px 18px 18px; }

/*  Op een telefoon stond de schakelaar náást de titel en hield die zichzelf op zijn eigen breedte;
    wat overbleef voor de tekst was een kolom van negentig pixels waar "Header-foto" over twee regels
    in brak. Onder de 576px zakt de schakelaar daarom naar een eigen regel (Tom, 04-09-2026). */
@media (max-width: 575.98px) {
  .cp-ch { flex-wrap: wrap; }
  .cp-ch .wf-switch { flex: 1 0 100%; margin-left: 42px; }
}

/* -- Velden -- */
.cp-lbl { display: block; margin: 0 0 7px; font-weight: 700; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.cp-lbl .opt { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.cp-in {
  display: block; box-sizing: border-box; width: 100%; height: 42px; padding: 0 15px; border-radius: 11px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 14px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.cp-in::placeholder { color: var(--wf-muted, #9aa2b1); }
.cp-in:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.cp-hint { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }

/* -- Taalbalk in het vrije-tekstblok: de vlagknoppen links, de WAI-vertaalknop rechts. Onder de
      560px zakt de knop onder de balk; twee dingen naast elkaar op een telefoon knijpen de tabs
      anders tot een streepje. -- */
.cp-langbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cp-langbar .wf-tabgroup { flex: 1 1 auto; min-width: 0; }
.cp-langbar .cp-vertaal { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 560px) {
  .cp-langbar .cp-vertaal { margin-left: 0; width: 100%; justify-content: center; }
}

/* Aanraakmaten t/m iPad liggend: de vlagknoppen en de vertaalknop zijn hier het enige dat je met een
   duim moet kunnen raken (de knoppenbalk van de editor heeft zijn eigen, veel dichtere maatvoering). */
@media (max-width: 1024.98px) {
  .cp-langbar .wf-tabx, .cp-langbar .cp-vertaal { min-height: 44px; }
}

/* -- Alleen-lezen bron (gegevens die uit Mijn gegevens komen) -- */
.cp-src { display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; border-radius: 13px; border: 1px dashed rgba(1, 16, 61, .14); background: #fbfbfd; }
.cp-src-r { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.cp-src-r i { flex: none; width: 15px; text-align: center; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.cp-src-r .leeg { color: var(--wf-muted, #9aa2b1); font-style: italic; }

/* -- Toelichting -- */
.cp-info {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-radius: 13px;
  border: 1px solid rgba(50, 188, 238, .26); background: var(--wf-blue-50, rgba(50, 188, 238, .08));
  font-size: 12.5px; line-height: 1.55; color: #12667f;
}
.cp-info i { flex: none; margin-top: 2px; font-size: 11.5px; color: #1f8fbb; }

/* -- Subschakelaars (extra blokken binnen een kaart) -- */
.cp-subs { display: flex; flex-direction: column; gap: 8px; }
.cp-sub { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid var(--wf-border, #e2e8f0); border-radius: 13px; background: var(--wf-surface, #fff); }
.cp-sub b { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.cp-sub .n { flex: none; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.cp-sub.-off { background: #fbfbfd; }
.cp-sub.-off b { color: var(--wf-text-soft, #666c73); }

/* -- Velden van het standaardformulier -- */
.cp-flds { display: flex; flex-direction: column; gap: 8px; }
.cp-fld { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--wf-border, #e2e8f0); border-radius: 13px; background: var(--wf-surface, #fff); }
.cp-fld.-off { background: #fbfbfd; }
.cp-fic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--wf-blue-50, rgba(50, 188, 238, .08)); color: #12667f; font-size: 12px;
}
.cp-fld.-off .cp-fic { background: #f4f5f9; color: var(--wf-muted, #9aa2b1); }
.cp-fnm, .cp-fph {
  flex: 1 1 130px; min-width: 0; box-sizing: border-box; height: 34px; padding: 0 11px; border-radius: 9px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 13.5px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.cp-fnm { font-weight: 600; }
.cp-fph { flex-grow: 1.3; font-size: 13px; color: #5b6b7d; }
.cp-fnm:focus, .cp-fph:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
/* "Verplicht" is een vinkje en geen schakelaar: het hoort bij het veld ernaast en niet bij het
   aan/uit-zetten van het veld zelf -- twee schakelaars op één regel leest verwarrend. */
.cp-req { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 700; font-size: 11.5px; color: var(--wf-text-soft, #666c73); white-space: nowrap; }
.cp-req input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cp-box {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  border-radius: 6px; border: 1.5px solid rgba(1, 16, 61, .22); background: var(--wf-surface, #fff);
  font-size: 9px; color: transparent; transition: background .2s, border-color .2s, color .2s;
}
.cp-req input:checked ~ .cp-box { background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff; }
.cp-req input:focus-visible ~ .cp-box { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }
.cp-req:has(input:checked) { color: var(--wf-title, #a12359); }
.cp-lock { flex: none; font-size: 11px; color: var(--wf-text-soft, #666c73); white-space: nowrap; }

/* -- De sluier over het standaardformulier als het eigen formulier het overneemt -- */
.cp-veil { display: none; padding: 18px; text-align: center; justify-content: center; }
.cp-card.-veiled .cp-veil { display: flex; }
.cp-card.-veiled .cp-ch, .cp-card.-veiled .cp-cb { display: none; }
.cp-veil-b { display: block; max-width: 340px; padding: 16px 18px; border-radius: 16px; background: var(--wf-surface, #fff); border: 1px solid rgba(1, 16, 61, .10); box-shadow: 0 8px 22px rgba(1, 16, 61, .12); }
.cp-veil-t { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto; padding: 6px 14px; border-radius: 9999px; background: var(--wf-pink-50, rgba(218, 23, 108, .08)); font-weight: 700; font-size: 12.5px; color: var(--wf-title, #a12359); }
.cp-veil-t i { font-size: 11px; }
.cp-veil-s { display: block; margin: 11px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }

/* -- Fotovlak met de knoppen eronder -- */
.cp-stage { position: relative; border-radius: 15px; overflow: hidden; border: 1px solid rgba(1, 16, 61, .10); }
.cp-stage-img {
  display: flex; align-items: center; justify-content: center; height: 188px; font-size: 26px; color: rgba(1, 16, 61, .24);
  background: linear-gradient(135deg, rgba(50, 188, 238, .2), rgba(176, 209, 54, .22) 52%, rgba(220, 158, 47, .18));
}
.cp-stage-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*  Mini-preview van de grote fotostrook op de contactpagina (Tom, 26-09-2026). Het kader toonde
    alleen de kale foto, terwijl de klant daar juist wil zien wat de overlay en het achtergrondwoord
    dóen. Nu staat er hetzelfde als op de site: foto, zwarte overlay, groot woord linksonder dat deels
    buiten beeld loopt.

    Alles schaalt op de BREEDTE van het kader (cqw), niet op een vaste px-maat: dan houdt het woord
    dezelfde verhouding als op een breed scherm en blijft het kader zelf even groot. De maten komen
    uit de template: op ~1400px breed is het woord 225px (16cqw), staat het op left:-25px (-1.8cqw)
    en bottom:-50px (-3.6cqw), met letter-spacing -10px (-.72cqw).
    container-type is bewust `inline-size` en niet `size`: met size-containment verliest het kader
    de hoogte die het van .cp-stage-img krijgt en klapt het dicht. */
.cp-stage.-band { container-type: inline-size; }
.cp-band-waas { position: absolute; inset: 0; background: #000; pointer-events: none; z-index: 1; }
.cp-band-woord {
  position: absolute; left: -1.8cqw; bottom: -3.6cqw; z-index: 1;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; color: #fff;
  font-size: 48px; font-size: 16cqw; line-height: 1; letter-spacing: -.72cqw;
  white-space: nowrap; pointer-events: none; user-select: none;
}
/*  De drie standen. De verhouding komt uit Crafto: 300 / 400 / 600px hoog. Het kader mag niet
    meegroeien (Tom), dus we schalen ze terug naar 112 / 150 / 188px — dezelfde 1:1,33:2 verhouding,
    met groot op de hoogte die het kader altijd al had. */
.cp-stage.-band.-h-klein  .cp-stage-img { height: 112px; }
.cp-stage.-band.-h-middel .cp-stage-img { height: 150px; }
.cp-stage.-band.-h-groot  .cp-stage-img { height: 188px; }

.cp-edit { position: absolute; top: 12px; right: 12px; z-index: 2; }
/*  Glazige bewerkknop bovenop het beeld -- dezelfde als op /dashboard/layout/logo, zodat "Bewerken"
    er op elk fotoveld hetzelfde uitziet. Stond hier eerst als kale lichte knop. */
.cp-edit .wf-btn {
  height: 32px; padding: 0 14px 0 4px; font-size: 12.5px;
  background: rgba(255, 255, 255, .9); color: #000229;
  border: 1px solid rgba(1, 16, 61, .10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(1, 6, 20, .10);
}
.cp-edit .wf-btn:hover { background: #fff; color: #000229; }
.cp-edit .wf-btn-chip { width: 24px; height: 24px; font-size: 11px; }
/*  Ruitjes achter een foto die het vlak niet vult. Bij de foto naast het formulier mag de klant
    staand en liggend aanleveren, dus tonen we het HELE beeld (contain) in plaats van een uitsnede --
    anders lijkt een staande foto afgesneden terwijl dat op de website niet zo is. De ruitjes maken
    dan zichtbaar wat kader is en wat foto, net als bij het logo. */
.cp-stage-img.-raster {
  background-color: #fbfbfd;
  background-image: linear-gradient(45deg, #eceef4 25%, transparent 25%), linear-gradient(-45deg, #eceef4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceef4 75%), linear-gradient(-45deg, transparent 75%, #eceef4 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.cp-stage-img.-raster img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.cp-stage-a { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 13px; }

/* -- Gekozen foto in een eigen kader -- */
.cp-box2 { border: 1px solid rgba(1, 16, 61, .09); border-radius: 15px; background: #fbfbfd; padding: 14px; }
.cp-box2 + .cp-box2 { margin-top: 12px; }
.cp-box2-l { display: block; margin: 0 0 11px; font-weight: 700; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.cp-fotorow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cp-fotobig {
  flex: none; width: 190px; height: 124px; border-radius: 13px; overflow: hidden; border: 1px solid rgba(1, 16, 61, .08);
  display: flex; align-items: center; justify-content: center; color: rgba(1, 16, 61, .28); font-size: 20px;
  background: linear-gradient(135deg, rgba(50, 188, 238, .2), rgba(176, 209, 54, .22) 52%, rgba(220, 158, 47, .18));
}
.cp-fotobig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-fotob { flex: 1; min-width: 210px; }
.cp-fotob b { display: block; font-weight: 700; font-size: 14px; color: var(--wf-text, #1e293b); word-break: break-all; }
.cp-fotob > span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.cp-fotoa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 13px; }

/* -- Keuzeknoppen links/rechts -- */
.cp-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: #f4f5f9; }
.cp-segb { position: relative; height: 34px; padding: 0 16px; border: none; border-radius: 9px; background: transparent; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--wf-text-soft, #666c73); transition: background .2s, color .2s; }
.cp-segb:hover { color: var(--wf-text, #1e293b); }
.cp-segb.is-on { background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); font-weight: 700; box-shadow: 0 1px 3px rgba(18, 20, 32, .14); }
.cp-segb i { font-size: 11px; margin-right: 6px; }

/* -- Kaartvoorbeeld: een geschetste plattegrond, geen echte kaart --
   Bewust getekend en niet ingeladen: een echte kaart hier zou per keer een Maps-aanroep kosten
   (en zonder sleutel een watermerk tonen) terwijl het alleen laat zien wáár de kaart komt. */
.cp-map { position: relative; height: 210px; border-radius: 15px; overflow: hidden; border: 1px solid rgba(1, 16, 61, .10); background: #eaf0f4; }
.cp-map-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(1, 16, 61, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 16, 61, .045) 1px, transparent 1px);
  background-size: 26px 26px;
}
.cp-map-road { position: absolute; height: 11px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(1, 16, 61, .05); }
.cp-map-road.-v { width: 11px; height: auto; }
.cp-map-green { position: absolute; border-radius: 9px; background: rgba(176, 209, 54, .24); }
.cp-map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); font-size: 26px; color: var(--wf-pink, #da176c); filter: drop-shadow(0 3px 6px rgba(1, 16, 61, .28)); }
.cp-map-card { position: absolute; bottom: 12px; left: 12px; max-width: calc(100% - 24px); padding: 9px 13px; border-radius: 11px; background: var(--wf-surface, #fff); box-shadow: 0 6px 18px rgba(1, 16, 61, .14); }
.cp-map-card b { display: block; font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b); }
.cp-map-card span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--wf-text-soft, #666c73); }
.cp-map-tag { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 9999px; background: rgba(255, 255, 255, .9); font-weight: 700; font-size: 10.5px; color: var(--wf-text-soft, #666c73); }

/* -- Eigen formulier koppelen -- */
.cp-pick { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cp-tagx { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 9999px; background: var(--wf-pink-50, rgba(218, 23, 108, .08)); font-weight: 700; font-size: 12px; color: var(--wf-title, #a12359); }
.cp-tagx button { display: inline-flex; align-items: center; border: none; background: none; cursor: pointer; font-size: 11px; color: var(--wf-title, #a12359); padding: 0; }
/* Live zetten kan pas als er een formulier hangt; tot die tijd staat het blok grijs en dood. */
.cp-live { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 15px; border-radius: 13px; border: 1px solid rgba(176, 209, 54, .34); background: rgba(176, 209, 54, .08); }
.cp-live.-off { border-color: rgba(1, 16, 61, .10); background: #fbfbfd; opacity: .72; pointer-events: none; }
.cp-live-b { flex: 1; min-width: 190px; }
.cp-live-b b { display: block; font-weight: 700; font-size: 13.5px; color: #4e6711; }
.cp-live.-off .cp-live-b b { color: var(--wf-text-soft, #666c73); }
.cp-live-b span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }

/* -- Previewkolom --
   Het gedeelde previewvenster (_WfVoorbeeld) in een kaart die blijft plakken bij het scrollen. Hier
   stond een nagetekende schets van de contactpagina; die is sinds 13-09-2026 vervangen door de echte
   pagina uit de template (Tom). In de tabletstand mag de preview de hele kaart vullen en wijken de
   instellingen even -- maar pas vanaf 1301px: daaronder staat de kolom al ONDER de instellingen
   (zie "Kleiner scherm"), en dan zou het verbergen ervan de pagina leeghalen. */
.cp-prev { position: sticky; top: 22px; border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; overflow: hidden; background: var(--wf-surface, #fff); }
.cp-prev-b { padding: 16px 18px 18px; }
@media (min-width: 1301px) {
  .cp-body.-vbtablet { grid-template-columns: minmax(0, 1fr); }
  .cp-body.-vbtablet > :first-child { display: none; }
  .cp-body.-vbtablet .cp-prev { position: static; }
}

/* -- Voet -- */
.cp-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 26px; border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; }
.cp-foot-n { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.cp-foot-n i { color: var(--wf-blue, #32bcee); }
.cp-foot-a { display: flex; align-items: center; gap: 9px; }

/* -- Kleiner scherm --
   Het voorbeeld gaat onder de instellingen: naast elkaar wordt allebei te smal, en het voorbeeld is
   het onderdeel dat je even kunt missen terwijl je aan het invullen bent. */
@media (max-width: 1300px) {
  .cp-body { grid-template-columns: minmax(0, 1fr); }
  .cp-prev { position: static; }
}
@media (max-width: 860px) {
  .cp-head, .cp-tabs, .cp-body, .cp-foot { padding-left: 16px; padding-right: 16px; }
  .cp-lead { margin-left: 16px; margin-right: 16px; }
  .cp-two, .cp-grid3 { grid-template-columns: 1fr; }
  /* De tabbalk wrapt in plaats van zijwaarts te schuiven: een tabblad dat je niet ziet bestaat niet,
     en met vier tabbladen vielen er op een telefoon twee buiten beeld. */
  .cp-tabs { flex-wrap: wrap; gap: 8px; overflow-x: visible; }
  /* Twee per regel in plaats van vier onder elkaar: anders is de tabbalk op een telefoon een
     kolom van 170px hoog voordat je iets van de pagina ziet. */
  .cp-tab { flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: center; padding: 10px 10px; font-size: 13px; }
  .cp-tab span:not(.n) { overflow: hidden; text-overflow: ellipsis; }
  .cp-head-a { width: 100%; margin-left: 0; }
  .cp-head-a .wf-btn { width: 100%; justify-content: center; }
  /* De knoppen onder elkaar en over de volle breedte -- naast elkaar blijft er van elk nog geen
     halve regel over, en de hoofdactie hoort op een telefoon de hele breedte te krijgen. */
  .cp-foot-a { flex-direction: column; align-items: stretch; width: 100%; margin-left: 0; }
  .cp-foot-a .wf-btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  /* Ook de subtabbladen wrappen: met drie pillen ("Foto bij formulier" is lang) viel de laatste
     buiten beeld in een strook die je alleen zijwaarts kon schuiven. */
  .cp-subtabs { flex-wrap: wrap; overflow-x: visible; }
  .cp-st { flex: 1 1 auto; justify-content: center; }
  .cp-ch { flex-wrap: wrap; }
  .cp-fld { gap: 8px; }
  .cp-fnm, .cp-fph { flex: 1 1 100%; }
  .cp-req { width: 100%; }
  .cp-fotobig { width: 100%; height: 150px; }
}

/* -- Donkere modus -- */
[data-bs-theme="dark"] .cp-card,
[data-bs-theme="dark"] .cp-sub,
[data-bs-theme="dark"] .cp-fld,
[data-bs-theme="dark"] .cp-prev,
[data-bs-theme="dark"] .cp-veil-b { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .cp-ch,
[data-bs-theme="dark"] .cp-foot,
/*  De ruitjes zijn twee lichtgrijzen; op een donkere kaart springen die eruit als een wit vlak. */
[data-bs-theme="dark"] .cp-stage-img.-raster {
  background-color: rgba(255, 255, 255, .04);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .05) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .05) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .05) 75%);
}
[data-bs-theme="dark"] .cp-edit .wf-btn { background: rgba(20, 24, 33, .82); color: #e6eaf0; border-color: rgba(255, 255, 255, .14); }
[data-bs-theme="dark"] .cp-edit .wf-btn:hover { background: #141821; color: #fff; }
[data-bs-theme="dark"] .cp-box2,
[data-bs-theme="dark"] .cp-src { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .cp-in,
[data-bs-theme="dark"] .cp-fnm,
[data-bs-theme="dark"] .cp-fph { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e8eaf1; }
[data-bs-theme="dark"] .cp-tabs { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .cp-subtabs, [data-bs-theme="dark"] .cp-seg { background: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .cp-st.is-on, [data-bs-theme="dark"] .cp-segb.is-on { background: #1a1d27; }

/* ── Overige instellingen (/dashboard/layout/instellingen) ────────────────────
   Gebouwd naar het ontwerp "Webfix Overige Instellingen". Drie tabbladen, per onderdeel een kaart met
   de "Activeren"-pil in de kop, en rechts een voorbeeld dat de hoeken en de opmaak meteen laat zien.
   De tabbalk, de kaarten en de pil zijn dezelfde als op de contact- en footerpagina. */
.oi {
  width: 100%; background: var(--wf-surface, #fff);
  border: 1px solid rgba(1, 16, 61, .07); border-radius: 26px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(1, 16, 61, .07);
}
.oi-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 20px 26px 0; }
.oi-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 13px;
  background: var(--wf-pink-50, rgba(218, 23, 108, .08)); color: var(--wf-title, #a12359); font-size: 15px;
}
.oi-h1 { margin: 0; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--wf-text, #1e293b); }
.oi-head-a { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.oi-lead { margin: 12px 26px 0; max-width: 820px; font-size: 14px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }

/* -- Tabbalk (zelfde vorm als op de contact- en footerpagina) -- */
.oi-tabs {
  display: flex; gap: 12px; margin-top: 16px; padding: 11px 26px;
  border-top: 1px solid var(--wf-border, #e2e8f0); border-bottom: 1px solid var(--wf-border, #e2e8f0);
  background: linear-gradient(180deg, rgba(249, 251, 253, .92), rgba(243, 246, 251, .86));
}
.oi-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border: 1px solid rgba(1, 16, 61, .08); border-radius: 11px; background: transparent; cursor: pointer;
  font-weight: 600; font-size: 14.5px; color: #5b6b7d; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.oi-tab:hover { background: rgba(1, 16, 61, .05); color: #0e1c2e; }
.oi-tab.is-on {
  border-color: transparent; color: #fff; font-weight: 700;
  background: linear-gradient(90deg, #b0d136, #da176c, #32bcee); background-size: 200% 100%;
  animation: wf-ai-drift 9s ease-in-out infinite;
}
.oi-tab.is-on i { color: #fff; }
.oi-tab i { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .oi-tab.is-on { animation: none; } }

/* -- Lijf: instellingen links, voorbeeld en tips rechts -- */
.oi-body { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 22px; padding: 22px 26px 26px; align-items: start; }
.oi-panel { display: none; }
.oi-panel.is-on { display: flex; flex-direction: column; gap: 14px; }
.oi-zij { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 22px; }
.oi-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

/* -- Kaart -- */
.oi-card { border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; overflow: hidden; background: var(--wf-surface, #fff); }
.oi-card.-off { background: #fbfbfd; }
.oi-card.-off .oi-cb { display: none; }
.oi-ch { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #f8f9fc; border-bottom: 1px solid var(--wf-border, #e2e8f0); }
.oi-card.-off .oi-ch { border-bottom: none; }
.oi-cic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 10px; background: var(--wf-pink-50, rgba(218, 23, 108, .08)); color: var(--wf-title, #a12359); font-size: 13px;
}
.oi-card.-off .oi-cic { background: #f4f5f9; color: var(--wf-muted, #9aa2b1); }
.oi-ct { flex: 1; min-width: 0; }
.oi-ct b { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--wf-text, #1e293b); }
.oi-ct > span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.oi-cb { padding: 16px 18px 18px; }
.oi-p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }

/* -- Lijst met losse schakelaars binnen een kaart -- */
.oi-list { display: flex; flex-direction: column; gap: 8px; }
.oi-li { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--wf-border, #e2e8f0); border-radius: 13px; background: var(--wf-surface, #fff); }
.oi-li.-off { background: #fbfbfd; }
.oi-li > i { flex: none; width: 18px; text-align: center; font-size: 14px; color: var(--wf-title, #a12359); }
.oi-li.-off > i { color: var(--wf-muted, #9aa2b1); }
.oi-li-t { flex: 1; min-width: 0; }
.oi-li-t b { display: block; font-weight: 600; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.oi-li-t span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.oi-li.-off .oi-li-t b { color: var(--wf-text-soft, #666c73); }
/* Een rij met een schuif erbij: kop en schakelaar op de eerste regel, de schuif eronder over de
   volle breedte. Zo blijft de rij even hoog aanvoelen als de andere in de lijst. */
.oi-li.-metschuif { flex-wrap: wrap; }
.oi-li .oi-li-schuif { flex: 1 0 100%; margin-top: 2px; padding-left: 30px; }
.oi-li.-metschuif .oi-scale { margin-top: 4px; }
@media (max-width: 560px) { .oi-li .oi-li-schuif { padding-left: 0; } }

/* -- Velden -- */
.oi-lbl { display: block; margin: 0 0 7px; font-weight: 700; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.oi-in {
  display: block; box-sizing: border-box; width: 100%; height: 42px; padding: 0 15px; border-radius: 11px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 14px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.oi-in:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.oi-hint { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }

/* -- Links/rechts-keuze -- */
.oi-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: #f4f5f9; }
.oi-segb { height: 34px; padding: 0 16px; border: none; border-radius: 9px; background: transparent; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--wf-text-soft, #666c73); transition: background .2s, color .2s; }
.oi-segb:hover { color: var(--wf-text, #1e293b); }
.oi-segb.is-on { background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); font-weight: 700; box-shadow: 0 1px 3px rgba(18, 20, 32, .14); }

/* -- Hoeken: per soort een schuif met een vormpje ernaast -- */
.oi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.oi-r { border: 1px solid var(--wf-border, #e2e8f0); border-radius: 15px; overflow: hidden; background: #fbfbfd; }
.oi-r-h { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--wf-border, #e2e8f0); background: var(--wf-surface, #fff); }
.oi-r-h > i { flex: none; width: 18px; text-align: center; font-size: 13px; color: var(--wf-title, #a12359); }
.oi-r-t { flex: 1; min-width: 0; }
.oi-r-t b { display: block; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.oi-r-t span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--wf-text-soft, #666c73); }
.oi-r-b { display: flex; align-items: center; gap: 14px; padding: 14px; }
/* Staat de schaal op "standaard", dan houdt de template zijn eigen ronding en valt er niets te
   slepen. De schuif blijft zichtbaar zodat je ziet dat hij er is. */
.oi-r.-uit .oi-r-b { opacity: .45; pointer-events: none; }
.oi-slide { flex: 1; min-width: 0; }
.oi-slide input[type="range"] { display: block; width: 100%; accent-color: var(--wf-pink, #da176c); }
.oi-scale { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font-size: 11.5px; color: var(--wf-text-soft, #666c73); }
.oi-scale b { font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b); }
.oi-demo { flex: none; display: flex; align-items: center; justify-content: center; width: 84px; }
.oi-d-card { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; width: 70px; height: 54px; padding: 8px; background: linear-gradient(135deg, rgba(50, 188, 238, .2), rgba(176, 209, 54, .22)); border: 1px solid rgba(1, 16, 61, .1); }
.oi-d-line { height: 5px; border-radius: 3px; background: rgba(1, 16, 61, .18); }
.oi-d-line.-s { width: 60%; }
.oi-d-photo { display: flex; align-items: center; justify-content: center; width: 70px; height: 54px; background: linear-gradient(135deg, rgba(220, 158, 47, .2), rgba(218, 23, 108, .16)); border: 1px solid rgba(1, 16, 61, .1); color: rgba(1, 16, 61, .3); font-size: 16px; }
.oi-d-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 16px; background: var(--wf-pink, #da176c); color: #fff; font-weight: 700; font-size: 12px; }
.oi-d-fld { display: inline-flex; align-items: center; width: 76px; height: 32px; padding: 0 10px; border: 1px solid rgba(1, 16, 61, .16); background: var(--wf-surface, #fff); font-size: 11.5px; color: var(--wf-muted, #9aa2b1); }

/* -- Voorbeeld -- */
.oi-prev { border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; overflow: hidden; background: var(--wf-surface, #fff); }
.oi-prev-h { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; }
.oi-prev-h i { font-size: 13px; color: var(--wf-title, #a12359); }
.oi-prev-h b { flex: 1; font-weight: 700; font-size: 14.5px; color: var(--wf-text, #1e293b); }
.oi-prev-b { padding: 16px 18px 18px; }
.oi-prev-n { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.oi-mock { padding: 14px; border-radius: 15px; background: #f4f6fa; }
.oi-mock-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--wf-surface, #fff); border: 1px solid rgba(1, 16, 61, .08); transition: box-shadow .25s, border-radius .2s; }
/* De schaduw en de witte rand volgen de schakelaars, zodat je meteen ziet wat je aanzet. */
.oi-mock-card.-schaduw { box-shadow: 0 10px 26px rgba(1, 16, 61, .12); }
.oi-mock-photo { height: 84px; background: linear-gradient(135deg, rgba(50, 188, 238, .28), rgba(176, 209, 54, .28) 52%, rgba(220, 158, 47, .24)); transition: border-radius .2s, box-shadow .2s, transform .25s; }
/* De dikte komt uit de schuif bij "Witte rand om foto's"; het script zet --oi-rand. */
.oi-mock-photo.-lijst { border: var(--oi-rand, 4px) solid #fff; box-shadow: 0 2px 10px rgba(1, 16, 61, .14); }
.oi-mock-card:hover .oi-mock-photo.-zoom { transform: scale(1.04); }
.oi-mock-t { font-weight: 800; font-size: 14.5px; letter-spacing: -.015em; color: var(--wf-text, #1e293b); }
.oi-mock-s { margin: 0; font-size: 12px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }
.oi-mock-fld { display: flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid rgba(1, 16, 61, .12); background: #fbfbfd; font-size: 12px; color: var(--wf-muted, #9aa2b1); transition: border-radius .2s; }
.oi-mock-btn { align-self: flex-start; padding: 8px 16px; background: var(--wf-pink, #da176c); font-weight: 700; font-size: 12px; color: #fff; transition: border-radius .2s; }

/* -- Tip naast het voorbeeld -- */
.oi-tip { padding: 15px 17px; border-radius: 18px; border: 1px solid rgba(1, 16, 61, .08); background: #fbfbfd; }
.oi-tip-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--wf-pink-50, rgba(218, 23, 108, .08)); color: var(--wf-title, #a12359); font-size: 13px; }
.oi-tip-ic.-blauw { background: var(--wf-blue-50, rgba(50, 188, 238, .08)); color: #12667f; }
.oi-tip-t { margin: 11px 0 0; font-weight: 700; font-size: 14px; color: var(--wf-text, #1e293b); }
.oi-tip-s { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }

/* -- Tabblad Bovenbalk (gedrag): het vangnet voor een pagina zonder foto --
   De patroontegels zijn echte balken uit site/_shared/kop-vangnet.css in het klein; --wfvn-k en
   --wfvn-ov staan op #kvKiezer, zodat kleur en waas alle tegels tegelijk meenemen. */
.oi-kv-volgorde { list-style: none; counter-reset: kv; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; padding: 0; }
.oi-kv-volgorde li { counter-increment: kv; position: relative; padding: 10px 12px 10px 44px; border: 1px solid var(--wf-border, #e2e8f0); border-radius: 13px; background: #fbfbfd; }
.oi-kv-volgorde li::before {
  content: counter(kv); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: #eef0f5; font-weight: 700; font-size: 11.5px; color: var(--wf-text-soft, #666c73);
}
.oi-kv-volgorde li b { display: block; font-weight: 700; font-size: 12.5px; line-height: 1.35; color: var(--wf-text, #1e293b); }
.oi-kv-volgorde li span { display: block; font-size: 11.5px; line-height: 1.4; color: var(--wf-text-soft, #666c73); }
.oi-kv-volgorde li.-hier { border-color: rgba(218, 23, 108, .35); background: var(--wf-pink-50, rgba(218, 23, 108, .06)); }
.oi-kv-volgorde li.-hier::before { background: var(--wf-pink, #da176c); color: #fff; }
.oi-kv-seg { margin-bottom: 16px; }
.oi-kv-seg .oi-segb { display: inline-flex; align-items: center; gap: 7px; }
.oi-kv-deel { margin-bottom: 18px; }
.oi-kv-deel[hidden] { display: none; }
.oi-kv-lbl { margin-top: 18px; }
.oi-kv-kleuren { display: flex; flex-wrap: wrap; gap: 8px; }
.oi-kv-kleur {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 14px 0 7px; border: 1px solid var(--wf-border, #e2e8f0);
  border-radius: 11px; background: var(--wf-surface, #fff); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, box-shadow .2s;
}
.oi-kv-kleur:hover { border-color: rgba(218, 23, 108, .45); }
.oi-kv-kleur.is-on { border-color: var(--wf-pink, #da176c); box-shadow: 0 0 0 3px rgba(218, 23, 108, .14); }
.oi-kv-stip { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(1, 16, 61, .14); }
.oi-kv-kleur.-eigen input[type="color"] { width: 26px; height: 26px; padding: 0; border: 1px solid rgba(1, 16, 61, .14); border-radius: 7px; background: none; cursor: pointer; }
.oi-kv-groep { margin: 16px 0 8px; font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b); }
.oi-kv-groep:first-child { margin-top: 0; }
.oi-kv-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.oi-kv-tegel {
  display: flex; flex-direction: column; gap: 6px; padding: 5px 5px 8px; border: 1px solid var(--wf-border, #e2e8f0); border-radius: 13px;
  background: var(--wf-surface, #fff); cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.oi-kv-tegel:hover { border-color: rgba(218, 23, 108, .45); transform: translateY(-1px); }
.oi-kv-tegel:focus-visible { outline: 2px solid var(--wf-blue, #32bcee); outline-offset: 2px; }
.oi-kv-tegel.is-on { border-color: var(--wf-pink, #da176c); box-shadow: 0 0 0 3px rgba(218, 23, 108, .16); }
.oi-kv-staal { display: block; height: 60px; border-radius: 9px; }
.oi-kv-naam { padding: 0 4px; font-weight: 600; font-size: 12px; line-height: 1.3; color: var(--wf-text, #1e293b); }
.oi-kv-tegel.is-on .oi-kv-naam { color: var(--wf-title, #a12359); }
.oi-kv-vink {
  position: absolute; z-index: 3; top: 6px; right: 6px; display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wf-pink, #da176c); color: #fff; font-size: 13px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.oi-kv-tegel.is-on .oi-kv-vink { display: grid; }
.oi-kv-waas { padding-top: 16px; border-top: 1px solid var(--wf-border, #e2e8f0); }
@media (prefers-reduced-motion: reduce) { .oi-kv-tegel { transition: none; } .oi-kv-tegel:hover { transform: none; } }
/*  Rechterkolom op dit tabblad: alleen het voorbeeldvenster, geen voorbeeldkaart en tips. */
.oi-kv-prev { display: none; padding: 16px 18px 18px; border: 1px solid rgba(1, 16, 61, .09); border-radius: 20px; background: var(--wf-surface, #fff); }
/*  ── Tabblad Topbalkje (Overige instellingen, Tom 21-09-2026) ──
    De lijst met onderdelen, de regel die uitlegt waarom de balk op slot zit, en de overlay voor een
    ontwerp zonder topbalkje. */
.oi-tblijst { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/*  Een onderdeel dat op deze site niets kan tonen (geen adres, geen webshop): de tekst legt uit
    waarom. Het schuifje blijft bruikbaar -- vult de klant het gegeven later in, dan staat het er. */
.oi-li.-leeg .oi-li-t b { color: var(--wf-text-soft, #666c73); }
.oi-li.-leeg .oi-li-t span { font-style: italic; }
.oi-slotregel { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.55;
  color: var(--wf-text-soft, #666c73); }
.oi-slotregel > i { flex: none; margin-top: 2px; color: var(--wf-title, #a12359); }
/*  Een schuifje dat vast staat: nog wel te lezen, niet te bedienen. */
.wf-switch.-slot { opacity: .55; cursor: not-allowed; }

/*  Niet van toepassing op dit ontwerp: de kaarten blijven zichtbaar (zo ziet de klant wat hij mist)
    maar liggen onder een waas met een kaartje erover. */
.oi-panel .oi-tbwrap { display: grid; gap: 14px; }
.oi-panel .oi-tbwrap.-nvt { filter: grayscale(1); opacity: .5; pointer-events: none; user-select: none; }
.oi-panel:has(.oi-tbwrap.-nvt) { position: relative; }
/*  Het kaartje staat bovenaan en blijft bij het scrollen in beeld: precies midden over een lange
    lijst is het halve werk, dan moet de klant eerst scrollen om te lezen waarom niets reageert. */
.oi-nvt { position: absolute; inset: 0; display: grid; justify-items: center; align-items: start;
  padding: 18px 20px; z-index: 2; pointer-events: none; }
.oi-nvt-kaart { position: sticky; top: 18px; }
.oi-nvt-kaart { display: grid; justify-items: center; gap: 6px; max-width: 380px; padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 16px; background: rgba(24, 28, 38, .82);
  box-shadow: 0 18px 40px rgba(12, 16, 26, .28); text-align: center; color: #fff; }
.oi-nvt-kaart > i { font-size: 20px; opacity: .9; }
.oi-nvt-kaart > b { font-size: 15px; font-weight: 700; }
.oi-nvt-kaart > span { font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }

/*  Menu-overzicht: een hoofdpagina met "Tonen in het menu" aan die nog op concept staat. Grijs, niet
    te verslepen, met de reden erachter (Tom 21-09-2026). */
.mn-item.-concept { opacity: .72; background: var(--wf-surface-soft, #f7f8fb); }
.mn-item.-concept .mn-grip.-leeg { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; color: var(--wf-muted, #9aa2b1); cursor: default; }
.mn-conceptnaam { display: block; font-weight: 600; color: var(--wf-text-soft, #666c73); }
.mn-conceptreden { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--wf-text-soft, #666c73); }
.mn-conceptreden > i { color: var(--wf-title, #a12359); }
.mn-conceptreden a { color: var(--wf-title, #a12359); text-decoration: underline; }

.oi-zij.-bovenbalk .oi-kv-prev { display: block; }
.oi-zij.-bovenbalk > :not(.oi-kv-prev) { display: none; }
/*  Tabletstand: het voorbeeld neemt de hele breedte, de instellingen wijken even (zelfde afspraak als
    de footerpagina). wf-voorbeeld.js zet de klasse (BreedSelector=".oi-body"). */
@media (min-width: 992px) {
  .oi-body.-vbtablet { grid-template-columns: minmax(0, 1fr); }
  .oi-body.-vbtablet > :first-child { display: none; }
  .oi-body.-vbtablet .oi-zij { position: static; }
}
.oi-body.-vbgroot > :first-child { visibility: hidden; }
@media (max-width: 820px) { .oi-kv-volgorde { grid-template-columns: 1fr; } }

/* -- Voet -- */
.oi-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 26px; border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; }
.oi-foot-n { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.oi-foot-n i { color: var(--wf-blue, #32bcee); }
.oi-foot-a { display: flex; align-items: center; gap: 9px; }

/* -- Kleiner scherm -- */
@media (max-width: 1180px) {
  .oi-body { grid-template-columns: minmax(0, 1fr); }
  .oi-zij { position: static; }
}
@media (max-width: 820px) {
  .oi-grid, .oi-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .oi-head, .oi-lead, .oi-tabs, .oi-body, .oi-foot { padding-left: 16px; padding-right: 16px; }
  .oi-lead { margin-left: 16px; margin-right: 16px; }
  /* De tabbalk wrapt in plaats van zijwaarts te schuiven: een tabblad dat je niet ziet bestaat niet. */
  .oi-tabs { flex-wrap: wrap; gap: 8px; }
  .oi-tab { flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: center; padding: 10px 10px; font-size: 13px; }
  .oi-foot-a { flex-direction: column; align-items: stretch; width: 100%; }
  .oi-foot-a .wf-btn { width: 100%; justify-content: center; }
  .oi-foot-n { margin-left: 0; }
  /* De schuif krijgt de volle breedte; het vormpje ernaast eronder. */
  .oi-r-b { flex-wrap: wrap; }
  .oi-demo { width: 100%; }
}

/* -- Donkere modus -- */
[data-bs-theme="dark"] .oi,
[data-bs-theme="dark"] .oi-card,
[data-bs-theme="dark"] .oi-li,
[data-bs-theme="dark"] .oi-prev,
[data-bs-theme="dark"] .oi-r-h,
[data-bs-theme="dark"] .oi-mock-card { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .oi-ch,
[data-bs-theme="dark"] .oi-prev-h,
[data-bs-theme="dark"] .oi-foot,
[data-bs-theme="dark"] .oi-tabs,
[data-bs-theme="dark"] .oi-tip,
[data-bs-theme="dark"] .oi-r,
[data-bs-theme="dark"] .oi-mock { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .oi-in,
[data-bs-theme="dark"] .oi-mock-fld { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e8eaf1; }
[data-bs-theme="dark"] .oi-seg { background: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .oi-segb.is-on { background: #1a1d27; }

/* ── Gebruiker toevoegen / bewerken (.gb-*) ───────────────────────────────────
   Gebouwd naar het ontwerp "Webfix Gebruiker Toevoegen". Gedeeld door twee vensters die hetzelfde
   doen voor een ander soort gebruiker: /dashboard/Gebruikers (klantgebruikers, met type en
   moduletoegang) en /Gebruikers (Webfix-beheerders, zonder die twee). Eén stijl, zodat ze niet uit
   elkaar lopen zodra iemand er één aanpast. */

/* -- Kop: de merkbalk met het diamantje -- */
.gb-head {
  position: relative; display: flex; align-items: center; gap: 13px; overflow: hidden; padding: 16px 20px;
  background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%);
  background-size: 200% 100%; animation: wf-ai-drift 11s ease-in-out infinite;
}
/* Een lichte glans over de bovenkant, zodat de balk niet als een vlakke streep leest. */
.gb-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
}
.gb-head > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .gb-head { animation: none; } }
.gb-chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 13px; background: rgba(255, 255, 255, .94); box-shadow: 0 3px 10px rgba(1, 16, 61, .18);
}
.gb-chip img { width: 24px; height: 24px; object-fit: contain; display: block; }
.gb-t { flex: 1; min-width: 0; }
.gb-t b { display: block; font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 6px rgba(1, 16, 61, .3); }
.gb-t span { display: block; margin-top: 2px; font-size: 12.5px; color: #fff; text-shadow: 0 1px 6px rgba(1, 16, 61, .3); }
.gb-x {
  flex: none; width: 36px; height: 36px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .2); color: #fff; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .25s;
}
.gb-x:hover { background: rgba(255, 255, 255, .34); }

/* Het hele venster zit in één formulier. Bootstrap verwacht kop/lijf/voet als directe kinderen van
   .modal-content; met een formulier ertussen valt het scrollgedrag weg en schuift de kop uit beeld.
   Vandaar dat het formulier hier zelf de kolom is. */
/* flex:1 + min-height:0 en NIET max-height:100%: een percentage-hoogte tegen .modal-content
   (hoogte auto) valt terug op 'none', en dan groeide het venster gewoon buiten het scherm --
   met de kop en de knoppen boven en onder de vouw. Als flexkind erft het wel de max-height
   die Bootstrap op .modal-content zet, en kan het krimpen zodat het middenstuk scrollt. */
.gb-vorm { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.gb-vorm > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.gb-vorm > .gb-head, .gb-vorm > .gb-status, .gb-vorm > .gb-foot, .gb-vorm > .gb-fout { flex: none; }

/* -- Statusbalk: één vraag die boven alles uit gaat, namelijk of dit account mag inloggen -- */
.gb-status {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 13px 24px;
  border-bottom: 1px solid var(--wf-border, #e2e8f0); background: rgba(176, 209, 54, .09);
  transition: background .25s;
}
/* Uit = de groene tint eraf. Het account blijft bestaan, maar kan niet inloggen. */
.gb-status:has(input:not(:checked)) { background: #fbfbfd; }
.gb-status-t { flex: 1; min-width: 180px; }
.gb-status-t b { display: block; font-weight: 700; font-size: 14px; color: var(--wf-text, #1e293b); }
.gb-status-t span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
/* De schakelaar is de gedeelde .wf-switch; alleen het groen hoort hier bij "actief". */
.gb-status .wf-switch input:checked ~ .wf-switch-track { background: #6f8a1b; }
.gb-status .wf-switch-l { font-weight: 700; font-size: 12.5px; color: #4e6711; }
.gb-status:has(input:not(:checked)) .wf-switch-l { color: var(--wf-text-soft, #666c73); }

/* -- Lijf -- */
.gb-body { display: grid; grid-template-columns: 1fr 1.12fr; gap: 18px; padding: 18px 24px 22px; align-items: start; }
.gb-body.-enkel { grid-template-columns: minmax(0, 1fr); }
.gb-cols { display: flex; flex-direction: column; gap: 14px; }

.gb-card { border: 1px solid rgba(1, 16, 61, .09); border-radius: 18px; overflow: hidden; background: var(--wf-surface, #fff); }
.gb-ch { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f8f9fc; border-bottom: 1px solid var(--wf-border, #e2e8f0); }
.gb-ch i { font-size: 12.5px; color: var(--wf-title, #a12359); }
.gb-ch b { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.gb-ch .n { font-weight: 700; font-size: 11.5px; color: var(--wf-text-soft, #666c73); }
.gb-cb { padding: 15px 16px 17px; }

/* -- Velden -- */
.gb-l { display: block; margin: 0 0 6px; font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.gb-l .opt { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11px; }
.gb-in {
  display: block; box-sizing: border-box; width: 100%; height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 13.5px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.gb-in::placeholder { color: var(--wf-muted, #9aa2b1); }
.gb-in:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.gb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gb-two + .gb-two { margin-top: 12px; }
.gb-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
/* Het oogje bij het wachtwoordveld ligt in het veld in plaats van als losse knop ernaast. */
/*  Een vast voorvoegsel vóór een veld — de "/" van een sneltoets: het hoort bij de waarde, maar
    typ je niet zelf. Staat in het veld en niet ervoor, zodat de rij niet uit elkaar valt. */
.gb-veldvoor { position: relative; display: block; }
.gb-veldvoor .gb-teken {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: #9aa2b1; pointer-events: none;
}
.gb-veldvoor .gb-in { padding-left: 30px; }
/*  Een tekstvlak in dit venster is geen invoerregel: het mag meegroeien met wat erin staat. */
textarea.gb-in { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; }

.gb-pwveld { position: relative; }
.gb-pwveld .gb-in { padding-right: 44px; }
.gb-oog {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: none; border-radius: 9px; background: transparent; cursor: pointer; font-size: 13px;
  color: var(--wf-text-soft, #666c73); transition: background .2s, color .2s;
}
.gb-oog:hover { background: rgba(1, 16, 61, .05); color: var(--wf-text, #1e293b); }

/* -- Aanhef -- */
.gb-aanhef { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.gb-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: #f2f4f8; }
.gb-segb { position: relative; height: 32px; padding: 0 13px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--wf-text-soft, #666c73); white-space: nowrap; transition: background .2s, color .2s; }
.gb-segb input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gb-segb span { display: inline-flex; align-items: center; height: 100%; }
.gb-segb:hover { color: var(--wf-text, #1e293b); }
.gb-segb:has(input:checked) { background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); font-weight: 700; box-shadow: 0 1px 3px rgba(18, 20, 32, .14); }
.gb-segb:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }
.gb-vb { font-size: 12px; font-style: italic; color: var(--wf-text-soft, #666c73); }

/* -- Wachtwoordregel bij toevoegen -- */
.gb-pw { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px; border: 1px dashed rgba(1, 16, 61, .14); background: #fbfbfd; }
.gb-pw i { flex: none; font-size: 13px; color: #5f7a12; }
.gb-pw span { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.gb-pw b { color: var(--wf-text, #1e293b); }

/* -- Vinkje (gedeeld door de welkomstmail en de moduleregels) -- */
.gb-chk { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.gb-chk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gb-box {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  border-radius: 6px; border: 1.5px solid rgba(1, 16, 61, .22); background: var(--wf-surface, #fff);
  font-size: 9px; color: transparent; transition: background .2s, border-color .2s, color .2s;
}
.gb-chk input:checked ~ .gb-box,
.gb-mod input:checked ~ .gb-box { background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff; }
.gb-chk input:focus-visible ~ .gb-box,
.gb-mod input:focus-visible ~ .gb-box { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }
.gb-chk-l { font-weight: 600; font-size: 13.5px; color: var(--wf-text, #1e293b); }

/* -- Type gebruiker -- */
.gb-rol { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.gb-r {
  position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border-radius: 15px;
  border: 1px solid rgba(1, 16, 61, .10); background: var(--wf-surface, #fff); cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s;
}
.gb-r input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gb-r:hover { border-color: rgba(218, 23, 108, .3); }
.gb-r:has(input:checked) { border-color: var(--wf-pink, #da176c); background: var(--wf-pink-50, rgba(218, 23, 108, .06)); }
.gb-r:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }
.gb-r-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: #f4f5f9; color: var(--wf-text-soft, #666c73); font-size: 13px; }
.gb-r:has(input:checked) .gb-r-ic { background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); }
.gb-r-t { flex: 1; min-width: 0; }
.gb-r-t b { display: block; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.gb-r:has(input:checked) .gb-r-t b { color: var(--wf-title, #a12359); }
.gb-r-t span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.gb-r-t .geen { display: block; margin-top: 4px; font-weight: 700; font-size: 12px; color: var(--wf-title, #a12359); }

/* -- Toegang tot onderdelen -- */
.gb-modh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 11px; }
.gb-modh .t { flex: 1; min-width: 150px; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.gb-mini {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 9999px;
  border: 1px solid rgba(1, 16, 61, .13); background: var(--wf-surface, #fff); cursor: pointer;
  font-weight: 700; font-size: 11.5px; color: var(--wf-text, #1e293b); white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.gb-mini:hover { border-color: var(--wf-pink, #da176c); color: var(--wf-title, #a12359); background: var(--wf-pink-50, rgba(218, 23, 108, .06)); }
.gb-mini i { font-size: 10px; }
.gb-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 10px; }
.gb-mod { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; cursor: pointer; transition: background .18s; }
.gb-mod input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gb-mod:hover { background: rgba(1, 16, 61, .035); }
.gb-mod-l { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; color: var(--wf-text, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-mod:has(input:not(:checked)) .gb-mod-l { color: var(--wf-text-soft, #666c73); }
.gb-alles { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 12px; background: var(--wf-blue-50, rgba(50, 188, 238, .08)); border: 1px solid rgba(50, 188, 238, .26); }
.gb-alles i { flex: none; font-size: 12px; color: #1f8fbb; }
.gb-alles span { font-size: 12.5px; line-height: 1.5; color: #12667f; }

/* -- Voet -- */
.gb-foot { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 15px 24px 18px; border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; }
.gb-foot-a { display: flex; align-items: center; gap: 9px; }
.gb-foot-n { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; text-align: right; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.gb-foot-n i { color: var(--wf-muted, #9aa2b1); }

/* -- Foutmelding -- */
.gb-fout { margin: 0 24px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(216, 31, 37, .28); background: rgba(216, 31, 37, .07); font-size: 13px; color: #b3181d; }

/* -- Kleiner scherm -- */
@media (max-width: 1000px) { .gb-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .gb-head, .gb-status, .gb-body, .gb-foot { padding-left: 16px; padding-right: 16px; }
  .gb-fout { margin-left: 16px; margin-right: 16px; }
  .gb-two, .gb-rol { grid-template-columns: 1fr; }
  .gb-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* De hoofdactie over de volle breedte, zoals overal in het dashboard op een smal scherm. */
  .gb-foot-a { flex-direction: column; align-items: stretch; width: 100%; }
  .gb-foot-a .wf-btn { width: 100%; justify-content: center; }
  .gb-foot-n { margin-left: 0; text-align: left; }
}
@media (max-width: 420px) { .gb-mods { grid-template-columns: 1fr; } }

/* -- Donkere modus -- */
[data-bs-theme="dark"] .gb-card,
[data-bs-theme="dark"] .gb-r { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .gb-ch,
[data-bs-theme="dark"] .gb-foot,
[data-bs-theme="dark"] .gb-pw,
[data-bs-theme="dark"] .gb-status:has(input:not(:checked)) { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .gb-in { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e8eaf1; }
[data-bs-theme="dark"] .gb-seg { background: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .gb-segb:has(input:checked) { background: #1a1d27; }
[data-bs-theme="dark"] .gb-box, [data-bs-theme="dark"] .gb-mini { background: #1a1d27; border-color: rgba(255, 255, 255, .18); }

/* ── Voetbalken van de layout-pagina's: knoppen links, toelichting rechts ─────
   Eén vaste volgorde over alle schermen heen (afspraak 30-08): de hoofdknop staat linksvoor, want
   daar zoekt de klant hem, en de toelichting staat er niet tussen maar aan de andere kant.
   Op een telefoon vervalt dat: alles onder elkaar en de knoppen over de volle breedte. */
@media (max-width: 640px) {
  .kl-foot-a, .ft-foot-a, .mn-foot-a, .fb-foot-a {
    flex-direction: column; align-items: stretch; width: 100%; order: -1;
  }
  .kl-foot-a .wf-btn, .ft-foot-a .wf-btn, .mn-foot-a .wf-btn, .fb-foot-a .wf-btn { width: 100%; justify-content: center; }
  /*  De kinderen mogen hier NIET meer rekken: een oudere regel gaf ze `flex: 1 1 100%`, en in een
      kolom slaat die 100% op de HOOGTE. De knoppen deelden daardoor de hoogte van de balk en
      "Wijzigingen opslaan" was op een telefoon nog dertig pixels hoog — de belangrijkste knop van
      het scherm. Met flex:0 0 auto houdt elke knop weer zijn eigen 44px (Tom, 07-09-2026). */
  .kl-foot-a > *, .ft-foot-a > *, .mn-foot-a > *, .fb-foot-a > * { flex: 0 0 auto; }
  .kl-foot-n, .ft-foot-n, .fb-foot-n { margin-left: 0; }
}

/* ── Gedeelde koppel-kiezer (.lk-*, partial _WfLinkKiezer) ────────────────────
   Eén venster voor overal waar de klant een link legt. De kop en de knoppen volgen onze eigen stijl
   (CMS-kop, knoppen linksonder); de inhoud volgt het ontwerp uit "Webfix Voorpagina Beheer". */
.lk-body { padding: 18px 20px 20px; }
.lk-p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }

/* -- Intern of extern -- */
.lk-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.lk-mb {
  position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px;
  border: 1px solid rgba(1, 16, 61, .10); border-radius: 14px; background: var(--wf-surface, #fff);
  cursor: pointer; transition: border-color .2s, background .2s;
}
.lk-mb input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lk-mb:hover { border-color: rgba(218, 23, 108, .3); }
.lk-mb:has(input:checked) { border-color: var(--wf-pink, #da176c); background: var(--wf-pink-50, rgba(218, 23, 108, .06)); }
.lk-mb:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }
.lk-mb-i {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 10px; background: #f4f5f9; color: var(--wf-text-soft, #666c73); font-size: 13px;
}
.lk-mb:has(input:checked) .lk-mb-i { background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); }
.lk-mb-t { flex: 1; min-width: 0; }
.lk-mb-t b { display: block; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.lk-mb:has(input:checked) .lk-mb-t b { color: var(--wf-title, #a12359); }
.lk-mb-t span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }

/* -- Velden -- */
.lk-l { display: block; margin: 0 0 6px; font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.lk-in {
  display: block; box-sizing: border-box; width: 100%; height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 13.5px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.lk-in:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
/* Het icoontje staat ín het veld; de invoer schuift ervoor weg. */
.lk-iw { position: relative; display: block; }
.lk-iw > i { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); font-size: 13px; color: var(--wf-muted, #9aa2b1); pointer-events: none; }
.lk-in.-ico { padding-left: 36px; }
.lk-h { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.lk-h code { padding: 1px 5px; border-radius: 5px; background: #f2f3f8; font-family: ui-monospace, monospace; font-size: 11.5px; }

/* -- Fotomap van een item (Foto's koppelen): welke map op de website komt, koppelen of een eigen map -- */
.wf-fotomap-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.wf-fotomap-pad { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.wf-fotomap-pad > i { flex: none; color: var(--wf-muted, #9aa2b1); }
.wf-fotomap-knoppen { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; }
.wf-fotomap-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--wf-title, #a12359); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; transition: color .2s;
}
.wf-fotomap-link:hover, .wf-fotomap-link:focus-visible { color: var(--wf-pink, #da176c); }

/* -- Weergave van de link (alleen in de rich editor): tekstlink, knop of omlijnde knop -- */
.lk-stijl { margin-top: 16px; }
.lk-stijl .lk-mode { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }

/* -- Zoeken en filteren -- */
.lk-zoek { position: relative; display: block; margin-bottom: 11px; }
.lk-zoek > i { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); font-size: 13px; color: var(--wf-muted, #9aa2b1); pointer-events: none; }
.lk-zoek input {
  display: block; box-sizing: border-box; width: 100%; height: 40px; padding: 0 14px 0 36px; border-radius: 10px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 13.5px; color: var(--wf-text, #1e293b);
}
.lk-zoek input:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.lk-bronnen { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.lk-bron {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 9999px;
  border: 1px solid rgba(1, 16, 61, .10); background: var(--wf-surface, #fff); cursor: pointer;
  font-weight: 600; font-size: 12px; color: var(--wf-text-soft, #666c73); white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.lk-bron i { font-size: 11px; }
.lk-bron:hover { border-color: rgba(1, 16, 61, .22); color: var(--wf-text, #1e293b); }
.lk-bron.is-on { border-color: var(--wf-pink, #da176c); background: var(--wf-pink-50, rgba(218, 23, 108, .06)); color: var(--wf-title, #a12359); font-weight: 700; }

/* -- De lijst --
   Een eigen schuifgebied met een vaste hoogte: zonder plafond duwt een site met honderd pagina's de
   knoppen onderaan het venster uit. */
.lk-lijst { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; padding-right: 2px; }
.lk-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px;
  border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left;
  transition: background .18s, border-color .18s;
}
.lk-item:hover { background: rgba(1, 16, 61, .035); }
.lk-item.is-on { border-color: var(--wf-pink, #da176c); background: var(--wf-pink-50, rgba(218, 23, 108, .06)); }
.lk-item-i {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--wf-blue-50, rgba(50, 188, 238, .08)); color: #12667f; font-size: 12px;
}
.lk-item.is-on .lk-item-i { background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); }
.lk-item-b { flex: 1; min-width: 0; }
.lk-item-b b { display: block; font-weight: 600; font-size: 13.5px; color: var(--wf-text, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-item-b span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--wf-text-soft, #666c73); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-item-m { flex: none; font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--wf-muted, #9aa2b1); }
.lk-leeg { margin: 12px 0 0; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }

/* -- Nieuw venster -- */
.lk-nw { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--wf-border, #e2e8f0); }
.lk-chk { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.lk-chk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lk-box {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  border-radius: 6px; border: 1.5px solid rgba(1, 16, 61, .22); background: var(--wf-surface, #fff);
  font-size: 9px; color: transparent; transition: background .2s, border-color .2s, color .2s;
}
.lk-chk input:checked ~ .lk-box { background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff; }
.lk-chk input:focus-visible ~ .lk-box { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }

/* -- Voet: knoppen linksonder, toelichting rechts -- */
/* Twee regels: bovenin waar de link naartoe gaat, daaronder de knoppen. Die regel stond rechts
   naast de knoppen en werd dan afgekapt -- juist bij een lange slug, precies wanneer u wilt lezen
   of u de goede pagina hebt gekozen. Annuleren (.lk-foot-x) staat rechts, Koppelen vooraan. */
.lk-foot { display: flex; flex-direction: column; align-items: stretch; gap: 11px; padding: 15px 20px 17px; border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; }
.lk-foot-a { display: flex; align-items: center; gap: 9px; }
.lk-foot-a .lk-foot-x { margin-left: auto; }
.lk-foot-n { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--wf-text-soft, #666c73); min-width: 0; }
.lk-foot-n i { flex: none; color: var(--wf-muted, #9aa2b1); }
.lk-foot-n span { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
  .lk-mode, .lk-stijl .lk-mode { grid-template-columns: 1fr; }
  .lk-foot-a { flex-direction: column; align-items: stretch; width: 100%; }
  .lk-foot-a .wf-btn { width: 100%; justify-content: center; }
  .lk-foot-a .lk-foot-x { margin-left: 0; }
  .lk-lijst { max-height: 240px; }
}

[data-bs-theme="dark"] .lk-mb,
[data-bs-theme="dark"] .lk-item-i { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .lk-in,
[data-bs-theme="dark"] .lk-zoek input,
[data-bs-theme="dark"] .lk-bron,
[data-bs-theme="dark"] .lk-box { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e8eaf1; }
[data-bs-theme="dark"] .lk-foot { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }

/* Het linkveld met zijn "Koppel"-knop op één regel. De knop wordt door wf-link-kiezer.js naast elk
   veld met data-wf-koppel gezet, dus deze opmaak geldt overal waar zo'n veld staat. */
.wf-koppelrij { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.wf-koppelrij > input { flex: 1 1 auto; min-width: 0; }
.wf-koppel {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(218, 23, 108, .3); background: var(--wf-surface, #fff); cursor: pointer;
  font-weight: 700; font-size: 12.5px; color: var(--wf-title, #a12359); white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.wf-koppel:hover { background: var(--wf-pink-50, rgba(218, 23, 108, .06)); border-color: var(--wf-pink, #da176c); }
.wf-koppel i { font-size: 13px; }
/* Op een telefoon onder elkaar: naast elkaar blijft er van het veld te weinig over om een adres in te lezen. */
@media (max-width: 560px) {
  .wf-koppelrij { flex-direction: column; }
  .wf-koppel { justify-content: center; height: 44px; }   /* aanraakmaat */
}
[data-bs-theme="dark"] .wf-koppel { background: #1a1d27; }

/* ── Voorpagina beheren (.vp-*, /dashboard/layout/voorpagina) ─────────────────
   Gebouwd naar het ontwerp "Webfix Voorpagina Beheer": links de secties van de voorpagina in de
   volgorde waarin ze op de website staan, rechts de instellingen van de gekozen sectie.

   Waarom een rail en geen accordeon (wat het was): de voorpagina heeft zes onderdelen die elk een
   flink scherm aan instellingen hebben. In een accordeon scrol je daar telkens doorheen om bij het
   volgende te komen, en zie je nooit in één oogopslag wat er aan- en uitstaat. */
.vp {
  width: 100%; background: var(--wf-surface, #fff);
  border: 1px solid rgba(1, 16, 61, .07); border-radius: 26px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(1, 16, 61, .07);
  /* Altijd wat lucht onder de kaart; hij plakte tegen de onderkant van het scherm. */
  margin-bottom: 30px;
}

/* -- Kop -- */
.vp-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 20px 24px 18px; border-bottom: 1px solid var(--wf-border, #e2e8f0); }
.vp-h1 { margin: 0; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--wf-text, #1e293b); }
.vp-sub { margin: 5px 0 0; max-width: 720px; font-size: 13px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }
.vp-topr { display: flex; align-items: center; gap: 9px; margin-left: auto; }

/* -- Twee kolommen --
   `align-items: start` liet elke kolom zijn eigen hoogte houden. De streep boven de voet van de
   sectielijst en die boven de opslagbalk kwamen daardoor op verschillende hoogtes uit -- twee lijnen
   vlak bij elkaar die net niet doorlopen. De kolommen rekken nu allebei tot de onderkant van de
   kaart en hun voet wordt met `margin-top: auto` naar beneden geduwd. */
.vp-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; }
.vp-col { min-width: 0; display: flex; flex-direction: column; }
.vp-col:first-child { border-right: 1px solid var(--wf-border, #e2e8f0); }

/* -- Links: de secties -- */
.vp-lh { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
.vp-lh i { font-size: 13px; color: var(--wf-title, #a12359); }
.vp-lh .n { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 9999px; background: var(--wf-surface, #fff); border: 1px solid rgba(1, 16, 61, .10); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--wf-text, #1e293b); }
.vp-list { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.vp-groep { padding: 8px 8px 4px; font-weight: 700; font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--wf-muted, #9aa2b1); }
.vp-groep.-tweede { margin-top: 8px; border-top: 1px solid var(--wf-border, #e2e8f0); padding-top: 12px; }
.vp-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 13px;
  border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; width: 100%;
  transition: background .18s, border-color .18s;
}
.vp-item:hover { background: rgba(1, 16, 61, .035); }
.vp-item.is-on { border-color: var(--wf-pink, #da176c); background: var(--wf-pink-50, rgba(218, 23, 108, .06)); }
.vp-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--wf-blue-50, rgba(50, 188, 238, .08)); color: #12667f; font-size: 13px; }
.vp-item.is-on .vp-tile { background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); }
.vp-item.-uit .vp-tile { background: #f4f5f9; color: var(--wf-muted, #9aa2b1); }
.vp-it { flex: 1; min-width: 0; }
.vp-nm { display: block; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-item.is-on .vp-nm { color: var(--wf-title, #a12359); }
.vp-item.-uit .vp-nm { color: var(--wf-text-soft, #666c73); }
.vp-pos { display: block; margin-top: 2px; font-size: 11.5px; color: var(--wf-text-soft, #666c73); }
/* Het stipje zegt: deze sectie staat op de voorpagina. Zonder dat moet je elke sectie openklikken. */
.vp-stip { flex: none; width: 8px; height: 8px; border-radius: 9999px; background: #6f8a1b; }
.vp-item.-uit .vp-stip { background: #cfd4de; }
.vp-vast { flex: none; font-size: 11px; color: var(--wf-muted, #9aa2b1); }
/*  De voet van de sectielijst staat als eigen rasterrij naast de opslagbalk (zie Voorpagina.cshtml),
    dus de scheidingslijn van de kolom loopt hier door. */
.vp-lf {
  display: flex; align-items: center; padding: 12px 18px 16px;
  border-top: 1px solid var(--wf-border, #e2e8f0); border-right: 1px solid var(--wf-border, #e2e8f0);
}
.vp-lf-n { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.vp-lf-n i { flex: none; margin-top: 2px; color: var(--wf-muted, #9aa2b1); }

/* -- Rechts: kop van het paneel -- */
.vp-ph { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--wf-border, #e2e8f0); }
.vp-pic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 13px; background: var(--wf-pink-50, rgba(218, 23, 108, .08)); color: var(--wf-title, #a12359); font-size: 15px; }
.vp-pt { font-weight: 800; font-size: 17px; letter-spacing: -.015em; color: var(--wf-text, #1e293b); }
.vp-ps { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }
.vp-pa { display: flex; align-items: center; gap: 9px; margin-left: auto; }

/* -- De "tonen op de voorpagina"-balk --
   Eén vraag die boven de instellingen uit gaat: staat deze sectie überhaupt op de pagina? Groen zodra
   hij aanstaat, net als de "Activeren"-pil elders. */

/* -- De panelen -- */
.vp-pb { padding: 16px 22px 20px; }
.vp-panel { display: none; }
.vp-panel.is-on { display: block; }

/* -- Voet: knoppen linksonder, toelichting rechts -- */
.vp-pf { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 15px 22px 17px; border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; }
.vp-pf-a { display: flex; align-items: center; gap: 9px; }
.vp-pf-n { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.vp-pf-n i { color: var(--wf-muted, #9aa2b1); }

/* -- Kleiner scherm --
   Onder de 1000px gaat de sectielijst boven de instellingen staan in plaats van ernaast: twee smalle
   kolommen naast elkaar maken allebei onbruikbaar. De lijst wordt dan een horizontale strook. */
@media (max-width: 1000px) {
  .vp-grid { grid-template-columns: minmax(0, 1fr); }
  .vp-col:first-child { border-right: none; border-bottom: 1px solid var(--wf-border, #e2e8f0); }
  .vp-list { flex-direction: row; flex-wrap: wrap; }
  .vp-groep { width: 100%; }
  .vp-item { width: auto; flex: 1 1 210px; }
  .vp-lf { display: none; }
  .vp-pf { grid-column: 1; }
}
@media (max-width: 640px) {
  .vp-top, .vp-ph, .vp-pb, .vp-pf { padding-left: 16px; padding-right: 16px; }
  .vp-topr, .vp-pa { width: 100%; margin-left: 0; }
  .vp-topr .wf-btn, .vp-pa .wf-btn { flex: 1; justify-content: center; }
  .vp-item { flex: 1 1 100%; }
  .vp-pf-a { flex-direction: column; align-items: stretch; width: 100%; }
  .vp-pf-a .wf-btn { width: 100%; justify-content: center; }
  .vp-pf-n { margin-left: 0; }
}

/* -- Donkere modus -- */
[data-bs-theme="dark"] .vp { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .vp-lh,
[data-bs-theme="dark"] .vp-pf,
[data-bs-theme="dark"] .vp-col:first-child,
[data-bs-theme="dark"] .vp-ph,
[data-bs-theme="dark"] .vp-top,
[data-bs-theme="dark"] .vp-lf { border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .vp-lh .n { background: #1a1d27; border-color: rgba(255, 255, 255, .14); color: #e8eaf1; }

/* De aan/uit-schakelaar in de kop van een slide (voorpagina → slider). Uit betekent: de slide blijft
   bewaard met zijn tekst en foto, maar draait niet mee op de website. */
.wf-sl-aan { flex: none; margin-left: auto; }
.wf-sl-slide-head .wf-sl-rmbtn { margin-left: 10px; }
/* Een uitgezette slide oogt gedempt, zodat je in de lijst ziet welke niet meedraait. */
.wf-sl-slide:has([data-slide-aan]:not(:checked)) > .wf-sl-slide-head .ttl,
.wf-sl-slide:has([data-slide-aan]:not(:checked)) > .wf-sl-slide-head .wf-sl-prev { opacity: .55; }
.wf-sl-slide:has([data-slide-aan]:not(:checked)) > .wf-sl-slide-head .num { background: #eceef4; color: #9aa2b1; }
@media (max-width: 640px) {
  /* Op een telefoon wrapt de kop; dan hoort de schakelaar niet meer rechts weggeduwd te worden. */
  .wf-sl-slide-head { flex-wrap: wrap; row-gap: 8px; }
  .wf-sl-aan { margin-left: 0; }
}

/* ── Bouwstenen binnen een voorpagina-paneel ──────────────────────────────────
   Uit het ontwerp "Webfix Voorpagina Beheer". Bewust generiek gehouden (.vp-setcard, .vp-radio,
   .vp-lrow): de panelen gebruiken ze allemaal, en zo hoeft er per paneel geen eigen variant bij. */

/* Een groepje instellingen met een eigen kopje. */
.vp-setcard { border: 1px solid rgba(1, 16, 61, .09); border-radius: 16px; overflow: hidden; background: var(--wf-surface, #fff); margin-top: 16px; }
.vp-setcard-h { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid var(--wf-border, #e2e8f0); background: #f8f9fc; font-weight: 700; font-size: 13px; color: var(--wf-text, #1e293b); }
.vp-setcard-h i { font-size: 12.5px; color: var(--wf-title, #a12359); }
.vp-setcard-b { padding: 15px; }

/* Een keuze met uitleg eronder, in plaats van een kaal rondje met een label. */
.vp-radios { display: flex; flex-direction: column; gap: 8px; }
.vp-radio {
  position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
  border: 1px solid rgba(1, 16, 61, .10); border-radius: 13px; background: var(--wf-surface, #fff);
  cursor: pointer; transition: border-color .2s, background .2s;
}
.vp-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vp-radio:hover { border-color: rgba(218, 23, 108, .3); }
.vp-radio:has(input:checked) { border-color: var(--wf-pink, #da176c); background: var(--wf-pink-50, rgba(218, 23, 108, .06)); }
.vp-radio:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }
.vp-dot { flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 9999px; border: 1.5px solid rgba(1, 16, 61, .22); background: var(--wf-surface, #fff); transition: border-color .2s, box-shadow .2s; }
.vp-radio:has(input:checked) .vp-dot { border-color: var(--wf-pink, #da176c); box-shadow: inset 0 0 0 3.5px var(--wf-surface, #fff), inset 0 0 0 17px var(--wf-pink, #da176c); }
.vp-rtx { flex: 1; min-width: 0; }
.vp-rtx b { display: block; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.vp-radio:has(input:checked) .vp-rtx b { color: var(--wf-title, #a12359); }
.vp-rtx span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }

/* Een kopregel met een knop rechts (bv. "Slides" + de vertaalknop). */
.vp-lrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.vp-l { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--wf-text-soft, #666c73); }
/* Het lijntje maakt de kopregel af tot aan de rand van de kaart. */
.vp-l::after { content: ""; flex: 1; height: 1px; background: var(--wf-border, #e2e8f0); }
.vp-l + .vp-l { margin-top: 22px; }
.vp-lrow > .vp-l { flex: none; }
.vp-lrow > .vp-lrow-r { margin-left: auto; }

/* Twee kolommen binnen een paneel, die op een smal scherm stapelen. */
.vp-two2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .vp-two2 { grid-template-columns: 1fr; } }

[data-bs-theme="dark"] .vp-setcard,
[data-bs-theme="dark"] .vp-radio { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .vp-setcard-h { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }

/* De editors hebben elk hun eigen voet met "Wijzigingen opslaan". Binnen de voorpagina staat die
   knop al onderaan het paneel ("Sectie opslaan"), dus daar is de eigen voet dubbelop: twee
   opslaanknoppen onder elkaar laat de klant raden welke de goede is. Op de losse editorpagina's
   blijft hij staan. */
.vp-panel .wf-sl-foot,
.vp-panel .wf-editor-foot,
.vp-panel .wf-editor-save { display: none; }

/* ── De panelen in de vormtaal van het ontwerp ────────────────────────────────
   De editors achter de panelen zijn samen ruim tweeduizend regels die werken, los getest worden en
   elk hun eigen opslagpunt hebben. Ze zijn opgebouwd uit Bootstrap-kaarten en -velden.

   In plaats van die markup te herschrijven — met alle kans op stille regressies — legt deze laag de
   opmaak van het ontwerp eroverheen, alleen binnen .vp-panel. Buiten de voorpagina (de losse
   editorpagina's) blijven de editors er onveranderd uitzien.

   Wat het ontwerp voorschrijft en wat hier dus gebeurt:
   - kaarten: witte kaart met een grijze kop en een zachte rand, geen schaduw;
   - velden: label in kleinkapitaal, invoer op #fbfbfd met een blauwe focusrand;
   - hints: kleiner en grijs, direct onder het veld;
   - keuzepillen (talen) en vinkjes in dezelfde vorm als elders in het dashboard. */

/* -- Kaarten -- */
.vp-panel .card {
  border: 1px solid rgba(1, 16, 61, .09) !important; border-radius: 16px !important;
  box-shadow: none !important; background: var(--wf-surface, #fff);
}
.vp-panel .card + .card { margin-top: 16px; }
.vp-panel .card-header {
  padding: 12px 15px; border-bottom: 1px solid var(--wf-border, #e2e8f0);
  background: #f8f9fc; font-weight: 700; font-size: 13px; color: var(--wf-text, #1e293b);
}
.vp-panel .card-body { padding: 15px; }
/* De editors zetten er hun eigen koptekst in; die krijgt de maat van het ontwerp. */
.vp-panel .card-body > h5,
.vp-panel .card-body > h6 { font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }

/* -- Velden -- */
.vp-panel .form-label,
.vp-panel label.form-label {
  margin-bottom: 6px; font-weight: 700; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wf-text-soft, #666c73);
}
/* "(optioneel)" mag niet meeschreeuwen in kleinkapitaal. */
.vp-panel .form-label .opt,
.vp-panel .form-label small { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11px; }
.vp-panel .form-control,
.vp-panel .form-select {
  min-height: 40px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 13.5px; color: var(--wf-text, #1e293b);
}
.vp-panel textarea.form-control { min-height: 84px; }
.vp-panel .form-control:focus,
.vp-panel .form-select:focus {
  border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff);
  box-shadow: 0 0 0 3px rgba(50, 188, 238, .14);
}
.vp-panel .form-control::placeholder { color: var(--wf-muted, #9aa2b1); }
.vp-panel .form-text { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.vp-panel .input-group-text {
  border-radius: 10px; border: 1px solid rgba(1, 16, 61, .10); background: #f4f5f9;
  font-size: 12.5px; color: var(--wf-text-soft, #666c73);
}

/* -- Taalkeuze en andere pillen -- */
.vp-panel .nav-pills { gap: 6px; }
.vp-panel .nav-pills .nav-link {
  height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px;
  border-radius: 9999px; border: 1px solid rgba(1, 16, 61, .10); background: var(--wf-surface, #fff);
  font-weight: 600; font-size: 12.5px; color: var(--wf-text-soft, #666c73);
}
.vp-panel .nav-pills .nav-link.active {
  border-color: var(--wf-pink, #da176c); background: var(--wf-pink-50, rgba(218, 23, 108, .06));
  color: var(--wf-title, #a12359); font-weight: 700;
}

/* -- Vinkjes en schakelaars --
   De editors gebruiken de Bootstrap-varianten; die krijgen hier de maat en de kleur van het ontwerp
   zodat ze niet uit de toon vallen naast onze eigen .wf-switch. */
.vp-panel .form-check-input { width: 18px; height: 18px; margin-top: .15rem; border-color: rgba(1, 16, 61, .22); }
.vp-panel .form-check-input:checked { background-color: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); }
.vp-panel .form-check-input:focus { border-color: var(--wf-blue, #32bcee); box-shadow: 0 0 0 3px rgba(50, 188, 238, .2); }
.vp-panel .form-switch .form-check-input { width: 36px; height: 20px; border-radius: 9999px; }
.vp-panel .form-check-label { font-size: 13.5px; color: var(--wf-text, #1e293b); }

/* -- Knoppen binnen een paneel --
   De editors gebruiken Bootstrap-knoppen; die krijgen de vorm van het ontwerp (pil, rustig) zonder
   dat er per editor iets aangepast hoeft te worden. De hoofdactie van de pagina staat onderaan. */
.vp-panel .btn { border-radius: 9999px; font-weight: 700; font-size: 12.5px; padding: 8px 16px; }
.vp-panel .btn-sm { padding: 6px 13px; font-size: 12px; }

/* -- Toelichtingen -- */
.vp-panel .alert {
  border-radius: 13px; border: 1px solid rgba(50, 188, 238, .26);
  background: var(--wf-blue-50, rgba(50, 188, 238, .08)); color: #12667f;
  font-size: 12.5px; line-height: 1.55; padding: 11px 14px;
}
.vp-panel .alert-warning { border-color: rgba(220, 158, 47, .3); background: rgba(220, 158, 47, .1); color: #7a5510; }

/* -- Twee kolommen zoals het ontwerp ze tekent -- */
.vp-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .vp-cols2 { grid-template-columns: 1fr; } }

/* -- Tip-balk -- */
.vp-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 13px;
  font-size: 12.5px; line-height: 1.55; margin-bottom: 14px;
}
.vp-note i { flex: none; margin-top: 2px; font-size: 12px; }
.vp-note.-tip { border: 1px solid rgba(220, 158, 47, .3); background: rgba(220, 158, 47, .09); color: #7a5510; }
.vp-note.-tip i { color: #dc9e2f; }

/* -- Donkere modus -- */
[data-bs-theme="dark"] .vp-panel .card { background: #1a1d27; border-color: rgba(255, 255, 255, .09) !important; }
[data-bs-theme="dark"] .vp-panel .card-header { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .vp-panel .form-control,
[data-bs-theme="dark"] .vp-panel .form-select,
[data-bs-theme="dark"] .vp-panel .nav-pills .nav-link { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e8eaf1; }
[data-bs-theme="dark"] .vp-panel .input-group-text { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }

/* De sectieschakelaar van een editor staat binnen de voorpagina al bovenaan in de balk "Tonen op de
   voorpagina", die hem bedient. Twee schakelaars voor hetzelfde onder elkaar laat de klant raden
   welke telt. De uitleg eronder blijft wel staan: die vertelt waarom een aangezette banner soms
   alsnog niet verschijnt. Op de losse editorpagina's blijft de schakelaar gewoon zichtbaar. */
.vp-panel .wf-sectie-schakelaar { display: none; }

/* De blok-bewerkpop-up van de voorpagina: de kop is de gedeelde CMS-kop geworden en de voet volgt de
   afspraak knop-links/toelichting-rechts. De opmaak van de pop-up zelf staat in webfix.css; alleen
   deze twee randen worden hier overschreven. */
.wf-vpe-modal-head { padding: 0 !important; border-bottom: none !important; background: transparent !important; }
.wf-vpe-dialog > .wf-flows-modalhead { border-radius: 18px 18px 0 0; }
.wf-vpe-modal-foot { justify-content: flex-start !important; background: #fbfbfd; }
.wf-vpe-foot-a { display: flex; align-items: center; gap: 9px; }
.wf-vpe-foot-n { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.wf-vpe-foot-n i { color: var(--wf-muted, #9aa2b1); }
@media (max-width: 560px) {
  .wf-vpe-foot-a { flex-direction: column; align-items: stretch; width: 100%; }
  .wf-vpe-foot-a .wf-btn { width: 100%; justify-content: center; }
  .wf-vpe-foot-n { margin-left: 0; }
}
[data-bs-theme="dark"] .wf-vpe-modal-foot { background: rgba(255, 255, 255, .03); }

/* De pop-up groeit naar onderen door in plaats van zelf te scrollen. Hij stond op max-height:92vh met
   overflow-y:auto, dus zat er een scrollbalk ÍN het venster — je scrolde door een vakje terwijl er om
   je heen niets bewoog. Nu scrolt de laag eromheen (die is schermvullend, dus dat leest als de
   scrollbalk van de pagina) en heeft het venster zelf er geen meer. */
.wf-vpe-modal { align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; padding: 24px 20px; }
.wf-vpe-dialog { max-height: none; overflow: visible; margin: auto; }

/* Op een groot scherm mag hij breder en ruimer: er staan zes kleurstalen en zes opmaak-miniaturen
   naast elkaar, en die stonden op 780px tegen elkaar aan gedrukt. */
@media (min-width: 992px) {
  .wf-vpe-dialog { width: min(1040px, 94vw); }
  .wf-vpe-modal { padding: 40px 24px; }
  .wf-vpe-modal-body { padding: 2rem 2.25rem; }
  .wf-vpe-modal-foot { padding: 1.25rem 2.25rem 1.5rem; }
  .wf-vpe-dialog > .wf-flows-modalhead { padding-left: 2.25rem; padding-right: 1.25rem; }
  /* Meer lucht tussen de stappen in de pop-up. */
  .wf-vpe-modal-body > .wf-vpe-step + .wf-vpe-step { margin-top: 1.75rem; }
}

/* De kaartjes in het grote voorbeeld van de blok-bewerkpop-up: een foto met de gekozen waas erover
   en twee tekstbalkjes eronder — hetzelfde wat een kaart op de website doet. Zo zie je de overlay
   waar je hem instelt, en niet alleen in het miniatuurtje naast de schuif. */
.wf-vpe-pv-cards { display: flex; gap: 10px; max-width: 440px; }
.wf-vpe-pv-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wf-vpe-pv-card-foto {
  position: relative; display: block; height: 52px; border-radius: 8px; overflow: hidden;
  background: #cfd4da center/cover no-repeat;
}
.wf-vpe-pv-card-waas { position: absolute; inset: 0; transition: opacity .18s, background-color .18s; }
.wf-vpe-pv-card-bar { height: 7px; border-radius: 4px; border: 1px solid; width: 90%; }
.wf-vpe-pv-card-bar.w2 { width: 62%; }
@media (max-width: 560px) {
  /* Twee kaartjes is genoeg om het effect te laten zien; drie worden hier te smal. */
  .wf-vpe-pv-card:last-child { display: none; }
}

/* ── Gedeeld vertaalvenster (.vt-*, partial _WfVertaalModal) ────────────────── */
.vt-body { padding: 18px 20px 20px; }
.vt-p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }
.vt-opts { display: flex; flex-direction: column; gap: 10px; }
.vt-opt {
  position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px;
  border: 1px solid rgba(1, 16, 61, .10); border-radius: 15px; background: var(--wf-surface, #fff);
  cursor: pointer; transition: border-color .2s, background .2s;
}
.vt-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vt-opt:hover { border-color: rgba(218, 23, 108, .3); }
.vt-opt:has(input:checked) { border-color: var(--wf-pink, #da176c); background: var(--wf-pink-50, rgba(218, 23, 108, .06)); }
.vt-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }
.vt-box {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  margin-top: 1px; border-radius: 6px; border: 1.5px solid rgba(1, 16, 61, .22); background: var(--wf-surface, #fff);
  font-size: 9px; color: transparent; transition: background .2s, border-color .2s, color .2s;
}
.vt-opt input:checked ~ .vt-box { background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff; }
.vt-ot { flex: 1; min-width: 0; }
.vt-ot b { display: block; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.vt-opt:has(input:checked) .vt-ot b { color: var(--wf-title, #a12359); }
.vt-ot span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.vt-foot { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 15px 20px 17px; border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; }
.vt-foot-a { display: flex; align-items: center; gap: 9px; }
.vt-foot-n { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.vt-foot-n i { color: var(--wf-muted, #9aa2b1); }
@media (max-width: 560px) {
  .vt-foot-a { flex-direction: column; align-items: stretch; width: 100%; }
  .vt-foot-a .wf-btn { width: 100%; justify-content: center; }
  .vt-foot-n { margin-left: 0; }
}
[data-bs-theme="dark"] .vt-opt { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .vt-foot { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }

/* Op tablet en telefoon moet alles in een paneel met een vinger te raken zijn. De editors zijn
   ontworpen voor een muis en hebben knopjes en pillen van rond de 32px; hieronder krijgen ze de maat
   die op touch werkt.
   De grens ligt op 1100px. Dat is net boven een iPad liggend (1024): ook dat is een touchscherm, en
   met een grens van 1000 vielen die knoppen er precies buiten. Op een kleine laptop tussen 1024 en
   1100 zijn de knoppen dan wat ruimer -- dat schaadt niets. Let op dat een mediaquery de
   vensterbreedte MET scrollbalk meet: een grens van 900 miste een tablet van 912. */
@media (max-width: 1100px) {
  /* height: auto erbij, anders wint de vaste hoogte die deze knopjes zelf meekrijgen van min-height. */
  .vp-panel .btn,
  .vp-panel .nav-pills .nav-link,
  .vp-panel .wf-sl-translate,
  .vp-panel .wf-sl-rmbtn,
  .vp-panel .wf-sl-mbtn,
  .vp-panel .wf-sl-btn-ghost,
  .vp-panel .wf-sl-btn-save { height: auto; min-height: 40px; }
  .vp-panel .form-control,
  .vp-panel .form-select,
  .vp-panel .wf-sl-in,
  .vp-panel .wf-sl-sel,
  .vp-panel input[type="text"],
  .vp-panel input[type="number"],
  .vp-panel input[type="url"],
  .vp-panel input[type="email"],
  .vp-panel .vp-inp { height: auto; min-height: 44px; }
  /* De bedieningen uit het voorpagina-ontwerp zijn 36-37px hoog; met een vinger is dat te klein. */
  .vp-panel .vp-sbtn,
  .vp-panel .vp-aibtn,
  .vp-panel .vp-tr,
  .vp-panel .vp-ctab,
  .vp-panel .vp-kop,
  .vp-panel .vp-sedit,
  .vp-panel .vp-fbtn,
  .vp-panel .vp-rdel,
  .vp-panel .vp-hb,
  .vp-panel .vp-mg,
  .vp-panel .wf-koppel,
  .vp-panel .vp-sel,
  .vp-panel .wf-tabx { height: auto; min-height: 44px; }
  /* De schakelaar zit in de gekleurde kop van een slide of balk; die kop wordt daardoor wat hoger,
     maar hij moet met een duim te raken zijn. */
  .vp-panel .vp-swb { height: 44px; padding-right: 14px; }
  .vp-panel .vp-r2 { min-height: 32px; }
  .vp-panel .vp-ovc { width: 44px; height: 44px; }
  .vp-panel .vp-rng { height: 34px; }
  .vp-panel .vp-rng::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8.5px; }
  .vp-panel .vp-rng::-moz-range-thumb { width: 22px; height: 22px; }
  /* De hoofdactie van een balk over de volle breedte, zoals overal op mobiel. */
  .vp-panel .vp-bf > .wf-btn { width: 100%; justify-content: center; }

  /* Dezelfde maten op de LOSSE editorpagina's (/dashboard/layout/slider en zo). Die staan niet in een
     .vp-panel, dus zonder deze regels bleven de knoppen daar op hun ontwerpmaat staan. */
  .vp-inp, .vp-sel { height: auto; min-height: 44px; }
  .vp-sbtn, .vp-aibtn, .vp-tr, .vp-ctab, .vp-kop, .vp-sedit,
  .vp-fbtn, .vp-rdel, .vp-hb, .vp-mg, .wf-koppel, .vp-medit { height: auto; min-height: 44px; }
  .vp-swb { height: 44px; padding-right: 14px; }
  .vp-r2 { min-height: 32px; }
  .vp-ovc { width: 44px; height: 44px; }
  .vp-bf > .wf-btn { width: 100%; justify-content: center; }
  /* Het greepje en de kop van een slide moeten met een vinger te pakken zijn. */
  .vp-panel .wf-sl-slide-head { min-height: 52px; }
  .vp-panel .wf-drag-handle { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  /* Een schuif is met een vinger lastig te pakken op de standaardhoogte; wat lucht eromheen en een
     grotere knop maken het verschil. */
  .vp-panel .form-range { height: 34px; }
  .vp-panel .form-range::-webkit-slider-thumb { width: 22px; height: 22px; }
  .vp-panel .form-range::-moz-range-thumb { width: 22px; height: 22px; }
}

/* Op de smalste schermen (320px) passen een paar knoppen uit de editors niet meer naast hun buurman
   en steken ze buiten hun kader. Daar krijgen ze de volle breedte in plaats van een vaste. */
@media (max-width: 400px) {
  .vp-panel .wf-sl-translate,
  .vp-panel .wf-vpe-videobtn {
    width: 100%; max-width: 100%; justify-content: center; white-space: normal; text-align: center;
  }
  /* Deze twee kolommen hebben een min-width van 260-280px plus de padding eromheen; op 305px past
     dat net niet en duwen ze hun kader uit. De minimumbreedte mag hier vervallen. */
  .vp-panel .wf-vpe-addcol,
  .vp-panel .wf-vpe-helpcol { min-width: 0; flex-basis: 100%; }
  /* De kopregel staat op nowrap, dus de knop kon niet naar een eigen regel en bleef op zijn
     inhoudsbreedte staan (209px op een scherm van 305). Laten wrappen en een hele regel geven. */
  .vp-panel .wf-vpe-addhead { flex-wrap: wrap; row-gap: 10px; }
  .vp-panel .wf-vpe-videobtn { position: static; flex: 1 1 100%; }
  /* Lange koppen mogen afbreken in plaats van hun kader op te rekken. */
  .vp-panel .fw-semibold { overflow-wrap: anywhere; }
  /* De kopregel boven de slides (label + vertaalknop) stapelt dan ook. */
  .vp-panel .wf-sl-divider { flex-wrap: wrap; row-gap: 8px; }
  .vp-panel .wf-sl-divider .line { display: none; }
  /* Lange uitleg mag afbreken in plaats van zijn kader uit te duwen. */
  .vp-panel .text-muted { overflow-wrap: anywhere; }
}

/* ── Voorpagina: de details uit het ontwerp ───────────────────────────────────
   Nagelopen tegen "Webfix Voorpagina Beheer": de sleepbare rijen, hun cursors en de manier waarop
   een rij eruitziet terwijl hij verplaatst wordt. */

/* De scheidingslijn tussen de sectielijst en de instellingen loopt door tot onderaan. Met
   align-items:start werd de linkerkolom niet hoger dan zijn inhoud en stopte de lijn halverwege. */
.vp-grid { align-items: stretch; }
.vp-col:first-child { display: flex; flex-direction: column; }
/* De lijst duwt de voetnoot naar beneden, zodat die op de onderrand blijft staan. */
.vp-col:first-child .vp-list { flex: 1 1 auto; align-content: flex-start; }

/* -- Sleepbaar: de cursor vertelt het, ook zonder dat je het greepje raakt -- */
.vp-panel .wf-sl-slide-head,
.vp-panel .wf-vpe-row,
.vp-panel [data-mrow] { cursor: grab; }
.vp-panel .wf-sl-slide-head:active,
.vp-panel .wf-vpe-row:active,
.vp-panel [data-mrow]:active,
.vp-panel .wf-drag-handle:active { cursor: grabbing; }
/* Wat ín die kop een eigen actie is, houdt zijn eigen cursor: anders lijkt een knop ook sleepbaar. */
.vp-panel .wf-sl-slide-head button,
.vp-panel .wf-sl-slide-head label,
.vp-panel .wf-vpe-row button,
.vp-panel [data-mrow] button { cursor: pointer; }

/* -- De slidekop als gekleurde balk, zoals het ontwerp hem tekent --
   Een slide is een blok met een eigen kop; die kop draagt de merkkleur zodat je in een lijst van vier
   of vijf meteen ziet waar de ene slide ophoudt en de volgende begint. Alleen binnen de voorpagina:
   de losse slider-pagina houdt haar eigen opmaak tot die ook aan de beurt is. */
.vp-panel .wf-sl-slide-head {
  background: var(--wf-title, #a12359); border-bottom: none;
  transition: background .2s cubic-bezier(.4, 0, .2, 1);
}
.vp-panel .wf-sl-slide-head .ttl { color: #fff; }
.vp-panel .wf-sl-slide-head .wf-sl-prev { color: rgba(255, 255, 255, .82); }
.vp-panel .wf-sl-slide-head .grip { color: rgba(255, 255, 255, .72); }
.vp-panel .wf-sl-slide-head .num { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); color: #fff; }
.vp-panel .wf-sl-slide-head .wf-sl-chev { color: rgba(255, 255, 255, .72); }
/* De verwijderknop wordt een pil op de gekleurde balk in plaats van een witte knop. */
.vp-panel .wf-sl-slide-head .wf-sl-rmbtn {
  border: none; background: rgba(255, 255, 255, .18); color: #fff;
}
.vp-panel .wf-sl-slide-head .wf-sl-rmbtn:hover { background: rgba(255, 255, 255, .3); color: #fff; }
/* De "Activeren"-pil op de balk: lichte tekst, en de pil zelf wat doorzichtig. */
.vp-panel .wf-sl-slide-head .wf-switch.-pil { background: rgba(255, 255, 255, .18); }
.vp-panel .wf-sl-slide-head .wf-switch.-pil .wf-switch-l { color: rgba(255, 255, 255, .9); }
.vp-panel .wf-sl-slide-head .wf-switch.-pil:has(input:checked) { background: rgba(255, 255, 255, .28); }
.vp-panel .wf-sl-slide-head .wf-switch.-pil:has(input:checked) .wf-switch-l { color: #fff; }
/* Een uitgezette slide krijgt een gedempte kop in plaats van de volle merkkleur. */
.vp-panel .wf-sl-slide:has([data-slide-aan]:not(:checked)) > .wf-sl-slide-head { background: #8a8f9c; }

/* Het pijltje draait mee met open/dicht, zoals in het ontwerp. */
.vp-panel .wf-sl-chev { transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.vp-panel .wf-sl-slide.is-open .wf-sl-chev { transform: rotate(180deg); }

/* -- De rij die je verplaatst -- */
.vp-panel .wf-sl-slide,
.vp-panel .wf-vpe-row,
.vp-panel [data-mrow] { transition: border-color .2s, box-shadow .2s, opacity .2s, transform .18s cubic-bezier(.4, 0, .2, 1); }
.vp-panel .wf-vpe-row:hover,
.vp-panel [data-mrow]:hover { border-color: rgba(1, 16, 61, .16); box-shadow: 0 4px 14px rgba(1, 6, 20, .06); }

/* dragula laat het origineel staan als .gu-transit en sleept een kopie mee als .gu-mirror.
   Het origineel dempen laat zien waar de rij vandaan komt; de kopie krijgt een lichte tilt en een
   schaduw zodat hij duidelijk "los" ligt. */
.gu-transit { opacity: .45 !important; border-color: var(--wf-pink, #da176c) !important; }
.gu-mirror {
  opacity: .95; cursor: grabbing !important;
  box-shadow: 0 18px 40px rgba(1, 16, 61, .22); border-radius: 15px;
  transform: rotate(1.2deg);
}
/* Terwijl er gesleept wordt, hoort de hele pagina de sleep-cursor te tonen. */
body.gu-unselectable, body.gu-unselectable * { cursor: grabbing !important; }
@media (prefers-reduced-motion: reduce) {
  .gu-mirror { transform: none; }
  .vp-panel .wf-sl-slide, .vp-panel .wf-vpe-row, .vp-panel [data-mrow] { transition: none; }
}

[data-bs-theme="dark"] .vp-panel .wf-sl-slide-head { background: #6d1a3c; }

/* ── Voorpagina: de bouwstenen uit het ontwerp, 1-op-1 ────────────────────────
   Overgenomen uit "Webfix Voorpagina Beheer", met onze eigen kleurtokens in plaats van de tokens uit
   het ontwerpsysteem. Alleen de taalkeuze wijkt bewust af: daar gebruiken we ons eigen tabsysteem.

   Deze klassen zijn generiek gehouden — de panelen delen ze allemaal, zodat er per scherm geen eigen
   variant bij hoeft. */

/* -- Velden -- */
.vp-fl { display: block; margin: 0 0 6px; font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b); }
.vp-fl .opt { font-weight: 600; font-size: 11.5px; color: var(--wf-text-soft, #666c73); }
.vp-fld { margin-bottom: 14px; }
.vp-fld:last-child { margin-bottom: 0; }
/* Het linkveld volgt meestal direct op een tekstveld en plakte daar tegenaan: het label stond bijna
   op de rand van het veld erboven. Een beetje lucht maakt duidelijk dat hier iets nieuws begint. */
.vp-fld[data-wf-linkblok] { margin-top: 10px; }
.vp-inp {
  display: block; box-sizing: border-box; width: 100%; height: 42px; padding: 0 15px; border-radius: 11px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 14px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.vp-inp::placeholder { color: var(--wf-muted, #9aa2b1); }
.vp-inp:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.vp-inp.-ico { padding-left: 38px; }
.vp-iw { position: relative; display: block; }
.vp-iw > i { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); font-size: 12px; color: var(--wf-muted, #9aa2b1); pointer-events: none; }
.vp-fh { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.vp-fh a { color: var(--wf-blue, #32bcee); }

/* Een linkveld met zijn Koppel-knop ernaast. */
.vp-lnk { display: flex; align-items: center; gap: 9px; }
.vp-lnk > .vp-iw, .vp-lnk > input { flex: 1; min-width: 0; }
.vp-kop {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px;
  border: 1px solid rgba(50, 188, 238, .34); border-radius: 11px; background: var(--wf-surface, #fff);
  cursor: pointer; font-weight: 700; font-size: 13px; color: #12667f; white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.vp-kop:hover { background: var(--wf-blue-50, rgba(50, 188, 238, .08)); border-color: var(--wf-blue, #32bcee); }
.vp-kop i { font-size: 12px; }

/* -- Subkaart binnen een paneel -- */
.vp-sc { border: 1px solid rgba(1, 16, 61, .09); border-radius: 18px; overflow: hidden; background: var(--wf-surface, #fff); }
.vp-sc-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 16px; background: #f8f9fc; border-bottom: 1px solid var(--wf-border, #e2e8f0); }
.vp-sc-h > i { flex: none; font-size: 13px; color: var(--wf-title, #a12359); }
/* display:contents laat de titel en de ondertitel meedoen in de flexrij van de kop, zodat de
   ondertitel op een eigen regel valt en een knop rechts ernaast kan staan. */
.vp-sc-t { display: contents; }
.vp-sc-t b { font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.vp-sc-t span { flex: 1 0 100%; font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.vp-sc-h .vp-sc-t span { order: 2; }
.vp-sc-vert { order: 1; margin-left: auto; }
.vp-sc-b { padding: 16px; }

/* -- Twee kolommen (beeld | teksten) -- */
.vp-cols2 > .vp-sc { display: flex; flex-direction: column; }
.vp-cols2 > .vp-sc > .vp-sc-b { flex: 1; }

/* -- Kopjes binnen een kaart -- */

/* -- Radiorij (achtergrond, hoogte) -- */
.vp-rrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vp-r2 { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.vp-r2 input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vp-r2 .dot { flex: none; position: relative; width: 17px; height: 17px; border-radius: 9999px; border: 1.5px solid rgba(1, 16, 61, .24); background: var(--wf-surface, #fff); transition: border-color .2s; }
.vp-r2:has(input:checked) .dot { border-color: var(--wf-pink, #da176c); }
.vp-r2:has(input:checked) .dot::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 9999px; background: var(--wf-pink, #da176c); }
.vp-r2:has(input:checked) { font-weight: 700; color: var(--wf-title, #a12359); }
.vp-r2:has(input:focus-visible) .dot { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }

/* -- Fotovlak met de knoppen eronder -- */
.vp-sfoto {
  position: relative; height: 190px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: rgba(1, 16, 61, .24);
  border: 1px solid rgba(1, 16, 61, .09);
  background: linear-gradient(135deg, rgba(50, 188, 238, .18), rgba(176, 209, 54, .2) 52%, rgba(220, 158, 47, .16));
}
/*  De foto in verhouding, niet bijgesneden: `cover` liet een liggende slide als een uitsnede zien,
    zodat je in het beheer iets anders zag dan op de website. Wat overblijft is achtergrond, en die
    laten we als ruitjespatroon zien -- zo is meteen duidelijk dat het lege ruimte is en geen witte
    rand in de foto zelf. Het ruitje verschijnt alleen als er echt een foto staat; het lege vak houdt
    zijn kleurverloop met het fotoicoontje. */
.vp-sfoto img { width: 100%; height: 100%; object-fit: contain; display: block; }
/*  Een foto in dit vak is aanklikbaar: hij opent groot in het kijkvenster van het mediabeheer. Het
    loepje vertelt dat, maar pas als je erover gaat -- anders ligt er permanent iets over het beeld. */
.vp-sfoto:has(img:not([hidden])) { cursor: zoom-in; }
.vp-loep {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9);
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 9999px; background: rgba(255, 255, 255, .92); color: var(--wf-text, #1e293b);
  font-size: 18px; box-shadow: 0 4px 14px rgba(1, 16, 61, .18);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.vp-sfoto:hover .vp-loep { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vp-loep.d-none { display: none !important; }
@media (hover: none) {
  /* Op touch is er geen hover; dan staat hij er zachtjes bij zodat de foto niet dood lijkt. */
  .vp-sfoto:has(img:not([hidden])) .vp-loep { opacity: .85; transform: translate(-50%, -50%) scale(1); }
}

.vp-sfoto:has(img:not([hidden])) {
  background-color: var(--wf-surface, #fff);
  background-image:
    linear-gradient(45deg, rgba(1, 16, 61, .07) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(1, 16, 61, .07) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(1, 16, 61, .07) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(1, 16, 61, .07) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
/*  "Bewerken" op een foto is overal dezelfde knop als op Logo/favicon: de standaardknop in de lichte
    variant (_WfButton, maat xs, potloodje). Deze klasse doet daarom alleen nog de plek -- rechtsboven
    in het kader -- plus een schaduw, want hij ligt op een beeld en niet op wit. */
.vp-sedit {
  position: absolute; right: 11px; top: 11px;
  box-shadow: 0 3px 10px rgba(1, 16, 61, .16);
}
.vp-sa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.vp-sa .-wis { margin-left: auto; }
.vp-sbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: 9999px;
  border: 1px solid rgba(1, 16, 61, .13); background: var(--wf-surface, #fff); cursor: pointer;
  font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b); white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.vp-sbtn:hover { border-color: var(--wf-blue, #32bcee); color: #12667f; }
.vp-sbtn i { font-size: 11.5px; }
.vp-sbtn.-wis { border-color: rgba(216, 31, 37, .26); color: #b3181d; }
.vp-sbtn.-wis:hover { background: #d81f25; border-color: #d81f25; color: #fff; }

/* -- Een aan/uit-kaartje met uitleg (overlay, effecten) -- */
.vp-act {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 14px; margin-bottom: 16px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; transition: background .25s, border-color .25s;
}
.vp-act:has(input:checked) { border-color: rgba(176, 209, 54, .4); background: rgba(176, 209, 54, .1); }
/* Het kaartje kleurt groen zodra het aanstaat; het schuifje erin stond dan roze. Zelfde groen als de
   andere "staat aan"-schuifjes (.wf-switch.-pil, de gebruikerslijst). */
.vp-act input:checked ~ .wf-switch-track { background: #6f8a1b; }
.vp-act-t { flex: 1; min-width: 0; }
.vp-act-t b { display: block; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.vp-act-t span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }

/* -- Overlay: miniatuur, kleurkeuze en sterkte -- */
.vp-ov { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.vp-ov-th {
  flex: none; width: 74px; height: 74px; border-radius: 11px; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(1, 16, 61, .28);
  border: 1px solid rgba(1, 16, 61, .09);
  background: linear-gradient(135deg, rgba(50, 188, 238, .2), rgba(176, 209, 54, .22) 52%, rgba(220, 158, 47, .18));
}
.vp-ov-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-ov-b { flex: 1; min-width: 200px; }
.vp-ov-k { display: flex; align-items: flex-start; gap: 9px; }
.vp-ovc-w { position: relative; display: inline-block; }
.vp-ovc-w input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vp-ovc {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px;
  border: 2px solid transparent; cursor: pointer; color: #fff; font-size: 13px;
  box-shadow: 0 0 0 1px rgba(1, 16, 61, .12) inset; transition: border-color .2s, box-shadow .2s;
}
.vp-ovc-w:has(input:checked) .vp-ovc { border-color: var(--wf-title, #a12359); box-shadow: 0 0 0 3px rgba(218, 23, 108, .14); }
.vp-ovc-l { display: block; margin-top: 5px; text-align: center; font-weight: 600; font-size: 11px; color: var(--wf-text-soft, #666c73); }
.vp-ovc-w:has(input:checked) .vp-ovc-l { color: var(--wf-title, #a12359); font-weight: 700; }
.vp-srow { display: flex; align-items: center; gap: 11px; margin-top: 12px; }
.vp-sl { flex: none; font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b); }
.vp-sv { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 9999px; background: #f2f4f8; font-weight: 700; font-size: 12px; color: var(--wf-text, #1e293b); }
.vp-rng { flex: 1; min-width: 120px; -webkit-appearance: none; appearance: none; height: 18px; background: transparent; cursor: pointer; }
.vp-rng::-webkit-slider-runnable-track { height: 5px; border-radius: 9999px; background: linear-gradient(90deg, rgba(50, 188, 238, .35), rgba(218, 23, 108, .35)); }
.vp-rng::-moz-range-track { height: 5px; border-radius: 9999px; background: linear-gradient(90deg, rgba(50, 188, 238, .35), rgba(218, 23, 108, .35)); }
.vp-rng::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; margin-top: -6px; border-radius: 9999px; background: var(--wf-blue, #32bcee); box-shadow: 0 2px 7px rgba(50, 188, 238, .5); transition: transform .2s; }
.vp-rng::-moz-range-thumb { width: 17px; height: 17px; border: none; border-radius: 9999px; background: var(--wf-blue, #32bcee); box-shadow: 0 2px 7px rgba(50, 188, 238, .5); }
.vp-rng:hover::-webkit-slider-thumb { transform: scale(1.1); }
.vp-rng:focus { outline: none; }

/* -- De vertaalknop met de merkrand -- */
.vp-tr {
  display: inline-flex; align-items: center; gap: 9px; height: 37px; padding: 0 15px;
  border: 2px solid transparent; border-radius: 9999px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%) border-box;
  font-weight: 700; font-size: 13px; color: var(--wf-text, #1e293b);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s cubic-bezier(.4, 0, .2, 1);
}
.vp-tr:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(50, 188, 238, .16), 0 4px 12px rgba(218, 23, 108, .10); }
.vp-tr .div { width: 1px; height: 14px; background: rgba(1, 16, 61, .14); }
.vp-tr .arr { font-size: 10px; color: var(--wf-muted, #9aa2b1); transition: transform .3s; }
.vp-tr:hover .arr { transform: translateX(3px); }
/* Dezelfde knop, maar dan voor een AI-actie met een eigen woordmerk erin.
   .wf-aiknop is dezelfde knop, maar dan systeembreed: bij ELK fotoveld staat naast "Foto kiezen"
   een "WAI | Foto maken" (zie _WfFotoKader). Hij stond eerst alleen op de voorpagina (.vp-aibtn);
   omdat het exact dezelfde knop is, delen ze hier één definitie in plaats van een kopie. */
.vp-aibtn, .wf-aiknop {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 15px;
  border: 2px solid transparent; border-radius: 9999px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%) border-box;
  font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s cubic-bezier(.4, 0, .2, 1);
}
.vp-aibtn:hover, .wf-aiknop:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(50, 188, 238, .16), 0 4px 12px rgba(218, 23, 108, .10); }
.vp-aibtn .div, .wf-aiknop .div { width: 1px; height: 14px; background: rgba(1, 16, 61, .14); }
@media (prefers-reduced-motion: reduce) { .vp-tr:hover, .vp-aibtn:hover, .wf-aiknop:hover { transform: none; } }
/*  -sm = "even hoog als de chipknop ernaast". De knoppen van een fotokader zijn .wf-btn-sm (44px);
    een lagere AI-knop ernaast oogt als een vergissing, dus hij loopt precies mee (Tom, 03-09-2026). */
.wf-aiknop.-sm { height: 44px; padding: 0 18px; font-size: 13.5px; gap: 8px; }
.wf-aiknop .pijl { font-size: 10px; color: var(--wf-muted, #9aa2b1); transition: transform .3s; }
.wf-aiknop:hover .pijl { transform: translateX(3px); }
@media (max-width: 1024.98px) { .wf-aiknop, .wf-aiknop.-sm { height: 44px; } }
[data-bs-theme="dark"] .vp-aibtn, [data-bs-theme="dark"] .wf-aiknop {
  background: linear-gradient(var(--wf-surface, #1e293b), var(--wf-surface, #1e293b)) padding-box,
              linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%) border-box;
  color: var(--wf-text, #f1f5f9);
}
[data-bs-theme="dark"] .vp-aibtn .div, [data-bs-theme="dark"] .wf-aiknop .div { background: rgba(255, 255, 255, .18); }

/* -- De lijst met actie-balken -- */
.vp-blist { display: flex; flex-direction: column; gap: 10px; }
.vp-b { border: 1px solid rgba(1, 16, 61, .09); border-radius: 15px; overflow: hidden; background: var(--wf-surface, #fff); }
.vp-bh { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: grab; background: var(--wf-title, #a12359); transition: background .25s; }
.vp-bh .ch { flex: none; width: 12px; font-size: 11px; color: rgba(255, 255, 255, .72); transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.vp-b.is-open .vp-bh .ch { transform: rotate(90deg); }
.vp-bnm { flex: 0 1 auto; min-width: 0; font-weight: 700; font-size: 13.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-bb { display: none; padding: 16px; }
.vp-b.is-open .vp-bb { display: block; }
/* Het greepje staat midden in de rij, met eigen ruimte; het vangt zelf geen klikken op omdat de hele
   kop al sleepbaar is. */
.vp-drag { flex: none; margin: 0 auto; padding: 0 10px; font-size: 12px; color: rgba(255, 255, 255, .55); pointer-events: none; transition: color .2s; }
.vp-bh:hover .vp-drag { color: rgba(255, 255, 255, .9); }
/* De schakelaar zit in een wit pilletje op de gekleurde kop. */
.vp-swb { flex: none; position: relative; display: inline-flex; align-items: center; gap: 8px; height: 26px; box-sizing: border-box; padding: 0 12px 0 4px; border-radius: 9999px; background: rgba(255, 255, 255, .92); cursor: pointer; }
.vp-swb input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.vp-swb-track { flex: none; position: relative; width: 30px; height: 17px; border-radius: 9999px; background: #d7dae2; transition: background .26s cubic-bezier(.4, 0, .2, 1); }
.vp-swb-knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(1, 16, 61, .26); transition: transform .26s cubic-bezier(.4, 0, .2, 1); }
.vp-swb input:checked ~ .vp-swb-track { background: #6f8a1b; }
.vp-swb input:checked ~ .vp-swb-track .vp-swb-knob { transform: translateX(13px); }
.vp-swb input:focus-visible ~ .vp-swb-track { box-shadow: 0 0 0 3px rgba(50, 188, 238, .4); }
.vp-swb-l { font-weight: 700; font-size: 11px; line-height: 1; color: var(--wf-text, #1e293b); white-space: nowrap; }
/* Een balk die uitstaat krijgt een grijze kop in plaats van de merkkleur. */
.vp-b:has([data-bsw]:not(:checked)) .vp-bh { background: #e8ebf1; }
.vp-b:has([data-bsw]:not(:checked)) .vp-bnm { color: var(--wf-text-soft, #666c73); }
.vp-b:has([data-bsw]:not(:checked)) .ch,
.vp-b:has([data-bsw]:not(:checked)) .vp-drag { color: #a8b0bd; }

/* -- Voet van een balk -- */
.vp-bf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--wf-border, #e2e8f0); }
.vp-bf-r { display: flex; align-items: center; gap: 12px; margin-left: auto; }

@media (max-width: 700px) {
  .vp-bf-r { width: 100%; margin-left: 0; }
  .vp-sa .-wis { margin-left: 0; }
}

/* -- Donkere modus -- */
[data-bs-theme="dark"] .vp-sc,
[data-bs-theme="dark"] .vp-b { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .vp-sc-h { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .vp-inp,
[data-bs-theme="dark"] .vp-act,
[data-bs-theme="dark"] .vp-sbtn,
[data-bs-theme="dark"] .vp-kop { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e8eaf1; }

/* -- Nieuwe actie-balk: een gestippelde knop, want hij voegt iets toe -- */
.vp-ctab {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 9999px;
  border: 1px dashed rgba(218, 23, 108, .34); background: var(--wf-surface, #fff); cursor: pointer;
  font-weight: 700; font-size: 13px; color: var(--wf-title, #a12359); white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.vp-ctab:hover { background: var(--wf-pink-50, rgba(218, 23, 108, .06)); border-color: var(--wf-pink, #da176c); }
.vp-ctab i { font-size: 11px; }

/* -- Nog niets aangemaakt -- */
.vp-leeg {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 30px 22px; border: 1px dashed rgba(1, 16, 61, .14); border-radius: 18px; background: #fbfbfd;
}
.vp-leeg-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 9999px; background: var(--wf-pink-50, rgba(218, 23, 108, .08));
  font-size: 19px; color: var(--wf-title, #a12359);
}
.vp-leeg b { font-weight: 700; font-size: 14px; color: var(--wf-text, #1e293b); }
.vp-leeg > span:last-child { max-width: 44ch; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }

/* -- Kleurvlak met de hexcode ernaast -- */
.vp-kleur { display: inline-flex; align-items: center; gap: 10px; }
.vp-kleur input[type="color"] {
  width: 46px; height: 42px; padding: 3px; border: 1px solid rgba(1, 16, 61, .10); border-radius: 11px;
  background: var(--wf-surface, #fff); cursor: pointer;
}
.vp-kleur-w {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 9999px;
  background: #f2f4f8; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--wf-text-soft, #666c73);
}

/* -- Overlay: de twee kleurkeuzes -- */
.vp-ovc-w { position: relative; display: inline-block; padding: 0; border: none; background: none; cursor: pointer; }
.vp-ovc-w + .vp-ovc-w { margin-left: 9px; }
.vp-ovc-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vp-ovc-w.selected .vp-ovc { border-color: var(--wf-title, #a12359); box-shadow: 0 0 0 3px rgba(218, 23, 108, .14); }
.vp-ovc-w.selected .vp-ovc-l { color: var(--wf-title, #a12359); font-weight: 700; }
.vp-ov-scrim { position: absolute; inset: 0; pointer-events: none; }

/* -- Fotovlak: de knoppen blijven weg zolang er geen foto is -- */
.vp-sfoto [hidden], .vp-sa [hidden], .vp-ov-th [hidden] { display: none !important; }
.vp-sfoto img[hidden] { display: none !important; }

/* Ons tabsysteem wordt hier door de Bootstrap-tabs bediend, en die zet .active in plaats van
   .is-active. Beide betekenen hetzelfde, dus ze horen er ook hetzelfde uit te zien. */
.wf-tabx.active { font-weight: 700 !important; }
.wf-tg-glass .wf-tabx.active {
  background: linear-gradient(90deg, #b0d136, #da176c, #32bcee) !important; background-size: 200% 100% !important;
  animation: wf-ai-drift 9s ease-in-out infinite; color: #fff !important;
  box-shadow: 0 4px 14px rgba(218, 23, 108, .20); border-color: transparent !important;
}
.wf-tg-glass .wf-tabx.active i { color: #fff !important; }
/* Binnen een kaart mag de taalbalk wat compacter dan de paginabrede tabbalk. Hij staat op wit,
   dus de glaslaag zou onzichtbaar zijn; een lichtgrijze baan leest daar als een tabbalk. De tabs
   wikkelen in plaats van te schuiven: bij drie of vier talen past dat en scheelt het een veegbalk. */
.vp-langbar {
  width: 100%; max-width: 100%; margin-bottom: 14px; padding: 5px; border-radius: 15px;
  background: #f2f4f8; border-color: rgba(1, 16, 61, .06); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
.vp-langbar .wf-tabgroup { flex-wrap: wrap; gap: 6px; overflow-x: visible; }
.vp-langbar .wf-tg-glass .wf-tabx { padding: 6.5px 14px; font-size: 13.5px; background: var(--wf-surface, #fff); }
/* Inactieve tabs houden hun 1px randje — vaste regel bij elke tabbalk. */
.vp-langbar .wf-tg-glass .wf-tabx { border: 1px solid rgba(1, 16, 61, .08); }
.vp-langbar .wf-tg-glass .wf-tabx:hover { background: #fff; }

/* De vertaalknop op een eigen regel onder de taalbalk. */
.vp-trrow { margin: 0 0 16px; }

/* De voet van een balk: hoofdactie links, verwijderen en de toelichting rechts. De rechtergroep mag
   krimpen tot de toelichting over twee regels valt — dan blijft het één rij in plaats van te breken. */
.vp-bf-r { flex: 1 1 240px; justify-content: flex-end; }

/* Een kopregel midden in een kaart heeft lucht boven zich nodig; alleen de eerste plakt aan de rand.
   De overlay brengt zijn eigen kopregel mee en zit een niveau dieper, vandaar de tweede regel. */
.vp-sc-b > .vp-l:not(:first-child) { margin-top: 20px; }
[data-overlay] > .vp-l { margin-top: 20px; }

@media (max-width: 700px) {
  .vp-sa > * { flex: 1 1 auto; justify-content: center; }
  .vp-sa .-wis { flex: 0 0 auto; }
  /* Op de kop van een balk is de naam het belangrijkst; het greepje geeft zijn ruime marges op. */
  .vp-bh .vp-drag { margin: 0; padding: 0 4px; }
  /* De voet stapelt: verwijderen over de volle breedte, de toelichting eronder. */
  .vp-bf-r { flex: 1 1 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; margin-left: 0; }
}

/* ── Voorpagina: de slider ────────────────────────────────────────────────────
   Uit het ontwerp: bovenaan de keuze foto/video met de activeer-kaart en de vertaalknop op één rij,
   daaronder de slides als rijen met een gekleurde kop. */

/* -- De keuzerij bovenaan -- */
.vp-strow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.vp-strow > .vp-st { flex: none; margin: 0; }
/*  Het kaartje rekte eerst mee met de balk. Zonder het zinnetje eronder is het smal, en dan oogt een
    uitgerekt kader raar: het is nu zo breed als zijn inhoud en staat gecentreerd tussen de tabjes en
    de vertaalknop (de auto-marges links en rechts delen de vrije ruimte gelijk). */
.vp-strow .vp-act { flex: 0 1 auto; width: auto; margin: 0 auto; border-radius: 13px; }
.vp-strow .vp-act .vp-act-t { flex: none; }
.vp-strow .vp-tr { flex: none; }
@media (max-width: 1100px) {
  /*  Onder deze breedte is het paneel te smal voor één regel en breekt de balk. Gewikkeld hoort het
      kaartje gewoon de volle breedte te pakken en blijft de vertaalknop rechts hangen. */
  .vp-strow .vp-act { flex: 1 1 100%; margin: 0; }
  .vp-strow .vp-act .vp-act-t { flex: 1; }
  .vp-strow .vp-tr { margin-left: auto; }
}

/* -- Een slide als rij -- */
.vp-rows { display: flex; flex-direction: column; gap: 8px; }
.vp-row {
  border: 1px solid rgba(1, 16, 61, .09); border-radius: 15px; overflow: hidden; background: var(--wf-surface, #fff);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), opacity .18s;
}
.vp-rh { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: grab; background: var(--wf-title, #a12359); transition: background .25s; }
.vp-rh i.ch { flex: none; width: 12px; font-size: 11px; color: rgba(255, 255, 255, .72); transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.vp-row.is-open .vp-rh i.ch { transform: rotate(90deg); }
.vp-rn { flex: none; font-weight: 700; font-size: 13.5px; color: #fff; }
.vp-rt { flex: 1; min-width: 0; font-size: 13px; color: rgba(255, 255, 255, .82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-rdel {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 26px; box-sizing: border-box;
  padding: 0 11px; border: none; border-radius: 9999px; background: rgba(255, 255, 255, .18); cursor: pointer;
  font-weight: 700; font-size: 11.5px; color: #fff; white-space: nowrap; transition: background .2s, color .2s;
}
.vp-rdel:hover { background: #d81f25; color: #fff; }
.vp-rb { display: none; padding: 16px 14px; border-top: 1px solid var(--wf-border, #e2e8f0); }
.vp-row.is-open .vp-rb { display: block; }
.vp-rh:hover .vp-drag { color: rgba(255, 255, 255, .9); }
/* Een slide die uitstaat krijgt een grijze kop — dezelfde taal als bij de actie-balken. */
.vp-row:has([data-slide-aan]:not(:checked)) .vp-rh { background: #e8ebf1; }
.vp-row:has([data-slide-aan]:not(:checked)) .vp-rn { color: var(--wf-text-soft, #666c73); }
.vp-row:has([data-slide-aan]:not(:checked)) .vp-rt,
.vp-row:has([data-slide-aan]:not(:checked)) i.ch { color: #8a919c; }
.vp-row:has([data-slide-aan]:not(:checked)) .vp-drag { color: #a8b0bd; }
/* Een slide op slot: de vorige heeft nog geen foto. */
.vp-row.is-locked .vp-rh { cursor: not-allowed; opacity: .72; }
.vp-row.is-locked .vp-rb { display: none; }
.vp-rlock { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11.5px; color: rgba(255, 255, 255, .9); }
.vp-row:not(.is-locked) .vp-rlock { display: none; }

/* -- Keuzelijst, bestandsknoppen en een toevoegregel -- */
.vp-sel {
  display: block; box-sizing: border-box; width: 100%; height: 42px; padding: 0 15px; border-radius: 11px;
  border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; font-size: 14px;
  color: var(--wf-text, #1e293b); cursor: pointer;
}
.vp-sel:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.vp-fa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vp-fbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 9999px;
  border: 1px solid rgba(176, 209, 54, .5); background: var(--wf-green-50, rgba(176, 209, 54, .12)); cursor: pointer;
  font-weight: 700; font-size: 12.5px; color: #4e6711; text-decoration: none;
  transition: background .2s, border-color .2s;
}
.vp-fbtn:hover { border-color: #6f8a1b; color: #4e6711; }
.vp-fbtn.-wis { border-color: rgba(1, 16, 61, .13); background: var(--wf-surface, #fff); color: var(--wf-text-soft, #666c73); }
.vp-fbtn.-wis:hover { border-color: rgba(216, 31, 37, .3); color: #b3181d; }
.vp-fbtn i { font-size: 11px; }
.vp-add {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  height: 44px; border: 1.5px dashed rgba(218, 23, 108, .3); border-radius: 12px; background: var(--wf-surface, #fff);
  cursor: pointer; font-weight: 700; font-size: 13px; color: var(--wf-title, #a12359);
  transition: background .22s, border-color .22s;
}
.vp-add:hover { background: var(--wf-pink-50, rgba(218, 23, 108, .06)); border-color: var(--wf-pink, #da176c); }
.vp-add:disabled { opacity: .5; cursor: not-allowed; }
.vp-add:disabled:hover { background: var(--wf-surface, #fff); border-color: rgba(218, 23, 108, .3); }
.vp-add i { font-size: 15px; }
/* Hoeveel slides er in gebruik zijn, rechts in de knop. */
.vp-add-n {
  position: absolute; right: 14px; display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: 9999px; background: #f2f4f8; font-weight: 700; font-size: 11px; color: var(--wf-text-soft, #666c73);
}
@media (max-width: 480px) {
  /* Naast elkaar past het hier niet meer; de knoptekst wint van het telletje. */
  .vp-add-n { display: none; }
}
[data-bs-theme="dark"] .vp-add-n { background: rgba(255, 255, 255, .08); color: #cbd3e1; }

/* -- Toelichting-blokjes -- */
.vp-note.-info { border: 1px solid rgba(50, 188, 238, .26); background: var(--wf-blue-50, rgba(50, 188, 238, .08)); color: #12667f; }
.vp-note.-info i { color: #1f8fbb; }

/* De sub-panelen van de slider (foto / video) volgen de tabkeuze. */
.vp-sub { display: none; }
.vp-sub.is-on { display: block; }

@media (max-width: 700px) {
  .vp-strow > .vp-st, .vp-strow .vp-act, .vp-strow .vp-tr { flex: 1 1 100%; margin-left: 0; }
  .vp-strow .vp-tr { justify-content: center; }
  /* Op een smal scherm de twee keuzes samen over de volle breedte, elk de helft. */
  .vp-st { display: flex; width: 100%; }
  .vp-stb { flex: 1 1 0; justify-content: center; padding: 0 10px; }
  .vp-rh { flex-wrap: wrap; }
  .vp-rt { flex: 1 1 100%; order: 5; }
}

[data-bs-theme="dark"] .vp-row { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .vp-sel { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e8eaf1; }

/* -- Een invoerveld met een eenheid erachter (ms, px) -- */
.vp-unit { display: flex; align-items: stretch; }
.vp-unit .vp-inp { flex: 1; min-width: 0; border-radius: 11px 0 0 11px; }
.vp-unit .u {
  flex: none; display: inline-flex; align-items: center; padding: 0 13px;
  border: 1px solid rgba(1, 16, 61, .10); border-left: none; border-radius: 0 11px 11px 0; background: #f2f4f8;
  font-weight: 700; font-size: 12.5px; color: var(--wf-text-soft, #666c73);
}

/* -- De keuze foto/video: een grijze baan met de gekozen kant als witte pil (uit het ontwerp) --
   Bootstrap zet .active op de gekozen knop; het ontwerp noemt die stand .is-on. Beide betekenen
   hetzelfde, dus ze zien er ook hetzelfde uit. */
.vp-st { display: inline-flex; gap: 3px; padding: 4px; border-radius: 13px; background: #f2f4f8; }
.vp-stb {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: none;
  border-radius: 10px; background: transparent; cursor: pointer; font-weight: 600; font-size: 13.5px;
  color: var(--wf-text-soft, #666c73); white-space: nowrap;
  transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
}
.vp-stb:hover { color: var(--wf-text, #1e293b); }
.vp-stb.is-on, .vp-stb.active {
  background: var(--wf-surface, #fff); color: var(--wf-title, #a12359); font-weight: 700;
  box-shadow: 0 1px 3px rgba(18, 20, 32, .14);
}
.vp-stb i { font-size: 12px; }

/* Het advies om de foto-slider aan te laten staan is alleen een advies zolang hij UIT staat. Staat
   hij aan, dan is het een regel die je elke keer opnieuw wegleest. */
#sliderForm:has(#photoEnabled:checked) #vpFotoTip { display: none; }

/* De vergrendelde slide vertelt zelf waarom hij niet open kan. */
.vp-rlock i { font-size: 11px; }

[data-bs-theme="dark"] .vp-unit .u { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }

/* -- Een vinkje met uitleg, en het kleurvlak dat eronder aan- of uitgaat -- */
.vp-chk { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.vp-chk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vp-chk .box {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  border-radius: 6px; border: 1.5px solid rgba(1, 16, 61, .22); background: var(--wf-surface, #fff);
  font-size: 9px; color: transparent; transition: background .2s, border-color .2s, color .2s;
}
.vp-chk:has(input:checked) .box { background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff; }
.vp-chk:has(input:focus-visible) .box { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }
.vp-chk .opt { font-size: 12px; color: var(--wf-text-soft, #666c73); }
/* Uitgevinkt = de huisstijlkleur; dan is een eigen kleur kiezen niet aan de orde. */
.vp-eigenkleur { margin-top: 12px; transition: opacity .2s; }
.vp-eigenkleur.-uit { opacity: .4; pointer-events: none; }

/* -- Datumveld met het kalender-icoontje -- */
.vp-date { position: relative; display: block; }
.vp-date > .vp-date-ic { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); font-size: 12px; color: var(--wf-title, #a12359); pointer-events: none; }
.vp-date .vp-inp { padding-right: 40px; }

/* Een waarschuwing tussen de velden: dezelfde vorm als de tip, maar in amber met een donkerder
   letter. De standaardtekst van .alert-warning haalt in dit thema maar 4,09:1 en dat is te laag. */
.vp-note.-waarschuwing { border: 1px solid rgba(220, 158, 47, .34); background: rgba(220, 158, 47, .12); color: #6b4b11; margin-bottom: 14px; }
.vp-note.-waarschuwing i { color: #8a6117; }

/* ── Voorpagina: indeling & modules ───────────────────────────────────────────
   De blokkenlijst uit het ontwerp: per blok een greepje, een miniatuur, een icoontje, de naam met de
   gekozen stijl en rechts Bewerken en verwijderen. */

/* -- Module kiezen en toevoegen -- */
.vp-addrow { display: flex; align-items: flex-end; gap: 11px; flex-wrap: wrap; }
.vp-selw { position: relative; flex: 1; min-width: 200px; }
.vp-selw > i { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 11px; color: var(--wf-text-soft, #666c73); pointer-events: none; }
.vp-selw select {
  display: block; box-sizing: border-box; width: 100%; height: 44px; padding: 0 40px 0 15px;
  border-radius: 11px; border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd;
  -webkit-appearance: none; appearance: none; font-size: 14px; color: var(--wf-text, #1e293b); cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.vp-selw select:hover { border-color: rgba(1, 16, 61, .18); }
.vp-selw select:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.vp-selw select:disabled { opacity: .6; cursor: not-allowed; }
.vp-addb {
  flex: none; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 22px;
  border: none; border-radius: 9999px; background: var(--wf-pink, #da176c); cursor: pointer;
  font-weight: 700; font-size: 14px; color: #fff;
  transition: background .25s, transform .25s;
}
.vp-addb:hover { background: var(--wf-title, #a12359); transform: translateY(-1px); }
.vp-addb:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.vp-cta { display: flex; gap: 8px; flex-wrap: wrap; }
/* Een balk die al op de voorpagina staat is geen uitnodiging meer, maar een bevestiging. */
.vp-ctab.-uit { border-color: rgba(1, 16, 61, .14); color: var(--wf-text-soft, #666c73); cursor: default; }
.vp-ctab.-uit:hover { background: rgba(1, 16, 61, .04); border-color: rgba(1, 16, 61, .22); }

/* -- Uitleg-knopjes -- */
.vp-how-a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.vp-hb {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 9999px;
  border: 1px solid rgba(1, 16, 61, .13); background: var(--wf-surface, #fff); cursor: pointer;
  font-weight: 700; font-size: 12px; color: var(--wf-text, #1e293b); text-decoration: none;
  transition: border-color .2s, color .2s;
}
.vp-hb:hover { border-color: var(--wf-blue, #32bcee); color: #12667f; }
.vp-hb i { font-size: 11px; }

/* -- De teller in de kop van de kaart -- */
.vp-cnt {
  order: 1; margin-left: auto; display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
  border-radius: 9999px; background: var(--wf-green-50, rgba(176, 209, 54, .16));
  font-weight: 800; font-size: 12px; color: #4e6711;
}
.vp-cnt.is-full { background: rgba(220, 158, 47, .18); color: #7a5510; }

/* -- Een blok op de voorpagina -- */
.vp-mlist { display: flex; flex-direction: column; gap: 9px; }
.vp-m {
  cursor: grab; display: flex; align-items: center; gap: 13px; padding: 11px 13px;
  border: 1px solid rgba(1, 16, 61, .09); border-radius: 16px; background: var(--wf-surface, #fff);
  transition: border-color .2s, box-shadow .2s, opacity .2s, transform .18s cubic-bezier(.4, 0, .2, 1);
}
.vp-m:hover { border-color: rgba(1, 16, 61, .16); box-shadow: 0 4px 14px rgba(1, 6, 20, .06); }
.vp-mg {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 34px;
  border: none; border-radius: 8px; background: transparent; cursor: grab; font-size: 12px; color: var(--wf-muted, #9aa2b1);
  transition: background .2s, color .2s;
}
.vp-mg:hover { background: rgba(1, 16, 61, .05); color: var(--wf-title, #a12359); }
.vp-mg:active { cursor: grabbing; }
.vp-mt { flex: none; position: relative; width: 88px; height: 56px; border-radius: 11px; overflow: hidden; }
.vp-mi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; font-size: 13px; }
.vp-mbody { flex: 1; min-width: 0; }
.vp-mbody b { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--wf-text, #1e293b); }
.vp-mbody > span { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.vp-mbody > span i { font-size: 11px; color: var(--wf-muted, #9aa2b1); }
/* Zie .vp-sedit: het uiterlijk komt van .wf-cardbtn, deze klasse houdt alleen zijn plek in de rij. */
.vp-medit { flex: none; }
.vp-mdel {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid rgba(216, 31, 37, .24); border-radius: 9999px; background: var(--wf-surface, #fff);
  cursor: pointer; font-size: 12px; color: #b3181d; transition: background .2s, border-color .2s, color .2s;
}
.vp-mdel:hover { background: #d81f25; border-color: #d81f25; color: #fff; }

@media (max-width: 760px) {
  /* Op een smal scherm past de rij niet meer op één regel; het miniatuur mag dan weg. */
  .vp-m { flex-wrap: wrap; }
  .vp-mt { display: none; }
  .vp-medit, .vp-mdel { min-height: 44px; }
  .vp-medit { flex: 1 1 auto; justify-content: center; }
}

[data-bs-theme="dark"] .vp-m { background: #1a1d27; border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .vp-selw select,
[data-bs-theme="dark"] .vp-medit,
[data-bs-theme="dark"] .vp-hb { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e8eaf1; }

/* Kopregel binnen het uitleg-kaartje van Indeling & modules. */
.vp-how-t { display: block; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
/* Een vetgedrukt woord in de ondertitel van een kaartkop blijft even groot als de rest. */
.vp-sc-t span b { display: inline; font-weight: 700; font-size: inherit; }

/* ── Donkere modus voor de voorpagina-onderdelen ──────────────────────────────
   Het ontwerp is in lichte tinten getekend (#fbfbfd, #f2f4f8, #e8ebf1). Die worden hier vervangen
   door onze tokens, zodat tekst en vlak in beide standen leesbaar blijven. */
[data-bs-theme="dark"] .vp-sv,
[data-bs-theme="dark"] .vp-kleur-w,
[data-bs-theme="dark"] .vp-mg:hover { background: rgba(255, 255, 255, .08); color: var(--wf-text, #e8eaf1); }
[data-bs-theme="dark"] .vp-leeg { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .vp-leeg b { color: var(--wf-text, #e8eaf1); }
[data-bs-theme="dark"] .vp-langbar { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .vp-langbar .wf-tg-glass .wf-tabx { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #cbd3e1; }
[data-bs-theme="dark"] .vp-langbar .wf-tg-glass .wf-tabx:hover { background: rgba(255, 255, 255, .08); color: var(--wf-text, #e8eaf1); }
[data-bs-theme="dark"] .vp-sedit { background: rgba(20, 23, 32, .88); border-color: rgba(255, 255, 255, .14); color: var(--wf-text, #e8eaf1); }
[data-bs-theme="dark"] .vp-sedit:hover { background: rgba(20, 23, 32, 1); }
/* Een uitgezette balk of slide: gedempt, maar niet lichter dan de kaart eromheen. */
[data-bs-theme="dark"] .vp-b:has([data-bsw]:not(:checked)) .vp-bh,
[data-bs-theme="dark"] .vp-row:has([data-slide-aan]:not(:checked)) .vp-rh { background: #2a2f3c; }
[data-bs-theme="dark"] .vp-b:has([data-bsw]:not(:checked)) .vp-bnm,
[data-bs-theme="dark"] .vp-row:has([data-slide-aan]:not(:checked)) .vp-rn { color: #b6bdca; }
[data-bs-theme="dark"] .vp-swb { background: rgba(255, 255, 255, .14); }
[data-bs-theme="dark"] .vp-swb-l { color: #e8eaf1; }
[data-bs-theme="dark"] .vp-act { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .vp-act-t b { color: var(--wf-text, #e8eaf1); }
[data-bs-theme="dark"] .vp-add,
[data-bs-theme="dark"] .vp-ctab { background: rgba(255, 255, 255, .03); }
[data-bs-theme="dark"] .vp-r2 .dot,
[data-bs-theme="dark"] .vp-chk .box { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); }
[data-bs-theme="dark"] .vp-r2, [data-bs-theme="dark"] .vp-chk { color: var(--wf-text, #e8eaf1); }
[data-bs-theme="dark"] .vp-fl { color: var(--wf-text, #e8eaf1); }
[data-bs-theme="dark"] .vp-mbody b { color: var(--wf-text, #e8eaf1); }
[data-bs-theme="dark"] .vp-how-t { color: var(--wf-text, #e8eaf1); }
[data-bs-theme="dark"] .vp-tr,
[data-bs-theme="dark"] .vp-aibtn {
  background: linear-gradient(#1a1d27, #1a1d27) padding-box,
              linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%) border-box;
  color: var(--wf-text, #e8eaf1);
}
[data-bs-theme="dark"] .vp-tr .div, [data-bs-theme="dark"] .vp-aibtn .div { background: rgba(255, 255, 255, .18); }

/* In de donkere modus is --wf-title een LICHTE roze; als vulling van een gekleurde kop levert dat
   wit-op-lichtroze op (±1,9:1). De kop houdt daarom zijn eigen, diepe magenta. */
[data-bs-theme="dark"] .vp-bh,
[data-bs-theme="dark"] .vp-rh { background: #6d1a3c; }
/* Rood en teal uit het ontwerp zijn op een donkere ondergrond te donker om te lezen. */
[data-bs-theme="dark"] .vp-mdel,
[data-bs-theme="dark"] .vp-sbtn.-wis,
[data-bs-theme="dark"] .vp-fbtn.-wis:hover { color: #ff9ba0; border-color: rgba(255, 155, 160, .38); }
[data-bs-theme="dark"] .vp-mdel:hover,
[data-bs-theme="dark"] .vp-sbtn.-wis:hover { background: #d81f25; border-color: #d81f25; color: #fff; }
[data-bs-theme="dark"] .vp-kop,
[data-bs-theme="dark"] .vp-sbtn:hover,
[data-bs-theme="dark"] .vp-medit:hover,
[data-bs-theme="dark"] .vp-hb:hover { color: #7fd6f2; }
[data-bs-theme="dark"] .vp-fbtn { background: rgba(176, 209, 54, .14); border-color: rgba(176, 209, 54, .4); color: #c3dd6a; }
[data-bs-theme="dark"] .vp-ctab { color: #f1a9cb; }
[data-bs-theme="dark"] .vp-cnt { background: rgba(176, 209, 54, .16); color: #c3dd6a; }
[data-bs-theme="dark"] .vp-note.-tip { color: #f0c98a; }
[data-bs-theme="dark"] .vp-note.-info { color: #8fd8f2; }
[data-bs-theme="dark"] .vp-note.-waarschuwing { color: #f0c98a; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Meertaligheid (/dashboard/Meertalig) — naar het ontwerp "Webfix Meertalig".

   Twee kolommen: links taal toevoegen + de talenlijst, rechts het voorbeeld en de uitleg. De
   knoppen komen uit onze eigen stijlgids (.wf-btn / .wf-aibtn) en de vlaggen uit _LangFlag; de
   rest volgt het ontwerp.

   De balk bovenaan (.mt-top) staat NIET hier maar bij de shell (_WfVertaalBalk): de klant moet de
   voortgang ook zien als hij ondertussen een andere pagina opent.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
/*  Het "Webfix AI"-woordmerk in een lopende zin. De SVG is 1em hoog, dus de grootte volgt gewoon de
    tekst eromheen; inline-flex + line-height:0 houdt hem netjes op de basislijn. */
.mt-merk { display: inline-flex; align-items: center; line-height: 0; vertical-align: -.18em; font-size: 1.05em; color: var(--wf-text, #1e293b); }
.mt-merk-sm { font-size: .95em; }
/* Inline-flex slikt de spatie ernaast op; die zetten we er zelf bij. */
.mt-merk + span, .mt-merk-na { margin-left: .25em; }

/*  Het "Flows"-woordmerk in een lopende zin. .wf-flows-wm is wit-op-gradient (voor de headerbalk) en
    valt weg op een lichte achtergrond; deze variant is de merkgradient als tekstkleur. */
.mt-flows {
  display: inline-flex; align-items: baseline; white-space: nowrap; font-family: 'Sansation', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; letter-spacing: -.015em;
  background-image: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.mt-flows .tm {
  font-family: var(--font-body, inherit); font-weight: 700; font-size: max(8px, .36em); line-height: 1;
  vertical-align: text-top; position: relative; top: .15em; margin-left: .1em;
  -webkit-text-fill-color: var(--wf-muted, #9aa2b1); color: var(--wf-muted, #9aa2b1);
}

/*  De balk bovenaan zolang er vertaald wordt (partial _WfVertaalBalk, in de shell). Sticky, zodat
    hij blijft staan terwijl de klant verder scrollt of naar een andere pagina gaat. */
.mt-top {
  position: fixed; top: 0; right: 0; left: 0; z-index: 1040;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 22px; background: var(--wf-surface, #fff); border-bottom: 1px solid var(--wf-border, #e2e8f0);
  box-shadow: 0 4px 16px rgba(1, 16, 61, .07);
}
/*  De balk ligt vast bovenaan, dus schuift de pagina er precies zo ver onderdoor. De hoogte komt uit
    wf-vertaalbalk.js (hij verschilt: op een telefoon wikkelt de balk).

    De zijbalk staat zelf ook vast en trekt zich niets aan van die ruimte -- zonder deze regel zou de
    balk het Webfix-logo bovenin afdekken. Hij schuift dus mee en wordt evenveel korter. */
/*  Onder de balk hoort 20px lucht, en dán pas de zijbalk en de headerbalk. De shell zet die twee zelf
    al 15px van de bovenkant, dus de pagina hoeft er maar 5 bij te doen om op diezelfde 20 uit te
    komen; de zijbalk staat vast en krijgt de hele afstand in één keer. */
body.wf-vertaalt { padding-top: calc(var(--wf-vbh, 62px) + 5px); }
/*  !important omdat wf-sidebar-ivory.css de zwevende zijbalk met !important op top/bottom zet; zonder
    deze twee bleef hij onder de balk doorlopen. */
body.wf-vertaalt .left-sidebar {
  top: calc(var(--wf-vbh, 62px) + 20px) !important;
  bottom: 15px !important;
  height: auto !important;
}
.mt-top[hidden] { display: none; }
.mt-top-g { position: absolute; top: 0; right: 0; left: 0; height: 3px; overflow: hidden; background: rgba(1, 16, 61, .06); }
.mt-top-g[hidden] { display: none; }
.mt-top-g span { display: block; height: 100%; width: 30%; background: linear-gradient(90deg, #b0d136, #da176c, #32bcee); animation: wf-mt-loop 1.6s linear infinite; }
@keyframes wf-mt-loop { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .mt-top-g span { animation: none; width: 100%; } }
.mt-top-t { flex: 1; min-width: 180px; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.mt-top-t b { font-weight: 700; }
.mt-top-t > span { display: block; margin-top: 2px; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.mt-top .mt-bar { flex: 1 1 200px; min-width: 140px; width: auto; }
.mt-top-n { flex: none; font-weight: 800; font-size: 13px; color: var(--wf-text, #1e293b); }
.mt-top-n[hidden] { display: none; }
.mt-top-ok { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: 9999px; background: rgba(176, 209, 54, .18); font-weight: 700; font-size: 11.5px; color: #4e6711; }
.mt-top-ok[hidden] { display: none; }
.mt-top-ok i { font-size: 11px; color: #5f7a12; }
.mt-top-x {
  flex: none; width: 32px; height: 32px; border-radius: 9999px; border: 1px solid rgba(1, 16, 61, .12);
  background: var(--wf-surface, #fff); cursor: pointer; font-size: 12px; color: var(--wf-text-soft, #666c73);
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s;
}
.mt-top-x:hover { border-color: var(--wf-pink, #da176c); color: var(--wf-title, #a12359); }
@media (max-width: 700px) {
  /* Op een telefoon telt de melding; de teller en de balk mogen wijken. */
  .mt-top { gap: 10px; padding: 10px 14px; }
  .mt-top .mt-bar { flex: 1 1 100%; order: 3; }
  .mt-top-n { order: 2; }
}

/*  Reviewbalk (_WfReviewBalk + wf-reviewbalk.js): dezelfde balk, voor reviews die op de achtergrond worden
    opgehaald. Loopt er tegelijk een vertaling, dan staat hij daar direct onder; de pagina schuift dan onder
    allebei door. wf-reviewbalk.js zet zijn hoogte als --wf-rbh. */
.mt-top.-rv { top: 0; z-index: 1039; }
body.wf-vertaalt .mt-top.-rv { top: var(--wf-vbh, 62px); }
.mt-top .mt-bar[hidden] { display: none; }
.mt-top-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 10px; background: rgba(245, 179, 1, .14); color: #d99a00; font-size: 14px;
}
.mt-top.-rv.-fout .mt-top-ico { background: rgba(217, 45, 32, .10); color: #d92d20; }
.mt-top.-rv.-fout .mt-top-t > span { color: #b42318; }
.mt-top-link { flex: none; font-weight: 700; font-size: 12.5px; color: var(--wf-title, #a12359); text-decoration: underline; text-underline-offset: 2px; }
.mt-top-link:hover { color: var(--wf-pink, #da176c); }
.mt-top-link[hidden] { display: none; }
body.wf-rvbalk { padding-top: calc(var(--wf-rbh, 62px) + 5px); }
body.wf-vertaalt.wf-rvbalk { padding-top: calc(var(--wf-vbh, 62px) + var(--wf-rbh, 62px) + 5px); }
body.wf-rvbalk .left-sidebar {
  top: calc(var(--wf-rbh, 62px) + 20px) !important;
  bottom: 15px !important;
  height: auto !important;
}
body.wf-vertaalt.wf-rvbalk .left-sidebar { top: calc(var(--wf-vbh, 62px) + var(--wf-rbh, 62px) + 20px) !important; }
[data-bs-theme="dark"] .mt-top-ico { background: rgba(245, 179, 1, .16); color: #f5c542; }

/*  Géén eigen max-width. Het ontwerp stond op zichzelf en kapte daar op 1360px af; in het dashboard
    bepaalt de shell de breedte al. Met die cap erbij liep de inhoud op een breed scherm smaller dan
    de paginabalk erboven -- en een pagina-card hoort even breed te zijn als die balk. */
.mt { width: 100%; }
.mt-grid { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
.mt-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.mt-card {
  position: relative; background: var(--wf-surface, #fff); border: 1px solid rgba(1, 16, 61, .08);
  border-radius: 22px; box-shadow: 0 10px 26px rgba(1, 16, 61, .05);
}
.mt-ch {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; background: #f8f9fc;
  border-radius: 22px 22px 0 0; border-bottom: 1px solid var(--wf-border, #e2e8f0);
}
.mt-ch > i { flex: none; font-size: 13px; color: var(--wf-title, #a12359); }
/* display:contents laat de titel en de ondertitel los in de flexbalk vallen, zodat de teller en de
   knop ernaast kunnen staan en de ondertitel eronder over de volle breedte loopt. */
.mt-ct { display: contents; }
.mt-ct b { font-weight: 700; font-size: 14.5px; color: var(--wf-text, #1e293b); }
.mt-ct > span { flex: 1 0 100%; order: 2; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); }
.mt-ch .wf-btn { flex: none; order: 1; margin-left: auto; }
.mt-checkr { flex: 1 0 100%; order: 3; display: none; align-items: center; gap: 9px; margin-top: 4px; font-size: 12.5px; color: #4e6711; }
.mt-checkr.is-on { display: flex; }
.mt-checkr i { font-size: 11px; color: #5f7a12; }
.mt-checkr.-open, .mt-checkr.-open i { color: #8a6117; }
.mt-cnt {
  flex: none; order: 1; display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 9999px;
  background: var(--wf-surface, #fff); border: 1px solid rgba(1, 16, 61, .10); font-weight: 800; font-size: 12px;
  color: var(--wf-text, #1e293b); margin-left: auto;
}
.mt-cb { padding: 16px 18px 18px; }

/* -- Taal toevoegen -- */
.mt-add { display: flex; align-items: flex-end; gap: 11px; flex-wrap: wrap; }
.mt-selw { position: relative; flex: 1; min-width: 220px; }
.mt-caret { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 11px; color: var(--wf-text-soft, #666c73); pointer-events: none; }
.mt-sel {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; height: 44px;
  padding: 0 40px 0 15px; border-radius: 11px; border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd;
  font-size: 14px; color: var(--wf-text, #1e293b); cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.mt-sel:hover { border-color: rgba(1, 16, 61, .18); }
.mt-sel:focus-visible { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.mt-sel[disabled] { cursor: not-allowed; opacity: .6; }
.mt-sel-v { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-sel-v em { font-style: normal; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }

/* Het uitklapmenu ligt over de kaart eronder heen; die mag er dus niet overheen komen. */
.mt-card:has(.mt-dd) { z-index: 5; }
.mt-dd {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 30; padding: 7px;
  max-height: 320px; overflow-y: auto; border-radius: 14px; border: 1px solid rgba(1, 16, 61, .10);
  background: var(--wf-surface, #fff); box-shadow: 0 14px 34px rgba(1, 16, 61, .16);
}
.mt-dd.is-open { display: block; }
.mt-ddi {
  display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: none; border-radius: 10px; background: transparent; cursor: pointer; text-align: left;
  font-size: 14px; color: var(--wf-text, #1e293b); transition: background .18s;
}
.mt-ddi:hover, .mt-ddi:focus-visible { background: rgba(218, 23, 108, .07); outline: none; }
.mt-ddi b { font-weight: 600; }
.mt-ddi em { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }

/* "Meteen de hele website vertalen" — een aanklikbaar kaartje in plaats van een kaal keuzevakje. */
.mt-opt {
  position: relative; display: flex; align-items: flex-start; gap: 11px; margin-top: 15px; padding: 13px 15px;
  border-radius: 14px; border: 1px solid rgba(1, 16, 61, .10); background: #fbfbfd; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.mt-opt:has(input:checked) { border-color: rgba(218, 23, 108, .2); background: rgba(218, 23, 108, .06); }
.mt-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.mt-box {
  flex: none; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid rgba(1, 16, 61, .22);
  background: var(--wf-surface, #fff); font-size: 9px; color: transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.mt-opt:has(input:checked) .mt-box { background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff; }
.mt-opt:has(input:focus-visible) .mt-box { box-shadow: 0 0 0 3px rgba(50, 188, 238, .25); }
.mt-opt-t { flex: 1; min-width: 0; }
.mt-opt-t b { display: block; font-weight: 700; font-size: 13.5px; color: var(--wf-text, #1e293b); }
.mt-opt-t > span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #666c73); }

/*  De regel over de juridische pagina's, onder de vertaalkeuze. Bewust rustig -- het is een
    aandachtspunt en geen waarschuwing: de vertaling gebeurt gewoon, ze hoort alleen nagekeken. */
.mt-jur {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 10px 0 0; padding: 9px 11px;
  border: 1px solid var(--wf-border, #e2e8f0); border-radius: 10px;
  background: var(--wf-bg, #f5f6fa);
  font-size: 12px; line-height: 1.5; color: var(--wf-text-soft, #666c73);
}
.mt-jur i { flex: none; margin-top: 1px; font-size: 13px; color: var(--wf-title, #a12359); }
.mt-jur b { color: var(--wf-text, #1e293b); font-weight: 600; }

/* -- De talenlijst -- */
/*  container-type: inline-size -> de rijen mogen zich richten naar de breedte van de LIJST in plaats
    van die van het venster. Dat is hier het enige wat klopt: met de zijbalk open is de kaart op een
    1366px-laptop smaller dan op een 1200px-venster zonder zijbalk. Zie .mt-lock verderop. */
.mt-list { display: flex; flex-direction: column; gap: 9px; container-type: inline-size; }
/*  De rij wikkelt op de breedte van de KAART, niet van het scherm: in het dashboard staat er een
    zijbalk naast, dus de kaart is al smal terwijl het venster nog breed is. Met een minimum op de
    naamkolom en flex-wrap zoekt de rij zelf het juiste moment om te breken. */
.mt-row {
  position: relative; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 11px 13px;
  border: 1px solid rgba(1, 16, 61, .08); border-radius: 16px; background: var(--wf-surface, #fff);
  transition: border-color .2s, box-shadow .2s, transform .18s;
}
.mt-row:hover { border-color: rgba(218, 23, 108, .22); box-shadow: 0 6px 16px rgba(1, 6, 20, .07); }
.mt-row.-std { background: #fbfbfd; }
.mt-grip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 32px; font-size: 12px; color: var(--wf-muted, #9aa2b1); cursor: grab; }
.mt-flag { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: #f2f4f8; }
.mt-nm { flex: 1 1 190px; min-width: 150px; }
/*  Alleen de taalnaam zelf (direct kind). Met .mt-nm b kregen ook de cijfers in de voortgangsgroepen
    ("Pagina's 88/92") display:block en 14,5px, en stond elk cijfer op een eigen regel (14-09-2026). */
.mt-nm > b { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--wf-text, #1e293b); }
.mt-nm > span { display: block; margin-top: 2px; font-size: 12px; color: var(--wf-text-soft, #666c73); }
.mt-badge { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 9999px; font-weight: 700; font-size: 11.5px; }
.mt-badge.-std { background: rgba(176, 209, 54, .18); color: #4e6711; }
.mt-badge.-klaar { background: rgba(50, 188, 238, .14); color: #12667f; }
.mt-badge.-open { background: #f2f4f8; color: var(--wf-text-soft, #666c73); }
.mt-badge i { font-size: 10px; }
/*  Grijs regeltje op de balk van de hoofdtaal: het staat midden tussen de taalnaam en de badge, op
    dezelfde regel. De kolom is in het dashboard maar zo'n 600px breed, dus het regeltje krimpt mee
    (min-width: 0) en breekt desnoods over twee regeltjes in plaats van de badge weg te duwen. */
.mt-hint {
  flex: 1 1 80px; min-width: 0; align-self: center; text-align: center; line-height: 1.35;
  font-size: 12px; color: var(--wf-muted, #9aa2b1);
}
/*  Alleen op de hoofdtaalrij staat er een regeltje tussen de naam en de badge. Die rij is in het
    dashboard smal (op 1366px zo'n 525px binnenwerks), dus daar mag de naamkolom smaller worden dan
    de 190px hierboven - anders past "Altijd aan" er niet meer bij en valt dat op een tweede regel. */
@media (min-width: 701px) { .mt-row.-std .mt-nm { flex: 1 1 140px; min-width: 140px; } }
.mt-lock { flex: none; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 11.5px; color: var(--wf-text-soft, #666c73); }
.mt-lock i { font-size: 10px; }
/*  Onder 592px lijstbreedte past "Altijd aan" er niet meer bij zonder dat de taalnaam en het grijze
    regeltje allebei gaan breken (gemeten: de rij springt daar van 64 naar 81px). Daar houden we
    alleen het slotje over -- de uitleg zit al in de tooltip en in de badge "Hoofdtaal" ernaast. */
@container (max-width: 591px) { .mt-lock > span { display: none; } }

/* Een taal tijdelijk uitzetten. */
.mt-sw {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px; height: 30px;
  box-sizing: border-box; padding: 0 13px 0 5px; border-radius: 9999px; background: #f2f4f8; cursor: pointer;
  border: none; transition: background .25s;
}
.mt-sw:has(input:checked) { background: rgba(176, 209, 54, .2); }
.mt-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.mt-tr { flex: none; position: relative; width: 34px; height: 19px; border-radius: 9999px; background: #e6e9f0; transition: background .25s; }
.mt-kn { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(1, 16, 61, .22); transition: transform .25s; }
.mt-sw:has(input:checked) .mt-tr { background: #b0d136; }
.mt-sw:has(input:checked) .mt-kn { transform: translateX(15px); }
.mt-sw:has(input:focus-visible) .mt-tr { box-shadow: 0 0 0 3px rgba(50, 188, 238, .3); }
.mt-sw-l { font-weight: 700; font-size: 11.5px; color: var(--wf-text-soft, #666c73); white-space: nowrap; }
.mt-sw:has(input:checked) .mt-sw-l { color: #4e6711; }
.mt-row.-uit { background: #fbfbfd; }
.mt-row.-uit .mt-nm b, .mt-row.-uit .mt-nm > span { color: #8a919c; }
.mt-row.-uit .wf-langflag { opacity: .5; }
.mt-row.-uit .wf-aibtn { opacity: .45; pointer-events: none; }
.mt-row .wf-aibtn { white-space: nowrap; }
/* Breekt de rij, dan gaan de knoppen samen op een eigen regel rechts. */
.mt-row .mt-sw { margin-left: auto; }

.mt-del {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid rgba(216, 31, 37, .24); border-radius: 9999px; background: var(--wf-surface, #fff);
  cursor: pointer; font-size: 12px; color: #b3181d; transition: background .2s, border-color .2s, color .2s;
}
.mt-del:hover { background: #d81f25; border-color: #d81f25; color: #fff; }
.mt-drop {
  display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px;
  border: 2px dashed #b0d136; border-radius: 16px; background: rgba(176, 209, 54, .09);
  font-weight: 700; font-size: 12.5px; color: #4e6711;
}

/* -- De zijkolom -- */
.mt-side-t { display: flex; align-items: center; gap: 10px; }
.mt-side-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(218, 23, 108, .08); color: var(--wf-title, #a12359); font-size: 14px; }
.mt-side-t b { font-weight: 800; font-size: 15.5px; color: var(--wf-text, #1e293b); }
.mt-side-p { margin: 11px 0 0; font-size: 13px; line-height: 1.6; color: var(--wf-text-soft, #666c73); }
.mt-side-a { margin-top: 14px; }
.mt-side-a .wf-btn { width: 100%; justify-content: center; }

.mt-prev { border: 1px solid rgba(1, 16, 61, .08); border-radius: 16px; overflow: hidden; }
.mt-prev-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: #f8f9fc; border-bottom: 1px solid var(--wf-border, #e2e8f0); font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.mt-prev-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 9999px; background: var(--wf-surface, #fff); border: 1px solid rgba(1, 16, 61, .10); font-weight: 700; font-size: 12.5px; color: var(--wf-text, #1e293b); }
.mt-prev-r { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: var(--wf-text, #1e293b); transition: opacity .2s; }
.mt-prev-r + .mt-prev-r { border-top: 1px solid rgba(1, 16, 61, .06); }
.mt-prev-r.-uit { opacity: .45; }
.mt-prev-r b { flex: 1; min-width: 0; font-weight: 600; }
.mt-prev-r .mt-flag { width: 26px; height: 26px; }
.mt-prev-s { flex: none; font-weight: 700; font-size: 11.5px; color: #4e6711; }
.mt-prev-s.-aan { color: #12667f; }
.mt-prev-s.-uit { color: var(--wf-text-soft, #666c73); }
.mt-tip { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(50, 188, 238, .10); font-size: 12.5px; line-height: 1.6; color: #12667f; }
.mt-tip i { flex: none; margin-top: 2px; font-size: 12px; color: #1f8fbb; }

/* -- Het vertaalvenster -- */
.mt-mod-dialog { max-width: 520px; }
.mt-mod { border: none; border-radius: 24px; overflow: hidden; }
.mt-mh {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 13px; padding: 16px 20px;
  background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%);
  background-size: 200% 100%; animation: wf-ai-drift 11s ease-in-out infinite;
}
.mt-mh::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%); }
.mt-mh > * { position: relative; z-index: 1; }
.mt-chip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 255, 255, .94); box-shadow: 0 3px 10px rgba(1, 16, 61, .18); }
.mt-chip img { width: 24px; height: 24px; object-fit: contain; display: block; }
.mt-mh-t { flex: 1; min-width: 0; }
.mt-mh-t b { display: block; font-weight: 800; font-size: 17px; color: #fff; text-shadow: 0 1px 6px rgba(1, 16, 61, .3); }
.mt-mh-t > span { display: block; margin-top: 2px; font-size: 12.5px; color: #fff; text-shadow: 0 1px 6px rgba(1, 16, 61, .3); }
/* Het woordmerk in de kop van het vertaalvenster: "Webfix" wit op de gekleurde kop (Tom, 14-09-2026). */
.mt-mh-t .wf-ai-word { color: #fff; }
.mt-mx { flex: none; width: 34px; height: 34px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .2); color: #fff; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .25s; }
.mt-mx:hover { background: rgba(255, 255, 255, .34); }
.mt-mb { padding: 20px; }
.mt-mb-p { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: var(--wf-text-soft, #666c73); }
.mt-mrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.mt-mrow b { font-weight: 800; font-size: 13px; color: var(--wf-text, #1e293b); }
.mt-bar { display: block; width: 100%; height: 8px; border-radius: 9999px; background: rgba(1, 16, 61, .07); overflow: hidden; }
.mt-bar i { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #b0d136, #da176c, #32bcee); background-size: 200% 100%; animation: wf-ai-drift 9s ease-in-out infinite; transition: width .4s cubic-bezier(.4, 0, .2, 1); }
.mt-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.mt-step { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 13px; background: #fbfbfd; border: 1px solid rgba(1, 16, 61, .07); font-size: 13px; color: var(--wf-text, #1e293b); }
.mt-step > i { flex: none; width: 16px; text-align: center; font-size: 12px; color: var(--wf-muted, #9aa2b1); }
.mt-step.-ok > i { color: #5f7a12; }
.mt-step.-bezig { border-color: rgba(218, 23, 108, .24); background: rgba(218, 23, 108, .06); }
.mt-step.-bezig > i { color: var(--wf-title, #a12359); animation: wf-mt-draai 1.1s linear infinite; }
@keyframes wf-mt-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mt-step.-bezig > i { animation: none; } }
.mt-step span { flex: 1; min-width: 0; }
.mt-step em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--wf-text-soft, #666c73); }
.mt-mf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 15px 20px 18px; border-top: 1px solid var(--wf-border, #e2e8f0); background: #fbfbfd; }
.mt-mf-n { margin-left: auto; font-size: 12px; color: var(--wf-text-soft, #666c73); }

/*  Waar staat de vertaling van een taal nog open? De drie groepen (pagina's, modules, menu en
    formulieren) onder de taalnaam - dezelfde volgorde als waarin de vertaaltaak werkt. */
.mt-groepen { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 12px; color: #8a919c; }
/*  .mt-nm > span (hierboven) zet elke span in dit blok op display:block, en de groepenbalk IS een span: zonder
    deze regel liepen de groepen als gewone tekst door en brak "Vaste teksten" midden in het label. Elke groep
    blijft heel. */
.mt-nm > .mt-groepen { display: flex; }
.mt-groep { white-space: nowrap; }
.mt-groep b { display: inline; margin-left: 3px; font-size: 12px; font-weight: 700; color: #5b6b7d; }
[data-bs-theme="dark"] .mt-groepen { color: var(--wf-muted, #64748b); }
[data-bs-theme="dark"] .mt-groep b { color: var(--wf-text-soft, #94a3b8); }

/*  Webadressen per taal: een lijst per module in plaats van een tabel. Een tabel met vier talen gaf
    velden van zestig pixels en schoof op een telefoon opzij; nu staan de velden per module bij elkaar
    en op een telefoon onder elkaar, met de vlag als label. */
.mt-seg { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.mt-seg-rij {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 6px 14px; align-items: center;
  padding: 12px 14px; border: 1px solid rgba(1, 16, 61, .09); border-radius: 14px; background: #fbfbfd;
}
.mt-seg-mod { font-weight: 700; font-size: 13.5px; color: var(--wf-black, #000229); }
.mt-seg-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; min-width: 0; }
.mt-seg-veld { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.mt-seg-taal { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #666c73; }
.mt-seg-taal .lg { display: none; }
.mt-seg-veld .wf-ms-in { min-width: 0; }

@media (max-width: 640px) {
  /*  Op een telefoon onder elkaar: de modulenaam als kopje, daaronder een veld per taal. */
  .mt-seg-rij { grid-template-columns: 1fr; }
  .mt-seg-velden { grid-template-columns: 1fr; }
}

[data-bs-theme="dark"] .mt-seg-rij { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .mt-seg-mod { color: var(--wf-text, #f1f5f9); }
[data-bs-theme="dark"] .mt-seg-taal { color: var(--wf-text-soft, #94a3b8); }

/* -- Kleinere schermen -- */
@media (max-width: 1120px) { .mt-grid { grid-template-columns: 1fr; } }

/*  Vanaf tablet naar beneden bedien je dit met een vinger: elk aanraakvlak minstens 44px hoog. De
    schuif houdt zijn eigen maatje (die 19px baan is de vorm), maar het vlak eromheen groeit mee. */
@media (max-width: 1100px) {
  .mt-sw { height: 44px; padding: 0 15px 0 7px; }
  .mt-del { width: 44px; height: 44px; }
  .mt-row .wf-aibtn, .mt-ch .wf-btn { min-height: 44px; }
  .mt-ddi { min-height: 44px; }
  .mt-grip { height: 44px; }
}
@media (max-width: 700px) {
  .mt-row { flex-wrap: wrap; }
  .mt-nm { flex: 1 0 100%; order: 3; }
  .mt-badge, .mt-lock { order: 2; }
  /* Op de telefoon is er geen ruimte naast de naam: daar krijgt het regeltje wel een eigen regel. */
  .mt-hint { flex: 1 0 100%; order: 6; margin-top: 2px; text-align: left; }
  .mt-sw { order: 4; }
  .mt-row .wf-aibtn, .mt-del { order: 5; }
  /* flex-basis 0: de vertaalknop deelt de regel met de prullenbak in plaats van hem eraf te duwen. */
  .mt-row .wf-aibtn { flex: 1 1 0; min-width: 0; justify-content: center; }
  .mt-add { flex-direction: column; align-items: stretch; }
  .mt-add .wf-btn { width: 100%; justify-content: center; }
  .mt-mf { flex-direction: column; align-items: stretch; }
  .mt-mf .wf-btn { width: 100%; justify-content: center; }
  .mt-mf-n { margin-left: 0; text-align: center; }
}
@media (max-width: 480px) {
  /*  Op de smalste telefoons past "Webfix AI | Volledig vertalen" niet meer naast de prullenbak: het
      woordmerk hoort er altijd bij, dus krijgt de knop een eigen regel en schuift de prullenbak naar
      de regel van het schuifje. */
  .mt-row .wf-aibtn { flex: 1 0 100%; }
  .mt-del { order: 4; }
}

/* -- Donkere modus -- */
[data-bs-theme="dark"] .mt-ch,
[data-bs-theme="dark"] .mt-prev-h,
[data-bs-theme="dark"] .mt-step,
[data-bs-theme="dark"] .mt-mf { background: rgba(255, 255, 255, .04); }
[data-bs-theme="dark"] .mt-card,
[data-bs-theme="dark"] .mt-row,
[data-bs-theme="dark"] .mt-prev,
[data-bs-theme="dark"] .mt-dd { border-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .mt-row.-std,
[data-bs-theme="dark"] .mt-row.-uit,
[data-bs-theme="dark"] .mt-opt,
[data-bs-theme="dark"] .mt-sel { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .mt-flag,
[data-bs-theme="dark"] .mt-sw,
[data-bs-theme="dark"] .mt-badge.-open { background: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .mt-cnt,
[data-bs-theme="dark"] .mt-prev-pill,
[data-bs-theme="dark"] .mt-box { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .mt-tip { background: rgba(50, 188, 238, .12); color: #8fd8f2; }
[data-bs-theme="dark"] .mt-side-ic { background: rgba(218, 23, 108, .16); color: #f1a9cb; }
/*  De gekleurde labels stonden alleen in de lichte modus goed: donkergroen (#4e6711) op een lichte
    groentint en donkerblauw (#12667f) op een lichte blauwtint zijn op een donkere kaart niet meer te
    lezen. Hier dezelfde tinten als bij .wf-score en .mt-tip, zodat de hele app één donkere set deelt. */
[data-bs-theme="dark"] .mt-badge.-std,
[data-bs-theme="dark"] .mt-top-ok,
[data-bs-theme="dark"] .mt-drop { background: rgba(176, 209, 54, .16); color: #cbe479; }
[data-bs-theme="dark"] .mt-drop { border-color: rgba(176, 209, 54, .45); }
[data-bs-theme="dark"] .mt-top-ok i,
[data-bs-theme="dark"] .mt-checkr,
[data-bs-theme="dark"] .mt-checkr i,
[data-bs-theme="dark"] .mt-step.-ok > i,
[data-bs-theme="dark"] .mt-prev-s,
[data-bs-theme="dark"] .mt-sw:has(input:checked) .mt-sw-l { color: #cbe479; }
[data-bs-theme="dark"] .mt-checkr.-open,
[data-bs-theme="dark"] .mt-checkr.-open i { color: #efc172; }
[data-bs-theme="dark"] .mt-badge.-klaar { background: rgba(50, 188, 238, .14); color: #8fd8f2; }
[data-bs-theme="dark"] .mt-prev-s.-aan { color: #8fd8f2; }
/* De baan van het schuifje was in de uit-stand een lichtgrijze pil; op donker sprong die eruit. */
[data-bs-theme="dark"] .mt-tr { background: rgba(255, 255, 255, .18); }
[data-bs-theme="dark"] .mt-del { background: transparent; border-color: rgba(216, 31, 37, .42); color: #f0a9ab; }
[data-bs-theme="dark"] .mt-del:hover { background: #d81f25; border-color: #d81f25; color: #fff; }
/* Lijntjes en balkjes waren getekend in donkerblauw op wit; op donker zag je ze niet meer. */
[data-bs-theme="dark"] .mt-top-g,
[data-bs-theme="dark"] .mt-bar { background: rgba(255, 255, 255, .10); }
[data-bs-theme="dark"] .mt-prev-r + .mt-prev-r { border-top-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .mt-top-x { border-color: rgba(255, 255, 255, .14); }

/* ── Volgorde van een lijst (pijltjes + nummerveld + zwevende balk) ─────────
   Gedrag: assets/js/wf-volgorde.js. Staat hier en niet in module-scherm.css, omdat ook
   overzichten buiten de moduleschermlaag (zoals /dashboard/Pagina's) deze bediening gebruiken. */
/*  De volgorde van een lijst: pijltjes vooraan en een nummerveld links van de prullenbak. De besturing
    komt uit assets/js/wf-volgorde.js; slepen is hiervoor vervallen (in een lang overzicht sleep je je
    scheel), dus het greepje blijft verborgen zodra een lijst deze bediening heeft. */
.wf-ms-pijl { flex: none; display: inline-flex; flex-direction: column; gap: 2px; }
.wf-ms-pijlknop {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
  border: 1px solid rgba(1, 16, 61, .12); border-radius: 8px; background: #fff; cursor: pointer;
  font-size: 12px; color: #5b6b7d; transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.wf-ms-pijlknop:hover:not(:disabled) { background: rgba(1, 16, 61, .06); color: var(--wf-black, #000229); border-color: rgba(1, 16, 61, .22); }
.wf-ms-pijlknop:disabled { opacity: .3; cursor: default; }
.wf-ms-pijlknop:focus-visible { outline: 2px solid rgba(50, 188, 238, .55); outline-offset: 1px; }
.wf-ms-row.-volg .wf-ms-greep { display: none; }

.wf-ms-nr {
  flex: none; box-sizing: border-box; width: 52px; height: 34px; padding: 0 6px; text-align: center;
  border: 1px solid rgba(1, 16, 61, .12); border-radius: 10px; background: #fbfbfd;
  font-weight: 700; font-size: 13px; color: var(--wf-black, #000229);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.wf-ms-nr:focus { outline: none; border-color: var(--webfix-cyan, #32bcee); background: #fff; box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.wf-ms-nr.is-gewijzigd { border-color: var(--webfix-lime, #a8d323); background: rgba(176, 209, 54, .12); }

/*  Zwevende balk: verschijnt zodra er een nummer gewijzigd is. Nummers slaan we bewust niet vanzelf
    op - u zet er eerst een paar en drukt dan één keer op opslaan. Hij houdt rechts ruimte vrij voor de
    zwevende knoppen (chat / naar boven), die op dezelfde hoogte staan. */
.wf-volgordebalk {
  position: fixed; z-index: 1035; left: 50%; bottom: var(--wf-zweef-onder, 24px); transform: translateX(-50%) translateY(14px);
  display: none; align-items: center; gap: 16px; padding: 10px 14px 10px 18px;
  border: 1px solid rgba(1, 16, 61, .12); border-radius: 9999px; background: var(--wf-surface, #fff);
  box-shadow: 0 12px 34px rgba(1, 6, 20, .18);
  opacity: 0; transition: opacity .25s, transform .25s;
}
.wf-volgordebalk.is-on { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.wf-volgordebalk-t { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13.5px; color: var(--wf-black, #000229); }
.wf-volgordebalk-t i { font-size: 15px; color: #9aa2b1; }
.wf-volgordebalk-a { display: inline-flex; align-items: center; gap: 8px; }

/*  Aanraakschermen t/m iPad liggend: de pijltjes naast elkaar en allebei 44px, het nummerveld ook.
    Onder elkaar zijn ze 26px - dat mikt niet met een duim. */
@media (max-width: 1024.98px) {
  .wf-ms-pijl { flex-direction: row; gap: 6px; }
  .wf-ms-pijlknop { width: 44px; height: 44px; font-size: 13px; border-radius: 11px; }
  .wf-ms-nr { height: 44px; width: 56px; }
}

[data-bs-theme="dark"] .wf-ms-pijlknop { background: var(--wf-bg, #0f172a); border-color: rgba(255, 255, 255, .14); color: var(--wf-text-soft, #94a3b8); }
[data-bs-theme="dark"] .wf-ms-pijlknop:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: var(--wf-text, #f1f5f9); }
[data-bs-theme="dark"] .wf-ms-nr { background: var(--wf-bg, #0f172a); border-color: rgba(255, 255, 255, .14); color: var(--wf-text, #f1f5f9); }
[data-bs-theme="dark"] .wf-volgordebalk { background: var(--wf-surface, #1e293b); border-color: rgba(255, 255, 255, .14); }
[data-bs-theme="dark"] .wf-volgordebalk-t { color: var(--wf-text, #f1f5f9); }

/* ── /dashboard/Password en /Profiel/Wachtwoord — wachtwoord wijzigen (.ww-*) ─
 * 1:1 uit Claude Design "Webfix Wachtwoord Wijzigen". De maten, radii en schaduwen komen uit dat
 * ontwerp; de kleuren zijn vertaald naar onze tokens zodat donkere modus meekomt. Twee kaarten
 * naast elkaar: links de velden, rechts de tips. Onder de 1080px onder elkaar.
 *
 * Eén laag voor twee schermen: de klant (/dashboard/Password) en de Webfix-medewerker
 * (/Profiel/Wachtwoord) delen dezelfde partial. */
.ww { max-width: 1360px; margin: 0 auto; }
.ww-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; align-items: stretch; }
.ww-grid > .ww-card { display: flex; flex-direction: column; }
/* de laatste tip duwt de resterende ruimte naar onderen, zodat beide kaarten even hoog eindigen */
.ww-grid > .ww-card > .ww-tip:last-child { flex: 1; }

.ww-card {
  background: var(--wf-surface, #fff); border: 1px solid rgba(1, 16, 61, .08); border-radius: 22px;
  box-shadow: 0 10px 26px rgba(1, 16, 61, .05); overflow: hidden;
}

/* ---------- kop met foto rechts ---------- */
.ww-head {
  position: relative; display: flex; align-items: flex-start; gap: 13px; min-height: 92px;
  padding: 18px 20px; background: var(--wf-bg, #f8f9fc);
  border-bottom: 1px solid var(--wf-border, #e2e8f0); overflow: hidden;
}
.ww-head.-plat { min-height: 0; align-items: center; }
.ww-head-ic {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 13px;
  background: rgba(218, 23, 108, .08); color: var(--wf-title, #a12359); font-size: 15px;
}
.ww-head-ic.-groen { background: rgba(176, 209, 54, .18); color: #4e6711; }
.ww-head-t { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ww-head-t b { display: block; font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--wf-text, #1e293b); }
.ww-head-t span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--wf-text-soft, #666c73); max-width: 330px; }
/* de foto loopt vanaf rechts in de kop, met een zachte overgang naar het vlak */
/*  In het ontwerp is deze kaart ruim 700px breed; in het dashboard staat er een zijbalk naast en
    houdt hij er zo'n 530 over. Met de 62% uit het ontwerp liep de foto dwars door de ondertitel.
    Vandaar smaller, en de overgang begint verder naar rechts. */
.ww-foto {
  position: absolute; top: 0; right: 0; bottom: 0; width: 46%; min-width: 0;
  background-image: url('/assets/img/wachtwoord-veilig.webp'); background-size: cover; background-position: 62% 38%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%);
          mask-image: linear-gradient(90deg, transparent, #000 42%);
}

.ww-body { padding: 22px 20px 24px; }

/* ---------- velden ---------- */
.ww-l {
  display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-weight: 700; font-size: 11px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--wf-text-soft, #666c73);
}
.ww-l i { font-size: 11px; }
.ww-fld + .ww-fld { margin-top: 20px; }
.ww-iw { position: relative; display: block; }
.ww-in {
  display: block; box-sizing: border-box; width: 100%; height: 48px; padding: 0 46px 0 15px;
  border-radius: 12px; border: 1px solid rgba(1, 16, 61, .10); background: var(--wf-bg, #fbfbfd);
  font-size: 14.5px; color: var(--wf-text, #1e293b);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
/* Lichtgrijs, zoals Tom vroeg: een voorbeeldwaarde hoort niet te lezen als een ingevulde waarde. */
.ww-in::placeholder { color: var(--wf-muted, #9aa2b1); opacity: 1; }
.ww-in:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: var(--wf-surface, #fff); box-shadow: 0 0 0 3px rgba(50, 188, 238, .14); }
.ww-in.-ok { border-color: rgba(176, 209, 54, .55); background: rgba(176, 209, 54, .07); }
.ww-in.-fout { border-color: rgba(216, 31, 37, .4); background: rgba(216, 31, 37, .04); }
.ww-oog {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-flex;
  align-items: center; justify-content: center; width: 32px; height: 32px; border: none;
  border-radius: 9999px; background: transparent; cursor: pointer; font-size: 13px;
  color: var(--wf-muted, #8a919c); transition: background .2s, color .2s;
}
.ww-oog:hover { background: rgba(1, 16, 61, .05); color: var(--wf-title, #a12359); }
.ww-mark { position: absolute; top: 50%; right: 44px; transform: translateY(-50%); font-size: 13px; opacity: 0; transition: opacity .2s; }
.ww-mark.-alleen { right: 15px; }
.ww-mark.is-on { opacity: 1; }
.ww-mark.-ok { color: #5f7a12; }
.ww-mark.-fout { color: #b3181d; }

/* ---------- sterktemeter ---------- */
.ww-meter { display: flex; gap: 5px; margin-top: 11px; }
.ww-seg { flex: 1; height: 5px; border-radius: 9999px; background: rgba(1, 16, 61, .09); transition: background .3s; }
.ww-mrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.ww-mlab { font-weight: 700; font-size: 12.5px; color: var(--wf-text-soft, #666c73); }
.ww-mhint { flex: 1; min-width: 120px; font-size: 12px; color: var(--wf-text-soft, #666c73); }

/* eisen */
.ww-eisen { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; margin-top: 14px; }
.ww-eis { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--wf-text-soft, #666c73); transition: color .25s; }
.ww-eis i { flex: none; width: 14px; text-align: center; font-size: 11px; color: #c3c8d4; transition: color .25s; }
.ww-eis.is-ok { color: #4e6711; }
.ww-eis.is-ok i { color: #5f7a12; }
@media (max-width: 620px) { .ww-eisen { grid-template-columns: 1fr; } }

/* gelijk-melding */
.ww-match { display: none; align-items: center; gap: 9px; margin-top: 11px; padding: 10px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; }
.ww-match.is-on { display: flex; }
.ww-match.-ok { background: rgba(176, 209, 54, .16); color: #4e6711; }
.ww-match.-fout { background: rgba(216, 31, 37, .08); color: #a2181d; }
.ww-match i { flex: none; font-size: 12px; }

/* voet */
.ww-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(1, 16, 61, .08); }
.ww-foot-a { flex: 1; display: flex; align-items: center; gap: 10px; }
.ww-foot-a .ww-annuleer { margin-left: auto; }

/* ---------- tips ---------- */
.ww-tip { padding: 20px; }
.ww-tip + .ww-tip { border-top: 1px solid rgba(1, 16, 61, .07); }
.ww-tip-h { display: flex; align-items: center; gap: 11px; }
.ww-tip-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(50, 188, 238, .12); color: #12667f; font-size: 13px; }
.ww-tip-ic.-amber { background: rgba(220, 158, 47, .14); color: #8a6117; }
.ww-tip-ic.-groen { background: rgba(176, 209, 54, .18); color: #4e6711; }
.ww-tip-h b { font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--wf-text, #1e293b); }
.ww-tip-l { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ww-tip-l li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.6; color: var(--wf-text-soft, #5f6368); }
.ww-tip-l li i { flex: none; margin-top: 6px; font-size: 7px; color: var(--wf-pink, #da176c); }
.ww-tip-l li em { font-style: italic; color: var(--wf-text, #1e293b); }
.ww-tip-p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--wf-text-soft, #5f6368); }
.ww-2fa { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 11px 14px; border-radius: 13px; background: rgba(176, 209, 54, .16); font-weight: 700; font-size: 12.5px; color: #4e6711; }
.ww-2fa i { flex: none; font-size: 12px; color: #5f7a12; }

@media (max-width: 1080px) { .ww-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .ww-foto { display: none; }
  .ww-head { min-height: 0; }
  .ww-head-t span { max-width: none; }
  .ww-foot { padding-top: 0; border-top: none; }
  .ww-foot-a { flex-direction: column; align-items: stretch; width: 100%; }
  .ww-foot-a .ww-annuleer { margin-left: 0; }
  .ww-foot-a .wf-btn { width: 100%; justify-content: center; }
}
/* Aanraakmaten t/m iPad liggend (afspraak Tom): het oogje is het enige kleine bedieningsvlak. */
@media (max-width: 1024.98px) {
  .ww-oog { width: 44px; height: 44px; right: 4px; }
  .ww-in { padding-right: 56px; }
  .ww-mark { right: 52px; }
  .ww-mark.-alleen { right: 15px; }
}

/* Donkere modus: de kaart en de velden volgen de tokens; de vlakken met een vaste tint blijven,
   want groen-op-donker leest daar nog steeds goed. */
[data-bs-theme="dark"] .ww-card { border-color: var(--wf-border, #3a4658); }
[data-bs-theme="dark"] .ww-head { background: rgba(255, 255, 255, .03); }
[data-bs-theme="dark"] .ww-in { background: rgba(255, 255, 255, .04); border-color: var(--wf-border, #3a4658); }
[data-bs-theme="dark"] .ww-in:focus { background: rgba(255, 255, 255, .07); }
[data-bs-theme="dark"] .ww-seg { background: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .ww-eis i { color: #5c6577; }

/* Een lichtgrijze voorbeeldwaarde in een gewoon Bootstrap-veld: een placeholder hoort niet te lezen
   als een ingevulde waarde (Tom, 04-09-2026 — het mobiele nummer op /Profiel). */
.wf-placeholder-licht::placeholder { color: var(--wf-muted, #9aa2b1); opacity: 1; }

/* De weg naar het aparte wachtwoordscherm, onderaan de kaart met de persoonlijke gegevens. Met een
   scheiding erboven: het hoort bij dit account, maar het is een andere handeling dan het invullen
   van je naam. */
.wf-pw-naar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--wf-border, #e2e8f0);
}

/*  De twee kolommen van /Profiel even hoog, zodat de knoppenbalken eronder op één lijn staan. De
    kaart rekt mee; de balk blijft onderaan. */
.wf-profiel .row > [class*="col-"] > form { display: flex; flex-direction: column; height: 100%; }
.wf-profiel .row > [class*="col-"] > form > .wf-card { flex: 1 1 auto; }

/*  Aanraakmaten t/m iPad liggend (afspraak Tom): de invoervelden van het profiel zijn standaard 40px
    hoog, en dat is net te weinig voor een duim. De keuzechips en de schakelaar brengen hun eigen
    maat al mee. */
@media (max-width: 1024.98px) {
  .wf-profiel .form-control, .wf-profiel .form-select { min-height: 44px; }
}

/* ── Profielfoto kiezen en uitsnijden (.wf-foto*) ────────────────────────────
 * Een werkvlak over de volle breedte met een ruitjesachtergrond (zoals de logopagina): daarmee is
 * meteen duidelijk dat dit een werkvlak is en niet de foto zelf. De foto staat er gedempt in, en
 * het ronde venster in het midden toont op ware grootte wat er straks als profielfoto verschijnt.
 * Slepen aan dat venster verschuift de uitsnede (Tom, 05-09-2026). */
.wf-fotoblok { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--wf-border, #e2e8f0); }

.wf-fotostage {
  position: relative; margin-top: 10px; width: 100%; height: 230px; border-radius: 16px;
  overflow: hidden; border: 1px solid rgba(1, 16, 61, .10);
  display: flex; align-items: center; justify-content: center;
  background-color: #fbfbfd;
  background-image: linear-gradient(45deg, #eceef4 25%, transparent 25%), linear-gradient(-45deg, #eceef4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceef4 75%), linear-gradient(-45deg, transparent 75%, #eceef4 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
/*  De hele foto gedempt op de achtergrond: zo zie je ook wat je NIET kiest. */
.wf-fotostage-vol {
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; opacity: .3; filter: saturate(.5); pointer-events: none;
}
.wf-fotostage-dek { position: absolute; inset: 0; background: rgba(255, 255, 255, .35); pointer-events: none; }
.wf-fotostage.-leeg .wf-fotostage-vol, .wf-fotostage.-leeg .wf-fotostage-dek { display: none; }

/*  Het ronde venster: precies wat er straks te zien is. */
.wf-fotocirkel {
  position: relative; z-index: 2; flex: none; width: 150px; height: 150px; border-radius: 9999px;
  overflow: hidden; background: var(--wf-surface, #fff);
  border: 3px solid #fff; box-shadow: 0 6px 20px rgba(1, 16, 61, .18), 0 0 0 1px rgba(1, 16, 61, .10);
  cursor: grab; touch-action: none;
}
.wf-fotocirkel.is-sleep { cursor: grabbing; box-shadow: 0 8px 26px rgba(1, 16, 61, .26), 0 0 0 3px rgba(50, 188, 238, .45); }
/*  Een gestippelde ring om het rondje, zoals het kader in de flow-preview: die laat zien welk deel
    van de foto straks te zien is. Als outline getekend, want de rand zelf hoort wit te blijven
    (Tom, 08-09-2026). */
.wf-fotocirkel { outline: 2px dashed rgba(1, 16, 61, .35); outline-offset: 3px; }
.wf-fotocirkel.is-sleep { outline-color: rgba(50, 188, 238, .85); }
.wf-fotocirkel img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.wf-fotostage.-leeg .wf-fotocirkel { display: none; }

/*  Nog geen foto: een gestippelde cirkel op ware grootte met de groene knop eronder. Het oude
    pil-tekstje ("Nog geen profielfoto gekozen") zei wél wat er aan de hand was, maar niet wat je
    moest doen — en de knop stond onder het kader, buiten je blik (Tom, 08-09-2026). */
.wf-fotoleeg {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.wf-fotoleeg-cirkel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 118px; height: 118px; border-radius: 9999px;
  border: 2px dashed rgba(1, 16, 61, .30); background: rgba(255, 255, 255, .70);
  color: rgba(1, 16, 61, .30); font-size: 40px;
}
.wf-fotostage:not(.-leeg) .wf-fotoleeg { display: none; }
/*  Zolang het kader leeg is, staat de groene knop erin — dan is die eronder dubbelop. Zodra er een
    foto ligt, is de knop onder het kader juist de plek waar je hem verwacht (naast Verwijderen). */
.wf-fotoblok:has(.wf-fotostage.-leeg) .wf-fotoblok-knoppen [data-fotokies] { display: none; }
/*  Compacte variant voor in een venster (het gebruikersvenster op /dashboard/Gebruikers): zelfde
    kader, kleinere maten, geen scheidingslijn erboven — daar zorgt de kaartkop al voor. */
.wf-fotoblok.-klein { margin-top: 0; padding-top: 0; border-top: none; }
.wf-fotoblok.-klein .wf-fotostage { height: 186px; }
.wf-fotoblok.-klein .wf-fotocirkel { width: 112px; height: 112px; }
.wf-fotoblok.-klein .wf-fotoleeg-cirkel { width: 92px; height: 92px; font-size: 32px; }
.wf-fotoblok.-klein .wf-fotoleeg { gap: 11px; }
.wf-fotoblok.-klein .wf-fotoblok-uitleg { flex: 1 1 100%; }
.wf-fotoblok.-klein .wf-fotozoom { height: 138px; padding: 10px 7px; }
.wf-fotoblok.-klein .wf-fotozoom input[type="range"] { width: 82px; }

/*  Het gebruikersvenster t/m iPad liggend: de velden, het kruisje en het oogje waren 32-40px hoog.
    Dezelfde 44px-regel als in de rest van het beheer (Tom, 08-09-2026). */
@media (max-width: 1024.98px) {
  .gb-in { height: 44px; }
  .gb-x, .gb-oog { width: 44px; height: 44px; }
  /*  Het vinkje is klein maar het label eromheen is het aanraakvlak; dat krijgt hier de maat. */
  .gb-chk { min-height: 44px; }
  textarea.gb-in { height: auto; }
  .gb-pwveld .gb-in { padding-right: 48px; }
}
/*  De uitleg staat onderin het vlak, niet in een tooltip: je moet wéten dat je kunt slepen. */
.wf-fotostage-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9999px;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(1, 16, 61, .08);
  font-size: 12px; color: var(--wf-text-soft, #666c73); white-space: nowrap; pointer-events: none;
}
.wf-fotostage.-leeg .wf-fotostage-hint { display: none; }

/*  De schuif om de foto groter of kleiner te maken. Staat rechtsonder in het werkvlak, los van de
    sleep-uitleg eronder: het is een tweede handeling op dezelfde foto (Tom, 08-09-2026). */
.wf-fotozoom {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 8px; border-radius: 9999px;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(1, 16, 61, .08);
  box-shadow: 0 2px 8px rgba(1, 16, 61, .12);
}
.wf-fotozoom i { font-size: 13px; color: var(--wf-text-soft, #666c73); }
/*  Verticaal, zodat de schuif naast het rondje past zonder de sleep-uitleg te raken. */
.wf-fotozoom input[type="range"] {
  width: 108px; height: 20px; margin: 0; cursor: pointer; accent-color: var(--wf-pink, #da176c);
  transform: rotate(-90deg); transform-origin: center;
}
.wf-fotozoom { height: 176px; justify-content: space-between; }
.wf-fotostage.-leeg .wf-fotozoom { display: none; }
/*  Op een telefoon is het werkvlak te smal voor een schuif naast het rondje — die overlapte het.
    Daar ligt hij plat onderin, op de plek van de sleep-uitleg: dat je kunt slepen merk je op een
    telefoon vanzelf, want dat is wat je met een foto doet. */
@media (max-width: 575.98px) {
  .wf-fotostage-hint { display: none; }
  .wf-fotozoom {
    right: auto; left: 50%; top: auto; bottom: 10px; transform: translateX(-50%);
    flex-direction: row; height: auto; width: auto; padding: 7px 14px; gap: 10px;
  }
  .wf-fotozoom input[type="range"] { width: 120px; transform: none; }
  /*  Plus rechts als hij plat ligt: dan wijst de richting van de schuif weer mee. */
  .wf-fotozoom i:first-child { order: 2; }
  .wf-fotozoom i:last-child { order: 0; }
  .wf-fotozoom input[type="range"] { order: 1; }
}
[data-bs-theme="dark"] .wf-fotozoom { background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .12); }

/*  Bewerken rechtsboven in het vlak; het rondje zelf is voor slepen. */
.wf-fotorond-bew {
  position: absolute; right: 10px; top: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9999px; cursor: pointer;
  border: 1px solid var(--wf-border, #e2e8f0); background: var(--wf-surface, #fff);
  color: var(--wf-title, #a12359); font-size: 14px;
  box-shadow: 0 2px 8px rgba(1, 16, 61, .18); transition: transform .2s, background .2s;
}
.wf-fotorond-bew:hover { transform: translateY(-1px); background: var(--wf-bg, #f5f6fa); }
.wf-fotostage.-leeg .wf-fotorond-bew { display: none; }

.wf-fotoblok-knoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wf-fotoblok-uitleg { flex: 1 1 200px; min-width: 0; margin: 0; }

@media (max-width: 575.98px) {
  /*  Iets hoger dan het rondje breed is: onderin ligt op een telefoon de zoomschuif, en die hoort
      onder de foto te liggen en er niet overheen. */
  .wf-fotostage { height: 244px; }
  .wf-fotocirkel { width: 128px; height: 128px; }
  .wf-fotoleeg-cirkel { width: 100px; height: 100px; font-size: 34px; }
  .wf-fotoblok-knoppen .wf-btn { flex: 1 1 100%; justify-content: center; }
  .wf-fotoblok-uitleg { flex: 1 1 100%; }
}
/* Aanraakmaten t/m iPad liggend. */
@media (max-width: 1024.98px) {
  .wf-fotoblok-knoppen .wf-btn { min-height: 44px; }
  .wf-fotorond-bew { width: 44px; height: 44px; }
}

[data-bs-theme="dark"] .wf-fotostage { background-color: #16203a; background-image: none; }
[data-bs-theme="dark"] .wf-fotostage-dek { background: rgba(0, 0, 0, .35); }
[data-bs-theme="dark"] .wf-fotostage-hint { background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .75); }
[data-bs-theme="dark"] .wf-fotoleeg-cirkel { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .35); }
[data-bs-theme="dark"] .wf-fotocirkel { outline-color: rgba(255, 255, 255, .35); }
.wf-pw-naar .wf-subtext { flex: 1; min-width: 180px; margin: 0; }
@media (max-width: 575.98px) {
  .wf-pw-naar .wf-btn { width: 100%; justify-content: center; }
}

/* ── Superadmin-dashboard (/admin) ───────────────────────────────────────────
 * Kleine bouwstenen die alleen op een dashboard voorkomen: een kerncijfer, een sectiekopje binnen
 * een kaart, een verhoudingsbalkje, een vinkje/kruisje en een scrollbaar lijstje. Bewust hier en
 * niet in de view: ze komen in meerdere blokken terug, en een dashboardblok hoort nergens een eigen
 * kleur of maat te verzinnen.
 * ---------------------------------------------------------------------------------------------- */

/* Eén groot cijfer met zijn labeltje erboven (.wf-cell-sub). */
.wf-dash-kpi { font-weight: 800; font-size: 20px; color: #000229; line-height: 1.2; }

/* Kopje van een sectie BINNEN een kaart — scheidt twee lijstjes zonder een tweede kaart te openen. */
.wf-dash-sect {
  padding: 14px 26px 6px; font-weight: 700; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: #9aa2b1;
}

/* Verhoudingsbalkje (aandeel in het totaal). De breedte zet de view per rij inline — dat is een
   waarde, geen patroon. */
.wf-dash-bar { height: 5px; border-radius: 9999px; background: rgba(1, 16, 61, .07); overflow: hidden; }
.wf-dash-bar > i { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #b0d136, #32bcee); }

/* Groen vinkje / rood kruisje in een lijst — voltooid of niet. */
.wf-dash-vink {
  flex: none; width: 26px; height: 26px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.wf-dash-vink.-ja { background: rgba(176, 209, 54, .22); color: #5f7a12; }
.wf-dash-vink.-nee { background: rgba(216, 31, 37, .10); color: #d81f25; }

/* Het groene stipje van "nu online", met een zachte pulsering zodat het opvalt zonder te schreeuwen. */
.wf-dash-online {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: #7d9a1f;
  box-shadow: 0 0 0 0 rgba(125, 154, 31, .5); animation: wf-dash-puls 2.2s ease-in-out infinite;
}
@keyframes wf-dash-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(125, 154, 31, .45); }
  50%      { box-shadow: 0 0 0 5px rgba(125, 154, 31, 0); }
}
@media (prefers-reduced-motion: reduce) { .wf-dash-online { animation: none; } }

/* Een proef die bijna om is. Amber en niet rood: er is nog tijd, maar niet veel. */
.wf-dash-krap { font-weight: 700; color: #b07d1e; }

/* Lijst die langer kan zijn dan de kaart (alle klanten in het akkoordoverzicht). */
.wf-dash-scroll { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }

/* Filtervinkje boven zo'n lijst. */
.wf-dash-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #5F6368; cursor: pointer; }
.wf-dash-filter input { accent-color: #b0d136; width: 15px; height: 15px; }

/* Op een telefoon zijn de dashboardblokken smal; dan mogen kopjes en cijfers wat krapper staan. */
@media (max-width: 575.98px) {
  .wf-dash-sect { padding: 12px 16px 4px; }
  .wf-dash-kpi { font-size: 18px; }
  .wf-dash-scroll { max-height: 320px; }
}

:root[data-bs-theme="dark"] .wf-dash-kpi { color: #e6eaf0; }
:root[data-bs-theme="dark"] .wf-dash-sect { color: #7c8595; }
:root[data-bs-theme="dark"] .wf-dash-bar { background: rgba(255, 255, 255, .10); }
:root[data-bs-theme="dark"] .wf-dash-filter { color: #9aa2b1; }

/* ── Bronkiezer van het logboek (/admin/logboek) ──────────────────────────────
 * Aan/uit-pil per bron, met de telling erin zodra hij aanstaat. Bewust geen vinkjes: je zet hier
 * lagen van een tijdlijn aan en uit, en dan wil je in één oogopslag zien welke meedoen én hoe zwaar
 * ze wegen. Uit = omlijnd en grijs, aan = gevuld; dat verschil moet ook zonder kleur te zien zijn,
 * vandaar dat de rand mee verandert en niet alleen de achtergrond. */
.wf-logbron {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 13px; border-radius: 9999px;
  border: 1px solid rgba(1, 16, 61, .12); background: #fff;
  font-size: 12.5px; font-weight: 600; color: #888B95; text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.wf-logbron:hover { border-color: rgba(1, 16, 61, .22); color: #000229; }
.wf-logbron i { font-size: 12px; }
.wf-logbron.is-aan {
  background: rgba(176, 209, 54, .16); border-color: rgba(176, 209, 54, .55); color: #5a6e0e;
}
.wf-logbron-telling {
  display: inline-block; padding: 0 7px; border-radius: 9999px;
  background: rgba(1, 16, 61, .07); font-size: 11px; font-weight: 700; color: #5F6368;
}
.wf-logbron.is-aan .wf-logbron-telling { background: rgba(176, 209, 54, .30); color: #4e5f0c; }

:root[data-bs-theme="dark"] .wf-logbron { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #9aa2b1; }
:root[data-bs-theme="dark"] .wf-logbron:hover { color: #e6eaf0; }
:root[data-bs-theme="dark"] .wf-logbron.is-aan { background: rgba(176, 209, 54, .20); border-color: rgba(176, 209, 54, .45); color: #c7e06a; }
:root[data-bs-theme="dark"] .wf-logbron-telling { background: rgba(255, 255, 255, .10); color: #c3cad6; }

/* "Meer foto's nodig? Klik hier" in de flows-preview. Zelfde tekst en dezelfde drempel als in het
   fotovenster (.wf-aif-tegoed-koop); hier op een eigen regel, want de teller is daar smal. */
.wf-magic-quota-koop {
    display: block; margin-top: 3px; padding: 0; border: 0; background: none;
    font: inherit; font-weight: 600; text-align: right;
    color: #a12359; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.wf-magic-quota-koop:hover { color: #da176c; }


/* ── Aanraakronde: template-kiezer, logopagina en voorpagina (Tom, 07-09-2026) ─
 * Deze drie schermen komen uit Claude Design en werken met knoppen van 32 tot 40 pixels. Met een
 * muis is dat prettig strak; met een duim mis je ze. T/m iPad liggend (1024.98px) gaan ze daarom
 * naar 44px — dezelfde grens als overal elders in het dashboard. Boven die grens verandert er
 * niets aan het ontwerp.
 *
 * Let op de zoekbalk en de tabjes van de template-kiezer: die staan in één rij, dus als de een
 * groeit moet de ander mee, anders staan ze niet meer op één lijn. */
@media (max-width: 1024.98px) {
  /* Template kiezen */
  .tk-tab { height: 44px; }
  .tk-sbox input { height: 44px; }
  .tk-dark { height: 44px; }
  .tk-btn { min-height: 44px; }

  /* Logo / favicon — het "Bewerken"-knopje ligt op de foto en was 32px. */
  .lgf-edit .wf-btn, .lgf-acts .wf-btn, .lgf-fmt .wf-btn { min-height: 44px; }

  /* Voorpagina — de twee-standen-schakelaars boven elke sectie. */
  .vp-stb { min-height: 44px; }
  .vp-tr { min-height: 44px; }
}

/* ── Aanraakronde: de overige layout-schermen (Tom, 07-09-2026) ──────────────
 * Kleuren, Fonts, Menu en Footer delen een paar bedieningen die uit het ontwerp 36 tot 42 pixels
 * hoog kwamen. T/m iPad liggend gaan ze naar 44px; daarboven blijft het ontwerp zoals het is. */
@media (max-width: 1024.98px) {
  .wf-uitleg-knop { height: 44px; }
  /* Menu: taalknoppen, sleepgreepje en de titelvelden van de menu-items. */
  .mn-lang { height: 44px; }
  .mn-grip { width: 44px; height: 44px; }
  .mn-tin { height: 44px; }
  .mn-in, .mn-sel { min-height: 44px; }
  /* Kleuren en Fonts: de invoervelden (hex-code, eigen lettertype). Het hex-veld zit ín .kl-hex,
     dus dat veld moet zelf mee — anders blijft het invoervak 42px in een kader van 44. */
  .kl-in, .kl-hex, .kl-sel, .fnt-in, .fnt-sel { min-height: 44px; }
  .kl-hex input, .kl-field input[type="text"] { min-height: 44px; }
  /* Footer: het knopje om het voorbeeld te verversen. */
  .fb-prev-x { min-width: 44px; min-height: 44px; }

  /*  Schakelaars: het onzichtbare vinkje ligt over het hele blokje, dus de hoogte van dat blokje ís
      het aanraakvlak. Dat was 37px — net te weinig. Dit raakt elke schakelaar in het dashboard. */
  .wf-switch { min-height: 44px; }

  /*  Contactpagina: de invoervelden, de tabbladen en de bewerkknopjes op de foto's. */
  .cp-in { min-height: 44px; }
  .cp-tab { min-height: 44px; }
  .cp-edit .wf-btn, .cp-stage-a .wf-btn { min-height: 44px; }
  /*  Overige settings en de fontzoeker. */
  .oi-tab { min-height: 44px; }
  #ftSearch { min-height: 44px; }

  /*  Schuifregelaars: het spoor is 16px hoog en dat is precies wat je moet raken om te slepen. De
      regelaar wordt hoger, het spoor blijft even dun — je grijpt alleen makkelijker. */
  input[type="range"] { min-height: 44px; }

  /*  Social media en Integraties: de schakelaarregels in het rechterpaneel stonden pas vanaf 860px
      op 44px, terwijl de grens overal 1024.98 is — op een iPad liggend miste je ze dus nog. En de
      velden van de cookiemelding (eigen tekst, knoppen) waren 37 en 42. */
  .wf-mgr-opt { min-height: 44px; }
  .ck-tin, .ck-b3, .ck-in, .ck-sel { min-height: 44px; }
}

/*  Op de smalste schermen past een rij paginaknoppen met "vorige/volgende" niet meer naast de

    telling en de rijenkeuze: de voet mag daar wikkelen en de knoppen zelf ook. Zonder dit stak de

    pagineerbalk van de nieuwsbrieflijst op 320px buiten de kaart. */

@media (max-width: 420px) {

  .wf-tcard-foot { gap: 10px; }

  .wf-foot-l, .wf-foot-c, .wf-foot-r { flex: 1 1 100%; justify-content: center; }

  .wf-pager { flex-wrap: wrap; justify-content: center; gap: 6px; }

}

/* ── Finance: de kolommen mogen krimpen ─────────────────────────────────────
 * Een rasterkolom houdt standaard de breedte van zijn breedste inhoud (`min-width: auto`). Op een
 * scherm van 320px werd de linkerkolom daardoor 334px en schoof de hele pagina opzij. Dit is de
 * standaardoplossing voor rasters; de inhoud breekt netjes af (Tom, 07-09-2026). */
.fin-grid > *, .fin-col { min-width: 0; }

/*  Een knoppengroep van drie past niet op een scherm van 320px; daar staan de knoppen onder
    elkaar, elk over de volle breedte (Toms regel voor mobiel) (07-09-2026). */
@media (max-width: 420px) {
  .webfix-beheer .btn-group { display: flex; flex-wrap: wrap; width: 100%; }
  .webfix-beheer .btn-group > .btn { flex: 1 1 100%; border-radius: 10px; }
}

/* Bezig-toestand van een chip-knop: het icoontje in de chip maakt plaats voor een spinner. Zonder
   deze maat neemt Bootstrap 2rem en puilt hij uit het rondje. */
.wf-btn-chip .spinner-border { width: 1em; height: 1em; border-width: .15em; }

/* ── Knoppen zonder slagschaduw (2026-09-08) ─────────────────────────────────
 * Alle knopfamilies uit de Stijlgids liggen plat op de pagina: de flow-knoppen
 * (.wf-flow-btn, ook de rol-varianten en de social-kleuren uit flows.css), de
 * chip-knoppen (.wf-btn) en de Webfix AI-knop. Eén regel hier in plaats van de
 * schaduw uit elke maat- en rol-variant apart weghalen — die staan verspreid over
 * drie bestanden en zouden zo weer uit elkaar lopen.
 *
 * !important omdat flows.css ná dit bestand laadt en daar nog eigen schaduwen op
 * .wf-flow-btn staan.
 *
 * Twee dingen blijven wél staan, en dat is met opzet:
 *  - inset-schaduwen. Dat zijn geen schaduwen maar randjes van 1px: het ringetje
 *    om de icoon-chip en de rand van de lichte knop. Weghalen zou die vlakken hun
 *    omtrek afnemen.
 *  - de focusring voor wie met het toetsenbord werkt. Die is er niet voor de sier;
 *    zonder ring is niet te zien waar je staat. */
.wf-flow-btn, .wf-flow-btn:hover,
.wf-btn,      .wf-btn:hover,
.wf-aibtn,    .wf-aibtn:hover { box-shadow: none !important; }

.wf-flow-btn-chip { box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .05) !important; }
.wf-btn-chip      { box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .05) !important; }
.wf-btn-light, .wf-btn-light:hover { box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .10) !important; }

.wf-flow-btn:focus-visible,
.wf-btn:focus-visible,
.wf-aibtn:focus-visible { box-shadow: 0 0 0 3px rgba(50, 188, 238, .45) !important; }

/* ── "Zet mij live" ──────────────────────────────────────────────────────────────────────────────
 *
 * Het venster achter de knop in de zijbalk van de klant. Zelfde vormtaal als het eerste scherm van
 * de gegevenscontrole: een brede foto als kop, met de titel eroverheen, en daaronder blokken met een
 * merkrandje links. Geen aparte kopbalk boven de foto — dat werden twee koppen boven elkaar. */
.wf-zetlive-dialog { max-width: 720px; margin-top: 46px; }
@media (max-width: 767.98px) { .wf-zetlive-dialog { margin-top: 12px; } }

.wf-zetlive { border: none; border-radius: 22px; overflow: hidden; box-shadow: 0 22px 60px rgba(1, 16, 61, .22); }

.wf-zetlive-foto { position: relative; height: clamp(150px, 20vh + 60px, 230px); background: #f0f2f7; }
.wf-zetlive-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
/* Verloop over de onderkant, anders valt witte tekst weg zodra de foto daar licht is. */
.wf-zetlive-foto::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(180deg, rgba(0, 2, 41, 0), rgba(0, 2, 41, .62));
}
.wf-zetlive-fotokop { position: absolute; left: 26px; right: 26px; bottom: 18px; z-index: 1; }
.wf-zetlive-eyebrow {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.wf-zetlive-titel {
  display: block; margin-top: 2px; font-size: 27px; font-weight: 800; line-height: 1.15; color: #fff;
}
.wf-zetlive-sluit {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .88); color: #000229; cursor: pointer;
  transition: background .12s ease;
}
.wf-zetlive-sluit:hover { background: #fff; }

.wf-zetlive .modal-body { padding: 24px 26px 26px; }
@media (max-width: 575.98px) { .wf-zetlive .modal-body { padding: 18px 16px 20px; } }

/* De kaders. -feest is het uitnodigende blok, -let vraagt eerst iets van de klant, -goed bevestigt. */
.wf-zetlive-blok {
  padding: 15px 18px; margin-bottom: 20px; border-radius: 14px;
  border: 1px solid rgba(1, 16, 61, .08); border-left: 4px solid var(--wf-pink, #da176c);
  background: #fbfbfd;
}
.wf-zetlive-blok.-feest { border-left-color: var(--wf-green, #b0d136); }
.wf-zetlive-blok.-let   { border-left-color: var(--bs-warning, #dc9e2f); background: #fffbf3; }
.wf-zetlive-blok.-goed  { border-left-color: #b0d136; background: #fbfdf5; }
.wf-zetlive-kop { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: #000229; }
.wf-zetlive-blok p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: #5F6368; }
.wf-zetlive-blok p:last-child { margin-bottom: 0; }
.wf-zetlive-sub { font-size: 14.5px; line-height: 1.6; color: #5F6368; }
.wf-zetlive-fijn { font-size: 13px !important; color: #8b909a !important; }

.wf-zetlive-vraag { margin-bottom: 20px; }
.wf-zetlive-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #000229; }

/* Klikbare keuzes, zelfde chips als bij "Nee, bedankt" op een proefmodule — twee tikken en klaar. */
.wf-zetlive-keuzes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wf-zetlive-keuze {
  border: 1px solid var(--wf-line, #e5e7ec); border-radius: 999px; padding: 8px 15px;
  background: #fff; color: var(--wf-text, #000229); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.wf-zetlive-keuze:hover { border-color: var(--wf-pink, #da176c); color: var(--wf-pink, #da176c); }
.wf-zetlive-keuze.-aan { background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff; }

.wf-zetlive-opmerking { font-size: 13.5px; }
/* Verzenden links, annuleren rechts: de knop waar de klant naartoe werkt staat vooraan, en de
   uitweg zit er niet tegenaan geplakt. */
.wf-zetlive-actie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
@media (max-width: 575.98px) {
  /* Onder elkaar, verzenden bovenaan: naast elkaar worden het twee half afgekapte knoppen. */
  .wf-zetlive-actie { flex-direction: column; align-items: stretch; }
  .wf-zetlive-actie .wf-btn { width: 100%; justify-content: center; }
}

/*  .wf-card komt uit webfix.css en staat daar op wit met een lichte rand. In de donkere modus bleef
    hij daardoor knalwit; deze twee regels zetten hem op dezelfde tokens als de rest (09-09-2026). */
[data-bs-theme="dark"] .wf-card { background: var(--wf-surface, #1e293b); border-color: var(--wf-border, #334155); }
[data-bs-theme="dark"] .wf-card-header {
  background: var(--wf-surface, #1e293b); border-bottom-color: var(--wf-border, #334155); color: var(--wf-text, #f1f5f9);
}


/* ── Bestelscherm meerprijs-module (#moduleBestelModal) ────────────────────────────────────────
   Zelfde familie als het "Zet mij live"-venster: een kader met een gekleurde zijrand voor de kern,
   daaronder de opbouw van het bedrag. Groen = er valt niets te betalen, amber = er wordt een
   bestaande factuur aangepast, blauw = gewoon afrekenen. */
.wf-bestel-dialog { max-width: 520px; }
.wf-bestel { border: 0; border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, .14); }
.wf-bestel .modal-body { padding: 1.9rem 1.75rem 1.5rem; }
.wf-bestel-sluit { position: absolute; top: 14px; right: 16px; }
.wf-bestel-titel { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #000229; }
.wf-bestel-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #5F6368; }

.wf-bestel-blok {
  padding: 14px 16px; margin-bottom: 18px; border-radius: 14px;
  border: 1px solid rgba(1, 16, 61, .08); border-left: 4px solid var(--wf-blue, #32bcee);
  background: #fbfbfd; font-size: 14px; line-height: 1.6; color: #5F6368;
}
.wf-bestel-blok strong { color: #000229; }
.wf-bestel-blok.-gratis { border-left-color: var(--wf-green, #b0d136); background: #fbfdf5; }
.wf-bestel-blok.-let    { border-left-color: var(--bs-warning, #dc9e2f); background: #fffbf3; }
.wf-bestel-blok p { margin: 0 0 6px; }
.wf-bestel-blok p:last-child { margin-bottom: 0; }

.wf-bestel-regels { margin: 0 0 18px; font-size: 14px; }
.wf-bestel-regels > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid rgba(1, 16, 61, .07);
}
.wf-bestel-regels > div:last-child { border-bottom: 0; }
.wf-bestel-regels dt { font-weight: 500; color: #5F6368; }
.wf-bestel-regels dd { margin: 0; font-weight: 600; color: #000229; text-align: right; }
.wf-bestel-regels > div.-totaal dt,
.wf-bestel-regels > div.-totaal dd { font-weight: 800; color: #000229; }

.wf-bestel-actie { display: flex; flex-wrap: wrap; gap: 10px; }
.wf-bestel-actie .wf-btn { flex: 1 1 auto; justify-content: center; }
.wf-bestel-fijn { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: #8b909a; text-align: center; }

/* ── Bedrijfsknop en bedrijfswisselaar in de header ─────────────────────────────────────────
   De knop toont het ECHTE logo van het bedrijf waar je in werkt; zonder logo valt hij terug op het
   gebouw-icoontje met de naam (die terugval staat in _WfCombiHeader, niet hier).

   Waarom een logo en niet de naam: wie bij drie bedrijven hoort heeft er vaak drie tabbladen naast
   elkaar open staan. Een naam in kleine letters op een gekleurde balk lees je dan niet; een logo
   herken je zonder te lezen. */
/* Even hoog als de Flows-knop ernaast (40px, zie .wfch-flowstrig in wf-combihead.css). Hij droeg
   de -sm-variant en was daarmee 38px: twee pixels verschil dat je precies ziet omdat de knoppen
   naast elkaar staan. Rondleiding krijgt dezelfde hoogte, om dezelfde reden. */
.wfch-glass.-sm.wfch-orgtrig,
.wfch-glass.-sm.wfch-rondleiding { height: 40px; }

/* De bedrijfsknop krijgt exact de vorm van de Flows-knop ernaast: een effen WITTE pil met een
   zachte schaduw en geen rand. Het klantlogo valt daarmee in de knop weg in plaats van als los
   wit plakkertje op de gekleurde balk te liggen, en het chevronnetje staat op datzelfde wit.
   Waarden bewust gelijk aan .wfch-flowstrig -- staan ze uit elkaar, dan zie je dat meteen, want
   de twee knoppen raken elkaar bijna. */
.wfch-glass.wfch-orgtrig {
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(1, 16, 61, .12);
  border-radius: 12px;
  padding: 4px 12px 4px 4px;
  gap: 8px;
  transition: box-shadow .28s;
}
.wfch-glass.wfch-orgtrig:hover { background: #fff; box-shadow: 0 4px 12px rgba(1, 16, 61, .14); }
/* Zelfde kleur chevron als bij Flows; het standaard wit van .wfch-glass zou op deze witte pil
   onzichtbaar zijn. */
.wfch-glass.wfch-orgtrig .chev { color: #c98bab; opacity: 1; }
/* Zonder logo valt de knop terug op de naam, en die moet op wit leesbaar blijven. */
.wfch-glass.wfch-orgtrig .wfch-company-lbl,
.wfch-glass.wfch-orgtrig > .bi { color: #000229; }

/* Geen eigen wit vlak meer onder het logo: de knop IS al wit. */
.wfch-orglogo {
  display: block; height: 32px; width: auto; max-width: 150px;
  object-fit: contain;
}
.wfch-mobtrig-org { gap: 6px; }
.wfch-mobtrig-org .wfch-orglogo { height: 26px; max-width: 110px; border-radius: 8px; }

/* De lijst met gekoppelde bedrijven, bovenin de dropdown. Eén bedrijf per regel, zoals gevraagd:
   naast elkaar wordt het bij vijf bedrijven een rommeltje en zijn de logo's te klein om te
   herkennen. */
.wf-orgswitch { padding: 4px 0 2px; }
.wf-orgswitch-kop {
  padding: 4px 12px 7px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--wf-muted);
}
.wf-orgswitch-f { margin: 0; }
.wf-orgrow {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 12px; margin: 0;
  border: 0; background: transparent; text-align: left;
  font: inherit; color: var(--wf-text); cursor: pointer;
  border-radius: 8px;
  transition: background-color .13s ease;
}
.wf-orgrow:hover { background: var(--wf-hover-bg); }

/* Het huidige bedrijf staat er wel bij maar is geen knop: je kunt niet naar jezelf schakelen. Geen
   handje, geen hover -- anders klikt iemand erop en lijkt er niets te gebeuren. */
.wf-orgrow.is-huidig { cursor: default; background: var(--wf-hover-bg); }
.wf-orgrow[disabled] { opacity: 1; }

/* Met alleen een logo in de rij mag dat logo ook echt de ruimte krijgen -- anders staar je naar een
   postzegel en moet je alsnog de title lezen. Zonder logo valt de rij terug op het gebouw-icoontje
   met de naam ernaast, en dan blijft het vakje klein. */
.wf-orgrow-logo {
  flex: none; width: 34px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--wf-border); border-radius: 5px; background: #fff;
  overflow: hidden;
}
/* Het kadertje zit om de HELE RIJ en niet om het logo. Zat het om het logo, dan was elke kaart
   precies zo breed als het plaatje erin -- en dan staat er een rommelige trap van verschillende
   breedtes onder elkaar. Nu is elke kaart even breed als de rij van het huidige bedrijf.
   Het huidige bedrijf heeft geen rand maar zijn eigen vlak, zodat je zonder te lezen ziet waar je
   zit. 2px eronder, zodat de kaarten niet tegen elkaar plakken. */
.wf-orgrow.-logo {
  padding: 4px 12px;
  border: 1px solid var(--wf-border);
  border-radius: 6px;
  margin-bottom: 2px;
  /* Een vulling in dezelfde tint als de hover van de gewone rijen: dan staat het klantlogo op een
     rustig vlakje in plaats van los op de achtergrond van de dropdown. In de donkere modus is dit
     token een doorschijnend wit, dus het werkt in beide standen zonder tweede regel. */
  background: var(--wf-hover-bg);
}
/* Bij het zweven een tikje dieper, zodat je ziet welke kaart je gaat raken. Zou de hover gelijk
   blijven aan de ruststand, dan reageert de rij zichtbaar nergens op. */
.wf-orgrow.-logo:hover { background: var(--wf-border-lt); }
.wf-orgrow.-logo.is-huidig { border-color: transparent; }
.wf-orgrow.-logo .wf-orgrow-logo {
  flex: 1 1 auto; width: auto; height: 41px; justify-content: flex-start;
  border: 0; border-radius: 0; background: transparent; padding: 0;
}
.wf-orgrow.-logo .wf-orgrow-logo img { max-height: 41px; max-width: 100%; }
.wf-orgrow-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wf-orgrow-logo i { font-size: 14px; color: var(--wf-muted); }
.wf-orgrow-naam {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 600;
}
.wf-orgrow.is-huidig .wf-orgrow-naam { color: var(--wf-title); }
.wf-orgrow-vink { flex: none; color: var(--wf-title); font-size: 14px; }

.wf-orgswitch-div { height: 1px; margin: 6px 10px; background: var(--wf-border); }

/* De kleine actieknoppen in de klantenlijst staan in de 2e rij, rechts uitgelijnd. `margin-left:auto`
   duwt ze naar het eind van het bandje waar links "Betaalt tot" staat; op een smal scherm wikkelt de
   rij en komen ze er netjes onder. */
.wf-lrow-meta .wf-lrow-actions { margin-left: auto; }

/* Actieknop met tekst ernaast, voor een handeling die je niet aan een icoontje alleen herkent
   ("Bedrijven koppelen"). Klein en grijs: het is een hulplink, geen hoofdactie. */
.wf-ico-link.wf-ico-tekst { gap: 5px; width: auto; padding: 0 8px; font-size: 12.5px; white-space: nowrap; }
.wf-ico-link.wf-ico-tekst i { font-size: 14px; }
@media (max-width: 640px) {
  /* Op een telefoon is de rij al een kaartje; dan is het label te veel en volstaat het icoontje. */
  .wf-ico-link.wf-ico-tekst span { display: none; }
  .wf-ico-link.wf-ico-tekst { padding: 0; width: 30px; }
}

/* ── Bedrijven koppelen (/admin/clients/{id}/groep) ─────────────────────────────────────────
   Bovenaan het geselecteerde bedrijf, daaronder de gekoppelde bedrijven als kaartjes met een
   kruisje, en onderin zoeken. Hergebruikt .wf-fcard voor de secties. */
.wf-grp-hoofd { display: flex; align-items: center; gap: 14px; }
.wf-grp-naam { font-size: 17px; font-weight: 700; color: var(--wf-text); }
.wf-grp-sub { font-size: 13px; color: var(--wf-muted); }
.wf-grp-uitleg { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--wf-text-soft); }

/* De waarschuwing die hoort bij "de koppeling ís de toestemming": wie hier koppelt geeft de
   beheerders van beide kanten toegang tot elkaars gegevens. Dat mag niet wegvallen tussen de
   gewone uitleg. */
.wf-grp-let-op {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 12px 0 0; padding: 11px 13px;
  border: 1px solid #f0d9a8; border-radius: 8px; background: #fdf7e9;
  font-size: 13px; line-height: 1.55; color: #6b5316;
}
.wf-grp-let-op i { flex: none; margin-top: 1px; font-size: 15px; color: #c08a14; }

.wf-grp-logo {
  flex: none; width: 46px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--wf-border); border-radius: 7px; background: #fff; overflow: hidden;
}
.wf-grp-logo.-groot { width: 72px; height: 56px; }
.wf-grp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wf-grp-logo i { font-size: 17px; color: var(--wf-muted); }

.wf-grp-tel {
  display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 7px;
  border-radius: 9999px; background: var(--wf-title); color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; letter-spacing: 0;
}

.wf-grp-leeg {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 14px; color: var(--wf-muted);
}
.wf-grp-leeg i { font-size: 18px; }

/* Kaartjes op een raster dat vanzelf meegroeit: drie naast elkaar op een breed scherm, één op een
   telefoon, zonder breekpunten te hoeven verzinnen. */
.wf-grp-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.wf-grp-kaart {
  position: relative; padding: 14px;
  border: 1px solid var(--wf-border); border-radius: 10px; background: var(--wf-surface);
}
.wf-grp-kaart-naam {
  margin-top: 9px; font-size: 14px; font-weight: 600; color: var(--wf-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-grp-kaart-sub { margin-top: 3px; font-size: 12px; color: var(--wf-text-soft); }
.wf-grp-kaart-sub i { margin-right: 4px; }
.wf-grp-kaart-sub .-stil { color: var(--wf-muted); font-style: italic; }

.wf-grp-x { position: absolute; top: 6px; right: 6px; margin: 0; }
.wf-grp-x button {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--wf-muted); font-size: 12px; cursor: pointer;
  transition: background-color .13s ease, color .13s ease;
}
.wf-grp-x button:hover { background: #fdeaea; color: #d81f25; }

.wf-grp-zoek { max-width: 420px; }
.wf-grp-uitslag { margin-top: 12px; }
.wf-grp-hint { margin: 0; font-size: 13px; color: var(--wf-muted); }
.wf-grp-rij {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px; border-bottom: 1px solid var(--wf-border-lt);
}
.wf-grp-rij:last-child { border-bottom: 0; }
.wf-grp-rij-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wf-grp-rij-t b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-grp-rij-t i { font-size: 12px; font-style: normal; color: var(--wf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-grp-al { font-size: 12px; font-style: italic; color: var(--wf-muted); white-space: nowrap; }

@media (max-width: 575.98px) {
  .wf-grp-hoofd { gap: 11px; }
  .wf-grp-logo.-groot { width: 56px; height: 44px; }
  .wf-grp-rij { flex-wrap: wrap; }
  .wf-grp-rij-t { flex-basis: 100%; order: 3; }
}

/* ── Betaalproviders (/dashboard/Betaalproviders) ─────────────────────────────
   Leunt op de gedeelde .wf-mgr-* laag; alleen wat daar niet in zit staat hier.
   Het rode kader bovenaan verschijnt zolang Shop en Boekingen allebei uit staan. */
.wf-pay-alert {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 18px;
  background: rgba(216, 31, 37, .07);
  border: 1px solid rgba(216, 31, 37, .30);
  border-radius: 14px;
}
.wf-pay-alert > i { flex: none; font-size: 20px; color: #d81f25; }
.wf-pay-alert-t { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.wf-pay-alert-t strong { font-size: 14.5px; color: #8f1418; }
.wf-pay-alert-t span { font-size: 12.5px; line-height: 1.55; color: var(--wf-text-soft, #475569); }
.wf-pay-alert-btn { flex: none; border-radius: 999px; }

.wf-pay-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--wf-muted, #94a3b8); }

/* Bij Integraties staat dit blok IN het raster en krijgt het zijn lucht van de gap. Hier staat het
   erboven, los, en plakte het dus tegen de kaarten eronder. Zelfde afstand als de gap van het
   raster, en alleen op deze pagina (het attribuut), zodat Integraties ongemoeid blijft. */
.wf-mgr-aan[data-pay-aanblok] { margin-bottom: 18px; }

.wf-pay-status {
  margin-left: auto; flex: none;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: #f1f5f9; color: #64748b;
}
.wf-pay-status.-aan  { background: #f3fad7; color: #5a6e0e; }
.wf-pay-status.-ok   { background: #e6f7fd; color: #1a7fa3; }
.wf-pay-status.-fout { background: #fdeaea; color: #a8181d; }

.wf-pay-koppel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.wf-pay-gekoppeld { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--wf-text, #1e293b); }
.wf-pay-gekoppeld i { color: #b0d136; }

.wf-pay-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.wf-pay-uitslag { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--wf-muted, #94a3b8); }
.wf-pay-uitslag.-ok   { color: #1a7fa3; }
.wf-pay-uitslag.-fout { color: #a8181d; }

.wf-pay-modules {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--wf-border, #e2e8f0);
}
.wf-pay-modules-t { font-size: 12px; font-weight: 700; color: var(--wf-muted, #94a3b8); }
.wf-pay-modules .form-check { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; min-height: 0; }
.wf-pay-modules .form-check-input { margin: 0; float: none; }
.wf-pay-modules .form-check-label { font-size: 12.5px; }
.wf-pay-modules .form-check-input:disabled ~ .form-check-label { color: var(--wf-muted, #94a3b8); }

[data-bs-theme="dark"] .wf-pay-alert { background: rgba(216, 31, 37, .14); border-color: rgba(216, 31, 37, .38); }
[data-bs-theme="dark"] .wf-pay-alert-t strong { color: #f3a9ab; }
[data-bs-theme="dark"] .wf-pay-alert-t span { color: #c9ced8; }
[data-bs-theme="dark"] .wf-pay-status { background: rgba(255, 255, 255, .08); color: #c9ced8; }
[data-bs-theme="dark"] .wf-pay-status.-aan  { background: rgba(176, 209, 54, .18); color: #cfe58a; }
[data-bs-theme="dark"] .wf-pay-status.-ok   { background: rgba(50, 188, 238, .18); color: #9adcf5; }
[data-bs-theme="dark"] .wf-pay-status.-fout { background: rgba(216, 31, 37, .20); color: #f3a9ab; }
[data-bs-theme="dark"] .wf-pay-modules { border-top-color: rgba(255, 255, 255, .12); }

@media (max-width: 575.98px) {
  .wf-pay-alert { padding: 12px 14px; gap: 10px; }
  .wf-pay-alert-btn { width: 100%; }
  .wf-pay-status { margin-left: 0; }
  .wf-mgr-panel-head { flex-wrap: wrap; }
}

/* Het handmatige betaalverzoek in het bestelscherm: een klein blokje boven de afvinkknop. */
.wf-verzoek {
  padding: 14px; margin-bottom: 2px;
  background: var(--wf-bg, #f5f6fa);
  border: 1px solid var(--wf-border, #e2e8f0);
  border-radius: 12px;
}
.wf-verzoek .form-text { font-size: 11.5px; line-height: 1.5; }
[data-bs-theme="dark"] .wf-verzoek { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); }

/* Klantnummer achter een bedrijfsnaam. Twee klanten kunnen precies dezelfde naam dragen -- dan is
   het nummer het enige verschil. Klein en grijs: je leest het alleen als je het nodig hebt. */
.wf-orgrow-nr, .wf-grp-nr { font-size: 11px; font-weight: 500; color: var(--wf-muted); }


/* ── Meerdere openstaande facturen in het kader op /dashboard/Finance ──────────────────────────
   Het kader toont sinds 11-09-2026 elke openstaande factuur op een eigen regel in plaats van alleen
   de meest dringende. Een dun lijntje ertussen, zodat twee bedragen van 2,1rem niet als één blok
   lezen. De basisopmaak van .fin-open-row staat in webfix.css (beschermd); dit bestand laadt daarna
   en vult alleen aan. */
.fin-open-row + .fin-open-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(1, 16, 61, .08);
}


/* ── "Tonen aan klant" in de kop van het factuurpaneel ─────────────────────────────────────────
   Een badge met een vinkje erin, zodat hij in dezelfde rij past als "Beheer klant" en "bekijk" en
   niet als los formulierveld tussen de knoppen hangt. */
.wf-fp-toon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.wf-fp-toon input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--wf-green, #b0d136); }
.wf-fp-toon:has(input:not(:checked)) { color: var(--bs-warning, #dc9e2f); }

/* ── Bevestiging na het wisselen van bedrijf ────────────────────────────────────────────────
   Eén scherm dat even tegenhoudt en laat zien in welk bedrijf je nu werkt. Het logo staat groot
   en gekaderd: dat is het enige dat je zonder lezen herkent. */
.wf-gewisseld-lead { margin: 0 0 16px; font-size: 15px; color: var(--wf-text-soft); }
.wf-gewisseld-kader {
  display: flex; align-items: center; justify-content: center;
  min-height: 104px; padding: 16px 20px;
  border: 1px solid var(--wf-border); border-radius: 12px; background: #fff;
}
.wf-gewisseld-kader img { max-height: 72px; max-width: 100%; object-fit: contain; }
/* Geen logo: dan is de naam het beeld, en die mag hier groot. */
.wf-gewisseld-naam { font-size: 19px; font-weight: 700; color: var(--wf-title); }
.wf-gewisseld-sub { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--wf-text); }


/* ── Kaart Abonnement in het klantpaneel (_KlantPaneel.cshtml) ─────────────────────────────────
   Betaald tot, volgende factuur, termijn en betaalvoorkeur. Het bronlabeltje onder een waarde zegt
   waar hij vandaan komt; amber als er iets na te kijken is. */
.wf-kp-abo-bron { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--wf-muted); }
.wf-kp-abo-bron.-let { color: var(--bs-warning, #dc9e2f); }
.wf-kp-abo-keuze { max-width: 230px; }
.wf-kp-abo-melding {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: rgba(50, 188, 238, .07); border: 1px solid rgba(50, 188, 238, .25); color: var(--wf-text-soft);
}
.wf-kp-abo-melding.-let { background: rgba(220, 158, 47, .08); border-color: rgba(220, 158, 47, .35); }
.wf-kp-abo-overstap {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(1, 16, 61, .08);
}

/* ── Overstapvenster (admin-overstap.js) ─────────────────────────────────────────────────────── */
.wf-overstap .modal-body { padding: 1.4rem 1.5rem; }
.wf-overstap-lead { margin: 0 0 14px; font-size: 14px; color: var(--wf-text-soft); }
.wf-overstap-fijn { margin-top: 4px; font-size: 12px; color: var(--wf-muted); }
.wf-overstap-dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px;
  margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #f8f9fc; font-size: 13.5px;
}
.wf-overstap-dl dt { font-weight: 500; color: var(--wf-muted); }
.wf-overstap-dl dd { margin: 0; font-weight: 600; color: var(--wf-text); }
.wf-overstap-kop { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wf-muted); }
.wf-overstap-regels { width: 100%; margin-bottom: 14px; font-size: 13px; border-collapse: collapse; }
.wf-overstap-regels td { padding: 7px 6px; border-top: 1px solid rgba(1, 16, 61, .07); vertical-align: top; }
.wf-overstap-regels td.bedrag { white-space: nowrap; text-align: right; color: var(--wf-text-soft); }
.wf-overstap-regels td.soort { white-space: nowrap; text-align: right; }
.wf-overstap-regels tr.-pakket td:first-child,
.wf-overstap-regels tr.-module td:first-child { text-decoration: line-through; color: var(--wf-muted); }
.wf-overstap-soort { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.wf-overstap-soort.-pakket { background: rgba(161, 35, 89, .09); color: var(--wf-pink, #a12359); }
.wf-overstap-soort.-module { background: rgba(176, 209, 54, .18); color: #6f8a17; }
.wf-overstap-soort.-overig { background: #f0f0f7; color: var(--wf-text-soft); }
.wf-overstap-melding {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 9px 12px;
  border-radius: 10px; font-size: 13px; line-height: 1.5;
}
.wf-overstap-melding i { margin-top: 2px; }
.wf-overstap-melding.-let { background: rgba(220, 158, 47, .09); color: #8a5d0f; }
.wf-overstap-melding.-blok { background: rgba(216, 31, 37, .08); color: #a11419; }


/* ── Keuze per jaar / per maand in het bestelscherm van een module (vooruitbetaalde klant) ────── */
.wf-bestel-keuze {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: center;
  margin: 0 0 8px; padding: 11px 14px; border: 1px solid rgba(1, 16, 61, .12); border-radius: 12px;
  background: #fff; cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.wf-bestel-keuze:last-child { margin-bottom: 0; }
.wf-bestel-keuze:hover { border-color: var(--wf-blue, #32bcee); }
.wf-bestel-keuze:has(input:checked) { border-color: var(--wf-blue, #32bcee); background: rgba(50, 188, 238, .06); }
.wf-bestel-keuze input { grid-row: span 2; width: 16px; height: 16px; margin: 0; accent-color: var(--wf-blue, #32bcee); }
.wf-bestel-keuze-t { font-size: 14.5px; font-weight: 700; color: #000229; }
.wf-bestel-keuze-b { font-size: 13px; color: var(--wf-text-soft); }
.wf-bestel-keuze-gratis {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: rgba(176, 209, 54, .2); color: #6f8a17; font-size: 11.5px; font-weight: 700; vertical-align: 1px;
}

.wf-kp-abo-vink { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; cursor: pointer; }
.wf-kp-abo-vink input { margin-top: 2px; flex: none; }

/* ── Hernoemde module (_ModuleNaam) ─────────────────────────────────────────────────────────────
   De naam die de klant een module gaf, met onze naam klein eronder: "Woonstijlen" / "(Referenties)".
   De kleur volgt de tekst eromheen (dus ook wit op een actieve sidebarregel), alleen gedempt. */
.wf-modnaam { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; line-height: 1.2; }
.wf-modnaam-orig {
  display: block; max-width: 100%; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0; color: currentColor; opacity: .62;
}
h1 .wf-modnaam-orig { margin-top: 4px; font-size: 13px; }

/* ── Kader met een rode rand (.wf-kader-gevaar) ─────────────────────────────────────────────────
   Een waarschuwing die blijft staan — geen toast die weer verdwijnt. 1px rand in de verwijderkleur,
   een zweem rood erachter. Eerst gebruikt boven de prullenbak van de klant ("alleen admins kunnen
   definitief iets verwijderen"). */
.wf-kader-gevaar {
  display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box;
  padding: 12px 16px; border: 1px solid #d81f25; border-radius: 14px;
  background: rgba(216, 31, 37, .05); color: #8f1418; font-size: 13.5px; line-height: 1.5;
}
.wf-kader-gevaar > i { flex: none; margin-top: 2px; font-size: 15px; color: #d81f25; }
.wf-kader-gevaar b { font-weight: 700; }
:root[data-bs-theme="dark"] .wf-kader-gevaar { background: rgba(216, 31, 37, .12); border-color: rgba(240, 128, 131, .7); color: #f3b1b3; }
:root[data-bs-theme="dark"] .wf-kader-gevaar > i { color: #f08083; }

/* Uitgeschakelde actieknop in een lijstrij (bijv. "inloggen als" bij een klant zonder gebruiker).
   Zichtbaar maar duidelijk buiten gebruik; geen pointer-events:none, zodat de title nog uitlegt
   waarom hij uit staat. Het disabled-attribuut houdt de klik al tegen. */
.wf-ico-link.wf-ico-uit,
.wf-ico-link[disabled] { opacity: .35; cursor: not-allowed; }
.wf-ico-link.wf-ico-uit:hover,
.wf-ico-link[disabled]:hover { background: transparent; color: inherit; }

/* ── Knop bezig (.wf-btn.is-bezig) ────────────────────────────────────────────
 * Een .wf-btn die een actie verstuurt: een draaiend rondje in de witte chip, het label "Bezig…", en niet
 * meer aan te klikken. De knop staat daarbij disabled -- dat houdt ook Enter en de spatiebalk tegen --
 * maar houdt zijn EIGEN kleur: de grijze disabled-pil zegt "dit kan niet", en dat is het tegendeel van
 * "ik ben ermee bezig" (Tom, 14-09-2026).
 *
 * Aan/uit gebeurt in JavaScript: klasse is-bezig op de knop, en het icoon in de chip krijgt de klasse
 * wf-btn-spin. Zie knopBezig/knoppenVrij in wf-handmatig.js. */
.wf-btn.is-bezig, .wf-btn.is-bezig:disabled { cursor: progress; transform: none; filter: none; }
.wf-btn.is-bezig:hover .wf-btn-chip { transform: none; }
.wf-btn-primary.is-bezig:disabled   { color: #fff; background: linear-gradient(120deg, #b52c68, #8a1d4d); }
.wf-btn-secondary.is-bezig:disabled { color: #fff; background: linear-gradient(120deg, #e83b86, #c2135f); }
.wf-btn-success.is-bezig:disabled   { color: #fff; background: linear-gradient(120deg, #bcd94e, #a3c62b); }
.wf-btn-info.is-bezig:disabled      { color: #fff; background: linear-gradient(120deg, #3fc4f2, #26a7d6); }
.wf-btn-warning.is-bezig:disabled   { color: #fff; background: linear-gradient(120deg, #e6ad45, #cf8f22); }
.wf-btn-danger.is-bezig:disabled    { color: #fff; background: linear-gradient(120deg, #e8474c, #d81f25); }
.wf-btn-dark.is-bezig:disabled      { color: #fff; background: linear-gradient(120deg, #141a3d, #000229); }
.wf-btn-light.is-bezig:disabled     { color: #000229; background: linear-gradient(120deg, #f4f4f9, #e9e9f1); }
.wf-btn-primary.is-bezig   .wf-btn-chip i { color: #a12359; }
.wf-btn-secondary.is-bezig .wf-btn-chip i { color: #da176c; }
.wf-btn-success.is-bezig   .wf-btn-chip i { color: #7d9a1f; }
.wf-btn-info.is-bezig      .wf-btn-chip i { color: #1f97c4; }
.wf-btn-warning.is-bezig   .wf-btn-chip i { color: #bd8420; }
.wf-btn-danger.is-bezig    .wf-btn-chip i { color: #d81f25; }
.wf-btn-dark.is-bezig      .wf-btn-chip i { color: #000229; }
.wf-btn-light.is-bezig     .wf-btn-chip i { color: #5F6368; }
/* Het rondje zelf: een rand in de kleur van het icoon met één open kant. */
.wf-btn-chip i.wf-btn-spin {
  width: 16px; height: 16px; border-radius: 9999px;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: wf-bezig-draai .7s linear infinite;
}
.wf-btn-sm .wf-btn-chip i.wf-btn-spin { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .wf-btn-chip i.wf-btn-spin { animation-duration: 2.4s; } }

/* ── Activeer demo: een adres dat al een login heeft ───────────────────────────────────────────
   Eén account per e-mailadres. Is het adres bekend, dan verschijnt dit kader in het gebruikersblok
   met de keuze: die bestaande login aan deze organisatie koppelen, of een ander adres gebruiken.
   Amber, want er is iets te beslissen — geen fout, wel een afslag. (18-09-2026) */
.wf-demo-bekend {
  padding: 12px 14px;
  border: 1px solid rgba(220, 158, 47, .45);
  border-radius: 12px;
  background: rgba(220, 158, 47, .08);
}

.wf-demo-bekend-kop {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wf-text, #1d2129);
}
.wf-demo-bekend-kop i { color: #b9801f; font-size: 15px; line-height: 1.4; }

/* Adres dat al toegang heeft tot deze demo: geen waarschuwing in oranje maar een blokkade in rood,
   want hier valt niets te kiezen -- toevoegen kan niet, opnieuw sturen wel (Tom, 22-09-2026). */
[data-demo-blok].is-al-lid .wf-demo-bekend {
  border-color: rgba(194, 19, 95, .45);
  background: rgba(194, 19, 95, .07);
}
[data-demo-blok].is-al-lid .wf-demo-bekend-kop i { color: #c2135f; }
[data-demo-blok].is-al-lid [data-veld="email"] { border-color: rgba(194, 19, 95, .55); }

.wf-demo-bekend-uitleg {
  margin-top: 4px;
  padding-left: 23px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wf-text-soft, #5f646d);
}

.wf-demo-bekend-knoppen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-left: 23px;
}

/* Gekozen voor koppelen: het kader wordt groen, zodat je in één blik ziet welke blokken nog een
   beslissing open hebben staan. */
[data-demo-blok].is-gekoppeld .wf-demo-bekend {
  border-color: rgba(176, 209, 54, .55);
  background: rgba(176, 209, 54, .10);
}
[data-demo-blok].is-gekoppeld .wf-demo-bekend-kop i { color: #5a6e0e; }

/* Het kaartje met de contactpersoon uit de klantgegevens, boven de gebruikersblokken. Blauw en niet
   amber: dit is een aanbod ("deze kennen we al"), geen waarschuwing zoals .wf-demo-bekend. */
.wf-demo-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(50, 188, 238, .45);
  border-radius: 12px;
  background: rgba(50, 188, 238, .08);
}

.wf-demo-contact-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(50, 188, 238, .16);
  color: #1f8fbb;
  font-size: 16px;
}

.wf-demo-contact-t { flex: 1 1 auto; min-width: 0; }
.wf-demo-contact-t strong { display: block; font-size: 13.5px; color: var(--wf-text, #1d2129); }
.wf-demo-contact-t span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wf-text-soft, #5f646d);
  overflow-wrap: anywhere;
}

/* Geen e-mailadres bekend: wel tonen wie het is, maar de knop staat uit -- zonder adres kan die
   mens geen login ontvangen. */
.wf-demo-contact.-geenmail { border-color: var(--wf-border-lt, #e6e9ef); background: var(--wf-hover-bg, #f6f8fb); }
.wf-demo-contact.-geenmail .wf-demo-contact-ic { background: rgba(0, 0, 0, .05); color: var(--wf-text-soft, #5f646d); }

@media (max-width: 575.98px) {
  .wf-demo-contact { flex-wrap: wrap; }

/* ── Activeer demo: wie er al toegang heeft ─────────────────────────────────────────────────
   Per persoon een regel met naam, adres, wanneer zijn inloggegevens verstuurd zijn en een knop om
   die mail nog eens te sturen. Zo weet je vóór het toevoegen wie al iets gekregen heeft, en typt
   niemand hetzelfde adres er een tweede keer bij (Tom, 22-09-2026). */
.wf-demo-verstuurd {
  border: 1px solid var(--wf-line, #e5e7ec);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: #fbfbfd;
}
.wf-demo-verstuurd-kop {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wf-muted, #8b909a);
  margin-bottom: 8px;
}
.wf-demo-verstuurd-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--wf-line, #e5e7ec);
}
.wf-demo-verstuurd-rij:first-child { border-top: 0; }
.wf-demo-verstuurd-wie { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wf-demo-verstuurd-wie strong { font-size: 14px; color: var(--wf-ink, #000229); }
.wf-demo-verstuurd-wie span {
  font-size: 12.5px; color: var(--wf-muted, #8b909a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-demo-verstuurd-wanneer { font-size: 12.5px; color: var(--wf-muted, #8b909a); text-align: right; }

@media (max-width: 575.98px) {
  .wf-demo-verstuurd-rij { flex-wrap: wrap; }
  .wf-demo-verstuurd-wanneer { width: 100%; text-align: left; }
}

  .wf-demo-contact-t { flex: 1 1 100%; order: 2; }
}

:root[data-bs-theme="dark"] .wf-demo-contact { background: rgba(50, 188, 238, .12); }

/* De knoppenrij onderaan het venster: hoofdactie links, annuleren rechts. */
/*  Eén ontvanger in "Demo verlengen": een vinkje met de naam en het adres erachter. Als <label>, zodat
    de hele regel aanklikbaar is en je niet op een vakje van 15 pixels hoeft te mikken. */
.wf-verleng-rij {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 2px; font-size: 13.5px; cursor: pointer;
  border-bottom: 1px solid rgba(1, 16, 61, .06);
}
.wf-verleng-rij:last-child { border-bottom: none; }
.wf-verleng-rij input { flex: none; margin: 0; }
.wf-verleng-rij strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.wf-demo-acties {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 24px 22px;
}

/* ── Concept of live: het schuifje in een rij (_WfRijStatus.cshtml) ───────────────────────────
   Eén onderdeel voor elk overzicht: een <label> met een echt vinkje erin, zodat het met het
   toetsenbord werkt en een schermlezer de stand voorleest. Omzetten bewaart meteen (module-scherm.js
   → /dashboard/rij/status). WAAR hij staat en hoe breed de kolom is, bepaalt het overzicht zelf. */
.wf-rs { flex: none; display: inline-flex; align-items: center; }
.wf-rs-sw { display: inline-flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; user-select: none; }
.wf-rs-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wf-rs-sw .tr {
  display: inline-block; position: relative; flex: none; width: 40px; height: 23px; border-radius: 999px;
  background: #cfd6e4; transition: background .16s ease;
}
.wf-rs-sw .tr::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(1, 16, 61, .25); transition: transform .16s ease;
}
.wf-rs-sw input:checked + .tr { background: var(--wf-green, #b0d136); }
.wf-rs-sw input:checked + .tr::after { transform: translateX(17px); }
.wf-rs-sw input:focus-visible + .tr { outline: 2px solid var(--webfix-cyan, #32bcee); outline-offset: 2px; }
.wf-rs-sw .lb { font-size: 12.5px; font-weight: 700; color: #666c73; white-space: nowrap; }
.wf-rs.is-live .lb { color: #5a6e0e; }
/* Verlopen of verborgen: wél gepubliceerd, maar niet te zien. Amber, zodat het opvalt zonder alarm. */
.wf-rs.-bijzonder .lb { color: #8a6117; }
/* Tijdens het bewaren even op slot, zodat twee snelle klikken elkaar niet inhalen. */
.wf-rs.is-bezig { opacity: .55; pointer-events: none; }

[data-bs-theme="dark"] .wf-rs-sw .tr { background: rgba(255, 255, 255, .18); }
[data-bs-theme="dark"] .wf-rs-sw .lb { color: #cbd2e0; }

/* ── Social Sync: herkomst in de titelkolom ─────────────────────────────────────────────────────────
   Een bericht dat via Social Sync binnenkwam krijgt onder de datum een klein labeltje met het kanaal,
   in de kleur van dat kanaal (Tom, 20-09-2026). Onder de datum en niet bij de titel: de eerste vraag
   bij een bericht dat je niet zelf schreef is waar het vandaan komt, en dat hoort bij "wanneer". */
.wf-syncbron {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
    padding: 2px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; line-height: 1.5; letter-spacing: .01em;
    color: #fff; white-space: nowrap;
}
.wf-syncbron .bi { font-size: 11px; }
.wf-syncbron .wf-sync-ic { font-size: 12px; vertical-align: 0; }
.wf-syncbron-facebook  { background: #1877F2; }
.wf-syncbron-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.wf-syncbron-linkedin  { background: #0A66C2; }

/* ── Social Sync: de uitslag van de laatste ronde ─────────────────────────────────────────────────
   Groen als het lukte, rood als het misging. Staat boven de kaart "Nu ophalen" op Marketing → Social
   media, en blijft staan na een herlading (hij komt uit de database). */
/*  Groen als het lukte, rood als het misging: de rand, het icoon en de kop dragen die kleur, de rest
    blijft rustig. Het rapport staat op volle breedte onder de twee kaarten (Tom, 20-09-2026). */
/*  De partial zit in een eigen wikkel (#syncResultaat); díe is het rooster-item, dus die spant de twee
    kolommen. */
#syncResultaat { grid-column: 1 / -1; }
.wf-syncuitslag {
    border: 1px solid rgba(176, 209, 54, .45); border-left: 4px solid var(--wf-green, #b0d136);
    border-radius: 12px; background: rgba(176, 209, 54, .06);
}
.wf-syncuitslag.-fout { border-color: rgba(179, 38, 30, .35); border-left-color: #b3261e; background: rgba(179, 38, 30, .05); }
.wf-syncuitslag-kop { display: flex; align-items: center; gap: 10px; }
.wf-syncuitslag-kop .bi { font-size: 20px; color: #6f8c14; line-height: 1; }
.wf-syncuitslag.-fout .wf-syncuitslag-kop .bi { color: #b3261e; }
.wf-syncuitslag-kop b { display: block; font-size: 15px; color: #59700f; }
.wf-syncuitslag.-fout .wf-syncuitslag-kop b { color: #b3261e; }
.wf-syncuitslag-tijd { display: block; font-size: 12.5px; font-weight: 500; color: #6b7484; }

/*  De knop "Bekijk rapport" heeft alleen zin zolang het rapport niet naast je staat. */
.wf-syncnaarrapport { display: none; }
@media (max-width: 991.98px) { .wf-syncnaarrapport { display: inline-flex; } }
.wf-syncuitslag-reden { margin: 8px 0 0; font-size: 13px; color: #b3261e; }
.wf-syncuitslag-leeg { margin: 8px 0 0; font-size: 13px; color: #6b7484; }

.wf-synctabel { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; }
.wf-synctabel th {
    padding: 4px 8px 6px; border-bottom: 1px solid var(--wf-border, #e2e8f0);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7b8496;
}
.wf-synctabel td { padding: 7px 8px; border-bottom: 1px solid rgba(8, 62, 178, .08); vertical-align: middle; }
.wf-synctabel tr:last-child td { border-bottom: 0; }
.wf-synctabel-titel {
    max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--wf-black, #000229);
}
@media (max-width: 575.98px) {
    .wf-synctabel thead { display: none; }
    .wf-synctabel tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid rgba(8, 62, 178, .08); }
    .wf-synctabel td { border: 0; padding: 0; }
    .wf-synctabel-titel { max-width: none; white-space: normal; grid-column: 1 / -1; }
}

/* ── Pakketgrens: het paneel achter een tabblad dat bij een hoger pakket hoort ───────────────────
   (Tom 21-09-2026) Grijs, met een slotje en één knop. Geen schreeuwend verkoopblok: de klant zoekt
   hier een functie en wil weten waarom die dicht zit. */
.wf-pkgslot {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 28px 44px; gap: 6px;
}
.wf-pkgslot-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px;
  border-radius: 50%; margin-bottom: 10px; font-size: 24px; color: #6b7280;
  background: rgba(1, 16, 61, .05); border: 1px solid rgba(1, 16, 61, .08);
}
.wf-pkgslot-kop { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--wf-black, #000229); }
.wf-pkgslot-tekst { margin: 6px 0 0; max-width: 620px; font-size: 13.5px; line-height: 1.6; color: #666c73; }
.wf-pkgslot-lijst { list-style: none; margin: 16px 0 6px; padding: 0; display: grid; gap: 7px; text-align: left; }
.wf-pkgslot-lijst li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #3b4149; }
.wf-pkgslot-lijst i { color: var(--webfix-green, #6f8a1b); margin-top: 2px; }
.wf-pkgslot-knop {
  margin-top: 18px; border: 0; border-radius: 9999px; cursor: pointer; padding: 12px 24px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--webfix-magenta, #da176c), #a12359);
  transition: filter .2s ease;
}
.wf-pkgslot-knop:hover { filter: brightness(1.08); }
/*  Een tabblad dat op slot zit: grijs en met een slotje, maar wél aanklikbaar — daarachter staat het
    paneel dat uitlegt wat het is en wat het kost. */
.wf-tabx.-slot { color: #9aa0a8; }
.wf-tabx.-slot i { opacity: .7; }

/* ── Het upgrade-venster ────────────────────────────────────────────────────────────────────── */
.wf-pkgup .modal-body { padding-top: 6px; }
.wf-pkgup-lead { font-size: 13.5px; line-height: 1.6; color: #3b4149; margin-bottom: 14px; }
.wf-pkgup-blok {
  border: 1px solid rgba(1, 16, 61, .09); border-radius: 14px; padding: 14px 16px;
  background: #fbfbfd; margin-bottom: 14px;
}
.wf-pkgup-regel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wf-pkgup-regel b { font-size: 1.3rem; color: var(--wf-black, #000229); }
.wf-pkgup-fijn { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #666c73; }
.wf-pkgup-punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wf-pkgup-punten li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #3b4149; }
.wf-pkgup-punten i { color: var(--webfix-green, #6f8a1b); margin-top: 2px; }

/* ── Tijdlijn van een demo-aanvraag ─────────────────────────────────────────────────────────
   Negen mijlpalen van "aanvraag gestart" tot "website live" (Tom, 21-09-2026). Op een breed
   scherm naast elkaar met een lijn ertussen, op een smal scherm onder elkaar — een tijdlijn die
   horizontaal moet scrollen leest niemand.

   Drie standen: -klaar (gebeurd), -nu (hier wacht de aanvraag op) en -todo (moet nog komen). */
.wf-tijdlijn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 4px 0;
}
.wf-tl-punt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 2px;
  text-align: center;
  min-width: 0;
}
/* De lijn tussen de bolletjes: op de achtergrond, en nooit links van de eerste. */
.wf-tl-punt::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--border-hairline, #E5E7EC);
  z-index: 0;
}
.wf-tl-punt:first-child::before { display: none; }
.wf-tl-punt.-klaar::before { background: var(--webfix-green, #6f8a1b); }
.wf-tl-bol {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--border-hairline, #E5E7EC);
  color: #9aa1ab;
  font-size: 14px;
}
.wf-tl-punt.-klaar .wf-tl-bol {
  background: var(--webfix-green, #6f8a1b);
  border-color: var(--webfix-green, #6f8a1b);
  color: #fff;
}
.wf-tl-punt.-nu .wf-tl-bol {
  border-color: var(--wf-pink, #da176c);
  color: var(--wf-pink, #da176c);
  box-shadow: 0 0 0 4px rgba(218, 23, 108, .12);
}
.wf-tl-label { font-size: 11.5px; line-height: 1.25; color: #3b4149; font-weight: 600; }
.wf-tl-punt.-todo .wf-tl-label { color: #9aa1ab; font-weight: 500; }
.wf-tl-tijd { font-size: 11px; color: #8b909a; font-variant-numeric: tabular-nums; }
.wf-tl-afgeleid { color: #b9bec6; }
.wf-tl-notitie,
.wf-tl-door {
  font-size: 10.5px;
  color: #9aa1ab;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .wf-tijdlijn { grid-template-columns: 1fr; }
  .wf-tl-punt { flex-direction: row; text-align: left; gap: 10px; padding: 6px 0; }
  .wf-tl-punt::before { display: none; }
  .wf-tl-label { flex: 1; }
}

/* De compacte variant in het aanvragenoverzicht: alleen de bolletjes, zonder tekst. */
.wf-tl-mini { display: inline-flex; align-items: center; gap: 3px; }
.wf-tl-mini i {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  display: inline-block;
  background: var(--border-hairline, #E5E7EC);
}
.wf-tl-mini i.-klaar { background: var(--webfix-green, #6f8a1b); }
.wf-tl-mini i.-nu { background: var(--wf-pink, #da176c); }

/* ── Accordeon-rijen (.wf-acc) ─────────────────────────────────────────────────
 * Een lijst waarin er één rij openstaat, zoals het domeinenoverzicht op
 * /admin/hosting (Tom, 25-09-2026). Bewust een 1px-rand en géén schaduw: de
 * rijen horen als één lijst te lezen, niet als losse kaartjes onder elkaar.
 *
 * Openklappen is hier navigeren (?domein=), niet een schuifje in de browser: de
 * zware gegevens onder een rij worden alleen voor het open domein opgehaald.
 *
 *   <div class="wf-acc -open">
 *     <div class="wf-acc-kop">
 *       <a class="wf-acc-greep" href="…">…</a>
 *       <div class="wf-acc-acties">…</div>
 *     </div>
 *     <div class="wf-acc-body">…</div>
 *   </div>                                                                    */
.wf-acc {
  border: 1px solid var(--border-hairline, #E5E7EC);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.wf-acc + .wf-acc { margin-top: -1px; }          /* randen delen, geen dubbele lijn */
.wf-acc:hover { border-color: rgba(50, 188, 238, .45); }
.wf-acc.-open {
  border-color: rgba(50, 188, 238, .55);
  box-shadow: 0 2px 10px rgba(1, 16, 61, .05);
  position: relative; z-index: 1;               /* de open rij bovenop de randen van de buren */
}

.wf-acc-kop { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.wf-acc-greep {
  display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0;
  text-decoration: none; color: inherit;
}
.wf-acc-greep:hover { text-decoration: none; color: inherit; }
.wf-acc-naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-acc-naam .wf-cell-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.wf-acc-naam .wf-cell-sub { font-size: 13px; color: var(--text-muted, #5F6368); }

.wf-acc-acties { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.wf-acc-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; color: var(--text-muted, #5F6368);
  text-decoration: none;
}
.wf-acc-chevron:hover { background: rgba(1, 16, 61, .05); color: inherit; }

.wf-acc-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--border-hairline, #E5E7EC);
  margin-top: 2px;
}

/* "Gegevens" en "Provisioning": aanwezig, maar niet in de weg. */
.wf-acc-meer { border-top: 1px solid var(--border-hairline, #E5E7EC); padding-top: 10px; margin-top: 10px; }
.wf-acc-meer > summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: 14px;
  color: var(--text-muted, #5F6368); padding: 4px 0;
}
.wf-acc-meer > summary::-webkit-details-marker { display: none; }
.wf-acc-meer > summary:hover { color: var(--wf-pink, #da176c); }
.wf-acc-meer[open] > summary { color: var(--text-strong, #000229); }

/* Een DNS-rij die je aan het aanpassen bent. */
tr.-bewerken .wf-dns-val { background: #FFFDF4; border-color: #DC9E2F; }

@media (max-width: 767.98px) {
  .wf-acc-kop { flex-wrap: wrap; }
  .wf-acc-acties { width: 100%; justify-content: flex-end; }
}

:root[data-bs-theme="dark"] .wf-acc { background: #141A26; border-color: rgba(255, 255, 255, .09); }
:root[data-bs-theme="dark"] .wf-acc-body,
:root[data-bs-theme="dark"] .wf-acc-meer { border-color: rgba(255, 255, 255, .09); }

/* ── Menu-item alleen voor Webfix (.wf-nav-sa) ───────────────────────────────────
 * Een klein grijs "(SA only)" achter een zijbalk-item dat alleen een meekijkende
 * Webfix-medewerker ziet (Layout website → Afbeeldingen, Tom 26-09-2026). */
.wf-nav-sa { font-size: 11px; font-weight: 400; color: #9aa2b1; margin-left: 3px; white-space: nowrap; }

/* ── Taalschuif (.wf-taalschuif) ─────────────────────────────────────────────────
 * Talen naast elkaar, met een blok dat onder de gekozen taal schuift. Voor de taal van onze post
 * op het klantpaneel (Gegevens, Tom 01-10-2026). De stand komt uit :has() op het aangevinkte
 * rondje: geen script nodig, en hij staat goed vanaf het eerste beeld. Kleur van het blok = de
 * ADMIN-balk uit de stijlgids (wf-flows-modalhead-admin). Het aantal talen staat in
 * --wf-taal-aantal, zodat een vierde taal alleen een regel CSS hieronder vraagt. */
.wf-taalschuif {
  --wf-taal-aantal: 3;
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border-radius: 999px;
  background: #f1f4f9;
  box-shadow: inset 0 0 0 1px rgba(1, 16, 61, .06);
  isolation: isolate;
}
.wf-taalschuif-blok {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--wf-taal-aantal));
  border-radius: 999px;
  background: linear-gradient(90deg, #1f93bd 0%, #32BCEE 100%);
  box-shadow: 0 4px 12px rgba(31, 147, 189, .35);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
}
.wf-taalschuif-optie {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: #3b4256;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .2s;
}
/* Het rondje zelf is onzichtbaar; de hele pil is het klikvlak. Niet display:none: dan kan hij niet
   meer met het toetsenbord gekozen worden. */
.wf-taalschuif-optie input { position: absolute; opacity: 0; pointer-events: none; }
.wf-taalschuif-optie:hover { color: #01103d; }
.wf-taalschuif-optie:has(input:checked) { color: #fff; }
.wf-taalschuif-optie:has(input:focus-visible) { outline: 2px solid #32BCEE; outline-offset: 2px; }
.wf-taalschuif-optie .wf-langflag { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.wf-taalschuif:has(label.wf-taalschuif-optie:nth-of-type(2) input:checked) .wf-taalschuif-blok { transform: translateX(100%); }
.wf-taalschuif:has(label.wf-taalschuif-optie:nth-of-type(3) input:checked) .wf-taalschuif-blok { transform: translateX(200%); }

/*  Eigen patronen in de patronenkiezer (Views/Dashboard/Layout/_EigenPatronenKiezer.cshtml, Tom 01-10-2026):
    de uploadtegel en de schakelaar "In huisstijlkleur". De tegels zelf hebben de opmaak van de kiezer eromheen. */
.wf-eigenpat { margin-bottom: 14px; }
.wf-eigenpat-plus { display: flex !important; align-items: center; justify-content: center; background: #f6f7f9 !important;
  border: 1px dashed rgba(8, 15, 52, .22) !important; color: #5b6270; font-size: 18px; }
.wf-eigenpat-upload:hover .wf-eigenpat-plus { border-color: var(--wf-accent, #4f46e5) !important; color: var(--wf-accent, #4f46e5); }
.wf-eigenpat-upload.is-bezig { opacity: .55; pointer-events: none; }
.wf-eigenpat-kleur .small { font-size: 12px; }
/*  Een tegel staat op de site op ware grootte; in het kleine staaltje zou je daar alleen een hoekje van zien. */
.wf-eigenpat [data-patroon="eigen"].-tegel > .wfvn-tex { background-size: 56px auto !important; -webkit-mask-size: 56px auto !important; mask-size: 56px auto !important; }

/* ══ /admin/seo — vindbaarheid per site (07-10-2026) ══════════════════════════
 * Score- en infokolom in de rij, de uitkomst in het venster van Optimaliseer en
 * het wegschuiven van een rij die naar Gezond gaat. Verder alleen bestaande
 * klassen (wf-lrow, wf-label, wf-sync-spoor). */
.wf-seo-scorecol { min-width: 150px; text-align: right; }
.wf-seo-infocol  { min-width: 220px; max-width: 320px; font-size: .8125rem; }
.wf-seo-uitkomst { text-align: center; padding: 8px 0 4px; animation: wf-seo-in .35s ease-out; }
.wf-seo-uitkomst-icoon {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: #fff;
  background: linear-gradient(135deg, #b0d136, #32bcee);
}
.wf-seo-uitkomst-icoon.-bijna { background: linear-gradient(135deg, #f4b740, #dc9e2f); }
.wf-seo-rij-weg {
  opacity: 0; transform: translateX(24px); max-height: 0 !important; overflow: hidden;
  transition: opacity .35s ease, transform .35s ease, max-height .45s ease .2s;
}
@keyframes wf-seo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 767.98px) {
  .wf-seo-scorecol { text-align: left; min-width: 0; }
  .wf-seo-infocol  { min-width: 0; max-width: none; }
}

/* ══ /admin/seo — details-modal (09-10-2026) ════════════════════════════════
 * Score-rondje, kaarten links (per onderdeel, bedrijfsgegevens, techniek) en
 * rechts "Wat ontbreekt nog". Kleuren via de systeemvariabelen, dus dark mode
 * gaat vanzelf mee. */
.wf-seo-detail-score {
  width: 72px; height: 72px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #b0d136, #32bcee);
}
.wf-seo-detail-score.-warning { background: linear-gradient(135deg, #f4b740, #dc9e2f); }
.wf-seo-detail-score.-danger  { background: linear-gradient(135deg, #f0656b, #d81f25); }
.wf-seo-kaart {
  background: var(--wf-surface); border: 1px solid var(--wf-border); border-radius: 12px; padding: 16px 18px;
}
.wf-seo-kaart-kop {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-weight: 600; color: var(--wf-title);
}
.wf-seo-onderdeel { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wf-seo-onderdeel-naam { flex: 0 0 170px; font-size: .875rem; color: var(--wf-text); }
.wf-seo-check { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; font-size: .875rem; color: var(--wf-text); }
.wf-seo-check .bi { margin-top: 2px; }
.wf-seo-gebrek { border-top: 1px solid var(--wf-border); padding: 10px 0; color: var(--wf-text); }
.wf-seo-gebrek:first-of-type { border-top: 0; padding-top: 0; }
.wf-seo-gebrek.-zelf b { color: var(--wf-title); }
.wf-seo-alles-goed { display: flex; gap: 8px; align-items: center; color: var(--wf-green); font-weight: 600; }
.wf-lrow-block.-klikbaar { cursor: pointer; }
@media (max-width: 767.98px) {
  .wf-seo-onderdeel-naam { flex-basis: 110px; }
}