/* ════════════════════════════════════════════════════════════════════════════
   ROUTLI — designsysteem "tech / Google Maps"
   Clean white vlakken · deep black tekst · tech green accent (#047857) ·
   Plus Jakarta Sans (koppen) + Roboto (data/tekst) · zwevende ronde UI
   ════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  /* ── BRAND BOOK: tech / Google Maps (white · black · tech green) ────────────
     Kaart centraal, zwevende witte elementen met subtiele dropshadow. Dit palet
     is PUUR voor de app-opmaak (schermen, achtergronden, balken, knoppen). De
     huisjes/statussen op de kaart hebben hun eigen kleuren (in map.js) en
     blijven ongemoeid — daarom staan de semantische tokens hieronder vast. */

  /* Merk-basis (drie kernkleuren uit het brand book) */
  --bg-primary:   #FFFFFF; /* Clean White — basis van sheets, menu's, zoekbalken */
  --text-primary: #111827; /* Deep Black — tekst, titels, iconen */
  --accent-green: #047857; /* Tech Green — actieve route, pins, knoppen, succes */

  /* Neutrale grijzen (grond, velden, randen) */
  --gray-0: #FFFFFF;  --gray-50: #F9FAFB; --gray-100: #F3F4F6;
  --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF;
  --gray-500: #6B7280; --gray-700: #374151; --gray-900: #111827;

  /* Alias-tokens uit het oude palet (blijven bestaan zodat bestaande regels
     meelopen). Nu neutraal: olive = deep black, sage = licht grijs. */
  --olive:   #111827; --olive-2: #1F2937;
  --sage:    #E5E7EB; --sage-2:  #D1D5DB;
  --cream:   #FFFFFF; --cream-2: #F3F4F6;

  /* Kern (namen blijven gelijk zodat alle bestaande regels meelopen) */
  --ink:     #111827;   /* donkere vlakken — deep black */
  --ink-2:   #1F2937;   /* opgelicht donker vlak */
  --slate:   #111827;   /* primaire tekst — deep black, maximaal contrast */
  --muted:   #6B7280;   /* secundaire tekst — neutraal grijs */
  --paper:   #F3F4F6;   /* app-achtergrond — heel licht grijs zodat wit "zweeft" */
  --surface: #FFFFFF;   /* zwevende kaarten/menu's/balken — clean white */
  --border:  #E5E7EB;   /* neutrale rand */
  --hairline:#EEF0F2;

  /* Accent — tech green voor primaire UI-acties (namen blijven 'blue' zodat de
     bestaande knop/link/focus-regels meelopen). LET OP: dit is UI-accent, geen
     huis-status. */
  --blue:       #047857; /* tech green — primaire knoppen, links, focus */
  --blue-deep:  #065F46; /* dieper groen — hover/active */
  --blue-tint:  #ECFDF5; /* zachte groen-tint achtergrond */
  --blue-soft:  #A7F3D0; /* zacht mint — accent op donkere vlakken */

  /* Semantisch (statussen — bewust ongewijzigd, kaart & UI delen deze) */
  --green: #16A34A; --orange: #EA580C; --red: #111827; --amber: #F59E0B;

  /* Typografie — Plus Jakarta Sans (koppen) + Roboto (data/details) */
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-body);
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Font-groottes (brand book) */
  --font-size-title:   20px; /* klantnaam / titel in bottom sheet */
  --font-size-sub:     16px; /* belangrijke invoervelden */
  --font-size-body:    14px; /* standaardtekst en straatnamen */
  --font-size-caption: 12px; /* kleine data (bijv. "1.2 km") */

  /* Font-diktes (brand book) */
  --font-weight-bold:    700; /* titels */
  --font-weight-medium:  500; /* knoppen en actieve items */
  --font-weight-regular: 400; /* straatnamen en details */

  /* Vorm — zacht & rond (Google Maps-gevoel), neutrale dropshadows */
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --shadow-card:  0 1px 2px rgba(17,24,39,.06), 0 8px 24px rgba(17,24,39,.10);
  --shadow-float: 0 6px 22px rgba(17,24,39,.14);
  --shadow-sheet: 0 -8px 40px rgba(17,24,39,.14);
}

html, body { font-family: var(--font-body); color: var(--slate); }

/* ── Iconen ─────────────────────────────────────────────────────────────────── */
.ic {
  width: 17px; height: 17px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px;
}
.ic-xs { width: 13px; height: 13px; stroke-width: 2.2; vertical-align: -2px; }
.ic-lg { width: 21px; height: 21px; }

/* ════════════════════════════════════════════════════════════════════════════
   AUTH-SCHERMEN — "open Google Maps"
   Gestileerde kaart-achtergrond (straten · park · groene route + pin) met de
   inlog-/keuzekaart als zwevend paneel erover — precies het gevoel van je
   navigatie-app openen. Alle 6 auth-schermen delen deze klassen.
   ════════════════════════════════════════════════════════════════════════════ */
#org-screen, #login-screen, #register-screen,
#forgot-screen, #reset-password-screen, #confirm-pending-screen {
  --a-panel:   var(--surface);   /* clean white kaart */
  --a-field:   #F3F4F6;          /* zacht grijs invoervlak */
  --a-line:    var(--border);
  --a-line-2:  var(--hairline);
  --a-ink:     var(--slate);     /* deep black tekst */
  --a-ink-2:   var(--muted);
  --a-ink-3:   #9CA3AF;          /* lichter gedempt */

  position: fixed; inset: 0;
  background: url('../img/auth-map.svg') center / cover no-repeat, var(--paper);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
/* zachte witte gloed onder de kaart zodat 'ie zweeft; de kaart-achtergrond
   blijft rond de randen zichtbaar (Google Maps-gevoel). */
#org-screen::before, #login-screen::before, #register-screen::before,
#forgot-screen::before, #reset-password-screen::before, #confirm-pending-screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 48% at 50% 44%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 46%, transparent 72%),
    linear-gradient(180deg, transparent 55%, rgba(17,24,39,.06) 100%);
}
#org-screen   { z-index: 9001; }
#login-screen { z-index: 9000; }
#register-screen, #forgot-screen, #reset-password-screen, #confirm-pending-screen { display: none; z-index: 9100; }
#register-screen.show, #forgot-screen.show, #reset-password-screen.show, #confirm-pending-screen.show { display: flex; }
#org-screen.hidden, #login-screen.hidden { display: none; }

#org-box, #login-box, #register-box, #forgot-box, #reset-password-box, #confirm-pending-box {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--a-panel);
  border-radius: var(--r-xl); padding: 30px 26px 24px;
  width: 100%; max-width: 392px;
  border: 1px solid var(--a-line);
  box-shadow: var(--shadow-float);
}

/* ── Merk-koptekst ── */
.login-logo {
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
  font-size: 30px; font-weight: 800; color: var(--a-ink);
  margin-bottom: 4px; letter-spacing: -.028em; line-height: .8;
  display: inline-flex; align-items: flex-end;
}
.login-logo-img { height: 40px; max-width: 200px; object-fit: contain; vertical-align: middle; }
/* Logo-afbeelding (het woordmerk-plaatje) */
.rlogo-img { display: block; width: auto; }
.login-logo .rlogo-img { height: 42px; }
#topbar-logo .rlogo-img { height: 27px; }
.brand-tag {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--a-ink-2); margin-bottom: 24px;
  display: flex; align-items: center; gap: 8px;
}
.brand-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage-2); flex-shrink: 0; }

/* ── Organisatie-kiezer: rijen met glyph + id ── */
.org-sub {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--a-ink-2); margin-bottom: 14px;
}
.org-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1px solid var(--a-line); border-radius: var(--r-md); padding: 13px 14px;
  margin-bottom: 10px; background: var(--a-field); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.org-item:hover  { border-color: var(--sage-2); background: #EEF0F2; }
.org-item:active { transform: scale(.99); }
.org-item-glyph {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--sage), var(--sage-2));
  border: 1px solid rgba(17,24,39,.10);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--olive); letter-spacing: -.02em;
}
.org-item-logo-img { height: 24px; max-width: 30px; object-fit: contain; }
.org-item-body { flex: 1; min-width: 0; }
.org-item-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--a-ink); letter-spacing: -.01em; }
.org-item-id {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: var(--a-ink-3); margin-top: 3px;
}
.org-item-chev { color: var(--a-ink-3); flex-shrink: 0; }
.org-li { color: var(--muted); }
.org-muted { color: var(--a-ink-3); font-weight: 500; }

