: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}}

/* 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.352 Veldwerk app usability only */
.quick-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.quick-summary>div{background:#fff;border:1px solid #d9e8dd;border-radius:14px;padding:10px;text-align:center}.quick-summary b{display:block;font-size:22px;color:#145b2c}.quick-summary span{font-size:12px;color:#657267}.task-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.task.has-problem{border-color:#e2b44c;background:#fffdf6}.problem-box{margin:9px 0;padding:9px 10px;border-radius:10px;background:#fff2cc;color:#6d4b00;font-weight:700}.progressbar{height:8px;border-radius:999px;background:#e7eee9;overflow:hidden;margin-top:9px}.progressbar span{display:block;height:100%;background:#2f8f46}.warnbtn{background:#b87800!important}.completion-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-card select,.modal-card input[type=file],.modal-card input[type=number]{width:100%;box-sizing:border-box;margin:4px 0 10px}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.actions button{min-height:46px}.actions button:last-child{grid-column:1/-1}@media(max-width:560px){.quick-summary{grid-template-columns:repeat(3,1fr)}.task-head{flex-direction:column}.actions{grid-template-columns:1fr}.actions button:last-child{grid-column:auto}.completion-grid{grid-template-columns:1fr}}