:root{--bg:#f5f5f3;--paneel:#fff;--paneel-2:#faf9f7;--tekst:#17170f;--zacht:#6d6d64;--zachter:#95958b;--lijn:#e4e3dd;--lijn-sterk:#d3d2ca;--accent:#1b1b16;--accent-tekst:#fff;--rood:#a8341f;--rood-bg:#fbeeea;--oranje:#8a6410;--oranje-bg:#fbf4e2;--groen:#2f6b45;--groen-bg:#ecf5ef;--blauw:#2b5583;--blauw-bg:#eaf1f8;--paars:#5c4080;--paars-bg:#f1ecf7;--radius:10px;--radius-s:6px;--schaduw:0 1px 2px #14140a0d, 0 4px 14px #14140a0a}[data-thema=donker]{--bg:#111110;--paneel:#1a1a18;--paneel-2:#201f1d;--tekst:#eceae2;--zacht:#9b9a90;--zachter:#77766d;--lijn:#2c2b27;--lijn-sterk:#3b3a35;--accent:#eceae2;--accent-tekst:#17170f;--rood:#ef8b73;--rood-bg:#2a1713;--oranje:#dfb95e;--oranje-bg:#282010;--groen:#79c197;--groen-bg:#14241a;--blauw:#8ab4e0;--blauw-bg:#141e29;--paars:#b39ae0;--paars-bg:#1e1729;--schaduw:0 1px 2px #0000004d}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--tekst);-webkit-font-smoothing:antialiased;margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Inter,Helvetica,Arial,sans-serif}a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}.app{min-height:100%;display:flex}.zij{background:var(--paneel);border-right:1px solid var(--lijn);flex-direction:column;flex:0 0 216px;width:216px;height:100vh;display:flex;position:sticky;top:0;overflow-y:auto}.merk{border-bottom:1px solid var(--lijn);padding:16px 16px 12px}.merk b{letter-spacing:.14em;text-transform:uppercase;font-size:14px;display:block}.merk span{color:var(--zacht);margin-top:2px;font-size:11px;display:block}.nav{flex:1;padding:8px}.nav-groep{text-transform:uppercase;letter-spacing:.1em;color:var(--zachter);padding:12px 8px 4px;font-size:10px}.nav a{border-radius:var(--radius-s);color:var(--zacht);justify-content:space-between;align-items:center;gap:8px;margin-bottom:1px;padding:7px 9px;font-size:13.5px;text-decoration:none;display:flex}.nav a:hover{background:var(--paneel-2);color:var(--tekst)}.nav a.actief{background:var(--accent);color:var(--accent-tekst);font-weight:500}.nav a .telling{background:var(--lijn);color:var(--zacht);text-align:center;border-radius:99px;min-width:18px;padding:0 5px;font-size:11px}.nav a.actief .telling{color:inherit;background:#fff3}[data-thema=donker] .nav a.actief .telling{background:#0003}.zij-voet{border-top:1px solid var(--lijn);color:var(--zacht);padding:10px;font-size:12px}.zij-voet .wie{align-items:center;gap:8px;margin-bottom:8px;display:flex}.avatar{background:var(--accent);width:26px;height:26px;color:var(--accent-tekst);border-radius:99px;flex:0 0 26px;place-items:center;font-size:11px;font-weight:600;display:grid}.hoofd{flex-direction:column;flex:1;min-width:0;display:flex}.kop{z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn);flex-wrap:wrap;align-items:center;gap:12px;padding:12px 22px;display:flex;position:sticky;top:0}.kop h1{letter-spacing:-.01em;margin:0;font-size:17px}.kop .sub{color:var(--zacht);font-size:12.5px}.kop .rechts{flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;display:flex}.inhoud{width:100%;max-width:1440px;padding:20px 22px 64px}.kaart{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);margin-bottom:16px}.kaart-kop{border-bottom:1px solid var(--lijn);align-items:center;gap:10px;padding:12px 14px;display:flex}.kaart-kop h2{text-transform:uppercase;letter-spacing:.07em;color:var(--zacht);margin:0;font-size:13px;font-weight:600}.kaart-kop .rechts{align-items:center;gap:6px;margin-left:auto;display:flex}.kaart-body{padding:14px}.kaart-body.strak{padding:0}.raster{gap:12px;display:grid}.raster.k2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.raster.k3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.raster.k4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.tegel{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);padding:12px 14px}.tegel .l{text-transform:uppercase;letter-spacing:.08em;color:var(--zachter);align-items:center;gap:6px;font-size:10.5px;display:flex}.tegel .n{letter-spacing:-.02em;margin-top:4px;font-size:24px;font-weight:600;line-height:1.1}.tegel .n small{color:var(--zacht);font-size:13px;font-weight:500}.tegel .v{color:var(--zacht);margin-top:3px;font-size:11.5px}.tegel.alarm{border-color:var(--rood);background:var(--rood-bg)}.tegel.alarm .n{color:var(--rood)}.tegel.let-op{border-color:var(--oranje);background:var(--oranje-bg)}.tegel.goed .n{color:var(--groen)}.tabel-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}thead th{background:var(--paneel);text-align:left;text-transform:uppercase;letter-spacing:.07em;color:var(--zachter);border-bottom:1px solid var(--lijn);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;padding:8px 10px;font-size:10.5px;font-weight:600;position:sticky;top:0}thead th.vast{cursor:default}tbody td{border-bottom:1px solid var(--lijn);vertical-align:top;padding:9px 10px}tbody tr:hover{background:var(--paneel-2)}tbody tr:last-child td{border-bottom:none}td .sub{color:var(--zacht);margin-top:1px;font-size:11.5px;display:block}.klik{cursor:pointer}.knop{border-radius:var(--radius-s);border:1px solid var(--lijn-sterk);background:var(--paneel);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;padding:6px 11px;font-size:13px;transition:background .12s;display:inline-flex}.knop:hover{background:var(--paneel-2)}.knop.primair{background:var(--accent);color:var(--accent-tekst);border-color:var(--accent)}.knop.primair:hover{opacity:.88}.knop.gevaar{color:var(--rood);border-color:var(--rood)}.knop.gevaar:hover{background:var(--rood-bg)}.knop.klein{padding:3px 8px;font-size:12px}.knop.kaal{color:var(--zacht);background:0 0;border-color:#0000}.knop.kaal:hover{background:var(--paneel-2);color:var(--tekst)}.knop:disabled{opacity:.45;cursor:not-allowed}.knoprij{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.veld{margin-bottom:11px}.veld label{text-transform:uppercase;letter-spacing:.06em;color:var(--zacht);margin-bottom:4px;font-size:11px;font-weight:600;display:block}.veld input,.veld select,.veld textarea{border-radius:var(--radius-s);border:1px solid var(--lijn-sterk);background:var(--paneel-2);outline:none;width:100%;padding:7px 9px}.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--accent);background:var(--paneel)}.veld textarea{resize:vertical;min-height:78px;font-family:inherit}.veld .hint{color:var(--zachter);margin-top:3px;font-size:11px}.veld-rij{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;display:grid}.vink{cursor:pointer;align-items:center;gap:7px;margin-bottom:8px;font-size:13px;display:flex}.vink input{width:auto}.merk-tag{border:1px solid var(--lijn-sterk);color:var(--zacht);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;border-radius:99px;align-items:center;gap:4px;padding:2px 7px;font-size:10.5px;font-weight:600;display:inline-flex}.merk-tag.rood{color:var(--rood);border-color:var(--rood);background:var(--rood-bg)}.merk-tag.oranje{color:var(--oranje);border-color:var(--oranje);background:var(--oranje-bg)}.merk-tag.groen{color:var(--groen);border-color:var(--groen);background:var(--groen-bg)}.merk-tag.blauw{color:var(--blauw);border-color:var(--blauw);background:var(--blauw-bg)}.merk-tag.paars{color:var(--paars);border-color:var(--paars);background:var(--paars-bg)}.merk-tag.vol{background:var(--accent);color:var(--accent-tekst);border-color:var(--accent)}.kanban{align-items:flex-start;gap:10px;padding-bottom:8px;display:flex;overflow-x:auto}.kolom{background:var(--paneel-2);border:1px solid var(--lijn);border-radius:var(--radius);flex-direction:column;flex:0 0 250px;max-height:72vh;display:flex}.kolom-kop{border-bottom:1px solid var(--lijn);text-transform:uppercase;letter-spacing:.06em;color:var(--zacht);background:var(--paneel-2);border-radius:var(--radius) var(--radius) 0 0;align-items:center;gap:6px;padding:9px 11px;font-size:11px;font-weight:600;display:flex;position:sticky;top:0}.kolom-kop .n{background:var(--lijn);border-radius:99px;margin-left:auto;padding:0 6px;font-size:10.5px}.kolom-body{flex-direction:column;gap:7px;min-height:60px;padding:8px;display:flex;overflow-y:auto}.kolom.sleep-over{outline:2px dashed var(--accent);outline-offset:-2px}.kaartje{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius-s);cursor:grab;box-shadow:var(--schaduw);padding:9px 10px}.kaartje:active{cursor:grabbing}.kaartje b{font-size:13px;font-weight:600;line-height:1.3;display:block}.kaartje .m{color:var(--zacht);flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px;font-size:11.5px;display:flex}.overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;background:#0f0f0a73;justify-content:center;align-items:flex-start;padding:5vh 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.modaal{background:var(--paneel);border-radius:var(--radius);border:1px solid var(--lijn);width:100%;max-width:660px;box-shadow:0 20px 60px #00000040}.modaal.breed{max-width:940px}.modaal-kop{border-bottom:1px solid var(--lijn);align-items:center;gap:10px;padding:14px 16px;display:flex}.modaal-kop h3{margin:0;font-size:15px}.modaal-kop .sluit{margin-left:auto}.modaal-body{max-height:70vh;padding:16px;overflow-y:auto}.modaal-voet{border-top:1px solid var(--lijn);align-items:center;gap:8px;padding:12px 16px;display:flex}.modaal-voet .rechts{gap:8px;margin-left:auto;display:flex}.leeg{text-align:center;color:var(--zacht);padding:34px 16px;font-size:13px}.leeg b{color:var(--tekst);margin-bottom:5px;font-size:14px;display:block}.melding{border-radius:var(--radius-s);margin-bottom:12px;padding:9px 12px;font-size:12.5px}.melding.info{background:var(--blauw-bg);color:var(--blauw)}.melding.let-op{background:var(--oranje-bg);color:var(--oranje)}.melding.fout{background:var(--rood-bg);color:var(--rood)}.tabs{border-bottom:1px solid var(--lijn);gap:2px;margin-bottom:14px;display:flex;overflow-x:auto}.tabs button{cursor:pointer;color:var(--zacht);white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;padding:8px 12px;font-size:13px}.tabs button.actief{color:var(--tekst);border-bottom-color:var(--accent);font-weight:600}.filters{flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:12px;display:flex}.filters input,.filters select{border-radius:var(--radius-s);border:1px solid var(--lijn-sterk);background:var(--paneel);outline:none;padding:6px 9px;font-size:13px}.filters input[type=search]{min-width:210px}.balk{background:var(--lijn);border-radius:99px;height:6px;margin-top:6px;overflow:hidden}.balk i{background:var(--accent);border-radius:99px;height:100%;display:block}.balk i.rood{background:var(--rood)}.balk i.groen{background:var(--groen)}.balk i.oranje{background:var(--oranje)}.tijdlijn{margin:0;padding:0;list-style:none}.tijdlijn li{border-left:2px solid var(--lijn);padding:9px 0 9px 16px;position:relative}.tijdlijn li:before{content:"";background:var(--lijn-sterk);border-radius:99px;width:8px;height:8px;position:absolute;top:14px;left:-5px}.tijdlijn li.pos:before{background:var(--groen)}.tijdlijn li.neg:before{background:var(--rood)}.tijdlijn .wanneer{color:var(--zachter);font-size:11px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.rij-split{flex-wrap:wrap;align-items:flex-start;gap:16px;display:flex}.rij-split>*{flex:300px;min-width:0}.centreer{place-items:center;min-height:100vh;padding:24px;display:grid}.instap{width:100%;max-width:400px}.instap .kaart{margin:0}.klein{color:var(--zacht);font-size:12px}.streep{opacity:.55;text-decoration:line-through}.afgeschermd{color:var(--zachter);align-items:center;gap:5px;font-size:12px;font-style:italic;display:inline-flex}.laden{text-align:center;color:var(--zacht);padding:28px;font-size:13px}@media (width<=820px){.zij{z-index:60;transition:transform .18s;position:fixed;top:0;left:0;transform:translate(-100%)}.zij.open{transform:none}.app.menu-open:after{content:"";z-index:50;background:#0006;position:fixed;inset:0}.inhoud{padding:14px}.kop{padding:10px 14px}}.menu-knop{display:none}@media (width<=820px){.menu-knop{display:inline-flex}}