/* ── Segmented rol-control ── */
.role-tabs { display: flex; background: var(--a-field); border: 1px solid var(--a-line); border-radius: var(--r-sm); padding: 4px; margin-bottom: 22px; gap: 4px; }
.role-tab {
  flex: 1; padding: 10px 8px; border: none; border-radius: 7px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  background: transparent; color: var(--a-ink-2); transition: all .18s;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.role-tab.active { background: var(--blue); color: #fff; box-shadow: 0 1px 3px rgba(4,120,87,.30); }
.role-tab.active.mgr,
.role-tab.active.vrk { color: #fff; }
.role-tab.active .ic { color: #fff; }

/* ── Invoervelden ── */
.lfield { margin-bottom: 15px; }
.lfield label {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; color: var(--a-ink-2);
  margin-bottom: 7px; display: block;
}
.lfield input {
  width: 100%; border: 1px solid var(--a-line); border-radius: var(--r-sm);
  padding: 13px 14px; font-size: 15px; font-family: inherit; color: var(--a-ink);
  outline: none; background: var(--a-field);
  transition: border-color .15s, box-shadow .15s;
}
.lfield input::placeholder { color: var(--a-ink-3); }
.lfield input:focus {
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(17,24,39,.14);
}
.lfield input.field-invalid { border-color: var(--red); }
.lfield-hint {
  display: none; font-size: 12px; color: var(--red); font-weight: 600;
  margin-top: 6px;
}
.lfield-hint.show { display: block; }

/* Wachtwoordveld met oogje om te tonen/verbergen */
.lfield-pw { position: relative; }
.lfield-pw input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 9px;
  color: var(--a-ink-3); display: flex; align-items: center; border-radius: 8px;
}
.pw-toggle:hover { color: var(--a-ink); }

.login-forgot { text-align: right; margin: -4px 0 18px; font-size: 12.5px; }
.login-forgot a { color: var(--a-ink-2); font-weight: 500; cursor: pointer; text-decoration: none; }
.login-forgot a:hover { color: var(--a-ink); }

.login-btn {
  width: 100%; border: none; border-radius: var(--r-sm); padding: 15px;
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
  margin-top: 4px; letter-spacing: .01em; color: #FFFFFF;
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  box-shadow: 0 8px 22px rgba(4,120,87,.28), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .1s, filter .15s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.login-btn:active { transform: scale(.985); filter: brightness(.94); }
.login-btn.mgr,
.login-btn.vrk { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); color: #FFFFFF; }
.login-btn:disabled { opacity: .7; cursor: default; }

/* Laad-spinnertje in de knop tijdens een verzoek */
.login-btn .btn-spinner {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: btn-spin .7s linear infinite;
}
.login-btn.is-loading .btn-spinner { display: inline-block; }
.login-btn.is-loading .btn-label { opacity: .85; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.login-err, .reg-err {
  display: none; background: rgba(220,60,40,.12); color: #F3A99A; border: 1px solid rgba(220,60,40,.28);
  border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px;
  font-weight: 600; margin-top: 12px; text-align: center;
}
.login-info {
  display: none; background: rgba(229,231,235,.22); color: var(--slate); border: 1px solid var(--sage-2);
  border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px;
  font-weight: 600; margin-top: 12px; text-align: center;
}
.login-switch { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--a-ink-2); }
.login-switch a { color: var(--blue); font-weight: 600; cursor: pointer; text-decoration: none; }

/* Afleesvenster verviel bij de rebrand — bewust verborgen (HTML blijft staan) */
.auth-readout { display: none; }

.reg-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--a-ink); margin-bottom: 4px; letter-spacing: -.3px; }
.reg-sub   { font-size: 13px; color: var(--a-ink-2); margin-bottom: 22px; line-height: 1.5; }
.reg-sub strong { color: var(--a-ink); }

/* ── App-basis ──────────────────────────────────────────────────────────────── */
#map { position: fixed; inset: 0; }
#app { display: none; }
#app.visible { display: block; }

/* ── Topbar ─────────────────────────────────────────────────────────────────── */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(17,24,39,.10);
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 62px;
}
#topbar-left { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; flex: 0 0 auto; }
#topbar-logo {
  font-family: 'Plus Jakarta Sans', var(--font-display), sans-serif;
  font-size: 22px; font-weight: 800; color: var(--slate);
  white-space: nowrap; letter-spacing: -.028em; line-height: .9;
  display: inline-flex; align-items: flex-end;
}
/* Routli-logo: de "o" = groene pin op een ring, de "i" = stam met huisje-dak */
.rlogo-o {
  display: inline-block; width: .66em; height: .84em;
  margin: 0 .015em -.05em; vertical-align: baseline;
  background: center bottom / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 52'%3E%3Ccircle cx='20' cy='36' r='11' fill='none' stroke='%23047857' stroke-width='7'/%3E%3Cpath d='M20 2C11.7 2 5 8.7 5 17c0 10 15 20 15 20s15-10 15-20C35 8.7 28.3 2 20 2z' fill='%23047857'/%3E%3Ccircle cx='20' cy='16' r='5.4' fill='%23111827'/%3E%3C/svg%3E");
}
.rlogo-i {
  position: relative; display: inline-block;
  width: .19em; height: .58em; margin-left: .05em; margin-bottom: .03em;
  background: currentColor; border-radius: .04em;
}
.rlogo-i::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; margin-bottom: .05em;
  width: .46em; height: .40em;
  transform: translateX(-50%);
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M3 12 L15 2.5 L27 12' fill='none' stroke='%23111827' stroke-width='3.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M6.5 11 L6.5 22 L23.5 22 L23.5 11' fill='none' stroke='%23111827' stroke-width='3.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#wijk-pill {
  background: rgba(17,24,39,.06); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 11px 4px 9px;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: 0; color: var(--muted); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px;
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
}
#wijk-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage-2); flex-shrink: 0;
}
#topbar-center {
  display: flex; align-items: center; flex-shrink: 0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-md); padding: 6px 14px;
}
.sstat { text-align: center; padding: 0 10px; }
.sstat-val {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; color: #fff; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sstat-val#sc { color: var(--blue-soft); }
.sstat-lbl { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: .14em; margin-top: 4px; font-weight: 500; }
.sstat-divider { width: 1px; height: 32px; background: rgba(255,255,255,.13); flex-shrink: 0; }
#shift-toggle-btn {
  margin-left: 10px; border: none; border-radius: 9px; padding: 6px 11px;
  font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap;
  letter-spacing: .03em; transition: filter .15s;
}
#shift-toggle-btn:active { filter: brightness(.9); }
#shift-toggle-btn.start { background: var(--green); color: #fff; }
#shift-toggle-btn.stop  { background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
#topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Naam + functie = alleen weergave (niet klikbaar) */
#user-info { display: flex; align-items: center; gap: 6px; min-width: 0; }
#user-name-disp { font-size: 13px; font-weight: 600; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
#mgr-topbar-btn {
  background: var(--blue); border: none; border-radius: var(--r-sm);
  padding: 9px 14px; color: #fff; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: filter .15s, transform .1s;
}
#mgr-topbar-btn:active { transform: scale(.96); filter: brightness(.9); }
/* 9-punts blokje = de klikbare menu-trigger */
#user-btn {
  background: rgba(17,24,39,.06); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px;
  color: var(--slate); font-family: inherit;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
#user-btn:active { transform: scale(.94); }
#user-btn:hover { background: rgba(17,24,39,.10); }
#user-btn .ic { fill: currentColor; stroke: none; width: 20px; height: 20px; }
.role-badge {
  font-family: var(--font-body);
  font-size: 9px; font-weight: 700; border-radius: 999px; padding: 2.5px 8px;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--blue); color: #fff; border: 1px solid var(--blue);
}
.role-badge.manager, .role-badge.verkoper, .role-badge.teamleider { background: var(--blue); color: #fff; border-color: var(--blue); }
/* Inlog met 3 rol-tabs: iets krapper zodat ze naast elkaar passen op mobiel */
.role-tabs-3 .role-tab { padding-left: 6px; padding-right: 6px; font-size: 13px; gap: 4px; }
.role-tabs-3 .role-tab .ic-xs { flex: 0 0 auto; }

/* ── Zwevende kaart-elementen ───────────────────────────────────────────────── */
#locate-btn {
  position: fixed; bottom: 24px; left: 16px; z-index: 100;
  background: var(--ink); color: #fff; border: none; border-radius: 50%;
  width: 50px; height: 50px; cursor: pointer;
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s;
}
#locate-btn:active { transform: scale(.92); }

/* ── Eigendom-laag knop (CBS koop/huur) — naast de locatie-knop ──────────────── */
#eigendom-btn {
  position: fixed; bottom: 24px; left: 76px; z-index: 100;
  background: var(--surface); color: var(--slate); border: 1px solid var(--border); border-radius: 50%;
  width: 50px; height: 50px; cursor: pointer;
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background .15s, color .15s;
}
#eigendom-btn:active { transform: scale(.92); }
#eigendom-btn.active { background: #7C3AED; color: #fff; border-color: #7C3AED; }

/* ── Gasverbruik-laag knop — naast de eigendom-knop ─────────────────────────── */
#gas-btn {
  position: fixed; bottom: 24px; left: 136px; z-index: 100;
  background: var(--surface); color: var(--slate); border: 1px solid var(--border); border-radius: 50%;
  width: 50px; height: 50px; cursor: pointer;
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background .15s, color .15s;
}
#gas-btn:active { transform: scale(.92); }
#gas-btn.active { background: #EA580C; color: #fff; border-color: #EA580C; }

/* ── Elektriciteitsverbruik-laag knop — naast de gas-knop ───────────────────── */
#elek-btn {
  position: fixed; bottom: 24px; left: 196px; z-index: 100;
  background: var(--surface); color: var(--slate); border: 1px solid var(--border); border-radius: 50%;
  width: 50px; height: 50px; cursor: pointer;
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background .15s, color .15s;
}
#elek-btn:active { transform: scale(.92); }
#elek-btn.active { background: #2563EB; color: #fff; border-color: #2563EB; }

/* ── Luchtfoto-toggle knop — naast de elektra-knop ──────────────────────────── */
#luchtfoto-btn {
  position: fixed; bottom: 24px; left: 256px; z-index: 100;
  background: var(--surface); color: var(--slate); border: 1px solid var(--border); border-radius: 50%;
  width: 50px; height: 50px; cursor: pointer;
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background .15s, color .15s;
}
#luchtfoto-btn:active { transform: scale(.92); }
#luchtfoto-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Inkomen-laag knop (CBS gemiddeld huishoudinkomen per buurt) ─────────────── */
#inkomen-btn {
  position: fixed; bottom: 24px; left: 316px; z-index: 100;
  background: var(--surface); color: var(--slate); border: 1px solid var(--border); border-radius: 50%;
  width: 50px; height: 50px; cursor: pointer;
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background .15s, color .15s;
}
#inkomen-btn:active { transform: scale(.92); }
#inkomen-btn.active { background: #059669; color: #fff; border-color: #059669; }

/* ── Leeftijd-laag knop (CBS gem. leeftijd + %65+) — tweede rij, boven inkomen ── */
/* De onderste rij is op een telefoon al vol (t/m inkomen op left:316), dus deze
   knop staat een rij hoger op dezelfde x als inkomen: altijd zichtbaar, ook smal. */
#leeftijd-btn {
  position: fixed; bottom: 84px; left: 316px; z-index: 100;
  background: var(--surface); color: var(--slate); border: 1px solid var(--border); border-radius: 50%;
  width: 50px; height: 50px; cursor: pointer;
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background .15s, color .15s;
}
#leeftijd-btn:active { transform: scale(.92); }
#leeftijd-btn.active { background: #DB2777; color: #fff; border-color: #DB2777; }

/* ── Kaart-knoppen: gebundeld linksboven onder de topbalk ───────────────────── */
#map-controls {
  position: fixed; top: 86px; left: 16px; z-index: 100;
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: calc(100vw - 32px);
}
/* De knoppen stonden los op position:fixed; binnen de container zetten we ze op
   static zodat flex ze ordent. #map-controls button heeft hogere specificiteit
   dan de losse #x-btn regels, dus dit wint van hun position:fixed. */
#map-controls button { position: static; }

/* Zoek-suggesties open → laag-knoppen tijdelijk verbergen (desktop én mobiel),
   anders overlapt de suggestielijst de knoppen. Terug zodra het zoeken sluit. */
body.zoek-sug-open #map-controls { display: none; }

/* ── Legenda-knop (energielabel-tabel) — rechtsonder, klik om te tonen ───────── */
#legend-toggle {
  position: fixed; bottom: 24px; right: 16px; z-index: 100;
  background: var(--surface); color: var(--slate); border: 1px solid var(--border); border-radius: 50%;
  width: 50px; height: 50px; cursor: pointer;
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background .15s, color .15s;
}
#legend-toggle:active { transform: scale(.92); }
#legend-toggle.active { background: var(--ink); color: #fff; border-color: var(--ink); }

