:root{
  --ink:#0f1e1a; --ink-soft:#5a6a63; --line:#e4eae7; --bg:#f4f7f6; --surface:#fff;
  --brand:#0e8f6b; --brand-dark:#0a6b50; --brand-soft:#e5f5ef; --accent:#0f172a;
  --amber:#b8791a; --amber-soft:#f7ecd6; --danger:#c0492e; --danger-soft:#f9e6e1;
  --radius:14px; --shadow:0 6px 24px rgba(15,30,26,.08);
}
*{box-sizing:border-box;} html,body{margin:0;min-height:100%;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);}

.topbar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 20px;background:var(--accent);color:#fff;}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;letter-spacing:-.3px;}
.brand .mark{width:24px;height:24px;border-radius:6px;background:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:13px;transform:skewX(-8deg);}
.brand .iq{color:#4fd0a5;} .brand .tag{font-size:13px;font-weight:600;color:#8fb9ab;margin-left:4px;}
.dealer{font-size:14px;color:#a9bcb4;}

.wrap{max-width:1080px;margin:0 auto;padding:18px 20px 40px;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px;}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px;}
.stat .label{font-size:12.5px;color:var(--ink-soft);margin-bottom:5px;}
.stat .val{font-size:26px;font-weight:800;letter-spacing:-.5px;}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;margin-bottom:16px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.panel-head h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);margin:0;}
.muted{color:var(--ink-soft);font-size:12px;} .hint{color:var(--ink-soft);font-size:13px;margin:0 0 12px;}

.onderweg{display:flex;flex-direction:column;gap:10px;}
.od-card{display:flex;align-items:center;gap:14px;border:1px solid var(--amber);background:var(--amber-soft);border-radius:12px;padding:12px 14px;}
.od-card .live{width:9px;height:9px;border-radius:50%;background:var(--danger);flex:0 0 auto;box-shadow:0 0 0 4px var(--danger-soft);}
.od-main{flex:1 1 auto;min-width:0;}
.od-main .car{font-weight:700;font-size:15px;} .od-main .who{font-size:13px;color:var(--ink-soft);}
.od-empty{color:var(--ink-soft);font-size:14px;padding:6px 2px;}

.autos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.auto{border:1px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;gap:10px;}
.auto .top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.auto .car{font-weight:700;font-size:15px;} .auto .meta{font-size:12px;color:var(--ink-soft);}
.dot{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;}
.dot.beschikbaar{background:var(--brand-soft);color:var(--brand-dark);}
.dot.onderweg{background:var(--amber-soft);color:var(--amber);}
.auto .acts{display:flex;gap:8px;}

