/* Lexavia — basisopmaak. Compact: het scherm moet veel tegelijk tonen (01-doel-en-afbakening). */
[hidden] { display: none !important; }
:root {
  --balk: #1c2b4a;
  --balk-tekst: #f3f1ea;
  --accent: #b8975a;
  --tekst: #1d2433;
  --zacht: #5d6678;
  --lijn: #d9dde5;
  --vlak: #ffffff;
  --achtergrond: #f4f5f8;
  --fout: #a8323e;
  --goed: #2f7a4d;
  --let-op: #8a5a00;
  /* afgeleide waarden: huisstijl.css zet vooral deze variabelen */
  --link: #24477f;
  --knop: var(--balk);
  --knop-tekst: #fff;
  --kop-vlak: #fafbfc;          /* kolomtitels van tabellen, kalenderkoppen */
  --lijn-zacht: #eef0f4;        /* lijnen tussen rijen */
  --invoer-rand: #c3c9d4;
  --invoer-vlak: #fff;
  --focus: #9db4dd;
  --focus-rand: #6d8fca;
  --hover: #f3f6fb;
  --gekozen: #e6eefb;
  --actief-rij: #d6e3f8;
  --info-vlak: #eef3fa;
  --info-rand: #c9d8ee;
  --label-vlak: #e8ebf1;
  --vandaag-vlak: #fff9e8;
  --map-vlak: #f7f8fa;
  --accent-vlak: #fbf7ee;
  --zacht-2: #8a92a3;
  --zebra: transparent;
  --r: 4px;
  --r-groot: 6px;
  --schaduw: none;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-titel: var(--font);
  --font-merk: Georgia, "Times New Roman", serif;
  --balk-hoogte: 46px;
}
* { box-sizing: border-box; }
html { font-size: 14px; }
body { margin: 0; font-family: var(--font);
       color: var(--tekst); background: var(--achtergrond); line-height: 1.4; }
a { color: var(--link); }

.balk { display: flex; align-items: center; gap: 1.5rem; background: var(--balk); color: var(--balk-tekst);
        padding: 0 1rem; height: var(--balk-hoogte); }
.balk .merk { font-family: var(--font-merk); letter-spacing: .18em; font-size: 1.25rem;
              color: var(--balk-tekst); text-decoration: none; white-space: nowrap; }
.balk .merk span { color: var(--accent); }
.balk nav { display: flex; gap: 1.1rem; flex: 1; overflow-x: auto; }
.balk nav a { color: var(--balk-tekst); text-decoration: none; opacity: .85; white-space: nowrap; }
.balk nav a:hover, .balk nav a.actief { opacity: 1; border-bottom: 2px solid var(--accent); }
.balk nav a.later { opacity: .4; pointer-events: none; }
.balk .wie { white-space: nowrap; font-size: .9rem; opacity: .9; }
.balk .wie form { display: inline; }
.balk .wie .gebruiker-link { color: var(--balk-tekst); text-decoration: none; }
.balk .wie .gebruiker-link:hover { text-decoration: underline; }
.balk .wie button { background: none; border: 1px solid rgba(255,255,255,.35); color: var(--balk-tekst);
                    border-radius: var(--r); padding: .15rem .5rem; cursor: pointer; margin-left: .5rem; }

main { padding: 1rem; max-width: 1400px; margin: 0 auto; }
h1 { font-family: var(--font-titel); font-size: 1.35rem; margin: .2rem 0 1rem; font-weight: 600; }
h2 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; color: var(--zacht); font-weight: 600; }

