*{box-sizing:border-box}body{background:#edf4f7;color:#102e3c;margin:0;font-family:system-ui,-apple-system,sans-serif;line-height:1.5}main{max-width:780px;margin:auto;padding:20px 18px 40px}.top{display:flex;align-items:center;justify-content:space-between;gap:20px}.top img{width:155px;max-width:45%;height:auto}.back{color:#075071;font-weight:700;text-decoration:none}h1{font-size:28px;margin:24px 0 12px}h2{font-size:20px;margin:0}section{background:#fff;border:1px solid #c5d5df;border-radius:20px;padding:20px;margin:18px 0}.notice{padding:12px 15px;background:#dceaf1;border-radius:12px;white-space:pre-wrap;font-weight:600;min-height:48px}button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:14px 16px;background:#075071;color:white;font-weight:650;min-height:48px}button:disabled{opacity:.45;cursor:default}a{color:#075071}.secondary{background:#e8f0f4;color:#075071;border:1px solid #b7cad5}.danger{background:#a62e2e}.live{border-top:4px solid #ec7840}.live-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.connection{font-size:14px;font-weight:650}#current{font-size:29px;font-weight:750;margin:12px 0 4px}small{display:block;color:#405d6c}#synced{font-size:13px}.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tile{display:flex;flex-direction:column;align-items:flex-start;position:relative;text-align:left;color:#103a50;background:white;border:1px solid #b6ccd9;border-radius:18px;padding:18px;min-height:154px;text-decoration:none;box-shadow:0 3px 10px #173e5410}.tile-icon{font-size:29px;line-height:1.3;margin-bottom:8px}.tile strong{font-size:18px}.tile small{font-size:13px;font-weight:400;margin-top:3px;padding-right:12px}.tile-arrow{position:absolute;top:20px;right:18px;font-size:24px}.tile[aria-expanded=true]{background:#075071;color:white;border-color:#075071}.tile[aria-expanded=true] small{color:#e5f4fc}.tile[aria-expanded=true] .tile-arrow{transform:rotate(180deg)}.tile:hover{border-color:#ec7840}.tile:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ed7841;outline-offset:3px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.close{font-size:13px;padding:9px 12px;min-height:44px}.buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.muted{color:#405d6c;font-size:14px}.day-picker{display:flex;align-items:flex-end;gap:8px}.day-picker label{flex:1;font-weight:650;font-size:14px}input{display:block;width:100%;min-width:0;font:inherit;color:#102e3c;padding:11px;border:1px solid #9eb9c8;border-radius:10px;background:white;min-height:48px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:15px}th,td{text-align:left;vertical-align:top;padding:13px 6px;border-bottom:1px solid #d5e1e8}th:first-child,td:first-child{white-space:nowrap;width:105px}td a{display:block;margin-top:6px;font-size:14px}footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:12px}.hidden{display:none!important}@media(max-width:360px){main{padding:14px 10px}.tile{padding:14px;min-height:155px}.tile strong{font-size:16px}.panel-head{align-items:flex-start}.live-head h2{font-size:18px}}

select{display:block;width:100%;font:inherit;background:white;color:#102e3c;padding:12px;border:1px solid #9eb9c8;border-radius:10px;margin:5px 0 14px;min-height:48px}#download-day-label{display:block;margin-bottom:14px}

.scan-button{width:100%;margin-bottom:8px;background:#075071}dialog{border:1px solid #b7cad5;border-radius:20px;width:min(94vw,520px);padding:20px;max-height:90dvh;overflow:auto;color:#102e3c}dialog::backdrop{background:#0b223bb3}#qr-video{display:none;width:100%;max-height:45vh;border-radius:14px;background:#132b39}#qr-video.running{display:block}.qr-photo{display:block;margin:18px 0;font-weight:600}.qr-photo input{font-size:14px;margin-top:8px}dialog details{margin-top:18px}dialog summary{cursor:pointer;font-weight:700}dialog label{display:block;margin-top:12px}dialog input{margin-bottom:12px}

/* Keep iOS live preview sized before video metadata arrives. */
.current-trip{font-size:23px;font-weight:800;color:#075071;margin:0 0 10px;letter-spacing:.02em}
#trip-contact-slot > .trip-contact-card{border:0;padding:0;margin:0;box-shadow:none}
#qr-video.running{display:block;min-height:220px;height: min(38vh,320px);width:100%;object-fit:contain;aspect-ratio:4/3;background:#132b39}

/* v288 iPhone status bar and Dynamic Island */
body{padding-top:calc(env(safe-area-inset-top,0px) + 14px)!important;padding-bottom:env(safe-area-inset-bottom,0px)}@media(display-mode:standalone){body{padding-top:calc(env(safe-area-inset-top,0px) + 20px)!important}}.portal-step-back{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:12px;background:#e4eff4;color:#075071;font-weight:800;margin:8px 0;border:1px solid #bed2da}

/* v294 readable activity, address and sharing on each log row. */
.log-duration{margin-top:5px;font-weight:650}.log-activity{display:block;font-size:15px}.log-address{margin:7px 0 0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}.log-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px}.log-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0}.log-whatsapp{color:#146b3a;font-weight:700;text-decoration:none}.log-whatsapp svg{width:23px;height:23px;flex-shrink:0}td small{line-height:1.4}
/* v296: Komende ritten overzicht */
.rides-overview{background:#fff;border:1px solid #bdd4df;border-left:5px solid #1486b2;border-radius:17px;padding:16px;margin:14px 0;color:#123744}
.rides-overview h2{margin:0 0 4px;font-size:19px}
.rides-overview .ride-head{margin:14px 0 6px;font-weight:800;color:#075b82;border-top:1px solid #d7e6ed;padding-top:10px}
.rides-overview .ride-row{padding:6px 0 10px}
.rides-overview .ride-row strong{display:block}
.rides-overview .ride-row small{color:#456271;display:block;margin-top:2px}
.rides-overview .ride-map{display:inline-block;margin-top:6px;color:#075b82;font-weight:700;text-decoration:none}
.rides-overview .ride-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rides-overview .ride-scan{min-height:40px;border:0;border-radius:10px;background:#075b82;color:#fff;font-weight:700;padding:8px 14px}
.rides-overview .ride-scan:disabled{opacity:.6}
/* Afgehandeld-knoppen en historie (v319) */
.rides-overview .ride-done{min-height:40px;border:0;border-radius:10px;background:#14713e;color:#fff;font-weight:700;padding:8px 14px}
.rides-overview .ride-done:disabled{opacity:.6}
.rides-overview .rides-done{margin-top:14px;border-top:1px solid #d7e6ed;padding-top:10px}
.rides-overview .rides-done>summary{cursor:pointer;font-weight:800;color:#456271}
.rides-overview .ride-row-done{opacity:.75}
.rides-overview .ride-restore{min-height:38px;border:1px solid #bdd4df;border-radius:10px;background:#eef5f8;color:#075b82;font-weight:700;padding:7px 12px}
.rides-overview .ride-restore:disabled{opacity:.6}
/* Per-rit blok (v320) */
.rides-overview .rit-block{margin:6px 0 12px}
.rides-overview .rit-block .ride-head{margin-top:0}
.rides-overview .rit-block .ride-row{padding:4px 0 6px}
.rides-overview .rit-block .ride-links{margin-top:6px}

/* v337 – papieren afhandelen: duidelijke afronding, archief blijft intact */
#paper-handoff:not([hidden]){display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#paper-handoff a{flex:1;min-width:170px}
#paper-handoff .paper-finished{min-height:42px;padding:8px 16px;background:#14713e;color:#fff;border:0}
#paper-handoff small{flex-basis:100%;font-weight:400}

/* v390: omschrijving per stop (referentie, VDM, opmerking) */
.ride-info{margin:6px 0 4px;padding:7px 9px;background:#f2f7fa;border:1px solid #d5e5ea;border-radius:8px;display:grid;gap:3px;font-size:14px}
.ride-info-line{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ride-info-line b{font-variant-numeric:tabular-nums;letter-spacing:.3px}
.ride-copy{border:0;background:#dceaf0;border-radius:6px;min-width:34px;min-height:30px;padding:2px 6px;cursor:pointer;font-size:14px}

/* v390: CMR staat bij elke rit klaar */
.ride-cmr{background:#075071;color:#fff;border:0;border-radius:8px;min-height:40px;padding:8px 12px;font-weight:700;cursor:pointer}

.ride-gmp{display:inline-block;margin:2px 0 8px;font-weight:700;color:#075071}

/* v390: klant appen per stop */
.rides-overview .ride-wa{display:inline-block;margin:6px 0 0 0;min-height:38px;border:0;border-radius:10px;background:#25d366;color:#073b1d;font-weight:700;padding:7px 12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.rides-overview .ride-map{margin-right:14px}
.rides-overview .ride-open{outline:3px solid #f0a020;outline-offset:1px}
/* v390: versturen per rit */
.rides-overview .ride-send{min-height:40px;border:0;border-radius:10px;background:#25d366;color:#073b1d;font-weight:800;padding:8px 14px}
.ride-send-dialog{border:0;border-radius:16px;width:min(560px,94vw);max-height:90vh;overflow:auto;padding:14px;box-shadow:0 20px 60px #082d3e66}
.ride-send-dialog::backdrop{background:#082d3e99}
.ride-send-close{display:block;margin:0 0 8px auto}
.ride-send-more{display:block;margin-top:10px;font-weight:700;color:#075b82}
/* v446: ritten in de dagactiviteiten aanklikbaar */
.day-trips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.day-trips small{flex-basis:100%;color:#5b7183}
.day-trip-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:12px;background:#0b5c8a;color:#fff!important;font-weight:800;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-trip-link{display:inline-block;margin-top:6px;font-weight:800;color:#0b5c8a;text-decoration:none}
@media (prefers-color-scheme:dark){.log-trip-link{color:#7cc4f0}.day-trips small{color:#9fb3c2}}
/* v446: opmerkingen bij ritten ingeklapt */
.ride-notes{margin-top:6px;border-radius:10px;background:rgba(11,92,138,.06);padding:6px 10px}
.ride-notes summary{cursor:pointer;font-weight:700;color:#0b5c8a;min-height:36px;display:flex;align-items:center}
.ride-notes[open] summary{margin-bottom:4px}
.ride-notes .ride-info-line{white-space:pre-wrap;line-height:1.4;margin:2px 0}
@media (prefers-color-scheme:dark){.ride-notes summary{color:#7cc4f0}}

/* v446: ritten ingeklapt met status in de kop */
.rides-overview details.rit-block{border:1px solid #d7e6ed;border-radius:14px;padding:0 12px;background:#fff;margin:8px 0}
.rides-overview details.rit-block>summary.ride-head{list-style:none;cursor:pointer;margin:0;border-top:0;padding:12px 26px 12px 0;position:relative;display:flex;flex-direction:column;gap:4px}
.rides-overview details.rit-block>summary::-webkit-details-marker{display:none}
.rides-overview details.rit-block>summary::after{content:'▾';position:absolute;right:2px;top:12px;color:#075b82;transition:transform .15s}
.rides-overview details.rit-block[open]>summary::after{transform:rotate(180deg)}
.rides-overview details.rit-block[open]{padding-bottom:10px}
.rides-overview .ride-status{font-size:.82rem;font-weight:700;border-radius:999px;padding:3px 10px;align-self:flex-start}
.rides-overview .ride-status.ready{background:#e3f3e4;color:#22682a}
.rides-overview .ride-status.nopaper{background:#fde2dc;color:#b3261e}
.rides-overview .ride-status.busy{background:#dcebf3;color:#075071}
.rides-overview .ride-status.later{background:#eef2f4;color:#5b7180}
.rides-overview details.rit-nopaper{border-color:#f0a99d}
.rides-overview details.rit-ready{border-color:#9fd3a6}
.rides-overview .rides-past-tip{background:#fff4e5;border:1px solid #f3c58a;color:#7a4a00;border-radius:12px;padding:8px 12px;font-weight:600;margin:8px 0}
.rides-overview .rides-done details.rit-block>summary.ride-head{color:#5b7180}

/* v446: knop om de boordcomputer op afstand te verbergen naar de rekenmachine */
.hide-remote{grid-column:1/-1;background:#0e3a50;color:#fff;border:0;border-radius:12px;padding:12px;font-weight:700;margin-top:6px}
.hide-remote:disabled{opacity:.5}

/* v447: melding wanneer de boordcomputer een weekstaat naar het portaal stuurt */
.auto-open-banner{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;background:#eaf5ec;border:2px solid #1f8f4e;border-radius:12px;padding:.8rem 1rem;margin:0 0 1rem}
.auto-open-banner strong{color:#13532f}
.auto-open-banner button{background:#1f8f4e;color:#fff;border:0;border-radius:10px;padding:.55rem 1rem;font-weight:600}
/* v450: compact, accessible choice of original PDF pages. */
.hours-sheet-picker{width:min(680px,94vw);max-height:92dvh;overflow:auto;border:0;border-radius:14px;padding:18px;color:#123044}
.hours-sheet-picker::backdrop{background:#06283bb8}
.hours-sheet-picker fieldset{display:grid;gap:4px;border:1px solid #bfd3dc;border-radius:8px}
.hours-sheet-picker fieldset label{display:flex;align-items:center;gap:10px;min-height:44px;margin:0}
.hours-sheet-picker input[type=checkbox]{width:22px;height:22px;flex:0 0 22px}
.hours-sheet-picker iframe{width:100%;height:48vh;border:1px solid #bfd3dc;margin-top:10px}
.hours-sheet-picker [hidden]{display:none!important}