/* Scope Compass — stylesheet voor spoor TF (fasen, baselines, wijzigingen).
   Skelet uit P1; laadt ná src/styles.css, zodat de tokens daaruit beschikbaar zijn en dit
   bestand ze kan overrulen. Geen nieuwe kleuren: de statusfamilies uit styles.css (slate,
   blue, green, amber) doen het werk, zodat de kleurtaal van de app één taal blijft. */

/* ---- TF2: fasemachine ---------------------------------------------------------------------- */
/* Fasestatus in de faseringstabel (Project Plan → Overzicht). concept = nog niets besloten,
   baselined = vastgelegd maar nog niet gestart, in_uitvoering = de stand die telt, afgerond = klaar. */
.tf-fase-status { white-space: nowrap; }
.tf-fase-status.is-concept { background: var(--slate-soft); color: var(--slate-text); }
.tf-fase-status.is-baselined { background: var(--blue-soft); color: var(--blue-text); }
.tf-fase-status.is-in_uitvoering { background: var(--green-soft); color: var(--green-strong); }
.tf-fase-status.is-afgerond { background: var(--slate-soft); color: var(--text-3); text-decoration: line-through; text-decoration-color: currentColor; }
/* Een lopende fase die niet de "nu aan de beurt"-fase is (twee fasen tegelijk in uitvoering). */
.pp-fase-loopt td:first-child { box-shadow: inset 3px 0 0 var(--green-strong); }
.tf-fasen .tf-fase-actie { white-space: nowrap; }
.tf-fasen .tf-fase-actie .btn { min-height: 34px; }

/* De pil met de leidende fase op een procesrij (Processen). Loopt die fase, dan krijgt de pil
   een groene rand en een afspeelicoon: dat is de visuele stand "lopende fase" (besluit B6). */
.tag.tf-fase-lopend { box-shadow: inset 0 0 0 1.5px var(--green-strong); }
.tag.tf-fase-lopend .ic { font-size: 11px; margin-right: 2px; }
/* De rij zelf krijgt een smalle groene kantlijn, ook op de telefoon (waar de Fase-kolom als
   detail verborgen is en de kantlijn dus de enige aanwijzing is). */
.proc-table tr.tf-rij-lopend td:first-child { box-shadow: inset 3px 0 0 var(--green-strong); }

/* ---- TF4: realisatiestatus ----------------------------------------------------------------- */
/* Badge in de titelrij van de procespagina en de pil in de kolom Realisatie: slate voor
   "draait al", zonder alarmkleur — het is een feit over het proces, geen probleem. */