#legend {
  position: fixed; bottom: 84px; right: 16px; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 13px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 6px;
}
.leg-title { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px; }
.leg { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--slate); }
.ldot { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }

/* ── Gebruikersmarker ───────────────────────────────────────────────────────── */
.user-dot-wrap {
  position: relative; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  transform: translateZ(0);
  /* De stip staat pal in het scherm-midden waar je pincht. Zonder dit ving de
     stip de pinch op → iOS zoomde de PAGINA (stip werd blijvend groter) i.p.v.
     de kaart. pointer-events:none laat de pinch door naar de kaart-canvas. */
  pointer-events: none;
}
/* Schaal-laag: krijgt via scaleUserMarker() een scale() die met de zoom meeloopt */
.user-scale {
  position: relative; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
/* Uitgezoomd (z < 15): kegel + puls-ring verbergen — alleen de kale stip blijft */
.gps-uitgezoomd .user-cone, .gps-uitgezoomd .user-ring { display: none; }
.user-ring {
  position: absolute; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(4,120,87,.18); pointer-events: none;
  animation: rpulse 2.4s ease-out infinite;
}
@keyframes rpulse {
  0%   { transform: scale(.35); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}
.user-arrow-wrap {
  position: relative; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  /* géén CSS-transition: rotatie wordt gesmoothd door de animatielus in map.js */
}
/* Richting-bundel in Google-Maps-stijl: een zachte, uitwaaierende lichtkegel die
   bij de stip het felst is en naar de randen/verte vervaagt (radiaal verloop),
   i.p.v. de oude platte driehoek. Groen, passend bij het thema. De radiale fade
   bereikt 0 vóór de clip-randen, zodat óók de zijkanten veren i.p.v. harde lijnen. */
.user-cone {
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%);
  width: 108px; height: 82px;
  background: radial-gradient(52% 94% at 50% 100%,
      rgba(5,150,105,.55) 0%,
      rgba(5,150,105,.28) 38%,
      rgba(5,150,105,0)   72%);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  pointer-events: none;
}
.user-dot {
  width: 24px; height: 24px; background: var(--blue); border: 3px solid #fff;
  border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.4);
  position: relative; z-index: 1; flex-shrink: 0;
}

/* ── Bottom sheet (huis-paneel) ─────────────────────────────────────────────── */
#sheet-overlay { display: none; position: fixed; inset: 0; background: rgba(8,12,24,.42); z-index: 200; }
#sheet {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 201;
  background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0;
  /* Vaste hoogte i.p.v. max-height: zo blijft het paneel op zijn plek en springt
     het niet omhoog/omlaag als de status-lijst dichtklapt en het afspraak-/
     verkocht-formulier openklapt. De inhoud scrollt binnen het paneel.
     BEWUST svh (niet dvh): svh is stabiel, terwijl dvh meebeweegt als de mobiele
     browser-toolbar in/uit schuift — dat gaf een springerig paneel. Bij een open
     toetsenbord wordt de hoogte/positie in JS bijgesteld (zie sheet.js). */
  height: 82svh; overflow-y: auto;
  box-shadow: var(--shadow-sheet);
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.sh-handle { width: 40px; height: 4.5px; background: #D4DAE3; border-radius: 3px; margin: 11px auto 0; }

/* Kruisje rechtsboven om het huis-paneel snel weg te klikken */
#sheet-close-x {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card); transition: transform .1s, background .15s;
}
#sheet-close-x:active { transform: scale(.9); background: var(--paper); }

#sheet-header {
  padding: 16px 20px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
