/* Ploegapp — donkergroen/mint, met een lichte stand voor fel zonlicht.
De stand staat op . Zonder keuze = systeem. */
:root{
color-scheme:dark;
--bg-deep:#0a2622; --bg-deep-2:#123a34; --bg-buiten:#03110f; --panel:#0f322c; --panel-2:#12433a;
--line:rgba(255,255,255,0.08);
--mint:#c9f2da; --mint-dim:#9fd8b8; --mint-soft:rgba(201,242,218,0.12); --mint-rand:rgba(201,242,218,0.4);
--op-mint:#0a2622;
--text:#eaf5ef; --text-muted:#9fb8ae; --text-faint:#6e8880;
--danger:#ff8a80; --danger-bg:rgba(255,138,128,0.12); --danger-rand:rgba(255,138,128,0.35);
--warn:#ffd479; --warn-bg:rgba(255,212,121,0.1); --warn-rand:rgba(255,212,121,0.35);
--ok:#8fe3ab;
--track:rgba(255,255,255,0.07);
--footer:#081f1c; --nav:rgba(8,26,23,0.92);
--pijl:%239fb8ae;
--radius:16px; --radius-sm:10px;
font-size:16px;
}
@media (prefers-color-scheme: light){
:root:not([data-thema="donker"]){
color-scheme:light;
--bg-deep:#f4faf7; --bg-deep-2:#e9f3ee; --bg-buiten:#dde9e3; --panel:#ffffff; --panel-2:#eef6f1;
--line:rgba(10,38,34,0.12);
--mint:#1f6b4e; --mint-dim:#2f7d5c; --mint-soft:rgba(31,107,78,0.10); --mint-rand:rgba(31,107,78,0.35);
--op-mint:#ffffff;
--text:#122019; --text-muted:#566b62; --text-faint:#7d918a;
--danger:#b3372c; --danger-bg:rgba(179,55,44,0.10); --danger-rand:rgba(179,55,44,0.3);
--warn:#8a6d1f; --warn-bg:rgba(138,109,31,0.10); --warn-rand:rgba(138,109,31,0.3);
--ok:#1f6b4e;
--track:rgba(10,38,34,0.08);
--footer:#eef6f1; --nav:rgba(244,250,247,0.94);
--pijl:%23566b62;
}
}
:root[data-thema="licht"]{
color-scheme:light;
--bg-deep:#f4faf7; --bg-deep-2:#e9f3ee; --bg-buiten:#dde9e3; --panel:#ffffff; --panel-2:#eef6f1;
--line:rgba(10,38,34,0.12);
--mint:#1f6b4e; --mint-dim:#2f7d5c; --mint-soft:rgba(31,107,78,0.10); --mint-rand:rgba(31,107,78,0.35);
--op-mint:#ffffff;
--text:#122019; --text-muted:#566b62; --text-faint:#7d918a;
--danger:#b3372c; --danger-bg:rgba(179,55,44,0.10); --danger-rand:rgba(179,55,44,0.3);
--warn:#8a6d1f; --warn-bg:rgba(138,109,31,0.10); --warn-rand:rgba(138,109,31,0.3);
--ok:#1f6b4e;
--track:rgba(10,38,34,0.08);
--footer:#eef6f1; --nav:rgba(244,250,247,0.94);
--pijl:%23566b62;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:var(--bg-buiten); color:var(--text);
display:flex; justify-content:center; min-height:100vh;
}
.device{
width:430px; max-width:100vw; min-height:100vh;
background:linear-gradient(180deg,var(--bg-deep) 0%, var(--bg-deep-2) 45%, var(--footer) 100%);
position:relative; display:flex; flex-direction:column; overflow:hidden;
box-shadow:0 0 0 1px var(--line);
}
@media (min-width:431px){
body{ padding:28px 0; }
.device{ min-height:calc(100vh - 56px); border-radius:36px;
box-shadow:0 30px 80px rgba(0,0,0,0.4), 0 0 0 8px var(--bg-buiten), 0 0 0 9px var(--line); }
}
/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;flex-shrink:0;gap:10px;}
.brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.brand .mark{width:34px;height:34px;border-radius:9px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--mint);font-size:16px;border:1px solid var(--line);flex-shrink:0;}
.brand .name{font-size:14px;font-weight:600;letter-spacing:0.2px;color:var(--text);}
.brand .name small{display:block;font-size:10.5px;font-weight:400;color:var(--text-faint);margin-top:1px;}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#5fb98a,#2f7d5c);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#08201b;border:1px solid var(--line);cursor:pointer;flex-shrink:0;}
.thema-btn{
width:34px;height:34px;border-radius:10px;background:var(--panel);border:1px solid var(--line);
color:var(--text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.thema-btn:active{background:var(--panel-2);}
/* Screens */
.screens{flex:1;position:relative;overflow:hidden;}
.screen{
position:absolute;inset:0;display:flex;flex-direction:column;
padding:0 20px calc(100px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;
opacity:0;visibility:hidden;transform:translateX(16px);
transition:opacity .22s ease, transform .22s ease;
}
.screen.active{opacity:1;visibility:visible;transform:translateX(0);}
h1.page-title{font-size:22px;margin:6px 0 2px;font-weight:700;}
.page-sub{font-size:13px;color:var(--text-muted);margin:0 0 18px;}
/* Login / profielen */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;}
.profile-card{
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
padding:22px 14px;text-align:center;cursor:pointer;transition:transform .12s ease;
}
.profile-card:active{transform:scale(0.97);background:var(--panel-2);}
.profile-card .avatar{width:56px;height:56px;margin:0 auto 10px;font-size:19px;}
.profile-card .p-name{font-size:15px;font-weight:700;}
.pinpad{max-width:260px;margin:14px auto 0;}
.pin-dots{display:flex;justify-content:center;gap:14px;margin:18px 0 22px;}
.pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--text-faint);}
.pin-dot.fill{background:var(--mint);border-color:var(--mint);}
.pin-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.pin-key{
height:64px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
color:var(--text);font-size:22px;font-weight:600;cursor:pointer;
}
.pin-key:active{background:var(--panel-2);}
.pin-key.ghost{background:transparent;border:none;font-size:14px;color:var(--text-muted);}
.pin-error{color:var(--danger);text-align:center;font-size:13px;min-height:18px;margin-top:10px;}
/* Job list */
.day-pill{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line);padding:5px 10px;border-radius:100px;font-size:11.5px;color:var(--mint-dim);margin-bottom:14px;font-weight:600;align-self:flex-start;}
.job-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;cursor:pointer;transition:transform .12s ease, background .12s ease;position:relative;}
.job-card:active{transform:scale(0.98);background:var(--panel-2);}
.job-card.current{border-color:var(--mint-rand);background:linear-gradient(135deg, var(--mint-soft), var(--panel));}
.job-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.job-time{font-size:12.5px;color:var(--text-muted);font-weight:600;letter-spacing:0.2px;}
.job-status{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:0.4px;}
.job-status.live{background:var(--mint-soft);color:var(--ok);}
.job-status.todo{background:var(--track);color:var(--text-faint);}
.job-status.paused{background:var(--warn-bg);color:var(--warn);}
.job-status.finished{background:var(--mint-soft);color:var(--mint);}
.job-type{font-size:16px;font-weight:700;margin:8px 0 3px;}
.job-client{font-size:13.5px;color:var(--text-muted);margin-bottom:2px;}
.job-addr{font-size:12.5px;color:var(--text-faint);display:flex;align-items:center;gap:5px;}
.job-progress{margin-top:12px;height:5px;border-radius:4px;background:var(--track);overflow:hidden;}
.job-progress > div{height:100%;background:var(--mint);border-radius:4px;}
.job-card.complete{opacity:0.72;}
.summary-row{display:flex;gap:10px;margin-bottom:18px;}
.summary-chip{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;text-align:center;}
.summary-chip .num{font-size:18px;font-weight:700;color:var(--mint);}
.summary-chip .lbl{font-size:10.5px;color:var(--text-faint);margin-top:2px;}
.todo-banner{background:var(--warn-bg);border:1px solid var(--warn-rand);border-radius:var(--radius-sm);padding:11px 13px;font-size:13px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.todo-banner button{background:none;border:1px solid var(--warn-rand);color:var(--warn);border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;}
/* Job detail */
.back-row{display:flex;align-items:center;gap:10px;margin:4px 0 10px;}
.icon-btn{width:34px;height:34px;border-radius:10px;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;flex-shrink:0;}
.icon-btn:active{background:var(--panel-2);}
.detail-hero{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px;}
.detail-hero .job-type{font-size:19px;}
.navigate-btn{margin-top:12px;width:100%;padding:11px;border-radius:var(--radius-sm);background:var(--panel-2);border:1px solid var(--line);color:var(--mint);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;text-decoration:none;}
.section-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-faint);margin:22px 0 10px;display:flex;justify-content:space-between;align-items:center;}
.section-label .count{color:var(--mint-dim);}
.task-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin-bottom:8px;cursor:pointer;}
.checkbox{width:24px;height:24px;border-radius:7px;border:2px solid var(--text-faint);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s ease;}
.task-row.done .checkbox{background:var(--mint);border-color:var(--mint);}
.task-row.done .checkbox svg{opacity:1;}
.checkbox svg{opacity:0;width:14px;height:14px;stroke:var(--op-mint);}
.task-label{font-size:14.5px;flex:1;}
.task-row.done .task-label{color:var(--text-faint);text-decoration:line-through;}
.timer-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.timer-display{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0.5px;}
.timer-display span{color:var(--text-faint);font-size:14px;font-weight:500;display:block;margin-top:2px;}
.timer-btn{width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--mint);color:var(--op-mint);}
.timer-btn.stop{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-rand);}
.material-row{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;}
.material-row .m-name{font-size:14px;font-weight:600;}
.material-row .m-qty{font-size:12.5px;color:var(--text-muted);margin-top:1px;}
.material-row .rm{color:var(--text-faint);font-size:18px;cursor:pointer;padding:4px;background:none;border:none;}
.add-btn{width:100%;padding:13px;border-radius:var(--radius-sm);background:transparent;border:1.5px dashed var(--line);color:var(--text-muted);font-size:13.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;}
.add-btn:active{background:var(--panel);}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.photo-thumb{aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:var(--panel);border:1px solid var(--line);position:relative;}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-add{aspect-ratio:1;border-radius:var(--radius-sm);border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--text-faint);cursor:pointer;font-size:24px;}
.photo-add:active{background:var(--panel);}
.note-area{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;color:var(--text);font-size:14px;font-family:inherit;resize:none;min-height:64px;line-height:1.4;}
.laadlijst-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 14px;}
.laad-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.laad-line:last-child{border-bottom:none;}
.laad-line .why{color:var(--text-faint);font-size:12px;text-align:right;}
.laad-line.essentieel .nm::before{content:"● ";color:var(--mint);}
.laad-line.aanvullend .nm::before{content:"○ ";color:var(--text-faint);}
.sticky-footer{position:sticky;bottom:0;left:0;right:0;padding:18px 20px calc(18px + env(safe-area-inset-bottom));background:var(--footer);box-shadow:0 -12px 20px 6px var(--footer);margin-top:26px;}
.primary-btn{width:100%;padding:16px;border-radius:14px;border:none;cursor:pointer;background:var(--mint);color:var(--op-mint);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;}
.primary-btn:active{background:var(--mint-dim);}
.primary-btn:disabled{opacity:0.45;}
/* Blokje met info van het kantoor */
.kantoor-blok{background:var(--warn-bg);border:1px solid var(--warn-rand);border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;line-height:1.45;margin-bottom:8px;}
.kantoor-blok b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--warn);margin-bottom:3px;}
.notitie-lijn{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:8px;font-size:13.5px;}
.notitie-lijn .wie{display:block;font-size:11px;color:var(--text-faint);margin-top:4px;}
/* Materiaal aantikken */
.zoek-veld{
width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:14px;color:var(--text);font-size:15px;font-family:inherit;margin-bottom:12px;
}
.mat-kaart{
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:14px;margin-bottom:8px;cursor:pointer;
}
.mat-kaart:active{background:var(--panel-2);}
.mat-kaart.stuk{border-color:var(--danger-rand);background:var(--danger-bg);}
.mat-kaart .mk-naam{font-size:15px;font-weight:600;}
.mat-kaart .mk-sub{font-size:12.5px;color:var(--text-muted);margin-top:3px;}
.mat-kaart .mk-let{font-size:12.5px;color:var(--warn);margin-top:4px;display:block;}
.mat-kaart .mk-pijl{color:var(--text-faint);font-size:18px;flex-shrink:0;}
.mat-status{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:0.4px;white-space:nowrap;}
.mat-status.ok{background:var(--mint-soft);color:var(--mint);}
.mat-status.defect{background:var(--danger-bg);color:var(--danger);}
.mat-status.in_herstelling{background:var(--warn-bg);color:var(--warn);}
.groep-kop{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-faint);margin:20px 0 8px;}
.gekozen-chip{
display:flex;align-items:center;justify-content:space-between;gap:10px;
background:var(--mint-soft);border:1px solid var(--mint-rand);border-radius:var(--radius-sm);padding:13px 14px;
}
.gekozen-chip .gc-naam{font-size:15px;font-weight:700;color:var(--mint);}
.gekozen-chip button{background:none;border:1px solid var(--mint-rand);color:var(--mint);border-radius:8px;padding:6px 11px;font-size:12.5px;cursor:pointer;font-family:inherit;}
/* Formulieren */
.field-label{font-size:12.5px;font-weight:600;color:var(--text-muted);margin:0 0 8px;display:block;}
.field-block{margin-bottom:18px;}
select, input[type=text], textarea{
width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:13px 14px;color:var(--text);font-size:15px;font-family:inherit;
}
textarea{resize:none;min-height:80px;line-height:1.4;}
select{appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;}
:root[data-thema="licht"] select{
background-image:url("data:image/svg+xml;utf8,");}
@media (prefers-color-scheme: light){
:root:not([data-thema="donker"]) select{
background-image:url("data:image/svg+xml;utf8,");}
}
.seg{display:flex;gap:8px;}
.seg-btn{flex:1;padding:14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel);color:var(--text-muted);font-size:13.5px;font-weight:600;text-align:center;cursor:pointer;}
.seg-btn.active{background:var(--mint-soft);border-color:var(--mint-rand);color:var(--mint);}
.seg-btn.active.urgent{background:var(--danger-bg);border-color:var(--danger-rand);color:var(--danger);}
.photo-upload-lg{border:1.5px dashed var(--line);border-radius:var(--radius);padding:26px 14px;text-align:center;color:var(--text-faint);cursor:pointer;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.photo-upload-lg.has-photo{padding:0;overflow:hidden;border-style:solid;}
.photo-upload-lg img{width:100%;display:block;max-height:220px;object-fit:cover;}
/* Einde dag checklist */
.check-progress{height:6px;border-radius:4px;background:var(--track);overflow:hidden;margin:4px 0 16px;}
.check-progress > div{height:100%;background:var(--mint);border-radius:4px;transition:width .2s ease;}
/* Bottom nav */
.bottom-nav{position:absolute;bottom:0;left:0;right:0;display:flex;background:var(--nav);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:6px;z-index:5;}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border-radius:12px;cursor:pointer;color:var(--text-faint);background:none;border:none;font-family:inherit;}
.nav-item.active{color:var(--mint);}
.nav-item svg{width:21px;height:21px;}
.nav-item span{font-size:10.5px;font-weight:600;}
/* Toast */
.toast{position:absolute;left:20px;right:20px;bottom:96px;background:var(--mint);color:var(--op-mint);padding:13px 16px;border-radius:14px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:9px;box-shadow:0 12px 28px rgba(0,0,0,0.35);transform:translateY(20px);opacity:0;pointer-events:none;transition:all .25s ease;z-index:20;}
.toast.show{transform:translateY(0);opacity:1;}
::-webkit-scrollbar{display:none;}
.hidden{display:none !important;}
/* ---- V3: wachtrij, verplichte foto, soort foto ---- */
.wachtrij-balk{background:#8a6d1f;color:#fff;font-size:13px;font-weight:600;padding:8px 14px;text-align:center;}
.finish-uitleg{margin:8px 2px 0;font-size:13px;line-height:1.35;opacity:.85;text-align:center;}
.foto-soort{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:10px;opacity:.85;}
.foto-soort select{font:inherit;padding:6px 8px;border-radius:8px;}
button:disabled{opacity:.5;}
#screen-checklist{padding-bottom:0;}
#screen-checklist.active{position:static;inset:auto;overflow:visible;padding-bottom:24px;}
.device:has(#screen-checklist.active){overflow:visible;}
.device:has(#screen-checklist.active) .screens{overflow:visible;}
.device:has(#screen-checklist.active) #bottomNav{position:sticky;}