/* Rela 7 — huisstijl
   Eén bestand, gegroepeerd per onderdeel. */

:root {
    --merk:        #1f5f8b;
    --merk-licht:  #2e86c1;
    --merk-accent: #58b4e8;
    --tekst:       #16202b;
    --zacht:       #64748b;
    --rand:        #e3e8ef;
    --rand-sterk:  #cbd5e1;
    --vlak:        #f4f7fa;
    --wit:         #ffffff;
    --fout:        #b3261e;
    --fout-vlak:   #fdeceb;
    --goed:        #1b5e20;
    --goed-vlak:   #e8f5e9;
    --let-op:      #fff8e1;
    --let-op-rand: #f0d67a;
    --straal:      8px;
    --straal-ruim: 14px;
    --schaduw:     0 1px 2px rgba(16, 32, 48, .04), 0 8px 28px rgba(16, 32, 48, .06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tekst);
    background: var(--vlak);
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 23px; margin: 0 0 18px; font-weight: 600; letter-spacing: -.01em; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }
.rustig { color: var(--zacht); font-size: 13px; }

/* ---------- raamwerk ---------- */

/* Het raamwerk vult het scherm en scrolt zelf niet; alleen de panelen erin
   schuiven. Zo blijven de kopbalk en het menu staan. */
.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px; height: 54px;
    background: var(--merk); color: var(--wit);
}
.merk { font-size: 21px; font-weight: 600; color: var(--wit); text-decoration: none; letter-spacing: -.02em; }
.merk span { color: var(--merk-accent); }

.gebruiker { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.knop-plat {
    background: none; border: 1px solid rgba(255,255,255,.45); color: var(--wit);
    padding: 5px 13px; border-radius: var(--straal); cursor: pointer; font-size: 13px;
}
.knop-plat:hover { background: rgba(255,255,255,.14); }

.romp { flex: 1; display: flex; min-height: 0; }

.zijbalk { width: 218px; flex: 0 0 218px; background: var(--wit);
           border-right: 1px solid var(--rand); padding: 14px 0; overflow-y: auto; }
.zijbalk a { display: block; padding: 9px 22px; color: var(--zacht); text-decoration: none; font-size: 14px; }
.zijbalk a:hover { background: var(--vlak); color: var(--tekst); }
.zijbalk a.active {
    background: #eaf3fa; color: var(--merk); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--merk);
}

/* Zelf ook een flexkolom, zodat een werkblad de volle hoogte krijgt zonder van een
   procenthoogte af te hangen. Een pagina zonder werkblad merkt hier niets van. */
main { flex: 1; padding: 26px 30px; min-width: 0; overflow-y: auto;
       display: flex; flex-direction: column; }

.kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.kop h1 { margin: 0; }
.telling { color: var(--zacht); font-size: 13px; }
.terug { color: var(--merk); text-decoration: none; font-size: 14px; }
.terug:hover { text-decoration: underline; }

/* ---------- meldingen ---------- */

.foutmelding { background: var(--fout-vlak); color: var(--fout); border: 1px solid #f3c2bf;
               padding: 11px 14px; border-radius: var(--straal); margin-bottom: 16px; font-size: 14px; }
.gelukt { background: var(--goed-vlak); color: var(--goed); border: 1px solid #a5d6a7;
          padding: 11px 14px; border-radius: var(--straal); margin-bottom: 14px; font-size: 14px; }
.waarschuwing { background: var(--let-op); border: 1px solid var(--let-op-rand);
                padding: 12px 14px; border-radius: var(--straal); }
.validation-message { color: var(--fout); font-size: 12px; display: block; margin-top: 4px; }

/* ---------- inloggen ---------- */

.inlogscherm {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1100px 520px at 50% -240px, #e8f2fa 0%, rgba(232,242,250,0) 70%),
        var(--vlak);
}

.inlogkaart {
    width: 100%; max-width: 420px;
    background: var(--wit);
    padding: 40px 38px 30px;
    border-radius: 18px;
    border: 1px solid var(--rand);
    box-shadow: var(--schaduw);
}

.inlogmerk { font-size: 34px; font-weight: 700; color: var(--merk);
             letter-spacing: -.03em; margin: 0; line-height: 1.1; }
.inlogmerk span { color: var(--merk-accent); }
.inlogonder { color: var(--zacht); font-size: 14px; margin: 4px 0 26px; }

.inlogkaart label { display: block; margin-bottom: 18px; }
.veldnaam { display: block; font-size: 13px; font-weight: 500; color: var(--zacht); margin-bottom: 7px; }

/* Niet op type selecteren. InputText van Blazor zet zelf GEEN type-attribuut op het
   veld; alleen waar we het in de opmaak met de hand meegeven (type="email") staat het
   er. Een regel met input[type=text] slaat zo'n veld dus over, en dan staat er één
   hoekig vakje tussen de ronde. Vandaar: alles wat een invoervak is, behalve de
   vinkjes en keuzerondjes, die hun eigen vorm houden. */
.inlogkaart input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.inlogkaart select {
    width: 100%; padding: 13px 15px;
    border: 1.5px solid var(--rand); border-radius: 12px;
    font-size: 15px; font-family: inherit; color: var(--tekst);
    background: var(--wit); transition: border-color .12s, box-shadow .12s;
}
.inlogkaart input::placeholder { color: #9aa7b6; }
.inlogkaart input:hover, .inlogkaart select:hover { border-color: var(--rand-sterk); }
.inlogkaart input:focus, .inlogkaart select:focus {
    outline: none; border-color: var(--merk-licht);
    box-shadow: 0 0 0 4px rgba(46, 134, 193, .14);
}

.inlogkaart button[type=submit] {
    width: 100%; padding: 14px; margin-top: 4px;
    border: 0; border-radius: 12px;
    background: var(--merk); color: var(--wit);
    font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: background .12s;
}
.inlogkaart button[type=submit]:hover { background: var(--merk-licht); }

.inlogkaart .regel { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--zacht); }
.inlogkaart .regel input[type=checkbox] { width: auto; }
.uitleg { margin: 0 0 20px; }

.talen { display: flex; justify-content: center; gap: 4px;
         margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rand); }
.taal {
    min-width: 42px; padding: 6px 10px; border: 0; border-radius: var(--straal);
    background: none; color: var(--zacht); font-size: 13px; font-weight: 600;
    font-family: inherit; text-decoration: none; text-align: center; cursor: pointer;
}
.taal:hover { background: var(--vlak); color: var(--tekst); }
.taal.actief { background: var(--merk); color: var(--wit); }

.tekstlink { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--zacht); }

.totp { background: var(--vlak); border: 1px solid var(--rand); border-radius: 12px;
        padding: 15px; margin-bottom: 18px; font-size: 13px; }
.totp p { margin: 0 0 8px; color: var(--zacht); }
.sleutel { display: block; font-size: 15px; letter-spacing: .08em;
           word-break: break-all; color: var(--merk); }

/* ---------- zoeken en lijsten ---------- */

.zoekblok { display: flex; gap: 10px; margin-bottom: 14px; }
.zoekbalk { flex: 1; padding: 12px 15px; font-size: 15px; font-family: inherit;
            border: 1.5px solid var(--rand); border-radius: 11px; background: var(--wit);
            transition: border-color .12s, box-shadow .12s; }
.zoekbalk:hover { border-color: var(--rand-sterk); }
.zoekbalk:focus { outline: none; border-color: var(--merk-licht);
                  box-shadow: 0 0 0 4px rgba(46,134,193,.14); }

.knop-rand { padding: 0 18px; white-space: nowrap; border: 1px solid var(--rand);
             background: var(--wit); border-radius: var(--straal); cursor: pointer;
             font-size: 14px; font-family: inherit; color: var(--zacht); }
.knop-rand:hover { background: var(--vlak); color: var(--tekst); }

.filterbalk { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
              background: var(--wit); border: 1px solid var(--rand);
              border-radius: var(--straal); padding: 14px 16px; margin-bottom: 16px; }
.filterbalk label { display: block; font-size: 12px; color: var(--zacht); }
.filterbalk input, .filterbalk select { display: block; margin-top: 4px; padding: 8px 12px;
        border: 1.5px solid var(--rand); border-radius: 10px;
        font-size: 14px; width: 150px; font-family: inherit; background: var(--wit); }
.filterbalk input:focus, .filterbalk select:focus { outline: none;
        border-color: var(--merk-licht); box-shadow: 0 0 0 3px rgba(46,134,193,.12); }
.filterbalk input.smal { width: 70px; }

.raster { width: 100%; border-collapse: collapse; background: var(--wit);
          border: 1px solid var(--rand); border-radius: var(--straal); overflow: hidden; }
.raster th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
             color: var(--zacht); background: var(--vlak); padding: 9px 14px;
             border-bottom: 1px solid var(--rand); font-weight: 600; }