#sheet-address {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; color: var(--slate); letter-spacing: -.3px;
}
#sheet-city { font-size: 13px; color: var(--muted); margin-top: 3px; font-weight: 600; }
#sheet-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.sh-meta-tag {
  background: #fff; border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 12px;
  font-size: 13px; font-weight: 600; color: var(--slate);
}
/* Alle info-tags: witte achtergrond, alleen de TEKST in de eigen kleur */
.sh-meta-tag.label-A,
.sh-meta-tag.label-B { background: #fff; border-color: var(--border); color: #15803D; }
.sh-meta-tag.label-C { background: #fff; border-color: var(--border); color: #4D7C0F; }
.sh-meta-tag.label-D { background: #fff; border-color: var(--border); color: #92400E; }
.sh-meta-tag.label-E { background: #fff; border-color: var(--border); color: #9A3412; }
.sh-meta-tag.label-F { background: #fff; border-color: var(--border); color: #9A3412; }
.sh-meta-tag.label-G { background: #fff; border-color: var(--border); color: #991B1B; }
.sh-meta-tag.eigendom { background: #fff; border-color: var(--border); color: #6D28D9; }
.sh-meta-tag.gas { background: #fff; border-color: var(--border); color: #C2410C; }
.sh-meta-tag.elek { background: #fff; border-color: var(--border); color: #1D4ED8; }

/* Permanente verkocht-melding in het huis-sheet */
#verkocht-banner {
  margin-top: 8px; padding: 9px 12px;
  background: #FDF4FF; border: 1.5px solid #F0ABFC; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: #A21CAF;
}

/* Afspraak-waarschuwing (collega heeft hier een afspraak) — geen slot, alleen let op */
#afspraak-waarschuwing {
  margin-top: 8px; padding: 9px 12px;
  background: #FFF7ED; border: 1.5px solid #FDBA74; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: #C2410C; line-height: 1.35;
}

/* Buurt-social-proof: per straat hoeveel al gekocht (geen adressen/namen) */
#sale-form-btn {
  width: 100%; margin-top: 12px;
  background: var(--blue); border: none; border-radius: var(--r-sm); padding: 14px;
  font-size: 14px; font-weight: 700; font-family: inherit; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .1s, filter .15s;
}
#sale-form-btn:active { transform: scale(.985); filter: brightness(.92); }

#woz-check-btn {
  width: 100%; margin-top: 8px;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px;
  font-size: 14px; font-weight: 700; font-family: inherit; color: var(--slate); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .1s, filter .15s;
}
#woz-check-btn:active { transform: scale(.985); background: var(--border); }

#streetview-frame { border-radius: var(--r-sm); overflow: hidden; background: #EEF0F2; }
#streetview-frame iframe { display: block; width: 100%; height: 180px; border: 0; }
.sv-placeholder { padding: 18px 14px; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; }
.sv-load-btn {
  width: 100%; min-height: 110px;
  background: var(--paper); border: 1px dashed var(--border); border-radius: var(--r-sm);
  color: var(--slate); font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sv-load-btn:active { background: var(--border); }

/* Kleine Street View-knop in het huis-paneel */
#sv-open-btn {
  margin-top: 10px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 700; font-family: inherit; color: var(--slate);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
#sv-open-btn:active { background: var(--border); }

/* Huis Street View — bijna fullscreen overlay (kleine marge) */
#house-sv-overlay { display: none; position: fixed; inset: 0; background: rgba(8,12,24,.55); z-index: 1000; }
#house-sv-overlay.show { display: block; }
#house-sv {
  display: none; position: fixed; inset: 16px; z-index: 1001;
  background: var(--surface); border-radius: 16px; overflow: hidden;
  flex-direction: column; box-shadow: var(--shadow-sheet);
}
#house-sv.show { display: flex; }
.house-sv-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#house-sv-title { font-size: 15px; font-weight: 800; color: var(--slate); }
.house-sv-close {
  background: var(--paper); border: 1px solid var(--border); border-radius: 10px;
  width: 34px; height: 34px; cursor: pointer; color: var(--slate);
  display: flex; align-items: center; justify-content: center;
}
#house-sv-frame { flex: 1; min-height: 0; background: #EEF0F2; }
#house-sv-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ── Team: periode kiezen (standaard vandaag, instelbaar) ────────────────────── */
.dsp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.dsp-row input[type="date"] {
  flex: 1; min-width: 118px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 9px; font-size: 13px; font-family: inherit; color: var(--slate);
  background: var(--surface); outline: none;
}
.dsp-row input[type="date"]:focus { border-color: var(--blue); }
.dsp-tot-lbl { font-size: 12px; color: var(--muted); font-weight: 600; flex-shrink: 0; }
.dsp-vandaag-btn {
  flex-shrink: 0; border: 1.5px solid var(--border); background: var(--surface);
  border-radius: var(--r-sm); padding: 8px 12px; font-size: 12px; font-weight: 700;
  font-family: inherit; color: var(--blue-deep); cursor: pointer;
}
.dsp-vandaag-btn:active { transform: scale(.96); }

/* ── Team vandaag: totaal deuren / verkocht / omzet ───────────────────────────── */
.team-vandaag { display: flex; gap: 10px; }
.tv-cel {
  flex: 1; text-align: center; padding: 14px 8px;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md);
}
.tv-val { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--slate); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tv-lbl { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

/* Per-werver lijst van vandaag (alleen toegewezen wervers) */
.dw-kop { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 6px; }
.dw-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.dw-row:last-child { border-bottom: none; }
.dw-naam { flex: 1; font-size: 14px; font-weight: 700; color: var(--slate); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-stat { text-align: center; min-width: 46px; display: flex; flex-direction: column; }
.dw-val { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--slate); line-height: 1.1; font-variant-numeric: tabular-nums; }
.dw-lbl { font-size: 9.5px; color: var(--muted); font-weight: 600; letter-spacing: .2px; }

/* ── Buurhuis-navigatie (pijltjes door de straat) ────────────────────────────── */
#buur-nav { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.buur-nav-mid {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0;
}
.buur-nav-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 10px; font-size: 14px; font-weight: 700; color: var(--slate);
  cursor: pointer; font-family: inherit;
}
.buur-nav-btn:active { background: var(--border); }
.buur-nav-btn:disabled { opacity: .35; cursor: default; }

#unit-nav { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.unit-nav-btn {
  background: var(--paper); border: 1px solid var(--border); border-radius: 9px;
  width: 34px; height: 34px; font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--slate); display: flex; align-items: center; justify-content: center;
}
.unit-nav-btn:active { background: var(--border); }
#unit-indicator { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.sh-section { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.sh-section:last-of-type { border-bottom: none; }
.sh-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* status-hoofdknop + opties */
.status-main-btn {
  width: 100%; padding: 14px 16px; border-radius: var(--r-md);
  border: 1.5px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600; font-family: inherit; color: var(--slate);
  cursor: pointer; transition: border-color .15s, background .15s;
  box-shadow: var(--shadow-card);
}
.status-main-btn.has-status { border-color: var(--blue); background: var(--blue-tint); color: var(--blue-deep); }

#status-picker { display: none; flex-direction: column; gap: 6px; margin-top: 8px; }
#status-picker.open { display: flex !important; }
.status-option {
  width: 100%; padding: 13px 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--surface);
  text-align: left; font-size: 14px; font-weight: 600; font-family: inherit; color: var(--slate);
  cursor: pointer; transition: background .12s, border-color .12s, transform .08s;
  display: flex; align-items: center;
}
.status-option:hover  { background: #F9FAFB; }
.status-option:active { transform: scale(.99); }
.status-option.active[data-status="niet_thuis"]     { background: #FDF3DC; border-color: var(--amber);  color: #92400E; }
.status-option.active[data-status="terugkomen"]     { background: #E7EDFF; border-color: var(--blue);   color: var(--blue-deep); }
.status-option.active[data-status="afspraak"]       { background: #E5F8EC; border-color: #22C55E;       color: #15803D; }
.status-option.active[data-status="geen_interesse"] { background: #FDE7E7; border-color: #EF4444;       color: #991B1B; }
.status-option.active[data-status="al_geisoleerd"]  { background: #CCFBF1; border-color: #0D9488;       color: #115E59; }
.status-option-divider { height: 1px; background: var(--border); margin: 4px 0; }
.so-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-right: 11px; }
#note-input-row { display: flex; align-items: center; }

/* notities */
.note-item { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.note-item:last-child { border-bottom: none; }
.note-meta { font-size: 11px; color: var(--muted); margin-bottom: 3px; font-weight: 600; }
.note-text { font-size: 14px; color: var(--slate); line-height: 1.45; font-weight: 500; }
.ni-row { display: flex; gap: 8px; margin-top: 8px; }
.ni-row input {
  flex: 1; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 14px; font-family: inherit; color: var(--slate);
  outline: none; background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.ni-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(17,24,39,.14); }
.ni-row button {
  background: var(--blue); color: #fff; border: none; border-radius: var(--r-sm);
  padding: 10px 17px; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: filter .15s;
}
.ni-row button:active { filter: brightness(.88); }
.private-bg { background: #F3F4F6; }

/* historie-tijdlijn */
.history-item {
  display: flex; gap: 12px; padding: 11px 14px;
  border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid var(--hairline);
  margin-bottom: 6px;
}
.history-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.history-meta { font-size: 11px; color: var(--muted); margin-bottom: 3px; font-weight: 600; }
.history-text { font-size: 14px; font-weight: 600; color: var(--slate); line-height: 1.4; }

#close-sheet-btn {
  width: calc(100% - 40px); margin: 14px 20px 16px;
  background: var(--ink); border: none; border-radius: var(--r-sm); padding: 14px;
  font-size: 14px; font-weight: 700; font-family: inherit; color: #fff; cursor: pointer;
  transition: transform .1s, filter .15s;
}
#close-sheet-btn:active { transform: scale(.985); filter: brightness(1.3); }

/* ── Gebruikersmenu ─────────────────────────────────────────────────────────── */
#user-menu {
  display: none; position: fixed; top: 70px; right: 12px; z-index: 400;
  background: var(--surface); border-radius: var(--r-md); padding: 7px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-float); min-width: 216px;
}
#user-menu.open { display: block; }
.umenu-name { font-size: 12px; color: var(--muted); padding: 9px 13px 2px; font-weight: 600; }
.umenu-role { font-size: 11px; color: var(--accent-green); padding: 0 13px 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.umenu-item {
  padding: 11px 13px; border-radius: 9px; font-size: 14px; font-weight: 600;
  color: var(--slate); cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.umenu-item:hover { background: var(--paper); }
.umenu-item.danger { color: var(--red); }
.umenu-item .ic { color: var(--muted); }
.umenu-item.danger .ic { color: var(--red); }
/* Juridische links als één subtiele voetregel i.p.v. drie volle menu-knoppen. */
.umenu-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; padding: 9px 8px 4px; margin-top: 5px; border-top: 1px solid var(--border); font-size: 11px; }
.umenu-legal a { color: var(--muted); text-decoration: none; font-weight: 600; }
.umenu-legal a:hover { color: var(--accent-green); }
.umenu-legal span { color: var(--muted); opacity: .5; }
/* Welke versie deze klant draait, handig bij een melding uit het veld */
.umenu-versie { flex-basis: 100%; text-align: center; color: var(--muted); opacity: .7; font-size: 10.5px; margin-top: 2px; }

/* ── Afspraak inplannen (module planning) ───────────────────────────────────
   Volledig scherm, geen sheet die over de kaart schuift. Vijf stappen met
   foto's en een agenda hebben de hele telefoon nodig; half over de kaart heen
   voelt als een tussendoortje in plaats van als het vastleggen van een verkoop. */
#planning-scherm {
  display: none; position: fixed; inset: 0; z-index: 700;
  background: var(--paper); flex-direction: column;
}
#planning-scherm.show { display: flex; }

/* Kop: terug links, sluiten rechts, adres in het midden. Altijd op dezelfde plek. */
.pl-kop {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px;
  background: var(--surface);
}
.pl-kop-tekst { flex: 1; min-width: 0; text-align: center; }
.pl-kop-titel { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--slate); }
.pl-kop-adres {
  font-size: 12.5px; color: var(--muted); margin-top: 1px;
  /* Mag over twee regels lopen: hier staat nu ook de gemeente met een knopje om
     hem recht te zetten, en dat knopje mag nooit achter een ellips wegvallen. */
  line-height: 1.35;
}
/* De gemeente staat in de kop omdat we hem uit het huis kennen. Hiermee zet de
   verkoper hem recht als het huis het bij het verkeerde eind heeft. */
.pl-kop-knop {
  background: none; border: 0; padding: 0 0 0 3px; font: inherit;
  color: var(--accent-green); text-decoration: underline; cursor: pointer;
}
.pl-kop-terug, .pl-kop-x {
  width: 38px; height: 38px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
  color: var(--slate); font-size: 18px; line-height: 1; cursor: pointer;
}
.pl-kop-x { font-size: 22px; }
.pl-kop-terug:active, .pl-kop-x:active { transform: scale(.92); }

/* Voortgang: een dunne balk plus de stap in woorden. */
.pl-voortgang { flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.pl-balk { height: 3px; background: var(--veld, #F3F4F6); }
.pl-balk-vol { height: 100%; width: 0; background: var(--accent-green); transition: width .22s ease; }
.pl-teller {
  max-width: 560px; margin: 0 auto; padding: 9px 20px 10px;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}

/* Het werkvlak scrolt, kop en voet blijven staan. Op een breed scherm blijft de
   inhoud een leesbare kolom in plaats van een uitgerekte regel. */
.pl-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 20px 28px; }
.pl-body > * { max-width: 560px; margin-left: auto; margin-right: auto; }

/* Eén vraag per scherm: de vraag groot, de rest eronder. */
.pl-vraag { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--slate); margin: 0 0 14px; line-height: 1.25; }
.pl-vraag-2 { margin-top: 26px; }
.pl-hint { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.pl-stap { min-height: 0; }
/* ── Agenda: een echte maandkalender ──────────────────────────────────────── */
.pl-cal { user-select: none; }
.pl-cal-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pl-cal-maand {
  font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--slate);
  text-transform: capitalize;
}
.pl-cal-pijl {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--slate); font-size: 20px; line-height: 1; cursor: pointer;
}
.pl-cal-pijl:disabled { opacity: .3; cursor: default; }
/* minmax(0,1fr) en niet 1fr: een kolom van 1fr heeft min-width auto, dus een
   lange gemeentenaam als "Haarlemmermeer" duwde zijn eigen kolom breder en
   liep de hele maand uit het raster. Nu mag de kolom krimpen en knipt de naam
   af; de volledige naam staat in de title van de dag. */
.pl-cal-rij { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pl-cal-namen {
  margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--muted);
  text-align: center; text-transform: uppercase; letter-spacing: .04em;
}
.pl-cal-leeg { display: block; }
.pl-cal-dag {
  aspect-ratio: 1 / 1; width: 100%; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--surface); color: var(--slate); font-family: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 0;
}
.pl-cal-dag { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; }
.pl-cal-nr { line-height: 1; }
.pl-cal-tag {
  font-size: 8.5px; font-weight: 700; line-height: 1.1; max-width: 100%; padding: 0 2px; box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85;
}
.pl-cal-dag.uit { color: var(--muted); opacity: .35; cursor: default; border-color: transparent; background: transparent; }
.pl-cal-dag.eigen { border-color: var(--accent-green); background: var(--blue-tint, #ECFDF5); color: var(--blue-deep, #065F46); }
.pl-cal-dag.bezet { background: var(--veld, #F3F4F6); color: var(--muted); border-style: dashed; cursor: default; }
.pl-cal-dag.bezet.uit { border-style: none; }
.pl-cal-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.pl-cal-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.pl-cal-legenda .bol { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--border); display: inline-block; }
.pl-cal-legenda .bol.eigen { background: var(--blue-tint, #ECFDF5); border-color: var(--accent-green); }
.pl-cal-legenda .bol.bezet { background: var(--veld, #F3F4F6); border-style: dashed; }
.pl-cal-legenda .bol.vrij { background: var(--surface); }
.pl-vink { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--slate); margin: 4px 0 12px; }
.pl-vink input { width: 18px; height: 18px; accent-color: var(--accent-green); }
.pl-vink-klein { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; gap: 7px; }
.pl-vink-klein input { width: 15px; height: 15px; }
.pl-cal-dag.vandaag { border-color: var(--border); box-shadow: inset 0 0 0 1px var(--border); }
.pl-cal-dag.actief {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 4px 12px rgba(4,120,87,.22);
}
/* ── Tijden per dagdeel ───────────────────────────────────────────────────── */
.pl-dagkop { font-size: 13px; color: var(--muted); margin-bottom: 12px; text-transform: capitalize; }
.pl-dagdeel {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 7px 2px;
}
.pl-tijd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; }
.pl-tijd {
  padding: 12px 6px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--slate); font-family: var(--font-display);
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.pl-tijd.actief {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 4px 12px rgba(4,120,87,.22);
}
/* Voet: vaste balk onderin met de doorknop. Terug zit in de kop. */
.pl-voet {
  flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--hairline);
  padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.pl-voet-kolom { max-width: 560px; margin: 0 auto; }

.pl-chip-sub { font-weight: 600; font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.pr-chip.active .pl-chip-sub { color: rgba(255,255,255,.85); }
.pl-leeg { font-size: 13px; color: var(--muted); padding: 4px 2px; }
.pl-bel { color: var(--accent-green); font-weight: 700; text-decoration: none; }
.pl-knop {
  width: 100%; padding: 13px; border: 0; border-radius: 12px;
  background: var(--blue); color: #fff; font-family: var(--font-display);
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.pl-knop:disabled { opacity: .45; cursor: default; }
.pl-uitleg { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
.pl-ok { text-align: center; padding: 26px 8px 8px; }
.pl-ok .pl-knop { margin-top: 18px; }
.pl-ok-let-op { font-size: 13px; color: var(--amber, #B45309); margin-top: 10px; }
/* Bellijst bij een project of een volle dag */
.pl-bel-lijst { display: grid; gap: 8px; margin-top: 16px; }
.pl-bel-knop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border: 1px solid var(--accent-green); border-radius: 12px;
  background: var(--blue-tint, #ECFDF5); text-decoration: none;
}
.pl-bel-naam { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; color: var(--blue-deep, #065F46); }
.pl-bel-nr { font-size: 15px; font-weight: 700; color: var(--slate); }
/* ── Foto's ───────────────────────────────────────────────────────────────── */
.pl-foto-knop {
  display: inline-block; margin-top: 14px; padding: 11px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--slate);
  font-family: var(--font-display); font-size: 14px; font-weight: 700; cursor: pointer;
}
.pl-foto-knop input { display: none; }
.pl-foto-teller { font-size: 12.5px; color: var(--muted); margin-left: 10px; }
.pl-foto-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; }
.pl-foto { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--veld, #F3F4F6); }
.pl-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-foto-x {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: rgba(17,24,39,.72); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
.pl-ok-titel { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--accent-green); }
.pl-ok-regel { font-size: 15px; color: var(--slate); margin-top: 6px; }
.pl-ok-sub { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* Een regel per verkocht product: hoeveelheid en bedrag naast elkaar, met een
   kruisje om het product er weer af te halen. */
.pl-regel {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px 12px; margin-bottom: 8px; background: var(--surface);
}
.pl-regel-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-regel-naam { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--slate); }
.pl-regel-x {
  border: 0; background: none; color: var(--muted); font-size: 20px;
  line-height: 1; padding: 0 4px; cursor: pointer;
}
.pl-regel-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pl-regel-velden .pl-regel-veld:only-child { grid-column: 1 / -1; }
.pl-regel-veld { margin: 0; }
.pl-totaal {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 2px 2px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--slate);
}
.pl-totaal b { font-family: var(--font-display); font-size: 17px; font-weight: 800; }

/* Offerte sturen vanaf het slotscherm */
.pl-offerte { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 16px; }
.pl-offerte .pl-knop { margin-top: 12px; }
.pl-offerte-knoppen { display: grid; gap: 8px; margin-top: 12px; }
.pl-knop-stil {
  background: var(--surface); color: var(--accent-green);
  border: 1px solid var(--border); text-decoration: none;
  display: block; text-align: center; box-sizing: border-box;
}

/* ── Manager-paneel ─────────────────────────────────────────────────────────── */
#manager-panel { display: none; position: fixed; inset: 0; z-index: 800; background: var(--paper); flex-direction: column; }
#manager-panel.open { display: flex; }
#mp-topbar {
  background: var(--blue); padding: 14px 20px;
  display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
#mp-title { flex: 1; }
#mp-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -.2px;
  display: flex; align-items: center; gap: 9px;
}
#mp-close-btn {
  background: #fff; border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--r-sm); padding: 8px 13px; flex-shrink: 0;
  color: var(--slate); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.mp-tabs { display: flex; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mp-tab {
  flex: 1; padding: 14px 8px; border: none; background: transparent;
  font-size: 13.5px; font-weight: 600; font-family: inherit; color: var(--muted);
  cursor: pointer; border-bottom: 2.5px solid transparent; transition: color .15s, border-color .15s;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.mp-tab.active { color: var(--blue-deep); border-bottom-color: var(--blue); background: var(--blue-tint); }
.mp-content {
  flex: 1; overflow-y: auto; padding: 16px;
  /* zachte groene gloed bovenin zodat het paneel groen ademt, geen wit vlak */
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(229,231,235,.28) 0%, transparent 60%),
    var(--paper);
}
.mp-section {
  background: var(--surface); border-radius: var(--r-lg); padding: 18px;
  margin-bottom: 12px; border: 1px solid var(--hairline);
  border-top: 3px solid var(--blue);
  box-shadow: var(--shadow-card);
}
.mp-section-title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; color: var(--blue-deep); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; letter-spacing: -.1px;
}
.mp-section-title .ic { color: var(--blue); }
.mp-btn {
  background: var(--blue); color: #fff; border: none; border-radius: var(--r-sm);
  padding: 12px 18px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: transform .1s, filter .15s;
  display: flex; align-items: center; gap: 8px;
}
.mp-btn:active { transform: scale(.98); filter: brightness(.9); }
.mp-btn.amber { background: var(--blue); }
.mp-btn.green { background: var(--green); }
.mp-btn.red   { background: var(--red); }
.mp-field { margin-bottom: 12px; }
.mp-field label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; display: block; }
.mp-field input, .mp-field select {
  width: 100%; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 12px; font-size: 14px; font-family: inherit; color: var(--slate);
  outline: none; transition: border-color .15s; background: var(--surface);
}
.mp-field input:focus, .mp-field select:focus { border-color: var(--blue); }
/* Adres-zoekbalk: duidelijk, met zoek-icoon i.p.v. de vage auth-veldstijl */
#adres-zoek-input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: 13px 14px 13px 42px; font-size: 15px; font-family: inherit; color: var(--slate);
  background: #fff no-repeat 14px center / 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  box-shadow: var(--shadow-card); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#adres-zoek-input::placeholder { color: var(--muted); }
#adres-zoek-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(4,120,87,.18); }

.team-member { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.team-member:last-child { border-bottom: none; }
.tm-avatar {
  width: 40px; height: 40px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.tm-info { flex: 1; min-width: 0; }
.tm-name { font-size: 14px; font-weight: 600; color: var(--slate); }
.tm-email { font-size: 12px; color: var(--muted); margin-top: 1px; }
.tm-role { font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 7px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .05em; }
.tm-role.manager    { background: var(--ink); color: #fff; }
.tm-role.verkoper   { background: var(--blue-tint); color: var(--blue-deep); }
.tm-role.teamleider { background: var(--accent-green); color: #fff; }

#invite-code-box {
  display: none; background: var(--blue-tint); border: 1.5px dashed #B9C8FF;
  border-radius: var(--r-md); padding: 18px; margin-top: 12px; text-align: center;
}
#invite-code-box.show { display: block; }
#invite-code {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 600; letter-spacing: 9px; color: var(--blue-deep); margin: 8px 0;
}
.invite-hint { font-size: 12px; color: var(--muted); font-weight: 600; }
.invite-copy-btn {
  background: var(--blue); color: #fff; border: none; border-radius: var(--r-sm);
  padding: 9px 20px; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; margin-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
}
.inv-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.inv-item:last-child { border-bottom: none; }
.inv-code { font-family: var(--font-display); font-weight: 600; color: var(--blue-deep); letter-spacing: 2.5px; font-size: 15px; }
.inv-used { color: var(--green); font-weight: 600; }
.inv-open { color: var(--blue-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }

/* ── Toast ──────────────────────────────────────────────────────────────────── */
#toast {
  display: none; position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md); padding: 11px 20px;
  font-size: 13px; font-weight: 600; z-index: 9999;
  /* width:max-content: zonder dit beperkt left:50% de shrink-to-fit-breedte tot
     een halve viewport → onnodig smalle, hoge toast van veel regels */
  width: max-content; max-width: min(420px, calc(100vw - 28px));
  text-align: center; line-height: 1.35;
  box-shadow: var(--shadow-float);
}

/* ── Wijk-beheer ────────────────────────────────────────────────────────────── */
#wijk-panel { display: none; position: fixed; inset: 0; z-index: 800; flex-direction: column; background: var(--ink); }
#wijk-panel.open { display: flex; }
#wijk-ptopbar {
  background: var(--blue); padding: 12px 16px;
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
#wijk-back-btn {
  background: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: var(--r-sm);
  color: var(--slate); padding: 8px 13px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; flex-shrink: 0;
}
#wijk-ptitle { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #fff; flex: 1; }
#wijk-hint-top { font-size: 11px; color: rgba(255,255,255,.5); text-align: right; flex-shrink: 0; font-weight: 600; }
#wijk-map-wrap { flex: 1; position: relative; min-height: 0; }

/* Zoekbalk boven de kaart in het buurten-paneel: eerst gemeente, daarna de
   buurten van die gemeente. */
#wijk-zoek-wrap {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 5; width: min(460px, calc(100% - 20px));
}
#wijk-zoek {
  width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 11px; background: #fff;
  color: var(--text-primary); font-family: inherit;
  box-shadow: 0 4px 16px rgba(8,12,24,.16);
}
#wijk-zoek:focus { outline: none; border-color: var(--accent-green); }
#wijk-zoek-uitslag {
  display: none; margin-top: 6px; background: #fff; border: 1px solid var(--border);
  border-radius: 11px; box-shadow: 0 8px 24px rgba(8,12,24,.18);
  max-height: 46dvh; overflow-y: auto;
}
#wijk-zoek-uitslag.show { display: block; }
.wz-rij {
  padding: 11px 14px; font-size: 14px; cursor: pointer; border-bottom: 1px solid #F1F5F9;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.wz-rij:last-child { border-bottom: none; }
.wz-rij:hover { background: #F8FAFC; }
.wz-rij-naam { font-weight: 600; color: #0F172A; }
.wz-rij-sub { font-size: 12px; color: #64748B; flex-shrink: 0; }
.wz-leeg { padding: 12px 14px; font-size: 13px; color: #64748B; }
#wijk-map { width: 100%; height: 100%; }
#wijk-loading {
  display: none; position: absolute; inset: 0; z-index: 10;
  background: rgba(10,15,30,.6); align-items: center; justify-content: center;
  gap: 12px; color: #fff; font-size: 14px; font-weight: 600;
}
#wijk-loading.show { display: flex; }
.wijk-spinner {
  width: 28px; height: 28px; border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Onderschuif-panelen (wijk / wervers / adressen) ───────────────────────── */
#wijk-sheet-overlay, #worker-picker-overlay, #unit-picker-overlay, #mgr-pw-overlay {
  display: none; position: fixed; inset: 0; background: rgba(8,12,24,.45); z-index: 820;
}
#wijk-sheet-overlay { z-index: 810; }
#wijk-sheet-overlay.show, #worker-picker-overlay.show, #unit-picker-overlay.show, #mgr-pw-overlay.show { display: block; }

#wijk-sheet, #worker-picker, #unit-picker, #mgr-pw-sheet {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 821;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-sheet);
  padding-bottom: env(safe-area-inset-bottom, 12px);
}
#wijk-sheet { z-index: 811; }
#wijk-sheet.show, #worker-picker.show, #unit-picker.show, #mgr-pw-sheet.show { display: block; }
/* Huis-venster in "Bekijk huizen" — kijkvenster, dus geen statusknoppen. */
#wijk-huis-overlay { display: none; position: fixed; inset: 0; background: rgba(8,12,24,.45); z-index: 812; }
#wijk-huis-overlay.show { display: block; }
#wijk-huis-sheet {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 813;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-sheet); max-height: 88dvh;
  flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 12px);
}
#wijk-huis-sheet.show { display: flex; }
#wh-close-x {
  position: absolute; top: 12px; right: 12px; background: none; border: none;
  cursor: pointer; color: var(--muted); padding: 6px;
}
.wh-tag {
  background: var(--paper); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 9px; font-size: 12px; font-weight: 600; color: #44506A;
}
.wh-adres-knop {
  display: block; width: 100%; text-align: left; background: var(--paper);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font-size: 14px; font-weight: 600; color: #0F172A; cursor: pointer;
  font-family: inherit; margin-bottom: 6px;
}
.wh-adres-knop.actief { border-color: var(--accent-green); color: var(--accent-green); }

#ws-workers { font-size: 13px; color: var(--slate); line-height: 1.7; }
/* Veel wervers op één wijk? Lijst intern laten scrollen (max ~5 rijen) i.p.v.
   de energielabels/knoppen eronder wegduwen. -webkit-overflow-scrolling voor
   soepel scrollen op de telefoon. */
#ws-workers { max-height: 210px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── Werver-statistiek / team-sheets (openen bovenop het managerpaneel) ─────── */
#werver-sheet-overlay, #team-picker-overlay, #team-sheet-overlay {
  display: none; position: fixed; inset: 0; background: rgba(8,12,24,.45); z-index: 830;
}
#werver-sheet-overlay.show, #team-picker-overlay.show, #team-sheet-overlay.show { display: block; }
#werver-sheet, #team-picker, #team-sheet {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 831;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-sheet); max-height: 90dvh;
  flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 12px);
}
#werver-sheet.show, #team-picker.show, #team-sheet.show { display: flex; }
#wv-body, #ts-body { flex: 1; min-height: 0; }

/* Week-kiezer linksboven in het werverscherm */
.wv-week-select {
  appearance: none; -webkit-appearance: none;
  background: var(--paper); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 36px 9px 16px; font-size: 14px; font-weight: 700; color: var(--slate);
  font-family: inherit; cursor: pointer; max-width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
}

/* Samenvatting-tegels bovenaan een werver-/teamscherm */
.wv-hero { display: flex; gap: 10px; margin: 4px 0 14px; }
.wv-hero .tv-cel { padding: 12px 8px; }
.wv-hero .tv-val { font-size: 22px; }
.wv-notitie-sum {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; margin: 0 0 14px; background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 14px; font-weight: 700; color: var(--slate);
}
.wv-notitie-sum b { font-family: var(--font-display); font-size: 18px; color: #8B5CF6; }

/* Eén dag-kaart in het werverscherm */
.wv-dag { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 12px; overflow: hidden; }
.wv-dag-kop {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  cursor: pointer; background: var(--paper);
}
.wv-dag-datum { flex: 1; font-size: 14px; font-weight: 800; color: var(--slate); text-transform: capitalize; }
.wv-dag-mini { text-align: center; }
.wv-dag-mini .m-val { font-size: 15px; font-weight: 800; color: var(--slate); line-height: 1.1; }
.wv-dag-mini .m-lbl { font-size: 9px; color: var(--muted); font-weight: 600; letter-spacing: .2px; }
.wv-caret { color: var(--muted); font-size: 12px; transition: transform .15s; flex-shrink: 0; }
.wv-dag.open .wv-caret { transform: rotate(90deg); }

.wv-dag-body { display: none; padding: 12px 14px; border-top: 1px solid var(--border); }
.wv-dag.open .wv-dag-body { display: block; }

/* Detailregel binnen een dag: conversie, klik-tijden */
.wv-detail-rij { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--slate); }
.wv-detail-rij span:first-child { color: var(--muted); }
.wv-detail-rij b { font-weight: 800; }

/* Knop-tellers (status-chips) */
.wv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.wv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 10px; font-size: 12px; font-weight: 700; color: var(--slate);
}
.wv-chip .n { color: var(--muted); font-weight: 800; }
.wv-sdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wp-check .ic { width: 14px; height: 14px; }

/* Adressen uitklappen */
.wv-adr-toggle {
  margin-top: 10px; background: none; border: none; cursor: pointer;
  color: var(--blue); font-size: 13px; font-weight: 700; padding: 4px 0;
  display: flex; align-items: center; gap: 6px; font-family: inherit;
}
.wv-adr-lijst { margin-top: 6px; }
.wv-adr {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-top: 1px solid var(--border); font-size: 13px;
}
.wv-adr-naam { flex: 1; min-width: 0; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-adr-tijd { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.wv-adr-stat { flex-shrink: 0; font-size: 12px; font-weight: 700; }

/* Teams-lijst in het managerpaneel */
.tm-team {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.tm-team:last-child { border-bottom: none; }
.tm-team-naam { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--slate); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-team-aantal { font-size: 12px; color: var(--muted); font-weight: 600; }

/* Wijk Street View — overlay bovenop het manager-paneel (manager verlaat het paneel niet) */
#wijk-sv-overlay { display: none; position: fixed; inset: 0; background: rgba(8,12,24,.55); z-index: 900; }
#wijk-sv-overlay.show { display: block; }
#wijk-sv {
  display: none; position: fixed; inset: 0; z-index: 901;
  background: var(--surface); overflow: hidden; flex-direction: column;
}
#wijk-sv-hint, #wijk-huizen-bar {
  display: none; position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  z-index: 850; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: var(--shadow-sheet);
  padding: 8px 8px 8px 16px; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; color: var(--slate); white-space: nowrap;
}
#wijk-sv-hint.show, #wijk-huizen-bar.show { display: flex; }
#wijk-sv-hint button, #wijk-huizen-bar button {
  background: var(--ink); color: #fff; border: none; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* ── Laag-knoppen in het wijk-kijkvenster (zelfde look als de hoofdkaart-knoppen).
   Verticaal gestapeld linksonder, groeit naar boven zodat ze nooit van het
   scherm lopen. Elke knop krijgt inline display:flex via JS zodra hij zichtbaar
   moet zijn (anders display:none). */
#wijk-map-controls {
  position: fixed; bottom: 24px; left: 16px; z-index: 860;
  display: flex; flex-direction: column-reverse; gap: 10px; align-items: center;
}
#wijk-map-controls button {
  background: var(--surface); color: var(--slate); border: 1px solid var(--border); border-radius: 50%;
  width: 50px; height: 50px; cursor: pointer;
  box-shadow: var(--shadow-float);
  align-items: center; justify-content: center;
  transition: transform .12s, background .15s, color .15s;
}
#wijk-map-controls button:active { transform: scale(.92); }
#wijk-eigendom-toggle.active { background: #7C3AED; color: #fff; border-color: #7C3AED; }
#wijk-gas-toggle.active { background: #EA580C; color: #fff; border-color: #EA580C; }
#wijk-elek-toggle.active { background: #2563EB; color: #fff; border-color: #2563EB; }
#wijk-luchtfoto-toggle.active { background: var(--ink); color: #fff; border-color: var(--ink); }
#wijk-inkomen-toggle.active { background: #059669; color: #fff; border-color: #059669; }
#wijk-leeftijd-toggle.active { background: #DB2777; color: #fff; border-color: #DB2777; }
/* Bevestig-knop bij een Street-View-klik: strip de standaard MapLibre-popup,
   zodat alleen de donkere knop bij de muis zweeft. */
.sv-confirm-popup .maplibregl-popup-content { padding: 0; background: transparent; box-shadow: none; }
.sv-confirm-popup .maplibregl-popup-tip { display: none; }
#wijk-sv.show { display: flex; }
.wijk-sv-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#wijk-sv-title { font-size: 16px; font-weight: 800; color: var(--slate); }
.wijk-sv-close {
  background: var(--paper); border: 1px solid var(--border); border-radius: 10px;
  width: 36px; height: 36px; cursor: pointer; color: var(--slate);
  display: flex; align-items: center; justify-content: center;
}
#wijk-sv-frame { flex: 1; min-height: 0; background: #EEF0F2; }
#wijk-sv-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.unit-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 10px; border-bottom: 1px solid var(--hairline);
  cursor: pointer; border-radius: var(--r-sm);
}
.unit-item:hover { background: var(--paper); }
.unit-item:last-child { border-bottom: none; }
.unit-number {
  width: 42px; height: 42px; border-radius: 12px; background: var(--blue-tint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--blue-deep); flex-shrink: 0;
}
.unit-addr { flex: 1; }
.unit-addr-main { font-size: 14px; font-weight: 600; color: var(--slate); }
.unit-addr-sub  { font-size: 12px; color: var(--muted); margin-top: 1px; font-weight: 500; }

.wp-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.wp-item:last-child { border-bottom: none; }
.wp-check {
  width: 23px; height: 23px; border-radius: 7px;
  border: 2px solid #C6CEDB; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; transition: all .15s;
}
.wp-check.on { background: var(--blue); border-color: var(--blue); }
.wp-name { font-size: 14px; font-weight: 600; color: var(--slate); }
.wp-role { font-size: 11px; color: var(--muted); }

/* ── Topbar mobiel: 2 rijen ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #topbar { flex-wrap: wrap; padding: 8px 12px 7px; min-height: unset; gap: 6px 8px; }
  #topbar-left  { flex: 0 1 auto; min-width: 0; }
  #topbar-right { order: 2; flex-shrink: 0; }
  #topbar-center { order: 3; width: 100%; justify-content: center; padding: 5px 12px; border-radius: var(--r-sm); }
  #topbar-logo { font-size: 17px; }
  .sstat { padding: 0 10px; }
  .sstat-val { font-size: 20px; }
  .sstat-lbl { font-size: 9px; }
  #wijk-pill { max-width: 110px; font-size: 10px; }
  #user-btn { padding: 7px; }
  #user-name-disp { max-width: 30vw; }
  #mgr-topbar-btn { padding: 7px 11px; font-size: 12px; }
  #shift-toggle-btn { margin-left: 8px; font-size: 11px; padding: 5px 9px; }

  /* Legenda compacter op mobiel */
  #legend { bottom: 80px; left: 12px; padding: 7px 9px; gap: 4px; border-radius: var(--r-sm); }
  .leg { gap: 6px; font-size: 9.5px; }
  .ldot { width: 9px; height: 9px; border-radius: 3px; }

  /* Huis-paneel compacter: meta-tags twee-aan-twee (bouwjaar naast label,
     gas naast elektriciteit) i.p.v. onder elkaar */
  #sheet-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sh-meta-tag { padding: 6px 10px; display: flex; align-items: center; }

  /* Street View-knop naast de straatnaam (links van het sluit-kruisje)
     i.p.v. als losse regel onder de tags */
  #sheet-header { position: relative; }
  #sv-open-btn { position: absolute; top: 14px; right: 60px; margin-top: 0; }
  #sheet-address { padding-right: 165px; }   /* straatnaam niet onder de knop */
}

