/* Bouw Assistent prototype: surface "werkapp" op de Venture Foundation-tokenset (prefix ba). */
:root { --ba-accent: #2f5d50; --ba-text: #1d2a26; --ba-surface: #f5f6f4; --ba-bg: #ffffff;
  --ba-wood: #a0703c; --ba-wood-bg: #f6efe6; --ba-line: #e3e6e2; }
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--ba-font); color: var(--ba-text); background: var(--ba-surface); font-size: 15px; line-height: 1.5; }
a { color: var(--ba-accent); }
header.top { background: var(--ba-text); color: #fff; padding: var(--ba-space-1) var(--ba-space-4); display: flex; gap: var(--ba-space-3); align-items: center; flex-wrap: wrap; }
header.top .merk { font-weight: 700; letter-spacing: .02em; margin-right: var(--ba-space-2); }
header.top .merk small { font-weight: 400; opacity: .7; margin-left: .4em; }
header.top nav { display: flex; gap: var(--ba-space-half); flex-wrap: wrap; }
header.top nav a { color: #dfe7e4; text-decoration: none; padding: .35rem .7rem; border-radius: var(--ba-radius-sm); font-size: var(--ba-type-sm); }
header.top nav a.actief, header.top nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
header.top .uit { margin-left: auto; color: #b9c6c1; font-size: var(--ba-type-sm); }
main { width: 96%; max-width: 1500px; margin: var(--ba-space-3) auto var(--ba-space-6); }
main.lees { max-width: 1000px; }
h1 { font-size: var(--ba-type-h3); margin: 0 0 var(--ba-space-1); }
h2 { font-size: var(--ba-type-lead); margin: var(--ba-space-4) 0 var(--ba-space-2); }
h3 { font-size: 1.05rem; margin: var(--ba-space-2) 0 var(--ba-space-1); }
.sub { color: var(--ba-text-muted); margin: 0 0 var(--ba-space-3); }
.kaart { background: var(--ba-bg); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); padding: var(--ba-space-3); margin-bottom: var(--ba-space-3); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ba-space-2); }
.kpi { background: var(--ba-bg); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); padding: var(--ba-space-2) var(--ba-space-3); }
.kpi .l { font-size: var(--ba-type-sm); color: var(--ba-text-muted); }
.kpi .v { font-size: var(--ba-type-h3); font-weight: 650; font-variant-numeric: tabular-nums; }
.kpi .n { font-size: var(--ba-type-sm); color: var(--ba-text-muted); }
.laag { border-left: 4px solid var(--ba-accent); }
.laag.vmsw { border-left-color: #3d5a9e; } .laag.excel { border-left-color: var(--ba-accent); } .laag.sys { border-left-color: var(--ba-wood); }
table { width: 100%; border-collapse: collapse; background: var(--ba-bg); font-size: var(--ba-type-sm); }
th, td { padding: .45rem .6rem; border-bottom: 1px solid var(--ba-line); text-align: left; vertical-align: top; }
th { font-weight: 600; color: var(--ba-text-muted); background: #fafbfa; position: sticky; top: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.tot td { font-weight: 650; border-top: 2px solid var(--ba-text); }
tr.groep td { background: #eef2f0; font-weight: 650; }
tr.deel td { background: var(--ba-text); color: #fff; font-weight: 650; letter-spacing: .02em; }
.pill { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #eef1ef; color: var(--ba-text); white-space: nowrap; }
.pill.FH { background: #e7eefb; color: #2c4a8c; } .pill.VH { background: #fdf3e0; color: #8a5a00; } .pill.SOG { background: #efe7fb; color: #5b2c8c; } .pill.PM { background: #eee; color: #555; }
.pill.ok { background: var(--ba-success-bg); color: var(--ba-success); } .pill.nok { background: var(--ba-danger-bg); color: var(--ba-danger); } .pill.warn { background: var(--ba-warning-bg); color: var(--ba-warning); }
.pill.Material { background: #e8f3ee; color: #1f5b45; } .pill.Arbeid { background: #fdf0e6; color: #8a4a12; } .pill.OA { background: #eae9fb; color: #3d3a8c; } .pill.Materieel { background: #f3eefb; color: #5b3d8c; } .pill.Kost { background: #f1f1f1; color: #444; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary .pijl { display: inline-block; width: 1em; color: var(--ba-text-muted); transition: transform .15s; }
details[open] > summary .pijl { transform: rotate(90deg); }
.intern { background: #fbfaf7; border: 1px dashed #d8d2c4; border-radius: var(--ba-radius-sm); margin: .4rem 0 .6rem 1.2rem; }
.intern table { background: transparent; } .intern caption { text-align: left; font-size: .72rem; color: var(--ba-wood); padding: .3rem .6rem 0; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
form.balk { display: flex; flex-wrap: wrap; gap: var(--ba-space-2); align-items: end; background: var(--ba-bg); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); padding: var(--ba-space-2); margin-bottom: var(--ba-space-3); }
form.balk label { display: flex; flex-direction: column; font-size: .75rem; color: var(--ba-text-muted); gap: .2rem; }
input, select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--ba-border-strong); border-radius: var(--ba-radius-sm); background: #fff; }
input[type=number] { width: 6.5rem; }
button, .knop { font: inherit; background: var(--ba-accent); color: #fff; border: 0; border-radius: var(--ba-radius-sm); padding: .45rem 1rem; cursor: pointer; text-decoration: none; display: inline-block; }
.knop.licht { background: #e8eeeb; color: var(--ba-text); }
.melding { padding: var(--ba-space-2); border-radius: var(--ba-radius-sm); margin-bottom: var(--ba-space-2); font-size: var(--ba-type-sm); }
.melding.ok { background: var(--ba-success-bg); color: var(--ba-success); } .melding.warn { background: var(--ba-warning-bg); color: var(--ba-warning); } .melding.nok { background: var(--ba-danger-bg); color: var(--ba-danger); }
.dim { color: var(--ba-text-muted); } .klein { font-size: .75rem; }
.mono { font-family: var(--ba-font-mono); font-size: .8rem; }
.inspring1 { padding-left: 1.2rem; } .inspring2 { padding-left: 2.4rem; } .inspring3 { padding-left: 3.6rem; } .inspring4 { padding-left: 4.8rem; }
.login { max-width: 380px; margin: 12vh auto; }
ul.punten { margin: .3rem 0 .8rem 1.1rem; padding: 0; } ul.punten li { margin: .2rem 0; }
.tabelwrap { overflow-x: auto; border: 1px solid var(--ba-line); border-radius: var(--ba-radius); }
@media (max-width: 700px) { header.top { padding: var(--ba-space-1) var(--ba-space-2); } main { width: 94%; } .kpi .v { font-size: var(--ba-type-lead); } }