.tag.tf-real-tag { white-space: nowrap; }
.tag.tf-real-tag .ic, .tag.tf-real-bestaand .ic, .tag.tf-real-bestaand_gewijzigd .ic { font-size: 11px; margin-right: 2px; }
.tf-real-noot { display: inline-flex; align-items: flex-start; gap: 4px; line-height: 1.35; }
.tf-real-noot .ic { flex: none; margin-top: 1px; }
/* Selectiekolom op Processen: smal, en het vakje zelf groot genoeg om te raken. */
.proc-table th.ov-selcel, .proc-table td.ov-selcel { width: 36px; padding-left: 10px; padding-right: 0; }
.proc-table .ov-sel { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--pri, #4f46e5); }
.proc-table tr.is-geselecteerd td { background: var(--blue-soft); }
/* Bulkbalk tussen de filters en de tabel: verschijnt alleen zodra er iets geselecteerd is. */
.ov-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.ov-bulk .ov-bulk-n { margin-right: 4px; }
.ov-bulk .ov-bulk-l { color: var(--text-3); }
.ov-bulk .btn-ghost { margin-left: auto; }

/* ---- TF3: tabblad Baseline (Scope & Budget) ------------------------------------------------ */
/* Eén taak: zien welke baseline er per fase geldt, en een nieuwe versie vaststellen. */
.tf-bl-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tf-bl-kop .muted { font-size: 12.5px; line-height: 1.5; max-width: 60ch; }
.tf-bl-form { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 18px; display: grid; gap: 10px; }
.tf-bl-form label { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.tf-bl-form .input, .tf-bl-form textarea.input, .tf-bl-form select.input { width: 100%; font-size: 14px; }
.tf-bl-form textarea.input { min-height: 72px; resize: vertical; }
.tf-bl-form .tf-bl-acties { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tf-bl-versie { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* De versie die nu vergeleken wordt, in de historie. */
.tf-bl-tabel tr.tf-bl-rij-nu td:first-child { box-shadow: inset 3px 0 0 var(--pri, var(--blue-text)); }
.tag.tf-bl-aanleiding { white-space: nowrap; }
.tf-bl-vergelijk .tf-bl-delta-plus { color: var(--amber-strong); }
.tf-bl-vergelijk .tf-bl-delta-min { color: var(--green-strong); }
.tf-bl-lijst { margin: 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.6; }
.tf-bl-lijst li { margin: 0; }
.tf-bl-kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 16px 14px; }
.tf-bl-kolommen h4 { margin: 0 0 4px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.tf-bl-leeg { font-size: 12.5px; color: var(--text-3); }

/* ---- TF1: klanttype en capabilities --------------------------------------------------------- */
/* Tenantintake: het klanttype is de eerste keuze. De kaarten delen .iw-pad met de padkaarten;
   de regel "Aan: ..." onderaan zegt wat het preset aanzet. Zolang er geen type is gekozen
   staan de padkaarten gedempt (wel zichtbaar, zodat je ziet wat er komt). */
.tin-type-aan { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); }
.iw-pads.tin-pads-wacht .iw-pad { opacity: .55; }
.iw-pads.tin-pads-wacht .iw-pad:hover { opacity: .85; }
/* Platform admin -> Overzicht: het blok met het type, de omzetknoppen, de drie schakelaars en
   de terugzetknop. Zelfde rijen als de feature flags (.pa-flag), zodat het één scherm blijft. */
.tf-klanttype { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.tf-kt-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tf-kt-huidig { display: inline-flex; align-items: center; gap: 8px; }
.tf-kt-omzet { display: flex; gap: 8px; flex-wrap: wrap; }
.tf-kt-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--r); }
.tf-kt-voet .proc-sub { flex: 1 1 260px; min-width: 0; white-space: normal; }
@media (max-width: 640px) {
  .tf-kt-omzet { flex-direction: column; width: 100%; }
  .tf-kt-omzet .btn, .tf-kt-voet .btn { width: 100%; justify-content: center; }
}
/* Toast-niveau 'warn' (DZ.app.toast): gelukt, maar niet helemaal. Amber, tussen ok en err in;
   de basis (.toast, .ok, .err) staat in styles.css. */
.toast.warn { background: var(--amber-strong); }

@media (max-width: 640px) {
  /* Selectie en bulk-toewijzing zijn bureaubladwerk: de kolom Realisatie blijft als detail op de
     proceskaart (card-hide), de selectievakjes vervallen hier (ov-selcel is card-hide) en de
     bulkbalk gaat mee — anders staat er een balk voor een selectie die je hier niet kunt maken. */
  .ov-bulk { display: none; }
  /* Kaartweergave: de actieknop over de volle breedte, tikbaar met een duim. */
  .tf-fasen .tf-fase-actie .btn { min-height: 44px; width: 100%; justify-content: center; }
  .tf-fasen .tf-fase-actie .btn.btn-sm { font-size: 14px; }
  .dz-cards tr.tf-rij-lopend { box-shadow: inset 3px 0 0 var(--green-strong); }
  .proc-table tr.tf-rij-lopend td:first-child { box-shadow: none; }
  .tf-bl-kop .btn { min-height: 44px; width: 100%; justify-content: center; }
  .tf-bl-form .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; }
  .tf-bl-form .input, .tf-bl-form textarea.input, .tf-bl-form select.input { font-size: 16px; min-height: 44px; }
  .tf-bl-kolommen { grid-template-columns: 1fr; }
  .tf-bl-tabel .btn { min-height: 44px; width: 100%; justify-content: center; }
}

/* ---- TF5: lock en conceptcontext ------------------------------------------------------------- */
/* Eén taak: zien dat een proces op slot zit (en waarom), en veilig in een concept werken.
   Twee balken bovenaan de procespagina. De lockbalk is stil (slate), de conceptbalk valt bewust
   op in een andere kleur (violet) — je moet in één oogopslag zien dat je NIET in het live
   proces typt. Alle namen beginnen met tf-lock- of tf-concept-. */
.tf-lock-balk { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--slate-text, #64748B); border-radius: var(--r-lg); background: var(--surface-2); font-size: 13px; line-height: 1.45; }
.tf-lock-balk .tf-lock-ic { flex: none; margin-top: 2px; color: var(--slate-text, #64748B); }
.tf-lock-txt { flex: 1 1 260px; min-width: 0; color: var(--text-2); }
.tf-lock-txt strong { color: var(--text); }
.tf-lock-verzoek { display: block; margin-top: 2px; color: var(--text-3); }
.tf-lock-knop { flex: none; align-self: center; white-space: nowrap; }
/* De kop op slot: de kopvelden en de aannames zichtbaar uit (zelfde beeld als de back-up-preview
   in styles.css), de knoppen om stappen toe te voegen weg. Alleen op een pagina in de lockstand;
   in de conceptcontext (.tf-concept) staat alles aan, want dat schrijft op de kopie. */
.tf-lock [data-edit="proc"], .tf-lock [data-edit="mvp"], .tf-lock [data-edit="aanname"],
.tf-lock [data-act="toggle-mvp"], .tf-lock [data-act="set-omvang"],
.tf-lock [data-act="toggle-aanname"], .tf-lock [data-act="del-aanname"], .tf-lock [data-act="aanname-kn"] {
  pointer-events: none !important; opacity: .55 !important; cursor: not-allowed !important; box-shadow: none !important;
}
.tf-lock .pd-addstep, .tf-lock .pd-stk-invoeg, .tf-lock [data-act="add-aanname"] { display: none !important; }
/* Een vergrendelde stap: het paneel (bureaublad) of de kaart/editor (telefoon) alleen-lezen. */
.tf-lock-stap-reden { display: flex; align-items: flex-start; gap: 6px; padding: 8px 12px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tf-lock-stap-reden .ic { flex: none; margin-top: 2px; }
.tf-lock-stap [data-edit="step"], .tf-lock-stap [data-edit="tak"], .tf-lock-stap [data-edit="step-app"], .tf-lock-stap [data-edit="step-docadd"],
.tf-lock-stap [data-edit="step-doelapp"], .tf-lock-stap [data-edit="step-rol"], .tf-lock-stap [data-edit="step-apparaat"], .tf-lock-stap [data-edit="step-uitzondering"],
.tf-lock-stap [data-edit="aanname"], .tf-lock-stap [data-edit="proc"], .tf-lock-stap [data-act="toggle-aanname"], .tf-lock-stap [data-act="del-aanname"],
.tf-lock-stap [data-act="set-staptype"], .tf-lock-stap [data-act="add-tak"], .tf-lock-stap [data-act="del-tak"],
.tf-lock-stap [data-act="pm-staptype"], .tf-lock-stap [data-act="pm-stapscope"], .tf-lock-stap [data-act="step-doc-bouw"] {
  pointer-events: none !important; opacity: .55 !important; cursor: not-allowed !important; box-shadow: none !important;
}
.tf-lock-stap [data-act="del-step"], .tf-lock-stap [data-act="up-step"], .tf-lock-stap [data-act="down-step"], .tf-lock-stap [data-act="add-aanname"], .tf-lock-stap [data-act="step-doc-del"] { display: none !important; }
.pd-step-lock { flex: none; color: var(--text-3); font-size: 13px; display: inline-flex; align-items: center; padding: 0 4px; }
/* De conceptbalk. */
.tf-concept-balk { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--violet-text, #6A35C9); border-left-width: 4px; border-radius: var(--r-lg); background: var(--violet-soft, #F1EAFE); font-size: 13px; line-height: 1.45; }
.tf-concept-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tf-concept-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--violet-text, #6A35C9); color: #fff; font-weight: 600; font-size: 12px; letter-spacing: .01em; white-space: nowrap; }
.tf-concept-txt { color: var(--text); flex: 1 1 240px; min-width: 0; }
/* De korte vorm van die uitleg, alleen op de telefoon (de lange staat daar uit). */
.tf-concept-txt-kort { display: none; }
.tf-concept-stand { color: var(--violet-text, #6A35C9); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.tf-concept-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-concept-oms { flex: 1 1 280px; min-width: 0; font-size: 14px; background: var(--surface, #fff); }
.tf-concept-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.tf-concept-knoppen .btn { white-space: nowrap; }
.tf-concept-knoppen .btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) {
  /* Telefoon: de conceptbalk plakt onder de proceskop (pm-kop, sticky op de topbalk), de
     omschrijving en de knoppen over de volle breedte, elk minstens 44px hoog. De lockbalk
     hoeft niet te plakken: Bewerken staat vol breed bovenaan de hub. */
  .tf-concept-balk.tf-concept-mobiel { position: sticky; top: calc(var(--topbar-h) + 53px); z-index: 13; margin: 0; border-radius: 0; border-left-width: 1px; border-top: none; padding: 10px 14px; }
  .tf-concept-mobiel .tf-concept-stand { white-space: normal; flex: 1 1 100%; }
  .tf-concept-mobiel .tf-concept-txt { display: none; }
  .tf-concept-mobiel .tf-concept-txt-kort { display: block; flex: 1 1 100%; color: var(--text); }
  .tf-concept-mobiel .tf-concept-acties { flex-direction: column; align-items: stretch; }
  .tf-concept-mobiel .tf-concept-oms { flex: 1 1 auto; width: 100%; font-size: 16px; min-height: 44px; }
  .tf-concept-mobiel .tf-concept-knoppen { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tf-concept-mobiel .tf-concept-knoppen .btn { min-height: 44px; width: 100%; justify-content: center; font-size: 14px; padding: 0 6px; }
  .tf-lock-balk.tf-lock-mobiel { margin: 0; border-radius: 0; border-left-width: 1px; flex-wrap: wrap; }
  .tf-lock-mobiel .tf-lock-txt { flex: 1 1 0; }
  .tf-lock-mobiel .tf-lock-knop { flex: 1 1 100%; min-height: 44px; width: 100%; justify-content: center; }
  .tf-lock-mobiel .tf-lock-open { flex: 1 1 100%; min-height: 44px; width: 100%; justify-content: center; }
}

/* ---- TF7: scope-ontwikkeling (Scope & Budget → Scope-ontwikkeling, en het dashboard) ------- */
/* Eén taak: zien hoeveel de scope is afgedreven van de afspraak. De tabel is de bron, de grafiek
   de aanvulling; één renderfunctie (DZ.scopelog.grafiekHtml) voor beide plekken. */
.tf-scope-kop { margin-bottom: 14px; }
.tf-scope-kop .muted { font-size: 12.5px; line-height: 1.5; max-width: 70ch; }
.tf-scope-sub { font-size: 12.5px; padding: 10px 16px 0; }
.tf-scope-tabel td.tf-scope-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-scope-tabel td.tf-scope-deltas { font-size: 12.5px; line-height: 1.5; }
.tf-scope-delta-plus { color: var(--amber-strong); font-weight: 600; }
.tf-scope-delta-min { color: var(--green-strong); font-weight: 600; }
.tf-scope-grafiek { padding: 12px 16px 14px; }
/* De pillen: één reeks tegelijk (aria-pressed), 36px hoog op het bureaublad, 44px op de telefoon. */
.tf-scope-pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tf-scope-pil { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; touch-action: manipulation; }
.tf-scope-pil:hover { background: var(--surface-2); color: var(--text); }
.tf-scope-pil:active { background: var(--slate-soft); }
.tf-scope-pil[aria-pressed="true"] { background: var(--pri-soft); color: var(--pri-text); border-color: var(--pri); }
.tf-scope-pil-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* De grafiek scrolt in zijn eigen bak als hij smaller dan 520px zou worden — nooit de pagina. */
.tf-scope-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tf-scope-svg { display: block; width: 100%; min-width: 520px; height: auto; }
.tf-scope-ax { fill: var(--text-3); font-size: 10.5px; font-family: var(--font); }
.tf-scope-ax-nu { fill: var(--text); font-weight: 600; }
.tf-scope-voet { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-2); padding-top: 10px; }
.tf-scope-voet b { color: var(--text); font-variant-numeric: tabular-nums; }
.tf-scope-leeg { display: flex; gap: 10px; align-items: flex-start; padding: 16px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.tf-scope-leeg .ic { font-size: 20px; color: var(--text-3); flex: none; margin-top: 1px; }
/* De tijdlijn uit het scope-log. */
.tf-scope-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px 0; }
.tf-scope-filter .tf-scope-pillen { margin-bottom: 0; }
.tf-scope-tijdlijn { list-style: none; margin: 0; padding: 8px 16px 6px; }
.tf-scope-gebeurtenis { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tf-scope-gebeurtenis:last-child { border-bottom: 0; }
.tf-scope-gebeurtenis .proc-sub { white-space: normal; }
.tf-scope-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--text-3); }
.tf-scope-meer { padding: 8px 16px 16px; }
.dash .tf-scope-grafiek { padding: 0; }
@media (max-width: 640px) {
  .tf-scope-pil { min-height: 44px; font-size: 14px; padding: 8px 14px; }
  .tf-scope-meer .btn { width: 100%; min-height: 44px; justify-content: center; }
  .tf-scope-tabel td.tf-scope-num { white-space: normal; }
}

/* ---- TF6: beoordeling en merge (de pagina Wijzigingen) --------------------------------------- */
/* Eén taak: een wijzigingsverzoek beoordelen — zien wat er verandert, wat het kost, en beslissen.
   De diff is een lijst kaarten (gewijzigd, toegevoegd, verwijderd, kopvelden) die op de telefoon
   zonder omzetting leesbaar blijft; de beoordelingsknoppen staan in de rail en gaan op de telefoon
   vol breed, minstens 44px. Alle namen beginnen met tf-wz-. */
.tf-wz .tf-wz-tabs { max-width: 100%; }
.tf-wz .wz-tab { min-height: 32px; }
.tf-wz .wz-tab .count-chip { margin-left: 2px; }
.tf-wz-oms { white-space: normal; margin-top: 2px; max-width: 60ch; }
.tf-wz-soort { margin-left: 6px; vertical-align: middle; }
.tf-wz-historie-noot { padding: 0 16px 10px; white-space: normal; }
.tf-wz-onderbouwing { margin-top: 12px; }
.tf-wz-onderbouwing .cr-field-l { margin-bottom: 4px; }
.tf-wz-uitleg { font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; }
.tf-wz-waarschuwing { display: flex; gap: 8px; align-items: flex-start; margin: 0 16px 8px; padding: 10px 12px; border-radius: var(--r); background: var(--amber-soft); color: var(--amber-strong); font-size: 12.5px; line-height: 1.45; }
.tf-wz-beoordeling .tf-wz-waarschuwing { margin: 10px 0 0; }
.tf-wz-waarschuwing .ic { flex: none; margin-top: 2px; }
/* De diff: één kaart per stap of per groep kopvelden, met een gekleurde kantlijn per soort. */
.tf-wz-diff-lijst { display: flex; flex-direction: column; gap: 10px; }
.tf-wz-diff-stap { border: 1px solid var(--border); border-left: 3px solid var(--slate-text, #64748B); border-radius: var(--r); padding: 10px 12px; background: var(--surface); }
.tf-wz-diff-stap.is-gewijzigd { border-left-color: var(--amber-strong); }
.tf-wz-diff-stap.is-toegevoegd { border-left-color: var(--green-strong); }
.tf-wz-diff-stap.is-verwijderd { border-left-color: var(--red-strong); }
.tf-wz-diff-stap.is-verwijderd .tf-wz-diff-kop { text-decoration: line-through; text-decoration-color: var(--red-strong); }
.tf-wz-diff-stap.is-kop, .tf-wz-diff-stap.is-volgorde { border-left-color: var(--blue-text); }
.tf-wz-diff-kop { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.tf-wz-diff-veld { display: grid; grid-template-columns: 110px minmax(0, 1fr) 16px minmax(0, 1fr); gap: 6px 10px; align-items: baseline; padding: 6px 0 0; font-size: 12.5px; line-height: 1.45; }
.tf-wz-diff-l { color: var(--text-3); font-weight: 500; }
.tf-wz-diff-van { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-3); overflow-wrap: anywhere; }
.tf-wz-diff-naar { color: var(--text); overflow-wrap: anywhere; }
.tf-wz-diff-veld .ic { color: var(--text-3); justify-self: center; }
/* Artefacten op het voorstel: per soort een rij met teller, knop en de lijst. */
.tf-wz-art-noot { padding: 0 16px 8px; white-space: normal; line-height: 1.5; }
.tf-wz-art-rij { padding: 10px 0; border-bottom: 1px solid var(--border); }
.tf-wz-art-rij:last-child { border-bottom: 0; padding-bottom: 0; }
.tf-wz-art-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.tf-wz-art-l { font-size: 13px; font-weight: 600; color: var(--text); }
.tf-wz-art-reden { white-space: normal; max-width: 40ch; text-align: right; }
.tf-wz-art-lijst { margin: 0; padding: 0 0 0 18px; font-size: 12.5px; line-height: 1.6; }
.tf-wz-art-lijst li .tag { margin-left: 4px; vertical-align: middle; }
.tf-wz-log-notitie { white-space: normal; margin-top: 2px; }
/* Een logregel: de handeling en daarachter wie/wanneer, met ruimte ertussen (cr-log-head uit
   styles.css is een sectiekop en past hier niet). */
.tf-wz-log-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tf-wz-log-kop .cr-log-act { font-weight: 600; }
/* De beoordeling: knoppen onder elkaar in de rail, het afwijs- en parkeerformulier inline. */
.tf-wz-acties { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tf-wz-acties .btn { justify-content: center; min-height: 40px; }
.tf-wz-form { margin-top: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: var(--r); background: var(--surface-2); }
.tf-wz-form .cr-textarea, .tf-wz-form select.input { width: 100%; }
.tf-wz-form .tf-wz-acties { margin-top: 10px; }
.tf-wz-meta { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  /* Telefoon: de statustabbladen scrollen in hun eigen strook (nooit de pagina), de knoppen
     vol breed en 44px, het tekstveld 16px tegen de zoom, de diff-velden onder elkaar. */
  .tf-wz .wz-list-head { flex-direction: column; align-items: stretch; }
  .tf-wz .tf-wz-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tf-wz .wz-tab { min-height: 44px; white-space: nowrap; flex: none; font-size: 13.5px; }
  .tf-wz .wz-top-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tf-wz .wz-top-actions .btn { min-height: 44px; width: 100%; justify-content: center; }
  .tf-wz-filters .filter-select, .tf-wz-filters .wz-search { width: 100%; min-height: 44px; font-size: 16px; }
  .tf-wz-filters .btn { min-height: 44px; width: 100%; justify-content: center; margin-left: 0 !important; }
  .tf-wz-diff-veld { grid-template-columns: 1fr; gap: 2px; }
  .tf-wz-diff-veld .ic { display: none; }
  .tf-wz-diff-naar::before { content: '→ '; color: var(--text-3); }
  .tf-wz-art-kop .btn { width: 100%; min-height: 44px; justify-content: center; }
  .tf-wz-art-reden { text-align: left; max-width: none; }
  .tf-wz-acties .btn { min-height: 44px; width: 100%; font-size: 14px; }
  .tf-wz-form .cr-textarea, .tf-wz-form select.input { font-size: 16px; min-height: 44px; }
}

/* ---- TF8: wijzigingsregime (Instellingen → Project) ----------------------------------------- */
/* Twee keuzekaarten naast elkaar (zelfde familie als de acceptatiemodel-kaarten .acc-opt), onder
   640px onder elkaar en vol breed. De hele kaart is de knop, minstens 44px hoog. */
.tf-regime-lead { margin: 0 0 12px; font-size: 12.5px; max-width: 74ch; line-height: 1.5; }
.tf-regime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.tf-regime-opt { display: flex; gap: 11px; align-items: flex-start; text-align: left; padding: 12px 13px; min-height: 44px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; width: 100%; }
.tf-regime-opt:hover { border-color: var(--border-3); }
.tf-regime-opt.on { border-color: var(--pri); background: var(--pri-soft); }
.tf-regime-opt[disabled] { cursor: default; }
.tf-regime-opt[disabled]:not(.on) { opacity: .7; }
.tf-regime-ic { font-size: 18px; color: var(--text-3); flex: none; margin-top: 1px; }
.tf-regime-opt.on .tf-regime-ic { color: var(--pri-text); }
.tf-regime-body { min-width: 0; display: block; }
.tf-regime-kop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tf-regime-title { font-size: 13.5px; font-weight: 600; }
.tf-regime-hint { display: block; margin-top: 2px; white-space: normal; line-height: 1.45; }
.tf-regime-gevolg { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); font-size: 12.5px; line-height: 1.5; }
.tf-regime-gevolg-t { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tf-regime-gevolg-l { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; color: var(--text-2); }
.tf-regime-noot { margin-top: 10px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .tf-regime-grid { grid-template-columns: 1fr; }
  .tf-regime-opt { padding: 14px; }
}

/* ---- CR1: aanvullen van een lopend verzoek --------------------------------------------------- */
/* De waarschuwing in de conceptbalk op de procespagina: het verzoek ligt al bij iemand, wat je nu
   wijzigt gaat eraan mee. Amber, want het is een let-op en geen fout; binnen de violette
   conceptbalk staat hij op een eigen vlak zodat hij niet in de uitleg erboven wegvalt. */
.tf-concept-waarschuwing { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: var(--r);
  background: var(--amber-soft); color: var(--amber-strong); font-size: 12.5px; line-height: 1.45; }
.tf-concept-waarschuwing .ic { flex: none; margin-top: 2px; }
.tf-concept-waarschuwing strong { font-weight: 600; }
/* De strook boven de beoordeelknoppen op de pagina Wijzigingen: hoe vaak er ná het indienen is
   aangevuld, door wie en wanneer. Zelfde vorm als tf-wz-waarschuwing, andere kleur — dit is geen
   conflict maar een feit dat je gelezen moet hebben. */
.tf-wz-aanvulling { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r);
  background: var(--violet-soft, #F1EAFE); color: var(--violet-text, #6A35C9); font-size: 12.5px; line-height: 1.45; }
.tf-wz-aanvulling .ic { flex: none; margin-top: 2px; }

/* ---- CR2: tabblad Wijzigingen op de procespagina --------------------------------------------- */
/* Eén lijst uitklapbare kaarten onder een samenvatting. Alleen-lezen: de enige knop per kaart
   brengt je naar de pagina waar er wél iets te beslissen valt. */
.tf-crtab .tf-crtab-stats { margin-bottom: 14px; }
/* FB3 (01-10): "Gewijzigd sinds het akkoord", bovenaan het tabblad. Amber zoals het label
   "Gewijzigd" in de proceskop: het is een stand die om een handeling vraagt, geen fout. */
.pd-akw { margin-bottom: 14px; border-left: 3px solid var(--amber-strong, #b45309); }
.pd-akw-wie { font-size: 12.5px; }
.pd-akw-noot { font-size: 12.5px; line-height: 1.5; }
.pd-akw-lijst { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text); }
.pd-akw-voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 0 16px 14px; font-size: 12.5px; }
/* FB4: de poort na een kleine wijziging. Groen in plaats van amber: de check WAS groen, en de
   vraag is geen waarschuwing maar een keuze. Zelfde vorm als .gap-poort (styles.css). */
.gap-poort.gap-poort-klein { border-color: var(--green-strong, #15803d); background: var(--green-soft, #f0fdf4); }
.gap-poort-klein .gap-poort-kop { color: var(--green-strong, #15803d); }
.gap-poort-lijst { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.gap-poort-vraag { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); }
@media (max-width: 640px) {
  .gap-poort-klein .gap-poort-acties .btn { min-height: 44px; flex: 1 1 100%; justify-content: center; }
}
/* Dezelfde wijzigingen kort op de kaart van het eindoordeel (Beoordeling), boven "Opnieuw accepteren". */
.bo2-akw { margin-top: 10px; padding: 9px 11px; border-radius: var(--r); background: var(--amber-soft, #fef3c7); font-size: 12.5px; }
.bo2-akw-k { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--amber-strong, #b45309); margin-bottom: 4px; }
.bo2-akw-lijst { margin: 0 0 6px; padding-left: 18px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.bo2-akw-meer { margin-bottom: 4px; }
@media (max-width: 640px) {
  .pd-akw-voet .btn, .bo2-akw .btn { min-height: 44px; width: 100%; justify-content: center; }
}
.tf-crtab-panel .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tf-crtab-lijst { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.tf-crtab-kaart { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.tf-crtab-kaart.is-uit { border-color: var(--border-3, var(--border)); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.tf-crtab-kop { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 11px 13px; border: 0;
  background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tf-crtab-kop:hover { background: var(--surface-2); }
.tf-crtab-kop-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.tf-crtab-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tf-crtab-oms { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; }
/* Besluit Dennis 20 okt: de omschrijving van een verzoek toont hooguit twee regels met een
   ellipsis (lijst, kaart, Mijn acties); de volledige tekst staat in title en op de detailpagina. */
.tf-klem2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
/* De statuspil bij HET VERZOEK in Mijn acties (besluit Dennis 20 okt): dezelfde maat als elke andere
   tag, krimpt niet en breekt niet af, met ruimte tot de tekst. */
.sig-punt > .tag { flex: none; white-space: nowrap; margin-right: 2px; }
.sig-punt:has(> .tag) { align-items: center; gap: 10px; }
/* Het merkteken naast de processtatus zolang een verzoek ter beoordeling ligt. */
.tf-ingediend-tag { white-space: nowrap; }
/* PR 3 (0381): de volledige beschrijving van een AI-voorstel, ingeklapt na drie regels met Meer lezen. */
.tf-wz-toel { margin: 8px 0 12px; display: flex; flex-direction: column; gap: 4px; }
.tf-wz-toel-tekst { font-size: 13px; color: var(--text-2); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tf-wz-toel-tekst.is-geknipt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tf-wz-meer { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--pri-text); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; min-height: 24px; }
.tf-wz-meer:hover { text-decoration: underline; }
@media (max-width: 640px) { .tf-wz-meer { min-height: 44px; font-size: 14px; } }
/* PR 2: een bewerking van een AI-voorstel als blok, open te klappen naar oud → nieuw per veld; de
   nieuwe tekst is aanpasbaar. Eén bewerking per blok, ook op de telefoon. */
.tf-wz-aiops .tf-wz-aiop { display: block; padding: 8px 0; border-top: 1px solid var(--border); }
.tf-wz-aiops .tf-wz-aiop:first-child { border-top: none; padding-top: 0; }
.tf-wz-aiops .tf-wz-aiop + .tf-wz-aiop { margin-top: 0; }
.tf-wz-aiop-kop { display: flex; gap: 8px; align-items: flex-start; }
.tf-wz-aiop-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tf-wz-aiop-knop { flex: none; white-space: nowrap; }
.tf-wz-aiop-velden { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 2px 22px; }
.tf-wz-aiop-veld { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12.5px; }
.tf-wz-aiop-l { color: var(--text-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-wz-aiop-oud { color: var(--text-3); overflow-wrap: anywhere; }
.tf-wz-aiop-oud:not(.is-leeg) { text-decoration: line-through; }
.tf-wz-aiop-veld > .ic { color: var(--text-faint); margin-top: 2px; }
.tf-wz-aiop-nieuw { overflow-wrap: anywhere; }
.tf-wz-aiop-in { width: 100%; min-width: 0; font-size: 13px; }
.tf-wz-aiop-veld.is-aangepast .tf-wz-aiop-in { border-color: var(--amber-text, #B45309); }
@media (max-width: 640px) {
  .tf-wz-aiop-knop { min-height: 44px; }
  .tf-wz-aiop-velden { margin-left: 0; }
  .tf-wz-aiop-veld { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tf-wz-aiop-veld > .ic { display: none; }
  .tf-wz-aiop-oud:not(.is-leeg)::before { content: "was: "; }
  .tf-wz-aiop-in { font-size: 16px; min-height: 44px; }
}
.tf-crtab-meta { font-size: 12px; color: var(--text-3); }
.tf-crtab-bedrag { flex: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-crtab-pijl { flex: none; color: var(--text-3); }
.tf-crtab-body { display: flex; flex-direction: column; gap: 12px; padding: 2px 13px 14px; border-top: 1px solid var(--border); }
.tf-crtab-vak-t { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; margin: 10px 0 6px; }
.tf-crtab-tekst { font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tf-crtab-noot { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 11px; border-radius: var(--r);
  background: var(--surface-2); color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.tf-crtab-noot .ic { flex: none; margin-top: 2px; }
.tf-crtab-art-rij { margin-bottom: 6px; }
.tf-crtab-art-l { font-size: 12.5px; font-weight: 600; }
.tf-crtab-art-lijst { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.tf-crtab-log { max-height: 260px; overflow-y: auto; }
.tf-crtab-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tf-crtab-ai-lijst { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; }
.tf-crtab-ai-lijst li { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.tf-crtab-ai-lijst li + li { margin-top: 6px; }
.tf-crtab-ai-lijst .ic { color: var(--violet-text); margin-top: 2px; flex: none; }
.tf-crtab-leeg { padding: 26px 20px; }
.tf-crtab-leeg p { margin: 6px auto 0; max-width: 62ch; font-size: 13px; line-height: 1.6; }
@media (max-width: 640px) {
  /* Telefoon: de kaart is de eenheid — de kop wordt twee regels in plaats van één rij, het
     verschil komt als lijst onder elkaar (de diff-velden doen dat al via .tf-wz-diff-veld) en
     elke knop is vol breed en 44px hoog. */
  .tf-crtab-lijst { padding: 12px 12px 14px; gap: 12px; }
  .tf-crtab-kop { flex-wrap: wrap; align-items: flex-start; padding: 12px; min-height: 44px; }
  .tf-crtab-kop-l { flex: 1 1 100%; order: 1; }
  .tf-crtab-oms { white-space: normal; }
  .tf-crtab-bedrag { order: 2; margin-top: 6px; }
  .tf-crtab-pijl { order: 3; margin: 6px 0 0 auto; }
  .tf-crtab-body { padding: 2px 12px 14px; }
  .tf-crtab-acties .btn { width: 100%; min-height: 44px; justify-content: center; }
  .tf-crtab-log { max-height: none; }
  .tf-concept-waarschuwing { font-size: 13px; }
}

/* FB7 (01-10): een bedrijfsregel afwijzen. Rood als de verbetering-afwijzing (.imp5-afwijs in
   dv.css): het formulier met de verplichte reden, en daarna een rustige grijze regel die zegt dat
   hij is afgewezen, door wie en waarom. De knop in de kop en in de doorloper is rood omrand. */
.br2-afwijs-knop, .btn.tk-weiger { color: var(--red-strong); }
.br2-afwijs-knop .ic, .btn.tk-weiger .ic { color: var(--red-strong); }
.br2-afwijs-knop:hover, .btn.tk-weiger:hover { background: var(--red-soft); border-color: var(--red-soft); }
.br2-afwijs { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--red-soft); }
.br2-afwijs .label { color: var(--red-strong); }
.br2-afwijs .textarea { width: 100%; }
.br2-afwijs-knoppen { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.br2-afgewezen { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.br2-afgewezen .ic { flex: none; margin-top: 2px; color: var(--text-3); }
@media (max-width: 640px) {
  .br2-afwijs-knoppen .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
}