/* ── Afspraak datum/tijd-formulier (in huis-paneel) ──────────────────────────── */
#afspraak-form { margin-top: 10px; padding: 14px; background: var(--blue-tint); border: 1.5px solid #BFE6D4; border-radius: var(--r-md); }
.af-label { font-size: 12px; font-weight: 700; color: var(--blue-deep); margin-bottom: 8px; }
.af-row { display: flex; gap: 8px; }
/* E-mail + telefoon onder elkaar (volle breedte) i.p.v. naast elkaar, zodat het
   telefoon-veld niet half buiten beeld valt op een smal scherm. */
.af-stack { flex-direction: column; }
.af-row input { flex: 1; border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 11px 12px; font-size: 15px; font-family: inherit; color: var(--slate); background: var(--surface); outline: none; }
.af-row input:focus { border-color: var(--blue); }
.af-actions { display: flex; gap: 8px; margin-top: 10px; }
.af-save { flex: 1; background: var(--blue); color: #fff; border: none; border-radius: var(--r-sm); padding: 12px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.af-cancel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 16px; font-size: 14px; font-weight: 600; font-family: inherit; color: var(--slate); cursor: pointer; }

/* Verkocht/omzet-formulier — zelfde vorm als het afspraak-formulier, fuchsia-tint */
#verkocht-form { margin-top: 10px; padding: 14px; background: var(--blue-tint); border: 1.5px solid #BFE6D4; border-radius: var(--r-md); }
.vk-input-row { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 0 12px; }
.vk-input-row:focus-within { border-color: var(--blue); }
.vk-euro { font-size: 16px; font-weight: 800; color: var(--blue-deep); }
.vk-input-row input { flex: 1; border: none; outline: none; padding: 12px 0; font-size: 16px; font-family: inherit; color: var(--slate); background: transparent; }

/* Bouwdeel-keuze bij een verkoop — één of meer knoppen aan */
.bouwdeel-keuze { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.bouwdeel-chip {
  border: 1.5px solid #BFE6D4; background: var(--surface);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  font-family: inherit; color: var(--blue-deep); cursor: pointer;
}
.bouwdeel-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.bouwdeel-chip:active { transform: scale(.97); }
/* Verplichte omschrijving zodra "Overig" aan staat */
#bouwdeel-overig-tekst {
  width: 100%; box-sizing: border-box; margin-top: 8px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 12px; font-size: 15px; font-family: inherit;
  color: var(--slate); background: var(--surface); outline: none;
}
#bouwdeel-overig-tekst:focus { border-color: var(--blue); }

/* ── Adres zoeken (verkoper) — compacte balk in de topbar, naast het logo ────── */
/* Groen zoek-knopje: alleen op telefoon (zie media-query onderaan). */
#wijkzoek-toggle { display: none; }
#wijkzoek { position: relative; flex: 0 1 200px; min-width: 0; margin-right: auto; }
#wijkzoek-bar {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 10px;
}
#wijkzoek-bar:focus-within { border-color: var(--blue); }
#wijkzoek-bar > svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; }
#wijkzoek-input {
  flex: 1; border: none; outline: none; background: transparent; min-width: 0;
  font-size: 13px; font-family: inherit; color: var(--slate);
}
#wijkzoek-input::placeholder { color: #9CA3AF; }
#wijkzoek-clear {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 2px; cursor: pointer; color: #6B7280; flex-shrink: 0;
}
#wijkzoek-sug {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 120;
  width: min(320px, 80vw);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(17,24,39,.16);
  overflow: hidden;
}
.wijkzoek-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 11px 13px; font-size: 13px; font-family: inherit; color: var(--slate); cursor: pointer;
}
.wijkzoek-item:last-child { border-bottom: none; }
.wijkzoek-item:hover, .wijkzoek-item:active { background: var(--blue-tint); }
/* Mobiel: zoekbalk krimpt zodat logo + zoek + menu op één rij blijven (geen wrap).
   Staat bewust ná de basisregel hierboven, anders wint die basisregel op mobiel. */
@media (max-width: 600px) {
  /* Naam + functie niet op telefoon; daar staat i.p.v. daarvan het zoek-knopje. */
  #user-info { display: none; }
  #wijkzoek-toggle {
    display: flex; align-items: center; justify-content: center;
    background: var(--blue); border: none; border-radius: var(--r-sm);
    padding: 8px; cursor: pointer; flex-shrink: 0;
  }
  #wijkzoek-toggle svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
  #wijkzoek-toggle:active { transform: scale(.94); }

  /* Zoekbalk zelf verborgen tot je op het groene knopje tikt; dan klapt hij vast
     onder de topbar uit (positie via --wz-top, gezet in toggleWijkzoek). */
  #wijkzoek { display: none; }
  #wijkzoek.open {
    display: block; position: fixed; left: 12px; right: 12px;
    top: var(--wz-top, 66px); z-index: 130; margin: 0;
  }
  #wijkzoek-input { font-size: 16px; }   /* 16px voorkomt auto-zoom bij focus op iOS */
  #wijkzoek.open #wijkzoek-sug {
    position: fixed; left: 12px; right: 12px; width: auto;
    top: calc(var(--wz-top, 66px) + 46px);
  }

  /* Zoekbalk open: de laag-knoppen verbergen. Tijdens het adres-zoeken zijn de
     laag-toggles niet nodig, en zo kunnen ze de zoekbalk én de (soms lange)
     suggestielijst nooit overlappen. Komen terug zodra het zoeken sluit. */
  body.wz-open #map-controls { display: none; }
}