.raster td { padding: 9px 14px; border-bottom: 1px solid var(--rand); font-size: 14px; }
.raster tbody tr { cursor: pointer; }
.raster tbody tr:hover { background: #f0f6fb; }
.raster tbody tr.gemarkeerd { background: #e3f0fa; box-shadow: inset 3px 0 0 var(--merk); }
.raster tbody tr.uitdienst td { color: var(--fout); }
.raster tbody tr.afgewerkt td { color: var(--zacht); }
.raster tbody tr.vervallen td { color: var(--fout); text-decoration: line-through; }
.raster code { color: var(--merk); }

.pagineren { display: flex; align-items: center; gap: 14px; margin-top: 14px;
             font-size: 13px; color: var(--zacht); }
.pagineren button { padding: 6px 14px; border: 1px solid var(--rand); background: var(--wit);
                    border-radius: var(--straal); cursor: pointer; font-family: inherit; }
.pagineren button:disabled { opacity: .45; cursor: default; }

/* ---------- detail en panelen ---------- */

.tabbladen { display: flex; gap: 2px; margin-bottom: -1px; flex-wrap: wrap; }
.tabbladen button { padding: 9px 18px; border: 1px solid var(--rand); border-bottom: 0;
                    background: var(--vlak); color: var(--zacht); font-family: inherit;
                    border-radius: var(--straal) var(--straal) 0 0; cursor: pointer; font-size: 14px; }
.tabbladen button.actief { background: var(--wit); color: var(--tekst); font-weight: 600; }

.paneel { background: var(--wit); border: 1px solid var(--rand);
          border-radius: 0 var(--straal) var(--straal) var(--straal); padding: 22px; }
.velden-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 900px) { .velden-twee { grid-template-columns: 1fr; } }

fieldset { border: 0; padding: 0; margin: 0 0 18px; }
legend { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
         color: var(--zacht); font-weight: 600; margin-bottom: 10px; }
/* Etiket links, veld rechts, en alle velden op dezelfde lijn. LET OP: InputText
   rendert een <input> zonder type-attribuut, dus niet op [type=text] selecteren. */
.paneel label {
    display: grid; grid-template-columns: 150px minmax(0, 1fr);
    align-items: center; gap: 12px;
    margin-bottom: 10px; font-size: 13px; color: var(--zacht);
}
.paneel label.regel { display: flex; align-items: center; gap: 8px; }

.paneel input:not([type=checkbox]):not([type=radio]),
.paneel select,
.paneel textarea {
    width: 100%; margin: 0; padding: 10px 13px;
    font-size: 14px; font-family: inherit; color: var(--tekst); background: var(--wit);
    border: 1.5px solid var(--rand); border-radius: 10px;
    transition: border-color .12s, box-shadow .12s;
}
.paneel textarea { line-height: 1.5; }
.paneel input:not([type=checkbox]):not([type=radio]):hover,
.paneel select:hover, .paneel textarea:hover { border-color: var(--rand-sterk); }
.paneel input:not([type=checkbox]):not([type=radio]):focus,
.paneel select:focus, .paneel textarea:focus {
    outline: none; border-color: var(--merk-licht);
    box-shadow: 0 0 0 4px rgba(46, 134, 193, .14);
}
.paneel input.kort { max-width: 180px; }

.acties { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.primair { padding: 10px 26px; border: 0; border-radius: var(--straal); font-family: inherit;
           background: var(--merk); color: var(--wit); font-size: 15px; font-weight: 600; cursor: pointer; }
.primair:hover { background: var(--merk-licht); }

.gekoppeld { margin-top: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plakker { background: #eaf3fa; color: var(--merk); border: 1px solid #c9e0f2;
           padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.plakker.klein { font-size: 11px; padding: 2px 8px; margin-right: 4px; }

.iw-balk { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.iw-zoek { flex: 1; min-width: 200px; padding: 9px 13px; font-size: 14px; font-family: inherit;
           border: 1.5px solid var(--rand); border-radius: 10px; background: var(--wit); }
.iw-zoek:focus { outline: none; border-color: var(--merk-licht);
                 box-shadow: 0 0 0 3px rgba(46,134,193,.12); }
.iw-schakel { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zacht); }
.iw-veld { font-size: 13px; color: var(--zacht); display: flex; align-items: center; gap: 6px; }
.iw-veld input { padding: 7px 11px; border: 1.5px solid var(--rand);
                 border-radius: 10px; font-size: 14px; font-family: inherit; background: var(--wit); }
.iw-leeg { padding: 18px 0; }
.onder { color: var(--zacht); margin-right: 4px; }

.filter-gezet { display: flex; align-items: center; gap: 14px; padding: 16px;
                background: var(--let-op); border: 1px solid var(--let-op-rand);
                border-radius: var(--straal); font-size: 14px; }

/* ---------- tabellen met gegevens ---------- */

.gegevens { border-collapse: collapse; background: var(--wit); border: 1px solid var(--rand);
            border-radius: var(--straal); overflow: hidden; }
.gegevens th, .gegevens td { padding: 10px 16px; border-bottom: 1px solid var(--rand); text-align: left; }
.gegevens th { background: var(--vlak); font-weight: 600; color: var(--zacht); width: 260px; }
.gegevens tr:last-child th, .gegevens tr:last-child td { border-bottom: 0; }

.instellingen { border-collapse: collapse; margin-top: 10px; }
.instellingen th { text-align: left; font-weight: 600; font-size: 13px;
                   color: var(--zacht); padding: 7px 18px 7px 0; }
.instellingen thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.instellingen td { padding: 5px 18px 5px 0; }
.instellingen input[type=number] { width: 90px; padding: 8px 11px; font-size: 14px; font-family: inherit;
    border: 1.5px solid var(--rand); border-radius: 10px; background: var(--wit); }
.instellingen input[type=number]:focus { outline: none; border-color: var(--merk-licht);
    box-shadow: 0 0 0 3px rgba(46,134,193,.12); }

/* ---------- foutbalk van Blazor ---------- */

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: var(--let-op); padding: 10px 16px; box-shadow: 0 -1px 4px rgba(0,0,0,.2);
}
#blazor-error-ui .sluiten { float: right; cursor: pointer; }

/* ---------- werkblad: lijst boven, gegevens eronder ---------- */

.werkblad { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; min-height: 0; }
.werkblad-kop { flex: 0 0 auto; }

.lijstvak { flex: 1 1 52%; min-height: 140px; overflow: auto;
            border: 1px solid var(--rand); border-radius: var(--straal); background: var(--wit); }
.lijstvak .raster { border: 0; border-radius: 0; }
.lijstvak .raster thead th { position: sticky; top: 0; z-index: 1; }

.splitser { flex: 0 0 auto; height: 14px; cursor: row-resize; position: relative; }
.splitser::before {
    content: ""; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
    width: 48px; height: 3px; border-radius: 2px; background: var(--rand-sterk);
}
.splitser:hover::before { background: var(--merk-licht); }

/* Het onderste vak vult wat er over is, tot aan de onderrand. Daarbinnen blijven de
   kop en de tabbladen staan en schuift alleen het paneel: zo staat de omlijsting van
   het paneel altijd tot onderaan, ook bij een tabblad met weinig velden, en blijft de
   voetnoot met de datums op zijn plek. */
.detailvak { flex: 1 1 48%; min-height: 120px; display: flex; flex-direction: column;
             overflow: hidden; }
.detailvak > .detailkop, .detailvak > .tabbladen, .detailvak > .voetnoot { flex: 0 0 auto; }
.detailvak > .paneel { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.leegvak { display: flex; align-items: center; justify-content: center; height: 100%;
           color: var(--zacht); font-size: 14px; text-align: center; padding: 30px; }

.detailkop { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.detailkop h2 { font-size: 18px; margin: 0; font-weight: 600; }

/* ---------- knoppenbalk onder een lijst ---------- */

.knoppenbalk { flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
               padding: 10px 0 2px; flex-wrap: wrap; }
.knoppenbalk .knop-rand { padding: 7px 15px; }
.knoppenbalk .knop-rand:disabled { opacity: .45; cursor: default; background: var(--wit); }
.scheiding { width: 1px; height: 22px; background: var(--rand); margin: 0 4px; }

/* ---------- alleen tonen ---------- */

.toonveld { display: grid; grid-template-columns: 150px minmax(0, 1fr);
            gap: 12px; align-items: baseline; padding: 5px 0; font-size: 14px; }
.toonnaam { color: var(--zacht); font-size: 13px; }
.toonwaarde { color: var(--tekst); }
.toonwaarde a { color: var(--merk); text-decoration: none; }
.toonwaarde a:hover { text-decoration: underline; }
.toonwaarde .leeg { color: var(--rand-sterk); }

.memo { margin: 0; padding: 12px 14px; background: var(--vlak); border: 1px solid var(--rand);
        border-radius: 10px; font-family: inherit; font-size: 14px; white-space: pre-wrap;
        max-height: 220px; overflow: auto; }

.gekoppeld-inline { display: flex; gap: 4px; flex-wrap: wrap; }
.voetnoot { margin: 12px 0 0; }

/* ---------- venster over het scherm ---------- */

.overlay { position: fixed; inset: 0; z-index: 900; display: flex;
           align-items: center; justify-content: center; padding: 28px;
           background: rgba(16, 32, 48, .42); }
.venster { width: 100%; max-width: 940px; max-height: 90vh; display: flex; flex-direction: column;
           background: var(--wit); border-radius: 16px; box-shadow: 0 18px 60px rgba(16,32,48,.28); }
.vensterkop { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px;
              border-bottom: 1px solid var(--rand); }
.vensterkop h2 { margin: 0; font-size: 18px; font-weight: 600; }
.sluitknop { margin-left: auto; background: none; border: 0; font-size: 24px; line-height: 1;
             color: var(--zacht); cursor: pointer; padding: 0 4px; }
.sluitknop:hover { color: var(--tekst); }
.vensterromp { padding: 18px 22px; overflow-y: auto; }

/* Een venster met tabbladen houdt één hoogte, ongeacht welk tabblad open staat.
   Zonder dit krimpt het venster van "Naam en adres" naar "Bereikbaarheid" en springt
   het weer terug: de knoppen Opslaan en Annuleren staan dan elke keer ergens anders,
   en dat is precies waar je met de muis naartoe onderweg bent. De romp vangt het
   verschil op en schuift zelf als een tabblad langer wordt dan de ruimte. */
.venster.tabvenster { height: min(88vh, 820px); }

/* EditForm zet een <form> tussen het venster en de romp. Die moet dus mee in de
   flexketen, anders rekt de romp niet op en valt de voet ergens in het midden. */
.venster.tabvenster form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.venster.tabvenster .vensterromp { flex: 1; min-height: 0; display: flex; flex-direction: column;
                                   overflow: hidden; }

/* Het paneel vult de rest en schuift zelf. Zo staat de omlijsting altijd even hoog
   en zit de schuifbalk binnen het kader in plaats van eromheen. */
.venster.tabvenster .paneel { flex: 1; min-height: 0; overflow-y: auto; }
.vensterromp .paneel { border-radius: 0 var(--straal) var(--straal) var(--straal); }
.venstervoet { display: flex; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--rand); }

.venster.smal { max-width: 560px; }
.primair.gevaar { background: var(--fout); }
.primair.gevaar:hover { background: #8f1e17; }
.verwijderwaarschuwing { margin-top: 16px; }

.opzoekrij { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.opzoekrij input { padding: 9px 12px; border: 1.5px solid var(--rand); border-radius: 10px;
                   font-size: 14px; font-family: inherit; }
.opzoekrij input.kort { width: 120px; }
.opzoekrij input.heelkort { width: 70px; }


/* Een waarde die alleen te lezen is, op de plek waar anders een invoervak staat.
   Zelfde hoogte als een invoervak, zodat de regels niet gaan zwabberen. */
.paneel label .waarde { display: block; padding: 9px 2px; color: var(--tekst); }

/* Een tabblad dat er wel is maar nog niet gebouwd. Met opzet zichtbaar en niet
   weggelaten: zo klopt de indeling met Rela6 en is te zien wat er nog moet. */
.nogleeg { padding: 40px 10px; text-align: center; }
.nogleeg p { margin: 0 0 8px; }
.nogleeg .rustig { max-width: 520px; margin: 0 auto; line-height: 1.6; }


/* ---------- codes koppelen: geselecteerd links, te selecteren rechts ---------- */

/* Zelfde opzet als in Rela6: twee lijsten met een gekleurde titelbalk, de knoppen
   ertussen. De kleuren zijn zachter dan het paars en blauwgroen van WinDev, maar
   het onderscheid blijft: links wat de relatie heeft, rechts wat er nog bij kan. */
.codekoppeling { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
                 height: 100%; min-height: 320px; }
.codelijst { display: flex; flex-direction: column; min-height: 0; overflow: hidden;
             border: 1px solid var(--rand); border-radius: var(--straal); background: var(--wit); }
.codelijst-titel { display: flex; align-items: center; justify-content: space-between;
                   padding: 11px 14px; font-size: 15px; font-weight: 600; }
.codelijst-titel span { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
                        background: rgba(255,255,255,.7); }
.codelijst.links  .codelijst-titel { background: #ece6f7; color: #4b3a78; }
.codelijst.rechts .codelijst-titel { background: #e2f1f1; color: #245b5b; }
.codelijst-kolommen, .coderegel { display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
.codelijst-kolommen { padding: 7px 14px; font-size: 12px; font-weight: 600; color: var(--zacht);
                      border-bottom: 1px solid var(--rand); background: var(--vlak); }
.codelijst-romp { flex: 1; min-height: 0; overflow-y: auto; }
.coderegel { padding: 8px 14px; cursor: pointer; font-size: 14px; user-select: none;
             border-bottom: 1px solid var(--vlak); }
.coderegel:nth-child(even) { background: #fafbfc; }
.coderegel code { color: var(--zacht); }
.coderegel:hover { background: var(--vlak); }
.coderegel.gekozen, .coderegel.gekozen:nth-child(even) { background: var(--merk); color: var(--wit); }
.coderegel.gekozen code { color: var(--wit); }
.codelijst .leeg { padding: 14px; margin: 0; }
.codelijst-voet { padding: 10px 14px; border-top: 1px solid var(--rand); }
.nieuwecode { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nieuwecode input { padding: 8px 10px; border: 1.5px solid var(--rand); border-radius: 10px;
                    font-size: 14px; font-family: inherit; flex: 1; min-width: 120px; }
.nieuwecode input.heelkort { flex: 0 0 76px; min-width: 0; }
.codeknoppen { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.codeknoppen button { min-width: 130px; }


/* Kopregel boven de tabbladen van een kaart: naam, soort en vinkjes. */
.kaartkop { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 220px; gap: 10px 18px; align-items: end;
            margin-bottom: 16px; }
.kaartkop label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--zacht); }
.kaartkop label.regel { flex-direction: row; align-items: center; gap: 8px; color: var(--tekst); font-size: 14px; }
.kaartkop input:not([type=checkbox]), .kaartkop select {
    padding: 10px 13px; border: 1.5px solid var(--rand); border-radius: 12px;
    font-size: 15px; font-family: inherit; color: var(--tekst); background: var(--wit); }
.kaartkop input:not([type=checkbox]):focus, .kaartkop select:focus {
    outline: none; border-color: var(--merk-licht); box-shadow: 0 0 0 4px rgba(46,134,193,.14); }
.kaartkop .vinkjes { display: flex; gap: 18px; padding-bottom: 10px; }
@media (max-width: 700px) { .kaartkop { grid-template-columns: 1fr; } }


/* ---------- lijst op een tabblad van de kaart, met formulier eronder ---------- */

.lijstblad { display: flex; flex-direction: column; gap: 12px; }
.lijstblad-tabel { border: 1px solid var(--rand); border-radius: var(--straal); overflow: hidden; }
.lijstblad-tabel .raster { border: 0; }
.lijstblad .leeg { padding: 14px; margin: 0; }
.raster th.rechts, .raster td.rechts { text-align: right; }
.knoppenbalk .vraag { font-size: 14px; margin-right: 6px; }
.regelformulier { border: 1px solid var(--rand); border-radius: var(--straal); padding: 16px 18px;
                  background: #fafbfc; }
.regelformulier h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.wachtwoordrij { display: flex; gap: 8px; }
.wachtwoordrij input { flex: 1; }
.formulierknoppen { display: flex; gap: 8px; margin-top: 6px; }

/* ---------- popup boven een venster ---------- */

/* Een popup kan boven de kaart liggen, die zelf al een overlay is. */
.overlay.boven { z-index: 950; background: rgba(16, 32, 48, .30); }
.popupromp label { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 12px;
                   margin-bottom: 12px; font-size: 14px; color: var(--zacht); }
.popupromp label.regel { display: flex; gap: 8px; color: var(--tekst); }
.popupromp input:not([type=checkbox]):not([type=radio]), .popupromp select, .popupromp textarea {
    width: 100%; padding: 10px 13px; border: 1.5px solid var(--rand); border-radius: 12px;
    font-size: 15px; font-family: inherit; color: var(--tekst); background: var(--wit); }
.popupromp input.kort, .popupromp select.kort { max-width: 180px; }
.popupromp input:focus, .popupromp select:focus, .popupromp textarea:focus {
    outline: none; border-color: var(--merk-licht); box-shadow: 0 0 0 4px rgba(46,134,193,.14); }
.popupromp .foutmelding { margin-top: 8px; }
.popupromp .velden-twee { grid-template-columns: 1fr; gap: 0; }

/* ---------- lege tabellen ---------- */

/* Een tabel staat er altijd, ook zonder regels. De uitleg staat dan als één
   rustige regel in de tabel, en het kader loopt door tot onderaan. */
.raster tr.leegregel, .raster tr.leegregel:hover { cursor: default; background: transparent; }
.raster tr.leegregel td { color: var(--zacht); font-size: 13px; padding: 18px 14px; border-bottom: 0; }

.lijstblad { height: 100%; min-height: 260px; }
.lijstblad-tabel { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--wit); }
.lijstblad-tabel .raster thead th { position: sticky; top: 0; z-index: 1; }

/* De lijsten in het paneel onder het relatieoverzicht vullen ook tot onderaan. */
.detailvak > .paneel:has(> .iw) { display: flex; flex-direction: column; }
.paneel > .iw { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.paneel > .iw > .raster { flex: 0 0 auto; }

/* ---------- invoer met een fout ---------- */

input.fout { border-color: var(--fout) !important; background: #fdf2f1 !important; }
.veldfout { color: var(--fout); font-size: 12px; }

/* De zoeknaam naast de titel van een venster ("Relatie wijzigen  FLIETSTRA") even
   groot als de titel zelf: het is de helft van wat je aan het doen bent, geen voetnoot. */
.vensterkop .rustig code { font-size: 18px; font-weight: 600; color: var(--merk); letter-spacing: .02em; }

/* ---------- hoofdkaart ---------- */

/* Persoon: vier kaders onder elkaar, zoals in Rela6. Niet te breed, anders worden
   de invoervakken lange lege stroken. */
.kaart-een { max-width: 820px; }
.kaart-een fieldset + fieldset { margin-top: 6px; }

/* Twee velden op één regel: titel en aanhef, postcode en woonplaats, telefoon. */
.rij-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 800px) { .rij-twee { grid-template-columns: 1fr; } }

/* Invoervak met een knop erachter: e-mail sturen, website openen. */
.metknop { display: flex; gap: 8px; align-items: center; }
.metknop > input { flex: 1; min-width: 0; }
.knop-rand.ikoon { display: inline-flex; align-items: center; justify-content: center;
                   width: 42px; height: 42px; padding: 0; text-decoration: none; font-size: 17px; }
a.knop-rand.ikoon[aria-disabled] { opacity: .35; pointer-events: none; }
.rij-twee > label { grid-template-columns: 110px 1fr; }
.knop-rand.klein.legendknop { margin-left: 12px; padding: 3px 10px; font-size: 12px; text-transform: none;
                               letter-spacing: 0; vertical-align: middle; }

/* ---------- hoofdkaart zoals in WinDev ---------- */

/* Kop van een groep: een tabje met de naam, en een blauwe lijn over de volle
   breedte. In WinDev geeft die lijn aan wat bij elkaar hoort; hier ook. */
.hoofdkaart { max-width: 980px; }
.kadertitel { display: flex; align-items: flex-end; justify-content: space-between;
              border-bottom: 2px solid var(--merk-licht); margin: 22px 0 14px; }
.hoofdkaart > .kadertitel:first-child { margin-top: 4px; }
.kadertitel > span { display: inline-block; padding: 7px 16px 6px; font-weight: 600; font-size: 14px;
                     color: var(--merk); background: #f1f7fc; border: 1px solid #cfe2f1;
                     border-bottom: 0; border-radius: 8px 8px 0 0; }
.kadertitel .overnemen { margin-bottom: 6px; padding: 5px 12px; font-size: 13px; }

/* Een veldregel: label van vaste breedte, dan het veld — zodat alle velden onder
   elkaar op dezelfde plek beginnen, zoals in WinDev. */
.veldrij { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px;
           margin-bottom: 10px; }
.veldrij.twee { grid-template-columns: 150px 1fr 110px 1fr; }
.vlabel { font-size: 14px; color: var(--zacht); }
.vlabel.binnen { padding: 0 4px 0 10px; white-space: nowrap; }
.veldrij input:not([type=checkbox]), .veldrij select {
    width: 100%; padding: 9px 12px; border: 1.5px solid var(--rand); border-radius: 10px;
    font-size: 15px; font-family: inherit; color: var(--tekst); background: var(--wit); }
.veldrij input:focus, .veldrij select:focus {
    outline: none; border-color: var(--merk-licht); box-shadow: 0 0 0 4px rgba(46,134,193,.14); }
.veldrij input.half { max-width: 50%; }

/* Landcode en titel: kort codeveld, "…"-knop, en de omschrijving erachter. */
.codeveld { display: flex; align-items: center; gap: 8px; }
.codeveld input.code { width: 80px; flex: 0 0 80px; }
.codeveld .omschrijving { color: var(--tekst); font-size: 14px; padding-left: 6px; }
.titelrij { display: grid; grid-template-columns: auto auto 1fr; align-items: center; }

/* Postcode, dan Woonplaats op dezelfde regel, net als in WinDev. */
.postcoderij { display: flex; align-items: center; gap: 8px; }
.postcoderij input.postcode { flex: 0 0 140px; width: 140px; }
.postcoderij > input:not(.postcode) { flex: 1; min-width: 0; }

.opzoekfilter { width: 100%; padding: 9px 12px; border: 1.5px solid var(--rand); border-radius: 10px;
                font-size: 15px; font-family: inherit; margin-bottom: 10px; }
.opzoeklijst { max-height: 50vh; overflow-y: auto; border: 1px solid var(--rand); border-radius: var(--straal); }
.opzoekregel { display: grid; grid-template-columns: 60px 1fr; gap: 10px; padding: 8px 12px; cursor: pointer;
               border-bottom: 1px solid var(--vlak); font-size: 14px; }
.opzoekregel:hover { background: var(--vlak); }
.opzoekregel.gekozen { background: #e3f0fa; }
.opzoekregel code { color: var(--zacht); }

/* Vraag bij het verlaten van een popup met wijzigingen. */
.venstervoet.sluitvraag { align-items: center; background: #fff8e6; }
.venstervoet.sluitvraag > span { margin-right: auto; font-size: 14px; }
.venster:focus { outline: none; }

/* ---------- kaart met selectiekenmerken ernaast ---------- */

/* Zoals in Rela6 staat de lijst Selectiekenmerken rechts naast de hele kaart,
   van de kop tot onderaan. Het venster wordt daarvoor breder. */
.venster.tabvenster { max-width: 1320px; }
.kaartindeling { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 290px; gap: 20px; }
.kaartlinks { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.kaartlinks > .kaartkop, .kaartlinks > .tabbladen { flex: 0 0 auto; }
.venster.tabvenster .kaartlinks > .paneel { flex: 1; min-height: 0; overflow-y: auto; }

.kenmerken { display: flex; flex-direction: column; min-height: 0;
             border: 1px solid var(--rand); border-radius: var(--straal); background: var(--wit); overflow: hidden; }
.kenmerken-kop { display: flex; justify-content: space-between; align-items: center;
                 padding: 11px 14px; font-weight: 600; font-size: 14px; color: var(--merk);
                 background: #f1f7fc; border-bottom: 2px solid var(--merk-licht); }
.kenmerken-kop .telling { font-size: 12px; background: var(--wit); border-radius: 999px; padding: 2px 9px; }
.kenmerken-lijst { flex: 1; min-height: 0; overflow-y: auto; }
.kenmerk { display: flex; align-items: center; gap: 10px; padding: 7px 14px; font-size: 14px;
           cursor: pointer; border-bottom: 1px solid var(--vlak); margin: 0; }
.kenmerk:nth-child(even) { background: #fafbfc; }
.kenmerk:hover { background: var(--vlak); }
.kenmerk.aan { background: #e8f2fb; }
.kenmerk input { width: 16px; height: 16px; flex: 0 0 auto; }
.kenmerken .leeg { padding: 14px; margin: 0; }

@media (max-width: 1100px) {
    .kaartindeling { grid-template-columns: 1fr; }
    .kenmerken { max-height: 220px; }
}

/* ---------- verplichte velden, zoals cVerplichteVelden in Rela6 ---------- */

.paneel input.verplicht, .paneel select.verplicht, .paneel textarea.verplicht,
.kaartkop input.verplicht, .veldrij input.verplicht { background: #fffbe0; }
/* Achter de tekst waar dat kan (de losse labels van de hoofdkaart). Bij een label dat
   het veld zelf omvat staat de ster ervoor: een ster erachter zou daar als extra
   rij in het raster van het label vallen. */
span.verplicht-label::after { content: " *"; color: var(--fout); font-weight: 700; }
label.verplicht-label { position: relative; }
label.verplicht-label::before { content: "*"; position: absolute; left: -12px; top: 0;
                                color: var(--fout); font-weight: 700; }

/* ---------- selectievelden boven de relatielijst ---------- */

/* Velden links, die de ruimte verdelen; rechts twee even brede knoppen onder elkaar. */
.filterbalk.vast { display: flex; align-items: stretch; gap: 18px; flex-wrap: nowrap; }
.filtervelden { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 90px minmax(0, 1.2fr);
                gap: 12px; align-items: end; }
.filterbalk.vast input, .filterbalk.vast select { width: 100%; }
.filterbalk.vast input.smal { width: 100%; }
.filterknoppen { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; width: 150px; }
.filterknoppen .knop-rand { width: 100%; padding: 8px 12px; }
@media (max-width: 1200px) {
    .filtervelden { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- interne vensters in het paneel (IW_Acties, IW_Post, IW_Kontaktpersonen) ---------- */

/* Zoals in Rela6: de selectievelden links in vaste kolommen, rechts de knop Verversen
   met daaronder "filter veranderd", het aantal en Filters opheffen. */
.iwfilter { display: flex; align-items: stretch; gap: 18px; margin-bottom: 10px; flex: 0 0 auto; }
.iwvelden { flex: 1; display: grid; gap: 6px 16px; align-content: start; }
.iwvelden.acties { grid-template-columns: 200px 250px 190px minmax(260px, 1fr); }
.iwvelden.post { grid-template-columns: 210px 200px 220px minmax(160px, 1fr); }
.iwvelden.kontakt { grid-template-columns: 300px 1fr; }
.iwvelden > label { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center;
                    gap: 6px; font-size: 12px; color: var(--zacht); }
.iwvelden > label.breed { grid-column: span 2; }
.iwvelden > label.vink { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tekst); }
.iwvelden input:not([type=checkbox]), .iwvelden select {
    width: 100%; padding: 4px 9px; height: 30px; border: 1.5px solid var(--rand); border-radius: 8px;
    font-size: 14px; font-family: inherit; background: var(--wit); color: var(--tekst); }
.iwvelden input:disabled { background: var(--vlak); color: var(--zacht); }
.iwvelden input:focus, .iwvelden select:focus { outline: none; border-color: var(--merk-licht);
    box-shadow: 0 0 0 3px rgba(46,134,193,.12); }
.iwvelden .codeveld input.code { width: 70px; flex: 0 0 70px; }
.iwvelden .codeveld .knop-rand.ikoon { height: 30px; padding: 0 10px; }
.iwvelden .codeveld .omschrijving { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* De knoppen zelf zijn .filterknoppen, gelijk aan die boven de relatielijst. */
.filterknoppen.iwknoppen { justify-content: flex-start; flex: 0 0 150px; }
.filtermelding { font-size: 12px; color: var(--fout); }
.iwtelling { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--zacht); }
.linkknop { border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
            color: var(--merk); cursor: pointer; text-decoration: underline; }

/* De tabel vult de ruimte en schuift zelf; wat eronder staat blijft staan. */
.paneel > .iw > .iw-tabel { flex: 1 1 auto; min-height: 120px; overflow: auto;
    border: 1px solid var(--rand); border-radius: var(--straal); background: var(--wit); }
.iw-tabel .raster { border: 0; border-radius: 0; }
.iw-tabel .raster thead th { position: sticky; top: 0; z-index: 1; }
.raster td.te-laat { background: #fbe3e1; }

.iw-onder { flex: 0 0 auto; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.metwie { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--zacht); }
.metwie label { display: flex; align-items: center; gap: 6px; }
.metwie .waarde { display: inline-block; min-width: 120px; min-height: 28px; padding: 4px 9px;
    border: 1px solid var(--rand); border-radius: 8px; background: var(--vlak); color: var(--tekst); font-size: 14px; }
.metwie .waarde.breed { min-width: 200px; }
.metwie .rechts { margin-left: auto; }
.iw-memo { min-height: 48px; max-height: 90px; overflow: auto; margin: 0; }

.opmerkingenblad { display: flex; flex-direction: column; gap: 6px; }
.opmerkingenblad .memo { min-height: 120px; margin: 0 0 10px; }

/* De zoeknaam in de kleuren van de status (alstst), zoals in Rela6. */
.raster td.statuskleur code { color: inherit; }

/* ---------- kontaktpersoonvenster (WIN_MuterenKontaktpersoon) ---------- */

.veldrij span.waarde { padding: 6px 2px; color: var(--tekst); font-size: 14px; }
.memoveld { width: 100%; min-height: 320px; padding: 10px 12px; font-family: inherit; font-size: 14px;
            border: 1.5px solid var(--rand); border-radius: 10px; resize: vertical; }
.memoveld:focus { outline: none; border-color: var(--merk-licht); box-shadow: 0 0 0 3px rgba(46,134,193,.12); }
.kaartkop input.half { max-width: 60%; }

/* Knoppen onder een lijst in het paneel (Wijzigen, Toevoegen, Verwijderen). */
.iw-knoppen { flex: 0 0 auto; display: flex; gap: 8px; margin-top: 8px; }
.iw-knoppen .knop-rand { padding: 7px 16px; }

/* Tabellen in het paneel: één regel per rij, zoals in WinDev; te breed = horizontaal schuiven. */
.iw-tabel .raster td { white-space: nowrap; padding-top: 7px; padding-bottom: 7px; }
.iw-tabel .raster th { white-space: nowrap; }

/* Het aantal staat rechtsonder de tabel, zodat de tabel hoger kan beginnen. */
.iw-onder > .iwtelling { margin-top: -4px; }
.iwknoppen .filtermelding { text-align: center; min-height: 14px; }

/* De splitter is echt te slepen. */
.splitser { touch-action: none; user-select: none; }
.splitser.sleept::before { background: var(--merk); }

/* Splitter binnen een tabblad: tussen tabel en opmerkingen. Het vak eronder krijgt
   dan een vaste hoogte en de opmerkingen vullen die. */
.splitser.klein { height: 12px; }
.splitser.klein::before { top: 5px; }
.iw > .iw-onder { display: flex; flex-direction: column; min-height: 0; overflow: hidden; margin-top: 0; }
.iw > .iw-onder > .iw-memo { flex: 1 1 auto; max-height: none; min-height: 40px; height: 60px; }

/* Post: de vierde kolom niet breder dan nodig (IDNummer). */
.iwvelden.post { grid-template-columns: 210px 200px 220px 230px; }

/* Kolomkoppen blijven altijd staan. Daarvoor moet de tabel zelf niet afknippen
   (overflow: hidden maakt sticky onwerkzaam) en moet het vak rond de tabel schuiven,
   niet het hele paneel. */
.lijstvak .raster, .iw-tabel .raster, .lijstblad-tabel .raster { overflow: visible; }
.lijstvak .raster thead th, .iw-tabel .raster thead th, .lijstblad-tabel .raster thead th {
    position: sticky; top: 0; z-index: 2; background: var(--vlak); box-shadow: inset 0 -1px 0 var(--rand); }
.detailvak > .paneel:has(> .iw) { overflow: hidden; }
.paneel > .iw { overflow: hidden; }
.venster.tabvenster .kaartlinks > .paneel:has(> .iw) { display: flex; flex-direction: column; overflow: hidden; }

/* ---------- actievenster (WIN_MuterenActies) ---------- */

.venster.actievenster { max-width: 900px; height: min(90vh, 900px); }
.venster.actievenster form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.venster.actievenster .vensterromp { flex: 1; min-height: 0; overflow-y: auto; }
.actieindeling { display: grid; grid-template-columns: 1fr 170px; gap: 20px; }
.actievinkjes { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; font-size: 14px; }
.actievinkjes label.regel { display: flex; align-items: center; gap: 8px; }
.memoveld.actiememo { min-height: 180px; margin: 4px 0 10px; }
.codeveld input.code.breder { width: 110px; flex: 0 0 110px; }
.veldrij input.kort { max-width: 60px; }
.veldrij.klein .vlabel, .veldrij.klein .waarde { font-size: 12px; }

/* ---------- stambestanden ---------- */

/* Links het menu (zoals de zijbalk Stambestanden in Rela6), rechts het stambestand. */
.stamindeling-pagina { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 230px 1fr; gap: 18px; }
.stammenu { display: flex; flex-direction: column; min-height: 0; }
.stammenu .tabbladen button { padding: 7px 12px; font-size: 13px; }
.stammenu-lijst { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
                  background: var(--wit); border: 1px solid var(--rand); border-radius: 0 var(--straal) var(--straal) var(--straal); padding: 6px; }
.stammenu-lijst a { padding: 8px 12px; border-radius: 8px; color: var(--tekst); text-decoration: none; font-size: 14px; }
.stammenu-lijst a:hover { background: var(--vlak); }
.stammenu-lijst a.actief { background: #e3f0fa; color: var(--merk); font-weight: 600; }
.stamvak { display: flex; flex-direction: column; min-height: 0; background: var(--wit);
           border: 1px solid var(--rand); border-radius: var(--straal); padding: 14px 16px; }
.stamvak > .iw { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.stamvak > .iw > .iw-tabel { flex: 1 1 auto; min-height: 120px; overflow: auto;
    border: 1px solid var(--rand); border-radius: var(--straal); background: var(--wit); }
.iwvelden.stamfilter { grid-template-columns: 260px 360px; grid-auto-flow: row; }
.iwvelden.stamfilter > label { grid-column: 1 / span 1; }
.iwvelden.stamfilter > label:last-child { grid-column: 1 / span 2; max-width: 460px; }

/* Het wijzigvenster: velden links, vinkjes rechts. */
.venster.breed { max-width: 820px; }
.stamindeling { display: grid; grid-template-columns: 1fr 220px; gap: 20px; }
.vinkkop { font-size: 12px; color: var(--zacht); margin-top: 8px; text-transform: uppercase; letter-spacing: .04em; }
.kleurveld { display: flex; align-items: center; gap: 10px; }
.kleurveld input[type=color] { width: 60px; height: 32px; padding: 2px; border: 1.5px solid var(--rand); border-radius: 8px; }
.memoveld.klein { min-height: 110px; }
.popupromp .veldrij input.half, .popupromp .veldrij select.half { max-width: 220px; }
@media (max-width: 900px) { .stamindeling-pagina, .stamindeling { grid-template-columns: 1fr; } }

/* Popup met tabbladen: vaste hoogte, de inhoud schuift. */
.venster.vast { height: min(88vh, 760px); }
.venster.vast .vensterromp { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Medewerkers: bovenaan twee kolommen (Nummer…Landcode | Displaynaam, Loginnaam, Wachtwoord). */
.stamboven { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.stamboven .veldrij { grid-template-columns: 130px 1fr; }
.actievinkjes .rechtsveld { display: flex; align-items: center; gap: 8px; }
.actievinkjes .rechtsveld input { width: 80px; padding: 4px 8px; border: 1.5px solid var(--rand); border-radius: 8px; }

/* Een tabel op een tabblad van een wijzigvenster (medewerkers: Uurtarief/Uursoort, …). */
.venster.vast .vensterromp:has(> .stamsub) { display: flex; flex-direction: column; overflow: hidden; }
.stamsub { flex: 1 1 auto; min-height: 0; padding: 0; border: 0; }
.stamsub > .iw { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.stamsub > .iw > .iw-tabel { flex: 1 1 auto; min-height: 120px; overflow: auto;
    border: 1px solid var(--rand); border-radius: var(--straal); background: var(--wit); }
.stamsub .iwfilter { margin-bottom: 8px; }
.verborgen { display: none !important; }

/* Een vinkje tussen de velden (Uursoorten: Doorberekenen naast Prijs). */
.veldrij input.inlinevink { justify-self: start; width: auto; margin: 0; }

/* Het raster van WIN_MuterenRoosters: dagen naast elkaar, tijden onder elkaar. */
.veldraster { border-collapse: collapse; margin-top: 14px; }
.veldraster th { font-weight: 500; color: var(--rustig, #5b6b7a); text-align: left; padding: 4px 8px; white-space: nowrap; }
.veldraster thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--rand); }
.veldraster tbody th { border-right: 1px solid var(--rand); padding-right: 12px; }
.veldraster td { padding: 3px 6px; }
.veldraster tr.lijn > * { border-top: 1px solid var(--rand); padding-top: 8px; }
.popupromp .veldraster input[type=time] { width: 96px; max-width: 96px; }
.veldraster tr.totaal .waarde { font-weight: 600; }

.opzoekregel.stamopzoek { grid-template-columns: 110px 1fr; }
.codeveld input.code.tekstcode { width: 120px; flex: 0 0 120px; }

/* De code van een bookmark onder de lijst (Rela6: EDT_BookmarkDatabaseVeld met splitter). */
.stamvak > .iw > pre.stamvoorbeeld { flex: 0 0 160px; height: 160px; margin: 0; overflow: auto; white-space: pre-wrap;
    font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; background: var(--wit);
    border: 1px solid var(--rand); border-radius: var(--straal); padding: 8px 10px; }

/* Keuzerondjes in een kader (WinDev RADIO_), bijv. Soort en In/Uit bij standaardbrieven. */
fieldset.rondjes { border: 1px solid var(--rand); border-radius: var(--straal); padding: 6px 12px 8px; margin: 0 0 12px; }
fieldset.rondjes legend { font-size: 12px; color: var(--tekst); padding: 0 4px; }
fieldset.rondjes label.regel { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.popupromp label.vinkregel { display: flex; gap: 8px; align-items: center; }
.memoveld::placeholder, .popupromp input::placeholder { font-style: italic; color: #9aa3ad; }

/* Word-ontwerp (WIN_WordOntwerp): editor links, bookmarks rechts, bijna schermvullend. */
.venster.woordontwerp { max-width: min(1500px, 97vw); width: 97vw; height: 94vh; max-height: 94vh; display: flex; flex-direction: column; }
.woordontwerp-romp { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 300px; gap: 12px; padding: 10px 14px; }
.woordontwerp-editor { min-height: 0; height: 100%; border: 1px solid var(--rand); border-radius: var(--straal); overflow: hidden; }
.woordontwerp-bookmarks { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.woordontwerp-bookmarks .tabbladen button { padding: 6px 10px; font-size: 13px; }
.bookmarklijst { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1px solid var(--rand); border-radius: var(--straal); background: var(--wit); }
.bookmarklijst .bookmark { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 5px 10px;
    font-size: 13.5px; color: var(--merk); cursor: pointer; border-bottom: 1px solid var(--vlak); }
.bookmarklijst .bookmark:hover { background: #e3f0fa; }
.venster.woordontwerp .venstervoet { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.venster.woordontwerp .voetmelding { margin-right: auto; }
.iw-knoppen .rechtsknop { margin-left: auto; }
.iwvelden.stamfilter > label.lijstvink { display: flex; align-items: center; gap: 8px; }
.iwvelden.stamfilter .codeveld input.code { width: 90px; flex: 0 0 90px; }
.woordontwerp-romp.zonderpaneel { grid-template-columns: 1fr; }
.bookmarklijst .ingevuld { display: grid; grid-template-columns: 1fr; padding: 4px 10px; border-bottom: 1px solid var(--vlak); font-size: 13px; }
.bookmarklijst .ingevuld span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Systeem / Logging (plane 97): drie vakken onder de logregels. */
.detailvak.logdetail { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; min-height: 0; flex: 1 1 48%; }
.logdetail > section { display: flex; flex-direction: column; min-height: 0; gap: 6px; }
.logdetail h3 { margin: 0; font-size: 14px; }
.logdetail .iw-tabel { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--rand); border-radius: var(--straal); }
.logdetail .raster td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logdetail tr.gewijzigd td { background: #fff4cc; font-weight: 600; }
.lijstvak td.logtekst { max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterbalk input.smal.breder { width: 110px; }

/* Afbeelding in clipboardfiles (handtekening medewerker). */
.afbeeldingveld { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.afbeeldingveld img { max-width: 220px; max-height: 80px; border: 1px solid var(--rand); border-radius: 6px; background: #fff; padding: 4px; }
.bestandknop { position: relative; overflow: hidden; cursor: pointer; padding: 6px 14px; }
.bestandknop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.popupromp label.bestandknop { display: inline-block; grid-template-columns: none; }
.fotoveld .afbeeldingveld { flex-direction: column; align-items: flex-start; margin-bottom: 10px; }
.fotoveld .afbeeldingveld img { max-width: 140px; max-height: 140px; }

/* Post, tabblad Media (TAB_Post[3] van WIN_MuterenPost). */
.paneel.mediablad { padding: 16px 18px; }
.mediablad fieldset.rondjes input:not([type=radio]) { margin-top: 4px; width: 100%; }
.mediablad .veldrij { grid-template-columns: 120px 1fr; margin-bottom: 8px; }
.mediablad label.regel { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.mediablad .codeveld select { max-width: 45%; }
.mediablad .mediavinkjes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin: 8px 0; }
.mediablad .mediastatus { font-weight: 700; margin: 0 0 10px; color: var(--tekst); }
.mediablad textarea.memoveld { width: 100%; min-height: 70px; }
table.edities { width: 100%; border-collapse: collapse; font-size: 13px; }
table.edities th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--zacht); padding: 4px 6px; border-bottom: 1px solid var(--rand); }
table.edities td { padding: 4px 6px; border-bottom: 1px solid var(--rand); }

/* Zijbalk als SIDE_Bar: elk onderdeel een kop die open- en dichtklapt. */
/* De koppen (Hoofdmenu, Koppel zoeknamen, …) in dezelfde stijl als Dashboard; de kop waar de open pagina onder
   valt krijgt net als Dashboard het blauwe balkje links. */
.zijbalk details.onderdeel > summary { list-style: none; cursor: pointer; user-select: none; }

/* Hoofdfuncties (Dashboard, Hoofdmenu, Koppel zoeknamen, …): allemaal dezelfde herkenbare balk, ook als er veel is
   uitgeklapt. Alleen het blauwe streepje links geeft aan welke hoofdfunctie je gebruikt. */
.zijbalk a.hoofd, .zijbalk details.onderdeel > summary {
    display: block; padding: 10px 22px; font-size: 14px; font-weight: 600; color: var(--merk);
    background: #eef4f9; border-top: 1px solid var(--rand); text-decoration: none; }
.zijbalk a.hoofd { border-top: 0; }
.zijbalk a.hoofd:hover, .zijbalk details.onderdeel > summary:hover { background: #e2edf6; color: var(--merk); }
.zijbalk a.hoofd.active, .zijbalk details.onderdeel > summary.actief { background: #e2edf6; box-shadow: inset 4px 0 0 var(--merk); }
.zijbalk details.onderdeel > summary.leeg { color: #93a7b8; font-weight: 500; }
.zijbalk details.onderdeel[open] > summary { border-bottom: 1px solid var(--rand); }
/* De keuzes eronder: gewoon; de open pagina alleen in blauw, zonder eigen streepje. */
.zijbalk details.onderdeel a.active { background: none; box-shadow: none; color: var(--merk); font-weight: 600; }
.zijbalk details.onderdeel > summary::-webkit-details-marker { display: none; }
.zijbalk details.onderdeel > summary::after { content: "\25B8"; float: right; color: var(--zacht); }
.zijbalk details.onderdeel[open] > summary::after { content: "\25BE"; }
.zijbalk details.onderdeel > summary.leeg::after { content: ""; }
.zijbalk details.onderdeel a { padding: 7px 22px 7px 32px; font-size: 13px; }
.zijbalk .nogniet { display: block; padding: 7px 22px 7px 32px; color: #a9b1ba; font-size: 13px; cursor: default; }
.zijbalk .subkop { padding: 8px 22px 2px 26px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); }
.zijbalk hr.scheiding { border: 0; border-top: 1px dashed var(--rand); margin: 4px 22px 4px 32px; }
.zijbalk .menufout { padding: 8px 22px; font-size: 12px; color: #b23; }

/* E-mailvenster (WIN_FormEmails). */
.venster.emailvenster { max-width: min(1100px, 96vw); width: 96vw; height: 90vh; max-height: 90vh; display: flex; flex-direction: column; }
.emailromp { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.emailkop { display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; align-items: center; }
/* Zelfde veldstijl als .veldrij elders in Rela7. */
.emailkop input:not([type=checkbox]) {
    width: 100%; padding: 9px 12px; border: 1.5px solid var(--rand); border-radius: 10px;
    font-size: 15px; font-family: inherit; color: var(--tekst); background: var(--wit); }
.emailkop input:not([type=checkbox]):focus {
    outline: none; border-color: var(--merk-licht); box-shadow: 0 0 0 4px rgba(46,134,193,.14); }
.emailkop span.waarde { padding: 6px 2px; color: var(--tekst); font-size: 14px; }
.emailkop input[type=checkbox] { width: auto; margin: 0; }
.emailonderwerp { display: flex; gap: 14px; align-items: center; }
.emailonderwerp input { flex: 1; }
.emailonderwerp label.regel { display: flex; gap: 6px; align-items: center; white-space: nowrap; font-size: 13px; }
.emaileditor { flex: 1 1 auto; min-height: 200px; border: 1px solid var(--rand); border-radius: var(--straal); overflow: hidden; }
.emailbijlagen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.emailbijlagen .bijlage { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px;
    border: 1px solid var(--rand); border-radius: 14px; font-size: 13px; background: var(--vlak); }
.emailbijlagen .sluitknop.klein { font-size: 16px; padding: 0 6px; }

/* ---------- Postvak: mappen | mails boven, leesvenster onder (zoals Outlook) ---------- */

.postvak .kop { margin-bottom: 10px; }
.postvak-mapnaam { font-weight: 400; color: var(--zacht); font-size: .72em; margin-left: 8px; }
.postvak-zoek { display: flex; gap: 8px; align-items: stretch; }
.postvak-zoek input { width: 280px; padding: 7px 12px; border: 1.5px solid var(--rand); border-radius: 10px;
                      font-size: 14px; font-family: inherit; background: var(--wit); }
.postvak-zoek input:focus { outline: none; border-color: var(--merk-licht); box-shadow: 0 0 0 3px rgba(46,134,193,.12); }
.postvak-zoek .knop-rand { padding: 0 14px; }

.postvak-lint { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; background: var(--wit);
                border: 1px solid var(--rand); border-radius: var(--straal); padding: 4px 6px; margin-bottom: 10px; }
.lintknop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
            min-width: 76px; padding: 5px 9px; border: 0; background: none; border-radius: 6px; cursor: pointer;
            font: inherit; font-size: 12px; color: var(--tekst); }
.lintknop .ik { font-size: 18px; line-height: 1.1; color: var(--merk); }
.lintknop.groot { flex-direction: row; gap: 8px; font-size: 13px; font-weight: 600; padding: 5px 14px; color: var(--wit);
                  background: var(--merk); }
.lintknop.groot .ik { color: var(--wit); }
.lintknop.groot:hover { background: var(--merk-licht); }
.lintknop:not(.groot):hover:not(:disabled) { background: #eaf3fa; }
.lintknop:disabled { opacity: .38; cursor: default; }
.lintscheiding { width: 1px; background: var(--rand); margin: 4px 6px; }
.postvak-melding { flex: 0 0 auto; margin: 0 0 10px; cursor: pointer; }

.postvak-romp { flex: 1 1 auto; min-height: 0; display: flex; }
.postvak-mappen { flex: 0 0 230px; width: 230px; min-width: 150px; overflow: auto; background: var(--wit);
                  border: 1px solid var(--rand); border-radius: var(--straal); padding: 6px 0; user-select: none; }
.postvak-mapkop { padding: 6px 14px 8px; font-size: 12px; font-weight: 600; color: var(--zacht);
                  text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--rand); margin-bottom: 4px; }
.postvak-leeg { padding: 10px 14px; }
.postvak-map { display: flex; align-items: center; gap: 6px; padding: 5px 10px; cursor: pointer; font-size: 14px;
               border-left: 3px solid transparent; white-space: nowrap; }
.postvak-map:hover { background: #f0f6fb; }
.postvak-map.gekozen { background: #e3f0fa; border-left-color: var(--merk); }
.postvak-map.sleepdoel { background: #d4e8f7; outline: 2px dashed var(--merk-licht); outline-offset: -2px; }
.postvak-map .pijl { width: 12px; flex: 0 0 12px; text-align: center; color: var(--zacht); font-size: 13px; }
.postvak-map .mapikoon { font-size: 14px; width: 18px; text-align: center; }
.postvak-map .mapnaam { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.postvak-map .mapnaam.ongelezen { font-weight: 600; }
.postvak-map .mapteller { color: var(--merk); font-weight: 600; font-size: 13px; }

.splitser.staand { width: 12px; height: auto; cursor: col-resize; }
.splitser.staand::before { left: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 48px; }

.postvak-rechts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.postvak-lijst { flex: 1 1 40%; outline: none; }
.postvak-lijst:focus-visible { box-shadow: 0 0 0 3px rgba(46,134,193,.14); }
.postvak-raster td { padding: 6px 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.postvak-raster th { padding: 7px 10px; }
.postvak-raster th.ikonen, .postvak-raster td.ikonen { width: 44px; text-align: center; color: var(--zacht); }
.postvak-raster .belangrijk { color: var(--fout); font-weight: 700; margin-right: 4px; }
.postvak-raster tr.ongelezen td { font-weight: 600; }
.postvak-raster tr.ongelezen td.afzender { box-shadow: inset 3px 0 0 var(--merk-licht); color: var(--merk); }
.postvak-raster tr.ongelezen td.onderwerp { color: var(--merk); }
.postvak-raster td.datum { color: var(--zacht); }
.postvak-raster tr.ongelezen td.datum { color: var(--merk); }
.postvak-raster td.relatie code { font-size: 12px; }
.postvak-voet { flex: 0 0 auto; display: flex; justify-content: space-between; padding: 4px 4px 0; font-size: 13px; }

.postvak-lezen { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--straal); flex: 1 1 60%; }
.postvak-niets { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--zacht); font-size: 15px; }
.leeskop { flex: 0 0 auto; padding: 14px 20px 10px; border-bottom: 1px solid var(--rand); }
.leeskop h2 { margin: 0 0 10px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.leesafzender { display: flex; gap: 12px; align-items: flex-start; }
.avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; color: var(--wit); display: flex;
          align-items: center; justify-content: center; font-weight: 600; font-size: 15px; }
.leesgegevens { flex: 1; min-width: 0; }
.leesgegevens > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leesvan { font-size: 15px; }
.leesrechts { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.relatiechip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #eaf3fa; color: var(--merk);
               text-decoration: none; font-size: 12px; }
.relatiechip:hover { background: #d4e8f7; }
.leesbijlagen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bijlagechip { display: flex; align-items: center; gap: 8px; max-width: 280px; padding: 6px 10px; border: 1px solid var(--rand);
               border-radius: 8px; background: var(--wit); cursor: pointer; font: inherit; font-size: 13px; }
.bijlagechip:hover { border-color: var(--merk-licht); background: #f0f6fb; }
.bijlage-ext { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--wit); background: var(--merk); border-radius: 4px;
               padding: 3px 5px; }
.bijlage-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leesinhoud { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: var(--wit); }

.vensterromp-tekst { padding: 4px 22px 14px; }
.volle-breedte { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1.5px solid var(--rand); border-radius: 10px;
                 font: inherit; font-size: 14px; }
.postvak-kiesmap, .postvak-relaties { max-height: 50vh; overflow: auto; border: 1px solid var(--rand); border-radius: var(--straal);
                                     margin: 0 22px 12px; }
.postvak-relaties { margin: 8px 0 12px; max-height: 38vh; }
.postvak-relatie { padding: 6px 12px; cursor: pointer; font-size: 14px; border-left: 3px solid transparent; }
.postvak-relatie:hover { background: #f0f6fb; }
.postvak-relatie.gekozen { background: #e3f0fa; border-left-color: var(--merk); }

/* Postvak: venster E-mailregels */
.postvak-regels { max-height: 55vh; overflow: auto; border: 1px solid var(--rand); border-radius: var(--straal); margin-top: 8px; }
.postvak-regels .raster th { position: sticky; top: 0; background: var(--wit); z-index: 1; }

/* Activiteiten / Post (totaal overzicht): het IW-paneel vult de pagina. */
.totaaloverzicht > .paneel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: var(--straal); margin-top: 10px; }

/* Lijsten (Actielijst, Postboek, Offertelijst): selectie boven, lijst eronder, afdrukken via de browser. */
.lijstpagina { overflow: auto; }
.lijstselectie { border-radius: var(--straal); margin-bottom: 14px; max-width: 900px; }
.lijstselectie .keuzes { display: flex; gap: 18px; align-items: center; }
.lijstselectie .keuzes label.regel { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.lijstselectie .van-tot { display: flex; gap: 8px; }
.lijstselectie .van-tot input { width: 50%; padding: 9px 12px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; }
.afdrukkop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 4px 0 8px; }
.afdrukkop h2 { margin: 0; font-size: 18px; }
.afdrukkop span { font-size: 12px; color: var(--zacht); }
.lijsttabel td, .lijsttabel th { font-size: 12.5px; padding: 5px 8px; vertical-align: top; }
.lijsttabel tbody tr { cursor: default; }
.lijsttabel td.nw { white-space: nowrap; }
.lijsttabel tr.lijstextra td { border-top: 0; padding-top: 0; color: var(--zacht); }
.lijsttabel tr.lijstextra .memo { white-space: pre-wrap; }
.lijsttabel tfoot td { font-weight: 600; border-top: 2px solid var(--rand); }

@media print {
    @page { size: A4 landscape; margin: 12mm; }
    .topbar, .zijbalk, .geen-afdruk, #blazor-error-ui { display: none !important; }
    body, .app, .romp, main, .werkblad, .lijstpagina { display: block !important; height: auto !important; overflow: visible !important;
        background: #fff !important; padding: 0 !important; margin: 0 !important; }
    .lijsttabel { border: 0; }
    .lijsttabel thead { display: table-header-group; }
    .lijsttabel tr { page-break-inside: avoid; }
    .lijsttabel td, .lijsttabel th { font-size: 10px; padding: 3px 5px; }
}

/* Datum- en tijdvelden: altijd breed genoeg voor de datum/tijd plus het kalender- of klokicoon van de browser,
   zodat het icoon nooit over de waarde valt. Geldt overal (ook nieuwe schermen). */
input[type=date] { min-width: 150px; }
input[type=time] { min-width: 108px; }
input[type=datetime-local] { min-width: 215px; }
.iwvelden.acties { grid-template-columns: 245px 250px 190px minmax(260px, 1fr); }
.iwvelden.post { grid-template-columns: 245px 200px 220px 230px; }
.popupromp .veldraster input[type=time] { width: 108px; max-width: 108px; }
.veldrij input.half[type=date] { max-width: none; width: 170px; }

/* ---------- Agenda (WIN_Agenda) in de stijl van de Outlook-agenda ---------- */
.agenda { gap: 10px; }
.agenda-lint { margin-bottom: 0; }
.agenda-lint .lintknop.aan { background: #e2edf6; box-shadow: inset 0 -3px 0 var(--merk); }
.agenda-activiteiten { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: var(--straal); }
.agenda-romp { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 14px; }
.agenda-romp.met-tedoen { grid-template-columns: 224px minmax(0, 1fr) 250px; }

/* links: twee maandkalenders en "Mijn agenda's" */
.agenda-links { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.minikalender { padding: 2px 4px; }
.minikop { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; font-weight: 600; font-size: 13px; margin-bottom: 4px; text-align: center; }
.minikop span { text-transform: capitalize; }
.minikop .knop-plat { padding: 0; font-size: 18px; line-height: 1; }
.minidagen { display: grid; grid-template-columns: 22px repeat(7, 1fr); gap: 1px; }
.minidagnaam { font-size: 10px; color: var(--zacht); text-align: center; text-transform: uppercase; padding-bottom: 2px; }
.miniweek { font-size: 9px; color: #b4bfc9; text-align: right; padding: 5px 4px 0 0; }
.minidag { border: 0; background: none; font: inherit; font-size: 12px; padding: 3px 0; border-radius: 4px; cursor: pointer; color: var(--tekst); }
.minidag:hover { background: #eef4f9; }
.minidag.anders { color: #b4bfc9; }
.minidag.inperiode { background: #dfeaf5; }
.minidag.vandaag { background: var(--merk); color: #fff; font-weight: 700; border-radius: 50%; }
.agenda-blok { border-top: 1px solid var(--rand); padding-top: 8px; }
.agenda-bloktitel { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--tekst); margin-bottom: 4px; }
.agenda-bloktitel label.regel { display: flex; gap: 4px; align-items: center; font-weight: 400; font-size: 12px; color: var(--zacht); }
.agenda-mdw { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 4px; cursor: pointer; border-radius: 4px; }
.agenda-mdw:hover { background: #f0f6fb; }
.agenda-mdw input { width: 15px; height: 15px; margin: 0; }
.agenda-mdw .mdwnaam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* midden */
.agenda-hoofd { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.agenda-balk { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.agenda-balk .pijl { font-size: 22px; line-height: 1; padding: 0 8px; }
.agenda-periode { font-size: 18px; font-weight: 600; margin: 0 10px 0 6px; }
.agenda-periode::first-letter { text-transform: uppercase; }
.agenda-melding { margin: 0 0 8px; cursor: pointer; }

.agenda-raster { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--wit);
    border: 1px solid var(--rand); border-radius: var(--straal); overflow: hidden; }
.rasterkop, .rasterheledag, .rasterromp { display: grid; grid-template-columns: 58px repeat(var(--dagen), minmax(0, 1fr)); }
.rasterkop { border-bottom: 1px solid var(--rand); padding-right: var(--schuifbalk, 0); }
.dagkop { padding: 8px 10px 6px; border-left: 1px solid #e6ebf0; display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.dagkop:hover { background: #f5f9fc; }
.dagkop .dagnr { font-size: 22px; font-weight: 300; line-height: 1; }
.dagkop .dagnaam { font-size: 12px; color: var(--zacht); }
.dagkop.vandaag .dagnr { font-weight: 600; color: var(--merk); }
.dagkop.vandaag { box-shadow: inset 0 3px 0 var(--merk); }
.rasterheledag { border-bottom: 1px solid var(--rand); }
.heledag { border-left: 1px solid #e6ebf0; padding: 3px; display: flex; flex-direction: column; gap: 2px; min-height: 26px; }
.rasterromp { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; user-select: none; touch-action: none; }
.tijdkolom .uur { height: 48px; position: relative; }
.tijdkolom .uur span { position: absolute; top: -7px; right: 8px; font-size: 11px; color: var(--zacht); }
.dagkolom { position: relative; border-left: 1px solid #e6ebf0; }
.halfuur { height: 24px; border-top: 1px solid #e6ebf0; }
.halfuur.tweede { border-top: 1px dotted #eef1f4; }
.halfuur.buiten { background: #f6f8fa; }
.dagkolom.vandaag .halfuur:not(.buiten) { background: #fbfdff; }
.selectievak { position: absolute; left: 1px; right: 1px; background: rgba(46,134,193,.18); border: 1px solid var(--merk-licht);
    border-radius: 3px; font-size: 11px; color: var(--merk); padding: 2px 5px; pointer-events: none; z-index: 1; }
.nulijn { position: absolute; left: 0; right: 0; height: 2px; background: #d13438; z-index: 3; pointer-events: none; }
.nulijn::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #d13438; }

.afspraak { position: absolute; overflow: hidden; border-radius: 4px; padding: 3px 7px 4px; font-size: 12px; line-height: 1.3;
    background: color-mix(in srgb, var(--kl) 20%, white); border-left: 4px solid var(--kl); color: #1f2d3a; cursor: default;
    display: flex; flex-direction: column; z-index: 2; }
.afspraak:hover { background: color-mix(in srgb, var(--kl) 30%, white); }
.afspraak .titel { font-weight: 600; }
.afspraak .plaats, .afspraak .tijd, .afspraak .opm { font-size: 11px; color: #4d5b69; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afspraak.kort { flex-direction: row; gap: 6px; align-items: center; padding-top: 1px; }
.afspraak.kort .plaats, .afspraak.kort .opm { display: none; }
.afspraak .rekgreep { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.afspraak.af, .maanditem.af { opacity: .6; }
.afspraak.af .titel { text-decoration: line-through; }
.afspraak.gekozen, .maanditem.gekozen { box-shadow: 0 0 0 2px var(--merk), 0 4px 12px rgba(0,0,0,.15); z-index: 4; }
.afspraak.wordt-verplaatst { opacity: .35; }
.afspraak.spook { opacity: .9; z-index: 5; box-shadow: 0 6px 16px rgba(0,0,0,.2); pointer-events: none; }
.afspraak.sleept { z-index: 5; }

/* maand */
.agenda-maand { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto; grid-auto-rows: minmax(100px, 1fr); background: var(--wit); border: 1px solid var(--rand); border-radius: var(--straal); }
.maandkop { padding: 6px 8px; font-size: 12px; color: var(--zacht); border-bottom: 1px solid var(--rand); }
.maandcel { border-right: 1px solid #e6ebf0; border-bottom: 1px solid #e6ebf0; padding: 3px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.maandcel.anders { background: #f8f9fb; }
.maandcel.anders .maanddag { color: #b4bfc9; }
.maandcel.vandaag { box-shadow: inset 0 3px 0 var(--merk); }
.maandcel.vandaag .maanddag { color: var(--merk); font-weight: 700; }
.maanddag { align-self: flex-start; border: 0; background: none; font: inherit; font-size: 12px; padding: 1px 4px; cursor: pointer; }
.maanditem { font-size: 11.5px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: color-mix(in srgb, var(--kl) 20%, white); border-left: 3px solid var(--kl); cursor: pointer; }
.maanditem .tijd { color: #4d5b69; margin-right: 4px; }
.maandcel .meer { font-size: 11px; color: var(--merk); cursor: pointer; }

/* rechts: te doen (de Outlook "To Do"-balk) */
.agenda-tedoen { display: flex; flex-direction: column; min-height: 0; background: var(--wit); border: 1px solid var(--rand);
    border-radius: var(--straal); padding: 10px; }
.agenda-tedoenlijst { flex: 1 1 auto; overflow: auto; }
.tedoenregel { display: flex; flex-direction: column; gap: 2px; padding: 7px 6px; border-bottom: 1px solid #eef1f4; font-size: 13px; }
.tedoenregel:hover { background: #f5f9fc; }
.tedoen-titel { font-weight: 600; }
.tedoen-knoppen { display: none; gap: 8px; }
.tedoenregel:hover .tedoen-knoppen { display: flex; }
.tedoen-knoppen .knop-plat { font-size: 12px; padding: 0; color: var(--merk); }

/* details (peek) */
.agenda-peekvlak { position: fixed; inset: 0; z-index: 40; }
.agenda-peek { position: fixed; z-index: 41; width: 340px; max-height: 70vh; overflow: auto; background: var(--wit); border-radius: 8px;
    box-shadow: 0 10px 32px rgba(0,0,0,.22); padding: 16px 18px 14px; font-size: 13px; }
.agenda-peek .peek-balk { position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--kl); border-radius: 8px 8px 0 0; }
.agenda-peek .sluitknop { position: absolute; right: 8px; top: 8px; }
.agenda-peek h3 { margin: 4px 24px 8px 0; font-size: 16px; }
.peek-regel { margin: 3px 0; }
.peek-tekst { margin-top: 8px; }
.peek-tekst.memo { white-space: pre-wrap; color: #4d5b69; max-height: 160px; overflow: auto; }
.peek-knoppen { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 1100px) { .agenda-romp, .agenda-romp.met-tedoen { grid-template-columns: minmax(0, 1fr); } .agenda-links, .agenda-tedoen { display: none; } }

/* ---------- Koppel zoeknamen ---------- */
/* De boom links van de relatielijst (selector), en rechts in het koppelvenster. */
.werkblad.metboom { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; }
.werkbladinhoud { display: flex; flex-direction: column; min-height: 0; }
.koppelselector { display: flex; flex-direction: column; min-height: 0; background: var(--wit); border: 1px solid var(--rand);
    border-radius: var(--straal); padding: 10px; }
.koppelboom { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1 1 auto; }
.koppelboom .boomzoek { padding: 7px 10px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; font-size: 13px; }
.koppelboom .boom { flex: 1 1 auto; overflow: auto; min-height: 60px; }
.boomregel { display: flex; align-items: center; gap: 3px; padding: 2px 3px; border-radius: 5px; font-size: 12.5px; white-space: nowrap; }
.boomregel:hover { background: #f0f6fb; }
.boomregel.gekozen { background: #e3f0fa; box-shadow: inset 3px 0 0 var(--merk); }
.boompijl { width: 14px; flex: 0 0 14px; text-align: center; cursor: pointer; color: var(--zacht); }
.boompijl.leeg { cursor: default; }
.boomnaam { cursor: pointer; padding: 1px 5px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; }
.boomnaam .rustig { font-size: 11.5px; }

/* Het venster "Muteren gekoppelde relaties" (WIN_KoppelZoeknaam). */
.venster.koppelvenster { max-width: 1180px; width: 96vw; }
.koppelromp { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; }
.koppellinks { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.koppelkader { background: var(--merk); color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; margin-top: 6px; }
.koppeltabel { max-height: 230px; overflow: auto; border: 1px solid var(--rand); border-radius: var(--straal); }
.koppeltabel .raster { border: 0; border-radius: 0; }
.koppeltabel .raster thead th { position: sticky; top: 0; background: var(--wit); z-index: 1; }
.koppelrechts { border-left: 1px solid var(--rand); padding-left: 12px; display: flex; min-height: 0; }
.koppelzoekresultaat { max-height: 48vh; overflow: auto; margin-top: 10px; }
.koppelzoekregel { display: flex; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.koppelzoekregel:hover { background: #f0f6fb; }
@media (max-width: 900px) { .werkblad.metboom { grid-template-columns: 1fr; } .koppelselector { display: none; } .koppelromp { grid-template-columns: 1fr; } }

.knoppenbalk .knop-rand.aan { background: #e2edf6; border-color: var(--merk-licht); color: var(--merk); }
.koppelboom .boomknoppen { display: flex; gap: 10px; }
.koppelboom .boomknoppen .knop-plat { font-size: 12px; padding: 0; color: var(--merk); }
/* De naam achter de zoeknaam volgt de statuskleur van de regel (anders grijs op een gekleurde achtergrond). */
.boomnaam .rustig { color: inherit; opacity: .8; }

/* ---- Projecten (IW_Projecten en WIN_MuterenProjecten) ---- */
.iwvelden.projecten { grid-template-columns: repeat(4, minmax(210px, 1fr)); }
.iwvelden.projecten > label { grid-template-columns: 96px minmax(0, 1fr); }

.detailvak.projectdetail { padding: 10px 14px; gap: 2px; overflow-y: auto; }
.detailvak.projectdetail .veldrij { margin: 0; }

.venster.projectvenster { max-width: 980px; height: min(92vh, 940px); }
.venster.projectvenster .vensterromp { flex: 1; min-height: 0; overflow-y: auto; }
.projectindeling { display: grid; grid-template-columns: 1fr 210px; gap: 20px; }
.projectvinkjes { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; font-size: 14px; }
.projectvinkjes label.regel { display: flex; align-items: center; gap: 8px; }
.projectvinkjes .kadertitel { margin-top: 10px; }
.projectvinkjes .veldrij { grid-template-columns: 96px minmax(0, 1fr); margin: 0; }
.memoveld.projectmemo { min-height: 120px; margin: 4px 0 10px; }
.venster.projectvenster .veldrij input.kort { max-width: 110px; }