/* portaal-rust.css — stijl "Rust" voor de portalen (stap 1, 28-09-2026): merk en basis.
 *
 * Reikwijdte:
 *  - Koerierportaal, klantportaal, zakelijk portaal, gastpagina, volgpagina, registratie (koerier,
 *    klant, zakelijk), beheer-login en wachtwoord-reset. Elke pagina zet in <head> html[data-pstijl]
 *    (standaard "modern"; ?ui=oud zet hem uit en onthoudt dat in localStorage hvt_portaal_stijl,
 *    ?ui=modern zet hem terug), html[data-portaal] (welke pagina) en html[data-pmech] (hoe de pagina
 *    licht/donker regelt: "light-mode" = body.light-mode is licht, "dark-mode" = body.dark-mode is
 *    donker, "licht" = alleen licht, "eigen" = eigen kleuren houden).
 *  - Alleen uiterlijk: geen knop, veld of handeling verdwijnt of verandert van werking.
 *  - Kleuren, letter en maten uit het Zipload24 Designsysteem (v2), dezelfde als het beheer.
 *  - Logo: .pn-only is alleen zichtbaar in de nieuwe stijl, .po-only alleen in de oude.
 */

html:not([data-pstijl="modern"]) .pn-only { display: none !important; }
html[data-pstijl="modern"] .po-only { display: none !important; }

/* ── 1. Kleuren: licht (standaard) ─────────────────────────────────────────────── */
html[data-pstijl="modern"]:not([data-pmech="eigen"]) body {
  --p-app: #f1f2f4; --p-panel: #ffffff; --p-subtle: #f7f8fa; --p-hover: #f4f5f7;
  --p-line: #e6e8ec; --p-line-soft: #eff1f3; --p-line-strong: #d9dde3;
  --p-ink: #11141a; --p-ink-2: #3f4652; --p-ink-3: #5b6270; --p-ink-4: #8a919c;
  --p-brand: #d63031; --p-brand-hover: #b3262a; --p-brand-ink: #c42b2f; --p-brand-soft: #fdeeee;
  --p-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px rgba(16, 24, 40, 0.04);
  --p-shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  --p-focus: 0 0 0 2px #ffffff, 0 0 0 4px #d63031;
  /* De variabelen van de portalen zelf */
  --bg: var(--p-app); --bg2: var(--p-panel); --bg3: var(--p-hover);
  --border: var(--p-line); --text: var(--p-ink); --text2: var(--p-ink-3);
  --red: var(--p-brand); --red-bg: rgba(214, 48, 49, 0.08); --accent: var(--p-brand);
  --green: #15803d; --green-bg: rgba(31, 157, 85, 0.10);
  --yellow: #935c00; --yellow-bg: rgba(199, 127, 0, 0.10);
  --blue: #1d5fd8; --blue-bg: rgba(59, 123, 242, 0.10);
  --status-nieuw: #5b6270; --status-nieuw-bg: #f1f2f4;
  --status-toegewezen: #1d5fd8; --status-toegewezen-bg: #eaf1fe;
  --status-afgeleverd: #15803d; --status-afgeleverd-bg: #e9f7ef;
  --status-geannuleerd: #c42b2f; --status-geannuleerd-bg: #fdeeee;
  --shadow: var(--p-shadow-1);
  color-scheme: light;
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--p-app);
  color: var(--p-ink);
}

/* ── 1b. Kleuren: donker (zelfde keuze als nu per pagina: sleutel hvt_theme) ───────── */
html[data-pstijl="modern"][data-pmech="light-mode"] body:not(.light-mode),
html[data-pstijl="modern"][data-pmech="dark-mode"] body.dark-mode {
  --p-app: #0b0c0e; --p-panel: #121418; --p-subtle: #15181c; --p-hover: #191c21;
  --p-line: #24282f; --p-line-soft: #1c2026; --p-line-strong: #30353d;
  --p-ink: #edeff2; --p-ink-2: #c3c8d0; --p-ink-3: #9aa1ac; --p-ink-4: #6f7782;
  --p-brand-ink: #ff7a78; --p-brand-soft: rgba(240, 80, 77, 0.14);
  --p-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --p-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --p-focus: 0 0 0 2px #121418, 0 0 0 4px #d63031;
  --red: #e5484d; --red-bg: rgba(240, 80, 77, 0.14);
  --green: #3dd68c; --green-bg: rgba(61, 214, 140, 0.13);
  --yellow: #f5b544; --yellow-bg: rgba(245, 181, 68, 0.13);
  --blue: #6aa5ff; --blue-bg: rgba(106, 165, 255, 0.14);
  --status-nieuw: #aab1bd; --status-nieuw-bg: rgba(154, 161, 172, 0.14);
  --status-toegewezen: #8cb9ff; --status-toegewezen-bg: rgba(106, 165, 255, 0.14);
  --status-afgeleverd: #5fe0a1; --status-afgeleverd-bg: rgba(61, 214, 140, 0.13);
  --status-geannuleerd: #ff7a78; --status-geannuleerd-bg: rgba(240, 80, 77, 0.14);
  color-scheme: dark;
}

