/* =====================================================================
 * theme.css — Buiten je Bubbel op het RSG-ontwerpsysteem.
 *
 * product.css levert alle componenten (ui-kanban, ui-drawer, ui-card,
 * ui-chip, ui-table, ui-qa ...). Dit bestand wisselt alleen de TOKENS,
 * precies zoals product/directions/ laat zien: geen component wordt
 * herschreven, alleen kleur en typografie.
 *
 * Merk (09-Persoonlijk/Buiten-je-Bubbel/Website/brand.md):
 *   koraal #F04651 primair, creme #F5EEE3 grond, inkt #1E1A2B tekst,
 *   geel #F4E04D, cyaan #3AC1E6, roze #F78DA7, paars #7B3FE4, groen #2FBF71.
 *   Display Bagel Fat One (alleen merkbalk en grote koppen; het is een
 *   display-font en leest slecht in tabellen), tekst Outfit.
 *
 * Eigen scaffolding krijgt de prefix bb-, zodat het nooit botst met ui-.
 * ===================================================================== */

/* ---- 1. tokens overschrijven -------------------------------------- */
:root {
  --font-display: "Bagel Fat One", "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Outfit", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;

  /* merkkleuren als eigen tokens, zodat de rest ernaar kan wijzen */
  --bb-koraal: #F04651;
  --bb-koraal-donker: #C9303B;
  --bb-creme: #F5EEE3;
  --bb-geel: #F4E04D;
  --bb-cyaan: #3AC1E6;
  --bb-roze: #F78DA7;
  --bb-paars: #7B3FE4;
  --bb-groen: #2FBF71;
  --bb-inkt: #1E1A2B;

  /* het ene signaal: koraal in plaats van elektrisch blauw */
  --accent: #F04651;
  /* hover/press gaan bewust LICHTER, niet donkerder: de tekst erop is inkt,
     dus lichter geeft meer contrast (4.77 en 4.83). */
  --accent-hover: #E85560;
  --accent-press: #DE6069;
  --accent-ink: #1E1A2B;        /* 4.60 op koraal; wit haalde maar 3.68 */
  --accent-text: #C2303A;      /* koraal als tekst op licht, AA-getoetst */
  --accent-subtle: #FDECEC;
  --accent-subtle-2: #FBDBDC;
  --accent-line: #F5B8BB;

  /* grond en inkt: cremer en warmer dan de RSG-ramp */
  --bg: #F5EEE3;
  --paper: #FFFDFA;
  --n-50: #EFE6D9;
  --n-100: #E4D9C9;
  --n-150: #DACEBC;
  --n-200: #CBBCA6;
  --line: #E4D9C9;
  --line-strong: #CFC0AB;
  --input-border: #8A8172;
  --ink-mute: #8A8497;
  --ink-soft: #5A5468;
  --ink-2: #3A3448;
  --ink: #262034;
  --ink-strong: #1E1A2B;

  /* ronder dan RSG: het merk is vriendelijk, niet technisch */
  --r-sm: 8px; --r-md: 12px; --r-card: 16px; --r-lg: 22px;

  /* Kolomkleuren. Spoor 1 loopt van koraal (moet iets mee) via cyaan naar
     groen (klaar); de eindstatussen zijn grijs. Spoor 2 loopt van geel naar
     groen, zodat een kolom in beide borden hetzelfde "hoe ver" uitdrukt. */
  --st-nieuw: #F04651;
  --st-benaderd: #F78DA7;
  --st-geen-gehoor: #E0A800;
  --st-gesproken: #3AC1E6;
  --st-uitnodiging-verstuurd: #2FC2B0;
  --st-in-groep: #2FBF71;
  --st-afgewezen: #9A93A6;
  --st-geen-reactie: #B9B3C2;

  --st-uitgenodigd: #B9B3C2;
  --st-misschien: #3AC1E6;
  --st-ja: #F4E04D;
  --st-bevestigd: #7B3FE4;
  --st-bericht: #2FBF71;
  --st-was-er: #2FBF71;
  --st-no-show: #E0A800;

  --ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent),
          0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent);
  --ring-input: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, var(--paper));
}

/* Display alleen waar het hoort. Bagel Fat One heeft geen kleine letters
   die rustig lezen; koppen in tabellen en kaarten blijven Outfit. */
.bb-merk, .bb-hero h1 { font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1; }

/* ---- 2. schil ------------------------------------------------------ */
body { margin: 0; background: var(--bg); }
[hidden] { display: none !important; }   /* moet elke ui-component verslaan */

.bb-app { min-height: 100vh; display: flex; flex-direction: column; }

.bb-top { position: sticky; top: 0; z-index: 20; background: var(--bb-koraal);
  border-bottom: 3px solid var(--bb-inkt); }
