/* Stijlen van de TAI-frontend.
 *
 * Stond tot v0.3.51 als <style>-blok in index.html. Eruit gehaald voor ZD-131:
 * met een inline blok is style-src 'unsafe-inline' in de CSP onvermijdelijk, en
 * daarmee ook de bescherming tegen geinjecteerde stijlen. Extern is het gewoon
 * style-src 'self'.
 *
 * Sinds v0.3.62 staat er geen kleurwaarde meer in dit bestand: kleuren, radius,
 * schaduwen, font en lagen komen uit zozijn-tokens.css (de gedeelde tokenset van
 * alle Zozijn-apps, ongewijzigd overgenomen en vóór dit bestand geladen). Een nieuwe
 * kleur nodig? Kies een bestaand token; past er geen, stel dan een token voor in het
 * stijlboek in plaats van hier een hexwaarde te zetten. huisstijl.test.js bewaakt dat.
 *
 * Wit (tekst op een gekleurde knop of balk) is var(--zz-surface): de tokenset heeft
 * daar geen eigen naam voor. Doorschijnend wit op de magenta header loopt via
 * color-mix() op hetzelfde token.
 */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--zz-font); background: var(--zz-bg); color: var(--zz-text); min-height: 100vh; }

    /* ── Focus ──────────────────────────────────────────────── */
    /* Toetsenbordfocus is altijd zichtbaar en in merkkleur. :focus-visible en niet
       :focus, zodat een muisklik geen ring achterlaat. Invoervelden krijgen in plaats
       van een outline een magenta rand plus --zz-focus-ring (zie Formulier/Tabel). */
    button:focus-visible, a:focus-visible, [role="tab"]:focus-visible,
    [role="button"]:focus-visible, .stat-card:focus-visible {
      outline:2px solid var(--zz-magenta); outline-offset:2px; }
    /* Op de magenta header is een magenta ring onzichtbaar. */
    header button:focus-visible { outline-color:var(--zz-surface); }

    /* ── Env banner ─────────────────────────────────────────── */
    .env-banner { text-align:center; font-size:.75rem; font-weight:700; letter-spacing:.06em;
                  text-transform:uppercase; padding:.3rem 1rem; color:var(--zz-surface); }
    /* De omgevingsbanners staan bewust BUITEN de huisstijl: ze moeten juist
       schreeuwen dat je niet op productie zit. Op productie is de banner onzichtbaar.
       De tokens zijn zo donker gekozen dat de witte tekst AA haalt. */
    .env-banner.env-dev  { background:var(--zz-env-dev); }
    .env-banner.env-test { background:var(--zz-env-test); }
    .env-banner.env-acc  { background:var(--zz-env-acc); }
    .env-banner.env-prod { display:none; }

    /* ── Login screen ───────────────────────────────────────── */
    #login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; }
    .login-card { background:var(--zz-surface); border-radius:var(--zz-radius-xl); padding:2.5rem; text-align:center;
                  box-shadow:var(--zz-shadow-toast); max-width:400px; width:90%; }
    .login-card .logo img { height:64px; width:auto; margin-bottom:.75rem; }
    .login-card h1 { font-size:var(--zz-fs-xl); color:var(--zz-heading); margin-bottom:.5rem; }
    .login-card p  { font-size:var(--zz-fs-base); color:var(--zz-muted); margin-bottom:1.5rem; }
    .btn-primary { background:var(--zz-magenta); color:var(--zz-surface); border:none; border-radius:var(--zz-radius);
                   padding:.75rem 1.5rem; font-size:.9rem; font-weight:600; cursor:pointer;
                   transition:background .15s; }
    .btn-primary:hover { background:var(--zz-magenta-hover); }
    /* Een uitgeschakelde knop moet er uitgeschakeld uitzien. Zonder deze regel bleef
       hij magenta en klikbaar lijken terwijl hij niets deed, en dat leest als een
       kapotte app in plaats van als een geblokkeerde invoer. */
    .btn-primary:disabled, .btn:disabled, button:disabled {
      background:var(--zz-disabled-bg); color:var(--zz-disabled-text); cursor:not-allowed; opacity:1; }
    .btn-primary:disabled:hover, .btn:disabled:hover, button:disabled:hover {
      background:var(--zz-disabled-bg); }

    /* ── Header ─────────────────────────────────────────────── */
    header { background:var(--zz-magenta); color:var(--zz-surface); padding:.875rem 1.5rem; display:flex;
             align-items:center; justify-content:space-between; box-shadow:var(--zz-shadow-header); }
    header h1 { font-size:var(--zz-fs-lg); font-weight:700; }
    .merk { display:flex; align-items:center; gap:.85rem; }
    .merk img { height:34px; width:auto; flex:none; }
    /* Limegroen accent uit de huisstijl: een dun streepje onder de balk, zodat er
       een tweede huisstijlkleur in zit zonder met de statuskleuren te concurreren. */
    header { border-bottom:3px solid var(--zz-lime); }
    header small { font-size:.75rem; opacity:.8; }
    .user-info { display:flex; align-items:center; gap:.75rem; font-size:.85rem; }
    .role-badge { background:color-mix(in srgb, var(--zz-surface) 20%, transparent); border-radius:var(--zz-radius-pill); padding:.2rem .65rem;
                  font-size:var(--zz-fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
    .btn-ghost { background:transparent; color:var(--zz-surface); border:1px solid color-mix(in srgb, var(--zz-surface) 40%, transparent);
                 border-radius:var(--zz-radius); padding:.35rem .75rem; font-size:var(--zz-fs-sm); cursor:pointer; }
    .btn-ghost:hover { background:color-mix(in srgb, var(--zz-surface) 15%, transparent); }

    /* ── Nav ────────────────────────────────────────────────── */
    nav { background:var(--zz-surface); border-bottom:1px solid var(--zz-border); padding:0 1.5rem; display:flex; gap:0; }
    /* Tabs zijn sinds v0.3.62 <button role="tab">: de knopstandaard (grijze achtergrond,
       rand, systeemfont) gaat eraf, zodat ze er hetzelfde uitzien als de oude divs. */
    .nav-tab { padding:.85rem 1.1rem; font-family:inherit; font-size:var(--zz-fs-base); font-weight:500; color:var(--zz-muted);
               background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:all .15s;
               white-space:nowrap; }
    .nav-tab:hover { color:var(--zz-text); }
    .nav-tab.active { color:var(--zz-magenta); border-bottom-color:var(--zz-magenta); }
    .nav-tab .badge { background:var(--zz-danger); color:var(--zz-surface); border-radius:var(--zz-radius-pill); font-size:.65rem;
                      font-weight:700; padding:.1rem .4rem; margin-left:.4rem; }

    /* ── Main container ─────────────────────────────────────── */
    main { max-width:var(--zz-content-max); margin:1.5rem auto; padding:0 1.5rem; }

    /* ── Cards ──────────────────────────────────────────────── */
    .card { background:var(--zz-surface); border-radius:var(--zz-radius-lg); padding:1.25rem; margin-bottom:1.25rem;
            box-shadow:var(--zz-shadow-card); }
    .card-header { display:flex; align-items:center; justify-content:space-between;
                   margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--zz-border-subtle); }
    .card-header h2 { font-size:var(--zz-fs-md); font-weight:600; color:var(--zz-heading); }

    /* ── Stats ──────────────────────────────────────────────── */
    .stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.25rem; }
    /* Tegels zijn sinds v0.3.62 <button aria-pressed>: font en breedte expliciet, want
       een knop erft die niet vanzelf. */
    .stat-card { background:var(--zz-surface); border-radius:var(--zz-radius-lg); padding:1.25rem; text-align:center;
                 box-shadow:var(--zz-shadow-card); cursor:pointer; font-family:inherit; color:inherit; width:100%;
                 border:2px solid transparent; transition:border .15s, box-shadow .15s; }
    .stat-card .num, .stat-card .lbl { display:block; }
    .stat-card:hover { box-shadow:var(--zz-shadow-card-hover); }
    .stat-card.active { border-color:var(--zz-magenta); }
    .stat-card .num { font-size:var(--zz-fs-stat); font-weight:800; color:var(--zz-magenta); }
    .stat-card .lbl { font-size:.75rem; color:var(--zz-muted); margin-top:.25rem; }

    /* ── Klikbare tabelrij ──────────────────────────────────── */
    tr.clickable-row { cursor:pointer; }
    tr.clickable-row:hover td { background:var(--zz-neutral-soft); }

    /* ── Login loader ───────────────────────────────────────── */
    #app-loader { position:fixed; inset:0; z-index:var(--zz-z-loader); background:color-mix(in srgb, var(--zz-surface) 92%, transparent);
                  display:none; flex-direction:column; align-items:center; justify-content:center; gap:1rem; }
    #app-loader.show { display:flex; }
    .spinner { width:42px; height:42px; border:4px solid var(--zz-border); border-top-color:var(--zz-magenta);
               border-radius:50%; animation:spin .8s linear infinite; }
    #app-loader .loader-text { font-size:.9rem; color:var(--zz-heading); }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* ── Alerts ─────────────────────────────────────────────── */
    .alert-item { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
                  border-radius:var(--zz-radius); margin-bottom:.5rem; }
    .alert-item.urgent  { background:var(--zz-danger-soft); border-left:4px solid var(--zz-danger); }
    .alert-item.warning { background:var(--zz-warning-soft); border-left:4px solid var(--zz-warning); }
    .alert-item .alert-text { flex:1; font-size:.85rem; }
    .alert-item .alert-text strong { display:block; color:var(--zz-text); }
    .alert-item .alert-text span   { color:var(--zz-muted); font-size:var(--zz-fs-sm); }

    /* ── Tabel ──────────────────────────────────────────────── */
    .table-wrap { overflow-x:auto; }
    table { width:100%; border-collapse:collapse; font-size:var(--zz-fs-base); }
    thead th { text-align:left; padding:.6rem .75rem; background:var(--zz-table-head);
               border-bottom:2px solid var(--zz-border); color:var(--zz-heading); font-weight:600;
               white-space:nowrap; }
    thead th.sortable { cursor:pointer; user-select:none; }
    thead th.sortable:hover { background:var(--zz-neutral-soft); color:var(--zz-magenta); }
    .table-search { border:1px solid var(--zz-border-input); border-radius:var(--zz-radius); padding:.4rem .7rem;
                    font-size:var(--zz-fs-sm); font-family:inherit; min-width:240px; }
    .table-search:focus { outline:none; border-color:var(--zz-magenta); box-shadow:var(--zz-focus-ring); }
    tbody td { padding:.6rem .75rem; border-bottom:1px solid var(--zz-border-subtle); }
    tbody tr:hover { background:var(--zz-table-head); }

    /* ── Badges ─────────────────────────────────────────────── */
    .badge { display:inline-block; padding:.2rem .55rem; border-radius:var(--zz-radius-pill);
             font-size:var(--zz-fs-xs); font-weight:700; }
    .badge.approved { background:var(--zz-success-soft); color:var(--zz-success-text); }
    .badge.pending  { background:var(--zz-warning-soft); color:var(--zz-warning-text); }
    .badge.rejected { background:var(--zz-danger-soft); color:var(--zz-danger-text); }
    .badge.expired  { background:var(--zz-neutral-soft); color:var(--zz-neutral-text); }
    .badge.revoked  { background:var(--zz-neutral-soft); color:var(--zz-neutral-text); }

    /* ── Buttons ─────────────────────────────────────────────── */
    .btn { border:none; border-radius:var(--zz-radius); padding:.45rem .9rem; font-size:var(--zz-fs-sm);
           font-weight:600; cursor:pointer; transition:background .15s; }
    .btn-sm { padding:.3rem .65rem; font-size:.75rem; }
    .btn-success { background:var(--zz-success); color:var(--zz-surface); }
    .btn-success:hover { background:var(--zz-success-hover); }
    .btn-danger  { background:var(--zz-danger); color:var(--zz-surface); }
    .btn-danger:hover  { background:var(--zz-danger-hover); }
    .btn-secondary { background:var(--zz-border); color:var(--zz-heading); }
    .btn-secondary:hover { background:var(--zz-border-input); }
    .btn-outline { background:var(--zz-surface); color:var(--zz-magenta); border:1px solid var(--zz-magenta); }
    .btn-outline:hover { background:var(--zz-magenta-soft); }

    /* ── Formulier ──────────────────────────────────────────── */
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
    .form-group { display:flex; flex-direction:column; gap:.35rem; }
    .form-group label { font-size:var(--zz-fs-sm); font-weight:600; color:var(--zz-heading); }
    .form-group input, .form-group select, .form-group textarea {
      border:1px solid var(--zz-border-input); border-radius:var(--zz-radius); padding:.55rem .75rem;
      font-size:var(--zz-fs-base); font-family:inherit; transition:border .15s; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus,
    .filter-zoekrij input:focus {
      outline:none; border-color:var(--zz-magenta); box-shadow:var(--zz-focus-ring); }
    .form-group textarea { resize:vertical; min-height:80px; }

    /* ── Snelkeuze datums ───────────────────────────────────── */
    .quick-dates { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.3rem; }
    .quick-dates button { background:var(--zz-neutral-soft); border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm);
                          padding:.25rem .6rem; font-size:.75rem; cursor:pointer; }
    .quick-dates button:hover { background:var(--zz-border); }

    /* ── Zoekresultaten ─────────────────────────────────────── */
    .search-results { border:1px solid var(--zz-border); border-radius:var(--zz-radius); max-height:180px;
                      overflow-y:auto; margin-top:.25rem; }
    .search-result-item { padding:.6rem .75rem; cursor:pointer; font-size:var(--zz-fs-base); transition:background .12s; }
    .search-result-item + .search-result-item { border-top:1px solid var(--zz-border-subtle); }
    .search-result-item:hover { background:var(--zz-neutral-soft); }
    .search-result-item .sr-main { font-weight:500; color:var(--zz-text-strong); }
    .search-result-item .sr-sub  { font-size:.75rem; color:var(--zz-muted); margin-top:.1rem; }
    .search-result-item.is-selected { background:var(--zz-magenta-soft); }

    /* ── Geselecteerd (chip) ────────────────────────────────── */
    .selected-chip { display:flex; align-items:center; gap:.45rem; margin-top:.5rem;
                     padding:.5rem .7rem; background:var(--zz-success-soft); border:1px solid var(--zz-success-border);
                     border-radius:var(--zz-radius); font-size:var(--zz-fs-sm); color:var(--zz-success-text); line-height:1.35; }
    .selected-chip:empty { display:none; }

    /* ── Modal ──────────────────────────────────────────────── */
    .modal-overlay { position:fixed; inset:0; background:var(--zz-overlay); z-index:var(--zz-z-modal);
                     display:none; align-items:center; justify-content:center; padding:1rem; }
    .modal-overlay.open { display:flex; }
    .modal { background:var(--zz-surface); border-radius:var(--zz-radius-xl); width:100%; max-width:600px; max-height:90vh;
             overflow-y:auto; box-shadow:var(--zz-shadow-modal); }
    .modal-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--zz-border-subtle);
                    display:flex; align-items:center; justify-content:space-between; }
    .modal-header h2 { font-size:var(--zz-fs-lg); font-weight:700; }
    .modal-close { background:none; border:none; font-size:1.4rem; cursor:pointer;
                   color:var(--zz-muted); line-height:1; }
    .modal-close:hover { color:var(--zz-heading); }
    .modal-body   { padding:1.25rem 1.5rem; }
    .modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--zz-border-subtle);
                    display:flex; gap:.75rem; justify-content:flex-end; }

    /* ── Filterbalk (managerfilter, ZD-129) ─────────────────── */
    .filter-balk { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:0 0 1rem;
      padding:.6rem .9rem; border:1px solid var(--zz-border); background:var(--zz-table-head); color:var(--zz-heading);
      border-radius:var(--zz-radius-lg); font-size:.85rem; position:relative; }
    .filter-balk.actief { border-color:var(--zz-magenta); background:var(--zz-magenta-soft); color:var(--zz-grey-dark); }
    .filter-zoekrij { position:relative; flex:1; min-width:240px; max-width:420px; }
    .filter-zoekrij input { width:100%; padding:.4rem .6rem; border:1px solid var(--zz-border-input);
      border-radius:var(--zz-radius); font-size:.85rem; }
    .filter-results { position:absolute; top:100%; left:0; right:0; z-index:var(--zz-z-dropdown); background:var(--zz-surface);
      border:1px solid var(--zz-border-input); border-radius:var(--zz-radius); max-height:240px; overflow-y:auto;
      box-shadow:var(--zz-shadow-card-hover); }
    .filter-results div { padding:.45rem .6rem; cursor:pointer; font-size:.85rem; }
    .filter-results div:hover { background:var(--zz-magenta-soft); }
    /* De "Alles tonen"-knop is sinds v0.3.62 een gewone .btn .btn-sm .btn-primary;
       de eigen klasse .filter-wis had geen hover en week daardoor af van elke andere knop. */

    /* ── Sessiemelding ──────────────────────────────────────── */
    .sessie-melding { display:flex; align-items:flex-start; gap:.75rem; margin:0 0 1rem;
      padding:.8rem 1rem; border:1px solid var(--zz-warning-border); background:var(--zz-warning-soft); color:var(--zz-warning-text);
      border-radius:var(--zz-radius-lg); font-size:var(--zz-fs-base); line-height:1.45; }
    .sessie-melding-sluit { margin-left:auto; background:none; border:none; cursor:pointer;
      font-size:1.15rem; line-height:1; color:var(--zz-warning-text); padding:0 .15rem; }

    /* ── Toast ──────────────────────────────────────────────── */
    #toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:var(--zz-z-toast);
                        display:flex; flex-direction:column; gap:.5rem; }
    .toast { background:var(--zz-text); color:var(--zz-surface); padding:.75rem 1.1rem; border-radius:var(--zz-radius-lg);
              font-size:.85rem; box-shadow:var(--zz-shadow-toast);
              animation:slideIn .25s ease; max-width:320px; }
    .toast.success { background:var(--zz-success); }
    .toast.error   { background:var(--zz-danger); }
    .toast.info    { background:var(--zz-info); }
    @keyframes slideIn { from { transform:translateX(100%); opacity:0; }
                         to   { transform:translateX(0);    opacity:1; } }

    /* ── Notice ─────────────────────────────────────────────── */
    .notice { background:var(--zz-magenta-soft); border-left:4px solid var(--zz-magenta); padding:.75rem 1rem;
              border-radius:0 var(--zz-radius) var(--zz-radius) 0; font-size:.85rem; color:var(--zz-grey-dark); margin-bottom:1rem; }

    /* ── Tijdlijn (Gantt) ────────────────────────────────────── */
    .gantt-legend { display:flex; gap:1rem; font-size:.72rem; color:var(--zz-muted); }
    .gantt-legend span { display:flex; align-items:center; gap:.3rem; }
    .gantt-legend i { width:12px; height:12px; border-radius:var(--zz-radius-sm); display:inline-block; }
    .gantt-legend i.active  { background:var(--zz-success); }
    .gantt-legend i.warning { background:var(--zz-warning); }
    .gantt-legend i.urgent  { background:var(--zz-danger); }

    .gantt-scroll { overflow-x:auto; padding-bottom:.5rem; }
    /* Binnenste coördinatenstelsel; min-width groeit met het aantal maanden */
    .gantt-inner  { position:relative; }

    /* Maand-as bovenin */
    .gantt-months { position:relative; height:26px; border-bottom:1px solid var(--zz-border); margin-bottom:.5rem; }
    .gantt-month  { position:absolute; top:0; bottom:0; border-left:1px solid var(--zz-border-subtle);
                    font-size:.72rem; color:var(--zz-muted); padding:.35rem 0 0 .4rem; white-space:nowrap;
                    text-transform:capitalize; }

    /* Rijen met balken, gestapeld onder elkaar */
    .gantt-rows { position:relative; display:flex; flex-direction:column; gap:.4rem; }
    .gantt-row  { position:relative; height:30px; }
    .gantt-track { position:absolute; inset:0; background:var(--zz-neutral-soft); border-radius:var(--zz-radius); }
    .gantt-bar  { position:absolute; top:0; bottom:0; min-width:6px; border-radius:var(--zz-radius);
                  display:flex; align-items:center; padding:0 .55rem; cursor:pointer;
                  box-shadow:var(--zz-shadow-card); transition:filter .12s; overflow:hidden; }
    .gantt-bar:hover { filter:brightness(.93); }
    .gantt-bar.active  { background:var(--zz-success); }
    .gantt-bar.warning { background:var(--zz-warning); }
    .gantt-bar.urgent  { background:var(--zz-danger); }
    /* Wit op groen en rood haalt AA zonder hulp; de tekstschaduw is daarom weg. Amber
       is te licht voor wit (tokenregel: --zz-warning nooit met witte tekst), dus daar
       staat het label in de donkerste teksttint. */
    .gantt-bar .gantt-label { color:var(--zz-surface); font-size:.74rem; font-weight:600; white-space:nowrap;
                    overflow:hidden; text-overflow:ellipsis; }
    .gantt-bar.warning .gantt-label { color:var(--zz-text-strong); }

    /* Verticale "vandaag"-markering over de hele hoogte. z-index 3 is lokaal binnen de
       tijdlijn (boven de balken), geen applicatielaag; daarom geen --zz-z-token. */
    .gantt-today { position:absolute; top:0; bottom:0; width:2px; background:var(--zz-magenta); z-index:3; }
    .gantt-today::after { content:'vandaag'; position:absolute; top:-1px; left:3px; font-size:.62rem;
                    color:var(--zz-magenta); font-weight:700; background:var(--zz-surface); padding:0 .15rem; }

    /* ── Lege state ─────────────────────────────────────────── */
    .empty-state { text-align:center; padding:2.5rem; color:var(--zz-faint); font-size:var(--zz-fs-base); }

    /* ── Responsief ─────────────────────────────────────────── */
    @media (max-width: 640px) {
      .stats-row { grid-template-columns:1fr 1fr; }
      .form-row  { grid-template-columns:1fr; }
      nav { overflow-x:auto; }
    }

