/* BITB Documentenregister – opmaak. Basis gelijk aan de planning (Lexend, paars). */
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/fonts/lexend-latin-600-normal.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
:root {
  --paars: #5F2D91; --paars-donker: #3D1A78; --paars-licht: #F1EBF8; --navy: #143E79;
  --inkt: #1C2233; --grijs: #5B6375; --lijn: #D9DEE8; --lijn2: #EDF0F5; --vlak: #EEF1F6;
  --klaar: #2E7D32; --rood: #C62828; --oranje: #C2410C; --geel: #FFF4D6;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--vlak); color: var(--inkt); font: 400 14px/1.45 'Lexend', 'Segoe UI', system-ui, sans-serif; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--paars); outline-offset: 2px; border-radius: 6px; }
.verborgen { display: none !important; }
h1, h2 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; }
a { color: var(--paars); }

/* Kop */
.kop { background: #fff; border-bottom: 3px solid var(--paars); }
.kop-in { max-width: 1680px; margin: 0 auto; padding: 10px 22px; display: flex; align-items: center; gap: 14px; }
.kop img { height: 30px; }
.kop .titel { font-weight: 600; color: var(--grijs); }
.kop-nav { display: flex; gap: 4px; margin-left: 10px; }
.kop-nav a { text-decoration: none; color: var(--grijs); font-weight: 600; font-size: 14px; padding: 6px 12px; border-radius: 8px; }
.kop-nav a:hover { background: var(--paars-licht); color: var(--paars); }
.kop-nav a[aria-current="page"] { background: var(--paars-licht); color: var(--paars-donker); }
.kop .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--grijs); }
main { max-width: 1680px; margin: 0 auto; padding: 18px 22px 60px; }
body:has(.lijstkaart) main { padding-bottom: 0; }