.bb-topin { max-width: 1360px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Woordmerk: geel op koraal met inkt-schaduw, exact de merkregel. De
   kale kleurcontrast is 2.74; dat mag omdat dit een woordmerk is (WCAG
   1.4.3 zondert logotypes uit) en de schaduw de vorm draagt. */
.bb-merk { color: var(--bb-geel); font-size: 20px; text-decoration: none;
  text-shadow: 2px 2px 0 var(--bb-inkt), -1px -1px 0 var(--bb-inkt),
               1px -1px 0 var(--bb-inkt), -1px 1px 0 var(--bb-inkt); }
.bb-merk span { color: #fff; text-shadow: 2px 2px 0 var(--bb-inkt); }
.bb-top .bb-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* tabs */
.bb-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.bb-tabs::-webkit-scrollbar { display: none; }
.bb-tab { flex: 0 0 auto; appearance: none; border: 2px solid transparent; background: transparent;
  color: var(--bb-inkt); font: inherit; font-weight: 700; font-size: 14px; padding: 7px 14px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.bb-tab:hover { background: rgba(255,255,255,.42); }
.bb-tab[aria-selected="true"] { background: var(--bb-creme); color: var(--bb-inkt);
  border-color: var(--bb-inkt); font-weight: 700; }
.bb-tab .bb-telb { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: .65; }

.bb-main { flex: 1; max-width: 1360px; width: 100%; margin: 0 auto;
  padding: 20px 20px 80px; box-sizing: border-box; }

/* knop op de koraalbalk */
.bb-knopje { appearance: none; border: 2px solid var(--bb-inkt); background: var(--bb-creme);
  color: var(--bb-inkt); font: inherit; font-weight: 700; font-size: 13px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.bb-knopje:hover { background: #fff; }
.bb-knopje--stil { background: transparent; color: var(--bb-inkt); border-color: rgba(30,26,43,.4); }
.bb-knopje--stil:hover { background: rgba(255,255,255,.42); }

/* ---- 3. secties en koppen ------------------------------------------ */
.bb-sec { margin-bottom: 28px; }
.bb-sec__kop { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.bb-sec__kop h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink-strong);
  letter-spacing: -.01em; }
.bb-sec__kop .bb-sub { color: var(--ink-soft); font-size: 13px; }

/* ---- 4. de avondkaart bovenaan Vandaag ----------------------------- */
.bb-avond { background: var(--bb-inkt); color: #fff; border-radius: var(--r-lg);
  padding: 18px 20px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  border: 3px solid var(--bb-inkt); }
.bb-avond h2 { margin: 0 0 2px; font-size: 19px; font-weight: 800; }
.bb-avond .bb-wanneer { color: var(--bb-geel); font-weight: 700; font-size: 14px; }
.bb-avond .bb-waar { color: rgba(255,255,255,.72); font-size: 13px; }
.bb-avond .bb-cijfers { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.bb-cijfer { background: rgba(255,255,255,.1); border-radius: var(--r-md);
  padding: 8px 14px; min-width: 66px; text-align: center; }
.bb-cijfer b { display: block; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bb-cijfer span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.66); }
.bb-cijfer--ja b { color: var(--bb-groen); }
.bb-cijfer--mis b { color: var(--bb-cyaan); }
.bb-cijfer--vrij b { color: var(--bb-geel); }

/* ---- 5. personenrij (lijstvorm, telefoon en Vandaag) --------------- */
.bb-lijst { display: flex; flex-direction: column; gap: 8px; }
.bb-rij { background: var(--paper); border: 1.5px solid var(--line); border-left-width: 5px;
  border-radius: var(--r-card); padding: 11px 14px; display: flex; gap: 12px;
  align-items: center; flex-wrap: wrap; cursor: pointer;
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease; }
.bb-rij:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.bb-rij--nieuw       { border-left-color: var(--st-nieuw); }
.bb-rij--geen_gehoor { border-left-color: var(--st-geen-gehoor); }
.bb-rij--gesproken   { border-left-color: var(--st-gesproken); }
.bb-rij--uitnodiging_verstuurd { border-left-color: var(--st-uitnodiging-verstuurd); }
.bb-rij--in_groep    { border-left-color: var(--st-in-groep); }
.bb-rij--nee         { border-left-color: var(--st-nee); opacity: .72; }
.bb-rij__naam { font-weight: 700; color: var(--ink-strong); font-size: 15px; }
.bb-rij__meta { color: var(--ink-soft); font-size: 12.5px; }
.bb-rij__acties { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- 6. kaart op het bord ------------------------------------------ */
.bb-kaart { background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--r-card); padding: 10px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.bb-kaart:hover { border-color: var(--accent-line); box-shadow: var(--shadow-1); }
.bb-kaart.is-sleep { opacity: .45; }
.bb-kaart__naam { font-weight: 700; font-size: 14px; color: var(--ink-strong); }
.bb-kaart__meta { font-size: 12px; color: var(--ink-soft); }
.bb-kaart__voet { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.bb-col.is-over { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* Vijf kolommen moeten samen op een laptop passen; anders valt de laatste
   buiten beeld en lijkt hij te ontbreken. Onder 1100px wint de horizontale
   scroll van product.css weer. */
/* Zes kolommen passen op een gewone laptop; acht vraagt een breder scherm.
   Past het niet, dan scrollt de kanban zelf horizontaal (product.css), en de
   pagina blijft stil staan. */
@media (min-width: 1100px) {
  .bb-bord--6 .ui-col { flex: 1 1 0; min-width: 0; max-width: none; }
}
@media (min-width: 1280px) {
  .bb-bord--8 .ui-col { flex: 1 1 0; min-width: 0; max-width: none; }
}
/* Onder 1280px scrollt de kanban zelf; een kolom blijft dan breed genoeg
   voor een naam. Met acht kolommen is 150px de ondergrens waarmee het geheel
   op een laptop van 1360 nog zonder zijscroll past. */
.bb-bord--8 .ui-col { min-width: 150px; }
.bb-bord--8 .ui-col__title { font-size: 12.5px; }
/* "Uitnodiging verstuurd" past niet op één regel. Zonder deze ondergrens
   begint die ene kolom lager dan de zeven andere en staat het bord scheef. */
.bb-bord--8 .ui-col__head { min-height: 54px; align-items: flex-start; }
.bb-bord--8 .ui-col__sum { margin-top: 1px; }

/* kolomkleuren */
/* spoor 1: de relatie met de club (v2: vijf statussen) */
.ui-col--nieuw   { --col-accent: var(--st-nieuw); }
.ui-col--contact { --col-accent: var(--st-benaderd); }
.ui-col--gebeld  { --col-accent: var(--st-gesproken); }
.ui-col--lid     { --col-accent: var(--st-in-groep); }
.ui-col--uit     { --col-accent: var(--st-afgewezen); }
.bb-rij--contact { border-left-color: var(--st-benaderd); }
.bb-rij--gebeld  { border-left-color: var(--st-gesproken); }
.bb-rij--lid     { border-left-color: var(--st-in-groep); }
.bb-rij--uit     { border-left-color: var(--st-afgewezen); opacity: .72; }
/* vijf kolommen passen overal naast elkaar; de uitleg staat onder de kop en
   is dus ook op de telefoon te lezen (was een title-tooltip). */
@media (min-width: 900px) { .bb-bord--5 .ui-col { flex: 1 1 0; min-width: 0; max-width: none; } }
.bb-bord--5 .ui-col { min-width: 190px; }
.bb-col__uitleg { font-size: 11.5px; color: var(--ink-soft); line-height: 1.3; padding: 0 12px 8px; }
/* grote toggles op Avonden: een tik per persoon, op de telefoon met de duim */
.bb-toggle { display: inline-flex; gap: 4px; }
.bb-toggle .bb-knopje { min-width: 82px; justify-content: center; }
.bb-toggle .bb-knopje.is-aan { background: var(--bb-inkt); color: #fff; border-color: var(--bb-inkt); }
.bb-toggle .bb-knopje.is-aan.ja { background: var(--bb-groen); color: var(--bb-inkt); border-color: var(--bb-inkt); }
.bb-toggle .bb-knopje.is-aan.nee { background: var(--n-200); color: var(--ink); }
.bb-vink { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.bb-vink input { width: 18px; height: 18px; accent-color: var(--bb-koraal); }
.bb-afvink { background: var(--bb-geel); border: 3px solid var(--bb-inkt); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 20px; box-shadow: 6px 6px 0 var(--bb-inkt); }
.bb-afvink h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.bb-afvink .bb-sub { color: var(--ink-2); }
.bb-afvink .bb-lijst { margin-top: 10px; }
.bb-dr__uitleg { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.bb-belvraag { background: var(--bb-geel); border: 2px solid var(--bb-inkt); border-radius: var(--r-md); padding: 10px 12px; margin-top: 10px; }
.bb-belvraag b { display: block; margin-bottom: 6px; }
.bb-gevaar { color: #B3261E; }
/* spoor 2: de avond */
.ui-col--uitgenodigd     { --col-accent: var(--st-uitgenodigd); }
.ui-col--misschien       { --col-accent: var(--st-misschien); }
.ui-col--ja              { --col-accent: var(--st-ja); }
.ui-col--bevestigd       { --col-accent: var(--st-bevestigd); }
.ui-col--bericht_gestuurd{ --col-accent: var(--st-bericht); }
.ui-col--ticket_wacht    { --col-accent: var(--st-geen-gehoor); }
.ui-col--nee             { --col-accent: var(--st-afgewezen); }
.ui-col--was_er          { --col-accent: var(--st-was-er); }
.ui-col--no_show         { --col-accent: var(--st-no-show); }

/* ---- 7. chips ------------------------------------------------------ */
.bb-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px;
  font-weight: 600; border-radius: 999px; padding: 3px 9px;
  background: var(--n-50); color: var(--ink-2); white-space: nowrap; }
.bb-chip--ja   { background: #DDF3E6; color: #14663C; }
.bb-chip--mis  { background: #DEF3FA; color: #0A5F75; }
.bb-chip--nee  { background: var(--n-50); color: var(--ink-soft); }
.bb-chip--bron { background: #EEE6FC; color: #4A2494; }
.bb-chip--laat { background: #FDECEC; color: #B3261E; }
.bb-chip--vers { background: #FCF3C8; color: #6B5300; }
.bb-chip--tel  { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* ---- 7b. schakelaar tussen de twee borden ---- */
.bb-schakel { display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 14px;
  background: var(--n-50); border: 1.5px solid var(--line-strong); border-radius: 999px; }
.bb-schakel__k { appearance: none; border: 0; background: transparent; color: var(--ink-2);
  font: inherit; font-weight: 700; font-size: 14px; padding: 8px 18px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; }
.bb-schakel__k:hover:not([disabled]) { color: var(--ink-strong); }
.bb-schakel__k[aria-selected="true"] { background: var(--bb-inkt); color: #fff; }
.bb-schakel__k[disabled] { opacity: .45; cursor: default; }

/* ---- 8. filterpillen ----------------------------------------------- */
.bb-filters { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.bb-pil { appearance: none; border: 1.5px solid var(--line-strong); background: var(--paper);
  color: var(--ink-2); font: inherit; font-weight: 600; font-size: 13px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer; }
.bb-pil:hover { border-color: var(--accent); }
.bb-pil[aria-pressed="true"] { background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); }
.bb-zoek { flex: 1; min-width: 190px; padding: 8px 13px; border: 1.5px solid var(--input-border);
  border-radius: 999px; font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); }
.bb-zoek:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-input); }

/* ---- 9. drawer-inhoud ---------------------------------------------- */
.bb-dr__kop { display: flex; gap: 12px; align-items: flex-start; }
.bb-dr__naam { font-size: 20px; font-weight: 800; color: var(--ink-strong); line-height: 1.15; }
.bb-dr__meta { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.bb-dr__acties { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-dr__fasen { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-notitie { width: 100%; box-sizing: border-box; min-height: 82px; padding: 10px 12px;
  border: 1.5px solid var(--input-border); border-radius: var(--r-md); font: inherit;
  font-size: 14px; resize: vertical; background: var(--paper); color: var(--ink); }
.bb-notitie:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-input); }
.bb-opslag { font-size: 11.5px; color: var(--ok-text); min-height: 14px; }

.bb-log { display: flex; flex-direction: column; gap: 0; }
.bb-log__r { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.bb-log__r:last-child { border-bottom: 0; }
.bb-log__w { color: var(--ink-mute); white-space: nowrap; font-size: 12px; min-width: 82px; }

/* Brede inhoud scrollt in zijn eigen bak; de pagina zelf nooit zijwaarts. */
.bb-tabelwrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-card); }
.bb-tabelwrap .ui-table { min-width: 460px; }

/* ---- 10. telefoon --------------------------------------------------- */
@media (max-width: 760px) {
  .bb-main { padding: 14px 12px 90px; }
  .bb-topin { padding: 8px 12px; gap: 10px; }
  .bb-avond { padding: 14px; gap: 12px; }
  .bb-avond .bb-cijfers { margin-left: 0; width: 100%; }
  /* Vijf tegels (met bijdrage en tickets) passen niet op één rij van 390px:
     dan liever een tweede rij dan een pagina die zijwaarts schuift. */
  .bb-cijfer { flex: 1 1 58px; min-width: 58px; padding: 8px 6px; }
  .bb-cijfer span { font-size: 10px; letter-spacing: .04em; }
  .bb-sub a { overflow-wrap: anywhere; }
  /* raakvlakken groot genoeg voor een duim */
  .bb-knopje, .bb-pil { padding: 9px 15px; font-size: 14px; }
  .bb-rij { padding: 13px 14px; }
  .bb-rij__acties { width: 100%; margin-left: 0; min-width: 0; }
  .bb-rij__acties .bb-knopje { flex: 1 1 auto; min-width: 0; text-align: center; }
  /* de knoppenreeks per deelnemer mag wel omslaan, nooit de pagina verbreden */
  .bb-rij { max-width: 100%; overflow: hidden; }
}

/* ---- 11. social-kalender -------------------------------------------
 * Overgenomen uit RSG-Hub/hub.css (de contentkalender van het bord
 * 'social-kalender'), zodat de kalender hier niet een tweede keer bedacht
 * wordt. Die klassen staan volledig op tokens, dus ze nemen vanzelf de
 * koraal-op-creme-huisstijl aan die bovenin dit bestand gezet is.
 *
 * Waarom kopieren en niet hub.css laden: deze omgeving laadt bewust alleen
 * product.css plus dit bestand. hub.css meeslepen haalt de hele RSG-Hub-opmaak
 * binnen, inclusief de navigatie en de bordstijlen die hier niet bestaan.
 * Let op: styles.css in de Hub bevat een oudere kopie van dezelfde klassen met
 * hardgecodeerde kleuren. Die niet gebruiken; deze komt uit hub.css.
 * ===================================================================== */

/* ---------- kalenderweergave ---------- */
.calwrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-4); }
.cal-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.cal-bar h2 { font-size: var(--fs-subhead); text-transform: capitalize; min-width: 180px; text-align: center; margin: 0; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-head div { font-weight: 700; font-size: var(--fs-caption); color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: var(--track-caps); padding: 2px 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { min-height: 86px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 5px;
  background: color-mix(in oklab, var(--n-50) 40%, var(--paper)); }
.cal-cell.off { background: transparent; border-color: transparent; }
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-d { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); color: var(--ink-soft); }
.cal-item { display: block; font-size: 11px; font-weight: 600; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-sm);
  padding: 3px 6px; margin-top: 3px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item:hover { border-color: var(--accent); }
.cal-item.done { opacity: .55; text-decoration: line-through; }
.cal-pf { color: var(--ink-soft); font-weight: 700; margin-right: 4px; font-size: 10px; text-transform: uppercase; }
.cal-undated { margin-top: 12px; font-size: var(--fs-caption); color: var(--ink-soft); }
.cal-undated .cal-item { display: inline-block; margin: 3px 4px 0 0; }
.cal-cell.drag-over { outline: 2px dashed var(--accent); outline-offset: -3px; background: var(--accent-subtle); }
.cal-item[draggable=true] { cursor: grab; }
.cal-item.dragging { opacity: .45; }
@media (max-width: 720px) { .cal-cell { min-height: 56px; } .cal-item { font-size: 10px; padding: 2px 4px; } }

/* ---------- social kalender ---------- */
.viewswitch { display: inline-flex; background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.vpill { border: none; background: none; font: inherit; font-weight: 600; font-size: var(--fs-caption);
  color: var(--ink-soft); padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer; }
.vpill.on { background: var(--ink-strong); color: var(--bg); }
.filter-pills { display: inline-flex; gap: 6px; margin-left: 4px; }
.fpill { border: 1px solid var(--line-strong); background: var(--paper); font: inherit; font-weight: 600;
  font-size: var(--fs-caption); color: var(--ink-soft); padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer; }
.fpill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.card.social { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-1); padding: var(--s-3); cursor: grab; display: flex; flex-direction: column; gap: 4px; }
.card.social:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.card.social.dragging { opacity: .45; }
.card.social .co { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body-s); color: var(--ink-strong); }
.card.social .ct { font-size: var(--fs-caption); color: var(--ink-soft); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.social .ct-thumb { height: 98px; border-radius: var(--r-sm); background: var(--n-50) center/cover no-repeat;
  margin: -2px 0 6px; border: 1px solid var(--line); }
.card.social .ct-thumb.vid { display: flex; align-items: center; justify-content: center; color: var(--accent-text); font-size: 26px; }
.card.social .meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-caption); color: var(--ink-soft); }
.who-pill { background: var(--accent-subtle); color: var(--accent-text); border-radius: var(--r-pill);
  padding: 1px 9px; font-weight: 700; font-size: 10.5px; }

/* social lijstweergave */
.listwrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.list-head, .list-row { display: grid; grid-template-columns: 52px 1fr 92px 108px 118px 70px; align-items: center;
  gap: 10px; padding: 9px 14px; }
.list-head { font-weight: 700; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--ink-soft); background: var(--n-50); border-bottom: 1px solid var(--line-strong); }
.list-row { border-bottom: 1px solid var(--line); cursor: pointer; }
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: color-mix(in oklab, var(--accent-subtle) 45%, var(--paper)); }
.lthumb { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--line);
  background: var(--n-50); display: block; }
.lthumb.vid { display: flex; align-items: center; justify-content: center; color: var(--accent-text); font-size: 16px; }
.lthumb.none { background: var(--n-50); }
.lr-main { min-width: 0; }
.lr-main b { font-family: var(--font-display); font-size: var(--fs-body-s); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-strong); }
.lr-cap { font-size: var(--fs-caption); color: var(--ink-soft); display: block; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.lr-who { font-weight: 700; font-size: var(--fs-caption); }
.lr-date { font-size: var(--fs-caption); color: var(--ink); }
.lr-actions { display: flex; gap: 4px; justify-content: flex-end; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: var(--fs-caption);
  padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--n-50); color: var(--ink-2); }
.status-pill.draft { background: var(--n-50); color: var(--ink-soft); }
.status-pill.ready { background: var(--info-bg); border-color: var(--info-line); color: var(--info-text); }
.status-pill.sched { background: var(--pending-bg); border-color: var(--pending-line); color: var(--pending-text); }
.status-pill.done { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-text); }

/* ---- 12. eigen social-scaffolding ----------------------------------- */
/* De strook "Vandaag te posten": zelfde vorm als .bb-avond, want het is
   hetzelfde soort antwoord op "wat moet ik nu doen". */
.bb-nu { background: var(--bb-inkt); color: #fff; border-radius: var(--r-lg);
  padding: 18px 20px; border: 3px solid var(--bb-inkt); margin-bottom: 22px; }
.bb-nu h2 { margin: 0 0 12px; font-size: 19px; font-weight: 800; }
.bb-nu__leeg { color: rgba(255,255,255,.72); font-size: 14px; }
.bb-nu__rij { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16); }
.bb-nu__rij:first-of-type { border-top: 0; }
.bb-nu__thumb { width: 54px; height: 54px; border-radius: var(--r-sm); object-fit: cover;
  background: rgba(255,255,255,.12); flex: 0 0 auto; }
.bb-nu__tekst { min-width: 0; flex: 1; }
.bb-nu__tekst b { display: block; font-size: 15px; }
.bb-nu__tekst span { color: rgba(255,255,255,.7); font-size: 12.5px; }
.bb-nu__acties { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* Bibliotheek: stories en covers als raster van miniaturen. Stories zijn 9:16
   en covers 1:1, dus de tegels zijn niet even hoog. Het bijschrift onderaan
   uitlijnen houdt de rij rustig; anders zweeft een cover-tegel half leeg. */
.bb-bib { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px; align-items: start; }
.bb-bib__i { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 7px; cursor: pointer; text-align: center; display: flex; flex-direction: column; }
.bb-bib__i:hover { border-color: var(--accent); }
.bb-bib__i img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-sm);
  background: var(--n-50); display: block; }
.bb-bib__geen { width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-sm);
  background: var(--n-50); display: block; }
.bb-bib__i.vk img, .bb-bib__i.vk .bb-bib__geen { aspect-ratio: 1 / 1; }
.bb-bib__i span { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* De caption in de modal: leesbaar en makkelijk te selecteren. */
.bb-cap { width: 100%; box-sizing: border-box; min-height: 190px; padding: 11px 13px;
  border: 1.5px solid var(--input-border); border-radius: var(--r-md); font: inherit;
  font-size: 13.5px; line-height: 1.5; resize: vertical; background: var(--paper); color: var(--ink);
  white-space: pre-wrap; }
.bb-cap:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-input); }
.bb-mp { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bb-mp img { width: 76px; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--n-50); }

@media (max-width: 760px) {
  /* Op de telefoon is de lijst de bruikbare weergave; het maandgrid blijft
     bestaan maar krijgt kleinere cellen (staat in de overgenomen CSS).
     De zes kolommen van de laptop passen hier niet: soort en datum vallen weg,
     en de rij houdt precies drie kolommen over. Zonder die telling schuiven de
     statuspil en de knop naar een tweede rij en wordt de knop een lege cirkel. */
  .list-head { display: none; }
  .list-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; }
  .list-row .lr-who, .list-row .lr-date, .list-row .lr-actions { display: none; }
  .bb-nu__acties { width: 100%; margin-left: 0; }
  .bb-nu__acties .bb-knopje { flex: 1 1 auto; text-align: center; }
}

/* ---- 13. Inbox (WhatsApp, 27-09) ------------------------------------
 * Laptop: links de gesprekken, rechts het gesprek met de composer, allebei
 * met een eigen scroll zodat de composer altijd in beeld blijft. Telefoon:
 * óf de lijst óf het gesprek, en de pagina scrolt gewoon.
 * ===================================================================== */
.bb-tab .bb-telb--nieuw { opacity: 1; background: var(--bb-inkt); color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 12px; }
.bb-tab[aria-selected="true"] .bb-telb--nieuw { background: var(--bb-koraal); color: var(--bb-inkt); }
a.bb-knopje { text-decoration: none; display: inline-flex; align-items: center; }
.bb-knopje[disabled] { opacity: .5; cursor: not-allowed; }
.bb-knopje--doe { background: var(--bb-koraal); }
.bb-knopje--doe:hover:not([disabled]) { background: var(--accent-hover); }
.bb-alleen-mobiel { display: none !important; }

.bb-inbox__meldingen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
/* Meldingen plus het raster samen precies één scherm hoog: zo blijft de
   composer onderaan in beeld, ook als er een testmodus-melding boven staat. */
.bb-inboxwrap { display: flex; flex-direction: column; height: calc(100vh - 106px); min-height: 520px; }
.bb-inbox { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; }
.bb-inbox__lijst { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.bb-inbox__lijst .bb-filters { margin-bottom: 10px; gap: 6px; }
.bb-inbox__lijst .bb-pil { padding: 5px 11px; font-size: 12.5px; }
.bb-inbox__rijen { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  gap: 6px; padding: 2px 6px 6px 0; }
.bb-inbox__draad { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.bb-inbox__draad [data-inbox-kop] { flex: 0 0 auto; }
.bb-inbox__draad [data-inbox-composer] { flex: 0 0 auto; border-top: 1px solid var(--line);
  padding: 12px 14px; background: var(--paper); }
.bb-inbox__draad [data-inbox-composer]:empty { display: none; }

/* een gesprek in de lijst */
.bb-gesprek { appearance: none; text-align: left; width: 100%; font: inherit; color: inherit;
  display: flex; gap: 10px; align-items: flex-start; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; cursor: pointer;
  transition: border-color var(--dur-fast) ease; }
.bb-gesprek:hover { border-color: var(--accent-line); }
.bb-gesprek.is-open { border-color: var(--bb-inkt); box-shadow: 3px 3px 0 var(--bb-inkt); }
.bb-gesprek__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }
.bb-gesprek.is-nieuw .bb-gesprek__dot { background: var(--bb-koraal); box-shadow: 0 0 0 2px var(--accent-subtle-2); }
.bb-gesprek__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bb-gesprek__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bb-gesprek__top b { font-size: 14.5px; font-weight: 700; color: var(--ink-strong); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bb-gesprek.is-nieuw .bb-gesprek__top b { font-weight: 800; }
.bb-gesprek__tijd { font-size: 12px; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bb-gesprek__snip { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-gesprek.is-nieuw .bb-gesprek__snip { color: var(--ink); font-weight: 600; }

/* kop van het gesprek */
.bb-draad__kop { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bb-draad__wie { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 3px; }
.bb-draad__naam { font-weight: 800; font-size: 17px; color: var(--ink-strong); line-height: 1.2; }
.bb-draad__acties { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-draad__melding { margin: 10px 14px 0; min-height: 0; }
.bb-draad__niets { margin: auto; color: var(--ink-soft); font-size: 14px; text-align: center; padding: 30px 12px; }

/* het gesprek zelf */
.bb-draad { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex;
  flex-direction: column; gap: 6px; background: color-mix(in oklab, var(--n-50) 45%, var(--paper)); }
.bb-dagscheiding { align-self: center; margin: 8px 0 2px; }
.bb-dagscheiding span { font-size: 11.5px; font-weight: 600; background: var(--n-100); color: var(--ink-soft);
  padding: 3px 10px; border-radius: 999px; }
.bb-sysregel { align-self: center; text-align: center; font-size: 12px; color: var(--ink-soft); font-style: italic;
  max-width: 90%; }
.bb-bub { max-width: min(78%, 540px); padding: 7px 11px 5px; border-radius: 14px; font-size: 14px;
  line-height: 1.42; box-shadow: 0 1px 0 rgba(30, 26, 43, .07); }
.bb-bub--in { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bb-bub--uit { align-self: flex-end; background: #DDF3E6; border: 1px solid #BFE4CD; border-bottom-right-radius: 4px; }
.bb-bub--bot { background: #E3F4FA; border-color: #BFE3F0; }
.bb-bub--telefoon { background: #EEE6FC; border-color: #D9C9F6; }
.bb-bub__bron { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1px; }
.bb-bub__tekst { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.bb-bub__tekst a { color: var(--accent-text); }
.bb-bub__voet { font-size: 11px; color: var(--ink-mute); text-align: right; margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.bb-tik { font-weight: 800; letter-spacing: -2px; margin-left: 4px; color: var(--ink-soft); }
.bb-tik--gelezen { color: #1F7FC4; }
.bb-tik--mislukt { color: #B3261E; letter-spacing: 0; }
.bb-bub--mislukt { background: #FBE7E3; border: 1.5px solid #F1C6BE; }
.bb-bub__fout { font-size: 12px; font-weight: 600; color: #B3261E; margin-top: 3px; }
.bb-bub--onderdrukt { background: var(--n-50); border: 1px dashed var(--line-strong); box-shadow: none; }
.bb-bub--onderdrukt .bb-bub__tekst { color: var(--ink-mute); }
.bb-bub--onderdrukt .bb-bub__voet { color: var(--ink-soft); font-weight: 600; }

/* composer */
.bb-composer { display: flex; flex-direction: column; gap: 8px; }
.bb-composer__tekst { min-height: 64px; }
.bb-composer__acties { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.bb-composer__uitleg { margin-right: auto; font-size: 12px; }
.bb-composer__kop { font-weight: 800; font-size: 14px; color: var(--ink-strong); }
.bb-composer__kop .bb-sub { font-weight: 600; color: var(--ink-soft); }
.bb-composer .bb-bub--los { max-width: 100%; align-self: stretch; }
.bb-sjablonen { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.bb-sjabloon { appearance: none; text-align: left; font: inherit; color: inherit; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 8px 11px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; }
.bb-sjabloon:hover { border-color: var(--accent); }
.bb-sjabloon__tekst { font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; }
.bb-sjabloon[disabled] { opacity: .6; cursor: not-allowed; }
.bb-sjabloon__kop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bb-sjabloon__kop b { font-size: 14px; color: var(--ink-strong); }
.bb-sjabloon__cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.bb-stromen { display: flex; flex-direction: column; gap: 8px; }

.bb-nietgekoppeld { background: var(--paper); border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
  padding: 28px 24px; max-width: 640px; margin: 24px auto; text-align: center; }
.bb-nietgekoppeld h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--ink-strong); }
.bb-nietgekoppeld p { margin: 0 0 8px; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 900px) {
  .bb-alleen-mobiel { display: inline-flex !important; }
  .bb-inboxwrap { display: block; height: auto; min-height: 0; }
  .bb-inbox { display: block; height: auto; min-height: 0; }
  .bb-draad__kop { flex-direction: column; align-items: stretch; gap: 8px; }
  .bb-draad__kop .bb-alleen-mobiel { align-self: flex-start; }
  .bb-inbox.is-open .bb-inbox__lijst { display: none; }
  .bb-inbox:not(.is-open) .bb-inbox__draad { display: none; }
  .bb-inbox__rijen { overflow: visible; padding-right: 0; }
  .bb-inbox__draad { overflow: visible; }
  .bb-draad { overflow: visible; padding: 12px 10px; }
  .bb-bub { max-width: 86%; }
  .bb-draad__acties { width: 100%; }
  .bb-draad__acties .bb-knopje { flex: 1 1 auto; justify-content: center; }
  .bb-composer__uitleg { width: 100%; }
  .bb-sjablonen { max-height: none; overflow: visible; }
  .bb-composer__acties .bb-knopje { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* ---- 14. Vandaag: WhatsApp-seintje, bellijst-uitleg, trechter ------- */
.bb-uitlegregel { margin: -4px 0 10px; font-size: 13px; color: var(--ink-soft); }
.bb-waseintje { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: #DEF3FA;
  border: 2px solid var(--bb-inkt); border-radius: var(--r-lg); padding: 12px 16px; margin-bottom: 18px;
  box-shadow: 4px 4px 0 var(--bb-inkt); }
.bb-waseintje > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.bb-waseintje b { font-size: 15.5px; color: var(--ink-strong); }
.bb-waseintje .bb-sub { color: var(--ink-2); font-size: 13px; }

.bb-trechter { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-card);
  padding: 12px 16px; max-width: 820px; }
.bb-trechter__r { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(80px, 2fr) 92px 64px;
  gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.bb-trechter__r--kop { border-top: 0; padding: 0 0 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.bb-trechter__r--kop span:nth-child(n+3) { text-align: right; }
.bb-trechter__label { font-weight: 700; font-size: 14px; color: var(--ink-strong); display: flex;
  flex-direction: column; line-height: 1.25; }
.bb-trechter__label small { font-weight: 500; font-size: 11.5px; color: var(--ink-soft); }
.bb-trechter__balk { height: 12px; background: var(--n-50); border-radius: 999px; overflow: hidden; }
.bb-trechter__balk span { display: block; height: 100%; width: var(--v); background: var(--bb-koraal);
  border-radius: 999px; min-width: 2px; }
.bb-trechter__v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px;
  color: var(--ink-strong); white-space: nowrap; }
.bb-trechter__v small { font-weight: 600; font-size: 11.5px; color: var(--ink-soft); }
.bb-trechter__bron { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-soft);
  padding: 0 0 8px; }
@media (max-width: 760px) {
  .bb-trechter { padding: 10px 12px; }
  .bb-trechter__r { grid-template-columns: minmax(0, 1fr) 76px 44px; gap: 8px; }
  .bb-trechter__balk, .bb-trechter__r--kop span:nth-child(2) { display: none; }
}

/* ---- 15. Community: twee plekken, De bubbel ------------------------- */
.bb-groepkaart { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; background: var(--paper);
  border: 2px solid var(--bb-inkt); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 24px;
  box-shadow: 4px 4px 0 var(--bb-inkt); }
.bb-groepkaart__tekst { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px;
  font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.bb-groepkaart__tekst > b { font-size: 16px; color: var(--ink-strong); }
.bb-uitklap > summary { cursor: pointer; font-size: 15px; padding: 6px 0; color: var(--ink-strong); }
.bb-uitklap > summary .bb-sub { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.bb-namen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bb-naamchip { border: 0; cursor: pointer; font: inherit; font-size: 12.5px; }
.bb-naamchip:hover { background: var(--accent-subtle-2); }

/* ---- 16. persoonspaneel: WhatsApp en tijdlijn ----------------------- */
.bb-dr__kopregel { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bb-draad--paneel { flex: 0 0 auto; max-height: 360px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px; }
.bb-draad--paneel .bb-bub { max-width: 88%; font-size: 13px; }
.bb-tl-berichten > summary { cursor: pointer; }
.bb-tl-berichten .bb-draad--paneel { margin-top: 8px; }
.bb-tijdlijn .ui-tl__icon { font-size: 13px; font-weight: 800; }

/* ---- 17. instellingen --------------------------------------------- */
.bb-noodstop { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border: 2px solid #F1C6BE;
  background: #FBE7E3; border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px; }
.bb-noodstop__tekst { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; color: var(--ink-2); }
.bb-noodstop__tekst b { color: #8C1D16; font-size: 14.5px; }
.bb-noodstop.is-stil { background: #B3261E; border-color: #8C1D16; }
.bb-noodstop.is-stil .bb-noodstop__tekst, .bb-noodstop.is-stil .bb-noodstop__tekst b { color: #fff; }
/* In een modal met een eigen scroll mogen blokken niet krimpen: anders valt de
   tekst van een melding buiten zijn eigen achtergrond. */
.bb-modalbody > * { flex-shrink: 0; }
/* Uitlegregel onder een sectie (niet in de kop): klein en rustig. */
.bb-sec > .bb-sub { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.bb-instelling { padding: 12px 0 4px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.bb-instelling .ui-help { margin: 0; }