:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#17351f;background:#eef4ef;--green:#17672f;--deep:#0f4f25;--soft:#edf6ef;--line:#d8e6db;--muted:#68766c}*{box-sizing:border-box}body{margin:0;background:linear-gradient(#edf5ef,#f7faf8);min-height:100vh}header{position:sticky;top:0;z-index:5;background:linear-gradient(135deg,#0e4d24,#17672f);color:#fff;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 16px #0002}.brand{display:flex;gap:10px;align-items:center}.brand img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}.brand h1{font-size:19px;margin:0}.brand small{opacity:.86}.wrap{max-width:760px;margin:auto;padding:14px}.card,.task,.hello{background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px;margin-bottom:12px;box-shadow:0 4px 16px #15391d0b}.login-card{margin-top:6vh}.login-card h2{margin-top:0;color:var(--deep)}label{display:block;font-weight:800;margin:11px 0 5px;color:#31513a}input,textarea,select{width:100%;padding:13px;border:1px solid #c9d9cd;border-radius:11px;font:inherit;background:#fff}button{border:0;border-radius:11px;padding:12px 15px;background:var(--green);color:#fff;font-weight:800;font-size:15px;cursor:pointer}.ghost{background:#fff;color:var(--green);border:1px solid #86b996}.danger{color:#9b2f2f;border-color:#e0aaaa}.hidden{display:none!important}.ok,.warn{padding:10px 12px;border-radius:10px;margin-bottom:12px}.ok{background:#e7f5ea;color:#145b2c}.warn{background:#fff3d9;color:#755000}.hello{display:flex;justify-content:space-between;align-items:center}.hello h2{margin:2px 0 0}.hello small,.hello span{color:var(--muted)}.online-dot{width:13px;height:13px;border-radius:50%;background:#2c9b4b;box-shadow:0 0 0 5px #dff1e3}.online-dot.off{background:#c48718;box-shadow:0 0 0 5px #fff0cf}nav{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}nav button{background:#dfece2;color:#164e27}nav button.active{background:var(--green);color:#fff}.task{position:relative}.task h3{margin:0 0 5px;color:#163f25}.meta{color:var(--muted);font-size:13px;margin:3px 0}.location{font-weight:800;color:#244a30}.cranes{margin:8px 0;padding:8px 10px;border-radius:9px;background:#f2f7f3;font-size:13px}.badge{display:inline-block;padding:4px 9px;border-radius:999px;background:#edf6ee;color:var(--green);font-weight:800;font-size:12px;margin:7px 0}.badge.Besig{background:#fff3d9;color:#7e5800}.badge.Klaar{background:#e8f3ff;color:#205b89}.actions{display:flex;gap:8px;margin-top:11px}.actions button{flex:1}.task.done{opacity:.9}.stamp{border-top:1px dashed var(--line);margin-top:10px;padding-top:8px;font-size:12px;color:#5f7064}.topbtn{padding:8px 10px;background:#fff;color:#145b2c}.bottom-actions{display:flex;gap:8px}.bottom-actions button{flex:1}.modal{position:fixed;inset:0;background:#0008;z-index:20;display:flex;align-items:flex-end;justify-content:center;padding:12px}.modal-card{width:min(700px,100%);background:#fff;border-radius:20px 20px 14px 14px;padding:16px;max-height:92vh;overflow:auto}.modal-card h2{margin-top:0;color:var(--deep)}.sig-wrap{height:190px;border:2px dashed #9db8a4;border-radius:12px;background:#fff;touch-action:none}.sig-wrap canvas{width:100%;height:100%;display:block}.sig-actions{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;margin-top:12px}#loginMsg{color:#9b2f2f;margin-top:10px;font-weight:700}@media(max-width:480px){.wrap{padding:10px}.actions{flex-direction:column}.sig-actions{grid-template-columns:1fr 1fr}.sig-actions #confirmSig{grid-column:1/-1}.brand h1{font-size:17px}}
.waterline{margin:9px 0;padding:10px;border-radius:10px;background:#eaf5ee;color:#174b29;font-weight:800}.timebox{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0}.timebox div{background:#f4f8f5;border-radius:9px;padding:8px;font-size:12px}.unit{font-weight:800;color:#1d5f31;margin-top:6px}

/* V28.339 - aparte werks-app installasiekaart */
.jld-pwa-install-card{background:#fff;border:1px solid #cfe0d3;border-radius:16px;padding:14px;margin:12px auto;box-shadow:0 4px 16px #15391d10;max-width:760px}.jld-pwa-install-card h2{margin:0 0 6px;color:#163f25;font-size:18px}.jld-pwa-install-card p{margin:5px 0;color:#58685d}.jld-pwa-install-card button{width:100%;margin-top:10px}.jld-pwa-status{font-size:12px;margin-top:8px!important}.jld-pwa-status.ok{color:#14602d}.jld-pwa-status.warn{color:#875a00}.jld-installed{display:none!important}

/* V28.342 responsive presentation only */
@media (min-width:700px){.wrap,main,.appScreen{max-width:980px!important}.card,.task,.hello{padding:18px}button,input,select,textarea{font-size:16px;min-height:44px}}
@media (min-width:1000px){.wrap,main,.appScreen{max-width:1180px!important}.task-list,.tasks,#taskList{min-width:0}.modal-card{max-width:820px}}
@media (max-width:699px){header,.appHeader{padding-left:10px!important;padding-right:10px!important}.brand h1,.brand strong{font-size:16px!important}.wrap,main{width:100%;max-width:100%;padding-left:10px!important;padding-right:10px!important}.actions,.bottom-actions{flex-wrap:wrap}.actions button,.bottom-actions button{min-width:120px}input,select,textarea{font-size:16px!important}}
@media (orientation:landscape) and (max-height:650px){.login-card{margin-top:10px}.heroCard{padding-top:16px}.modal-card{max-height:96vh}}

/* V28.351 - eenvoudige veldvloei: Vandag / Laat / Volgende / Klaar */
.work-nav{grid-template-columns:repeat(4,1fr)}
.quick-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:0 0 12px}.quick-summary div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px;text-align:center}.quick-summary strong{display:block;font-size:20px;color:var(--deep)}.quick-summary span{font-size:11px;color:var(--muted)}
.task[data-state="Besig"]{border-left:5px solid #2878c8}.task[data-state="Probleem"]{border-left:5px solid #d64040}.task[data-state="Uitgestel"]{border-left:5px solid #d28b16}.task[data-state="Klaar"]{border-left:5px solid #2d9c4b}.badge.Probleem{background:#ffe6e6;color:#9d2424}.badge.Uitgestel{background:#fff0d5;color:#815300}.runtime{font-weight:800;color:#1d5f31;margin-top:7px}.problem-line{background:#fff0f0;border:1px solid #f0c4c4;color:#8d2727;padding:8px 10px;border-radius:9px;margin-top:8px}.actions .problem-btn{background:#a93535}.actions .rain-btn{background:#fff;color:#7a5a0a;border:1px solid #d9ba69}
@media(max-width:560px){.work-nav{grid-template-columns:repeat(2,1fr)}.quick-summary{grid-template-columns:repeat(2,1fr)}.actions{display:grid;grid-template-columns:1fr 1fr}.actions button{min-width:0}}