/* ============================================================================
   gloei.css — Fonkelzorg design system (platform-breed)
   ============================================================================
   Eén bron voor alle statische fz-*-componentstyling en design-tokens.
   Geladen via {% static %} in base.html en base_publiek.html.

   WAT HOORT HIER: elke statische fz-*-definitie en elk design-token.
   WAT NIET: per-request DB-waarden (huisstijlkleuren, merkbalk-gradient) —
   die blijven als klein inline <style>-blok in de base-templates staan.
   Nieuwe fz-*-componenten landen HIER, niet in een paginaspecifiek <style>.

   ── Breakpoints (conventie; CSS-variabelen werken niet in media queries) ──
   DOEL   768px — platform-standaard voor nav/detail-reflow.
                  NOG NIET TOEGEPAST; harmonisatie is aan het responsive-traject.
   HUIDIG — volledige lijst; let op: de publieke flow wijkt af van het platform.
     600px  .fz-grid-2 in DIT bestand — geldt alleen voor het PLATFORM. In de publieke
            flow wordt deze media-query overschreven: base_publiek.html herdeclareert
            .fz-grid-2 ná de <link> (gelijke specificiteit, latere bron wint).
     480px  .fz-grid-2 in de PUBLIEKE flow (base_publiek.html) + inschrijfformulier.html
     768px  iOS-autozoom-preventie (16px invoerveld) in base_publiek.html
     900px / 520px  launcher-tegels (launcher.html, FB-23)
   Harmoniseren betekent dus BEIDE takken aanpassen — niet alleen deze file.

   ── Tabel-maten (conventie) ──
   DOEL   min-width op datadichte tabellen + overflow-x:auto op de wrapper,
          zodat kolommen leesbaar blijven i.p.v. samen te knijpen.
          Een --tabel-min-width-variabele landt pas bij de eerste consument.
   ========================================================================= */

