/* =====================================================================
   Stark Totaal BOS · designsysteem
   Kleuren afgeleid van het Stark Totaal-logo: antraciet (merk), blauw,
   roze, groen en oranje (de vier banen). Neutrale, rustige basis.
   ===================================================================== */
:root {
  /* Merk (uit het logo) */
  --inkt: #2b2b2b;          /* antraciet van woordmerk en dak */
  --logo-blauw: #47a5c9; --logo-roze: #de6199; --logo-groen: #54b279; --logo-oranje: #e89b41;

  /* Neutrale basis */
  --bg: #f1f1ee; --vlak: #ffffff; --vlak-2: #f7f7f4; --vlak-3: #ececE8;
  --lijn: #e7e7e2; --lijn-2: #d5d5cf; --tekst: #1d1d1c; --dim: #6b6b66; --dim-2: #94948e;

  /* Functionele kleuren (logokleuren, iets dieper voor contrast op wit) */
  --fabriek: #2f87ad; --fabriek-zacht: #e2f0f6;
  --buiten: #3b9563;  --buiten-zacht: #e2f2e8;
  --ai: #c54a82;      --ai-zacht: #fbeaf2;
  --let: #d97f20;     --let-zacht: #fdf1e2; --let-tekst: #9c5410;
  --rood: #c0392b;    --rood-zacht: #fbe8e5;
  --goed: #2f7d4f;    --goed-zacht: #e2f2e8;

  --f-kop: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-tekst: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rail-b: 6.4rem; --gat: 1rem; --r: .6rem;
  --schaduw: 0 1px 2px rgba(20, 20, 18, .05), 0 2px 8px rgba(20, 20, 18, .04);
  color-scheme: light;
}
/* Eén schaalfactor voor alles: ±17px op 1920×1080, ±34px op 3840×2160 */
html { font-size: max(14px, min(.9vw, 1.6vh)); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--tekst); font-family: var(--f-tekst); font-size: 1rem; line-height: 1.4; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "cv11" 1; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: .15rem solid var(--fabriek); outline-offset: .12rem; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-kop); letter-spacing: -.01em; }
p { margin: 0; }
.dim { color: var(--dim); }
.klein { font-size: .85rem; }
code { font-size: .85em; background: var(--vlak-2); padding: .05em .35em; border-radius: .25rem; overflow-wrap: anywhere; }
.ic { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.16em; }

/* ---------- Opbouw ---------- */
.shell { display: grid; grid-template-columns: var(--rail-b) minmax(0, 1fr); min-height: 100%; }
.werk { padding: .9rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: var(--gat); min-width: 0; }
#main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--gat); }
.kop { display: flex; align-items: center; gap: 1.2rem; min-height: 2.6rem; }
.kop-titel { font-size: 1.5rem; font-weight: 700; color: var(--inkt); }
.kop-meta { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; color: var(--dim); font-size: .9rem; }
.klok { color: var(--tekst); font-weight: 500; white-space: nowrap; }
.klok::first-letter { text-transform: uppercase; }
.sync { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.sync i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--goed); }
.sync.oud i { background: var(--rood); }
.demo-melding { display: none; padding: .15rem .65rem; border-radius: 99rem; background: var(--let-zacht); color: var(--let-tekst); font-size: .8rem; font-weight: 600; white-space: nowrap; }
body.heeft-demo .demo-melding { display: inline-block; }