/* ── 2. Letter: Instrument Sans overal, ook op de pagina's met eigen kleuren ──────── */
html[data-pstijl="modern"] body { font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
html[data-pstijl="modern"] :is(button, input, select, textarea) { font-family: inherit; }
html[data-pstijl="modern"] :is(code, kbd, .mono) { font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

/* ── 3. Geen woorden in HOOFDLETTERS: zinnen met één hoofdletter ─────────────────── */
html[data-pstijl="modern"] :is(
  .sidebar-group-title, .stat-label, .adres-label, .ctx-card-title, .ctx-teller-lbl, .stap-titel,
  .hub-contact-titel, .hub-opm-label, .hub-checklist-loc, .hub-succes-route-titel, .hub-veld-label,
  .rk-sectie-kop, .form-group label, .hero-greet, .field label, .section-title, .page-kicker
) {
  text-transform: none;
  letter-spacing: normal;
}
/* Inline opmaak in de markup en in sjablonen (bv. "Wanneer ophalen") */
html[data-pstijl="modern"] body [style*="text-transform:uppercase"],
html[data-pstijl="modern"] body [style*="text-transform: uppercase"] {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── 4. Het logo: bliksem-Z met Zipload24, zoals in het beheer ──────────────────── */
html[data-pstijl="modern"] .p-merk { display: inline-flex; align-items: center; gap: 9px; vertical-align: middle; }
html[data-pstijl="modern"] .p-merk-teken { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; display: block; }
html[data-pstijl="modern"] .p-merk-naam { font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--p-ink, inherit); }
html[data-pstijl="modern"] :is(.topbar-logo, .login-logo, .login-title, .title, .logo, .brand) { font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; letter-spacing: -0.01em; }
html[data-pstijl="modern"] .topbar-logo { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--p-ink-3); }
/* De portaalnaam naast het logo (Klantportaal, Zakelijk account) rustig grijs, niet rood */
html[data-pstijl="modern"] .topbar-logo > span:not(.p-merk):not(.po-only) { color: var(--p-ink-3); font-weight: 500; }
html[data-pstijl="modern"] .login-logo .p-merk-naam { font-size: 22px; }
html[data-pstijl="modern"] .login-logo .p-merk-teken { width: 32px; height: 32px; border-radius: 9px; }

/* ── 5. Balken, kaarten en vensters: één werkblad, zachte lagen ─────────────────── */
html[data-pstijl="modern"]:not([data-pmech="eigen"]) .topbar { background: var(--p-panel); border-bottom: 1px solid var(--p-line); box-shadow: none; }
html[data-pstijl="modern"]:not([data-pmech="eigen"]) :is(.stat-card, .rit-card, .or-card, .ctx-card, .extra-card, .form-section, .card, .box, .login-card) {
  border-radius: 14px;
  border-color: var(--p-line);
  box-shadow: var(--p-shadow-1);
}
html[data-pstijl="modern"]:not([data-pmech="eigen"]) :is(.modal-card, .modal-sheet) { border-radius: 16px; border-color: var(--p-line); box-shadow: var(--p-shadow-pop); }

/* ── 6. Velden: rustig, duidelijk en groot genoeg voor een duim ─────────────────── */
html[data-pstijl="modern"]:not([data-pmech="eigen"]) :is(
  .login-input, .util-input,
  .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .form-group select, .form-group textarea,
  .field input:not([type="checkbox"]):not([type="radio"])
) {
  border-radius: 10px;
  border: 1px solid var(--p-line-strong);
  background: var(--p-panel);
  color: var(--p-ink);
}
html[data-pstijl="modern"]:not([data-pmech="eigen"]) :is(.login-input, .util-input, .form-group input, .form-group select, .form-group textarea, .field input):focus {
  border-color: var(--p-brand);
  box-shadow: 0 0 0 3px rgba(214, 48, 49, 0.18);
  outline: none;
}

/* ── 7. Knoppen: de hoofdknop in rood, de rest rustig ───────────────────────────── */
html[data-pstijl="modern"]:not([data-pmech="eigen"]) :is(.login-btn, .hero-btn-primary, .or-cta, .workflow-btn, .verif-cta, .rk-cta, .btn-primary, .submit-btn) {
  border-radius: 11px;
  font-weight: 600;
  letter-spacing: normal;
  box-shadow: 0 1px 2px rgba(214, 48, 49, 0.25);
}
html[data-pstijl="modern"]:not([data-pmech="eigen"]) :is(.login-btn, .or-cta, .workflow-btn, .verif-cta, .rk-cta, .submit-btn) { min-height: 46px; }
html[data-pstijl="modern"]:not([data-pmech="eigen"]) :is(.btn, .btn-ghost, .logout-btn, .hero-btn-ghost, .topbar-menu-btn, #theme-toggle) { border-radius: 9px; }
html[data-pstijl="modern"] :is(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible { outline: none; box-shadow: var(--p-focus, 0 0 0 2px #fff, 0 0 0 4px #d63031); }

/* ── 8. Statuslabels: eigen kleur per status, zacht vlak (zoals het beheer) ──────── */
html[data-pstijl="modern"]:not([data-pmech="eigen"]) .badge { border-radius: 999px; font-weight: 600; letter-spacing: normal; text-transform: none; }
html[data-pstijl="modern"]:not([data-pmech="eigen"]) .badge-wacht       { background: var(--yellow-bg); color: var(--yellow); border-color: transparent; }
html[data-pstijl="modern"]:not([data-pmech="eigen"]) .badge-nieuw       { background: var(--status-nieuw-bg); color: var(--status-nieuw); border-color: transparent; }
html[data-pstijl="modern"]:not([data-pmech="eigen"]) .badge-toegewezen  { background: var(--status-toegewezen-bg); color: var(--status-toegewezen); border-color: transparent; }
html[data-pstijl="modern"]:not([data-pmech="eigen"]) .badge-onderweg    { background: var(--yellow-bg); color: var(--yellow); border-color: transparent; }
html[data-pstijl="modern"]:not([data-pmech="eigen"]) .badge-afgeleverd  { background: var(--status-afgeleverd-bg); color: var(--status-afgeleverd); border-color: transparent; }
html[data-pstijl="modern"]:not([data-pmech="eigen"]) .badge-geannuleerd { background: var(--status-geannuleerd-bg); color: var(--status-geannuleerd); border-color: transparent; }

/* ── 9. Per pagina ─────────────────────────────────────────────────────────────── */
/* Beheer-login: licht zoals het beheer, zonder gekleurde gloed; merk boven het formulier op de telefoon */
html[data-pstijl="modern"][data-portaal="login"] body::before,
html[data-pstijl="modern"][data-portaal="login"] body::after { display: none; }
html[data-pstijl="modern"][data-portaal="login"] :is(.form-title, .intro h1, .intro-brand-text) { font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; letter-spacing: -0.02em; }
html[data-pstijl="modern"][data-portaal="login"] .form-merk { margin-bottom: 22px; }
@media (min-width: 900px) { html[data-pstijl="modern"][data-portaal="login"] .form-merk { display: none; } }
/* Volgpagina: merk en tussenkoppen in dezelfde letter */
html[data-pstijl="modern"][data-portaal="track"] .brand { font-weight: 600; font-size: 17px; }
/* Wachtwoord-reset: merk in plaats van de oude naam, links uitgelijnd zoals de beheer-login (stap 5) */
html[data-pstijl="modern"][data-portaal="reset"] .logo { display: flex; justify-content: flex-start; }
/* Aanmelden klant en zakelijk: logo op een eigen regel boven de titel (niet "Zipload24 Klant" op één regel) */
html[data-pstijl="modern"] .title > .p-merk { display: flex; width: fit-content; margin-bottom: 10px; }
/* Koerier-inloggen: logo en taalknoppen gecentreerd, net als de rest van de kaart (ze staan op twee regels) */
html[data-pstijl="modern"][data-portaal="koerier"] #login-card > div:first-of-type { justify-content: center !important; }   /* wint van de inline stijl */
/* Koerier: de drie tabknoppen passen ook op 320 px; Instrument Sans is iets breder dan de systeemletter */
@media (max-width: 359px) {
  html[data-pstijl="modern"] .segment-pill { gap: 2px; }
  html[data-pstijl="modern"] .segment-pill .seg-btn { padding-inline: 4px; font-size: 12px; gap: 4px; min-width: 0; }
  html[data-pstijl="modern"] .segment-pill .seg-btn > [data-t] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ── 10. Koerierportaal (stap 2, 28-09-2026) ─────────────────────────────────────── */
/* Balk onderin: telefoon en tablet. Vervangt in de nieuwe stijl de tabknoppen bovenin en de hamburger;
   "Meer" opent dezelfde zijbalk. Tijdens de rituitvoering (body.modal-open) weg, zodat hij nooit over
   de knoppen van de stappen valt; vensters (z-index >= 200) liggen er altijd boven. */
.k-onderbalk { display: none; }
@media (max-width: 1023.98px) {
  html[data-pstijl="modern"]:is([data-portaal="koerier"], [data-portaal="klant"], [data-portaal="vracht"]) .k-onderbalk {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--p-panel); border-top: 1px solid var(--p-line);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.06);
  }
  html[data-pstijl="modern"][data-portaal="koerier"] body.modal-open .k-onderbalk { display: none; }
  html[data-pstijl="modern"][data-portaal="koerier"] .main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  html[data-pstijl="modern"][data-portaal="koerier"] .segment-pill,
  html[data-pstijl="modern"][data-portaal="koerier"] #koerier-side-toggle { display: none !important; }
  /* Meldingen en de installatiebanner boven de balk */
  html[data-pstijl="modern"][data-portaal="koerier"] #hvt-toast-container { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-pstijl="modern"][data-portaal="koerier"] #install-banner { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}
html[data-pstijl="modern"] .kb-knop {
  position: relative; min-width: 0; min-height: 52px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--p-ink-3); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
html[data-pstijl="modern"] .kb-knop svg { width: 22px; height: 22px; flex: 0 0 auto; }
html[data-pstijl="modern"] .kb-knop.active { color: var(--p-brand-ink); background: var(--p-brand-soft); }
html[data-pstijl="modern"] .kb-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 359px) {
  /* 320 px: "Verdiensten" past zo nog net in een vijfde van de balk */
  html[data-pstijl="modern"]:is([data-portaal="koerier"], [data-portaal="klant"], [data-portaal="vracht"]) .k-onderbalk { padding-inline: 3px; gap: 0; }
  html[data-pstijl="modern"] .k-onderbalk .kb-knop { font-size: 10px !important; }   /* specifieker dan de 11px-regel verderop */
  /* 320 px: ook de portaalnaam naast het logo weg, zodat de kopregel een regel blijft */
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) .topbar-logo > span:not(.p-merk):not(.po-only) { display: none; }
  /* zakelijk: "Zakelijk Account" naast het logo (sinds de vertaling een span data-t="vracht_titel" met
     color:inherit, zodat hij in de oude stijl niet rood wordt); lettergrootte 0 verbergt die tekst, de merknaam
     heeft een eigen maat. */
  html[data-pstijl="modern"][data-portaal="vracht"] .topbar .topbar-logo { font-size: 0; }
  /* 320 px: het (vage, decoratieve) pictogram in de tellerkaarten viel over "Totaal opdrachten" */
  html[data-pstijl="modern"][data-portaal="klant"] #klant-stats .stat-icon { display: none; }
}
html[data-pstijl="modern"] .kb-badge {
  position: absolute; top: 3px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--p-brand); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--p-panel);
}
html[data-pstijl="modern"] .kb-dot {
  position: absolute; top: 6px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 2px var(--p-panel);
}

/* Aanbodkaart: rustige richtprijs rechts in de kop */
html[data-pstijl="modern"] .or-richtprijs { font-size: 13px; font-weight: 600; color: var(--p-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Biedingen: uitkomst van de laatste 14 dagen */
html[data-pstijl="modern"] .bod-uitkomsten { margin-top: 18px; display: grid; gap: 8px; }
html[data-pstijl="modern"] .bod-uitkomsten-kop { font-size: 13px; font-weight: 600; color: var(--p-ink-3); padding: 0 2px; }
html[data-pstijl="modern"] .bod-uitkomst {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 12px; padding: 12px 14px;
}
html[data-pstijl="modern"] .bod-uitkomst-tekst { min-width: 0; }
html[data-pstijl="modern"] .bod-uitkomst-route { font-size: 14px; font-weight: 600; color: var(--p-ink); overflow-wrap: anywhere; }
html[data-pstijl="modern"] .bod-uitkomst-sub { font-size: 12px; color: var(--p-ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
html[data-pstijl="modern"] .bod-chip { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
html[data-pstijl="modern"] .bod-chip-gekozen { background: var(--status-afgeleverd-bg); color: var(--status-afgeleverd); }
html[data-pstijl="modern"] .bod-chip-niet { background: var(--status-nieuw-bg); color: var(--status-nieuw); }

/* Documenten: een duidelijke knop in plaats van de kale "Choose File"; het echte invoerveld blijft
   (onzichtbaar, maar niet display:none, zodat de knop via label-for ook op de iPhone de keuze opent). */
html[data-pstijl="modern"] .doc-invoer {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important;
  opacity: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important;
}
html[data-pstijl="modern"] .doc-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; margin-top: 8px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--p-line-strong); background: var(--p-panel); color: var(--p-ink);
  font-size: 13px; font-weight: 600;
}
html[data-pstijl="modern"] .doc-invoer:focus-visible + .doc-knop { box-shadow: var(--p-focus); }

/* ── 11. Rituitvoering koerier + gast (stap 3, 28-09-2026) ───────────────────────────── */
/* Alleen opmaak. Handtekeningvlak (canvas), foto's, aanraakgedrag en alle logica blijven ongemoeid;
   modale vensters houden hun breedte zodat het handtekeningvlak dezelfde maat houdt. */

/* Gastpagina licht, zoals het koerierportaal. De pagina heeft eigen variabelen (en aliassen die op :root al
   vastliggen), daarom hier allemaal opnieuw op body. ?ui=oud houdt de eigen donkere kleuren. */
html[data-pstijl="modern"][data-portaal="gast"] body {
  --bg: #f1f2f4; --panel: #ffffff; --panel2: #f4f5f7; --line: #e6e8ec; --red: #d63031; --red2: #b3262a;
  --txt: #11141a; --mut: #5b6270; --ok: #15803d;
  --bg2: #ffffff; --bg3: #f4f5f7; --border: #e6e8ec; --text: #11141a; --text2: #5b6270;
  --red-bg: rgba(214, 48, 49, 0.08); --green: #15803d; --yellow: #935c00;
  color-scheme: light;
}
html[data-pstijl="modern"][data-portaal="gast"] header { background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid #e6e8ec; -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); }
html[data-pstijl="modern"][data-portaal="gast"] .brand { font-weight: 600; letter-spacing: -0.01em; }
html[data-pstijl="modern"][data-portaal="gast"] .brand span { color: inherit; }
html[data-pstijl="modern"][data-portaal="gast"] .card { border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px rgba(16, 24, 40, 0.04); }
html[data-pstijl="modern"][data-portaal="gast"] .note { background: rgba(199, 127, 0, 0.08); border-color: rgba(199, 127, 0, 0.28); color: #7a4b00; }
html[data-pstijl="modern"][data-portaal="gast"] .err { background: #fdeeee; border-color: #f3c4c4; color: #b3262a; }
html[data-pstijl="modern"][data-portaal="gast"] .btn { background: var(--red); border-radius: 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(214, 48, 49, 0.25); }
html[data-pstijl="modern"][data-portaal="gast"] .btn.ghost { background: var(--bg2, #fff); border: 1px solid var(--border, #d0d5dd); color: var(--text, #101828); box-shadow: none; }
/* Tekenvlak: wit op wit viel weg; een schaduwring (geen rand) houdt de maat en de aanraakcoordinaten gelijk */
html[data-pstijl="modern"][data-portaal="gast"] canvas#sig { box-shadow: 0 0 0 1px #cfd4db, 0 1px 2px rgba(16, 24, 40, 0.06); }

/* Kaarten van de hub: werkblad-stijl */
html[data-pstijl="modern"] :is(.hub-kaart, .hub-loc-kaart, .hub-succes-route) {
  border-radius: 14px; border-color: var(--border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px rgba(16, 24, 40, 0.04);
}
/* Kop van een locatie: rustig vlak, nummer in merkrood, titel in de gewone tekstkleur */
html[data-pstijl="modern"] .hub-loc-kop { background: var(--bg3); border-bottom: 1px solid var(--border); }
html[data-pstijl="modern"] .hub-loc-kop-tekst { color: var(--text); font-weight: 600; }
html[data-pstijl="modern"] .hub-loc-kop > svg { color: var(--text2); }
/* Pictogramknoppen (duimmaat 48 px blijft); afgerond = groen in plaats van rood */
html[data-pstijl="modern"] .hub-icon-knop { border-radius: 12px; background: var(--bg3); border-color: var(--border); color: var(--text); }
html[data-pstijl="modern"] .hub-icon-knop.gedaan { background: rgba(31, 157, 85, 0.10); border-color: rgba(21, 128, 61, 0.35); color: var(--green); }
/* Takenlijst: gewone to-do's, geen rode foutkleur */
html[data-pstijl="modern"] .hub-checklist-titel { font-weight: 600; }
html[data-pstijl="modern"] .hub-checklist-item { color: var(--text); font-weight: 500; }
html[data-pstijl="modern"] .hub-tijden-regel { color: var(--text); font-weight: 600; }
/* Knoppen: één rode hoofdknop per scherm; de rest neutraal */
html[data-pstijl="modern"] .hub-knop { min-height: 52px; border-radius: 12px; font-size: 16px; font-weight: 600; box-shadow: 0 1px 2px rgba(214, 48, 49, 0.25); }
html[data-pstijl="modern"] .hub-knop.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); box-shadow: none; }
html[data-pstijl="modern"] .nav-keuze-knop { border-radius: 12px; background: var(--bg2); }
/* Tijden: groot en gecentreerd, zonder iOS-standaardopmaak (zoals de gastpagina al had) */
html[data-pstijl="modern"] .hub-tijd-input { text-align: center; -webkit-appearance: none; appearance: none; border-radius: 12px; }
/* "Eerst ophaallocatie"-blokkade en succes */
html[data-pstijl="modern"] .hub-blok-kaart { border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06); }
html[data-pstijl="modern"] .hub-succes-titel { font-weight: 600; letter-spacing: -0.01em; }
html[data-pstijl="modern"] .hub-am-opt { border-radius: 12px; }

/* ── 12. Klantportaal en zakelijk portaal (stap 4, 28-09-2026) ─────────────────────────── */
/* Balk onderin (zie sectie 10 voor de balk zelf). Op telefoon en tablet vervangt hij de tabrij bovenin;
   de zijbalk (klant) blijft voor de computer. Hulpknop en meldingen schuiven boven de balk. */
@media (max-width: 1023.98px) {
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) .tabs { display: none !important; }
  html[data-pstijl="modern"][data-portaal="klant"] #klant-side-toggle { display: none !important; }
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) #app-screen { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  html[data-pstijl="modern"][data-portaal="klant"] #klant-support-btn { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) #hvt-toast-container { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* "Nieuw" in het midden: rode ronde knop */
html[data-pstijl="modern"] .kb-plus .kb-plus-rond {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  background: var(--p-brand); color: #fff; box-shadow: 0 2px 6px rgba(214, 48, 49, 0.35);
  margin-block: -4px;   /* neemt net als de andere pictogrammen 22px hoogte in: "Nieuw" op een lijn met de rest */
}
html[data-pstijl="modern"] .kb-plus .kb-plus-rond svg { width: 18px; height: 18px; }
html[data-pstijl="modern"] .kb-plus.active { background: none; }
html[data-pstijl="modern"] .kb-plus.active .kb-label { color: var(--p-brand-ink); }

/* Kopregel op de telefoon: één regel met logo, thema en uitloggen (pictogram; de tekst blijft voor
   schermlezers). De taalknoppen staan op de telefoon in Profiel. De pagina's zetten knoppen op de telefoon
   op 16px !important (tegen inzoomen, alleen nodig voor invoervelden), daarom hier ook !important. */
html[data-pstijl="modern"] .taal-profiel { display: none; }
html[data-pstijl="modern"] .kb-knop { font-size: 11px !important; }
@media (max-width: 480px) {
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) :is(#klant-naam-topbar, #va-naam-topbar) { display: none !important; }
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) .topbar #lang-toggle { display: none !important; }
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) .taal-profiel { display: block; }
  html[data-pstijl="modern"] .taal-profiel-titel { font-size: 13px; font-weight: 600; color: var(--p-ink-3); margin-bottom: 8px; }
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) .topbar-right { gap: 8px; flex-wrap: nowrap; }
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) .topbar { flex-wrap: nowrap; }
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) .topbar .logout-btn {
    font-size: 0 !important; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; display: grid; place-items: center;
  }
  html[data-pstijl="modern"]:is([data-portaal="klant"], [data-portaal="vracht"]) .topbar .logout-btn::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* ── 13. Volgpagina, aanmelden, inloggen en reset (stap 5, 28-09-2026) ─────────────────── */
/* Volgpagina: kleine labels in zinsletters, "bijgewerkt om" bij een lopende rit, de route als stippellijn,
   één deelknop (Delen in de kop deelt of kopieert al), bellen rustig naast WhatsApp. */
html[data-pstijl="modern"][data-portaal="track"] :is(.rit-nr, .route-label, .meta-label) { text-transform: none; letter-spacing: normal; font-size: 12.5px; color: var(--p-ink-3); }
html[data-pstijl="modern"][data-portaal="track"] .rit-nr { font-size: 13px; font-weight: 500; }
html[data-pstijl="modern"][data-portaal="track"] .tr-kopieer { display: none !important; }
html[data-pstijl="modern"][data-portaal="track"] .tr-bijgewerkt { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--p-ink-3); font-variant-numeric: tabular-nums; }
html[data-pstijl="modern"][data-portaal="track"] .tr-bijgewerkt::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
html[data-pstijl="modern"][data-portaal="track"] .route-pijl { visibility: hidden; }   /* niet weg: de route is een raster van twee kolommen */
html[data-pstijl="modern"][data-portaal="track"] .route .line { height: 100%; min-height: 26px; margin: 0 auto; background: repeating-linear-gradient(to bottom, var(--p-line-strong) 0 4px, transparent 4px 8px); }
html[data-pstijl="modern"][data-portaal="track"] .meta-item { background: var(--p-subtle); border: 1px solid var(--p-line-soft); }
html[data-pstijl="modern"][data-portaal="track"] #map { border-radius: 14px; border-color: var(--p-line); box-shadow: var(--p-shadow-1); }
html[data-pstijl="modern"][data-portaal="track"] .contact-btn { min-height: 46px; border-radius: 11px; }
html[data-pstijl="modern"][data-portaal="track"] .contact-btn.call { background: var(--p-panel); color: var(--p-ink); border: 1px solid var(--p-line-strong); box-shadow: none; }
html[data-pstijl="modern"][data-portaal="track"] .contact-btn.call:hover { background: var(--p-hover); }

/* Aanmelden: "Meer over Zipload24" als rustig blok met een tekstlink, zodat de hoofdknop de enige rode knop is
   (de blokken hebben inline opmaak, daarom !important) */
html[data-pstijl="modern"] .meer-blok { background: var(--p-subtle) !important; border-color: var(--p-line) !important; color: var(--p-ink-2) !important; }
html[data-pstijl="modern"] .meer-blok a { background: none !important; color: var(--p-brand-ink) !important; padding: 0 !important; font-size: 13px !important; text-decoration: underline !important; text-underline-offset: 3px; }
/* Klant en zakelijk: op de telefoon de volle breedte (was 40 px rand aan elke kant) */
@media (max-width: 540px) {
  html[data-pstijl="modern"]:is([data-portaal="klant-register"], [data-portaal="vracht-register"]) body { padding: 12px; }
  html[data-pstijl="modern"]:is([data-portaal="klant-register"], [data-portaal="vracht-register"]) .card { max-width: 100%; padding: 24px 18px; }
}
/* Zakelijk: tussenkoppen en "Aanbevolen" in zinsletters, uitlegblokken rustig grijs */
html[data-pstijl="modern"][data-portaal="vracht-register"] .form-section > legend { text-transform: none; letter-spacing: normal; font-size: 15px; font-weight: 600; }
html[data-pstijl="modern"][data-portaal="vracht-register"] .accounttype-badge { text-transform: none; letter-spacing: normal; }
html[data-pstijl="modern"][data-portaal="vracht-register"] :is(.info-box, .context-note, .accounttype-note) { background: var(--p-subtle); border-color: var(--p-line); color: var(--p-ink-2); }
html[data-pstijl="modern"][data-portaal="vracht-register"] .context-note { border-left: 3px solid var(--p-line-strong); }
html[data-pstijl="modern"][data-portaal="vracht-register"] .form-section { border: 0; box-shadow: none; }   /* groep velden, geen kaart in de kaart */
/* Koerier: taalknoppen onder de titel op de telefoon, stappen als genummerde bolletjes, formulier op een kaart */
@media (max-width: 480px) {
  html[data-pstijl="modern"][data-portaal="registreer"] .reg-kop { flex-direction: column; align-items: flex-start !important; gap: 12px; }
}
html[data-pstijl="modern"][data-portaal="registreer"] .step-indicator { counter-reset: regstap; gap: 6px; margin-bottom: 22px; }
html[data-pstijl="modern"][data-portaal="registreer"] .step { counter-increment: regstap; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border-bottom: 0; font-size: 12px; line-height: 1.3; color: var(--p-ink-3); }
html[data-pstijl="modern"][data-portaal="registreer"] .step::before {
  content: counter(regstap); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  font-size: 13px; font-weight: 700; background: var(--p-panel); color: var(--p-ink-3); border: 1px solid var(--p-line-strong);
}
html[data-pstijl="modern"][data-portaal="registreer"] .step.active { color: var(--p-ink); }
html[data-pstijl="modern"][data-portaal="registreer"] .step.active::before { background: var(--p-brand); border-color: var(--p-brand); color: #fff; }
html[data-pstijl="modern"][data-portaal="registreer"] .step.done { color: var(--green); }
html[data-pstijl="modern"][data-portaal="registreer"] .step.done::before { background: var(--green-bg); border-color: transparent; color: var(--green); }
html[data-pstijl="modern"][data-portaal="registreer"] .form-section.active { background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 14px; padding: 20px 18px; box-shadow: var(--p-shadow-1); }
/* 320 px: geen kaart, anders wordt het telefoonveld naast de landcode te smal ("Telefoonnummer" afgekapt) */
@media (max-width: 359px) {
  html[data-pstijl="modern"][data-portaal="registreer"] .form-section.active { background: none; border: 0; padding: 0; box-shadow: none; }
}

/* Inloggen in de drie portalen: dezelfde opbouw. Logo, taalknoppen eronder, uitleg, velden met een label,
   de knop. Zakelijk had de taalknoppen onderaan: via de volgorde naar boven. */
html[data-pstijl="modern"]:is([data-portaal="koerier"], [data-portaal="klant"], [data-portaal="vracht"]) #login-screen .login-card {
  display: flex; flex-direction: column; text-align: center; width: 100%; max-width: 400px; padding: 30px 24px;
}
html[data-pstijl="modern"]:is([data-portaal="koerier"], [data-portaal="klant"], [data-portaal="vracht"]) #login-screen { padding: 20px 16px; }
/* Klant op de telefoon: onderin ruimte voor de zwevende hulpknop (kaart is hoger door "Wachtwoord vergeten?") */
@media (max-width: 540px) {
  html[data-pstijl="modern"][data-portaal="klant"] #login-screen { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
html[data-pstijl="modern"] #login-screen .login-kop { flex-direction: column; justify-content: center !important; gap: 12px !important; margin-bottom: 14px !important; }
html[data-pstijl="modern"][data-portaal="vracht"] #login-screen .login-logo { order: -2; }
html[data-pstijl="modern"][data-portaal="vracht"] #login-screen #lang-toggle-login { order: -1; margin: 12px 0 14px !important; }
html[data-pstijl="modern"] #login-screen #lang-toggle-login { align-self: center; }
html[data-pstijl="modern"] #login-screen #lang-toggle-login button { font-size: 12px !important; padding: 6px 10px !important; }
html[data-pstijl="modern"] #login-screen .login-sub { text-align: center; margin-bottom: 20px; }
html[data-pstijl="modern"] #login-screen .form-group { text-align: left; }
html[data-pstijl="modern"] .p-veldlabel { display: block; text-align: left; margin: 4px 0 6px; font-size: 13px; font-weight: 600; color: var(--p-ink-2); }
html[data-pstijl="modern"] #login-screen .form-group label { font-size: 13px; font-weight: 600; color: var(--p-ink-2); }
html[data-pstijl="modern"] #login-screen .login-btn { margin-top: 8px; }
html[data-pstijl="modern"][data-portaal="klant"] #login-screen .login-title [data-t="klant_titel"] { font-size: 15px; font-weight: 500; color: var(--p-ink-3); }
/* Klant: de hulpknop staat boven de balk onderin (stap 4), maar op het inlogscherm is er geen balk: daar weer
   onderin, anders valt hij op kleine telefoons over "Registreren" (browsers zonder :has() houden de hoge stand) */
html[data-pstijl="modern"][data-portaal="klant"] body:has(#login-screen[style*="flex"]) #klant-support-btn { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
html[data-pstijl="modern"][data-portaal="vracht"] #login-screen .login-input::placeholder { color: transparent; }   /* het label staat er nu boven */

/* Beheer-login: de drie portalen als knoppen in plaats van kleine tekstlinks */
html[data-pstijl="modern"][data-portaal="login"] .portal-links br { display: none; }
html[data-pstijl="modern"][data-portaal="login"] .portaal-knoppen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; font-size: 0; }   /* lettergrootte 0: de puntjes ertussen weg */
html[data-pstijl="modern"][data-portaal="login"] .portaal-knoppen a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--p-line-strong); border-radius: 10px; background: var(--p-panel);
  font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--p-ink); text-align: center;
}
html[data-pstijl="modern"][data-portaal="login"] .portaal-knoppen a:hover { background: var(--p-hover); color: var(--p-ink); }
@media (min-width: 480px) { html[data-pstijl="modern"][data-portaal="login"] .portaal-knoppen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Reset: zoals de beheer-login. Titel groot, op de telefoon zonder kaart. */
html[data-pstijl="modern"][data-portaal="reset"] .subtitle { margin: 18px 0 22px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--p-ink); }
@media (max-width: 480px) {
  html[data-pstijl="modern"][data-portaal="reset"] body { align-items: flex-start; padding: 28px 20px; }
  html[data-pstijl="modern"][data-portaal="reset"] .box { padding: 12px 0 0; border: 0; background: transparent; box-shadow: none; }
}
html[data-pstijl="modern"][data-portaal="reset"] :is(.footer, .msg) { text-align: left; }

/* ── 14. Wachtwoord vergeten op de drie portaal-inlogschermen (28-09-2026, wachtwoord-vergeten.js) ─────── */
/* De pagina's zetten knoppen op de telefoon op 16px !important (tegen inzoomen); de link en de knop hier niet */
html[data-pstijl="modern"] .wwv-link { font-size: 13px !important; color: var(--p-ink-3); }
html[data-pstijl="modern"][data-portaal="koerier"] #login-screen .login-error:empty { display: none; }   /* leeg foutvak gaf een gat boven de link */
html[data-pstijl="modern"] .wwv-vak { background: var(--p-subtle); border-color: var(--p-line); border-radius: 12px; }
html[data-pstijl="modern"] .wwv-invoer { border-radius: 10px; border-color: var(--p-line-strong); background: var(--p-panel); color: var(--p-ink); }
html[data-pstijl="modern"] .wwv-invoer:focus { border-color: var(--p-brand); box-shadow: 0 0 0 3px rgba(214, 48, 49, 0.18); outline: none; }
html[data-pstijl="modern"] .wwv-knop { font-size: 14px !important; min-height: 44px; border-radius: 10px; border-color: var(--p-line-strong); background: var(--p-panel); color: var(--p-ink); }

@media (prefers-reduced-motion: reduce) {
  html[data-pstijl="modern"] * { scroll-behavior: auto !important; }
}