/* flexbase.css — FlexBase 2.0 fase 1 (F1.1): de volledige stijlbasis uit templates/base.html (voorheen <style> r.15–232),
   byte-voor-byte verplaatst. Tokens (:root) ongewijzigd — blauwdruk E.10/H.1 #30. Daaronder (F1.1b) de inline styles van
   base.html als id-verankerde regels met identieke declaraties. Eén bron voor de huisstijl; per patch komen hier de
   componentklassen bij (F1.2) en verdwijnen lokale <style>-blokken uit templates (F1.4+). */
:root {
  color-scheme: light;
  --page:        #f8f8f7;   /* rustige lichte achtergrond (huisstijl) */
  --surface-1:   #ffffff;
  --surface-2:   #f1f3f6;   /* iets grijzer vlak: chatbubbels, invoervelden */
  --text-primary:#1f2533;   /* antraciet van hfsuitzendgroep.nl */
  --text-secondary:#4c525c;
  --text-muted:  #868d98;
  --grid:        #e8eaef;
  --baseline:    #c4c9d1;
  --border:      rgba(31,37,51,0.10);
  --accent:      #f4bc36;  /* HFS-geel (knoppen) */
  --series-1:    #e2a71d;  /* HFS-geel donker (links, accenten, grafieken) */
  --series-2:    #008300;  /* groen  */
  --series-3:    #e87ba4;  /* magenta */
  --series-4:    #eda100;  /* geel   */
  --st-good:     #0ca30c;
  --st-warning:  #e8a212;
  --st-serious:  #ec835a;
  --st-critical: #d03b3b;
  --delta-good:  #0a7a0a;
  /* F1.11: leesbare tekstvarianten van het geel (zelfde regel als het portaal, F1.10): HFS-geel als tekst op licht haalt
     ±2:1. Tekstlinks en geel gekleurde tekst gebruiken daarom donker goud; het geel zelf blijft voor knoppen, actieve
     staten, focusring, randen, staven en grafieken. Tekst óp geel is antraciet (--op-accent, 8,8:1; wit haalde 1,7:1). */
  --link:        #8a5f00;  /* ≥ 5:1 op wit, pagina, grijs vlak en lichtgeel */
  --st-warning-tekst: #8a5b00;
  --op-accent:   #1f2533;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:#0e1013; --surface-1:#191c21; --surface-2:#22262d;
    --text-primary:#f2f4f7; --text-secondary:#c2c7cf; --text-muted:#868d98;
    --grid:#2a2e35; --baseline:#3a3f48; --border:rgba(255,255,255,0.10);
    --accent:#f4bc36;
    --series-1:#f4bc36; --series-2:#2aa32a; --series-3:#d55181; --series-4:#c98500;
    --delta-good:#3fbf3f;
    --link:#f4bc36; --st-warning-tekst:#e8a212; --op-accent:#1f2533;   /* F1.11: in het donker is het geel zelf goed leesbaar */
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--text-primary);
  font: 14px/1.45 "Maven Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
}
nav {
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
  padding: 10px 20px; background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 8px rgba(16,19,24,.05);
}
nav .logo { font-weight: 700; font-size: 15px; margin-right: 14px;
            display: flex; align-items: center; gap: 8px; }
nav .logo img { width: 26px; height: 26px; border-radius: 6px;
                box-shadow: 0 0 0 1px var(--border); }
nav .logo .sub { display: block; font-size: 9px; font-weight: 600; color: var(--text-muted);
                 letter-spacing: .08em; text-transform: uppercase; margin-top: -1px; }
nav a, nav .groep > span {
  color: var(--text-secondary); text-decoration: none; display: inline-block;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-weight: 600; letter-spacing: .01em;
}
nav a:hover, nav .groep:hover > span {
  background: color-mix(in srgb, var(--series-1) 8%, transparent);
  color: var(--link); }
nav a.actief, nav .groep.actief > span {
  color: var(--link); font-weight: 700;
  background: color-mix(in srgb, var(--series-1) 10%, transparent); }
nav .groep { position: relative; }
nav .groep > span::after { content: " ▾"; font-size: 8.5px; opacity: .45; }
nav .navbadge {
  display: inline-block; min-width: 17px; text-align: center; margin-left: 5px;
  background: var(--st-critical); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 17px; padding: 0 5px;
  vertical-align: 1px;
}
nav .groep .menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 190px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
nav .groep:hover .menu, nav .groep:focus-within .menu { display: block; }
nav .groep .menu a { display: block; padding: 7px 12px; border-radius: 7px; }
nav .groep .menu .kopje {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); padding: 7px 12px 2px; font-weight: 700;
}
/* Lange menu's (Personeel, CRM) in twee kolommen met kopjes: veertien regels
   onder elkaar lees je niet, die zoek je door. */
nav .groep .menu.breed { min-width: 430px; columns: 2; column-gap: 14px; }
/* Elk groepje een eigen kleur: de kop en een bolletje ervoor. De items zelf
   blijven gewoon zwart — anders wordt het een kermis en lees je de namen niet
   meer. Rood blijft vrij: dat betekent hier urgent. */
nav .groep .menu .blok .kopje { color: var(--kop, var(--text-muted)); }
nav .groep .menu .blok .kopje::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--kop, transparent); margin-right: 6px; vertical-align: middle;
}
nav .groep .menu .blok.k-mensen   { --kop: var(--series-1); }
nav .groep .menu .blok.k-nieuw    { --kop: var(--series-2); }
nav .groep .menu .blok.k-dagelijks{ --kop: #4a7fd0; }
nav .groep .menu .blok.k-papier   { --kop: var(--series-3); }
nav .groep .menu.breed .blok { break-inside: avoid; padding-bottom: 4px; }
nav .groep .menu a { white-space: nowrap; padding: 6px 12px; }
/* 📱 mobiel: één nette balk (‹ terug + logo + ☰) — het menu klapt als paneel uit */
nav .hap, nav .terug, #appzweef { display: none; }
@media (max-width: 760px) {
  nav { padding: 10px 14px; gap: 0; position: static; box-shadow: none; }
  nav .logo { margin-right: auto; }
  nav .terug { align-items: center; justify-content: center; width: 42px; height: 42px;
    margin-right: 8px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-1); font: inherit; font-size: 24px; line-height: 1;
    color: var(--text-primary); cursor: pointer; padding: 0 0 3px; }
  nav .terug.aan { display: flex; }
  /* zwevende knoppen op de telefoon: Taken en Fietsen in plaats van Activiteit en Notitie */
  #auditzweef, #doszweef { display: none !important; }
  #appzweef { display: block; }
  nav .hap { display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-1); font: inherit; font-size: 19px;
    color: var(--text-primary); cursor: pointer; }
  nav > a, nav > .groep { display: none; }
  nav.open > a, nav.open > .groep { display: block; width: 100%;
    margin: 0 0 2px; }
  nav.open > a:first-of-type { margin-top: 10px; }
  nav.open > a, nav.open > .groep > span { display: block; width: 100%;
    padding: 13px 14px; font-size: 15px; border-radius: 10px; }
  nav .groep { position: static; }
  nav .groep > span::after { content: " ▸"; }
  nav .groep.open > span::after { content: " ▾"; }
  nav .groep .menu, nav .groep:hover .menu, nav .groep:focus-within .menu { display: none; }
  nav .groep.open .menu { display: block !important; position: static;
    box-shadow: none; border: 0; border-left: 2px solid var(--grid);
    border-radius: 0; margin: 2px 0 8px 16px; padding: 0 0 0 6px;
    min-width: 0; max-height: none; }
  nav .groep .menu a { padding: 10px 12px; font-size: 14.5px; white-space: normal; }
  nav .groep .menu.breed { min-width: 0; columns: 1; }
  nav .groep .menu .kopje { padding: 10px 12px 2px; }
  nav .groep[style*="margin-left:auto"] { margin-left: 0 !important; }
  main { padding: 14px 12px 236px; }  /* onderaan ruimte vrij voor de vier zwevende knoppen */
  .kaart { overflow-x: auto; }
  h1 { font-size: 19px; }
  .knop, button.knop { padding: 10px 16px; }
}
main { max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { font-size: 21px; margin: 4px 0 16px; letter-spacing: -.3px; font-weight: 700; }
.kaart {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 1px 2px rgba(16,19,24,.04), 0 4px 14px rgba(16,19,24,.03);
}
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--grid); }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
td { font-variant-numeric: tabular-nums; }
tr:hover td { background: color-mix(in srgb, var(--series-1) 6%, transparent); }
a.rijlink { color: var(--link); text-decoration: none; }
a.rijlink:hover { text-decoration: underline; }
.knop {
  display: inline-block; background: var(--accent); color: var(--op-accent); border: 0;
  padding: 8px 16px; border-radius: 9px; font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: filter .12s;
}
.knop:hover { filter: brightness(.94); }
.knop.stil { background: transparent; color: var(--text-secondary); border: 1.5px solid var(--grid); }
.knop.stil:hover { border-color: var(--series-1); color: var(--link); filter: none; }
.knop.gevaar { background: var(--st-critical); color: #fff; }
.balk { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
input, select, textarea {
  font: inherit; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--baseline); border-radius: 10px; padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--series-1) 55%, transparent);
  outline-offset: 0;
}
label { display: block; font-size: 12px; color: var(--text-secondary); font-weight: 600; margin: 12px 0 4px; }
form.zoek input { width: 220px; }
.leeg { color: var(--text-muted); padding: 24px; text-align: center; }

/* ---- filterbalk: naast elkaar in plaats van zeven regels onder elkaar ----
   Keuzelijsten staan in FlexBase standaard op volle breedte (klopt in een
   formulier), maar in een balk wil je ze naast elkaar. */
.filterbalk { row-gap: 8px !important; }
.filterbalk select { width: auto; max-width: 210px; padding: 6px 9px; font-size: 13px; }
@media (max-width: 700px) {
  .filterbalk select { max-width: none; flex: 1 1 45%; }
}

/* ---- lijsten: één regel per rij ----
   Een bedrijfsnaam die over vier regels afbreekt maakt van elke rij een blok
   van 145 pixels; zo passen er drie mensen op een scherm. Niet afbreken, en
   wat te lang is krijgt drie puntjes — de tabel schuift al opzij op smalle
   schermen. */
table.lijst th, table.lijst td { white-space: nowrap; padding: 7px 10px; }
table.lijst td { max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
/* De laatste kolom (knoppen, 'x bewoners · y met achterstand') en alles wat
   uitgeklapt wordt nooit afknippen: daar staat juist wat je moet lezen. */
table.lijst td:last-child,
table.lijst tr[id^="loc_"] td,
table.lijst tr[id^="team_"] td,
table.lijst tr[id^="det_"] td {
  max-width: none; overflow: visible; text-overflow: clip; white-space: normal;
}
@media (max-width: 700px) { table.lijst th, table.lijst td { font-size: 12.5px; } }

/* ---- huizenlijst: rustiger regels, en zien zonder lezen ---- */
table.huizen td { padding: 10px; border-bottom: 1px solid var(--grid); }
table.huizen tr:hover td { background: color-mix(in srgb, var(--series-1) 5%, transparent); }
table.huizen td:first-child { font-size: 11.5px; color: var(--text-muted); }
table.huizen tr.pas-op td:first-child { box-shadow: inset 3px 0 0 var(--st-critical); }
/* de balk van de bezetting */
.bezet { display: flex; align-items: center; gap: 9px; }
.bezet .staaf { flex: 0 0 58px; height: 7px; border-radius: 99px;
  background: var(--grid); overflow: hidden; }
.bezet .staaf i { display: block; height: 100%; border-radius: 99px; }
/* labeltjes in plaats van losse tekst tussen puntjes */
.label { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 3px 11px; font-size: 12px; font-weight: 700; text-decoration: none;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); }
.label:hover { border-color: var(--baseline); }
.label.rood { border-color: color-mix(in srgb, var(--st-critical) 35%, transparent);
  background: color-mix(in srgb, var(--st-critical) 10%, transparent); color: var(--st-critical); }

/* ---- F1.1b: inline styles van base.html, verplaatst naar id-verankerde regels (identieke declaraties).
   display:none van #snelzoek/#dospaneel/#kchatpaneel blijft inline: de bestaande JS leest element.style.display. ---- */
nav b.nav-teller { color:var(--st-critical) }
nav #snelknop { margin-left:auto;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:inherit;border-radius:8px;padding:5px 12px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap }
nav #snelknop .snel-kort { opacity:.6;font-size:11px }
nav .groep .menu.menu-rechts { left:auto;right:0 }
nav > a.nav-rechts { margin-left:auto }
#snelzoek { position:fixed;inset:0;z-index:200;background:rgba(15,20,30,.45);padding-top:12vh }
#snelzoek .snel-doos { max-width:520px;margin:0 auto;background:var(--surface-1);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.3);overflow:hidden }
#snelzoek #snelvak { border:0;border-bottom:1px solid var(--grid);border-radius:0;padding:14px 18px;font-size:15px;width:100%;background:transparent }
#snelzoek #sneluit { max-height:46vh;overflow:auto;padding:6px 0 }
#melddoos { position:fixed;bottom:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:10px;max-width:340px }
#auditzweef { position:fixed;right:22px;bottom:166px;z-index:9999 }
#auditzweef a { display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--series-1);color:var(--op-accent);font-size:21px;line-height:1;text-decoration:none;box-shadow:0 6px 18px rgba(16,24,40,.22) }
#doszweef { position:fixed;right:22px;bottom:94px;z-index:9999 }
#dospaneel { position:absolute;right:0;bottom:70px;width:330px;max-width:calc(100vw - 44px);background:var(--surface-1);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(16,24,40,.18);overflow:hidden }
#dospaneel .dos-kop { background:var(--text-primary);color:var(--surface-1);padding:12px 16px;font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;align-items:center }
#dospaneel .dos-kop .dos-sub { font-weight:400;font-size:11.5px;opacity:.75 }
#dospaneel #dossluit { border:0;background:none;color:inherit;cursor:pointer;font-size:16px;opacity:.7;padding:0 2px }
#dospaneel #dosform { padding:12px 14px;display:flex;flex-direction:column;gap:9px }
#dosform .dos-veld { font-size:11.5px;color:var(--text-muted);font-weight:700 }
#dosform #dospersoon, #dosform #dosvoor { width:100%;margin-top:3px }
#dosform textarea { width:100%;resize:vertical }
#dosform .dos-vink { font-size:12px;display:flex;align-items:center;gap:6px }
#dosform .dos-acties { display:flex;gap:8px;align-items:center }
#dosform .dos-acties button { flex:1 }
#dosform .dos-acties a { font-size:12px;text-decoration:none;color:var(--text-muted);white-space:nowrap }
#doszweef #dosknop { width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;background:var(--series-1);color:var(--op-accent);font-size:21px;line-height:1;box-shadow:0 6px 18px rgba(16,24,40,.22) }
#appzweef a { position:fixed;right:22px;z-index:9999;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--series-1);color:var(--op-accent);font-size:22px;line-height:1;text-decoration:none;box-shadow:0 6px 18px rgba(16,24,40,.22) }
#appzweef a.app-taken { bottom:166px }
#appzweef a.app-fietsen { bottom:94px }
#kchatzweef { position:fixed;right:22px;bottom:22px;z-index:9999 }
#kchatpaneel { position:absolute;right:0;bottom:70px;width:360px;max-width:calc(100vw - 44px);background:var(--surface-1);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(16,24,40,.18);overflow:hidden }
#kchatpaneel .kc-kop { background:var(--text-primary);color:var(--surface-1);padding:12px 16px;font-weight:700;font-size:13.5px }
#kchatpaneel .kc-kop .kc-sub { font-weight:400;font-size:11.5px;opacity:.75 }
#kchatpaneel .kc-lijst { max-height:340px;overflow-y:auto }
#kchatpaneel .kc-lijst a.kc-item { display:flex;gap:11px;align-items:center;padding:10px 13px;text-decoration:none;color:inherit;border-bottom:1px solid var(--grid) }
#kchatpaneel .kc-item .kc-avatar { flex:none;width:38px;height:38px;border-radius:50%;background:var(--surface-2, var(--page));display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--text-secondary);position:relative }
#kchatpaneel .kc-item .kc-avatar .kc-soort { position:absolute;right:-3px;bottom:-3px;font-size:11px }
#kchatpaneel .kc-item .kc-body { flex:1;min-width:0 }
#kchatpaneel .kc-item .kc-rij { display:flex;gap:8px;align-items:baseline }
#kchatpaneel .kc-item .kc-wie { font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
#kchatpaneel .kc-item .kc-tijd { margin-left:auto;font-size:11px;color:var(--text-muted);white-space:nowrap }
#kchatpaneel .kc-item .kc-tijd.nieuw { color:var(--st-critical) }
#kchatpaneel .kc-item .kc-rij2 { display:flex;gap:8px;align-items:center;margin-top:1px }
#kchatpaneel .kc-item .kc-tekst { flex:1;min-width:0;font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
#kchatpaneel .kc-item .kc-badge { flex:none;background:var(--st-critical);color:#fff;border-radius:99px;min-width:19px;text-align:center;padding:1px 6px;font-size:11px;font-weight:700 }
#kchatpaneel .kc-lijst .kc-leeg { color:var(--text-muted);font-size:12.5px;padding:14px 13px }
#kchatpaneel .kc-voet { display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border) }
#kchatpaneel .kc-voet a { flex:1;text-align:center;font-size:12.5px;font-weight:700;text-decoration:none;color:var(--text-primary);border:1px solid var(--border);border-radius:8px;padding:7px 6px }
#kchatzweef #kchatknop { width:58px;height:58px;border-radius:50%;border:0;background:var(--text-primary);color:var(--surface-1);font-size:24px;cursor:pointer;box-shadow:0 8px 24px rgba(16,24,40,.28);position:relative }
#kchatzweef #kchatknop .kc-teller { position:absolute;top:-4px;right:-4px;background:var(--st-critical);color:#fff;border-radius:99px;padding:2px 8px;font-size:11.5px;font-weight:700 }

/* ================================================================ F1.2: componentlaag (blauwdruk E.10)
   Nieuwe klassen beginnen met fb- en botsen nergens met bestaande templates. De basis (.knop, .kaart, table.lijst,
   .filterbalk, .leeg, .label) blijft zoals hij was. Pagina's gaan deze klassen pas vanaf F1.4 gebruiken. */
