/* ==========================================================================
   HOOGWERKT PLATFORM — VELD (bevroren veldoppervlak: chauffeur · monteur · loods)
   Bron: Design Freeze 2026-08-31 `Hoogwerkt Veld.dc.html` (e5fc944e…).
   Mobile-first app-frame (max 460px op een podium), donkere kop, lijst met
   taakkaarten, onderbalk, detailscherm met één primaire actie, bevestigings-
   sheet, toast. Tokens en compat-laag komen uit css/planboard.css (`.pb-skin`).
   ========================================================================== */
.veld { min-height:100dvh; background:var(--stage,#D6DEE0); display:flex; align-items:stretch; justify-content:center; font-family:var(--pb-body); color:var(--text-primary); --stage:#D6DEE0; }
.veld[data-theme="dark"] { --stage:#0E151A; }
.veld *, .veld *::before, .veld *::after { box-sizing:border-box; }
.veld-frame { width:100%; max-width:460px; background:var(--bg); min-height:100dvh; display:flex; flex-direction:column; position:relative; box-shadow:0 0 80px -30px var(--shadow); }
@media (max-width:559px) { .veld-frame { max-width:100%; box-shadow:none; } }
.veld-head { position:sticky; top:0; z-index:12; background:linear-gradient(180deg,#26383F 0%,#1E2E35 100%); color:#F2F7F7; padding:14px 16px 12px; }
body:has(#staging-environment-marker) .veld-head { top:29px; }
body:has(#staging-environment-marker) .veld { padding-top:29px; }
.veld-head-row { display:flex; align-items:center; gap:11px; }
.veld-head img { width:30px; height:30px; object-fit:contain; flex:0 0 auto; }
.veld-head-t { flex:1 1 auto; min-width:0; }
.veld-head-t b { display:block; font-family:var(--pb-font); font-weight:700; font-size:15px; line-height:1; }
.veld-head-t span { display:block; font-size:11px; color:rgba(226,236,236,.6); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.veld-conn { flex:0 0 auto; height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 11px; border-radius:999px; border:1px solid rgba(133,197,196,.42); background:rgba(133,197,196,.16); color:#8FD0CF; font-size:11.5px; font-weight:700; white-space:nowrap; }
.veld-conn::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.veld-conn.is-off { border-color:rgba(231,201,127,.44); background:rgba(231,201,127,.16); color:#F0C987; }
.veld-ibtn { width:40px; height:40px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); border-radius:11px; color:#EAF1F1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.veld-ibtn svg { width:18px; height:18px; }
.veld-roletab { display:flex; gap:6px; margin-top:13px; }
.veld-roletab span { flex:1 1 0; height:38px; border-radius:10px; background:rgba(255,255,255,.06); color:#CFE0DF; font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.veld-roletab span.is-active { background:#85C5C4; color:#12302F; }
.veld-main { flex:1 1 auto; min-width:0; padding:16px; display:flex; flex-direction:column; gap:14px; padding-bottom:90px; }
.veld-main:focus { outline:none; }
.veld-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.veld-title h1 { margin:0; font-family:var(--pb-font); font-size:20px; font-weight:700; color:var(--text-primary); }
.veld-title span { font-size:12px; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.veld-seg { display:flex; gap:8px; }
.veld-seg button { height:34px; padding:0 14px; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface); color:var(--text-muted); font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.veld-seg button[aria-pressed="true"] { border-color:transparent; background:var(--text-primary); color:var(--surface); }
.veld-bar { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px; background:var(--pbg,var(--warning-bg)); border:1px solid var(--pc,var(--warning-fg)); }
.veld-bar[hidden] { display:none; }
.veld-bar svg { width:18px; height:18px; flex:0 0 auto; color:var(--pc,var(--warning-fg)); }
.veld-bar b { display:block; font-size:13px; font-weight:700; color:var(--text-primary); }
.veld-bar span { display:block; font-size:11.5px; color:var(--text-muted); line-height:1.42; margin-top:2px; }
.veld-list { display:flex; flex-direction:column; gap:12px; }
.veld-card { text-align:left; cursor:pointer; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--pc,var(--brand)); border-radius:14px; padding:15px; display:flex; flex-direction:column; gap:10px; width:100%; color:inherit; font:inherit; text-decoration:none; }
.veld-card:hover { box-shadow:0 10px 24px -16px var(--shadow); }
.veld-card:active { transform:scale(.995); }
.veld-card:focus-visible { outline:none; box-shadow:0 0 0 3px var(--brand-soft); }
.veld-card-top { display:flex; align-items:center; gap:8px; }
.veld-type { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--pc); background:var(--pbg); padding:3px 9px; border-radius:6px; white-space:nowrap; }
.veld-now { font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--action); text-transform:uppercase; }
.veld-time { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--text-secondary); white-space:nowrap; }
.veld-card h2 { margin:0; font-family:var(--pb-font); font-weight:700; font-size:16px; color:var(--text-primary); line-height:1.25; }
.veld-card .veld-sub { font-size:13px; color:var(--text-muted); margin-top:3px; }
.veld-where { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-secondary); min-width:0; }
.veld-where svg { width:15px; height:15px; flex:0 0 auto; color:var(--brand-ink); }
.veld-where span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.veld-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.veld-proof { display:inline-flex; align-items:center; white-space:nowrap; font-size:11.5px; font-weight:600; color:var(--warning-fg); background:var(--warning-bg); padding:3px 9px; border-radius:999px; }
.veld-empty { text-align:center; padding:50px 18px; color:var(--text-muted); }
.veld-empty-ico { width:54px; height:54px; border-radius:14px; background:var(--surface); border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--brand-ink); }
.veld-empty p { margin:0; font-size:13px; }
.veld-empty p:first-of-type { margin-bottom:4px; font-weight:700; color:var(--text-secondary); }
.veld-err { text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:30px 22px; }
.veld-err p { margin:0 0 6px; }
.veld-bottom { position:sticky; bottom:0; z-index:12; display:flex; background:var(--surface); border-top:1px solid var(--border); padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }
.veld-bottom a { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 4px; border:none; background:none; color:var(--text-muted); font-size:11px; font-weight:600; text-decoration:none; min-height:48px; }
.veld-bottom a[aria-current="page"] { color:var(--brand-ink); }
.veld-bottom svg { width:21px; height:21px; }
.veld-btn { width:100%; min-height:54px; border:none; border-radius:13px; background:var(--action); color:#1A2830; font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.veld-btn:disabled { background:var(--surface-raised); color:var(--text-muted); cursor:not-allowed; }
.veld-btn--ghost { background:var(--surface); color:var(--text-primary); border:1px solid var(--border-strong); min-height:48px; font-size:14.5px; font-weight:600; }
.veld-btn--sm { min-height:44px; font-size:14px; }
.veld-detail-head { position:sticky; top:0; z-index:2; background:linear-gradient(180deg,#26383F 0%,#1E2E35 100%); color:#F2F7F7; padding:14px 16px; }
body:has(#staging-environment-marker) .veld-detail-head { top:29px; }
.veld-detail-head .veld-head-row { gap:12px; }
.veld-kicker { font-size:11px; color:rgba(226,236,236,.6); }
.veld-dtitle { font-family:var(--pb-font); font-weight:700; font-size:16px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.veld-dbody { flex:1 1 auto; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; padding-bottom:130px; }
.veld-sect h3 { margin:0 0 8px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.veld-rows { background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:2px 15px; }
.veld-row { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.veld-row:last-child { border-bottom:none; }
.veld-row > div:first-child { flex:0 0 104px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); padding-top:1px; }
.veld-row > div:last-child { flex:1 1 auto; min-width:0; font-size:14px; color:var(--text-primary); line-height:1.45; }
.veld-row b { font-weight:600; }
.veld-row .veld-sub { display:block; font-size:12.5px; color:var(--text-muted); font-weight:400; margin-top:3px; }
.veld-note { display:flex; align-items:flex-start; gap:9px; padding:12px 13px; background:var(--pbg,var(--warning-bg)); border-radius:12px; font-size:13px; line-height:1.5; color:var(--pc,var(--warning-fg)); }
.veld-note svg { width:16px; height:16px; flex:0 0 auto; margin-top:1px; }
.veld-foot { position:sticky; bottom:0; z-index:3; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.veld-reason { font-size:12px; color:var(--text-muted); text-align:center; }
.veld-file { display:flex; flex-direction:column; gap:8px; }
.veld-file input[type=file] { width:100%; min-height:48px; padding:11px 12px; border:1px dashed var(--border-strong); border-radius:12px; background:var(--surface); color:var(--text-secondary); font-family:inherit; font-size:13px; }
.veld-scrim { position:fixed; inset:0; z-index:40; background:rgba(20,32,38,.55); animation:pbFade .18s ease both; }
.veld-sheet { position:fixed; left:50%; transform:translateX(-50%); width:100%; max-width:460px; bottom:0; z-index:41; background:var(--surface); border-radius:20px 20px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom)); animation:veldSheetUp .26s cubic-bezier(.2,.75,.25,1) both; }
@keyframes veldSheetUp { from { transform:translate(-50%,100%); } to { transform:translate(-50%,0); } }
.veld-sheet-grip { width:40px; height:4px; border-radius:999px; background:var(--border-strong); margin:-6px auto 16px; }
.veld-sheet h2 { margin:0 0 8px; font-family:var(--pb-font); font-size:18px; font-weight:700; color:var(--text-primary); }
.veld-sheet p { margin:0 0 18px; font-size:13.5px; color:var(--text-secondary); line-height:1.55; }
.veld-sheet-acts { display:flex; flex-direction:column; gap:10px; }
.veld-toast { position:fixed; left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:428px; bottom:100px; z-index:50; background:#24353E; color:#EAF6F5; border-radius:13px; padding:14px 16px; display:flex; align-items:center; gap:10px; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); animation:pbSheet .22s ease both; }
.veld-toast i { width:26px; height:26px; border-radius:50%; background:rgba(133,197,196,.22); color:#85C5C4; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.veld-toast i svg { width:15px; height:15px; }
.veld-toast span { font-size:13.5px; font-weight:600; }
.veld-skel { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; animation:veldShimmer 1.3s ease-in-out infinite; }
.veld-skel i { display:block; height:12px; border-radius:6px; background:var(--surface-muted); }
@keyframes veldShimmer { 0%,100% { opacity:.55; } 50% { opacity:1; } }
/* Bestaande veldschermen (retour & vrijgave, werkvoorraad, profiel) binnen het frame */
.veld .pb-skin .hw-pagehead h1 { display:block; font-size:18px; margin:0 0 4px; }
.veld .pb-skin .hw-pagehead .ph-sub { display:block; }
.veld .mechanic-page, .veld .driver-page { max-width:100%; }

/* ---------- chauffeur-home: mini-dashboard, dag/week/maand (OA-023, 2026-09-04) ---------- */
.veld-dash { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.veld-dash-skel { min-height:220px; border:1px solid var(--border); border-radius:16px; background:var(--surface); animation:veldShimmer 1.3s ease-in-out infinite; }
.veld-dash-hi { font-family:var(--pb-font); font-weight:700; font-size:16px; color:var(--text-primary); }
.veld-dash-big { display:flex; align-items:baseline; gap:10px; }
.veld-dash-big b { font-family:var(--pb-font); font-size:30px; font-weight:800; line-height:1; color:var(--brand-ink); }
.veld-dash-big span { font-size:15px; font-weight:600; color:var(--text-secondary); }
.veld-dash-brief { font-size:13px; color:var(--text-muted); line-height:1.5; }
.veld-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.veld-tile { border-radius:12px; padding:11px 8px; text-align:center; background:var(--surface-muted); border:1px solid var(--border); }
.veld-tile b { display:block; font-family:var(--pb-font); font-size:22px; font-weight:800; line-height:1; }
.veld-tile span { display:block; font-size:11px; font-weight:600; color:var(--text-muted); margin-top:5px; }
.veld-tile.t-lev { background:var(--st-gep-bg); border-color:transparent; } .veld-tile.t-lev b { color:var(--st-gep-fg); }
.veld-tile.t-oph { background:var(--st-oph-bg); border-color:transparent; } .veld-tile.t-oph b { color:var(--st-oph-fg); }
.veld-tile.t-att { background:var(--warning-bg); border-color:transparent; } .veld-tile.t-att b { color:var(--warning-fg); }
.veld-tile.t-ok  { background:var(--success-bg); border-color:transparent; } .veld-tile.t-ok b  { color:var(--success-fg); }
.veld-dash-next { display:flex; flex-direction:column; gap:2px; text-align:left; width:100%; cursor:pointer; border:1px solid var(--brand); border-left:4px solid var(--brand); border-radius:12px; padding:12px 14px; background:var(--brand-soft); color:inherit; font:inherit; }
.veld-dash-next:active { transform:scale(.995); }
.veld-next-lbl { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-ink); }
.veld-dash-next b { font-family:var(--pb-font); font-size:15.5px; font-weight:700; color:var(--text-primary); }
.veld-next-sub { font-size:12.5px; color:var(--text-secondary); }
.veld-dash-done { display:flex; align-items:center; gap:12px; border-radius:12px; padding:14px; background:var(--success-bg); }
.veld-dash-done i { width:34px; height:34px; border-radius:50%; background:var(--success-fg); color:var(--surface); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.veld-dash-done i svg { width:19px; height:19px; }
.veld-dash-done b { display:block; font-family:var(--pb-font); font-size:15px; color:var(--success-fg); }
.veld-dash-done span { display:block; font-size:12.5px; color:var(--text-secondary); margin-top:2px; }
.veld-dash-none { font-size:13px; color:var(--text-muted); padding:6px 2px; }
.veld-dash-status { display:flex; gap:8px; flex-wrap:wrap; }
.veld-dash-status span { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; border:1px solid var(--border-strong); color:var(--text-muted); background:var(--surface); }
.veld-dash-status span::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.veld-dash-status .veld-conn2.is-on { color:#2E9E86; border-color:rgba(46,158,134,.4); background:rgba(46,158,134,.12); }
.veld-dash-status .veld-conn2.is-off, .veld-dash-status .veld-loc.is-off { color:var(--warning-fg); border-color:rgba(231,201,127,.44); background:var(--warning-bg); }
.veld-dash-status .veld-loc.is-on { color:#2E9E86; border-color:rgba(46,158,134,.4); background:rgba(46,158,134,.12); }
/* range + dagnav */
.veld-range { display:flex; flex-direction:column; gap:10px; }
.veld-seg--range button { flex:1 1 0; }
.veld-daynav { display:flex; align-items:center; gap:8px; }
.veld-ibtn2 { width:40px; height:40px; flex:0 0 auto; border:1px solid var(--border-strong); background:var(--surface); border-radius:11px; color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.veld-ibtn2 svg { width:18px; height:18px; }
.veld-daynow { flex:1 1 auto; height:40px; border:1px solid var(--border-strong); background:var(--surface); border-radius:11px; color:var(--text-primary); font:600 13.5px var(--pb-body); cursor:pointer; }
/* week */
.veld-daysec { display:flex; flex-direction:column; gap:10px; }
.veld-daysec + .veld-daysec { margin-top:16px; }
.veld-dayhd { display:flex; align-items:baseline; justify-content:space-between; gap:10px; width:100%; background:none; border:none; border-bottom:1px solid var(--border); padding:0 2px 7px; cursor:pointer; color:inherit; }
.veld-dayhd b { font-family:var(--pb-font); font-size:14px; font-weight:700; color:var(--text-primary); }
.veld-dayhd span { font-size:12px; font-weight:600; color:var(--text-muted); }
/* maand */
.veld-month { display:flex; flex-direction:column; gap:12px; }
.veld-mhead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.veld-mhead b { font-family:var(--pb-font); font-size:15px; font-weight:700; color:var(--text-primary); text-transform:capitalize; }
.veld-mgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.veld-mwd { text-align:center; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); padding-bottom:2px; }
.veld-mcell { position:relative; aspect-ratio:1/1; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text-secondary); font:inherit; cursor:pointer; display:flex; align-items:flex-start; justify-content:flex-start; padding:5px 6px; }
.veld-mcell.is-empty { border:none; background:none; cursor:default; }
.veld-mcell.is-today { border-color:var(--brand); }
.veld-mcell.is-sel { background:var(--brand-soft); border-color:var(--brand); }
.veld-mday { font-size:12px; font-weight:600; }
.veld-mdot { position:absolute; right:5px; bottom:5px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--brand); color:#12302F; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.veld-mhint { font-size:11.5px; color:var(--text-muted); line-height:1.5; margin:2px 0 0; }
/* camera / upload */
.veld-file-lbl { font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.veld-file-btns { display:flex; gap:8px; }
.veld-file-btns .veld-btn { flex:1 1 0; }
.veld-file-btns .veld-btn svg { width:19px; height:19px; }
.veld-file-status { font-size:13px; font-weight:600; padding:10px 12px; border-radius:11px; }
.veld-file-status.is-busy { color:var(--text-secondary); background:var(--surface-muted); }
.veld-file-status.is-ok { color:var(--success-fg); background:var(--success-bg); }
.veld-file-status.is-err { color:var(--danger-fg); background:var(--danger-bg); }

/* ---------- chauffeur onderbalk (4 tabs) + Berichten (OA-023, 2026-09-04) ---------- */
.veld-bottom--4 a { min-width:0; }
.veld-nav-ico { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.veld-nav-badge { position:absolute; top:-6px; right:-10px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--danger-fg); color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--surface); }
.veld-nav-badge[hidden] { display:none; }
.veld-berichten { display:flex; flex-direction:column; gap:12px; }
.veld-ber-headrow { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; font-weight:600; color:var(--text-muted); }
.veld-ber-allread { border:1px solid var(--border-strong); background:var(--surface); border-radius:999px; padding:6px 14px; font:600 12.5px var(--pb-body); color:var(--text-primary); cursor:pointer; }
.veld-ber-list { display:flex; flex-direction:column; gap:10px; }
.veld-ber-row { text-align:left; width:100%; cursor:pointer; background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:13px 14px; display:flex; flex-direction:column; gap:4px; color:inherit; font:inherit; position:relative; }
.veld-ber-row.is-unread { border-left:4px solid var(--brand); }
.veld-ber-row.is-unread::after { content:""; position:absolute; top:14px; right:14px; width:8px; height:8px; border-radius:50%; background:var(--brand); }
.veld-ber-top { display:flex; align-items:center; gap:8px; }
.veld-ber-kind { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--brand-ink); background:var(--brand-soft); padding:3px 9px; border-radius:6px; }
.veld-ber-kind.is-high { color:var(--danger-fg); background:var(--danger-bg); }
.veld-ber-act { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--warning-fg); background:var(--warning-bg); padding:2px 7px; border-radius:5px; }
.veld-ber-time { margin-left:auto; font-size:11.5px; color:var(--text-muted); white-space:nowrap; }
.veld-ber-title { font-family:var(--pb-font); font-weight:700; font-size:14.5px; color:var(--text-primary); line-height:1.3; padding-right:14px; }
.veld-ber-msg { font-size:13px; color:var(--text-secondary); line-height:1.45; }
.veld-ber-link { font-size:12.5px; font-weight:700; color:var(--brand-ink); margin-top:2px; }
.veld-ber-gate { display:flex; align-items:flex-start; gap:12px; background:var(--surface-muted); border:1px dashed var(--border-strong); border-radius:14px; padding:14px; margin-top:14px; }
.veld-ber-gate-ico { width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--border); color:var(--brand-ink); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.veld-ber-gate b { display:block; font-family:var(--pb-font); font-size:14px; color:var(--text-primary); }
.veld-ber-gate span { display:block; font-size:12.5px; color:var(--text-muted); line-height:1.5; margin-top:3px; }

/* ---------- chauffeur compacte app-bar (OA-023 final header, 2026-09-04) ---------- */
.veld-head--app { padding:11px 14px 12px; }
.veld-appbar { display:flex; align-items:center; gap:10px; }
.veld-appbar .veld-mark { width:26px; height:26px; object-fit:contain; flex:0 0 auto; }
.veld-brand { flex:1 1 auto; min-width:0; font-family:var(--pb-font); font-weight:700; font-size:15px; color:#F2F7F7; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.veld-bell { position:relative; width:40px; height:40px; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); border-radius:11px; color:#EAF1F1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.veld-bell svg { width:20px; height:20px; }
.veld-bell-badge { position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--danger-fg,#D9534F); color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; border:2px solid #22333A; }
.veld-bell-badge[hidden] { display:none; }
.veld-idrow { display:flex; align-items:center; gap:8px; margin-top:11px; }
.veld-avatar { width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:rgba(133,197,196,.20); color:#8FD0CF; display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; overflow:hidden; }
.veld-avatar img { width:100%; height:100%; object-fit:cover; }
.veld-idt { flex:1 1 auto; min-width:0; }
.veld-idt b { display:block; font-size:14px; font-weight:700; color:#F2F7F7; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.veld-idt span { display:block; font-size:11px; color:rgba(226,236,236,.62); }
.veld-head--app .veld-conn { height:30px; }
.veld-head--app .veld-loc { flex:0 0 auto; height:30px; display:inline-flex; align-items:center; gap:6px; padding:0 10px; border-radius:999px; border:1px solid rgba(133,197,196,.42); background:rgba(133,197,196,.16); color:#8FD0CF; font-size:11px; font-weight:700; white-space:nowrap; }
.veld-head--app .veld-loc::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.veld-head--app .veld-loc.is-off { border-color:rgba(231,201,127,.44); background:rgba(231,201,127,.16); color:#F0C987; }
.veld-ibtn--sm { width:34px; height:34px; }
.veld-ibtn--sm svg { width:16px; height:16px; }
@media (max-width:359px){ .veld-head--app .veld-loc, .veld-head--app .veld-conn { font-size:10px; padding:0 8px; } }

button.veld-avatar { border:none; padding:0; cursor:pointer; }
button.veld-avatar:focus-visible { outline:2px solid #85C5C4; outline-offset:2px; }

/* CHF-B2 — transport vehicle plate chip (chauffeur sees the van/truck + kenteken) */
.veld-plate{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;
  font:600 12px/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.04em;
  background:#FDCB00;color:#1A1A1A;border:1px solid #C7A000;text-transform:uppercase;white-space:nowrap}

/* CHF-B4 — messaging (threads list + thread view + reactions + composer) */
.veld-thr-head{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 8px;font:600 12px/1 var(--pb-font);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.veld-thr-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.veld-thr{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;border:1px solid var(--pb-line);background:var(--pb-surface);border-radius:14px;padding:12px 14px;cursor:pointer}
.veld-thr:active{transform:scale(.99)}
.veld-thr-top{display:flex;align-items:center;gap:8px}
.veld-thr-kind{font:600 11px/1 var(--pb-font);padding:3px 8px;border-radius:6px;background:var(--pb-chip,#EEF1F3);color:var(--text)}
.veld-thr-amber{background:#FDF0D0;color:#7A5200}
.veld-thr-blue{background:#DCEBFB;color:#0B4A8F}
.veld-thr-slate{background:#EAEEF1;color:#3A4A52}
.veld-thr-dot{width:9px;height:9px;border-radius:50%;background:var(--danger-fg,#D64545)}
.veld-thr-time{margin-left:auto;font-size:11px;color:var(--text-muted)}
.veld-thr-subj{font:600 15px/1.3 var(--pb-font);color:var(--text)}

.veld-thread{display:flex;flex-direction:column;gap:12px;padding:12px 2px 16px;overflow-y:auto}
.veld-msg{display:flex}
.veld-msg.is-mine{justify-content:flex-end}
.veld-msg-b{max-width:82%;border:1px solid var(--pb-line);background:var(--pb-surface);border-radius:14px;padding:9px 12px}
.veld-msg.is-mine .veld-msg-b{background:#E7F0EA;border-color:#CFE2D6}
.veld-msg-meta{font-size:11px;color:var(--text-muted);margin-bottom:3px}
.veld-msg-body{font-size:14px;line-height:1.45;color:var(--text);white-space:pre-wrap;word-break:break-word}
.veld-msg-rx{display:flex;gap:6px;margin-top:8px}
.veld-rx{font:600 12px/1 var(--pb-font);padding:5px 9px;border-radius:8px;border:1px solid var(--pb-line);background:transparent;color:var(--text-muted);cursor:pointer}
.veld-rx.is-on{background:#E7F0EA;border-color:#8FC0A0;color:#1E6B39}
.veld-rx--warn.is-on{background:#FBE4E4;border-color:#E2A3A3;color:#9A2A2A}
.veld-rx b{font-weight:800}
.veld-composer{position:sticky;bottom:0;display:flex;gap:8px;align-items:flex-end;padding:10px 0 max(10px,env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--pb-bg) 22%)}
.veld-composer textarea{flex:1;resize:none;border:1px solid var(--pb-line);border-radius:14px;padding:11px 14px;font:400 14px/1.4 var(--pb-font);background:var(--pb-surface);color:var(--text);max-height:120px}
.veld-send{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:none;background:var(--pb-accent,#26383F);color:#fff;display:grid;place-items:center;cursor:pointer}
.veld-send:disabled{opacity:.5}
.veld-send svg{width:20px;height:20px}

/* CHF-B5 — field report form (two-step) + danger button */
.veld-btn--danger{background:#C0392B;color:#fff;border-color:#A5312310}
.veld-btn--danger:active{background:#A53123}
.veld-form{display:flex;flex-direction:column;gap:14px;padding:8px 2px 24px}
.veld-field{display:flex;flex-direction:column;gap:6px}
/* DEF-VELD-REPORT-CS-HIDDEN-001: het hidden-attribuut moet winnen van display:flex (bijv. de klantsamenvatting bij 'Alleen kantoor'). */
.veld-field[hidden]{display:none}
.veld-field>span{font:600 13px/1.2 var(--pb-font);color:var(--text)}
.veld-field textarea,.veld-field input,.veld-field select{border:1px solid var(--pb-line);border-radius:12px;padding:11px 13px;font:400 14px/1.4 var(--pb-font);background:var(--pb-surface);color:var(--text);width:100%;resize:vertical}
.veld-seg2{display:flex;gap:6px}
.veld-seg-b{flex:1 1 0;border:1px solid var(--pb-line);background:var(--pb-surface);border-radius:10px;padding:9px 6px;font:600 13px/1 var(--pb-font);color:var(--text-muted);cursor:pointer}
.veld-seg-b.is-active{background:var(--pb-accent,#26383F);color:#fff;border-color:var(--pb-accent,#26383F)}
.veld-form-err{color:var(--danger-fg,#C0392B);font:600 13px/1.4 var(--pb-font);margin:0;padding:8px 12px;background:var(--danger-bg,#FBE4E4);border-radius:10px}

/* CHF-B6 — trip-location share control */
.veld-loc-share{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.veld-loc-share-lbl{font:500 12px/1.35 var(--pb-font);color:var(--text-muted)}
.veld-file-status.is-ok{color:#1E6B39}
.veld-file-status.is-err{color:var(--danger-fg,#C0392B)}
/* Machine-identiteit op kaart en detailkop: klein, herkenbaar, nooit dominant. */
.veld-card-main { display:flex; align-items:center; gap:10px; min-width:0; }
.veld-card-txt { flex:1 1 auto; min-width:0; }
.veld-thumb { flex:0 0 auto; width:56px; height:48px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:8px; border:1px solid var(--border); background:var(--surface-raised); color:var(--text-muted); }
.veld-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.veld-thumb .kp-prod-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.veld-thumb .kp-prod-fallback svg { width:26px; height:26px; }
.veld-detail-head .veld-thumb { width:52px; height:46px; background:#F2F7F7; border-color:rgba(255,255,255,.28); color:#5B7378; }
/* PX-H1 offline queue: balk, kaartpil en detailmelding — wachtend is nooit bevestigd. */
.veld-sync-bar { margin:0 0 12px; }
.veld-sync-bar .veld-btn { flex:0 0 auto; width:auto; padding:0 12px; }
.veld-sync-pill.is-pending { color:var(--warning-fg); background:var(--warning-bg); border-color:var(--warning-fg); }
.veld-sync-pill.is-failed { color:var(--danger-fg); background:var(--danger-bg); border-color:var(--danger-fg); }
.veld-note--err { border-color:var(--danger-fg); background:var(--danger-bg); color:var(--danger-fg); }
.veld-note--err svg { color:var(--danger-fg); }
.veld-note-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.veld-note-actions .veld-btn { width:auto; padding:0 14px; }