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

/* ══════════════════════════════════════════════════════════════════════════
   Design system, modern facelift (2026-07):
   - Inter als hoofdfont (geladen in index.html), tabular-nums voor cijfers
   - Smaragdgroen als merkkleur (#059669) i.p.v. het vlakkere gras-groen
   - Diepe bosgroene "brand"-gradient voor donkere vlakken (header/drawer/admin)
   - Zachte, gelaagde schaduwen + grotere radii (12/16px)
   - Zwevende kaartelementen (zoekbalk, dock, zoom) in frosted glass
   - Gereedschappen: horizontale icon-dock onderaan de kaart (tooltips via
     data-tip, zie index.html) i.p.v. de verticale lijst met tekstlabels
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --sidebar-width: 340px;
  --primary: #059669;
  --primary-dark: #047857;
  --primary-soft: #ecfdf5;
  --primary-soft-2: #d1fae5;
  --primary-border: #a7f3d0;
  --accent-on-dark: #34d399;
  --brand-grad: radial-gradient(130% 160% at 88% -25%, rgba(52,211,153,.28) 0%, rgba(52,211,153,0) 55%), linear-gradient(160deg, #135c3c 0%, #082518 100%);
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --border: #e2e8f0;
  --border-soft: #eef2f6;
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --danger: #ef4444;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 2px 6px rgba(15,23,42,.05), 0 10px 28px rgba(15,23,42,.09);
  --shadow-lg: 0 4px 14px rgba(15,23,42,.08), 0 22px 56px rgba(15,23,42,.16);
  --ring: 0 0 0 3px rgba(5,150,105,.14);
  --glass: rgba(255,255,255,.86);
}

html, body {
  height: 100%;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px; color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { display: flex; height: 100vh; overflow: hidden; }

::selection { background: var(--primary-soft-2); color: #064e3b; }
button { font-family: inherit; }
button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Layout ── */
#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 10;
  box-shadow: var(--shadow-md);
}
#map-container { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }

/* ── Header: logo, merknaam + organisatie, taal, profiel (initialen) en uitloggen op één regel ── */
#sidebar-header {
  padding: 14px 14px 14px 16px;
  background: var(--brand-grad);
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px; color: white;
}
#sidebar-header .logo-badge { width: 34px; height: 34px; border-radius: 10px; padding: 4px; }
.sh-brand { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sh-title { font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.sh-org { font-size: 12px; color: #a7f3d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.user-avatar-btn {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0; cursor: pointer;
  border: 2px solid rgba(255,255,255,.35); background: var(--accent-on-dark); color: #064e3b;
  font: 800 12px/1 inherit; font-family: inherit; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .1s;
}
.user-avatar-btn:hover { border-color: white; }
#sidebar-header .user-logout { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 9px; }
#sidebar-header .lang-toggle-btn { height: 32px; padding: 0 9px; border-radius: 9px; font-size: 11.5px; }

/* Alleen voor schermlezers (en voor elementen die de logica nodig heeft maar niet in beeld horen) */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ── Portefeuille: totalen + pijplijn per status (renderPortfolio in app.js) ── */
.portfolio { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--border-soft); }
.portfolio.hidden { display: none; }
.pf-head { display: flex; align-items: baseline; justify-content: space-between; }
.pf-head h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
#pf-count { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
.pf-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pf-kpi { background: #f4f7f5; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pf-kpi-value { font-size: 23px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pf-kpi-value small { font-size: 13px; font-weight: 600; color: var(--text-2); margin-left: 4px; letter-spacing: 0; }
.pf-kpi-label { font-size: 12px; color: #64748b; }
.pf-kpi-accent { background: var(--primary-soft); }
.pf-kpi-accent .pf-kpi-value, .pf-kpi-accent .pf-kpi-value small { color: var(--primary-dark); }
.pf-kpi-accent .pf-kpi-label { color: #065f46; }
.pf-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--surface-3); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--border); background: white;
  font-family: inherit; font-size: 12px; font-weight: 500; color: #334155; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.pf-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-chip:hover { background: var(--surface-2); border-color: #cbd5e1; }
.pf-chip.active { background: #0f172a; border-color: #0f172a; color: white; }
.pf-chip.leeg { opacity: .55; }
.pf-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Ronde of vierkante icoonknop (zijbalk, perceelpaneel) */
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: white;
  color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s; text-decoration: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: #cbd5e1; }
.icon-btn-accent { background: var(--primary-soft); border-color: transparent; color: var(--primary-dark); }
.icon-btn-accent:hover { background: var(--primary-soft-2); color: var(--primary-dark); border-color: transparent; }
.icon-btn-danger:hover { background: #fee2e2; color: var(--danger); border-color: #fecaca; }
.logo { display: flex; align-items: center; gap: 10px; color: white; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.logo-badge {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 9px; background: white;
  padding: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.logo-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Sidebar: alleen de header (#sidebar-header) is donkergroen; de rest van de
   sidebar (mappen/percelen/kaartlagen-trigger) is solide wit, net als de drawers/modals. ── */

.user-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.user-name { font-size: 11px; color: rgba(255,255,255,.85); }
.user-name::before { content: 'Ingelogd als '; opacity: .65; }
.user-name-btn {
  display: flex; align-items: center; gap: 6px; background: none; border: none;
  color: rgba(255,255,255,.85); font-size: 11px; font-family: inherit; cursor: pointer;
  padding: 3px 6px; border-radius: 7px; transition: background .15s; min-width: 0;
}
.user-name-btn:hover { background: rgba(255,255,255,.12); color: white; }
.user-name-btn #current-user-name::before { content: 'Ingelogd als '; opacity: .65; }
.user-name-btn svg { flex-shrink: 0; opacity: .7; }
/* "Ingelogd als" zit als CSS-gegenereerde content (::before), niet als tekst in de DOM,
   valt dus buiten het data-i18n-mechanisme. `<html lang>` (gezet door i18n.js bij elke
   paginalading) stuurt hier de taal, in plaats van via app.js. */
html[lang="en"] .user-name::before,
html[lang="en"] .user-name-btn #current-user-name::before { content: 'Logged in as '; }
.user-logout {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  color: white; font-size: 10.5px; font-weight: 600; padding: 4px 9px;
  cursor: pointer; transition: background .15s; font-family: inherit;
}
.user-logout:hover { background: rgba(255,255,255,.22); }

/* Taalwissel-knopje, zelfde compacte stijl op elke donkere merk-achtergrond (sidebar-header,
   admin-header, login-hero). Toont de taal waar je NAAR toe schakelt, niet de huidige (zie
   .lang-toggle-label in i18n.js). Klik herlaadt de pagina in de gekozen taal. */
.lang-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  color: white; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 8px; cursor: pointer; transition: background .15s; font-family: inherit;
  flex-shrink: 0;
}
.lang-toggle-btn:hover { background: rgba(255,255,255,.22); }
.login-hero-top .lang-toggle-btn { margin-left: auto; }

/* ── Sectie refresh-knop ── */
.section-refresh-btn.spinning svg { animation: spin .7s linear infinite; }

/* ── Beheerscherm (admin) ── */
.admin-screen { position: fixed; inset: 0; z-index: 1900; background: var(--surface-2); overflow-y: auto; }
.admin-screen.hidden { display: none; }
.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: var(--brand-grad);
  position: sticky; top: 0; z-index: 1;
}
.admin-header .logo { color: white; }
.admin-body { max-width: 920px; margin: 0 auto; padding: 32px 28px 60px; display: flex; flex-direction: column; gap: 24px; }

.admin-section { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow); }
.admin-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.admin-section-header h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }

.admin-org-list { margin-bottom: 14px; }
.admin-kadaster-badge.full { background: #fee2e2; color: #b91c1c; }
.admin-inline-form { display: flex; gap: 8px; }
.admin-inline-form input {
  flex: 1; border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px;
  font-size: 13px; font-family: inherit; outline: none; background: var(--surface-2);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.admin-inline-form input:focus { border-color: var(--primary); box-shadow: var(--ring); background: white; }

.admin-users-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-users-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.admin-users-table td { padding: 11px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.admin-users-table tbody tr { transition: background .1s; }
.admin-users-table tbody tr:hover { background: var(--surface-2); }
.admin-users-table tr:last-child td { border-bottom: none; }
.admin-role-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.admin-role-badge.admin { background: #fef3c7; color: #92400e; }
.admin-role-badge.demo { background: #ede9fe; color: #6d28d9; margin-left: 4px; }
.admin-role-badge.rol { background: var(--primary-soft); color: var(--primary-dark); }
.admin-role-badge.geen-rol { background: #fee2e2; color: #b91c1c; }
/* Rollenlijst: per recht een klein label, aan (groen) of uit (doorgestreept grijs) */
.admin-recht { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); }
.admin-recht.uit { background: var(--surface-3); color: var(--text-3); text-decoration: line-through; }
.admin-role-rights { display: flex; flex-direction: column; gap: 10px; }
.admin-role-rights .checkbox-label { align-items: flex-start; font-size: 13px; }
.admin-role-rights .checkbox-label input { margin-top: 3px; }
.admin-role-rights .checkbox-label span { display: flex; flex-direction: column; gap: 1px; }
.admin-role-rights small { font-size: 11.5px; color: var(--text-3); font-weight: 400; line-height: 1.4; }
.admin-edit-user-btn {
  background: white; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .15s;
  box-shadow: var(--shadow);
}
.admin-edit-user-btn:hover { background: var(--surface-2); color: var(--text); border-color: #cbd5e1; }
.admin-user-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.admin-del-user-btn {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 7px; width: 26px; height: 26px; padding: 0;
  color: var(--text-3); cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.admin-del-user-btn:hover { background: #fee2e2; color: var(--danger); }

/* Mast-verificatie (Valtilon) */
.verify-antennes-btn {
  flex: 1; background: var(--primary); color: #fff; border: none; border-radius: 8px;
  padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.verify-antennes-btn:hover { background: var(--primary-dark); }
.verify-antennes-btn:disabled { opacity: .6; cursor: default; }
.verify-antennes-btn.secondary { background: var(--surface-2); color: var(--primary-dark); border: 1px solid var(--border); }
.verify-antennes-btn.secondary:hover { background: var(--surface-3); }
.verify-status { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.verify-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.antenne-verify-block { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border-soft); }
.antenne-verify-verdict { font-weight: 700; font-size: 12px; margin-bottom: 3px; }
.antenne-verify-block .popup-btn { margin-top: 5px; }

.profile-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* ── Inlogscherm ── */
.login-screen {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; overflow: hidden;
}
.login-screen.hidden { display: none; }

/* Linkerpaneel, hero / illustratie, vult de volle hoogte */
.login-hero {
  flex: 1.35; min-width: 0; position: relative; overflow: hidden;
  background: radial-gradient(100% 120% at 18% 0%, #12a06b 0%, #0b5132 48%, #04140c 100%);
  padding: 44px 60px; display: flex; flex-direction: column;
  color: white; animation: heroIn .4s ease;
}
@keyframes heroIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }

.login-hero-blob { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.login-hero-blob-1 { width: 520px; height: 520px; background: #34d399; opacity: .3; top: -180px; right: -140px; }
.login-hero-blob-2 { width: 420px; height: 420px; background: #0d9488; opacity: .2; bottom: -160px; left: -120px; }

.login-hero-top { position: relative; z-index: 1; display: flex; align-items: center; }
.login-logo-mark { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }

.login-hero-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; max-width: 620px; }
.login-headline { font-size: 42px; font-weight: 800; line-height: 1.12; letter-spacing: -.03em; margin: 0; }
.login-tagline { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.75); margin: 0; max-width: 440px; }
.login-parcels-art { width: 100%; max-width: 480px; height: auto; filter: drop-shadow(0 26px 50px rgba(0,0,0,.4)); }

.login-feature-list { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.login-feature {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  padding: 7px 13px; border-radius: 999px; backdrop-filter: blur(4px);
}
.login-feature svg { color: #6ee7b7; flex-shrink: 0; }

/* Rechterpaneel, formulier, volle hoogte */
.login-form-panel {
  width: 460px; flex-shrink: 0; background: white;
  display: flex; align-items: center; justify-content: center;
  padding: 40px; box-shadow: -30px 0 70px rgba(0,0,0,.22);
  animation: modalIn .3s ease;
}
.login-card { width: 100%; max-width: 340px; }
.login-sub { font-size: 23px; font-weight: 800; color: var(--text); letter-spacing: -.02em; margin-bottom: 4px; }
.login-sub-hint { font-size: 13px; color: var(--text-2); margin-bottom: 26px; }
.login-card .form-group input { padding: 11px 14px; font-size: 13.5px; }
.login-card .btn-full { padding: 11px; font-size: 13.5px; font-weight: 700; margin-top: 6px; border-radius: 10px; }
.login-error {
  background: #fee2e2; color: #b91c1c; font-size: 12px; font-weight: 500;
  padding: 9px 12px; border-radius: 9px; margin-bottom: 14px;
}
.login-error.hidden { display: none; }

@media (max-width: 860px) {
  .login-hero { display: none; }
  .login-form-panel { width: 100%; box-shadow: none; }
}

/* ── Panel ── */
.panel-section { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }

.section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-2); margin-bottom: 10px;
}
.section-title > span { flex: 1; }
#parcels-section { border-bottom: none; padding: 14px 12px 16px; }
#parcels-section .section-title { padding: 0 4px; }
.sidebar-search { margin: 0 4px 12px; padding: 0 12px; height: 40px; background: #f1f5f3; border-color: transparent; }

/* ── Base layer radio ── */
.layer-group { margin-bottom: 16px; }
.layer-group:last-child { margin-bottom: 0; }
.layer-group-label { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; margin: 0 6px 8px; }
/* Achtergrond als drie tegels met een plaatje */
.base-layer-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 4px; }
.base-tile {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 5px 5px 8px;
  border: 1px solid #e6ebe7; border-radius: 12px; background: white; cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.base-tile:hover { border-color: #cbd5e1; }
.base-tile input { position: absolute; opacity: 0; pointer-events: none; }
.base-thumb { display: block; width: 100%; height: 62px; border-radius: 8px; }
.base-tile-name { font-size: 12.5px; font-weight: 600; padding-left: 3px; line-height: 1.3; }
.base-tile-check {
  position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary-dark); color: white; display: none; align-items: center; justify-content: center;
}
.base-tile:has(input:checked) { border-color: transparent; box-shadow: 0 0 0 2px var(--primary); }
.base-tile:has(input:checked) .base-tile-check { display: flex; }
.base-tile:has(input:focus-visible) { outline: 2px solid var(--primary-dark); outline-offset: 2px; }

/* ── Laag-rijen: plaatje, naam + bron, status en schakelaar. Hele rij klikbaar (app.js). ── */
.layer-item {
  background: var(--surface); border: 1px solid transparent;
  border-radius: 12px; padding: 7px 8px; margin-bottom: 2px;
  transition: border-color .15s, background .15s;
}
.layer-item:last-child { margin-bottom: 0; }
.layer-item:hover { background: var(--surface-2); }
.layer-item.active { border-color: var(--primary-border); background: #f0fdf7; }
.layer-toggle { cursor: pointer; }
.layer-thumb { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; flex-shrink: 0; display: block; }
.layer-thumb svg { display: block; width: 100%; height: 100%; }
.layer-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.layer-text .layer-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.layer-sub { font-size: 12px; color: #64748b; line-height: 1.3; }
.legend-chips { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--text-2); }
.legend-chips span { display: inline-flex; align-items: center; gap: 5px; }
.legend-chips .legend-dot { display: inline-block; width: 9px; height: 9px; }
.upload-layer-btn {
  width: calc(100% - 12px); margin: 8px 6px 0; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1.5px dashed var(--primary-border); background: #f0fdf7; color: var(--primary-dark);
  font-family: inherit; font-size: 13px; font-weight: 650; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.upload-layer-btn:hover { background: var(--primary-soft); border-color: var(--primary); }
/* Organisatie-specifieke lagen (bv. .valtilon-only) staan verborgen tot startApp ze toont */
.layer-item.hidden { display: none; }
/* Rechten van de rol: applyRechten() in app.js zet body.geen-<recht>; knoppen voor dat recht
   hebben .alleen-<recht>. !important omdat o.a. #draw-toolbar z'n display via een id-selector zet. */
body.geen-tekenen .alleen-tekenen,
body.geen-ai .alleen-ai,
body.geen-prompts .alleen-prompts,
body.geen-lagen .alleen-lagen { display: none !important; }
/* De vinkjes voor een selectie zijn er voor bewerken, eigenaar opvragen en AI; zonder die rechten niets aan */
body.geen-tekenen.geen-ai .parcel-item-checkbox { display: none !important; }

.layer-toggle { display: flex; align-items: center; gap: 12px; }
.layer-name { flex: 1; font-size: 13px; font-weight: 500; }

/* Inklapbare legenda/uitleg onder een laag, standaard dicht, zodat de lijst kort blijft */
.layer-info summary {
  cursor: pointer; font-size: 10.5px; font-weight: 600; color: var(--text-3);
  user-select: none; list-style: none; display: flex; align-items: center; gap: 4px;
}
.layer-info summary::-webkit-details-marker { display: none; }
.layer-info summary::before { content: '▸'; font-size: 9px; transition: transform .15s; }
.layer-info[open] summary::before { transform: rotate(90deg); }
.layer-info[open] summary { margin-bottom: 6px; }

.layer-status { font-size: 10px; }
.layer-status.ok::before { content: '●'; color: #10b981; }
.layer-status.err::before { content: '●'; color: var(--danger); }
.layer-status.loading::before { content: '◌'; color: var(--text-3); animation: spin 1s linear infinite; }

/* Toggle */
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 22px; cursor: pointer; transition: background .2s; pointer-events: none; }
.slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform .2s cubic-bezier(.34,1.4,.64,1); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.toggle-switch input:checked + .slider { background: var(--primary); }
.toggle-switch input:checked + .slider::before { transform: translateX(16px); }
.toggle-switch input:focus-visible + .slider { outline: 2px solid var(--primary-dark); outline-offset: 2px; }

.layer-controls { margin: 8px 0 2px 50px; display: none; }
.layer-item.active .layer-controls { display: block; }
.opacity-slider { width: 100%; accent-color: var(--primary); cursor: pointer; }
.fill-opacity-slider { width: 100%; accent-color: var(--primary); cursor: pointer; }

/* Kleurkeuze-swatches in de meetlijn-popup */
.line-color-row { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.line-color-swatch {
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s, box-shadow .15s;
}
.line-color-swatch:hover { transform: scale(1.2); }
.line-color-swatch.selected { border-color: white; box-shadow: 0 0 0 1.5px var(--text); }

/* Lengte-label op meetlijnen */
.measure-label {
  background: #0f172a; color: #fff; border: none; border-radius: 999px;
  padding: 2px 9px; font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.measure-label::before { display: none; } /* geen tooltip-pijltje */
/* Verberg de lengte-labels als je ver bent uitgezoomd, blijft alleen de lijn zelf zichtbaar */
#map.hide-measure-labels .measure-label { display: none; }
.opacity-value { float: right; font-weight: 700; color: var(--primary-dark); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Substation legend */
.substation-legend { display: grid; grid-template-columns: 12px 1fr; gap: 4px 6px; align-items: center; font-size: 11px; color: var(--text-2); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.layer-info-text { font-size: 10.5px; line-height: 1.45; color: var(--text-3); margin: 6px 0 0; }
/* Hoogtekaart: doorlopende kleurschaal zoals de AHN-legenda van PDOK (NAP, -8 tot ruim 100 m) */
.hoogte-legend { display: flex; flex-direction: column; gap: 3px; }
.hoogte-legend-bar { height: 10px; border-radius: 3px; background: linear-gradient(to right, #0b3a6e 0%, #1fa38a 20%, #2ad13a 35%, #c8f000 50%, #ffd400 65%, #f0a020 82%, #c8504a 100%); }
.hoogte-legend-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── Kaartlagen-menu: zwevend rechtsboven op de kaart (frosted glass) ── */
#layers-fab {
  position: absolute; top: 18px; right: 18px; z-index: 500;
  display: flex; align-items: stretch; gap: 0;
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px; box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.14);
  overflow: hidden;
}
.layers-fab-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border: none; background: transparent;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background .15s;
}
.layers-fab-btn:hover { background: rgba(5,150,105,.08); }
.layers-fab-icon {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  background: var(--primary-soft); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
}
.layers-fab-text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.layers-fab-title { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.layers-fab-sub { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; line-height: 1.3; }
/* Een stip per actieve laag, in de kleur van die laag */
.layers-fab-dots { display: flex; align-items: center; }
.layers-fab-dots:empty { display: none; }
.layers-fab-dots span { width: 16px; height: 16px; border-radius: 999px; border: 2px solid white; box-sizing: border-box; }
.layers-fab-dots span + span { margin-left: -6px; }
.layers-fab-dots span.meer { width: auto; height: auto; border: none; margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--text-2); }
.btn-layers-eye {
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px 0 11px; border: none; border-left: 1px solid rgba(15,23,42,.08);
  background: transparent; color: var(--text-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-layers-eye:hover { background: rgba(5,150,105,.08); color: var(--primary-dark); }
.btn-layers-eye.layers-off { color: var(--text-3); }

/* ── Generiek uitklappaneel (drawer): schuift vanaf rechts in (het Kaartlagen-menu
   zit rechtsboven, dus het paneel opent aan dezelfde kant) ── */
/* Boven de kaartknoppen van Leaflet (z-index 1000), die anders over het paneel lagen. */
.drawer { position: fixed; inset: 0; z-index: 1001; }
.drawer.hidden { display: none; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(9,14,24,.4); backdrop-filter: blur(3px); animation: drawerFade .2s ease; }
.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 420px; max-width: 94vw;
  background: var(--surface); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: drawerSlide .25s cubic-bezier(.16,1,.3,1);
}
@keyframes drawerSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawerFade { from { opacity: 0; } to { opacity: 1; } }

.drawer-header {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 16px 16px 20px; flex-shrink: 0;
  background: var(--brand-grad); color: white;
}
.drawer-head-row { display: flex; align-items: flex-start; gap: 8px; }
.drawer-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.drawer-sub { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: #a7f3d0; }
.drawer-head-btn {
  height: 34px; padding: 0 12px; border-radius: 10px; flex-shrink: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: white;
  font-family: inherit; font-size: 12.5px; font-weight: 650; transition: background .15s;
}
.drawer-head-btn:hover { background: rgba(255,255,255,.16); }
.drawer-head-btn:disabled { opacity: .45; cursor: default; }
.drawer-header .modal-close { color: rgba(255,255,255,.85); width: 34px; height: 34px; font-size: 22px; }
.drawer-header .modal-close:hover { background: rgba(255,255,255,.15); color: white; }
.drawer-head-search {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #d1fae5;
}
.drawer-head-search:focus-within { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.drawer-head-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: white; font: inherit; font-size: 13px; }
.drawer-head-search input::placeholder { color: rgba(209,250,229,.8); }

.drawer-body { flex: 1; overflow-y: auto; padding: 14px 12px 20px; background: var(--surface); }
.zoek-verborgen { display: none !important; }
.drawer-footer { flex-shrink: 0; padding: 14px 18px; border-top: 1px solid var(--border-soft); }
.drawer-footer .export-buttons { margin-top: 0; }

.drawer-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 12px; background: var(--surface-2);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.drawer-search:focus-within { border-color: var(--primary); box-shadow: var(--ring); background: white; }
.drawer-search svg { color: var(--text-3); flex-shrink: 0; }
.drawer-search input { border: none; outline: none; flex: 1; font-size: 13px; background: transparent; color: var(--text); font-family: inherit; }
.drawer-search input::placeholder { color: var(--text-3); }

/* ── Folder systeem ── */
.btn-full { width: 100%; justify-content: center; margin-bottom: 10px; }

#folder-list { display: flex; flex-direction: column; gap: 8px; }

.folder-container { border: 1px solid #e6ebe7; border-radius: 14px; overflow: hidden; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.folder-container:hover { box-shadow: var(--shadow); }
.folder-container.drop-target { border-color: var(--accent-on-dark); box-shadow: 0 0 0 3px rgba(52,211,153,.25); }

.folder-header {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; background: var(--surface);
  cursor: pointer; user-select: none;
  transition: background .15s;
}
.folder-header:hover { background: var(--surface-2); }
.folder-meta { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.folder-header.folder-hidden .folder-meta { opacity: .55; }
/* Verdeling over de statussen in de map, zelfde kleuren als de portefeuille */
.folder-statusbar { display: flex; width: 44px; height: 6px; border-radius: 999px; overflow: hidden; gap: 1px; flex-shrink: 0; }

.folder-chevron { color: var(--text-3); transition: transform .2s; flex-shrink: 0; }
.folder-chevron.open { transform: rotate(90deg); }

.folder-icon { color: #f59e0b; flex-shrink: 0; }

/* Kleine, subtiele map-marker i.p.v. het oude oranje mapje-icoon */
.folder-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); flex-shrink: 0; }
.folder-dot.grijs { background: var(--text-3); }
/* Verborgen map: gedimd + doorgestreepte marker zodat je ziet dat 'ie van de kaart is */
.folder-header.folder-hidden .folder-name-display,
.folder-header.folder-hidden .folder-creator { opacity: .5; }
.folder-header.folder-hidden .folder-dot { background: var(--text-3); opacity: .6; }
.folder-visibility-btn { opacity: 1 !important; }

.folder-name-wrap { flex: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.folder-name-display { font-size: 14px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Uitgeklapte map: volledige naam tonen (wrapt over meerdere regels) i.p.v. afkappen,
   ingeklapt blijft de ellipsis, anders wordt de lijst onrustig */
.folder-container:has(.folder-body.open) .folder-name-display {
  white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word;
}
.folder-creator { font-size: 9.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.folder-count { font-size: 10px; font-weight: 600; color: var(--text-2); background: var(--surface-3); padding: 1px 7px; border-radius: 999px; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Alleen het oog neemt vaste ruimte in; de andere knoppen liggen bij aanwijzen als laagje over de
   rechterkant. Vroeger namen ze altijd 94 pixels in, kreeg de mapnaam er 68 en brak die midden in
   woorden af ("Zoekgebie-d"). */
.folder-header { position: relative; padding-right: 36px; }
.folder-actions { display: flex; gap: 2px; flex-shrink: 0; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border-radius: 8px; }
.folder-actions .folder-action-btn:not(.folder-visibility-btn) { display: none; }
.folder-actions .folder-visibility-btn { order: 99; }
.folder-header:hover .folder-actions { background: var(--surface-2); box-shadow: -14px 0 12px var(--surface-2); }
.folder-header:hover .folder-actions .folder-action-btn { display: flex; }
.folder-action-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-2); padding: 6px; border-radius: 8px;
  display: flex; align-items: center; transition: color .15s, background .15s;
  opacity: 0;
}
.folder-header:hover .folder-action-btn { opacity: 1; }
.folder-action-btn:hover { color: var(--text); background: var(--surface-3); }
.folder-action-btn.danger:hover { color: var(--danger); background: #fee2e2; }
.custom-layer-delete { opacity: .55; margin-left: auto; }
.custom-layer-delete:hover { opacity: 1; }

.folder-body { display: none; padding: 0 6px 6px; background: var(--surface); }
.folder-body.open { display: flex; flex-direction: column; gap: 2px; }

.folder-empty { font-size: 11px; color: var(--text-3); text-align: center; padding: 10px; font-style: italic; }

/* Mapinformatie-modal */
.folder-info-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.folder-info-stat {
  flex: 1; background: var(--primary-soft); border: 1px solid var(--primary-border);
  border-radius: var(--radius); padding: 14px 12px; text-align: center;
  display: flex; flex-direction: column; gap: 3px;
}
.folder-info-stat-value { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.folder-info-stat-label { font-size: 10.5px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.folder-info-list-head { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.folder-info-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.folder-info-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px; border-radius: 9px;
}
.folder-info-item:hover { background: var(--surface-2); }
.folder-info-item + .folder-info-item { border-top: 1px solid var(--border-soft); }
.folder-info-item-main { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.folder-info-dot { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; margin-top: 3px; }
.folder-info-item-text { min-width: 0; }
.folder-info-pname { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.folder-info-status { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.folder-info-owner { font-size: 12px; color: var(--text-2); }
.folder-info-noowner { color: var(--text-3); font-style: italic; }
.folder-info-contact { font-size: 11px; color: var(--text-3); margin-top: 1px; word-break: break-word; }
.folder-info-parea { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.folder-info-empty { font-size: 13px; color: var(--text-3); text-align: center; padding: 16px 0; }

/* Perceel items: kaartje met vormpje (vulling = eigen kleur, rand = status), naam, oppervlakte,
   statuslabel, eigenaar en afstand tot het dichtstbijzijnde onderstation */
.parcel-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer; transition: background .15s, box-shadow .15s;
  background: transparent;
}
.parcel-item:hover { background: var(--surface-2); }
.parcel-item.selected { background: #f0fdf7; box-shadow: inset 0 0 0 1.5px #10b981; }
.parcel-item.dragging { opacity: .4; }
.parcel-item { cursor: grab; }
.parcel-item.dragging { cursor: grabbing; }

.parcel-item-checkbox { flex-shrink: 0; width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; margin: 0; }
.parcel-thumb { flex-shrink: 0; border-radius: 10px; background: #e9efe5; display: block; }
.parcel-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.parcel-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.parcel-row-sub { gap: 6px; }
.status-pill { display: inline-block; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; line-height: 1.35; }
.parcel-owner { flex: 1; min-width: 0; font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parcel-owner.leeg { font-style: italic; }
.parcel-dist { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--text-2); flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* Meetlijn/route-item in de mappenlijst */
.line-item { cursor: pointer; }
.line-item-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: #f1f5f9; }
.parcel-item-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parcel-item-area { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.parcel-item-del {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); padding: 2px; border-radius: 5px;
  display: flex; align-items: center; opacity: 0;
  transition: color .15s, opacity .15s;
}
.parcel-item:hover .parcel-item-del { opacity: 1; }
.parcel-item-del:hover { color: var(--danger); }

/* Per-perceel zichtbaarheids-toggle (oog) */
.parcel-item-vis {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); padding: 2px; border-radius: 5px;
  display: flex; align-items: center; opacity: 0;
  transition: color .15s, opacity .15s; flex-shrink: 0;
}
.parcel-item:hover .parcel-item-vis { opacity: 1; }
.parcel-item-vis:hover { color: var(--primary); }
/* Verborgen perceel: oog altijd zichtbaar (anders kun je 'm niet terugzetten) + item gedimd */
.parcel-hidden .parcel-item-vis { opacity: 1; color: var(--primary); }
/* De knoppen (oog, verwijderen) alleen bij aanwijzen, en dan op de plek van de oppervlakte. Met alleen
   opacity: 0 hielden ze hun breedte, en kreeg de naam 81 van de 247 pixels ("Utrecht A 1..."). Een
   verborgen perceel houdt z'n oog altijd, anders kun je het niet terugzetten. */
.parcel-item-vis, .parcel-item-del { display: none; }
.parcel-item:hover .parcel-item-vis, .parcel-item:hover .parcel-item-del, .parcel-hidden .parcel-item-vis { display: flex; }
.parcel-item:hover .parcel-item-area { display: none; }
.parcel-hidden .parcel-item-name,
.parcel-hidden .parcel-thumb,
.parcel-hidden .parcel-row-sub { opacity: .45; }

.empty-state { font-size: 12.5px; color: #64748b; text-align: center; padding: 14px 8px; font-style: italic; }
.empty-state.hidden { display: none; }

.export-buttons { display: flex; gap: 8px; margin-top: 14px; padding: 0 4px; }
.export-buttons .btn { flex: 1; justify-content: center; height: 40px; border-radius: 10px; font-size: 13px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .15s; font-family: inherit;
}
.btn:active { transform: translateY(1px); }
/* Witte tekst op het donkerdere groen: op #059669 haalt kleine tekst de leesbaarheidsnorm (4,5:1) niet */
.btn-primary { background: var(--primary-dark); color: white; border-color: var(--primary-dark); box-shadow: 0 1px 3px rgba(5,150,105,.4), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-primary:hover { background: #065f46; border-color: #065f46; }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-secondary { background: var(--surface); color: var(--text-2); border-color: var(--border); box-shadow: var(--shadow); }
.btn-secondary:hover { background: var(--surface-2); color: var(--text); border-color: #cbd5e1; }
.btn-danger { background: var(--surface); color: var(--danger); border-color: #fca5a5; }
.btn-danger:hover { background: #fee2e2; }
.btn-sm { padding: 5px 9px; }

/* ── Zoekbalk (adres/plaatsnaam of kadastrale aanduiding, via het icoon-toggle links) ── */
#search-bar {
  position: absolute; top: 18px; left: 18px;
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 6px;
  padding: 6px; z-index: 500; width: 440px; max-width: calc(100% - 370px); /* ruimte voor het Kaartlagen-menu rechts */
}
/* Adres of Perceel als twee woorden in plaats van twee icoontjes: in één oogopslag duidelijk */
#search-type-toggle {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  background: #eef2ef; border-radius: 999px; padding: 3px;
}
.search-type-btn {
  height: 32px; padding: 0 12px; border: none; border-radius: 999px;
  background: transparent; color: var(--text-2); cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; transition: background .12s, color .12s, box-shadow .12s;
}
.search-type-btn:hover { color: var(--text); }
.search-type-btn.active { background: white; color: var(--primary-dark); font-weight: 700; box-shadow: 0 1px 3px rgba(15,23,42,.14); }
#search-input { border: none; outline: none; flex: 1; min-width: 0; font-size: 14px; color: var(--text); background: transparent; font-family: inherit; padding: 0 6px; }
#search-input::placeholder { color: #64748b; }
#search-btn {
  width: 38px; height: 38px; border-radius: 999px; border: none; flex-shrink: 0;
  background: var(--primary-dark); color: white; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s; box-shadow: 0 1px 3px rgba(5,150,105,.4);
}
#search-btn:hover { background: #065f46; }

#search-results {
  position: absolute; top: calc(100% + 8px); left: 4px; right: 4px;
  background: white; border-radius: 14px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border-soft);
  max-height: 240px; overflow-y: auto; display: none; z-index: 501;
  padding: 4px;
}
#search-results.visible { display: block; }
.search-result-item { padding: 9px 12px; cursor: pointer; border-radius: 9px; transition: background .1s; }
.search-result-item:hover { background: var(--surface-2); }
.result-name { font-size: 13px; font-weight: 500; }
.result-type { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* ── Tekeninstrumenten: zwevende icon-dock onderaan de kaart ── */
#draw-toolbar {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 18px; box-shadow: 0 2px 6px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.16);
  padding: 6px; z-index: 500;
  display: flex; align-items: center; gap: 2px;
}
.toolbar-label { display: none; }
.toolbar-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
.tool-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 42px; height: 42px; padding: 0 12px; border: none;
  border-radius: 12px; background: transparent;
  color: #334155; font-family: inherit; font-size: 13px; font-weight: 650; white-space: nowrap;
  cursor: pointer; transition: background .15s, color .15s, transform .1s;
}
.tool-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.tool-btn:hover { background: rgba(15,23,42,.06); color: var(--text); }
.tool-btn:active { transform: scale(.95); }
.tool-btn.active { background: var(--primary-dark); color: #fff; box-shadow: 0 2px 8px rgba(5,150,105,.4); }
.tool-btn.active-wfs { background: #b45309; color: #fff; box-shadow: 0 2px 8px rgba(245,158,11,.45); }
/* Klik perceel heeft in rust een amberkleurige tint, net als zijn actieve stand */
.tool-btn-wfs:not(.active-wfs) { color: #b45309; }
/* De naam staat alleen naast het icoon van het actieve gereedschap; de rest heeft een tooltip */
.tool-label { display: none; }
.tool-btn.active .tool-label, .tool-btn.active-wfs .tool-label { display: inline; }
.tool-btn:not(.active):not(.active-wfs) { padding: 0; width: 42px; }
.tool-btn.active::after, .tool-btn.active-wfs::after { display: none; }
/* Tooltip boven de knop (data-tip-attribuut, zie index.html) */
.tool-btn::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: #0f172a; color: #fff;
  font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 8px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .15s ease .25s, transform .15s ease .25s;
  z-index: 10;
}
.tool-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
#map-container.cursor-crosshair #map { cursor: crosshair !important; }

/* Vertex-/middenpuntmarkers tijdens tekenen en bewerken (Leaflet.draw), standaard lelijke
   witte vierkantjes (.leaflet-div-icon), hier ronde stipjes in de merkkleur. */
.leaflet-editing-icon {
  box-sizing: border-box; border-radius: 50%;
  background: #fff; border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.leaflet-editing-icon.leaflet-marker-draggable { border-color: var(--primary-dark); }

/* ── Selectiebalk voor bulk-bewerken van bestaande percelen ── */
.existing-select-bar {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--primary-soft); border: 1px solid var(--primary-border); border-radius: var(--radius);
  padding: 10px; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--text);
}
.existing-select-bar.hidden { display: none; }
.esb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#existing-select-count { min-width: 0; }
.esb-clear {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: var(--text-3); font-size: 11px; font-weight: 600; padding: 2px 5px; border-radius: 6px;
  font-family: inherit;
}
.esb-clear:hover { color: var(--danger); background: rgba(0,0,0,.04); }
.esb-actions { display: flex; flex-direction: column; gap: 6px; }
.esb-actions .btn-primary { width: 100%; }

/* Kadaster "Eigenaar opvragen", betaalde actie, met prijs-pill. Zelfde lichte stijl als
   .popup-btn.kadaster (perceel-popup), want de sidebar-body is ook solide wit. */
.btn-owner {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 10px; border-radius: 9px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  background: var(--primary-soft); border: 1px solid #86efac; color: var(--primary-dark);
  transition: background .15s, border-color .15s;
}
.btn-owner.hidden { display: none; }
.btn-owner:hover { background: var(--primary-soft-2); border-color: var(--primary); }
.btn-owner svg { flex-shrink: 0; opacity: .85; }
.btn-owner-label { flex: 1; text-align: left; }
.btn-owner-price {
  flex-shrink: 0; font-weight: 700; font-size: 11px;
  background: var(--primary); color: #fff;
  padding: 1px 8px; border-radius: 999px;
}

/* AI-analyse, knop in de selectiebalk (zelfde vorm als .btn-owner, eigen accent) */
.btn-ai {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 10px; border-radius: 9px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  background: #f5f3ff; border: 1px solid #c4b5fd; color: #6d28d9;
  transition: background .15s, border-color .15s;
}
.btn-ai.hidden { display: none; }
.btn-ai:hover { background: #ede9fe; border-color: #a78bfa; }
.btn-ai svg { flex-shrink: 0; opacity: .85; }
.btn-ai-label { flex: 1; text-align: left; }

/* AI-antwoordvenster */
/* Fors groter dan de andere modals (was 560px/70vh), een AI-antwoord loopt al snel op tot
   duizenden tekens met meerdere alinea's en een bronnenlijst; op de oude maat moest je
   vrijwel meteen scrollen om ook maar de eerste alinea helemaal te zien.
   Let op: moet als `#ai-modal .modal-content` (niet `.ai-modal-content`) om de generieke
   `.modal-content { width:430px }` verderop in dit bestand te verslaan, bij gelijke
   specificiteit wint anders de regel die later in het bestand staat, ongeacht intentie.
   Zelfde patroon als het bestaande `#parcel-modal .modal-content`. */
#ai-modal .modal-content { width: 760px; max-width: 94vw; }

/* Netuitbreidingen: update-melding (zelfde id-selector-patroon als #ai-modal, zie CLAUDE.md) */
#netplan-modal .modal-content { width: 620px; max-width: 94vw; max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
#netplan-modal .modal-body { overflow-y: auto; min-height: 0; flex: 1; }
.netplan-summary { font-size: 13px; color: var(--text-2); margin: 0 0 10px; line-height: 1.5; }
.netplan-list { display: flex; flex-direction: column; gap: 6px; }
.netplan-group-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 10px 0 2px; }
.netplan-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); }
.netplan-row-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.netplan-row-main { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); line-height: 1.45; }
.netplan-row-main b { font-weight: 600; }
.netplan-row-meta { font-size: 11.5px; color: var(--text-3); }
.netplan-row-old { font-size: 11.5px; color: var(--text-3); text-decoration: line-through; }
.netplan-row .admin-edit-user-btn { flex-shrink: 0; }
#btn-netplan-updates { width: 100%; margin-bottom: 4px; }

/* Netuitbreidingen op de kaart: afgeronde "tegels" met een icoon (+ nieuw station, pijl omhoog
   uitbreiding) en het jaartal, bewust anders dan de ronde stippen van de schakelstations-laag.
   --c is de termijnkleur. Gestippeld en wit = plek nog niet exact bekend (gebied). */
.netplan-icon { width: 0 !important; height: 0 !important; background: none; border: none; }
.netplan-icon .netplan-marker { position: absolute; transform: translate(-50%, -50%); cursor: pointer; }
.netplan-marker {
  display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px 0 4px;
  border-radius: 6px; background: var(--c); color: #fff; border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .35); font: 700 10.5px/1 'Inter', 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap; box-sizing: border-box;
}
.netplan-marker.gebied { background: #fff; color: var(--c); border: 1.5px dashed var(--c); }
.netplan-marker.compact { width: 18px; height: 18px; padding: 0; justify-content: center; }
.netplan-marker.vervallen { background: #94a3b8; color: #fff; border: 1.5px solid #fff; opacity: .9; }
.netplan-view-label { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-3); margin: 2px 0 3px; }
.netplan-view-select { width: 100%; font-size: 12px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); margin-bottom: 6px; font-family: inherit; }
.netplan-area-toggle { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text); cursor: pointer; }
.netplan-marker:hover { filter: brightness(1.08); }
/* Uitgezoomd (landelijk overzicht): alleen het icoon, anders loopt de kaart vol met jaartallen */
#map.netplan-compact .netplan-icon .netplan-year { display: none; }
#map.netplan-compact .netplan-icon .netplan-marker { width: 18px; height: 18px; padding: 0; justify-content: center; }
.netplan-legend { display: grid; grid-template-columns: 22px 1fr; gap: 5px 6px; align-items: center; font-size: 11px; color: var(--text-2); }
.netplan-legend-swatch { width: 14px; height: 14px; border-radius: 4px; justify-self: center; }
.netplan-legend .netplan-marker { justify-self: center; }
.ai-modal-content .modal-body { max-height: min(84vh, 860px); overflow-y: auto; }
/* Kop met icoon, titel en een regel met aantal, oppervlakte en map */
/* Als #ai-modal .modal-header, anders wint de generieke .modal-header verderop (zie CLAUDE.md) */
#ai-modal .modal-header { align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 22px 22px 0 26px; }
.ai-head-icon { width: 40px; height: 40px; border-radius: 12px; background: #ede9fe; color: #6d28d9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ai-modal-header h3 { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.ai-head-sub { font-size: 13px; color: #64748b; }
#ai-modal .modal-body { padding: 16px 26px 20px; }
#ai-modal .modal-footer { padding: 4px 26px 22px; }
/* De gekozen percelen als chips */
.ai-selection { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.ai-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 4px; border-radius: 999px;
  background: #f4f7f5; font-size: 12.5px; font-weight: 600; max-width: 100%;
}
.ai-chip .parcel-thumb { border-radius: 6px; background: #e3eadf; }
.ai-chip small { font-size: 12px; font-weight: 500; color: #64748b; font-variant-numeric: tabular-nums; }
.ai-chip-more { padding: 0 10px; }
.ai-chip-context { background: transparent; border: 1px dashed #cbd5e1; padding: 0 10px; color: var(--text-2); font-weight: 500; font-size: 12px; }
.ai-chip-context svg { width: 13px; height: 13px; }
/* Analyses als kaarten (de keuzelijst zelf is verborgen, zie renderAiPromptCards) */
.ai-choose-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ai-section-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.ai-prompt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ai-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid #e6ebe7;
  background: white; text-align: left; font-family: inherit; color: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ai-card:hover { border-color: #c4b5fd; }
.ai-card.active { background: #faf8ff; border-color: transparent; box-shadow: inset 0 0 0 2px #7c3aed; }
.ai-card-new { border-style: dashed; }
.ai-card-top { display: flex; align-items: center; justify-content: space-between; }
.ai-card-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ai-card-check { width: 20px; height: 20px; border-radius: 50%; background: #6d28d9; color: white; display: none; align-items: center; justify-content: center; }
.ai-card.active .ai-card-check { display: flex; }
.ai-card-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
/* Max. vier regels; de hele omschrijving staat in de tooltip van de kaart */
.ai-card-desc { font-size: 12.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ai-cards-empty { font-size: 13px; color: #64748b; margin: 0; }
/* Tijdens de analyse: voortgang links, antwoord rechts; op een smal scherm onder elkaar */
.ai-run { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ai-run > .ai-result { flex: 999 1 340px; min-width: 0; margin-top: 0; border-top: 0; padding-top: 0; }
.ai-steps { flex: 1 1 210px; max-width: 240px; display: flex; flex-direction: column; padding: 14px 14px 8px; border-radius: 14px; background: #f8fafc; }
.ai-steps.hidden { display: none; }
.ai-steps .ai-section-label { margin-bottom: 12px; }
.ai-step { display: flex; gap: 10px; position: relative; padding-bottom: 14px; }
.ai-step:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; background: #e2e8f0; }
.ai-step.klaar:not(:last-child)::before { background: var(--primary-border); }
.ai-step-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box;
  border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; background: white;
}
.ai-step.klaar .ai-step-dot { background: var(--primary-dark); border-color: var(--primary-dark); color: white; }
.ai-step.bezig .ai-step-dot { border-color: #ddd6fe; border-top-color: #6d28d9; animation: spin .9s linear infinite; }
.ai-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.ai-step-text b { font-size: 13px; font-weight: 650; }
.ai-step.bezig .ai-step-text b { color: #5b21b6; }
.ai-step.wacht .ai-step-text b { color: #64748b; font-weight: 600; }
.ai-step-text small { font-size: 12px; color: #64748b; line-height: 1.4; word-break: break-word; }
.ai-answer-title { font-size: 14px; font-weight: 700; margin-right: auto; }
.ai-skeleton { display: flex; flex-direction: column; gap: 8px; }
.ai-skeleton span { width: 100%; margin: 0; }
.ai-skeleton span:nth-child(2) { width: 94%; }
.ai-skeleton span:nth-child(3) { width: 97%; }
.ai-skeleton span:nth-child(4) { width: 62%; }
.ai-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-3); }
/* Wat de gekozen analyse oplevert (ziet iedereen) + de bewerker voor rollen die prompts mogen aanpassen */
.ai-prompt-info {
  background: var(--primary-soft, #ecfdf5); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 10px 13px; margin: -4px 0 14px;
}
.ai-prompt-info-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-dark); margin-bottom: 3px; }
#ai-prompt-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }
#ai-prompt-desc.leeg { color: var(--text-3); font-style: italic; }
.ai-prompt-edit-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
  background: none; border: none; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--primary-dark); cursor: pointer;
}
.ai-prompt-edit-btn:hover { text-decoration: underline; }
.ai-prompt-editor { border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px 10px; margin-bottom: 14px; }
.ai-prompt-editor.hidden { display: none; }
.ai-editor-hint { font-size: 12px; color: var(--text-3); margin: -2px 0 10px; line-height: 1.45; }
.ai-editor-actions { display: flex; justify-content: space-between; gap: 8px; }
.ai-loading {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-2); padding: 14px 0;
}
.ai-loading.hidden { display: none; }
.ai-result { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.ai-result.hidden { display: none; }
/* Antwoord krijgt een eigen kaart-achtige achtergrond, los van de rest van de modal, maakt
   meteen visueel duidelijk "dit is de tekst, de rest eromheen is bediening", en geeft de
   lange lopende tekst wat ademruimte t.o.v. de compacte formuliervelden erboven. */
.ai-answer {
  font-size: 14.5px; line-height: 1.68; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 16px 18px;
}
.ai-answer p { margin: 0 0 11px; }
.ai-answer p:last-child { margin-bottom: 0; }
.ai-answer li { margin: 0 0 7px 18px; }
.ai-answer strong { font-weight: 700; }
.ai-answer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; min-height: 26px; }
.ai-answer-toolbar .ai-status { margin: 0; flex: 1; }
/* Kopieerknop staat altijd rechts; als er geen zoekstatus is neemt-ie die plek gewoon in
   (justify-content: space-between + de status als flex:1 ervoor duwt 'm vanzelf naar rechts). */
.ai-copy-btn {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 11px; font-size: 11.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s; font-family: inherit;
}
.ai-copy-btn:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary-dark); }
.ai-copy-btn.copied { background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary-dark); }
.ai-copy-icon-done { color: var(--primary-dark); }
.ai-sources { margin-top: 14px; }
.ai-sources.hidden { display: none; }
.ai-sources-head {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px;
}
/* Bronnen als kaartjes: beginletter van het domein, titel en domein */
.ai-sources ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.ai-sources a, .ai-src-plain {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px 7px; border-radius: 10px;
  border: 1px solid var(--border); background: white; text-decoration: none; color: var(--text); min-width: 0;
}
.ai-sources a:hover { border-color: var(--primary); background: #f0fdf7; }
.ai-src-letter { width: 26px; height: 26px; border-radius: 7px; background: #dbeafe; color: #1e40af; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-src-text { display: flex; flex-direction: column; min-width: 0; }
.ai-src-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-src-text small { font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Onvolledig antwoord: het onderzoek liep nog toen de limiet werd bereikt. Amber i.p.v.
   rood, het antwoord is bruikbaar, alleen niet af. */
.ai-truncated {
  font-size: 12px; color: #92400e; background: #fffbeb;
  border: 1px solid #fcd34d; border-radius: 8px;
  padding: 8px 10px; margin: 0 0 10px;
}
/* Loopt mee tijdens het streamen: laat zien wáár het model op dat moment naar zoekt,
   zodat wachten begrijpelijk is in plaats van blind. */
.ai-status {
  font-size: 11.5px; color: var(--primary-dark); background: #f0fdf4;
  border: 1px solid #bbf7d0; border-radius: 8px;
  padding: 6px 10px; margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.ai-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); animation: aiPulse 1s ease-in-out infinite;
}
@keyframes aiPulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* Antwoord uit het geheugen: blauw i.p.v. amber, dit is geen waarschuwing maar informatie. */
.ai-cached {
  font-size: 12px; color: #1e40af; background: #eff6ff;
  border: 1px solid #bfdbfe; border-radius: 8px;
  padding: 8px 10px; margin: 0 0 10px;
}
.ai-refresh-btn {
  background: none; border: none; padding: 0; margin-left: 4px;
  color: #1d4ed8; font-size: 12px; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.ai-disclaimer {
  font-size: 11.5px; color: var(--text-3); font-style: italic;
  margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--border-soft);
}

/* Admin: prompt-blokken in de AI-koppeling */
.admin-ai-prompt {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; margin-bottom: 8px; background: var(--surface-2);
}
.admin-ai-prompt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.admin-ai-prompt-name { flex: 1; }
.admin-ai-prompt-del { opacity: .6; flex-shrink: 0; }
.admin-ai-prompt-del:hover { opacity: 1; }
.admin-ai-prompt textarea { width: 100%; resize: vertical; }
.admin-ai-prompt-desc { margin-bottom: 6px; }

.checkbox-label { display: flex; align-items: center; gap: 6px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.checkbox-label input { accent-color: var(--primary); }

/* ── Multi-select balk (klik-perceel): zweeft boven de gereedschappen-dock ── */
.bulk-select-bar {
  position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%);
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px; box-shadow: var(--shadow-md);
  padding: 8px 10px 8px 16px; display: flex; align-items: center; gap: 10px;
  z-index: 550; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap;
  animation: toastIn .2s ease;
}
.bulk-select-bar.hidden { display: none; }
.bulk-select-bar svg { color: #f59e0b; flex-shrink: 0; }
/* Bewerken/Verwijderen-actiebalk hergebruikt .bulk-select-bar (zelfde plek/stijl, nooit
   tegelijk zichtbaar) maar met eigen accentkleur: groen tijdens bewerken, rood tijdens
   verwijderen (via .delete-mode, zie showEditActionBar in app.js). */
#edit-action-bar svg { color: var(--primary); }
#edit-action-bar.delete-mode svg { color: var(--danger); }
#edit-action-icon { display: flex; align-items: center; }


/* ── Loading overlay ── */
.map-loading {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--glass); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.6); border-radius: 14px;
  padding: 16px 24px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-lg); z-index: 600; font-size: 13px; font-weight: 500;
}
.map-loading.hidden { display: none; }
.loading-spinner {
  width: 20px; height: 20px; border: 2px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ── */
#toast-container { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(15,23,42,.88); backdrop-filter: blur(8px); color: white;
  padding: 9px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease; white-space: nowrap;
}
.toast.error { background: rgba(220,38,38,.92); }
.toast.success { background: rgba(5,150,105,.92); }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Statusbalk: linksonder, uit de buurt van de dock ── */
/* Boven de hoogte van het gereedschapsdock, anders schuift 'm er op een smaller scherm onder */
#status-bar {
  position: absolute; bottom: 84px; left: 18px;
  background: rgba(15,23,42,.78); backdrop-filter: blur(10px);
  color: rgba(255,255,255,.88); padding: 6px 14px; border-radius: 999px;
  font-size: 11px; display: flex; gap: 14px; z-index: 500; pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ── Modal ── */
.modal { position: fixed; inset: 0; background: rgba(9,14,24,.5); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal.hidden { display: none; }
/* Kan als sub-dialoog boven parcel-modal of bulk-modal geopend worden ("+ Nieuwe map"),
   moet daarom altijd boven andere .modal-instanties uitkomen, ongeacht DOM-volgorde. */
#folder-modal { z-index: 1050; }
/* Ook geopend vanuit het lagenpaneel (z-index 1001), dus erboven. */
#upload-layer-modal, #netplan-modal { z-index: 1050; }
/* #admin-screen zit op z-index 1900 (boven de normale .modal-laag 1000), modals die
   daarbinnen opengaan moeten daar dus ook boven uitkomen, anders lijken ze niet te reageren. */
#admin-user-modal, #admin-kadaster-modal, #admin-ai-modal, #admin-limit-modal, #admin-netplan-modal, #admin-role-modal { z-index: 1950; }
.modal-content { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 430px; max-width: 92vw; animation: modalIn .2s ease; }
.modal-sm { width: 330px; }
@keyframes modalIn { from { opacity:0; transform:scale(.96) translateY(-6px); } to { opacity:1; transform:scale(1) translateY(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.modal-header h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.modal-close {
  background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-3);
  border-radius: 8px; line-height: 1; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--surface-3); color: var(--text); }
.modal-body { padding: 16px 22px 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 20px; }

/* ── Perceelformulier: verplaatsbaar zwevend paneel i.p.v. een gecentreerde, blokkerende
   modal, zodat je de kaart (en de net ingetekende vorm) eronder nog kunt zien en bewerken
   terwijl het paneel open staat. Geen donkere backdrop, en pointer-events gaan er "doorheen"
   naar de kaart behalve op het paneel zelf. Staat standaard op de plek van het perceelpaneel
   (rechts, onder de knop Kaartlagen, boven het gereedschap) en in dezelfde stijl; sleep 'm via
   de titelbalk (setupParcelModalDrag() in app.js) naar een andere plek. Omdat de body hier wél
   scrollt, houden header/footer hun eigen scheidingslijn (anders geen visuele afkapping). */
#parcel-modal.modal {
  background: transparent; backdrop-filter: none; pointer-events: none;
  align-items: flex-start; justify-content: flex-end; padding: 76px 18px 96px;
}
#parcel-modal .modal-content {
  /* Vaste hoogte i.p.v. 100%: na slepen staat het paneel los (position: fixed) en zou het anders de hele schermhoogte krijgen */
  pointer-events: auto; width: 372px; max-width: 100%; max-height: calc(100vh - 172px);
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(15,23,42,.08), 0 22px 56px rgba(15,23,42,.18);
}
#parcel-modal .modal-header.pf-head {
  cursor: move; user-select: none; flex-shrink: 0; gap: 12px; justify-content: flex-start;
  padding: 14px 12px 14px 14px; border-bottom: 1px solid var(--border-soft);
}
.pf-shape { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-2); flex-shrink: 0; display: flex; }
.pf-shape .parcel-thumb { border-radius: 12px; }
.pf-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#parcel-modal .pf-title h3 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; }
.pf-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 12.5px; color: #64748b; font-variant-numeric: tabular-nums; }
.pf-sub #modal-area { font-weight: 700; color: var(--text); }
.pf-sub-sep { color: #cbd5e1; }
#parcel-modal .modal-body { padding: 16px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
#parcel-modal .modal-footer { flex-shrink: 0; padding: 12px 16px; border-top: 1px solid var(--border-soft); }
#parcel-modal .modal-footer .btn { flex: 1; justify-content: center; padding: 9px 12px; font-size: 13px; }
#parcel-modal .form-group { margin-bottom: 0; }
#parcel-modal textarea#parcel-description { min-height: 60px; }
#parcel-modal .form-group input.pf-name { font-size: 15px; font-weight: 650; padding: 10px 12px; }
#parcel-modal .folder-select-row .icon-btn { width: 36px; height: auto; flex-shrink: 0; }

.pf-section { display: flex; flex-direction: column; gap: 8px; }
.pf-section .pd-section-head { min-height: 20px; }
.pf-card { border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px; background: #fafcfb; }
.pf-hint-small { font-size: 11.5px; color: #64748b; line-height: 1.4; }
.pf-icon-input { position: relative; display: block; }
.pf-icon-input svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; transition: color .15s; }
.pf-icon-input input {
  width: 100%; border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 12px 8px 34px;
  font-size: 13px; font-family: inherit; color: var(--text); background: white; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pf-icon-input input:focus { border-color: var(--primary); box-shadow: var(--ring); }
.pf-icon-input:focus-within svg { color: var(--primary-dark); }
.pf-row { display: flex; flex-direction: column; gap: 7px; }
.pf-row + .pf-row { margin-top: 4px; }
.pf-row-label { font-size: 12px; font-weight: 500; color: #64748b; }
.pf-slider { display: flex; align-items: center; gap: 10px; }
.pf-slider .opacity-value { float: none; min-width: 36px; text-align: right; }
.pf-hint { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); font-size: 12px; line-height: 1.4; color: #64748b; }
.pf-hint svg { flex-shrink: 0; margin-top: 1px; color: var(--primary-dark); }
.pf-muted { font-size: 12px; color: #94a3b8; }
.pf-reset { background: none; border: 0; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; }
.pf-reset:hover { color: var(--text); text-decoration: underline; }

/* ── Vensters voor meerdere percelen (#bulk-modal, #existing-bulk-modal): zelfde opbouw als het
   perceelformulier, maar gecentreerd en blokkerend zoals altijd. De chips tonen elk perceel zoals
   het na opslaan wordt (renderBulkModalChips / renderExistingBulkPreview in app.js). */
.modal-content.bk-content { width: 440px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; }
.bk-content .modal-header.pf-head { gap: 12px; justify-content: flex-start; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.bk-content .pf-title h3 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; }
.bk-content .modal-body { padding: 16px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.bk-content .modal-footer { flex-shrink: 0; padding: 12px 16px; border-top: 1px solid var(--border-soft); }
.bk-content .modal-footer .btn { flex: 1; justify-content: center; padding: 9px 12px; font-size: 13px; }
.bk-content .form-group { margin-bottom: 0; }
.bk-content .folder-select-row .icon-btn { width: 36px; height: auto; flex-shrink: 0; }
.bk-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft-2); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 136px; overflow-y: auto; }
.bk-chips .ai-chip { max-width: 100%; }
.bk-chip-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-chips .ai-chip small { white-space: nowrap; }

@media (max-width: 760px) {
  #parcel-modal.modal { align-items: flex-end; padding: 10px 10px 76px; }
  #parcel-modal .modal-content { width: 100%; max-height: min(62vh, calc(100vh - 86px)); }
  .modal-content.bk-content { width: calc(100vw - 20px); }
}

.form-row-2 { display: flex; gap: 10px; }
.form-row-2 .form-group { flex: 1; min-width: 0; }
.form-group { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }
.form-group label { display: block; font-size: 10.5px; font-weight: 700; color: #64748b; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; border: 1px solid var(--border-soft); border-radius: 9px;
  padding: 8px 12px; font-size: 13px; color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s; font-family: inherit; background: var(--surface-2);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--primary); box-shadow: var(--ring); background: white; }
.form-group textarea { resize: vertical; min-height: 65px; }

.folder-select-row { display: flex; gap: 8px; }
.folder-select-row select { flex: 1; }

.color-picker { display: flex; gap: 7px; flex-wrap: wrap; }
.color-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: transform .15s, border-color .15s, box-shadow .15s; }
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: white; box-shadow: 0 0 0 2px var(--text); transform: scale(1.1); }

.parcel-stats { display: flex; gap: 10px; padding: 11px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; }
.stat { flex: 1; text-align: center; }
.stat-label { display: block; font-size: 10px; font-weight: 600; color: var(--text-3); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Badge ── */
.badge { background: var(--primary); color: white; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── Popup ── */
.leaflet-popup-content-wrapper { border-radius: 14px !important; box-shadow: var(--shadow-lg) !important; }
.leaflet-popup-content { margin: 0 !important; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important; }
/* Popup van een meetlijn (percelen hebben het perceelpaneel) */
.parcel-popup { padding: 13px 16px; min-width: 175px; }
.parcel-popup-name { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.01em; }
.parcel-popup-stats { display: flex; gap: 10px; }
.parcel-popup-stat { font-size: 11.5px; color: #64748b; }
.parcel-popup-stat strong { color: var(--text); display: block; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.parcel-popup-actions { display: flex; gap: 5px; margin-top: 10px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.popup-btn { flex: 1; text-align: center; padding: 5px; border-radius: 7px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); transition: all .15s; font-family: inherit; }
.popup-btn:hover { background: var(--surface-2); color: var(--text); }
.popup-btn.danger { color: var(--danger); border-color: #fca5a5; }
.popup-btn.danger:hover { background: #fee2e2; }
/* Kadaster "Eigenaar opvragen"-knop in de perceel-popup (volle breedte, boven de acties) */
.popup-btn.kadaster {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 9px; padding: 7px;
  background: var(--primary-soft); border: 1px solid #86efac; color: var(--primary-dark); font-size: 11.5px;
}
.popup-btn.kadaster:hover { background: var(--primary-soft-2); border-color: var(--primary); }
/* AI-analyse in de perceel-popup, paars, zodat het visueel losstaat van de betaalde
   Kadaster-actie ernaast (voorkomt dat iemand per ongeluk de verkeerde knop indrukt). */
.popup-btn.ai {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 6px; padding: 7px;
  background: #f5f3ff; border: 1px solid #c4b5fd; color: #6d28d9; font-size: 11.5px;
}
.popup-btn.ai:hover { background: #ede9fe; border-color: #a78bfa; }
.owner-price-pill { background: var(--primary-dark); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }

/* ── Perceelpaneel (vervangt de popup, zie renderParcelDetail in app.js) ──
   Rechts op de kaart, onder het Kaartlagen-menu en boven de zoomknoppen. Op een smal scherm een
   blad onderaan. */
.parcel-detail {
  position: absolute; top: 76px; right: 18px; bottom: 96px; width: 372px; max-width: calc(100% - 36px);
  background: white; border-radius: 18px; z-index: 560; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 4px 14px rgba(15,23,42,.08), 0 22px 56px rgba(15,23,42,.18);
  animation: pdIn .2s cubic-bezier(.16,1,.3,1);
}
.parcel-detail.hidden { display: none; }
@keyframes pdIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.pd-head { display: flex; align-items: flex-start; gap: 6px; padding: 16px 14px 14px 16px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.pd-head .icon-btn { border-color: transparent; background: var(--surface-3); width: 34px; height: 34px; }
.pd-head .icon-btn:hover { background: var(--border); }
.pd-head .icon-btn:last-child { background: transparent; }
.pd-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pd-title h3 { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; word-break: break-word; }
.pd-folder { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; min-width: 0; }
.pd-folder .folder-dot { width: 8px; height: 8px; }
.pd-kad { font-size: 12px; color: #64748b; }
.pd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 18px; }
.pd-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.pd-section { display: flex; flex-direction: column; gap: 8px; }
.pd-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pd-stats { display: flex; align-items: center; gap: 14px; }
.pd-stats .parcel-thumb { margin-left: auto; border-radius: 12px; }
.pd-stat { display: flex; flex-direction: column; gap: 2px; }
.pd-stat .pd-label { text-transform: none; letter-spacing: 0; font-weight: 500; color: #64748b; }
.pd-big { font-size: 22px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
/* Status als stappen; aanklikbaar met het recht "tekenen" */
.pd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.pd-steps.gedimd { opacity: .55; }
.pd-step {
  display: flex; flex-direction: column; gap: 6px; padding: 4px 0; border: 0; background: none;
  text-align: left; font-family: inherit; cursor: pointer; border-radius: 6px;
}
.pd-step:disabled { cursor: default; }
.pd-step-bar { height: 6px; border-radius: 999px; background: #e2e8f0; transition: background .15s; }
.pd-step.gedaan .pd-step-bar, .pd-step.huidig .pd-step-bar { background: var(--c); }
.pd-step.huidig .pd-step-bar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.pd-step-name { font-size: 11.5px; font-weight: 500; color: #64748b; line-height: 1.25; }
.pd-step.gedaan .pd-step-name { color: var(--text-2); font-weight: 600; }
.pd-step.huidig .pd-step-name { color: var(--text); font-weight: 750; }
.pd-step:not(:disabled):hover .pd-step-bar { background: var(--c); opacity: .75; }
.pd-step:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.pd-link { background: none; border: 0; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: #b91c1c; cursor: pointer; }
.pd-link:hover { text-decoration: underline; }
/* Op deze plek */
.pd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pd-fact { border: 1px solid #edf1ee; border-radius: 12px; padding: 10px; display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.pd-fact-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-fact-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-fact-label { font-size: 11.5px; color: #64748b; }
.pd-fact-value { font-size: 14px; font-weight: 650; line-height: 1.3; display: flex; align-items: center; gap: 6px; word-break: break-word; }
.pd-fact-sub { font-size: 11.5px; color: #64748b; line-height: 1.35; word-break: break-word; }
.pd-swatch { width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(15,23,42,.2); flex-shrink: 0; }
.pd-skeleton, .ai-skeleton span {
  display: block; height: 10px; width: 70px; border-radius: 6px; margin: 4px 0;
  background: linear-gradient(90deg, #eceff4 0%, #f7f8fb 50%, #eceff4 100%); background-size: 200% 100%;
  animation: skeleton 1.6s ease-in-out infinite;
}
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
/* Eigenaar */
.pd-owner { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 12px; background: #f4f7f5; }
.pd-owner .icon-btn { width: 34px; height: 34px; }
.pd-avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--primary-soft-2); color: #065f46; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.pd-avatar.leeg { background: var(--surface-3); color: #64748b; }
.pd-owner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pd-owner-text b { font-size: 13.5px; font-weight: 650; word-break: break-word; }
.pd-owner-text small { font-size: 12px; color: #64748b; word-break: break-word; }
.pd-lookup {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 650; background: var(--primary-soft); border: 1px solid #86efac; color: var(--primary-dark);
}
.pd-lookup span:first-of-type { flex: 1; text-align: left; }
.pd-lookup:hover { background: var(--primary-soft-2); border-color: var(--primary); }
.pd-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
/* AI-analyse */
.pd-ai { border-radius: 14px; border: 1px solid #ede9fe; background: #faf8ff; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pd-ai-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.pd-ai-icon { width: 28px; height: 28px; border-radius: 8px; background: #ede9fe; color: #6d28d9; display: flex; align-items: center; justify-content: center; }
.pd-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-ai-chip {
  min-height: 30px; padding: 4px 11px; border-radius: 999px; border: 1px solid #ddd6fe; background: white; color: #5b21b6;
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; line-height: 1.3;
}
.pd-ai-chip:hover { background: #f5f3ff; }
.pd-ai-chip.active { background: #6d28d9; border-color: #6d28d9; color: white; }
.pd-ai-run { height: 40px; border-radius: 10px; border: 0; background: #6d28d9; color: white; font-family: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.pd-ai-run:hover { background: #5b21b6; }
@media (max-width: 760px) {
  .parcel-detail { top: auto; left: 10px; right: 10px; bottom: 76px; width: auto; max-width: none; max-height: 62vh; }
}

/* Oppervlakte als label op de percelen (permanente tooltip, zie bindParcelPopup); uitgezoomd weg */
.leaflet-tooltip.parcel-area-label {
  background: white; color: #0f172a; border: 0; border-radius: 999px; padding: 2px 9px;
  font: 650 12px/1.4 'Inter', 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(15,23,42,.22); pointer-events: none;
}
.leaflet-tooltip.parcel-area-label::before { display: none; }
#map.hide-area-labels .parcel-area-label { display: none; }

/* Schaalbalk boven de statusbalk linksonder */
.leaflet-bottom.leaflet-left .leaflet-control-scale { margin: 0 0 118px 18px; }
.leaflet-control-scale-line {
  background: rgba(255,255,255,.85); border: 2px solid #334155; border-top: 0; color: #334155;
  font: 650 11px/1.5 'Inter', 'Segoe UI', sans-serif; padding: 0 6px;
}

/* Admin: Kadaster-koppeling per organisatie */
.admin-kadaster-list { display: flex; flex-direction: column; gap: 8px; }
.admin-kadaster-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.admin-kadaster-org { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.admin-kadaster-name { font-weight: 600; font-size: 13px; color: var(--text); }
.admin-kadaster-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.admin-kadaster-badge.on { background: var(--primary-soft-2); color: var(--primary-dark); }
.admin-kadaster-badge.off { background: var(--surface-3); color: var(--text-3); }
.admin-kadaster-price { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.admin-netplan-issues { flex-basis: 100%; display: flex; flex-direction: column; gap: 3px; }
.admin-netplan-issue { font-size: 11.5px; line-height: 1.4; color: #b45309; }
.admin-netplan-issue.fout { color: #dc2626; }

/* Substation popup */
.sub-popup { padding: 11px 14px; min-width: 150px; }
.sub-popup-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.sub-popup-row { font-size: 11px; color: var(--text-2); margin-bottom: 2px; }
.sub-voltage-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; color: white; margin-bottom: 6px; }

/* Netcapaciteitskaart popup */
.netcap-popup { padding: 11px 14px; min-width: 170px; }
.netcap-popup b { font-size: 13px; }
.netcap-popup small { display: block; color: var(--text-2); margin: 2px 0 6px; }
.netcap-popup div { font-size: 11px; color: var(--text-2); margin-bottom: 2px; }

/* Leaflet overrides */
/* Deze twee krijgen de class hidden, maar hadden geen regel die hen ook echt verbergt: een lege groene
   balk boven het AI-antwoord en een vinkje naast "Kopiëren" vóór er iets gekopieerd was. */
.ai-status.hidden, .ai-copy-icon.hidden { display: none; }
.btn-layers-eye:disabled, #btn-toggle-all-layers:disabled { opacity: .45; cursor: default; }
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow-md) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-control-zoom a {
  border-radius: 0 !important; border: none !important; border-bottom: 1px solid var(--border-soft) !important;
  width: 34px !important; height: 34px !important; line-height: 34px !important;
  color: var(--text-2) !important; background: var(--glass) !important; backdrop-filter: blur(10px);
  font-size: 16px !important; transition: background .15s, color .15s;
}
.leaflet-control-zoom a:first-child { border-radius: 12px 12px 0 0 !important; }
.leaflet-control-zoom a:last-child { border-radius: 0 0 12px 12px !important; border-bottom: none !important; }
.leaflet-control-zoom a:hover { color: var(--primary) !important; background: white !important; }
.leaflet-draw-toolbar { display: none !important; }
/* Leaflet.draw's eigen "Save/Cancel"-actielijstje (bij Bewerken/Verwijderen) is GEEN kind
   van .leaflet-draw-toolbar maar een sibling binnen .leaflet-draw-section, de regel
   hierboven verbergt 'm dus niet. De app heeft daar al een eigen actiebalk voor
   (#edit-action-bar), dus dit Engelstalige lijstje moet nooit zichtbaar zijn. */
.leaflet-draw-actions { display: none !important; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.7) !important; backdrop-filter: blur(6px); border-radius: 8px 0 0 0; }

/* Zoom hint */
.zoom-hint { font-size: 10px; color: #b45309; background: #fef3c7; border-radius: 7px; padding: 4px 8px; margin-top: 7px; display: flex; align-items: center; gap: 4px; }
.zoom-hint::before { content: '⚠'; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid transparent; }