.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--schaduw); }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .4rem 1.5rem; }
.veld { display: flex; flex-direction: column; padding: .25rem 0; border-bottom: 1px solid var(--lijn-zacht); }
.veld .label { font-size: .8rem; color: var(--zacht); }
.veld .waarde:empty::after { content: "—"; color: #b5bbc6; }

.meldingen { list-style: none; padding: 0; margin: 0 0 1rem; }
.meldingen li { padding: .5rem .8rem; border-radius: var(--r); margin-bottom: .4rem; background: #e7f2ea; color: var(--goed); }
.meldingen li.error { background: #f8e6e8; color: var(--fout); }

form p { margin: .4rem 0; }
label { display: block; font-size: .85rem; color: var(--zacht); margin-bottom: .15rem; }
input[type=text], input[type=email], input[type=url], input[type=password], input[type=number], input[type=date],
textarea, select { width: 100%; max-width: 520px; padding: .4rem .5rem; border: 1px solid var(--_rand, var(--veld-rand));
                   border-radius: var(--r); font: inherit; background: var(--_vlak, var(--invoer-vlak)); color: inherit;
                   box-shadow: var(--_streep, none); transition: border-color .12s, box-shadow .12s; }
textarea { max-width: 780px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--focus); border-color: var(--focus-rand); }
.errorlist { color: var(--fout); margin: .2rem 0; padding-left: 1rem; font-size: .85rem; }
.knop { display: inline-block; background: var(--knop); color: var(--knop-tekst); border: 0; border-radius: var(--r);
        padding: .45rem .9rem; font: inherit; cursor: pointer; text-decoration: none; }
.knop.licht { background: var(--vlak); color: var(--knop); border: 1px solid var(--knop); }
.acties { display: flex; gap: .5rem; margin-top: 1rem; }

.aanmelden { max-width: 380px; margin: 9vh auto; }
.aanmelden .merk { font-family: Georgia, serif; letter-spacing: .2em; font-size: 1.8rem; text-align: center;
                   color: var(--balk); margin-bottom: 1.2rem; }
.aanmelden .merk span { color: var(--accent); }
.aanmelden input { max-width: none; }
.voetnoot { color: var(--zacht); font-size: .8rem; text-align: center; margin-top: 1rem; }

/* ---------- fase 1: lijsten, fiches, documenten ---------- */
.kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kop h1 { margin-bottom: .6rem; }
.ref { color: var(--accent); font-weight: 700; margin-right: .3rem; }
.filters { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.filters input[type=search] { max-width: 420px; }
.filters select { width: auto; }
.vinkje { display: flex; gap: .3rem; align-items: center; margin: 0; color: var(--tekst); font-size: .9rem; }
input[type=search] { width: 100%; padding: .4rem .5rem; border: 1px solid var(--_rand, var(--veld-rand)); border-radius: var(--r); font: inherit; background: var(--_vlak, var(--invoer-vlak)); color: inherit; box-shadow: var(--_streep, none); }

table.lijst { width: 100%; border-collapse: collapse; background: var(--vlak); font-size: .93rem; }
.kaart > table.lijst { background: none; }
#rijen table.lijst { border: 1px solid var(--lijn); }
table.lijst th { text-align: left; font-weight: 600; color: var(--zacht); font-size: .8rem; padding: .35rem .5rem;
                 border-bottom: 1px solid var(--lijn); background: var(--kop-vlak); white-space: nowrap; }
table.lijst td { padding: .3rem .5rem; border-bottom: 1px solid var(--lijn-zacht); vertical-align: top; }
:where(table.lijst tbody tr:nth-child(even)) { background: var(--zebra); }
table.lijst tbody tr:hover { background: var(--hover); cursor: pointer; }
table.lijst td a { text-decoration: none; }
td.icoon { width: 1.6rem; text-align: center; }
.klein { font-size: .85rem; color: var(--zacht); }
.leeg { color: var(--zacht-2); font-style: italic; }
.paginering { color: var(--zacht); font-size: .85rem; }

.label { display: inline-block; font-size: .75rem; padding: .05rem .45rem; border-radius: 10px; background: var(--label-vlak);
         color: var(--tekst); font-weight: 500; vertical-align: middle; }
.fase-intake { background: #efe6ff; } .fase-lopend { background: #dff0e4; } .fase-beraad { background: #fff1d6; }
.fase-vonnis { background: #ffe3cf; } .fase-uitvoering { background: #dbeaf7; } .fase-afgesloten, .fase-archief { background: #e5e5e5; color: #666; }

.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--lijn); margin-bottom: .8rem; overflow-x: auto; }
.tabs a { padding: .45rem .9rem; text-decoration: none; color: var(--zacht); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.actief { color: var(--tekst); border-bottom-color: var(--accent); font-weight: 600; }
.tabs a.later { opacity: .4; pointer-events: none; }

.twee-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.twee-kolommen.breed-links { grid-template-columns: 2fr 1fr; }
.twee-kolommen .kaart { margin: 0; }
.kernpunten { background: var(--accent-vlak); border-left: 3px solid var(--accent); padding: .5rem .8rem; margin-bottom: .6rem; }
.voetnoot.links { text-align: left; }
.knopje { background: none; border: 0; color: #9aa1ae; cursor: pointer; font-size: .9rem; }
.knopje:hover { color: var(--fout); }
form.smal p { margin: .35rem 0; }
form.smal input, form.smal select { max-width: none; }

.formulier-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .3rem 1.2rem; }
.formulier-raster .breed { grid-column: 1 / -1; }
.formulier-raster input[type=checkbox] { width: auto; }
.hulp { display: block; color: var(--zacht-2); font-size: .78rem; }

.documenten { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.documenten .kaart { margin: 0; }
.balkje { display: flex; gap: .6rem; align-items: center; margin-bottom: .5rem; }
.maprij td { background: var(--map-vlak); }
.stukrij.gekozen td { background: var(--gekozen); }
details.toevoegen { margin-top: .8rem; }
details.toevoegen summary { cursor: pointer; color: var(--link); }
.voorbeeldpaneel { position: sticky; top: .5rem; min-height: 300px; }
.voorbeeldkop { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.voorbeeldkop .acties { margin-top: .3rem; }
.voorbeeldvenster { width: 100%; height: 75vh; border: 1px solid var(--lijn); border-radius: var(--r); }
.voorbeeldbeeld { max-width: 100%; border: 1px solid var(--lijn); }
.voorbeeldtekst { white-space: pre-wrap; font-size: .85rem; max-height: 75vh; overflow: auto; background: var(--kop-vlak); padding: .6rem; }
/* Documentenbeheer: leesvenster versleepbaar, rechts of onder */
#documenten.documenten { grid-template-columns: minmax(0, var(--lijst, 60%)) 6px minmax(0, 1fr); gap: .4rem; }
#documenten.onder { grid-template-columns: 1fr; }
#documenten.onder .lijstpaneel { max-height: calc(var(--lijst, 45%) * 0.01 * 100vh); overflow: auto; }
#documenten.onder .voorbeeldpaneel { position: static; }
.doc-splitser { align-self: stretch; cursor: col-resize; border-radius: 3px; background: transparent; min-height: 300px; }
.doc-splitser:hover { background: var(--lijn); }
#documenten.onder .doc-splitser { cursor: row-resize; min-height: 6px; height: 6px; }
.doc-weergave { margin-left: auto; }
.doc-weergave .aan { color: var(--accent); }
.doclijst tr.stukrij { cursor: default; user-select: none; }
.stukrij.actief td { background: var(--actief-rij); }
.maprij.erover td, .doc-sleepvak.erover, .lijstpaneel.erover { outline: 2px dashed var(--accent); background: var(--accent-vlak); }
.klapper { border: 0; background: none; cursor: pointer; padding: 0 .2rem; color: #6b7385; }
.doclijst .uur { color: var(--zacht-2); font-size: .9em; }
.stuknr[data-stuknummer-url] { cursor: text; min-width: 2.5em; }
.stuknr-invoer { width: 3.5em; font-size: .85rem; padding: 0 .2rem; }
.keuzebalk { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .3rem .5rem; margin-bottom: .4rem; background: var(--info-vlak); border-radius: var(--r); }
.doc-sleepvak { margin-top: .6rem; padding: .4rem .6rem; border-radius: var(--r); }
.voorbeeldword { max-height: 75vh; overflow: auto; background: #fff; border: 1px solid var(--lijn); padding: .8rem 1.2rem; font-size: .9rem; }
.voorbeeldword img { max-width: 100%; height: auto; }
.voorbeeldword table.word-tabel { border-collapse: collapse; margin: .4rem 0; }
.voorbeeldword table.word-tabel td { border: 1px solid var(--lijn); padding: .2rem .4rem; vertical-align: top; }
.voorbeeldword p { margin: .2rem 0; }
.melding.fout-rand { padding: .4rem .7rem; border-radius: var(--r); margin: .3rem 0; background: #f8e6e8; border: 1px solid #e3b5bb; color: var(--fout); font-size: .85rem; }
.lx-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; background: var(--link); color: #fff; padding: .5rem .9rem; border-radius: var(--r-groot); box-shadow: 0 2px 8px rgba(0,0,0,.2); max-width: 30rem; }
.lx-toast.fout { background: var(--fout); }
/* als popover (scherm.js) staat de melding in de top layer, boven elk open venster; de standaardopmaak van een popover weg */
.lx-toast[popover] { inset: auto 1rem 1rem auto; margin: 0; border: 0; overflow: visible; color: #fff; }
.niet-kiesbaar { color: #a0a6b3; }

@media (max-width: 900px) {
  .twee-kolommen, .twee-kolommen.breed-links, .documenten, #documenten.documenten { grid-template-columns: 1fr; }
  .doc-splitser { display: none; }
  .voorbeeldpaneel { position: static; }
}

.omgevingsband { background: #f2c94c; color: #3d2f00; text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .08em; padding: .15rem; }

/* ---------- fase 2: agenda, termijnen, prestaties ---------- */
.teller { display: inline-block; min-width: 1.3em; padding: 0 .3em; border-radius: 9px; background: var(--fout);
          color: #fff; font-size: .72rem; text-align: center; line-height: 1.3em; }
.status { border: 0; border-radius: 10px; padding: .1rem .55rem; font-size: .78rem; font-weight: 600; cursor: pointer; }
.status-open { background: #f6d5d8; color: #8c1c28; }
.status-voorbereiding { background: #fde3bf; color: #7a4a00; }
.status-ok { background: #d5ecdc; color: #1f6a3a; }
.vinkjes label { display: inline-flex; gap: .15rem; align-items: center; margin: 0 .4rem 0 0; color: var(--tekst); font-size: .8rem; }
.vinkjes input { width: auto; }
tr.te-laat td { background: #fff3f3; }
tr.voorbij td, tr.klaar td { color: #9aa1ae; }
tr.klaar td:nth-child(3) { text-decoration: line-through; }
.nowrap { white-space: nowrap; }
.r { text-align: right; }
.kop.klein-kop h2 { margin: 0; }
.formveld.vinkveld { align-self: end; }
.formveld .vinkje input, label.vinkje input { width: auto; }
.bevestigen { background: #fff4d6; border: 1px solid #f2c94c; border-radius: var(--r); padding: .4rem .6rem; }
.agenda-tab .twee-kolommen { margin-top: 1rem; }
.te-laat-kaart { border-color: #e7a3aa; }
.te-laat-kaart h2 { color: var(--fout); }
.dag.vandaag { border-left: 4px solid var(--accent); }
.totalen { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: end; background: var(--vlak); border: 1px solid var(--lijn);
           border-radius: var(--r-groot); padding: .6rem 1rem; margin-bottom: .8rem; }
.totalen > div { display: flex; flex-direction: column; }
.totalen .label { background: none; padding: 0; color: var(--zacht); font-size: .75rem; }
.totalen strong { font-size: 1.1rem; }
.snelknoppen { margin: 0 0 .6rem; }
.snelformulier > summary { cursor: pointer; font-weight: 600; margin-bottom: .4rem; }
.snelformulier:not([open]) { display: none; }
tr.niet-factureren td { color: #9aa1ae; }
.kalender { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: start; }
.kalender-tabs { display: flex; flex-direction: column; gap: .2rem; position: sticky; top: .5rem; }
.kalender-tabs a { padding: .45rem .7rem; border-left: 3px solid transparent; text-decoration: none; color: var(--zacht);
                   background: var(--vlak); border-radius: 0 4px 4px 0; }
.kalender-tabs a:hover { border-left-color: var(--accent); color: var(--tekst); }
.kalender section { padding-bottom: .6rem; border-bottom: 1px solid var(--lijn-zacht); margin-bottom: .6rem; }
table.invoer input { max-width: none; }
table.invoer tbody tr:hover { background: none; cursor: default; }
@media (max-width: 900px) { .kalender { grid-template-columns: 1fr; } .kalender-tabs { flex-direction: row; position: static; } }

/* ---------- fase 3: facturatie ---------- */
.factuur-concept { background: var(--label-vlak); color: var(--zacht); }
.factuur-geboekt { background: #fde3bf; color: #7a4a00; }
.factuur-betaald { background: #d5ecdc; color: #1f6a3a; }
.factuur-scherm { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; align-items: start; }
.factuur-scherm .kaart { margin-bottom: 1rem; }
@media (max-width: 900px) { .factuur-scherm { grid-template-columns: 1fr; } }
.veld .label { background: none; padding: 0; border-radius: 0; display: block; font-weight: 400; }
table.posten input, table.posten select { min-width: 0; padding: .25rem .3rem; font-size: .85rem; }
table.posten td { padding: .2rem .25rem; }

/* ---------- fase 4: triage ---------- */
form.inline { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.sleepvak { display: flex; gap: .8rem; align-items: center; border: 2px dashed var(--invoer-rand); background: var(--kop-vlak); }
.sleepvak.erover { border-color: var(--accent); background: var(--accent-vlak); }
.inbox { display: grid; grid-template-columns: 220px minmax(0, 2fr) minmax(0, 3fr); gap: .8rem; align-items: start; }
.inbox .kaart { margin: 0; }
.ib-box { padding: .2rem 0; font-size: .85rem; word-break: break-all; }
.ib-vast { display: flex; flex-direction: column; margin-top: .6rem; }
.ib-vast a { padding: .25rem .4rem; text-decoration: none; color: var(--tekst); border-radius: var(--r); }
.ib-vast a.actief { background: var(--gekozen); font-weight: 600; }
.ib-filter { display: flex; gap: .3rem; margin-bottom: .5rem; }
.ib-filter button { border: 1px solid var(--lijn); background: var(--vlak); border-radius: var(--r); padding: .2rem .6rem; cursor: pointer; }
.ib-filter button.actief { background: var(--knop); color: var(--knop-tekst); }
.ib-mail { position: relative; padding: .4rem .5rem .4rem .8rem; border-bottom: 1px solid var(--lijn-zacht); cursor: pointer; }
.ib-mail:hover { background: var(--hover); } .ib-mail.gekozen { background: var(--gekozen); } .ib-mail.ongelezen .ib-r2 { font-weight: 700; }
.ib-r1 { display: flex; justify-content: space-between; gap: .4rem; }
.ib-streep { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.ib-streep.groen { background: #2f9e5a; } .ib-streep.geel { background: #e8b400; } .ib-streep.rood { background: #c93a48; } .ib-streep.paars { background: #7b4bb8; }
.ib-dossier { margin: .6rem 0; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ib-dossier input { max-width: 10em; }
.ib-knoppen { flex-wrap: wrap; }
.ib-dialoog { border: 1px solid var(--lijn); border-radius: 8px; width: min(640px, 95vw); }
.ib-dialoog input, .ib-dialoog textarea { max-width: none; }
@media (max-width: 1000px) { .inbox { grid-template-columns: 1fr; } }

/* Lexavia Agent */
.melding.info { padding: .5rem .8rem; border-radius: var(--r); margin-bottom: .5rem; background: var(--info-vlak); border: 1px solid var(--info-rand); display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.sleutel { font-family: ui-monospace, Menlo, monospace; font-size: 1rem; padding: .5rem .7rem; background: #fff8dc; border: 1px dashed #c9a400; border-radius: var(--r); user-select: all; word-break: break-all; }
.voorbeeldkop .acties { display: flex; flex-wrap: wrap; gap: .3rem; }
.voorbeeldkop .acties .knop { white-space: nowrap; padding: .3rem .6rem; }
/* AI */
dialog.ai { width: min(1200px, 96vw); max-height: 94vh; padding: 0; border: 1px solid #ccd; border-radius: var(--r-groot); }
dialog.ai::backdrop { background: rgba(20, 30, 50, .35); }
.ai-venster { padding: .8rem 1rem; }
.ai-kop { display: flex; justify-content: space-between; align-items: center; }
.ai-kop h2 { margin: 0 0 .5rem; }
.ai-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ai-raster label { display: block; margin-bottom: .5rem; }
.ai-raster textarea, .ai-uitkomst textarea, .ai-raster select, .ai-uitkomst input[name=kop] { width: 100%; box-sizing: border-box; }
.ai-bronnen .lijstje { max-height: 300px; overflow: auto; border: 1px solid #e3e6ea; border-radius: var(--r); padding: .3rem .5rem; }
.ai-bronnen .bron { display: block; padding: .15rem 0; font-size: .9rem; }
.ai-bronnen .bron.recent { background: #e3f6e5; }
.ai-bronnen .groep { margin: .3rem 0 .1rem; font-weight: 600; }
.ai-uitkomst { margin-top: .8rem; border-top: 1px solid #e3e6ea; padding-top: .6rem; }
.ai-tekst { font-family: inherit; font-size: .95rem; line-height: 1.45; }
.ontwerpbalk { background: #b3261e; color: #fff; padding: .2rem .6rem; border-radius: 3px; font-size: .85rem; margin-bottom: .4rem; display: inline-block; }
.ai-wacht { margin-top: .8rem; padding: .7rem .8rem; background: var(--info-vlak); border-radius: var(--r); }
.draaier { display: inline-block; width: 12px; height: 12px; border: 2px solid #99a; border-top-color: transparent; border-radius: 50%; animation: draai 1s linear infinite; vertical-align: middle; }
@keyframes draai { to { transform: rotate(360deg); } }
.htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.ai-index .knopje { min-width: 1.6em; }
.ai-index .knopje.aan { background: var(--info-vlak); }
.ai-knoppen { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
p.goed { color: var(--goed); } p.fout { color: var(--fout); }
.ai-uitkomst .ai-tekst { width: 100%; max-width: none; }
.ai-raster label > select[size] { display: block; width: 100%; }
.kb-keuze { display: inline-flex; align-items: center; gap: .3rem; margin-left: .6rem; }
.kb-keuze select { max-width: 320px; }
.knopje.kb.aan { background: #c0392b; color: #fff; border-color: #c0392b; }
.ai-gelezen { text-decoration: none; font-size: .8rem; color: #889; margin-left: .15rem; }
.ai-gelezen.nakijken { color: #b3261e; font-weight: 700; }
.nakijken .voorbeeldvenster { height: 75vh; }
.ai-index { white-space: nowrap; }
/* Nieuwe mail / brief / document */
.doc-balk { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.gesplitst { display: inline-flex; }
.gesplitst .knop:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gesplitst .knop.ai { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255,255,255,.35); padding-left: .5rem; padding-right: .5rem; }
.knop.donker { background: #1d2b4a; color: #fff; border-color: #1d2b4a; }
.op-venster { padding: .8rem 1.1rem; }
.op-venster h3 { color: #1f4e9a; border-bottom: 2px solid #1f4e9a; padding-bottom: .2rem; margin: 1rem 0 .5rem; font-size: 1rem; }
.op-venster label { display: block; margin: .35rem 0; }
.op-venster input:not([type=checkbox]):not([type=radio]), .op-venster select, .op-venster textarea { width: 100%; box-sizing: border-box; }
.op-venster label.radio { margin: .15rem 0; }
.op-venster .kaartje { border: 1px solid #e3e6ea; border-radius: var(--r-groot); padding: .6rem .8rem; }
.op-venster .kaartje.verplicht { border: 2px solid #e67e22; background: #fff8ef; }
.label.verplicht { background: #e67e22; color: #fff; } .label.nakijken { background: #1f4e9a; color: #fff; }
.op-samenvatting .chip { display: inline-block; padding: .1rem .5rem; border-radius: 10px; font-size: .85rem; margin-right: .3rem; }
.chip.aan { background: #e3edf9; } .chip.cc { background: #e3f6e5; } .chip.bcc { background: #eee; }
.op-ontvanger { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .5rem; border: 1px solid #e3e6ea; border-left: 3px solid #c9d3e0; border-radius: 5px; padding: .35rem .6rem; margin: .3rem 0; }
.op-knoppen button { border: 1px solid #ccd; background: var(--vlak); padding: .2rem .55rem; cursor: pointer; }
.op-knoppen button.aan { background: #1d2b4a; color: #fff; }
.op-zoekresultaat .op-treffer { padding: .3rem .5rem; cursor: pointer; border-bottom: 1px solid #eef; } .op-zoekresultaat .op-treffer:hover { background: var(--info-vlak); }
.op-rij { display: flex; gap: .8rem; } .op-rij > label { flex: 1; }
.op-huisstijl { border: 1px solid #e3e6ea; border-radius: var(--r-groot); padding: .8rem 1.2rem; background: #fff; }
.op-voettekst { border-top: 1px solid #1f3864; margin-top: .8rem; padding-top: .4rem; text-align: center; font-size: .75rem; color: #1f4e9a; }
.dicteer-veld { position: relative; display: block; }
.dicteer-veld .dicteer { position: absolute; right: .4rem; top: .4rem; border: 1px solid #ccd; border-radius: 50%; background: var(--vlak); width: 2rem; height: 2rem; cursor: pointer; }
.dicteer-veld .dicteer.aan { background: #b3261e; color: #fff; }
/* dicteren via de server (dicteren.js): 🎤 rechtsboven in elk textarea[data-dicteren] */
.dicteer-veld .dicteren-knop { position: absolute; right: .4rem; top: .4rem; border: 1px solid #ccd; border-radius: 1rem; background: var(--vlak); min-width: 2rem; height: 2rem; padding: 0 .45rem; cursor: pointer; font-size: .85rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.dicteer-veld .dicteren-knop.opname { border-color: #b3261e; color: #b3261e; background: #fff; font-variant-numeric: tabular-nums; }
.dicteer-veld .dicteren-knop .bol { width: .55rem; height: .55rem; border-radius: 50%; background: #b3261e; animation: dicteer-bol 1.2s ease-in-out infinite; }
.dicteer-veld .dicteren-knop.omzetten { opacity: .7; cursor: progress; }
@keyframes dicteer-bol { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dicteer-veld .dicteren-knop .bol { animation: none; } }
.op-onder { position: sticky; bottom: 0; background: var(--vlak); border-top: 1px solid #e3e6ea; padding: .6rem 0 .2rem; display: flex; justify-content: flex-end; gap: .4rem; margin-top: .8rem; }
.op-ai summary h3 { display: inline; border: 0; }
.op-bronnen { max-height: 260px; overflow: auto; border: 1px solid #e3e6ea; border-radius: var(--r); padding: .3rem .5rem; }
.op-bronnen .bron { display: block; font-size: .9rem; } .op-bronnen .bron.recent { background: #e3f6e5; }
.rechts { text-align: right; }
.op-venster textarea, .op-venster input, .op-venster select { max-width: none; }
.op-knoppen button[data-als=""].aan { background: #d5dae2; color: #333; }
.steekkaart { border-bottom: 1px solid #eef; padding: .4rem 0; }
.opzoeking { border-bottom: 1px solid #eef; padding: .4rem 0; }
.databank-zoek { display: inline-flex; gap: .3rem; margin-left: auto; margin-right: .6rem; }
.databank-zoek input { width: 260px; } .databank-zoek select { max-width: 170px; }
.voorbeelden { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .5rem; }
.taak-actie { border-bottom: 1px solid #eef; padding: .35rem 0; }
.tabelvak { max-height: 320px; overflow: auto; }
ul.verslag { margin: .4rem 0; }
.bewerk-verschil { max-height: 50vh; overflow: auto; border: 1px solid #e3e6ea; border-radius: var(--r); padding: .4rem .6rem; }
.verschil { border-bottom: 1px solid #eef; padding: .3rem 0; white-space: pre-wrap; }
.verschil del { background: #f8d7da; color: #8c1c28; } .verschil ins { background: #d4edda; color: #145a28; text-decoration: none; }
.verschil.nieuw { border-left: 3px solid #2e7d32; padding-left: .4rem; } .verschil.geschrapt { border-left: 3px solid #b3261e; padding-left: .4rem; }

/* velden uit Lexavia-Odoo (fase 6) */
details.uit-odoo { margin-top: .6rem; border-top: 1px dashed var(--lijn, #ccc); padding-top: .4rem; font-size: .85em; }
details.uit-odoo summary { cursor: pointer; color: var(--zacht, #666); }

.pdfvoorbeeld { overflow-y: auto; background: #e9e9ec; padding: 12px; box-sizing: border-box; }
.pdfvoorbeeld .pdfblad { display: block; margin: 0 auto 12px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.taalkeuze { display: inline; margin-right: .5rem; }
.taalkeuze select { width: auto; display: inline-block; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; font-size: .8rem; padding: 1px 2px; }
.taalkeuze option { color: #000; }
.stukkenkeuze { max-height: 14rem; overflow-y: auto; border: 1px solid var(--lijn); padding: .3rem .5rem; margin: .4rem 0; }
.stukkenkeuze label { display: block; font-size: .9em; }
/* Nieuw dossier met AI */
.nd-lijst { max-height: 55vh; overflow: auto; margin-bottom: .6rem; }
.nd-lijstje { list-style: none; padding: 0; margin: .3rem 0; }
.nd-lijstje li { padding: .15rem 0; }
.nd-lijstje li.gekozen { background: var(--gekozen); }
.nd-conflict { border-color: #e0b4b8; background: #fbf0f1; }
.nd-conflict strong { color: var(--fout); }
/* instroom: voorstellen uit binnenkomende stukken */
.knop.iv-chip { background: #fff4c2; color: #5a4600; border: 1px solid #e0c34a; }
.iv-lijst td { vertical-align: top; } .iv-lijst .nowrap { white-space: nowrap; }
.iv-venster .acties { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

/* dossier: statusbalk en paneel rechts (activiteiten en communicatie), inklapbaar */
.fasebalk { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: .2rem 0; }
.fasebalk button { border: 1px solid var(--lijn); background: var(--vlak); border-radius: 10px; padding: 1px 8px; font-size: .78rem; cursor: pointer; color: inherit; }
.fasebalk button.actief { background: var(--accent, #2c4a7a); color: #fff; border-color: transparent; }
.fasebalk button[disabled]:not(.actief) { cursor: default; opacity: .7; }
.dossier-met-paneel { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: .8rem; align-items: start; }
.dossier-met-paneel.paneel-dicht { grid-template-columns: minmax(0, 1fr) 28px; }
.dossierpaneel { position: sticky; top: .5rem; max-height: calc(100vh - 1rem); overflow-y: auto; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: .5rem .6rem .6rem 1.8rem; font-size: .88rem; }
.paneel-dicht .dossierpaneel { padding: .5rem 0; overflow: hidden; }
.paneel-dicht .dossierpaneel > :not(.paneel-schakel) { display: none; }
.paneel-schakel { position: absolute; left: 2px; top: .4rem; border: 0; background: transparent; cursor: pointer; font-size: .9rem; padding: 0; width: 24px; }
.paneel-dicht .paneel-schakel .pijl { display: inline-block; transform: rotate(180deg); }
.paneel-knoppen { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: .4rem; }
.paneel-knoppen .actief { outline: 2px solid var(--accent, #2c4a7a); }
.paneel-form { margin: .3rem 0 .6rem; display: grid; gap: .3rem; }
.paneel-form[hidden] { display: none; }
.paneel-form textarea { width: 100%; }
.paneel-kop { font-size: .85rem; margin: .7rem 0 .3rem; border-bottom: 1px solid var(--lijn); }
.activiteit { padding: .3rem 0; border-bottom: 1px dotted var(--lijn); }
.activiteit.te-laat .klein:first-child { color: var(--fout, #b00020); font-weight: 600; }
.activiteit.dringend .klein:first-child { color: #b26a00; font-weight: 600; }
.bericht { padding: .35rem 0; border-bottom: 1px dotted var(--lijn); }
.bericht-notitie { background: #fffbea; padding-left: .3rem; }
@media (max-width: 1100px) { .dossier-met-paneel { grid-template-columns: 1fr; } .dossierpaneel { position: static; } }
main:has(.dossier-met-paneel) { max-width: none; }

/* aanrekeningsvenster (Registreren / Niet aanrekenen) */
dialog.aanrekenen { width: min(720px, 96vw); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 1rem 1.2rem; }
dialog.aanrekenen::backdrop { background: rgba(20, 30, 50, .35); }
.melding.waarschuwing { padding: .5rem .8rem; border-radius: var(--r); margin-bottom: .5rem; background: #fff3e0; border: 1px solid #f0a040; }
.aanrekenvenster .formulier-raster.compact { gap: .4rem .8rem; }
.aanrekenvenster h3 { margin: .6rem 0 .3rem; font-size: .95rem; }
.soorticoon { cursor: help; }
.bulkbalk { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .4rem .6rem; margin-bottom: .5rem; background: var(--info-vlak); border: 1px solid var(--info-rand); border-radius: var(--r); position: sticky; top: 0; z-index: 2; }
.ai-bron-voorbeeld:not(:empty) { margin-top: .6rem; border-top: 1px solid var(--lijn); padding-top: .4rem; max-height: 55vh; overflow: auto; }
.ai-bron-voorbeeld .voorbeeldvenster { height: 50vh; }
.ai-bron-voorbeeld .acties { display: none; }
.bron .oog { opacity: .5; } .bron:hover .oog { opacity: 1; }
.ai-bevestig { margin-top: .5rem; padding: .5rem .7rem; border: 1px solid var(--info-rand); background: var(--info-vlak); border-radius: var(--r); }
.ai-bevestig-lijst { margin: .3rem 0 .5rem; columns: 2; }
.agent-voorstel { margin-bottom: .6rem; }
.ib-ai { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .4rem 0; }
.ib-ai input { flex: 1; min-width: 12rem; }
#documenten .lijstpaneel { overflow-x: auto; }
.maprij td:last-child { white-space: nowrap; }
.maprij label.knopje { cursor: pointer; }
/* dossier: zoeker in de balk, naam in de kop, archief grijs, partijenpaneel rechts */
.dossierzoeker { position: relative; }
.dossierzoeker input { width: 200px; padding: 2px 8px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: inherit; }
.dossierzoeker input::placeholder { color: rgba(255,255,255,.7); }
.dz-lijst { position: absolute; top: 100%; left: 0; z-index: 50; width: 440px; max-height: 70vh; overflow-y: auto; background: var(--vlak); color: var(--tekst);
  border: 1px solid var(--lijn); border-radius: var(--r-groot); box-shadow: 0 6px 18px rgba(0,0,0,.15); font-size: .88rem; }
.dz-lijst:empty { display: none; }
.dz-treffer { display: block; padding: 4px 10px; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-treffer:hover, .dz-treffer.gekozen { background: var(--info-vlak); }
.dz-kop, .dz-leeg { padding: 4px 10px; color: var(--zacht); font-size: .8rem; }
.archief, tr.archief td, a.archief { color: #999; }
#dossiernaam .naam:hover { background: #f3f5f8; border-radius: 3px; }
.naam-wijzigen { display: inline; } .naam-wijzigen input { font: inherit; width: min(60vw, 40em); }
.tabicoon { font-size: .9em; }
.korte-inhoud summary { cursor: pointer; color: var(--zacht); margin: .5rem 0; }
.partijen-tab tr.klikbaar { cursor: pointer; }
.partijen-tab .greep { cursor: grab; color: #aab; width: 1em; }
.partijen-tab .link { color: var(--accent, #2c4a7a); }
.partijpaneel:empty { display: none; }
.partijpaneel { position: sticky; top: .5rem; max-height: calc(100vh - 1rem); overflow-y: auto; }
.contactpaneel { position: relative; margin: 0; }
.contactpaneel .sluit { position: absolute; right: .5rem; top: .4rem; }
.rolnummer-groot { background: #fff4d6; border: 1px solid #f0d58a; border-radius: var(--r-groot); padding: .4rem .7rem; margin-bottom: .6rem; font-size: 1.05rem; }
.rolnummer-groot b { font-size: 1.5rem; letter-spacing: .03em; }
.toevoegen-aan-dossier { background: var(--info-vlak); border: 1px solid var(--info-rand); border-radius: var(--r-groot); padding: .5rem .7rem; margin-bottom: .7rem; }
tr.groepkop th { background: #f3f5f8; text-align: left; font-weight: 600; }
.vinklijst { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.vinklijst label { font-weight: normal; }
form.inline { display: inline; }
/* kolomtitels van lange lijsten blijven staan bij scrollen */
table.lijst thead th { position: sticky; top: 0; background: var(--vlak); z-index: 1; }

/* ---- Sjabloonbouwer (Configuratie › Sjablonen) ---- */
.meldingen li.warning { background: #fff3e0; color: #7a4a00; }
.meldingen li.info { background: var(--info-vlak); }
.sj-uitleg { background: #f7f4ec; border-left: 3px solid var(--accent); padding: .5rem .8rem; margin: 0 0 .8rem; font-size: .92rem; max-width: 70rem; }
.sj-filters { display: flex; gap: .5rem; margin-bottom: .6rem; }
.sj-lijst td { vertical-align: top; }
.sj-acties { white-space: normal; }
.sj-acties .knopje, .sj-knoppen .knopje { color: var(--link); border: 1px solid var(--lijn); border-radius: var(--r); padding: .1rem .45rem; margin: 0 0 .2rem .15rem;
  font-size: .82rem; background: var(--vlak); text-decoration: none; display: inline-block; line-height: 1.5; }
.sj-acties .knopje:hover { border-color: var(--link); color: var(--link); background: #f2f5fb; }
.sj-acties .knopje.gevaar:hover, .knopje.gevaar:hover { border-color: var(--fout); color: var(--fout); background: #fbecee; }
.sj-schakel { border: 1px solid var(--lijn); background: #eceef2; color: var(--zacht); border-radius: 10px; padding: .05rem .6rem; cursor: pointer; font-size: .8rem; }
.sj-schakel.aan { background: #e3f1e8; color: var(--goed); border-color: #b9dcc6; }
.sj-knoppen { display: flex; gap: .4rem; flex-wrap: wrap; }
.sj-kopbalk h1 a { color: inherit; text-decoration: none; }
.sj-kopbalk h1 a:hover { text-decoration: underline; }

.sj-nieuw .sj-keuze { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: .7rem .9rem; margin-bottom: .6rem; cursor: pointer; }
.sj-nieuw .sj-keuze:has(input[type=radio]:checked) { border-color: var(--accent); background: #fbf8f1; }
.sj-nieuw .sj-keuze select, .sj-nieuw .sj-keuze input[type=file] { margin-top: .4rem; min-width: 22rem; }

.sj-werkblad { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
.sj-rechts { position: sticky; top: .5rem; display: flex; flex-direction: column; gap: .7rem; max-height: calc(100vh - 1rem); }
.sj-werkbalk { position: sticky; top: 0; z-index: 5; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; background: var(--achtergrond);
  padding: .4rem 0; border-bottom: 1px solid var(--lijn); margin-bottom: .6rem; }
.sj-werkbalk .knopje { color: var(--tekst); border: 1px solid var(--lijn); border-radius: var(--r); background: var(--vlak); padding: .15rem .5rem; min-width: 2rem; }
.sj-werkbalk .knopje:hover:not([disabled]) { border-color: var(--link); color: var(--link); }
.sj-werkbalk .knopje[disabled] { opacity: .45; cursor: default; }
.sj-werkbalk .knop[disabled] { opacity: .5; cursor: default; }
.sj-scheiding { width: 1px; height: 1.4rem; background: var(--lijn); margin: 0 .2rem; }
.sj-status { color: var(--zacht); }
.sj-status.vuil { color: var(--let-op); font-weight: 600; }
.sj-status.fout { color: var(--fout); font-weight: 600; }
.sj-gegevens summary { cursor: pointer; color: var(--zacht); }
.sj-gegevens { padding: .5rem 1rem; }

.sj-papier { background: #e6e8ed; padding: 1.2rem; border-radius: var(--r-groot); overflow-x: auto; }
.sj-pagina { background: #fff; margin: 0 auto; box-shadow: 0 1px 6px rgba(0,0,0,.18); min-height: 1000px; font-family: Calibri, "Carlito", Arial, sans-serif;
  font-size: 11pt; line-height: 1.35; color: #111; display: flex; flex-direction: column; }
.sj-kopvoet { color: #8a8f99; background: #f6f7f9; font-size: 9pt; position: relative; }
.sj-kopvoet img { max-height: 90px; max-width: 100%; filter: grayscale(.3); opacity: .8; }
.sj-kopvoet p { margin: 0; }
.sj-kopvoet table.word-tabel { border-collapse: collapse; width: 100%; }
.sj-kop { border-bottom: 1px dashed #c9ced8; margin-bottom: 18px; }
.sj-voet { border-top: 1px dashed #c9ced8; margin-top: auto; }
.sj-blokken { padding: 6px 0 24px; flex: 1; }
.sj-blok { position: relative; }
.sj-alinea { min-height: 1.35em; margin: 0 0 .35em; padding: 1px 3px; border-radius: 2px; white-space: pre-wrap; outline: none; tab-size: 6; }
.sj-alinea:hover { background: #f5f8fd; }
.sj-alinea:focus { background: #eef4fd; box-shadow: inset 2px 0 0 var(--link); }
.sj-alinea.kop1 { font-size: 15pt; font-weight: 700; }
.sj-alinea.kop2 { font-size: 13pt; font-weight: 700; }
.sj-alinea.kop3 { font-weight: 700; }
.sj-alinea.lijst::before { content: "•"; margin-left: -1em; display: inline-block; width: 1em; color: #888; }
.sj-blok[data-gewijzigd] > .sj-alinea, .sj-blok[data-nieuw] > .sj-alinea { box-shadow: inset 3px 0 0 var(--accent); }
.sj-blokknoppen { position: absolute; left: -2.6rem; top: 0; display: none; flex-direction: column; gap: 1px; user-select: none; }
.sj-blok:hover .sj-blokknoppen, .sj-blok:focus-within .sj-blokknoppen { display: flex; }
.sj-blokknoppen button { border: 1px solid var(--lijn); background: var(--vlak); border-radius: 3px; font-size: .72rem; line-height: 1; padding: 2px 4px; cursor: pointer; color: var(--zacht); }
.sj-blokknoppen button:hover { color: var(--link); border-color: var(--link); }
.sj-blokknoppen button[data-blok=weg]:hover { color: var(--fout); border-color: var(--fout); }
.sj-vast { position: relative; margin: .2em 0 .5em; padding: 18px 6px 4px; border: 1px dashed #c9ced8; border-radius: 3px; background: var(--kop-vlak); color: #555; }
.sj-vast table.word-tabel { border-collapse: collapse; width: 100%; }
.sj-vast table.word-tabel td { border: 1px solid #dde1e8; padding: 2px 5px; vertical-align: top; }
.sj-vast p, .sj-vast td p { margin: 0 0 .2em; }
.sj-vast img { max-width: 100%; }
.sj-slot { position: absolute; top: 1px; left: 6px; font-size: .7rem; color: var(--zacht); font-family: "Inter", system-ui, sans-serif; }

.veld-chip { display: inline-block; background: #e5eefc; color: #1d3f78; border: 1px solid #b7cbee; border-radius: 9px; padding: 0 .45em;
  font-size: .86em; line-height: 1.35; white-space: nowrap; cursor: default; font-family: "Inter", system-ui, sans-serif; vertical-align: baseline; }
.veld-chip::before { content: "«"; opacity: .5; }
.veld-chip::after { content: "»"; opacity: .5; }
.veld-chip.onbekend { background: #fff0dc; color: #8a4b00; border-color: #f0b46a; }
.sj-kopvoet .veld-chip, .sj-vast .veld-chip { filter: grayscale(.4); }

.sj-velden { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: .6rem .7rem; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sj-velden-kop { display: flex; justify-content: space-between; font-size: 1rem; }
.sj-velden-uitleg { margin: .2rem 0 .4rem; color: var(--zacht); }
.sj-velden-zoek { width: 100%; margin-bottom: .4rem; }
.sj-velden-lijst { overflow-y: auto; flex: 1; min-height: 120px; }
.sj-groep summary { font-weight: 600; color: var(--zacht); cursor: pointer; padding: .25rem 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.sj-veld { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--r); padding: .25rem .4rem; cursor: pointer; font: inherit; }
.sj-veld:hover { background: #eef4fd; border-color: var(--info-rand); }
.sj-veld-naam { display: inline-block; font-weight: 600; color: #1d3f78; font-size: .9rem; }
.sj-veld-uitleg { display: block; font-size: .78rem; color: var(--zacht); }
.sj-veld-voorbeeld { display: block; font-size: .78rem; color: #2f6b45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-veld-voorbeeld:not(.uit-dossier) { color: #8a8f99; font-style: italic; }
.sj-veld-voorbeeld.leeg { color: var(--let-op); font-style: italic; }
.sj-zwevend { position: fixed; right: 1rem; top: 70px; width: 320px; height: min(70vh, 640px); z-index: 50; display: flex; box-shadow: 0 6px 24px rgba(0,0,0,.2); border-radius: var(--r-groot); }
.sj-zwevend .sj-velden-kop { cursor: move; background: var(--balk); color: var(--balk-tekst); margin: -.6rem -.7rem .3rem; padding: .4rem .7rem; border-radius: var(--r-groot) 6px 0 0; }

.sj-proef h2 { margin-top: 0; }
.sj-proef label { display: block; font-size: .85rem; color: var(--zacht); margin-bottom: .4rem; }
.sj-proef input[type=search], .sj-proef select { width: 100%; }
.sj-dossierzoek { position: relative; display: block; }
.sj-dossier-lijst { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); box-shadow: 0 4px 12px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; }
.sj-dossier-lijst button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .3rem .5rem; cursor: pointer; font: inherit; color: var(--tekst); }
.sj-dossier-lijst button:hover { background: #eef4fd; }
.sj-dossier-lijst .klein { display: block; padding: .3rem .5rem; }
dialog.sj-proefvenster { width: min(980px, 96vw); max-height: 94vh; border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 1rem 1.2rem; }
dialog.sj-proefvenster::backdrop { background: rgba(20, 30, 50, .35); }
.sj-proefkop { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.sj-proefknoppen { margin-left: auto; display: flex; gap: .4rem; }
.sj-proefblad { border: 1px solid var(--lijn); padding: 1.5rem 2rem; background: #fff; font-family: Calibri, "Carlito", Arial, sans-serif; }
mark.open-punt { background: #ffef5c; color: #c00000; font-weight: 600; }

.sj-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-right: 340px; }
.sj-stap { position: relative; padding-top: 1.4rem; }
.sj-stap h2 { margin-top: 0; color: var(--tekst); }
.sj-nr { position: absolute; top: -.7rem; left: .8rem; background: var(--accent); color: #fff; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sj-stappen + .kaart { margin-right: 340px; }
.sj-mail .formulier-raster textarea { font-family: inherit; min-height: 18rem; }
.sj-mailproef { border: 1px solid var(--lijn); border-radius: var(--r); padding: .6rem .8rem; background: var(--vlak); margin-top: .6rem; }
.sj-mailonderwerp { padding-bottom: .4rem; border-bottom: 1px solid var(--lijn); margin-bottom: .5rem; }
.sj-tekstsoort ul { list-style: none; padding: 0; columns: 2; }
.sj-tekstsoort textarea { min-height: 10rem; }
@media (max-width: 1100px) {
  .sj-werkblad { grid-template-columns: 1fr; }
  .sj-rechts { position: static; max-height: none; }
  .sj-stappen { grid-template-columns: 1fr; margin-right: 0; }
  .sj-stappen + .kaart { margin-right: 0; }
}
.veld-chip.haakjes::before { content: "["; }
.veld-chip.haakjes::after { content: "]"; }
.sj-acties form.inline { display: inline; }
.sj-proefkeuze select, .sj-proefkeuze input[type=search] { display: block; width: 100%; margin-top: .15rem; }
.sj-einde { border-top: 1px dashed #aab; text-align: center; color: #8a8f99; font-size: .75rem; margin-top: .3rem; padding-top: .1rem; }
.sj-vast:has(.sj-einde) { padding: 2px 6px; border: 0; background: none; }
.sj-vast:has(.sj-einde) .sj-slot { display: none; }
.sj-nieuw .formveld input:not([type=checkbox]):not([type=radio]):not([type=file]) { width: 100%; padding: .4rem .5rem; border: 1px solid var(--lijn); border-radius: var(--r); font: inherit; }
.sj-lijst td.sj-acties { white-space: nowrap; }

/* Lexavia Agent: installatie met één regel */
.installatie { border: 1px solid var(--lijn, #ccc); border-radius: var(--r); padding: .6rem .8rem; margin: .4rem 0 .8rem; }
.regel-vak { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; margin: .4rem 0; }
.regel-vak code { flex: 1 1 30rem; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem;
  background: #242424; color: #F4F0E8; padding: .55rem .7rem; border-radius: var(--r); overflow-wrap: anywhere; user-select: all; }
.installatie ol.stappen { margin: .4rem 0; padding-left: 1.3rem; }
.installatie ol.stappen li { margin: .25rem 0; }
form.inline { display: inline-block; margin: .2rem .3rem .2rem 0; }

/* "Lexavia is bezig" (static/js/bezig.js) */
#lx-bezig { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 36, 36, .45); opacity: 0; transition: opacity .25s; pointer-events: none; }
#lx-bezig.zichtbaar { opacity: 1; pointer-events: auto; }
.lx-bezig-kaart { background: var(--vlak); border-radius: var(--r-groot); padding: 1.6rem 2.2rem 1.2rem; text-align: center;
  min-width: 300px; max-width: 90vw; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); border-top: 3px solid var(--koperlijn, #b89a62); }
.lx-bezig-beeld { position: relative; width: 84px; height: 84px; margin: 0 auto .9rem; }
.lx-bezig-beeld img { position: absolute; inset: 12px; width: 60px; height: 60px; border-radius: 14px; animation: lx-adem 2.4s ease-in-out infinite; }
.lx-bezig-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(184, 154, 98, .25);
  border-top-color: #b89a62; animation: draai 1.1s linear infinite; }
.lx-bezig-tekst { font-family: var(--font-titel, serif); font-size: 1.1rem; margin: 0 0 .7rem; }
.lx-bezig-tijd, .lx-wacht-tijd { color: var(--zacht); font-size: .82rem; margin: .45rem 0 0; font-variant-numeric: tabular-nums; }
.lx-bezig-balk { position: relative; height: 3px; background: rgba(184, 154, 98, .2); border-radius: 2px; overflow: hidden; margin-top: .5rem; }
.lx-bezig-balk span { position: absolute; top: 0; bottom: 0; width: 35%; background: #b89a62; border-radius: 2px; animation: lx-glij 1.6s ease-in-out infinite; }
@keyframes lx-adem { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes lx-glij { 0% { left: -35%; } 100% { left: 100%; } }
.ai-wacht { border-left: 3px solid #b89a62; }
.ai-wacht .draaier { border-color: #b89a62; border-top-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .lx-bezig-beeld img, .lx-bezig-ring, .lx-bezig-balk span, .draaier { animation-duration: 4s; }
}

/* Esc = terug naar het dossier (static/js/terug.js) */
.lx-terug { position: fixed; left: 14px; bottom: 14px; z-index: 800; display: inline-flex; align-items: center; gap: .45rem;
  max-width: 46vw; padding: .35rem .7rem; background: var(--balk, #242424); color: var(--balk-tekst, #f4f0e8);
  border-radius: 999px; font-size: .85rem; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); opacity: .92; }
.lx-terug:hover { opacity: 1; color: var(--balk-tekst, #f4f0e8); }
.lx-terug span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-terug kbd { font: inherit; font-size: .72rem; padding: 0 .35rem; border: 1px solid rgba(184, 154, 98, .8); border-radius: 4px; color: #e6d3a8; }
@media print { .lx-terug { display: none; } }
/* ---------- Contactfiche en contactformulier (visitekaartje) ---------- */
.contactfiche, .contactformulier { --cat: var(--koperlijn, var(--accent)); max-width: 1400px; }
.cat-client { --cat: var(--koperlijn, #b89a62); }
.cat-advocaat, .cat-procureur, .cat-onderzoeksrechter, .cat-rechtbank { --cat: #4c5d7a; }
.cat-tegenpartij { --cat: #b0503f; }
.cat-deurwaarder, .cat-curator, .cat-notaris { --cat: #6b6b3a; }
.cat-expert, .cat-verzekeraar, .cat-aansprakelijkheid, .cat-rechtsbijstand { --cat: #3f7a6b; }
.cat-mede_inzake, .cat-aanbrenger, .cat-diversen, .cat-belastingen { --cat: #7a7771; }

.visitekaartje { display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center;
  background: var(--vlak); border: 1px solid var(--lijn); border-top: 3px solid var(--cat); border-radius: var(--r-groot);
  padding: 1rem 1.2rem; margin-bottom: .8rem; position: relative; }
.visitekaartje.niet-actief { opacity: .75; }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--balk); color: var(--goud, #b89a62); font-family: var(--font-titel); font-size: 1.55rem; font-weight: 600;
  letter-spacing: .04em; box-shadow: 0 0 0 3px var(--vlak), 0 0 0 4px var(--cat); flex: none; user-select: none; }
.avatar.soort-vennootschap, .avatar.soort-rechtbank { border-radius: 10px; }
.vk-wie { min-width: 0; }
.vk-boven { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; font-size: .82rem; }
.label.categorie { font-size: .78rem; font-weight: 600; color: var(--tekst); padding: .05rem .5rem;
  background: color-mix(in srgb, var(--cat) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cat) 55%, transparent); }
.vk-soort { color: var(--zacht); }
h1.vk-naam { margin: .2rem 0 .15rem; font-family: var(--font-titel); font-size: 2rem; line-height: 1.15; font-weight: 600;
  overflow-wrap: anywhere; }
.vk-naam .achternaam { letter-spacing: .03em; }
.vk-naam .voornaam { font-weight: 400; }
.vk-naam .rechtsvorm { font-weight: 400; color: var(--zacht); font-size: .7em; letter-spacing: .04em; }
.vk-naam .leeg-naam { color: var(--zacht-2); font-weight: 400; font-style: italic; }
.vk-werkt-bij { color: var(--zacht); font-size: .9rem; margin-bottom: .15rem; }
.vk-werkt-bij a { font-weight: 600; }
.vk-refs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.vk-refs:empty { display: none; }
.refchip { display: inline-flex; align-items: baseline; gap: .35rem; border: 1px solid var(--lijn); border-radius: var(--r);
  padding: .1rem .5rem; background: var(--kop-vlak); font-size: .88rem; white-space: nowrap; }
.refchip small { text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; color: var(--zacht); font-weight: 600; }
.refchip b { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; font-size: .86rem; }
.refchip.eigen { border-color: var(--koperlijn, var(--accent)); background: var(--accent-vlak); }
.refchip.eigen b { color: var(--accent); }
.refchip i { font-style: normal; font-size: .75rem; }
.refchip i.ok { color: var(--goed); } .refchip i.nok { color: var(--fout); }
.refchip.mini { font-size: .78rem; padding: 0 .4rem; margin-left: .3rem; }
.vk-acties { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.vk-acties .snel { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.snelknop { display: inline-flex; gap: .4rem; align-items: center; text-decoration: none; color: var(--link); font-size: .9rem;
  padding: .1rem .4rem; border-radius: var(--r); white-space: nowrap; }
.snelknop:hover { background: var(--hover); }
.vk-acties .beheer { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.vk-acties form.kopie { display: inline-flex; gap: .3rem; margin: 0; }
.vk-acties form.kopie select { width: auto; max-width: 11rem; }
.cstatus { display: inline-block; border-radius: 10px; padding: 0 .5rem; font-size: .76rem; font-weight: 600; border: 1px solid; }
.cstatus.in-orde { color: var(--goed); border-color: color-mix(in srgb, var(--goed) 45%, transparent);
  background: color-mix(in srgb, var(--goed) 10%, transparent); }
.cstatus.te-controleren { color: var(--let-op); border-color: color-mix(in srgb, var(--let-op) 50%, transparent);
  background: color-mix(in srgb, var(--let-op) 10%, transparent); }

/* rol in dossiers */
.rollen-blok { padding: .6rem 1rem; }
.rollen-blok h2, .fiche-dossiers h2 { margin: 0 0 .4rem; font-size: 1.02rem; }
ul.rollen { list-style: none; margin: 0; padding: 0; }
ul.rollen li { display: grid; grid-template-columns: 1.6rem 1fr minmax(12rem, auto) 1.6rem; gap: .5rem; align-items: baseline;
  padding: .32rem 0; border-top: 1px solid var(--lijn-zacht); }
ul.rollen li:first-child { border-top: 0; }
ul.rollen li.archief { opacity: .65; }
.r-rol { font-weight: 600; }
.r-partij { font-weight: 700; }
.r-bij { display: inline-block; margin-left: .6rem; color: var(--zacht); font-size: .88rem; }
.r-bij::before { content: "· "; }
.r-dossier { font-size: .88rem; text-align: right; }
.r-dossier a { text-decoration: none; color: var(--tekst); }
.r-dossier a:hover .ref, .r-dossier a:hover { text-decoration: underline; }
a.potlood { text-decoration: none; color: var(--zacht); text-align: center; border-radius: var(--r); }
a.potlood:hover { color: var(--link); background: var(--hover); }

/* blokken onder het visitekaartje */
.fiche-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .8rem; align-items: start; }
.fiche-raster > .kaart { margin: 0; }
.fiche-blokken { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .8rem; align-items: start; }
.fiche-blok { margin: 0; padding: .7rem .9rem; }
.fiche-blok.breed { grid-column: 1 / -1; }
.fiche-blok h3 { font-family: var(--font-titel); font-size: 1rem; margin: 0 0 .45rem; padding-bottom: .3rem; color: var(--tekst);
  border-bottom: 1px solid var(--koperlijn, var(--accent)); }
.fiche-blok h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--zacht); margin: .7rem 0 .25rem;
  display: flex; gap: .5rem; align-items: center; }
.fiche-blok h3 + h4 { margin-top: .2rem; }
.fiche-blok dl { display: grid; grid-template-columns: max-content 1fr; gap: .22rem .9rem; margin: 0; font-size: .92rem; }
.fiche-blok dt { color: var(--zacht); font-size: .82rem; padding-top: .07rem; }
.fiche-blok dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fiche-blok .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .86rem; }
.fiche-blok .knopje.link { color: var(--link); font-size: .76rem; border: 1px solid var(--lijn); border-radius: var(--r);
  padding: 0 .35rem; margin-left: .25rem; text-decoration: none; font-family: var(--font); }
.fiche-blok .knopje.link:hover { border-color: var(--link); }
.fiche-blok p { margin: 0; }
.client-blok { border-left: 3px solid var(--koperlijn, var(--accent)); }
.risico { font-weight: 600; } .risico-hoog { color: var(--fout); } .risico-laag { color: var(--goed); }
ul.leden { list-style: none; margin: 0; padding: 0; } ul.leden li { padding: .12rem 0; }
ul.leden .klein { margin-left: .4rem; } ul.leden .natnr { white-space: nowrap; }
.bestuurder-toevoegen { margin: .5rem 0 0; }
.fiche-regel { margin: 0 0 .5rem; }
.contactpaneel .fiche-blokken { grid-template-columns: 1fr; gap: .5rem; }
.contactpaneel .fiche-blok { border: 0; border-top: 1px solid var(--lijn-zacht); border-radius: 0; padding: .5rem 0 0; }

/* formulier */
.vk-formulier { position: sticky; top: 0; z-index: 5; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.vk-formulier .avatar { width: 54px; height: 54px; font-size: 1.3rem; }
.vk-formulier h1.vk-naam { font-size: 1.7rem; }
.formfouten { border: 1px solid var(--fout); border-left-width: 4px; color: var(--fout); padding: .5rem .8rem; border-radius: var(--r);
  margin-bottom: .8rem; background: color-mix(in srgb, var(--fout) 8%, transparent); }
fieldset.formsectie { margin: 0 0 .8rem; padding: .7rem 1rem .9rem; min-width: 0; }
fieldset.formsectie legend { float: left; width: 100%; padding: 0 0 .3rem; margin-bottom: .6rem; font-family: var(--font-titel);
  font-size: 1.05rem; font-weight: 600; border-bottom: 1px solid var(--koperlijn, var(--accent)); }
fieldset.formsectie legend + * { clear: both; }
.sectie-hint { font-family: var(--font); font-weight: 400; margin-left: .4rem; }
fieldset.formsectie.met-fout { border-color: var(--fout); }
fieldset[data-enkel-client] { border-left: 3px solid var(--koperlijn, var(--accent)); }
.sectieraster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem 1rem; }
.sectieraster .formveld { min-width: 0; }
.sectieraster .b1 { grid-column: span 1; } .sectieraster .b2 { grid-column: span 2; } .sectieraster .b3 { grid-column: span 3; }
.sectieraster .b4 { grid-column: span 4; } .sectieraster .b5 { grid-column: span 5; } .sectieraster .b6 { grid-column: 1 / -1; }
.sectieraster input:not([type=checkbox]):not([type=radio]), .sectieraster select, .sectieraster textarea { max-width: none; width: 100%; }
.sectieraster label { font-size: .8rem; margin-bottom: .2rem; }
.sectieraster .formveld.groot label { color: var(--tekst); font-weight: 600; }
.sectieraster .formveld.groot input { font-size: 1.15rem; padding: .5rem .6rem; font-weight: 600; }
.sectieraster .vinkveld { align-self: end; padding-bottom: .45rem; }
.sectieraster .formveld.met-fout input, .sectieraster .formveld.met-fout select, .sectieraster .formveld.met-fout textarea { border-color: var(--fout); }
.sectieraster .errorlist { list-style: none; padding: 0; margin: .15rem 0 0; }
.sectieraster input[type=file] { font-size: .85rem; }
.formvoet { display: flex; gap: .5rem; align-items: center; position: sticky; bottom: 0; background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: .55rem 1rem; margin-bottom: 1rem; }
.formvoet .ruimte { flex: 1; }

@media (max-width: 900px) {
  .visitekaartje { grid-template-columns: auto 1fr; }
  .vk-acties { grid-column: 1 / -1; align-items: flex-start; }
  .vk-acties .snel { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .vk-acties .beheer { justify-content: flex-start; }
  .fiche-raster { grid-template-columns: 1fr; }
  .sectieraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sectieraster .formveld { grid-column: span 1; }
  .sectieraster .b3, .sectieraster .b4, .sectieraster .b5, .sectieraster .b6, .sectieraster .groot { grid-column: 1 / -1; }
  ul.rollen li { grid-template-columns: 1.6rem 1fr 1.6rem; }
  ul.rollen .r-dossier { grid-column: 2; text-align: left; }
  h1.vk-naam { font-size: 1.5rem; }
}

/* tabblad Partijen: de boom zichtbaar */
table.boom tr.kind td:nth-child(3) { color: var(--tekst); }
table.boom .boomtak { color: var(--koperlijn, var(--accent)); font-weight: 700; }
table.boom tr.kind { background: color-mix(in srgb, var(--koperlijn, #b89a62) 5%, transparent); }
table.boom .hoort-bij { white-space: nowrap; }
@media (min-width: 901px) {  /* geen gat naast de naam als voornaam of rechtsvorm verborgen is */
  .sectieraster [data-veld=naam]:has(+ [data-veld=rechtsvorm][hidden]) { grid-column: span 4; }
  .sectieraster [data-veld=voornaam][hidden] + [data-veld=naam] { grid-column: span 5; }
}
/* Nieuw dossier met AI: partijrollen gewijzigd */
.nd-rollen { border-color: #e6cf9a; background: #fdf7e8; }
.nd-rollen strong { color: #7a6232; }
.nd-rollen .acties { margin: .4rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.nd-rollen-aanmaken { margin: .4rem 0 0; font-weight: 600; }
.nd-herschreven-veld { outline: 2px solid #b89a62; }
.rollen-melding { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .45rem .7rem; margin-bottom: .6rem;
  border: 1px solid #e6cf9a; background: #fdf7e8; border-radius: var(--r); font-size: .9rem; }
@media (prefers-color-scheme: dark) {
  .nd-rollen, .rollen-melding { background: #2f2a1f; border-color: #6b5a34; }
  .nd-rollen strong { color: #d9c08e; }
}

/* aanvinkhokjes 🤖 (algemene AI-kennisbank) en 🎯 (opdracht-kennisbank) in Documentenbeheer */
.vinkvak { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
  border: 2px solid var(--koperlijn, #b89a62); border-radius: 4px; background: var(--vlak, #fff); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; transition: background .12s, box-shadow .12s; }
.vinkvak:hover { box-shadow: 0 0 0 3px rgba(184, 154, 98, .3); }
.vinkvak:focus-visible { outline: 2px solid var(--accent, #7a6232); outline-offset: 2px; }
.vinkvak.aan { background: var(--koperlijn, #b89a62); border-color: var(--koperlijn, #b89a62); }
.vinkvak.kb { border-color: #c0392b; }
.vinkvak.kb:hover { box-shadow: 0 0 0 3px rgba(192, 57, 43, .25); }
.vinkvak.kb.aan { background: #c0392b; border-color: #c0392b; }
.vinkvak.kb.leeg { border-style: dashed; opacity: .55; }
.ai-index .vinkvak + .ai-gelezen { margin-left: .3rem; }

/* aanmelden: wachtwoord vergeten */
.aanmelden .acties { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.aanmelden .wachtwoord-vergeten { margin-left: auto; color: var(--link); }
.aanmelden .melding-goed { background: var(--info-vlak); border-left: 3px solid var(--goed, #2e7d32); padding: .45rem .7rem; border-radius: var(--r); }


/* ---------- invoervelden: zien wat je kan wijzigen (geen "klikken op goed geluk") ----------
   Elk wijzigbaar veld heeft een zichtbare rand (grijs → donkerder bij hover → accent bij focus); verplichte velden een
   streep links in de accentkleur; alleen-lezen en uitgeschakelde velden zonder rand. Enkel variabelen, zodat de
   huisstijl (huisstijl.css) en de donkere modus de kleuren bepalen. De regels zetten enkel --_rand/--_streep/--_vlak
   (specificiteit 0 via :where), zodat eigen opmaak (dossierzoeker, taalkeuze …) voorgaat. */
:root {
  --veld-rand: color-mix(in srgb, var(--invoer-rand) 70%, var(--tekst));
  --veld-rand-hover: color-mix(in srgb, var(--invoer-rand) 35%, var(--tekst));
  --veld-verplicht: var(--koperlijn, var(--accent));
}
input[type=time], input[type=tel], input[type=datetime-local], input[type=month], input[type=week], input:not([type]) {
  padding: .4rem .5rem; border: 1px solid var(--_rand, var(--veld-rand)); border-radius: var(--r); font: inherit;
  background: var(--_vlak, var(--invoer-vlak)); color: inherit; box-shadow: var(--_streep, none); }
:where(input, select, textarea):where(:hover:not(:focus)) { --_rand: var(--veld-rand-hover); }
:where(input, select, textarea):where(:required) { --_streep: inset 3px 0 0 var(--veld-verplicht); }
:where(input, textarea):where([readonly]), :where(input, select, textarea):where(:disabled) {
  --_rand: transparent; --_streep: none; --_vlak: transparent; cursor: default; }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--accent); cursor: pointer; }
:where(input[type=checkbox], input[type=radio]):disabled { cursor: default; }
.formveld:has(:required) > label::after { content: " *"; color: var(--veld-verplicht); }

/* ---------- vensters: meteen zichtbaar, korte animatie (uit bij prefers-reduced-motion) ---------- */
dialog[open] { animation: lx-verschijn .14s ease-out; }
dialog[open]::backdrop { animation: lx-vervaag .14s ease-out; }
@keyframes lx-verschijn { from { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes lx-vervaag { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  dialog[open], dialog[open]::backdrop { animation: none; }
  input, select, textarea { transition: none; }
}

/* ---------- stabiel scherm: geen verspringen na een htmx-vervanging ---------- */
.dossierpaneel, #tabinhoud, #documenten, .doclijst { overflow-anchor: none; }

/* ---------- controlevenster vóór "Concept in Outlook" (opstellen.js) ---------- */
dialog.lx-controle { width: min(560px, 94vw); border: 1px solid var(--lijn); border-top: 3px solid var(--fout);
  border-radius: var(--r-groot); padding: 1rem 1.2rem; background: var(--vlak); color: var(--tekst); }
dialog.lx-controle::backdrop { background: rgba(20, 30, 50, .35); }
dialog.lx-controle h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
dialog.lx-controle ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
dialog.lx-controle li { margin: .3rem 0; }
dialog.lx-controle li.hard { color: var(--fout); }
dialog.lx-controle li.zacht { color: var(--let-op); }
dialog.lx-controle .acties { justify-content: flex-end; }
/* tweestapsverificatie (gebruikers/tweestap.py) */
.tweestap { max-width: 760px; }
.tweestap h2 { margin-top: 0; }
.tweestap-titel { display: flex; align-items: center; gap: .6rem; color: var(--tekst); }
.tweestap-aan { background: #e7f2ea; color: var(--goed); }
.tweestap .let-op { color: var(--let-op); }
.tweestap-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.tweestap-rij .kaart { margin-bottom: 0; }
.tweestap-rij input { max-width: none; }
.tweestap-stappen { margin: 0; padding-left: 1.3rem; }
.tweestap-stappen > li { padding: .2rem 0 1rem .3rem; }
.tweestap-stappen > li::marker { font-weight: 700; color: var(--accent); }
.tweestap-stappen > li > strong { display: block; margin-bottom: .1rem; }
.tweestap-qr { margin: .7rem 0 .4rem; }
.tweestap-qr svg { display: block; width: 190px; height: 190px; border: 1px solid var(--lijn); border-radius: var(--r); background: #fff; }
.tweestap-manueel summary { cursor: pointer; color: var(--link); font-size: .88rem; }
.tweestap-manueel .sleutel { display: inline-block; letter-spacing: .08em; margin: .5rem 0 .2rem; }
.tweestap-bevestig { margin-top: .4rem; }
.tweestap-invoer { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tweestap-invoer input, input.tweestap-code { width: 9.5rem; font-family: ui-monospace, Menlo, monospace; font-size: 1.25rem; letter-spacing: .25em; text-align: center; }
.aanmelden input.tweestap-code { width: 100%; }
input.tweestap-code.herstel { letter-spacing: .12em; }
.tweestap-stap h1 { font-size: 1.15rem; margin: 0 0 .3rem; }
.tweestap-stap > .klein { margin: 0 0 .8rem; }
.herstelcodes { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: .4rem 2.5rem; margin: 1rem 0; padding-left: 1.8rem; }
.herstelcodes code { font-family: ui-monospace, Menlo, monospace; font-size: 1.1rem; letter-spacing: .06em; }
.alleen-druk { display: none; }
.tweestap-herstel > .melding:first-child { margin-top: 0; }
@media print {
  .balk, .omgevingsband, .niet-afdrukken, .tweestap .meldingen { display: none !important; }
  .alleen-druk { display: block; }
  .tweestap-herstel .melding { border: 1px solid #999; }
}
html.donker .tweestap-aan { background: #12301f; color: #86efac; }

/* Nieuw dossier met AI: partijen als kaarten (kop met rol en naam, velden met label, gegroepeerd) */
.nd-partijen { display: grid; gap: .6rem; margin: .5rem 0; }
.nd-partij { border: 1px solid var(--lijn); border-left: 5px solid var(--nd-rolkleur, #b9b4a8); border-radius: 8px;
  background: var(--vlak); padding: .55rem .8rem .7rem; }
.nd-partij[data-rol="client"] { --nd-rolkleur: var(--goed); }
.nd-partij[data-rol="tegen"] { --nd-rolkleur: var(--fout); }
.nd-partij[data-rol="raadsman"] { --nd-rolkleur: #b89a62; }
.nd-partij-kop { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.nd-opnemen { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.nd-opnemen input { width: 1.1rem; height: 1.1rem; }
.nd-nr { font-weight: 600; color: var(--zacht); min-width: 1.2rem; }
.nd-rolbadge { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .55rem;
  border-radius: 999px; color: #fff; background: var(--nd-rolkleur, #8a857a); }
.nd-naam { font-size: 1.08rem; }
.nd-hoort { color: var(--zacht); font-size: .9rem; }
.nd-contactkeuze { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--zacht); }
.nd-contactkeuze select { max-width: 22rem; }
.nd-partij-inhoud { display: grid; gap: .45rem; margin-top: .55rem; }
.nd-groep { display: grid; grid-template-columns: 7.5rem repeat(8, minmax(0, 1fr)); gap: .3rem .6rem; align-items: end; }
.nd-groep > .s1 { grid-column: span 1; } .nd-groep > .s2 { grid-column: span 2; } .nd-groep > .s3 { grid-column: span 3; }
.nd-groepnaam { grid-row: span 2; }
.nd-groep > label { display: grid; gap: .1rem; font-size: .75rem; color: var(--zacht); }
.nd-groep > label input, .nd-groep > label select { font-size: .9rem; width: 100%; color: var(--tekst); }
.nd-groepnaam { align-self: start; padding-top: 1.35rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #7a6232; }
.nd-groepnaam small { display: none; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--zacht); }
.nd-partij.bestaand .nd-gegevens label { opacity: .55; }
.nd-partij.bestaand .nd-groepnaam small { display: block; }
.nd-partij.uit { opacity: .6; background: transparent; cursor: pointer; }
.nd-partij.uit .nd-partij-inhoud { display: none; }
.nd-partij.uit .nd-rolbadge { background: #b9b4a8; }
#nd-partij-erbij { justify-self: start; }
@media (max-width: 800px) {
  .nd-groep { grid-template-columns: 1fr 1fr; }
  .nd-groep > .s1, .nd-groep > .s2 { grid-column: span 1; } .nd-groep > .s3 { grid-column: 1 / -1; }
  .nd-groepnaam { grid-column: 1 / -1; grid-row: auto; padding-top: .3rem; }
  .nd-contactkeuze { margin-left: 0; width: 100%; }
}

/* kernpunten als bullets, korte inhoud in blokken met kopje */
.kernlijst { margin: 0; padding-left: 1.1rem; }
.kernlijst li { margin: .12rem 0; }
.kernlijst li::marker { color: var(--accent); }
.ki .ki-blok { margin: .2rem 0 .7rem; }
.ki .ki-kop { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #7a6232; margin: .6rem 0 .25rem;
  padding-bottom: .15rem; border-bottom: 1px solid #e6dcc6; }
.ki p { margin: 0 0 .4rem; line-height: 1.5; }
.ki ul { margin: 0 0 .4rem; padding-left: 1.1rem; }
.ki li::marker { color: var(--accent); }
.model-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .2rem 1rem; margin: .4rem 0 .8rem; }

/* Documentenbeheer: kolommen kiezen en sorteren */
.kolomkeuze { position: relative; display: inline-block; }
.kolomkeuze > summary { list-style: none; cursor: pointer; }
.kolomkeuze > summary::-webkit-details-marker { display: none; }
.kolomkeuze-lijst { position: absolute; right: 0; z-index: 20; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 8px; padding: .5rem .7rem; box-shadow: 0 6px 20px rgba(0,0,0,.12); display: grid; gap: .25rem; min-width: 15rem; }
.doclijst.zonder-nr .k-nr, .doclijst.zonder-ai .k-ai, .doclijst.zonder-kb .k-kb, .doclijst.zonder-datum .k-datum,
.doclijst.zonder-type .k-type, .doclijst.zonder-afzender .k-afzender, .doclijst.zonder-bestemmeling .k-bestemmeling,
.doclijst.zonder-door .k-door { display: none; }
.doclijst th.sorteerbaar a { color: inherit; text-decoration: none; white-space: nowrap; }
.doclijst th.sorteerbaar a:hover { text-decoration: underline; }
.doclijst th.gesorteerd a { color: #7a6232; }
.doclijst .k-nr { width: 2.6rem; text-align: center; }
.doclijst .k-ai, .doclijst .k-kb { width: 2.2rem; text-align: center; }
.doclijst .mapacties { text-align: left; }
.doclijst .k-wis { width: 2rem; text-align: center; }
.doclijst .wisknop { opacity: 0; border: 0; background: transparent; cursor: pointer; font-size: .9rem; }
.doclijst tr:hover .wisknop, .doclijst .wisknop:focus-visible { opacity: .75; }
.doclijst .wisknop:hover { opacity: 1; }

/* ---------------------------------------------- onlinecontrole rechtbankgegevens (contactfiche, 31/10/2026) */
dialog.rb-venster { width: min(780px, 96vw); max-height: 92vh; border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 1rem 1.2rem; }
dialog.rb-venster::backdrop { background: rgba(20, 30, 50, .35); }
.rb-inhoud h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.rb-kandidaten { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
.rb-kandidaten li { margin: .25rem 0; list-style: none; }
.rb-vergelijk td { vertical-align: top; }
.rb-vergelijk tr.anders td:last-child { font-weight: 600; }
.rb-vergelijk .ok { color: #1f6a3a; }
.rb-inhoud .acties { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; }
.rb-inhoud .acties a { margin-right: auto; }

/* Suggesties "bestaat dit contact al?" onder het naamveld (contactzoeker.js) */
.suggestiekader { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--vlak, #fff);
  border: 1px solid var(--_rand, #b8a98a); border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.18);
  padding: .4rem .5rem; max-height: 19rem; overflow: auto; }
.suggestiekader > p { margin: 0 0 .25rem .25rem; }
.suggestiekader ul { list-style: none; margin: 0; padding: 0; }
.suggestie { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .35rem .45rem;
  border-radius: 6px; cursor: pointer; font: inherit; color: inherit; }
.suggestie:hover, .suggestie:focus { background: color-mix(in srgb, var(--accent, #B89A62) 18%, transparent); }
.suggestie small { display: block; opacity: .7; margin-left: 1.55rem; }
.suggestie .s-icoon { width: 1.3rem; display: inline-block; }

/* Inbox: mappenboom met tellers en het Lexavia-blok (inbox.js) */
.ib-tel { background: color-mix(in srgb, var(--accent, #B89A62) 28%, transparent); border-radius: 9px; padding: 0 .45em;
  font-size: .78em; font-weight: 600; margin-left: .3em; }
.ib-vast a.actief .ib-tel { background: var(--accent, #B89A62); color: #fff; }
.ib-boom { margin: .15rem 0 .4rem; }
.ib-maprij { display: flex; align-items: center; }
.ib-maprij .ib-pijl { width: 1.1rem; flex: none; text-align: center; text-decoration: none; color: inherit; opacity: .6; }
.ib-maprij .ib-map { flex: 1; padding: .18rem .4rem; text-decoration: none; color: var(--tekst); border-radius: var(--r);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-maprij .ib-map.actief { background: var(--gekozen); font-weight: 600; }
.ib-maprij.d1 { padding-left: 1rem; } .ib-maprij.d2 { padding-left: 2rem; } .ib-maprij.d3 { padding-left: 3rem; }
.ib-lexavia { margin-top: .9rem; border-top: 1px solid var(--_rand, #d8cfc0); padding-top: .5rem; }
.ib-lexavia h3 { margin: 0 0 .2rem .3rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ib-lexavia a { display: block; padding: .2rem .4rem; text-decoration: none; color: var(--tekst); border-radius: var(--r); }
.ib-lexavia a:hover { background: var(--gekozen); }
.ib-mapkop { padding: .1rem .2rem .35rem; }

/* Inbox als werkplek (zoals Lexavia-Odoo): vinkje, chips, zwevende knoppenbalk, bulkbalk en filters */
.inbox { grid-template-columns: 230px minmax(0, 3fr) minmax(0, 3fr); }
.ib-mail { display: flex; gap: .45rem; align-items: flex-start; }
.ib-mail .ib-vink { margin-top: .2rem; flex: none; }
.ib-inhoud { flex: 1; min-width: 0; }
.ib-r2 { color: var(--accent-tekst, #7a6232); }
.ib-r3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-chips { margin-top: .25rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.ib-chip { font-size: .75rem; border-radius: 4px; padding: .05rem .4rem; }
.ib-chip.groen { background: #dff3e6; color: #1d6b3c; } .ib-chip.geel { background: #fbf1cc; color: #7a5d00; }
.ib-balk { position: absolute; right: .4rem; bottom: .3rem; display: none; gap: .15rem; background: var(--vlak, #fff);
  border: 1px solid var(--lijn); border-radius: 6px; padding: .1rem .2rem; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.ib-mail:hover .ib-balk, .ib-mail:focus-within .ib-balk { display: flex; }
.ib-balk button, .ib-bulk button { border: 0; background: none; cursor: pointer; padding: .1rem .3rem; border-radius: 4px; font: inherit; color: inherit; }
.ib-balk button:hover, .ib-bulk button:hover { background: var(--gekozen); }
.ib-bulk { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; padding: .3rem .4rem; margin-bottom: .4rem;
  border: 1px solid var(--lijn); border-radius: var(--r); background: var(--gekozen); }
.ib-bulk[hidden] { display: none; }
.ib-bulk #ib-bulk-aantal { font-weight: 600; margin-right: .4rem; }
.ib-mapkop { display: flex; align-items: center; gap: .3rem; }
.ib-lexavia a.actief { background: var(--gekozen); font-weight: 600; }
.ib-lijst.erover { outline: 2px dashed var(--accent, #B89A62); outline-offset: -4px; }
.ib-sleephint { margin: .5rem .2rem 0; }
.klein-venster { width: min(440px, 95vw); }

/* Configuratie › Microsoft 365: tabblad per mailbox */
.m365-stip { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #b9b2a6; vertical-align: middle; }
.m365-stip.aan { background: #2f9e5a; } .m365-stip.fout { background: #c93a48; }
.m365-verbinding { border-left: 4px solid #b9b2a6; padding: .5rem .8rem; margin-bottom: 1rem; background: var(--vlak); }
.m365-verbinding.aan { border-left-color: #2f9e5a; } .m365-verbinding.fout { border-left-color: #c93a48; }
.m365-verbinding form.inline { display: inline-flex; gap: .5rem; align-items: center; margin-right: .8rem; }
.m365-verbreken { margin-top: .4rem; }
.m365-mailboxform fieldset { border: 0; padding: 0; margin: 0; }
.m365-keuze { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: .3rem 0; }
.m365-rechten td:not(:first-child), .m365-rechten th:not(:first-child) { text-align: center; width: 9rem; }
.m365-wissen summary { cursor: pointer; }

/* DANGER ZONE (bv. mailbox ontkoppelen/verwijderen): rood, wachtwoord ter bevestiging */
.kaart.danger-zone, .danger-zone { border: 2px solid #c93a48 !important; border-left-width: 6px !important; background: color-mix(in srgb, #c93a48 6%, var(--vlak, #fff)); }
.danger-zone > h2 { color: #b02a37; letter-spacing: .06em; margin-top: 0; }
.dz-actie { display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, #c93a48 35%, transparent); padding-top: .7rem; margin-top: .7rem; }
.dz-actie h3 { margin: 0 0 .2rem; color: #b02a37; font-size: 1rem; }
.dz-actie p { margin: 0; max-width: 46rem; }
.dz-velden { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.dz-velden input[type=password] { max-width: 13rem; }
.knop.gevaar { background: #b02a37; border-color: #b02a37; color: #fff; }
.knop.gevaar:hover { background: #8f1f2b; }
.scanadres { margin: -.2rem 0 .8rem; }
.m365-waarom { background: var(--vlak); border: 1px dashed var(--lijn); border-radius: var(--r); padding: .5rem .7rem; margin-top: .5rem; }
.m365-geheimform { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.m365-geheimform input[type=password] { min-width: 22rem; }
.ib-wacht { background: #fbf1cc; border-radius: 4px; padding: .3rem .45rem; }

/* R17: bijkomende telefoonnummers en WhatsApp op de contactfiche */
.telefoons { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--rand, #ddd); }
.telefoonrij { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .35rem; }
.telefoonrij select { max-width: 7.5rem; }
.telefoonrij input[name$="-nummer"] { max-width: 11rem; }
.telefoonrij input[name$="-omschrijving"] { flex: 1; min-width: 8rem; }
.telefoonrij div { display: contents; }
.telefoonrij label { display: none; }
.telefoonrij label.vinkje { display: inline-flex; }
.telefoonrij .errorlist { width: 100%; }
dd.telefoonregel .knopje.whatsapp { margin-left: .4rem; }
.dubbelfiche { padding: .15rem 0; }
.dubbels-zeker h2 { color: var(--fout, #b00020); }
.rolvorm { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .2rem 0; }
.rolvorm input, .rolvorm select { padding: .1rem .3rem; font-size: .9em; }
/* R17: WhatsApp-gesprek in het leesvenster */
.voorbeeldword .wa-bericht { max-width: 70%; margin: .35rem 0; padding: .4rem .7rem; border-radius: .8rem; background: #f1f1f1; }
.voorbeeldword .wa-bericht.wij { margin-left: auto; background: #dcf8c6; }
.voorbeeldword .wa-bericht p { margin: 0; }
.voorbeeldword .wa-kop span { font-size: .8em; color: #777; margin-left: .4rem; }
.voorbeeldword .wa-dag { text-align: center; font-size: .85em; color: #666; margin: 1rem 0 .3rem; font-weight: normal; }
.voorbeeldword .wa-systeem { text-align: center; font-size: .8em; color: #888; }
.voorbeeldword .wa-bijlage { font-size: .9em; color: #555; }
@media (prefers-color-scheme: dark) { .voorbeeldword .wa-bericht { background: #2b2b2b; } .voorbeeldword .wa-bericht.wij { background: #1f3b2a; } }
.nd-sorteerbalk { display: flex; gap: .3rem; align-items: center; padding: .3rem .5rem; color: var(--gedimd, #666); }
.nd-sorteerbalk .knopje.aan { font-weight: 600; text-decoration: underline; }
.iv-hoortniet { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-bottom: .3rem; }
.iv-hoortniet .iv-verplaats { display: inline-flex; gap: .2rem; align-items: center; }
.iv-lijst textarea.iv-tekst { width: 100%; min-height: 2.2rem; field-sizing: content; resize: vertical; }
.kerncijfers { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .4rem; margin: .5rem 0; }
.kerncijfers div { padding: .4rem .6rem; border: 1px solid var(--rand, #ddd); border-radius: .4rem; background: var(--kaart, #fafafa); }
.kerncijfers dt { font-size: .8em; color: var(--gedimd, #666); }
.kerncijfers dd { margin: 0; font-weight: 600; font-size: 1.05em; }
.kantoor-ai { display: grid; grid-template-columns: minmax(20rem, 2fr) 3fr; gap: 1rem; align-items: start; }
.kantoor-ai .ka-context { display: flex; flex-direction: column; gap: .25rem; margin: .6rem 0; }
.kantoor-ai .ka-opties { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.kantoor-ai textarea { width: 100%; }
@media (max-width: 900px) { .kantoor-ai { grid-template-columns: 1fr; } }
nav a.nav-ai { font-size: 1.15em; }
.kbo-blok.kbo-alarm { border: 2px solid var(--fout, #b00020) !important; background: #fff5f5; }
@media (prefers-color-scheme: dark) { .kbo-blok.kbo-alarm { background: #3a1f1f; } }

/* ---- licentie (R18): band bovenaan als de licentie verlopen is of het kantoor op alleen-lezen staat ---- */
.licentieband { background: var(--fout); color: #fff; text-align: center; font-size: .85rem; padding: .3rem .8rem; }

/* ---- masterconsole (R18) ---- */
.console-merk { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; }
.kerntegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: 0 0 1rem; }
.kerntegels > div { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: .6rem .8rem; }
.kerntegels dt { font-size: .78rem; color: var(--zacht); }
.kerntegels dd { margin: .15rem 0 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kerntegels.klein-tegels dd { font-size: 1.1rem; }
.kaart > .kerntegels > div { background: var(--kop-vlak); }
dl.gegevens { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .35rem 1rem; margin: 0 0 .5rem; }
dl.gegevens dt { color: var(--zacht); font-size: .85rem; }
dl.gegevens dd { margin: 0; overflow-wrap: anywhere; }
ul.aandacht { margin: 0; padding-left: 1.1rem; }
ul.aandacht li { margin: .15rem 0; }
.acties.wikkel { flex-wrap: wrap; }
.filterrij { display: flex; gap: .3rem; flex-wrap: wrap; }
form.inline { display: inline; }
.gevaar-zone { margin-top: 1rem; border: 1px solid #e3b5bb; border-radius: var(--r); padding: .5rem .8rem; }
.gevaar-zone summary { cursor: pointer; color: var(--fout); font-size: .9rem; }
.gevaar-kaart { border-color: #e3b5bb; }
.bevestigvorm { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.regelkaart { border-color: var(--accent); }
ol.stappen { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .25rem; }
ol.stappen li { padding: .3rem .6rem; border-left: 3px solid var(--lijn); color: var(--zacht); }
ol.stappen li.stap-klaar { border-color: var(--goed); color: var(--tekst); }
ol.stappen li.stap-nu { border-color: var(--accent); color: var(--tekst); font-weight: 600; background: var(--accent-vlak); }
table.cijfers td, table.cijfers th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelvak { overflow-x: auto; }
.scriptkaart summary { cursor: pointer; }
.scriptkaart pre { margin-top: .6rem; }
/* grafieken: één maat per grafiek, dunne lijn, rustig raster; waarden in tekstkleur, niet in de lijnkleur */
.grafieken { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.grafiek { margin: 0; position: relative; }
.grafiek figcaption { font-size: .85rem; color: var(--zacht); display: flex; justify-content: space-between; gap: .5rem; }
.grafiek-nu { color: var(--tekst); font-weight: 600; font-variant-numeric: tabular-nums; }
.grafiek svg { width: 100%; height: auto; display: block; }
.grafiek .raster { stroke: var(--lijn-zacht); stroke-width: 1; }
.grafiek .as { fill: var(--zacht); font-size: 10px; font-variant-numeric: tabular-nums; }
.grafiek .lijn { fill: none; stroke: var(--link); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafiek .punt { fill: var(--link); opacity: 0; }
.grafiek .punt.aan { opacity: 1; stroke: var(--vlak); stroke-width: 2; r: 4; }
.grafiek .kruis { stroke: var(--zacht); stroke-width: 1; stroke-dasharray: 3 3; }
.grafiek-tip { position: absolute; top: 1.4rem; pointer-events: none; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--r); padding: .15rem .45rem; font-size: .78rem; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.grafiek-leeg { padding: 2rem 0; text-align: center; }