/* ---------- Hoofdrail ---------- */
.rail { position: sticky; top: 0; height: 100vh; background: var(--inkt); color: #fff; display: flex; flex-direction: column; align-items: stretch; padding: .7rem .5rem .8rem; z-index: 3; }
/* Het logo staat op een witte ondergrond, zodat het onveranderd en goed zichtbaar blijft op de donkere rail */
.rail-logo { display: block; background: #fff; border-radius: .5rem; padding: .3rem .35rem; margin-bottom: 1.1rem; }
.rail-logo img { display: block; width: 100%; height: auto; }
.rail-items { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.rail-knop { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .55rem .2rem .5rem; border-radius: .55rem; cursor: pointer; font-size: .74rem; font-weight: 500; color: rgba(255,255,255,.68); text-align: center; position: relative; }
.rail-knop .ic { width: 1.55rem; height: 1.55rem; stroke-width: 1.7; }
.rail-knop:hover { background: rgba(255,255,255,.07); color: #fff; }
.rail-knop:focus-visible { outline: .15rem solid var(--logo-blauw); }
.rail-knop.actief { background: rgba(255,255,255,.12); color: #fff; }
.rail-knop.actief::before { content: ""; position: absolute; left: -.5rem; top: .55rem; bottom: .55rem; width: .22rem; border-radius: 0 .2rem .2rem 0; background: var(--logo-oranje); }
.rail-knop.actief .avatar { box-shadow: 0 0 0 .15rem var(--inkt), 0 0 0 .3rem #fff; }
.avatar { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #e9e9e5; color: var(--inkt); display: inline-grid; place-items: center; font-family: var(--f-kop); font-weight: 700; font-size: 1rem; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.groot { width: 3.2rem; height: 3.2rem; font-size: 1.35rem; background: var(--inkt); color: #fff; }
.avatar.xl { width: 4.2rem; height: 4.2rem; font-size: 1.8rem; background: var(--inkt); color: #fff; }

/* ---------- Bouwstenen ---------- */
.vlak { background: var(--vlak); border-radius: var(--r); box-shadow: var(--schaduw); min-width: 0; }
.sectie { padding: 1rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.sectie > h3 { font-size: 1rem; }
.skop { display: flex; align-items: center; gap: .55rem; min-height: 2rem; }
.skop h3 { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: .4rem; font-family: var(--f-tekst); }
.skop h3 .ic { width: 1.05rem; height: 1.05rem; }
.skop .aantal { min-width: 1.5rem; height: 1.5rem; padding: 0 .45rem; border-radius: 99rem; background: var(--vlak-3); color: var(--tekst); font-size: .78rem; font-weight: 700; display: inline-grid; place-items: center; }
.vul { flex: 1; }
h4 { font-family: var(--f-tekst); font-size: .8rem; font-weight: 600; color: var(--dim); margin-top: .6rem; }
.ikoon { all: unset; box-sizing: border-box; width: 2rem; height: 2rem; border-radius: .45rem; display: grid; place-items: center; cursor: pointer; color: var(--dim); }
.ikoon:hover { background: var(--vlak-2); color: var(--tekst); }
.ikoon .ic { width: 1.2rem; height: 1.2rem; }

.knop { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--lijn-2); background: var(--vlak); border-radius: .45rem; padding: .38rem .8rem; cursor: pointer; font-weight: 600; font-size: .88rem; white-space: nowrap; text-decoration: none; color: var(--tekst); line-height: 1.2; }
.knop:hover { border-color: var(--inkt); }
.knop .ic { width: 1rem; height: 1rem; }
.knop.primair { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.knop.ja { background: var(--goed); border-color: var(--goed); color: #fff; }
.knop.nee { color: var(--rood); border-color: #e7b9b3; background: var(--vlak); }
.knop.nee:hover { border-color: var(--rood); }
.knop.oranje { background: var(--let); border-color: var(--let); color: #fff; }
.knop.rood { background: var(--rood); border-color: var(--rood); color: #fff; }
.knop:disabled { opacity: .5; cursor: default; }
.knoppen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.link { all: unset; cursor: pointer; } .link:hover { text-decoration: underline; text-underline-offset: .15em; }
.invoer { min-width: 0; border: 1px solid var(--lijn-2); border-radius: .45rem; padding: .45rem .7rem; background: var(--vlak); }
.invoer:focus { border-color: var(--inkt); outline: none; }
.tag { display: inline-block; font-size: .74rem; padding: .05rem .5rem; border-radius: 99rem; background: var(--vlak-3); color: var(--dim); font-weight: 600; white-space: nowrap; }
.tag.st-goedgekeurd { background: var(--goed-zacht); color: var(--goed); } .tag.st-afgewezen { background: var(--rood-zacht); color: var(--rood); }
.tag.t-probleem { background: var(--rood-zacht); color: var(--rood); } .tag.t-verbeterpunt { background: var(--let-zacht); color: var(--let-tekst); } .tag.t-wens { background: var(--fabriek-zacht); color: var(--fabriek); }
.let { color: var(--let-tekst); font-weight: 600; }
.leeg { color: var(--dim-2); font-size: .9rem; list-style: none; padding: .35rem 0; }
.voetnoot { font-size: .75rem; color: var(--dim); display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; align-items: center; padding-top: .35rem; }
.te-laat { color: var(--rood) !important; font-weight: 600; }

/* ---------- Lijsten en items ---------- */
.lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 1.5rem; }
.lijst.scroll { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--lijn-2) transparent; }
.lijst > li:not(.item):not(.leeg) { padding: .3rem 0; border-bottom: 1px solid var(--lijn); }
.item { display: flex; gap: .65rem; align-items: flex-start; padding: .5rem .3rem; border-bottom: 1px solid var(--lijn); }
.item:last-child { border-bottom: none; }
.item > .tekst { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: .12rem; }
.item > .tekst:hover .titel { text-decoration: underline; text-decoration-color: var(--lijn-2); text-underline-offset: .15em; }
.item .titel { font-weight: 500; overflow-wrap: anywhere; line-height: 1.3; }
.item .meta { display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: .8rem; color: var(--dim); }
.item .meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.item .meta .ic { width: .9rem; height: .9rem; }
.vink { appearance: none; -webkit-appearance: none; width: 1.3rem; height: 1.3rem; margin: .02rem 0 0; border: .12rem solid var(--lijn-2); border-radius: .35rem; background: var(--vlak); cursor: pointer; flex: none; display: grid; place-items: center; }
.vink:hover { border-color: var(--goed); }
.vink:checked { background: var(--goed); border-color: var(--goed); }
.vink:checked::after { content: ""; width: .35rem; height: .65rem; border: solid #fff; border-width: 0 .14rem .14rem 0; transform: translateY(-.08rem) rotate(45deg); }
.taak[draggable] { cursor: grab; }
.taak.gereed .titel { color: var(--dim); text-decoration: line-through; }
.punt.afgerond .titel { color: var(--dim); text-decoration: line-through; }
.ster { color: var(--let); margin-right: .3rem; } .ster .ic { width: .95rem; height: .95rem; vertical-align: -.1em; }
.st-bezig { color: var(--fabriek); font-weight: 600; }
.st-admin { color: var(--let-tekst); font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }
.st-ai { color: var(--ai); font-weight: 600; }
.pref { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bedrag { color: var(--goed); font-weight: 600; }
.taak.eindfactuur { box-shadow: inset .2rem 0 0 var(--let); padding-left: .6rem; }
.taak.sleept { opacity: .4; }
.drop-doel { background: var(--fabriek-zacht); border-radius: .45rem; box-shadow: inset 0 0 0 .1rem var(--fabriek); }
.voorstel { flex-wrap: wrap; align-items: center; }
.voorstel.ter_beoordeling { background: linear-gradient(90deg, var(--ai-zacht), transparent 70%); border-radius: .4rem; border-bottom-color: transparent; margin-bottom: .25rem; padding: .55rem .6rem; }
.beslis { display: flex; gap: .4rem; flex: none; margin-left: auto; }
.kol .voorstel { flex-wrap: nowrap; align-items: flex-start; }
.kol .beslis .lbl { display: none; }
.kol .beslis .knop { width: 2.2rem; height: 2.2rem; padding: 0; justify-content: center; }
.kol .beslis .knop .ic { width: 1.2rem; height: 1.2rem; stroke-width: 2.4; }
.beslis .knop { padding: .3rem .6rem; font-size: .82rem; }
.status { font-size: .78rem; font-weight: 600; color: var(--dim); white-space: nowrap; }
.status.st-goedgekeurd, .status.st-afgerond { color: var(--goed); } .status.st-afgewezen { color: var(--rood); }
.besluit-tekst { color: var(--dim); font-size: .9rem; }
.res { color: var(--dim); white-space: pre-line; overflow-wrap: anywhere; margin: .3rem 0; }

/* ---------- Home: Operations Center ---------- */
body[data-pagina="home"] .werk { height: 100vh; overflow: hidden; }
.home { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1.04fr) minmax(0, .96fr); gap: var(--gat); }
.mensen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gat); min-height: 0; }
.persoon { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: .9rem 1.1rem .4rem; gap: .65rem; }
.p-kop { display: flex; gap: .9rem; align-items: center; }
.p-av { text-decoration: none; }
.p-naam { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.p-naam h2 { font-weight: 800; font-size: 1.9rem; line-height: 1.05; color: var(--inkt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-naam h1 { font-weight: 800; font-size: 2.3rem; line-height: 1.05; color: var(--inkt); }
.rol { font-size: .88rem; color: var(--dim); margin-top: .15rem; }
.stats { display: flex; gap: 1.3rem; }
.stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.stat b { font-size: 1.6rem; font-weight: 700; font-family: var(--f-kop); }
.stat span { font-size: .75rem; color: var(--dim); display: inline-flex; gap: .25rem; align-items: center; }
.stat span .ic { width: .85rem; height: .85rem; }
.stat.nadruk b { color: var(--ai); }
.acties { display: flex; flex-direction: column; gap: .35rem; }
.actie { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: .6rem; align-items: center; padding: .5rem .8rem; border-radius: .45rem; background: var(--let-zacht); color: var(--let-tekst); font-size: .92rem; }
.actie.s-rood { background: var(--rood); color: #fff; }
.actie b { font-weight: 700; white-space: nowrap; }
.actie .wat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actie .wanneer { margin-left: auto; white-space: nowrap; font-size: .8rem; opacity: .9; }
.actie:hover { filter: brightness(.97); }
.briefing { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: .15rem 0 .15rem .9rem; border-left: .22rem solid var(--logo-blauw); font-size: 1.05rem; line-height: 1.45; color: var(--tekst); }
.briefing.kort .tekst { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.briefing.leeg { color: var(--dim); border-left-color: var(--lijn-2); }
.briefing .oud { display: block; font-size: .78rem; color: var(--let-tekst); margin-top: .2rem; }
.briefing:hover .tekst { color: var(--inkt); }
.briefing.vol { font-size: 1.1rem; }
.p-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; border-top: 1px solid var(--lijn); padding-top: .4rem; }
.kol { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.kol .lijst.scroll { flex: 1 1 auto; }
.kol .lijst.scroll.kort { flex: 1 1 auto; max-height: 62%; }
.kol .lijst.scroll.kort:last-child { flex: 1 1 auto; max-height: none; }

.bedrijf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem); gap: var(--gat); min-height: 0; }
.projecten, .aandacht { display: flex; flex-direction: column; min-height: 0; padding: .7rem 1.1rem .6rem; overflow: hidden; }
.projecten .skop .knop { padding: .3rem .65rem; font-size: .82rem; }
.aandacht .lijst.kort { flex: 0 1 auto; max-height: 45%; margin-bottom: .4rem; }
.aandacht .lijst:last-child { flex: 1 1 auto; }
.signaal { border-radius: .4rem; border-bottom: none; margin-bottom: .25rem; padding: .45rem .6rem; }
.signaal.s-rood { background: var(--rood-zacht); } .signaal.s-rood .titel { color: var(--rood); font-weight: 600; }
.signaal.s-oranje { background: var(--let-zacht); } .signaal.s-oranje .titel { color: var(--let-tekst); font-weight: 600; }
.display-meta { display: none; }

/* ---------- Projecttabel en planningsbalk ---------- */
.ptabel { min-height: 0; }
.ptabel.scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lijn-2) transparent; }
.prow { display: grid; grid-template-columns: minmax(13rem, 2fr) 9rem minmax(13rem, 1.8fr) 4rem 5.2rem 3.8rem 10.5rem; gap: .9rem; align-items: center; padding: .42rem .5rem .42rem .7rem; border-bottom: 1px solid var(--lijn); position: relative; }
.prow:last-child { border-bottom: none; }
.prow.kop { position: sticky; top: 0; z-index: 1; background: var(--vlak); padding-top: .25rem; padding-bottom: .4rem; font-size: .72rem; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--lijn-2); }
.prow.kop > span:nth-child(n+4) { text-align: right; }
.prow::before { content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: .2rem; border-radius: .1rem; }
.prow.sg-oranje::before { background: var(--let); } .prow.sg-rood::before { background: var(--rood); } .prow.sg-admin::before { background: var(--let); }
.prow.sg-rood { background: linear-gradient(90deg, var(--rood-zacht), transparent 45%); }
.pnaam { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pnaam .link { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
.pnr { color: var(--inkt); font-weight: 600; margin-right: .5rem; }
.psub { font-size: .82rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fase { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 500; line-height: 1.2; }
.fase i { width: .55rem; height: .55rem; border-radius: 50%; flex: none; background: var(--dim-2); }
.fase.f2 i { background: var(--fabriek); } .fase.f3 i { background: var(--buiten); } .fase.f4 i { background: var(--let); } .fase.f5 i { background: var(--goed); }
.pgetal { text-align: right; font-weight: 600; font-size: 1rem; white-space: nowrap; }
.pgetal sup { color: var(--dim); font-weight: 500; }
.pactie { text-align: right; }
.actie-knop { padding: .32rem .65rem; font-size: .82rem; }
.balk { display: flex; height: 1.7rem; gap: .2rem; min-width: 0; }
.balk.onvolledig { align-items: center; font-size: .8rem; color: var(--dim-2); }
.seg { position: relative; flex-basis: 0; min-width: 2.2rem; border-radius: .3rem; overflow: hidden; background: var(--fabriek-zacht); }
.seg.buiten { background: var(--buiten-zacht); }
/* Verstreken geplande tijd: gearceerd (prognose) */
.seg .tijd { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(135deg, var(--fabriek) 0 .28rem, rgba(47,135,173,.55) .28rem .56rem); }
.seg.buiten .tijd { background: repeating-linear-gradient(135deg, var(--buiten) 0 .28rem, rgba(59,149,99,.55) .28rem .56rem); }
/* Gereedgemeld: volle kleur */
.seg.s-gereed { background: var(--fabriek); } .seg.buiten.s-gereed { background: var(--buiten); }
.seg.s-oranje { box-shadow: inset 0 0 0 .14rem var(--let); }
.seg.s-rood { box-shadow: inset 0 0 0 .16rem var(--rood); }
.seg-label { position: absolute; left: .3rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: .3rem; max-width: calc(100% - .6rem); padding: .02rem .4rem; border-radius: .25rem; background: rgba(255,255,255,.92); color: var(--tekst); font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.seg-label b { color: var(--dim); font-weight: 600; }
.seg-label .ic { width: .85rem; height: .85rem; stroke-width: 2.6; color: var(--goed); }
.legenda { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; text-transform: none; letter-spacing: 0; font-weight: 500; }
.lg { display: inline-block; width: .9rem; height: .6rem; border-radius: .15rem; margin-left: .55rem; }
.lg:first-child { margin-left: 0; }
.lg.fabriek { background: var(--fabriek); } .lg.buiten { background: var(--buiten); }
.lg.tijd { background: repeating-linear-gradient(135deg, var(--dim) 0 .12rem, var(--lijn-2) .12rem .24rem); }
.lg.gereed { background: linear-gradient(90deg, var(--fabriek) 50%, var(--buiten) 50%); }

/* ---------- Persoonlijke pagina ---------- */
.persoonpagina { display: flex; flex-direction: column; gap: var(--gat); }
.pp-kop { display: flex; gap: 1.2rem; align-items: center; padding: 1.1rem 1.4rem; }
.pp-kop .stats { padding-left: 1.3rem; border-left: 1px solid var(--lijn); }
.pp-kop .stats + .stats { margin-left: 0; }
.pp-raster { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--gat); align-items: start; }
.pp-hoofd, .pp-zij { display: flex; flex-direction: column; gap: var(--gat); min-width: 0; }
.sectie.let-op { box-shadow: var(--schaduw), inset .25rem 0 0 var(--rood); }
.bord { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.bord-kol { background: var(--vlak-2); border-radius: .5rem; padding: .35rem .6rem .5rem; min-width: 0; }
.bord-kol .lijst { min-height: 4rem; }
.snel { display: flex; gap: .5rem; margin-top: .3rem; }
.snel .invoer:first-child { flex: 1; }

/* ---------- Overige pagina's ---------- */
.paginakop { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
/* De paginatitel staat al in de kop; de h1 blijft voor schermlezers */
.paginakop h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.zoek { width: min(26rem, 100%); }
.raster { display: grid; gap: var(--gat); }
.raster.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.7fr); gap: var(--gat); }
.kpi { background: var(--vlak); border-radius: var(--r); box-shadow: var(--schaduw); padding: .9rem 1.1rem; }
.kpi small { display: block; font-size: .78rem; color: var(--dim); font-weight: 600; }
.kpi b { font-family: var(--f-kop); font-size: 2.1rem; font-weight: 700; display: block; color: var(--inkt); line-height: 1.15; }
.kpi span { font-size: .78rem; color: var(--dim); }
.vtabel { overflow: hidden; }
.vrij { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 1.4rem minmax(12rem, 2fr) 1.2fr 1.2fr 5.5rem 9.5rem 8.5rem 7rem; gap: .8rem; align-items: center; padding: .75rem 1.1rem; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.vrij > span:nth-child(n+5) { text-align: right; }
.vrij.kop { cursor: default; font-size: .72rem; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; padding-top: .6rem; padding-bottom: .5rem; }
button.vrij:hover { background: var(--vlak-2); }
.vrij small { color: var(--dim); font-size: .78rem; }
.vrij .pijl { color: var(--dim); }
.vgroep.open > .vrij { background: var(--vlak-2); }
.vdetail { padding: .8rem 1.2rem 1.2rem 3.3rem; background: var(--vlak-2); display: flex; flex-direction: column; gap: .7rem; border-bottom: 1px solid var(--lijn); }
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); font-weight: 600; padding: .4rem .55rem; border-bottom: 1px solid var(--lijn-2); }
.tabel td { padding: .55rem .55rem; border-bottom: 1px solid var(--lijn); vertical-align: top; background: var(--vlak); }
.tabel tr:last-child td { border-bottom: none; }
.tabel tr.klik { cursor: pointer; } .tabel tr.klik:hover td { background: var(--vlak-2); }
.tabel tr.dim td { color: var(--dim); }
.tabel .invoer { padding: .25rem .4rem; font-size: .85rem; }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: var(--gat); }
.note { padding: 1rem 1.15rem; cursor: pointer; display: flex; flex-direction: column; gap: .4rem; }
.note:hover { box-shadow: var(--schaduw), 0 0 0 1px var(--lijn-2); }
.note header { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: var(--dim); }
.note h3 { font-size: 1.12rem; font-weight: 700; color: var(--tekst); }
.note p { color: var(--dim); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.note footer { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .8rem; color: var(--dim); }

/* ---------- Dialoog ---------- */
dialog { border: none; border-radius: .8rem; padding: 0; width: min(42rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); box-shadow: 0 1.5rem 4rem rgba(20, 20, 18, .3); color: var(--tekst); background: var(--vlak); }
dialog.breed { width: min(66rem, calc(100vw - 2rem)); }
dialog::backdrop { background: rgba(30, 30, 28, .5); }
.dlg-form { display: flex; flex-direction: column; gap: .9rem; padding: 1.2rem 1.4rem 1.3rem; }
.dlg-kop { display: flex; align-items: flex-start; gap: 1rem; }
.dlg-kop h2 { font-size: 1.4rem; font-weight: 700; flex: 1; color: var(--inkt); }
.x { all: unset; cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--dim); padding: 0 .3rem; }
.dlg-intro p + p { margin-top: .45rem; }
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.veld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.veld.breed { grid-column: 1 / -1; }
.veld label { font-size: .82rem; color: var(--dim); font-weight: 600; }
.veld input:not([type=checkbox]), .veld select, .veld textarea { border: 1px solid var(--lijn-2); border-radius: .45rem; padding: .5rem .7rem; background: var(--vlak); width: 100%; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--inkt); outline: none; }
.veld textarea { resize: vertical; }
.veld.check label { display: flex; gap: .6rem; align-items: center; color: var(--tekst); font-size: 1rem; font-weight: 500; }
.veld.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--goed); }
.veld .hint { color: var(--dim); font-size: .78rem; }
.veld.info { background: var(--vlak-2); padding: .7rem .9rem; border-radius: .5rem; }
.dlg-fout { padding: .6rem .8rem; border-radius: .45rem; background: var(--rood-zacht); color: var(--rood); }
.dlg-voet { display: flex; gap: .6rem; align-items: center; padding-top: .3rem; } .dlg-voet .vul { flex: 1; }
.dlg-voet .knop { padding: .5rem 1.1rem; font-size: .95rem; }
.dlg-body { display: flex; flex-direction: column; gap: .9rem; }
.dlg-body h3 { font-family: var(--f-tekst); font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); margin-bottom: .2rem; }
.voorbeeld:empty { display: none; }
.voorbeeld { background: var(--vlak-2); border-radius: .5rem; padding: .7rem .9rem; }
.voorbeeld p { margin-top: .3rem; }
.plan-voorbeeld { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem 1rem; }
.plan-voorbeeld small { display: block; font-size: .72rem; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pdetail-kop { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.cyclus { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; counter-reset: c; }
.cyclus li { flex: 1; padding: .45rem .6rem; background: var(--vlak-2); font-size: .82rem; counter-increment: c; color: var(--dim); }
.cyclus li::before { content: counter(c) ". "; font-weight: 700; }
.cyclus li:first-child { border-radius: .4rem 0 0 .4rem; } .cyclus li:last-child { border-radius: 0 .4rem .4rem 0; }
.cyclus li.klaar { background: var(--goed-zacht); color: var(--goed); } .cyclus li.nu { background: var(--inkt); color: #fff; font-weight: 600; }
.pdetail-lijsten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.6rem; }

.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); padding: .6rem 1.1rem; border-radius: .55rem; background: var(--inkt); color: #fff; z-index: 20; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.22); max-width: calc(100vw - 2rem); font-weight: 500; }
.toast.fout { background: var(--rood); } .toast.goed { background: var(--goed); }

/* ---------- Display Mode: zelfde Home, schermvullend, zonder rail en menu's ---------- */
.display-hint { display: none; }
body.display .rail, body.display .kop { display: none; }
body.display .shell { grid-template-columns: minmax(0, 1fr); }
body.display .werk { padding: .9rem 1rem; height: 100vh; overflow: hidden; }
body.display .display-meta { display: inline-flex; gap: 1rem; align-items: center; color: var(--dim); font-size: .85rem; margin-right: .6rem; }
body.display .display-meta .demo-melding { margin-right: 0; }
body.display .display-hint:not([hidden]) { display: block; position: fixed; top: 42%; left: 50%; transform: translateX(-50%); background: rgba(43, 43, 43, .92); color: #fff; padding: .9rem 1.6rem; border-radius: .7rem; z-index: 30; font-size: 1.25rem; }

/* ---------- Kleinere schermen: onder elkaar en gewoon scrollen ---------- */
@media (max-width: 1100px), (max-height: 620px) {
  html { font-size: 14px; }
  body[data-pagina="home"] .werk, body.display .werk { height: auto; overflow: visible; }
  .home { grid-template-rows: auto auto; }
  .mensen, .bedrijf, .raster.twee, .pp-raster, .bord, .pdetail-lijsten { grid-template-columns: minmax(0, 1fr); }
  .p-body { grid-template-columns: minmax(0, 1fr); }
  .lijst.scroll, .kol .lijst.scroll.kort { max-height: 20rem; }
  .ptabel { overflow-x: auto; }
  .prow { min-width: 62rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vtabel { overflow-x: auto; } .vrij { min-width: 58rem; }
  .vdetail { padding-left: 1rem; overflow-x: auto; }
}
@media (max-width: 640px) {
  :root { --rail-b: 0px; }
  .shell { grid-template-columns: minmax(0, 1fr); padding-bottom: 4.6rem; }
  .werk { padding: .8rem 1rem 1rem; }
  .rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: .3rem; }
  .rail-logo { display: none; }
  .rail-items { flex-direction: row; }
  .rail-knop { flex: 1; font-size: .62rem; padding: .3rem .1rem; }
  .rail-knop.actief::before { display: none; }
  .avatar { width: 1.8rem; height: 1.8rem; font-size: .8rem; }
  .rail-knop .ic { width: 1.3rem; height: 1.3rem; }
  .kop-meta .sync, .display-knop, .klok { display: none; }
  .p-kop, .pp-kop { flex-wrap: wrap; } .p-naam h2 { white-space: normal; font-size: 1.5rem; }
  .pp-kop .stats { border: none; padding: 0; }
  .velden, .plan-voorbeeld { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .tabel { display: block; overflow-x: auto; }
  .snel { flex-wrap: wrap; }
}

/* ---------- Inloggen ---------- */
body.login { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 24px 16px; background: var(--inkt); font-size: 16px; }
.login-box { background: var(--vlak); border-radius: 14px; padding: 36px 32px 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; box-shadow: 0 1rem 3rem rgba(0,0,0,.35); }
.login-logo { width: 260px; max-width: 100%; height: auto; }
.streep { display: flex; gap: 4px; width: 120px; }
.streep i { flex: 1; height: 4px; border-radius: 2px; background: var(--logo-blauw); }
.streep i:nth-child(2) { background: var(--logo-roze); } .streep i:nth-child(3) { background: var(--logo-groen); } .streep i:nth-child(4) { background: var(--logo-oranje); }
.login-sub { margin: 4px 0 10px; color: var(--dim); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.login-voet { color: rgba(255,255,255,.55); font-size: 13px; }

@media (prefers-reduced-motion: no-preference) { .seg .tijd { transition: width .5s ease; } }
.sectie > h3 { display: flex; align-items: center; gap: .8rem; font-size: 1.05rem; font-weight: 700; color: var(--inkt); }
.sectie > h3 .knop { margin-left: auto; font-family: var(--f-tekst); }