/* ============================================================
   C-ERP veld-app (M10): telefoon eerst (375 breed), grote
   aanraakvlakken, huisstijltokens voor licht en donker.
   ============================================================ */
.vd { font-family: var(--f); color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; }
.vd--los { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }
/* Binnen een kaart van het kantoorscherm: geen eigen achtergrond. */
.vd--plat { background: transparent; }
.vd--ingebed { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; padding-bottom: 12px; }
.vd * { box-sizing: border-box; }

/* Kop */
.vd-kop { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.vd--ingebed .vd-kop { position: static; }
.vd-kop__tekst { flex: 1; min-width: 0; }
.vd-kop__code { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--brand); }
.vd-kop__naam { font-size: 16px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-kop__dag { font-size: 12.5px; color: var(--text-2); }
.vd-kop__knop { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }

.vd-inhoud { padding: 12px 16px 8px; display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.vd-kaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.vd-kaart__titel { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.vd-kaart__sub { font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.vd-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin: 12px 0 6px; }
.vd-label:first-child { margin-top: 0; }
.vd-hint { font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin: 8px 0 0; }
.vd-melding { font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; background: var(--glass); color: var(--text-2); border: 1px solid var(--line); }
.vd-melding--let { background: color-mix(in srgb, var(--amber) 12%, transparent); border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--text); }
.vd-melding--goed { background: color-mix(in srgb, var(--brand) 10%, transparent); border-color: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--text); }
.vd-melding--fout { background: var(--signal-soft); border-color: color-mix(in srgb, var(--signal) 35%, transparent); color: var(--text); }

/* Keuzes */
.vd-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vd-chips--wrap { flex-wrap: wrap; overflow: visible; }
.vd-chips::-webkit-scrollbar { display: none; }
.vd-chip { flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.vd-chip.is-aan { background: var(--brand); border-color: var(--brand); color: var(--surface); font-weight: 500; }
[data-theme="dark"] .vd-chip.is-aan { color: #0A1316; }
.vd-schakel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); }
.vd-schakel button { min-height: 48px; border: none; border-radius: 11px; background: transparent; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.vd-schakel button.is-aan { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.vd-select, .vd-invoer, .vd-tekst { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
.vd-select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.vd-tekst { min-height: 112px; resize: vertical; line-height: 1.45; }
.vd-select:focus, .vd-invoer:focus, .vd-tekst:focus { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 1px; }

/* Knoppen */
.vd-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vd-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; }
.vd-knop--hoofd { width: 100%; min-height: 54px; background: var(--brand); border-color: var(--brand); color: var(--surface); font-size: 16px; }
[data-theme="dark"] .vd-knop--hoofd { color: #0A1316; }
.vd-knop--breed { flex: 1; }
.vd-knop--rustig { border-color: transparent; background: var(--glass); }
.vd-knop:disabled { opacity: .45; cursor: default; }
.vd-knop.is-aan { border-color: var(--signal); color: var(--signal); }
.vd-knop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Foto's */
.vd-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.vd-foto { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--glass); border: 1px solid var(--line); }
.vd-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-foto__weg { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border-radius: 20px; border: none; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.vd-foto__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }

/* Lijsten */
.vd-lijst { display: flex; flex-direction: column; }
.vd-rij { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.vd-rij:first-child { border-top: none; padding-top: 2px; }
.vd-rij__main { flex: 1; min-width: 0; }
.vd-rij__tekst { font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.vd-rij__meta { font-size: 12px; color: var(--text-3); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vd-rij .vd-fotos { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.vd-leeg { font-size: 13px; color: var(--text-3); padding: 6px 0; }
.vd-pil { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 500; background: var(--glass); color: var(--text-2); border: 1px solid var(--line); }
.vd-pil--wacht { color: var(--amber-tekst); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.vd-pil--fout { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, transparent); }
.vd-pil--hoog { color: var(--signal); }

/* Bezetting */
.vd-bez { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; align-items: center; margin-bottom: 8px; }
.vd-teller { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.vd-teller button { width: 44px; height: 46px; border: none; background: var(--glass); color: var(--text); font: inherit; font-size: 20px; cursor: pointer; }
.vd-teller input { width: 48px; height: 46px; border: none; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; text-align: center; -moz-appearance: textfield; }
.vd-teller input::-webkit-outer-spin-button, .vd-teller input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vd-weg { width: 44px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text-3); font: inherit; font-size: 20px; cursor: pointer; }
.vd-totaal { font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* Status onderaan */
.vd-status { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--text-2); background: var(--surface); border-top: 1px solid var(--line); }
.vd--los .vd-status { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
.vd--ingebed .vd-status { border: 1px solid var(--line); border-radius: 12px; margin: 0 16px; }
.vd-status__stip { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--brand); }
.vd-status--wacht .vd-status__stip, .vd-status--offline .vd-status__stip { background: var(--amber); }
.vd-status--bezig .vd-status__stip { background: var(--brand); animation: vd-puls 1s ease-in-out infinite; }
.vd-status--fout .vd-status__stip { background: var(--signal); }
.vd-status__tekst { flex: 1; min-width: 0; }
@keyframes vd-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .vd-status--bezig .vd-status__stip { animation: none; } }

/* Kantoor: veld-app-tab in het project */
.vd-kantoor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1100px) { .vd-kantoor { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); } }
.vd-qr-groot { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.vd-qr-groot svg { width: 148px; height: 148px; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; }
.vd-qr-groot__tekst { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.vd-qr-groot__tekst code { font-size: 12px; word-break: break-all; }
.vd-qr-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.vd-qr-tegel { border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; background: var(--surface); }
.vd-qr-tegel svg { width: 100%; max-width: 130px; height: auto; display: block; margin: 0 auto 6px; }
.vd-qr-tegel__code { font-size: 14px; font-weight: 600; }
.vd-qr-tegel__naam { font-size: 12px; color: var(--text-2); }
.vd-qr-tegel__laag { font-size: 11px; color: var(--text-3); }
.vd-qr-laag { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 16px 0 8px; }
.vd-qr-laag:first-child { margin-top: 0; }
.vd-rapport { border-top: 1px solid var(--line); padding: 16px 0; }
.vd-rapport:first-child { border-top: none; padding-top: 0; }
.vd-rapport__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vd-rapport__dag { font-size: 15px; font-weight: 600; }
.vd-rapport__dag::first-letter { text-transform: uppercase; }
.vd-rapport__feiten { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); margin: 6px 0 8px; }
.vd-rapport__blok { font-size: 12px; font-weight: 600; color: var(--text-3); margin: 10px 0 2px; text-transform: uppercase; letter-spacing: .04em; }

/* Losse veld-app: meldingen van de rest van de app horen hier niet */
body.veld-los #cerp-storingsbalk, body.veld-los #cerp-offline-balk { display: none !important; }
body.veld-los .cerp-rv-knop { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
/* De test-aanmelding (alleen in testomgevingen) boven de knop Review, los van de statusregel. */
body.veld-los #cerp-devwissel { bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important; }
body.veld-los { background: var(--bg); margin: 0; }

/* Projectkeuze: code op een regel, naam eronder zodat smalle schermen niet afbreken */
.vd-projectkeus { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; margin-bottom: 8px; text-align: left; }
.vd-projectkeus b { white-space: nowrap; font-size: 12.5px; letter-spacing: .02em; color: var(--text-3); font-weight: 600; }
.vd-projectkeus span { font-weight: 500; line-height: 1.35; }

/* Losse veld-app op de telefoon: de kantoorhulpmiddelen (omgevingsaanduiding,
   reviewknop) liggen anders over Inspreken en Vastleggen. Op tablet en
   kantoor blijven ze staan. */
@media (max-width: 720px) {
  body:has(.vd--los) #cerp-devwissel, body:has(.vd--los) .cerp-rv-knop { display: none !important; }
}

/* h28: ingebed in het project op de telefoon. De algemene telefoonregel in
   werkbank.css zet alle knoppen en velden binnen .plat op 32px en is
   specifieker dan de veld-app; de veld-app houdt haar grote tikvlakken. */
@media (max-width: 600px) {
  .vd .vd-knop, .vd .vd-schakel button, .vd .vd-select, .vd .vd-invoer { min-height: 48px !important; }
  .vd .vd-knop--hoofd { min-height: 54px !important; }
  .vd .vd-chip, .vd .vd-kop__knop { min-height: 44px !important; }
  .vd .vd-tekst { min-height: 112px !important; }
}
/* Bezetting op een smal scherm: de partij krijgt een eigen regel, zodat de naam leesbaar blijft. */
@media (max-width: 480px) {
  .vd-bez { grid-template-columns: minmax(0, 1fr) 44px; }
  .vd-bez > .vd-invoer { grid-column: 1 / -1; }
  .vd-bez > .vd-teller { justify-self: start; }
}

/* h62: liggend valt de inkeping links of rechts binnen het beeld (viewport-fit=cover); kop,
   inhoud en statusbalk houden die veilige zone vrij (ingebed doet de schil .plat dat). Staand en op de desktop 16 px. */
.vd--los .vd-kop, .vd--los .vd-inhoud, .vd--los .vd-status { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* W1 stuk 6: de bouwplaatsset op dit apparaat (platform/cde-offline.jsx) */
.vd-offline { margin-top: 10px; }
.vd-offline__rij { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 0; border: none; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; cursor: pointer; }
.vd-offline__rij:first-child { border-top: none; }
.vd-offline__rij:disabled { cursor: default; opacity: .6; }
.vd-offline__soort { flex-shrink: 0; min-width: 44px; padding: 2px 6px; border-radius: 8px; font-size: 11px; font-weight: 600; text-align: center; background: var(--glass); border: 1px solid var(--line); color: var(--text-2); }
.vd-offline__naam { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.vd-offline__naam > span { font-size: 12px; color: var(--text-3); }
.vd-offline__rij.is-komt .vd-offline__naam > span:first-of-type, .vd-offline__rij.is-ontbreekt .vd-offline__naam > span:first-of-type { color: var(--amber-tekst); }
.vd-offline__nieuwer { color: var(--amber-tekst) !important; }
.vd-offline__wacht { flex-shrink: 0; font-size: 11px; color: var(--amber-tekst); }
.vd-viewer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg, var(--surface)); color: var(--text); }
.vd-viewer__kop { display: flex; gap: 8px; align-items: center; }
.vd-viewer__titel { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.vd-viewer__titel > span { font-size: 12px; color: var(--text-3); }
.vd-viewer__vlak { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; overflow: auto; background: var(--surface); }
.vd-viewer__pdf { width: 100%; height: 100%; border: none; }
.vd-viewer__beeld { max-width: 100%; max-height: 100%; object-fit: contain; }
.vd-viewer__opmerking { flex-shrink: 0; }
.vd-viewer__paginas { width: 100%; height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; }
.vd-viewer__pagina { display: block; background: #fff; box-shadow: var(--shadow); }
.vd-viewer__vlak { align-items: stretch; }
.vd-viewer__paginavak { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }