/* BITB Planning – opmaak. Huisstijl van fotodoc/actielijst (Lexend, paars),
   indeling en balkenplanning naar de projectplanning van BetonRestore. */
@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; }

/* 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; }
.minibalk { position: relative; height: 8px; background: var(--lijn2); border-radius: 4px; min-width: 160px; }
.minibalk i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.minibalk b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--oranje); }
.voortgang { font-size: 12px; color: var(--grijs); white-space: nowrap; }
.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; }
.grid.compact .ms { top: 4px; width: 13px; height: 13px; }
.grid.compact .fasebalk { top: 8px; height: 6px; }
.gtrack { position: relative; flex: none; width: var(--tw); }
.grow[data-rij]:hover .glabel { background: #faf7fd; }
.grow.vervallen .knaam span { text-decoration: line-through; color: #999; }

.ghead { position: sticky; top: 0; z-index: 8; background: #fff; box-shadow: 0 1px 0 var(--lijn); }
.ghead .grow { border-bottom: 0; }
.ghead .glabel { z-index: 9; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--grijs); letter-spacing: .04em; }
.kopmaand { height: 22px !important; background: var(--paars-donker); }
.kopmaand .glabel { background: var(--paars-donker); }
.mcel { position: absolute; top: 0; height: 100%; padding: 3px 6px; font-size: 11px; font-weight: 600; color: #fff; border-left: 1px solid #ffffff40; white-space: nowrap; }
.kopweek { height: 30px !important; }
.kopweek .glabel { align-items: end; padding-bottom: 5px; }
.wkcel { position: absolute; top: 0; height: 100%; border-left: 1px solid var(--lijn); font-size: 11px; padding: 3px 0 0 5px; color: var(--inkt); font-weight: 600; white-space: nowrap; overflow: hidden; }
.wkcel small { display: block; font-weight: 400; color: var(--grijs); font-size: 10px; margin-top: -2px; }
.wkcel.nu { background: var(--paars-licht); color: var(--paars-donker); }
.kopdag { height: 18px !important; }
.dcel { position: absolute; top: 0; height: 100%; text-align: center; font-size: 10px; color: #9aa2b3; }
.dcel.wkend { color: #c4c9d4; }

.gbody { position: relative; }
.achter { position: absolute; top: 0; bottom: 0; left: var(--lw); width: var(--tw); pointer-events: none; z-index: 0; }
.wkendkol { position: absolute; top: 0; bottom: 0; background: #f6f7fa; }
.vrij { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #eceef3 0 4px, #f8f9fb 4px 8px); }
.wklijn { position: absolute; top: 0; bottom: 0; border-left: 1px solid #e6e9f0; }
.vandaaglijn { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--oranje); opacity: .7; z-index: 4; }
.pijlen { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; }
.pijlen path { fill: none; stroke: #a3abbb; stroke-width: 1.2; }

.grow.fase { background: #f7f5fb; }
.grow.fase .glabel { background: #f7f5fb; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.grow.fase .pijl { color: var(--paars); width: 10px; }
.fbewerk { border: 0; background: transparent; color: var(--paars); font-size: 13px; padding: 0 5px; margin-left: 4px; border-radius: 5px; cursor: pointer; opacity: 0; }
.grow.fase:hover .fbewerk, .fbewerk:focus-visible { opacity: 1; }
.fbewerk:hover { background: var(--paars-licht); }
@media (hover: none) { .fbewerk { opacity: .7; } }
.fasebalk { position: absolute; top: 9px; height: 7px; background: var(--paars-donker); border-radius: 2px; opacity: .8; }
.fasebalk::before, .fasebalk::after { content: ''; position: absolute; bottom: -4px; border: 4px solid transparent; border-top-color: var(--paars-donker); }
.fasebalk::before { left: 0; border-left-color: var(--paars-donker); }
.fasebalk::after { right: 0; border-right-color: var(--paars-donker); }

.bar { position: absolute; top: 4px; height: calc(var(--rh) - 8px); border-radius: 5px; font-size: 11.5px; font-weight: 600; padding: 0 7px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; cursor: grab; z-index: 2; box-shadow: 0 1px 2px #0002; user-select: none; touch-action: none; }
.bar span { position: relative; overflow: hidden; text-overflow: ellipsis; }
.bar .vg { position: absolute; left: 0; top: 0; bottom: 0; background: #ffffff38; border-right: 2px solid #ffffff90; }
.bar .h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.bar .h.l { left: 0; } .bar .h.r { right: 0; }
.bar:hover .h { background: #ffffff40; }
.bar.klaar { opacity: .55; }
.bar.vast { cursor: default; background-image: repeating-linear-gradient(135deg, #ffffff30 0 5px, transparent 5px 10px); }
.bar.weg { opacity: .35; }
.bar.sleept, .ms.sleept { opacity: .85; cursor: grabbing; outline: 2px solid var(--inkt); z-index: 5; }
.bar.mee, .ms.mee { outline: 2px dashed var(--oranje); outline-offset: 1px; z-index: 4; }
.blabel, .mslabel { position: absolute; top: 0; height: var(--rh); display: flex; align-items: center; font-size: 11.5px; color: var(--grijs); white-space: nowrap; pointer-events: none; z-index: 2; }
.ms { position: absolute; top: 6px; width: 14px; height: 14px; background: var(--k); transform: rotate(45deg); border-radius: 2px; cursor: grab; z-index: 3; box-shadow: 0 1px 2px #0003; touch-action: none; }
.ms.klaar { opacity: .5; } .ms.vast { cursor: default; }
.bl { position: absolute; bottom: 2px; height: 3px; border-radius: 2px; background: #b9bfcc; z-index: 1; }
.bl.anders { background: var(--oranje); opacity: .55; }

.tip { position: fixed; z-index: 50; max-width: 320px; background: var(--inkt); color: #fff; font-size: 12px; line-height: 1.45; padding: 8px 11px; border-radius: 8px; pointer-events: none; box-shadow: 0 6px 20px #0003; }
.tipbl { color: #ffc9a8; } .tipfout { color: #ffb4b4; font-weight: 600; }

/* 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; }

/* ── Projectpagina: schermvullend, zo veel mogelijk taakregels ─────────── */
body.vol { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.vol .kop-in { padding: 6px 16px; max-width: none; }
body.vol .kop img { height: 24px; }
body.vol main { flex: 1; min-height: 0; min-width: 0; width: 100%; display: flex; flex-direction: column; max-width: none; padding: 8px 16px 10px; }
body.vol #gantt { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
body.vol .gscroll { flex: 1; max-height: none; min-height: 0; min-width: 0; }
.projkop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.projkop h1 { font-size: 18px; }
.projkop .terug { text-decoration: none; font-weight: 600; font-size: 18px; }
.projkop .meta { color: var(--grijs); font-size: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.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.let-op { border-color: #f3c2a6; background: #fff6f0; } .chip.let-op b { color: var(--oranje); }
.werkbalk { display: flex; gap: 6px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.werkbalk .seg button { padding: 5px 10px; font-size: 12.5px; }
.werkbalk .knop { padding: 5px 11px; font-size: 13px; border-radius: 9px; }
.werkbalk input[type=search], .werkbalk select { padding: 5px 9px; border: 1px solid var(--lijn); border-radius: 9px; background: #fff; font-size: 13px; }
.werkbalk input[type=search] { width: 220px; }
.werkbalk select { max-width: 260px; }
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-paneel { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 230px; background: #fff; border: 1px solid var(--lijn); border-radius: 12px; box-shadow: 0 12px 30px #1c223322; padding: 8px; }
.menu-paneel.links { right: auto; left: 0; }
.menu-paneel label, .menu-paneel button.item { display: flex; gap: 8px; align-items: center; width: 100%; padding: 6px 8px; border-radius: 8px; font-size: 13px; background: none; border: 0; text-align: left; }
.menu-paneel label:hover, .menu-paneel button.item:hover { background: var(--paars-licht); }
.menu-paneel .kopje { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--grijs); padding: 6px 8px 2px; }
.menu-paneel hr { border: 0; border-top: 1px solid var(--lijn2); margin: 6px 0; }
.menu-paneel .legenda { display: grid; gap: 6px; padding: 4px 8px; margin: 0; }
.grow.fase .kc { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Taakregels verslepen en kleur per actiehouder */
.greep { font-style: normal; color: #b3b9c6; cursor: grab; font-size: 13px; line-height: 1; margin-left: -4px; opacity: 0; flex: none; user-select: none; touch-action: none; }
.grow[data-rij]:hover .greep { opacity: 1; }
.greep:hover { color: var(--paars); }
.grow.rijsleept { background: var(--paars-licht); opacity: .7; }
.grow.rijsleept .glabel { background: var(--paars-licht); }
.invoeglijn { position: absolute; left: 0; right: 0; height: 3px; background: var(--paars); z-index: 20; pointer-events: none; border-radius: 2px; box-shadow: 0 0 0 2px #fff; }
.bol { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.menu-paneel .rij2 { display: flex; gap: 4px; padding: 2px 8px 6px; }
.menu-paneel .rij2 label { width: auto; flex: 1; justify-content: center; border: 1px solid var(--lijn); border-radius: 8px; padding: 5px 6px; }
.menu-paneel .rij2 input { display: none; }
.menu-paneel .rij2 label:has(input:checked) { background: var(--paars); border-color: var(--paars); color: #fff; }
.kc.sorteer { cursor: pointer; user-select: none; border-radius: 5px; padding: 1px 3px; margin: -1px -3px; }
.kc.sorteer:hover { background: var(--paars-licht); color: var(--paars-donker); }
.kc.sorteer.aan { color: var(--paars); }

/* ── Koppelingen ─────────────────────────────────────────────────────── */
.pijlen .pijl .lijn { fill: none; stroke: #a3abbb; stroke-width: 1.3; }
.pijlen .pijl .raak { fill: none; stroke: transparent; stroke-width: 10; pointer-events: stroke; cursor: pointer; }
.pijlen .pijl:hover .lijn { stroke: var(--paars); stroke-width: 2.2; }
.pijlen .pijl.rood .lijn { stroke: #D32F2F; stroke-width: 1.8; stroke-dasharray: 4 3; }
.pijlen .pijl.rood:hover .lijn { stroke-width: 2.6; }
.koppel { position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--paars); cursor: crosshair; z-index: 5; opacity: 0; transition: opacity .1s; touch-action: none; }
.grow[data-rij]:hover .koppel { opacity: 1; }
.koppel:hover { background: var(--paars); transform: scale(1.15); }
.koppelmodus .koppel { opacity: 0 !important; }
.koppelmodus .bar, .koppelmodus .ms { cursor: crosshair; }
.koppellijn { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 30; overflow: visible; }
.koppellijn line { stroke: var(--paars); stroke-width: 2; stroke-dasharray: 5 4; }
.koppeldoel { outline: 3px solid var(--paars) !important; outline-offset: 2px; }
.bar.tevroeg, .ms.tevroeg { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #D32F2F; }

/* ── Kritieke pad ────────────────────────────────────────────────────── */
.bar.kritiek { box-shadow: 0 0 0 1px #8e1b1b inset; }
.bar.niet-kritiek, .ms.niet-kritiek { opacity: .5; }
.bar.niet-kritiek:hover, .ms.niet-kritiek:hover { opacity: .9; }
.staart { position: absolute; top: calc(50% - 1px); height: 2px; background: repeating-linear-gradient(90deg, #9aa3b5 0 4px, transparent 4px 7px); z-index: 1; pointer-events: none; }
.staart::after { content: ''; position: absolute; right: -1px; top: -3px; width: 2px; height: 8px; background: #9aa3b5; }

/* ── Ongedaan maken / opnieuw ────────────────────────────────────────── */
.knop.icoon { padding: 5px 9px; font-size: 15px; line-height: 1; }
.knop.icoon[disabled] { opacity: .35; }
.chip.kritiek b { color: #D32F2F; }

/* ── Formulieren (taak, instellingen) ────────────────────────────────── */
dialog.breed { width: min(640px, 96vw); }
.dl-fout { padding: 0 20px; min-height: 0; }
.formulier { display: grid; grid-template-columns: 120px 1fr; gap: 9px 12px; align-items: center; font-size: 13px; }
.formulier > label:not(.vink) { color: var(--grijs); font-weight: 600; }
.formulier input[type=text], .formulier input[type=date], .formulier input[type=number], .formulier select, .formulier textarea {
  padding: 6px 9px; border: 1px solid var(--lijn); border-radius: 8px; background: #fff; font-size: 13px; width: 100%; }
.formulier textarea { min-height: 54px; resize: vertical; }
.formulier .regel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.formulier .regel input[type=date] { width: 138px; }
.formulier .regel { column-gap: 6px; }
.formulier .regel input[type=number] { width: 72px; }
.formulier .vink { display: inline-flex; gap: 6px; align-items: center; margin-right: 14px; }
.formulier .info { grid-column: 1 / -1; background: var(--vlak); border-radius: 10px; padding: 8px 12px; color: var(--grijs); font-size: 12px; line-height: 1.6; }
.formulier .kal-lijst { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.knop.gevaar { background: #fff; color: var(--rood); border: 1px solid #F0B7B7; margin-right: auto; }
.knop.gevaar:hover { background: #fdecec; }

/* ── Taaknummers en faseletters ──────────────────────────────────────── */
.tnr { font-size: 10.5px; color: #8a93a6; font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; flex: none; }
.fletter { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--paars-donker); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; flex: none; }
.grid.compact .fletter { height: 15px; min-width: 15px; font-size: 10px; }
dialog.extrabreed { width: min(1000px, 96vw); }
.teamlijst { max-height: 55vh; overflow: auto; border: 1px solid var(--lijn); border-radius: 10px; }
.teamlijst .plijst td { padding: 7px 10px; font-size: 13px; }
.teamlijst .plijst th { position: sticky; top: 0; z-index: 1; }

/* ── Pagina voor actiehouders (/p/<code>), telefoon eerst ────────────── */
body.ah main { max-width: 760px; padding: 12px 14px 60px; }
body.ah .kop-in { padding: 8px 14px; }
.ah-laden { padding: 40px 0; text-align: center; color: var(--grijs); }
.ah-intro { margin: 6px 0 10px; }
.ah-intro h1 { font-size: 20px; margin: 2px 0 4px; }
.ah-voor { font-size: 14px; color: var(--grijs); }
.ah-naam { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--grijs); }
.ah-naam input { font-size: 16px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 10px; background: #fff; }
.ah-tabs { margin: 8px 0; } .ah-tabs button { flex: 1; }
.ah-groep { margin: 10px 0; }
.ah-groep > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 6px 2px; list-style: none; }
.ah-groep > summary::before { content: '▸ '; color: var(--paars); } .ah-groep[open] > summary::before { content: '▾ '; }
.ah-kaart { background: #fff; border: 1px solid var(--lijn); border-radius: 14px; padding: 13px 14px; margin: 8px 0; box-shadow: 0 3px 14px #1c223310; }
.ah-kaart.klaar { opacity: .7; }
.ah-kop { display: flex; gap: 8px; align-items: baseline; }
.ah-kop h2 { font-size: 16px; margin: 0; line-height: 1.3; }
.ah-nr { font-size: 12px; color: #8a93a6; font-variant-numeric: tabular-nums; flex: none; }
.ah-fase { font-size: 12px; color: var(--grijs); margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.ah-datum { font-size: 14px; margin-top: 6px; font-weight: 600; }
.ah-status { font-size: 13px; color: var(--grijs); margin-top: 2px; }
.let { color: var(--oranje); } .ok { color: var(--klaar); }
.ah-rel { margin-top: 8px; font-size: 13px; }
.ah-rel > span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--grijs); font-weight: 700; }
.ah-rel ul { margin: 2px 0 0; padding-left: 18px; } .ah-rel li { margin: 2px 0; }
.ah-melding { margin-top: 10px; font-size: 13px; padding: 7px 10px; border-radius: 9px; background: var(--vlak); }
.ah-melding.m-gereed { background: #E7F3E8; } .ah-melding.m-vertraagd { background: #FCEEE6; } .ah-melding.m-loopt { background: #E6EFFA; }
.ah-knoppen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.ah-k { border: 1px solid var(--lijn); background: #fff; border-radius: 11px; padding: 11px 4px; font-weight: 700; font-size: 14px; }
.ah-k.gereed { color: var(--klaar); } .ah-k.loopt { color: #1565C0; } .ah-k.vertraagd { color: var(--oranje); }
.ah-k.aan.gereed { background: var(--klaar); color: #fff; border-color: var(--klaar); }
.ah-k.aan.loopt { background: #1565C0; color: #fff; border-color: #1565C0; }
.ah-k.aan.vertraagd { background: var(--oranje); color: #fff; border-color: var(--oranje); }
.ah-form { margin-top: 12px; display: grid; gap: 10px; }
.ah-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--grijs); }
.ah-form input[type=date], .ah-form textarea { font-size: 16px; padding: 9px 11px; border: 1px solid var(--lijn); border-radius: 10px; background: #fff; }
.ah-form textarea { min-height: 70px; }
.ah-form input[type=range] { width: 100%; accent-color: var(--paars); }
.f-foto-l { border: 1px dashed #b9a6d6; border-radius: 10px; padding: 11px; text-align: center; color: var(--paars) !important; cursor: pointer; }
.f-foto-l input { display: none; }
.f-voorbeelden { display: flex; gap: 8px; flex-wrap: wrap; }
.f-vb { position: relative; } .f-vb img { width: 84px; height: 84px; object-fit: cover; border-radius: 9px; display: block; }
.f-vb button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--inkt); color: #fff; line-height: 1; }
.ah-acties { display: flex; gap: 8px; justify-content: flex-end; }
.ah-acties .knop { padding: 11px 16px; font-size: 15px; }
.ah-voet { margin-top: 24px; text-align: center; }
.ah-planning .ah-pfase { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--paars-donker); }
.ah-prij { display: grid; grid-template-columns: 1fr 34%; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--lijn2); font-size: 13px; }
.ah-prij.mijn { background: var(--paars-licht); border-radius: 8px; padding: 7px 8px; }
.ah-prij.klaar { opacity: .6; }
.ah-prij .minibalk { min-width: 0; }
body.ah .melding { bottom: 16px; }

/* ── Meldingeninbox (BITB) ───────────────────────────────────────────── */
.chipknop { cursor: pointer; font: inherit; font-size: 12px; }
.mbadge { font-style: normal; color: var(--oranje); font-size: 12px; flex: none; }
/* Meldingen van actiehouders: kleurband per soort, gewone taal */
.mk { --mk: var(--grijs); --mk-licht: #F3F4F7; border: 1px solid var(--lijn); border-radius: 12px; margin: 10px 0; font-size: 13.5px; overflow: hidden; background: #fff; }
.mk.m-gereed, .mk.m-bevestigd { --mk: var(--klaar); --mk-licht: #E8F5E9; }
.mk.m-loopt { --mk: #1565C0; --mk-licht: #E3EEFB; }
.mk.m-vertraagd { --mk: var(--oranje); --mk-licht: #FDEDE3; }
.mk.m-wacht { --mk: #A16207; --mk-licht: #FEF6D8; }
.mk-band { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--mk-licht); border-bottom: 1px solid color-mix(in srgb, var(--mk) 20%, transparent); flex-wrap: wrap; }
.mk-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--mk); color: #fff; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.mk-label { font-weight: 700; color: var(--mk); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.mk-taak { font-weight: 600; color: var(--inkt); }
.mk-wanneer { margin-left: auto; color: var(--grijs); font-size: 12px; }
.mk-lijf { padding: 10px 14px 12px; display: grid; gap: 8px; }
.mk-zin { font-size: 14px; }
.mk-dagen { display: inline-block; background: var(--mk); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 600; margin-left: 4px; }
.mk-balk { position: relative; height: 18px; background: #EEF1F6; border-radius: 999px; overflow: hidden; max-width: 340px; }
.mk-balk i { position: absolute; inset: 0 auto 0 0; background: var(--mk); border-radius: 999px; }
.mk-balk span { position: relative; font-size: 11.5px; font-weight: 700; padding-left: 8px; line-height: 18px; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.35); }
.mk-tekst { background: var(--vlak); border-radius: 8px; padding: 7px 10px; white-space: pre-wrap; }
.mk-tekst-kop { display: block; font-size: 11px; font-weight: 700; color: var(--grijs); text-transform: uppercase; letter-spacing: .04em; }
.mk-fotos { display: flex; gap: 6px; flex-wrap: wrap; } .mk-fotos img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; display: block; }
.mk-effect { border: 1px dashed var(--lijn); border-radius: 8px; padding: 7px 10px; background: #FAFBFD; }
.mk-effect.gezien { color: var(--grijs); }
.mk-effect-kop { font-size: 11px; font-weight: 700; color: var(--paars); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.mk-effect ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.mk-effect li::before { content: '→'; color: var(--grijs); margin-right: 6px; }
.mk-effect li.let { color: var(--rood); font-weight: 600; } .mk-effect li.let::before { content: '⚠'; color: var(--rood); }
.mk-effect li.goed { color: var(--klaar); font-weight: 600; } .mk-effect li.goed::before { content: '✓'; color: var(--klaar); }
.mk-acties { display: flex; gap: 8px; align-items: center; }
.mk-acties[hidden] { display: none; }
.knop.mk-ja { background: var(--klaar); } .knop.mk-ja:hover { background: #1B5E20; }
.knop.mk-nee { background: var(--rood); } .knop.mk-nee:hover { background: #8E1B1B; }
.mk-afwijs { display: grid; gap: 4px; background: #FDECEC; border-radius: 8px; padding: 8px 10px; }
.mk-afwijs[hidden] { display: none; }
.mk-afwijs label { font-weight: 600; font-size: 13px; }
.mk-afwijs-regel { display: flex; gap: 6px; }
.mk-reden { flex: 1; padding: 7px 10px; border: 1px solid var(--lijn); border-radius: 8px; font-size: 13px; }
.mk-uitleg { background: var(--paars-licht); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.mk-tellers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mk-tellers span { background: #fff; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; color: var(--paars); }
.mk-leeg { background: #E8F5E9; color: var(--klaar); border-radius: 10px; padding: 12px 14px; font-weight: 600; }
.mk-klaar summary { cursor: pointer; color: var(--grijs); margin-top: 12px; font-weight: 600; }
.mk.mk-oud { display: flex; align-items: center; gap: 10px; padding: 6px 12px; margin: 6px 0; font-size: 13px; flex-wrap: wrap; }
.mk-oud .mk-ic { width: 20px; height: 20px; font-size: 11px; }
.mk-oordeel { margin-left: auto; font-weight: 600; } .mk-oordeel.ok { color: var(--klaar); } .mk-oordeel.nee { color: var(--rood); }
.ah-form textarea, .ah-naam input { font-family: inherit; }

/* Teller nieuwe meldingen in de projectlijst */
.mteller { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--oranje); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; vertical-align: 1px; }
.mteller:hover { filter: brightness(1.1); }

/* Import */
.imp-tel { margin: 6px 0; }
.imp-let { background: var(--geel); padding: 6px 10px; border-radius: 6px; }
.imp-w { margin: 6px 0; } .imp-w summary { cursor: pointer; color: var(--oranje); font-weight: 600; }
.imp-w ul { margin: 6px 0 0; padding-left: 20px; max-height: 180px; overflow: auto; font-size: 13px; }
.imp-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.imp-tab th { text-align: left; font-weight: 600; color: var(--grijs); padding: 4px 6px; border-bottom: 1px solid #e3e6ee; }
.imp-tab td { padding: 3px 6px; border-bottom: 1px solid #f0f1f5; }
.imp-tab td:nth-child(2) { text-align: right; width: 50px; }
.imp-tab select { width: 100%; }
.imp-tab td { vertical-align: top; }
.imp-contact { display: flex; align-items: center; gap: 6px; }
.imp-reden { font-size: 11.5px; margin-top: 1px; }
.imp-zoek { width: 100%; margin-top: 3px; padding: 4px 8px; border: 1px solid var(--paars); border-radius: 6px; font: inherit; font-size: 12.5px; }
.zk { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; background: #9AA1B0; }
.zk-zeker { background: var(--klaar); } .zk-waarsch { background: #E08A00; } .zk-kies { background: var(--rood); } .zk-nieuw, .zk-leeg { background: #B8BECC; }
.imp-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--grijs); margin-bottom: 4px; }
.imp-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.imp-optie { display: block; margin: 3px 0; font-weight: normal; }

/* Nieuwe planning / nieuw project */
.np-nieuw { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; align-items: start; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lijn2); }
.np-nieuw input, .np-nieuw select { width: 100%; }
.np-let { grid-column: 1 / -1; color: #7a5b00; background: var(--geel); border-radius: 6px; padding: 0; font-size: 13px; }
.np-let:not(:empty) { padding: 6px 10px; }
.ah-uitv { font-size: 13px; margin-top: 4px; }
.ah-onder { margin-top: 4px; }
/* Onderaannemers in het projectteam */
.teamlijst tr.onder td:first-child { padding-left: 26px; }
.teamlijst tr.onder td:first-child::before { content: '↳ '; color: var(--grijs); }
.imp-hoofd { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.imp-hoofd select { min-width: 220px; }
.imp-tab tr.imp-is-hoofd td { background: #F3EEF9; font-weight: 600; }

/* Werkbalk altijd op één regel; uitleg-knop altijd rechts */
.werkbalk { flex-wrap: nowrap; }
.werkbalk > * { flex-shrink: 0; }
.werkbalk input[type=search] { flex: 0 1 220px; width: auto; min-width: 110px; }
.werkbalk select#baseline { flex: 0 1 auto; min-width: 100px; max-width: 230px; text-overflow: ellipsis; }
.werkbalk .ruimte { flex: 1 1 0; min-width: 2px; }
.werkbalk label.knop { white-space: nowrap; }
.kort { display: none; }
@media (max-width: 1450px) {
  .werkbalk .lang { display: none; }
  .werkbalk .kort { display: inline; }
  .werkbalk input[type=search] { flex-basis: 170px; }
}
@media (max-width: 1150px) {   /* heel smal: dan toch twee regels, uitleg-knop blijft rechts */
  .werkbalk { flex-wrap: wrap; }
  .werkbalk .info-menu { margin-left: auto; }
}
.info-knop { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--paars-licht); color: var(--paars); border: 1px solid #dccdee; transition: background .15s, color .15s; }
.info-knop:hover, details[open] > .info-knop { background: var(--paars); color: #fff; border-color: var(--paars); }
.info-knop::-webkit-details-marker { display: none; }
.menu-paneel { max-width: calc(100vw - 32px); }
.info-menu .menu-paneel { min-width: 340px; }

/* Sjablonen */
.sj-lijst { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.sj-kaart { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--lijn); border-radius: 12px; padding: 10px 12px; background: #fff; }
.sj-kleur { width: 6px; align-self: stretch; border-radius: 3px; flex: none; }
.sj-tekst { flex: 1; min-width: 0; }
.sj-knoppen { display: flex; gap: 6px; align-items: center; }
.sj-tabel { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.sj-tabel th { text-align: left; color: var(--grijs); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--lijn); }
.sj-tabel td { padding: 3px 6px; border-bottom: 1px solid var(--lijn2); }
.sj-tabel td:last-child { white-space: nowrap; }
.sj-tabel .sj-fase td { background: var(--paars-licht); font-weight: 600; color: var(--paars-donker); }
.sj-tabel tr.sj-weg td { color: #a0a6b4; text-decoration: line-through; }
.sj-tabel tr.sj-weg input[type=number] { opacity: .4; }
.sj-einde { margin: 10px 0 0; font-size: 13px; }

/* Nieuwe planning: twee stappen met grote keuzeknoppen */
dialog.np { width: min(620px, 94vw); }
.np-stap { font-size: 13px; font-weight: 600; color: var(--paars); margin: 6px 0 8px; }
.np-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.np-tegels.np-drie { grid-template-columns: 1fr; gap: 6px; }
.np-tegel { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--lijn); border-radius: 12px; background: #fff; padding: 10px 12px; cursor: pointer; }
.np-tegel:hover { border-color: #b9a6d6; background: #fbf9fe; }
.np-tegel b { display: block; font-weight: 600; font-size: 14px; }
.np-tegel small { display: block; color: var(--grijs); font-size: 12px; }
.np-tegel.aan { border: 2px solid var(--paars); background: var(--paars-licht); padding: 9px 11px; }
.np-tegel.aan b, .np-tegel.aan .np-ic { color: var(--paars-donker); }
.np-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--vlak); display: grid; place-items: center; font-size: 16px; color: var(--grijs); }
.np-tegel.aan .np-ic { background: #fff; }
#npZoek { width: 100%; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 9px; }
.np-lijst { max-height: 220px; overflow: auto; margin: 6px 0 12px; border: 1px solid var(--lijn2); border-radius: 10px; padding: 4px; }
.np-rij { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; font-size: 14px; cursor: pointer; }
.np-rij:hover { background: var(--vlak); }
.np-rij b { font-weight: 600; }
.np-rij .np-vink { visibility: hidden; color: var(--paars); font-weight: 700; }
.np-rij.aan { background: var(--paars-licht); color: var(--paars-donker); }
.np-rij.aan .np-vink { visibility: visible; }
.np-leeg { padding: 12px; color: var(--grijs); font-size: 13px; }
.np .np-nieuw { margin: 0 0 12px; padding-top: 0; border-top: 0; }
.np .np-nieuw input, .np .np-nieuw select { padding: 7px 10px; border: 1px solid var(--lijn); border-radius: 9px; background: #fff; }

/* ── Telefoonpagina actiehouders v2: samenvatting, lijst, uitklapkaart, vraag ── */
.ah { --s-laat: #D32F2F; --s-bezig: #1565C0; --s-binnenkort: #E8710A; --s-gepland: var(--paars); --s-later: #9aa3b5; --s-klaar: var(--klaar); }
.ah-sam { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 4px; }
.ah-chip { border: 1px solid var(--lijn); background: #fff; border-radius: 12px; padding: 8px 4px; font-size: 12px; color: var(--grijs); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ah-chip b { font-size: 20px; line-height: 1.1; color: var(--inkt); }
.ah-chip.c-laat b { color: var(--s-laat); } .ah-chip.c-week b { color: var(--s-bezig); } .ah-chip.c-klaar b { color: var(--s-klaar); }
.ah-chip:disabled { opacity: .45; }
.ah-chip.aan { border: 2px solid var(--paars); background: var(--paars-licht); padding: 7px 3px; }
.ah-alles { background: none; border: 0; color: var(--paars); font-size: 13px; padding: 4px 2px; text-decoration: underline; }
.ah-kop2 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--grijs); margin: 16px 2px 6px; }
.ah-rij { display: flex; align-items: stretch; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--lijn); border-radius: 12px; padding: 0 10px 0 0; margin: 6px 0; overflow: hidden; min-height: 58px; }
.ah-rij.open { border-color: var(--paars); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.ah-streep { width: 6px; flex: none; background: var(--s-gepland); }
.s-laat .ah-streep { background: var(--s-laat); } .s-bezig .ah-streep { background: var(--s-bezig); } .s-binnenkort .ah-streep { background: var(--s-binnenkort); }
.s-later .ah-streep { background: var(--s-later); } .s-klaar .ah-streep { background: var(--s-klaar); }
.ah-rtekst { flex: 1; min-width: 0; padding: 8px 0; display: flex; flex-direction: column; gap: 1px; }
.ah-rtekst b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ah-rtekst small { font-size: 12.5px; color: var(--grijs); }
.ah-rstand { font-weight: 600; }
.s-laat .ah-rstand { color: var(--s-laat); } .s-bezig .ah-rstand { color: var(--s-bezig); } .s-binnenkort .ah-rstand { color: var(--s-binnenkort); } .s-klaar .ah-rstand { color: var(--s-klaar); }
.ah-pijl { align-self: center; color: var(--paars); font-size: 14px; }
.ah-gemeld { align-self: center; font-size: 11px; font-weight: 700; color: var(--paars-donker); background: var(--paars-licht); border-radius: 99px; padding: 2px 8px; }
.ah .ah-kaart { margin: 0 0 10px; border: 1px solid var(--paars); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 6px 16px #1c223314; padding: 12px 14px 14px; opacity: 1; }
.ah-pill { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--vlak); color: var(--grijs); }
.ah-pill.s-laat { background: #FCEBEB; color: #9b1c1c; } .ah-pill.s-bezig { background: #E6EFFA; color: #0d4a8a; }
.ah-pill.s-binnenkort { background: #FDF0E3; color: #8a4205; } .ah-pill.s-gepland { background: var(--paars-licht); color: var(--paars-donker); } .ah-pill.s-klaar { background: #E7F3E8; color: #1d5e21; }
.ah-blokken { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.ah-blokken > div { background: var(--vlak); border-radius: 9px; padding: 7px 9px; }
.ah-blokken small { display: block; font-size: 11px; color: var(--grijs); }
.ah-blokken b { font-size: 14px; }
.ah-tijd { position: relative; height: 10px; background: var(--vlak); border-radius: 5px; margin: 14px 0 3px; }
.ah-tijd .balk { position: absolute; top: 0; bottom: 0; background: #cbbfe0; border-radius: 5px; overflow: hidden; }
.ah-tijd .balk i { display: block; height: 100%; background: var(--paars); }
.ah-tijd > b { position: absolute; top: -4px; width: 2px; height: 18px; background: #D9480F; }
.ah-tijd-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--grijs); }
.ah-rel { margin-top: 10px; font-size: 13px; }
.ah-relr { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--lijn2); }
.ah-relr small { color: var(--grijs); }
.ah-melding.m-wacht { background: #FDF0E3; } .ah-melding.m-bevestigd { background: #E7F3E8; }
.ah-vraag { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn2); }
.ah-vtitel { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.ah-keuzes { display: grid; gap: 7px; }
.ah-keus { border: 1px solid var(--lijn); background: #fff; border-radius: 12px; padding: 13px 12px; font-weight: 700; font-size: 15px; text-align: left; }
.ah-keus.k-klaar, .ah-keus.k-bevestigd { color: var(--klaar); } .ah-keus.k-bezig, .ah-keus.k-later { color: #1565C0; } .ah-keus.k-wacht { color: var(--oranje); }
.ah-keus.aan { border: 2px solid currentColor; padding: 12px 11px; background: #fbfaff; }
.ah .ah-form { margin-top: 12px; display: grid; gap: 9px; }
.f-label { font-size: 13px; font-weight: 600; color: var(--grijs); }
.ah-snellen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ah-snellen.twee { grid-template-columns: 1fr 1fr; }
.ah-snel { border: 1px solid var(--lijn); background: #fff; border-radius: 10px; padding: 11px 6px; font-size: 14px; font-weight: 600; }
.ah-snel.aan { background: var(--paars); color: #fff; border-color: var(--paars); }
.ah .f-datum { font-size: 16px; padding: 9px 11px; border: 1px solid var(--lijn); border-radius: 10px; }
.ah-stuur { width: 100%; padding: 13px; font-size: 16px; justify-content: center; }

/* Contacten */
.ct-intro { margin: 6px 0 4px; max-width: 900px; line-height: 1.5; }
.ct-lijst td { font-size: 13.5px; }
.ct-lijst .ct-tel { white-space: nowrap; }
.ct-inactief td { opacity: .55; }
.ct-label { display: inline-block; font-size: 11px; font-weight: 600; background: var(--paars-licht); color: var(--paars-donker); border-radius: 999px; padding: 1px 8px; margin: 1px 4px 1px 0; white-space: nowrap; }
.ct-label.rood { background: #FDECEC; color: var(--rood); } .ct-label.grijs { background: var(--vlak); color: var(--grijs); }
.ct-dubbel { background: #FDECEC; border-radius: 10px; padding: 9px 12px; margin: 8px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ct-keuzes { display: grid; gap: 6px; margin: 8px 0; }
.ct-keuze { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.ct-keuze:has(input:checked) { border-color: var(--paars); background: var(--paars-licht); }
.ct-tellers { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.ct-tellers span { border-radius: 999px; padding: 3px 12px; font-size: 13px; }
.ct-tel-n { background: #E8F5E9; color: var(--klaar); } .ct-tel-a { background: #E3EEFB; color: #1565C0; }
.ct-tel-v { background: #FDEDE3; color: var(--oranje); } .ct-tel-g { background: var(--vlak); color: var(--grijs); }
.ct-blok { margin: 8px 0; border: 1px solid var(--lijn); border-radius: 10px; padding: 6px 10px; }
.ct-blok summary { cursor: pointer; font-weight: 600; }
.ct-alles { font-size: 12px; margin: 4px 0; }
.ct-blok .imp-tab td:nth-child(2) { text-align: left; width: auto; white-space: nowrap; }
.ct-blok .imp-tab td:first-child { width: 26px; }
.np-al { background: var(--paars-licht); border-radius: 8px; padding: 8px 12px; margin-top: 6px; font-size: 13px; display: grid; gap: 3px; }
.np-uitleg { margin: 4px 2px 0; font-size: 12px; }
.np-rij .np-aantal { margin-left: auto; margin-right: 10px; font-size: 12px; color: var(--grijs); white-space: nowrap; }
.np-naam { display: grid; gap: 4px; margin: 4px 0 14px; }
.np-naam label { font-weight: 600; font-size: 13px; }
.np-naam input { padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 9px; font: inherit; }
.pl-sub { font-weight: 400; font-size: 12.5px; color: var(--paars); }
/* Projecten (register) */
.rg-lijst td { font-size: 13.5px; vertical-align: top; }
.rg-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rg-chip { display: inline-block; text-decoration: none; background: var(--paars-licht); color: var(--paars-donker); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rg-chip:hover { background: var(--paars); color: #fff; }
.rg-chip.plus { background: #fff; border: 1px dashed var(--paars); color: var(--paars); }
.rg-chip.grijs { background: var(--vlak); color: var(--grijs); }
.rg-tel { color: var(--grijs); font-size: 12.5px; white-space: nowrap; }

/* Breedte van de takenkolom slepen (greep op de rechterrand van de kop) */
.kopweek .glabel { overflow: visible; }
.kolgreep { position: absolute; top: 0; bottom: -1px; right: -4px; width: 9px; cursor: col-resize; z-index: 8; }
.kolgreep::after { content: ''; position: absolute; top: 4px; bottom: 4px; left: 3px; width: 3px; border-radius: 2px; background: transparent; transition: background .15s; }
.kolgreep:hover::after, .kolsleep .kolgreep::after { background: var(--paars, #5F2D91); }
.kolsleep, .kolsleep * { cursor: col-resize !important; user-select: none; }
/* Fase bewerken: gevolgen van een nieuwe startdatum */
.fa-effect { grid-column: 1 / -1; background: var(--vlak, #F4F1F9); border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.5; }
.fa-effect .goed { color: var(--klaar); font-weight: 600; } .fa-effect .let { color: var(--oranje); font-weight: 600; }