/* ── Mijn afspraken (onderschuif-paneel) ─────────────────────────────────────── */
#appt-overlay { display: none; position: fixed; inset: 0; background: rgba(8,12,24,.42); z-index: 400; }
#appt-overlay.show { display: block; }
#appt-sheet {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 401;
  background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-sheet); padding-bottom: env(safe-area-inset-bottom, 16px);
}
#appt-sheet.show { display: block; }
#appt-close-x, #ws-close-x {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
#ws-close-x:active { transform: scale(.9); background: var(--paper); }
.appt-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 8px;
}
.appt-when {
  flex-shrink: 0; width: 56px; text-align: center;
  background: var(--blue-tint); border-radius: 10px; padding: 7px 4px;
}
.appt-day { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--blue-deep); line-height: 1; }
.appt-mon { font-size: 10px; font-weight: 700; color: var(--blue-deep); text-transform: uppercase; letter-spacing: .04em; }
.appt-info { flex: 1; min-width: 0; }
.appt-addr { font-size: 14px; font-weight: 700; color: var(--slate); }
.appt-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.appt-contact { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.appt-contact-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--blue-deep); text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
.appt-contact-link .ic { flex-shrink: 0; color: var(--muted); }
.appt-contact-link:active { opacity: .6; }
.appt-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 30px 0; }
.appt-card { margin-bottom: 8px; }
.appt-card .appt-item { margin-bottom: 0; }
.appt-actions { flex-shrink: 0; display: flex; gap: 6px; }
.appt-act { background: var(--surface); border: 1px solid var(--hairline); border-radius: 9px; width: 38px; height: 38px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.appt-act:active { transform: scale(.92); }
.appt-act-sale { background: var(--blue-tint); border-color: transparent; color: var(--blue-deep); }
.appt-act-del { color: var(--red); }
.appt-edit { margin: -2px 0 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--hairline); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); }
.appt-edit-fields { display: flex; gap: 8px; margin-bottom: 10px; }
.appt-edit-fields input { flex: 1; min-width: 0; font-size: 14px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--paper); color: var(--slate); }
.appt-edit-actions { display: flex; gap: 8px; }
.appt-edit-actions button { flex: 1; padding: 9px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; }
.appt-edit-cancel { border: 1px solid var(--border); background: var(--paper); color: var(--muted); }
.appt-edit-save { border: none; background: var(--blue-deep); color: #fff; }

/* ── Nette bevestigings-modal (vervangt browser-confirm) ─────────────────────── */
.ui-confirm-overlay {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(17,24,39,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .15s ease;
}
.ui-confirm-overlay.show { opacity: 1; }
.ui-confirm {
  width: 100%; max-width: 380px; background: #fff; border-radius: var(--r-xl);
  padding: 26px 24px 20px; box-shadow: var(--shadow-float); text-align: center;
  transform: translateY(8px) scale(.96); transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.ui-confirm-overlay.show .ui-confirm { transform: none; }
.ui-confirm-ic {
  width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--blue-tint); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.ui-confirm-ic svg { width: 24px; height: 24px; }
.ui-confirm-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--slate); margin-bottom: 7px; letter-spacing: -.01em; }
.ui-confirm-msg { font-size: 14px; color: var(--muted); line-height: 1.5; white-space: pre-line; margin-bottom: 22px; }
.ui-confirm-acts { display: flex; gap: 10px; }
.ui-confirm-acts button { flex: 1; padding: 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: filter .15s, transform .1s; }
.ui-confirm-acts button:active { transform: scale(.97); }
.ui-confirm-cancel { background: var(--paper); color: var(--slate); border: 1px solid var(--border); }
.ui-confirm-ok { background: var(--blue); color: #fff; border: none; box-shadow: 0 6px 16px rgba(4,120,87,.26); }
.ui-confirm-ok:hover { filter: brightness(1.05); }

/* ── Toestemming-hulp (locatie / richting) — alleen zichtbaar bij een blokkade ─ */
#perm-help-overlay {
  display: none; position: fixed; inset: 0; z-index: 12500;
  align-items: center; justify-content: center; padding: 22px;
  background: rgba(17,24,39,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#perm-help-overlay.show { display: flex; }
#perm-help-card {
  position: relative; width: 100%; max-width: 400px; max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: var(--r-xl); padding: 26px 24px 22px;
  box-shadow: var(--shadow-float); border-top: 4px solid var(--accent-green);
}
#perm-help-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border: none; background: var(--paper); color: var(--muted); border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer; font-family: inherit;
}
#perm-help-x:active { transform: scale(.9); }
#perm-help-title {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--slate); margin: 0 30px 8px 0; letter-spacing: -.01em;
}
.perm-help-intro { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0 0 16px; }
.perm-help-block { display: none; background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.perm-help-h { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }
.perm-help-block ol { margin: 0; padding-left: 18px; }
.perm-help-block li { font-size: 13px; color: var(--slate); line-height: 1.55; margin-bottom: 6px; }
.perm-help-block li:last-child { margin-bottom: 0; }
.perm-help-block b { font-weight: 700; color: var(--text-primary); }
.perm-help-foot { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 4px 0 18px; }
.perm-help-ok {
  width: 100%; padding: 12px; border: none; border-radius: var(--r-sm);
  background: var(--accent-green); color: #fff; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; box-shadow: 0 6px 16px rgba(4,120,87,.26);
}
.perm-help-ok:active { transform: scale(.98); }

/* ── Teamleiders (manager-paneel) + gemeente-picker ─────────────────────────── */
.tl-select {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text-primary);
  font-size: 14px; font-family: inherit;
}
.tl-item {
  padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); margin-bottom: 10px;
}
.tl-item:last-child { margin-bottom: 0; }
.tl-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tl-name { font-weight: 800; color: var(--text-primary); font-size: 15.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tl-btn {
  background: var(--blue-tint); color: var(--blue-deep); border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 8px;
}
.tl-btn.ghost { background: var(--paper); color: var(--muted); }
.tl-meta { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.tl-meta b { color: var(--text-primary); font-weight: 700; }
.tl-gems { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tl-gem-chip {
  background: var(--paper); color: var(--slate); font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border);
}
#tl-pick-overlay {
  display: none; position: fixed; inset: 0; background: rgba(8,12,24,.45); z-index: 830;
}
#tl-pick-overlay.show { display: block; }
#tl-pick-sheet {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 831;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-sheet); padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  max-height: 85vh; flex-direction: column;
}
#tl-pick-sheet.show { display: flex; }
.mp-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mp-sheet-title { font-weight: 800; font-size: 17px; color: var(--text-primary); }
.mp-sheet-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; }
.tl-pick-list { overflow-y: auto; flex: 1 1 auto; min-height: 120px; border: 1px solid var(--border); border-radius: 10px; }
.tl-pick-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px;
  color: var(--text-primary); border-bottom: 1px solid var(--border); cursor: pointer;
}
.tl-pick-row:last-child { border-bottom: none; }
.tl-pick-row input { width: 17px; height: 17px; accent-color: var(--accent-green); }

