/*
 * Furnit Portal — CSS
 * Stijl gebaseerd op de Dipanox backoffice-login (Boring Digital huisstijl-aanpak).
 * KLEUREN AANPASSEN? De merk-kleuren komen per pagina binnen als CSS-variabelen
 * (zie tenants.json) — hieronder staan alleen de neutrale tokens.
 */

:root {
  --bg:          #F5F5F6;
  --surface:     #FFFFFF;
  --border:      #E4E4E7;
  --border-2:    #D0D0D4;

  --text:        #1A1A1B;
  --text-2:      #6B6B70;
  --text-muted:  #94949C;
  --text-light:  #FFFFFF;

  --green:       #16A34A;
  --green-bg:    #DCFCE7;
  --yellow:      #D97706;
  --yellow-bg:   #FEF3C7;
  --blue:        #1D4ED8;
  --blue-bg:     #DBEAFE;

  --border-radius:    10px;
  --border-radius-lg: 16px;

  --shadow-sm:   0 1px 3px rgba(26, 26, 27, 0.08);
  --shadow:      0 4px 16px rgba(26, 26, 27, 0.1);
  --shadow-lg:   0 8px 32px rgba(26, 26, 27, 0.14);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* Testomgeving: 5px rand over het hele scherm. Dev en productie ongewijzigd. */
html.omgeving-test::after {
  content: "";
  position: fixed;
  inset: 0;
  border: 5px solid #EA580C;
  pointer-events: none;
  z-index: 2147483647;
}
/* Niet in de PDF/print van het rapport (Chromium print de pagina; de rand stond anders op elke PDF-pagina van test). */
@media print {
  html.omgeving-test::after { display: none; }
}
html.omgeving-test:has(body.rapport-print)::after { display: none; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════
   LOGIN — B2B split-screen (stijl: Dipanox B2B-portaal)
   links merkvlak met USP's, rechts witte inlogkaart
   ══════════════════════════════════════════════════════════════ */

.login-scherm {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.login-links {
  background: linear-gradient(150deg, var(--brand-grad-from) 0%, var(--brand-grad-mid) 45%, var(--brand-grad-to) 100%);
  color: #fff;
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.login-links::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(115deg, #000 15%, transparent 65%);
  mask-image: linear-gradient(115deg, #000 15%, transparent 65%);
}

.login-links .logo {
  height: 44px;
  align-self: flex-start;
  filter: brightness(0) invert(1);
  position: relative;
}

.login-links h1 {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 14px;
  position: relative;
}

.login-links p {
  color: rgba(255, 255, 255, .72);
  line-height: 1.7;
  max-width: 420px;
  position: relative;
}

.login-punt {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-top: 18px;
  position: relative;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .82);
}

.login-punt b { color: #fff; }

.login-punt .vink {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 13px;
}

.login-links-footer {
  position: relative;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}

.login-rechts {
  display: grid;
  place-items: center;
  padding: 48px;
  background: #fff;
}

.login-kaart { width: 100%; max-width: 400px; }

.login-kaart h2 {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin-bottom: 6px;
}

.login-kaart .sub {
  color: var(--text-2);
  font-size: 13.5px;
  margin-bottom: 26px;
}

@media (max-width: 900px) {
  .login-scherm { grid-template-columns: 1fr; }
  .login-links { display: none; }
}

.formveld { margin-bottom: 15px; }

.formveld label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

.formveld input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: .15s;
  background: #fff;
}

.formveld input:focus { border-color: var(--brand-accent); }

.ob-form { padding: 16px 20px 20px; }
.ob-form .klachten-kop { margin-bottom: 8px; }

.formfout {
  background: #FEE2E2;
  color: #B91C1C;
  border-radius: 11px;
  padding: 11px 15px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}

.knop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  font-family: 'Manrope', 'Inter', sans-serif;
  transition: .2s;
}

.knop.merk {
  background: linear-gradient(120deg, var(--brand-accent), var(--brand-accent-hover));
  color: #fff;
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--brand-accent) 50%, transparent);
}

.knop.merk:hover { transform: translateY(-1px); }
.knop:disabled { opacity: .6; cursor: default; transform: none; }

.login-terug {
  margin-top: 18px;
  font-size: 13px;
  text-align: center;
}

.login-terug a { color: var(--brand-accent); font-weight: 600; }
.login-terug a:hover { text-decoration: underline; }

.login-hulp {
  font-size: 12.5px;
  color: var(--text-2);
  margin-top: 20px;
  line-height: 1.6;
}

.login-hulp a { color: var(--brand-accent); font-weight: 600; }

.login-credit {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.login-credit a { color: inherit; }

/* ══════════════════════════════════════════════════════════════
   APP — eenvoudige shell voor dashboard / portaal
   ══════════════════════════════════════════════════════════════ */

.topbar {
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-brand { display: flex; align-items: center; gap: 12px; }
.topbar-brand img { height: 28px; width: auto; }

.topbar-brand .portal-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 10%, white);
  border-radius: 99px;
  padding: 3px 10px;
}

.topbar-user { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-2); }

.topbar-user .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-accent);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.btn-ghost {
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  padding: 7px 14px;
  transition: all .15s;
}

.btn-ghost:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

.profiel-wissel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profiel-wissel-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.profiel-wissel-select {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  outline: none;
  cursor: pointer;
  max-width: 220px;
}
.profiel-wissel-select:hover,
.profiel-wissel-select:focus {
  border-color: var(--brand-accent);
}
.profiel-wissel-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9A3412;
  background: #FFEDD5;
  border-radius: 99px;
  padding: 3px 8px;
  margin-right: 8px;
  vertical-align: middle;
}

.pd-topbar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 18px -10px var(--brand-accent);
}
.pd-topbar-cta:hover { background: var(--brand-accent-hover); }

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 28px 64px;
}

