:root{--teal:#2f7f79;--teal2:#dcebea;--ink:#15211f;--line:#8ca7a4;--bg:#f2f6f5;--warn:#fff0b8;--danger:#ffd7d7}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}
.topbar{position:sticky;top:0;z-index:20;background:var(--teal);color:#fff;padding:16px 22px;display:flex;justify-content:space-between;gap:16px;align-items:center;box-shadow:0 2px 10px #0002}.topbar h1{margin:0;font-size:22px}.topbar p{margin:2px 0 0;opacity:.85}.actions{display:flex;gap:8px;flex-wrap:wrap}button{border:0;border-radius:8px;padding:10px 13px;font-weight:700;cursor:pointer}button.primary{background:#fff;color:#24645f}button.secondary{background:#ffffff20;color:#fff;border:1px solid #ffffff70}.page{max-width:1180px;margin:20px auto 60px;padding:0 14px}.card{background:#fff;border:1px solid #d2dfdd;border-radius:12px;padding:18px;margin:0 0 16px;box-shadow:0 3px 12px #16433d0c}.card h2{margin:0 0 14px;color:#24645f;font-size:18px}.muted{color:#657775;font-size:13px}.grid{display:grid;gap:12px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}label{font-weight:700;font-size:13px;display:flex;flex-direction:column;gap:5px}input,select,textarea{border:1px solid #b7c8c5;border-radius:7px;padding:9px 10px;font:inherit;background:#fff;width:100%}textarea{resize:vertical}.item{border:1px solid #cfdcda;border-radius:10px;overflow:hidden;margin:10px 0}.item-main{padding:13px}.item-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.item-name{display:flex;gap:9px;align-items:center}.num{width:28px;height:28px;border-radius:50%;background:#e0efed;color:#24645f;display:inline-flex;align-items:center;justify-content:center;font-weight:800}.status-wrap{width:190px}.threshold{margin:10px 0;padding:9px;background:#f7f9f9;border:1px solid #e3e9e8;border-radius:7px;font-size:13px;line-height:1.45}.dev{display:none;border-top:1px solid #cfdcda;padding:13px}.dev.show{display:block}.dev.i{background:var(--warn)}.dev.g{background:var(--danger)}.dev-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}.badge{background:#fff;border-radius:999px;padding:4px 10px;font-weight:900}.preview{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.preview figure{margin:0}.preview img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid #b7c8c5;border-radius:6px}.preview figcaption{font-size:11px;color:#667;margin-top:3px;overflow-wrap:anywhere}.saved{display:grid;gap:8px}.saved-row{border:1px solid #d2dfdd;border-radius:8px;padding:10px;display:flex;justify-content:space-between;gap:10px;align-items:center}.saved-row .meta{font-size:12px;color:#667}.saved-row .row-buttons{display:flex;gap:6px}.saved-row button{background:#e0efed;color:#245f5a}.saved-row .del{background:#ffe3e3;color:#8b2929}
.multi-select{position:relative}.multi-select details{width:100%}.multi-select summary{list-style:none;border:1px solid #b7c8c5;border-radius:7px;padding:9px 34px 9px 10px;background:#fff;cursor:pointer;position:relative;min-height:37px;font-weight:400}.multi-select summary::-webkit-details-marker{display:none}.multi-select summary:after{content:'▾';position:absolute;right:11px;top:8px;color:#526663}.multi-select details[open] summary{outline:2px solid #d9ebe9;border-color:#79a7a2}.multi-options{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #b7c8c5;border-radius:8px;box-shadow:0 8px 24px #0002;padding:7px;max-height:260px;overflow:auto}.multi-options label{display:flex;flex-direction:row;align-items:center;gap:8px;padding:7px 6px;font-weight:500;border-radius:5px}.multi-options label:hover{background:#edf5f4}.multi-options input{width:auto;margin:0}.location-help{font-size:11px;color:#657775;font-weight:400;margin-top:2px}
#printRoot{display:none}
@media(max-width:760px){.topbar{position:static;flex-direction:column;align-items:flex-start}.g2,.g3{grid-template-columns:1fr}.item-head{flex-direction:column}.status-wrap{width:100%}.preview{grid-template-columns:repeat(2,1fr)}}


.signature-wrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start}
.signature-pad-box{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.signature-pad-box canvas{display:block;width:100%;height:180px;touch-action:none;cursor:crosshair;background:#fff}
.signature-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.signature-tools button{background:#e5f1f0;color:var(--brand-dark)}
.signature-preview{border:1px dashed #aebdbc;border-radius:10px;min-height:180px;padding:10px;display:flex;align-items:center;justify-content:center;background:#fafcfc}
.signature-preview img{max-width:100%;max-height:155px;object-fit:contain}
.signature-placeholder{color:var(--muted);font-size:.88rem;text-align:center}
.signature-upload input{margin-top:6px}
.print-signature{display:block;max-width:58mm;max-height:16mm;object-fit:contain;margin-top:2mm}


/* Mobile / telefoon optimalisaties */
html{-webkit-text-size-adjust:100%}
button,input,select,textarea,summary{min-height:44px}
input,select,textarea{font-size:16px}
textarea{min-height:96px}
input[type="checkbox"]{min-height:auto}
.mobile-only{display:none}
.mobile-help{display:none}
@media(max-width:760px){
 body{padding-bottom:86px}
 .topbar{
   position:sticky;top:0;z-index:50;
   padding:12px 14px;
   padding-top:max(12px,env(safe-area-inset-top));
 }
 .topbar h1{font-size:19px}
 .topbar p{font-size:12px}
 .actions{
   position:fixed;
   left:0;right:0;bottom:0;z-index:60;
   display:grid;grid-template-columns:1fr 1fr 1fr;
   gap:8px;
   padding:10px 12px calc(10px + env(safe-area-inset-bottom));
   background:var(--teal);
   box-shadow:0 -3px 14px #0003;
 }
 .actions button{width:100%;min-height:48px;padding:9px 6px;font-size:13px}
 .page{margin:12px auto 18px;padding:0 9px}
 .card{padding:14px 11px;border-radius:10px;margin-bottom:11px}
 .card h2{font-size:17px;margin-bottom:12px}
 .grid,.g2,.g3{grid-template-columns:1fr!important;gap:11px}
 label{font-size:14px}
 input,select,textarea,.multi-select summary{font-size:16px;padding:11px 12px}
 .multi-select summary{min-height:46px}
 .multi-options{
   position:fixed;
   left:10px;right:10px;top:auto;bottom:82px;
   max-height:58vh;
   border-radius:14px;
   padding:8px;
   z-index:100;
 }
 .multi-options label{
   padding:12px 10px;
   min-height:48px;
   font-size:16px;
 }
 .multi-options input[type="checkbox"]{
   width:22px;height:22px;flex:0 0 22px;
 }
 .item{margin:9px 0;border-radius:9px}
 .item-main,.dev{padding:12px 10px}
 .item-head{flex-direction:column;gap:10px}
 .item-name{align-items:flex-start}
 .num{flex:0 0 30px;width:30px;height:30px}
 .status-wrap{width:100%}
 .threshold{font-size:13px;padding:10px;line-height:1.5}
 .dev-head{align-items:center}
 .preview{grid-template-columns:1fr 1fr;gap:7px}
 .preview figcaption{font-size:10px}
 .saved-row{align-items:flex-start;flex-direction:column}
 .saved-row .row-buttons{width:100%}
 .saved-row button{flex:1;min-height:44px}
 .signature-wrap{grid-template-columns:1fr!important}
 .signature-pad-box canvas{height:210px}
 .signature-preview{min-height:120px}
 .signature-tools button{width:100%}
 .mobile-help{display:block;color:#657775;font-size:12px;font-weight:400;margin-top:4px}
}