/* ── Team-modal: segmented kiezer (teamleiders / verkopers / gemeentes) ──────── */
.tp-seg { display: flex; gap: 6px; }
.tp-seg-btn {
  flex: 1; padding: 8px 6px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.tp-seg-btn.active { background: var(--blue-tint); color: var(--blue-deep); border-color: var(--blue-soft); }
.tp-cnt:not(:empty) {
  background: var(--accent-green); color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 1px 6px; min-width: 16px; text-align: center;
}

/* Groter/duidelijker zoekveld: team-modal, teamlijst, werver-kieslijst,
   dagoverzicht en het buurten-paneel gebruiken allemaal dit ene veld. */
#tp-search, .rl-zoek {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
  color: var(--text-primary); font-family: inherit;
}
#tp-search:focus, .rl-zoek:focus { outline: none; border-color: var(--accent-green); }

/* ── Prijzen & rekenhulp (naslag-sheet) ──────────────────────────────────────── */
#prijzen-overlay { display: none; position: fixed; inset: 0; background: rgba(8,12,24,.42); z-index: 400; }
#prijzen-overlay.show { display: block; }
#prijzen-sheet {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 401;
  max-height: 92vh; flex-direction: column;
  background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-sheet); padding-bottom: env(safe-area-inset-bottom, 12px);
}
#prijzen-sheet.show { display: flex; }
@media (min-width: 640px) {
  #prijzen-sheet { left: 50%; right: auto; transform: translateX(-50%); width: 460px; }
}
.pr-head { position: relative; padding: 16px 18px 12px; flex-shrink: 0; }
.pr-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--slate); }
.pr-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pr-x {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
}
.pr-x:active { transform: scale(.9); }
.pr-tabs { display: flex; gap: 6px; padding: 0 18px; flex-shrink: 0; }
.pr-tab {
  flex: 1; padding: 10px 8px; border: 1px solid var(--border); border-bottom: none; background: var(--surface);
  border-radius: 10px 10px 0 0; font-size: 13.5px; font-weight: 700; color: var(--muted); font-family: inherit; cursor: pointer;
}
.pr-tab.active { color: var(--blue-deep); background: var(--blue-tint); border-color: var(--blue-soft); }
.pr-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 18px 18px; flex: 1; min-height: 0; }
.pr-zoek {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--slate); font-family: inherit;
}
.pr-zoek:focus { outline: none; border-color: var(--accent-green); }
.pr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.pr-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 13px; font-weight: 700; color: var(--slate); cursor: pointer; font-family: inherit;
}
.pr-chip:active { transform: scale(.96); }
.pr-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(4,120,87,.22); }
.pr-chip .ic { width: 16px; height: 16px; color: var(--blue); vertical-align: -3px; }
.pr-chip.active .ic { color: #fff; }
.pr-group { margin-bottom: 16px; }
.pr-cat {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 7px 3px;
}
.pr-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.pr-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--hairline); }
.pr-row:first-child { border-top: none; }
.pr-row-main { flex: 1; min-width: 0; }
.pr-naam { font-size: 14px; font-weight: 600; color: var(--slate); line-height: 1.3; }
.pr-specs { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pr-note { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pr-prijs { flex-shrink: 0; font-size: 15px; font-weight: 800; color: var(--slate); text-align: right; white-space: nowrap; }
.pr-eenheid { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.pr-updated { font-size: 11px; color: var(--gray-400); text-align: center; padding: 16px 0 2px; }
.pr-empty { color: var(--muted); font-size: 13.5px; text-align: center; padding: 26px 0; line-height: 1.5; }
.pr-reken-form { margin-bottom: 14px; }
.pr-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.pr-select, .pr-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--slate); font-family: inherit;
}
.pr-select:focus, .pr-input:focus { outline: none; border-color: var(--accent-green); }
.pr-reken-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.pr-reken-row > div { flex: 1; min-width: 0; }
.pr-add-btn {
  flex-shrink: 0; padding: 10px 16px; border: none; border-radius: 10px; background: var(--blue);
  color: #fff; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 4px 12px rgba(4,120,87,.22);
}
.pr-add-btn:active { transform: scale(.97); }
.pr-hint { font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 16px; }
.pr-regel {
  display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 11px; padding: 10px 12px; margin-bottom: 8px;
}
.pr-regel-main { flex: 1; min-width: 0; }
.pr-regel-bedrag { flex-shrink: 0; font-size: 14px; font-weight: 800; color: var(--slate); }
.pr-regel-del {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.pr-regel-del:active { transform: scale(.9); }
.pr-totaal { margin-top: 6px; padding: 12px 16px; background: var(--blue-tint); border-radius: 12px; color: var(--blue-deep); }
.pr-totaal-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; padding: 3px 0; }
.pr-totaal-eind { margin-top: 5px; padding-top: 9px; border-top: 1px solid var(--blue-soft); font-size: 14px; font-weight: 700; }
.pr-totaal-bedrag { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--blue-deep); }
.pr-reken-wis {
  display: block; margin: 12px auto 0; background: none; border: none; color: var(--muted);
  font-size: 12.5px; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.pr-btw-note { font-size: 11.5px; color: var(--gray-400); text-align: center; margin-top: 14px; line-height: 1.5; }
.pr-sheetlink {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--blue-deep); font-size: 13.5px; font-weight: 700;
  text-decoration: none; font-family: inherit;
}
.pr-sheetlink .ic { width: 17px; height: 17px; color: var(--blue); flex-shrink: 0; }
.pr-sheetlink:active { transform: scale(.98); background: var(--blue-tint); }

/* ── Stap 4: het dagdeel kiezen ───────────────────────────────────────────────
   Drie knoppen naast elkaar. Een vol dagdeel blijft staan maar is uitgeschakeld:
   zien dat de ochtend vol zit is voor de verkoper waardevoller dan een knop die
   stilletjes verdwijnt. */
.pl-deel-grid{display:flex;gap:8px;margin-top:10px}
.pl-deel{
  flex:1;display:flex;flex-direction:column;gap:4px;align-items:center;
  padding:16px 10px;border:1px solid var(--rand,#E5E7EB);border-radius:12px;
  background:#fff;font:inherit;cursor:pointer;
}
.pl-deel:hover:not(:disabled){border-color:var(--groen,#047857)}
.pl-deel.actief{border-color:var(--groen,#047857);background:var(--groen-zacht,#ECFDF5)}
.pl-deel.vol{opacity:.45;cursor:default}
.pl-deel-naam{font-weight:700;font-size:16px}
.pl-deel-stand{font-size:12px;color:var(--inkt-3,#6B7280)}
.pl-deel.actief .pl-deel-stand{color:var(--groen-diep,#065F46)}
/* ── Zoomknoppen (+/-) — alleen laptop/desktop ───────────────────────────────
   Rechtsboven onder de topbalk: linksonder staan de laag-knoppen en rechtsonder
   de legenda. Verborgen op touch-apparaten, daar zoom je met knijpen. */
#zoom-controls { display: none; }
@media (hover: hover) and (pointer: fine) {
  #zoom-controls {
    position: fixed; top: 86px; right: 16px; z-index: 100;
    display: flex; flex-direction: column; gap: 1px;
    border-radius: var(--r-md); overflow: hidden;
    box-shadow: var(--shadow-float);
  }
  #zoom-controls button {
    width: 44px; height: 44px; border: 1px solid var(--border); margin: 0;
    background: var(--surface); color: var(--slate);
    font-size: 22px; font-weight: 600; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
  }
  #zoom-controls button:hover { background: var(--paper); }
  #zoom-controls button:active { background: var(--border); }
  #zoom-controls button:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
  #zoom-controls button:last-child  { border-radius: 0 0 var(--r-md) var(--r-md); border-top: none; }
}