/* Knoppen en schakelaars */
.knop { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 600; background: var(--paars); color: #fff; white-space: nowrap; }
.knop:hover { background: var(--paars-donker); }
.knop.licht { background: #fff; color: var(--inkt); border: 1px solid var(--lijn); }
.knop.licht:hover { background: var(--paars-licht); }
.knop.klein { padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.knop[disabled] { opacity: .45; cursor: default; }
.seg { display: inline-flex; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: #fff; padding: 7px 12px; font-weight: 600; font-size: 13px; color: var(--grijs); white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--lijn); }
.seg button[aria-pressed="true"] { background: var(--paars); color: #fff; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 12px; }
.tabs button { border: 1px solid var(--lijn); background: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 600; }
.tabs button[aria-selected="true"] { background: var(--paars); border-color: var(--paars); color: #fff; }
.balk-acties { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 12px 0 10px; }
.balk-acties input[type=search], .balk-acties select { padding: 7px 10px; border: 1px solid var(--lijn); border-radius: 9px; background: #fff; }
.balk-acties input[type=search] { min-width: 220px; }
.balk-acties label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--grijs); }
.ruimte { flex: 1; }

/* Kaarten en kerncijfers */
.kaart { background: #fff; border: 1px solid var(--lijn); border-radius: 14px; box-shadow: 0 5px 25px #1c22330a; }
.cijfers { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; }
.cijfer { background: #fff; border: 1px solid var(--lijn); border-radius: 12px; padding: 9px 14px; min-width: 140px; }
.cijfer strong { display: block; font-size: 19px; }
.cijfer small { color: var(--grijs); }
.cijfer.let-op strong { color: var(--oranje); }
.sub { color: var(--grijs); font-size: 13px; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--grijs); margin: 2px 0 8px; align-items: center; }
.legenda i { display: inline-block; width: 16px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }

/* Login */
.login { max-width: 380px; margin: 9vh auto; padding: 26px; }
.login h1 { margin-bottom: 4px; }
.login label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 13px; }
.login input { width: 100%; padding: 9px 11px; border: 1px solid var(--lijn); border-radius: 9px; }
.login .knop { width: 100%; justify-content: center; margin-top: 18px; }
.fout { color: var(--rood); font-size: 13px; margin-top: 10px; }

/* Projectlijst */
.plijst { width: 100%; border-collapse: collapse; }
.plijst th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--grijs); padding: 10px 12px; border-bottom: 1px solid var(--lijn); background: #fafbfd; }
.plijst td { padding: 10px 12px; border-bottom: 1px solid var(--lijn2); vertical-align: middle; }
.plijst tr.klik { cursor: pointer; }
.plijst tr.klik:hover td { background: var(--paars-licht); }
.plijst .code { font-weight: 700; color: var(--paars-donker); white-space: nowrap; }
.plijst .naam { font-weight: 600; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.label { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--vlak); color: var(--grijs); }
.label.actief { background: #E7F3E8; color: var(--klaar); }
.label.vervallen, .label.gearchiveerd { background: #F3F3F3; color: #888; }
.label.on_hold { background: var(--geel); color: #7a5b00; }
.leeg { padding: 40px 20px; text-align: center; color: var(--grijs); }

/* ── Gantt ───────────────────────────────────────────────────────────── */
.gscroll { overflow: auto; max-height: calc(100vh - 250px); min-height: 300px; border: 1px solid var(--lijn); border-radius: 12px; position: relative; background: #fff; }
.grid { position: relative; min-width: max-content; }
.grow { display: flex; height: var(--rh); border-bottom: 1px solid #f1f3f7; }
.glabel { position: sticky; left: 0; z-index: 6; background: #fff; width: var(--lw); flex: none; border-right: 1px solid var(--lijn); padding: 0 8px 0 10px; display: grid; grid-template-columns: var(--kol); align-items: center; column-gap: 6px; overflow: hidden; font-size: 13px; }
.knaam { display: flex; align-items: center; gap: 7px; min-width: 0; }
.knaam > span:last-child, .knaam > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knaam .aantal { font-size: 11px; color: var(--grijs); font-weight: 400; flex: none; }
.kc { font-size: 12px; color: var(--grijs); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kc.k-actiehouder { text-align: left; }
.ruit { width: 8px; height: 8px; background: var(--inkt); transform: rotate(45deg); flex: none; border-radius: 1px; }
.ghead .kc { font-size: 10.5px; font-weight: 700; color: var(--grijs); }
.grid.compact .glabel { font-size: 12px; }
.grid.compact .kc { font-size: 11px; }
.grid.compact .bar { top: 3px; height: calc(var(--rh) - 6px); font-size: 11px; }
/* Melding onderin (met Ongedaan maken) */
.melding { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; background: var(--inkt); color: #fff; border-radius: 12px; padding: 11px 16px; font-size: 14px; display: flex; gap: 12px; align-items: center; box-shadow: 0 10px 30px #0004; max-width: min(760px, 92vw); }
.melding .knop { background: #fff; color: var(--inkt); }
.melding.fout { background: var(--rood); }
.melding-sluit { background: none; border: 0; color: inherit; opacity: .7; font-size: 20px; line-height: 1; padding: 0 2px; margin-left: -2px; cursor: pointer; }
.melding-sluit:hover { opacity: 1; }

/* Detailvenster */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(520px, 94vw); box-shadow: 0 20px 60px #0004; }
dialog::backdrop { background: #1c223366; }
.dl-kop { padding: 16px 20px 6px; }
.dl-inh { padding: 6px 20px 8px; }
.dl-inh dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin: 0; font-size: 13px; }
.dl-inh dt { color: var(--grijs); }
.dl-inh dd { margin: 0; }
.dl-voet { padding: 12px 20px 16px; display: flex; gap: 8px; justify-content: flex-end; }
.dl-fout { padding: 0 20px; }
dialog.breed { width: min(640px, 96vw); }
.veld { margin: 10px 0; }
.veld label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.veld input[type=text], .veld input[type=url], .veld input[type=search], .veld select { width: 100%; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 9px; background: #fff; }
.veld .sub { margin-top: 4px; }
.rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.keuzelijst { max-height: 220px; overflow: auto; border: 1px solid var(--lijn); border-radius: 9px; margin-top: 6px; }
.keuzelijst button { display: flex; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--lijn2); background: #fff; padding: 7px 10px; }
.keuzelijst button:hover, .keuzelijst button[aria-selected="true"] { background: var(--paars-licht); }
.keuzelijst b { color: var(--paars-donker); min-width: 90px; }
.gevonden { background: #EEF7EF; border: 1px solid #cfe6d1; border-radius: 9px; padding: 9px 11px; font-size: 13px; margin-top: 8px; }
.gevonden b { color: var(--klaar); }

/* Projectlijst */
.tellers { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.tel { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.tel.nieuw { background: #E3F2E5; color: #1B5E20; }
.tel.revisie { background: #FFF1D6; color: #8A5300; }
.tel.verwijderd { background: #FBE4E4; color: #A12222; }
.foutje { color: var(--rood); font-weight: 600; font-size: 12px; }
.bronnamen { font-size: 12px; color: var(--grijs); }

/* Projectpagina */
.projkop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.projkop h1 { font-size: 20px; }
.projkop .terug { text-decoration: none; font-weight: 600; font-size: 20px; }
.projkop .meta { color: var(--grijs); font-size: 13px; }
.kopregel { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 2px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { background: #fff; border: 1px solid var(--lijn); border-radius: 99px; padding: 3px 11px; font-size: 12px; color: var(--grijs); white-space: nowrap; }
.chip b { color: var(--inkt); font-weight: 600; margin-right: 3px; }
.chip.nieuw { border-color: #bfe0c3; background: #F1F9F2; } .chip.nieuw b { color: #1B5E20; }
.chip.revisie { border-color: #f1d49a; background: #FFF8EA; } .chip.revisie b { color: #8A5300; }
.chip.verwijderd { border-color: #f0c0c0; background: #FDF2F2; } .chip.verwijderd b { color: #A12222; }
.chip.bezig { border-color: #cdb8e6; background: var(--paars-licht); color: var(--paars-donker); }
.banner { border-radius: 10px; padding: 9px 13px; margin: 10px 0; font-size: 13px; }
.banner.fout { background: #FDF2F2; border: 1px solid #f0c0c0; color: #8c1d1d; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 10px; }
.filters input[type=search], .filters select { padding: 7px 10px; border: 1px solid var(--lijn); border-radius: 9px; background: #fff; max-width: 210px; }
.filters input[type=search] { min-width: 240px; }

.dlijst { width: 100%; border-collapse: collapse; font-size: 13px; }
.dlijst th { position: sticky; top: 0; z-index: 2; text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: #fff; padding: 9px 10px; border-bottom: 0; background: var(--paars); white-space: nowrap; }
.dlijst th button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.dlijst th button { cursor: pointer; opacity: .85; }
.dlijst th button:hover { opacity: 1; text-decoration: underline; }
.dlijst th button[aria-sort] { color: #fff; opacity: 1; }
.dlijst th .c-sel input, .dlijst th.c-sel input { accent-color: #fff; }
.dlijst td { padding: 7px 10px; border-bottom: 1px solid var(--lijn2); vertical-align: top; }
.dlijst tr.doc { cursor: pointer; }
.dlijst tr.doc:hover td { background: var(--paars-licht); }
.dlijst tr.prod td { background: var(--navy); color: #fff; font-weight: 600; font-size: 13.5px; padding: 8px 12px; }
.dlijst tr.prod td small { font-weight: 400; opacity: .8; margin-left: 8px; }
.dlijst tr.typ td { background: #DDE7F3; color: var(--navy); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 5px 12px; }
.dlijst .c-datum { white-space: nowrap; width: 92px; font-variant-numeric: tabular-nums; }
.dlijst .c-docnr { white-space: nowrap; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.dlijst .c-versie { white-space: nowrap; font-weight: 600; text-align: center; width: 60px; }
.dlijst .c-fase { color: var(--grijs); font-size: 12px; }
.dlijst .c-status { white-space: nowrap; width: 130px; }
.dlijst .c-gew { white-space: nowrap; color: var(--grijs); font-size: 12px; width: 120px; }
.nvt { color: #bbb; font-family: inherit; font-weight: 400; }
.nc { color: #999; font-style: italic; font-size: 12px; }
.badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-left: 6px; vertical-align: 1px; text-transform: uppercase; letter-spacing: .03em; }
.badge.nieuw { background: #2E7D32; color: #fff; }
.badge.revisie { background: #E69100; color: #fff; }
.badge.verwijderd { background: #C62828; color: #fff; }
tr.weg td { color: #999; }
tr.weg .omschr { text-decoration: line-through; }
.status { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
.sdatum { display: block; font-size: 11px; color: var(--grijs); margin-top: 2px; }
.sdatum.verlopen { color: var(--rood); font-weight: 600; }
.eigen { color: var(--paars); font-size: 11px; margin-left: 4px; }
.versies-knop { border: 0; background: none; color: var(--paars); font-size: 12px; padding: 0; margin-left: 6px; font-weight: 600; }
tr.hist td { background: #FAFBFD; font-size: 12px; color: var(--grijs); padding-top: 4px; padding-bottom: 4px; }
tr.hist .c-datum { padding-left: 22px; }
.lijstkaart { overflow: auto; max-height: calc(100vh - 290px); }

/* v0.3: bewerken */
.banner.info { background: #F3F6FB; border: 1px solid var(--lijn); color: var(--grijs); }
.dlijst .c-sel { width: 34px; text-align: center; padding-left: 8px; padding-right: 4px; }
.dlijst .c-sel input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--paars); }
.dlijst tr.gekozen td { background: #F6F0FC; }
.status-knop { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.status-knop:hover .status { outline: 2px solid #5F2D9140; }
.status-knop.leeg { color: transparent; font-size: 11.5px; font-weight: 600; border: 1px dashed transparent; border-radius: 99px; padding: 1px 8px; }
tr.doc:hover .status-knop.leeg, .status-knop.leeg:focus-visible { color: var(--paars); border-color: #cdb8e6; }
.omschr-knop { border: 0; background: none; color: transparent; padding: 0 4px; margin-left: 4px; font-size: 13px; }
tr.doc:hover .omschr-knop, .omschr-knop:focus-visible { color: var(--paars); }
.link-knop { border: 0; background: none; color: var(--rood); padding: 0; font-size: 12px; text-decoration: underline; }
.bulk { position: sticky; top: 0; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--paars-donker); color: #fff; border-radius: 12px; padding: 8px 14px; margin: 0 0 8px; }
.bulk label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.bulk select, .bulk input { padding: 5px 8px; border-radius: 8px; border: 0; color: var(--inkt); }
.bulk .knop { background: #fff; color: var(--paars-donker); }
.bulk .knop.licht { background: transparent; color: #fff; border-color: #ffffff66; }
.knop.rood { color: var(--rood); border-color: #f0c0c0; }
.knop.rood:hover { background: #FDF2F2; }
.vink { display: inline-flex !important; gap: 8px; align-items: center; font-weight: 400 !important; }
details.gevaar { margin-top: 14px; border-top: 1px solid var(--lijn2); padding-top: 10px; }
details.gevaar summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--grijs); }
.gekozen-project { display: flex; gap: 10px; align-items: center; background: var(--paars-licht); border: 1px solid #cdb8e6; border-radius: 9px; padding: 8px 11px; margin-top: 6px; }
.gekozen-project b { color: var(--paars-donker); }
.dl-voet .ruimte { flex: 1; }

/* v0.4 */
.scan-icoon { border: 0; background: none; color: var(--paars); font-size: 14px; font-weight: 700; padding: 0 0 0 6px; line-height: 1; cursor: pointer; }
.scan-icoon:hover { color: var(--paars-donker); }
.opties { display: grid; gap: 6px; margin: 10px 0; }
.opties label { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.opties input { accent-color: var(--paars); }

/* v0.5 – delen */
.deeltabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.deeltabel td { padding: 9px 6px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.deeltabel td.acties { text-align: right; white-space: nowrap; }
.deeltabel td.acties .knop { margin: 0 0 4px 4px; }
.deeltabel .sub { font-size: 12px; margin-top: 2px; }
.deeltabel.log td { padding: 5px 6px; font-size: 12.5px; }
.deeltabel.log .tijd { white-space: nowrap; color: var(--grijs); }
.deeltabel .label { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-left: 4px; vertical-align: 1px; }
.deeltabel .label.aan { background: #E3F2E5; color: #1B5E20; }
.deeltabel .label.uit { background: #F1F1F4; color: #6B7280; }
.opties.inspring { margin: 2px 0 0 24px; }
.veld input[type=date] { padding: 7px 10px; border: 1px solid var(--lijn); border-radius: 9px; }
.dl-inh code { font-size: 11.5px; word-break: break-all; }
#delenVenster .dl-inh { max-height: 66vh; overflow: auto; }
.veld .opties label { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-weight: 400; font-size: 14px; margin: 0; }
.veld .opties label .sub { font-size: 12.5px; }
.teamchips { display: flex; flex-wrap: wrap; gap: 6px; }
.teamchip { border: 1px solid var(--lijn); background: #fff; border-radius: 99px; padding: 4px 11px; font-size: 13px; cursor: pointer; color: var(--inkt); }
.teamchip:hover { background: var(--paars-licht); border-color: #cdb8e6; }
.teamchip.heeft { color: var(--grijs); }
.teamchip b { font-weight: 600; }
.contactzoek { position: relative; }
.treffers { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--lijn); border-radius: 10px; box-shadow: 0 10px 30px #0002; max-height: 280px; overflow: auto; }
.treffers button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.treffers button:hover, .treffers button:focus { background: var(--paars-licht); }
.treffers button .sub { display: block; font-size: 12px; }
.treffers .rol { font-size: 11px; font-weight: 700; color: var(--paars); margin-left: 4px; }
.treffers .geen { padding: 10px 12px; }
#dfContact .ok { color: #1B5E20; font-weight: 600; }
#dfContact .waarschuwing { color: #8A5300; }
/* v0.5.6 – teamlinks */
.teamchip .vink { display: none; color: var(--paars); margin-right: 4px; font-weight: 700; }
.teamchip[aria-pressed="true"] { background: var(--paars-licht); border-color: var(--paars); }
.teamchip[aria-pressed="true"] .vink { display: inline; }
.teamchip.alle { border-style: dashed; color: var(--paars); font-weight: 600; }
.teamchip .heeft { font-size: 11px; }
details.zelf { margin-top: 8px; font-size: 13.5px; }
details.zelf summary { cursor: pointer; color: var(--paars); font-weight: 600; }
.zelfrij { display: flex; gap: 6px; margin-top: 6px; }
.zelfrij input { flex: 1; padding: 7px 10px; border: 1px solid var(--lijn); border-radius: 9px; min-width: 0; }
.leden { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.leden > .sub { width: 100%; }
.lid { display: inline-flex; align-items: center; gap: 6px; background: #F3F6FB; border: 1px solid var(--lijn); border-radius: 10px; padding: 4px 4px 4px 10px; font-size: 13px; font-weight: 600; }
.lid i { font-style: normal; font-weight: 400; color: var(--paars); font-size: 11.5px; }
.lid .sub { font-weight: 400; font-size: 11.5px; }
.lid button { border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--grijs); padding: 0 6px; line-height: 1; }
.lid button:hover { color: var(--rood); }

/* v0.5.8 – documentlijsten als labels in de projectenlijst (zoals de planningen in de planningstool) */
.bronlabels { line-height: 2; }
.bronlabel { display: inline-block; background: var(--paars-licht); color: var(--paars-donker); font-weight: 600; font-size: 12.5px; padding: 3px 11px; border-radius: 99px; margin: 2px 6px 2px 0; text-decoration: none; white-space: nowrap; line-height: 1.4; }
.bronlabel:hover { background: #E2D6F1; }
.bronlabel.uit { background: #F1F1F4; color: var(--grijs); }
.bronlabel.fout { background: #FDF2F2; color: #A12222; }