.btn{font:inherit;font-size:13px;font-weight:600;cursor:pointer;border-radius:9px;border:1px solid var(--line);padding:9px 13px;background:var(--surface);color:var(--ink);transition:transform .05s,background .15s;}
.btn:hover{border-color:#cdd8d3;} .btn:active{transform:scale(.97);}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;} .btn.primary:hover{background:var(--brand-dark);}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#fff;}
.btn.wa{background:#25d366;border-color:#25d366;color:#0a3d24;font-weight:700;}
.btn.wa:hover{background:#1fb955;border-color:#1fb955;}
.btn.wa::before{content:"";display:inline-block;width:14px;height:14px;margin-right:5px;vertical-align:-2px;background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230a3d24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm5.8 14.16c-.24.68-1.4 1.3-1.94 1.35-.5.05-1.13.07-1.82-.11-.42-.11-.96-.29-1.65-.59-2.9-1.25-4.79-4.17-4.94-4.36-.14-.19-1.18-1.57-1.18-2.99s.75-2.12 1.01-2.41c.27-.29.58-.36.77-.36.19 0 .39 0 .56.01.18.01.42-.07.66.5.24.58.82 2 .89 2.14.07.14.12.31.02.5-.1.19-.14.31-.29.48-.14.17-.3.38-.43.51-.14.14-.29.29-.12.57.17.29.75 1.23 1.6 2 1.11.98 2.04 1.29 2.33 1.43.29.14.46.12.63-.07.17-.19.72-.84.91-1.13.19-.29.39-.24.66-.14.27.1 1.7.8 1.99.94.29.14.48.22.55.34.07.12.07.68-.17 1.36z"/></svg>');}
.chan-btn.wa.active{background:#25d366;border-color:#25d366;color:#0a3d24;}
.btn.wa.lg::before{width:16px;height:16px;}
.btn.sm{padding:6px 10px;font-size:12px;} .btn.lg{padding:13px 18px;font-size:15px;width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.boete-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.boete-form input,.boete-form select{font:inherit;font-size:13px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);}
.boete-form input{flex:1 1 160px;}
.boete-result .hit{border:1px solid var(--danger);background:var(--danger-soft);border-radius:12px;padding:13px 14px;}
.boete-result .hit .name{font-weight:800;font-size:16px;} .boete-result .hit .row{font-size:13px;color:var(--ink);margin-top:3px;}
.boete-result .none{color:var(--ink-soft);font-size:13px;}
#map{height:230px;border-radius:10px;}

.table-wrap{overflow-x:auto;}
table.hist{width:100%;border-collapse:collapse;font-size:13px;}
table.hist th{text-align:left;color:var(--ink-soft);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:7px 9px;border-bottom:1px solid var(--line);}
table.hist td{padding:9px;border-bottom:1px solid var(--line);white-space:nowrap;}
table.hist tbody tr{cursor:pointer;} table.hist tbody tr:hover{background:var(--bg);} table.hist tbody tr.sel{background:var(--brand-soft);}
.lic{display:inline-flex;align-items:center;gap:5px;} .lic .cam{color:var(--brand);font-size:13px;}

.modal{position:fixed;inset:0;background:rgba(15,30,26,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;}
.modal[hidden]{display:none;}
.modal-card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);width:min(440px,100%);padding:18px;}
.modal-card.sm{width:min(320px,100%);text-align:center;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.modal-head h2{font-size:18px;margin:0;}
.icon{border:none;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:var(--ink-soft);}
#startForm label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-soft);margin-bottom:12px;}
#startForm input,#startForm select{font:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--surface);}
#startForm input:focus,#startForm select:focus{outline:none;border-color:var(--brand);}
#startForm .file{border:1.5px dashed var(--line);border-radius:10px;padding:12px;cursor:pointer;}
#startForm .file input{display:none;}
.modal-actions{margin-top:4px;}
.qr-box{display:flex;justify-content:center;padding:10px 0 6px;} .qr-box canvas,.qr-box img{border-radius:8px;}
#startForm .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#startForm textarea{font:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;resize:vertical;}
.rdw-note{font-size:11.5px;color:var(--ink-soft);margin:-6px 0 12px;}
.risk-box{border-radius:11px;padding:11px 13px;margin-bottom:12px;font-size:13px;}
.risk-box .rl{font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.risk-box .rl .lamp{width:12px;height:12px;border-radius:50%;}
.risk-box ul{margin:4px 0 0;padding-left:18px;} .risk-box li{margin:2px 0;}
.risk-box.groen{background:var(--brand-soft);color:var(--brand-dark);} .risk-box.groen .lamp{background:var(--brand);}
.risk-box.oranje{background:var(--amber-soft);color:#8a5a0a;} .risk-box.oranje .lamp{background:var(--amber);}
.risk-box.rood{background:var(--danger-soft);color:#8a1f0a;} .risk-box.rood .lamp{background:var(--danger);}
.risk-confirm{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--danger);margin-bottom:12px;cursor:pointer;}
.damage-toggle{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.damage-toggle > span{font-size:13px;color:var(--ink-soft);}
.seg{display:flex;gap:8px;} .seg-btn{flex:1;font:inherit;font-size:13px;font-weight:600;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer;}
.seg-btn.active{background:var(--brand);border-color:var(--brand);color:#fff;}
.seg-btn.active[data-dmg="1"]{background:var(--danger);border-color:var(--danger);}
.kenteken-row{display:flex;gap:8px;}
#dKenteken{flex:1;text-transform:uppercase;font-weight:700;letter-spacing:1px;background:#f5c518;border:2px solid #111;color:#111;text-align:center;}
#dKenteken::placeholder{color:#8a7414;font-weight:600;letter-spacing:0;}
.car-found{background:var(--brand-soft);color:var(--brand-dark);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:14px;font-weight:600;}
.car-found small{display:block;font-weight:400;color:var(--ink-soft);}
.followup-toggle{border-top:1px solid var(--line);padding-top:12px;margin-bottom:6px;}
.fu-check{flex-direction:row!important;align-items:center;gap:8px;color:var(--ink)!important;font-size:14px!important;}
#fuWrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.task-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.task-list li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:10px 13px;}
.task-list li.rood{border-left-color:var(--danger);background:var(--danger-soft);}
.task-list li.oranje{border-left-color:var(--amber);background:var(--amber-soft);}
.task-list li.grijs{border-left-color:#9aa6a1;}
.task-main{flex:1;min-width:0;} .task-main .who{font-weight:600;font-size:14px;} .task-main .sub{font-size:12px;color:var(--ink-soft);}
.task-due{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;}
.task-due.rood{background:var(--danger-soft);color:#8a1f0a;} .task-due.oranje{background:var(--amber-soft);color:#8a5a0a;} .task-due.grijs{background:var(--bg);color:var(--ink-soft);}
/* Voorwaarden / acceptatie */
.chan-seg{display:flex;gap:8px;margin-bottom:12px;}
.chan-btn{flex:1;font:inherit;font-size:13px;font-weight:600;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer;}
.chan-btn.active{background:var(--brand);border-color:var(--brand);color:#fff;}
.chan-btn:disabled{opacity:.5;cursor:not-allowed;}
#termsModal label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
#termsModal input{font:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;}
.terms-result{margin-top:14px;text-align:center;}
.terms-result .qr img{border-radius:8px;} .terms-result .lnk{font-size:12px;word-break:break-all;color:var(--brand-dark);margin-top:8px;}
.terms-status{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px;}
.terms-status.accepted{background:var(--brand-soft);color:var(--brand-dark);}
.terms-status.sent{background:var(--amber-soft);color:#8a5a0a;}
.terms-status.none{background:var(--danger-soft);color:#8a1f0a;}
.akkoord-terms{text-align:left;background:var(--bg);border-radius:10px;padding:14px 16px;margin-bottom:14px;}
.akkoord-terms h3{font-size:15px;margin:0 0 8px;} .akkoord-terms ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-soft);} .akkoord-terms li{margin:5px 0;}
.akkoord-check{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:14px;cursor:pointer;}
#intakeForm label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-soft);margin-bottom:12px;}
#intakeForm input:not([type=checkbox]){font:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);}
#intakeForm input:focus{outline:none;border-color:var(--brand);}
#intakeForm .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#intakeForm .file{border:1.5px dashed var(--line);border-radius:10px;padding:12px;cursor:pointer;flex-direction:row;align-items:center;}
#intakeForm .file input{display:none;}
#intakeForm .akkoord-check{flex-direction:row;}
.akkoord-done{text-align:center;padding:10px 0;} .akkoord-done .check{width:54px;height:54px;border-radius:50%;background:var(--brand);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.bev-times{margin-bottom:14px;} .bev-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:14px;} .bev-row span{color:var(--ink-soft);}
.bev-accepted{font-size:12.5px;color:var(--ink-soft);text-align:center;}
.dealer-logo{max-height:56px;max-width:190px;object-fit:contain;margin-bottom:12px;}
.dealer-contact{font-size:11.5px;color:var(--ink-soft);text-align:center;margin-top:14px;}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.settings-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-soft);}
.settings-grid label.full{grid-column:1/3;} .settings-grid label.chk{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:13px;}
.settings-grid input:not([type=checkbox]){font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;}
.logo-row{display:flex;align-items:center;gap:10px;} .set-logo{max-height:40px;max-width:120px;object-fit:contain;border:1px solid var(--line);border-radius:6px;padding:2px 4px;}
.od-card.wacht{border-color:var(--line);background:var(--bg);} .od-card.wacht .live{background:#9aa6a1;box-shadow:0 0 0 4px var(--line);}
.selfserve{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink);background:var(--brand-soft);border-radius:10px;padding:11px 13px;margin-bottom:12px;cursor:pointer;line-height:1.4;}
.selfserve input{margin-top:2px;flex:0 0 auto;}
.appr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:6px;}
.appr-grid > div{font-size:14px;} .appr-grid .lbl{display:block;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;}
.appr-photo .lbl{display:block;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;}
.appr-photo img{max-width:100%;max-height:220px;border-radius:10px;border:1px solid var(--line);}
.risk-pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;}
.risk-pill.groen{background:var(--brand-soft);color:var(--brand-dark);} .risk-pill.oranje{background:var(--amber-soft);color:#8a5a0a;} .risk-pill.rood{background:var(--danger-soft);color:#8a1f0a;}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--accent);color:#fff;padding:11px 16px;border-radius:10px;font-size:13px;z-index:2000;box-shadow:var(--shadow);}

/* Auth-pagina */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg);}
.auth-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:26px;}
.auth-card .brand{color:var(--ink);font-size:22px;margin-bottom:6px;}
.auth-card .brand .iq{color:var(--brand);} .auth-card .brand .tag{color:var(--ink-soft);}
.auth-sub{font-size:13.5px;color:var(--ink-soft);margin:0 0 18px;}
.auth-tabs{display:flex;gap:6px;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:18px;}
.auth-tab{flex:1;font:inherit;font-size:13px;font-weight:600;padding:9px;border:none;border-radius:8px;background:transparent;color:var(--ink-soft);cursor:pointer;}
.auth-tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
#loginForm label,#regForm label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-soft);margin-bottom:12px;}
#loginForm input,#regForm input{font:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;}
#loginForm input:focus,#regForm input:focus{outline:none;border-color:var(--brand);}
.auth-err{color:var(--danger);font-size:13px;margin-bottom:10px;}
.auth-demo{font-size:12px;color:var(--ink-soft);text-align:center;margin:12px 0 0;}
.btn.lg{width:100%;}

/* Account / verkopers */
#accountBtn{background:transparent;border:1px solid #3a4a44;color:#fff;font-size:13px;padding:7px 12px;border-radius:9px;cursor:pointer;}
#accountBtn:hover{border-color:var(--brand);}
.acct-bill{background:var(--brand-soft);border-radius:12px;padding:14px 16px;margin-bottom:16px;}
.acct-bill .big{font-size:26px;font-weight:800;color:var(--brand-dark);}
.acct-bill .lines{font-size:13px;color:var(--ink-soft);margin-top:4px;}
.team-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;}
.team-list li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;}
.team-list .tm{flex:1;min-width:0;} .team-list .tm .nm{font-weight:600;font-size:14px;} .team-list .tm .em{font-size:12px;color:var(--ink-soft);}
.role-pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand-dark);}
.role-pill.verkoper{background:var(--bg);color:var(--ink-soft);}
.add-verkoper{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
.add-verkoper input{font:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;}
.add-verkoper .full{grid-column:1/3;}
.pl-inp{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;min-width:0;}
.pl-inp.pl-code{flex:0 0 130px;font-weight:700;} .pl-inp.pl-label{flex:1 1 auto;}
.pl-inp[readonly]{background:var(--bg);color:var(--ink-soft);}

@media(max-width:820px){ .stats{grid-template-columns:1fr 1fr;} .two{grid-template-columns:1fr;} }