:root{--ink:#1a292e;--ink2:#344248;--muted:#768389;--border:#e3e8e8;--paper:#f4f6f5;--white:#fff;--accent:#d79b4d;--accent2:#efc48a;--green:#2b8c72;--blue:#3d7ba8;--red:#a45b50;--yellow:#ad762e;--radius:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.48}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}a{color:inherit;text-decoration:none}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;letter-spacing:-.04em}h1{font-size:clamp(27px,3vw,38px);line-height:1.17}h2{font-size:23px}h3{font-size:17px}small,.small{font-size:12px}svg{flex-shrink:0}#app{min-height:100vh}
.shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:254px;background:#18262d;color:#edf0ed;display:flex;flex-direction:column;z-index:20;border-right:1px solid #304048}.sidebar-logo{display:flex;align-items:center;gap:12px;margin:28px 22px 32px}.mark{width:40px;height:40px;border-radius:10px;background:#e9b569;color:#22323a;display:grid;place-items:center;flex-shrink:0}.mark svg{width:26px;height:26px}.brand-text{display:flex;flex-direction:column;line-height:1.2}.brand-text strong{font-size:21px;font-weight:800;letter-spacing:-.05em}.brand-text small{font-size:10px;letter-spacing:.18em;color:#acc0c1;text-transform:uppercase;margin-top:5px}.sidebar-nav{padding:0 12px;display:grid;gap:5px}.sidebar-nav button{border:0;border-radius:11px;background:transparent;color:#b8c5c6;text-align:left;padding:12px 14px;display:flex;align-items:center;gap:12px;font-weight:650}.sidebar-nav button svg{width:19px;height:19px;opacity:.8}.sidebar-nav button.active,.sidebar-nav button:hover{background:#304148;color:#fff}.sidebar-nav button.active{box-shadow:inset 3px 0 #efb96d}.sidebar-spacer{flex:1}.sidebar-lower{margin:10px 16px 17px;padding:18px;border-radius:14px;background:#24363e;color:#dce4e3}.sidebar-lower strong{display:block;font-size:13px;margin:2px 0}.sidebar-lower p{color:#a8bbbd;font-size:12px;margin:5px 0 12px}.sidebar-lower .btn{width:100%;justify-content:center}.sidebar-user{border-top:1px solid #35464d;padding:17px 18px;display:flex;gap:10px;align-items:center}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#405860;color:white;font-weight:800}.user-name{font-weight:750}.user-role{font-size:11px;color:#aabbbb}.sidebar-user .logout{margin-left:auto;color:#c1d2d4;background:transparent;border:0;padding:5px;display:grid;place-items:center}
.main{width:calc(100% - 254px);margin-left:254px;min-width:0}.topbar{background:#fff;border-bottom:1px solid var(--border);height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,3.7vw,56px);gap:15px;position:sticky;top:0;z-index:10}.topbrand{color:#879295;font-size:12px;font-weight:750;letter-spacing:.15em;text-transform:uppercase}.topright{display:flex;align-items:center;gap:12px}.top-date{color:#6e7d82;font-size:13px}.initial-avatar{width:34px;height:34px;border-radius:50%;background:#eaf0ee;display:grid;place-items:center;font-size:13px;font-weight:800}.mobile-toggle{display:none}.content{padding:clamp(20px,3.3vw,44px) clamp(16px,3.7vw,56px) 70px;max-width:1580px;margin:auto}.eyebrow{font-size:11px;letter-spacing:.19em;text-transform:uppercase;font-weight:850;color:#bc8343;margin-bottom:8px}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:28px}.page-head p{margin-top:8px;color:var(--muted)}.actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.btn{border:1px solid transparent;background:var(--ink);color:white;padding:11px 16px;border-radius:11px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-height:42px;transition:background .16s,transform .12s}.btn:hover{background:#394b50}.btn:active{transform:translateY(1px)}.btn svg{width:17px;height:17px}.btn.primary{background:var(--accent);color:#231f19}.btn.primary:hover{background:#e5af63}.btn.secondary{background:#fff;color:#344347;border-color:#d9dfdf}.btn.secondary:hover{background:#f4f6f6}.btn.ghost{background:transparent;color:#485a5f;border-color:transparent}.btn.ghost:hover{background:#edf0ef}.btn.danger{background:#fff6f3;color:#aa5345;border:1px solid #f1dcd5}.btn.small{padding:7px 10px;min-height:32px;font-size:12px;border-radius:9px}.btn.full{width:100%}.text-btn{border:0;background:transparent;color:#8e632c;font-weight:800;padding:4px;text-align:left}.text-btn:hover{text-decoration:underline}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 22px #18293005;overflow:hidden}.card-pad{padding:24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.section-heading h2{font-size:18px}.muted{color:var(--muted)}.tiny{font-size:11px}.bold{font-weight:800}.grid{display:grid;gap:17px}.grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.stack{display:grid;gap:18px}.split{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);gap:20px;align-items:start}.row{display:flex;align-items:center;gap:12px}.row.space{justify-content:space-between}.grow{flex:1;min-width:0}.nowrap{white-space:nowrap}.metric{padding:20px 22px;position:relative;overflow:hidden}.metric .metric-icon{width:39px;height:39px;display:grid;place-items:center;background:#faf2e6;color:#a76f32;border-radius:12px;margin-bottom:16px}.metric .metric-number{font-size:34px;font-weight:850;letter-spacing:-.055em;line-height:1}.metric .metric-title{margin-top:7px;color:#66777a;font-size:13px;font-weight:650}.metric .corner{position:absolute;right:17px;top:17px;color:#cad3d2}.metric .corner svg{width:19px}
.hero{background:linear-gradient(114deg,#1d3036 0%,#294149 76%,#314951 100%);color:white;border-radius:20px;min-height:230px;position:relative;display:flex;overflow:hidden;margin-bottom:26px;box-shadow:0 12px 25px #19303a12}.hero-copy{padding:37px 38px;max-width:610px;z-index:2}.hero .eyebrow{color:#ecc28e}.hero h1{font-size:clamp(25px,2.6vw,35px);max-width:460px;margin-bottom:11px}.hero p{color:#cedadc;max-width:405px;font-size:14px;margin-bottom:22px}.hero-art{position:absolute;right:2%;bottom:-8px;width:43%;height:94%;opacity:.8}.hero-art svg{width:100%;height:100%}
.pill{display:inline-flex;align-items:center;gap:5px;background:#edf1ef;color:#536269;border:1px solid transparent;padding:5px 10px;border-radius:100px;font-size:11px;font-weight:850;white-space:nowrap}.pill.nieuw{background:#ebeff2;color:#536b7a}.pill.wachten{background:#fff1da;color:#9a6827}.pill.geen_reactie{background:#ffefde;color:#b0712c}.pill.akkoord{background:#e6f3e9;color:#327d57}.pill.besteld{background:#e7eefb;color:#446ba2}.pill.ingepland{background:#e4f0f7;color:#3e7398}.pill.uitvoering{background:#e7f4f1;color:#2c8673}.pill.afgerond{background:#e7f3e9;color:#367b4c}.pill.archief{background:#ebedee;color:#737d82}.pill.afgewezen{background:#f9ebeb;color:#a05a5a}.pill .dot{width:6px;height:6px;background:currentColor;border-radius:50%}
.list{display:grid}.list-row{display:flex;align-items:center;gap:14px;padding:16px 20px;border-top:1px solid #edf0ee;min-width:0}.list-row:first-child{border-top:0}.list-row.clickable{cursor:pointer}.list-row.clickable:hover{background:#fafbf9}.list-icon{background:#f0f2ee;border-radius:12px;width:43px;height:43px;display:grid;place-items:center;color:#687b7f}.list-icon svg{width:20px;height:20px}.list-name{font-size:14px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-detail{font-size:12px;color:#839093;margin-top:3px}.list-tail{display:flex;gap:12px;align-items:center;margin-left:auto}.empty{padding:48px 20px;text-align:center;color:#879397}.empty .empty-emoji{font-size:32px;margin-bottom:8px}.searchbar{display:flex;align-items:center;background:#fff;border:1px solid #dbe1e0;border-radius:12px;gap:9px;padding:0 13px;flex:1;min-width:180px}.searchbar svg{width:18px;color:#8b9a9c}.searchbar input{width:100%;border:0;background:transparent;outline:0;padding:12px 0}.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:19px}.filters select{min-height:44px;max-width:220px}.filters .searchbar{min-width:230px}.check-label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:650;color:#66747a;cursor:pointer}.check-label input{accent-color:#b27b3d;width:17px;height:17px}.field{display:grid;gap:7px;min-width:0}.field label{font-size:12px;font-weight:800;color:#47575c}.field input,.field select,.field textarea,.filters select{border:1px solid #dce3e2;background:#fff;border-radius:10px;color:#223338;min-width:0;width:100%;outline:none;padding:11px 12px;transition:border-color .15s,box-shadow .15s}.field input:focus,.field select:focus,.field textarea:focus,.filters select:focus{border-color:#d69b4a;box-shadow:0 0 0 3px #f3dec2}.field textarea{resize:vertical;min-height:96px}.field .hint{font-size:11px;color:#8a9598}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field.fullspan{grid-column:1/-1}.modal-backdrop{position:fixed;inset:0;background:#102027a3;z-index:100;display:flex;justify-content:center;align-items:center;padding:18px;backdrop-filter:blur(3px)}.modal{background:#fff;border-radius:19px;max-width:680px;width:100%;max-height:min(88vh,900px);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px #101b2970}.modal.wide{max-width:860px}.modal-top{padding:20px 24px;border-bottom:1px solid #e6eaea;display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-top h2{font-size:20px}.modal-body{overflow:auto;padding:23px 24px}.modal-foot{padding:16px 24px;border-top:1px solid #e6eaea;display:flex;gap:10px;justify-content:flex-end}.icon-btn{border:0;background:transparent;display:grid;place-items:center;width:33px;height:33px;color:#7b888b;border-radius:10px}.icon-btn:hover{background:#f1f3f1}.icon-btn svg{width:19px;height:19px}.accent-note{background:#fff7e8;border:1px solid #f3e1c1;padding:13px 15px;border-radius:11px;color:#8a652e;font-size:12px}.info-note{background:#eef4f7;border:1px solid #dbe8ee;padding:13px 15px;border-radius:11px;color:#52788a;font-size:12px}.divider{border-top:1px solid #e9eeed;margin:20px 0}.job-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.job-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:#758489;font-size:13px;margin-top:12px}.job-meta .meta-item{display:flex;align-items:center;gap:6px}.job-meta svg{width:16px;height:16px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 22px}.tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid #e0e7e5;margin-bottom:20px}.tabs button{border:0;background:transparent;padding:12px 13px;color:#7c8a8e;white-space:nowrap;font-size:13px;font-weight:800;border-bottom:3px solid transparent}.tabs button.active{border-color:#d6a058;color:#26363a}.item-card{border:1px solid #dfe6e4;border-radius:14px;padding:18px;display:grid;gap:14px;margin-bottom:12px}.item-card.completed{background:#f9fbf9}.item-card .item-title{font-size:16px;font-weight:850}.custom-checkbox{appearance:none;position:relative;width:21px;height:21px;border:2px solid #bccac8;border-radius:6px;background:#fff;cursor:pointer;flex-shrink:0}.custom-checkbox:checked{background:#378774;border-color:#378774}.custom-checkbox:checked:after{content:'✓';color:#fff;position:absolute;top:-3px;left:3px;font-size:17px;font-weight:900}.spec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.spec{background:#f5f7f6;border-radius:10px;padding:11px 12px}.spec small{font-size:10px;display:block;color:#8a9999;margin-bottom:4px}.spec strong{display:block;font-size:13px}.progress-track{height:7px;background:#eaf0ed;border-radius:8px;overflow:hidden}.progress-fill{height:100%;border-radius:8px;background:#4caa8b;transition:width .25s}.progress-label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#738480;margin-bottom:7px}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.photo-tile{border:1px solid #e2e8e6;border-radius:13px;overflow:hidden;background:#fafbfa}.photo-image{width:100%;height:175px;object-fit:cover;background:#edf1f0;display:block;cursor:pointer}.photo-meta{padding:11px 12px}.photo-meta strong{font-size:12px;display:block}.photo-meta p{font-size:11px;color:#819093}.photo-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}.photo-actions button{border:0;background:transparent;font-size:11px;font-weight:800;color:#ad7c41;padding:0}.media-placeholder{border:2px dashed #d7dfdc;background:#fbfcfb;border-radius:13px;padding:26px;display:grid;place-items:center;gap:8px;text-align:center;color:#869493}.media-placeholder strong{color:#47585c}.note{border-left:3px solid #e7b16b;padding:4px 0 4px 14px;margin:0 0 16px}.note p{color:#35474c;white-space:pre-wrap;font-size:14px}.note small{color:#879499}.appt-row{display:flex;align-items:center;gap:14px;padding:17px 19px;border-top:1px solid #edf1f0}.date-chip{background:#f0f3f1;border-radius:11px;padding:8px 10px;text-align:center;min-width:58px}.date-chip strong{display:block;font-size:21px;line-height:1.1}.date-chip small{text-transform:uppercase;font-weight:800;color:#77878a}.muted-link{font-size:12px;color:#a17642;font-weight:850;cursor:pointer}.suppliers-table{display:grid;gap:10px}.supplier-line{padding:12px 15px;border:1px solid var(--border);border-radius:10px;background:white;display:flex;align-items:center;gap:10px}.supplier-line svg{color:#b6894c}.stack-sm{display:grid;gap:10px}.overline{font-size:11px;color:#9b7b5d;letter-spacing:.12em;text-transform:uppercase;font-weight:850}.micro-stat{border-radius:12px;background:#f4f7f5;padding:13px 15px;display:flex;justify-content:space-between;align-items:center}.micro-stat strong{font-size:17px}.login-screen{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:white}.login-left{background:linear-gradient(135deg,#16262c,#304953);padding:65px 8%;color:white;display:flex;flex-direction:column;overflow:hidden;position:relative}.login-left .brand-text strong{font-size:28px}.login-left .brand-text small{font-size:11px}.login-left .big-statement{font-size:clamp(33px,4vw,56px);line-height:1.11;font-weight:800;letter-spacing:-.055em;max-width:510px;margin-top:auto}.login-left .big-statement em{color:#eab878;font-style:normal}.login-left .login-description{margin:19px 0 auto;color:#b9c8c7;font-size:16px;max-width:380px}.login-drawing{position:absolute;width:80%;height:40%;right:-9%;bottom:2%;opacity:.17;pointer-events:none}.login-right{padding:40px;display:grid;place-items:center}.login-box{width:min(100%,390px)}.login-box h1{font-size:33px;margin-bottom:11px}.login-box>p{color:#889596;margin-bottom:26px}.login-box form{display:grid;gap:16px}.login-box button{margin-top:8px}.demo-mark{display:inline-block;padding:6px 10px;background:#fff4df;color:#a8702e;border-radius:8px;font-size:10px;letter-spacing:.06em;font-weight:800}.login-error{margin-top:12px;color:#a7463d;font-size:13px}.brand-sites{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.brand-site{border:1px solid #dfe5e3;border-radius:10px;min-width:110px;padding:12px;display:grid;gap:3px}.brand-site strong{font-size:14px}.brand-site small{font-size:10px;color:#8c9999}.brand-logo-img{max-height:32px;max-width:150px;object-fit:contain;object-position:left center}.loading-screen{height:100vh;display:grid;place-content:center;text-align:center;gap:13px;color:#778788}.spinner{width:29px;height:29px;border:3px solid #e5eae9;border-top-color:#ce934b;border-radius:50%;margin:auto;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast-root{position:fixed;bottom:26px;right:26px;z-index:200;display:grid;gap:9px;max-width:min(400px,90vw)}.toast{padding:13px 17px;background:#26393e;color:white;border-radius:11px;box-shadow:0 8px 24px #0003;font-size:13px;animation:enter .2s ease}.toast.error{background:#9d4a43}@keyframes enter{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}.mobile-bottom{display:none}canvas#draw-canvas{max-width:100%;touch-action:none;display:block;border:1px solid #e7ecea;border-radius:10px;cursor:crosshair}.brand-detail{display:flex;gap:8px;align-items:center;font-size:12px;color:#92a0a2}.dot-cluster{display:grid;grid-template-columns:repeat(2,5px);gap:3px}.dot-cluster i{width:5px;height:5px;border-radius:50%;background:#d1a05a}
@media(max-width:1170px){.split{grid-template-columns:1fr}.grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{opacity:.4}}
@media(max-width:850px){.sidebar{width:220px}.main{margin-left:220px;width:calc(100% - 220px)}.grid.cols3{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{padding:0 24px}}
@media(max-width:700px){.sidebar{display:none}.main{width:100%;margin:0}.topbar{height:64px;padding:0 18px}.top-date{display:none}.mobile-toggle{display:grid}.topbrand{font-size:11px}.content{padding:22px 15px 92px}.page-head{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:20px}.page-head h1{font-size:28px}.grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid.cols3,.grid.cols2{grid-template-columns:1fr}.metric{padding:15px}.metric .metric-icon{width:32px;height:32px;margin-bottom:9px}.metric .metric-number{font-size:29px}.metric .metric-title{font-size:12px}.hero{min-height:210px}.hero-copy{padding:27px 23px}.hero h1{font-size:27px}.hero-art{right:-10%;width:64%;opacity:.23}.card-pad{padding:17px}.list-row{padding:14px}.list-tail{gap:5px}.list-tail .hide-sm{display:none}.filters .searchbar{flex:1 1 100%}.filters select{flex:1}.form-grid{grid-template-columns:1fr}.spec-grid{gap:7px}.photo-grid{gap:8px}.photo-image{height:135px}.job-meta{gap:10px}.mobile-bottom{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid #e1e7e5;z-index:25;padding:7px 0 max(7px,env(safe-area-inset-bottom));box-shadow:0 -4px 18px #0000000a}.mobile-bottom button{border:0;background:transparent;color:#94a3a2;display:grid;place-items:center;gap:3px;font-size:9px;font-weight:850;padding:4px}.mobile-bottom button svg{width:21px;height:21px}.mobile-bottom button.active{color:#ba7d38}.mobile-bottom .mobile-add{background:#e0a652;color:#272726;width:47px;height:47px;border-radius:15px;margin-top:-19px;box-shadow:0 6px 15px #bd8e4c54}.mobile-bottom .mobile-add svg{width:22px;height:22px}.login-screen{display:flex;flex-direction:column;min-height:100vh}.login-left{min-height:210px;padding:32px 28px;justify-content:center}.login-left .big-statement{font-size:29px;margin:22px 0 0}.login-left .login-description{display:none}.login-left .login-drawing{display:none}.login-right{flex:1;padding:30px 26px}.login-box h1{font-size:28px}.modal-backdrop{padding:8px;align-items:flex-end}.modal{max-height:94dvh;border-radius:18px 18px 8px 8px}.modal-body{padding:18px}.modal-top{padding:16px 18px}.modal-foot{padding:13px 18px}.actions .btn{flex:1}.list-row .list-name{font-size:13px}}
@media(max-width:410px){.grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}.metric .metric-title{font-size:11px}.metric{padding:12px}.pill{padding:4px 7px;font-size:10px}.btn{font-size:12px;padding:10px}.job-title h1{font-size:25px}.photo-grid{grid-template-columns:1fr 1fr}}

.brand-text img.brand-logo-img + strong{display:none}