.page-head { margin-bottom: 24px; }
.page-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.page-head p  { font-size: 13.5px; color: var(--text-2); margin-top: 3px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.kpi .kpi-label { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.kpi .kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin-top: 4px; }
.kpi .kpi-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

a.kpi {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .15s, box-shadow .15s;
}
a.kpi:hover {
  border-color: var(--brand-accent);
  box-shadow: var(--shadow-sm);
}

.og-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.og-acties form { margin: 0; }
.og-acties .btn-ghost,
.card td .btn-ghost,
.og-scherm td .btn-ghost {
  padding: 4px 10px;
  font-size: 12px;
  width: auto;
}

.og-scherm {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}
.og-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  background: #F4F5F8;
}
.og-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px;
  font-weight: 800;
  font-size: 13px;
  color: var(--text-2);
  border-right: 1px solid var(--border);
  transition: background .15s, color .15s;
  min-width: 0;
}
.og-tab:last-child { border-right: none; }
.og-tab:hover { color: var(--text); background: #ECEEF2; }
.og-tab.actief,
.og-tab.actief:hover {
  background: var(--brand-accent);
  color: #fff;
  border-right-color: var(--brand-accent);
}
.og-tab small {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: #E4E4E7;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.og-tab.actief small {
  background: rgba(255,255,255,.22);
  color: #fff;
}
.og-tabblad {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.og-naam {
  display: flex;
  align-items: center;
  gap: 10px;
}
.og-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  background: var(--blue-bg);
  color: var(--blue);
}
.og-avatar.actief { background: var(--green-bg); color: var(--green); }
.og-avatar.inactief { background: #F0F0F2; color: var(--text-2); }
.og-avatar.vast { background: #FFEDD5; color: #9A3412; }
.og-komend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 6px;
}
.og-adres-regel {
  padding: 0 20px 4px;
  font-size: 13.5px;
  color: var(--text-2);
}
.tarief-overzicht {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 12px;
  background: linear-gradient(180deg, #F6F7FB 0%, #EEF0F6 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.tarief-kaart {
  --tarief-accent: var(--brand-accent, #1F2A60);
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow-sm);
}
.tarief-kaart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tarief-accent);
}
.tarief-kaart-extra { --tarief-accent: #0F766E; }
.tarief-kaart-thuis { --tarief-accent: #C2410C; }
.tarief-kaart-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}
.tarief-kaart-kop > div { min-width: 0; flex: 1; }
.tarief-kaart-kop .badge { flex-shrink: 0; }
.tarief-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--tarief-accent);
  background: color-mix(in srgb, var(--tarief-accent) 12%, white);
}
.tarief-overzicht-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.tarief-overzicht-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}
.tarief-bedrag-rij {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 8px;
  min-width: 0;
}
.tarief-bedrag-rij strong {
  font-family: Manrope, Inter, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--tarief-accent);
}
.tarief-bedrag-rij s {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration-thickness: 1.5px;
}
.tarief-overzicht-peil {
  display: block;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .tarief-overzicht { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.card-head h2 { font-size: 15px; font-weight: 700; }
.card-head .hint { font-size: 12px; color: var(--text-muted); }
button.card-head.log-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
button.card-head.log-toggle:hover { background: #FAFBFE; }
.log-toggle h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: #FAFAFB;
}

td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

tr:last-child td { border-bottom: none; }

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 3px 10px;
}

.badge-nieuw     { color: var(--blue);   background: var(--blue-bg); }
.badge-on-hold   { color: #9A3412; background: #FFEDD5; }
.badge-uitgesteld { color: #57534E; background: #E7E5E4; }
.badge-ingepland { color: var(--yellow); background: var(--yellow-bg); }
.badge-afgerond  { color: var(--green);  background: var(--green-bg); }
.badge-geannuleerd { color: #9F1239; background: #FFE4E6; }

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.input-wrp {
  position: relative;
  border: 1.5px solid var(--border-2);
  border-radius: var(--border-radius);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input-wrp:focus-within {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 12%, transparent);
}

.input-wrp input,
.input-wrp select,
.input-wrp textarea {
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: var(--border-radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  outline: none;
}

.input-wrp textarea {
  min-height: 128px;
  resize: vertical;
  line-height: 1.55;
}

.input-wrp input::placeholder,
.input-wrp textarea::placeholder { color: var(--text-muted); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1.5px solid var(--brand-accent);
  border-radius: var(--border-radius);
  background: var(--brand-accent);
  color: white;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  transition: all 0.15s;
}

.btn-primary:hover {
  background: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  padding: 20px;
}

.form-grid .full { grid-column: 1 / -1; }

.form-grid .btn-primary { width: auto; margin-top: 0; justify-self: start; }

.mat-voorraad-form {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.mat-voorraad-stand {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 2ch;
}
.mat-voorraad-form input[name="voorraad"] {
  width: 80px;
  min-width: 80px;
  height: 36px;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  outline: none;
}
.mat-voorraad-form .btn-ghost {
  padding: 6px 10px;
  font-size: 12px;
}

.form-label-text {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}

.check-lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.check-lijst-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.check-lijst-item input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-accent, #1F2A60);
}

.fabriek-form {
  max-width: 560px;
  padding: 18px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fabriek-kaart {
  max-width: 600px;
}

.fabriek-blok .fabriek-rij + .fabriek-rij {
  margin-top: 12px;
}

.fabriek-blok-kop {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.fabriek-blok-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.fabriek-rij {
  display: grid;
  gap: 12px;
}

.fabriek-rij-naam {
  grid-template-columns: minmax(0, 1fr) 150px;
}

.fabriek-rij-straat {
  grid-template-columns: minmax(0, 1fr) 88px;
}

.fabriek-rij-plaats {
  grid-template-columns: 128px minmax(0, 1fr);
}

.fabriek-select {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
}

.check-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1.5px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.check-chip:has(input:checked) {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 8%, white);
  color: var(--brand-accent);
}

.check-chip input {
  width: 14px;
  height: 14px;
  accent-color: var(--brand-accent, #1F2A60);
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .page { padding: 24px 16px 48px; }
  .fabriek-rij-naam,
  .fabriek-rij-straat,
  .fabriek-rij-plaats {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   ADMIN SHELL — donker zijmenu (stijl: Dipanox backoffice)
   ══════════════════════════════════════════════════════════════ */

:root {
  --sidebar-width: 250px;
  --sidebar-bg: #12173A;
  --sidebar-accent: #8B9CF5;
}

.admin-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }

.sidebar-nav { flex: 1; padding: 12px 0; }

.nav-group { margin-bottom: 4px; }

.nav-group-label {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: .8px;
  padding: 12px 20px 6px;
}

.nav-item.is-groep {
  width: 100%;
  margin: 0;
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.nav-item.is-groep.is-label {
  cursor: default;
  color: rgba(255,255,255,.45);
}
.nav-item.is-groep.is-label:hover {
  background: none;
  color: rgba(255,255,255,.45);
}
.nav-item .nav-group-chevron {
  margin-left: auto;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .45;
  transition: transform .15s;
}
.nav-item .nav-group-chevron.is-open { transform: rotate(180deg); }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px;
  color: rgba(255,255,255,.6);
  font-size: 13.5px; font-weight: 600;
  border-left: 3px solid transparent;
  transition: all .15s;
}

.nav-item:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.95); }

.nav-item.active {
  background: rgba(139, 156, 245, 0.13);
  color: white;
  border-left-color: var(--sidebar-accent);
}

.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }

.nav-badge {
  margin-left: auto;
  background: #E11D48;
  color: white;
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 99px;
}

.sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); padding: 16px 20px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; }

.user-avatar {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, rgba(139,156,245,.3), rgba(255,255,255,.08));
  border: 1px solid rgba(139,156,245,.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white;
  flex-shrink: 0;
}

.user-info .name { font-size: 13px; font-weight: 700; color: white; }
.user-info .role { font-size: 11px; color: rgba(255,255,255,.4); }

.logout-btn {
  margin-left: auto;
  background: none; border: none;
  color: rgba(255,255,255,.4);
  padding: 6px;
  border-radius: 6px;
  transition: color .15s;
  display: inline-flex;
}
.logout-btn:hover { color: #fff; }
.logout-btn svg { width: 16px; height: 16px; }

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar-breadcrumb { font-size: 13px; color: var(--text-muted); }
.topbar-breadcrumb .current { color: var(--text); font-weight: 600; }

.main-content .page { max-width: 1680px; width: 100%; }

/* ── Agenda (weekoverzicht) ── */
.agenda-grid {
  display: grid;
  grid-template-columns: 64px repeat(5, 1fr);
  grid-auto-rows: 44px;
  gap: 2px;
  padding: 16px 20px 20px;
}

.agenda-grid .kop {
  font-size: 12px; font-weight: 700; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  background: #FAFAFB; border-radius: 8px;
}

.agenda-grid .uur {
  font-size: 11.5px; color: var(--text-muted);
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 4px 8px 0 0;
}

.agenda-grid .cel { background: #FAFAFB; border-radius: 8px; }

.agenda-blok {
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.35;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.agenda-blok b { display: block; font-size: 11.5px; }
.agenda-blok span { opacity: .8; }

/* ── Rapportage-balkjes ── */
.staafjes {
  display: flex; align-items: flex-end; gap: 18px;
  height: 180px; padding: 20px 20px 8px;
}
.staaf { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.staaf .balk { width: 100%; max-width: 56px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #31408F, #1F2A60); }
.staaf .waarde { font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.staaf .label { font-size: 11px; color: var(--text-muted); padding-bottom: 10px; }

/* ── Instellingen-mock ── */
.form-static input, .form-static select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  background: #FAFAFB;
  color: var(--text-2);
}

/* eigen baan per monteur binnen een dagkolom */
.agenda-blok.laan-0 { margin-right: 51%; }
.agenda-blok.laan-1 { margin-left: 51%; }
.agenda-blok { font-size: 11px; padding: 5px 7px; }

/* ══════════════════════════════════════════════════════════════
   PLANBORD, 8-MONTEURS-AGENDA & WERKBON-DETAIL
   ══════════════════════════════════════════════════════════════ */

.agenda-grid.monteurs-8 {
  grid-template-columns: 56px repeat(var(--kolommen, 8), 1fr);
  grid-auto-rows: 52px;
}

.agenda-grid.monteurs-8 .agenda-blok { font-size: 10.5px; padding: 4px 6px; margin: 0; }
.agenda-grid.monteurs-8 .agenda-blok b { font-size: 10.5px; }
.agenda-grid.monteurs-8 .agenda-blok span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kleurdot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 3px;
  margin-right: 6px;
}

.dag-tabs { display: flex; gap: 6px; }
.al-tabs { flex-wrap: wrap; justify-content: flex-end; max-width: 62%; }

.dag-tab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 13px;
  transition: all .15s;
}

.dag-tab:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.dag-tab.actief { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.dag-tab.vandaag:not(.actief) { border-color: var(--brand-accent); }

/* Planbord */
.planbord {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 24px;
  align-items: start;
}
.planbord.is-bezig .tz { pointer-events: none; }
.planbord.is-bezig .verzoek-kaart { cursor: wait; }
.dl-blok.is-temp { opacity: .85; }

.verzoek-lijst { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.verzoek-kaart {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 11px 13px;
  cursor: grab;
  background: #fff;
  transition: all .15s;
}

.verzoek-kaart:hover { border-color: var(--brand-accent); box-shadow: var(--shadow-sm); }
.verzoek-kaart.gekozen {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 6%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 15%, transparent);
}

.vk-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.vk-ref { font-size: 12px; font-weight: 800; color: var(--brand-accent); margin-bottom: 2px; }
.vk-klant { font-size: 13px; font-weight: 600; }
.vk-detail { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.verzoek-leeg { padding: 18px; text-align: center; color: var(--text-muted); font-size: 13px; }

body.kies-slot .cel.vrij {
  outline: 1.5px dashed color-mix(in srgb, var(--brand-accent) 45%, transparent);
  outline-offset: -3px;
  cursor: pointer;
}

body.kies-slot .cel.vrij:hover,
.cel.vrij.drop-hover {
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
  outline-style: solid;
}

.flash-ok {
  background: var(--green-bg);
  color: #166534;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 20px;
}
.flash-fout {
  background: #FEF2F2;
  color: #B91C1C;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 20px;
}

/* Werkbon-detail */
.bon-kolommen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

table.klikbaar tbody tr { cursor: pointer; transition: background .1s; }
table.klikbaar tbody tr:hover { background: #FAFAFB; }

.wb-totalen {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.wb-totalen > div {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px 16px;
  align-items: start;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.wb-totalen > div:first-child { border-top: 0; }
.wb-totalen dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}
.wb-totalen dd {
  margin: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}
.wb-totalen-eind {
  background: #F7F8FB;
}
.wb-totalen-eind dt,
.wb-totalen-eind dd {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.bon-totalen-wrap {
  border-top: 1px solid var(--border);
}
.bon-totalen-wrap .wb-totalen > div:first-child {
  border-top: 0;
}
.wb-totalen.is-bewerk dd input {
  width: 100%;
  max-width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  background: #fff;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.wb-totalen.is-bewerk dd input:focus {
  outline: none;
  border-color: var(--brand-accent);
}
.wb-totalen-override {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 10px 16px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.wb-totalen-override input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-accent, #1F2A60);
}

.foto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 16px 20px 20px;
}

.foto-item { margin: 0; }
.foto-item-knop {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 12px;
}
.foto-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  background: #F5F6F9;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
}
.foto-item-knop:hover img { filter: brightness(.96); }
.foto-item figcaption { font-size: 11.5px; color: var(--text-2); margin-top: 6px; }
.doc-lijst {
  list-style: none;
  margin: 0;
  padding: 4px 16px 16px;
  display: grid;
  gap: 8px;
}
.doc-lijst a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #FAFAFB;
  text-decoration: none;
  color: inherit;
}
.doc-lijst a:hover { border-color: var(--border-2); background: #F4F5F8; }
.doc-lijst strong { font-size: 14px; color: var(--brand-accent); }
.doc-lijst span { font-size: 12px; color: var(--text-2); }
.foto-groot {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 14, 32, .92);
  display: grid;
  place-items: center;
  padding: 56px 64px 48px;
}
.foto-groot img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: 10px;
  background: #111;
}
.foto-groot-sluit,
.foto-groot-nav {
  position: absolute;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
}
.foto-groot-sluit {
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  font-size: 28px;
  line-height: 1;
}
.foto-groot-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 32px;
  line-height: 1;
}
.foto-groot-nav.vorige { left: 12px; }
.foto-groot-nav.volgende { right: 12px; }
.foto-groot-nr {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
}

.foto-toevoegen {
  border: 1.5px dashed var(--border-2);
  border-radius: 10px;
  display: grid;
  place-items: center;
  min-height: 120px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.foto-toevoegen:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

.bon-editor { padding: 16px 20px 20px; }
.bon-editor label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin: 14px 0 6px;
}
.bon-editor label:first-child { margin-top: 0; }
.bon-editor textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color .15s;
}
.bon-editor textarea:focus { border-color: var(--brand-accent); }

.bon-acties { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

.status-select {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  background: #fff;
  outline: none;
}

@media (max-width: 1100px) {
  .planbord, .bon-kolommen { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   WEEKAGENDA (zoals het oude systeem, maar netjes) + TOOLTIPS
   ══════════════════════════════════════════════════════════════ */

.agenda-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ac-links, .ac-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-titel { font-size: 14px; font-weight: 700; margin-left: 6px; }
.btn-ghost.uit { opacity: .4; pointer-events: none; }
.plan-controls .dag-tabs { flex-wrap: wrap; justify-content: flex-end; }

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.view-toggle .vt {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  color: var(--text-2);
}

.view-toggle .vt.actief { background: var(--brand-accent); color: #fff; }

.agenda-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-2);
}

.agenda-legenda .leg { display: inline-flex; align-items: center; }

.agenda-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.dagkolom {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

.dagkolom.vandaag { border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 10%, transparent); }

.dk-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.dk-dag { font-size: 14px; font-weight: 800; }
.dagkolom.vandaag .dk-dag { color: var(--brand-accent); }
.dk-datum { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.dk-route {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-accent);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, white);
  border-radius: 8px;
  padding: 4px 9px;
  white-space: nowrap;
  transition: all .15s;
}

.dk-route:hover { background: color-mix(in srgb, var(--brand-accent) 8%, white); }

.dk-items { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.dk-leeg { font-size: 12px; color: var(--text-muted); text-align: center; padding: 14px 0; }

/* afspraak-chip: kleur per monteur als balkje links, nette afkapping */
.chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, var(--chip) 10%, white);
  border-left: 4px solid var(--chip);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  cursor: default;
  transition: background .12s;
}

.chip:hover, .chip:focus { background: color-mix(in srgb, var(--chip) 18%, white); outline: none; }
.chip b { color: var(--chip); font-size: 12px; flex-shrink: 0; filter: brightness(.85); }
.chip .chip-tekst {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 600;
}

/* tooltip met klachtomschrijving */
.tip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  width: 280px;
  background: #17181C;
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}

.chip:hover .tip, .chip:focus .tip,
.agenda-blok:hover .tip, .agenda-blok:focus .tip { display: block; }

/* in de rechterkolommen klapt de tooltip naar links open */
.dagkolom:nth-child(n+4) .tip { left: auto; right: 0; }
.agenda-grid .agenda-blok .tip { left: 0; top: calc(100% + 4px); }
.agenda-grid > .agenda-blok:nth-last-child(-n+9) .tip,
.agenda-grid .agenda-blok[style*="grid-column:8"] .tip,
.agenda-grid .agenda-blok[style*="grid-column:9"] .tip { left: auto; right: 0; }

.tip-kop { font-weight: 700; font-size: 12.5px; margin-bottom: 6px; }

.tip-regel { display: flex; gap: 8px; color: rgba(255,255,255,.85); }
.tip-regel span {
  width: 100px;
  flex-shrink: 0;
  color: rgba(255,255,255,.45);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-top: 1px;
}

.tip-omschrijving {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}

.agenda-blok { cursor: default; }
.agenda-blok .tip { color: #fff; }

@media (max-width: 1200px) {
  .agenda-week { grid-template-columns: repeat(2, 1fr); }
}

/* groepering per monteur binnen een dagkolom */
.mg { margin-bottom: 10px; }
.mg:last-child { margin-bottom: 0; }

.mg-kop {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
  padding: 2px 2px 5px;
}

.mg-aantal {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--chip);
  background: color-mix(in srgb, var(--chip) 12%, white);
  border-radius: 99px;
  padding: 1px 7px;
}

.mg .chip { margin-bottom: 5px; }
.mg .chip:last-child { margin-bottom: 0; }
.dk-items { gap: 0; }

.chip .chip-tekst strong { font-weight: 700; }

/* submenu-items in het zijmenu + spoed-badges */
.nav-item.sub {
  padding: 6px 20px 6px 64px;
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
}

.nav-item.sub:hover { color: rgba(255,255,255,.9); }
.nav-item.sub.active { color: #fff; }

.badge-spoed   { color: #B91C1C; background: #FEE2E2; }
.badge-normaal { color: var(--text-2); background: #F0F0F2; }
.badge-taal { color: var(--text-2); background: #F0F0F2; }
.badge-taal.eng { color: var(--blue); background: var(--blue-bg); }

/* ══════════════════════════════════════════════════════════════
   MONTEURS (foto's, werktijden), ROLLEN & MONTEURS-APP
   ══════════════════════════════════════════════════════════════ */

.monteur-kaart { display: block; transition: all .15s; }
.monteur-kaart:hover { border-color: var(--brand-accent); box-shadow: var(--shadow); }

.mk-kop { display: flex; align-items: center; gap: 12px; }

.mk-foto {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mk-initiaal { color: #fff; font-size: 15px; font-weight: 800; }
.mk-foto.groot { width: 72px; height: 72px; font-size: 22px; }

.foto-wrap { position: relative; }
.foto-knop {
  position: absolute;
  right: -4px; bottom: -4px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--brand-accent);
  font-size: 13px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}

.tijden-form { padding: 14px 20px 4px; }
.tijden-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.tijden-rij:last-of-type { border-bottom: none; }
.tijden-dag { width: 92px; font-size: 13px; font-weight: 600; }
.tijden-tot { font-size: 12px; color: var(--text-muted); }
.tijden-rij input[type="time"] {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 13px;
  font-family: inherit;
}
.tijden-rij input[type="time"]:disabled { opacity: .4; }
.tijden-vrij {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.vrij-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
}
.vrij-form .badge { flex-shrink: 0; }
.vrij-form .btn-primary { white-space: nowrap; }

/* rollen & rechten */
.rechten-tabel .rol-kop { text-align: center; width: 110px; }
.rechten-tabel .rol-cel { text-align: center; }
.rechten-tabel input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--brand-accent);
  cursor: pointer;
}
.rechten-tabel input[type="checkbox"]:disabled { cursor: default; }

/* monteurs-app (mobiel-achtig) */
.app-scherm { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; }

.app-kop {
  background: linear-gradient(140deg, var(--brand-accent), color-mix(in srgb, var(--mkleur, var(--brand-accent)) 60%, var(--brand-accent)));
  color: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.app-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-hallo { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; }
.app-datum { font-size: 12.5px; opacity: .75; }
.app-uitlog { font-size: 18px; opacity: .7; padding: 6px; }
.app-uitlog:hover { opacity: 1; }

.app-voortgang { margin-top: 14px; }
.app-voortgang-balk {
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.2);
  overflow: hidden;
}
.app-voortgang-balk span { display: block; height: 100%; border-radius: 99px; background: #4ADE80; transition: width .3s; }
.app-voortgang-tekst { font-size: 12px; opacity: .8; margin-top: 6px; }

.app-lijst { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.opdracht {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.opdracht.klaar { opacity: .62; }
.opdracht.klaar .opdracht-klant { text-decoration: line-through; }

.opdracht-tijd { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
.opdracht-tijd b { font-size: 14px; color: var(--brand-accent); }
.opdracht-tijd span { font-size: 11px; color: var(--text-muted); }

.opdracht-info { flex: 1; min-width: 0; }
.opdracht-klant { font-size: 14px; font-weight: 700; }
.opdracht-werk { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.opdracht-omschrijving {
  font-size: 12px;
  color: var(--text-2);
  background: #F6F7F9;
  border-radius: 9px;
  padding: 8px 10px;
  margin-top: 8px;
  line-height: 1.5;
}

.opdracht-actie { flex-shrink: 0; }
.afmeld-knop {
  border: 1.5px solid var(--brand-accent);
  border-radius: 10px;
  background: var(--brand-accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  transition: all .15s;
}
.afmeld-knop:hover { background: var(--brand-accent-hover); }
.afmeld-knop.klaar { background: var(--green); border-color: var(--green); }

.app-voet { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-top: 18px; }

/* dichte slots (buiten werktijd) en vrije dagen op het planbord */
.cel.dicht {
  background: repeating-linear-gradient(-45deg, #F1F1F3 0 6px, #E8E8EB 6px 12px);
}

.vrij-overlay {
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(245, 245, 246, .72);
  border-radius: 10px;
  z-index: 5;
  pointer-events: none;
  line-height: 1.7;
}

/* werkbon: monteur-banner + meerdere klachten */
.monteur-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--mkleur) 10%, white), #fff);
  border: 1.5px solid color-mix(in srgb, var(--mkleur) 35%, white);
  border-left: 5px solid var(--mkleur);
  border-radius: var(--border-radius-lg);
  padding: 14px 18px;
  margin-bottom: 24px;
  transition: all .15s;
}

.monteur-banner:hover { box-shadow: var(--shadow); }
.mb-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.mb-naam { font-size: 16px; font-weight: 800; color: var(--text); }
.mb-regio { font-size: 12px; color: var(--text-2); }
.mb-pijl { margin-left: auto; font-size: 22px; color: var(--text-muted); }

.klachten-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 6px;
}

.klacht-plus { font-size: 12px; padding: 5px 11px; font-weight: 600; }

.klacht-rij {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.klacht-rij textarea {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}
.klacht-rij textarea:focus { border-color: var(--brand-accent); }

.klacht-nr {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-accent) 10%, white);
  color: var(--brand-accent);
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.klacht-weg {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 4px;
  transition: color .15s;
}
.klacht-weg:hover { color: #DC2626; }

/* monteurs-app: adres, statuschips, mini-knoppen en werkbon */
.opdracht-adres { font-size: 12px; color: var(--text-2); margin-top: 2px; }

.opdracht-status { margin-top: 8px; }
.status-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 3px 10px;
}
.status-chip.oplocatie { color: #92400E; background: #FEF3C7; }
.status-chip.nietthuis { color: #9A3412; background: #FFEDD5; }
.badge-nietthuis { color: #9A3412; background: #FFEDD5; }
.badge-controleren { color: #92400E; background: #FEF3C7; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rechten-keuzes {
  display: grid;
  gap: 10px;
  border: 0;
  margin: 0;
  padding: 16px 20px 4px;
  min-width: 0;
}

.rechten-keuze {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--border-radius);
  cursor: pointer;
  background: var(--surface);
}

.rechten-keuze:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-bg);
}

.rechten-keuze input {
  margin-top: 3px;
  flex-shrink: 0;
}

.rechten-keuze strong {
  display: block;
  font-size: 13.5px;
}

.rechten-keuze small {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.45;
}
.af-banner-nietthuis { background: #FFF7ED; border-color: #FED7AA; }
.af-banner-nietthuis .af-vink { background: #EA580C; }
.af-banner-nietthuis .af-links b { color: #9A3412; }
.af-banner-nietthuis .af-links small { color: #C2410C; }

.opdracht-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mini-knop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1.5px solid var(--border-2);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  padding: 7px 12px;
  transition: all .15s;
}
.mini-knop:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.mini-knop.vol { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.mini-knop.vol:hover { background: var(--brand-accent-hover); color: #fff; }

.wb-label { display: block; font-size: 12.5px; font-weight: 700; margin: 14px 0 6px; }
.wb-tekst {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  outline: none;
}
.wb-tekst:focus { border-color: var(--brand-accent); }
.wb-tekst-fout { border-color: #DC2626; }

.wb-opties-keuze {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wb-opties-2 { grid-template-columns: repeat(2, 1fr); }
.wb-opties-keuze .wb-optie {
  justify-content: center;
  padding: 12px 8px;
  text-align: center;
}
.wb-optie {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wb-optie:has(input:checked) { border-color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 6%, white); }
.wb-optie input { accent-color: var(--brand-accent); }

.wb-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wb-foto { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/3; }
.wb-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-foto-plus {
  border: 1.5px dashed var(--border-2);
  background: #fff;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
  display: grid;
  place-items: center;
}
.wb-foto-plus:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.wb-foto-weg {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10px;
  display: grid;
  place-items: center;
}

.wb-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 8;
}
.wb-tabs-3 { grid-template-columns: repeat(3, 1fr); }
.wb-tab {
  border: none;
  border-right: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  font-family: inherit;
  padding: 10px 4px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.wb-tab:last-child { border-right: none; }
.wb-tab-label { font-size: 13px; font-weight: 800; line-height: 1.2; }
.wb-tab-hint { font-size: 10px; font-weight: 600; opacity: .7; }
.wb-tab.actief {
  background: var(--brand-accent);
  color: #fff;
  border-right-color: transparent;
}
.wb-vel[hidden] { display: none; }
.wb-vel {
  background: #fff;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 4px 16px 18px;
  box-shadow: var(--shadow-sm);
}
.wb-adreskaart {
  margin-top: 12px;
  padding: 2px 4px 2px;
}
.wb-adreskaart-naam { font-size: 16px; font-weight: 800; }
.wb-adreskaart-regel { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.wb-adreskaart-ref {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-accent);
}
.wb-bel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--brand-accent);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.wb-bel:hover { filter: brightness(1.06); }
.wb-bel-ico { font-size: 22px; line-height: 1; }
.wb-bel span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.wb-bel-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}
.wb-bel-nr {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.15;
}
.wb-sectie { padding: 14px 0; border-top: 1px solid var(--border); }
.wb-sectie[hidden] { display: none; }
.wb-sectie:first-child { border-top: none; padding-top: 14px; }
.wb-sectie-titel {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.wb-sectie-tekst {
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}
.wb-leeg {
  background: #F6F7F9;
  border-radius: 10px;
  padding: 14px 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.wb-plus-rij {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  padding: 11px 12px;
  border: 1.5px dashed var(--border-2);
  border-radius: 12px;
  background: #FAFBFC;
  color: var(--brand-accent);
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.wb-plus-rij:hover { border-color: var(--brand-accent); background: #fff; }
.wb-opties-stapels { display: grid; grid-template-columns: 1fr; gap: 8px; }
.wb-opties-stapels .wb-optie {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 12px 14px;
}
.wb-optie span { display: flex; flex-direction: column; gap: 2px; }
.wb-optie span strong { font-size: 14px; }
.wb-optie span small { font-size: 12px; font-weight: 500; color: var(--text-2); }
.wb-optie.wb-schoon { width: 100%; align-items: flex-start; }
.wb-fouttekst { color: #B91C1C; font-size: 12.5px; font-weight: 600; margin: 8px 0 0; }
.wb-optie.wb-fout { border-color: #DC2626; background: #FEF2F2; }
.wb-klacht-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px 0 4px;
  -webkit-overflow-scrolling: touch;
}
.wb-klacht-pill {
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 99px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
}
.wb-klacht-pill.actief {
  border-color: var(--brand-accent);
  background: var(--brand-accent);
  color: #fff;
}
.wb-klacht-pill.klaar:not(.actief) { color: #15803D; border-color: #86EFAC; }
.wb-klacht-pill.plus { border-style: dashed; font-weight: 600; }
.wb-klacht-voet {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0 8px;
}
.wb-klacht-voet .btn-primary { width: auto; }
.wb-select {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.wb-afrond-knop {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  background: var(--brand-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.wb-afrond-knop:hover { background: var(--brand-accent-hover); }
.wb-afrond-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin: 10px 0 0;
  line-height: 1.4;
}
.wb-foto-plus span { display: block; font-size: 11px; line-height: 1.3; }

.wb-kaart {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 16px 18px;
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
}
.wb-kaart-kop {
  font-family: Manrope, Inter, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 8px;
}
.wb-kaart-uitleg {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  margin: 0 0 10px;
}
.wb-klacht-vast {
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.45;
  background: #F6F7F9;
  border-radius: 10px;
  padding: 10px 12px;
}
.wb-kaart .klachten-kop { margin-top: 0; }
.wb-kaart .klacht-plus {
  background: color-mix(in srgb, var(--brand-accent) 8%, white);
  border-color: color-mix(in srgb, var(--brand-accent) 28%, var(--border));
  color: var(--brand-accent);
  font-weight: 700;
}
.rapport-extra-klachten {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
}
.rapport-klacht + .rapport-klacht {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* routes-pagina */
.route-kaart { height: 480px; width: 100%; z-index: 1; }

.routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.route-card { border-top: 4px solid var(--mkleur); margin-bottom: 0; }
.route-leeg { padding: 18px 20px; color: var(--text-muted); font-size: 13px; }

.route-lijst { padding: 8px 0; }

.route-stop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px;
  position: relative;
}

/* verbindingslijn tussen stops */
.route-stop:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 32px;
  bottom: -10px;
  width: 2px;
  background: color-mix(in srgb, var(--mkleur) 30%, white);
}

.stop-nr {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  z-index: 1;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}

.stop-info { flex: 1; min-width: 0; }
.stop-kop { font-size: 13px; }
.stop-adres { font-size: 12px; color: var(--text-2); }
.stop-status { font-size: 11.5px; font-weight: 700; color: var(--green); white-space: nowrap; }

/* rit-filter + reistijden op de routes-pagina */
.filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.fc-label { font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-right: 2px; }

.fchip {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  background: #fff;
  color: var(--text-muted);
  padding: 6px 13px;
  transition: all .15s;
  opacity: .55;
}

.fchip .kleurdot { opacity: .4; }

.fchip.actief {
  opacity: 1;
  color: var(--text);
  border-color: color-mix(in srgb, var(--chip, var(--brand-accent)) 45%, white);
  background: color-mix(in srgb, var(--chip, var(--brand-accent)) 7%, white);
}

.fchip.actief .kleurdot { opacity: 1; }
.fchip:hover { border-color: var(--chip, var(--brand-accent)); }
.fc-alles { opacity: 1; color: var(--text-2); }

.reistijd {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-accent);
  margin-top: 2px;
}

.leg-tijd {
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 0 18px 0 62px;
  position: relative;
}

/* reistijd tussen stops: rechts uitgelijnd als nette pil met stippellijn */
.leg-tijd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 3px 18px 3px 62px;
}

.leg-tijd::before {
  content: "";
  flex: 1;
  border-top: 1.5px dashed color-mix(in srgb, var(--mkleur, var(--border-2)) 35%, white);
  margin-right: 12px;
}

.leg-pil {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: #F5F6F8;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 11px;
  white-space: nowrap;
}

/* doorlopende tijdlijn tussen de stop-bolletjes + rustiger pil */
.route-stop:not(:last-child)::before { bottom: 0; }

.leg-tijd { position: relative; }
.leg-tijd::after {
  content: "";
  position: absolute;
  left: 29px;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: color-mix(in srgb, var(--mkleur, var(--border-2)) 30%, white);
}

.leg-tijd::before { border-top-style: solid; border-top-color: transparent; }

/* één doorlopende lijn per route, exact van bolletje naar bolletje */
.route-lijst { position: relative; }

.route-lijst::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: color-mix(in srgb, var(--mkleur, var(--border-2)) 32%, white);
}

.route-stop:not(:last-child)::before { display: none; }
.leg-tijd::after { display: none; }

/* compactere route-tijdlijn: minder ruimte tussen de stops */
.route-lijst { padding: 6px 0; }
.route-stop { padding: 5px 18px; }
.leg-tijd { padding: 0 18px 0 62px; margin: -3px 0; }
.leg-pil { font-size: 10.5px; padding: 2px 9px; }
.route-lijst::before { top: 22px; bottom: 22px; }

/* totale reistijd rechts in de kaartkop */
.rc-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.rc-rechts .reistijd { margin-top: 0; text-align: right; white-space: nowrap; }

/* datumkiezer op de routes-pagina */
.datum-picker {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.datum-picker:hover, .datum-picker:focus { border-color: var(--brand-accent); }

/* sidebar-logo: gecentreerd en groter */
.sidebar-logo { justify-content: center; padding: 22px 16px 18px; }
.sidebar-logo img { height: 44px; }

/* klikbare stops in het routes-overzicht */
.route-stop.klik { cursor: pointer; border-radius: 10px; transition: background .12s; }
.route-stop.klik:hover { background: color-mix(in srgb, var(--mkleur, var(--brand-accent)) 6%, white); }
.route-stop.klik:hover .stop-kop { color: var(--brand-accent); }

/* topbar: systeemstatus + versiebadge */
.sys-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: default;
  padding: 6px 4px;
}

.sys-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
  flex-shrink: 0;
}

.sys-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 400;
  width: 270px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
}

.sys-status:hover .sys-panel { display: block; }

.sys-panel-kop { font-size: 12px; font-weight: 800; margin-bottom: 8px; }

.sys-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
}

.sys-naam { font-weight: 600; color: var(--text); }
.sys-detail { margin-left: auto; color: var(--text-muted); font-weight: 500; }

.sys-balk {
  height: 6px;
  border-radius: 99px;
  background: #EEF0F3;
  overflow: hidden;
  margin: 1px 0 5px 16px;
}
.sys-balk span { display: block; height: 100%; border-radius: 99px; background: #22C55E; }

.sys-voet {
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 6px;
}

.versie-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 8%, white);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 25%, white);
  border-radius: 99px;
  padding: 4px 11px;
  transition: all .15s;
}
.versie-badge:hover { background: var(--brand-accent); color: #fff; }

/* versiebeheer-pagina */
.changelog { max-width: 780px; }

.cl-nr {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  background: #F0F1F4;
  border-radius: 8px;
  padding: 3px 10px;
}
.cl-nr.actueel { background: var(--brand-accent); color: #fff; }

.cl-items { padding: 6px 0; }

.cl-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 20px;
  font-size: 13.5px;
}

.cl-type {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 99px;
  padding: 2px 9px;
  margin-top: 1px;
}
.cl-type.nieuw     { color: #166534; background: #DCFCE7; }
.cl-type.verbeterd { color: #1E40AF; background: #DBEAFE; }
.cl-type.opgelost  { color: #92400E; background: #FEF3C7; }

/* pulserende systeemstatus */
.sys-status > .sys-dot {
  position: relative;
  animation: sys-hartslag 2.2s ease-in-out infinite;
}

.sys-status > .sys-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, .55);
  animation: sys-ring 2.2s ease-out infinite;
}

@keyframes sys-hartslag {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
  50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, .28); }
}

@keyframes sys-ring {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sys-status > .sys-dot, .sys-status > .sys-dot::after { animation: none; }
}

/* realtime klok in de topbalk */
.klok {
  text-align: right;
  line-height: 1.2;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.klok-tijd {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

.klok-datum {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* blok als anker voor tooltip + badges (vink/✉), tooltip bij hover boven de rest */
.agenda-grid .agenda-blok { position: relative; }
.agenda-grid .agenda-blok:hover, .agenda-grid .agenda-blok:focus {
  overflow: visible;
  z-index: 260;
}

/* versleepbare agenda-blokken */
.agenda-blok.sleep { cursor: grab; }
.agenda-blok.sleep:active { cursor: grabbing; }
.agenda-blok.gekozen {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: 0 0 0 3px var(--brand-accent), var(--shadow);
}

/* plaats-filter op het planbord */
.plaats-chips { margin: 0 0 12px; gap: 6px; }
.plaats-chips .fchip { cursor: pointer; padding: 5px 11px; font-size: 12px; text-decoration: none; }
.fchip-aantal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
  color: var(--brand-accent);
  font-size: 10.5px;
  font-weight: 800;
}
.fchip.actief .fchip-aantal { background: var(--brand-accent); color: #fff; }

/* aanvraagdatum + leeftijd op planbord-kaarten */
.vk-datum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-muted);
}
.vk-leeftijd {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 10.5px;
  background: #EEF1F6;
  color: var(--text-2);
}
.vk-leeftijd.middel { background: #FEF3C7; color: #92400E; }
.vk-leeftijd.oud { background: #FEE2E2; color: #B91C1C; }

/* rit compleet — knop onder de laatste afspraak in de kolom */
.blok-mail {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 10px;
  opacity: .85;
}
.rit-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}
.btn-rit {
  border: 1.5px dashed color-mix(in srgb, var(--brand-accent) 40%, white);
  background: #fff;
  color: var(--brand-accent);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 99px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.btn-rit:hover { background: var(--brand-accent); border-style: solid; color: #fff; }
.rit-klaar {
  font-size: 11px;
  font-weight: 700;
  color: #15803D;
  background: #DCFCE7;
  padding: 5px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

/* overlay + modal */
.rc-overlay[hidden] { display: none; }
.rc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 45, .45);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rc-modal {
  background: #fff;
  border-radius: 16px;
  width: 560px;
  max-width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(10, 15, 40, .35);
  animation: rc-in .18s ease-out;
}
@keyframes rc-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.rc-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.rc-kop h3 { margin: 0; font-size: 16px; }
.rc-sluit {
  border: 0; background: none; font-size: 22px; line-height: 1;
  color: var(--text-muted); cursor: pointer; padding: 2px 6px; border-radius: 8px;
}
.rc-sluit:hover { background: #F1F2F6; color: var(--text); }
.rc-body { padding: 16px 20px 20px; overflow-y: auto; }
.rc-vraag { margin: 0 0 12px; font-size: 13.5px; color: var(--text-2); }
.rc-lijst { display: flex; flex-direction: column; gap: 6px; }
.rc-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rc-rij:hover { border-color: color-mix(in srgb, var(--brand-accent) 40%, white); }
.rc-rij input { accent-color: var(--brand-accent); width: 16px; height: 16px; flex-shrink: 0; }
.rc-rij:has(input:not(:checked)) { opacity: .5; }
.rc-rij.al-bevestigd, .rc-rij.verzonden { cursor: default; background: #FAFBFD; }
.rc-info { display: flex; flex-direction: column; font-size: 13px; color: var(--text); min-width: 0; }
.rc-info b { font-variant-numeric: tabular-nums; margin-right: 4px; }
.rc-info small { color: var(--text-muted); font-size: 11.5px; }
.rc-check { font-size: 14px; flex-shrink: 0; width: 16px; text-align: center; color: var(--text-muted); }
.rc-check.groen { color: #15803D; font-weight: 800; }
.rc-status { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.rc-status.groen { color: #15803D; }
.rc-voet {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.rc-voet .btn-primary { width: auto; padding: 10px 18px; }
.rc-voet .btn-primary:disabled { opacity: .55; cursor: default; }
.rc-gelukt {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ECFDF3;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.rc-vink {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: #16A34A; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
.rc-gelukt b { font-size: 13.5px; }
.rc-gelukt small { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }

.mail-voorbeeld { margin-top: 14px; font-size: 12.5px; }
.mail-voorbeeld summary { cursor: pointer; font-weight: 700; color: var(--brand-accent); }
.mail-mock {
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.mm-regel { font-size: 12px; color: var(--text-2); padding: 2px 0; }
.mm-regel span { display: inline-block; width: 84px; color: var(--text-muted); font-weight: 700; font-size: 11px; }
.mm-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.55; color: var(--text); }

/* planbord: linkerkolom sticky met eigen scroll, filters bovenin */
.planbord { align-items: stretch; }
.plan-zij { min-width: 0; }
.plan-zij-card {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 110px);
}
.plan-zij-card .card-head { flex-shrink: 0; }
.plan-filters {
  flex-shrink: 0;
  padding: 0 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.zoek-wrp {
  position: relative;
  display: flex;
  align-items: center;
}
.zoek-icoon {
  position: absolute;
  left: 10px;
  font-size: 12px;
  opacity: .55;
  pointer-events: none;
}
.zoek-wrp input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 30px 8px 30px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  background: #FAFAFC;
  transition: border-color .15s, background .15s;
}
.zoek-wrp input:focus {
  outline: none;
  border-color: var(--brand-accent);
  background: #fff;
}
.zoek-wis {
  position: absolute;
  right: 6px;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.zoek-wis:hover { background: #EEF0F5; color: var(--text); }
.pf-rij { display: flex; gap: 8px; }
.pf-select {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 7px 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  cursor: pointer;
}
.pf-select:focus { outline: none; border-color: var(--brand-accent); }
.verzoek-lijst {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #C9CEDB transparent;
}
.verzoek-lijst::-webkit-scrollbar { width: 8px; }
.verzoek-lijst::-webkit-scrollbar-thumb { background: #C9CEDB; border-radius: 99px; }
.verzoek-lijst::-webkit-scrollbar-track { background: transparent; }

/* track & trace van de bevestigingsmail */
.mail-track { padding: 14px 20px 18px; }
.mt-adres { font-size: 12.5px; color: var(--text-2); margin-bottom: 14px; }
.mt-stappen { display: flex; align-items: flex-start; }
.mt-stap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 86px;
}
.mt-stap div b { display: block; font-size: 12px; color: var(--text-muted); }
.mt-stap div small { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.mt-stap.klaar div b { color: var(--text); }
.mt-stap.klaar div small { color: #15803D; font-weight: 700; }
.mt-stap.wacht div small { font-style: italic; }
.mt-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: #EEF0F5; color: var(--text-muted);
  border: 2px solid var(--border);
}
.mt-stap.klaar .mt-dot { background: #16A34A; border-color: #16A34A; color: #fff; }
.mt-lijn {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-top: 12px;
  min-width: 24px;
}
.mt-lijn.klaar { background: #16A34A; }
a.rc-rij { text-decoration: none; color: inherit; }
a.rc-rij.verzonden:hover { border-color: color-mix(in srgb, var(--brand-accent) 45%, white); background: #F4F6FB; }

/* ── logboek ── */
.log-lijst { display: flex; flex-direction: column; }
.log-rij {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.log-rij:first-child { border-top: 0; }
.log-avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: var(--brand-accent);
}
.log-avatar.rol-monteur { background: #0F766E; }
.log-avatar.rol-systeem { background: #64748B; }
.log-avatar.rol-opdrachtgever { background: #6D28D9; }
.log-inhoud { min-width: 0; flex: 1; }
.log-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.log-rol {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--brand-accent) 10%, white); color: var(--brand-accent);
}
.log-rol.rol-monteur { background: #CCFBF1; color: #0F766E; }
.log-rol.rol-systeem { background: #E2E8F0; color: #475569; }
.log-rol.rol-opdrachtgever { background: #EDE9FE; color: #6D28D9; }
.log-actie { font-weight: 700; color: var(--text-2); font-size: 12.5px; }
.log-details { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.log-link { color: var(--brand-accent); font-weight: 700; text-decoration: none; }
.log-tijd { flex-shrink: 0; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: 2px; }

.vl-soort {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 7px;
  border-radius: 99px;
}
.vl-soort-systeem { background: #E2E8F0; color: #475569; }
.vl-soort-tel { background: #DBEAFE; color: #1D4ED8; }
.vl-soort-mail { background: #F3E8FF; color: #7E22CE; }
.vl-soort-overig { background: #FEF3C7; color: #B45309; }
#log { scroll-margin-top: 18px; }
.vl-form {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vl-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vl-fout {
  margin: 0;
  font-size: 13px;
  color: #B91C1C;
}

/* ── interne notities ── */
.notitie-lijst { padding: 14px 20px 18px; }
.notitie {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 8px;
}
.notitie-kop { font-size: 11.5px; color: var(--text-muted); margin-bottom: 3px; }
.notitie-tekst { font-size: 13px; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.notitie-form { display: flex; gap: 8px; margin-top: 10px; }
.notitie-form input {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; font-family: inherit;
}
.notitie-form input:focus { outline: none; border-color: var(--brand-accent); }
.notitie-form textarea {
  flex: 1; min-width: 0; min-height: 72px; resize: vertical;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; font-family: inherit; line-height: 1.45;
}
.notitie-form textarea:focus { outline: none; border-color: var(--brand-accent); }
.notitie-form-verzoek { flex-direction: column; align-items: stretch; }
.notitie-form-verzoek .btn-primary { align-self: flex-end; }
.notitie-form .knop { padding: 9px 16px; }

/* ── handtekening (monteurs-app) ── */
.wb-schoon { display: flex; align-items: center; gap: 8px; }
.teken-wrp {
  position: relative;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.teken-wrp canvas { display: block; width: 100%; height: 150px; touch-action: none; cursor: crosshair; }
.teken-wis {
  position: absolute; top: 8px; right: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--text-2);
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; cursor: pointer;
}
.teken-hint {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; font-size: 13px; color: var(--text-muted); pointer-events: none;
}

/* ── klantrapport ── */
.rapport-body { background: #E8EAF1; padding: 24px 16px 60px; }
.rapport-werkbalk {
  max-width: 760px; margin: 0 auto 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.rapport-werkbalk-rechts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rapport-werkbalk-rechts .btn-primary,
.rapport-werkbalk-rechts .btn-ghost { width: auto; }
.rapport-flash {
  max-width: 760px; margin: 0 auto 14px;
  background: #ECFDF3; border: 1px solid #BBF7D0; color: #166534;
  border-radius: 12px; padding: 12px 16px; font-size: 13px; font-weight: 600;
}
.rapport-flash span { font-weight: 400; opacity: .75; font-size: 12px; }
.rapport-vel {
  max-width: 760px; margin: 0 auto;
  background: #fff; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(15, 20, 45, .12);
  padding: 40px 46px;
}
.rapport-kop { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 3px solid #1F2A60; padding-bottom: 20px; }
.rapport-logo { height: 46px; }
.rapport-titel h1 { margin: 0; font-family: Manrope, Inter, sans-serif; font-size: 24px; color: #1F2A60; text-align: right; }
.rapport-titel p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); text-align: right; }
.rapport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px 0 6px; }
.rapport-vel h3 {
  margin: 0 0 6px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px; color: #1F2A60;
}
.rapport-vel p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text); }
.rapport-blok { padding: 16px 0; border-top: 1px solid var(--border); }
.rapport-status {
  margin-top: 12px; display: inline-block;
  font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 99px;
}
.rapport-status.ok { background: #DCFCE7; color: #15803D; }
.rapport-status.vervolg { background: #FEF3C7; color: #92400E; }
.rapport-fotos-kop { margin-top: 16px !important; }
.rapport-fotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
  align-items: start;
}
.rapport-fotos figure { margin: 0; }
.rapport-fotos-kader {
  overflow: hidden;
  border-radius: 10px;
  background-color: #F5F6F9;
  border: 1px solid var(--border);
  line-height: 0;
}
.rapport-fotos-maat,
.rapport-fotos-beeld {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  image-orientation: from-image;
}
.rapport-fotos-maat {
  visibility: hidden;
  pointer-events: none;
}
.rapport-fotos figcaption { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.rapport-verklaring p { font-size: 13.5px; font-weight: 600; }
.rapport-verklaring p.ok { color: #15803D; }
.rapport-onderteken {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 20px 0; border-top: 1px solid var(--border);
}
.rapport-handtekening {
  height: 84px; width: 100%; object-fit: contain;
  border-bottom: 2px solid var(--text); margin-bottom: 6px;
  display: flex; align-items: flex-end; justify-content: center;
}
.rapport-handtekening.leeg { color: var(--text-muted); font-size: 12px; font-style: italic; align-items: center; }
.rapport-handtekening.naam { font-family: 'Caveat', 'Snell Roundhand', 'Brush Script MT', cursive; font-size: 30px; font-weight: 600; letter-spacing: .5px; color: #1F2A60; align-items: center; }
.rapport-onderteken p { font-size: 12px; color: var(--text-muted); }
.rapport-voet {
  border-top: 3px solid #1F2A60; margin-top: 8px; padding-top: 14px;
  font-size: 11px; color: var(--text-muted); text-align: center;
}
@media print {
  .rapport-werkbalk, .rapport-flash { display: none; }
  .rapport-body { background: #fff; padding: 0; }
  .rapport-vel { box-shadow: none; border-radius: 0; padding: 20px 8px; max-width: none; }
  .rapport-fotos { grid-template-columns: 1fr 1fr; }
  .rapport-fotos figure { break-inside: avoid; }
  .rapport-vel:not(.rapport-afsluiting) {
    break-after: page;
    page-break-after: always;
  }
  .rapport-afsluiting {
    break-before: page;
    page-break-before: always;
    margin-top: 0;
  }
  .rapport-afsluiting > .rapport-blok:first-child {
    border-top: none;
    padding-top: 0;
  }
  .rapport-fotos-beeld,
  .rapport-fotos-maat {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
.rapport-body.rapport-print { background: #fff; padding: 0; }
.rapport-body.rapport-print .rapport-vel { box-shadow: none; border-radius: 0; }
.rapport-body:not(.rapport-print) .rapport-vel:has(+ .rapport-afsluiting) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 8px;
}
.rapport-body:not(.rapport-print) .rapport-afsluiting {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 8px;
}

/* ── klantpagina: volg uw afspraak ── */
.ka-body {
  background: linear-gradient(160deg, #0B102B, #1A2352 55%, #31408F);
  min-height: 100vh;
  padding: 20px 14px 40px;
}
.ka-scherm { max-width: 460px; margin: 0 auto; }
.ka-kop { text-align: center; padding: 10px 0 18px; }
.ka-logo { height: 40px; filter: brightness(0) invert(1); }
.ka-kaart {
  background: #fff;
  border-radius: 18px;
  padding: 22px 22px 20px;
  margin-bottom: 14px;
  box-shadow: 0 12px 40px rgba(5, 10, 35, .35);
}
.ka-groet { font-size: 13px; color: var(--text-muted); }
.ka-titel { margin: 4px 0 16px; font-family: Manrope, Inter, sans-serif; font-size: 21px; color: #1F2A60; }
.ka-eta {
  background: #F4F6FB;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
}
.ka-eta-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--text-muted); }
.ka-eta-tijd { font-family: Manrope, Inter, sans-serif; font-size: 34px; font-weight: 800; color: #1F2A60; font-variant-numeric: tabular-nums; }
.ka-eta-uitleg { font-size: 12px; color: var(--text-2); margin-top: 6px; line-height: 1.5; }
.ka-stappen { display: flex; align-items: flex-start; margin-top: 18px; }
.ka-stap { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 64px; }
.ka-stap small { font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.ka-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: #EEF0F5;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
}
.ka-stap.klaar .ka-dot { background: #16A34A; border-color: #16A34A; }
.ka-stap.klaar small { color: #15803D; }
.ka-stap.actief .ka-dot { background: #1F2A60; border-color: #1F2A60; box-shadow: 0 0 0 4px rgba(31, 42, 96, .15); }
.ka-stap.actief small { color: #1F2A60; }
.ka-lijn { flex: 1; height: 2px; background: var(--border); margin-top: 11px; min-width: 12px; }
.ka-lijn.klaar { background: #16A34A; }
.ka-rij { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.ka-monteur-foto {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 15px;
}
.ka-label { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); }
.ka-sterk { font-size: 15px; font-weight: 700; color: var(--text); }
.ka-info { display: flex; flex-direction: column; gap: 9px; }
.ka-info > div { display: flex; flex-direction: column; }
.ka-info span:last-child { font-size: 13.5px; color: var(--text); }
.ka-knop {
  display: block; text-align: center;
  background: #fff; color: #1F2A60;
  font-weight: 800; font-size: 14px;
  border-radius: 14px; padding: 13px;
  text-decoration: none; margin-bottom: 14px;
  box-shadow: 0 12px 40px rgba(5, 10, 35, .35);
}
.ka-voet { text-align: center; font-size: 11px; color: rgba(255, 255, 255, .65); line-height: 1.7; }

/* ── mega-dashboard ── */
.kpi-grid.kpi-6 { grid-template-columns: repeat(6, 1fr); }
.kpi-grid.kpi-3 { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
@media (max-width: 1400px) { .kpi-grid.kpi-6 { grid-template-columns: repeat(3, 1fr); } }
.kpi-value small { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.kpi-balk { height: 5px; background: #EEF0F5; border-radius: 99px; margin: 7px 0 5px; overflow: hidden; }
.kpi-balk span { display: block; height: 100%; background: #16A34A; border-radius: 99px; }
.kpi-groen .kpi-value { color: #15803D; }
.kpi-oranje .kpi-value { color: #B45309; }
.kpi-paars .kpi-value { color: #7C3AED; }
.kpi-trend-op { color: #15803D !important; font-weight: 700; }
.kpi-breed { display: flex; flex-direction: column; }
.kpi-ring-kpi { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.kpi-ring {
  width: 84px; height: 84px; flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(#16A34A calc(var(--pct) * 1%), #EEF0F5 0);
  display: flex; align-items: center; justify-content: center;
}
.kpi-ring span {
  width: 62px; height: 62px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #15803D;
}
.kpi-drie { display: flex; gap: 22px; margin: 6px 0 4px; }
.kpi-drie b { display: block; font-family: Manrope, Inter, sans-serif; font-size: 24px; font-weight: 800; color: var(--text); }
.kpi-drie small { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.dash-grid.dash-60-40 { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1200px) { .dash-grid, .dash-grid.dash-60-40 { grid-template-columns: 1fr; } }
.dash-kaart { height: 420px; border-radius: 0 0 16px 16px; }

.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #16A34A; margin-right: 6px; vertical-align: 1px;
  animation: sys-hartslag 1.6s ease-in-out infinite;
}
.live-lijst { display: flex; flex-direction: column; }
.live-rij { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); }
.live-rij:first-child { border-top: 0; }
.live-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 12px;
}
.live-mid { min-width: 0; flex: 1; }
.live-naam { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.live-chip { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.chip-blauw { background: #DBEAFE; color: #1D4ED8; }
.chip-geel { background: #FEF3C7; color: #92400E; }
.chip-groen { background: #DCFCE7; color: #15803D; }
.chip-grijs { background: #EEF0F5; color: var(--text-muted); }
.live-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-link { color: inherit; text-decoration: none; }
.live-link:hover { color: var(--brand-accent); }
.live-voortgang { flex-shrink: 0; text-align: right; }
.live-voortgang b { font-size: 11.5px; color: var(--text-2); }
.lv-balk { width: 54px; height: 4px; background: #EEF0F5; border-radius: 99px; margin-top: 4px; overflow: hidden; }
.lv-balk span { display: block; height: 100%; border-radius: 99px; }

.mk-marker {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--mk); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; font-family: Inter, sans-serif;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 10px rgba(10, 15, 40, .35);
}
.mk-marker.puls { animation: mk-puls 1.8s ease-out infinite; }
@keyframes mk-puls {
  0% { box-shadow: 0 3px 10px rgba(10,15,40,.35), 0 0 0 0 color-mix(in srgb, var(--mk) 45%, transparent); }
  70% { box-shadow: 0 3px 10px rgba(10,15,40,.35), 0 0 0 14px transparent; }
  100% { box-shadow: 0 3px 10px rgba(10,15,40,.35), 0 0 0 0 transparent; }
}

.week-staaf { display: flex; gap: 14px; padding: 18px 20px 14px; height: 150px; align-items: flex-end; }
.ws-kolom { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.ws-kolom b { font-size: 12px; color: var(--text-2); }
.ws-balk { width: 100%; max-width: 44px; background: #C7CEE4; border-radius: 8px 8px 3px 3px; min-height: 8px; }
.ws-balk.vandaag { background: var(--brand-accent); }
.ws-kolom small { font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* ── mailtemplates ── */
.tpl-lijst { display: flex; flex-direction: column; }
.tpl-rij {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background .12s;
}
.tpl-rij:first-child { border-top: 0; }
.tpl-rij:hover { background: #F7F8FC; }
.tpl-icoon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px; background: #EEF1F8;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.tpl-mid { flex: 1; min-width: 0; }
.tpl-naam { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tpl-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--brand-accent) 10%, white); color: var(--brand-accent);
}
.tpl-badge.handmatig { background: #FEF3C7; color: #92400E; }
.tpl-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.tpl-onderwerp { font-size: 12px; color: var(--text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-meta { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-muted); }
.tpl-pijl { color: var(--brand-accent); font-weight: 700; font-size: 12px; margin-top: 3px; }

.tpl-editor { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1200px) { .tpl-editor { grid-template-columns: 1fr; } }
.tpl-form { padding: 6px 20px 20px; }
.tpl-input {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; font-family: inherit; color: var(--text);
}
.tpl-input:focus { outline: none; border-color: var(--brand-accent); }
.tpl-tekst {
  width: 100%; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 13px; font-family: inherit; line-height: 1.6;
  color: var(--text); resize: vertical;
}
.tpl-tekst:focus { outline: none; border-color: var(--brand-accent); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chip {
  border: 1.5px dashed color-mix(in srgb, var(--brand-accent) 40%, white);
  background: #F6F7FC; color: var(--brand-accent);
  font-size: 11.5px; font-weight: 700; font-family: 'SF Mono', Menlo, Consolas, monospace;
  padding: 4px 10px; border-radius: 99px; cursor: pointer;
  transition: all .12s;
}
.ph-chip:hover { background: var(--brand-accent); color: #fff; border-style: solid; }
.tpl-acties { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.tpl-weg { color: #B91C1C; border-color: #FECACA; }
.tpl-weg:hover { background: #FEF2F2; }

/* werkbon: monteur alleen-lezen (wijzigen via planning) */
.monteur-vast {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; background: #FAFBFD;
}
.monteur-vast-hint { font-size: 11.5px; color: var(--text-muted); margin: 6px 0 0; line-height: 1.5; }

/* monteurfoto voor de klant */
.ka-echte-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2.5px solid #E3E6EF; }
.ka-monteur-noot { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.rapport-monteur { display: flex; gap: 12px; align-items: flex-start; }
.rapport-monteur-foto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; }

/* afgeronde klussen: vervaagd + groen vinkje */
.agenda-blok.af {
  opacity: .5;
  filter: saturate(.65);
  cursor: default;
}
/* let op: opacity/filter maken een eigen stacking context, waardoor de
   hover-tooltip achter naastgelegen blokken verdwijnt — daarom bij hover
   volledig ondoorzichtig maken en het blok boven de rest tillen */
.agenda-blok.af:hover, .agenda-blok.af:focus {
  opacity: 1;
  filter: none;
  z-index: 250;
}
.blok-vink {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #16A34A;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.chip.af { opacity: .5; }
.chip.af:hover, .chip.af:focus, .chip.tip-aan { opacity: 1; position: relative; z-index: 250; }
.chip.tip-aan .tip { display: block; }
.chip-vink {
  flex-shrink: 0;
  margin-left: auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #16A34A;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* klantpagina: kaart + nettere datum */
.ka-datumregel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin: -8px 0 16px;
}
.ka-kaart-map { padding: 16px 16px 12px; }
.ka-map-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0 4px;
}
.ka-map-tel { font-size: 11.5px; font-weight: 700; color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 9%, white); padding: 3px 10px; border-radius: 99px; }
#kaMap { height: 230px; border-radius: 12px; overflow: hidden; background: #EEF0F5; }
.ka-map-noot { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-top: 9px; padding: 0 4px; }
.ka-stip {
  width: 24px; height: 24px; border-radius: 50%;
  background: #9AA3BC; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; font-family: Inter, sans-serif;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(10, 15, 40, .3);
}
.ka-stip.groen { background: #16A34A; }
.ka-stip.u { width: 30px; height: 30px; background: #1F2A60; font-size: 12px; }

/* klantpagina: breder op desktop, compact op mobiel */
@media (min-width: 880px) {
  .ka-scherm {
    max-width: 960px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 0 20px;
    align-items: start;
  }
  .ka-kop, .ka-knop, .ka-voet { grid-column: 1 / -1; }
  .ka-kaart-map {
    grid-column: 2;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    height: calc(100% - 14px);
  }
  #kaMap { flex: 1; min-height: 380px; height: auto; }
  .ka-titel { font-size: 24px; }
  .ka-eta-tijd { font-size: 40px; }
}

/* afgerond + facturatie-banner op de opdrachtpagina */
.af-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #ECFDF3;
  border: 1px solid #BBF7D0;
  border-radius: 14px;
  padding: 13px 18px;
  margin-bottom: 20px;
}
.af-links { display: flex; align-items: center; gap: 12px; }
.af-vink {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: #16A34A; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800;
}
.af-links b { font-size: 14px; color: #14532D; display: block; }
.af-links small { font-size: 12px; color: #3F6212; opacity: .85; }
.af-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fact-chip {
  font-size: 12.5px; font-weight: 800;
  padding: 6px 13px; border-radius: 99px;
}
.fact-chip.open { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.fact-chip.klaar { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; }
.af-knop { padding: 8px 14px; font-size: 12.5px; width: auto; }

/* dashboard: monteur-rit overlay */
.live-rij.klikbaar { cursor: pointer; transition: background .12s; }
.live-rij.klikbaar:hover { background: #F6F7FB; }
.rc-modal.rc-breed { width: 640px; }
.mr-lijst { display: flex; flex-direction: column; gap: 8px; }
.mr-rij {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, background .12s;
}
.mr-rij:hover { border-color: color-mix(in srgb, var(--brand-accent) 40%, white); background: #F7F8FC; }
.mr-tijd {
  flex-shrink: 0; width: 46px; text-align: right;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text);
}
.mr-tijd small { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.mr-stip { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.mr-mid { flex: 1; min-width: 0; }
.mr-klant { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mr-werk { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.mr-bon {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-2);
  background: #F7F8FB;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 6px 9px;
  line-height: 1.5;
}
.mr-bontekst { color: var(--text-muted); font-style: italic; }
.mr-pijl { flex-shrink: 0; color: var(--text-muted); font-size: 16px; margin-top: 2px; }

/* ── planbord per monteur met reistijden + kaart ── */
.monteur-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.m-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 6px 13px;
  transition: all .13s;
}
.m-tab:hover { border-color: var(--mk); }
.m-tab.actief {
  background: color-mix(in srgb, var(--mk) 10%, white);
  border-color: color-mix(in srgb, var(--mk) 55%, white);
  color: var(--text);
}
.plan-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 1250px) { .plan-detail { grid-template-columns: 1fr; } }
.plan-dagkolom { border-right: 1px solid var(--border); }
.pd-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 2px;
}
.pd-kop b { font-size: 14px; }
.pd-kop small { display: block; font-size: 11.5px; color: var(--text-muted); }
.agenda-grid.plan-één {
  grid-template-columns: 56px 1fr;
  grid-auto-rows: 50px;
}
.blok-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  font-size: 9.5px; font-weight: 800;
  margin-right: 6px;
  vertical-align: 1px;
}
.reis-chip {
  justify-self: end;
  align-self: start;
  transform: translateY(-58%);
  z-index: 40;
  pointer-events: none;
  background: #17181C;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  margin-right: 10px;
  box-shadow: 0 3px 10px rgba(10, 15, 40, .3);
  white-space: nowrap;
}
.cel.vrij.nogo {
  background: repeating-linear-gradient(-45deg, #FEF2F2, #FEF2F2 6px, #FDE4E4 6px, #FDE4E4 12px);
  cursor: not-allowed;
  outline: 1px dashed #FCA5A5;
  outline-offset: -2px;
}
.plan-kaart-wrp { display: flex; flex-direction: column; }
#planKaart { flex: 1; min-height: 430px; background: #EEF0F5; }
.pk-noot {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.55;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}

/* ── planbord: dag als lijst met reistijd-regels en tussenvoeg-zones ── */
.dag-lijst { padding: 10px 20px 20px; display: flex; flex-direction: column; }
.dl-vrij { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.dl-blok {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bk);
  color: #fff;
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: var(--shadow-sm);
}
.dl-blok.sleep { cursor: grab; }
.dl-blok.sleep:active { cursor: grabbing; }
.dl-blok.af { opacity: .55; filter: saturate(.7); }
.dl-blok.gekozen { outline: 3px solid #fff; outline-offset: -3px; box-shadow: 0 0 0 3px var(--brand-accent), var(--shadow); }
.dl-tijd { flex-shrink: 0; width: 46px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dl-tijd small { display: block; font-size: 10.5px; font-weight: 600; opacity: .75; }
.dl-nr { margin: 0; width: 20px; height: 20px; font-size: 10.5px; flex-shrink: 0; }
.dl-mid { flex: 1; min-width: 0; }
.dl-mid b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-mid small { font-size: 11.5px; opacity: .8; }
.dl-mail { flex-shrink: 0; font-size: 12px; opacity: .9; }
.tz {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  margin: 3px 0;
  border: 1.5px dashed transparent;
  border-radius: 10px;
  min-height: 32px;
  cursor: pointer;
  transition: all .14s;
}
.tz-plus {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px dashed #B9C0D4;
  color: #8B93AB;
  font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .14s;
}
.tz-reis {
  flex-shrink: 0;
  background: #17181C;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.tz-tekst { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz:hover, .tz.drop-hover {
  border-color: color-mix(in srgb, var(--brand-accent) 45%, white);
  background: color-mix(in srgb, var(--brand-accent) 6%, white);
}
.tz:hover .tz-plus, .tz.drop-hover .tz-plus { border-style: solid; border-color: var(--brand-accent); color: var(--brand-accent); }
body.kies-slot .tz { border-color: #C9CEDB; background: #FAFBFE; }
body.kies-slot .tz .tz-tekst { color: var(--brand-accent); font-weight: 700; }

/* volledige omschrijving op planbord-kaarten */
.vk-meer {
  border: 0;
  background: none;
  padding: 0;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-accent);
  cursor: pointer;
  font-family: inherit;
}
.vk-meer:hover { text-decoration: underline; }
.vk-omschrijving {
  margin-top: 7px;
  padding: 9px 11px;
  background: #F6F7FB;
  border-left: 3px solid color-mix(in srgb, var(--brand-accent) 40%, white);
  border-radius: 0 9px 9px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}

/* afspraak uit planning halen */
.dl-weg {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 12px; line-height: 1;
  cursor: pointer;
  transition: background .13s;
}
.dl-weg:hover { background: #DC2626; }

/* planbord: tijdlijn-grid met invoegvlakken */
.dl-blok.in-grid { padding: 6px 12px; border-radius: 10px; z-index: 5; }
.dl-blok.in-grid .dl-tijd { width: 42px; font-size: 12px; }
.dl-blok.in-grid .dl-mid b { font-size: 12.5px; }
.dl-blok.in-grid .dl-mid small { font-size: 11px; }
.tz-vlak {
  margin: 3px 2px;
  justify-content: center;
  border: 1.5px dashed #D4D9E6;
  background: #FBFCFE;
  min-height: 0;
  z-index: 4;
}
.tz-vlak:hover, .tz-vlak.drop-hover, body.kies-slot .tz-vlak {
  border-color: color-mix(in srgb, var(--brand-accent) 45%, white);
  background: color-mix(in srgb, var(--brand-accent) 6%, white);
}
.tz-dun {
  align-self: start;
  justify-content: center;
  height: 20px;
  min-height: 0;
  padding: 0 10px;
  margin: 0 2px;
  transform: translateY(-58%);
  z-index: 30;
  background: transparent;
  border: 0;
}
.tz-dun .tz-plus { background: #fff; box-shadow: 0 2px 8px rgba(10,15,40,.18); width: 18px; height: 18px; font-size: 12px; }
.tz-dun:hover .tz-plus, .tz-dun.drop-hover .tz-plus { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.tz-dun .tz-reis { box-shadow: 0 2px 8px rgba(10,15,40,.25); }

/* rapport: aangekomen/afgerond netjes in kolommen uitgelijnd */
.rapport-tijden {
  display: grid;
  grid-template-columns: 92px auto;
  gap: 2px 10px;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.6;
}
.rapport-tijden span { color: var(--text-muted); }
.rapport-tijden b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── klantkaart bij inkomende oproep (Voys) ── */
.voip-pop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 330px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(10, 15, 40, .35);
  border: 1px solid var(--border);
  z-index: 500;
  animation: voip-in .3s ease-out;
  overflow: hidden;
}
@keyframes voip-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.voip-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #12173A;
  color: #fff;
}
.voip-kop b { font-size: 13px; display: block; }
.voip-kop small { font-size: 10.5px; opacity: .7; }
.voip-bel {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: #16A34A;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  animation: voip-tril 1.1s ease-in-out infinite;
}
@keyframes voip-tril {
  0%, 100% { transform: rotate(0); box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
  10% { transform: rotate(-12deg); }
  20% { transform: rotate(10deg); }
  30% { transform: rotate(-8deg); }
  40% { transform: rotate(0); }
  70% { box-shadow: 0 0 0 12px rgba(22,163,74,0); }
}
.voip-dicht {
  margin-left: auto;
  border: 0; background: rgba(255,255,255,.12); color: #fff;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 11px; cursor: pointer;
}
.voip-dicht:hover { background: rgba(255,255,255,.28); }
.voip-body { padding: 13px 15px 15px; }
.voip-klant { font-size: 15px; font-weight: 800; color: var(--text); }
.voip-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.voip-info {
  margin-top: 9px;
  font-size: 12px;
  color: var(--text-2);
  background: #F6F7FB;
  border-radius: 9px;
  padding: 8px 10px;
}
.voip-acties { margin-top: 10px; }
.voip-knop { display: block; text-align: center; width: 100%; padding: 9px; font-size: 13px; }

/* ══════════════════════════════════════════════════════════════
   PORTAAL-INTAKE — keuze + wizard
   ══════════════════════════════════════════════════════════════ */

.wz-keuze {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 28px;
}

.wz-keuze-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 240px;
  padding: 28px 26px 24px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

a.wz-keuze-kaart:hover {
  transform: translateY(-3px);
  border-color: var(--brand-accent);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--brand-accent) 45%, transparent);
}

.wz-keuze-kaart::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-accent) 10%, transparent);
  pointer-events: none;
}

.wz-keuze-kaart.is-wacht {
  opacity: .72;
  background: #FAFAFB;
  cursor: default;
}

.wz-keuze-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
}

.wz-keuze-nr {
  font-family: Manrope, Inter, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.wz-keuze-kaart h2 {
  font-family: Manrope, Inter, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  margin-bottom: 8px;
}

.wz-keuze-kaart p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
  max-width: 34ch;
}

.wz-keuze-cta {
  margin-top: auto;
  padding-top: 22px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--brand-accent);
}

.wz-keuze-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
  background: #EEEFF3;
  border-radius: 99px;
  padding: 4px 10px;
}

.wz {
  min-height: calc(100vh - 64px);
  background:
    radial-gradient(900px 420px at 12% -10%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 70%),
    radial-gradient(700px 380px at 100% 0%, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent 65%),
    var(--bg);
}

.wz-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

.wz-intro { margin-bottom: 22px; }

.wz-kruimel {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.wz-kruimel a {
  color: var(--brand-accent);
  font-weight: 600;
}

.wz-intro h1 {
  font-family: Manrope, Inter, sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.7px;
  line-height: 1.15;
}

.wz-intro > p:last-child {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 15px;
}

.wz-stappen {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.wz-stappen li { min-width: 0; }

.wz-stap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.wz-stap.is-actief {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 14%, transparent);
}

.wz-stap.is-klaar:not(.is-actief) {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.wz-stap.is-wacht {
  cursor: default;
  background: #FAFAFB;
  box-shadow: none;
}

.wz-stap-nr {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-2);
  background: #EEEFF3;
}

.wz-stap.is-actief .wz-stap-nr {
  color: #fff;
  background: var(--brand-accent);
}

.wz-stap.is-klaar:not(.is-actief) .wz-stap-nr {
  color: #fff;
  background: #16A34A;
}

.wz-stap-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wz-stap-tekst b {
  font-size: 14px;
  font-weight: 800;
}

.wz-stap-tekst small {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wz-stap-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #15803D;
  background: #DCFCE7;
  border-radius: 99px;
  padding: 4px 8px;
}

.wz-stap.is-actief .wz-stap-badge {
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
}

.wz-stap-lijn { display: none; }

.wz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  align-items: start;
}
.wz-grid-breed { grid-column: 1 / -1; }
.wz-grid .form-group { margin-bottom: 0; }
.wz-grid textarea { min-height: 220px; }

.wz-kaart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 24px 60px -32px rgba(26, 26, 27, .35);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.wz-body {
  padding: 28px 28px 8px;
  animation: wz-in .28s ease;
  flex: 1;
}

.wz-body-kop { margin-bottom: 22px; }

.wz-body-kop h2 {
  font-family: Manrope, Inter, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.wz-body-kop p {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 13.5px;
}

.wz-body .form-group { margin-bottom: 16px; }

.wz-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: -2px 0 10px;
}

.wz-drop {
  border: 1.5px dashed var(--border-2);
  border-radius: 16px;
  background: #FAFAFB;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color .15s, background .15s;
}

.wz-drop.is-sleep,
.wz-drop:hover {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 6%, white);
}

.wz-drop-knop {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
}

.wz-drop-knop b { display: block; font-size: 14px; }
.wz-drop-knop small { color: var(--text-muted); font-size: 12.5px; }

.wz-drop-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
}

.wz-bijlagen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.wz-bijlage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #FAFAFB;
}

.wz-bijlage img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.wz-pdf {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
}

.wz-bijlage-naam {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wz-bijlage-weg {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--text-2);
  font-size: 11px;
}

.wz-keuze-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wz-zoek { position: relative; }
.wz-zoek-lijst {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}
.wz-zoek-optie {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.wz-zoek-optie.is-actief,
.wz-zoek-optie:hover { background: #F4F6FB; }
.wz-zoek-optie.is-gekozen { color: var(--brand-accent); }
.wz-zoek-leeg {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.wz-refnr-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.form-group label.wz-refnr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px;
  border: 1.5px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.form-group label.wz-refnr:hover {
  border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border-2));
}
.form-group label.wz-refnr.is-aan {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 7%, white);
}
.form-group label.wz-refnr input {
  -webkit-appearance: checkbox;
  appearance: auto;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--brand-accent);
}
.wz-refnr-rij .input-wrp {
  flex: 1;
  min-width: 140px;
}

.wz-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 9px 16px;
  border: 1.5px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.wz-pill.is-aan {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 10%, white);
  color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 12%, transparent);
}

.wz-pill.is-wacht {
  opacity: .55;
  cursor: default;
  background: #FAFAFB;
}

.wz-artikelen {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: #F7F7F9;
}

.wz-klachten {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wz-klacht {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.wz-klacht .wz-artikel-weg {
  margin-top: 28px;
}

.wz-artikel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px auto;
  gap: 10px;
  align-items: end;
}

.wz-artikel-weg {
  width: 36px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text-2);
}

.wz-artikel-plus {
  align-self: start;
  border: 0;
  background: transparent;
  color: var(--brand-accent);
  font-size: 13.5px;
  font-weight: 800;
  padding: 4px 2px;
}

.wz-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wz-rij-postcode {
  grid-template-columns: 140px minmax(0, 1fr);
}

.wz-adres-kop {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 6px 0 10px;
}
.wz-bag-status {
  margin: -6px 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.wz-bag-status.is-fout { color: #B91C1C; }

.wz-fout {
  margin: 0 28px 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FEF2F2;
  color: #B91C1C;
  font-size: 13.5px;
  font-weight: 600;
}

.wz-voet {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 28px 22px;
  border-top: 1px solid var(--border);
  background: #FAFAFB;
}

.wz-voet .btn-primary {
  min-width: 168px;
}

.wz-voet .btn-primary:disabled {
  opacity: .65;
  cursor: wait;
}

.wz-klaar {
  padding: 56px 32px 48px;
  text-align: center;
  animation: wz-in .35s ease;
}

.wz-klaar-ico {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: #fff;
  background: var(--green);
  box-shadow: 0 12px 28px -10px rgba(22, 163, 74, .55);
}

.wz-klaar h2 {
  font-family: Manrope, Inter, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.4px;
}

.wz-klaar p {
  max-width: 38ch;
  margin: 8px auto 24px;
  color: var(--text-2);
  font-size: 15px;
}

@keyframes wz-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .wz-keuze { grid-template-columns: 1fr; }
  .wz-stappen { grid-template-columns: 1fr; }
  .wz-stap-tekst small { display: none; }
  .wz-grid { grid-template-columns: 1fr; }
  .wz-rij,
  .wz-rij-postcode,
  .wz-artikel,
  .wz-klacht,
  .wz-bijlagen {
    grid-template-columns: 1fr;
  }
  .wz-intro h1 { font-size: 26px; }
  .wz-body { padding: 22px 18px 8px; }
  .wz-voet { padding: 16px 18px 18px; }
}

/* ══════════════════════════════════════════════════════════════
   PORTAAL-DASHBOARD
   ══════════════════════════════════════════════════════════════ */

.pd {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

.pd-hero {
  position: relative;
  overflow: hidden;
  margin: 20px 0 18px;
  padding: 28px 28px 22px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-grad-from) 0%, var(--brand-grad-mid) 48%, var(--brand-grad-to) 100%);
}

.pd-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}

.pd-hero-blob-a {
  width: 280px;
  height: 280px;
  right: -60px;
  top: -90px;
  background: radial-gradient(circle, rgba(var(--aurora-hot), .55), transparent 68%);
  animation: pd-drift 9s ease-in-out infinite;
}

.pd-hero-blob-b {
  width: 220px;
  height: 220px;
  left: 18%;
  bottom: -110px;
  background: radial-gradient(circle, rgba(var(--aurora-warm), .4), transparent 70%);
  animation: pd-drift 12s ease-in-out infinite reverse;
}

@keyframes pd-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-18px, 12px) scale(1.08); }
}

.pd-hero-in {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
}

.pd-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: 10px;
}

.pd-hero h1 {
  font-family: Manrope, Inter, sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.7px;
  line-height: 1.1;
}

.pd-hero-sub {
  margin-top: 8px;
  max-width: 46ch;
  font-size: 14.5px;
  opacity: .82;
}

.pd-hero-acties {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.pd-cta-dik {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  color: var(--brand-accent);
  box-shadow: 0 16px 36px -14px rgba(0,0,0,.5);
  flex-shrink: 0;
}
.pd-cta-dik:hover { transform: translateY(-2px); }
.pd-cta-dik b { display: block; font-size: 16px; font-weight: 800; }
.pd-cta-dik small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; opacity: .75; }
.pd-cta-plus {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 700;
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
}

.pd-zoek-wrp {
  position: relative;
  z-index: 1;
  margin-top: 22px;
}

.pd-zoek {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 4px 6px 4px 16px;
  backdrop-filter: blur(10px);
}

.pd-zoek > span {
  font-size: 18px;
  opacity: .8;
}

.pd-zoek input {
  flex: 1;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15px;
  padding: 12px 0;
  outline: none;
}

.pd-zoek input::placeholder { color: rgba(255,255,255,.62); }

.pd-zoek-wissen {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: #fff;
}

.pd-zoek-go {
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--brand-accent);
  font-size: 14px;
  font-weight: 800;
  padding: 10px 16px;
}

.pd-resultaten { margin-bottom: 16px; scroll-margin-top: 80px; }
.pd-zoek-blok { padding: 2px 0 8px; }
.pd-zoek-blok h3 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 20px 6px;
}
.pd-zoek-blok ul { list-style: none; }
.pd-zoek-blok li { border-top: 1px solid var(--border); }
.pd-zoek-rij {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 20px;
  color: inherit;
}
.pd-zoek-rij:hover { background: #FAFAFB; }
.pd-zoek-id {
  flex: 0 0 92px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pd-zoek-tekst {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--text-2);
}
.pd-zoek-blok .badge,
.pd-zoek-blok .pd-chip,
.pd-zoek-actie {
  flex: 0 0 auto;
  margin-left: auto;
}
.pd-zoek-actie {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand-accent);
}
.pd-artikel-toelichting {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

.pd-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.pd-kpis-2 {
  grid-template-columns: 1.15fr 1fr;
}

.pd-kpi-ftf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pd-ring {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(#16A34A calc(var(--pct) * 1%), #EEF0F5 0);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pd-in .7s ease both;
}

.pd-ring span {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #15803D;
}

.pd-kpi-waarde small {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0;
}

.pd-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
  animation: pd-in .5s ease both;
  transition: transform .18s ease, box-shadow .18s ease;
}

.pd-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px rgba(26,26,27,.35);
}

.pd-kpi-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}

.pd-kpi-waarde {
  font-family: Manrope, Inter, sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 6px 0 4px;
}

.pd-kpi-groen .pd-kpi-waarde { color: #15803D; }
.pd-kpi-oranje .pd-kpi-waarde { color: #B45309; }
.pd-kpi-paars .pd-kpi-waarde { color: #6D28D9; }

.pd-kpi-sub { font-size: 12px; color: var(--text-muted); }

.pd-kpi-balk {
  height: 5px;
  background: #EEF0F5;
  border-radius: 99px;
  margin: 8px 0 6px;
  overflow: hidden;
}

.pd-kpi-balk span {
  display: block;
  height: 100%;
  background: #7C3AED;
  border-radius: 99px;
  animation: pd-balk-fill .9s ease both;
}

@keyframes pd-balk-fill {
  from { width: 0 !important; }
}

.pd-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 16px;
  margin-bottom: 16px;
}

.pd-kaart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: pd-in .55s ease both;
}

.pd-kaart-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 18px 0;
}

.pd-kaart-kop h2 {
  font-family: Manrope, Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.pd-kaart-kop span { font-size: 12px; color: var(--text-muted); }

.pd-kaart-kop-in {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.pd-donut-rij {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px 8px;
}

.pd-donut { width: 132px; height: 132px; flex-shrink: 0; }
.pd-donut circle { transition: stroke-dasharray .8s ease; }
.pd-donut-getal { font-size: 18px; font-weight: 800; fill: var(--text); font-family: Manrope, Inter, sans-serif; }
.pd-donut-label { font-size: 7.5px; fill: var(--text-muted); }

.pd-legenda { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pd-legenda li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pd-legenda i { width: 9px; height: 9px; border-radius: 50%; }
.pd-legenda span { flex: 1; color: var(--text-2); }
.pd-legenda b { font-variant-numeric: tabular-nums; }

.pd-lijn {
  display: block;
  width: calc(100% - 36px);
  height: 84px;
  margin: 8px 18px 0;
  overflow: visible;
}

.pd-lijn polyline {
  stroke-linejoin: round;
  stroke-linecap: round;
  animation: pd-draw 1.1s ease both;
}

.pd-lijn-as {
  display: flex;
  justify-content: space-between;
  padding: 6px 18px 16px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.pd-week {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
  padding: 12px 18px 8px;
}

.pd-week-kol {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.pd-week-kol b { font-size: 12px; font-weight: 800; }
.pd-week-kol small { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.pd-week-balk {
  width: 100%;
  max-width: 42px;
  min-height: 8px;
  border-radius: 10px 10px 4px 4px;
  background: color-mix(in srgb, var(--brand-accent) 28%, #EEF0F5);
  transform-origin: bottom;
  animation: pd-groei .8s ease both;
}

.pd-week-balk.is-vandaag {
  background: var(--brand-accent);
  box-shadow: 0 8px 18px -8px var(--brand-accent);
}

.pd-vandaag {
  list-style: none;
  max-height: 340px;
  overflow: auto;
}

.pd-vandaag li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
}

.pd-tijd {
  flex-shrink: 0;
  width: 52px;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.pd-tijd.is-nu { color: var(--brand-accent); }
.pd-tijd.is-klaar { color: #15803D; }

.pd-vandaag-mid { min-width: 0; flex: 1; }
.pd-vandaag-mid b { display: block; font-size: 13px; }
.pd-vandaag-mid small {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-chip {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: #EEF0F5;
  color: var(--text-2);
}

.pd-chip-groen { background: #DCFCE7; color: #15803D; }
.pd-chip-nu {
  background: color-mix(in srgb, var(--brand-accent) 14%, white);
  color: var(--brand-accent);
  animation: pd-pulse 1.8s ease-in-out infinite;
}

.pd-lijst-kaart { margin-bottom: 16px; }
.pd-lijst-kaart .pd-kaart-kop { padding-bottom: 12px; }

.pd-filters { display: flex; gap: 6px; }
.pd-filter {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 99px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none;
}
.pd-filter.is-aan {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 10%, white);
  color: var(--brand-accent);
}

.pd-tabel-wrap { overflow-x: auto; }

/* Portaal → Artikelen: per order, met stand en bezoekdag (26-9-2026) */
.pa-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.pa-tegel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.pa-tegel:hover { box-shadow: var(--shadow-sm); }
.pa-tegel.is-aan { border-color: var(--brand-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 25%, white); }
.pa-tegel b { font-size: 24px; font-weight: 800; line-height: 1.1; }
.pa-tegel span { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.pa-tegel small { font-size: 11px; color: var(--text-muted); }
.pa-tegel.is-leveren b { color: #1D4ED8; }
.pa-tegel.is-binnen b { color: #15803D; }
.pa-tegel.is-klant b { color: #B45309; }
.pa-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pa-balk .pp-zoek { margin: 0; flex: 1 1 260px; }
.pd-filter em { font-style: normal; font-weight: 600; opacity: .7; margin-left: 3px; }
.pa-orders { list-style: none; margin: 0; padding: 0; }
.pa-order { border-top: 1px solid var(--border); }
.pa-order:first-child { border-top: 0; }
.pa-order.is-leveren { box-shadow: inset 4px 0 0 #2563EB; }
.pa-order-kop { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.4fr) minmax(150px, 1fr) auto; align-items: center; gap: 12px; padding: 12px 20px 8px; color: inherit; text-decoration: none; }
.pa-order-kop:hover { background: #FAFAFB; }
.pa-order-kop strong { display: block; font-size: 13.5px; }
.pa-order-kop small { display: block; font-size: 11.5px; color: var(--text-muted); }
.pa-order-plan strong { font-size: 13px; }
.pa-regels { list-style: none; margin: 0; padding: 0 20px 12px 20px; display: flex; flex-direction: column; gap: 4px; }
.pa-regel { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: #FAFAFB; font-size: 13px; }
.pa-regel.is-te-leveren { background: #EFF6FF; }
.pa-regel-aantal { flex-shrink: 0; min-width: 28px; font-weight: 800; color: var(--text-2); }
.pa-regel-naam { flex: 1; min-width: 0; }
.pa-regel .badge { flex-shrink: 0; }
@media (max-width: 760px) {
  .pa-tegels { grid-template-columns: 1fr; }
  .pa-order-kop { grid-template-columns: 1fr 1fr; }
  .pa-order-kop .badge { justify-self: start; }
}
/* Overgenomen uit het oude systeem: kenmerk in lijst en kop */
.vl-oud-systeem { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.vz-oud-systeem { font-weight: 700; }

.pd-rapporten { list-style: none; }
.pd-rapporten a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.pd-rapporten a:hover { background: #FAFAFB; }
.pd-rapport-nr {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-accent);
  width: 78px;
}
.pd-rapport-datum { font-size: 12px; color: var(--text-muted); }
.pd-rapport-pijl { font-size: 12px; font-weight: 800; color: var(--brand-accent); }

.pd-leeg {
  padding: 18px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.pd-kalender-kaart { margin-bottom: 16px; }
.pd-kalender {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}
.pd-kalender-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 16px 18px 20px;
}
.pd-kalender-kopje {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding-bottom: 4px;
}
.pd-kalender-leeg { min-height: 44px; }
.pd-kalender-dag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  padding: 6px 4px;
}
.pd-kalender-dag:hover { background: #F6F7FB; }
.pd-kalender-nr { font-size: 13.5px; font-weight: 700; }
.pd-kalender-count {
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--brand-accent) 14%, white);
  color: var(--brand-accent);
}
.pd-kalender-dag.heeft-orders .pd-kalender-nr { font-weight: 800; }
.pd-kalender-dag.is-vandaag {
  box-shadow: inset 0 0 0 1.5px var(--brand-accent);
}
.pd-kalender-dag.is-aan {
  background: var(--brand-accent);
  color: #fff;
}
.pd-kalender-dag.is-aan .pd-kalender-count {
  background: rgba(255,255,255,.2);
  color: #fff;
}
.pd-kalender-lijst {
  border-left: 1px solid var(--border);
  max-height: 420px;
  overflow: auto;
}
.pd-kalender-lijst h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 8px;
  font-family: Manrope, Inter, sans-serif;
  font-size: 15px;
  font-weight: 800;
}
.pd-kalender-lijst h3 small {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.pd-kalender-lijst ul { list-style: none; }
.pd-kalender-lijst li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}

@keyframes pd-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes pd-groei {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes pd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 35%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}
@keyframes pd-draw {
  from { stroke-dasharray: 400; stroke-dashoffset: 400; }
  to { stroke-dashoffset: 0; }
}

@media (max-width: 980px) {
  .pd-kpis, .pd-grid { grid-template-columns: 1fr 1fr; }
  .pd-kpis-2 { grid-template-columns: 1fr; }
  .pd-hero-in { flex-direction: column; align-items: flex-start; }
  .pd-hero-acties { align-items: flex-start; }
  .pd-cta-dik { width: 100%; min-width: 0; }
  .pd-kalender { grid-template-columns: 1fr; }
  .pd-kalender-lijst { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .pd { padding: 0 14px 48px; }
  .pd-hero { padding: 22px 18px 16px; border-radius: 20px; }
  .pd-hero h1 { font-size: 26px; }
  .pd-kpis, .pd-grid { grid-template-columns: 1fr; }
}

/* Portaal-sidebar: merkkleuren, gekleurd logo (niet inverteren), ankers onder de topbar */
.portaal-shell .sidebar-logo.portaal-logo {
  justify-content: center;
  padding: 18px 16px 16px;
}
.portaal-shell .sidebar-logo.portaal-logo img {
  filter: none;
  height: 36px;
  max-width: 168px;
  width: auto;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
}
.portaal-shell .nav-item.active {
  background: color-mix(in srgb, var(--sidebar-accent) 22%, transparent);
  border-left-color: var(--sidebar-accent);
}
.portaal-shell .nav-item-wacht {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.portaal-shell .nav-wacht {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.1);
  padding: 2px 7px;
  border-radius: 99px;
}
.portaal-shell .pd-kaart[id] {
  scroll-margin-top: 80px;
}

/* Zelfde vaste contentbreedte als de Furnit-backoffice: geen verspringende kolommen */
.portaal-shell .pd,
.portaal-shell .ag,
.portaal-shell .pm {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.portaal-shell .pd .page-head,
.portaal-shell .ag .page-head {
  padding-top: 0;
}
.portaal-shell .pd-hero { margin-top: 0; }
.portaal-shell .pm { padding-bottom: 24px; }
.portaal-shell .wz {
  min-height: 0;
  background: transparent;
}
.portaal-shell .wz-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.pd .page-head { padding-top: 24px; }

a.pd-kpi { color: inherit; display: block; }

.pd-kaart-kop a {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-accent);
  white-space: nowrap;
}
.pd-kaart-kop a:hover { text-decoration: underline; }

.pd-zoek-blok h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pd-zoek-blok h3 a {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-accent);
}

.pp-zoek {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 4px 10px 4px 14px;
  margin: 0 0 16px;
}
.pp-zoek > span { font-size: 18px; color: var(--text-muted); }
.pp-zoek input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  padding: 10px 0;
  outline: none;
}
.pp-zoek-wissen {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  padding: 6px 8px;
}

/* Portaal-agenda: maandkalender + weekweergave */
.ag {
  max-width: 1360px;
  margin: 0 auto;
  padding: 8px 24px 72px;
}
.ag .page-head { padding-top: 16px; }
.ag-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ag-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ag-pijl {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 12px;
}
.ag-nav-titel {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
.ag-nav-titel strong {
  font-family: Manrope, Inter, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  text-transform: capitalize;
}
.ag-nav-titel span { font-size: 13px; color: var(--text-muted); }

.ag-kaart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ag-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.ag-kopje {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 12px 8px 10px;
  background: #FAFAFB;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.ag-kopje:nth-child(7) { border-right: 0; }
.ag-cel {
  min-height: 128px;
  padding: 8px 8px 10px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: #fff;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  transition: background .12s;
}
.ag-cel:nth-child(7n + 1) { border-right: 1px solid var(--border); }
.ag-cel:nth-child(7n) { border-right: 0; }
.ag-cel:hover { background: #F7F8FC; }
.ag-cel.is-buiten { background: #FBFBFC; color: var(--text-muted); }
.ag-cel.is-vandaag { background: color-mix(in srgb, var(--brand-accent) 6%, white); }
.ag-cel.is-aan {
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
  box-shadow: inset 0 0 0 2px var(--brand-accent);
}
.ag-cel-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ag-cel-nr {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.ag-cel.is-vandaag .ag-cel-nr {
  background: var(--brand-accent);
  color: #fff;
}
.ag-cel-vandaag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-accent);
}
.ag-cel-lijst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-stuk {
  display: block;
  font-size: 11.5px;
  line-height: 1.25;
  padding: 3px 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-stuk b { font-variant-numeric: tabular-nums; margin-right: 2px; }
.ag-stuk.is-klaar {
  background: #ECFDF3;
  color: #166534;
}
.ag-meer {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding-left: 4px;
}

.ag-detail {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ag-detail header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.ag-detail h2 {
  font-family: Manrope, Inter, sans-serif;
  font-size: 18px;
  font-weight: 800;
  text-transform: capitalize;
}
.ag-detail header p { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.ag-detail-lijst { padding: 6px 0; }
.ag-order {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.ag-order:first-child { border-top: 0; }
.ag-order-tijd {
  flex: 0 0 92px;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ag-order-tijd small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.ag-order-mid { flex: 1; min-width: 0; }
.ag-order-mid b { display: block; font-size: 14px; }
.ag-order-mid small { color: var(--text-2); font-size: 12.5px; }
.ag-order.is-compact {
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 0 10px 8px;
  background: #fff;
}
.ag-order.is-compact .ag-order-tijd { flex: 0 0 auto; }
.ag-order.is-klaar .ag-order-tijd { color: #15803D; }

.ag-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.ag-week-dag {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  min-height: 220px;
}
.ag-week-dag.is-vandaag {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 12%, transparent);
}
.ag-week-kop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.ag-week-kop strong { font-size: 14px; font-weight: 800; }
.ag-week-dag.is-vandaag .ag-week-kop strong { color: var(--brand-accent); }
.ag-week-kop span { font-size: 11.5px; color: var(--text-muted); }
.ag-week-kop b {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}
a.ag-week-kop:hover { background: #F7F8FC; }
a.ag-week-kop::after {
  content: "→";
  color: var(--brand-accent);
  font-weight: 800;
}
.ag-week-lijst { padding: 10px 0 6px; min-height: 80px; }
.ag-week-lijst .pd-leeg { padding: 16px 14px; }

.ag-terug {
  display: inline-flex;
  margin: 8px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-accent);
}
.ag-terug:hover { text-decoration: underline; }
.ag-dag-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ag-dag-kpis article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.ag-dag-kpis span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ag-dag-kpis b {
  display: block;
  margin-top: 4px;
  font-family: Manrope, Inter, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.4px;
}
.ag-dag-board {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 16px;
  align-items: start;
}
.ag-schema, .ag-dag-kaarten {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ag-schema header, .ag-dag-kaarten header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.ag-schema h2, .ag-dag-kaarten h2 {
  font-family: Manrope, Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
}
.ag-schema header span, .ag-dag-kaarten header span {
  font-size: 12px;
  color: var(--text-muted);
}
.ag-schema ol { list-style: none; }
.ag-slot {
  display: grid;
  grid-template-columns: 64px 1fr;
  min-height: 56px;
  border-top: 1px solid var(--border);
}
.ag-slot:first-child { border-top: 0; }
.ag-slot-uur {
  padding: 10px 8px 10px 14px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.ag-slot-baan { padding: 8px 12px 8px 0; }
.ag-slot-leeg {
  display: block;
  height: 100%;
  min-height: 28px;
  border-radius: 10px;
  background: repeating-linear-gradient(-45deg, #F6F7FB, #F6F7FB 6px, #EEF0F5 6px, #EEF0F5 12px);
}
.ag-blok {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
  border-left: 3px solid var(--brand-accent);
  margin-bottom: 6px;
}
.ag-blok:last-child { margin-bottom: 0; }
.ag-blok strong { font-size: 12.5px; }
.ag-blok span { font-size: 13.5px; font-weight: 700; }
.ag-blok small { font-size: 12px; color: var(--text-2); }
.ag-blok.is-klaar {
  background: #ECFDF3;
  border-left-color: #16A34A;
}
.ag-blok.is-nu {
  background: #FFF7ED;
  border-left-color: #EA580C;
}
.ag-dag-kaarten ul { list-style: none; padding: 8px; }
.ag-kaartje {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 8px;
  background: #fff;
}
.ag-kaartje.is-klaar { background: #F8FDF9; }
.ag-kaartje-tijd {
  text-align: center;
  padding-top: 4px;
  border-right: 1px solid var(--border);
  padding-right: 12px;
}
.ag-kaartje-tijd b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ag-kaartje-tijd span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ag-kaartje-tijd small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-accent);
}
.ag-kaartje-body h3 { font-size: 16px; font-weight: 800; }
.ag-kaartje-body > p { color: var(--text-2); margin: 2px 0 10px; }
.ag-kaartje-body dl {
  display: grid;
  gap: 4px 16px;
  margin-bottom: 10px;
}
.ag-kaartje-body dl div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; font-size: 13px; }
.ag-kaartje-body dt { color: var(--text-muted); font-weight: 600; }
.ag-kaartje-om {
  background: #F7F8FC;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 10px;
}
.ag-dag-leeg { padding: 28px 18px; color: var(--text-muted); }

@media (max-width: 1100px) {
  .ag-cel { min-height: 96px; }
  .ag-stuk { font-size: 11px; }
  .ag-week { grid-template-columns: 1fr 1fr; }
  .ag-dag-board { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ag { padding: 8px 14px 48px; }
  .ag-nav-titel strong { font-size: 18px; }
  .ag-cel { min-height: 72px; padding: 6px; }
  .ag-cel-lijst { display: none; }
  .ag-week { grid-template-columns: 1fr; }
  .ag-dag-kpis { grid-template-columns: 1fr; }
  .ag-kaartje-tijd { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 10px; text-align: left; }
}

/* Portaal: overzicht van een melding/bon — zelfde taal als wizard + page-head */
.pm-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pm-kop h1 .badge { vertical-align: middle; margin-left: 6px; }
.pm .wz-stappen { margin-top: 0; }
.pm .wz-stap { cursor: default; }
.pm .wz-kaart { margin-bottom: 8px; }
.pm > .card { margin-top: 16px; }
.pm-tekst {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  margin-bottom: 16px;
}
.pm-klachten {
  margin: 0 0 16px;
  padding: 0 0 0 1.2em;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
}
.pm .wz-kaart tbody td:first-child {
  width: 140px;
  color: var(--text-2);
}
.pm-fotos {
  padding: 4px 0 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.pm-pdfs { list-style: none; display: grid; gap: 8px; margin: 8px 0 12px; }
.pm-pdfs a {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #FAFAFB;
  font-weight: 600;
  color: var(--brand-accent);
}
.pm-planning { list-style: none; display: grid; gap: 10px; }
.pm-planning .ag-kaartje { margin-bottom: 0; }
.pm .wz-grid-breed { padding-top: 8px; }

.pd-open {
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-accent);
  white-space: nowrap;
}
.ag-blok { text-decoration: none; color: inherit; }
.ag-kaartje { display: flex; flex-direction: column; }
.ag-kaartje-in {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.ag-kaartje-in:hover { opacity: 0.92; }
.ag-blok:hover { filter: brightness(0.97); }
.ag-order-link {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 900px) {
  .ag-kaartje-in { grid-template-columns: 1fr; }
}

.btn-tabel {
  padding: 4px 10px;
  font-size: 12px;
  width: auto;
}
.card td .btn-primary.btn-tabel { padding: 4px 10px; font-size: 12px; }

.art-icoon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #B45309;
}
.art-icoon svg { width: 15px; height: 15px; display: block; }
.art-icoon-binnen { color: #15803D; }
.art-icoon-deels { color: #B45309; }
.art-icoon-vink {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16A34A;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  line-height: 9px;
  text-align: center;
}
.chip .art-icoon { margin-left: auto; }
.chip .art-icoon + .chip-vink { margin-left: 4px; }
.agenda-blok .art-icoon {
  position: absolute;
  right: 6px;
  bottom: 5px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.agenda-blok .art-icoon-binnen { color: #BBF7D0; }
.agenda-legenda .art-icoon { margin-right: 4px; }

.art-banner {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: #FFFBEB;
}
.art-banner-binnen {
  background: #F0FDF4;
  border-color: #86EFAC;
}
.art-banner-deels {
  background: #FFFBEB;
  border-color: #FCD34D;
}
.art-banner-wacht {
  background: #FFF7ED;
  border-color: #FDBA74;
}
.art-banner-kop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.art-banner-kop b { display: block; font-size: 14px; }
.art-banner-kop small { display: block; margin-top: 2px; color: var(--text-2); font-size: 12px; }
.art-banner-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F59E0B;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.art-banner-binnen .art-banner-ico { background: #16A34A; }
.art-banner-lijst {
  margin: 10px 0 0 38px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.art-banner-lijst li { margin: 3px 0; }
.art-banner-lijst em { font-style: normal; color: #15803D; font-weight: 700; }
.art-banner-lijst em.wacht { color: #B45309; }
.vk-art {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12.5px;
}
.vk-oog-cel { width: 44px; text-align: center; }
table.klikbaar tbody tr .vk-oog-cel { cursor: default; }
.vk-oog {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--text-2);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}
.vk-oog:hover,
.vk-oog:focus-visible {
  background: #F1F2F6;
  color: var(--brand-accent);
}
.vk-blik-modal {
  width: 640px;
  overflow: hidden;
  text-align: left; /* de modal hangt in een gecentreerde tabelcel */
  cursor: default;
}
.vk-blik-modal.vk-blik-wijd,
.rc-modal.rc-breed.vk-blik-wijd {
  width: min(1360px, calc(100vw - 24px));
}
/* Flex-kolom met max-height: alleen de body scrolt, kop en voet krimpen niet. */
.vk-blik-modal .vk-blik-kop,
.vk-blik-modal .vk-blik-voet { flex-shrink: 0; }
.vk-blik-modal .rc-body.vk-blik { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.vk-blik-kop { align-items: flex-start; }
.vk-blik-titel { min-width: 0; }
.vk-blik-titel h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 700;
}
.vk-blik-titel p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.vk-blik {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
}
.vk-blik-card { margin-bottom: 0; flex-shrink: 0; }
.vk-blik-card table td:first-child { width: 130px; color: var(--text-2); }
.vk-blik-adresregel { display: block; color: var(--text-2); }
.vk-blik-link { color: var(--brand-accent); font-weight: 700; }
.vk-blik-link:hover { text-decoration: underline; }
.vk-blik-klacht { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 16px; }
.vk-blik-klacht p {
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #F7F8FB;
  border-left: 3px solid var(--brand-accent);
  font-size: 13.5px;
  line-height: 1.55;
}
.vk-blik-klacht p b { display: block; margin-bottom: 2px; font-size: 12px; color: var(--text-2); }
.vk-blik-klacht p span { display: block; }
.vk-blik-leeg { padding: 14px 20px; margin: 0; }
.vk-blik-fotos { gap: 12px; padding: 14px 20px 16px; }
.vk-blik-fotos .foto-item img { aspect-ratio: 4 / 3; object-fit: cover; background: #F5F6F9; }
.vk-blik-denken {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 20px;
}
.vk-blik-denken strong { display: block; font-size: 14px; }
.vk-blik-denken span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }
.vk-blik-denken-spinner {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--brand-accent) 18%, #fff);
  border-top-color: var(--brand-accent);
  animation: vk-blik-draai .8s linear infinite;
}
@keyframes vk-blik-draai {
  to { transform: rotate(360deg); }
}
.vk-blik-voorkeur {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px 16px;
}
.vk-blik-voorkeur label {
  font-size: 13px;
  color: var(--text-2);
}
.vk-blik-voorkeur select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  background: #fff;
  color: var(--text);
  outline: none;
}
.vk-blik-voorkeur select:focus { border-color: var(--brand-accent); }
.vk-blik-voorkeur select:disabled { opacity: .65; }
.vk-blik-voorstel-blok {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vk-blik-voorstel-rij {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(240px, 0.85fr) minmax(300px, 1.15fr);
  gap: 14px;
  align-items: start;
}
.vk-blik-voorstel-rij .vk-blik-voorstellen li {
  flex-direction: column;
}
.vk-blik-voorstel-rij .vk-blik-voorstel-acties {
  align-self: flex-end;
}
.vk-blik-voorstel-uitleg {
  margin: 0;
  padding: 12px 20px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.vk-blik-voorstel-uitleg-buiten {
  padding: 0 4px;
}
.vk-blik-voorstellen {
  list-style: none;
  margin: 0;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vk-blik-voorstellen li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.vk-blik-voorstellen li:hover { background: #F7F8FC; }
.vk-blik-voorstellen li.gekozen {
  border-color: var(--brand-accent);
  background: #F7F8FC;
  box-shadow: 0 0 0 1px var(--brand-accent);
}
.vk-blik-voorstellen li > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vk-blik-voorstellen strong { font-size: 14px; }
.vk-blik-voorstellen span { font-size: 13px; color: var(--text); }
.vk-blik-voorstellen em {
  font-style: normal;
  font-size: 13px;
  color: var(--text-2);
}
.vk-blik-voorstellen small {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.vk-blik-voorstel-acties {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
}
.vk-blik-modal .vk-blik-voorstel-acties .btn-primary,
.vk-blik-modal .vk-blik-voorstel-acties .btn-ghost {
  width: auto;
  height: 32px;
  min-height: 0;
  padding: 0 12px;
  font-size: 12.5px;
}
.vk-blik-dag {
  list-style: none;
  margin: 0;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vk-blik-dag li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.vk-blik-dag li.nieuw {
  border-style: dashed;
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 7%, #fff);
}
.vk-blik-dag-nr {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: #1F2A60;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vk-blik-dag li.nieuw .vk-blik-dag-nr { background: #EA580C; }
.vk-blik-dag-tijd {
  flex-shrink: 0;
  width: 46px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.vk-blik-dag-mid { flex: 1; min-width: 0; }
.vk-blik-dag-mid b {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vk-blik-dag-mid small { display: block; margin-top: 1px; font-size: 12px; color: var(--text-2); }
.vk-blik-dag-badge {
  flex-shrink: 0;
  align-self: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 12%, #fff);
  padding: 3px 8px;
  border-radius: 99px;
}
.vk-blik-kaart-vlak {
  height: 380px;
  background: #EEF0F5;
}
.vk-blik-kaart-leeg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.vk-blik-kaart-leeg small {
  font-size: 12px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .vk-blik-voorstellen li { flex-direction: column; }
}
.vk-blik-voet {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: #fff;
}
/* Extra specificiteit: de modal hangt in een <td>, en .card td .btn-ghost zou anders winnen. */
.vk-blik-modal .vk-blik-voet .btn-primary,
.vk-blik-modal .vk-blik-voet .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 36px;
  min-height: 0;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--border-radius);
}
@media (max-width: 1180px) {
  .vk-blik-voorstel-rij { grid-template-columns: 1fr 1fr; }
  .vk-blik-kaart { grid-column: 1 / -1; }
  .vk-blik-kaart-vlak { height: 300px; }
  .vk-blik-modal.vk-blik-wijd,
  .rc-modal.rc-breed.vk-blik-wijd { width: min(1040px, calc(100vw - 24px)); }
}
@media (max-width: 860px) {
  .vk-blik-voorstel-rij { grid-template-columns: 1fr; }
  .vk-blik-kaart { grid-column: auto; }
  .vk-blik-modal.vk-blik-wijd,
  .rc-modal.rc-breed.vk-blik-wijd { width: min(640px, calc(100vw - 24px)); }
}
@media (max-width: 720px) {
  .vk-blik-modal { width: min(640px, calc(100vw - 24px)); }
}
.wb-adreskaart .art-banner { margin: 12px 0 4px; }

.print-werkbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.al-print-kop {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #1F2A60;
  margin-bottom: 12px;
}
.al-print-kop img { height: 36px; width: auto; }
.al-print-kop h1 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.al-print-kop p { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.al-print-hint { font-size: 13px; color: var(--text-2); margin-bottom: 18px; }
.al-print-leeg { font-size: 13px; color: var(--text-muted); }
.al-print-blok { margin-bottom: 22px; break-inside: avoid; }
.al-print-blok h2 { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.al-print-blok table { width: 100%; border-collapse: collapse; }
.al-print-blok th,
.al-print-blok td {
  border: 1px solid #D4D7E0;
  padding: 8px 8px;
  text-align: left;
  font-size: 12.5px;
  vertical-align: middle;
}
.al-print-blok th { background: #F4F6FB; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.al-print-vinkkop { width: 72px; text-align: center !important; }
.al-print-blok td:first-child,
.al-print-blok td:nth-child(2) { text-align: center; }
.al-print-vinkform { display: inline-flex; margin: 0; gap: 8px; }
.al-print-vinkform.met-labels { display: flex; width: 100%; }
.al-print-vak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border: 1.6px solid #1F2A60;
  border-radius: 8px;
  background: #fff;
  color: #1F2A60;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.al-print-vak.met-label {
  width: auto;
  min-width: 0;
  flex: 1;
  height: 52px;
  font-size: 16px;
  padding: 0 14px;
}
.al-print-vak-binnen.aan { background: #DCFCE7; border-color: #15803D; color: #15803D; }
.al-print-vak-niet.aan { background: #FEE2E2; border-color: #B91C1C; color: #B91C1C; }
.al-print-voet { margin-top: 20px; font-size: 11px; color: var(--text-muted); }
.al-print-kaarten { display: none; }
.al-print-kaart {
  border: 1px solid #D4D7E0;
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: #fff;
}
.al-print-kaart-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 16px;
}
.al-print-kaart-meta { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.al-print-kaart-acties { display: flex; gap: 10px; margin-top: 12px; }

body.afwerk-print .sidebar,
body.afwerk-print .topbar,
body.afwerk-print .voip-pop { display: none !important; }
body.afwerk-print .main-content { margin-left: 0; }
body.afwerk-print .page { max-width: 920px; padding-top: 20px; }

@media (max-width: 720px) {
  body.afwerk-print .page { padding: 12px 12px 28px; }
  .al-print-blok table { display: none; }
  .al-print-kaarten { display: flex; flex-direction: column; gap: 10px; }
  .al-print-kop { align-items: flex-start; }
  .print-werkbalk { position: sticky; top: 0; background: #fff; z-index: 5; padding: 8px 0 12px; }
}

@media print {
  body.afwerk-print .print-werkbalk { display: none !important; }
  body.afwerk-print .page { padding: 0; max-width: none; }
  body.afwerk-print .al-print-blok { break-inside: avoid; }
  .al-print-kaarten { display: none !important; }
  .al-print-blok table { display: table !important; }
  .al-print-vak { width: 22px; height: 22px; border-radius: 4px; font-size: 13px; }
  .al-print-hint { display: none; }
  @page { margin: 12mm; }
}

.al-mail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.al-mail-meta span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.al-mail-voor {
  margin: 0;
  padding: 16px 20px;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  background: #F8F9FC;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
}

.rit-lijst { display: flex; flex-direction: column; }
.rit-blok + .rit-blok { border-top: 1px solid var(--border); }
.rit-kop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.rit-kop:hover { background: #FAFBFE; }
.rit-blok.is-open .rit-kop { background: #F7F8FC; }
.rit-chevron {
  width: 1.1em;
  color: var(--text-muted);
  font-size: 14px;
  flex-shrink: 0;
}
.rit-og {
  min-width: 140px;
}
.rit-datum { font-weight: 700; }
.rit-meta { font-size: 13px; color: var(--text-2); margin-left: auto; }
.rit-kop .badge { flex-shrink: 0; }
.rit-body { border-top: 1px solid var(--border); overflow-x: auto; }
.rit-acties {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  justify-content: flex-end;
}

.inboek-zoek {
  padding: 4px 20px 16px;
}
.inboek-zoek .zoek-wrp {
  max-width: 420px;
}

.ib-modal { width: 440px; }
.ib-letop {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FFF8EB;
  border: 1px solid #F5D9A6;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.45;
}
.ib-letop b { display: block; color: var(--text); margin-bottom: 2px; }
.ib-letop-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F5D9A6;
  color: #8A5A00;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ib-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 4px;
}
.ib-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}
.ib-link span { color: var(--text-muted); font-size: 11.5px; }
.ib-link strong { color: var(--brand-accent); }
.ib-link:hover { border-color: color-mix(in srgb, var(--brand-accent) 40%, white); background: #FAFBFE; }



/* ══════════════════════════════════════════════════════════════
   INSTELLINGEN — statusstrip, tabbladen en kaarten in een grid
   ══════════════════════════════════════════════════════════════ */

.instel-status {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
.instel-status-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.instel-status-kop h2 { font-size: 15px; font-weight: 700; }
.instel-status-kop .hint { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.instel-status-kop .btn-ghost { white-space: nowrap; }
.instel-status-kop .btn-ghost:disabled { opacity: .55; cursor: progress; }

.instel-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  margin: 0 -1px -1px 0; /* buitenste lijnen van de tegels vallen onder de rand van de kaart */
}
@media (min-width: 1700px) { .instel-status-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .instel-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.status-tegel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "dot naam ms"
    "label label label"
    "detail detail detail";
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  padding: 12px 16px 13px;
  background: var(--surface);
  box-shadow: inset -1px -1px 0 var(--border);
  min-width: 0;
  transition: background .15s;
}
a.status-tegel:hover { background: #FAFBFE; }
.status-tegel .status-dot { grid-area: dot; }
.status-tegel .st-naam { grid-area: naam; font-size: 13px; font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-tegel .st-ms { grid-area: ms; font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-tegel .st-label { grid-area: label; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding-left: 17px; }
.status-tegel .st-detail {
  grid-area: detail;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
  padding-left: 17px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.status-tegel.online .st-label       { color: #15803D; }
.status-tegel.fout .st-label         { color: #B91C1C; }
.status-tegel.waarschuwing .st-label { color: #B45309; }
.status-tegel.uit .st-label,
.status-tegel.info .st-label         { color: var(--text-muted); }
.instel-status.laden .st-label       { color: var(--text-muted); }
.instel-status.laden .st-detail      { background: linear-gradient(90deg, #F0F1F4 0 60%, transparent 60%); border-radius: 6px; height: 12px; min-height: 0; margin: 4px 0 0 17px; padding: 0; }

/* statuspunt — gedeeld door tegels en badges */
.status-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #A1A1AA;
  box-shadow: 0 0 0 3px rgba(161, 161, 170, .18);
}
.status-dot.online       { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.status-dot.fout         { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.status-dot.waarschuwing { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }
.status-dot.uit          { background: #D4D4D8; box-shadow: 0 0 0 3px rgba(212, 212, 216, .3); }
.status-dot.info         { background: #60A5FA; box-shadow: 0 0 0 3px rgba(96, 165, 250, .2); }
.status-dot.bezig        { background: #A1A1AA; animation: status-bezig 1.1s ease-in-out infinite; }
@keyframes status-bezig {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .status-dot.bezig { animation: none; } }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 4px 11px 4px 9px;
  white-space: nowrap;
  color: var(--text-2);
  background: #F0F1F4;
}
.status-badge small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.status-badge.online       { color: #15803D; background: var(--green-bg); }
.status-badge.fout         { color: #B91C1C; background: #FEE2E2; }
.status-badge.waarschuwing { color: #B45309; background: var(--yellow-bg); }
.status-badge.info         { color: #1D4ED8; background: var(--blue-bg); }
.status-badge.uit,
.status-badge.bezig        { color: var(--text-2); background: #F0F1F4; }

/* tabbladen */
.instel-scherm {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.instel-tabs {
  display: flex;
  flex-wrap: wrap;
  background: #F4F5F8;
  border-bottom: 1px solid var(--border);
}
.instel-tab {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 11px 22px 10px;
  border-right: 1px solid var(--border);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text-2);
  transition: background .15s, color .15s;
  min-width: 0;
}
.instel-tab small { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.instel-tab:hover { color: var(--text); background: #ECEEF2; }
.instel-tab.actief,
.instel-tab.actief:hover {
  background: var(--surface);
  color: var(--brand-accent);
  border-bottom-color: var(--surface);
  box-shadow: inset 0 3px 0 var(--brand-accent);
}
.instel-tab.actief small { color: var(--text-2); }
.instel-tabblad { padding: 20px; background: #FAFAFB; }
.instel-tabblad .flash-ok,
.instel-tabblad .flash-fout { margin-bottom: 16px; }

/* kaarten in het tabblad */
.instel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.instel-grid .breed { grid-column: 1 / -1; }
.instel-kaart { margin-bottom: 0; display: flex; flex-direction: column; scroll-margin-top: 80px; }
.instel-kaart form { display: flex; flex-direction: column; flex: 1; }
.instel-kaart .card-head { padding: 13px 18px; }
.instel-kaart:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 22%, transparent); }
.instel-kop-rechts { display: flex; align-items: center; gap: 12px; }
.instel-body { padding: 16px 18px 4px; flex: 1; }
.instel-body .form-group { margin-bottom: 12px; }
.instel-body > .hint,
.instel-body .kpi-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.5; padding: 0; margin-bottom: 12px; }
.instel-body code {
  font-size: 11.5px;
  background: #F0F1F4;
  border-radius: 5px;
  padding: 1px 5px;
}
.instel-voet {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: #FCFCFD;
  margin-top: auto;
}
.instel-voet .btn-primary { width: auto; }
.instel-voet .btn-ghost:disabled { opacity: .45; cursor: not-allowed; }

.instel-snelstart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}
.instel-subkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.instel-subkop h3 { font-size: 13.5px; font-weight: 700; }
.instel-subkop .hint { font-size: 12px; color: var(--text-muted); }

/* euro-invoer met vast voorvoegsel */
.input-euro { display: flex; align-items: center; }
.input-prefix { padding-left: 14px; color: var(--text-muted); font-weight: 600; }
.input-euro input { padding-left: 8px; }

/* bedrijfsgegevens als definitie-lijst */
.instel-feiten { margin: 0; }
.instel-feiten > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.instel-feiten > div:last-child { border-bottom: none; }
.instel-feiten dt { color: var(--text-2); font-weight: 600; }
.instel-feiten dd { margin: 0; color: var(--text); }

/* communicatie als stappenlijst */
.instel-stappen { padding: 6px 0; }
.instel-stap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.instel-stap:last-child { border-bottom: none; }
.instel-stap > div { flex: 1; min-width: 0; }
.instel-stap strong { font-size: 13.5px; }
.instel-stap p { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.stap-nr {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 10%, white);
}

@media (max-width: 1100px) {
  .instel-grid { grid-template-columns: 1fr; }
  .instel-snelstart { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .instel-tabs { flex-direction: column; }
  .instel-tab { border-right: none; border-bottom: 1px solid var(--border); }
  .instel-status-kop { flex-direction: column; align-items: flex-start; }
  .instel-feiten > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ══════════════════════════════════════════════════════════════
   VERZOEK-DETAIL (vz-*) — kop met voortgang, klachtkader, feitenlijsten
   ══════════════════════════════════════════════════════════════ */

.vz-kop {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "links acties"
    "stappen stappen";
  gap: 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px 0;
  margin-bottom: 24px;
  overflow: hidden;
}
.vz-kop::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 55%, white));
}
.vz-kop-links { grid-area: links; min-width: 0; }
.vz-kop-acties { grid-area: acties; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; align-items: center; }
/* Kop van het verzoek (26-9-2026): terug-link als kruimelpad, hoofdactie vooraan, bewerken/ophalen als groep, annuleren rustig rood */
.vz-kop-terug { display: inline-block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.vz-kop-terug:hover { color: var(--brand-accent); }
.vz-acties-groep { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden; }
.vz-acties-groep .btn-ghost { border: 0; border-radius: 0; }
.vz-acties-groep .btn-ghost + .btn-ghost { border-left: 1px solid var(--border); }
.vz-acties-groep .btn-ghost:hover { background: #F5F6FA; }
.vz-kop-acties .vz-annuleer-knop { border-color: transparent; color: var(--text-muted); }
.vz-kop-acties .vz-annuleer-knop:hover { border-color: #FCA5A5; color: #B91C1C; background: #FEF2F2; }
.vz-contact-klant .vz-contact-knop { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 12px; line-height: 1.25; }
.vz-contact-klant .vz-contact-knop b { font-size: 13px; }
.vz-contact-klant .vz-contact-knop small { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.vz-kop-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.vz-id {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 9%, white);
  border-radius: 8px;
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}
.vz-tenant {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  background: #F0F1F4;
  border-radius: 99px;
  padding: 3px 11px;
  transition: background .15s, color .15s;
}
.vz-tenant:hover { background: var(--brand-accent); color: #fff; }
.vz-kop h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; }
.vz-adres { margin-top: 4px; font-size: 14.5px; color: var(--text-2); }
.vz-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.vz-meta strong { color: var(--text); font-weight: 700; }

.vz-stappen {
  grid-area: stappen;
  list-style: none;
  margin: 0 -22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border);
  background: #FAFAFB;
}
.vz-stap-link { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; }
.vz-stap-link:hover b { text-decoration: underline; text-underline-offset: 3px; }
.vz-stap {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  min-width: 0;
  position: relative;
}
.vz-stap + .vz-stap::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-left: 9px solid var(--border);
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}
.vz-stap i {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  background: #fff;
  border: 1.5px solid var(--border-2);
}
.vz-stap > div { min-width: 0; }
.vz-stap b { display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.vz-stap small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-stap.klaar i { background: var(--green); border-color: var(--green); color: #fff; }
.vz-stap.klaar b { color: var(--text); }
.vz-stap.klaar small { color: var(--text-2); }
.vz-stap.actief { background: #fff; }
.vz-stap.actief i { border-color: var(--brand-accent); color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 14%, transparent); }
.vz-stap.actief b { color: var(--brand-accent); }
.vz-stap.geannuleerd i { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
.vz-stap.geannuleerd b { color: #B91C1C; }
.vz-stap.geparkeerd { background: #fff; }
.vz-stap.geparkeerd i { background: #FFEDD5; border-color: #FDBA74; color: #9A3412; box-shadow: 0 0 0 3px #FFEDD5; }
.vz-stap.geparkeerd b { color: #9A3412; }
.vz-stappen-uit { display: flex; }
.vz-stappen-uit .vz-stap { flex: 1; }

.vz-kolommen { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

/* klacht */
.vz-klachten { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.vz-klacht {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-accent) 6%, white);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, white);
  border-left: 5px solid var(--brand-accent);
}
.vz-klacht p { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; }
.vz-klacht-nr {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--brand-accent);
  margin-top: 1px;
}
.vz-omschrijving { padding: 4px 2px 0; }
.vz-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.vz-omschrijving p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); white-space: pre-line; }
.vz-kenmerken { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.vz-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: #F0F1F4;
  border-radius: 99px;
  padding: 4px 11px;
}

/* feitenlijsten rechts */
.vz-feiten { margin: 0; }
.vz-feiten > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  align-items: baseline;
}
.vz-feiten > div:last-child { border-bottom: none; }
.vz-feiten dt { color: var(--text-2); font-weight: 600; }
.vz-feiten dd { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.vz-feiten dd a:not(.log-link) { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: 3px; }
.vz-feiten dd a:not(.log-link):hover { color: var(--brand-accent); text-decoration-color: var(--brand-accent); }
.vz-contact { display: flex; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); background: #FCFCFD; }
.vz-contact .btn-ghost { flex: 1; text-align: center; }

.vz-leeg { padding: 18px 20px 20px; text-align: center; }
.vz-leeg p { font-size: 13.5px; color: var(--text-2); margin-bottom: 12px; }
.vz-leeg .btn-primary { width: auto; }

@media (max-width: 1300px) {
  .vz-stappen { grid-template-columns: repeat(3, 1fr); }
  .vz-stap:nth-child(n + 4) { border-top: 1px solid var(--border); }
  .vz-stap:nth-child(4)::before { display: none; }
}
@media (max-width: 1000px) {
  .vz-kop { grid-template-columns: 1fr; grid-template-areas: "links" "acties" "stappen"; }
  .vz-kop-acties { justify-content: flex-start; }
  .vz-stappen { grid-template-columns: 1fr; }
  .vz-stap + .vz-stap::before { display: none; }
  .vz-stap + .vz-stap { border-top: 1px solid var(--border); }
  .vz-kolommen { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   MONTEURS-OVERZICHT (mo-*) — teamkaarten, dagcijfers, bezettingstijdlijn
   ══════════════════════════════════════════════════════════════ */

.mo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mo-head .btn-primary { width: auto; white-space: nowrap; }

.mo-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.mo-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px 18px 13px;
  min-width: 0;
}
.mo-stat-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mo-stat-waarde { font-size: 24px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; }
.mo-stat-waarde small { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.mo-stat-sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mo-balk { display: block; height: 6px; border-radius: 99px; background: #EEF0F3; overflow: hidden; margin-top: 6px; }
.mo-balk span { display: block; height: 100%; border-radius: 99px; background: var(--green); transition: width .3s; }

/* teamkaarten */
.mo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.mo-kaart {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mo-kaart:hover { border-color: var(--brand-accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.mo-kaart.inactief { opacity: .7; }
.mo-kaart.inactief:hover { opacity: 1; }
.mo-kaart-kop { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.mo-kaart-naam { flex: 1; min-width: 0; }
.mo-kaart-naam h2 { font-size: 16px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-kaart-naam p { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }

.mo-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  box-shadow: 0 0 0 2px #fff;
  background: #fff;
}
.mo-avatar.groot { width: 48px; height: 48px; font-size: 15px; }
.mo-initiaal { color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }

.mo-chip {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 99px;
  padding: 4px 10px;
  color: var(--text-2);
  background: #F0F1F4;
}
.mo-chip.aan   { color: #1D4ED8; background: var(--blue-bg); }
.mo-chip.bezig { color: #15803D; background: var(--green-bg); }
.mo-chip.vrij  { color: #B45309; background: var(--yellow-bg); }
.mo-chip.uit   { color: #B91C1C; background: #FEE2E2; }
.mo-chip.rust  { color: var(--text-muted); background: #F0F1F4; }

.mo-vandaag { margin: 0 18px; padding: 12px 14px 11px; border-radius: 12px; background: #F7F8FA; border: 1px solid var(--border); }
.mo-vandaag-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; color: var(--text-muted); }
.mo-vandaag-kop strong { font-size: 12.5px; color: var(--text); font-weight: 700; text-align: right; }
.mo-vandaag-voet { margin-top: 6px; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mo-feiten { margin: 12px 0 0; padding: 0 18px 4px; }
.mo-feiten > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.mo-feiten dt { color: var(--text-2); font-weight: 600; }
.mo-feiten dd { margin: 0; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mo-kaart-nieuw {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  min-height: 190px;
  border-style: dashed;
  border-width: 1.5px;
  color: var(--text-2);
  font-weight: 700;
  background: transparent;
  box-shadow: none;
}
.mo-kaart-nieuw small { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.mo-kaart-nieuw:hover { color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 4%, white); transform: none; }
.mo-plus {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 9%, white);
  margin-bottom: 4px;
}

/* bezettingstijdlijn */
.mo-tijdlijn { padding: 6px 0 10px; overflow-x: auto; }
.mo-tl-rij {
  display: grid;
  grid-template-columns: 200px minmax(420px, 1fr) 70px;
  align-items: center;
  gap: 14px;
  padding: 9px 20px;
  border-top: 1px solid var(--border);
  color: inherit;
  transition: background .12s;
}
a.mo-tl-rij:hover { background: #FAFBFE; }
.mo-tl-rij.inactief { opacity: .6; }
.mo-tl-kop { border-top: 0; padding-top: 4px; padding-bottom: 2px; }
.mo-tl-naam { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mo-tl-naam > div { min-width: 0; }
.mo-tl-naam strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-tl-naam small { display: block; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mo-tl-schaal { position: relative; height: 16px; }
.mo-tl-schaal span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.mo-tl-schaal span:first-child { transform: none; }
.mo-tl-schaal span:last-child { transform: translateX(-100%); }
.mo-tl-baan {
  position: relative;
  height: 34px;
  border-radius: 8px;
  background: #F7F8FA;
  overflow: hidden;
}
.mo-tl-lijn { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.mo-tl-werktijd {
  position: absolute;
  top: 0; bottom: 0;
  background: color-mix(in srgb, var(--brand-accent) 7%, white);
  border-left: 1px dashed color-mix(in srgb, var(--brand-accent) 35%, white);
  border-right: 1px dashed color-mix(in srgb, var(--brand-accent) 35%, white);
}
.mo-tl-vrij {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #B45309;
  background: repeating-linear-gradient(135deg, #FEF3C7 0 6px, #FDE68A 6px 8px);
}
.mo-tl-blok {
  position: absolute;
  top: 5px; bottom: 5px;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 7px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.mo-tl-blok.klaar { opacity: .45; }
.mo-tl-blok.bezig { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--green); }
.mo-tl-telling { text-align: right; font-variant-numeric: tabular-nums; }
.mo-tl-telling strong { display: block; font-size: 14px; }
.mo-tl-telling small { font-size: 11px; color: var(--text-muted); }

@media (max-width: 1100px) {
  .mo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mo-head { flex-direction: column; }
  .mo-stats { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   MONTEUR-DETAIL (md-*) — profielkop met cijfers, dagoverzicht, accountformulieren
   ══════════════════════════════════════════════════════════════ */

.md-kop {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "links acties"
    "cijfers cijfers";
  gap: 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 22px 0;
  margin-bottom: 24px;
  overflow: hidden;
}
.md-kop::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--monteur, var(--brand-accent));
}
.md-kop-links { grid-area: links; display: flex; align-items: center; gap: 20px; min-width: 0; }
.md-kop-links .mk-foto.groot { width: 84px; height: 84px; font-size: 26px; border: 3px solid var(--monteur, var(--brand-accent)); box-shadow: 0 0 0 3px #fff, 0 6px 16px -8px rgba(26,26,27,.4); }
.md-kop-tekst { min-width: 0; }
.md-kop-rij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.md-kop h1 { font-size: 28px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; }
.md-sub { margin-top: 4px; font-size: 14px; color: var(--text-2); }
.md-sub em { font-style: normal; color: var(--text-muted); }
.md-mail { font-weight: 600; color: var(--text); }
.md-tijden { margin-top: 6px; font-size: 13px; color: var(--text-2); }
.md-kop-acties { grid-area: acties; display: flex; gap: 8px; align-content: flex-start; flex-wrap: wrap; justify-content: flex-end; }

.md-cijfers {
  grid-area: cijfers;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 -22px;
  border-top: 1px solid var(--border);
  background: #FAFAFB;
}
.md-cijfer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 22px 14px;
  min-width: 0;
  border-right: 1px solid var(--border);
}
.md-cijfer:last-child { border-right: 0; }
.md-cijfer-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.md-cijfer-waarde { font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.md-cijfer-waarde small { font-size: 12.5px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.md-cijfer-sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-staafjes { display: flex; align-items: flex-end; gap: 6px; height: 42px; margin-top: 4px; }
.md-staaf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.md-staaf span { display: block; width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px; background: var(--monteur, var(--brand-accent)); }
.md-staaf small { font-size: 10px; color: var(--text-muted); font-weight: 600; }

.md-kolommen { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

.md-leeg { padding: 18px 20px; font-size: 13.5px; color: var(--text-muted); }

/* dagoverzicht */
.md-stops { list-style: none; margin: 0; padding: 14px 20px 16px; display: flex; flex-direction: column; }
.md-stop {
  display: grid;
  grid-template-columns: 52px 26px 1fr;
  gap: 12px;
  align-items: stretch;
  position: relative;
  padding-bottom: 12px;
}
.md-stop:last-child { padding-bottom: 0; }
.md-stop::before {
  content: "";
  position: absolute;
  left: calc(52px + 12px + 12px);
  top: 26px; bottom: -2px;
  width: 2px;
  background: var(--border);
}
.md-stop:last-child::before { display: none; }
.md-stop-tijd { text-align: right; padding-top: 4px; font-variant-numeric: tabular-nums; }
.md-stop-tijd strong { display: block; font-size: 13.5px; }
.md-stop-tijd small { display: block; font-size: 11px; color: var(--text-muted); }
.md-stop-dot {
  position: relative;
  z-index: 1;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  background: #fff;
  border: 2px solid var(--border-2);
  margin-top: 2px;
}
.md-stop.klaar .md-stop-dot { background: var(--green); border-color: var(--green); color: #fff; }
.md-stop.bezig .md-stop-dot { border-color: var(--brand-accent); color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 15%, transparent); }
.md-stop.niet-thuis .md-stop-dot { border-color: #F59E0B; color: #B45309; background: #FEF3C7; }
.md-stop-kaart {
  display: block;
  padding: 10px 14px 11px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #FAFAFB;
  color: inherit;
  min-width: 0;
  transition: border-color .15s, background .15s;
}
.md-stop-kaart:hover { border-color: var(--brand-accent); background: #fff; }
.md-stop.klaar .md-stop-kaart { opacity: .75; }
.md-stop.bezig .md-stop-kaart { border-color: color-mix(in srgb, var(--brand-accent) 40%, white); background: #fff; }
.md-stop-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.md-stop-kop strong { font-size: 14px; }
.md-stop-sub { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.md-stop-werk { font-size: 13px; margin-top: 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* vrije dagen */
.md-vrij { list-style: none; margin: 0; padding: 4px 0 0; }
.md-vrij li { display: flex; align-items: center; gap: 12px; padding: 9px 20px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.md-vrij-datum { font-weight: 700; min-width: 110px; }
.md-vrij-reden { flex: 1; color: var(--text-2); }
.md-vrij-reden em { font-style: normal; color: var(--text-muted); }
.md-vrij-weg {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-size: 12px;
  transition: all .15s;
}
.md-vrij-weg:hover { border-color: #FCA5A5; color: #B91C1C; background: #FEF2F2; }

/* formulieren rechts */
.md-form { padding: 16px 20px 6px; }
.md-form .form-group { margin-bottom: 14px; }
.md-form-rij { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; }
.md-form-rij .form-group { margin-bottom: 0; }
.form-group label.md-kleur,
.md-kleur {
  display: inline-flex;
  width: auto;
  margin: 0;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--border-radius);
  cursor: pointer;
  position: relative;
}
.md-kleur input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.md-kleur-vlak { width: 28px; height: 28px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.md-kleur-code { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.md-kleur-hint { font-size: 12px; color: var(--text-muted); margin-left: 2px; }
.md-kleur:hover { border-color: var(--brand-accent); }
.md-schakel { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 0 4px; }
.md-schakel input { position: absolute; opacity: 0; width: 0; height: 0; }
.md-schakel-knop {
  flex-shrink: 0;
  width: 42px; height: 24px;
  border-radius: 99px;
  background: #D4D4D8;
  position: relative;
  transition: background .15s;
}
.md-schakel-knop::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s;
}
.md-schakel input:checked + .md-schakel-knop { background: var(--green); }
.md-schakel input:checked + .md-schakel-knop::after { transform: translateX(18px); }
.md-schakel input:focus-visible + .md-schakel-knop { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 25%, transparent); }
.md-schakel strong { display: block; font-size: 13.5px; }
.md-schakel small { display: block; font-size: 12px; color: var(--text-2); }
.md-voet { padding: 4px 20px 18px; }
.md-voet .btn-primary { width: auto; }
.md-tekst { padding: 14px 20px 18px; }
.md-tekst p { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-bottom: 12px; }
.md-gevaar { border-color: #FECACA; }
.md-gevaar .card-head { background: #FFF7F7; }
.md-gevaar .card-head h2 { color: #B91C1C; }

@media (max-width: 1000px) {
  .md-kop { grid-template-columns: 1fr; grid-template-areas: "links" "acties" "cijfers"; }
  .md-kop-acties { justify-content: flex-start; }
  .md-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-cijfer:nth-child(2) { border-right: 0; }
  .md-kolommen { grid-template-columns: 1fr; }
}

/* vrije dagen als periodes + van/tot-formulier */
.md-vrij li.voorbij { opacity: .55; }
.md-vrij-datum em { font-style: normal; color: var(--text-muted); font-weight: 500; margin: 0 2px; }
.md-vrij-dagen {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  background: #F0F1F4;
  border-radius: 99px;
  padding: 2px 9px;
}
.md-vrij-form {
  display: grid;
  grid-template-columns: 150px 150px 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  background: #FCFCFD;
}
.md-vrij-form .form-group { margin-bottom: 0; }
.md-vrij-form label .hint { font-weight: 500; }
.md-vrij-form .btn-primary { white-space: nowrap; }
.md-vrij-form input[type="date"] { font-variant-numeric: tabular-nums; }

/* vrije dagen van het hele team (Monteurs): per week de vijf werkdagen naast elkaar */
.vd-card { margin-bottom: 28px; }
.vd-week { border-top: 1px solid var(--border); }
.vd-week:first-of-type { border-top: 0; }
.vd-week-kop { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px 8px; font-size: 13px; }
.vd-week-kop strong { font-size: 13.5px; }
.vd-week-kop span { color: var(--text-2); }
.vd-week-kop small { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: #F0F1F4; border-radius: 99px; padding: 2px 9px; }
.vd-dagen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0 20px 16px; }
.vd-dag { min-width: 0; min-height: 64px; padding: 8px 10px 6px; border: 1px solid var(--border); border-radius: 10px; background: #FCFCFD; }
.vd-dag.vandaag { border-color: #93C5FD; background: #fff; box-shadow: inset 0 0 0 1px #93C5FD; }
.vd-dag.voorbij { opacity: .5; }
.vd-dag-kop { margin-bottom: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-dag.vandaag .vd-dag-kop { color: #1D4ED8; }
.vd-niemand { color: var(--text-muted); font-size: 13px; }
.vd-chip { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0 -4px 4px; padding: 4px 8px; border-radius: 8px; background: var(--yellow-bg); color: inherit; text-decoration: none; font-size: 13px; line-height: 1.25; }
.vd-chip:hover { filter: brightness(.96); }
.vd-chip i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--monteur, #B45309); }
.vd-chip b { font-weight: 700; white-space: nowrap; }
.vd-chip small { min-width: 0; color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .vd-dagen { grid-template-columns: 1fr; } .vd-dag { min-height: 0; } }
@media print { .vd-chip { background: none; border: 1px solid #ccc; } .vd-dag.voorbij { opacity: .7; } }
@media (max-width: 1100px) {
  .md-vrij-form { grid-template-columns: 1fr 1fr; }
  .md-vrij-reden-veld { grid-column: 1 / -1; }
  .md-vrij-form .btn-primary { grid-column: 1 / -1; justify-self: start; }
}

/* ══════════════════════════════════════════════════════════════
   RAPPORTAGE-DETAIL (rp-*) — verzoek vs. oplossing met foto's
   ══════════════════════════════════════════════════════════════ */

.rp-kop {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "links acties"
    "status status";
  gap: 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px 0;
  margin-bottom: 24px;
  overflow: hidden;
}
.rp-kop::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--green);
}
.rp-kop.controleren::before { background: #F59E0B; }
.rp-kop-links { grid-area: links; min-width: 0; }
.rp-kop-rij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-kop h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; }
.rp-monteur { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; color: var(--text-2); }
.rp-monteur strong { color: var(--text); }
.rp-kop-acties { grid-area: acties; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; }
.rp-kop-acties .btn-primary,
.rp-kop-acties .btn-ghost { width: auto; }
.rp-pdf-acties {
  padding: 16px 20px 18px;
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.rp-pdf-acties form { margin: 0; }
.rp-pdf-acties .btn-primary,
.rp-pdf-acties .btn-ghost { width: auto; }
.rp-pdf-acties .btn-ghost:disabled { opacity: .45; cursor: not-allowed; }
.rp-pdf-hint { flex: 1 1 100%; margin: 4px 0 0; }
.rp-status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -22px;
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  background: #F0FDF4;
  font-size: 13px;
  color: #14532D;
}
.rp-kop.controleren .rp-status { background: #FFFBEB; color: #78350F; }
.rp-status-dot {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: var(--green);
}
.rp-kop.controleren .rp-status-dot { background: #F59E0B; }

.rp-kolommen { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

.rp-fotokop {
  padding: 4px 20px 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.rp-fotos { grid-template-columns: repeat(3, 1fr); padding-top: 10px; }
.rp-geen-fotos { padding: 12px 20px 16px; font-size: 12.5px; color: var(--text-muted); border-top: 1px solid var(--border); }

.rp-regels { display: flex; flex-direction: column; }
.rp-regel { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.rp-regel:last-child { border-bottom: 0; }
.rp-regel-kop { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.rp-regel-kop > div { flex: 1; min-width: 0; }
.rp-regel-kop b { display: block; font-size: 13.5px; }
.rp-regel-kop small { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.rp-extra { margin-left: 8px; font-size: 11px; font-weight: 700; color: #B45309; background: var(--yellow-bg); border-radius: 99px; padding: 2px 8px; vertical-align: 1px; }
.rp-regel-nr {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  background: #fff;
  border: 2px solid var(--border-2);
}
.rp-regel-nr.ok { background: var(--green); border-color: var(--green); color: #fff; }
.rp-oplossing {
  padding: 12px 14px 12px 16px;
  border-radius: 12px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-left: 5px solid var(--green);
}
.rp-oplossing .vz-label { color: #15803D; }
.rp-oplossing p { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; }
.rp-oplossing + .vz-kenmerken { margin-top: 10px; }
.rp-oplossing-los { margin: 16px 20px; }

.rp-afronding { padding: 14px 20px 18px; border-top: 1px solid var(--border); background: #FCFCFD; display: flex; flex-direction: column; gap: 12px; }
.rp-afr-item ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; }
.rp-afr-vinkjes { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-vink {
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 5px 12px;
  background: #F0F1F4;
  color: var(--text-2);
}
.rp-vink.ok { color: #15803D; background: var(--green-bg); }
.rp-vink.uit { color: var(--text-muted); background: #F0F1F4; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.rp-vink.neutraal { color: #1D4ED8; background: var(--blue-bg); }
.rp-handtekening { background: #fff; border: 1px dashed var(--border-2); border-radius: 10px; padding: 8px 12px; max-width: 320px; }
.rp-handtekening img { display: block; max-height: 90px; width: auto; max-width: 100%; }

@media (max-width: 1000px) {
  .rp-kop { grid-template-columns: 1fr; grid-template-areas: "links" "acties" "status"; }
  .rp-kop-acties { justify-content: flex-start; }
  .rp-kolommen { grid-template-columns: 1fr; }
  .rp-fotos { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   RAPPORTAGES-LIJST (rl-*) — wachtrij met datum, klant, monteur, status
   ══════════════════════════════════════════════════════════════ */

.rl-stats { margin-bottom: 20px; }
a.rl-stat { color: inherit; transition: border-color .15s, box-shadow .15s; }
a.rl-stat:hover { border-color: var(--brand-accent); box-shadow: var(--shadow); }
.rl-stat.actief { border-color: var(--brand-accent); box-shadow: inset 0 0 0 1px var(--brand-accent); }
.rl-stat.let-op .mo-stat-waarde { color: #B45309; }
.rl-teller {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 99px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  background: #F59E0B;
  vertical-align: 1px;
}
.instel-tab.actief .rl-teller { background: var(--brand-accent); }

.rl-lijst { display: flex; flex-direction: column; }
.rl-rij {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  background: var(--surface);
  transition: background .12s;
  position: relative;
}
.rl-rij:last-child { border-bottom: 0; }
.rl-rij:hover { background: #FAFBFE; }
.rl-rij.controle::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #F59E0B;
}
.rl-datum strong { display: block; font-size: 13.5px; }
.rl-datum small { display: block; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rl-inhoud { min-width: 0; }
.rl-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-kop b { font-size: 14.5px; }
.rl-plaats { font-size: 13px; color: var(--text-2); }
.rl-ref { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 9%, white); border-radius: 6px; padding: 2px 7px; }
.rl-werk { margin-top: 3px; font-size: 13.5px; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rl-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; font-size: 12px; color: var(--text-2); }
.rl-meta .ok { color: #15803D; }
.rl-meta .uit { color: var(--text-muted); }
.rl-monteur { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.rl-monteur img, .rl-monteur i {
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  color: #fff;
}
.rl-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rl-knop {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  border: 1.5px solid var(--border-2);
  border-radius: var(--border-radius);
  padding: 6px 12px;
  white-space: nowrap;
  transition: all .15s;
}
.rl-knop.prim { color: #fff; background: var(--brand-accent); border-color: var(--brand-accent); }
.rl-rij:hover .rl-knop { border-color: var(--brand-accent); color: var(--brand-accent); }
.rl-rij:hover .rl-knop.prim { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: #fff; }

.rl-leeg { padding: 40px 20px 44px; text-align: center; }
.rl-leeg-icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green-bg);
  color: #15803D;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}
.rl-leeg b { display: block; font-size: 15px; }
.rl-leeg p { margin: 6px auto 0; max-width: 460px; font-size: 13px; color: var(--text-2); line-height: 1.5; }

@media (max-width: 900px) {
  .rl-rij { grid-template-columns: 1fr; gap: 10px; }
  .rl-datum { display: flex; gap: 8px; align-items: baseline; }
  .rl-rechts { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ══════════════════════════════════════════════════════════════
   VERZOEKEN-LIJST (vl-*) — compacte tabel met klacht, wachttijd en tellingen
   ══════════════════════════════════════════════════════════════ */

.rl-stat.spoed .mo-stat-waarde { color: #B91C1C; }
.rl-teller.spoed { background: #DC2626; }
/* tabtellers voor de overige statussen: wel het aantal, maar zonder het "let op"-oranje van Nieuw */
.rl-teller.stil { background: #E5E7EB; color: var(--text-2); }
.instel-tab.actief .rl-teller.stil { background: var(--brand-accent); color: #fff; }
.vl-tabel-wrap { overflow-x: auto; }
.vl-tabel.heeft-blik th:first-child { width: 44px; }
.vl-tabel td { vertical-align: middle; }
.vl-sorteer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}
.vl-sorteer:hover { color: var(--text); }
.vl-sorteer.is-aan { color: var(--brand-accent); }
.vl-sorteer-pijl { font-size: 10px; opacity: .4; }
.vl-sorteer.is-aan .vl-sorteer-pijl { opacity: 1; }
.vl-nr strong { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.vl-ref { white-space: nowrap; }
.vl-nr small, .vl-klant small, .vl-wacht small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.vl-klant strong { display: block; font-size: 13.5px; }
.vl-klant small .badge { margin-left: 6px; vertical-align: 1px; }
.vl-klacht { max-width: 380px; }
.vl-klacht span { display: block; font-size: 13.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }
.vl-klacht small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.vl-status { white-space: nowrap; }
.vl-status .badge + .badge { margin-left: 6px; }
.vl-oud {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-radius: 99px;
  padding: 3px 10px;
  color: var(--text-2);
  background: #F0F1F4;
  white-space: nowrap;
}
.vl-oud.middel { color: #B45309; background: var(--yellow-bg); }
.vl-oud.lang { color: #B91C1C; background: #FEE2E2; }

.vl-paginering {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border);
}
.vl-paginering-stand {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.vl-paginering-rij {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.vl-pagina-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
}
.vl-pagina-knop:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.vl-pagina-knop.is-aan {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}
.vl-pagina-knop.is-uit {
  opacity: .4;
  pointer-events: none;
}
.vl-pagina-gat { color: var(--text-muted); padding: 0 4px; }

.vl-bezig { cursor: wait; }
.vl-bezig-sluier {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #0B102B 28%, transparent);
  pointer-events: auto;
}
.vl-bezig-kaart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  padding: 28px 32px;
  border-radius: var(--border-radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.vl-bezig-kaart b { font-size: 16px; }
.vl-bezig-kaart p { margin: 0; font-size: 13px; color: var(--text-2); }
.vl-bezig-spinner {
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--brand-accent) 18%, #fff);
  border-top-color: var(--brand-accent);
  animation: vk-blik-draai .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vl-bezig-spinner { animation: none; border-top-color: color-mix(in srgb, var(--brand-accent) 18%, #fff); }
}

/* ══════════════════════════════════════════════════════════════
   AGENDA WEEK v2 (wk-*) — navigatie, monteurfilter, dagen met tijdblokken
   ══════════════════════════════════════════════════════════════ */

.wk-balk-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.wk-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-pijl {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  transition: all .15s;
}
.wk-pijl:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.wk-pijl.uit, .wk-klein.uit { opacity: .35; pointer-events: none; }
.wk-titel { min-width: 170px; text-align: center; }
.wk-titel b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.wk-titel small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.wk-nav-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.btn-ghost.wk-klein { padding: 6px 12px; font-size: 12.5px; }
.wk-samenvatting { display: flex; gap: 16px; font-size: 13px; color: var(--text-2); }
.wk-samenvatting b { color: var(--text); font-size: 15px; font-weight: 800; margin-right: 3px; }

.wk-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wk-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 12px 6px 10px;
  transition: all .15s;
}
.wk-filter-chip small { font-size: 11px; font-weight: 700; color: var(--text-muted); background: #F0F1F4; border-radius: 99px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.wk-filter-chip:hover { border-color: var(--chip, var(--brand-accent)); color: var(--text); }
.wk-filter-chip.actief { background: var(--chip, var(--brand-accent)); border-color: var(--chip, var(--brand-accent)); color: #fff; }
.wk-filter-chip.actief small { background: rgba(255,255,255,.22); color: #fff; }
.wk-filter-chip.actief .kleurdot { background: #fff !important; }

.wk-legenda { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12px; color: var(--text-2); }
.wk-leg-groep { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wk-leg-vink { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #fff; font-size: 10px; font-weight: 800; margin-right: 5px; }

.wk-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.wk-dag {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  position: relative;
}
.wk-dag:hover { z-index: 5; }
.wk-dag.vandaag { border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 12%, transparent); }
.wk-dag.verleden { opacity: .8; }
.wk-dag-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.wk-dag-titel b { display: block; font-size: 14.5px; font-weight: 800; }
.wk-dag.vandaag .wk-dag-titel b { color: var(--brand-accent); }
.wk-dag-titel small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.wk-route {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--border);
  font-size: 14px;
  transition: all .15s;
}
.wk-route:hover { border-color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 8%, white); }

.wk-dag-bezetting { padding: 0 14px 10px; border-bottom: 1px solid var(--border); }
.wk-balk { display: block; height: 5px; border-radius: 99px; background: #EEF0F3; overflow: hidden; }
.wk-balk span { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.wk-balk span.druk { background: #F59E0B; }
.wk-balk span.vol { background: #EF4444; }
.wk-dag-bezetting small { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.wk-blokken { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.wk-blok { position: relative; border-radius: 10px; background: #FAFAFB; border: 1px dashed var(--border); padding: 6px 6px 6px; }
.wk-blok.leeg { opacity: .6; }
.wk-blok-kop { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 5px; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wk-blok-kop small { font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: #E9EBF0; border-radius: 99px; min-width: 16px; height: 16px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.wk-blok.leeg .wk-blok-kop small { display: none; }
.wk-leeg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); pointer-events: none; }

.wk-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, var(--chip) 14%, white);
  border: 1px solid color-mix(in srgb, var(--chip) 55%, white);
  border-left: 5px solid var(--chip);
  border-radius: 8px;
  padding: 6px 8px 6px 7px;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--text);
  transition: background .12s, box-shadow .12s;
}
.wk-chip:last-child { margin-bottom: 0; }
.wk-chip:hover, .wk-chip:focus { background: color-mix(in srgb, var(--chip) 24%, white); box-shadow: var(--shadow-sm); outline: none; }
/* afgerond: lichter, grijs, met aangevinkt vakje */
.wk-chip.af {
  background: #F7F8FA;
  border-color: var(--border);
  border-left-color: color-mix(in srgb, var(--chip) 45%, white);
  color: var(--text-muted);
}
.wk-chip.af .wk-chip-tekst strong { color: var(--text-2); font-weight: 600; }
.wk-chip.af .wk-chip-tekst span { color: var(--text-muted); }
.wk-chip.af .wk-chip-mon { opacity: .55; }
.wk-chip.af:hover, .wk-chip.af:focus { background: #F0F1F4; }
.wk-chip.tip-aan { z-index: 250; }
.wk-blok:has(.wk-chip.tip-aan) { z-index: 240; position: relative; }
.wk-chip.tip-aan .tip { display: block; }
.wk-check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid var(--border-2);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.wk-check.aan { background: var(--green); border-color: var(--green); }
.wk-check.klein { width: 15px; height: 15px; font-size: 10px; margin-right: 5px; }
.wk-chip-mon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--chip);
}
.wk-chip-tekst { flex: 1; min-width: 0; line-height: 1.25; }
.wk-chip-tekst strong { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-chip-tekst span { display: block; font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-chip-rechts { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
.wk-chip-rechts small { font-size: 10.5px; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.wk-chip.af .wk-chip-rechts small { color: var(--text-muted); font-weight: 500; }
.wk-chip .tip { left: 0; }
.wk-dag:nth-child(n+4) .wk-chip .tip { left: auto; right: 0; }

@media (max-width: 1300px) {
  .wk-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .wk-week { grid-template-columns: 1fr; }
  .wk-titel { min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════
   PORTAAL-DASHBOARD v2 — sneltoetsen, aandachtspunten, rapporten, activiteit
   ══════════════════════════════════════════════════════════════ */

.pd-hero-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
.pd-hero-links a {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 99px;
  padding: 6px 13px;
  transition: background .15s;
}
.pd-hero-links a:hover { background: rgba(255,255,255,.26); }

.pd-kpis-4 .pd-kpi { min-width: 0; }
.pd-kpis-4 .pd-kpi-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pd-aandacht { margin-bottom: 18px; border-left: 4px solid #F59E0B; }
.pd-aandacht-lijst { list-style: none; margin: 0; padding: 4px 0 6px; }
.pd-aandacht-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: inherit;
  transition: background .12s;
}
.pd-aandacht-rij:hover { background: #FAFBFE; }
.pd-aandacht-rij i { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #F59E0B; }
.pd-aandacht-rij.on-hold i { background: #94A3B8; }
.pd-aandacht-rij.uitgesteld i { background: #A78BFA; }
.pd-aandacht-rij.wacht-lang i { background: #EF4444; }
.pd-aandacht-rij.artikel-wacht i { background: #3B82F6; }
.pd-aandacht-rij.rapport-controle i { background: #F59E0B; }
.pd-aandacht-tekst { flex: 1; min-width: 0; }
.pd-aandacht-tekst b { display: block; font-size: 13.5px; }
.pd-aandacht-tekst small { display: block; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-aandacht .pd-chip { flex-shrink: 0; }

.pd-rapporten { list-style: none; margin: 0; padding: 4px 0 6px; }
.pd-rapporten li { display: flex; align-items: center; gap: 12px; padding: 9px 20px; border-top: 1px solid var(--border); }
.pd-rapporten li:first-child { border-top: 0; }
.pd-rapport-rij { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; }
.pd-rapport-datum { flex-shrink: 0; width: 84px; font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pd-rapport-mid { min-width: 0; flex: 1; }
.pd-rapport-mid b { display: block; font-size: 13px; }
.pd-rapport-mid small { display: block; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-rapport-acties { display: flex; gap: 6px; flex-shrink: 0; }
.pd-rapport-acties .pd-chip { cursor: pointer; }
.pd-rapport-acties .pd-chip:hover { filter: brightness(.95); }

.pd-activiteit { list-style: none; margin: 0; padding: 8px 20px 12px; position: relative; }
.pd-activiteit li { display: grid; grid-template-columns: 52px 14px 1fr; gap: 10px; align-items: start; padding: 6px 0; position: relative; }
.pd-activiteit li::before { content: ""; position: absolute; left: calc(52px + 10px + 6px); top: 22px; bottom: -8px; width: 2px; background: var(--border); }
.pd-activiteit li:last-child::before { display: none; }
.pd-act-tijd { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-align: right; padding-top: 3px; font-variant-numeric: tabular-nums; }
.pd-act-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--brand-accent); margin-top: 3px; position: relative; z-index: 1; }
.pd-act-tekst { min-width: 0; color: inherit; }
.pd-act-tekst b { display: block; font-size: 13px; }
.pd-act-tekst small { display: block; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-act-tekst:hover b { color: var(--brand-accent); }

@media (max-width: 1100px) {
  .pd-kpis-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pd-kpis-4 { grid-template-columns: 1fr; }
  .pd-rapport-datum { width: auto; }
}

/* portaal-meldingen in backoffice-lijststijl */
.pp .pp-zoek { margin: 0 0 14px; }
.pp .instel-scherm { margin-bottom: 24px; }
.pp .vl-tabel-wrap { overflow-x: auto; }

/* ═══════════════════════════════════════════════════════════
   PLANBORD — VOORSTEL VAN DE PLANNING-AGENT (vs-*)
   ═══════════════════════════════════════════════════════════ */
/* knop op de verzoek-kaart */
.vk-voorstel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1.5px dashed color-mix(in srgb, var(--brand-accent) 45%, white);
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-accent) 4%, white);
  color: var(--brand-accent);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .13s;
}
.vk-voorstel span { font-size: 12px; }
.vk-voorstel:hover { border-style: solid; background: color-mix(in srgb, var(--brand-accent) 10%, white); }
.vk-voorstel.actief { border-style: solid; background: var(--brand-accent); color: #fff; }
.vk-voorstel:disabled { opacity: .5; cursor: wait; }
.verzoek-kaart.vs-actief { border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 15%, transparent); }

/* paneel boven de dagkolom */
.vs-paneel {
  margin: 14px 20px 4px;
  border: 1.5px solid color-mix(in srgb, var(--brand-accent) 35%, white);
  border-left: 5px solid var(--brand-accent);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-accent) 5%, white), #fff 70%);
  overflow: hidden;
}
.vs-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 10px 16px;
}
.vs-icoon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-accent);
  color: #fff;
  font-size: 16px;
}
.vs-titel { flex: 1; min-width: 0; }
.vs-titel b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.vs-titel small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs-bron {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--brand-accent) 12%, white);
  color: var(--brand-accent);
}
.vs-voorkeur { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vs-voorkeur span { font-size: 12px; color: var(--text-2); font-weight: 600; }
.vs-voorkeur select {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
  background: #fff;
  color: var(--text);
  outline: none;
  max-width: 220px;
}
.vs-voorkeur select:focus { border-color: var(--brand-accent); }
.vs-voorkeur select:disabled { opacity: .65; }
.vs-sluit { flex-shrink: 0; }
.vs-denken { padding: 6px 16px 16px; }
.vs-uitleg {
  margin: 0;
  padding: 0 16px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.vs-leeg, .vs-fout { margin: 0; padding: 4px 16px 14px; font-size: 13px; color: var(--text-2); }
.vs-fout { color: #B91C1C; }

/* voorstel-kaarten naast elkaar */
.vs-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  padding: 0 14px 14px;
}
.vs-kaart {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px 10px;
  border: 1.5px solid var(--border);
  border-top: 3px solid var(--mk, var(--brand-accent));
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: all .13s;
  min-width: 0;
}
.vs-kaart:hover { border-color: var(--brand-accent); box-shadow: var(--shadow-sm); }
.vs-kaart.gekozen {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 5%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 15%, transparent);
}
.vs-kaart-kop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.vs-kaart-kop b { font-size: 12.5px; }
.vs-beste, .vs-hier {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.vs-beste { background: #DCFCE7; color: #166534; }
.vs-hier { background: color-mix(in srgb, var(--brand-accent) 12%, white); color: var(--brand-accent); margin-left: auto; }
.vs-dag { font-size: 14px; }
.vs-tijd { font-size: 13px; }
.vs-reden {
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vs-acties { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.vs-acties .btn-ghost, .vs-acties .btn-primary {
  flex: 1;
  height: 30px;
  min-height: 0;
  padding: 0 10px;
  font-size: 12px;
  text-align: center;
  justify-content: center;
}

/* voorbeeld in de dagkolom + op de kaart */
.vs-voorbeeld-pil {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, white);
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.dl-blok.vs-blok { cursor: default; opacity: .92; }

/* Planbord: schakelaar Nu / Na voorstel en de voorbeeldweergave van de dag ná inplannen (25-9-2026) */
.vs-schakel { display: inline-flex; padding: 3px; border-radius: 99px; background: #F0F1F4; border: 1px solid var(--border); }
.vs-schakel button { border: 0; background: transparent; border-radius: 99px; padding: 4px 12px; font-size: 11.5px; font-weight: 700; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.vs-schakel button.aan { background: #fff; color: var(--brand-accent); box-shadow: var(--shadow-sm); }
.vs-dag-kop { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--brand-accent) 6%, white); border: 1px dashed color-mix(in srgb, var(--brand-accent) 40%, white); }
.vs-dag-kop b { font-size: 12.5px; color: var(--brand-accent); }
.vs-dag-kop span { font-size: 11.5px; color: var(--text-2); }
.vs-dag .dl-blok.vs-blok { cursor: pointer; opacity: 1; }
.vs-dag .dl-blok.vs-verplaatst { box-shadow: inset 0 0 0 2px #FDBA74, var(--shadow-sm); }
.vs-was { flex-shrink: 0; font-size: 10.5px; font-weight: 800; color: #9A3412; background: #FFEDD5; border: 1px solid #FDBA74; border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.vs-nieuw-chip { margin-left: 6px; font-size: 10px; font-weight: 800; color: #EA580C; text-transform: uppercase; letter-spacing: .03em; }
.vs-dag-hint { margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-2); }
.vs-dag-hint b { color: var(--text); }
.dl-blok.vs-blok.af { opacity: .5; }
.dl-blok.vs-blok.vs-nieuw {
  background: #fff;
  color: var(--text);
  border: 2px dashed #EA580C;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .14);
  opacity: 1;
}
.dl-blok.vs-blok.vs-nieuw .blok-nr { background: #EA580C; color: #fff; }
.dl-blok.vs-blok.vs-nieuw .dl-mid small { color: var(--text-2); }
.vs-blok-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: #EA580C;
  padding: 3px 8px;
  border-radius: 99px;
}
@media (max-width: 900px) {
  .vs-kop { flex-wrap: wrap; }
  .vs-voorkeur { order: 3; width: 100%; }
  .vs-voorkeur select { max-width: none; flex: 1; }
}

/* ── planbord: dag als lijst per tijdblok (afspraak = één uur, meerdere per tijdblok); kaart met geocoding ── */
.plan-kaart-vlak { flex: 1; min-height: 430px; background: #EEF0F5; }
.dl-tijdblokken { padding: 6px 16px 18px; gap: 0; }
.dl-venster-kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 2px 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.dl-venster-lbl { font-size: 12.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.dl-venster-sub { font-size: 11px; color: var(--text-muted); }
.dl-blok.dl-rij { padding: 8px 12px; border-radius: 10px; margin: 2px 0; }
.dl-blok.dl-rij .dl-tijd { width: 46px; font-size: 12.5px; }
.dl-blok.dl-rij .dl-tijd small { font-size: 10px; opacity: .7; }
.dl-blok.dl-rij .dl-mid b { font-size: 12.5px; }
.dl-blok.dl-rij .dl-mid small { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz.tz-lijst { min-height: 26px; padding: 3px 10px; margin: 1px 0; gap: 8px; }
.tz.tz-lijst .tz-plus { width: 18px; height: 18px; font-size: 12px; }
.tz.tz-lijst .tz-reis { font-size: 10px; padding: 2px 8px; }
.tz.tz-lijst.tz-gat { border-color: #E3E7F0; background: #FBFCFE; }
.dl-vol { padding: 8px 12px; font-size: 11.5px; color: var(--text-muted); text-align: center; }
.plan-detail > * { min-width: 0; }
.tz.tz-lijst .tz-tekst { min-width: 0; }
/* voorstel-ghost in de dagkolom: sleepbaar + inplan-knop */
.dl-blok.vs-blok.vs-nieuw.sleep { cursor: grab; opacity: 1; }
.dl-blok.vs-blok.vs-nieuw.sleep:active { cursor: grabbing; }
.dl-blok.vs-blok.vs-nieuw.gekozen { box-shadow: 0 0 0 3px rgba(234, 88, 12, .35); }
.vs-blok-plan {
  flex-shrink: 0;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: #EA580C;
  color: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.vs-blok-plan:hover { background: #C2410C; }
.vs-blok-plan:disabled { opacity: .6; cursor: wait; }
/* slepen/kiezen: afspraken zijn zelf ook dropvlak (= ervóór zetten), ＋-regels worden groter */
/* (de ＋-regels heten sinds de tijdlijn .tz-lijn; deze regels stonden nog op de oude naam .tz-lijst en deden dus niets) */
body.sleept .tz.tz-lijn {
  min-height: 34px; margin-top: 3px; margin-bottom: 3px; padding: 4px 10px;
  border: 1.5px dashed color-mix(in srgb, var(--brand-accent) 45%, white); border-radius: 10px;
  background: color-mix(in srgb, var(--brand-accent) 5%, white);
}
body.sleept .tz.tz-lijn::before { display: none; }
body.sleept .tz.tz-lijn .tz-plus, body.sleept .tz.tz-lijn .tz-tekst { opacity: 1; }
body.sleept .tz.tz-lijn .tz-plus { border-style: solid; border-color: var(--brand-accent); color: var(--brand-accent); }
body.sleept .tz.tz-lijn .tz-tekst { color: var(--brand-accent); font-weight: 700; }
body.sleept .tz.tz-lijn.drop-hover { background: color-mix(in srgb, var(--brand-accent) 14%, white); border-style: solid; }
body.sleept .tz.tz-rand { border-color: color-mix(in srgb, var(--brand-accent) 45%, white); background: color-mix(in srgb, var(--brand-accent) 5%, white); }
body.sleept .tz.tz-rand.is-na-werktijd { border-color: #F59E0B; }
/* boven-/onderhelft van een afspraak: ervóór of erna */
.dl-blok.dl-rij.drop-hover.drop-boven { box-shadow: 0 -6px 0 -2px var(--brand-accent), var(--shadow-sm); }
.dl-blok.dl-rij.drop-hover.drop-onder { box-shadow: 0 6px 0 -2px var(--brand-accent), var(--shadow-sm); }
.dl-blok.dl-rij.drop-hover,
.dl-blok.dl-rij.doel:hover {
  outline: 2px dashed var(--brand-accent);
  outline-offset: 2px;
  box-shadow: 0 -6px 0 -3px var(--brand-accent);
  cursor: copy;
}
body.kies-slot .dl-blok.dl-rij.doel { cursor: copy; }
/* planner-notitie uit het oude plaatsveld, los van de plaatsnaam */
.dl-notitie {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
  white-space: nowrap;
}

/* agenda week: afspraken per monteur gebundeld, daarbinnen per tijdblok */
.wk-monteur {
  border: 1px solid color-mix(in srgb, var(--chip) 40%, white);
  border-left: 4px solid var(--chip);
  border-radius: 10px;
  background: #fff;
  padding: 6px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wk-monteur-kop {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px 2px;
  min-width: 0;
}
.wk-monteur-kop b { font-size: 12.5px; white-space: nowrap; }
.wk-monteur-kop small { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-monteur .wk-blok { background: #FAFAFB; border-style: dashed; padding: 5px 5px 5px; }
.wk-monteur .wk-blok-kop { padding-bottom: 4px; }
.wk-monteur .wk-chip-mon { display: none; }
.wk-monteur .wk-chip { padding-left: 8px; }
.wk-monteur:has(.wk-chip.tip-aan) { z-index: 240; position: relative; }
/* agenda week: legenda in de weekbalk, geen losse monteur-rij meer */
.wk-balk-rechts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wk-leg-balk { font-size: 12px; color: var(--text-2); gap: 6px 12px; padding-right: 18px; border-right: 1px solid var(--border); }
.wk-leg-balk .leg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
@media (max-width: 1100px) { .wk-leg-balk { border-right: 0; padding-right: 0; } }
/* agenda weekbalk: weeknummer en datumbereik op één regel */
.wk-titel.wk-titel-rij { display: flex; align-items: baseline; gap: 10px; min-width: 0; text-align: left; white-space: nowrap; }
.wk-titel.wk-titel-rij b { display: inline; }
.wk-titel.wk-titel-rij small { display: inline; margin-top: 0; font-size: 12.5px; }
.btn-ghost.vz-knop-klein { padding: 5px 10px; font-size: 12px; height: auto; min-height: 0; }

/* ═══════════════════════════════════════════════════════════
   TOPBALK — ZOEKBALK (klantnaam / verzoeknummer / referentie)
   ═══════════════════════════════════════════════════════════ */
.topbar-links { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.topbar-titel { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.zoekbalk { position: relative; display: flex; align-items: center; width: min(440px, 100%); }
.zoekbalk-icoon { position: absolute; left: 12px; display: inline-flex; color: var(--text-muted); pointer-events: none; }
.zoekbalk input {
  width: 100%;
  height: 38px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 52px 0 36px;
  font-size: 13.5px;
  font-family: inherit;
  background: #F7F8FA;
  color: var(--text);
  outline: none;
  transition: all .15s;
}
.zoekbalk input::placeholder { color: var(--text-muted); }
.zoekbalk input::-webkit-search-cancel-button { -webkit-appearance: none; }
.zoekbalk input:focus { background: #fff; border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 14%, transparent); }
.zoekbalk-kbd {
  position: absolute;
  right: 10px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  pointer-events: none;
}
.zoekbalk input:focus ~ .zoekbalk-kbd { display: none; }
.zoekbalk-lijst {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(560px, calc(100vw - 48px));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(10, 15, 40, .16);
  padding: 6px;
  z-index: 300;
}
.zoekbalk-leeg { padding: 12px 12px; font-size: 13px; color: var(--text-muted); }
.zoekbalk-leeg span { font-weight: 700; color: var(--text-2); }
.zoekbalk-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.zoekbalk-rij.actief { background: color-mix(in srgb, var(--brand-accent) 8%, white); }
.zoekbalk-nr { flex-shrink: 0; width: 82px; font-size: 12.5px; font-weight: 800; color: var(--brand-accent); font-variant-numeric: tabular-nums; }
.zoekbalk-mid { flex: 1; min-width: 0; }
.zoekbalk-mid b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoekbalk-mid small { display: block; font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoekbalk-rij .badge { flex-shrink: 0; }
.zoekbalk-voet { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px 4px; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: 4px; }
@media (max-width: 900px) {
  .topbar-titel { display: none; }
  .zoekbalk-kbd { display: none; }
}
/* planbord: zojuist ingeplande/verzette afspraak markeren */
@keyframes net-gepland-puls {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55), var(--shadow-sm); }
  70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0), var(--shadow-sm); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0), var(--shadow-sm); }
}
.dl-blok.dl-rij.net-gepland {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  animation: net-gepland-puls 1.4s ease-out 3;
}
.dl-net {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--green);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: 1px;
  white-space: nowrap;
}
/* planbord: aangeklikte afspraak = paars gemarkeerd, gelijk aan de marker op de kaart */
.dl-blok.dl-rij.gekozen {
  outline: 3px solid #7C3AED;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(124, 58, 237, .15), var(--shadow-sm);
}
.dl-blok.dl-rij.gekozen .blok-nr { background: #7C3AED; color: #fff; }
.dl-blok.dl-rij { cursor: pointer; }
.dl-blok.dl-rij.sleep { cursor: grab; }
.dl-blok.dl-rij.sleep:active { cursor: grabbing; }
/* planbord: oogje om de opdracht te openen */
.dl-oog {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .13s;
}
.dl-oog:hover { background: rgba(255,255,255,.4); }
.dl-blok.vs-blok.vs-nieuw .dl-oog { color: var(--text); background: #F1F2F6; }
.vk-kop-rechts { display: inline-flex; align-items: center; gap: 6px; }
.vk-oog-klein {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: all .13s;
}
.vk-oog-klein:hover { background: #F1F2F6; color: var(--brand-accent); }

/* ═══════════════════════════════════════════════════════════
   VERZOEKPAGINA — KLIK-EN-TYP VELDEN (vi-*)
   ═══════════════════════════════════════════════════════════ */
.vz-feiten-inline > div { align-items: start; }
.vi { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.vi-rij { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.vi-rij + .vi-rij { margin-top: 4px; }
.vi-knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: -3px -8px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: text;
  transition: all .13s;
  overflow-wrap: anywhere;
}
.vi-knop:hover { background: #F4F5F9; border-color: var(--border); }
.vi-knop .vi-pen { font-size: 12px; color: var(--text-muted); opacity: 0; transition: opacity .13s; }
.vi-knop:hover .vi-pen { opacity: 1; }
.vi-knop.vi-leeg { color: var(--text-muted); font-weight: 500; font-style: italic; }
.vi-open input {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  border: 1.5px solid var(--brand-accent);
  border-radius: 8px;
  padding: 3px 8px;
  margin: -4px -8px;
  min-width: 120px;
  width: min(100%, 260px);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 14%, transparent);
}
.vi-smal .vi-open input, .vi.vi-smal input { min-width: 70px; width: 90px; }
.vi-status { font-size: 11.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.vi-status.vi-ok { color: var(--green); }
.vi-status.vi-fout { color: #B91C1C; white-space: normal; }
.vi-hint { display: block; margin-top: 4px; font-weight: 500; }

/* klacht inline */
.vz-klacht-inline { position: relative; }
.vz-klacht-klik { cursor: text; border-radius: 8px; margin: -4px -8px; padding: 4px 8px; transition: background .13s; }
.vz-klacht-klik:hover { background: rgba(255,255,255,.6); }
.vz-klacht-klik .vi-pen { margin-left: 8px; font-size: 12px; color: var(--text-muted); opacity: 0; }
.vz-klacht-klik:hover .vi-pen { opacity: 1; }
.vz-klacht-veld {
  width: 100%;
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  border: 1.5px solid var(--brand-accent);
  border-radius: 8px;
  padding: 6px 8px;
  margin: -4px -8px;
  background: #fff;
  outline: none;
  resize: vertical;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 14%, transparent);
}
.vz-klacht-inline .vi-status { display: block; margin-top: 6px; }
.vz-klachten-extra:empty { display: none; }
.vz-klacht-inline { flex-wrap: wrap; }
.vz-klacht-inline .vz-klacht-klik, .vz-klacht-inline .vz-klacht-veld { flex: 1 1 0; min-width: 0; }
.vz-klacht-inline .vi-status { flex-basis: 100%; margin-top: 0; }
.vi { flex: 0 1 auto; }
.vi-knop { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.vi-knop .vi-pen { flex-shrink: 0; }
.vz-feiten-inline dd { overflow-wrap: normal; min-width: 0; }
/* blokjes (uren) per klus */
.bl-select {
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  background: #fff;
  cursor: pointer;
}
.bl-select:focus { border-color: var(--brand-accent); outline: none; }
.bl-pil, .vz-blokjes-chip, .vk-blokjes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #FEF3C7;
  color: #92400E;
  white-space: nowrap;
}
.vk-blokjes { margin: 2px 0 4px; font-size: 11px; }
/* blokjes-kiezer: rij van 8 blokjes i.p.v. een select */
.bl-inline { display: flex; flex-direction: column; gap: 6px; }
.bl-knoppen { display: inline-flex; gap: 4px; }
.bl-knop {
  width: 30px; height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .12s;
}
.bl-knop:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.bl-knop.gevuld { background: color-mix(in srgb, var(--brand-accent) 12%, white); border-color: color-mix(in srgb, var(--brand-accent) 35%, white); color: var(--brand-accent); }
.bl-knop.actief { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.bl-knop:disabled { cursor: wait; opacity: .7; }
.bl-tekst { font-size: 12.5px; color: var(--text-2); font-weight: 500; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bl-tekst b { color: var(--text); }
.vz-blokjes-strook {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #FAFAFB;
}
.vz-blokjes-label b { display: block; font-size: 13px; }
.vz-blokjes-label small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.vz-blokjes-strook .bl-inline { flex-direction: row; align-items: center; gap: 12px; }
.vz-klachten-extra:not(:empty) { padding-top: 12px; }
.vs-reis { font-size: 11.5px; font-weight: 700; color: var(--text-2); margin-top: 2px; }
.vs-ghost-reis {
  margin: 2px 0 2px 58px;
  font-size: 10.5px;
  font-weight: 700;
  color: #C2410C;
  background: #FFF7ED;
  border: 1px dashed rgba(234, 88, 12, .5);
  border-radius: 99px;
  padding: 2px 10px;
  width: fit-content;
}
/* agenda week: echte blokjes op een chip (3 vierkantjes = 3 uur) zonder de chip groter te maken */
.wk-chip-blokjes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 15px;
  padding: 0 4px;
  border-radius: 99px;
  background: #FEF3C7;
  white-space: nowrap;
}
.wk-chip-blokjes i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: #D97706;
}
.wk-chip.af .wk-chip-blokjes { opacity: .6; }
/* twee monteurs op één klus */
.vz-duo-strook { margin-top: 8px; }
.bl-knop.bl-knop-breed { width: auto; padding: 0 12px; }
.vz-duo-chip { background: #EDE9FE; color: #5B21B6; border-color: #DDD6FE; }
.vz-duo { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; height: 17px; border-radius: 99px; background: #EDE9FE; color: #5B21B6; font-size: 11px; font-weight: 700; }
.dl-duo { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; height: 17px; border-radius: 99px; background: #EDE9FE; color: #5B21B6; font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.dl-duo-mee { background: #F3F4F6; color: #4B5563; }
.dl-blok.mee { cursor: default; opacity: .85; border-style: dashed; }
.wk-chip-duo { display: inline-flex; align-items: center; justify-content: center; height: 15px; padding: 0 4px; border-radius: 99px; background: #EDE9FE; font-size: 10px; line-height: 1; }
.wk-chip.af .wk-chip-duo { opacity: .6; }
.agenda-blok.mee { opacity: .8; outline: 2px dashed rgba(255,255,255,.7); outline-offset: -3px; }
.ab-duo { font-style: normal; font-weight: 700; opacity: .95; }
.wb2-duo { background: #EDE9FE; color: #5B21B6; }
.vz-planning-kaart .vz-blokjes-strook { margin: 16px 20px 12px; }
.vz-planning-kaart .vz-duo-strook { margin-top: 0; margin-bottom: 20px; }
/* planbord: rit van de collega bij een duo-klus */
.tr-paneel { border-top: 1px solid var(--border); background: #FAFAFB; }
.tr-kop { display: flex; align-items: center; gap: 8px; padding: 10px 16px 6px; font-size: 12.5px; flex-wrap: wrap; }
.tr-kop b { color: var(--text); }
.tr-kop small { color: var(--text-muted); font-size: 11.5px; }
.tr-leeg { padding: 4px 16px 12px; font-size: 12px; color: var(--text-muted); }
.tr-lijst { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 12px; }
.tr-rij { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--border); border-left: 4px solid var(--tk, #6B7280); border-radius: 8px; background: #fff; font-size: 12px; }
.tr-rij.samen { border-color: #DDD6FE; border-left-color: #7C3AED; background: #F5F3FF; }
.tr-tijd { display: flex; flex-direction: column; min-width: 44px; font-weight: 800; color: var(--text); line-height: 1.1; }
.tr-tijd small { font-weight: 500; color: var(--text-muted); font-size: 10px; }
.tr-mid { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tr-mid b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-mid small { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-rij .dl-duo { margin-left: 0; }
/* voorstel: wat verandert er aan bestaande afspraken */
.vs-wijzigingen { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #FFF7ED; border: 1px solid #FED7AA; font-size: 11.5px; color: #7C2D12; }
.vs-wijzigingen > b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; color: #9A3412; }
.vs-wijzigingen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vs-wijzigingen li { display: flex; justify-content: space-between; gap: 8px; }
.vs-wijz-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-wijz-tijd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-wijzigingen small { display: block; margin-top: 5px; color: #9A3412; opacity: .8; font-size: 10.5px; }
.vs-wijz-geen { background: #F3F4F6; border-color: var(--border); color: var(--text-muted); }
/* Planbord: het wijzigingenblok direct onder het voorstelpaneel (zelfde zijmarge), boven de dagkolom */
.pb-wijzigingen { margin: 4px 20px 16px; padding: 10px 14px; font-size: 12.5px; }
.pb-wijzigingen > b { font-size: 11.5px; }
.pb-wijzigingen ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 18px; }
.pb-wijzigingen li { padding: 3px 0; border-bottom: 1px dashed #FED7AA; }
.dl-wijzigingen li:last-child { border-bottom: 0; }
/* planbord: blokjes-pil naast het oogje (zelfde vierkantjes als in de weekagenda) */
.dl-blokjes { height: 20px; padding: 0 7px 0 6px; gap: 3px; margin-right: 2px; flex: none; }
.dl-blokjes i { width: 7px; height: 7px; border-radius: 2px; }
.dl-blokjes em { font-style: normal; font-size: 11px; font-weight: 800; color: #92400E; margin-left: 2px; line-height: 1; }
.dl-blok.af .dl-blokjes { opacity: .6; }
/* ── planbord: dagkolom als tijdlijn (urenkolom links, tijdblok-band, rustige tussenregels) ── */
.dl-tijdlijn { padding: 8px 16px 18px; }
.dl-regel { display: flex; align-items: stretch; gap: 10px; margin: 3px 0; }
.dl-regel > .dl-blok { flex: 1; min-width: 0; margin: 0; }
.dl-uur {
  flex: none; width: 66px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  padding: 4px 10px 4px 0;
  border-right: 4px solid var(--tb, #CBD5E1);
  color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.dl-uur b { font-size: 15px; font-weight: 800; }
.dl-uur small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.dl-uur-blok { display: block; margin-top: 3px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: var(--tb); text-transform: uppercase; white-space: nowrap; }
.dl-uur-overlap { display: inline-block; margin-top: 3px; font-style: normal; font-size: 9.5px; font-weight: 800; color: #fff; background: #DC2626; border-radius: 99px; padding: 1px 6px; text-transform: uppercase; }
.dl-uur.is-overlap { border-right-color: #DC2626; }
.dl-uur.is-overlap b { color: #B91C1C; }
.dl-regel-overlap > .dl-blok { box-shadow: 0 0 0 2px #FCA5A5, var(--shadow-sm); }
.dl-uur.is-vrij b { color: var(--text-muted); font-weight: 700; }
.dl-uur.is-ghost b { color: #EA580C; }
.dl-uur.is-ghost { border-right-style: dashed; }
/* vrije uren */
.dl-regel-vrij { min-height: calc(30px * var(--uren, 1) + 14px); }
.tz.tz-vrijvak {
  flex: 1; min-width: 0; margin: 0; min-height: 0;
  border: 1.5px dashed #D5DAE6; border-radius: 10px; background: #FBFCFE;
  padding: 6px 12px; gap: 8px;
}
.tz.tz-vrijvak .tz-tekst { color: var(--text-muted); }
.tz.tz-vrijvak .tz-reis { margin-left: auto; }
/* dunne lijn tussen twee opeenvolgende stops */
.tz.tz-lijn {
  position: relative; margin: 0 0 0 76px; padding: 0 8px 0 0; min-height: 18px; gap: 8px;
  border: 0; border-radius: 0; background: none;
}
.tz.tz-lijn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed #D5DAE6; z-index: 0; }
.tz.tz-lijn > * { position: relative; z-index: 1; }
.tz.tz-lijn .tz-plus { width: 16px; height: 16px; font-size: 11px; background: #fff; opacity: 0; transition: opacity .12s; }
.tz.tz-lijn .tz-tekst { opacity: 0; font-size: 10.5px; transition: opacity .12s; }
.tz.tz-lijn:hover, .tz.tz-lijn.drop-hover { background: none; border: 0; }
.tz.tz-lijn:hover .tz-plus, .tz.tz-lijn.drop-hover .tz-plus, .tz.tz-lijn:hover .tz-tekst, .tz.tz-lijn.drop-hover .tz-tekst, body.kies-slot .tz.tz-lijn .tz-plus, body.kies-slot .tz.tz-lijn .tz-tekst { opacity: 1; }
.tz.tz-lijn.drop-hover::before { border-top: 2px solid var(--brand-accent); }
.tz.tz-lijn .tz-reis { margin-left: auto; background: #fff; color: var(--text-2); border: 1px solid var(--border); font-size: 10px; padding: 1px 8px; }
/* "achteraan in dit tijdblok": onderaan elke haak, altijd leesbaar (niet alleen bij hover), in de kleur van het blok */
.tz.tz-lijn.tz-blok-einde { min-height: 22px; margin-top: 2px; }
.tz.tz-lijn.tz-blok-einde::before { border-top-color: color-mix(in srgb, var(--tb, #D5DAE6) 45%, white); }
.tz.tz-lijn.tz-blok-einde .tz-plus { opacity: .85; border-color: color-mix(in srgb, var(--tb, var(--border)) 60%, white); color: var(--tb, var(--text-2)); }
.tz.tz-lijn.tz-blok-einde .tz-tekst { opacity: .8; color: var(--text-2); }
.tz.tz-lijn.tz-blok-einde:hover .tz-tekst, .tz.tz-lijn.tz-blok-einde.drop-hover .tz-tekst, body.sleept .tz.tz-lijn.tz-blok-einde .tz-tekst { opacity: 1; }
/* reis-pil van het voorstel en wijzigingenblok uitlijnen met de kaarten */
.dl-tijdlijn .vs-ghost-reis { margin-left: 76px; }
.dl-tijdlijn .dl-wijzigingen, .dl-tijdlijn .dl-vol { margin-left: 0; }
/* ── voorstelpaneel: compacte rijen i.p.v. kaarten ── */
.vs-uitleg-wrp { padding: 0 16px 8px; }
.vs-uitleg-knop { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--brand-accent); cursor: pointer; }
.vs-uitleg-wrp .vs-uitleg { padding: 6px 0 0; }
.vs-rijen { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; }
.vs-rij {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px 8px 10px;
  border: 1.5px solid var(--border); border-left: 4px solid var(--mk, var(--brand-accent));
  border-radius: 10px; background: #fff; cursor: pointer; transition: all .13s; min-width: 0;
}
.vs-rij:hover { border-color: var(--brand-accent); border-left-color: var(--mk); box-shadow: var(--shadow-sm); }
.vs-rij.gekozen { border-color: var(--brand-accent); border-left-color: var(--mk); background: color-mix(in srgb, var(--brand-accent) 5%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 15%, transparent); }
.vs-rij-nr { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #EEF0F5; color: var(--text-2); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.vs-rij.beste .vs-rij-nr { background: #166534; color: #fff; }
.vs-rij-wie { display: inline-flex; align-items: center; gap: 6px; min-width: 110px; font-size: 13px; }
.vs-rij-wie b { white-space: nowrap; }
.vs-rij-wanneer { display: flex; flex-direction: column; line-height: 1.15; min-width: 84px; }
.vs-rij-wanneer b { font-size: 13px; }
.vs-rij-wanneer small { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vs-rij-soort { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.vs-rij-soort.is-rit { background: #DCFCE7; color: #166534; }
.vs-rij-soort.is-dichtbij { background: #E0F2FE; color: #075985; }
.vs-rij-soort.is-leeg { background: #F3F4F6; color: #4B5563; }
.vs-rij-omrij { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.vs-rij-badges { display: inline-flex; gap: 6px; }
.vs-rij .vs-hier { margin-left: 0; }
.vs-rij-acties { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.vs-rij-acties .btn-ghost, .vs-rij-acties .btn-primary { padding: 5px 11px; font-size: 12px; }
.vs-rij-info { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.vs-rij-info:hover, .vs-rij-info.aan { border-color: var(--brand-accent); color: var(--brand-accent); }
.vs-rij-detail { display: flex; flex-direction: column; gap: 3px; margin: -2px 0 0 34px; padding: 8px 12px; border-radius: 0 0 10px 10px; background: #F7F8FB; border: 1px solid var(--border); border-top: 0; font-size: 12px; }
.vs-rij-detail .vs-reden { font-style: normal; color: var(--text-2); line-height: 1.45; }
@media (max-width: 1100px) { .vs-rij-wie { min-width: 0; } .vs-rij-acties { margin-left: 0; width: 100%; } }
/* meerdere blokjes: regel zo hoog als het aantal uren, elk uur in de kolom */
.dl-regel-lang { min-height: calc(46px * var(--uren, 1) + 6px); }
.dl-uur-reeks { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dl-uur-reeks b { font-size: 15px; }
.dl-uur-reeks b.dl-uur-vervolg { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.dl-uur.is-lang { justify-content: space-between; padding-top: 8px; padding-bottom: 8px; }
.dl-regel-lang > .dl-blok { align-self: stretch; }
.vs-rij-wanneer small strong { color: var(--text); font-weight: 800; }
.vs-rij-omrij.is-leeg { color: var(--text-muted); font-weight: 600; }
/* migratie: plaatsnotities vertalen */
.nv-wrp { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.nv-knoppen { display: flex; gap: 8px; }
.nv-stand { margin: 0; font-size: 13px; color: var(--text-2); }
.nv-stand.ok { color: #166534; font-weight: 700; }
.nv-tabel table { font-size: 12px; }
.nv-tabel code { font-size: 11.5px; background: #F3F4F6; padding: 1px 5px; border-radius: 4px; }
.vs-waarschuwing { margin: 0 16px 10px; padding: 8px 12px; border-radius: 8px; background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; font-size: 12.5px; line-height: 1.45; }
.vs-rij-omrij.is-onbekend, .tz-reis.is-onbekend { background: #FEF2F2 !important; color: #991B1B !important; border-color: #FECACA !important; }
/* instellingen: uitslag van de koppelingscheck in de kaart */
.status-detail { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; background: #F3F4F6; color: var(--text-2); }
.status-detail span::before { content: "• "; color: var(--text-muted); }
.status-detail.online { background: var(--green-bg); color: #166534; }
.status-detail.waarschuwing { background: #FFF7ED; color: #9A3412; }
.status-detail.fout { background: #FEF2F2; color: #991B1B; }

/* Monteur-detail: melding in de kaart "Inlog & status" + eenmalig wachtwoord met kopieerknop */
.md-kaart-melding { margin: 14px 20px 0; }
.md-kaart-melding .flash-ok,
.md-kaart-melding .flash-fout { margin-bottom: 10px; }
#inlog { scroll-margin-top: 80px; }
.md-voet { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.md-voet-ok { font-size: 13.5px; font-weight: 700; color: #166534; }
.ww-flash { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ww-flash-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(22, 101, 52, .25);
  color: #14532D;
  user-select: all;
}
.ww-flash-kopieer { padding: 4px 10px; font-size: 12.5px; min-height: 30px; }

/* Rapportcontrole: oplossingstekst aanpasbaar door kantoor — in-place, zonder verspringen */
.rp-oplossing { position: relative; transition: border-color .15s, box-shadow .15s, background .15s; }
.rp-oplossing-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.rp-oplossing-kop .vz-label { flex: 1; margin: 0; }
.rp-oplossing-modus { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--brand-accent); margin-left: 4px; }
.rp-oplossing-modus.is-aangepast { color: #B45309; }
.rp-oplossing-knop {
  border: 1px solid #BBF7D0;
  background: #fff;
  color: #15803D;
  border-radius: 99px;
  padding: 3px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  opacity: .8;
  transition: opacity .12s, background .12s;
}
.rp-oplossing:hover .rp-oplossing-knop, .rp-oplossing-knop:focus-visible { opacity: 1; }
.rp-oplossing-knop:hover { background: #DCFCE7; }
.rp-oplossing-ok { font-size: 12.5px; font-weight: 700; color: #15803D; }
/* klik op de tekst zelf = bewerken */
.rp-oplossing.is-klikbaar p { cursor: text; border-radius: 8px; margin: 0 -8px; padding: 4px 8px; transition: background .12s; }
.rp-oplossing.is-klikbaar p:hover { background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px #BBF7D0; }
.rp-oplossing.is-aangepast { background: #FFFBEB; border-color: #FDE68A; border-left-color: #D97706; }
.rp-oplossing.is-aangepast .vz-label { color: #92400E; }
/* bewerkstand: zelfde kaart, navy rand, tekstvak zonder eigen kader zodat niets verspringt */
.rp-oplossing.is-bewerkt { background: #fff; border-color: var(--brand-accent); border-left-color: var(--brand-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 12%, transparent); }
.rp-oplossing.is-bewerkt .vz-label { color: var(--brand-accent); }
.rp-oplossing-vak {
  display: block;
  width: 100%;
  margin: 0 -8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  resize: none;
  overflow: hidden;
  min-height: 3em;
  box-sizing: content-box;
}
.rp-oplossing-vak:focus { outline: none; background: #F8FAFF; }
.rp-oplossing-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.rp-oplossing-hint { font-size: 12.5px; color: var(--text-muted); flex: 1 1 220px; min-width: 0; }
.rp-oplossing-knoppen { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rp-oplossing-knoppen kbd {
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(0,0,0,.08);
  margin-left: 4px;
}
.rp-oplossing-opslaan, .rp-oplossing-annuleer, .rp-oplossing-terug {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 12px;
  border-radius: 9px;
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.rp-oplossing-opslaan { border: 0; background: var(--brand-accent); color: #fff; }
.rp-oplossing-opslaan kbd { background: rgba(255,255,255,.22); }
.rp-oplossing-opslaan:hover:not(:disabled) { background: var(--brand-accent-hover); transform: translateY(-1px); }
.rp-oplossing-opslaan:disabled { opacity: .45; cursor: default; }
.rp-oplossing-annuleer { border: 1px solid var(--border); background: #fff; color: var(--text); }
.rp-oplossing-annuleer:hover { border-color: var(--text-muted); }
.rp-oplossing-terug { border: 1px solid #FDE68A; background: #FFFBEB; color: #92400E; }
.rp-oplossing-terug:hover { background: #FEF3C7; }
.rp-oplossing-fout { margin-top: 8px; font-size: 13px; color: #B91C1C; }
.rp-oplossing-origineel { margin-top: 10px; font-size: 13px; }
.rp-oplossing-origineel summary { cursor: pointer; color: #B45309; font-weight: 600; }
.rp-oplossing-door { font-weight: 500; color: var(--text-muted); }
.rp-oplossing-origineel p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); white-space: pre-line; }
.wk-filter-hint { font-size: 12px; color: var(--text-muted); margin-left: 4px; align-self: center; }

/* ══════════════════════════════════════════════════════════════
   AFLEVERLIJST /artikelen (afl-*) — tegels, tabbladen, ongeplande artikelen per opdrachtgever
   ══════════════════════════════════════════════════════════════ */

.afl-kopknoppen { display: flex; align-items: center; gap: 10px; }
.afl-kopknop { width: auto; white-space: nowrap; }
.afl-stats { margin-bottom: 20px; }
.afl-scherm .rl-leeg { padding: 48px 20px 52px; }

.afl-tabel-wrap { overflow-x: auto; }
.afl-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
th.afl-num { text-align: right; }
.afl-leeg { color: var(--text-muted); }
.afl-sub { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.afl-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 24px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.afl-tel.is-oranje { color: #B45309; background: var(--yellow-bg); }
.afl-tel.is-blauw  { color: var(--blue); background: var(--blue-bg); }
.afl-tel.is-groen  { color: #15803D; background: var(--green-bg); }
.afl-og td strong { font-size: 13.5px; }

/* artikel-cel: echte artikelnaam vet, samengeplakte rest (referentie/klant uit oud systeem) klein eronder */
.afl-artikel strong { display: block; font-size: 13.5px; line-height: 1.3; }
.afl-aantal { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; background: var(--brand-accent); color: #fff; font-size: 11.5px; font-weight: 800; vertical-align: 1px; }
.afl-artikel small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); line-height: 1.3; }
.afl-klant span { display: block; font-weight: 600; }
.afl-klant small, .afl-verzoek small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }
.afl-verzoek .rl-ref { display: inline-block; white-space: nowrap; }
.afl-actie { text-align: right; white-space: nowrap; }
.afl-actie form { display: inline-block; }

/* werkbalk: zoeken + statuschips + open/dicht */
.afl-werkbalk {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: #FAFAFB;
}
.afl-zoek {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 300px;
  max-width: 440px;
  min-width: 0;
  padding: 0 12px;
  height: 36px;
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--border-radius);
  color: var(--text-muted);
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.afl-zoek:focus-within { border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 15%, transparent); }
.afl-zoek input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
}
.afl-zoek input::placeholder { color: var(--text-muted); }
.afl-zoek input::-webkit-search-cancel-button { cursor: pointer; }
.afl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.afl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1.5px solid var(--border-2);
  border-radius: 99px;
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s;
}
.afl-chip em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EEF0F3;
  color: var(--text-2);
}
.afl-chip:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.afl-chip.actief { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.afl-chip.actief em { background: rgba(255,255,255,.22); color: #fff; }
.afl-chip.is-niet:not(.actief) em { background: #FEE2E2; color: #B91C1C; }
.afl-chip.is-wacht:not(.actief) em { background: var(--blue-bg); color: var(--blue); }
.afl-chip.is-binnen:not(.actief) em { background: var(--green-bg); color: #15803D; }
.afl-klap { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-muted); }
.afl-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color .15s, text-decoration-color .15s;
}
.afl-link:hover { color: var(--brand-accent); text-decoration-color: currentColor; }

/* groepen per opdrachtgever */
.afl-groepen { display: flex; flex-direction: column; }
.afl-groep + .afl-groep { border-top: 1px solid var(--border); }
.afl-groep-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 20px;
  border: 0;
  background: var(--surface);
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: background .12s;
}
.afl-groep-kop:hover { background: #FAFBFE; }
.afl-groep.is-open .afl-groep-kop { background: #F7F8FC; border-bottom: 1px solid var(--border); }
.afl-chevron { width: 14px; color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.afl-groep-naam { font-size: 14.5px; font-weight: 800; }
.afl-groep-meta { font-size: 13px; color: var(--text-2); }
.afl-groep-badges { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.afl-groep .afl-tabel th { background: #FCFCFD; }
.afl-groep .afl-tabel tr:last-child td { border-bottom: none; }
.afl-voet {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: #FAFAFB;
  font-size: 12.5px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .afl-klap { margin-left: 0; }
  .afl-groep-kop { flex-wrap: wrap; }
  .afl-groep-badges { margin-left: 26px; justify-content: flex-start; width: 100%; }
}

/* ── Inboeken /artikelen/afwerken ── */
.afl-zoekhero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
.afl-zoekhero-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 0;
}
.afl-zoekhero-kop b { display: block; font-size: 15px; }
.afl-zoekhero-kop span:not(.afl-zoekhero-tel) { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.afl-zoekhero-tel { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.afl-zoekhero .afl-zoek-groot {
  margin: 12px 20px 16px;
  max-width: none;
  height: 46px;
  font-size: 18px;
  border-width: 2px;
}
.afl-zoekhero .afl-zoek-groot input { font-size: 15px; }
.afl-zoek-wis {
  border: 0;
  background: #EEF0F3;
  color: var(--text-2);
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.afl-zoek-wis:hover { background: var(--border-2); color: var(--text); }
.afl-zoekhero-leeg { padding: 0 20px 18px; font-size: 13px; color: var(--text-muted); }
.afl-zoekhero-hits { border-top: 1px solid var(--border); }
.afl-zoekhero.is-zoekend .afl-zoek-groot { border-color: var(--brand-accent); }

.afl-waarde-tekst { font-size: 20px; }
.afl-datums { gap: 12px; }
.afl-datums-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.afl-datums .dag-tabs { flex-wrap: wrap; }
.dag-tab.afl-verleden:not(.actief) { color: var(--text-muted); border-style: dashed; }

.afl-groep-kop-vast { cursor: default; flex-wrap: wrap; }
.afl-groep-kop-vast:hover { background: #F7F8FC; }
.afl-groep-acties { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.afl-groep-acties form { display: inline-block; }
.afl-groep-acties .btn-ghost { width: auto; white-space: nowrap; }

/* status + ✓/✕ in één cel */
th.afl-stand-kop, .afl-stand-cel { text-align: right; white-space: nowrap; }
.afl-stand { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.afl-stand-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 3px 10px;
  color: var(--text-2);
  background: #F0F1F4;
  transition: background .15s, color .15s;
}
.afl-stand-badge small { font-weight: 500; opacity: .8; }
.afl-stand.is-binnen .afl-stand-badge { color: var(--green); background: var(--green-bg); }
.afl-stand.is-niet .afl-stand-badge { color: #B91C1C; background: #FEE2E2; }
.afl-stand.is-wacht .afl-stand-badge { color: var(--blue); background: var(--blue-bg); }
.afl-stand-fout { color: #B91C1C !important; }
.afl-stand-knoppen { display: inline-flex; border: 1.5px solid var(--border-2); border-radius: 8px; overflow: hidden; }
.afl-stand-knop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.afl-stand-knop + .afl-stand-knop { border-left: 1.5px solid var(--border-2); }
.afl-stand-knop:hover { background: #F4F5F8; color: var(--text); }
.afl-stand-knop:disabled { opacity: .6; cursor: progress; }
.afl-stand-knop.is-binnen.aan { background: #15803D; color: #fff; }
.afl-stand-knop.is-niet.aan { background: #B91C1C; color: #fff; }
.afl-stand-knop.is-binnen:not(.aan):hover { color: #15803D; background: var(--green-bg); }
.afl-stand-knop.is-niet:not(.aan):hover { color: #B91C1C; background: #FEE2E2; }
.afl-afspraak span { display: block; font-size: 13px; }
.afl-afspraak small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }
.afl-tabel tbody tr:hover { background: #FAFBFE; }
@media (max-width: 1100px) {
  .afl-stand-knop span { display: none; }
  .afl-stand-knop { padding: 0 9px; }
}

/* ══════════════════════════════════════════════════════════════
   WINKELS (wi-*) — lijst, detail met kopkaart en cijferstrook, formulier, kiezer op verzoek
   ══════════════════════════════════════════════════════════════ */

.wi-tabel td { vertical-align: top; }
.wi-naam strong { font-size: 13.5px; }
.wi-naam .badge { margin-left: 8px; vertical-align: 1px; }
.wi-badge-inactief { color: var(--text-2); background: #F0F1F4; }
.wi-adres span, .wi-contact span { display: block; font-weight: 600; }
.wi-adres small, .wi-contact small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }
.wi-tenant {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  background: #F0F1F4;
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.wi-tenant:hover { background: var(--brand-accent); color: #fff; }
.wi-totaal { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-left: 4px; }

/* kopkaart: cijferstrook onderin (zelfde plek als de voortgangsstappen op een verzoek) */
.wi-kop { grid-template-areas: "links acties" "cijfers cijfers"; }
.wi-cijfers {
  grid-area: cijfers;
  list-style: none;
  margin: 0 -22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #F7F8FC;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
.wi-cijfers li { padding: 12px 22px; border-right: 1px solid var(--border); min-width: 0; }
.wi-cijfers li:last-child { border-right: 0; }
.wi-cijfers b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wi-cijfers span { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 2px; }
.wi-cijfers li.is-open b { color: var(--blue); }
.wi-link { color: inherit; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .15s, color .15s; }
.wi-link:hover { color: var(--brand-accent); text-decoration-color: currentColor; }

.wi-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.wi-kolom { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wi-grid .card { margin: 0; }
/* line-clamp werkt niet op een <td> (display blijft table-cell) → op een span erin */
.wi-klacht { max-width: 360px; font-size: 13px; color: var(--text-2); vertical-align: top; }
.wi-klacht-tekst { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.wi-notitie { padding: 14px 20px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.wi-knop-rood { color: #B91C1C !important; border-color: #FCA5A5 !important; width: auto; }
.wi-knop-rood:hover { background: #FEE2E2 !important; }
.wi-flash-fout { background: #FEF2F2; color: #B91C1C; }

/* formulier */
.wi-kaart { max-width: 760px; margin-bottom: 16px; }
.wi-form { padding: 18px 20px 6px; display: flex; flex-direction: column; gap: 20px; }
.wi-blok { display: flex; flex-direction: column; gap: 10px; }
.wi-rij { display: grid; gap: 12px; }
.wi-rij-naam { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.wi-rij-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wi-rij-straat { grid-template-columns: minmax(0, 1fr) 84px 84px; }
.wi-rij-plaats { grid-template-columns: 130px minmax(0, 1fr) 150px; }
.wi-veld { margin-bottom: 0; }
.wi-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.wi-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand-accent); }
.wi-acties { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--border); }
.wi-acties .btn-primary, .wi-acties .btn-ghost { width: auto; }

/* kiezer op het verzoek */
.wi-kiezer { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wi-kiezer-knop {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.wi-kiezer-knop:hover { color: var(--brand-accent); text-decoration-color: currentColor; }
.wi-kiezer-select {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--border-radius);
  background: var(--surface);
  max-width: 320px;
}

@media (max-width: 1000px) {
  .wi-grid { grid-template-columns: 1fr; }
  .wi-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wi-cijfers li:nth-child(2) { border-right: 0; }
  .wi-cijfers li:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .wi-rij-3, .wi-rij-naam { grid-template-columns: 1fr; }
  .wi-rij-plaats { grid-template-columns: 110px minmax(0, 1fr); }
  .wi-rij-plaats .wi-veld:last-child { grid-column: 1 / -1; }
}

/* ── Melding: dag boven de norm van 8 blokjes (planbord, agenda-dag, verzoek-vooruitblik) ── */
.over-limiet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-left: 4px solid #D97706;
  color: #78350F;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 20px;
}
.over-limiet .ol-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.over-limiet .ol-tekst b { color: #92400E; }
.over-limiet .ol-knoppen { display: flex; gap: 8px; flex: 0 0 auto; }
.over-limiet .knop.ol-toch { padding: 8px 16px; font-size: 13px; background: #D97706; color: #fff; }
.over-limiet .knop.ol-toch:hover { background: #B45309; }
.over-limiet.is-mail {
  background: #EFF6FF;
  border-color: #93C5FD;
  border-left-color: #2563EB;
  color: #1E3A8A;
}
.over-limiet.is-mail .ol-tekst b { color: #1D4ED8; }
.over-limiet.is-mail .ol-fout { color: #B91C1C; }
.over-limiet .knop.ol-mail-ja { padding: 8px 16px; font-size: 13px; background: #2563EB; color: #fff; }
.over-limiet .knop.ol-mail-ja:hover { background: #1D4ED8; }
.pd-kop .over-norm { color: #B91C1C; font-weight: 700; }

/* Dump (Instellingen → Migratie) */
.dump { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.dump-stand {
  background: #F7F8FA;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 12px;
}
.dump-stand.is-bezig { border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border)); }
.dump-stand-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dump-stand-kop strong { font-size: 14.5px; }
.dump-map { font-size: 12px; color: var(--text-muted); }
.dump-pct {
  flex: 0 0 auto;
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
}
.dump-nu {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.45;
}
.dump-stand-teller {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.dump-stand.is-bij { background: #F4FBF6; border-color: #BBF7D0; }
.dump-stand.is-bij .dump-pct { color: #15803D; }
.dump-stand.is-inhalen { background: #FFFBEB; border-color: #FCD34D; }
.dump-stand.is-inhalen .dump-pct { color: #B45309; }
.dump-stand.is-bezig,
.dump-stand.is-lijsten { border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--border)); }
.dump-stand.is-bezig .dump-pct,
.dump-stand.is-lijsten .dump-pct { color: var(--brand-accent); }
.dump-stand.is-uit,
.dump-stand.is-geen-cookie,
.dump-stand.is-nog-niet { opacity: 0.92; }
.dump-balk {
  height: 12px;
  background: #E6E8EE;
  border-radius: 99px;
  overflow: hidden;
}
.dump-balk span {
  display: block;
  height: 100%;
  background: var(--brand-accent);
  border-radius: 99px;
  transition: width .4s ease;
}
.dump-cijfers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.dump-cijfers-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dump-cijfers li { display: flex; flex-direction: column; gap: 2px; }
.dump-cijfers b { font-size: 20px; font-variant-numeric: tabular-nums; }
.dump-cijfers span { font-size: 12px; color: var(--text-muted); }
.dump-acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.dump-acties .btn-primary, .dump-acties .btn-ghost { width: auto; }
.dump-map-kies { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.dump-droog { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.dump-fouten { margin-top: 14px; }
.dump-fouten ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 180px;
  overflow: auto;
  font-size: 12.5px;
}
.dump-fouten li { padding: 4px 0; border-bottom: 1px solid var(--border); color: var(--text-2); }
.dump-pauze-hint { margin: 8px 0 0; }
.dump-stappen { display: flex; flex-direction: column; gap: 8px; }
.dump-stap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.dump-stap p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.dump-stap.is-bezig { border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--border)); }
.dump-stap.is-klaar { background: #F4FBF6; }
.dump-stap-knoppen { display: flex; gap: 8px; flex: 0 0 auto; }
.dump-stap-knoppen .btn-primary, .dump-stap-knoppen .btn-ghost { width: auto; }
.dump-sync-stappen {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  max-height: 220px;
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.dump-sync-stappen li {
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.dump-sync-stappen li:first-child { font-weight: 600; color: var(--text); }
.dump-sync-stappen li:last-child { border-bottom: 0; }
.dump-log {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  font-size: 11.5px;
  line-height: 1.45;
  background: #1C1F26;
  color: #E8EAED;
  border-radius: 10px;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 720px) {
  .dump-cijfers { grid-template-columns: 1fr; }
  .dump-cijfers-4 { grid-template-columns: 1fr 1fr; }
  .dump-pct { font-size: 26px; }
  .dump-stap { flex-direction: column; align-items: stretch; }
}

/* ── Planbord: geselecteerde klant handmatig geplaatst (nog bevestigen) ── */
.vs-voorbeeld-pil.is-handmatig { color: #92400E; background: #FEF3C7; border-color: #FCD34D; }
.vs-handmatig-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 16px 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  border-left: 4px solid #D97706;
  color: #78350F;
}
.vs-handmatig-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; font-size: 12.5px; }
.vs-handmatig-tekst b { font-size: 13.5px; color: #92400E; }
.vs-handmatig-knoppen { display: flex; gap: 8px; flex: 0 0 auto; }
.vs-handmatig-knoppen .btn-ghost { padding: 7px 12px; }
.knop.vs-handmatig-ok { padding: 8px 16px; font-size: 13px; background: #D97706; color: #fff; }
.knop.vs-handmatig-ok:hover { background: #B45309; }
/* de ghost-regel zelf: amber i.p.v. oranje, met een zachte puls zodat je hem niet mist */
.dl-blok.vs-blok.vs-nieuw.is-handmatig {
  border-color: #D97706;
  background: #FFFBEB;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, .18);
  animation: vs-handmatig-puls 1.6s ease-in-out 3;
}
.dl-blok.vs-blok.vs-nieuw.is-handmatig .blok-nr { background: #D97706; }
.dl-blok.vs-blok.vs-nieuw.is-handmatig .vs-blok-badge { background: #D97706; }
.dl-blok.vs-blok.vs-nieuw.is-handmatig .vs-blok-plan { background: #D97706; }
.dl-blok.vs-blok.vs-nieuw.is-handmatig .vs-blok-plan:hover { background: #B45309; }
@keyframes vs-handmatig-puls {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217, 119, 6, .18); }
  50% { box-shadow: 0 0 0 7px rgba(217, 119, 6, .32); }
}
/* geen plek op de voorkeursdag: uitleg dat de planner de klant zelf mag plaatsen */
.vs-leeg.vs-leeg-handmatig { display: flex; flex-direction: column; gap: 3px; margin: 0 16px 14px; padding: 10px 12px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FCD34D; color: #78350F; }
.vs-leeg.vs-leeg-handmatig b { color: #92400E; }

/* ── 🔒 Vergrendelde afspraak (blijft op zijn uur; agent/herschikken/slepen blijven eraf) ── */
.dl-slot {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 12px; line-height: 1;
  cursor: pointer;
  transition: background .13s, transform .13s;
  opacity: .75;
}
.dl-slot:hover { background: rgba(255,255,255,.32); opacity: 1; transform: scale(1.06); }
.dl-slot.aan { background: #FCD34D; color: #78350F; opacity: 1; }
.dl-slot.aan:hover { background: #FBBF24; }
.dl-blok.dl-rij.vast { cursor: default; box-shadow: inset 0 0 0 2px #FCD34D; }
.dl-blok.dl-rij.vast .dl-nr { background: #FCD34D; color: #78350F; }
.dl-vast-chip {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 0 6px; height: 17px; border-radius: 99px;
  background: #FEF3C7; color: #92400E; font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
/* agenda-dag: vergrendelde blokken niet sleepbaar, slotje in de hoek */
.agenda-blok.vast { cursor: default; box-shadow: inset 0 0 0 2px #FCD34D; }
.agenda-blok .ab-slot { position: absolute; top: 3px; right: 4px; font-size: 11px; line-height: 1; }
.wk-chip .wk-chip-slot { font-size: 10px; line-height: 1; margin-left: 2px; }
.vz-vast { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.vz-vast-knop.aan { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.vz-vast-fout { font-size: 11px; color: #B91C1C; }


/* ── SYSTEEMSTATUS (echte checks, 17-9-2026) ─────────────────────────────── */
.sys-dot.is-waarschuwing { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }
.sys-dot.is-fout { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }
.sys-dot.is-uit, .sys-dot.is-info, .sys-dot.is-laden { background: #CBD5E1; box-shadow: 0 0 0 3px rgba(148, 163, 184, .18); }
/* de groene hartslag hoort alleen bij "alles online" */
.sys-status:not(.is-online) > .sys-dot { animation: none; }
.sys-status:not(.is-online) > .sys-dot::after { display: none; }
.sys-status.is-fout { color: #B91C1C; }
.sys-status.is-waarschuwing { color: #B45309; }
.sys-status:focus-within .sys-panel, .sys-status:focus .sys-panel { display: block; }
.sys-status:focus { outline: none; }
.sys-panel-breed { width: 360px; max-height: 70vh; overflow-y: auto; color: var(--text-2); }
.sys-regel { padding: 2px 0 6px; border-bottom: 1px solid var(--border); }
.sys-regel:last-of-type { border-bottom: 0; }
.sys-toelichting { margin: 0 0 0 16px; font-size: 11.5px; font-weight: 500; line-height: 1.4; color: var(--text-muted); }
.sys-groep { margin: 10px 0 2px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }


/* ── PLANBORD: HAAK PER KLANT-TIJDBLOK (17-9-2026) ───────────────────────────
   Alles binnen één haak valt in hetzelfde tijdblok (08–12 blauw, 10–14 geel, 12–16 paars).
   "Overlap" blijft een rood label op de regel, maar neemt de blokkleur niet meer over. */
.dl-tb {
  position: relative;
  margin: 10px 0 12px;
  padding: 2px 0 6px 12px;
  border-left: 4px solid var(--tb);
  border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tb) 9%, transparent), transparent 55%);
}
/* de twee pootjes van de [ */
.dl-tb::before, .dl-tb::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 4px;
  background: var(--tb);
}
.dl-tb::before { top: 0; border-radius: 0 4px 4px 0; }
.dl-tb::after { bottom: 0; border-radius: 0 4px 4px 0; }
.dl-tb-kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0 4px 2px;
  font-size: 11.5px;
}
.dl-tb-kop b { font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--tb) 78%, #0F172A); }
.dl-tb-kop span { color: var(--text-muted); font-weight: 600; }
/* overlap: rood label en rode uren, maar de band houdt de kleur van het tijdblok */
.dl-tb .dl-uur.is-overlap { border-right-color: var(--tb); }
.dl-tb .vs-ghost-reis { margin-left: 76px; }

/* ── VERZOEK ANNULEREN (17-9-2026) ───────────────────────────────────────── */
.vz-annuleer-knop { color: #B91C1C; }
.vz-annuleer-knop:hover { border-color: #DC2626; color: #991B1B; }
.vz-annuleer-laag { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .45); }
.vz-annuleer-venster { width: min(520px, 100%); background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.vz-annuleer-venster h2 { font-size: 17px; margin: 0; }
.vz-annuleer-venster p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.vz-annuleer-venster label { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.vz-annuleer-venster label em { font-style: normal; font-weight: 600; color: #B91C1C; margin-left: 6px; }
.vz-annuleer-venster textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; }
.vz-annuleer-venster textarea:focus { outline: 2px solid rgba(220, 38, 38, .25); border-color: #DC2626; }
.vz-annuleer-fout { color: #B91C1C !important; font-weight: 600; }
.vz-annuleer-knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.vz-annuleer-bevestig { background: #DC2626; border-color: #DC2626; }
.vz-annuleer-bevestig:hover:not(:disabled) { background: #B91C1C; border-color: #B91C1C; }
.vz-annuleer-bevestig:disabled { opacity: .5; cursor: not-allowed; }


/* ── STATUSPAGINA /status (18-9-2026) ────────────────────────────────────── */
.st-hoofd { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 20px 24px; border-radius: 16px; border: 1px solid var(--border); background: #fff; margin-bottom: 18px; border-left: 6px solid #22C55E; }
.st-hoofd.is-waarschuwing { border-left-color: #F59E0B; }
.st-hoofd.is-fout { border-left-color: #EF4444; }
.st-hoofd-links { display: flex; align-items: center; gap: 16px; }
.st-hoofd-icoon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #fff; background: #22C55E; flex-shrink: 0; }
.st-hoofd.is-waarschuwing .st-hoofd-icoon { background: #F59E0B; }
.st-hoofd.is-fout .st-hoofd-icoon { background: #EF4444; }
.st-hoofd h2 { margin: 0; font-size: 20px; }
.st-hoofd p { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); }
.st-hoofd-cijfers { display: flex; gap: 28px; margin: 0; }
.st-hoofd-cijfers dt, .st-cijfers dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.st-hoofd-cijfers dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; color: var(--text); }
.st-groep { font-size: 14px; font-weight: 800; margin: 22px 0 10px; }
.st-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.st-kaart { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px 12px; min-width: 0; }
.st-kaart.is-fout { border-color: #FCA5A5; }
.st-kaart.is-waarschuwing { border-color: #FCD34D; }
.st-kaart-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.st-kaart-kop h3 { margin: 0; font-size: 15px; }
.st-detail { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); min-height: 36px; }
.st-cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.st-cijfers dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.st-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; color: #166534; background: #DCFCE7; }
.st-badge i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; background: #22C55E; }
.st-badge.is-waarschuwing { color: #92400E; background: #FEF3C7; }
.st-badge.is-waarschuwing i { background: #F59E0B; }
.st-badge.is-fout { color: #991B1B; background: #FEE2E2; }
.st-badge.is-fout i { background: #EF4444; }
.st-badge.is-uit, .st-badge.is-info, .st-badge.is-geen, .st-badge.is-neutraal { color: #475569; background: #F1F5F9; }
.st-badge.is-uit i, .st-badge.is-info i, .st-badge.is-geen i, .st-badge.is-neutraal i { background: #94A3B8; }
/* 24-uursstrook: 96 kwartieren, 2px lucht ertussen; storing is ook lager/hoger, niet alleen een andere kleur */
.st-lijn { display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.st-vak { position: relative; flex: 1 1 0; min-width: 0; height: 100%; border-radius: 2px; background: #22C55E; }
.st-vak.is-waarschuwing { background: #F59E0B; height: 72%; }
.st-vak.is-fout { background: #EF4444; height: 100%; outline: 1px solid #991B1B; outline-offset: -1px; }
.st-vak.is-neutraal { background: #CBD5E1; height: 40%; }
.st-vak.is-geen { background: repeating-linear-gradient(135deg, #94A3B8 0 2px, #E2E8F0 2px 5px); height: 40%; }
.st-vak:hover, .st-vak:focus { filter: brightness(.88); outline: 2px solid var(--text); outline-offset: 1px; z-index: 3; }
.st-vak[data-tip]:hover::after, .st-vak[data-tip]:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #0F172A; color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 7px; pointer-events: none; z-index: 5; }
.st-lijn .st-vak:nth-child(-n+14)[data-tip]::after { left: 0; transform: none; }
.st-lijn .st-vak:nth-last-child(-n+14)[data-tip]::after { left: auto; right: 0; transform: none; }
.st-lijn-as { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10.5px; color: var(--text-muted); }
.st-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 16px 0 4px; font-size: 12px; color: var(--text-2); }
.st-legenda span { display: inline-flex; align-items: flex-end; gap: 6px; }
.st-legenda .st-vak { flex: none; width: 10px; height: 14px; }
.st-legenda .st-vak.is-waarschuwing { height: 10px; }
.st-legenda .st-vak.is-neutraal, .st-legenda .st-vak.is-geen { height: 6px; }
.st-toelichting { font-size: 12.5px; color: var(--text-2); max-width: 460px; }
@media (max-width: 900px) { .st-raster { grid-template-columns: 1fr; } .st-cijfers { grid-template-columns: repeat(2, 1fr); } }
a.sys-status { text-decoration: none; cursor: pointer; }


/* ── NIEUWE OPDRACHT (/opdrachten/nieuw, 18-9-2026) ─────────────────────── */
.oo-soorten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; max-width: 760px; }
.oo-soort { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--border); border-radius: 16px; text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.oo-soort:hover { border-color: var(--brand-accent); box-shadow: var(--shadow-sm); }
.oo-soort-ico { font-size: 26px; }
.oo-soort b { font-size: 16px; }
.oo-soort small { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.oo-tenants { display: flex; flex-wrap: wrap; gap: 8px; }
.oo-tenant { padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-weight: 700; font-size: 13px; text-decoration: none; color: var(--text); }
.oo-tenant:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.oo-form { max-width: 820px; }
.oo-blok { padding: 14px 20px 18px; }
.oo-zoek { position: relative; }
.oo-zoek .afl-zoek { width: 100%; }
.oo-treffers { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 320px; overflow: auto; }
.oo-treffers button { width: 100%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 9px 10px; border: 0; background: none; text-align: left; border-radius: 8px; cursor: pointer; font: inherit; }
.oo-treffers button:hover { background: #F1F5F9; }
.oo-treffers b { color: var(--brand-accent); }
.oo-treffers small { color: var(--text-muted); }
.oo-treffers em { margin-left: auto; font-style: normal; }
.oo-verzoek { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #F8FAFC; border: 1px solid var(--border); font-size: 13.5px; }
.oo-verzoek .btn-ghost { margin-left: auto; }
.oo-keuzes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.oo-keuze { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: #fff; font-size: 13px; min-width: 200px; }
.oo-keuze.is-aan { border-color: var(--brand-accent); box-shadow: 0 0 0 2px rgba(31, 42, 96, .12); }
.oo-keuze input { margin-top: 3px; }
.oo-keuze small { display: block; color: var(--text-muted); }
.oo-voet { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--border); }
.oo-wizard .wz-scherm, .oo-wizard .wz-kaart { max-width: 900px; }
.vk-ophalen { background: #FEF3C7; color: #92400E; }
.vk-ophalen-wacht { background: #FEE2E2; color: #B91C1C; }
/* Reparatie met open ophaalopdracht: eigen regel onder de kop van het kaartje, klikbaar */
.vk-ophaal-regel { display: block; margin: 2px 0 6px; padding: 5px 9px; border-radius: 8px; background: #FEF3C7; color: #92400E; font-size: 11.5px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.vk-ophaal-regel:hover { filter: brightness(.96); }
.vk-ophaal-regel.is-wacht { background: #FEE2E2; color: #B91C1C; }
.vs-fout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vs-fout .vs-fout-knop { white-space: nowrap; }
.flash-met-knop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dl-ophalen { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: #FEF3C7; color: #92400E; margin-left: 6px; }
.vz-koppeling { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.vz-koppeling p { margin: 4px 0; }
.vz-koppeling a { color: var(--brand-accent); text-decoration: none; }

/* artikelregels: inboeken + ophaalopdracht naast elkaar (verzoekpagina en afleverlijst) */
.art-acties { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; }
.art-acties > form { margin: 0; display: contents; }
.art-acties-cel { width: 1%; white-space: nowrap; text-align: right; }
.art-acties .btn-ghost.btn-klein { padding: 4px 10px; font-size: 12px; line-height: 1.3; }
.art-acties .btn-primary.btn-tabel { order: -1; }
.btn-ghost.btn-klein { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.afl-actie .afl-ophaal { margin-left: 6px; }

/* ── TOEWIJZEN AAN COLLEGA (18-9-2026) ───────────────────────────────────── */
.tw-venster { width: min(600px, 100%); max-height: 88vh; overflow: auto; }
.tw-blok { display: flex; flex-direction: column; gap: 6px; }
.tw-label { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.tw-stop { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
.tw-stop.is-uit { opacity: .55; cursor: default; }
.tw-stop small { color: var(--text-muted); }
.tw-collegas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.tw-collega { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 13px; }
.tw-collega.is-aan { border-color: var(--brand-accent); box-shadow: 0 0 0 2px rgba(31, 42, 96, .12); }
.tw-collega.is-uit { opacity: .5; cursor: not-allowed; }
.tw-collega .kleurdot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.tw-collega-tekst { display: flex; flex-direction: column; gap: 2px; }
.tw-collega-tekst small { color: var(--text-muted); line-height: 1.35; }
.tw-collega-tekst small.tw-over { color: #B45309; font-weight: 700; }
.tw-collega-tekst small.tw-ok { color: #166534; font-weight: 700; }
.tw-ziek { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-top: 4px; cursor: pointer; }


/* ── DAG OVERDRAGEN: sleepbord in planbord-opmaak (19-9-2026) ─────────────────
   Links de dag van de zieke monteur, rechts per collega (tabs) diens dag; beide met de
   urenkolom, tijdblok-haken en ＋-regels van het planbord (.dl-*, .tz). */
.ov-bord .plan-detail.ov-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
@media (max-width: 1250px) { .ov-bord .plan-detail.ov-detail { grid-template-columns: 1fr; } .ov-bord .ov-bron { border-right: 0; border-bottom: 1px solid var(--border); } }
.ov-bron { background: #FAFBFD; }
.ov-doel { min-width: 0; }
.ov-doel .monteur-tabs { padding-bottom: 4px; }
/* collega-tabs zijn knoppen (ook droppable): zelfde uiterlijk als de planbord-tabs */
.ov-tabs .m-tab { background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ov-tabs .m-tab.is-uit { opacity: .5; cursor: not-allowed; }
.ov-tabs .m-tab.drop-hover { border-color: var(--brand-accent); background: #EEF2FF; box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.ov-tab-stand { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-left: 2px; }
.ov-badge { font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; background: #EA580C; border-radius: 99px; padding: 1px 6px; margin-left: 2px; }
/* een klus die (in het voorbeeld) al naar een collega gaat: blijft op zijn plek staan, maar vervaagd */
.dl-blok.dl-rij.ov-weg { background: #fff; color: var(--text-muted); border: 2px dashed #D5DAE6; box-shadow: none; cursor: default; }
.dl-blok.dl-rij.ov-weg .blok-nr { background: #E5E7EB; color: var(--text-muted); }
.dl-blok.dl-rij.ov-weg .dl-mid b { color: var(--text-2); }
.dl-blok.dl-rij.ov-weg .dl-net.ov-naar { color: #fff; background: #EA580C; }
.dl-blok.dl-rij.ov-sleept { opacity: .4; }
/* in het sleepbord zijn de ＋-regels altijd zichtbaar (niet alleen bij hover): dat is hier het hele punt */
.ov-bord .tz.tz-lijn .tz-plus, .ov-bord .tz.tz-lijn .tz-tekst { opacity: .75; }
.ov-bord .dl-blok.dl-rij.mee { cursor: default; opacity: 1; border-style: solid; }
.ov-voet { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 20; }
.ov-bord.is-bezig .tz, .ov-bord.is-bezig .dl-blok { pointer-events: none; }

/* ── OPDRACHTGEVERS: overzicht met zoeken, sorteren en slapende opdrachtgevers (19-9-2026) ── */
.og-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.og-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 12px 16px; box-shadow: var(--shadow-sm); }
.og-stat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.og-stat span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.og-stat-accent b { color: var(--brand-accent); }
.og-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.og-zoek { flex: 1 1 260px; max-width: 420px; padding: 9px 14px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit; font-size: 13.5px; background: #fff; }
.og-zoek:focus { outline: 0; border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 15%, transparent); }
.og-sorteer { display: inline-flex; gap: 4px; padding: 3px; background: #EEF0F5; border-radius: 10px; }
.og-sorteer-knop { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.og-sorteer-knop.is-aan { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
.og-leeg { margin: 8px 0 16px; }
.og-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
.og-kaart {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--border-radius-lg);
  padding: 16px 18px 14px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .12s, box-shadow .12s;
}
.og-kaart::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--og, var(--brand-accent)); }
.og-kaart:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.og-kaart.is-slapend { opacity: .8; }
.og-kaart-kop { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.og-logo { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #F4F5F9; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.og-logo img { max-width: 40px; max-height: 32px; width: auto; height: auto; object-fit: contain; }
.og-logo-letter { font-weight: 800; font-size: 18px; color: var(--og, var(--brand-accent)); }
.ogo-naam { min-width: 0; flex: 1; }
.ogo-naam b { display: block; font-size: 15px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ogo-naam small { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-badge { flex: none; font-size: 11px; font-weight: 800; color: #fff; background: #EA580C; border-radius: 99px; padding: 3px 9px; }
.og-cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.og-cijfers > div { background: #F8F9FC; border-radius: 10px; padding: 8px 6px; text-align: center; }
.og-cijfers b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.og-cijfers span { display: block; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.og-cijfers > div:first-child b { color: var(--og, var(--brand-accent)); }
.og-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); }
.og-meta .is-waarschuwing { color: #B45309; font-weight: 700; }
.ogo-acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 4px; border-top: 1px dashed var(--border); }
.og-portaal { margin-left: auto; }
.og-slapend { margin-top: 8px; }
.og-slapend-kop { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 10px 4px; font: inherit; cursor: pointer; color: var(--text); border-top: 1px solid var(--border); }
.og-slapend-kop span { color: var(--text-muted); }
.og-slapend-kop small { color: var(--text-muted); font-size: 12px; }
.og-raster-compact { margin-top: 12px; }
@media (max-width: 640px) { .og-cijfers { grid-template-columns: repeat(2, 1fr); } }

/* ── PORTAAL-AGENDA in backoffice-opmaak (20-9-2026): dagraster alleen-lezen ── */
.agenda-grid.alleen-lezen .cel { cursor: default; }
.agenda-blok.lezen { cursor: pointer; }
.agenda-blok.lezen:hover { filter: brightness(1.06); }
.portaal-shell .wk-filter-chip.actief { border-color: color-mix(in srgb, var(--chip, var(--brand-accent)) 60%, white); }

/* ── FACTUREN: nog te factureren per opdrachtgever (20-9-2026) ─────────────── */
.fc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.fc-stat-link { text-decoration: none; color: inherit; border-style: dashed; }
.fc-stat-link:hover { border-color: var(--brand-accent); }
.fc-stat-link.is-aan { border-style: solid; border-color: var(--brand-accent); }
.fc-og-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px 4px; }
.fc-oud-melding { margin: 12px 20px 0; padding: 10px 14px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 13px; }
.fc-groep { margin: 18px 20px 0; border: 1px solid var(--border); border-left: 4px solid var(--og, #94A3B8); border-radius: 12px; overflow: hidden; background: var(--surface); }
.fc-groep:last-of-type { margin-bottom: 18px; }
.fc-groep-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; background: color-mix(in srgb, var(--og, #94A3B8) 8%, #fff); border-bottom: 1px solid var(--border); font-size: 13.5px; }
.fc-groep-kop b { font-size: 14px; }
.fc-groep-kop small { color: var(--text-muted); font-size: 12px; }
.fc-groep-kop .log-link { margin-left: auto; font-size: 12px; }
.fc-waarschuwing { font-style: normal; font-size: 11px; font-weight: 800; color: #92400E; background: #FEF3C7; border-radius: 99px; padding: 2px 8px; }
.fc-tabel th { font-size: 11.5px; }
.fc-tabel td { vertical-align: middle; }
.fc-datum { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-sub { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.fc-werk { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.fc-prijzen { font-size: 12px; font-weight: 700; color: #B45309; background: #FEF3C7; border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.fc-leeg { padding: 36px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.fc-tabel .btn-klein, .fc-tabel .badge { white-space: nowrap; }

/* ── OPDRACHTGEVERS: lijstweergave (20-9-2026, standaard) ─────────────────── */
.og-lijst { margin-bottom: 20px; overflow: hidden; }
.og-lijst.is-compact { margin-top: 12px; }
.og-tabel th.og-num, .og-tabel td.og-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.og-tabel td { vertical-align: middle; }
.og-tabel tbody tr.is-slapend { opacity: .7; }
.og-lijst-naam { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.og-lijst-naam b { display: block; font-size: 13.5px; }
.og-lijst-naam small { display: block; font-size: 11.5px; color: var(--text-muted); }
.og-logo.og-logo-klein { width: 36px; height: 36px; border-radius: 9px; border-left: 3px solid var(--og, var(--brand-accent)); }
.og-logo.og-logo-klein img { max-width: 28px; max-height: 24px; }
.og-logo.og-logo-klein .og-logo-letter { font-size: 14px; }
.og-nul { color: var(--text-muted); }
.og-ok { color: var(--green); font-weight: 800; }
.og-laatste { white-space: nowrap; color: var(--text-2); }
.og-tabel td.is-waarschuwing { color: #B45309; font-weight: 700; }
.og-acties-cel { text-align: right; white-space: nowrap; }
.og-acties-cel .btn-klein { margin-left: 6px; }
.og-acties-cel .og-portaal { display: inline; margin: 0; }
.og-tabel th:first-child, .og-tabel td:first-child { min-width: 230px; }
.og-lijst-naam b, .og-lijst-naam small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

/* ── MAILSTATUS op de opdrachtpagina (20-9-2026): verzonden → afgeleverd → geopend ── */
.ms-leeg { padding: 18px 20px 6px; font-size: 13px; color: var(--text-muted); }
.ms-lijst { list-style: none; margin: 0; padding: 4px 20px 0; }
.ms-rij { padding: 14px 0; border-bottom: 1px solid var(--border); }
.ms-rij:last-child { border-bottom: 0; }
.ms-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13.5px; }
.ms-naar { color: var(--text-muted); font-size: 12.5px; }
.ms-badge { margin-left: auto; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: #F1F2F6; color: var(--text-2); white-space: nowrap; }
.ms-badge.is-bezorgd { background: #DBEAFE; color: #1D4ED8; }
.ms-badge.is-gelezen { background: var(--green-bg); color: var(--green); }
.ms-badge.is-fout { background: #FEE2E2; color: #B91C1C; }
.ms-badge.is-wacht { background: #FEF3C7; color: #92400E; }
/* tijdlijn: bolletjes en lijn op een eigen regel bóven de tekst (niet meer door de woorden heen) */
.ms-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.ms-stappen li { position: relative; padding: 22px 12px 0 0; font-size: 12.5px; }
.ms-stappen li i { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #CBD5E1; background: #fff; box-sizing: border-box; z-index: 1; }
.ms-stappen li::before { content: ""; position: absolute; left: 14px; right: 0; top: 6px; border-top: 2px dashed #E3E7F0; }
.ms-stappen li:last-child::before { display: none; }
.ms-stappen li.is-klaar i { border-color: #1D4ED8; background: #1D4ED8; }
.ms-stappen li.is-klaar::before { border-top-style: solid; border-color: #93C5FD; }
.ms-stappen li.is-gelezen i { border-color: var(--green); background: var(--green); box-shadow: 0 0 0 4px var(--green-bg); }
.ms-stappen li.is-fout i { border-color: #DC2626; background: #DC2626; }
.ms-stappen li span { display: block; font-weight: 700; color: var(--text); }
.ms-stappen li:not(.is-klaar):not(.is-fout) span { color: var(--text-muted); font-weight: 600; }
.ms-stappen li small { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 1px; }
.ms-stappen li.is-fout small { color: #B91C1C; }
.ms-voet { margin: 0; padding: 10px 20px 16px; font-size: 11.5px; color: var(--text-muted); }
.ms-kort { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #F1F2F6; color: var(--text-2); }
.ms-kort.is-bezorgd { background: #DBEAFE; color: #1D4ED8; }
.ms-kort.is-gelezen { background: var(--green-bg); color: var(--green); }
.ms-kort.is-fout { background: #FEE2E2; color: #B91C1C; }
@media (max-width: 720px) { .ms-stappen { grid-template-columns: 1fr; gap: 10px; } .ms-stappen li::before { display: none; } }

/* ── NIEUWE OPDRACHT · reparatie namens opdrachtgever (20-9-2026): wizard in backoffice-opmaak ── */
.on-reparatie { max-width: 1040px; }
.on-kop { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 16px; }
.on-kop-tekst { min-width: 0; flex: 1 1 380px; }
.on-kop h2 { margin: 0 0 4px; font-size: 16px; }
.on-kop .hint { margin: 0; line-height: 1.5; }
.on-kiezer { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.on-kiezer label { font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.on-kiezer select { min-width: 260px; padding: 9px 36px 9px 12px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 700; background: #fff; }
.on-kiezer select:focus { outline: 0; border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 15%, transparent); }
.on-wacht { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 20px; border: 1.5px dashed #D5DAE6; border-radius: 16px; background: #FBFCFE; text-align: center; color: var(--text-2); }
.on-wacht-ico { font-size: 30px; margin-bottom: 4px; }
.on-wacht b { font-size: 15px; color: var(--text); }
.on-wacht small { font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; }
/* de portaal-wizard zonder zijn eigen volle-pagina-achtergrond en kop: gewoon een kaart in de backoffice */
.wz.wz-kantoor { min-height: 0; background: none; }
.wz-kantoor .wz-shell { max-width: none; margin: 0; padding: 0 0 24px; }
.oo-wizard .wz-kantoor .wz-scherm, .oo-wizard .wz-kantoor .wz-kaart { max-width: none; }
.wz-kantoor .wz-stappen { margin-bottom: 14px; }
.wz-kantoor .wz-kaart { border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.wz-kantoor .wz-body { animation: none; }

/* ── OPDRACHTGEVER-DETAIL (20-9-2026): kop met logo en cijfers, zijnavigatie, inhoud rechts ── */
.ogd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ogd-terug { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-decoration: none; margin-bottom: 8px; }
.ogd-terug:hover { color: var(--brand-accent); }
.ogd-naam { display: flex; align-items: center; gap: 16px; }
.ogd-naam h1 { margin: 0; }
.og-logo.ogd-logo { width: 60px; height: 60px; border-radius: 14px; border-left: 4px solid var(--og, var(--brand-accent)); }
.og-logo.ogd-logo img { max-width: 48px; max-height: 40px; }
.og-logo.ogd-logo .og-logo-letter { font-size: 22px; }
.ogd-sub { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.ogd-sub a { color: var(--brand-accent); font-weight: 600; text-decoration: none; }
.ogd-punt { color: var(--text-muted); }
.ogd-mist { color: #B45309; font-weight: 600; }
.ogd-chip { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px; }
.ogd-chip.is-ok { color: var(--green); background: var(--green-bg); }
.ogd-chip.is-let { color: #92400E; background: #FEF3C7; }
.ogd-acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex-shrink: 0; margin-top: 24px; }
.ogd-acties .btn-ghost { width: auto; }
.ogd-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ogd-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.ogd-nav { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px; box-shadow: var(--shadow-sm); position: sticky; top: 84px; }
.ogd-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text-2); transition: background .12s, color .12s; }
.ogd-nav-item:hover { background: #F4F5F8; color: var(--text); }
.ogd-nav-item.actief { background: color-mix(in srgb, var(--brand-accent) 10%, white); color: var(--text); box-shadow: inset 3px 0 0 var(--brand-accent); }
.ogd-nav-tekst { min-width: 0; flex: 1; }
.ogd-nav-tekst b { display: block; font-size: 13.5px; }
.ogd-nav-tekst small { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogd-nav-teller { flex: none; font-size: 11px; font-weight: 800; color: var(--text-2); background: #EEF0F5; border-radius: 99px; min-width: 22px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.ogd-nav-item.actief .ogd-nav-teller { background: var(--brand-accent); color: #fff; }
.ogd-inhoud { margin-bottom: 24px; }
.ogd-inhoud .og-tabblad { border-top: 0; }
@media (max-width: 960px) {
  .ogd-layout { grid-template-columns: 1fr; }
  .ogd-nav { position: static; flex-direction: row; overflow-x: auto; }
  .ogd-nav-item { flex: 0 0 auto; }
  .ogd-nav-tekst small { display: none; }
}

/* ── ROUTES (20-9-2026): ritten links, kaart rechts die meeschuift ────────── */
.rt-layout { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 20px; align-items: start; }
.rt-lijst { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rt-leeg { padding: 28px 20px; display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: 13px; }
.rt-leeg b { color: var(--text); font-size: 14px; }
.rt-rit { margin: 0; border-left: 4px solid var(--mk, var(--brand-accent)); overflow: hidden; transition: opacity .15s, box-shadow .15s; }
.rt-rit.is-actief { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk, var(--brand-accent)) 22%, transparent), var(--shadow); }
.rt-rit.is-gedimd { opacity: .55; }
.rt-rit-kop { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--border); text-align: left; font: inherit; cursor: pointer; color: var(--text); }
.rt-rit-kop:hover { background: #FAFBFD; }
.mk-foto.rt-foto { width: 38px; height: 38px; font-size: 12px; flex: none; }
.rt-rit-tekst { flex: 1; min-width: 0; }
.rt-rit-tekst b { display: block; font-size: 14px; }
.rt-rit-tekst small { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-voortgang { position: relative; flex: none; width: 74px; height: 22px; border-radius: 99px; background: #EEF0F5; overflow: hidden; }
.rt-voortgang i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--mk, var(--brand-accent)) 35%, #DCFCE7); }
.rt-voortgang em { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; font-style: normal; font-size: 11px; font-weight: 800; color: var(--text-2); }
.rt-stops { list-style: none; margin: 0; padding: 6px 0 4px; }
.rt-leg { padding: 2px 16px 2px 62px; font-size: 10.5px; color: var(--text-muted); position: relative; }
.rt-leg::before { content: ""; position: absolute; left: 29px; top: -4px; bottom: -4px; border-left: 2px dashed #D5DAE6; }
.rt-leg span { position: relative; background: var(--surface); padding: 0 4px 0 0; }
.rt-stop-rij { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 16px; }
.rt-stop.is-focus .rt-stop-rij { background: color-mix(in srgb, var(--mk, var(--brand-accent)) 8%, white); }
.rt-stop.is-af .rt-stop-tekst { opacity: .7; }
.rt-stop.is-mee .rt-stop-tekst b { font-weight: 600; }
.rt-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(10,15,40,.25); color: #fff; font: 800 11px Inter, sans-serif; cursor: pointer; }
.rt-nr:disabled { opacity: .4; cursor: default; }
.rt-stop-tekst { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.rt-stop-tekst b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-tijd { font-variant-numeric: tabular-nums; color: var(--text-2); margin-right: 2px; }
.rt-stop-tekst small { display: block; font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-stop-tekst .rt-werk { color: var(--text-muted); }
.rt-status { flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rt-status em { font-style: normal; color: var(--text-muted); font-weight: 600; }
.rt-status em.is-af { color: var(--green); font-weight: 800; }
.rt-status em.is-bezig { color: #1D4ED8; font-weight: 800; }
.rt-oog { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text-muted); font-weight: 800; }
.rt-oog:hover { background: #EEF0F5; color: var(--brand-accent); }
.rt-rit-voet { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 16px 12px; border-top: 1px dashed var(--border); }
.rt-zonder { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 2px; }
.rt-zonder-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 99px; background: #fff; font-weight: 700; font-size: 12px; }
.rt-zonder-chip small { font-weight: 600; color: var(--text-muted); }
.rt-kaart-kolom { position: sticky; top: 84px; min-width: 0; }
.rt-kaart-card { margin: 0; overflow: hidden; }
.rt-kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.rt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rt-chips .wk-filter-chip { font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rt-chips .wk-filter-chip:not(.actief) { background: #fff; }
.rt-duo { color: var(--text); font-weight: 700; }
.rt-kaart-card .route-kaart { height: calc(100vh - 250px); min-height: 480px; }
@media (max-width: 1100px) {
  .rt-layout { grid-template-columns: 1fr; }
  .rt-kaart-kolom { position: static; order: -1; }
  .rt-kaart-card .route-kaart { height: 420px; min-height: 0; }
}

/* ── PLANBORD (22-9-2026): vóór de eerste en ná de laatste stop altijd een duidelijke sleepplek ── */
.tz.tz-rand {
  margin: 4px 0 4px 76px; min-height: 36px; padding: 6px 12px; gap: 10px;
  border: 1.5px dashed #C7CDDA; border-radius: 10px; background: #FBFCFE;
}
.tz.tz-rand .tz-plus { opacity: 1; }
.tz.tz-rand .tz-tekst { opacity: 1; color: var(--text-2); font-weight: 600; white-space: normal; }
.tz.tz-rand:hover, .tz.tz-rand.drop-hover { border-color: var(--brand-accent); background: #EEF2FF; }
.tz.tz-rand.is-na-werktijd { border-color: #FCD34D; background: #FFFBEB; }
.tz.tz-rand.is-na-werktijd .tz-tekst { color: #92400E; }
.tz.tz-rand.is-na-werktijd:hover, .tz.tz-rand.is-na-werktijd.drop-hover { border-color: #F59E0B; background: #FEF3C7; }
.dl-tb + .tz.tz-rand { margin-top: 2px; }

/* ── portaal: melding-detail = zelfde opzet als de backoffice-verzoekpagina (vz-*), 23-9-2026 ── */
.pm3 { max-width: 1240px; }
.pm3 .vz-kop { margin-top: 4px; }
.pm3 .vz-tenant-stil { cursor: default; }
.pm3 .vz-tenant-stil:hover { background: color-mix(in srgb, var(--brand-accent) 10%, white); color: var(--brand-accent); }
.pm3 .vz-stap { cursor: default; }
.pm3 .vz-klachten + .vz-klachten-extra { padding-top: 0; }
.pm3 .foto-item figcaption { display: none; }

/* ── portaal-dashboard in backoffice-stijl (pdb-*), 23-9-2026 ── */
.pdb .page-head { padding-top: 0; }
.pdb-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pdb-cta { width: auto; margin: 4px 0 0; white-space: nowrap; }
.pdb .kpi-grid.kpi-4 { grid-template-columns: repeat(4, 1fr); }
.pdb a.kpi { text-decoration: none; color: inherit; display: block; }
.pdb .kpi-value small { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.pdb-aandacht { margin-top: 18px; }
.pdb-onder { grid-template-columns: 1.4fr 1fr; }
.pdb .card table td .hint { margin-top: 2px; }
.pdb .klikbaar tr:hover td { background: #FAFBFE; }
.pdb-activiteit { list-style: none; margin: 0; padding: 6px 0 8px; }
.pdb-activiteit a { display: flex; gap: 12px; align-items: baseline; padding: 7px 20px; text-decoration: none; color: inherit; font-size: 13px; }
.pdb-activiteit a:hover { background: #FAFBFE; }
.pdb-act-tijd { flex: none; width: 64px; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pdb-act-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdb-act-tekst small { color: var(--text-muted); }
@media (max-width: 1100px) {
  .pdb .kpi-grid.kpi-4, .pdb .kpi-grid.kpi-3 { grid-template-columns: repeat(2, 1fr); }
  .pdb .dash-grid, .pdb-onder { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pdb .kpi-grid.kpi-4, .pdb .kpi-grid.kpi-3 { grid-template-columns: 1fr; }
}

/* ── klantrapport op een telefoon (monteur ziet dit direct na indienen), 23-9-2026 ── */
.rapport-werkbalk.is-monteur { justify-content: flex-start; }
.rapport-werkbalk.is-monteur .btn-primary { width: auto; }
@media (max-width: 640px) {
  .rapport-body { padding: 12px 10px 40px; }
  .rapport-werkbalk { flex-wrap: wrap; gap: 8px; }
  .rapport-werkbalk .btn-ghost, .rapport-werkbalk .btn-primary { padding: 10px 14px; font-size: 14px; }
  .rapport-werkbalk-rechts { width: 100%; justify-content: flex-start; }
  .rapport-flash { padding: 10px 14px; font-size: 12.5px; }
  .rapport-flash span { display: block; margin-top: 2px; }
  .rapport-vel { padding: 22px 18px 26px; border-radius: 14px; }
  /* kop: logo boven, titel eronder links — niets loopt meer van het vel af */
  .rapport-kop { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 14px; }
  .rapport-logo { height: 36px; }
  .rapport-titel h1, .rapport-titel p { text-align: left; }
  .rapport-titel h1 { font-size: 21px; }
  .rapport-titel p { white-space: normal; }
  /* klant en monteur onder elkaar */
  .rapport-grid { grid-template-columns: 1fr; gap: 16px; padding: 16px 0 4px; }
  .rapport-monteur { align-items: flex-start; }
  /* aangekomen/afgerond: datum en tijd op één regel i.p.v. per woord afgebroken */
  .rapport-tijden { grid-template-columns: 96px minmax(0, 1fr); font-size: 13px; }
  .rapport-tijden b { white-space: nowrap; }
  .rapport-vel p, .rapport-vel li { overflow-wrap: anywhere; }
  .rapport-fotos { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rapport-vel table { display: block; overflow-x: auto; }
}

/* Rit compleet: klanten die niet gemaild konden worden (geen adres / mislukt) */
.rc-mislukt { margin: 0 20px 12px; padding: 10px 14px; border-radius: 10px; background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E; display: grid; gap: 2px; }
.rc-mislukt b { font-size: 13px; }
.rc-mislukt small { font-size: 12px; }

/* ── verzoekpagina: Planning-kaart in dezelfde opzet als Klant/Opdracht (vzp-*), 24-9-2026 ── */
.vzp + .vzp { border-top: 6px solid #F4F5F9; }
.vzp-kop { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: #FCFCFD; font-size: 13.5px; }
.vzp-kop b { font-size: 14px; }
.vzp-kop .badge { margin-left: auto; }
.vzp-sub { color: var(--text-muted); font-weight: 500; }
.vzp-let-op { color: #92400E; font-weight: 600; }
.vzp-bevestiging { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vzp-bevestiging .ms-kort { margin-top: 0; }
.vzp-mail-knop-wrp { display: inline-flex; align-items: center; gap: 8px; }
.vzp-mail-knop-wrp .btn-primary { width: auto; margin: 0; }
.vzp-mail-ok { font-size: 12.5px; font-weight: 700; color: var(--green); }
.vzp-mail-fout { font-size: 11.5px; color: #B91C1C; }
.vz-contact.vzp-acties .btn-ghost { flex: 1 1 auto; }

/* ── Naar SnelStart: handmatige overdracht van conceptfacturen (so-*), 24-9-2026 ── */
.dag-tab.dag-tab-actie { color: var(--brand-accent); font-weight: 800; }
.so { display: grid; gap: 16px; }
.so-balk { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.so-balk-tekst { display: grid; gap: 3px; min-width: 0; }
.so-balk-tekst b { font-size: 15px; }
.so-balk-tekst small { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.so-balk-tekst small em { font-style: normal; font-weight: 700; color: var(--text); }
.so-balk .btn-ghost { width: auto; }
.so-fout { margin: 0; }
.so-leeg { padding: 28px 20px; text-align: center; background: var(--surface); border: 1px dashed var(--border-2); border-radius: 12px; display: grid; gap: 6px; color: var(--text-2); font-size: 13.5px; }
.so-groep { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--og, #94A3B8); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.so-groep-kop { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: #FCFCFD; }
.so-groep-kop h2 { margin: 0; font-size: 15px; font-weight: 800; }
.so-groep-kop .hint { margin-left: 4px; }
.so-groep-kop .log-link { margin-left: auto; font-size: 12.5px; }
.so-lijst { list-style: none; margin: 0; padding: 0; }
.so-rij { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.so-rij:last-child { border-bottom: 0; }
.so-rij:not(.is-open):hover { background: #FAFBFE; }
.so-rij.is-open { cursor: default; background: color-mix(in srgb, var(--brand-accent) 4%, white); box-shadow: inset 3px 0 0 var(--brand-accent); }
.so-rij-kop { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 16px; gap: 14px; align-items: center; padding: 11px 18px; font-size: 13.5px; }
.so-rij.is-open .so-rij-kop { padding-bottom: 6px; grid-template-columns: 96px minmax(0, 1fr) auto; }
.so-nr { font-weight: 800; color: #1F2A60; font-variant-numeric: tabular-nums; }
.so-regel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.so-regel b { font-weight: 800; }
.so-regel i { font-style: normal; color: var(--text-muted); margin: 0 7px; }
.so-bedrag { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-bedrag small { font-weight: 600; color: var(--text-muted); font-size: 11px; }
.so-pijl { color: var(--text-muted); font-size: 18px; text-align: center; }
.so-rij-open { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px 18px; padding: 4px 18px 16px 128px; }
.so-veld { display: grid; gap: 6px; min-width: 0; }
.so-veld label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.so-veld small { font-size: 11.5px; color: var(--text-muted); }
.so-veld-rij { display: flex; align-items: center; gap: 8px; min-width: 0; }
.so-code { flex: 1; min-width: 0; display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; padding: 9px 12px; border: 1px solid var(--border-2); border-radius: 10px; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.so-code-bedrag { font-size: 16px; font-weight: 700; text-align: right; }
.so-kopieer { width: auto; white-space: nowrap; padding: 8px 12px; font-size: 12.5px; }
.so-kopieer.is-ok { border-color: var(--green); color: var(--green); background: var(--green-bg); }
.so-acties { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.so-acties .btn-primary { width: auto; margin: 0; }
@media (max-width: 900px) {
  .so-rij-kop { grid-template-columns: 80px minmax(0, 1fr) auto; }
  .so-pijl { display: none; }
  .so-rij-open { grid-template-columns: 1fr; padding-left: 18px; }
}
.so-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.so-kop-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.so-kop-acties .btn-ghost { width: auto; }

/* rapportage: melding als de PDF de pdf-lib-terugval is i.p.v. de geprinte rapportpagina */
.rp-pdf-terugval { margin: -8px 0 16px; padding: 10px 14px; border-radius: 10px; background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E; font-size: 12.5px; line-height: 1.55; }
.rp-pdf-terugval code { font-size: 11.5px; background: #fff; padding: 1px 6px; border-radius: 6px; }

/* ── Fabrieken: overzicht (fb-*) en detail (fbd-*), 24-9-2026 ── */
.fb-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fb-kpis { margin-bottom: 18px; }
.fb-kpis.kpi-grid.kpi-4 { grid-template-columns: repeat(4, 1fr); }
.fb-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); background: #FCFCFD; }
.fb-zoek { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 10px; height: 38px; border: 1px solid var(--border-2); border-radius: 10px; background: #fff; }
.fb-zoek span { color: var(--text-muted); }
.fb-zoek input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 13.5px; background: transparent; }
.fb-zoek button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; }
.fb-select { height: 38px; padding: 0 30px 0 10px; font-size: 13px; width: auto; }
.fb-schakel { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.fb-tabel th.fb-num, .fb-tabel td.fb-num { text-align: right; width: 84px; font-variant-numeric: tabular-nums; }
.fb-naam { display: flex; align-items: flex-start; gap: 10px; }
.fb-vlag { font-size: 18px; line-height: 1.2; flex: none; }
.fb-badge { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; background: #EDE9FE; color: #6D28D9; vertical-align: 2px; }
.fb-ogs { display: flex; flex-wrap: wrap; gap: 4px; }
.fb-og { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: #F1F2F6; color: var(--text-2); }
.fb-open { color: #B45309; font-size: 14px; }
.fb-taal { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: #EEF0F5; color: var(--text-2); letter-spacing: .04em; }
.fb-taal.is-en { background: #DBEAFE; color: #1D4ED8; }
.fb-pijl { color: var(--text-muted); text-align: right; width: 24px; }
.fb-voet { padding: 10px 16px; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); }
.fbd-boven { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fbd-boven h1 { margin: 0; }
.fbd-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.fbd-kolommen { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.fbd-uitleg { margin: 0; padding: 14px 20px 4px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.fbd-form { padding: 12px 20px 18px; display: grid; gap: 12px; }
.fbd-form .form-group { margin: 0; }
.fbd-form .btn-primary { width: auto; justify-self: start; }
.fbd-rij { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; }
.fbd-slug { display: flex; align-items: center; gap: 0; }
.fbd-slug span { color: var(--text-muted); font-size: 13px; padding-left: 10px; white-space: nowrap; }
.fbd-slug input { padding-left: 4px !important; }
.fbd-taalform { padding: 12px 20px 16px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.fbd-taalform label, .fbd-koppel label { font-size: 12px; font-weight: 700; color: var(--text-2); }
.fbd-taalrij { display: flex; gap: 8px; align-items: center; }
.fbd-taalrij .status-select { flex: 1; }
.fbd-taalrij .btn-ghost { width: auto; }
.fbd-koppel { padding: 14px 20px 18px; border-top: 1px dashed var(--border); display: grid; gap: 6px; background: #FCFCFD; }
.fabriek-rij-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .fb-kpis.kpi-grid.kpi-4 { grid-template-columns: repeat(2, 1fr); } .fbd-kolommen { grid-template-columns: 1fr; } }

/* Taalkeuze rapport (27-9-2026): twee knoppen met vlag, Nederlands | English */
.taal-keuze { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: #EEF0F3; }
.taal-keuze button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; background: transparent; border-radius: 10px; padding: 10px 16px;
  font: inherit; font-size: 14px; font-weight: 600; color: #6B6B70; cursor: pointer; white-space: nowrap;
}
.taal-keuze button:hover { color: #1F2A60; }
.taal-keuze button.aan { background: #fff; color: #1F2A60; box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(31,42,96,.08); }
.taal-keuze .taal-vlag { font-size: 19px; line-height: 1; }
.taal-keuze-blok { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #FAFAFB; }
.taal-keuze-blok .taal-keuze { display: flex; }
.taal-keuze-blok .taal-keuze button { flex: 1; }
.taal-keuze-blok strong { display: block; font-size: 14px; }
.taal-keuze-blok small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }

/* Rapportenlijst portaal (27-9-2026): één rij per rapport over de volle breedte */
.pp-rapporten { list-style: none; margin: 0; padding: 0; }
.pp-rapporten li { border-top: 1px solid var(--border); }
.pp-rapport { display: flex; align-items: center; gap: 14px; padding: 12px 20px; color: inherit; text-decoration: none; }
.pp-rapport:hover { background: #FAFAFB; }
.pp-rapport-nr { flex-shrink: 0; min-width: 84px; font-size: 12px; font-weight: 800; color: var(--brand-accent); font-variant-numeric: tabular-nums; }
.pp-rapport-mid { flex: 1; min-width: 0; }
.pp-rapport-mid b { display: block; font-size: 13.5px; }
.pp-rapport-mid small { display: block; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-rapport-monteur { flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.pp-rapport-datum { flex-shrink: 0; width: 84px; text-align: right; font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pp-rapport-pijl { flex-shrink: 0; font-size: 14px; font-weight: 800; color: var(--brand-accent); }
@media (max-width: 640px) {
  .pp-rapport { flex-wrap: wrap; gap: 6px 12px; padding: 12px 16px; }
  .pp-rapport-mid { flex-basis: calc(100% - 96px); }
  .pp-rapport-monteur { display: none; }
  .pp-rapport-datum { width: auto; text-align: left; margin-left: 96px; }
}

/* Bijlagen wizard: video en uploadvoortgang (27-9-2026) */
.wz-pdf.wz-video { font-size: 10px; }
.wz-bijlage.is-bezig { opacity: .85; }
.wz-bijlage-naam { display: block; min-width: 0; }
.wz-upload-balk { display: block; height: 4px; margin-top: 5px; border-radius: 99px; background: #E6E7EC; overflow: hidden; }
.wz-upload-balk i { display: block; height: 100%; border-radius: 99px; background: var(--brand-accent); transition: width .2s; }

/* Video's van de klant bij een verzoek */
.video-lijst { list-style: none; margin: 0; padding: 12px 18px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.video-lijst video { display: block; width: 100%; max-height: 320px; border-radius: 12px; background: #111; }
.video-lijst a { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inlog-whitelist met omschrijving (28-9-2026) */
.wl-editor { display: grid; gap: 8px; }
.wl-kop, .wl-rij { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1.4fr) 36px; gap: 8px; align-items: center; }
.wl-kop { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.wl-rij .input-wrp { margin: 0; }
.wl-weg { padding: 0; width: 36px; height: 36px; display: grid; place-items: center; color: var(--text-muted); }
.wl-weg:hover { color: #B91C1C; }
.wl-erbij { justify-self: start; }
@media (max-width: 640px) {
  .wl-kop { display: none; }
  .wl-rij { grid-template-columns: 1fr 36px; }
  .wl-rij .input-wrp:nth-child(2) { grid-column: 1; }
}