:root{--p:#51328a;--k:#ed6d63;--bg:#f5f4f8;--line:#e7e4ee;--t:#1d1b26;--m:#6b6878;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--t);background:var(--bg)}*{box-sizing:border-box}body{margin:0}a{color:var(--p)}h1{font-size:24px;margin:0}h2{font-size:14px;font-weight:600;color:var(--m);margin:0 0 16px;text-transform:uppercase;letter-spacing:.04em}.demo{background:var(--k);color:#fff;text-align:center;padding:8px 16px;font-weight:600}header{display:flex;align-items:center;gap:32px;padding:16px 32px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:8px;font-size:18px}.brand b{color:var(--p)}.logo{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--p) 60%,var(--k) 60%)}nav{display:flex;gap:8px;flex-wrap:wrap}nav a{padding:8px 16px;border-radius:8px;text-decoration:none;color:var(--t)}nav a.act{background:var(--p);color:#fff}.user{margin-left:auto;color:var(--m);font-size:14px}main{max-width:1280px;margin:0 auto;padding:32px}.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}.ctrl{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.ctrl input{width:120px;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit;margin-left:8px}.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px}.seg button{border:0;background:none;padding:8px 16px;border-radius:6px;font:inherit;cursor:pointer}.seg button.act{background:var(--p);color:#fff}.grid{display:grid;gap:24px;margin-bottom:24px}.kpis{grid-template-columns:repeat(4,1fr)}.two{grid-template-columns:2fr 1fr}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:24px}.grid .card{margin-bottom:0}.center{text-align:center}.big{font-size:32px;font-weight:700}.neg{color:#c0392b}.pos{color:#1e8449}.muted{color:var(--m)}.small{font-size:13px}.mt{margin-top:24px}.ring,.donut{width:100%;max-width:180px}.ring-big{font-size:20px;font-weight:700;fill:var(--t)}.ring-sub{font-size:11px;fill:var(--m)}.bars{width:100%}.ax{font-size:12px;fill:var(--m)}.legend{list-style:none;padding:0;margin:16px 0 0;font-size:14px;display:grid;gap:8px;text-align:left}.legend.row{display:flex;flex-wrap:wrap;gap:16px}.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}.legend i.dash{height:0;border-top:2px dashed var(--t);border-radius:0}.pill{display:inline-block;padding:8px 16px;border-radius:999px;font-weight:600}.pill.ok{background:#e3f4ea;color:#1e8449}.pill.bad{background:#fde8e6;color:#b03a2e}.meld{list-style:none;padding:0;margin:0;display:grid;gap:8px}.meld li{padding:8px 16px;border-radius:8px;border-left:4px solid var(--k);background:#fdf1f0;font-size:14px}.meld li.hoog{border-color:#c0392b;background:#fbe4e2}.tablewrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:var(--m);font-weight:600;padding:8px;border-bottom:2px solid var(--line);white-space:nowrap}td{padding:8px;border-bottom:1px solid var(--line)}.r{text-align:right}.tag{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600;background:var(--line)}.tag.actief,.tag.doorlopend{background:#ece6f6;color:var(--p)}.tag.loopt-af{background:#fdebd0;color:#9a5b00}.tag.inactief{background:#eee;color:#6b6878}.tag.verlopen{background:#fbe4e2;color:#b03a2e}.uren{min-width:120px}.meter{height:6px;background:var(--line);border-radius:3px;margin-top:4px}.meter i{display:block;height:100%;background:var(--p);border-radius:3px}.meter i.over{background:var(--k)}.btn{display:inline-block;text-decoration:none;background:var(--p);color:#fff;border:0;padding:16px 24px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}.link{background:none;border:0;color:var(--p);cursor:pointer;font:inherit}.login{max-width:480px;margin:64px auto}@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}}@media(max-width:640px){header{padding:16px;gap:16px}main{padding:16px}.kpis{grid-template-columns:1fr}.card{padding:16px}table thead{display:none}table tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}table td{display:flex;justify-content:space-between;gap:16px;border:0;padding:4px 0;text-align:right}table td:before{content:attr(data-l);color:var(--m);text-align:left}}.b{font-weight:700}.overcel{background:#fdecea}table.verbruik td,table.verbruik th{padding:8px 6px}table.verbruik td:first-child{white-space:nowrap}.totaal td{font-weight:700;border-top:2px solid var(--line)}.mob{display:none}.vk{border-bottom:1px solid var(--line);padding:8px 0}.vk summary{display:flex;justify-content:space-between;gap:8px;cursor:pointer;flex-wrap:wrap}@media(max-width:640px){.desk{display:none}.mob{display:block}.vk table tr{padding:4px 8px;border-radius:6px}}.seg a{padding:8px 16px;border-radius:6px;text-decoration:none;color:var(--t)}.seg a.act{background:var(--p);color:#fff}.mnav{align-items:center}.mnav b{padding:0 12px;min-width:150px;text-align:center}.mnav .dis{padding:8px 16px;color:var(--line)}.hbs{list-style:none;padding:0;margin:0;display:grid;gap:16px}.hb-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14px;margin-bottom:6px}.hb-bar{position:relative;height:14px;background:var(--line);border-radius:7px}.hb-bar i{display:block;height:100%;border-radius:7px}.hb-bar s{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--t)}i.ok{background:#27ae60}i.bijna{background:#f39c12}i.over{background:#c0392b}i.geen{background:#a9a6b3}.legend-hb i{display:inline-block;width:12px;height:12px;border-radius:3px;margin:0 4px 0 12px;vertical-align:-1px}.legend-hb i:first-child{margin-left:0}