/* Bouwivo Cloud – portaal en beheer. Zelfde huisstijl als bouwivo.nl: antraciet (RAL 7016) en rolmaat-geel voor actie. */
:root{--ground:#EDF0F2;--panel:#fff;--panel-2:#E3E7EA;--ink:#1D2427;--soft:#4B5559;--faint:#7A8589;--line:#CDD3D7;--profile:#293133;--profile-ink:#F3F5F6;--tape:#F2C230;--ok:#1F7A4D;--bad:#B3261E;--warn:#8A5A00;--focus:#1C6DD0;--r:6px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#161B1D;--panel:#1F2629;--panel-2:#283033;--ink:#ECEFF0;--soft:#B3BCBF;--faint:#849094;--line:#354044;--profile:#0F1314;--ok:#4CC48A;--bad:#F2867E;--warn:#F2C230;--focus:#6AA8F5;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.6 "IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.top{background:var(--profile);color:var(--profile-ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px))}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font:800 21px/1 Arial,sans-serif;text-decoration:none}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-inline-start:auto}
.nav a{text-decoration:none;padding:8px 10px;border-radius:4px;opacity:.85;font-size:14px}
.nav a[aria-current="page"],.nav a:hover{opacity:1;background:rgba(255,255,255,.1)}
main{padding:28px 0 64px}
h1{font:800 clamp(26px,3.4vw,36px)/1.15 Arial,sans-serif;margin:0 0 6px}
h2{font:700 20px/1.3 Arial,sans-serif;margin:28px 0 10px}
h3{font:700 16px/1.3 Arial,sans-serif;margin:18px 0 8px}
p{margin:0 0 12px}
.sub{color:var(--soft);margin-bottom:22px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.kpi b{display:block;font:700 26px/1.2 ui-monospace,Menlo,Consolas,monospace}
.kpi span{color:var(--soft);font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 14px/1 inherit;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--tape);color:#1D2427;border-color:var(--tape)}
.btn.bad{border-color:var(--bad);color:var(--bad)}
.btn.small{min-height:32px;padding:0 12px;font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
form.stack,.stack{display:grid;gap:12px}
label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--soft)}
input,select,textarea{width:100%;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--ground);color:var(--ink);font:400 15px/1.3 inherit}
textarea{min-height:110px}
input[type=checkbox],input[type=radio]{width:18px;min-height:18px;height:18px;accent-color:var(--profile)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--ink);font-size:14px}
.check small{display:block;color:var(--soft)}
.banner{padding:12px 14px;border-radius:var(--r);margin-bottom:14px;border:1px solid var(--line);background:var(--panel-2)}
.banner.ok{border-color:var(--ok)}.banner.bad{border-color:var(--bad);color:var(--bad)}.banner.warn{border-color:var(--tape)}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line);margin:1px 2px 1px 0;white-space:nowrap}
.chip.ok{border-color:var(--ok);color:var(--ok)}.chip.bad{border-color:var(--bad);color:var(--bad)}.chip.warn{border-color:var(--tape)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:start;font:600 12px/1.3 ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:8px 8px 8px 0;border-bottom:1px solid var(--line)}
td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl{overflow-x:auto}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.r{text-align:end}
.note{color:var(--soft);font-size:13px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:800px){.split{grid-template-columns:1fr}}
.auth{max-width:420px;margin:48px auto}
code{font-family:ui-monospace,Menlo,monospace;background:var(--panel-2);padding:2px 6px;border-radius:4px;word-break:break-all}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
dl.kv dt{color:var(--soft)}dl.kv dd{margin:0}
.lang{display:flex;gap:2px;font-size:12px}.lang a{text-decoration:none;padding:4px 6px;opacity:.75}.lang a[aria-current="true"]{opacity:1;background:rgba(255,255,255,.12);border-radius:3px}
[dir="rtl"] .r{text-align:start}