/* ---- Fonts (relatieve url's: manifest-storage herschrijft ze) ---- */
      @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap;
        src: url("../fonts/montserrat-v31-latin-ext.d16dfe26bcd7.woff2") format('woff2');
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
      @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap;
        src: url("../fonts/montserrat-v31-cyrillic.6fd02dd74afd.woff2") format('woff2');
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
      @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap;
        src: url("../fonts/montserrat-v31-latin.311d352d9323.woff2") format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

    [x-cloak] { display: none !important; }
    /* ===== Fonkelzorg design system ===== */
    :root {

      --border: var(--line);   /* alias (KTD-3) — publieke templates gebruiken var(--border) */
      --r-sm: 7px;
      --r-md: 11px;
      --r-lg: 16px;
      --shadow-card: 0 1px 2px rgba(28,42,43,.04), 0 6px 22px rgba(28,42,43,.05);
      --shadow-pop:  0 8px 30px rgba(28,42,43,.14);
      --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

      /* ---- Spacing-schaal ----
         De vraag is niet "hoeveel marge" maar "welke stap". De waarde staat
         in de naam, zodat niemand hoeft op te zoeken wat --sp-3 zou betekenen.
         Zes stappen en niet meer: elke tussenwaarde maakt de schaal een
         suggestie in plaats van een keuze.
         Aanleiding, gemeten 2026-08-04/05 over de 41 fp-templates: 520
         maat-attributen zonder kleur, met gaps van 1, 2, 3, 4, 5, 6, 8, 10, 12,
         14 en 16px door elkaar. Zie de styleguide, "Tokens & breakpoints",
         voor wanneer je de schaal juist NIET gebruikt. */
      --sp-4:   4px;
      --sp-8:   8px;
      --sp-12: 12px;
      --sp-16: 16px;
      --sp-24: 24px;
      --sp-32: 32px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    input, select, textarea, button { font-family: inherit; }
    html, body { margin: 0; padding: 0; height: 100%; }
    body { font-family: var(--font); color: var(--ink); background: var(--bg);
           -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }

    /* ---- Layout-primitieven ----
       Twee klassen voor het patroon dat anders per scherm opnieuw wordt
       uitgeschreven: `display:flex; align-items:center; gap:10px`. Dat staat
       64× in de fp-templates, met gaps die net niet gelijk zijn.

       Waarom twee en niet drie. Het plan stelde `.fz-stapel`, `.fz-rij` én
       `.fz-raster` voor, en vroeg vooraf te meten. De meting over alle 41
       fp-templates: `display:flex` 88×, waarvan 64 met `align-items:center`;
       `flex-direction:column` **nul keer**; `display:grid` 8×, en die acht zijn
       stuk voor stuk een eigen kolomdefinitie (`52px repeat(12,1fr) 90px 32px`)
       die je toch inline moet meegeven. Een `.fz-raster` zou dus geen enkele
       inline stijl vervangen. `.fz-stapel` heeft vandaag ook geen consument,
       maar is de tegenhanger van `.fz-rij` in drie regels — zonder hem grijpt
       de eerstvolgende bouwer die een kolom nodig heeft alsnog naar een eigen
       getal, en dat is precies de drift die dit oplost.

       Wanneer je ze NIET gebruikt: voor maatvoering die bij één scherm hoort.
       Een `max-width:520px` op één formulier blijft een inline `style=`. Dit
       zijn primitieven, geen utility-framework: er komt geen derde, en er komen
       géén losse `.marge-24`-klassen — die zijn alleen een tweede naam voor
       hetzelfde getal. */
    .fz-rij { display: flex; align-items: center; gap: var(--sp-12); }
    .fz-rij.compact { gap: var(--sp-8); }
    .fz-rij.ruim { gap: var(--sp-24); }
    .fz-stapel { display: flex; flex-direction: column; gap: var(--sp-12); }
    .fz-stapel.compact { gap: var(--sp-8); }
    .fz-stapel.ruim { gap: var(--sp-24); }

    /* App shell */
    .fz-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
    .fz-body { display: flex; flex: 1; overflow: hidden; }
    .fz-merkbalk { height: 4px; flex-shrink: 0; }

    /* ---- Header ---- */
    .fz-header {
      flex: 0 0 64px; display: flex; align-items: center;
      background: #fff; border-bottom: 1px solid var(--line);
      padding: 0 24px; flex-shrink: 0; z-index: 100;
    }
    .fz-launcher-btn {
      display: flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; border-radius: var(--r-sm);
      color: var(--ink-2); text-decoration: none; flex-shrink: 0;
      transition: background .12s, color .12s;
      margin-right: 10px;
    }
    .fz-launcher-btn:hover { background: var(--primary-100); color: var(--primary-700); }
    .fz-launcher-btn svg { width: 18px; height: 18px; }
    .fz-header-logo { display: flex; align-items: center; }
    .fz-logoimg { height: 36px; width: auto; display: block; }
    .fz-header-apptitle {
      font-size: 15px; font-weight: 700; color: var(--muted);
      margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--faint);
      white-space: nowrap;
    }
    .fz-header-apptitle:empty { display: none; }
    .fz-header-user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
    .fz-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-700); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 11px; flex: 0 0 auto; }

    /* ---- Instellingen sectie-nav ---- */
    .fz-sect-nav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); }
    .fz-sect-tab {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 7px 16px 9px; border-radius: 6px 6px 0 0;
      font-size: 13.5px; font-weight: 600; text-decoration: none;
      color: var(--ink); border: 1px solid var(--line); border-bottom: none;
      margin-bottom: -2px; background: #fff;
      transition: background .12s, color .12s, border-color .12s;
    }
    .fz-sect-tab:hover { background: var(--primary-100); color: var(--primary-700); border-color: var(--primary-300); }
    .fz-sect-tab.active { background: #fff; color: var(--primary-800); font-weight: 700; border-bottom: 2px solid var(--primary-700); }
    .fz-sect-tab svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* ---- Account menu ---- */
    .fz-acctmenu { position: relative; margin-left: auto; }
    .fz-acct-trigger {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 10px 5px 5px;
      background: none; border: 1.5px solid transparent; border-radius: 10px;
      cursor: pointer; font-family: var(--font); font-size: 13px; color: var(--ink);
      transition: background .15s, border-color .15s;
    }
    .fz-acct-trigger:hover { background: var(--primary-100); border-color: var(--line); }
    .fz-acct-trigger:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
    .fz-acct-name { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fz-acct-chevron { width: 14px; height: 14px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
    .fz-acct-drop {
      position: absolute; right: 0; top: calc(100% + 8px);
      min-width: 230px;
      background: #fff; border: 1px solid var(--line);
      border-radius: 11px; box-shadow: 0 8px 24px rgba(28,42,43,.10), 0 2px 6px rgba(28,42,43,.06);
      z-index: 500; overflow: hidden;
    }
    .fz-acct-identity {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 14px 12px;
    }
    .fz-acct-identity .fz-avatar { width: 36px; height: 36px; font-size: 13px; }
    .fz-acct-idname { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
    .fz-acct-idrole { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
    .fz-acct-sep { margin: 0; border: none; border-top: 1px solid var(--line); }
    .fz-acct-item {
      display: flex; align-items: center; gap: 9px;
      padding: 9px 10px; margin: 1px 6px; width: calc(100% - 12px);
      font-size: 13.5px; font-weight: 500; font-family: var(--font);
      color: var(--ink-2); text-decoration: none; background: none; border: none;
      cursor: pointer; text-align: left; transition: background .12s, color .12s;
      border-radius: var(--r-sm);
    }
    .fz-acct-item:hover { background: var(--primary-100); color: var(--primary-800); }
    .fz-acct-item:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; background: var(--primary-100); color: var(--primary-800); }
    .fz-acct-item svg { width: 15px; height: 15px; flex-shrink: 0; }
    .fz-acct-item.danger { color: var(--ink-2); }
    .fz-acct-item.danger:hover { background: var(--primary-100); color: var(--primary-800); }
    .fz-acct-item.danger:focus-visible { outline-color: var(--primary-500); background: var(--primary-100); color: var(--primary-800); }

    /* ---- Sidebar ---- */
    .fz-side {
      width: 220px; flex: 0 0 220px;
      background: #fff; color: var(--ink); border-right: 1px solid var(--line);
      display: flex; flex-direction: column; overflow-y: auto;
    }
    .fz-navgroup { padding: 6px 14px; }
    .fz-navlabel { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
      color: var(--faint); padding: 14px 10px 7px; }
    .fz-nav { display: flex; flex-direction: column; gap: 2px; }
    .fz-navitem {
      display: flex; align-items: center; gap: 10px; padding: 9px 12px;
      border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; color: var(--ink-2);
      text-decoration: none; transition: background .12s, color .12s; position: relative;
      border: none; background: none; cursor: pointer; width: 100%; text-align: left;
    }
    .fz-navitem svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .7; }
    .fz-navitem:hover { background: var(--primary-100); color: var(--primary-800); }
    .fz-navitem:hover::before {
      content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
      width: 3px; background: var(--primary-300); border-radius: 0 3px 3px 0;
    }
    .fz-navitem.active { background: var(--primary-100); color: var(--primary-800); font-weight: 600; }
    .fz-navitem.active::before {
      content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
      width: 3px; background: var(--primary-500); border-radius: 0 3px 3px 0;
    }
    .fz-navitem.active svg { opacity: 1; }
    .fz-navitem .count { margin-left: auto; background: var(--secondary-700); color: #fff;
      font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
    .fz-navitem.soon { color: var(--faint); cursor: default; pointer-events: none; }
    .fz-navitem .soon-tag { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
      text-transform: uppercase; color: var(--faint); border: 1px solid var(--line);
      padding: 1px 5px; border-radius: 4px; }

    /* ---- Main area ---- */
    .fz-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
    .fz-topbar { display: none; }
    .fz-topbar-spacer { flex: 1; }
    .fz-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 26px 30px; scrollbar-gutter: stable; }

    /* ---- Search ---- */
    .fz-search { height: 38px; border: 1px solid var(--line); background: var(--line-2);
      border-radius: 999px; display: flex; align-items: center;
      gap: 9px; padding: 0 14px; color: var(--muted); cursor: text; }
    .fz-search svg { width: 16px; height: 16px; flex: 0 0 auto; }
    .fz-search input { flex: 1; min-width: 0; border: none; background: none; outline: none;
      font-family: var(--font); font-size: 13.5px; color: var(--ink); padding: 0; }
    .fz-search input::placeholder { color: var(--muted); }
    .fz-search:focus-within { border-color: var(--primary-500); background: #fff;
      box-shadow: 0 0 0 3px var(--focus-ring); }

    /* ---- Typography ---- */
    .fz-h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; }
    .fz-sub { font-size: 13px; color: var(--muted); margin: 3px 0 0; line-height: 1.4; }

    /* ---- Buttons ---- */
    .fz-btn { font-family: var(--font); display: inline-flex; align-items: center; gap: 8px;
      height: 40px; padding: 0 16px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600;
      border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
      text-decoration: none; transition: background .12s; }
    .fz-btn.primary { background: var(--primary-700); border-color: var(--primary-700); color: #fff; }
    .fz-btn.primary:hover { background: var(--primary-800); }
    .fz-btn.secondary { border-color: var(--primary-700); color: var(--primary-700); }
    .fz-btn.secondary:hover { background: var(--primary-100); }
    .fz-btn.danger { background: #fff; border-color: var(--line); color: var(--danger-600); }
    .fz-btn.danger:hover { background: var(--danger-100); border-color: var(--danger-300); color: var(--danger-700); }
    .fz-btn.danger:focus-visible { outline-color: var(--danger-600); background: var(--danger-100); }
    .fz-btn.yellow { background: var(--secondary-700); border-color: var(--secondary-800); color: #fff; }
    .fz-btn.yellow:hover { background: var(--secondary-800); border-color: var(--secondary-800); }


    .fz-btn[disabled], .fz-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

    /* ---- Tabs ---- */
    .fz-tabs { display: inline-flex; background: var(--line-2); border: 1px solid var(--line);
      border-radius: var(--r-sm); padding: 3px; gap: 2px; }
    .fz-tab { height: 30px; padding: 0 13px; border-radius: 5px; border: none; background: none;
      font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
      display: flex; align-items: center; gap: 7px; text-decoration: none; }
    .fz-tab.active { background: #fff; color: var(--primary-800); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
    .fz-tab .n { font-size: 11px; font-weight: 700; background: rgba(0,0,0,.06);
      padding: 0 6px; border-radius: 9px; }
    .fz-tab.active .n { background: var(--primary-100); color: var(--primary-700); }
    /* Ruime maat: voor een tabreeks die een dimensie navigeert in plaats van een
       lijst te filteren — de jaar-switcher van de financiële planning staat op
       dertien schermen en gaat naar hetzelfde scherm voor een ander jaar. Ronder
       en luchtiger dan de filtertabs, en hij mag wrappen: een plan van tien jaar
       levert tien tabs en die passen niet altijd op één regel.
       Fase 3, U10-besluit 1 (DECISIONS.md, 2026-08-05). */
    .fz-tabs.ruim { border-radius: 10px; gap: 4px; flex-wrap: wrap; }
    .fz-tabs.ruim .fz-tab { height: 32px; padding: 0 18px; border-radius: 8px; }

    /* ---- Status badges ---- */
    .fz-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
      padding: 4px 10px 4px 8px; border-radius: 20px; }
    .fz-status .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
    .fz-status.nieuw { background: var(--secondary-700); color: #fff; }
    .fz-status.nieuw .dot { background: rgba(255,255,255,.6); }
    .fz-status.ingeschreven { background: var(--success-100); color: var(--success-900); }
    .fz-status.ingeschreven .dot { background: var(--success-700); }
    .fz-status.uitgeschreven { background: var(--line-2); color: var(--muted); }
    .fz-status.uitgeschreven .dot { background: var(--muted); }
    .fz-status.error { background: var(--danger-100); color: var(--danger-800); }
    .fz-status.error .dot { background: var(--danger-500); }

    /* ---- Card ---- */
    .fz-card { background: var(--surface); border: 1px solid var(--primary-300);
      border-radius: var(--r-md); box-shadow: var(--shadow-card); overflow: hidden; }

    /* ---- Table ---- */
    .fz-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
    .fz-table thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: var(--muted); padding: 13px 18px;
      border-bottom: 1px solid var(--primary-300); background: var(--primary-100); }
    .fz-table tbody td { padding: 13px 18px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
    .fz-table tbody tr:last-child td { border-bottom: none; }
    .fz-table tbody tr:hover { background: #f1f5f9; }
    .fz-table tfoot td { padding: 13px 18px; border-top: 1px solid var(--line-2); vertical-align: middle; }
    .kleur-radio { appearance:none;-webkit-appearance:none;display:inline-block;width:20px;height:20px;border-radius:50%;cursor:pointer;margin:0;box-sizing:border-box;vertical-align:middle;flex-shrink:0 }
    .kleur-radio:checked { box-shadow:inset 0 0 0 3px #fff, 0 0 0 2px rgba(0,0,0,.3) }
    .fz-select { height:auto;border:1px solid var(--line);border-radius:8px;padding:4px 28px 4px 12px;font-size:12.5px;font-family:var(--font);font-weight:600;color:var(--ink-2);background:#fff;cursor:pointer;transition:border-color .12s;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center }
    .fz-select:hover { border-color:var(--primary-500) }
    .fz-select:focus { outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--focus-ring) }
    .fz-select.compact { height:34px; }
    .fz-rowavatar { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
      background: #e2e8f0; color: #334155; display: flex; align-items: center;
      justify-content: center; font-weight: 700; font-size: 12px; }
    .fz-rowavatar.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 16px;
      background: #e2e8f0; color: #334155; }
    .fz-rowgo { display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
      color: var(--primary-700); font-size: 13px; text-decoration: none; }
    .fz-rowgo svg { width: 14px; height: 14px; }
    .fz-table tbody tr.click { cursor: pointer; }

    /* ---- Field cards (detail page) ---- */
    .fz-fieldcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
      margin-bottom: 14px; overflow: hidden; }
    .fz-fieldhead { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      color: var(--primary-700); padding: 13px 18px; background: var(--primary-100);
      border-bottom: 1px solid var(--primary-300); }
    .fz-field { display: flex; align-items: center; gap: 14px; padding: 11px 14px 11px 18px;
      border-bottom: 1px solid var(--line-2); }
    .fz-field:last-child { border-bottom: none; }
    .fz-field .lbl { width: 160px; flex: 0 0 auto; font-size: 12.5px; color: var(--muted); font-weight: 600; }
    .fz-field .val { flex: 1; font-size: 14px; font-weight: 500; color: var(--ink); }

    /* Accent variant (HiX shortlist) */
    .fz-fieldcard.primary { border-color: var(--primary-700); }
    .fz-fieldhead.primary-head { background: var(--primary-700); color: #fff;
      border-bottom-color: var(--primary-800); text-transform: none; letter-spacing: 0; font-size: 13px;
      display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; }
    .fz-fieldcard.accent { border-color: var(--primary-500); }
    .fz-fieldhead.accent-head { background: var(--primary-300); color: var(--primary-900);
      border-bottom-color: var(--primary-500); text-transform: none; letter-spacing: 0; font-size: 13px;
      display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; }
    .fz-fieldhead.accent-head .sub { font-size: 11px; font-weight: 600; color: var(--primary-700); opacity: .7; }
    .fz-fieldcard.warn { border-color: #fcd34d; }
    .fz-fieldhead.warn-head { background: #fef3c7; color: #92400e;
      border-bottom-color: #fcd34d; text-transform: none; letter-spacing: 0; font-size: 13px;
      display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; }
    .fz-fieldhead.warn-head .sub { font-size: 11px; font-weight: 600; color: #92400e; opacity: .7; }
    .fz-warn { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: #92400e; line-height: 1.45; }
    .fz-warn svg { flex-shrink: 0; margin-top: 1px; width: 15px; height: 15px; }

    /* ---- Chip-filters en dropdown ---- */
    .fz-chip {
      display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
      border: 1px solid var(--line); border-radius: 20px; background: #fff;
      font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-2);
      cursor: pointer; transition: border-color .12s, background .12s; white-space: nowrap;
    }
    .fz-chip:hover { border-color: var(--primary-500); background: var(--primary-100); color: var(--primary-800); }
    .fz-chip.active { border-color: var(--primary-500); background: var(--primary-100); color: var(--primary-800); }
    .fz-chip svg { width: 14px; height: 14px; flex: 0 0 auto; }
    .fz-dd { position: relative; }
    .fz-menu {
      position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
      background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
      box-shadow: var(--shadow-pop); min-width: 210px; overflow: hidden;
    }
    .fz-menu-item {
      display: block; padding: 10px 16px; font-size: 13.5px; font-weight: 500;
      color: var(--ink-2); text-decoration: none; transition: background .1s; cursor: pointer;
    }
    .fz-menu-item:hover { background: var(--line-2); }
    .fz-menu-item.sel { color: var(--primary-800); font-weight: 700; background: var(--primary-100); }

    /* ---- Filterbalk ---- */
    .fz-filterbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .fz-search-chip {
      display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
      border: 1px solid var(--line); border-radius: 20px; background: #fff;
      font-size: 13px; color: var(--ink-2); transition: border-color .12s;
    }
    .fz-search-chip:focus-within { border-color: var(--primary-500); }
    .fz-search-chip svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
    .fz-search-chip input { border: none; background: none; outline: none; font-size: 13px; font-family: var(--font); color: var(--ink); width: 280px; }
    .fz-search-chip input::placeholder { color: var(--muted); font-weight: 400; }
    .fz-filter-drop {
      position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
      background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
      box-shadow: var(--shadow-pop); min-width: 200px; overflow: hidden; padding: 4px 0;
    }
    .fz-filter-opt {
      display: flex; align-items: center; gap: 10px; padding: 9px 16px;
      font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; user-select: none;
      white-space: nowrap;
    }
    .fz-filter-opt:hover { background: var(--line-2); }
    .fz-filter-opt input[type=checkbox] { accent-color: var(--primary-500); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
    /* Twee vormen van hetzelfde wis-kruisje, en dat is geen slordigheid:
       - basisregel: het kruisje ZIT IN de chip, meelopend in de flex-flow. Dat is de
         client-mode-filterbalk (opvolgingen-werklijst), waar het een <span> is.
       - `.fz-chip + .fz-chip-x`: het kruisje staat NAAST de chip. Dat is de
         server-mode-filterbalk van de vier patiëntadministratie-lijsten, waar het een
         echte <button> moet zijn voor toetsenbordbediening — en een genest <button>
         bestaat niet: de HTML-parser sluit dan de buitenste chip-button, waarna het
         kruisje búíten de chip belandt (gemeten in chromium).
       De sibling-variant ligt absoluut op de chip binnen .fz-dd (position:relative);
       `.fz-chip.met-x` maakt daar de ruimte voor vrij, en alleen zolang er een filter
       actief is — zonder filter houdt de chip zijn oorspronkelijke padding.
       Scope de tweede regel dus NIET terug naar een kale `.fz-chip-x`: dat zou het
       geneste span op de opvolgingen-werklijst over de chip-tekst heen leggen. */
    .fz-chip-x {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.1);
      font-size: 15px; line-height: 1; flex-shrink: 0; margin-left: 2px;
    }
    .fz-chip-x:hover { background: rgba(0,0,0,.18); }
    .fz-chip + .fz-chip-x {
      position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 1;
      margin-left: 0; border: none; padding: 0; cursor: pointer; color: inherit;
      font-family: var(--font);
    }
    .fz-chip.met-x { padding-right: 34px; }
    .fz-wis-link {
      font-family: var(--font); font-size: 13px; color: var(--primary-700); font-weight: 600;
      background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; margin-left: 4px;
    }
    .fz-wis-link:hover { color: var(--primary-900); }

    /* ---- Rij-wisknop (fz-wis) ----
       Drie dingen die op "weghalen" lijken en het niet zijn, dus drie
       componenten:
         fz-del      — kruisje: de rij zélf verdwijnt;
         fz-wis      — prullenbak: de rij blijft, zijn waardes worden leeg;
         fz-wis-link — tekstlink: een filter of zoekopdracht wordt gewist.
       Deze stond drie keer identiek in de financiële planning (ov-, kz-, pop-)
       als de knop achter een maandraster waarmee je een heel jaar leegt. Anders
       dan fz-del staat hij er altijd: leegmaken is geen zeldzame actie op een
       invoerscherm, en er is geen rij om te hoveren als de rij zelf blijft. */
    .fz-wis {
      width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px;
      background: transparent; color: var(--muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s;
    }
    .fz-wis:hover { background: var(--danger-100); color: var(--danger-600); }

    /* ---- Kopieerknop in detail (fz-vbtn) ---- */
    /* Vertikale padding zit op .lbl/.fz-vbtn, niet op .fz-field.bal, zodat
       de button de volle celhoogte kan beslaan met align-self:stretch */
    .fz-field.bal { padding-top: 0; padding-bottom: 0; align-items: stretch; }
    .fz-fieldcard.compact .fz-field.bal { padding-top: 0; padding-bottom: 0; }
    .fz-field.bal .lbl {
      flex: 0 0 160px; width: 160px;
      padding: 8px 0; display: flex; align-items: center;
    }

    .fz-vbtn {
      position: relative; flex: 1 1 0; min-width: 0;
      display: flex; align-items: center; align-self: stretch;
      background: none; border: 1px solid transparent; border-radius: var(--r-sm);
      padding: 0 80px 0 10px; cursor: pointer;
      font-family: var(--font); text-align: left;
      transition: all .12s;
    }
    .fz-vbtn .val { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.45; flex: 1; min-width: 0; overflow-wrap: anywhere; }
    .fz-vbtn:hover { background: var(--primary-100); border-color: var(--primary-300); }
    .fz-vbtn .hint {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 600; color: var(--faint); white-space: nowrap;
      border-radius: 6px; padding: 3px 7px; transition: color .12s, background .12s;
    }
    .fz-vbtn .hint svg { width: 14px; height: 14px; flex: 0 0 auto; }
    .fz-vbtn .hint .ht { display: none; }
    .fz-vbtn .hint .ico-check { display: none; }
    .fz-vbtn .hint .lbl-copied { display: none; }
    .fz-vbtn:hover .hint { color: var(--primary-700); background: var(--primary-100); }
    .fz-vbtn:hover .hint .ht { display: inline; }
    .fz-vbtn.copied { background: var(--success-100); border-color: var(--success-300); }
    .fz-vbtn.copied .val { color: var(--muted); }
    .fz-vbtn.copied .hint { color: #fff; background: var(--success-700); }
    .fz-vbtn.copied .hint .ht { display: inline; }
    .fz-vbtn.copied .hint .ico-copy { display: none; }
    .fz-vbtn.copied .hint .ico-check { display: inline-flex; }
    .fz-vbtn.copied .hint .lbl-copy { display: none; }
    .fz-vbtn.copied .hint .lbl-copied { display: inline; }

    /* compact rows in HiX shortlist */
    .fz-fieldcard.compact .fz-field { padding-top: 8px; padding-bottom: 8px; }

    /* ---- Splitter ---- */
    .fz-splitter {
      display: flex; align-items: center; gap: 14px; margin: 20px 0 10px;
    }
    .fz-splitter::before, .fz-splitter::after { content: ""; flex: 1; height: 1px; background: var(--line); }
    .fz-splitter span { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
    .fz-splitter em { font-size: 12px; color: var(--muted); font-style: normal; white-space: nowrap; }

    /* ---- Tags (auto/patient/std) ---- */
    .fz-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px;
      font-size: 11px; font-weight: 700; letter-spacing: .03em; }
    .fz-tag.auto { background: var(--primary-100); color: var(--primary-700); }
    .fz-tag.patient { background: var(--primary-100); color: var(--primary-700); }
    .fz-tag.std { background: var(--line-2); color: var(--muted); }

    /* ---- Veldfout markering ---- */
    .fz-field-error input,
    .fz-field-error select,
    .fz-field-error textarea { border-color: var(--danger-600) !important; box-shadow: 0 0 0 3px var(--danger-ring); }
    .fz-consent-error { border-color: var(--danger-600) !important; box-shadow: 0 0 0 3px var(--danger-ring); }
    .fz-field-msg { display: none; }
    .fz-field-error .fz-field-msg,
    .fz-consent-error .fz-field-msg { display: block; color: var(--danger-600); font-size: 11.5px; margin-top: 4px; }

    /* ---- Responsief 2-koloms grid (formulier) ---- */
    .fz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
    .fz-formcard { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-card); padding: 32px; }
    @media (max-width: 600px) {
      .fz-grid-2 { grid-template-columns: 1fr; }
      .fz-formcard { padding: 20px 16px; }
    }

    /* ---- Copy chips ---- */
    .fz-copychip { display: flex; align-items: center; gap: 12px; padding: 11px 13px;
      border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
      text-align: left; font-family: var(--font); transition: all .12s; width: 100%; }
    .fz-copychip:hover { border-color: var(--primary-500); background: var(--primary-100); }
    .fz-copychip.copied { border-color: var(--success-300); background: var(--success-100); }
    .fz-copychip .ck { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
      display: flex; align-items: center; justify-content: center;
      background: var(--line-2); color: var(--faint); transition: all .12s; }
    .fz-copychip.copied .ck { background: var(--success-700); color: #fff; }
    .fz-copychip .ck svg { width: 15px; height: 15px; }
    .fz-copychip .chip-lbl { font-size: 11px; color: var(--muted); font-weight: 700;
      letter-spacing: .03em; text-transform: uppercase; }
    .fz-copychip .chip-val { font-size: 14px; font-weight: 600; margin-top: 1px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }

    /* ---- Right rail — finish panel ---- */
    .fz-finish { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
      padding: 18px; box-shadow: var(--shadow-card); }
    .fz-finish h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
    .fz-finish p  { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
    .fz-inputlabel { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; display: block; }
    .fz-input { width: 100%; height: 42px; border: 1.5px solid var(--line); border-radius: 8px;
      padding: 0 13px; font-family: var(--font); font-size: 15px; font-weight: 600;
      color: var(--ink); letter-spacing: .04em; background: #fff; }
    .fz-input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--focus-ring); }
    .fz-input::placeholder { color: var(--faint); font-weight: 500; letter-spacing: 0; }

    /* ---- Done card ---- */
    .fz-donecard { background: var(--success-100); border: 1px solid var(--success-300);
      border-radius: var(--r-md); padding: 18px; text-align: center; }
    .fz-donecard .big { width: 44px; height: 44px; border-radius: 50%; background: var(--success-700);
      color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
    .fz-donecard .big svg { width: 24px; height: 24px; }
    .fz-donecard h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--success-900); }
    .fz-donecard p  { margin: 0; font-size: 12.5px; color: var(--success-800); line-height: 1.5; }
    .fz-donecard .pn { display: inline-block; margin-top: 10px; background: #fff;
      border: 1px solid var(--success-300); border-radius: 8px; padding: 7px 14px;
      font-weight: 700; font-family: monospace; letter-spacing: .04em; color: var(--ink); }

    /* ---- Audit trail ---- */
    .fz-audit { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
      padding: 18px; margin-top: 14px; }
    .fz-audit h3 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
      text-transform: uppercase; color: var(--ink-2); }
    .fz-event { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
    .fz-event:last-child { padding-bottom: 0; }
    .fz-event::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: -2px;
      width: 2px; background: var(--line); }
    .fz-event:last-child::before { display: none; }
    .fz-event-ic { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
      display: flex; align-items: center; justify-content: center;
      background: var(--primary-100); color: var(--primary-700); z-index: 1; }
    .fz-event-ic svg { width: 15px; height: 15px; }
    .fz-event b    { font-size: 13px; font-weight: 600; display: block; color: var(--ink); }
    .fz-event span { font-size: 11.5px; color: var(--muted); }

    /* ---- Empty state ---- */
    .fz-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
    .fz-empty .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--line-2);
      color: var(--faint); display: flex; align-items: center; justify-content: center;
      margin: 0 auto 14px; }
    .fz-empty .ic svg { width: 26px; height: 26px; }
    .fz-empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 6px; }
    /* Actie-slot: één knop onder de uitleg, voor een lege staat die je in één
       klik kunt vullen (de zorgstraten van het ketenzorgscherm). Toegevoegd
       2026-08-06; daarvoor werd zo'n knop per scherm met de hand nagebouwd. */
    .fz-empty .actie { margin-top: 14px; }
    .fz-empty .actie + .fz-sub { margin-top: 10px; }

    /* Lege staat ÍN een tabel: de koprij blijft staan, de tekst komt gecentreerd
       in één cel over de volle breedte. Gebruik deze wanneer de kolomindeling ook
       zonder gegevens iets betekent — twaalf maandkolommen, of een vast rijtje
       velden. Bestaat de indeling pas mét gegevens, neem dan `.fz-empty` in een
       kaart: een lege koprij suggereert dan een structuur die er niet is.
       Maatvoering overgenomen van het personeelskostenscherm, dat dit als enige
       goed deed toen de rest acht eigen varianten had. */
    .fz-leegrij td { text-align: center; color: var(--muted);
      padding: 28px 12px; background: var(--surface); }

    /* ---- Messages ---- */
    .fz-msg { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
      border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; margin-bottom: 12px; }
    .fz-msg.success { background: var(--success-100); border: 1px solid var(--success-300); color: var(--success-900); }
    .fz-msg.error   { background: var(--danger-100); border: 1px solid var(--danger-300); color: var(--danger-800); }
    .fz-msg .msg-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--success-700);
      color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
    .fz-msg.error .msg-ic { background: var(--danger-500); }
    .fz-msg .msg-ic svg { width: 12px; height: 12px; }
    .fz-required { color: var(--danger-600); }
    .fz-badge-error { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
      background: var(--danger-100); border: 1px solid var(--danger-300); border-radius: var(--r-md);
      font-size: 12.5px; font-weight: 600; color: var(--danger-800); text-decoration: none; }
    .fz-text-ok   { color: var(--success-700); font-size: 12.5px; font-weight: 600; }
    .fz-text-err  { color: var(--danger-600); font-size: 12.5px; font-weight: 600; }
    .fz-actie-danger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
      background: none; border: 1px solid var(--danger-300); border-radius: 8px; cursor: pointer;
      color: var(--danger-600); font-size: 13px; font-weight: 600; font-family: inherit; text-align: left;
      text-decoration: none; transition: background .12s; }
    .fz-actie-danger:hover { background: var(--danger-100); }
    .fz-warn-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
      background: #fef3c7; border: 1.5px solid #fcd34d; border-radius: var(--r-md);
      font-size: 13px; font-weight: 600; color: #92400e; margin-bottom: 16px; }
    .fz-warn-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
    /* Een knop die als link leest. Nodig waar een navigatie een POST moet zijn — de
       lijstzoekterm reist in de body, dus een `?q=`-href zou stil niets filteren. Erft
       kleur en gewicht van de omhullende tekst, zodat hij in een banner niet opvalt als
       formulier-element. */
    .fz-linkbutton {
      background: none; border: none; padding: 0; cursor: pointer;
      font: inherit; color: inherit; text-decoration: underline;
    }

    /* Inline waarschuwingsbadge — gebruik als een gebruiker iets moet controleren dat niet per
       se fout is, maar aandacht verdient (bijv. BSN ontbreekt, ruwe import, buiten werkgebied).
       Niet voor harde fouten — gebruik dan fz-msg error. */
    .fz-badge-warn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
      background: #fef3c7; border: 1px solid #fde68a; border-radius: 4px;
      font-size: 11px; font-weight: 600; color: #92400e; white-space: nowrap; }

    /* ---- Back link ---- */
    .fz-back { display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
      font-weight: 600; color: var(--muted); text-decoration: none; }
    .fz-back:hover { color: var(--ink-2); }
    .fz-back svg { width: 16px; height: 16px; }

    /* ---- Actie link (paneel-actie met hover-affordance) ---- */
    .fz-actie-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
      color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none;
      border-radius: var(--r-md); transition: background .12s; }
    button.fz-actie-link { background: none; border: none; cursor: pointer; font-family: var(--font); text-align: left; }
    .fz-actie-link:hover { background: var(--primary-100); color: var(--primary-700); }
    .fz-actie-link:hover svg { stroke: var(--primary-700); }

    /* ---- Global form inputs (registration form) ---- */
    .fz-form-field input:not([type=checkbox]):not([type=radio]),
    .fz-form-field select,
    .fz-form-field textarea {
      font-family: var(--font); font-size: 13.5px; color: var(--ink);
      border: 1.5px solid var(--line); border-radius: var(--r-sm);
      padding: 9px 12px; width: 100%; background: #fff;
      transition: border-color .15s, box-shadow .15s;
    }
    .fz-form-field input:not([type=checkbox]):not([type=radio]):focus,
    .fz-form-field select:focus,
    .fz-form-field textarea:focus {
      outline: none; border-color: var(--primary-500);
      box-shadow: 0 0 0 3px var(--focus-ring);
    }
    .fz-form-field textarea { resize: vertical; min-height: 80px; }
    .fz-form-field select { cursor: pointer; }

    /* Toggle switch (iPhone-stijl) */
    .fz-toggle { display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer }
    .fz-toggle input[type=checkbox] { position:absolute;opacity:0;width:0;height:0 }
    .fz-toggle-track {
      position:relative;display:inline-block;width:42px;height:24px;
      background:#d1d5db;border:2px solid #d1d5db;
      border-radius:12px;
      transition:background .2s ease, border-color .2s ease;flex-shrink:0;
    }
    .fz-toggle input:checked + .fz-toggle-track { background:var(--primary-700);border-color:var(--primary-700) }
    .fz-toggle.danger input:checked + .fz-toggle-track { background:var(--danger-600);border-color:var(--danger-600) }
    .fz-toggle-thumb {
      position:absolute;top:2px;left:2px;width:16px;height:16px;
      background:#fff;border-radius:50%;
      box-shadow:0 1px 4px rgba(0,0,0,.25);
      transition:transform .2s ease;
    }
    .fz-toggle input:checked + .fz-toggle-track .fz-toggle-thumb { transform:translateX(18px) }
    .fz-toggle input:focus-visible + .fz-toggle-track { box-shadow:0 0 0 3px var(--focus-ring) }
    /* Compacte maat voor een toggle in een tabelcel. De gewone maat is 24px hoog
       en maakt een rij van 30px onhandelbaar; deze is 18px en past ernaast.
       Track, thumb én de verplaatsing horen bij elkaar — verklein je alleen de
       track, dan schiet de thumb eroverheen. De verhouding is die van de gewone
       maat: thumb = hoogte - 2*(rand + speling) = 18 - 8 = 10, verplaatsing =
       breedte - 8 - thumb = 32 - 8 - 10 = 14. */
    .fz-toggle.compact .fz-toggle-track { width:32px;height:18px;border-radius:9px }
    .fz-toggle.compact .fz-toggle-thumb { width:10px;height:10px }
    .fz-toggle.compact input:checked + .fz-toggle-track .fz-toggle-thumb { transform:translateX(14px) }
    /* ---- Rij-verwijderknop (fz-del) ---- */
    .fz-del { width:30px;height:30px;display:inline-grid;place-items:center;border-radius:7px;border:1px solid transparent;background:transparent;color:#aab4b9;cursor:pointer;transition:.12s;padding:0;flex-shrink:0 }
    .fz-del:hover { background:#fdeceb;color:var(--danger-600);border-color:#f6d6d4 }
    .fz-del:disabled, .fz-del[disabled] { opacity:.25;cursor:not-allowed }
    .fz-del:disabled:hover, .fz-del[disabled]:hover { background:transparent;color:#aab4b9;border-color:transparent }
    .fz-del-rij .fz-del { opacity:0;pointer-events:none }
    .fz-del-rij:hover .fz-del { opacity:1;pointer-events:auto }
    .fz-del--altijd-zichtbaar { opacity:1 !important;pointer-events:auto !important }
    /* Compacte maat voor dichte tabelrijen. Een 30px-knop in een 28px-kolom naast
       19px-invoervelden maakt de rij een derde hoger; op een raster van veertien
       kolommen is dat het verschil tussen lezen en scrollen. Zelfde vorm, andere
       maat — een maatvariant, geen tweede component. De behoefte stond er al:
       emails.html verkleinde fz-del lokaal naar 22px in de groepskop. */
    .fz-del.compact { width:22px;height:22px;border-radius:5px }
    /* Grip-handle voor drag-and-drop naast fz-del (fz-grip) */
    .fz-grip { color:#c2cacd;cursor:grab;display:inline-flex;align-items:center;flex:none;opacity:0;transition:opacity .12s }
    .fz-del-rij:hover .fz-grip { opacity:1 }

    /* ---- Kleurinvoer met inline swatch (fz-color-input) ---- */
    .fz-color-input { display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:6px;background:#fff;overflow:hidden;width:140px }
    .fz-color-input-swatch { width:32px;height:32px;flex-shrink:0;border-right:1.5px solid var(--line) }
    .fz-color-input input { border:none;outline:none;font-family:monospace;font-size:13px;letter-spacing:.04em;padding:5px 9px;color:var(--ink);background:transparent;width:100% }
    .fz-color-input:focus-within { border-color:var(--primary-500);box-shadow:0 0 0 3px var(--focus-ring) }


/* ===== Verhuisd uit paginaspecifieke <style>-blokken (U3) ===== */

/* ---- fz-cplink — kopieerbaar veld (detail-kaarten) ---- */
  .fz-cplink {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 6px 8px;
    background: none; border: none; cursor: pointer; text-align: left;
    color: var(--ink-2); font-size: 13px; font-weight: 500; font-family: inherit;
    border-radius: var(--r-md);
  }
  .fz-cplink .ico-copy { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
  .fz-cplink .val { flex: 1; }
  .fz-cplink .hint { display: none; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--primary-700); }
  .fz-cplink .hint .ico-check { width: 12px; height: 12px; display: none; }
  .fz-cplink .lbl-copied { display: none; }
  .fz-cplink:hover { background: var(--primary-100); color: var(--ink); }
  .fz-cplink:hover .hint { display: inline-flex; }
  .fz-cplink.copied { background: var(--success-100); }
  .fz-cplink.copied .hint { display: inline-flex; color: #fff; background: var(--success-700); padding: 2px 6px; border-radius: 4px; font-size: 11px; }
  .fz-cplink.copied .hint .ico-check { display: inline-flex; }
  .fz-cplink.copied .lbl-copy { display: none; }
  .fz-cplink.copied .lbl-copied { display: inline; }

/* ---- fz-meld-* — feedback/meld-kaart ---- */
    .fz-meld-kaart {
      position:fixed; bottom:52px; left:8px; z-index:801;
      width:340px; background:#fff; border-radius:var(--r-lg);
      box-shadow:0 8px 32px rgba(0,0,0,.18);
      border:none; border-top:4px solid var(--primary-500);
      display:flex; flex-direction:column; gap:14px;
      padding:20px 22px;
    }
    .fz-meld-label { font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:4px; display:block; }
    .fz-meld-textarea {
      width:100%; min-height:96px; padding:8px 10px; resize:none;
      border:1px solid var(--line); border-radius:6px;
      font-size:13px; font-family:var(--font); color:var(--ink);
      box-sizing:border-box; line-height:1.5;
    }
    .fz-meld-textarea:focus { outline:none; border-color:var(--primary-500); box-shadow:0 0 0 3px var(--focus-ring); }
    .fz-meld-bevestigd { text-align:center; padding:8px 0; color:var(--success-700); font-weight:600; font-size:14px; }

/* ---- fz-drag-ghost — sleep-placeholder ---- */
  .fz-drag-ghost { opacity:.4; background:var(--primary-100); }

/* ---- fz-sect-tab — button-reset ---- */
  button.fz-sect-tab { cursor: pointer; font-family: var(--font); }

/* ---- Sorteerbare tabelkop (U5, zie _sorteer_kop.html) ---- */
.fz-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.fz-sort-pijl { font-size: 11px; color: var(--muted); }
.fz-sort-pijl.actief { color: var(--primary-800); }

/* ===== Rapportagetabel (fz-rapport) — verhuisd uit de financiële planning ===== */
/*
   De bedragentabel: een labelkolom plus twaalf maandkolommen plus een totaal,
   met een sticky kop en een sticky eerste kolom. Acht schermen van de financiële
   planning gebruiken hem; hij is daar samengevoegd uit acht kopieën en in fase 3
   hierheen verhuisd.

   TWEE KOPCONVENTIES, EN DAT IS EEN KEUZE. `fz-table` heeft een lichte kop
   (primary-100, muted, 11px uppercase) en is voor lijsten: rijen die je
   doorbladert. `fz-rapport` heeft een donkere kop (primary-700, wit, 13px,
   rechts uitgelijnd) en is voor bedragen: een raster dat je afleest. Pak
   `fz-table` tenzij je een cijferkolom hebt die onder elkaar moet staan.
   Vastgelegd 2026-08-05 (fase 3, U10-besluit 2, zie DECISIONS.md).

   DE RIJLADDER is een gewichtstrap, van zwaar naar licht: sectie → groep →
   regel, met totaal en netto als afsluiters. Elke trap staat op de `<tr>` en
   stijlt zijn `td`'s. Alleen deze generieke trappen staan hier; een rijtype dat
   een domein beschrijft (een grootboekregel, een belastingregel) hoort in de app
   die dat domein kent.

   `fz-rapport-totaal` is de afsluiter van een blok bínnen de tabel;
   `fz-rapport-totaalrij` is de tfoot-regel onder de hele tabel. Twee dingen,
   twee namen — ze staan hier naast elkaar zodat het onderscheid opvalt.

   WAT JE NIET MOET HARMONISEREN: de breedte van de eerste kolom. Binnen
   `table-layout: fixed` is elke breedte een verdeling van dezelfde honderd
   procent, en de maandkolommen kappen af met `text-overflow: ellipsis`. De
   basis is 220px; een scherm dat meer of minder nodig heeft overschrijft dat
   zelf. Harmoniseren op 240px maakte de W&V eerder onleesbaar (42.008 → 42.0…).
*/
  .fz-rapport { border-collapse: collapse; font-size: 13px; width: 100%; }

  /* Bedragen rechts uitgelijnd zodat de cijferkolom onder elkaar staat. */
  .fz-rapport thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--primary-700); color: #fff;
    font-weight: 600; padding: 8px 6px; text-align: right;
    white-space: nowrap; border-bottom: 2px solid var(--primary-900);
  }

  /* ---- Maandvariant: vaste kolommen, sticky eerste kolom ---- */
  .fz-rapport-maanden { table-layout: fixed; width: 100%; }
  .fz-rapport-maanden td:first-child,
  .fz-rapport-maanden th:first-child {
    width: 220px; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .fz-rapport-maanden th:first-child { position: sticky; left: 0; z-index: 4; }
  .fz-rapport-maanden td:first-child { position: sticky; left: 0; z-index: 2; }
  .fz-rapport-maanden thead th:first-child { text-align: left; padding-left: 12px; }

  /* ---- De gewichtstrap ---- */
  .fz-rapport-sectie td {
    background: var(--surface); color: var(--ink);
    font-weight: 700; font-size: 12.5px; padding: 10px 6px;
    border-top: 2px solid var(--line); text-align: right; white-space: nowrap;
  }
  .fz-rapport-groep td {
    background: var(--surface); color: var(--primary-700);
    font-weight: 600; font-size: 12.5px; padding: 7px 6px;
    border-top: 1px solid var(--line); text-align: right; white-space: nowrap;
  }
  .fz-rapport-regel td {
    background: var(--surface); padding: 5px 6px;
    border-top: 1px solid var(--line-2); color: var(--ink-2);
    text-align: right; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .fz-rapport-totaal td {
    padding: 8px 6px; font-weight: 700; text-align: right;
    border-top: 2px solid var(--line); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .fz-rapport-netto td {
    background: var(--primary-700);
    color: #fff;
    padding: 9px 6px;
    font-weight: 700;
    text-align: right;
    border-top: 2px solid var(--primary-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Inspringing van de eerste kolom drukt het nestniveau uit. Deze waarden
     gelden voor een tabel van twee niveaus; een scherm met een andere diepte
     overschrijft ze zelf. */
  .fz-rapport-maanden .fz-rapport-sectie td:first-child {
    background: var(--surface); text-align: left; padding-left: 12px;
  }
  .fz-rapport-maanden .fz-rapport-groep td:first-child {
    background: var(--surface); text-align: left; padding-left: 12px;
  }
  .fz-rapport-maanden .fz-rapport-regel td:first-child {
    background: var(--surface); text-align: left; padding-left: 20px; color: var(--ink);
  }
  .fz-rapport-maanden .fz-rapport-totaal td:first-child { text-align: left; }
  .fz-rapport-maanden .fz-rapport-netto td:first-child { text-align: left; }

  /* ---- Totaalregel onder de tabel (tfoot) ---- */
  .fz-rapport-totaalrij {
    background: var(--primary-100);
    border-top: 2px solid var(--primary-300);
  }
  .fz-rapport-totaalrij td {
    padding: 7px 6px; text-align: right; font-weight: 600;
    white-space: nowrap; color: var(--primary-800);
  }
  .fz-rapport-totaalrij td:first-child {
    padding-left: 12px; text-align: left; font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--primary-100);
  }
  .fz-rapport-totaalrij td.fz-rapport-totaalkolom { font-weight: 700; }

  /* ---- Labelwrapper in de eerste kolom: chevron + tekst die afkapt ---- */
  .fz-rapport-label { display: flex; align-items: center; gap: 5px; overflow: hidden; }
  .fz-rapport-label-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---- De totaalkolom rechts, met een scheidingslijn ---- */
  .fz-rapport-totaalkolom {
    border-left: 1px solid var(--primary-700) !important;
    font-weight: 600;
  }

  /* ---- Negatief bedrag. Op een donkere rij een lichte rode tint, anders leest
          hij niet. ---- */
  .fz-neg { color: var(--danger-600); }
  .fz-rapport-netto .fz-neg { color: #ffb3b3; }

/* ---- Rastercel (fz-rastercel) — één bewerkbare cel in een maandraster ---- */
/*
   De cel waarin je per maand een getal zet: twaalf naast elkaar, met een label
   links en een gemiddelde of totaal rechts. Samengevoegd uit vier varianten die
   in dezelfde vorm uiteenliepen (13/12/12/11px, vier paddings, twee radii).

   Twee maten. De basis is voor een raster met ruimte; `compact` voor een raster
   dat twaalf kolommen én een breed label in beeld moet houden. Een scherm dat
   een eigen celbreedte nodig heeft zet die zelf — breedte is maatvoering, geen
   maat van de component.

   De toestanden hier zijn de generieke: focus, en niet-bewerkbaar in twee
   smaken (`readonly` als het aan rechten ligt, `disabled` als het aan de rij
   ligt). Een toestand die iets over de gegevens zegt — handmatig overschreven,
   afgeleid, buiten bereik — hoort in de app die dat weet, gescoped op deze
   klasse en met `:not(:focus)` zodat focus zichtbaar blijft.
*/
  .fz-rastercel {
    width: 100%; padding: 5px 4px;
    border: 1px solid var(--line); border-radius: 6px;
    font-size: 13px; text-align: center;
    background: var(--surface); color: var(--ink);
    box-sizing: border-box; font-family: var(--font);
    transition: background .1s, border-color .1s;
  }
  .fz-rastercel.compact { padding: 3px 2px; font-size: 12px; }
  .fz-rastercel:focus {
    outline: none; border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--focus-ring); background: #fff;
  }
  .fz-rastercel[readonly] {
    background: var(--line-2); color: var(--muted);
    border-color: transparent; cursor: default;
  }
  .fz-rastercel:disabled {
    background: var(--line-2); color: var(--ink-2); cursor: not-allowed;
  }

/* ---- Percentage-invoer (fz-pct) ---- */
/*
   Een getal met een `%` erachter, waarbij de cijfers over de rijen heen onder
   elkaar blijven staan. Dat laatste doet de spacer: een onzichtbare `%` vóór
   het veld, even breed als de zichtbare erachter, zodat het veld gecentreerd
   blijft in plaats van naar links te schuiven bij een korter getal.

   Twee maten. De basis is een vast veld van 84px in een formulier- of
   instellingenrij. `compact` is de tabelvorm: de cel vult zijn kolom, en de twee
   tekens krimpen mee zodat ze in een maandraster passen.

   De vaste breedte staat hier, niet als `!important` op een app-klasse. Twee van
   de vijf samengevoegde varianten hadden `width: 64px !important` nodig om een
   `width: 100%` van hun eigen invoerklasse te verslaan — een specificiteits-
   pleister, geen functie.

   Let op de `:not(.compact)`. De breedte hóórt bij de basisvorm; de tabelvorm
   laat het veld juist zijn kolom vullen en een scherm dat daar een eigen
   celbreedte voor zet (`.fp-s-… .fz-rastercel`, 0-2-0) moet winnen. Een kale
   `.fz-pct input` (0-1-1) zou dat doen, maar `.fz-pct.compact input` (0-2-1)
   verslaat zo'n scope — gemeten: de cellen op drie verrichtingenschermen sprongen
   van 38 en 46px naar 69–79px. Vandaar dat compact géén breedte declareert.
*/
  .fz-pct { display: flex; align-items: center; justify-content: center; gap: 3px; }
  .fz-pct-spacer { font-size: 13px; visibility: hidden; flex-shrink: 0; }
  .fz-pct-suffix { font-size: 13px; color: var(--muted); flex-shrink: 0; }
  .fz-pct input { text-align: center; }
  .fz-pct:not(.compact) input { width: 84px; }
  .fz-pct.compact { gap: 1px; }
  .fz-pct.compact .fz-pct-spacer,
  .fz-pct.compact .fz-pct-suffix { font-size: 10px; }

/* ---- Celveld (fz-celveld) — een invoerveld binnen een tabelcel ---- */
/*
   Een `fz-input` is 42px hoog; in een tabelrij van 30px past dat niet. Dit is het
   veld dat wél in een cel past, in twee vormen:

   **Kaal** — transparant en randloos, zodat de rij eruitziet als tekst tot je
   erin klikt. Voor een toevoegrij in een `<tfoot>`, waar een raster van randjes
   de tabel onrustig maakt. Krijgt bij focus een outline mét offset: het veld
   heeft geen eigen rand om te kleuren.

   **`omrand`** — met rand en achtergrond, voor een veld dat je meteen als
   invoer moet herkennen: inline hernoemen in een bestaande rij. Focus volgt daar
   de platformconventie van `fz-input`: randkleur plus focusring.

   `breed` zet een ondergrens van 180px voor een naamkolom. Bewust géén onderdeel
   van de basis — een code- of nummerkolom is 72px breed en een minimum van 180px
   herverdeelt daar de hele tabel.
*/
  .fz-celveld {
    padding: 0; border: none; background: transparent; outline: none;
    font-size: 13px; font-weight: 400; font-family: var(--font); color: var(--ink);
    /* Een cel kan uppercase of letter-spacing dragen (een sectiekop, een
       kolomtitel). Een invoerveld daarbinnen hoort dat niet te erven — je typt
       geen kapitalen omdat de kop ze heeft. */
    text-transform: none; letter-spacing: normal;
  }
  .fz-celveld::placeholder { color: var(--muted); opacity: .6; font-weight: 400; }
  .fz-celveld:focus {
    outline: 2px solid var(--primary-500); outline-offset: 3px; border-radius: 4px;
  }
  .fz-celveld.omrand {
    padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--surface);
  }
  .fz-celveld.omrand:hover { border-color: var(--primary-500); }
  .fz-celveld.omrand:focus {
    outline: none; border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--focus-ring);
  }
  .fz-celveld.breed { min-width: 180px; }
  .fz-celveld.compact { font-size: 12px; }
  /* Vult zijn cel. Niet in de basis: een veld in een flexrij naast een knop moet
     juist op zijn inhoud passen. */
  .fz-celveld.vul { width: 100%; }
  /* Nadruk op een veld dat een uitkomst draagt in plaats van een invoer — het
     bedrag waar de rij om draait. Stond als `.fz-celveld.ink` in
     financieleplanning.css: een fz-selector in de app-stylesheet, precies de
     drift waar de vier modifiers hierboven vanaf moesten. */
  .fz-celveld.ink { font-weight: 600; }

  /* Tabelmaat voor de select ernaast. `compact` is de lijstmaat (34px hoog); in
     een toevoegrij naast een `fz-celveld.omrand` van ~26px is dat te fors. Deze
     variant volgt dat celveld: zelfde radius, zelfde hoogte, zelfde randkleur. */
  .fz-select.cel {
    width: 100%; padding: 3px 24px 3px 8px; border-radius: 6px;
    font-size: 13px; font-weight: 400; color: var(--ink);
    background-color: var(--surface); background-position: right 6px center;
  }

/* ---- Afgeleide waarde (fz-afgeleid) ---- */
/*
   Een veld dat het systeem zelf invult, met een badge die zegt waar de waarde
   vandaan komt. Ziet er bewust ánders uit dan een invoerveld — dezelfde vorm zou
   beloven dat je erin kunt typen.
*/
  .fz-afgeleid {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--ink-2);
  }
  .fz-afgeleid-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    background: var(--line-2);
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
  }

/* ---- Rij-status (fz-rijstatus-*) ---- */
/*
   Een rij die aandacht vraagt: een accentbalk links plus een inline melding
   eronder. Drie zwaartes — fout blokkeert, waarschuwing niet, melding is
   neutraal.

   De achtergrond draagt `!important`, en dat is hier geen luiheid. De rijen waar
   dit op landt zetten hun witte achtergrond in een `style=`-attribuut, en een
   author-declaratie zonder `!important` verliest daar altijd van. Zonder het
   sleutelwoord blijft de accentbalk staan en verdwijnt alleen de tint — een rij
   die half gemarkeerd is en er nog geloofwaardig uitziet. Verdwijnt de inline
   achtergrond ooit uit de markup, dan mag dit weg.
*/
  .fz-rijstatus-fout { background: #fef2f2 !important; box-shadow: inset 3px 0 0 var(--danger-600); }
  .fz-rijstatus-melding { font-size: 11px; color: var(--danger-600); padding: 0 0 4px 4px; }
  .fz-rijstatus-waarschuwing { font-size: 11px; color: #92400e; padding: 0 0 4px 4px; }

/* ---- Invoegblok (fz-invoegblok) ---- */
/*
   Het blok bovenaan een scherm waarmee je een rij toevoegt die pas kán ontstaan
   als er meerdere waardes staan — een rechtspersoon én een naam én een looptijd.
   Dat is precies waar het zich onderscheidt van de toevoegrij in een `<tfoot>`
   (zie *Celveld*): die is voor één veld — typen, Enter, klaar. Zodra een rij twee
   of meer verplichte waardes nodig heeft past hij niet meer in een tabelrij en
   hoort hij als blok bovenaan het scherm. Kies op dat criterium, niet op gevoel;
   anders groeit er een derde patroon tussen deze twee in.

   De kolomindeling hoort NIET bij de component. Die volgt het aantal velden en
   verschilt dus per scherm — dat is maatvoering, en die zet het scherm zelf.
*/
  .fz-invoegblok { padding: 16px 20px; }
  .fz-invoegblok-label {
    font-size: 11px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
  }
  .fz-invoegveld {
    width: 100%; box-sizing: border-box;
    padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: 13px; font-family: var(--font);
    background: var(--surface); color: var(--ink);
    transition: border-color .12s;
  }
  select.fz-invoegveld { padding-right: 28px; cursor: pointer; }
  .fz-invoegveld:hover { border-color: var(--primary-500); }
  /* De focusgloed hoort erbij — op het veld én op de dropdown. Zonder deze regel
     valt de browser terug op zijn eigen outline, en dan wijkt dit blok af van
     elk ander invoerveld in het platform. */
  .fz-invoegveld:focus {
    outline: none; border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--focus-ring);
  }