/* ── Utility-klassen (ZD-131) ────────────────────────────────────────────────
 * Elk van deze klassen komt uit precies een style-attribuut dat hier stond. De
 * naam is mechanisch afgeleid van de declaratie (u-<property>-<waarde>), zodat
 * de weergave exact hetzelfde blijft en je kunt teruglezen waar iets vandaan
 * komt. Bewust utilities en geen bedachte semantische namen: die zouden bij 50
 * losse combinaties een vertaalslag met kans op fouten opleveren.
 *
 * Sinds v0.3.62 verwijzen de kleurutilities naar een token. De namen met een
 * hexwaarde (u-color-6b7280) zijn gebleven omdat ze in de HTML en in app.js staan;
 * hernoemen levert alleen risico op. Het token ernaast is de waarheid.
 */
.u-align-items-center { align-items:center; }
.u-background-f9fafb { background:var(--zz-table-head); }
.u-background-fffbeb { background:var(--zz-warning-soft); }
.u-border-radius-6px { border-radius:var(--zz-radius); }
.u-border-top-1px-solid-fcd34d { border-top:1px solid var(--zz-warning-border); }
.u-color-d60077 { color:var(--zz-magenta); }
.u-color-374151 { color:var(--zz-heading); }
.u-color-6b7280 { color:var(--zz-muted); }
.u-color-92400e { color:var(--zz-warning-text); }
.u-color-9ca3af { color:var(--zz-faint); }
.u-display-flex { display:flex; }
.u-display-grid { display:grid; }
.u-display-none { display:none; }
.u-flex-1 { flex:1; }
.u-flex-wrap-wrap { flex-wrap:wrap; }
.u-font-size-75rem { font-size:.75rem; }
.u-font-size-85rem { font-size:.85rem; }
.u-font-size-875rem { font-size:var(--zz-fs-base); }
.u-font-size-8rem { font-size:var(--zz-fs-sm); }
.u-font-size-9rem { font-size:.9rem; }
.u-gap-1rem { gap:1rem; }
.u-gap-75rem { gap:.75rem; }
.u-grid-column-1-1 { grid-column:1/-1; }
.u-grid-template-columns-1fr-1fr { grid-template-columns:1fr 1fr; }
.u-justify-content-flex-end { justify-content:flex-end; }
.u-line-height-1-6 { line-height:1.6; }
.u-line-height-1-7 { line-height:1.7; }
.u-margin-bottom-1-25rem { margin-bottom:1.25rem; }
.u-margin-bottom-1rem { margin-bottom:1rem; }
.u-margin-bottom-75rem { margin-bottom:.75rem; }
.u-margin-top-1rem { margin-top:1rem; }
.u-margin-top-25rem { margin-top:.25rem; }
.u-margin-top-75rem { margin-top:.75rem; }
.u-max-height-220px { max-height:220px; }
.u-max-width-460px { max-width:460px; }
.u-max-width-520px { max-width:520px; }
.u-min-width-240px { min-width:240px; }
.u-padding-5rem-9rem { padding:.5rem .9rem; }
.u-padding-75rem { padding:.75rem; }
.u-text-align-right { text-align:right; }

/* Uit de gegenereerde HTML in app.js (zelfde naamgeving). Foutmeldingen in rood:
   --zz-danger haalt 4.8:1 op wit, dus ook als tekstkleur leesbaar. */
.u-color-dc2626 { color:var(--zz-danger); }
.u-cursor-default { cursor:default; }
.u-gap-5rem { gap:.5rem; }

/* Blokkerende melding in het aanvraagformulier (v0.3.55): deze medewerker zit al in de
   gekozen kostenplaats. Amber en niet rood: er is niets stuk, de invoer kan gewoon niet. */
.melding-blokkerend { background:var(--zz-warning-soft); border-left:4px solid var(--zz-warning); color:var(--zz-warning-text);
                      padding:.7rem .9rem; border-radius:var(--zz-radius-sm); font-size:.85rem; line-height:1.5; }

/* Hint onder een zoekveld (v0.3.55): de lijst is een keuze en geen suggestie. */
.zoek-hint { font-size:.75rem; color:var(--zz-grey); margin:.3rem 0 .1rem; line-height:1.4; }