.fb-icoon { display: inline-block; vertical-align: -3px; flex: none; }
.fb-icoon--onbekend { color: var(--st-critical); font-weight: 700; }
/* kopzone */
.fb-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin: 0 0 16px; flex-wrap: wrap; }
.fb-kop__links { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 320px; }
.fb-kop__terug { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--border); color: var(--text-secondary); text-decoration: none; margin-top: 1px; }
.fb-kop__terug:hover { background: var(--surface-2); }
.fb-kop__titel { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-kop__context { color: var(--text-muted); font-size: 12.5px; margin-top: 3px; }
.fb-kop__acties { display: flex; gap: 8px; align-items: center; flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
/* kaart */
.fb-kaart--compact { padding: 12px; }
.fb-kaart__kop { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
/* knoppen (aanvullend op .knop / .knop.stil / .knop.gevaar) */
.knop.fb-knop--tekst { background: transparent; color: var(--text-secondary); padding-left: 6px; padding-right: 6px; }
.knop.fb-knop--tekst:hover { color: var(--text-primary); filter: none; background: var(--surface-2); }
.knop.fb-knop--klein { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.knop .fb-icoon { vertical-align: -3px; margin-right: 2px; }
.knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* badge: status altijd met tekst */
.fb-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 17px;
  border: 1px solid transparent; white-space: nowrap; vertical-align: middle; }
.fb-badge--neutraal { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
.fb-badge--goed    { background: color-mix(in srgb, var(--st-good) 12%, transparent);     color: var(--st-good); }
.fb-badge--let-op  { background: color-mix(in srgb, var(--st-warning) 14%, transparent);  color: #9a6a00; }
.fb-badge--ernstig { background: color-mix(in srgb, var(--st-serious) 14%, transparent);  color: #b4542f; }
.fb-badge--kritiek { background: color-mix(in srgb, var(--st-critical) 12%, transparent); color: var(--st-critical); }
/* tabs */
.fb-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 16px; overflow-x: auto; }
.fb-tabs__tab { padding: 9px 14px; text-decoration: none; color: var(--text-secondary); font-weight: 600; border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap; }
.fb-tabs__tab:hover { color: var(--text-primary); }
.fb-tabs__tab--actief { color: var(--text-primary); border-bottom-color: var(--accent); }
/* lege staat */
.fb-leeg { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; color: var(--text-muted); text-align: center; }
.fb-leeg p { margin: 0; }
/* gegevens (lees-staat) */
.fb-gegevens { position: relative; }
.fb-gegevens dl { display: grid; gap: 10px 20px; margin: 0; }
.fb-gegevens--k1 dl { grid-template-columns: 1fr; }
.fb-gegevens--k2 dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fb-gegevens--k3 dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fb-gegevens__veld dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.fb-gegevens__veld dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.fb-gegevens__acties { position: absolute; right: 0; top: -4px; }
.fb-leegwaarde { color: var(--text-muted); }
@media (max-width: 700px) { .fb-gegevens--k2 dl, .fb-gegevens--k3 dl { grid-template-columns: 1fr; } }
/* meldingen (flash) */
.fb-meldingen { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.fb-melding { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-1); font-weight: 600; }
.fb-melding--goed   { border-color: color-mix(in srgb, var(--st-good) 40%, transparent);     background: color-mix(in srgb, var(--st-good) 8%, var(--surface-1)); }
.fb-melding--let-op { border-color: color-mix(in srgb, var(--st-warning) 45%, transparent);  background: color-mix(in srgb, var(--st-warning) 10%, var(--surface-1)); }
.fb-melding--fout   { border-color: color-mix(in srgb, var(--st-critical) 45%, transparent); background: color-mix(in srgb, var(--st-critical) 8%, var(--surface-1)); }
/* bevestigingsdialoog */
.fb-dialoog { border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; max-width: 440px; width: calc(100vw - 32px);
  background: var(--surface-1); color: var(--text-primary); box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.fb-dialoog::backdrop { background: rgba(15,20,30,.45); }
.fb-dialoog h2 { margin: 0 0 8px; font-size: 16px; }
.fb-dialoog p { margin: 0 0 14px; color: var(--text-secondary); }
.fb-dialoog__acties { display: flex; gap: 8px; justify-content: flex-end; }
/* cijfertegels */
.fb-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.fb-cijfer { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.fb-cijfer__waarde { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fb-cijfer__label { font-size: 12px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.fb-cijfer__sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
/* weeknavigatie */
.fb-weeknav { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.fb-weeknav__titel { font-weight: 700; min-width: 160px; text-align: center; }
/* filterbalk (aanvullend op .filterbalk) */
.fb-filterbalk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.fb-filterbalk__zoek { display: flex; align-items: center; gap: 6px; background: var(--surface-1); border: 1px solid var(--baseline);
  border-radius: 10px; padding: 0 10px; color: var(--text-muted); }
.fb-filterbalk__zoek input { border: 0; padding: 8px 2px; width: 220px; background: transparent; }
.fb-filterbalk__zoek input:focus { outline: none; }
.fb-filterbalk__zoek:focus-within { outline: 2px solid color-mix(in srgb, var(--series-1) 55%, transparent); }
.fb-filterbalk select, .fb-filterbalk input[type="date"] { width: auto; }
/* tijdlijn */
.fb-tijdlijn { list-style: none; margin: 0; padding: 0; }
.fb-tijdlijn__item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--grid); }
.fb-tijdlijn__icoon { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: inline-flex;
  align-items: center; justify-content: center; color: var(--text-secondary); }
.fb-tijdlijn__inhoud { flex: 1; min-width: 0; }
.fb-tijdlijn__meta { font-size: 12px; color: var(--text-muted); }
.fb-tijdlijn__tekst { margin-top: 2px; overflow-wrap: anywhere; }
/* stoplicht */
.fb-stoplicht { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; }
.fb-stoplicht i { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.fb-stoplicht--groen i  { background: var(--st-good); }
.fb-stoplicht--oranje i { background: var(--st-warning); }
.fb-stoplicht--rood i   { background: var(--st-critical); }
/* bulkbalk */
.fb-bulkbalk { position: sticky; bottom: 12px; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px;
  background: var(--text-primary); color: var(--surface-1); box-shadow: 0 10px 30px rgba(16,24,40,.25); margin-top: 12px; }
.fb-bulkbalk[hidden] { display: none; }
.fb-bulkbalk__acties { display: flex; gap: 8px; margin-left: auto; }
/* zijpaneel */
.fb-zijpaneel { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--surface-1);
  border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(16,24,40,.18); z-index: 150; display: flex; flex-direction: column; }
.fb-zijpaneel[hidden] { display: none; }
.fb-zijpaneel__kop { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.fb-zijpaneel__kop h2 { margin: 0; font-size: 16px; }
.fb-zijpaneel__sluit { border: 0; background: none; cursor: pointer; color: var(--text-secondary); padding: 4px; border-radius: 8px; }
.fb-zijpaneel__sluit:hover { background: var(--surface-2); }
.fb-zijpaneel__inhoud { padding: 16px 18px; overflow: auto; }
/* foutpagina's */
.fb-fout { max-width: 520px; margin: 48px auto; text-align: center; }
.fb-fout__icoon { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); align-items: center;
  justify-content: center; color: var(--text-secondary); margin-bottom: 10px; }
.fb-fout h1 { margin: 0 0 8px; }
.fb-fout p { color: var(--text-secondary); margin: 0 0 12px; }
.fb-fout__id code { background: var(--surface-2); padding: 2px 7px; border-radius: 6px; font-size: 13px; }
.fb-fout__acties { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }

/* ================================================================ F1.3: nieuwe kantoornavigatie (menu.py → _nav.html)
   Bouwt op de 1.x-basis (nav, .groep, .menu, .kopje, hamburger, ⌘K) en kleurt alleen anders: rustige balk, 7 werkgebieden
   (Beheer in het gebruikersmenu), hoofdschermen vet, "Meer" gedempt, geel alleen voor de actieve staat (E.10). De oude nav
   (_nav_oud.html) raakt deze regels niet: alles hangt aan .nav2. Iconen staan in het mobiele menu; op desktop alleen tekst. */
nav.nav2 { gap: 2px; padding: 8px 18px; }
nav.nav2 > a.logo { padding: 4px 10px 4px 2px; margin: 0 10px 0 0; border-radius: 10px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
nav.nav2 > a.logo:hover { background: var(--surface-2); color: var(--text-primary); }
nav.nav2 > a.logo > span { font-weight: 800; font-size: 15px; letter-spacing: -.01em; line-height: 1.1; }
nav.nav2 > a.logo .sub { display: block; font-weight: 600; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: -1px; }
nav.nav2 .nav2__groep > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
nav.nav2 .nav2__groep > span .fb-icoon { display: none; color: var(--text-muted); }
nav.nav2 .nav2__kort { display: none; }
nav.nav2 .nav2__groep > span::after { content: ""; display: none; }
nav.nav2 .nav2__groep:hover > span, nav.nav2 .nav2__groep:focus-within > span { color: var(--text-primary); background: var(--surface-2); }
nav.nav2 .nav2__groep.actief > span { color: var(--text-primary); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 -2px 0 var(--accent); }
nav.nav2 .nav2__menu { min-width: 230px; padding: 8px; border-radius: 12px; }
nav.nav2 .nav2__groep--rechts .nav2__menu { left: auto; right: 0; }
nav.nav2 .nav2__menu--breed { min-width: 480px; }
nav.nav2 .nav2__menu--breed .nav2__meer { columns: 2; column-gap: 14px; }
nav.nav2 .nav2__menu--breed .nav2__meer a { break-inside: avoid; }
nav.nav2 .nav2__hoofd a { padding: 8px 12px; border-radius: 8px; font-size: 14px; }
nav.nav2 .nav2__hoofd a b { font-weight: 700; }
nav.nav2 .nav2__hoofd a:hover { background: color-mix(in srgb, var(--series-1) 8%, transparent); }
nav.nav2 .nav2__meerkop { margin-top: 6px; padding: 8px 12px 2px; border-top: 1px solid var(--grid); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
nav.nav2 .nav2__meer a { padding: 5px 12px; font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
nav.nav2 .nav2__meer a:hover { color: var(--text-primary); background: var(--surface-2); }
nav.nav2 #snelknop { margin-left: auto; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
nav.nav2 #snelknop:hover { color: var(--text-primary); border-color: var(--baseline); }
nav.nav2 .nav2__gebruiker > span { font-weight: 600; }
nav.nav2 .nav2__gebruiker > span .fb-icoon { display: inline-block; }
nav.nav2 .nav2__gebruiker .nav2__hoofd a { font-size: 13.5px; }
nav.nav2 .navbadge { margin-left: 2px; }
nav.nav2 .nav2__uit { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--grid); }
nav.nav2 .nav2__uit a { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 1500px) {
  nav.nav2 #snelknop .snel-tekst { display: none; }
}
@media (max-width: 1300px) {
  nav.nav2 .nav2__lang { display: none; }
  nav.nav2 .nav2__kort { display: inline; }
  nav.nav2 .nav2__groep > span { padding: 8px 9px; font-size: 13px; }
  nav.nav2 #snelknop .snel-kort { display: none; }
}
@media (max-width: 760px) {
  nav.nav2 { padding: 8px 12px; }
  nav.nav2 > a.logo, nav.nav2.open > a.logo { display: flex; width: auto; margin: 0 auto 0 0; padding: 2px 6px 2px 0; }
  nav.nav2 .nav2__lang { display: inline; }
  nav.nav2 .nav2__kort { display: none; }
  nav.nav2 .nav2__groep > span .fb-icoon { display: inline-block; }
  nav.nav2.open > .nav2__groep > span { display: flex; width: 100%; box-sizing: border-box; padding: 13px 14px; font-size: 15px; border-radius: 10px; }
  nav.nav2 .nav2__groep > span::after { display: inline; content: " ▾"; font-size: 10px; opacity: .5; margin-left: auto; }
  nav.nav2 .nav2__groep.open > span::after { content: " ▴"; }
  nav.nav2 .groep.open .nav2__menu { display: block !important; min-width: 0; }
  nav.nav2 .nav2__groep--rechts .nav2__menu { left: 0; right: auto; }
  nav.nav2 .nav2__menu--breed .nav2__meer { columns: 1; }
  nav.nav2 #snelknop { order: 0; margin: 0 6px 0 0; padding: 8px 10px; }
  nav.nav2 .hap { order: 1; }
  nav.nav2 > .nav2__groep, nav.nav2 > .nav-rechts { order: 2; }
  nav.nav2 #snelknop .snel-tekst, nav.nav2 #snelknop .snel-kort { display: none; }
  nav.nav2.open #snelknop { order: 3; width: 100%; justify-content: center; margin: 6px 0; }
  nav.nav2.open #snelknop .snel-tekst { display: inline; }
}

/* ================================================================ F1.4: eerste schermen in het nieuwe jasje (dashboard, lijst, formulier)
   Generieke fb-klassen die in de volgende schermgroepen opnieuw gebruikt worden (rijen, hulpklassen, inklapbare secties,
   tegels, actielijst, briefjes, formulierraster, lees-staat) plus een klein, aan .dash verankerd blok voor wat alleen het
   dashboard nodig heeft. Bestaande lokale klassen in andere templates (.sectie, .tegel, .paneel, .vrij, .grid2) blijven
   onaangeraakt: niets hier is ongescoped onder die namen gedefinieerd. */
:root {
  --briefje-geel: #fbe9a6; --briefje-rood: #f9cdc7; --briefje-blauw: #c7e0f7; --briefje-groen: #c9ecc4; --briefje-roze: #f7cfdd;
  --briefje-tekst: #1f2533;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --briefje-geel: #5a4a14; --briefje-rood: #5c2a26; --briefje-blauw: #243a52; --briefje-groen: #27452a; --briefje-roze: #4d2a38;
    --briefje-tekst: #f2f4f7;
  }
}
/* hulpklassen (tekst) */
.fb-klein { font-size: 12px; }
.fb-gedempt { color: var(--text-muted); }
.fb-sec { color: var(--text-secondary); }
.fb-vet { font-weight: 700; }
.fb-rechts { text-align: right; }
.fb-nowrap { white-space: nowrap; }
.fb-tabular { font-variant-numeric: tabular-nums; }
.fb-kritiek { color: var(--st-critical); font-weight: 700; }
.fb-letop { color: var(--st-warning-tekst); font-weight: 700; }
.fb-goed { color: var(--delta-good); font-weight: 700; }
.fb-subkop { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; }
.fb-voetnoot { font-size: 11.5px; color: var(--text-muted); margin: 8px 0 0; line-height: 1.5; }
.fb-ruimte-boven { margin-top: 12px; }
.fb-kaart__kop--vervolg { margin-top: 18px; }
.knop.stil.fb-kritiek { color: var(--st-critical); border-color: color-mix(in srgb, var(--st-critical) 40%, transparent); }
.knop.stil.fb-kritiek:hover { color: var(--st-critical); border-color: var(--st-critical); }
.fb-uitleg { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0 0 8px; max-width: 760px; }
/* rij: één regel met losse delen, rechts uitgelijnde acties (vervangt de 'display:flex;gap:10px;…border-top' inline-rijen) */
.fb-rij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--grid); }
.fb-rij:first-child { border-top: 0; }
.fb-rij--basis { align-items: baseline; }
.fb-rij--blok { display: block; }
.fb-rij__rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-rij form { margin: 0; }
.fb-rij__breed { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.fb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px;
  background: var(--surface-1); color: inherit; text-decoration: none; font-size: 13px; }
a.fb-chip:hover { border-color: var(--baseline); }
.fb-chip--letop { border-color: var(--st-warning); font-weight: 700; }
.fb-chip--kritiek { border-color: var(--st-critical); }
.fb-stip { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: var(--grid); flex: none; }
.fb-stip--goed { background: var(--st-good); } .fb-stip--letop { background: var(--st-warning); }
.fb-stip--ernstig { background: var(--st-serious); } .fb-stip--kritiek { background: var(--st-critical); }
/* zonekop: rustige scheiding tussen groepen secties */
.fb-zonekop { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  margin: 24px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--grid); }
.fb-groepkop { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin: 12px 4px 6px; }
/* inklapbare sectie (<details>): standaard dicht, urgent = accentbalk links + open */
details.fb-sectie { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
details.fb-sectie > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px; list-style: none; display: flex;
  align-items: center; gap: 9px; }
details.fb-sectie > summary::-webkit-details-marker { display: none; }
details.fb-sectie > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg); flex: none; margin: 0 4px 0 2px; transition: transform .12s; }
details.fb-sectie[open] > summary::before { transform: rotate(45deg); }
details.fb-sectie > summary .fb-badge { margin-left: auto; }
details.fb-sectie > .fb-sectie__binnen { padding: 0 16px 14px; }
details.fb-sectie--urgent { border-left: 4px solid var(--st-critical); }
details.fb-sectie .kaart { border: 0; box-shadow: none; padding: 0; background: transparent; }
/* tegels: klikbare samenvatting met icoon, getal en voetregel */
.fb-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.fb-tegel { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 14px; padding: 13px 15px 10px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
a.fb-tegel:hover { border-color: var(--baseline); }
.fb-tegel__kop { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.fb-tegel__kop > div { min-width: 0; }
.fb-tegel__icoon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-secondary); }
.fb-tegel__label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.fb-tegel__sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.fb-tegel__waarde { font-size: 24px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
.fb-tegel--urgent .fb-tegel__waarde { color: var(--st-critical); }
.fb-tegel__voet { border-top: 1px dashed var(--grid); margin-top: auto; padding-top: 7px; font-size: 11px; color: var(--text-muted); min-height: 16px; margin-top: 10px; }
.fb-tegel__knoppen { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fb-tegel__knoppen .knop { flex: 1; text-align: center; }
/* actielijst: regels die naar een sectie of pagina springen (icoon · wat · teller · pijl) */
.fb-actie { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: inherit; cursor: pointer; }
.fb-actie:hover { background: var(--surface-2); }
.fb-actie__icoon { width: 26px; text-align: center; flex: none; color: var(--text-muted); display: inline-flex; justify-content: center; }
.fb-actie__wat { flex: 1; font-weight: 600; min-width: 0; }
.fb-actie__wat small { display: block; font-weight: 400; color: var(--text-muted); font-size: 11.5px; }
.fb-actie__tel { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.fb-actie__pijl { color: var(--text-muted); opacity: 0; }
.fb-actie:hover .fb-actie__pijl { opacity: 1; }
.fb-actie--urgent { border-left: 3px solid var(--st-critical); background: color-mix(in srgb, var(--st-critical) 5%, transparent); }
.fb-actie--urgent .fb-actie__tel, .fb-actie--urgent .fb-actie__icoon { color: var(--st-critical); }
/* briefjes (prikbord) op tokens */
.fb-briefjes { display: flex; flex-direction: column; gap: 8px; }
.fb-briefje { display: block; text-decoration: none; color: var(--briefje-tekst); border-radius: 8px; padding: 10px 12px; background: var(--briefje-geel); }
.fb-briefje--rood { background: var(--briefje-rood); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--st-critical) 60%, transparent); }
.fb-briefje--blauw { background: var(--briefje-blauw); } .fb-briefje--groen { background: var(--briefje-groen); } .fb-briefje--roze { background: var(--briefje-roze); }
.fb-briefje__tag { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; margin: 0 4px 4px 0;
  background: color-mix(in srgb, var(--briefje-tekst) 82%, transparent); color: var(--surface-1); }
.fb-briefje__tag--urgent { background: var(--st-critical); color: #fff; }
.fb-briefje__tekst { font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.fb-briefje__meta { font-size: 10.5px; opacity: .6; margin-top: 6px; }
/* twee kolommen */
.fb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 900px) { .fb-grid2 { grid-template-columns: 1fr; } }
/* legenda + grafiekteksten (SVG uit JS) */
.fb-legenda { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; flex-wrap: wrap; }
.fb-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--grid); }
.fb-legenda i.fb-legenda--s1 { background: var(--series-1); } .fb-legenda i.fb-legenda--s2 { background: var(--series-2); }
.fb-legenda i.fb-legenda--s3 { background: var(--series-3); } .fb-legenda i.fb-legenda--s4 { background: var(--series-4); }
.fb-grafiek svg text { font: 11px system-ui, -apple-system, "Segoe UI", sans-serif; fill: var(--text-muted); }
.fb-grafiek svg .dlabel { fill: var(--text-secondary); font-weight: 600; }
.fb-tooltip { position: fixed; pointer-events: none; z-index: 10; display: none; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.fb-tooltip b { display: block; margin-bottom: 2px; }
.fb-status-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fb-status-item { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.fb-status-item .n { font-size: 20px; font-weight: 700; }
.fb-status-item .t { font-size: 11px; color: var(--text-secondary); }
@media (max-width: 760px) { .fb-status-rij { grid-template-columns: 1fr 1fr; } }
/* formulierraster (open-staat) + sticky opslaanbalk; lees-staat = .fb-gegevens (F1.2) */
.fb-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
.fb-veld { min-width: 0; }
.fb-formgrid .fb-veld--breed, .fb-formgrid .fb-opslaanbalk { grid-column: 1 / -1; }
.fb-veld__hint { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.fb-veld__toelichting { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.fb-veld--kort input, .fb-veld--kort select { width: auto; min-width: 120px; }
.fb-veld__groep { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-veld__groep > select { flex: 1; min-width: 220px; }
.fb-veld__groep > input { width: 90px; }
.fb-opslaanbalk { position: sticky; bottom: 0; background: var(--surface-1); padding: 12px 0 2px; margin-top: 14px; border-top: 1px solid var(--grid);
  display: flex; gap: 8px; align-items: center; }
.fb-formulier { max-width: 820px; }
.fb-formulier.fb-ruimte-boven { margin-top: 16px; }
.fb-gegevens__veld--breed { grid-column: 1 / -1; }
.fb-prewrap { white-space: pre-wrap; }
.fb-sticker { margin-top: 4px; width: 220px; font-size: 20px; font-weight: 800; }
.fb-gegevens__acties { display: flex; gap: 6px; }
.fb-gegevens dl { margin-top: 2px; }
.fb-gegevens--metacties dl { padding-right: 120px; }
@media (max-width: 700px) { .fb-formgrid { grid-template-columns: 1fr; } .fb-gegevens--metacties dl { padding-right: 0; padding-top: 34px; } }
/* lijstpagina: kop + telling, filterknoppen, tabel in een kaart zonder binnenmarge */
.fb-telling { color: var(--text-muted); font-weight: 500; font-size: 15px; }
.fb-kaart--tabel { padding: 0; overflow-x: auto; }
.fb-kaart--balk { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 14px; margin-bottom: 12px; }
.fb-kaart--balk input[type="text"] { width: 80px; text-align: right; }
.fb-filterlabel { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.fb-keuzeknoppen { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.fb-groepsregel td { background: var(--surface-2); border-top: 2px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 7px 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.fb-groepsregel td span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.fb-kolomtotaal { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; padding: 13px 16px; border-top: 1.5px solid var(--grid); font-size: 13.5px; }
.fb-kolomtotaal b { font-size: 15px; }
.fb-tag { display: inline-block; border-radius: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; margin-left: 6px; white-space: nowrap;
  background: color-mix(in srgb, var(--series-3) 18%, transparent); color: var(--series-3); }
.fb-tag--letop { background: color-mix(in srgb, var(--st-warning) 18%, transparent); color: var(--st-warning-tekst); }
.fb-uitrusting { white-space: nowrap; display: inline-flex; gap: 6px; }
.fb-uitrusting .fb-badge { font-size: 10.5px; padding: 0 6px; line-height: 16px; }
.fb-uitrusting .fb-uitrusting--uit { opacity: .25; }
table.lijst td.fb-cel-breed { max-width: 220px; }
.fb-tekstknop { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--link); }
.fb-tekstknop:hover { text-decoration: underline; }
.fb-tekstknop--kritiek { color: var(--st-critical); font-size: 11.5px; }
.fb-tekstknop--omlijnd { border: 1px solid var(--grid); border-radius: 6px; padding: 2px 9px; font-size: 11.5px; }
.fb-tekstknop--goed { border: 1px solid color-mix(in srgb, var(--delta-good) 45%, var(--border)); background: color-mix(in srgb, var(--delta-good) 10%, var(--surface-1));
  color: var(--delta-good); border-radius: 6px; padding: 2px 9px; font-size: 11.5px; }
.fb-uitklaprij > td { padding: 4px 10px 14px; }
.fb-uitklaprij table.fb-subtabel { width: auto; font-size: 12.5px; border: 1px solid var(--grid); border-radius: 8px; margin-bottom: 12px; }
.fb-uitklaprij table.fb-subtabel th { padding: 5px 14px; border-bottom: 1px solid var(--grid); }
.fb-uitklaprij table.fb-subtabel td { padding: 4px 14px; border: 0; }
.fb-inline { display: inline; margin: 0 4px 0 0; }
.fb-help { cursor: help; }
.fb-inlineform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.fb-inlineform--onder { margin-bottom: 16px; }
.fb-inlineform select { min-width: 230px; width: auto; }
.fb-inlineform input[type="text"], .fb-inlineform input[type="email"], .fb-inlineform input[type="date"] { width: auto; }
.fb-inlineform .fb-breed { min-width: 220px; }
.fb-inlineform .fb-smal { width: 76px; }
.fb-inlineform label.fb-vink { display: flex; gap: 5px; align-items: center; margin: 0; }
.fb-inlineform label.fb-vink input { width: auto; }
.fb-huurblok { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.fb-huurblok .fb-inlineform { font-size: 12.5px; color: var(--text-muted); }
details.fb-uitklap { margin-top: 10px; }
details.fb-uitklap > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--border); border-radius: 9px; padding: 6px 13px; background: var(--surface-1); user-select: none; }
details.fb-uitklap > summary::-webkit-details-marker { display: none; }
details.fb-uitklap[open] > summary { border-color: var(--st-warning); color: var(--st-warning-tekst); }
/* de bewonerstabel onder een huis (uit lijst.html, één keer centraal) */
table.bewoners { width: auto; font-size: 12.5px; border: 1px solid var(--grid); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
table.bewoners th { padding: 6px 16px 6px 12px; border: 0; border-bottom: 1px solid var(--grid); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap; text-align: left; }
table.bewoners td { padding: 7px 16px 7px 12px; border: 0; border-top: 1px solid var(--grid); vertical-align: middle; }
table.bewoners tr:nth-child(2) td { border-top: 0; }
table.bewoners tr.fb-gedempt td { color: var(--text-muted); }
table.bewoners .merk { margin-top: 3px; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
table.bewoners .merk span { display: inline-block; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--grid); background: var(--surface-2, var(--page)); font-weight: 700; }
table.bewoners .merk.zacht a { color: var(--text-muted); text-decoration: underline; }
table.bewoners td.acties { text-align: right; white-space: nowrap; padding-left: 24px; }
table.bewoners td.acties form { display: inline; margin: 0; }
table.bewoners td.acties button, table.bewoners td.acties a.doe { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--text-muted); cursor: pointer; text-decoration: none; }
table.bewoners td.acties button.goed { color: var(--delta-good); }
table.bewoners td.acties button.urgent, table.bewoners td.acties a.doe.urgent { color: var(--st-critical); }
table.bewoners td.acties button.letop { color: var(--st-warning-tekst); }
table.bewoners td.acties button:hover, table.bewoners td.acties a.doe:hover { text-decoration: underline; }
table.bewoners td.acties button:not(.goed):not(.urgent):not(.letop):hover { color: var(--text-secondary); }
table.bewoners td.acties .scheid { color: var(--grid); padding: 0 6px; font-weight: 400; }
table.bewoners td.acties .stil { opacity: .55; transition: opacity .15s; }
table.bewoners tr:hover td.acties .stil { opacity: 1; }
table.bewoners input[type=text] { border: 1px solid var(--grid); border-radius: 6px; background: transparent; width: 62px; text-align: right; padding: 2px 5px; font-size: 12px; }
table.bewoners input[type=text]:focus { border-color: var(--text-muted); }
table.bewoners td.fb-rechts form { margin: 0; }
/* alleen op de lijstpagina (lijst.html): bewerk-links rechts verschijnen bij aanwijzen; mobiel eerste kolom vast */
.fb-kaart--tabel table.lijst > tbody > tr > td:last-child .rijlink { opacity: .3; transition: opacity .15s; }
.fb-kaart--tabel table.lijst > tbody > tr:hover > td:last-child .rijlink { opacity: 1; }
.fb-kaart--tabel table.lijst > tbody > tr > td:last-child .label.rood { opacity: 1; }
.hs { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; border-radius: 99px; padding: 3px 11px; white-space: nowrap; }
.hs.goed { background: color-mix(in srgb, var(--delta-good) 14%, transparent); color: var(--delta-good); }
.hs.slecht { background: color-mix(in srgb, var(--st-critical) 13%, transparent); color: var(--st-critical); }
.hs.grijs { background: var(--grid); color: var(--text-muted); font-weight: 700; }
.vrijtel { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
@media (max-width: 900px) {
  .fb-kaart--tabel table.lijst th:first-child, .fb-kaart--tabel table.lijst td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface-1);
    box-shadow: 6px 0 10px -7px rgba(0,0,0,.35); max-width: 170px; }
  .fb-kaart--tabel table.lijst thead th:first-child { z-index: 3; }
  .fb-kaart--tabel table.lijst tr.fb-groepsregel td, .fb-kaart--tabel table.lijst tr[id^="det_"] td, .fb-kaart--tabel table.lijst tr[id^="team_"] td,
  .fb-kaart--tabel table.lijst tr[id^="loc_"] td { position: static; box-shadow: none; }
}
/* ---- dashboard-eigen (alleen onder .dash) ---- */
.dash .dash__hoofd { min-width: 0; }
.dash .dash__rooster { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .dash .dash__rooster { grid-template-columns: minmax(0, 1fr); } }
.dash .kaart { margin-bottom: 16px; }
.dash .paneel-leeg { display: none; color: var(--text-muted); font-size: 13px; padding: 8px 4px; }
.dash .paneel-leeg:only-child { display: block; }
.dash .dash__zijbalk .fb-kaart__kop { display: flex; align-items: center; gap: 7px; font-size: 14.5px; }
.dash .dash__zijbalk .fb-kaart__kop a { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.dash .dash__zijbalk .fb-kaart__kop a:hover { color: var(--text-primary); text-decoration: underline; }
.dash .agenda__rij { display: flex; gap: 10px; padding: 5px 0; border-top: 1px solid var(--grid); font-size: 13px; }
.dash .agenda__rij:first-of-type { border-top: 0; }
.dash .agenda__dag { min-width: 72px; font-weight: 700; color: var(--text-muted); }
.dash .agenda__dag--vandaag { color: var(--st-critical); }
.dash .agenda__tijd { min-width: 42px; color: var(--text-muted); }
.dash .agenda__tekst { flex: 1; }
.dash .focus__item { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px 28px; position: relative; }
.dash .focus__item:hover { border-color: var(--baseline); }
.dash .focus__titel { font-weight: 700; font-size: 14px; }
.dash .focus__eisen { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.dash .focus__meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.dash .focus__hoog { float: right; }
.dash .focus__kaart { position: relative; margin-top: 8px; }
.dash .focus__weg { position: absolute; right: 8px; bottom: 7px; margin: 0; line-height: 1; }
.dash .focus__weg button { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-muted); border-radius: 6px; width: 24px; height: 22px; padding: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dash .focus__weg button:hover { border-color: var(--st-critical); color: var(--st-critical); }
.dash .cfknop { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 11px; padding: 0; }
.dash .cfknop:hover { border-color: var(--baseline); }
.dash .cfknop.aan { background: var(--accent); border-color: var(--accent); color: var(--op-accent); font-weight: 700; }
.dash .cijferrij { margin-left: auto; display: flex; gap: 3px; align-items: center; }
.dash .scpunt { border: 1px solid var(--border); background: none; border-radius: 999px; padding: 3px 11px; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--text-muted); }
.dash .scpunt:hover { border-color: var(--delta-good); }
.dash .scpunt.aan { background: color-mix(in srgb, var(--delta-good) 18%, transparent); border-color: var(--delta-good); color: var(--delta-good); font-weight: 700; }
.dash .scpunten { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.dash .datumveld { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); margin: 0; font-weight: 400; }
.dash .datumveld input { font: inherit; font-size: 11.5px; padding: 2px 5px; border: 1px solid var(--border); border-radius: 7px; background: none; color: var(--text-primary); width: auto; }
.dash select.fb-smal { max-width: 230px; width: auto; font-size: 12.5px; padding: 4px 7px; margin-left: auto; }
.dash .inschrijf__acties { display: flex; gap: 8px; align-items: center; margin-left: auto; white-space: nowrap; }
.dash .resdlg label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin: 0; }
.dash .resdlg label + label { margin-top: 8px; }
.dash .resdlg select, .dash .resdlg input { margin-top: 4px; width: 100%; }
.dash .snelstartknop { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dash .kpis { margin-bottom: 16px; }
.dash .dash__actie { border-color: color-mix(in srgb, var(--st-critical) 40%, var(--border)); background: color-mix(in srgb, var(--st-critical) 4%, var(--surface-1)); }
@media (max-width: 760px) {
  .fb-kop { flex-wrap: wrap; gap: 10px; }
  .fb-kop__acties { flex: 1 1 100%; justify-content: flex-start; }
  .fb-kop__acties .zoek { flex: 1 1 100%; }
  .fb-kop__acties .fb-filterbalk__zoek input { width: 100%; }
  .fb-kop__acties .fb-filterbalk__zoek { display: flex; }
  details.fb-sectie > .fb-sectie__binnen { overflow-x: auto; }
  .dash .inschrijf__acties { white-space: normal; flex-wrap: wrap; margin-left: 0; flex-basis: 100%; }
  .fb-tegels { grid-template-columns: 1fr 1fr; gap: 9px; }
  .fb-tegel { padding: 11px 12px 8px; }
  .fb-tegel__waarde { font-size: 20px; }
  .fb-tegel__icoon { width: 30px; height: 30px; border-radius: 8px; }
  .dash .cijferrij { margin-left: 0; flex-basis: 100%; }
}

/* ================================================================ F1.5: geld- en backofficepagina's (urencheck, facturatie, factuur,
   marge, voorschotten, voorschotaanvragen) in de componentlaag. Alleen schil: berekeningen, formulieren (namen, acties, hidden
   inputs), bevestigingen en JS-ids zijn ongewijzigd. Generiek herbruikbaar: weekblokken, vinklijst, detailkaart, inline
   bewerkregel, factuurvel, statusbadges per factuurstatus. Instellingenformulieren staan in details.fb-sectie (dicht). */
.fb-normaal { font-weight: 400; }
.fb-ruimte-onder { margin-bottom: 12px; }
.fb-strak { margin: 0; }
.fb-blok { display: block; margin-top: 2px; }
.fb-ruimte-klein { margin-top: 3px; }
.fb-weekblokken { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.fb-weekblokken a { text-decoration: none; border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 12px;
  color: var(--text-secondary); background: var(--surface-1); font-variant-numeric: tabular-nums; }
.fb-weekblokken a:hover { border-color: var(--baseline); }
.fb-weekblokken a.fb-weekblok--nu { border-color: var(--accent); color: var(--text-primary); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
.fb-weekblokken a.fb-weekblok--vol { background: color-mix(in srgb, var(--st-good) 12%, transparent); }
.fb-weeknav__voortgang { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.fb-weeknav__voortgang.klaar { color: var(--delta-good); }
.fb-weeknav__sub { color: var(--text-muted); font-size: 12px; }
.fb-weeknav .fb-weeknav__titel { min-width: 0; text-align: left; font-size: 15px; }
/* vinklijst: één regel per klant, afvinken links, cijfers rechts */
table.fb-vinklijst { width: 100%; border-collapse: collapse; }
table.fb-vinklijst td { padding: 9px 10px; font-size: 14px; border-bottom: 1px solid var(--grid); vertical-align: top; }
table.fb-vinklijst tr:hover td { background: color-mix(in srgb, var(--series-1) 5%, transparent); }
table.fb-vinklijst input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--st-good); cursor: pointer; }
table.fb-vinklijst tr.binnen td { color: var(--text-muted); }
table.fb-vinklijst tr.binnen .naam a { color: var(--text-muted); }
table.fb-vinklijst td.fb-vink { width: 34px; }
table.fb-vinklijst .scheider td { padding: 18px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border); }
table.fb-vinklijst .scheider:hover td { background: transparent; }
table.fb-vinklijst td.tijd { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
table.fb-vinklijst .fb-rijacties { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-left: 8px; font-size: 11.5px; }
table.fb-vinklijst .fb-rijacties .rijlink, table.fb-vinklijst .fb-rijacties label { font-size: 11.5px; cursor: pointer; margin: 0; font-weight: 500; color: var(--link); display: inline-flex; gap: 3px; align-items: center; }
table.fb-vinklijst tr.fb-uitklaprij > td { padding: 4px 10px 12px; }
table.fb-vinklijst tr.fb-uitklaprij:hover > td { background: transparent; }
/* detailkaart: rustige kaart in een uitklaprij; gereedschap pas zichtbaar bij aanwijzen */
.fb-detailkaart { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 10px; padding: 10px 12px; }
.fb-detailkaart table { width: auto; border: 0; }
.fb-detailkaart th { padding: 4px 14px 6px 0; border-bottom: 1px solid var(--grid); font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .4px; text-align: left; }
.fb-detailkaart th.r, .fb-detailkaart td.r { text-align: right; }
.fb-detailkaart td { padding: 5px 14px 5px 0; border: 0; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.fb-detailkaart tr:hover td { background: color-mix(in srgb, var(--grid) 30%, transparent); }
.fb-detailkaart .fb-pas { display: flex; gap: 4px; align-items: center; margin: 0; opacity: .45; transition: opacity .12s; }
.fb-detailkaart tr:hover .fb-pas { opacity: 1; }
.fb-detailkaart .fb-pas input { width: 44px; font-size: 11.5px; padding: 2px 6px; text-align: right; }
.fb-detailkaart .fb-pas input[name=uren] { width: 62px; }
.fb-detailkaart .fb-pas .knop { padding: 2px 9px; font-size: 11.5px; }
.fb-detailkaart .fb-ruim { padding-right: 22px; }
.fb-detailvoet { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.fb-detailvoet--goed { font-size: 13px; font-weight: 600; color: var(--st-good); }
.fb-toevoegregel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px; }
.fb-toevoegregel select, .fb-toevoegregel input { width: auto; font-size: 12.5px; }
.fb-toevoegregel select { width: 220px; } .fb-toevoegregel input[name=uren] { width: 130px; } .fb-toevoegregel input[name=dagen] { width: 80px; } .fb-toevoegregel input[name=reiskm] { width: 100px; }
.fb-toevoegregel .fb-plus { font-size: 15px; color: var(--st-good); font-weight: 700; }
/* waarschuwings- en foutblokken binnen een kaart (status altijd met tekst) */
.fb-let-op { margin-top: 9px; padding: 8px 12px; border-radius: 8px; font-size: 12px; background: color-mix(in srgb, var(--st-warning) 12%, transparent); }
.fb-let-op b { color: var(--st-warning-tekst); }
.fb-let-op--kritiek { background: color-mix(in srgb, var(--st-critical) 11%, transparent); color: var(--st-critical); font-weight: 600; font-size: 12.5px; }
.fb-let-op--kritiek span { font-weight: 400; }
.fb-let-op--goed { background: color-mix(in srgb, var(--st-good) 12%, transparent); color: var(--delta-good); font-weight: 600; }
.fb-melding--info { border-color: color-mix(in srgb, var(--series-1) 45%, transparent); background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); }
.fb-knoppenrij { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fb-knoppenrij--midden { justify-content: center; margin: 16px 0 4px; }
.fb-knop--groot { padding: 12px 26px; font-size: 14px; }
/* factuurvel: het factuurvoorbeeld (print-vriendelijk) */
.fb-factuurvel { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 36px 42px; max-width: 760px; margin: 0 auto; }
.fb-factuurvel__kop { display: flex; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.fb-factuurvel__kop h1 { font-size: 26px; margin: 0; }
.fb-factuurvel__nr { color: var(--text-muted); }
.fb-factuurvel__adres { line-height: 1.5; }
.fb-factuurvel__adres--rechts { text-align: right; }
.fb-factuurvel__meta { margin: 18px 0 26px; display: grid; grid-template-columns: auto auto; gap: 2px 24px; width: max-content; font-size: 13px; }
.fb-factuurvel__meta dt { color: var(--text-muted); }
.fb-factuurvel__meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.fb-factuurvel__meta dd.fb-prewrap { white-space: pre-line; }
table.fb-factuurregels { width: 100%; }
table.fb-factuurregels td:nth-child(2), table.fb-factuurregels td:nth-child(3), table.fb-factuurregels td:nth-child(4),
table.fb-factuurregels th:nth-child(2), table.fb-factuurregels th:nth-child(3), table.fb-factuurregels th:nth-child(4) { text-align: right; white-space: nowrap; }
table.fb-factuurregels tr.fb-kritiek td { color: var(--st-critical); font-weight: 600; }
table.fb-factuurregels td.fb-regelacties { width: 1%; white-space: nowrap; }
table.fb-factuurregels tr.fb-bewerkrij > td { background: color-mix(in srgb, var(--st-warning) 6%, transparent); }
.fb-factuurtotalen { margin-top: 8px; margin-left: auto; width: max-content; display: grid; grid-template-columns: auto auto; gap: 4px 28px; font-variant-numeric: tabular-nums; }
.fb-factuurtotalen .t { font-weight: 700; font-size: 16px; border-top: 2px solid var(--text-primary); padding-top: 6px; }
.fb-factuurtotalen .fb-g { padding-top: 6px; }
.fb-factuurvel__betaal { margin-top: 30px; color: var(--text-secondary); font-size: 13px; }
.fb-bewerkblok { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin: 14px 0; padding: 12px; border: 1px dashed var(--border); border-radius: 9px; font-size: 13px; }
.fb-bewerkblok--strak { margin: -12px 0 22px; padding: 10px 12px; }
.fb-bewerkblok--rij { align-items: center; margin: 0 0 14px; padding: 10px 12px; }
.fb-bewerkblok label { font-size: 11px; color: var(--text-muted); margin: 0 0 3px; }
.fb-bewerkblok .fb-v-breed { flex: 2; min-width: 220px; } .fb-bewerkblok .fb-v-breed input { width: 100%; }
.fb-bewerkblok .fb-v-80 { width: 80px; } .fb-bewerkblok .fb-v-90 { width: 90px; } .fb-bewerkblok .fb-v-110 { width: 110px; }
.fb-bewerkblok input[name=pct] { width: 70px; }
.fb-bewerkblok .fb-vink { flex-basis: 100%; font-size: 12px; display: flex; gap: 7px; align-items: flex-start; margin-top: 2px; font-weight: 400; color: var(--text-primary); }
.fb-bewerkblok .fb-vink input { width: auto; margin-top: 2px; }
.fb-bewerkblok .fb-vink--inline { flex-basis: auto; align-items: center; font-size: 12.5px; }
.fb-bewerkblok .fb-vink--inline input { width: 16px; height: 16px; margin: 0; }
.fb-bewerkblok--snel { display: block; }
.fb-snelrij { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 9px 0 2px; }
.fb-snelrij select { width: auto; max-width: 230px; } .fb-snelrij input { width: 110px; }
.fb-snelgroep { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.fb-snelgroep__kop { flex: none; width: 96px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.fb-snelgroep .knop.stil { padding: 5px 11px; font-size: 12px; }
.fb-snelgroep input { padding: 5px 8px; font-size: 12px; width: 72px; }
.fb-ikoonknop { border: 0; background: none; cursor: pointer; font: inherit; padding: 0 4px; color: var(--text-secondary); display: inline-flex; align-items: center; }
.fb-ikoonknop:hover { color: var(--text-primary); }
.fb-ikoonknop--kritiek { color: var(--st-critical); }
.fb-ikoonknop--kritiek:hover { color: var(--st-critical); }
.fb-proefmail { display: flex; gap: 4px; align-items: center; }
.fb-proefmail input { width: 190px; font-size: 12px; padding: 7px 8px; }
@media print {
  nav, .geen-print, #snelextra, #melddoos, #auditzweef, #doszweef, #appzweef, #kchatzweef { display: none !important; }
  body { background: #fff; }
  .fb-factuurvel { border: 0; padding: 0; }
  main { padding: 0; }
}
/* facturatie: maakformulieren naast elkaar, statusbadges per factuurstatus */
.fb-maakvorm { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fb-maakvorm label { margin: 0 0 4px; }
.fb-maakvorm select, .fb-maakvorm input { width: auto; }
.fb-maakvorm .fb-v-week { width: 64px; } .fb-maakvorm .fb-v-jaar { width: 84px; } .fb-maakvorm .fb-v-iban { width: 230px; }
.fb-maakvorm .fb-v-breed { flex: 2; min-width: 240px; } .fb-maakvorm .fb-v-breed input { width: 100%; }
.fb-maakvorm--zip { margin-left: auto; }
.fb-gaten { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-snelstart { font-size: 11px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.fb-snelstart--goed { color: var(--delta-good); } .fb-snelstart--kritiek { color: var(--st-critical); }
.fb-sectie--instelling > summary { font-size: 13.5px; }
.fb-archiefkop { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.fb-archiefkop h2 { margin: 0; font-size: 17px; }
/* marge */
.fb-marge-basis { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--border); white-space: nowrap; }
.fb-marge-basis.werkelijk { color: var(--delta-good); border-color: var(--delta-good); }
.fb-marge-basis.gemengd { color: #9a6a00; border-color: var(--st-warning); }
.fb-marge-basis.geschat { color: var(--st-critical); border-color: var(--st-critical); }
table.fb-compact td, table.fb-compact th { font-size: 12.5px; }
.fb-kaart--tabel .fb-kaart__kop--binnen { padding: 14px 16px 0; margin-bottom: 8px; }
.fb-kaart--tabel .fb-uitleg--binnen { padding: 0 16px; }
.fb-kaart--tabel .fb-leeg { padding: 20px 16px; }
table.fb-compact table.fb-compact { margin: 6px 0 4px 12px; }
.fb-cijfer--accent { box-shadow: inset 0 0 0 1.5px var(--series-1); }
.fb-cijfer--let-op { box-shadow: inset 0 0 0 1.5px var(--st-warning); }
.fb-cijfers--klein .fb-cijfer__waarde { font-size: 20px; }
.fb-parform { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; font-size: 12.5px; }
.fb-parform label { margin: 0; } .fb-parform input[type=text] { width: 80px; margin-top: 3px; }
.fb-inlineform input.fb-v-70 { width: 70px; } .fb-inlineform input.fb-v-52 { width: 52px; }
details.fb-sectie--let-op { border-left: 4px solid var(--st-warning); }
/* voorschotten */
table.fb-geldtabel { width: 100%; border-collapse: collapse; }
table.fb-geldtabel td, table.fb-geldtabel th { padding: 8px 10px; font-size: 13.5px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
table.fb-geldtabel th { font-size: 11px; }
table.fb-geldtabel td.b, table.fb-geldtabel th.b { text-align: right; font-variant-numeric: tabular-nums; }
table.fb-geldtabel tr.zwak td { color: var(--text-muted); }
table.fb-geldtabel tr.fb-totaal td { font-weight: 700; border-top: 2px solid var(--border); }
table.fb-geldtabel td input[type=text] { width: 90px; text-align: right; }
table.fb-geldtabel--controle td, table.fb-geldtabel--controle th { padding: 7px 8px; font-size: 13px; white-space: normal; }
table.fb-geldtabel .fb-tekstknop { color: var(--text-muted); }
.fb-tweekol { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 1000px) { .fb-tweekol { grid-template-columns: 1fr; } }
.fb-tweekol .kaart { margin-bottom: 0; }
.fb-tweekol__kolom { display: flex; flex-direction: column; gap: 12px; }
.fb-kaart__kop--rij { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fb-kaart__kop--rij form { margin: 0; }
.fb-kaart__kop--rij .knop { font-weight: 600; }
.fb-tariefform { display: flex; gap: 8px; align-items: center; margin: 0; }
.fb-tariefform label { margin: 0; font-size: 12px; } .fb-tariefform input { width: 80px; }
.fb-bestandform input[type=file] { flex: 1; min-width: 200px; }
.fb-regform { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.fb-regform .fb-v-fw { flex: 2; min-width: 200px; } .fb-regform .fb-v-110 { width: 110px; } .fb-regform .fb-v-130 { width: 130px; } .fb-regform .fb-v-150 { width: 150px; }
.fb-regform .fb-v-oms { flex: 2; min-width: 160px; }
.fb-regform label { margin-top: 0; }
/* voorschotaanvragen */
.fb-aanvraag { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; scroll-margin-top: 80px; margin-bottom: 12px; background: var(--surface-1); }
.fb-aanvraag:target { outline: 3px solid var(--st-warning); outline-offset: 3px; }
.fb-aanvraag__rij { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.fb-aanvraag__bedrag { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fb-aanvraag__wie { font-weight: 700; }
.fb-aanvraag__sub { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.fb-aanvraag__sub--ruim { margin-top: 6px; }
.fb-aanvraag form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.fb-aanvraag form select { width: auto; min-width: 200px; flex: 0 1 auto; }
.fb-aanvraag form input[name=bedrag] { width: 90px; }
.fb-aanvraag form input[name=tekst] { flex: 1 1 340px; min-width: 200px; width: auto; }
.fb-aanvraag__rechts { margin-left: auto; color: var(--text-muted); }
.fb-badge--donker { background: var(--text-primary); color: var(--surface-1); }
.fb-badge--vakantie { background: var(--st-warning); color: var(--op-accent); }
.fb-weektabel td, .fb-weektabel th { padding: 8px 10px; font-size: 13px; }
.fb-weektabel td:first-child, .fb-weektabel th:first-child { padding-left: 14px; }
.fb-weektabel td:last-child, .fb-weektabel th:last-child { padding-right: 14px; text-align: right; }
.fb-schakel { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fb-schakel > div { flex: 1; min-width: 240px; }
.fb-schakel form { margin: 0; }
.fb-schakel__stand { font-size: 22px; font-weight: 700; }
.fb-kaart--kritiek { border-left: 4px solid var(--st-critical); }
.fb-kaart--goed { border-left: 4px solid var(--st-good); }
.fb-codeblok { display: inline-block; margin-top: 4px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-family: monospace; font-size: 12px; }
.fb-sjabloonvelden { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.fb-sjabloonvelden label { font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.fb-sjabloonvelden input { width: 210px; }
.fb-inlineform input.fb-v-150 { width: 150px; } .fb-inlineform input.fb-v-180 { width: 180px; } .fb-inlineform input.fb-v-200 { width: 200px; }
.fb-inlineform input.fb-v-220 { width: 220px; } .fb-inlineform input.fb-v-250 { width: 250px; } .fb-inlineform input.fb-v-280 { width: 280px; }
.fb-inlineform input.fb-v-170 { width: 170px; } .fb-inlineform input.fb-v-140 { width: 140px; } .fb-inlineform input.fb-v-60 { width: 60px; } .fb-inlineform input.fb-v-230 { width: 230px; }
.fb-inlineform select.fb-v-150 { width: 150px; min-width: 0; } .fb-inlineform select.fb-v-160 { max-width: 160px; min-width: 0; font-size: 12px; padding: 3px 6px; }
.fb-inlineform .fb-tip { flex-basis: 100%; font-size: 11.5px; color: var(--text-muted); }
.fb-inlineform label.fb-vink { font-size: 13px; font-weight: 600; }
.fb-rij--acties { gap: 6px; padding: 0; border: 0; }
@media (max-width: 760px) {
  .fb-factuurvel { padding: 18px 14px; }
  .fb-factuurregels__scroll { overflow-x: auto; margin: 0 -14px; padding: 0 14px; }
  .fb-factuurvel__kop { flex-direction: column; }
  .fb-factuurvel__adres--rechts { text-align: left; }
  .fb-factuurvel__meta { width: auto; }
  .fb-factuurtotalen { width: auto; margin-left: 0; }
  .fb-maakvorm--zip { margin-left: 0; }
  .fb-weeknav__voortgang { margin-left: 0; flex-basis: 100%; }
}
.fb-kaart { min-width: 0; }
/* ===== F1.6 — klant/flexwerker (360), sales, marketing, werving, inschrijvingen, compliance ===== */
.fb-grid2--start { align-items: start; }
.fb-grid2 > .kaart { margin-bottom: 0; }
.fb-span2 { grid-column: 1 / -1; }
/* dossierkaart: kop met actie rechts, compacte tabellen, +link */
.fb-kaart__kop--acties { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-kaart__kop--acties h2 { margin: 0; font-size: 15px; font-weight: 700; }
.fb-plus { font-size: 12px; color: var(--link); text-decoration: none; font-weight: 700; white-space: nowrap; display: inline-flex; gap: 3px; align-items: center; }
.fb-plus:hover { text-decoration: underline; }
.fb-plusgroep { display: inline-flex; gap: 12px; flex-wrap: wrap; }
table.fb-dossier { width: 100%; }
table.fb-dossier td, table.fb-dossier th { padding: 6px 8px; font-size: 13px; vertical-align: top; }
table.fb-dossier td.r, table.fb-dossier th.r { text-align: right; white-space: nowrap; }
table.fb-dossier tr.zwak td { color: var(--text-muted); }
table.fb-dossier--strak { margin-top: 8px; }
.fb-dl dt { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; }
.fb-dl dd { margin: 1px 0 0; }
.fb-dl dt:first-child { margin-top: 0; }
.fb-profielfoto { width: 64px; height: 64px; border-radius: 99px; object-fit: cover; flex: none; border: 2px solid var(--border); }
.fb-kop__titel .fb-badge { font-size: 11.5px; }
.fb-kop__titel form { display: inline; margin: 0; }
.fb-kop__titel .fb-knop--mini { padding: 2px 9px; font-size: 11px; font-weight: 600; vertical-align: middle; }
/* traject (klant): stappen + wat-nu-lijst + leadscore */
.fb-stappen { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.fb-stappen form { margin: 0; flex: 1 1 150px; }
.fb-stappen form.fb-stappen__inactief { flex: 0 0 auto; }
.fb-stappen button { width: 100%; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); border-radius: 10px;
  padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.fb-stappen button:hover { border-color: var(--baseline); }
.fb-stappen .nu button { background: color-mix(in srgb, var(--accent) 28%, var(--surface-1)); color: var(--text-primary); border-color: var(--accent); }
.fb-stappen .gehad button { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text-primary); }
.fb-stappen .fb-stappen__inactief button { font-weight: 500; color: var(--text-muted); }
.fb-watnu { margin: 0; padding: 0; list-style: none; }
.fb-watnu li { margin: 0 0 7px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fb-watnu__vink { font-weight: 800; color: var(--text-muted); display: inline-flex; }
.fb-watnu__vink--klaar { color: var(--delta-good); }
.fb-watnu .fb-klaar { color: var(--text-muted); }
.fb-watnu__link { font-size: 12.5px; font-weight: 700; }
.fb-score { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.fb-score__getal { font-size: 30px; font-weight: 800; line-height: 1; }
.fb-score--goed .fb-score__getal, .fb-score--goed .fb-balk__vul { color: var(--delta-good); background-color: var(--delta-good); }
.fb-score--matig .fb-score__getal, .fb-score--matig .fb-balk__vul { color: var(--st-warning-tekst); background-color: var(--st-warning); }
.fb-score--laag .fb-score__getal, .fb-score--laag .fb-balk__vul { color: var(--text-muted); background-color: var(--text-muted); }
.fb-score__getal { background: none !important; }
.fb-balk { height: 7px; border-radius: 99px; background: var(--grid); overflow: hidden; margin-bottom: 10px; }
.fb-balk__vul { height: 100%; }
.fb-score__regel { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.fb-score__regel b { color: var(--delta-good); } .fb-score__regel b.min { color: var(--st-critical); }
/* kleine formulieren in dossierkaarten */
.fb-dossierform { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grid); font-size: 12.5px; }
.fb-dossierform--kolom { flex-direction: column; align-items: stretch; }
.fb-dossierform--los { border-top: 0; padding-top: 0; margin-top: 10px; align-items: center; }
.fb-dossierform--gestippeld { border: 1px dashed var(--border); border-radius: 9px; padding: 10px 12px; margin: 0 0 14px; align-items: center; }
.fb-dossierform--kritiek { border: 1.5px solid var(--st-critical); background: color-mix(in srgb, var(--st-critical) 5%, var(--surface-1)); }
.fb-dossierform label { display: block; font-size: 11.5px; color: var(--text-muted); margin: 0 0 3px; }
.fb-dossierform label.fb-vink { display: inline-flex; align-items: center; gap: 6px; text-transform: none; font-weight: 500; white-space: nowrap; width: auto; font-size: 12.5px; color: var(--text-primary); }
.fb-dossierform label.fb-vink input { width: auto; margin: 0; }
.fb-dossierform input, .fb-dossierform select { width: auto; }
.fb-dossierform .fb-v-64 { width: 64px; text-align: right; } .fb-dossierform .fb-v-100 { width: 100px; text-align: right; } .fb-dossierform .fb-v-130 { width: 130px; }
.fb-dossierform .fb-v-150 { width: 150px; } .fb-dossierform .fb-v-170 { width: 170px; text-align: right; } .fb-dossierform .fb-v-190 { width: 190px; } .fb-dossierform .fb-v-230 { width: 230px; }
.fb-dossierform .fb-v-280 { min-width: 280px; } .fb-dossierform .fb-v-vol { width: 100%; }
.fb-dossierform .fb-groei { flex: 1; min-width: 160px; } .fb-dossierform .fb-groei input { width: 100%; }
.fb-dossierform .fb-groei--220 { flex: 1 1 220px; min-width: 220px; } .fb-dossierform .fb-groei--220 input { width: 100%; }
.fb-dossierform .fb-tip { flex-basis: 100%; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fb-dossierform textarea { flex: 1; min-width: 260px; }
.fb-maanden { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-maanden label { display: inline-flex; align-items: center; gap: 3px; text-transform: none; font-weight: 500; color: var(--text-primary); font-size: 12.5px; margin: 0; }
.fb-maanden label input { width: auto; margin: 0; }
.fb-kopieerrij { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fb-kopieerrij input { flex: 1 1 300px; font-size: 12px; padding: 6px 8px; }
.fb-gestippeld { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 9px; }
.fb-gestippeld--boven { margin-top: 0; margin-bottom: 14px; }
.fb-notitie { margin-top: 10px; padding: 10px 12px; border-radius: 9px; border: 1.5px solid var(--st-warning); background: color-mix(in srgb, var(--st-warning) 6%, var(--surface-1)); }
.fb-notitie--kritiek { border-color: var(--st-critical); background: color-mix(in srgb, var(--st-critical) 6%, var(--surface-1)); }
.fb-notitie--kritiek > b { color: var(--st-critical); }
.fb-uitleg--klein { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.fb-tegelrij { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.fb-tegelrij > div { border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px; }
.fb-tegelrij > div.fb-tegelrij--let-op { background: color-mix(in srgb, var(--st-warning) 10%, var(--surface-1)); }
.fb-tegelrij b { font-size: 15px; } .fb-tegelrij .fb-tegelrij__sub { font-size: 12px; color: var(--text-muted); }
.fb-tegelrij .fb-tegelrij__bedrag { font-size: 12.5px; font-weight: 600; }
.fb-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.fb-chips .fb-badge { font-size: 12px; }
a.fb-badge { text-decoration: none; }
.fb-periodes th { text-align: center; padding: 4px; } .fb-periodes td { text-align: center; padding: 4px; }
.fb-periodes td.eigen { color: var(--text-muted); font-style: italic; }
.fb-periodekop { font-size: 12px; color: var(--text-muted); margin: 6px 0 4px; display: flex; justify-content: space-between; }
.fb-kritiek-vet { color: var(--st-critical); font-weight: 600; }
.fb-dossierkop { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.fb-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--series-3); }
.fb-avatar--goed { border-color: var(--st-good); width: 58px; height: 58px; }
.fb-dossierkop > div { flex: 1; min-width: 240px; }
.fb-kaart--accent { border-left: 4px solid var(--series-3); }
.fb-kaart--info { border: 1.5px solid var(--series-1); background: color-mix(in srgb, var(--series-1) 5%, var(--surface-1)); }
/* marketing */
.fb-tekstkaart textarea { width: 100%; min-height: 170px; font: 12.5px/1.5 ui-monospace, monospace; border: 1px solid var(--border); border-radius: 9px; padding: 10px; resize: vertical; background: var(--surface-2); color: var(--text-primary); }
.fb-tekstkaart input[name=onderwerp] { width: 100%; font-size: 12.5px; padding: 6px 9px; margin-bottom: 6px; }
.fb-tekstkaart .fb-onderwerp { font-size: 12.5px; margin-bottom: 6px; }
.gekopieerd { color: var(--delta-good); font-size: 12px; font-weight: 700; display: none; }
.fb-advertentie { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.fb-advertentie--top { background: color-mix(in srgb, var(--series-3) 6%, var(--surface-1)); }
.fb-advertentie__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-advertentie__kop > b { font-size: 12.5px; }
.fb-advertentie__kop .knop { padding: 3px 12px; font-size: 11.5px; }
.fb-advertentie__kop .knop:first-of-type { margin-left: auto; }
.fb-advertentie__tekst { font-size: 12.5px; margin-top: 6px; line-height: 1.55; }
.fb-advertentie__sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.fb-koppen { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.fb-koppen .knop { padding: 4px 12px; font-size: 12px; }
.fb-beschrijving { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 4px 0; }
.fb-beschrijving .knop { padding: 2px 10px; font-size: 11px; flex: none; }
.fb-stappenlijst { font-size: 12.5px; background: var(--surface-1); border: 1px dashed var(--border); border-radius: 9px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.7; }
.fb-prospectie { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 9px; }
.fb-prospectie > div { flex: 1; min-width: 230px; font-size: 12.5px; line-height: 1.55; }
.fb-prospectie form { margin: 0; }
.fb-prospectie .knop { white-space: nowrap; }
.fb-vul-email { text-decoration: none; color: var(--st-warning-tekst); font-weight: 600; }
.fb-vul-email--klein { font-size: 11px; }
.fb-campagne td, .fb-campagne th { vertical-align: middle; }
.fb-campagne input[type=checkbox] { width: 17px; height: 17px; }
.fb-campagne th.fb-vinkkol { width: 26px; }
.fb-campagne__status { font-size: 11.5px; color: var(--text-muted); }
.fb-campagne__weg { border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 14px; padding: 0 2px; margin-left: 8px; display: inline-flex; vertical-align: middle; }
.fb-campagne__weg:hover { color: var(--st-critical); }
.fb-verstuurrij { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.fb-instellingform { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; font-size: 12.5px; }
.fb-instellingform label { display: block; font-size: 11.5px; color: var(--text-muted); margin: 0 0 3px; }
.fb-instellingform label.fb-vink { display: inline-flex; align-items: center; gap: 5px; text-transform: none; font-weight: 600; color: var(--text-primary); font-size: 12.5px; }
.fb-instellingform label.fb-vink--licht { font-weight: 500; }
.fb-instellingform label.fb-vink input { width: auto; margin: 0; }
.fb-instellingform input, .fb-instellingform select { width: auto; }
.fb-instellingform .fb-v-64 { width: 64px; } .fb-instellingform .fb-v-70 { width: 70px; } .fb-instellingform .fb-v-80 { width: 80px; } .fb-instellingform .fb-v-90 { width: 90px; }
.fb-instellingform .fb-v-100 { width: 100px; } .fb-instellingform .fb-v-110 { width: 110px; } .fb-instellingform .fb-v-120 { width: 120px; } .fb-instellingform .fb-v-150 { width: 150px; }
.fb-instellingform .fb-v-160 { width: 160px; } .fb-instellingform .fb-v-170 { width: 170px; } .fb-instellingform .fb-v-180 { width: 180px; } .fb-instellingform .fb-v-210 { width: 210px; }
.fb-instellingform .fb-v-230 { width: 230px; } .fb-instellingform .fb-v-240 { width: 240px; } .fb-instellingform .fb-v-260 { width: 260px; } .fb-instellingform .fb-v-280 { width: 280px; }
.fb-instellingform .fb-events { display: inline-flex; flex-direction: column; gap: 3px; } .fb-instellingform .fb-events > span { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-instellingform .fb-tip { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }
.fb-instellingform details { flex-basis: 100%; font-size: 12.5px; }
.fb-instellingform details summary { cursor: pointer; color: var(--text-muted); }
.fb-instellingform textarea.fb-mapping { width: 100%; font-family: monospace; font-size: 12px; margin-top: 6px; }
.fb-instellingform .fb-sub { flex-basis: 100%; font-weight: 700; }
.fb-statusregel { font-size: 12px; margin-top: 8px; }
.fb-statusregel--rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.fb-statusregel--rij form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.fb-statusregel--rij .knop { padding: 5px 10px; }
.fb-statusregel--rij select { width: auto; }
.fb-uitleg--lang { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.55; }
.fb-uitleg--lang b, .fb-uitleg--lang i { color: var(--text-secondary); }
.fb-tekstvak--klein { font-size: 12.5px; }
.fb-bestandvak input[type=file] { border: 0; font-size: 12.5px; max-width: 220px; }
.fb-nietverstuurd { border: 1px solid var(--st-warning); border-radius: 9px; padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.7; }
.fb-nietverstuurd table { margin-top: 6px; }
.fb-nietverstuurd td.r { text-align: right; }
.fb-geselecteerd { outline: 2px solid var(--accent); }
/* sales action center */
.fb-sales-kop { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.fb-sales-kop form { display: inline; margin: 0; }
.fb-sales-kop__meta { font-size: 12px; color: var(--text-muted); }
.fb-sales-kaart { border-left: 4px solid var(--border); margin-bottom: 10px; }
.fb-sales-kaart--HOT { border-left-color: var(--st-critical); } .fb-sales-kaart--WARM { border-left-color: var(--st-serious); }
.fb-sales-rij { display: grid; grid-template-columns: 2.2fr 1.6fr 1.6fr 1.8fr; gap: 12px; }
.fb-sales-rij--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .fb-sales-rij, .fb-sales-rij--2 { grid-template-columns: 1fr; } }
.fb-sales-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin-top: 6px; }
.fb-sales-lbl--inline { margin: 0; }
.fb-sales-score { font-size: 26px; font-weight: 800; line-height: 1; }
.fb-sales-titel { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fb-sales-titel > b { font-size: 16px; }
.fb-sales-titel__sub { font-size: 12px; color: var(--text-muted); }
.fb-sales-actie { background: var(--surface-2); border-radius: 9px; padding: 9px 11px; font-size: 13px; }
.fb-sales-actie b.soort { font-size: 11px; letter-spacing: .06px; }
.fb-sales-actie .fb-cursief { font-style: italic; }
.fb-sales-actie form { margin-top: 5px; }
.fb-sales-actie .knop { padding: 3px 9px; font-size: 11.5px; }
.fb-sales-uit { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.fb-sales-uit select, .fb-sales-uit input { width: 100%; font-size: 12.5px; padding: 5px 8px; }
.fb-sales-waarom { font-size: 12.5px; margin: 2px 0 0 16px; padding: 0; } .fb-sales-waarom li { margin: 1px 0; }
.fb-sales-waarom--los { margin-left: 0; list-style: none; }
.fb-sales-tekst { font-size: 13px; } .fb-sales-tekst--klein { font-size: 12.5px; } .fb-sales-tekst--mini { font-size: 11px; color: var(--text-muted); }
.fb-sales-oordeel { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; flex-wrap: wrap; }
.fb-sales-oordeel form { margin: 0; }
.fb-sales-oordeel .knop { padding: 3px 9px; font-size: 12px; }
.fb-sales-oordeel .knop.fb-gekozen { background: var(--series-1); color: var(--op-accent); border-color: var(--series-1); }
.fb-sales-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 5px; }
.fb-sales-funnel div { background: var(--surface-2); border-radius: 8px; padding: 7px 8px; text-align: center; font-size: 11.5px; }
.fb-sales-funnel div b { display: block; font-size: 17px; }
.fb-sales-tabel { width: 100%; font-size: 12.5px; } .fb-sales-tabel td, .fb-sales-tabel th { padding: 4px 6px; }
.fb-sales-kaart details summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.fb-sales-link { font-size: 12px; }
.fb-sales-uitslag { color: var(--st-critical); }
.fb-badge--HOT { background: var(--st-critical); color: #fff; } .fb-badge--WARM { background: var(--st-serious); color: var(--op-accent); }
.fb-badge--NURTURE { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
.fb-badge--CUSTOMER { background: var(--st-good); color: #fff; } .fb-badge--DISQUALIFIED { background: #555b66; color: #fff; }
.fb-badge--VERIFIED { background: var(--st-good); color: #fff; } .fb-badge--PROVISIONAL { background: var(--accent); color: #1f2533; } .fb-badge--INVALID { background: var(--st-critical); color: #fff; }
.fb-badge--onbekend { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
.fb-sales-h2 { margin-top: 22px; }
.fb-sales-h2 small { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.fb-cijfer__waarde small { font-size: 12px; font-weight: 600; }
.fb-cijfer__label small { text-transform: none; letter-spacing: 0; font-weight: 500; display: block; }
/* werving */
.fb-wervingslinks code { font-size: 11px; word-break: break-all; }
.fb-wervingslinks td { vertical-align: middle; }
.fb-wervingslinks td.r { text-align: right; }
.fb-wervingslinks .knop { padding: 4px 10px; font-size: 12px; }
.fb-sol-tabel td { vertical-align: middle; }
.fb-sol-tabel td.fb-maxw { max-width: 190px; }
.fb-sol-acties { text-align: right; white-space: nowrap; }
.fb-sol-acties form { display: inline; margin: 0; }
.fb-sol-acties .knop { padding: 4px 9px; font-size: 12px; }
.fb-sol-acties .stil { opacity: .25; transition: opacity .15s; }
.fb-sol-acties .fb-knop--wa { background: #0B6E4F; border-color: #0B6E4F; color: #FFFFFF; margin-right: 6px; }   /* 2.0.1: WhatsApp-knop (wa.me, zelf versturen) */
.fb-sol-acties .fb-knop--wa:hover { background: #08583F; border-color: #08583F; color: #FFFFFF; }
.fb-sol-tabel tr:hover .fb-sol-acties .stil { opacity: 1; }
.fb-sol-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-weight: 400; }
.fb-filterknoppen { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; align-items: center; }
.fb-filterknoppen .knop { padding: 4px 12px; font-size: 12px; }
.fb-filterknoppen__lbl { font-size: 12px; color: var(--text-muted); }
.fb-advertentietekst { white-space: pre-wrap; font: 12.5px/1.6 'Maven Pro', sans-serif; background: var(--surface-1); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; margin: 6px 0 0; }
.fb-score-badge--goed { background: color-mix(in srgb, var(--st-good) 18%, transparent); color: var(--text-primary); }
.fb-score-badge--matig { background: color-mix(in srgb, var(--st-warning) 18%, transparent); color: var(--text-primary); }
.fb-score-badge--laag { background: color-mix(in srgb, var(--border) 18%, transparent); color: var(--text-primary); }
/* inschrijvingen */
.fb-inschrijving { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--surface-1); }
.fb-inschrijving--nieuw { border: 1.5px solid var(--st-warning); }
.fb-inschrijving__kop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fb-inschrijving__kop > b { font-size: 15px; }
.fb-inschrijving__tijd { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.fb-inschrijving__geg { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; font-size: 13px; margin: 8px 0; }
.fb-inschrijving__geg b { color: var(--text-secondary); font-weight: 600; }
.fb-handtekening { background: #fff; border: 1px solid var(--grid); border-radius: 8px; height: 54px; }
.fb-kantoor { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 9px; }
.fb-kantoor label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; }
.fb-kantoor input, .fb-kantoor select { padding: 7px 9px; font-size: 13px; width: auto; }
.fb-kantoor .fb-v-90 { width: 90px; } .fb-kantoor .fb-v-120 { width: 120px; } .fb-kantoor .fb-v-130 { width: 130px; } .fb-kantoor .fb-v-150 { width: 150px; }
.fb-kantoor .fb-v-170 { width: 170px; } .fb-kantoor .fb-v-190 { width: 190px; } .fb-kantoor .fb-v-230 { width: 230px; }
.fb-bsnvak { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; padding: 8px 12px; border: 1.5px solid var(--st-critical); border-radius: 9px; background: color-mix(in srgb, var(--st-critical) 5%, var(--surface-1)); font-size: 12.5px; }
.fb-bsnvak input { width: 130px; padding: 6px 9px; font-size: 13px; }
.fb-bsnvak .knop { padding: 6px 12px; font-size: 12.5px; }
/* compliance */
.fb-sectiekop { font-size: 15px; margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; }
.fb-dagen--rood { color: var(--st-critical); font-weight: 700; } .fb-dagen--oranje { color: var(--st-warning-tekst); font-weight: 700; }
.fb-kaart--tabel.fb-kaart--strak { overflow: hidden; }
@media (max-width: 760px) {
  .fb-stappen form { flex: 1 1 100px; }
  .fb-sales-rij { gap: 10px; }
  .fb-inschrijving__tijd { margin-left: 0; flex-basis: 100%; }
  .fb-kaart--tabel .fb-sol-tabel, .fb-kaart--tabel .fb-campagne { min-width: 600px; }
}
details.fb-sectie--kritiek { border-left: 4px solid var(--st-critical); }
.fb-knoppenrij__rechts { margin-left: auto; }
/* F1.6: tabbalk en weeknavigatie zijn <nav>-elementen en erfden de regels van de bovenbalk (sticky, witte balk, pil-links); hier teruggezet */
nav.fb-tabs, nav.fb-weeknav { position: static; padding: 0; background: transparent; box-shadow: none; z-index: auto; }
nav.fb-tabs { border-bottom: 1px solid var(--border); gap: 2px; }
nav.fb-weeknav { border-bottom: 0; gap: 8px; }
nav.fb-tabs a.fb-tabs__tab { border-radius: 0; padding: 9px 14px; font-weight: 600; letter-spacing: 0; color: var(--text-secondary); background: transparent; }
nav.fb-tabs a.fb-tabs__tab:hover { background: transparent; color: var(--text-primary); }
nav.fb-tabs a.fb-tabs__tab--actief { color: var(--text-primary); background: transparent; font-weight: 700; }
nav.fb-weeknav a.knop { border-radius: 9px; padding: 6px 10px; background: var(--surface-1); color: var(--text-primary); font-weight: 600; }
nav.fb-weeknav a.knop:hover { background: var(--surface-2); color: var(--text-primary); }
nav.fb-weeknav a.fb-knop--tekst { background: transparent; }
@media (max-width: 760px) {
  nav.fb-tabs { padding: 0; gap: 0; }
  nav.fb-tabs > a.fb-tabs__tab { display: inline-block; width: auto; padding: 9px 11px; font-size: 13px; }
  .fb-watnu li > span:nth-child(2) { flex: 1 1 60%; }
  .fb-wervingslinks tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--grid); }
  .fb-wervingslinks td { display: inline-block; padding: 2px 4px; border: 0; }
  .fb-wervingslinks code { overflow-wrap: anywhere; word-break: normal; }
  .fb-kantoor > div { flex: 1 1 140px; min-width: 0; }
  .fb-kantoor input, .fb-kantoor select { width: 100%; }
  .fb-knoppenrij .knop, .fb-kop__acties .knop { white-space: normal; text-align: left; }
  .fb-instellingform > div { flex: 1 1 140px; min-width: 0; } .fb-instellingform input:not([type=checkbox]), .fb-instellingform select { width: 100%; }
  .fb-dossierform .fb-v-280 { min-width: 0; width: 100%; }
  .fb-sales-kop { gap: 8px; }
}
/* ===== F1.7 — taken, huisbord, planbord, plaatsbord (JS-zwaar: alle ids, data-attributen en JS-klassen blijven gelijk) ===== */
:root { --st-geregeld: #3b82f6; --st-niet-gelukt: #e8871e; --st-niet-gelukt-tekst: #c96f08; --st-twijfel-tekst: #a07207; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-geregeld: #60a5fa; --st-niet-gelukt: #f59e3c; --st-niet-gelukt-tekst: #f5a35a; --st-twijfel-tekst: #f4bc36; } }
:root[data-theme="dark"] { --st-geregeld: #60a5fa; --st-niet-gelukt: #f59e3c; --st-niet-gelukt-tekst: #f5a35a; --st-twijfel-tekst: #f4bc36; }
/* --- taken --- */
.fb-taken .fb-welkom { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1.5px solid var(--accent); border-radius: 13px; padding: 13px 17px; margin-bottom: 14px; }
.fb-taken .fb-welkom--stil { background: var(--surface-1); border: 1px solid var(--border); padding: 12px 17px; }
.fb-taken .fb-welkom__icoon { color: var(--link); display: inline-flex; }
.fb-taken .fb-welkom__tekst { flex: 1; font-size: 15px; font-weight: 700; line-height: 1.4; }
.fb-taken .fb-welkom--stil .fb-welkom__tekst { font-size: 14.5px; }
.fb-taken .fb-welkom__tekst .fb-accent { color: var(--link); } .fb-taken .fb-welkom__tekst .fb-kritiek { color: var(--st-critical); }
.fb-taken .fb-welkom .knop { white-space: nowrap; }
.fb-taken .fb-weekkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-taken .fb-weekkop > b { font-size: 14px; display: inline-flex; gap: 7px; align-items: center; }
.fb-taken .fb-weekkop__nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.fb-taken .fb-weekkop__nav .knop { padding: 4px 12px; font-size: 12.5px; }
.fb-taken .fb-weeklabel { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 7px; }
.fb-taken #taken li .tk-stil { opacity: .22; transition: opacity .15s; }
.fb-taken #taken li:hover .tk-stil { opacity: 1; }
.fb-taken #taken li:hover { background: color-mix(in srgb, var(--series-1) 3%, transparent); }
.fb-taken .tk-laatste { margin: 4px 0 1px 30px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.fb-taken .tk-laatste b { color: var(--text-secondary); font-weight: 600; }
.fb-taken .tk-laatste .fb-wie { font-size: 11px; white-space: nowrap; }
.fb-taken .weekrooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 9px; }
.fb-taken .dagkolom { min-width: 0; }
.fb-taken .dagkop { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 5px; border-bottom: 2px solid var(--grid); margin-bottom: 6px; display: flex; gap: 5px; align-items: center; }
.fb-taken .dagkop.vandaagkop { color: var(--link); border-color: var(--accent); }
.fb-taken .dagkop.telaatkop { color: var(--st-critical); border-color: var(--st-critical); }
.fb-taken .dagleeg { color: var(--text-muted); font-size: 12px; padding: 6px 2px; opacity: .5; }
.fb-taken .taakkaart { display: block; border: 1px solid var(--border); border-left: 3px solid var(--baseline); border-radius: 9px; padding: 6px 9px; margin: 0 0 6px; font-size: 12px; line-height: 1.4; text-decoration: none; color: inherit; background: var(--surface-1); overflow-wrap: anywhere; }
.fb-taken .taakkaart:hover { border-color: var(--accent); }
.fb-taken .taakkaart svg { vertical-align: -2px; }
.fb-taken .taakkaart.vandaagk { border-left-color: var(--accent); }
.fb-taken .taakkaart.telaat { border-left-color: var(--st-critical); background: color-mix(in srgb, var(--st-critical) 6%, transparent); }
.fb-taken .taakkaart .tkmeta { display: flex; gap: 7px; margin-top: 3px; font-size: 10.5px; color: var(--text-muted); flex-wrap: wrap; align-items: center; }
.fb-taken .taakkaart .tkmeta b { color: var(--st-critical); }
.fb-taken .taakkaart .tkmeta span { display: inline-flex; gap: 3px; align-items: center; }
.fb-taken .taakkaart.plank { border-left-color: var(--st-geregeld); border-color: color-mix(in srgb, var(--st-geregeld) 40%, var(--border)); background: color-mix(in srgb, var(--st-geregeld) 11%, transparent); }
.fb-taken .taakkaart.plank .tkmeta { color: color-mix(in srgb, var(--st-geregeld) 70%, var(--text-muted)); }
.fb-taken .taakkaart.klaark, .fb-taken .taakkaart.plankok { border-left-color: var(--st-good); border-color: color-mix(in srgb, var(--st-good) 40%, var(--border)); background: color-mix(in srgb, var(--st-good) 14%, transparent); }
.fb-taken .taakkaart.klaark .tkmeta, .fb-taken .taakkaart.klaark .tkmeta b, .fb-taken .taakkaart.plankok .tkmeta, .fb-taken .taakkaart.plankok .tkmeta b { color: var(--delta-good); }
.fb-taken .taakkaart.planknee { border-left-color: var(--st-critical); border-color: color-mix(in srgb, var(--st-critical) 40%, var(--border)); background: color-mix(in srgb, var(--st-critical) 11%, transparent); }
.fb-taken .taakkaart.planknee .tkmeta { color: var(--st-critical); }
.fb-taken .taakkaart.plankmis { border-left-color: var(--st-niet-gelukt); border-color: color-mix(in srgb, var(--st-niet-gelukt) 45%, var(--border)); background: color-mix(in srgb, var(--st-niet-gelukt) 12%, transparent); }
.fb-taken .taakkaart.plankmis .tkmeta, .fb-taken .taakkaart .tkmeta b.fb-mis { color: var(--st-niet-gelukt-tekst); }
.fb-taken .taakkaart.planktw { border-left-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.fb-taken .taakkaart.planktw .tkmeta, .fb-taken .taakkaart .tkmeta b.fb-twijfel { color: var(--st-twijfel-tekst); }
.fb-taken .taakkaart .tkmeta .fb-geregeld { color: var(--st-geregeld); font-weight: 700; }
.fb-taken .taakkaart.agendak { border-left-color: var(--series-3); border-color: color-mix(in srgb, var(--series-3) 40%, var(--border)); background: color-mix(in srgb, var(--series-3) 8%, transparent); }
.fb-taken .dagkolom.sleepover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 9px; }
#pbmenu { position: fixed; z-index: 60; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 5px; min-width: 210px; display: none; }
#pbmenu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-primary); text-align: left; }
#pbmenu button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
#pbmenu .bol { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
#pbmenu .bol--open { background: transparent; border: 2px solid var(--text-muted); } #pbmenu .bol--geregeld { background: var(--st-geregeld); } #pbmenu .bol--twijfel { background: var(--accent); }
#pbmenu .bol--gelukt { background: var(--st-good); } #pbmenu .bol--nee { background: var(--st-critical); } #pbmenu .bol--mis { background: var(--st-niet-gelukt); }
#pbmenu .pbm-scheiding { height: 1px; background: var(--border); margin: 4px 6px; }
#pbmenu .pbm-ico { width: 14px; text-align: center; flex: 0 0 auto; display: inline-flex; color: var(--text-secondary); }
.fb-taken .wp-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin: 13px 0 6px; }
.fb-taken .wp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-taken .wp-chip { border: 1px solid var(--border); background: none; border-radius: 999px; padding: 5px 13px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-primary); display: inline-flex; gap: 5px; align-items: center; }
.fb-taken .wp-chip:hover { border-color: var(--accent); }
.fb-taken .wp-chip.aan { background: var(--accent); border-color: var(--accent); font-weight: 700; color: var(--op-accent); }
.fb-taken dialog.fb-dialoog--wp { width: min(520px, 94vw); max-width: none; padding: 26px 28px; }
.fb-taken dialog.fb-dialoog--wie { min-width: 290px; }
.fb-taken .fb-dialoog__kop { font-size: 14px; font-weight: 700; display: flex; gap: 7px; align-items: center; }
.fb-taken .fb-dialoog input, .fb-taken .fb-dialoog select { width: 100%; font: inherit; font-size: 13.5px; padding: 8px 10px; }
.fb-taken .fb-dialoog input[type=date] { font-size: 15px; padding: 9px 12px; }
.fb-taken .fb-dialoog label { font-size: 12.5px; display: block; margin-bottom: 7px; }
.fb-taken .fb-dialoog .fb-tijden { display: flex; gap: 8px; margin-bottom: 7px; } .fb-taken .fb-dialoog .fb-tijden label { flex: 1; }
.fb-taken .fb-dialoog__acties { margin-top: 14px; }
.fb-taken .fb-filterknoppen .knop { padding: 4px 12px; font-size: 12.5px; }
.fb-taken .fb-filterknoppen__los { align-self: center; font-size: 11.5px; color: var(--text-muted); }
.fb-taken .tk-lijst { list-style: none; margin: 0; padding: 0; }
.fb-taken .tk-item { padding: 8px 2px; scroll-margin-top: 80px; border-top: 1px solid var(--grid); }
.fb-taken .tk-item--prio { border-left: 3px solid var(--st-critical); padding-left: 10px; background: color-mix(in srgb, var(--st-critical) 3.5%, transparent); }
.fb-taken .tk-rij { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fb-taken .tk-rij form { margin: 0; }
.fb-taken .tk-vink { border: 1.5px solid var(--grid); background: none; cursor: pointer; border-radius: 5px; width: 20px; height: 20px; padding: 0; }
.fb-taken .tk-vink:hover { border-color: var(--st-good); }
.fb-taken .klad-tekst { flex: 1; font-size: 14px; white-space: pre-wrap; } .fb-taken .klad-tekst--prio { font-weight: 600; }
.fb-taken .tk-badge { font-size: 11.5px; font-weight: 700; white-space: nowrap; border-radius: 99px; padding: 2px 9px; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.fb-taken .tk-badge--wie { background: color-mix(in srgb, var(--series-1) 12%, transparent); color: var(--link); }
.fb-taken .tk-badge--planbord { background: color-mix(in srgb, var(--series-3) 14%, transparent); color: var(--series-3); }
.fb-taken .tk-badge--deadline { background: var(--grid); color: var(--text-secondary); }
.fb-taken .tk-badge--telaat { background: color-mix(in srgb, var(--st-critical) 13%, transparent); color: var(--st-critical); }
.fb-taken .tk-badge--vandaag { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--link); }
.fb-taken .tk-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.fb-taken .tk-ikoon { border: 0; background: none; cursor: pointer; font-size: 13px; padding: 0; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 2px; text-decoration: none; }
.fb-taken .tk-ikoon:hover { color: var(--text-primary); }
.fb-taken .tk-ikoon--uit { filter: grayscale(1); opacity: .3; }
.fb-taken .tk-ikoon--prio { color: var(--st-critical); }
.fb-taken .tk-ikoon b { font-size: 11.5px; }
.fb-taken .tk-opv { margin: 7px 0 2px 30px; border-left: 2px solid var(--grid); padding-left: 12px; }
.fb-taken .tk-opv__form { display: flex; gap: 7px; margin: 2px 0 9px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.fb-taken .tk-opv__form select { width: 120px; flex: 0 0 auto; font-size: 12.5px; padding: 4px 6px; } .fb-taken .tk-opv__form input[type=date] { width: 140px; flex: 0 0 auto; font-size: 12.5px; padding: 3px 6px; }
.fb-taken .tk-opv__form .knop { padding: 4px 11px; font-size: 12px; }
.fb-taken .tk-opv__regel { font-size: 13px; line-height: 1.55; margin-bottom: 3px; }
.fb-taken .tk-opv__nieuw { display: flex; gap: 6px; margin-top: 5px; } .fb-taken .tk-opv__nieuw input { flex: 1; font-size: 12.5px; padding: 6px 10px; }
.fb-taken .tk-opv__nieuw .knop { padding: 5px 12px; font-size: 12px; }
.fb-taken .tk-nieuw { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; flex-wrap: wrap; }
.fb-taken .tk-nieuw textarea { flex: 1 1 260px; font: 14px/1.5 inherit; border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; resize: none; overflow: hidden; }
.fb-taken .tk-nieuw select { width: 130px; flex: 0 0 auto; color: var(--text-secondary); } .fb-taken .tk-nieuw input[type=date] { width: 150px; flex: 0 0 auto; color: var(--text-secondary); }
.fb-taken .tk-leeg { padding: 12px 2px; color: var(--text-muted); font-size: 13px; }
.fb-taken .tk-af { display: flex; gap: 10px; align-items: baseline; padding: 7px 2px; border-top: 1px solid var(--grid); color: var(--text-muted); }
.fb-taken .tk-af__tekst { flex: 1; font-size: 13px; white-space: pre-wrap; text-decoration: line-through; }
.fb-taken details.fb-sectie--af > summary { color: var(--text-muted); font-size: 13px; }
.fb-taken form.klad-bewerkvorm { flex: 1; display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.fb-taken form.klad-bewerkvorm .knop { padding: 7px 13px; font-size: 13px; }
.fb-taken #taken { scroll-margin-top: 80px; }
.fb-taken .fb-filterknoppen .knop.fb-actief { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--link); }
.fb-taken .fb-dialoog__kop .bol { width: 10px; height: 10px; border-radius: 50%; background: var(--st-geregeld); flex: 0 0 auto; }
.fb-taken .fb-dialoog .fb-uitleg { margin: 3px 0 9px; }
.fb-taken .wp-chip svg { color: inherit; }
.fb-taken .klad-vak { flex: 1; font: 14px/1.5 inherit; border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; resize: none; overflow: hidden; }
.fb-taken .klad-vet { border: 1px solid var(--border); background: var(--surface-1); border-radius: 7px; cursor: pointer; font-weight: 900; font-size: 13px; padding: 6px 11px; }
.fb-taken .klad-stop { border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 7px 2px; }
/* --- huisbord & plaatsbord (gedeeld; klassen = JS-selectoren) --- */
.fb-bord .fb-kop__acties .fb-filterbalk__zoek input { width: 240px; }
.fb-bordfilter { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; border: 1.5px solid var(--grid); border-radius: 10px; padding: 7px 12px; background: var(--surface-1); user-select: none; white-space: nowrap; margin: 0; font-weight: 500; }
.fb-bordfilter input { accent-color: var(--st-warning); width: auto; margin: 0; }
.fb-bordhint { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-secondary); background: color-mix(in srgb, var(--series-1) 7%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--series-1) 35%, var(--border)); border-radius: 11px; padding: 9px 13px; margin-bottom: 14px; }
.fb-bordhint > svg { flex: none; color: var(--link); }
.fb-bordhint > span { flex: 1; min-width: 0; }
.fb-bordhint > span b { color: var(--text-primary); }
.fb-bordhint button { margin-left: auto; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px 6px; flex: 0 0 auto; display: inline-flex; }
.pb-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60; background: var(--surface-1); border: 1px solid var(--st-good); color: inherit; border-radius: 11px; padding: 11px 18px; font-size: 13.5px; max-width: min(92vw, 560px); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.pb-toast.fout { border-color: var(--st-critical); }
.pb-selbalk { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 55; display: none; align-items: center; gap: 12px; background: var(--surface-1); border: 1.5px solid var(--st-warning); border-radius: 99px; padding: 9px 18px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 24px rgba(0,0,0,.22); }
body.pb-kiezen .pb-selbalk { display: flex; }
.pb-selbalk button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.pb-bord { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding: 2px 2px 18px; scroll-padding: 14px; }
.pb-kolom { flex: 0 0 288px; display: flex; flex-direction: column; max-height: calc(100dvh - 235px); min-height: 150px; background: color-mix(in srgb, var(--surface-1) 55%, var(--page)); border: 1px solid var(--border); border-radius: 16px; padding: 10px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.pb-kolom.vrij { position: sticky; left: 0; z-index: 5; background: color-mix(in srgb, var(--st-warning) 6%, var(--surface-1)); border-top: 3px solid var(--st-warning); box-shadow: 4px 0 14px -6px rgba(16,24,40,.25); }
.pb-kolom.eigenkol { border-top: 3px solid var(--grid); background: color-mix(in srgb, var(--surface-1) 35%, var(--page)); }
.pb-kolom.sleepover { border-color: var(--st-geregeld); border-style: dashed; background: color-mix(in srgb, var(--st-geregeld) 9%, var(--surface-1)); }
.pb-kop { display: flex; align-items: center; gap: 9px; margin: 4px 6px 8px; }
.pb-kop b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.pb-kop b svg { flex: none; color: var(--text-secondary); }
.pb-tel { margin-left: auto; flex: 0 0 auto; font-size: 12px; font-weight: 800; border-radius: 99px; padding: 2px 10px; background: color-mix(in srgb, var(--st-warning) 15%, transparent); color: var(--st-warning-tekst); }
.pb-tel.ok { background: color-mix(in srgb, var(--delta-good) 15%, transparent); color: var(--delta-good); }
.pb-tel.vol { background: color-mix(in srgb, var(--st-warning) 18%, transparent); color: var(--st-warning-tekst); }
.pb-tel.over { background: color-mix(in srgb, var(--st-critical) 15%, transparent); color: var(--st-critical); }
.pb-tel.nul { background: var(--grid); color: var(--text-secondary); }
.pb-sub { margin: -4px 6px 8px; font-size: 11px; color: var(--text-muted); }
.pb-kaarten { overflow-y: auto; min-height: 40px; scrollbar-width: thin; padding: 1px; }
.pb-hier { display: none; width: 100%; margin: 0 0 8px; padding: 8px; border-radius: 10px; border: 1.5px dashed var(--st-geregeld); background: color-mix(in srgb, var(--st-geregeld) 7%, transparent); color: var(--st-geregeld); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
body.pb-kiezen .pb-hier { display: block; }
.pb-kaart { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; cursor: grab; box-shadow: 0 1px 2px rgba(16,24,40,.06); transition: box-shadow .12s, transform .12s, border-color .12s; }
.pb-kaart:hover { box-shadow: 0 4px 12px rgba(16,24,40,.14); transform: translateY(-1px); border-color: color-mix(in srgb, var(--st-warning) 45%, var(--border)); }
.pb-kaart:active { cursor: grabbing; }
.pb-kaart.sleept { opacity: .45; }
.pb-kaart.gekozen { outline: 2px solid var(--st-warning); outline-offset: 1px; }
.pb-kaart.gekozen::after { content: '✓'; position: absolute; top: -8px; left: -8px; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--st-warning); color: #fff; font-size: 11px; font-weight: 800; }
.pb-kaart b { font-size: 14px; font-weight: 700; display: block; margin-bottom: 2px; }
.pb-kaart .rol { font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; }
.pb-kaart .regel, .pb-res .regel { display: flex; align-items: baseline; gap: 7px; font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.pb-kaart .regel .ico, .pb-res .regel .ico { flex: 0 0 16px; text-align: center; opacity: .75; display: inline-flex; align-self: center; }
.pb-kaart.sluimer { opacity: .62; } .pb-kaart.sluimer:hover { opacity: 1; }
.pb-badge { display: inline-flex; gap: 4px; align-items: center; font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 3px 10px; margin-top: 7px; background: color-mix(in srgb, var(--st-warning) 18%, transparent); color: var(--st-warning-tekst); border: 1px solid color-mix(in srgb, var(--st-warning) 35%, transparent); }
.pb-badge.grijs { background: var(--grid); color: var(--text-secondary); border-color: var(--grid); }
.pb-badge.sluimer { background: color-mix(in srgb, var(--st-warning) 20%, transparent); color: var(--st-warning-tekst); }
.pb-x, .pb-resx { position: absolute; top: 7px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-muted); cursor: pointer; padding: 0; opacity: 0; transition: opacity .12s, color .12s, border-color .12s; display: inline-flex; align-items: center; justify-content: center; }
.pb-kaart:hover .pb-x, body.pb-kiezen .pb-x, .pb-res:hover .pb-resx { opacity: .85; }
.pb-x:hover, .pb-resx:hover { color: var(--st-critical); border-color: var(--st-critical); }
.pb-leeg { font-size: 12px; color: var(--text-muted); text-align: center; padding: 18px 6px; border: 1.5px dashed var(--grid); border-radius: 12px; }
.pb-kaart.weg, .pb-kolom.weg { display: none; }
.pb-res { position: relative; border: 1.5px dashed var(--st-warning); border-radius: 12px; padding: 9px 11px; margin-bottom: 7px; font-size: 12px; background: color-mix(in srgb, var(--st-warning) 7%, var(--surface-1)); }
.pb-res b { font-size: 13.5px; font-weight: 700; display: flex; gap: 5px; align-items: center; margin-bottom: 2px; }
.pb-res .regel { color: var(--text-secondary); }
.pb-res form { display: contents; }
body.pb-plekfilter .pb-kolom.volhuis { display: none; }
body.pb-huisfilter .pb-kolom:not(.vrij) { display: none; }
body.pb-huisfilter .pb-kolom.vrij .pb-kaart:not(.huisvrij) { display: none; }
.pb-keuze { display: flex; align-items: baseline; gap: 9px; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; margin-top: 7px; cursor: pointer; }
.pb-keuze input { accent-color: var(--st-warning); width: auto; }
.pb-keuze small { color: var(--st-warning-tekst); font-weight: 700; margin-left: auto; }
dialog.pb-dlg { max-width: 340px; }
.pb-dlg h3 { margin: 0 0 4px; font-size: 15.5px; }
.pb-dlg .waar { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.pb-dlg .let { font-size: 12px; font-weight: 700; color: var(--st-warning-tekst); margin-bottom: 6px; }
.pb-dlg label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin: 10px 0 4px; }
.pb-dlg input { width: 100%; box-sizing: border-box; }
.pb-dlg .rij { margin-top: 18px; }
/* --- planbord --- */
.fb-planbord .fb-weeknav__titel { min-width: 0; }
.fb-planbord .fb-kop__acties .fb-filterbalk__zoek input { width: 160px; }
.fb-planbord .pb-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.fb-planbord .pb-wrap--smal { max-width: 720px; }
.fb-planbord .pb { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; }
.fb-planbord .pb.bz { min-width: 0; }
.fb-planbord .pb th, .fb-planbord .pb td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 6px 8px; vertical-align: top; font-size: 12.5px; }
.fb-planbord .pb th:last-child, .fb-planbord .pb td:last-child { border-right: 0; }
.fb-planbord .pb thead th { position: sticky; top: 0; background: var(--surface-1); z-index: 2; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); text-align: left; }
.fb-planbord .pb thead th.vandaag { color: var(--link); }
.fb-planbord .pb tbody th { position: sticky; left: 0; background: var(--surface-1); z-index: 1; text-align: left; font-weight: 700; min-width: 150px; max-width: 190px; }
.fb-planbord .pb tbody th.fb-klantkol { min-width: 170px; }
.fb-planbord .pb tbody th { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-primary); }
.fb-planbord .pb tbody th .vast { display: block; font-weight: 400; font-size: 11px; color: var(--text-muted); }
.fb-planbord .pb tbody th .fb-aangemeld { color: var(--text-muted); display: inline-flex; gap: 4px; align-items: center; }
.fb-planbord .pb td { min-width: 108px; height: 44px; }
.fb-planbord .pb td.vandaag { background: color-mix(in srgb, var(--series-1) 5%, transparent); }
.fb-planbord .pb td.weekend { background: color-mix(in srgb, var(--text-muted) 5%, transparent); }
.fb-planbord .pb td.fb-midden { text-align: center; }
.fb-planbord .pb td.fb-leegrij { color: var(--text-muted); padding: 14px; }
.fb-planbord .chip { display: block; border-radius: 8px; padding: 3px 7px; margin: 2px 0; background: color-mix(in srgb, var(--series-1) 11%, transparent); font-size: 12px; line-height: 1.35; position: relative; }
.fb-planbord .chip .tijd { color: var(--text-muted); font-size: 11px; }
.fb-planbord .chip .tijd svg { vertical-align: -2px; }
.fb-planbord .chip form { display: inline; position: absolute; top: 2px; right: 5px; margin: 0; }
.fb-planbord .chip button { border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 11px; padding: 0; display: inline-flex; }
.fb-planbord .chip-ziek { background: color-mix(in srgb, var(--st-critical) 12%, transparent); }
.fb-planbord .chip-dienst { background: color-mix(in srgb, var(--st-good) 12%, transparent); }
.fb-planbord .zelf { font-size: 10.5px; color: var(--delta-good); font-weight: 700; }
.fb-planbord .plus, .fb-planbord .nodigknop { border: 1px dashed var(--border); border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 8px; margin-top: 2px; }
.fb-planbord .nodigknop { font-size: 11px; padding: 2px 7px; }
.fb-planbord .plus:hover, .fb-planbord .nodigknop:hover { color: var(--link); border-color: var(--series-1); }
.fb-planbord .chip[draggable] { cursor: grab; }
.fb-planbord .chip.sleep { opacity: .4; }
.fb-planbord td.dropdoel { outline: 2px dashed var(--accent); outline-offset: -3px; }
.fb-planbord .chip-tekort { background: color-mix(in srgb, var(--st-critical) 13%, transparent); color: var(--st-critical); font-weight: 700; cursor: pointer; }
.fb-planbord .wissel { display: flex; border: 1.5px solid var(--grid); border-radius: 99px; overflow: hidden; }
.fb-planbord .wissel a { padding: 6px 14px; font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--text-muted); }
.fb-planbord .wissel a.aan { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--link); }
.fb-planbord tr.taakrij td { background: color-mix(in srgb, var(--series-1) 3%, transparent); }
.fb-planbord tr.taakrij th { font-size: 11px; color: var(--text-muted); }
.fb-planbord .taakkaart { display: block; border: 1px solid var(--border); border-left: 3px solid var(--baseline); border-radius: 8px; padding: 5px 8px; margin: 2px 0; font-size: 11.5px; line-height: 1.4; text-decoration: none; color: inherit; background: var(--surface-1); }
.fb-planbord .taakkaart:hover { border-color: var(--accent); }
.fb-planbord .taakkaart.vandaagk { border-left-color: var(--accent); }
.fb-planbord .taakkaart.telaat { border-left-color: var(--st-critical); background: color-mix(in srgb, var(--st-critical) 6%, transparent); }
.fb-planbord .taakkaart.fb-meer { text-align: center; font-weight: 700; }
.fb-planbord .taakkaart .tkmeta { display: flex; gap: 7px; margin-top: 3px; font-size: 10.5px; color: var(--text-muted); flex-wrap: wrap; align-items: center; }
.fb-planbord .taakkaart .tkmeta b { color: var(--st-critical); }
.fb-planbord .bz td, .fb-planbord .bz th { font-size: 12.5px; padding: 5px 10px; }
.fb-planbord dialog.fb-dialoog form { display: flex; flex-direction: column; gap: 10px; }
.fb-planbord dialog.fb-dialoog .fb-dialoog__kop { font-size: 14px; font-weight: 700; }
.fb-planbord dialog.fb-dialoog label { font-size: 12.5px; }
.fb-planbord dialog.fb-dialoog input, .fb-planbord dialog.fb-dialoog select { width: 100%; }
.fb-planbord dialog.fb-dialoog .fb-tijden { display: flex; gap: 8px; } .fb-planbord dialog.fb-dialoog .fb-tijden label { flex: 1; }
.fb-planbord dialog.fb-dialoog .fb-dialoog__acties { margin-top: 0; }
.fb-planbord .fb-bezetting { font-size: 15px; margin: 20px 0 8px; }
.fb-planbord .fb-bordbalk { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.fb-planbord .fb-bordbalk nav.fb-weeknav { margin: 0; }
.fb-planbord .fb-uitleg--na { margin-top: 14px; }
.fb-planbord .pb tbody th svg { vertical-align: -2px; }
@media (max-width: 760px) {
  .fb-taken .fb-weekkop__nav { margin-left: 0; flex-basis: 100%; }
  .fb-taken .fb-welkom { flex-wrap: wrap; }
  .fb-taken .fb-welkom .knop, .fb-taken .fb-welkom__tekst { flex-basis: 100%; }
  .fb-taken .fb-welkom__icoon { display: none; }
  .fb-bord .fb-kop__acties .fb-filterbalk__zoek input, .fb-planbord .fb-kop__acties .fb-filterbalk__zoek input { width: 100%; }
  .pb-kolom { flex-basis: 250px; }
}
/* ===== F1.8a — huisvesting, medewerkers-rest, werkplanning (prikbord/kladblok/dossiers/wiewaar); alleen de schil ===== */
.fb-kaart--smal { max-width: 560px; }
.fb-normaal { font-weight: 400; }
.fb-statusregel--inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; font-size: 13px; }
.fb-filterknoppen .knop.fb-actief { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--link); }
table.fb-dossiers .fb-dossiers__id { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
table.fb-dossiers tr.fb-dossiers__zonder td { color: var(--text-muted); }
table.fb-dossiers tr.fb-dossiers__zonder td a.rijlink b { font-weight: 600; }
.fb-dossierform--los textarea { flex: 1; min-width: 260px; }
.fb-dossierform--los .fb-vink { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; margin: 0; font-weight: 500; }
.fb-dossierform--los .fb-vink input { width: auto; margin: 0; }
.fb-dossierlijn { margin-top: 18px; }
.fb-dossierlijn__item { border-left: 3px solid var(--grid); padding: 2px 0 14px 16px; margin-left: 6px; }
.fb-dossierlijn__item--vert { border-left-color: var(--st-warning); }
.fb-dossierlijn__kop { font-size: 12px; color: var(--text-muted); display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.fb-dossierlijn__kop svg { vertical-align: -2px; }
.fb-dossierlijn__tekst { margin-top: 5px; white-space: pre-wrap; }
.fb-dossierlijn__rapport h4 { margin: 9px 0 3px; font-size: 13px; }
.fb-tekstknop--gedempt { color: var(--text-muted); font-size: 12px; margin-left: 6px; }
.fb-tekstknop--omlijnd.fb-tekstknop--vlak { background: var(--surface-1); }
.fb-downloadrij { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-top: 4px; }
.fb-downloadrij .fb-uitleg--klein { flex: 1 1 320px; margin: 4px 0 0; }
table.table-vink td:first-child input { width: auto; margin: 0; }
.fb-ziekrij { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--grid); }
.fb-ziekrij:first-of-type { border-top: 0; }
.fb-ziekrij__acties { margin-left: auto; display: flex; gap: 6px; }
.fb-subkop--sectie { font-size: 13px; margin: 16px 0 6px; color: var(--text-primary); }
.fb-fasesignaal { border-left: 4px solid var(--st-warning); padding: 8px 12px; margin-bottom: 8px; background: var(--surface-1); border-radius: 0 9px 9px 0; font-size: 13px; }
.fb-fasesignaal--rood { border-left-color: var(--st-critical); }
.fb-fasesignaal form.fb-inline { margin: 0 0 0 6px; }
.fb-filterknoppen--kop { margin: 0; }
.fb-cijfers--huur { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 14px; }
.fb-marge-plus { color: var(--delta-good); font-weight: 700; } .fb-marge-min { color: var(--st-critical); font-weight: 700; }
.fb-huurtabel td, .fb-huurtabel th { vertical-align: middle; }
.fb-huurtabel tfoot td { font-weight: 800; border-top: 2px solid var(--border); }
.fb-huurtabel__form { display: flex; gap: 5px; align-items: center; margin: 0; }
.fb-huurtabel__naam { width: 130px; padding: 4px 7px; font-size: 13px; } .fb-huurtabel__bedrag { width: 92px; text-align: right; padding: 4px 7px; font-size: 13px; }
.fb-huurtabel__leeg { color: var(--st-warning-tekst); font-weight: 700; font-size: 12px; }
.fb-huurtabel__vol { opacity: .8; }
.fb-kaart--letop { border-left: 4px solid var(--st-warning); }
.fb-vink--datum { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 0; font-weight: 500; }
.fb-vink--datum input { width: auto; margin: 0; }
.fb-v-145 { width: 145px; }
.fb-koppelrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); }
.fb-koppelrij__bestand { flex: 1; min-width: 180px; font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; }
.zp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; margin-top: 8px; }
.zp-item { position: relative; }
.zp-item summary { list-style: none; user-select: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); font-size: 13px; font-weight: 600; }
.zp-item summary::-webkit-details-marker { display: none; }
.zp-item summary .zp-item__dicht { opacity: .45; display: inline-flex; } .zp-item summary .zp-item__open { display: none; opacity: .7; }
.zp-item summary:hover { border-color: var(--series-1); }
.zp-item[open] summary { border-color: var(--series-1); background: color-mix(in srgb, var(--series-1) 8%, transparent); }
.zp-item[open] summary .zp-item__dicht { display: none; } .zp-item[open] summary .zp-item__open { display: inline-flex; }
.zp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; display: flex; flex-direction: column; gap: 9px; width: 270px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; box-shadow: 0 10px 28px rgba(16,24,40,.22); }
.zp-pop > b { font-size: 13px; } .zp-pop input[type=file] { font-size: 12.5px; }
.zp-pop__acties { display: flex; gap: 10px; align-items: center; }
.zp-item:nth-child(4n) .zp-pop, .zp-item:last-child .zp-pop { left: auto; right: 0; }
.fb-cijfers--klein .fb-cijfer__waarde svg { vertical-align: -2px; }
.fb-cijfers--incheck { margin-bottom: 16px; }
.fb-aandachtregel { padding: 4px 0; border-top: 1px solid var(--grid); font-size: 13px; }
.fb-huiskaart__kop { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.fb-huiskaart__kop .fb-kaart__kop { margin: 0; font-size: 14.5px; display: inline-flex; gap: 6px; align-items: center; }
.fb-huiskaart__sleutels { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.fb-huiskaart__sleutels svg { vertical-align: -2px; }
.fb-chip--klein { font-size: 12px; padding: 4px 10px; }
.fb-sleutelform { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.fb-sleutelform--rechts { justify-content: flex-end; }
.fb-sleutelform--fiets { gap: 2px; }
.fb-sleutelform input.fb-v-52 { width: 52px; padding: 3px 6px; font-size: 12px; }
.fb-sleutelform input.fb-v-44 { width: 44px; padding: 3px 6px; font-size: 12.5px; text-align: right; }
.fb-sleutelform select.fb-sleutelform__fiets { padding: 2px 4px; font-size: 11.5px; max-width: 64px; width: auto; }
.fb-inchecktabel td, .fb-inchecktabel th { vertical-align: middle; }
.fb-inchecktabel th svg, .fb-inchecktabel .fb-badge svg { vertical-align: -2px; }
@media print { .fb-incheck .weeknav, .fb-incheck .fb-kop__acties { display: none !important; } }
.fb-meldkaart { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--surface-1); }
.fb-meldkaart--klaar { opacity: .65; }
.fb-meldkaart__rij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fb-meldkaart__cat { font-weight: 800; font-size: 15px; display: inline-flex; gap: 6px; align-items: center; }
.fb-meldkaart__sub { color: var(--text-muted); font-size: 12.5px; margin-top: 3px; }
.fb-meldkaart__toel { margin-top: 6px; font-size: 13.5px; color: var(--text-secondary); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.fb-meldkaart__lijst { margin-top: 8px; font-size: 12.5px; color: var(--text-secondary); } .fb-meldkaart__lijst b { color: var(--text-primary); }
.fb-meldkaart__acties { margin-top: 10px; }
.fb-fotorij { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fb-fotorij img { width: 150px; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.fb-fotoform { margin: 0; }
.fb-fotoknop { display: block; text-align: center; cursor: pointer; margin: 0; }
.fb-fietsrij { display: flex; gap: 14px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--grid); flex-wrap: wrap; }
.fb-fietsrij:last-child { border-bottom: 0; }
.fb-fietsrij__nr { font-size: 21px; font-weight: 800; min-width: 74px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.fb-fietsrij__wie { min-width: 170px; }
.fb-fietsrij__acties { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.fb-fotowrap { position: relative; display: inline-block; }
.fb-fotowrap__foto { height: 52px; width: 52px; object-fit: cover; border-radius: 9px; border: 1px solid var(--border); display: block; }
.fb-fotowrap__form { margin: 0; }
.fb-fotowrap__weg { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.fb-fotowrap__weg:hover { color: var(--st-critical); border-color: var(--st-critical); }
.fb-fotoupload { font-size: 12px; font-weight: 700; cursor: pointer; color: var(--text-secondary); border: 1px dashed var(--border); border-radius: 9px; padding: 15px 10px; white-space: nowrap; margin: 0; display: inline-flex; gap: 5px; align-items: center; }
.fb-fotoupload:hover { border-color: var(--accent); }
.fb-tel-rood { background: var(--st-critical); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 800; margin-left: 2px; }
.fb-huisagenda__indeling { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.fb-hadag { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--grid); }
.fb-hadag:last-of-type { border-bottom: 0; }
.fb-hadag__datum { flex: none; width: 44px; text-align: center; }
.fb-hadag__d1 { font-size: 10.5px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.fb-hadag__d2 { font-size: 18px; font-weight: 800; }
.fb-hadag--nu .fb-hadag__d1, .fb-hadag--nu .fb-hadag__d2 { color: var(--link); }
.fb-hadag__regels { flex: 1; min-width: 0; }
.fb-haregel { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; margin-bottom: 3px; }
.fb-haregel--rooster { padding: 4px 0; }
.fb-haregel__tekst { flex: 1; }
.fb-haregel__dag { width: 88px; }
.fb-haregel__wie { font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, var(--briefje-tekst) 75%, transparent); color: var(--surface-1); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.fb-haregel form { display: inline; margin: 0; }
.fb-haregel button { border: 0; background: none; cursor: pointer; font-size: 12px; color: var(--text-muted); padding: 0 2px; display: inline-flex; align-self: center; }
.fb-haregel button:hover { color: var(--st-critical); }
.fb-minivorm { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.fb-minivorm input, .fb-minivorm select { width: auto; font-size: 13px; }
.fb-minivorm .fb-minivorm__breed { flex: 1; min-width: 150px; }
.fb-minivorm input.fb-v-56 { width: 56px; } .fb-minivorm input.fb-v-150 { width: 150px; } .fb-minivorm input.fb-v-190 { width: 190px; } .fb-minivorm input.fb-v-230 { width: 230px; }
.fb-containerregel { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.fb-containerregel__soort { flex: 1; }
.fb-containerregel form { margin: 0; }
.fb-uitklap--instelling { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.fb-uitklap--instelling > summary { cursor: pointer; }
.fb-uitklap--instelling .fb-uitklap__binnen { margin-top: 6px; line-height: 1.6; }
.fb-prikvorm { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.fb-prikvorm select.fb-auto { width: auto; }
.fb-briefje--klaar { opacity: .6; } .fb-briefje--klaar .fb-briefje__tekst { text-decoration: line-through; }
.fb-briefje__voor { margin-bottom: 3px; }
.fb-briefje__klaar { font-size: 10.5px; opacity: .6; margin-top: 3px; }
.fb-briefje__voet { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; opacity: .7; margin-top: 6px; gap: 6px; }
.fb-briefje__voet form { display: inline; margin: 0; }
.fb-briefje__voet button { border: 0; background: none; cursor: pointer; font-size: 12px; color: inherit; padding: 0 2px; display: inline-flex; align-items: center; gap: 3px; }
@media (max-width: 900px) { .fb-huisagenda__indeling { grid-template-columns: 1fr; } }
.fb-tabelwrap { overflow-x: auto; }
.fb-huurcheck td, .fb-huurcheck th { white-space: nowrap; }
.fb-huurcheck__doc { margin-left: 4px; color: var(--text-muted); } .fb-huurcheck__doc svg { vertical-align: -2px; }
.fb-huurknop { font: 600 11.5px inherit; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-muted); border-radius: 6px; padding: 3px 9px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.fb-huurknop:hover { border-color: var(--text-muted); color: var(--text-primary); }
.fb-huurknop--ja { border-color: color-mix(in srgb, var(--st-good) 45%, var(--border)); background: color-mix(in srgb, var(--st-good) 10%, var(--surface-1)); color: var(--delta-good); }
.fb-huurknop--ja:hover { background: color-mix(in srgb, var(--st-good) 18%, var(--surface-1)); color: var(--delta-good); }
.fb-herkomst { font-size: 11px; color: var(--text-muted); }
.fb-totaalrij td { border-top: 2px solid var(--text-primary); }
.fb-namenrij { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px 14px; }
table.fb-geldtabel--controle input.fb-v-56 { width: 56px; }
.fb-inspectie .fb-sectiekop .knop { margin-left: 8px; }
.fb-inspectietabel .fb-badge { margin-right: 3px; }
.fb-gezien { display: inline-block; }
.fb-gezien > summary { cursor: pointer; list-style: none; font-weight: 700; }
.fb-gezien > summary::-webkit-details-marker { display: none; }
.fb-gezien > summary::after { content: " ▸"; color: var(--text-muted); font-weight: 400; }
.fb-gezien[open] > summary::after { content: " ▾"; }
.fb-gezien__binnen { font-weight: 400; font-size: 11.5px; margin-top: 4px; white-space: normal; min-width: 180px; }
.fb-actiepunt { padding: 5px 0; border-top: 1px solid var(--grid); }
.fb-insprij { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--grid); flex-wrap: wrap; }
.fb-insprij__punt { flex: 1; min-width: 260px; font-weight: 600; }
.fb-insprij input[type=text] { flex: 1; min-width: 200px; font-size: 12.5px; width: auto; }
.fb-keuzelicht { display: flex; gap: 5px; }
.fb-keuzelicht { position: relative; }
.fb-keuzelicht input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; top: 0; margin: 0; }
.fb-keuzelicht label { border: 1.5px solid var(--border); border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--text-muted); user-select: none; margin: 0; }
.fb-keuzelicht input:checked + label.fb-keuzelicht--groen { background: color-mix(in srgb, var(--st-good) 18%, transparent); color: var(--delta-good); border-color: var(--delta-good); }
.fb-keuzelicht input:checked + label.fb-keuzelicht--geel { background: color-mix(in srgb, var(--st-warning) 20%, transparent); color: var(--st-warning-tekst); border-color: var(--st-warning); }
.fb-keuzelicht input:checked + label.fb-keuzelicht--rood { background: color-mix(in srgb, var(--st-critical) 16%, transparent); color: var(--st-critical); border-color: var(--st-critical); }
.fb-keuzelicht input:checked + label.fb-keuzelicht--grijs { background: var(--surface-2, var(--page)); color: var(--text-secondary); border-color: var(--text-muted); }
.fb-vuilnisregel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--grid); }
.fb-vuilnisregel__weg { margin: 0 0 0 auto; }
@media (max-width: 760px) {
  .fb-insprij { display: block; padding: 12px 0; }
  .fb-insprij__punt { min-width: 0; display: block; margin-bottom: 7px; }
  .fb-insprij input[type=text] { min-width: 0; width: 100%; margin-top: 7px; font-size: 16px; padding: 9px 10px; }
  .fb-keuzelicht { display: grid; grid-template-columns: repeat(3, 1fr) 1.45fr; gap: 6px; }
  .fb-keuzelicht label { padding: 11px 2px; text-align: center; font-size: 12.5px; white-space: nowrap; }
}
/* kladblok (deelt het klad-JS-contract en de tk-*-klassen met taken) */
.fb-kladblok__indeling { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.fb-kladblok__hoofd { flex: 2; min-width: 340px; }
.fb-kladblok__spoed { flex: 1; min-width: 260px; }
.fb-kladbord { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.fb-kladkolom { flex: 1; min-width: 235px; max-width: 360px; }
.fb-kladkolom__kop { display: flex; align-items: center; gap: 7px; margin: 0 2px 8px; }
.fb-kladkolom__kop b { font-size: 13px; }
.fb-kladkolom__stip { width: 9px; height: 9px; border-radius: 99px; display: inline-block; }
.fb-kladkolom__stip--0 { background: #c9971a; } .fb-kladkolom__stip--1 { background: #3b76c4; } .fb-kladkolom__stip--2 { background: #3f9d58; }
.fb-kladkolom__stip--3 { background: #d4607a; } .fb-kladkolom__stip--4 { background: #8a63c9; } .fb-kladkolom__stip--5 { background: #3d98ab; }
.fb-stickie { color: #243040; border: 1px solid rgba(0,0,0,.05); border-radius: 10px; padding: 10px 12px 7px; margin-bottom: 9px; box-shadow: 0 1px 3px rgba(20,30,50,.08); }
.fb-stickie--0 { background: #fff6d8; } .fb-stickie--1 { background: #e9f1fc; } .fb-stickie--2 { background: #e9f6ec; }
.fb-stickie--3 { background: #fdeef1; } .fb-stickie--4 { background: #f2edfb; } .fb-stickie--5 { background: #e9f5f8; }
.fb-stickie .klad-tekst b, .fb-stickie b { color: #1a2430; }
.fb-taken .fb-stickie .klad-tekst.fb-stickie__tekst { display: block; font-size: 13.5px; white-space: pre-wrap; flex: none; }
.fb-stickie__voet { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.fb-stickie__voet form { margin: 0; }
.fb-stickie__tijd { font-size: 11px; color: #6d7686; flex: 1; }
.fb-stickie__knop { border: 0; background: none; cursor: pointer; padding: 0; font-size: 13px; color: #243040; text-decoration: none; display: inline-flex; align-items: center; opacity: .28; transition: opacity .15s; }
.fb-stickie:hover .fb-stickie__knop { opacity: 1; }
.fb-stickie__knop--klaar { color: var(--delta-good); } .fb-stickie__knop--weg { color: #6d7686; }
.fb-kladblok__vet { border: 1px solid var(--border); background: var(--surface-1); border-radius: 9px; cursor: pointer; font-weight: 900; font-size: 14px; padding: 9px 14px; }
.fb-taken .fb-kladblok__hoofd .tk-nieuw textarea { flex: 1 1 200px; }
.fb-tagrij { margin-top: 8px; font-size: 12px; color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fb-tagknop { border: 1px solid var(--border); background: var(--surface-1); border-radius: 99px; padding: 3px 10px; cursor: pointer; font-size: 12px; color: var(--link); font-weight: 700; }
.fb-kladblok__spoed textarea { width: 100%; }
.fb-taken .fb-kladblok .tk-item--prio { border-left: 0; }
/* wiewaar (JS-klassen ww-chip/.aan, ww-rij en ids blijven) */
.fb-wiewaar .fb-kop__acties .fb-filterbalk__zoek input { width: min(320px, 50vw); }
.ww-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; align-items: center; }
.ww-chip { border: 1px solid var(--border); background: none; border-radius: 999px; padding: 5px 13px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-primary); display: inline-flex; gap: 5px; align-items: center; }
.ww-chip:hover { border-color: var(--accent); }
.ww-chip.aan { background: var(--accent); border-color: var(--accent); font-weight: 700; color: var(--op-accent); }
.ww-tabel td { vertical-align: top; font-size: 13px; }
.ww-tabel th svg { vertical-align: -2px; }
.ww-sub { color: var(--text-muted); font-size: 11.5px; }
.ww-tag { display: inline-flex; gap: 4px; align-items: center; border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700; margin-left: 5px; }
.ww-leeg { background: color-mix(in srgb, var(--st-warning) 20%, transparent); }
.ww-vandaag { color: var(--delta-good); font-weight: 700; }
.ww-klik { border: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; margin-left: 0; }
.ww-klik:hover { outline: 1px solid var(--accent); }
.ww-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin: 13px 0 6px; }
.ww-srij { display: flex; gap: 6px; flex-wrap: wrap; }
.ww-uitknop { border: 1px solid var(--border); background: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 10px; margin-left: 6px; color: var(--text-muted); white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.ww-uitknop:hover { color: var(--st-critical); border-color: var(--st-critical); }
.ww-uitkop { padding: 12px 14px 2px; }
.ww-redenkol { min-width: 320px; }
.ww-uithuis { margin-top: 4px; }
.ww-reden { font-size: 12.5px; padding: 5px 8px; max-width: 240px; width: auto; }
.ww-redentxt { font-size: 12.5px; padding: 5px 8px; width: 180px; }
.ww-ok { color: var(--delta-good); font-weight: 700; font-size: 12px; }
.ww-fout { color: var(--st-critical); font-size: 12.5px; font-weight: 700; margin-top: 10px; }
dialog.fb-dialoog--ww { width: min(520px, 94vw); max-width: none; padding: 18px; }
dialog.fb-dialoog--kritiek { border-color: var(--st-critical); }
.fb-dialoog--ww .fb-dialoog__kop { font-size: 14px; font-weight: 700; display: flex; gap: 6px; align-items: center; margin: 0; }
.fb-dialoog--ww .fb-tijden { display: flex; gap: 8px; margin-top: 10px; }
.fb-dialoog--ww .fb-tijden label { flex: 1; } .fb-dialoog--ww .fb-tijden label.ww-breed { flex: 1.2; } .fb-dialoog--ww .fb-tijden label.ww-smal { flex: none; width: 130px; }
.fb-dialoog--ww label { font-size: 12.5px; display: block; margin: 8px 0 0; }
.fb-dialoog--ww input, .fb-dialoog--ww select { width: 100%; font-size: 13px; padding: 6px; margin-top: 3px; }
.fb-dialoog--ww .ww-redentxt--dlg { margin-top: 8px; }
.fb-dialoog--ww .fb-dialoog__acties { margin-top: 14px; }
/* prikbord (JS-klassen prikvorm, prik-bewerk, agenda-bewerk en ids tagmenu/bewerkVorm blijven) */
.fb-prikbord__layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.fb-agendakaart { position: sticky; top: 74px; margin-bottom: 0; }
.fb-agdag { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; margin: 12px 0 5px; }
.fb-agdag--nu { color: var(--link); }
.fb-agitem { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 5px 8px; border-radius: 8px; margin-bottom: 2px; background: color-mix(in srgb, var(--series-1) 6%, transparent); }
.fb-agitem--voorbij { opacity: .55; }
.fb-agitem__tijd { font-weight: 800; font-size: 12px; white-space: nowrap; min-width: 38px; }
.fb-agitem__wat { flex: 1; word-break: break-word; }
.fb-agitem__periode { opacity: .6; font-size: 11px; white-space: nowrap; }
.fb-agitem__wie { font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, var(--briefje-tekst) 75%, transparent); color: var(--surface-1); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.fb-tag-ik { background: var(--st-critical) !important; color: #fff !important; }
.fb-agitem__knop, .fb-agitem button { border: 0; background: none; cursor: pointer; font-size: 12px; color: var(--text-muted); padding: 0 2px; text-decoration: none; display: inline-flex; align-self: center; }
.fb-agitem__knop:hover, .fb-agitem button:hover { color: var(--st-critical); }
.fb-agitem form.fb-inline { margin: 0; }
.fb-agvorm { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.fb-agvorm input, .fb-agvorm select { font-size: 13px; }
.fb-agvorm__rij { display: flex; gap: 7px; align-items: center; }
.fb-agvorm__lbl { font-size: 11.5px; color: var(--text-muted); font-weight: 700; width: 26px; }
.fb-agvorm__groei { flex: 1; width: auto; } .fb-agvorm__tijd { width: 96px; }
.fb-icslink { width: 100%; margin-top: 4px; font-size: 11px; padding: 4px 6px; }
.fb-icsblok { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.fb-icsvorm { display: flex; gap: 6px; margin-top: 4px; align-items: center; } .fb-icsvorm .fb-icslink { flex: 1; margin: 0; }
.fb-prikvorm { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.fb-prikvorm textarea { flex: 1; min-width: 260px; min-height: 56px; resize: vertical; }
.fb-prikvorm__rechts { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fb-prikvorm__rechts > select { width: 190px; }
.fb-prikvorm__dossier { width: 190px; }
.fb-prikvorm__dossier > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-secondary); list-style: none; display: inline-flex; gap: 4px; align-items: center; }
.fb-prikvorm__dossier > summary::-webkit-details-marker { display: none; }
.fb-prikvorm__dossier select { width: 100%; margin-top: 6px; font-size: 12.5px; }
.fb-prikvorm__tip { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.fb-prikvorm__prive { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); font-weight: 600; margin: 0; cursor: pointer; }
.fb-prikvorm__prive input { width: auto; margin: 0; }
.fb-kleurkeuze { display: flex; gap: 12px; align-items: flex-end; }
.fb-kleurkeuze input { display: none; }
.fb-kleurkeuze label { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; margin: 0; }
.fb-kleurkeuze__bol { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; display: inline-block; }
.fb-kleurkeuze__bol--rood { background: var(--briefje-rood); } .fb-kleurkeuze__bol--geel { background: var(--briefje-geel); }
.fb-kleurkeuze__bol--blauw { background: var(--briefje-blauw); } .fb-kleurkeuze__bol--groen { background: var(--briefje-groen); }
.fb-kleurkeuze input:checked + .fb-kleurkeuze__bol { border-color: var(--text-primary); }
.fb-kleurkeuze__wat { font-size: 10.5px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }
.fb-kleurkeuze input:checked ~ .fb-kleurkeuze__wat { color: var(--text-primary); }
.fb-tagmenu { position: fixed; z-index: 9999; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.18); max-height: 260px; overflow-y: auto; min-width: 230px; padding: 4px; }
.fb-naamkop { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; }
.fb-naamkop__lijn { flex: 1; height: 1px; background: var(--border); }
.fb-naamkop__tel { background: var(--text-primary); color: var(--surface-1); border-radius: 99px; padding: 1px 8px; font-size: 11px; }
.fb-naamtag { display: inline-block; background: color-mix(in srgb, var(--briefje-tekst) 82%, transparent); color: var(--surface-1); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.fb-prikbord__bord { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fb-briefje--prik { border-radius: 4px; padding: 14px 14px 10px; min-height: 100px; box-shadow: 0 3px 10px rgba(16,24,40,.14); position: relative; display: flex; flex-direction: column; transform: rotate(-.6deg); }
.fb-prikbord__bord .fb-briefje--prik:nth-child(even) { transform: rotate(.7deg); }
.fb-briefje--prik::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%); background: var(--text-primary); opacity: .55; }
.fb-briefje__tekst--prik { flex: 1; font-size: 14px; line-height: 1.45; }
.fb-briefje--prik .fb-briefje__voet { font-size: 11px; opacity: 1; color: color-mix(in srgb, var(--briefje-tekst) 55%, transparent); margin-top: 10px; }
.fb-briefje--prik .fb-briefje__voet button, .fb-briefje__knop { border: 0; background: none; cursor: pointer; font-size: 12px; color: color-mix(in srgb, var(--briefje-tekst) 50%, transparent); padding: 0 2px; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.fb-briefje--prik .fb-briefje__voet button:hover, .fb-briefje__knop:hover { color: var(--briefje-tekst); }
.fb-briefje--prik.fb-briefje--klaar { opacity: .62; }
.fb-briefje--prik.fb-briefje--klaar .fb-briefje__tekst { text-decoration: line-through; text-decoration-thickness: 2px; }
.fb-briefje--prik.fb-briefje--klaar::after { content: "✕"; position: absolute; top: 6px; right: 10px; font-size: 22px; font-weight: 700; color: color-mix(in srgb, var(--briefje-tekst) 45%, transparent); }
.fb-briefje--prik.fb-briefje--rood { box-shadow: 0 3px 10px rgba(198,40,40,.3); outline: 2px solid #c62828; outline-offset: 0; }
.fb-briefje--prik.fb-briefje--rood.fb-briefje--klaar { outline-color: rgba(198,40,40,.35); }
.fb-briefje--mij { outline: 2px solid var(--text-primary) !important; outline-offset: 2px !important; }
.fb-briefje__prive { display: inline-block; border: 1.5px dashed color-mix(in srgb, var(--briefje-tekst) 45%, transparent); border-radius: 999px; padding: 1px 9px; font-size: 10.5px; font-weight: 700; color: color-mix(in srgb, var(--briefje-tekst) 60%, transparent); }
.fb-briefje__links { margin-top: 6px; font-size: 11.5px; line-height: 1.6; }
.fb-briefje__links a { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px dotted currentColor; }
.fb-briefje__links svg { vertical-align: -2px; }
.fb-postvak { margin-top: 26px; }
.fb-postvak > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-1); font-weight: 700; font-size: 13.5px; color: var(--text-secondary); }
.fb-postvak > summary::-webkit-details-marker { display: none; }
.fb-postvak__pijl::after { content: "▸"; } .fb-postvak[open] > summary .fb-postvak__pijl::after { content: "▾"; }
.fb-postvak__sub { font-weight: 400; font-size: 12px; color: var(--text-muted); }
.fb-postvak .fb-prikbord__bord { margin-top: 14px; }
.fb-legenda--prik { margin-top: 16px; font-size: 12.5px; color: var(--text-muted); align-items: center; }
.fb-legenda--prik > b { color: var(--text-secondary); }
.fb-legenda__bol { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; }
.fb-legenda__bol--rood { background: var(--briefje-rood); border: 1.5px solid #c62828; } .fb-legenda__bol--geel { background: var(--briefje-geel); }
.fb-legenda__bol--blauw { background: var(--briefje-blauw); } .fb-legenda__bol--groen { background: var(--briefje-groen); } .fb-legenda__bol--roze { background: var(--briefje-roze); }
@media (prefers-color-scheme: dark) { .fb-briefje--prik { box-shadow: 0 3px 12px rgba(0,0,0,.5); } }
@media (max-width: 980px) { .fb-prikbord__layout { grid-template-columns: 1fr; } .fb-agendakaart { position: static; top: auto; } }
/* paginawrappers en JS-haken (geen eigen stijl; hier gedefinieerd zodat de klassencheck (10k) sluit) */
.fb-huisagenda, .fb-prikbord, .fb-fietslijst, .fb-huiskaart { display: block; }
.fb-bestandform__bestand { min-width: 220px; }
.agenda-bewerk { text-decoration: none; }
.fb-huurcheck td form.fb-inlineform { flex-wrap: nowrap; gap: 8px; }
.fb-huurcheck td form.fb-inlineform > span { white-space: nowrap; display: inline-flex; gap: 3px; align-items: center; }

/* ===== F1.8b — beheer, vandaag-rest, planning-rest (instellingen, pushcheck, toegang, auditlog, kantoordossiers, team, datacheck,
   datakwaliteit, vakantiedagen, notionsync, signalen, medewerkerchat, whatsapplog, opdrachtgevers, vacatures, zoekopdracht); alleen de schil ===== */
/* -- genummerde stappen (toegang, notionsync) en netwerkadressen -- */
.fb-stap { display: flex; gap: 10px; margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
.fb-stap__nr { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--series-1); color: var(--op-accent); font-weight: 700; text-align: center; line-height: 22px; font-size: 12px; }
.fb-adressen { margin: 0 0 10px 32px; display: flex; gap: 8px; flex-wrap: wrap; }
.fb-adres { font-size: 16px; font-weight: 700; background: var(--page); border: 1px dashed var(--baseline); border-radius: 8px; padding: 8px 14px; display: inline-block; user-select: all; }
/* -- instellingen: linkernavigatie + kaarten -- */
.fb-inst { max-width: 1000px; margin: 0 auto; }
.fb-inst__wrap { display: flex; gap: 26px; align-items: flex-start; }
.fb-inst__nav { flex: 0 0 230px; position: sticky; top: 16px; }
.fb-inst__kopje { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; margin: 18px 0 6px 12px; }
.fb-inst__kopje:first-child { margin-top: 0; }
.fb-inst__nav a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; text-decoration: none; color: inherit; cursor: pointer; }
.fb-inst__nav a.actief, .fb-inst__nav a:hover { background: var(--surface-1); font-weight: 700; }
.fb-inst__nav a.actief { box-shadow: inset 3px 0 0 var(--accent); }
.fb-inst__inhoud { flex: 1; min-width: 0; }
.fb-inst__kaart { padding: 24px 28px; }
.fb-inst__form label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--text-primary); }
.fb-inst__form input[type=text], .fb-inst__form input[type=email], .fb-inst__form input[type=password] { font-size: 14px; padding: 11px 14px; }
.fb-inst__foto { display: flex; align-items: center; gap: 14px; }
.fb-inst__rond { width: 52px; height: 52px; border-radius: 50%; background: var(--page); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; color: var(--text-muted); }
.fb-inst__rond img { width: 100%; height: 100%; object-fit: cover; }
.fb-inst__acties { margin-top: 22px; }
.fb-inst__acties .knop { width: 100%; text-align: center; padding: 12px; font-size: 14.5px; }
.fb-inst__stand { font-weight: 400; color: var(--text-muted); margin-left: 6px; font-size: 12.5px; }
.fb-inst__stand::before { content: "○ "; }
.fb-inst__stand--aan { color: var(--delta-good); }
.fb-inst__stand--aan::before { content: "● "; }
.fb-doorkaart { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--border); }
.fb-doorkaart:last-child { border-bottom: 0; }
.fb-doorkaart__tekst { flex: 1; min-width: 0; }
.fb-doorkaart__tekst b { font-size: 13.5px; }
.fb-doorkaart__tekst div { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.fb-doorkaart .knop { flex: none; }
@media (max-width: 760px) { .fb-inst__wrap { flex-direction: column; } .fb-inst__nav { position: static; width: 100%; flex: none; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
  .fb-inst__kopje { flex-basis: 100%; margin: 10px 0 2px 4px; } .fb-inst__kaart { padding: 16px; } }
/* -- pushcheck -- */
.fb-pushcheck { max-width: 900px; margin: 0 auto; }
.fb-pushcheck .fb-kaart { margin-bottom: 14px; }
.fb-pushcheck__uitslag ul { margin: 8px 0 0; padding-left: 18px; font-weight: 400; }
.fb-pushcheck__uitslag li { margin: 4px 0; font-size: 13.5px; }
.fb-pushcheck__rij { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--grid); flex-wrap: wrap; }
.fb-pushcheck__rij:last-child { border-bottom: 0; }
.fb-pushcheck__wie { font-weight: 700; min-width: 150px; }
.fb-pushcheck__tok { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text-muted); }
.fb-pushcheck__duw { margin-left: auto; display: flex; gap: 8px; }
.fb-pushcheck__duw form { margin: 0; }
.fb-pushcheck__app { font-size: 13.5px; line-height: 1.7; }
.fb-pushcheck__feiten { display: grid; grid-template-columns: 190px 1fr; gap: 6px 10px; font-size: 13.5px; margin: 0; }
.fb-pushcheck__feiten dt { color: var(--text-muted); } .fb-pushcheck__feiten dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .fb-pushcheck__feiten { grid-template-columns: 1fr; gap: 0; } .fb-pushcheck__feiten dd { margin-bottom: 8px; } }
/* -- toegang -- */
.fb-grid2 > div { min-width: 0; }
.fb-toegang__reset { display: inline-flex; gap: 5px; align-items: center; margin: 0 6px 0 0; vertical-align: middle; }
.fb-toegang__ww { width: 150px; padding: 5px 9px; font-size: 12.5px; }
table.fb-toegang td { white-space: normal; max-width: none; vertical-align: middle; }
table.fb-toegang td.fb-nowrap { white-space: nowrap; }
.fb-toegang__nieuw label:first-of-type { margin-top: 4px; }
/* -- auditlog -- */
.fb-audit__samenvatting { font-size: 12.5px; }
.fb-audit__filter { align-items: center; margin: 0 0 14px; }
.fb-audit__filter select { width: auto; font-size: 12.5px; padding: 5px 8px; }
table.fb-audit__tabel td { vertical-align: top; font-size: 12.5px; white-space: normal; max-width: none; }
table.fb-audit__tabel td:first-child { white-space: nowrap; }
.fb-audit__detail { color: var(--text-muted); font-size: 11.5px; overflow-wrap: anywhere; }
/* -- kantoordossiers / kantoordossier -- */
.fb-tegels--kantoor { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fb-tegels--kantoor .fb-tegel:hover { border-color: var(--accent); }
.fb-tegels--kantoor .fb-tegel__kop { flex-direction: row; align-items: center; gap: 10px; }
.fb-tegel__naam { font-size: 15px; font-weight: 800; }
.fb-kdossier__vorm { align-items: flex-end; margin: 0 0 14px; }
.fb-kdossier__vorm textarea { min-width: 280px; flex: 1 1 340px; font-size: 13px; padding: 7px 9px; min-height: 64px; resize: vertical; }
.fb-kdossier__vorm input, .fb-kdossier__vorm select { padding: 7px 9px; font-size: 13px; width: auto; }
.fb-kdossier__aant { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 11px 14px; margin-bottom: 9px; background: var(--surface-1); }
.fb-kdossier__aant--waarschuwing { border-left-color: var(--st-critical); }
.fb-kdossier__aant--compliment { border-left-color: var(--delta-good); }
.fb-kdossier__kop { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.fb-kdossier__weg { margin-left: auto; }
.fb-kdossier__tekst { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
/* -- team (managementteam) -- */
.fb-team__match { font-size: 13px; margin-bottom: 16px; }
.fb-team__match .fb-icoon { vertical-align: -3px; }
.fb-team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin-bottom: 16px; }
.fb-mgr { border-left: 4px solid var(--border); min-width: 0; }
.fb-mgr--aan { border-left-color: var(--st-good); }
.fb-mgr--dir { border-left-color: #d4a73c; }
.fb-mgr__foto { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; float: right; margin: 0 0 6px 10px; border: 3px solid var(--border); background: #dfe4ea; }
.fb-mgr--aan .fb-mgr__foto { border-color: var(--st-good); }
.fb-mgr--dir .fb-mgr__foto { border-color: #d4a73c; }
.fb-mgr__naam { font-size: 15px; margin: 0 0 2px; line-height: 1.35; }
.fb-mgr__naam .fb-icoon { vertical-align: -2px; margin-right: 2px; }
.fb-mgr__naam .fb-badge { margin-left: 6px; vertical-align: 2px; }
.fb-mgr__rol { font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.fb-mgr__cijfers { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; margin-bottom: 10px; }
.fb-mgr__cijfers b { font-size: 15px; }
.fb-mgr__cijfers .fb-mgr__rood b { color: var(--st-warning-tekst); }
.fb-mgr__signaal { font-size: 11.5px; color: var(--st-warning-tekst); margin-bottom: 10px; }
.fb-mgr__voet { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fb-mgr__voet form { margin: 0; }
.fb-mgr__wachtrij { border: 1.5px solid var(--st-warning); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.fb-mgr__wachtrij-rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--grid); font-size: 12.5px; }
.fb-mgr__wachtrij-knop { margin-left: auto; }
table.fb-team__log td { white-space: normal; max-width: none; }
.fb-team__log-wanneer { width: 130px; } .fb-team__log-actie { width: 220px; }
/* -- datacheck -- */
.fb-datacheck__score { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.fb-datacheck__getal { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fb-datacheck__tekst { flex: 1; min-width: 220px; font-size: 13px; }
.fb-datacheck__auto { margin: 6px 0 0; padding-left: 20px; font-size: 12.5px; font-weight: 400; }
.fb-datacheck__datum { min-width: 88px; font-size: 12.5px; }
.fb-datacheck__bedrag { min-width: 80px; }
.fb-datacheck__oms { flex: 1; min-width: 160px; font-size: 12.5px; }
.fb-datacheck__keuze { width: 210px; }
.fb-datacheck__info { font-size: 12.5px; line-height: 1.8; margin-top: 6px; }
.fb-datacheck__info .fb-icoon { vertical-align: -2px; }
.fb-datacheck__opruim { gap: 10px; padding: 9px 0; }
.fb-datacheck__aantal { min-width: 36px; text-align: center; font-size: 16px; }
/* -- datakwaliteit -- */
.fb-dk__score { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.fb-dk__tellers { display: flex; gap: 14px; align-items: center; font-size: 30px; font-weight: 800; white-space: nowrap; }
.fb-dk__tellers .fb-stip { width: 16px; height: 16px; vertical-align: 0; margin-right: 4px; }
.fb-dk__nvt { color: var(--text-muted); font-size: 18px; }
.fb-dk__stand { font-size: 30px; font-weight: 800; white-space: nowrap; }
.fb-dk__tekst { flex: 1; min-width: 240px; font-size: 13px; }
table.fb-dk__tabel td, table.fb-dk__lijst td { max-width: none; vertical-align: middle; }
table.fb-dk__tabel td:nth-child(2) { white-space: normal; min-width: 240px; }
table.fb-dk__lijst td:nth-child(2) { white-space: normal; min-width: 200px; }
.fb-dk__trend { text-align: center; }
.fb-dk__rijform { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.fb-dk__rijform select { width: auto; font-size: 12.5px; padding: 4px 8px; }
/* -- vakantiedagen -- */
.fb-vk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.fb-vk__kaart { padding: 18px 20px; }
.fb-vk__naam { font-size: 17px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.fb-vk__cijfers { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; text-align: center; }
.fb-vk__cijfers .fb-cijfer { padding: 8px 4px; background: color-mix(in srgb, var(--series-1) 6%, transparent); }
.fb-vk__cijfers .fb-cijfer__waarde { font-size: 19px; }
.fb-vk__cijfers .fb-cijfer__label { font-size: 10px; }
.fb-vk__rest { background: color-mix(in srgb, var(--st-good) 12%, transparent) !important; }
.fb-vk__rest .fb-cijfer__waarde { font-size: 23px; }
.fb-vk__rest--negatief { background: color-mix(in srgb, var(--st-critical) 14%, transparent) !important; }
.fb-vk__balk { height: 9px; border-radius: 99px; background: var(--border); overflow: hidden; margin-bottom: 14px; }
.fb-vk__balk > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--series-1), #e2a71d); }
.fb-vk__samen { margin: 0 0 10px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.55; background: color-mix(in srgb, var(--series-1) 7%, transparent); }
.fb-vk__samen b { font-size: 13.5px; }
.fb-vk__samen .fb-icoon { vertical-align: -2px; }
.fb-vk__opname { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 5px 8px; border-radius: 8px; margin-bottom: 3px; background: color-mix(in srgb, var(--series-1) 5%, transparent); }
.fb-vk__periode { flex: 1; }
.fb-vk__dagen { font-weight: 800; white-space: nowrap; }
.fb-vk__oms { color: var(--text-muted); font-size: 12px; }
.fb-vk__opname .fb-ikoonknop { color: var(--text-muted); align-self: center; }
.fb-vk__opname .fb-ikoonknop:hover { color: var(--st-critical); }
.fb-vk__vorm { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); align-items: flex-start; }
.fb-vk__vorm input { font-size: 13px; }
.fb-vk__regel { display: flex; gap: 7px; align-items: center; width: 100%; }
.fb-vk__regel input { flex: 1; }
.fb-vk__label { font-size: 11.5px; color: var(--text-muted); font-weight: 700; width: 26px; flex: none; }
.fb-vk__regel input.fb-vk__aantal { flex: none; width: 90px; }
.fb-vk__opbouw { margin-top: 10px; font-size: 12.5px; }
.fb-vk__opbouw summary { cursor: pointer; font-weight: 700; color: var(--text-secondary); }
.fb-vk__opbouw summary .fb-icoon { vertical-align: -2px; }
.fb-vk__opbouw table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.fb-vk__opbouw th { text-align: right; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 0 4px 4px; font-weight: 700; border: 0; }
.fb-vk__opbouw th:first-child, .fb-vk__opbouw td:first-child { text-align: left; }
.fb-vk__opbouw td { text-align: right; padding: 3px 4px; border-top: 1px solid var(--border); border-bottom: 0; }
.fb-vk__opbouw tr.nu td { font-weight: 800; background: color-mix(in srgb, var(--series-1) 10%, transparent); }
.fb-vk__opbouw tr.leeg td { color: var(--text-muted); }
.fb-vk__opbouw td.min { color: var(--st-critical); font-weight: 700; }
.fb-vk__recht { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.fb-vk__recht summary { cursor: pointer; font-weight: 600; }
.fb-vk__recht form { display: flex; gap: 7px; align-items: end; margin-top: 8px; flex-wrap: wrap; }
.fb-vk__recht label { margin: 0; font-size: 11px; }
.fb-vk__recht input { width: 80px; font-size: 13px; }
.fb-vk__recht input[type=date] { width: 135px; }
@media (max-width: 760px) { .fb-vk__grid { grid-template-columns: 1fr; } .fb-vk__kaart { padding: 14px; } }
/* -- notionsync -- */
.fb-notion__form label { margin-top: 12px; }
.fb-notion__vink { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 500; }
.fb-notion__vink input { width: auto; margin: 0; }
/* -- signalen -- */
.fb-sig .fb-kaart__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.fb-sig .fb-subkop { margin-bottom: 8px; }
.fb-sig table.lijst td { white-space: normal; max-width: none; }
.fb-sig table.lijst td.fb-kritiek, .fb-sig table.lijst td.fb-nowrap { white-space: nowrap; }
.fb-sig__alles { display: flex; gap: 6px; align-items: center; font-size: 12px; margin: 0 0 6px; font-weight: 500; }
.fb-sig__alles input { width: auto; margin: 0; }
@media (max-width: 900px) { .fb-sig__grid { grid-template-columns: 1fr; } }
/* -- chat (medewerkerchat + whatsapplog): de wa-*-klassen zijn JS-ankers en blijven; alleen de stijl staat nu hier -- */
.wa-vlak { display: flex; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface-1); height: calc(100vh - 220px); min-height: 440px; }
.wa-lijst { width: 285px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; }
.wa-c { display: block; padding: 11px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.wa-c:hover { background: color-mix(in srgb, var(--st-good) 6%, transparent); }
.wa-c.actief { background: color-mix(in srgb, var(--st-good) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.wa-naam { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.wa-naam .wie { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-naam .tijd { margin-left: auto; font-weight: 400; font-size: 10.5px; color: var(--text-muted); flex-shrink: 0; }
.wa-prev { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.wa-tel { flex: none; background: var(--st-critical); color: #fff; border-radius: 99px; min-width: 18px; text-align: center; padding: 0 5px; font-size: 10.5px; font-weight: 700; }
.wa-tel--kop { font-size: 11px; padding: 1px 8px; }
.wa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-good); flex-shrink: 0; }
.wa-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wa-chatkop { padding: 11px 18px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wa-chatkop__naam { font-size: 14px; }
.wa-chatkop__acties { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.wa-wacht { font-size: 11.5px; color: var(--delta-good); font-weight: 700; margin-left: auto; }
.wa-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.wa-body > :first-child { margin-top: auto; }   /* berichten plakken onderaan */
.wa-dag { align-self: center; font-size: 10.5px; color: var(--text-muted); background: var(--surface-2); padding: 2px 10px; border-radius: 10px; margin: 8px 0 4px; }
.wa-b { max-width: 70%; padding: 7px 11px; border-radius: 13px; font-size: 13px; line-height: 1.45; word-break: break-word; }
.fb-chat--wa .wa-b { white-space: pre-wrap; }
.wa-tekst { display: block; white-space: pre-wrap; }   /* alleen de berichttekst houdt regeleindes (medewerkerchat) */
.wa-b details div { white-space: pre-wrap; }
.wa-b.hun, .wa-b.in { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.wa-b.ons, .wa-b.uit { align-self: flex-end; border-bottom-right-radius: 4px; background: color-mix(in srgb, var(--st-good) 15%, var(--surface-2)); }
.wa-meta { font-size: 10px; color: var(--text-secondary); margin-top: 3px; text-align: right; white-space: nowrap; }
.wa-vert { display: inline; }
.wa-vert summary { display: inline; font-size: 12px; cursor: pointer; list-style: none; opacity: .55; }
.wa-vert summary::-webkit-details-marker { display: none; }
.wa-vert[open] summary { opacity: 1; }
.wa-vert div { font-size: 12px; color: var(--text-muted); margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); text-align: left; white-space: pre-wrap; }
.wa-meta .knopje { font-size: 12px; opacity: .45; text-decoration: none; }
.wa-meta .knopje:hover { opacity: 1; }
.wa-meta form.fb-inline { margin: 0; }
.wa-voet { border-top: 1px solid var(--border); padding: 11px 14px; }
.wa-voet form { display: flex; gap: 9px; align-items: flex-end; margin: 0; }
.wa-voet textarea { flex: 1; resize: none; height: 44px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: inherit; font: inherit; font-size: 13px; }
.wa-voet form > .knop { padding: 11px 18px; display: inline-flex; align-items: center; gap: 4px; }
.wa-dicht { font-size: 12.5px; color: var(--text-muted); background: var(--surface-2); border-radius: 12px; padding: 10px 14px; }
.wa-dicht .fb-icoon { vertical-align: -2px; }
.knopje { background: none; border: 0; padding: 0; font: inherit; font-size: 10px; color: var(--text-muted); cursor: pointer; text-decoration: underline; }
@media (min-width: 900px) { .fb-chat--medewerkers .wa-voet form.stuur { padding-right: 56px; } }
/* telefoon: één ding tegelijk — óf de lijst, óf het gesprek. Een open gesprek neemt het hele scherm (medewerkerchat). */
.wa-terug { display: none; }
.wa-kort { display: none; }
@media (max-width: 760px) {
  .wa-vlak { flex-direction: column; height: calc(100dvh - 210px); min-height: 280px; border-radius: 12px; }
  .fb-chat--wa.wa-vlak { height: calc(100vh - 200px); min-height: 0; }
  .wa-lijst { width: 100%; border-right: 0; flex: 1; }
  .wa-vlak:not(.chat-open) .wa-chat { display: none; }
  .fb-chat--medewerkers.wa-vlak.chat-open { position: fixed; inset: 0; z-index: 1200; height: 100dvh; border: 0; border-radius: 0; }
  .wa-vlak.chat-open .wa-lijst { display: none; }
  .wa-b { max-width: 88%; }
  .fb-chat--medewerkers .wa-b { font-size: 14px; }
  .wa-chatkop { padding: 10px 12px; gap: 8px; }
  .wa-chatkop b { font-size: 13.5px; }
  .wa-terug { display: inline-block; font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--link); margin-right: 2px; }
  .fb-chat--medewerkers .wa-terug { font-size: 19px; line-height: 1; padding: 2px 4px 0 0; font-weight: 800; }
  .wa-lang { display: none; }
  .wa-terugtekst { display: none; }         /* alleen het pijltje: scheelt een regel */
  .wa-kort { display: inline; }
  .wa-uitleg { display: none; }
  .fb-chat--medewerkers .wa-voet { padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); }
  .fb-chat--medewerkers .wa-voet textarea { font-size: 16px; height: 46px; }
  .fb-chat--medewerkers .wa-voet form.stuur .knop { width: 52px; height: 46px; padding: 0; border-radius: 12px; justify-content: center; }
  .fb-chat--wa .wa-voet { padding-bottom: 74px; }   /* ruimte voor de zweefknoppen */
  /* het menu en de zweefknoppen van FlexBase liggen anders over de chat heen */
  body.chat-vol { overflow: hidden; }
  body.chat-vol #vszweef, body.chat-vol #huurzweef, body.chat-vol #doszweef,
  body.chat-vol #kchatzweef, body.chat-vol #melddoos { display: none; }
}
.fb-chat { display: flex; }
/* -- opdrachtgevers -- */
.fb-og__gesprek { padding: 14px 16px; margin-bottom: 12px; }
.fb-og__summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-og__berichten { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.fb-og__bubbel { align-self: flex-start; max-width: 75%; border-radius: 10px; padding: 7px 11px; font-size: 13px; background: var(--surface-2); }
.fb-og__bubbel--hfs { align-self: flex-end; background: color-mix(in srgb, var(--st-good) 14%, transparent); }
.fb-og__meta { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.fb-og__antwoord { margin-top: 10px; }
.fb-og__antwoord input.fb-og__tekst { flex: 1; min-width: 260px; width: auto; }
.fb-og__koppel { min-width: 220px; width: auto; }
table.fb-og__tabel td { white-space: normal; max-width: none; vertical-align: middle; }
table.fb-og__accounts td { vertical-align: middle; }
table.fb-og__tabel td.fb-nowrap { white-space: nowrap; }
.fb-og__wwform { display: inline-flex; gap: 6px; align-items: center; margin: 0 8px 0 0; }
.fb-og__ww { width: 150px; padding: 4px 8px; font-size: 12px; }
tr.fb-og__factuurmail td { padding: 2px 12px 12px; }
tr.fb-og__factuurmail:hover td { background: transparent; }
.fb-og__factuurform { font-size: 12px; gap: 7px; }
.fb-og__factuurform input.fb-og__mail { width: 230px; padding: 4px 8px; font-size: 12px; }
.fb-og__factuurform .fb-icoon { vertical-align: -2px; }
/* -- vacatures -- */
.fb-vac__form { align-items: flex-end; margin: 0 0 16px; }
.fb-vac__form label.fb-vac__veld { font-size: 12.5px; display: block; margin: 0; color: var(--text-secondary); }
.fb-vac__form .fb-vac__veld input, .fb-vac__form .fb-vac__veld select { width: 100%; font-size: 13px; padding: 7px 10px; margin-top: 3px; }
.fb-vac__veld--bedrijf { flex: 1.4; min-width: 190px; } .fb-vac__veld--plaats { flex: 1; min-width: 130px; } .fb-vac__veld--functie { flex: 1.2; min-width: 150px; }
.fb-vac__veld--taal { width: 150px; } .fb-vac__veld--datum { width: 140px; } .fb-vac__veld--aantal { width: 90px; } .fb-vac__veld--wie { width: 160px; } .fb-vac__veld--vink { width: auto; }
.fb-vac__vinkknop { display: flex; gap: 5px; align-items: center; font-weight: 700; cursor: pointer; border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; white-space: nowrap; margin-top: 3px; background: var(--surface-1); }
.fb-vac__form .fb-vac__vinkknop input { width: auto; margin: 0; }
.fb-vac__sub { color: var(--text-muted); font-size: 11.5px; }
.fb-vac__tip { flex-basis: 100%; }
.fb-vac__rij { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.fb-vac__rij:last-child { border-bottom: 0; }
.fb-vac__rij--vervuld, .fb-vac__rij--klaar { opacity: .75; }
.fb-vac__inhoud-form { display: contents; }
.fb-vac__tekst { flex: 1; min-width: 0; }
.fb-vac__tekst .fb-icoon { vertical-align: -1px; }
.fb-vac__tekst form.fb-inline { margin: 0; }
.fb-vac__vink { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--border); background: none; cursor: pointer; flex: none; font-size: 11px; line-height: 1; color: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.fb-vac__vink:hover { border-color: var(--delta-good); color: var(--delta-good); }
.fb-vac__vink--aan { border-color: var(--delta-good); color: #fff; background: var(--delta-good); }
.fb-vac__vink--half { color: var(--accent); border-color: var(--accent); font-size: 10px; font-weight: 800; }
.fb-vac__n { border-radius: 999px; padding: 1px 10px; font-size: 11.5px; font-weight: 800; background: color-mix(in srgb, var(--accent) 22%, transparent); flex: none; }
.fb-vac__n--leeg { background: none; border: 1px solid var(--border); }
.fb-vac__x { border: 0; background: none; cursor: pointer; color: var(--text-muted); flex: none; padding: 2px 6px; display: inline-flex; align-items: center; }
.fb-vac__x:hover { color: var(--st-critical); }
.fb-vac__x--klein { padding: 0 3px; vertical-align: middle; }
.fb-vac__dl { border-radius: 999px; padding: 1px 10px; font-size: 11.5px; font-weight: 800; flex: none; border: 1px solid var(--border); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.fb-vac__dl--laat { border-color: var(--st-critical); color: var(--st-critical); background: color-mix(in srgb, var(--st-critical) 12%, transparent); }
.fb-vac__klaar { margin-top: 16px; }
.fb-vac__klaar-kop { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.fb-vac__klaar-kop .fb-icoon { vertical-align: -2px; }
.fb-dialoog--vac { width: min(440px, 94vw); }
.fb-dialoog--vac h2 { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.fb-dialoog--vac label.fb-vac__dlglabel { font-size: 12.5px; display: block; margin-top: 12px; }
.fb-dialoog--vac label.fb-vac__dlglabel select { width: 100%; font-size: 13px; padding: 6px; margin-top: 3px; }
.fb-dialoog--vac .fb-dialoog__acties { margin-top: 14px; }
.fb-vac__dlgvelden { display: grid; gap: 8px; margin-top: 12px; }
.fb-vac__dlgvelden label { margin: 0; }
.fb-vac__dlgvelden input, .fb-vac__dlgvelden select { width: 100%; }
.fb-vac__dlgvink { display: flex; gap: 6px; align-items: center; font-weight: 700; }
.fb-vac__dlgvink input { width: auto; margin: 0; }
@media (max-width: 760px) { .fb-vac__veld--taal, .fb-vac__veld--datum, .fb-vac__veld--aantal, .fb-vac__veld--wie { width: auto; flex: 1 1 120px; }
  .fb-vac__rij { flex-wrap: wrap; gap: 8px 10px; } .fb-vac__tekst { flex-basis: calc(100% - 38px); } }
/* -- zoekopdracht -- */
.fb-zo__meta { color: var(--text-muted); font-size: 13px; margin: -8px 0 14px; }
.fb-zo__meta .fb-icoon { vertical-align: -2px; }
.fb-zo__notities { font-size: 13px; margin-top: 4px; color: var(--text-primary); }
.fb-zo__sterren { color: var(--accent); display: inline-flex; gap: 1px; }
table.fb-zo__tabel td { white-space: normal; max-width: none; vertical-align: middle; }
.fb-zo__notitie { font-size: 12.5px; color: var(--text-secondary); max-width: 220px; }
.fb-zo__statusknoppen { display: flex; gap: 5px; flex-wrap: wrap; margin: 0; }
.fb-zo__upload { margin: 0; }
.fb-zo__veld { flex: 1; min-width: 180px; }
.fb-zo__veld--breed { flex: 2; min-width: 220px; }
.fb-zo__veld label { margin-top: 0; }

/* ===== F1.8c — Bedrijven & Sales-rest (crm, pipeline, werklijst, salesmonitor, analyse, jachtkaart, vacature-radar, mailreacties, lead,
   sales_bedrijf, sales_observatie, marketing_meta(+lead), funnel, googleads, linkedin, ai_assistent); alleen de schil ===== */
/* -- generieke breedtes (naast .fb-v-145 uit F1.8a) -- */
.fb-v-70 { width: 70px; } .fb-v-80 { width: 80px; } .fb-v-100 { width: 100px; } .fb-v-150 { width: 150px; } .fb-v-160 { width: 160px; } .fb-v-170 { width: 170px; }
.fb-bewerkblok input.fb-v-70, .fb-bewerkblok input.fb-v-100, .fb-bewerkblok input.fb-v-150, .fb-bewerkblok input.fb-v-160, .fb-bewerkblok input.fb-v-170 { width: auto; }
.fb-bewerkblok input.fb-v-70 { width: 70px; } .fb-bewerkblok input.fb-v-100 { width: 100px; } .fb-bewerkblok input.fb-v-150 { width: 150px; } .fb-bewerkblok input.fb-v-160 { width: 160px; } .fb-bewerkblok input.fb-v-170 { width: 170px; }
/* -- crm -- */
.fb-crm__zoek { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.fb-crm__zoek input { padding: 8px 12px; min-width: 250px; width: auto; font-size: 13.5px; }
.fb-crm__chips .knop b { font-weight: 800; margin-left: 2px; }
.fb-crm__chips .knop.fb-crm__vuur.fb-actief { background: color-mix(in srgb, var(--st-critical) 10%, transparent); border-color: var(--st-critical); color: var(--st-critical); }
table.fb-crm__tabel td { white-space: normal; max-width: none; vertical-align: top; }
table.fb-crm__tabel td.fb-crm__c, table.fb-crm__tabel th.fb-crm__c { text-align: center; }
.fb-crm__naam { font-weight: 700; }
.fb-crm__sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.fb-crm__acties, table.fb-crm__tabel td.fb-crm__acties { white-space: nowrap; text-align: right; }
.fb-crm__acties .fb-ikoonknop { padding: 4px 6px; border-radius: 8px; text-decoration: none; color: var(--link); }
.fb-crm__acties .fb-ikoonknop:hover { background: color-mix(in srgb, var(--series-1) 12%, transparent); }
tr.fb-crm__ninv:hover td { background: transparent; }
.fb-crm__nvorm { margin: 4px 0; background: color-mix(in srgb, var(--series-1) 5%, transparent); }
.fb-crm__nvorm input, .fb-crm__nvorm select { width: auto; font-size: 13px; padding: 7px 10px; }
.fb-crm__nvorm input.fb-crm__notitie { flex: 1; min-width: 170px; }
td.fb-crm__leegcel { padding: 0; }
@media (max-width: 720px) {
  table.fb-crm__tabel thead { display: none; }
  table.fb-crm__tabel tr[hidden] { display: none; }
  table.fb-crm__tabel td:nth-child(3):not([colspan])::before { content: "Laatste contact: "; color: var(--text-muted); font-size: 12px; }
  table.fb-crm__tabel td:nth-child(5) { text-align: left; }
  table.fb-crm__tabel td:nth-child(5)::before { content: "Aan het werk: "; color: var(--text-muted); font-size: 12px; }
  table.fb-crm__tabel, table.fb-crm__tabel tbody, table.fb-crm__tabel tr, table.fb-crm__tabel td { display: block; width: 100%; box-sizing: border-box; }
  table.fb-crm__tabel tr { border: 1px solid var(--border); border-radius: 12px; margin: 8px; width: auto; background: var(--surface-1); padding: 6px 4px; }
  table.fb-crm__tabel tr.fb-crm__ninv { border: 0; background: none; padding: 0; }
  table.fb-crm__tabel td { border-bottom: 0; padding: 5px 12px; }
  .fb-crm__acties { text-align: left; }
  .fb-crm__zoek input { min-width: 0; width: 100%; }
  .fb-crm__zoek { width: 100%; }
  .fb-kaart--tabel table.fb-crm__tabel td:first-child, .fb-kaart--tabel table.fb-crm__tabel th:first-child { position: static; box-shadow: none; max-width: none; background: transparent; }
}
/* -- pipeline -- */
.fb-pipeline { display: grid; grid-template-columns: repeat(6, minmax(230px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.fb-pipeline__kolom { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.fb-pipeline__kop { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin: 2px 4px 2px; display: flex; align-items: center; gap: 6px; }
.fb-pipeline__kolom--won .fb-pipeline__kop { color: var(--delta-good); } .fb-pipeline__kolom--lost .fb-pipeline__kop { color: var(--st-critical); }
.fb-pipeline__tot { font-size: 11px; color: var(--text-muted); margin: 0 4px 8px; }
.fb-pipeline__kans { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; background: var(--page); }
.fb-pipeline__titel { font-weight: 600; font-size: 13px; }
.fb-pipeline__klant { font-size: 12px; color: var(--text-secondary); }
.fb-pipeline__waarde { font-size: 12px; font-weight: 600; margin-top: 2px; }
.fb-pipeline__acties { display: flex; gap: 6px 10px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.fb-pipeline__acties a, .fb-pipeline__acties button { font-size: 11px; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.fb-pipeline__acties button.fb-pipeline__won { color: var(--delta-good); }
.fb-pipeline__leeg { color: var(--text-muted); padding: 12px; font-size: 12px; text-align: center; }
@media (max-width: 700px) { .fb-pipeline { display: flex; flex-direction: column; align-items: stretch; overflow: visible; } }
/* -- werklijst -- */
.fb-wl__sectiekop { margin: 4px 0 10px; }
.fb-wl__sectiekop h2 { display: flex; align-items: center; gap: 8px; }
.fb-wl__nieuw { margin-left: auto; }
.fb-wl__nieuw > summary { list-style: none; cursor: pointer; display: inline-block; }
.fb-wl__nieuw > summary::-webkit-details-marker { display: none; }
.fb-wl__nieuwvorm { margin-top: 8px; min-width: 320px; }
.fb-wl__nieuwgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; }
.fb-wl__nieuwgrid input, .fb-wl__nieuwgrid select { font-size: 12.5px; padding: 5px 8px; width: 100%; }
@media (max-width: 720px) { .fb-wl__nieuw { margin-left: 0; width: 100%; } .fb-wl__nieuwvorm { min-width: 0; } }
.fb-wl__kaart { margin-bottom: 10px; border-left: 4px solid var(--border); }
.fb-wl__kaart--groen { border-left-color: var(--delta-good); } .fb-wl__kaart--geel { border-left-color: var(--accent); }
.fb-wl__kaart--oranje { border-left-color: var(--st-warning); } .fb-wl__kaart--rood { border-left-color: var(--st-critical); }
.fb-wl__kaart--klaar { border-left-color: var(--series-1); }
.fb-wl__kaart--gezien { opacity: .72; }
.fb-wl__kaart--u4 { border-left-color: var(--st-critical); } .fb-wl__kaart--u3 { border-left-color: var(--st-warning); } .fb-wl__kaart--u2 { border-left-color: var(--series-1); } .fb-wl__kaart--u1 { border-left-color: var(--text-muted); }
.fb-wl__kop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-wl__naam { font-size: 15px; font-weight: 800; }
.fb-wl__tijd { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.fb-wl__meta { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.fb-wl__waarom { font-size: 13px; margin-top: 3px; }
.fb-wl__acties { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 9px 0 0; }
.fb-wl__acties input.fb-wl__notitie { flex: 1; min-width: 160px; max-width: 340px; width: auto; font-size: 12.5px; padding: 5px 9px; }
.fb-wl__notitie--breed { width: 100%; max-width: 420px; margin-top: 6px; font-size: 12.5px; padding: 5px 9px; }
.fb-wl__uitklap { margin-top: 8px; padding: 9px 11px; background: var(--surface-2); border-radius: 9px; font-size: 12.5px; }
.fb-wl__uitklap label { display: block; padding: 2px 0; margin: 0; font-weight: 500; color: var(--text-primary); }
.fb-wl__uitklap label input { width: auto; margin-right: 4px; }
.fb-wl__uitklap summary { cursor: pointer; font-weight: 700; }
.fb-wl__uitklap .fb-inlineform select { min-width: 0; font-size: 12.5px; padding: 5px 8px; }
.fb-wl__signalen { margin-top: 5px; line-height: 1.9; }
.fb-wl__signaaltekst { font-size: 12.5px; }
/* -- salesmonitor -- */
.fb-sm__manager { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-left: 4px solid var(--border); margin-bottom: 16px; }
.fb-sm__manager--aan { border-left-color: var(--st-good); }
.fb-sm__managertekst { flex: 1; min-width: 250px; }
.fb-sm__managernaam { font-size: 14px; display: block; margin-bottom: 3px; }
@media (max-width: 720px) { .fb-sm__manager > form.fb-knoppenrij { flex-basis: 100%; } }
.fb-sm__funnelstap { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.fb-sm__staaf { height: 34px; border-radius: 8px; background: var(--series-1); display: flex; align-items: center; padding: 0 12px; color: var(--op-accent); font-weight: 700; font-size: 13px; min-width: 44px; }
.fb-sm__funnellbl { width: 160px; font-size: 13px; text-align: right; color: var(--text-secondary); flex: none; }
.fb-sm__marge { font-size: 12.5px; margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.fb-sm__marge .fb-icoon { vertical-align: -2px; }
.fb-sm__mailcijfers { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.fb-sm__trend { display: flex; gap: 10px; align-items: flex-end; height: 130px; margin-top: 8px; }
.fb-sm__kolom { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fb-sm__bar { width: 70%; background: var(--series-1); border-radius: 6px 6px 0 0; min-height: 3px; }
.fb-sm__bar--aanvraag { background: var(--accent); }
.fb-sm__kolom small { font-size: 11px; color: var(--text-muted); }
.fb-sm__linkcel code { font-size: 11.5px; word-break: break-all; }
.fb-sm__instellingen { margin: 8px 0 0; font-size: 12.5px; }
.fb-sm__instellingen label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.fb-sm__instellingen input { width: auto; font-size: 12.5px; padding: 5px 8px; }
.fb-sm__dagen { display: inline-flex; flex-direction: column; gap: 4px; }
.fb-sm__dagenrij { display: flex; gap: 8px; }
.fb-sm__instellingen label.fb-sm__vink { display: inline-flex; align-items: center; gap: 4px; text-transform: none; font-weight: 500; color: var(--text-primary); }
.fb-sm__instellingen label.fb-sm__vink input { width: auto; margin: 0; }
.fb-sm__instellingen label.fb-sm__regex { flex: 1; min-width: 260px; }
.fb-sm__instellingen label.fb-sm__regex input { width: 100%; }
.fb-sm__concentratie { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.fb-sm__groot { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fb-sm__groot .fb-stip { width: 14px; height: 14px; vertical-align: 1px; }
.fb-sm__grootlbl { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 760px) { .fb-sm__funnellbl { width: 110px; font-size: 12px; } }
/* -- analyse -- */
.fb-an__advies { padding: 9px 0; border-top: 1px solid var(--grid); font-size: 13.5px; line-height: 1.55; }
.fb-an__advies:first-of-type { border-top: 0; }
table.fb-an__tabel td.num, table.fb-an__tabel th.num { text-align: right; white-space: nowrap; }
table.fb-an__tabel td { white-space: normal; max-width: none; }
.fb-an__staafkol { width: 120px; }
.fb-an__staafje { height: 10px; border-radius: 5px; background: var(--series-1); min-width: 3px; display: inline-block; vertical-align: middle; }
.fb-cijfer__waarde.fb-an__onvoldoende { font-size: 15px; }
/* -- jachtkaart (Leaflet): jk-*-klassen zijn JS-ankers (jkTeken/popup), stijl 1-op-1 verhuisd -- */
.jk-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.jk-zij { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; max-height: calc(100vh - 150px); overflow: auto; }
#jkmap { height: calc(100vh - 150px); min-height: 480px; border-radius: 14px; border: 1px solid var(--border); background: #dfe6ee; }
.jk-filter label { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 0; cursor: pointer; margin: 0; font-weight: 500; color: var(--text-primary); }
.jk-filter input { width: 15px; height: 15px; margin: 0; }
.jk-filter__scheiding { margin-top: 6px !important; border-top: 1px solid var(--border); padding-top: 8px !important; }
.jk-bol { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.jk-tel { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.jk-kop { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 5px; }
.jk-kop__aantal { font-weight: 400; text-transform: none; letter-spacing: 0; }
.jk-lijst .rij { padding: 7px 8px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.jk-lijst .rij:hover { background: var(--surface-2); border-color: var(--border); }
.jk-lijst .rij b { font-size: 13px; }
.jk-lijst .rij small { display: block; color: var(--text-muted); font-size: 11.5px; }
.jk-chip { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: #fff; vertical-align: 1px; }
.jk-zoek { width: 100%; padding: 7px 9px; font-size: 13px; margin-bottom: 6px; }
.jk-pin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.3); }
.jk-pin.klant { width: 16px; height: 16px; }
.jk-pin.plaats { opacity: .55; border-style: dashed; }
.jk-pin.signaal { box-shadow: 0 0 0 1.5px rgba(0,0,0,.3), 0 0 0 5px rgba(232,162,18,.35); animation: jkpuls 1.6s infinite; }
@keyframes jkpuls { 0%{box-shadow:0 0 0 1.5px rgba(0,0,0,.3),0 0 0 3px rgba(232,162,18,.5)} 70%{box-shadow:0 0 0 1.5px rgba(0,0,0,.3),0 0 0 10px rgba(232,162,18,0)} 100%{box-shadow:0 0 0 1.5px rgba(0,0,0,.3),0 0 0 3px rgba(232,162,18,0)} }
.leaflet-popup-content { font: 13px/1.4 inherit; min-width: 250px; color: #1f2533; }
.leaflet-popup-content h3 { margin: 0 0 4px; font-size: 15px; }
.leaflet-popup-content .m { color: #666; font-size: 12px; }
.leaflet-popup-content .buur { background: #eef7ee; border-left: 3px solid #0a7a0a; padding: 5px 8px; margin: 6px 0; font-size: 12.5px; border-radius: 4px; }
.leaflet-popup-content .sig { background: #fff6e5; border-left: 3px solid #e8a212; padding: 5px 8px; margin: 6px 0; font-size: 12.5px; border-radius: 4px; }
.leaflet-popup-content .acties { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.leaflet-popup-content .acties a, .leaflet-popup-content .acties button { font-size: 12px; padding: 4px 9px; border-radius: 7px; border: 1px solid #ccd; background: #fff; color: #1f2533; cursor: pointer; text-decoration: none; }
.leaflet-popup-content .acties .geel { background: #f4bc36; border-color: #f4bc36; font-weight: 700; }
.leaflet-popup-content pre { white-space: pre-wrap; font: 12px/1.45 inherit; background: #f5f6f8; border-radius: 8px; padding: 9px 10px; margin: 8px 0 0; max-height: 260px; overflow: auto; }
.jk-melding { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: none; z-index: 2000; }
@media (max-width: 900px) { .jk-wrap { grid-template-columns: 1fr; } .jk-zij { max-height: none; } #jkmap { height: 70vh; } }
/* -- vacature-radar -- */
.fb-rd__kaart { margin-bottom: 10px; }
.fb-rd__kop { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-rd__plaats { color: var(--text-muted); font-size: 12.5px; font-weight: 400; }
.fb-rd__sig { padding: 6px 0 0; font-size: 13px; }
.fb-rd__sig .fb-icoon { vertical-align: -2px; color: var(--st-warning-tekst); }
.fb-rd__acties { margin-top: 9px; }
.fb-rd__inst input[type=text], .fb-rd__inst input[type=password] { max-width: 340px; padding: 6px 9px; font-size: 13px; }
.fb-rd__inst label { font-size: 12.5px; margin: 8px 0 3px; color: var(--text-muted); }
.fb-rd__inst label.fb-rd__vink { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--text-primary); font-weight: 500; }
.fb-rd__inst label.fb-rd__vink input { width: auto; margin: 0; }
/* -- mailreacties -- */
.fb-mr__teller { opacity: .65; margin-left: 2px; }
.fb-mr__kaart { margin-bottom: 10px; }
.fb-mr__kop { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.fb-mr__afzender { font-size: 14px; }
.fb-mr__tijd { font-size: 11.5px; color: var(--text-muted); margin-left: auto; }
.fb-mr__onderwerp { font-size: 12.5px; margin-bottom: 4px; }
.fb-mr__tekst { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 150px; overflow: auto; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.fb-mr__acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.fb-mr__acties form { margin: 0; }
.fb-mr__acties .knop.fb-actief { background: var(--accent); color: #1f2533; border-color: var(--accent); }
.fb-mr__soort { margin-left: auto; }
.fb-mr__soort select { max-width: 180px; width: auto; font-size: 12px; padding: 4px 7px; }
.fb-mr__koppel select.fb-mr__bedrijf { max-width: 230px; min-width: 0; font-size: 12.5px; padding: 4px 7px; }
@media (max-width: 760px) { .fb-mr__soort { margin-left: 0; } }
/* -- lead -- */
.fb-ld__stappen { gap: 4px; }
.fb-ld__stap { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); }
.fb-ld__stap--aan { background: var(--series-1); color: var(--op-accent); border-color: var(--series-1); }
.fb-ld__stap--lost { background: var(--st-critical); color: #fff; border-color: var(--st-critical); }
.fb-ld__layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .fb-ld__layout { grid-template-columns: 1fr; } }
.fb-ld__gegevens { display: grid; grid-template-columns: 150px 1fr; gap: 4px 10px; font-size: 13px; margin: 0; }
.fb-ld__gegevens dt { color: var(--text-muted); font-weight: 600; }
.fb-ld__gegevens dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fb-ld__antw { font-size: 12px; white-space: pre-wrap; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.fb-ld__moment { font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--grid); }
.fb-ld__momenttijd { color: var(--text-muted); }
.fb-ld__form { padding: 10px 12px; background: var(--surface-2); border-radius: 10px; font-size: 12.5px; }
.fb-ld__form input[type=text], .fb-ld__form select, .fb-ld__form input[type=date], .fb-ld__form input[type=number] { font-size: 12.5px; padding: 5px 8px; }
.fb-ld__form label.fb-ld__inline { display: block; padding: 2px 0; margin: 4px 0 0; font-weight: 500; color: var(--text-primary); }
.fb-ld__form label.fb-ld__inline input, .fb-ld__form label.fb-ld__inline select { width: auto; display: inline-block; }
.fb-ld__form label.fb-ld__vink { display: block; padding: 2px 0; margin: 0; font-weight: 500; color: var(--text-primary); }
.fb-ld__form label.fb-ld__vink input { width: auto; margin-right: 4px; }
.fb-ld__knoppen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fb-ld__form--rij { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fb-ld__form--rij input[type=text], .fb-ld__form--rij select { width: auto; }
@media (max-width: 760px) { .fb-ld__gegevens { grid-template-columns: 1fr; gap: 0; } .fb-ld__gegevens dt { margin-top: 8px; } }
/* -- sales engine (bedrijf + observatie) -- */
.fb-se__scores { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fb-se__score { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fb-se__score--fit { font-size: 24px; }
.fb-se__status { font-size: 13px; }
.fb-se__lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin-top: 8px; }
.fb-se__tabel { width: 100%; font-size: 12.5px; } .fb-se__tabel td, .fb-se__tabel th { padding: 4px 6px; vertical-align: top; }
.fb-se__tabel--klein { font-size: 12px; }
.fb-se__tabelkaart { padding: 10px 12px; overflow-x: auto; }
.fb-se__cijfers .fb-cijfer__label { overflow-wrap: anywhere; }
.fb-se__punt { width: 44px; }
.fb-se__deel { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.fb-se__deelnaam { width: 110px; flex: none; }
.fb-se__deelwaarde { width: 30px; text-align: right; flex: none; }
.fb-se__bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; flex: 1; } .fb-se__bar i { display: block; height: 100%; background: var(--series-1); }
.fb-se__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin-top: 6px; }
.fb-se__form input, .fb-se__form select { font-size: 12.5px; padding: 5px 8px; }
.fb-se__form--uitkomst { gap: 4px; min-width: 170px; grid-template-columns: 1fr; }
.fb-se__form label.fb-se__vink { display: flex; align-items: center; gap: 5px; font-size: 12px; margin: 0; font-weight: 500; color: var(--text-primary); }
.fb-se__form label.fb-se__vink input { width: auto; margin: 0; }
tr.fb-se__verlopen { opacity: .5; }
.fb-se__meldform { display: grid; grid-template-columns: 1fr 2fr auto; gap: 6px; margin-top: 8px; }
.fb-se__meldform input { font-size: 12.5px; padding: 5px 8px; }
.fb-se__voet { margin-top: 6px; }
.fb-badge--zeer_sterk { background: var(--st-critical); color: #fff; } .fb-badge--sterk { background: var(--st-serious); color: #fff; }
.fb-badge--zwak, .fb-badge--matig { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
@media (max-width: 760px) { .fb-se__meldform { grid-template-columns: 1fr; } }
/* -- marketing_meta(+lead) -- */
.fb-mm__inst { margin: 0; }
.fb-mm__inst label { margin: 0 0 3px; }
.fb-mm__inst input, .fb-mm__inst select { width: auto; font-size: 12.5px; padding: 5px 8px; }
.fb-mm__instvoet { flex-basis: 100%; }
.fb-mm__filter { margin: 0 0 8px; }
.fb-mm__periode { margin-top: 8px; }
.fb-mm__periode input[type=date] { margin: 0; }
.fb-mm__periode label.fb-mm__vink { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; font-weight: 500; color: var(--text-primary); }
.fb-mm__periode label.fb-mm__vink input { width: auto; margin: 0; }
.fb-mm__funnel { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.fb-mm__tabel { width: 100%; font-size: 11.5px; border-collapse: collapse; }
.fb-mm__tabel th, .fb-mm__tabel td { padding: 4px 5px; white-space: nowrap; text-align: right; }
.fb-mm__tabel td:first-child, .fb-mm__tabel th:first-child, .fb-mm__tabel td:nth-child(2), .fb-mm__tabel th:nth-child(2) { text-align: left; white-space: normal; }
.fb-mm__tabel--links th, .fb-mm__tabel--links td { text-align: left; }
.fb-mm__tabel td.fb-mm__wrap { white-space: normal; }
.fb-mm__tabel td.fb-mm__leeg { text-align: left; color: var(--text-muted); white-space: normal; }
.fb-mm__tabel form { margin: 0; }
.fb-mm__code { font-size: 11.5px; word-break: break-all; }
.fb-mm__stappen { margin: 0 0 12px; }
.fb-mm__stappen span { padding: 5px 9px; border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.fb-mm__stappen span.fb-mm__stap--ja { background: var(--st-good); color: #fff; }
.fb-mm__t { width: 100%; font-size: 12px; } .fb-mm__t td, .fb-mm__t th { padding: 4px 6px; vertical-align: top; text-align: left; overflow-wrap: break-word; }
.fb-mm__t th { white-space: nowrap; }
/* -- funnel / googleads (statische plannen) -- */
.fb-gads h2.fb-sectiekop { color: var(--link); margin-top: 26px; }
.fb-gads .kaart { margin-bottom: 16px; }
table.fb-gads__tabel { font-size: 13.5px; }
table.fb-gads__tabel th { border-bottom: 2px solid var(--text-primary); }
table.fb-gads__tabel td { padding: 7px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; white-space: normal; max-width: none; }
.fb-gads__lijst li { margin-bottom: 8px; }
.fb-gads__auto { color: var(--delta-good); font-weight: 700; font-size: 12px; }
.fb-gads__zelf { color: var(--st-warning-tekst); font-weight: 700; font-size: 12px; }
.fb-gads code, .fb-gads__kop { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-family: ui-monospace, monospace; font-size: 12.5px; }
.fb-gads__kop { display: inline-block; margin: 3px 4px 3px 0; }
.fb-gads__let { margin: 0 0 16px; font-size: 13.5px; }
.fb-gads .fb-stap { font-size: 13.5px; }
.fb-gads .fb-stap__nr { width: 28px; height: 28px; line-height: 28px; font-size: 13px; }
/* -- linkedin -- */
.fb-li__kop { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.fb-li__kop .fb-avatar { width: 74px; height: 74px; }
.fb-li__cijfers { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.fb-li__cijfers b { font-size: 17px; }
.fb-li__post { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.fb-li__post--actief { border: 2px solid var(--st-good); }
.fb-li__posttitel { font-size: 13.5px; margin: 0 0 2px; }
.fb-li__doel { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; }
.fb-li__post textarea { width: 100%; min-height: 190px; font-size: 12.5px; line-height: 1.5; font-family: inherit; resize: vertical; }
.fb-li__kopieer { margin-top: 8px; }
.fb-li__budget label.fb-li__budgetlbl { margin: 0; font-size: 12.5px; }
.fb-li__budget input.fb-v-80 { width: 80px; }
/* -- ai_assistent: ai-*-klassen zijn JS-ankers (bubbel/chips), stijl verhuisd -- */
.fb-ai { max-width: 760px; margin: 0 auto; }
.fb-ai__kaart { padding: 0; }
.ai-log { display: flex; flex-direction: column; gap: 10px; padding: 18px; min-height: 300px; }
.ai-b { max-width: 85%; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.ai-b.van-mij { align-self: flex-end; background: #1c2733; color: #fff; border: 1px solid #35455a; }
.ai-b.van-bot { align-self: flex-start; background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 6px; }
.ai-chip { border: 1px solid var(--border); background: none; border-radius: 99px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; color: inherit; font: inherit; }
.ai-chip:hover { border-color: var(--accent); }
.ai-vorm { display: flex; gap: 8px; padding: 12px 18px 18px; margin: 0; }
.ai-vorm input { flex: 1; font-size: 14px; padding: 10px 14px; }

/* ===== F1.8d — uren-, geld- en backoffice-rest (urenimport, urenmails, strokenimport, weekstaat, facturen_bulk,
   factuur_mail_controle, factuurupload, archieffactuur, klantfacturen, bankcontrole, bankimport, bankkoppeling, boekhouder,
   snelstartsync, snelstart_dubbelen, kostprijs, looncheck, loonstrook, loonstroken, beloningimport, overuren_afspraken, fout).
   Alleen de schil: 15 lokale <style>-blokken en ±350 inline styles zijn hierheen verhuisd; geen reken- of statuslogica. ===== */
.fb-kop__acties .fb-weeknav { margin: 0; }
.fb-kop__acties .fb-cijfer { padding: 8px 14px; }
/* -- urenimport -- */
.fb-ui__vorm { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 8px; }
.fb-ui__vorm label { margin: 0 0 4px; }
.fb-ui__vorm select, .fb-ui__vorm input { width: auto; }
.fb-ui__vorm input[type=file] { max-width: 100%; }
.weekuitleg { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; min-height: 1em; }
.fb-ui__lijst { width: 100%; font-family: inherit; }
.fb-ui__voet { justify-content: flex-end; margin-top: 10px; }
table.fb-geldtabel td input.fb-ui__smal { width: 75px; }
table.fb-geldtabel td input.fb-ui__over { font-weight: 700; color: var(--st-warning-tekst); }
td.fb-ui__ziek { font-size: 11.5px; max-width: 190px; white-space: normal; }
.fb-ui__telaat { color: var(--st-warning-tekst); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
table.fb-ui__tabel select { width: auto; max-width: 230px; }
/* -- urenmails -- */
.fb-um__upload { cursor: pointer; }
.fb-um__kaart { margin-bottom: 10px; }
.fb-um__kaart--geboekt { border-left: 4px solid var(--st-good); }
.fb-um__kaart--deels, .fb-um__kaart--wacht { border-left: 4px solid var(--st-warning); }
.fb-um__kaart--mislukt { border-left: 4px solid var(--st-critical); }
.fb-um__kop { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.fb-um__naam { font-size: 14px; overflow-wrap: anywhere; }
.fb-um__moment { font-size: 11.5px; color: var(--text-muted); margin-left: auto; }
.fb-um__tekst { font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.fb-um__foto { margin-top: 6px; font-size: 12.5px; }
.fb-um__acties { margin-top: 8px; }
.fb-um__acties form { margin: 0; }
.fb-um__erbij input[type=file] { font-size: 11px; max-width: 190px; }
.fb-um__nu { flex-basis: 100%; font-size: 12px; margin-top: 2px; }
.fb-um__form { margin-top: 10px; }
.fb-um__keuze { margin-bottom: 8px; }
.fb-um__keuze select { font-size: 12.5px; padding: 4px 7px; min-width: 0; max-width: 100%; }
.fb-um__label { font-size: 12.5px; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.fb-um__label input { font-size: 12.5px; padding: 3px 6px; width: auto; }
.fb-um__keuze label.fb-vink { font-size: 12px; font-weight: 500; }
table.fb-um__regels { font-size: 12.5px; }
table.fb-um__regels th { text-align: left; color: var(--text-muted); }
table.fb-geldtabel td input.fb-um__uren { width: 74px; font-size: 12px; padding: 3px 6px; text-align: right; }
table.fb-geldtabel td input.fb-um__over { width: 60px; font-size: 12px; padding: 3px 6px; text-align: right; }
select.fb-um__fw { font-size: 12px; padding: 3px 6px; max-width: 230px; width: auto; }
.fb-um__voet { margin-top: 8px; }
.fb-um__tip { flex: 1; min-width: 220px; margin: 0; }
/* -- strokenimport -- */
td.fb-st__vink input { width: auto; }
.fb-st__bijwerken { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 500; }
.fb-st__bijwerken input { width: auto; margin-top: 3px; }
.fb-st__boven { justify-content: flex-end; margin-bottom: 10px; }
.fb-st__onder { justify-content: flex-end; margin-top: 12px; }
.fb-st__bestand, .fb-fu__bestand { margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }
/* -- weekstaat -- */
.fb-ws__gefactureerd { color: var(--text-muted); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.fb-ws__voet { justify-content: flex-end; padding: 12px 16px; }
/* -- facturen_bulk -- */
table.fb-fb__tabel input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--st-good); }
td.fb-fb__ok { width: 90px; }
td.fb-fb__melding { white-space: normal; }
.fb-fb__pdf { margin-left: 6px; font-size: 11.5px; }
tr.fb-fb__totaal td { border-top: 2px solid var(--text-primary); }
td.fb-fb__som { font-weight: 800; font-size: 15px; }
.fb-fb__samen { margin: 14px 0 0; font-weight: 600; }
/* -- factuur_mail_controle -- */
.fb-fmc { display: grid; grid-template-columns: minmax(320px, 460px) 1fr; gap: 16px; align-items: start; }
.fb-fmc > * { min-width: 0; }
.fb-fmc__links > .kaart:last-child { margin-bottom: 0; }
.fb-fmc__dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; margin: 0 0 12px; }
.fb-fmc__dl dt { color: var(--text-muted); }
.fb-fmc__dl dd { margin: 0; overflow-wrap: anywhere; }
.fb-fmc__tekst { white-space: pre-wrap; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 12.5px; font-family: inherit; margin: 0; }
.fb-fmc__geenadres { margin: 0; flex-basis: 100%; }
.fb-fmc__pdf { padding: 8px; }
.fb-fmc__pdf iframe { width: 100%; height: 820px; border: 0; border-radius: 8px; background: #fff; display: block; }
@media (max-width: 860px) { .fb-fmc { grid-template-columns: 1fr; } .fb-fmc__pdf iframe { height: 560px; } }
/* -- factuurupload -- */
table.fb-fu__tabel td input { width: 110px; }
table.fb-fu__tabel td input.fb-fu__bedrag { text-align: right; }
table.fb-fu__tabel select { width: auto; max-width: 240px; }
.fb-fu__voet { justify-content: flex-end; margin-top: 12px; }
/* -- archieffactuur -- */
.fb-af { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.fb-af > .kaart { margin-bottom: 0; min-width: 0; }
.fb-af__rij { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; font-size: 14px; align-items: center; margin: 0; }
.fb-af__rij dt { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.fb-af__rij dd { margin: 0; }
.fb-af__bedrag { font-size: 20px; font-weight: 800; }
@media (max-width: 760px) { .fb-af { grid-template-columns: 1fr; } .fb-af__rij { grid-template-columns: 1fr; gap: 2px; } .fb-af__rij dd { margin-bottom: 8px; } }
/* -- klantfacturen (table.fk-tabel blijft het JS-anker van het zoekscript) -- */
.fb-fk__zoek { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.fb-fk__zoek input { padding: 8px 12px; min-width: 260px; font-size: 13.5px; }
table.fb-fk__tabel td { vertical-align: middle; }
td.fb-fk__leeg { padding: 24px; text-align: center; color: var(--text-muted); }
.fb-fk__niets { color: var(--delta-good); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
@media (max-width: 720px) {
  table.fk-tabel thead { display: none; }
  table.fk-tabel, table.fk-tabel tbody, table.fk-tabel tr, table.fk-tabel td { display: block; width: 100%; box-sizing: border-box; }
  table.fk-tabel tr[hidden] { display: none; }
  table.fk-tabel tr { border: 1px solid var(--border); border-radius: 12px; margin: 8px; width: auto; background: var(--surface-1); padding: 6px 4px; }
  table.fk-tabel td { border-bottom: 0; padding: 5px 12px; white-space: normal; }
  table.fk-tabel td.b { text-align: left; }
  .fb-fk__zoek, .fb-fk__zoek input { width: 100%; min-width: 0; }
}
/* -- bankcontrole -- */
td.fb-bc__acties { white-space: nowrap; }
td.fb-bc__acties form { margin: 0; }
/* -- bankimport -- */
.fb-bi__upload { border: 2px dashed var(--baseline); background: var(--surface-1); }
.fb-bi__label { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.fb-bi__weekkop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.fb-bi__weekkop .fb-weeknav { margin: 0; }
.fb-bi__open { margin-left: auto; }
.fb-bi__ja { color: var(--delta-good); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
select.fb-bi__fw { min-width: 180px; }
/* -- bankkoppeling -- */
.fb-bk__keuze { padding: 8px 0; border-top: 1px solid var(--grid); }
.fb-bk__ok { color: var(--delta-good); font-weight: 700; }
.fb-bk__gekoppeld { margin: 6px 0; display: flex; align-items: center; gap: 5px; overflow-wrap: anywhere; }
.fb-bk__sleutels input[type=text], .fb-bk__sleutels input[type=file] { flex: 1; min-width: 220px; width: auto; }
.fb-kaart__kop .fb-stap__nr { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.fb-bk__regel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--grid); }
.fb-bk__regel form { margin: 0; }
.fb-bk__boek { margin-left: auto; }
select.fb-bk__fw { max-width: 220px; min-width: 0; }
.fb-bk__weken { width: 64px; }
.fb-bk__url { overflow-wrap: anywhere; }
@media (max-width: 720px) { .fb-bi__weekkop .fb-weeknav { flex-wrap: nowrap; } .fb-bi__weekkop .fb-weeknav__titel { font-size: 13px; } }
/* -- boekhouder -- */
.fb-bh__periodes { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.fb-bh__periode { font-size: 13.5px; }
.fb-bh__auto { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
input.fb-bh__email { min-width: 230px; width: auto; }
.fb-bh__blok { margin-bottom: 14px; }
.fb-bh__kop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
table.fb-bh__tabel td, table.fb-bh__tabel th { font-size: 12.5px; padding: 5px 9px; }
/* -- snelstartsync -- */
.fb-ss__form label { margin-top: 8px; }
.fb-ss__ok { color: var(--delta-good); font-weight: 500; }
label.fb-ss__vink { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; cursor: pointer; font-weight: 500; }
label.fb-ss__vink input { width: auto; margin: 3px 0 0; }
/* -- snelstart_dubbelen -- */
.fb-sd { max-width: 780px; }
table.fb-sd__tabel { font-size: 13px; }
td.fb-sd__info { white-space: normal; }
/* -- kostprijs -- */
table.fb-kp__tabel td, table.fb-kp__tabel th { font-size: 13px; padding: 6px 12px; white-space: normal; }
tr.fb-kp__groep td { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; padding-top: 14px; border-bottom: 0; }
tr.fb-kp__sub td { font-weight: 700; background: color-mix(in srgb, var(--series-1) 7%, transparent); }
tr.fb-kp__tot td { font-weight: 800; font-size: 14px; border-top: 2px solid var(--text-primary); }
tr.fb-kp__corr td { background: color-mix(in srgb, var(--st-warning) 14%, transparent); }
.fb-kp__reken { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.fb-kp__reken label { margin: 0; }
.fb-kp__reken input { width: 130px; font-size: 15px; text-align: right; }
.fb-kp__uitkomst { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 14px; margin-top: 14px; font-size: 13.5px; align-items: center; }
.fb-kp__kopc { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.fb-kp__w { font-weight: 800; font-size: 16px; }
.fb-kp__punt { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px; }
.fb-kp__punt b { color: var(--text-primary); }
/* -- looncheck -- */
.fb-lc__wml .fb-cijfer__waarde { font-size: 22px; }
.fb-lc__kop2 { margin: 22px 0 10px; }
.fb-lc__label { margin: 0; }
.fb-lc__uitleg { max-width: 860px; }
/* -- loonstrook / loonstroken (de strook zelf blijft _strook.html + _strook_stijl.html) -- */
.fb-ls__vorm { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.fb-ls__vorm label { margin: 0 0 4px; }
.fb-ls__vorm select, .fb-ls__vorm input { width: auto; }
.fb-ls__vorm input.fb-v-70 { width: 70px; } .fb-ls__vorm input.fb-v-100 { width: 100px; }
label.fb-ls__vink { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
label.fb-ls__vink input { width: auto; }
.fb-stroken .strookvel { page-break-after: always; }
/* -- beloningimport -- */
.fb-bl__sugb { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.fb-bl__sugbkop { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fb-bl__pdf { margin-left: auto; }
.fb-bl__functies { font-size: 13px; margin: 8px 0 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.fb-bl__functies .fb-chip { padding: 3px 12px; border-radius: 999px; font-size: 12.5px; background: var(--surface-2); cursor: default; }
th.fb-bl__schaal { width: 140px; } th.fb-bl__loon { width: 110px; }
table.fb-bl__regels td input[type=text] { width: 100%; }
table.fb-bl__regels td input[type=checkbox] { width: auto; }
/* -- overuren_afspraken -- */
table.fb-oa__tabel td input { width: 74px; text-align: right; }
td.fb-oa__nu { color: var(--text-muted); font-size: 12px; white-space: normal; }
.fb-oa__straks { color: var(--delta-good); font-weight: 600; font-size: 12px; }
/* -- fout -- */
.kaart.fb-fout { padding: 28px 24px; }
.fb-fout__acties .knop { display: inline-flex; align-items: center; gap: 6px; }

/* ===== F1.11 — eindcontrole: zwevende knoppen met SVG-icoon (D5), lead op de telefoon ===== */
#auditzweef .fb-icoon, #dosknop .fb-icoon, #appzweef .fb-icoon, #kchatknop .fb-icoon { display: block; margin: 0 auto; }
/* lead: op smalle schermen mag één lange regel (bv. een tijdstip met kanaal) de kolom niet breder maken dan het scherm */
@media (max-width: 900px) { .fb-ld__layout { grid-template-columns: minmax(0, 1fr); } }
.fb-ld__moment { overflow-wrap: anywhere; }
/* telefoon: invoervelden buiten tabellen minstens 16 px, anders zoomt iOS (ook de HFS-app) bij het aantikken in en
   verspringt de pagina; dichte invoertabellen (uren, marge, weekstaat) houden hun compacte maat */
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not(table input),
  select:not(table select), textarea:not(table textarea) { font-size: 16px !important; }   /* wint van de compacte maten per scherm */
}

/* kantoorinlog (inloggen.html): voorheen een eigen <style> met 1.x-blauw en systeemlettertype; nu dezelfde tokens, letter en
   primaire knop als de rest van FlexBase 2.0. Formulier, velden en scripts ongewijzigd. */
body.fb-inlogpagina { font-size: 14px; margin: 0; position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: none;
  display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
.fb-inlogpagina .doos { margin-top: 6vh; background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 40px 40px 28px; width: 330px; max-width: 100%; box-shadow: 0 10px 30px rgba(16, 24, 40, .08); text-align: center; }
.fb-inlogpagina .doos img { height: 56px; margin-bottom: 10px; }
.fb-inlogpagina h1 { font-size: 19px; margin: 0 0 2px; letter-spacing: -.2px; }
.fb-inlogpagina .sub { color: var(--text-muted); font-size: 12.5px; margin-bottom: 26px; }
.fb-inlogpagina label { text-align: left; margin: 14px 0 5px; }
.fb-inlogpagina input { font-size: 16px; padding: 10px 12px; border-radius: 9px; }
.fb-inlogpagina form > button[type=submit] { width: 100%; margin-top: 22px; background: var(--accent); color: var(--op-accent); border: 0;
  border-radius: 9px; padding: 11px; font: inherit; font-weight: 700; cursor: pointer; }
.fb-inlogpagina form > button[type=submit]:hover { filter: brightness(.94); }
.fb-inlogpagina button[aria-label^="Wachtwoord"] { color: var(--text-primary); }
.fb-inlogpagina .fout { background: color-mix(in srgb, var(--st-critical) 12%, var(--surface-1)); color: var(--st-critical); border-radius: 8px;
  padding: 9px 12px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.fb-inlogpagina .voet { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--grid); font-size: 12px; color: var(--text-muted); line-height: 1.9; }
.fb-inlogpagina .voet a { color: var(--link); text-decoration: none; font-weight: 600; }
.fb-inlogpagina .voet a:hover { text-decoration: underline; }
.fb-inlogpagina :focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ===================================================================== G2.3 Werkplanning (/taken bij scherm_werkplanning = Aan)
   Alleen toegevoegde regels; geen bestaande regel gewijzigd. Mobiel (≤ 640px): één kolom, kaarten, bottom-sheets, 44px-raakvlakken. */
.fb-werkplanning { position: relative; }
.fb-werkplanning.fb-wp-bezig { cursor: progress; }
.fb-wp-meldingen { margin-bottom: 12px; }
.fb-wp-tabs .fb-tabs { margin-bottom: 14px; }
.fb-wp-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.fb-wp-lijst { list-style: none; margin: 0; padding: 0; }
.fb-wp-regels { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
.fb-wp-regels li { padding: 5px 0; border-top: 1px solid var(--grid); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fb-wp-regels li:first-child { border-top: 0; }
.fb-wp-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-top: 1px solid var(--grid); scroll-margin-top: 80px; }
.fb-wp-item:first-child { border-top: 0; }
.fb-wp-item__soort { flex: 0 0 auto; color: var(--text-secondary); padding-top: 2px; display: inline-flex; }
.fb-wp-item__inhoud { flex: 1 1 auto; min-width: 0; }
.fb-wp-item__tekst { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.fb-wp-item__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; font-size: 12px; color: var(--text-muted); align-items: center; }
.fb-wp-item__meta span { display: inline-flex; gap: 4px; align-items: center; }
.fb-wp-item__menu { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); border-radius: 9px;
  min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fb-wp-item__menu:hover, .fb-wp-item__menu:focus-visible { border-color: var(--accent); color: var(--text-primary); }
.fb-wp-item--klaar .fb-wp-item__tekst { color: var(--text-muted); text-decoration: line-through; }
.fb-wp-item--prio { border-left: 3px solid var(--st-critical); padding-left: 9px; }
.fb-wp-item--briefje { border-left: 4px solid var(--briefje-geel); padding-left: 9px; }
.fb-wp-item--briefje.fb-wp-item--rood { border-left-color: var(--st-critical); }
.fb-wp-item--briefje.fb-wp-item--blauw { border-left-color: var(--st-geregeld); }
.fb-wp-item--briefje.fb-wp-item--groen { border-left-color: var(--st-good); }
.fb-wp-item--briefje.fb-wp-item--roze { border-left-color: var(--briefje-roze); }
.fb-wp-item--notitie { border-left: 4px solid var(--baseline); padding-left: 9px; }
.fb-wp-item--taak .fb-wp-item__soort { color: var(--text-secondary); }
.fb-wp-kleur { border-left-width: 4px; }
.fb-wp-item--archief .fb-wp-item__tekst { color: var(--text-secondary); }
.fb-wp-telaat { color: var(--st-critical); font-weight: 600; }
.fb-wp-chip { padding: 2px 8px; font-size: 11.5px; border-radius: 999px; text-decoration: none; color: inherit; }
.fb-wp-opvolging { margin-top: 6px; font-size: 12.5px; }
.fb-wp-opvolging summary { cursor: pointer; color: var(--text-secondary); }
.fb-wp-opvolging ul { margin: 6px 0 0; padding-left: 16px; color: var(--text-secondary); }
.fb-wp-aandacht { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13.5px; margin: 14px 0; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.fb-wp-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; margin-bottom: 12px; }
.fb-wp-filters__binnen { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.fb-wp-filters .fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-wp-filters .fb-chip { padding: 5px 11px; font-size: 12.5px; text-decoration: none; color: inherit; }
.fb-wp-kleur--rood { border-left: 4px solid var(--st-critical); } .fb-wp-kleur--geel { border-left: 4px solid var(--accent); }
.fb-wp-kleur--blauw { border-left: 4px solid var(--st-geregeld); } .fb-wp-kleur--groen { border-left: 4px solid var(--st-good); }
.fb-wp-zoek input { width: 200px; }
.fb-wp-flex { width: 100%; }
.fb-wp-flex--vandaag td { font-weight: 700; }
.fb-wp-sheet { max-width: 480px; }
.fb-wp-sheet label { display: block; font-size: 12.5px; margin-bottom: 9px; }
.fb-wp-sheet textarea, .fb-wp-sheet input:not([type=checkbox]), .fb-wp-sheet select { display: block; width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; margin-top: 3px; }
.fb-wp-sheet .fb-wp-vink input { width: auto; display: inline; margin-right: 6px; }
.fb-wp-keuzes { display: grid; gap: 8px; }
.fb-wp-keuzes .knop { justify-content: flex-start; }
.fb-wp-menu { display: grid; gap: 2px; }
.fb-wp-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 10px 10px; border-radius: 8px;
  cursor: pointer; font: inherit; font-size: 13.5px; color: var(--text-primary); text-align: left; min-height: 44px; }
.fb-wp-menu button:hover, .fb-wp-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.fb-wp-menu button[hidden] { display: none; }
.fb-wp-menu__gevaar { color: var(--st-critical) !important; }
.fb-wp-bol { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fb-wp-bol--open { border: 2px solid var(--text-muted); } .fb-wp-bol--geregeld { background: var(--st-geregeld); } .fb-wp-bol--twijfel { background: var(--accent); }
.fb-wp-bol--gelukt { background: var(--st-good); } .fb-wp-bol--nee { background: var(--st-critical); } .fb-wp-bol--mis { background: var(--st-niet-gelukt); }
.fb-wp-week .taakkaart { cursor: pointer; }
.fb-wp-alleen-smal { display: none; }
.fb-wp-status .fb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fb-wp-status .fb-chip { padding: 5px 11px; font-size: 12.5px; text-decoration: none; color: inherit; }
@media (max-width: 640px) {
  .fb-wp-alleen-smal { display: inline-flex; }
  .fb-wp-alleen-breed { display: none; }
  p.fb-wp-alleen-smal { display: block; }
  .fb-werkplanning { padding-bottom: 96px; overflow-x: clip; }
  .fb-wp-status .fb-chip { min-height: 44px; }
  .fb-wp-aandacht a { display: inline-flex; align-items: center; }
  .fb-wp-tabs .fb-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fb-wp-tabs .fb-tabs__tab { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
  .fb-wp-twee { grid-template-columns: minmax(0, 1fr); }
  .fb-wp-item { padding: 11px 2px; }
  .fb-wp-item__menu { min-width: 44px; min-height: 44px; }
  .fb-wp-filters__binnen { display: none; flex-basis: 100%; }
  .fb-wp-filters--open .fb-wp-filters__binnen { display: flex; }
  .fb-wp-filters .fb-chip, .fb-wp-filters [data-wp-filterknop], .fb-werkplanning .fb-kop__acties .knop { min-height: 44px; }
  .fb-wp-zoek { flex: 1 1 100%; }
  .fb-wp-zoek input { width: 100%; min-height: 40px; }
  .fb-wp-week .weekrooster { grid-template-columns: minmax(0, 1fr); }
  .fb-wp-week .taakkaart { min-height: 44px; font-size: 13px; }
  .fb-wp-week .fb-weekkop__nav .knop { min-height: 44px; min-width: 44px; }
  .fb-wp-flex th:nth-child(3), .fb-wp-flex td:nth-child(3) { white-space: nowrap; }
  dialog.fb-wp-sheet { margin: auto 0 0 0; width: 100vw; max-width: 100vw; border-radius: 16px 16px 0 0; max-height: 88vh; overflow-y: auto;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .fb-wp-sheet .knop, .fb-wp-sheet button { min-height: 44px; }
  .fb-werkplanning .fb-sectie > summary { min-height: 44px; }
}

/* ===================================================================== G2.4 Aandacht-status (/signalen?weergave=aandacht bij aandacht_acties = Aan)
   Afhandelen / Uitstellen / Eigenaar / Terugzetten onder de itemtekst; panelen op volle breedte; geen zwevende elementen. */
.aandacht-st { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 2px 0 2px; }
.aandacht-st__form { display: inline-flex; margin: 0; }
.aandacht-st__hint, .aandacht-st__regel { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.aandacht-st__paneel { display: inline-block; }
.aandacht-st__paneel > summary { list-style: none; cursor: pointer; }
.aandacht-st__paneel > summary::-webkit-details-marker { display: none; }
.aandacht-st__paneel[open] { flex-basis: 100%; display: block; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-1); }
.aandacht-st__paneel[open] > summary { margin-bottom: 8px; }
.aandacht-st__keuzes { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 6px; }
.aandacht-st__label { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; max-width: 100%; }
.aandacht-st__label input, .aandacht-st__label select { max-width: 100%; min-width: 0; }
.aandacht-st__eigen { order: 2; }   /* eigen tijd staat in de DOM eerst (Enter = "Uitstellen tot"), zichtbaar na de keuzes */
.aandacht-st__verborgen { margin: -4px 0 12px; }
@media (max-width: 640px) {
  .aandacht-st .knop, .aandacht-st button, .aandacht-st__paneel > summary { min-height: 40px; display: inline-flex; align-items: center; }
  .aandacht-st__label, .aandacht-st__label input, .aandacht-st__label select { width: 100%; min-height: 40px; }
}

/* ===================================================================== G2.5 Dashboard Vandaag (scherm_dashboard_aandacht = Aan)
   De Aandacht-kaart: per groep één regel per soort (zelfde .fb-actie-regels als de oude Vandaag-kaart), Later dicht met aantal. */
.dash .dash-aandacht .fb-kaart__kop { display: flex; align-items: center; gap: 7px; }
.dash .dash-aandacht .fb-kaart__kop a { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.dash .dash-aandacht .fb-kaart__kop a:hover { color: var(--text-primary); text-decoration: underline; }
.dash-aandacht__tel { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.dash-aandacht__noot { margin: -2px 4px 8px; }
.dash-aandacht__leeg { color: var(--text-muted); font-size: 13px; padding: 8px 4px; }
.dash-aandacht__later { margin-top: 4px; }
.dash-aandacht__later > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; min-height: 32px; }
.dash-aandacht__later > summary::-webkit-details-marker { display: none; }
.dash-aandacht__later > summary::before { content: "›"; display: inline-block; width: 12px; transition: transform .15s; }
.dash-aandacht__later[open] > summary::before { transform: rotate(90deg); }
.dash-aandacht .fb-actie__wat { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .dash-aandacht .fb-actie, .dash-aandacht__later > summary { min-height: 44px; }
  .dash-aandacht .fb-actie__pijl { opacity: 1; }
}

/* WP-2 >>> Command Center (Werkplanning › Overzicht; spec_wp2_command_center.md v3) — alleen nieuwe fb-wpc-regels */
.fb-wpc { display: flex; flex-direction: column; gap: 14px; }
.fb-wpc-kop { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.fb-wpc-week { display: inline-flex; gap: 6px; align-items: center; }
.fb-wpc-week__label { margin-left: 6px; font-size: 14px; }
.fb-wpc-zoek { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 9px; padding: 0 10px;
  background: var(--surface-1); color: var(--text-muted); }
.fb-wpc-zoek input { border: 0; background: transparent; padding: 8px 0; min-width: 210px; color: var(--text-primary); }
.fb-wpc-weergave { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.fb-wpc-snel { margin: 0; }
.fb-wpc-kern { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fb-wpc-tegel { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-1); color: var(--text-primary); text-decoration: none; }
.fb-wpc-tegel:hover { border-color: var(--baseline); }
.fb-wpc-tegel b { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fb-wpc-tegel span { font-weight: 700; font-size: 13px; }
.fb-wpc-tegel small { color: var(--text-muted); font-size: 12px; }
.fb-wpc-tegel--letop { border-left: 4px solid var(--st-warning); }
.fb-wpc-tegel--kritiek { border-left: 4px solid var(--st-critical); }
.fb-wpc-indeling { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.fb-wpc-bord { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fb-wpc-groep { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--surface-1); }
.fb-wpc-groep__kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; cursor: pointer;
  list-style: none; }
.fb-wpc-groep__kop::-webkit-details-marker { display: none; }
.fb-wpc-groep__naam { font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.fb-wpc-groep__meta { font-size: 12.5px; color: var(--text-secondary); }
.fb-wpc-open { color: var(--st-critical); }
.fb-wpc-raster { border-top: 1px solid var(--grid); }
.fb-wpc-rij { display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(7, minmax(0, 1fr)) minmax(56px, 0.6fr);
  border-top: 1px solid var(--grid); font-size: 13px; }
.fb-wpc-rij:first-child { border-top: 0; }
.fb-wpc-rij > span { padding: 7px 8px; min-width: 0; border-left: 1px solid var(--grid); }
.fb-wpc-rij > span:first-child { border-left: 0; }
.fb-wpc-rij--kop { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: lowercase; }
.fb-wpc-rij--open { background: var(--surface-2); }
.fb-wpc-wie { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.fb-wpc-wie small { color: var(--text-muted); font-size: 11.5px; }
.fb-wpc-inplan { align-self: flex-start; }
.fb-wpc-vandaag { background: rgba(244, 188, 54, 0.10); }
.fb-wpc-cel { display: flex; flex-direction: column; gap: 4px; }
.fb-wpc-cel__dag { display: none; font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.fb-wpc-dienst, .fb-wpc-plek { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); padding: 4px 6px; font: inherit; font-size: 12px;
  color: var(--text-primary); min-height: 32px; }
.fb-wpc-dienst__label { flex-basis: 100%; font-size: 11px; color: var(--text-secondary); }
.fb-wpc-dienst--gelukt { border-color: var(--st-good); }
.fb-wpc-dienst--nee, .fb-wpc-dienst--mis { border-color: var(--st-serious); }
.fb-wpc-dienst--twijfel { border-style: dashed; }
.fb-wpc-plek { border-color: var(--st-critical); color: var(--st-critical); font-weight: 700; }
.fb-wpc-ziek { font-size: 11.5px; color: var(--st-warning-tekst); display: inline-flex; gap: 4px; align-items: center; }
.fb-wpc-taken details summary { cursor: pointer; font-weight: 700; }
.fb-wpc-taken ul { margin: 6px 0 0; padding-left: 16px; font-size: 12px; }
.fb-wpc-paneel { position: sticky; top: 12px; }
.fb-wpc-paneel__sub { font-size: 12.5px; margin: 12px 0 4px; color: var(--text-secondary); }
.fb-wpc-verplaats { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 12px; }
@media (max-width: 1100px) {
  .fb-wpc-indeling { grid-template-columns: minmax(0, 1fr); }
  .fb-wpc-paneel { position: static; }
}
@media (max-width: 760px) {
  .fb-wpc-kern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb-wpc-zoek, .fb-wpc-zoek input { min-width: 0; width: 100%; }
  .fb-wpc-rij { display: flex; flex-direction: column; }
  .fb-wpc-rij--kop { display: none; }
  .fb-wpc-rij > span { border-left: 0; }
  .fb-wpc-cel--leeg { display: none; }
  .fb-wpc-cel__dag { display: block; }
  .fb-wpc-dienst, .fb-wpc-plek, .fb-wpc-inplan { min-height: 44px; }
}
/* <<< WP-2 */

/* WP-4 >>> koppelen en loskoppelen in de Werkplanning (alleen bij werkplanning_koppelen) */
.fb-wp-ontkoppel { display: inline; margin: 0 4px 0 -4px; }
.fb-wp-ontkoppel__knop { border: 0; background: none; padding: 0 4px; cursor: pointer; color: var(--text-muted); font-size: 13px; line-height: 1; }
.fb-wp-ontkoppel__knop:hover, .fb-wp-ontkoppel__knop:focus-visible { color: var(--st-warning-tekst); }
.fb-wp-koppelen { margin-top: 4px; font-size: 12.5px; }
.fb-wp-koppelen__zoek input { min-width: 14em; }
.fb-wp-koppelen__form { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; margin-top: 6px; }
.fb-wp-koppelen__uitleg { font-size: 12px; margin: 4px 0 0; }
/* <<< WP-4 */

/* INT >>> BH-N0 + Cyrillisch-vak (inschrijvingen) in 2.0-stijl — integratie hoofd → fase2, I-2 (alleen opmaak) */
.fb-latijnvak { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; flex-wrap: wrap; padding: 8px 12px; border: 1.5px solid var(--st-warning); border-radius: 9px; background: color-mix(in srgb, var(--st-warning) 6%, var(--surface-1)); }
.fb-latijnvak label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.fb-latijnvak input:not([type=checkbox]) { padding: 6px 9px; font-size: 13px; }
.fb-latijnvak .knop { padding: 6px 12px; font-size: 12.5px; }
.fb-latijnvak__uitleg { font-size: 12.5px; flex-basis: 100%; }
.fb-latijnvak .fb-latijnvak__vink { flex-basis: 100%; font-size: 12.5px; font-weight: 400; color: inherit; }
.fb-latijnvak__blokkeer { font-size: 12px; flex-basis: 100%; }
.fb-latijnvak .fb-v-160 { width: 160px; } .fb-latijnvak .fb-v-170 { width: 170px; } .fb-latijnvak .fb-v-180 { width: 180px; }
/* <<< INT */

/* WP-6 >>> Flexmedewerker 360 (FlexBase 2.1, schakelaar medewerker_360) — alleen voor flexwerker_360.html en de lijstfoto */
.fb360-terug { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--link); text-decoration: none; margin: 0 0 10px; }
.fb360-kop { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; }
.fb360-foto { flex: none; width: 128px; height: 128px; border-radius: 50%; overflow: hidden; background: var(--surface-2); display: grid; place-items: center;
  border: 2px solid var(--surface-1); box-shadow: 0 0 0 1px var(--border); }
.fb360-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.fb360-foto { cursor: zoom-in; }
a.fb360-foto:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fb360-foto--leeg { font-weight: 700; font-size: 38px; color: var(--text-secondary); letter-spacing: .02em; }
.fb360-kop__midden { flex: 1 1 320px; min-width: 0; }
.fb360-kop__naam { margin: 2px 0 0; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.fb360-kop__sub { color: var(--text-secondary); margin-top: 3px; font-size: 13.5px; }
.fb360-kop__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fb360-kop__acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.fb360-uitklap { position: relative; }
.fb360-uitklap > summary { list-style: none; cursor: pointer; }
.fb360-uitklap > summary::-webkit-details-marker { display: none; }
.fb360-paneel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(560px, calc(100vw - 32px)); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 14px 16px; }
.fb360-paneel--breed { width: min(680px, calc(100vw - 32px)); }
.fb360-paneel__kop { font-size: 14px; margin: 0 0 10px; }
.fb360-paneel .fb-sectie { margin-top: 10px; }
.fb360-meer__snel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 6px; }
.fb360-fotogroot { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(10,12,16,.82); align-items: center; justify-content: center; padding: 24px; }
.fb360-fotogroot:target { display: flex; }
.fb360-fotogroot img { max-width: min(92vw, 640px); max-height: 86vh; border-radius: 14px; object-fit: contain; background: var(--surface-1); }
.fb360-fotogroot__sluit { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-1); color: var(--text-primary); }
.fb360-strip { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; margin: 12px 0 0; padding: 10px 14px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 12px; font-size: 13px; }
.fb360-strip__label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.fb360-strip__item b { font-weight: 600; }
.fb360-strip__noot { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.fb360-stip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; flex: none; }
.fb360-stip--groen { background: var(--st-good); }
.fb360-stip--oranje { background: var(--st-warning); }
.fb360-stip--rood { background: var(--st-critical); }
.fb360-tabs { margin-top: 18px; }
.fb360-blokken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fb360-twee { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.fb360-blok { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.fb360-blok__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.fb360-blok__kop a { text-transform: none; letter-spacing: 0; color: var(--link); text-decoration: none; font-weight: 600; }
.fb360-blok__titel { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.fb360-blok__sub { color: var(--text-secondary); font-size: 13px; margin-top: 1px; }
.fb360-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: 13px; }
.fb360-kv dt { color: var(--text-muted); }
.fb360-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fb360-lijst { list-style: none; margin: 0; padding: 0; }
.fb360-lijst li { display: flex; align-items: baseline; gap: 2px; padding: 6px 0; border-top: 1px solid var(--grid); font-size: 13px; }
.fb360-lijst li:first-child { border-top: 0; }
.fb360-noot { font-size: 12px; color: var(--text-muted); margin: 10px 0 0; }
.fb360-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fb360-filter__chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); text-decoration: none; }
.fb360-filter__chip--actief { background: var(--accent); color: var(--op-accent); }
.fb360-personalia > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; }
.fb360-personalia > summary::-webkit-details-marker { display: none; }
.fb360-lijstfoto { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--surface-2);
  color: var(--text-secondary); font-size: 11.5px; font-weight: 700; margin-right: 8px; vertical-align: middle; flex: none; }
.fb360-lijstfoto img { width: 100%; height: 100%; object-fit: cover; }
.fb360-kompakt { position: sticky; top: var(--fb360-top, 0px); z-index: 40; height: 0; }
.fb360-kompakt__balk { display: none; align-items: center; gap: 10px; padding: 6px 14px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 0 0 12px 12px; box-shadow: 0 6px 16px rgba(16,19,24,.10); font-size: 14px; }
.fb360-kompakt--zichtbaar .fb360-kompakt__balk { display: flex; }
.fb360-kompakt__balk .fb360-lijstfoto { width: 36px; height: 36px; margin-right: 0; }
.fb360-kompakt__sub { color: var(--text-secondary); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 1000px) { .fb360-blokken { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fb360-twee { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .fb360-kop { padding: 14px; gap: 12px; }
  .fb360-foto { width: 96px; height: 96px; }
  .fb360-kop__naam { font-size: 20px; }
  .fb360-kop__acties { width: 100%; }
  .fb360-kop__acties > .knop, .fb360-uitklap { flex: 1 1 auto; }
  .fb360-uitklap > summary { width: 100%; justify-content: center; }
  .fb360-uitklap { position: static; }
  .fb360-paneel, .fb360-paneel--breed { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
  .fb360-blokken { grid-template-columns: 1fr; }
  .fb360-strip__noot { margin-left: 0; }
}
/* <<< WP-6 */