/* =====================================================================
   LeadPortal · eigen stijlen
   De meeste opmaak gebeurt met Tailwind-classes direct in de HTML.
   Hier staan alleen herbruikbare onderdelen (knoppen, invoervelden)
   en animaties. Huisstijlkleuren: zie :root hieronder.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Lettertype Inter, op de eigen site (niet via Google Fonts: geen internetadressen van bezoekers naar Google).
   Variabel lettertype (dikte 100–900) van fontsource (@fontsource-variable/inter 5.3.0), licentie: fonts/LICENSE-Inter.txt.
   Een ander lettertype gekozen in Beheer → Instellingen komt wél van Google Fonts (LP.applyTheme in core.js).
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------
   Huisstijlkleuren. Standaard die van TheSign; in het klantdashboard
   worden ze per school overschreven (Beheer → klant → Gegevens).
   --brand       accentkleur (knoppen, actieve tab, grafiek)
   --brand-dark  donkere kleur (banner bovenaan het dashboard)
   De overige varianten rekent core.js (LP.applyBrand) automatisch uit.
   --------------------------------------------------------------------- */
:root {
  --brand: #db2777;
  --brand-rgb: 219 39 119;
  --brand-ink: #ffffff;        /* tekst óp de accentkleur */
  --brand-text: #be185d;       /* accentkleur als tekst op wit (altijd leesbaar) */
  --brand-strong: #be185d;     /* hover */
  --brand-soft: #fdf2f8;       /* lichte achtergrond */
  --brand-border: #fbcfe8;
  --brand-dark: #191746;
  --brand-dark-ink: #ffffff;
  --brand-dark-text: #191746;  /* donkere kleur als tekst op wit (kanaal Offline) */
  --brand-dark-soft: #e8e8ed;  /* lichte achtergrond in de donkere kleur */
  --brand-dark-border: #babac8;
}

/* Hulpklassen voor de huisstijl */
.brand-bg { background-color: var(--brand); color: var(--brand-ink); }
.brand-bar { background-color: var(--brand); }
.brand-text { color: var(--brand-text); }
.brand-soft { background-color: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-border); }
.brand-dark-bg { background-color: var(--brand-dark); color: var(--brand-dark-ink); }
.brand-glow { background-color: var(--brand); }
.brand-glass { background-color: rgb(var(--brand-rgb) / .22); border-color: rgb(var(--brand-rgb) / .4); }
.brand-underline { text-decoration-line: underline; text-decoration-color: var(--brand); text-decoration-thickness: 4px; text-underline-offset: 4px; }
::selection { background: var(--brand); color: var(--brand-ink); }

/* Lettertype, afronding en achtergrond: in te stellen via Beheer → Instellingen
   (core.js zet --font, --radius-scale en --page-bg). */
body {
  font-family: var(--font, 'Inter', system-ui, -apple-system, sans-serif);
  background-color: var(--page-bg, #f8fafc);
}

/* Invoervelden */
.lp-label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.lp-input {
  width: 100%; padding: 9px 12px; font-size: 13px; color: #0f172a;
  background: #fff; border: 1px solid #e2e8f0; border-radius: calc(12px * var(--radius-scale, 1));
  transition: border-color .15s, box-shadow .15s;
}
.lp-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .15); }
.lp-input:disabled { background: #f8fafc; color: #94a3b8; }
textarea.lp-input { resize: vertical; }

/* Knoppen */
html .lp-btn-primary, html .lp-btn-dark, html .lp-btn-ghost, html .lp-btn-danger, html .lp-btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; font-size: 12px; font-weight: 700; border-radius: calc(12px * var(--radius-scale, 1));
  transition: background-color .15s, color .15s, box-shadow .15s; white-space: nowrap; cursor: pointer;
}
html .lp-btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 12px -4px rgb(var(--brand-rgb) / .45); }
html .lp-btn-primary:hover { background: var(--brand-strong); }
html .lp-btn-dark { background: #0f172a; color: #fff; }
html .lp-btn-dark:hover { background: #1e293b; }
html .lp-btn-ghost { background: transparent; color: #475569; font-weight: 600; }
html .lp-btn-ghost:hover { background: #f1f5f9; }
html .lp-btn-soft { background: var(--brand-soft); color: var(--brand-text); border: 1px solid var(--brand-border); }
html .lp-btn-soft:hover { border-color: var(--brand); }
html .lp-btn-danger { background: #e11d48; color: #fff; }
html .lp-btn-danger:hover { background: #be123c; }
html .lp-btn-lg { padding: 12px 18px; font-size: 14px; }
html .lp-btn-sm { padding: 5px 10px; font-size: 11px; border-radius: calc(10px * var(--radius-scale, 1)); }
/* Let op: knoppen gebruiken 'html .lp-btn-…' zodat Tailwind's basisstijl ze niet
   overschrijft. Grootte aanpassen? Gebruik lp-btn-lg / lp-btn-sm of wijzig het hier. */
button:disabled { opacity: .55; cursor: not-allowed; }
html .lp-tab.hidden, html .lp-pill.hidden, html [class*="lp-btn-"].hidden { display: none; }

/* Tabbladen (pill-stijl) */
html .lp-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: calc(9999px * var(--radius-scale, 1));
  font-size: 12px; font-weight: 600; white-space: nowrap; background: #f1f5f9; color: #475569; transition: all .15s;
}
html .lp-tab:hover { background: #e2e8f0; }
html .lp-tab.is-active { background: var(--brand); color: var(--brand-ink); font-weight: 700; box-shadow: 0 2px 8px -2px rgb(var(--brand-rgb) / .35); }

html .lp-pill {
  padding: 4px 12px; border-radius: calc(9999px * var(--radius-scale, 1)); font-size: 11px; font-weight: 600;
  background: #f1f5f9; color: #475569; transition: all .15s; white-space: nowrap;
}
html .lp-pill:hover { background: #e2e8f0; }
html .lp-pill.is-active { background: #0f172a; color: #fff; font-weight: 700; }
html .lp-pill { display: inline-flex; align-items: center; gap: 4px; }

/* Filterknoppen met uitklapmenu (kanaal, evenementen) — allemaal dezelfde stijl.
   .is-set = er is een filter gekozen (dan in de kleur van de klant). */
html .lp-filter-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; font-size: 11px; font-weight: 600; white-space: nowrap;
  background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: calc(9999px * var(--radius-scale, 1)); transition: all .15s;
}
html .lp-filter-btn:hover { border-color: #cbd5e1; }
html .lp-filter-btn[aria-expanded="true"] { border-color: #94a3b8; box-shadow: 0 0 0 3px rgb(148 163 184 / .18); }
html .lp-filter-btn.is-set { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-text); font-weight: 700; }
.lp-filter-btn .lp-filter-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
/* Grotere variant (tabblad Aanmeldingen): even hoog als de knoppen en het zoekveld ernaast */
html .lp-filter-btn.lp-filter-lg { gap: 8px; height: 34px; padding: 0 14px 0 12px; font-size: 12px; line-height: 18px; }
/* Zoekveld in dezelfde balk ook 34px hoog */
.lp-input.lp-input-34 { height: 34px; padding-top: 0; padding-bottom: 0; }
.lp-filter-lg .lp-filter-label { max-width: 220px; }
.lp-chan-dot { width: 22px; height: 22px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-filter-btn .lp-chan-dot { width: 18px; height: 18px; }

/* Keuzemenu's (elk <select>, zie LP.enhanceSelect in core.js). Het echte <select> zit er onzichtbaar onder. */
.lp-dd { position: relative; min-width: 0; }
.lp-dd-inline { display: inline-flex; vertical-align: middle; }
.lp-dd > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.lp-dd-chev { width: 14px; height: 14px; flex-shrink: 0; opacity: .55; transition: transform .15s; }
.lp-dd-button[aria-expanded="true"] .lp-dd-chev { transform: rotate(180deg); }
.lp-dd-value { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
/* Formulierveld: zelfde maat en rand als .lp-input */
html .lp-dd-field .lp-dd-button {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 12px; font-size: 13px; line-height: 20px;
  color: #0f172a; background: #fff; border: 1px solid #e2e8f0; border-radius: calc(12px * var(--radius-scale, 1)); transition: border-color .15s, box-shadow .15s;
}
html .lp-dd-field .lp-dd-button:hover { border-color: #cbd5e1; }
html .lp-dd-field .lp-dd-button:focus-visible, html .lp-dd-field .lp-dd-button[aria-expanded="true"] { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .15); }
html .lp-dd-field .lp-dd-button:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
/* Klein keuzemenu (bv. het statuslabel in de tabel): houdt zijn eigen kleuren, krijgt een pijltje */
html .lp-dd-compact { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
html .lp-dd-compact .lp-dd-value { flex: none; }
.lp-dd-compact .lp-dd-chev { width: 12px; height: 12px; }
/* Het uitgeklapte menu staat los op de pagina, boven alles (ook boven pop-ups) */
.lp-menu.lp-dd-menu { position: fixed; z-index: 90; max-width: min(360px, calc(100vw - 24px)); }
.lp-dd-check { width: 14px; height: 14px; flex-shrink: 0; color: var(--brand-text); }
.lp-dd-field .lp-dd-button .lp-chan-dot { width: 20px; height: 20px; }   /* veld blijft even hoog als .lp-input */

/* Uitklapmenu's in de filterbalk ("Ander schooljaar", kanaal, evenementen) */
.lp-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 250px; max-width: calc(100vw - 2rem);
  max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid #e2e8f0; padding: 6px;
  border-radius: calc(16px * var(--radius-scale, 1)); box-shadow: 0 12px 32px -8px rgb(15 23 42 / .22);
}
.lp-menu.hidden { display: none; }
.lp-menu-head { padding: 6px 10px 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
html .lp-menu-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; font-size: 12px; color: #0f172a;
  border-radius: calc(10px * var(--radius-scale, 1)); cursor: pointer;
}
html .lp-menu-item:hover { background: #f1f5f9; }
html .lp-menu-item.is-active { background: rgb(var(--brand-rgb) / .1); font-weight: 700; }
html .lp-menu-item[disabled], html .lp-menu-item.is-disabled { color: #94a3b8; cursor: not-allowed; background: none; }
.lp-menu-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--brand); flex-shrink: 0; }

/* Suggesties tijdens het typen (adres / plaats, PDOK): staat los op de pagina, onder het veld, boven pop-ups */
.lp-menu.lp-ac-menu { position: fixed; top: 0; left: 0; z-index: 90; min-width: 0; padding: 4px; }
html .lp-ac-item { align-items: flex-start; gap: 9px; padding: 7px 9px; font-weight: 400; }
html .lp-ac-item.is-active { font-weight: 400; }
html .lp-ac-item .lp-ac-ico { width: 15px; height: 15px; margin-top: 1px; color: #94a3b8; flex-shrink: 0; }
html .lp-ac-item.is-active .lp-ac-ico { color: var(--brand-text); }
.lp-ac-main { display: block; font-size: 12.5px; line-height: 1.35; color: #0f172a; overflow-wrap: anywhere; }
.lp-ac-item.is-active .lp-ac-main { font-weight: 700; }
.lp-ac-sub { display: block; font-size: 11px; line-height: 1.35; color: #64748b; margin-top: 1px; }
.lp-ac-foot { padding: 5px 9px 3px; margin-top: 3px; border-top: 1px solid #f1f5f9; font-size: 10px; color: #94a3b8; }

html .lp-subtab { padding: 8px 2px; font-size: 12px; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent; white-space: nowrap; }
html .lp-subtab:hover { color: #0f172a; }
html .lp-subtab.is-active { color: var(--brand-text); border-bottom-color: var(--brand); }

/* Kaarten */
.lp-card { background: #fff; border: 1px solid rgb(226 232 240 / .8); border-radius: calc(24px * var(--radius-scale, 1)); box-shadow: 0 1px 2px rgb(15 23 42 / .04); }

/* Codeblokken */
.lp-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.6;
  background: #0b1120; color: #cbd5e1; border: 1px solid #1e293b; border-radius: calc(14px * var(--radius-scale, 1));
  padding: 14px; overflow-x: auto; white-space: pre;
}

/* Animaties */
@keyframes lpBump { 0% { transform: scale(1); } 40% { transform: scale(1.18); color: var(--brand); } 100% { transform: scale(1); } }
.lp-bump { animation: lpBump .55s cubic-bezier(.16, 1, .3, 1); display: inline-block; }
@keyframes lpFlash { 0% { background-color: var(--brand-soft); } 100% { background-color: transparent; } }
.lp-flash { animation: lpFlash 2.5s ease-out; }

/* Grafiek die de rest van zijn kaart vult (Herkomst & verloop). De SVG ligt absoluut in het vak, zodat de grafiek
   de kaart nooit zelf groter maakt: de hoogte komt van de kaart ernaast (of minimaal 12rem, bv. op de telefoon). */
.lp-chart-fill { position: relative; flex: 1 1 auto; min-height: 12rem; }
.lp-chart-fill > svg { position: absolute; inset: 0; }

/* Grafiek-tooltip */
.lp-tip {
  position: absolute; pointer-events: none; z-index: 10; transform: translate(-50%, -100%);
  background: #0f172a; color: #fff; font-size: 11px; line-height: 1.35; padding: 6px 9px; border-radius: calc(10px * var(--radius-scale, 1));
  white-space: nowrap; box-shadow: 0 8px 20px -6px rgb(15 23 42 / .4);
}

/* Scrollbalk */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: calc(9999px * var(--radius-scale, 1)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------
   Blokken op het overzicht (in-/uitklappen, indeling aanpassen)
   --------------------------------------------------------------------- */
.lp-kicker { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #94a3b8; }
.lp-block-title { font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.lp-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lp-block-summary { display: none; font-size: 11px; font-weight: 600; color: #64748b; }
.lp-block.is-collapsed .lp-block-body { display: none; }
.lp-block.is-collapsed .lp-block-head {
  margin-bottom: 0; padding: 14px 18px; align-items: center; background: #fff;
  border: 1px solid rgb(226 232 240 / .8); border-radius: calc(20px * var(--radius-scale, 1)); box-shadow: 0 1px 2px rgb(15 23 42 / .04);
}
.lp-block.is-collapsed .lp-block-summary { display: inline; }
.lp-block.is-collapsed .lp-block-note { display: none; }
html .lp-collapse {
  width: 32px; height: 32px; border-radius: calc(9999px * var(--radius-scale, 1)); display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e2e8f0; color: #475569; transition: transform .2s, background .15s;
}
html .lp-collapse:hover { background: #f1f5f9; color: #0f172a; }
.lp-block.is-collapsed .lp-collapse { transform: rotate(-90deg); }
/* Klik op de kop (titel) van een blok = in-/uitklappen (niet tijdens "Indeling aanpassen").
   Bewust zonder kleurverandering bij aanwijzen; alleen het handje als muisaanwijzer. */
.lp-block:not(.is-editing) > .lp-block-head:has([data-collapse]) { cursor: pointer; }
.lp-block:not(.is-editing) > .lp-block-head:has([data-collapse]) .lp-block-title { user-select: none; }

/* Bewerkmodus (alleen admin) */
.lp-block.is-editing { outline: 2px dashed #cbd5e1; outline-offset: 8px; border-radius: calc(24px * var(--radius-scale, 1)); }
.lp-block.is-editing.is-hidden-block > :not(.lp-edit-bar) { opacity: .35; }
.lp-block.is-dragging { opacity: .4; }
.lp-block.drop-before { box-shadow: 0 -6px 0 -2px var(--brand); }
.lp-block.drop-after { box-shadow: 0 6px 0 -2px var(--brand); }
.lp-edit-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  background: #0f172a; color: #fff; border-radius: calc(14px * var(--radius-scale, 1)); padding: 6px 8px 6px 6px; margin-bottom: 10px; font-size: 12px;
}
.lp-edit-bar .lp-grip { cursor: grab; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: calc(10px * var(--radius-scale, 1)); font-weight: 700; }
.lp-edit-bar .lp-grip:active { cursor: grabbing; }
.lp-edit-bar .lp-grip:hover { background: rgb(255 255 255 / .08); }
html .lp-edit-btn { padding: 4px 8px; border-radius: calc(9px * var(--radius-scale, 1)); color: #cbd5e1; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
html .lp-edit-btn:hover { background: rgb(255 255 255 / .1); color: #fff; }
html .lp-edit-btn.is-on { background: rgb(255 255 255 / .14); color: #fff; }
body.lp-editing { padding-bottom: 72px; }

/* ---------- Vergelijken (assets/js/compare.js) ---------- */
html .lp-hide-compare { display: none !important; }
/* Keuze tussen twee weergaven (Schooljaren | Evenementen) */
.lp-seg { display: inline-flex; padding: 3px; gap: 2px; background: #f1f5f9; border-radius: calc(9999px * var(--radius-scale, 1)); }
html .lp-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: #475569; border-radius: calc(9999px * var(--radius-scale, 1)); transition: all .15s; }
html .lp-seg button:hover { color: #0f172a; }
html .lp-seg button.is-active { background: #fff; color: #0f172a; font-weight: 700; box-shadow: 0 1px 3px rgb(15 23 42 / .12); }
/* Aan/uit-schakelaar ("tot dezelfde datum") */
.lp-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 600; color: #334155; user-select: none; }
.lp-switch input { position: absolute; opacity: 0; pointer-events: none; }
.lp-switch .lp-switch-track { width: 32px; height: 18px; border-radius: 9999px; background: #cbd5e1; position: relative; transition: background .15s; flex-shrink: 0; }
.lp-switch .lp-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .25); transition: transform .15s; }
.lp-switch input:checked + .lp-switch-track { background: var(--brand); }
.lp-switch input:checked + .lp-switch-track::after { transform: translateX(14px); }
.lp-switch input:focus-visible + .lp-switch-track { box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .25); }
/* Kleurmerk voor A (huisstijl, doorgetrokken) en B (grijs, gestippeld) */
.lp-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.lp-key-a { background: var(--brand-strong, var(--brand)); }
.lp-key-b { background: repeating-linear-gradient(90deg, #94a3b8 0 4px, transparent 4px 7px); }

/* ---------- Kaart (assets/js/map.js) ---------- */
.lp-map { position: relative; width: 100%; overflow: hidden; background: #eef2f6; border-radius: calc(16px * var(--radius-scale, 1)); border: 1px solid #e2e8f0; }
.lp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp-map-sea { fill: #eef2f6; }
.lp-map-land path { fill: #ffffff; stroke: #d9e1ec; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill .15s; }
.lp-map-land path:hover { fill: #f8fafc; }
.lp-map.is-nl { max-width: 560px; margin-left: auto; margin-right: auto; }
/* Kaart die de hoogte van zijn kaart vult (dashboard): het vak groeit mee, de kaart ligt er absoluut in (map.js → fill) */
.lp-map-fill { position: relative; flex: 1 1 auto; }
.lp-map-fill > .lp-map { position: absolute; inset: 0; }
.lp-map.no-base:not(.is-nl) .lp-map-sea { fill: #fbfcfd; }   /* regio zonder ondergrond: licht vlak met ringen */
.lp-map-land path.lp-map-outline { fill: #ffffff; stroke: #cbd5e1; stroke-width: 1.2; }
.lp-map-land path.lp-map-water { fill: #eef2f6; stroke: #d9e1ec; }
.lp-map-dim { fill: #eef2f6; opacity: .74; pointer-events: none; }
.lp-map-rings circle { fill: none; stroke: var(--brand-dark, #0f172a); stroke-opacity: .28; stroke-width: 1.2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.lp-map-rings circle.is-edge { stroke-opacity: .55; stroke-dasharray: none; stroke-width: 1.6; }
.lp-map-bubbles circle[data-i] { cursor: pointer; transition: fill-opacity .15s; }
.lp-map-bubbles circle[data-i]:hover { fill-opacity: .55; }
.lp-map-overlay { position: absolute; inset: 0; pointer-events: none; }
.lp-map-label { position: absolute; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #0f172a; white-space: nowrap; line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff; }
.lp-map-label.is-left { transform: translate(-100%, -50%); }
.lp-map-label b { color: var(--lbl, var(--brand-text, #0f172a)); font-weight: 800; }
.lp-map-ring-label { position: absolute; transform: translate(-50%, -50%); font-size: 10px; font-weight: 700; background: #fff; color: #475569;
  border: 1px solid #e2e8f0; border-radius: 9999px; padding: 0 6px; line-height: 16px; white-space: nowrap; }
.lp-map-pin { position: absolute; width: 0; height: 0; }
.lp-map-pin-dot { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 9999px; background: var(--pin); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgb(15 23 42 / .28); }
.lp-map-pin-label { position: absolute; top: 18px; left: 0; transform: translateX(-50%); font-size: 10px; font-weight: 800; background: var(--pin); color: #fff;
  padding: 2px 8px; border-radius: 9999px; white-space: nowrap; box-shadow: 0 2px 6px rgb(15 23 42 / .2); }
.lp-map-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); background: #0f172a; color: #fff; font-size: 11px; padding: 6px 10px;
  border-radius: 10px; pointer-events: none; white-space: nowrap; z-index: 5; box-shadow: 0 6px 18px rgb(15 23 42 / .25); }
.lp-map-loading { position: absolute; left: 12px; bottom: 12px; font-size: 11px; background: #fff; border: 1px solid #e2e8f0; border-radius: 9999px;
  padding: 4px 10px 4px 6px; display: flex; gap: 6px; align-items: center; color: #64748b; }
.lp-map-loading.hidden { display: none; }
.lp-map-loading span { width: 12px; height: 12px; border-radius: 9999px; border: 2px solid #e2e8f0; border-top-color: var(--brand); animation: lp-spin 1s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }
/* Lijst met plaatsen naast de kaart */
.lp-rank { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 4px 10px; font-size: 12px; }
.lp-rank-bar { grid-column: 2 / 4; height: 5px; border-radius: 9999px; background: #f1f5f9; overflow: hidden; }
.lp-rank-bar > span { display: block; height: 100%; border-radius: 9999px; }

/* ---------- Offline campagnes (QR-codes) ---------- */
.lp-qr-table th { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; padding: 10px 12px; white-space: nowrap; }
.lp-qr-table td { padding: 10px 12px; font-size: 12px; border-top: 1px solid #f1f5f9; vertical-align: middle; }
.lp-qr-table tfoot td { font-weight: 800; color: #0f172a; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.lp-mini-bar { height: 4px; border-radius: 9999px; background: #f1f5f9; overflow: hidden; margin-top: 4px; min-width: 48px; }
.lp-mini-bar > span { display: block; height: 100%; border-radius: 9999px; background: var(--brand); }
.lp-qr-thumb { width: 44px; height: 44px; flex-shrink: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: calc(8px * var(--radius-scale, 1)); padding: 3px; }
.lp-qr-thumb svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------------
   Inlogpagina (index.html). Kleuren, teksten en foto komen uit
   Beheer → Instellingen → Inlogpagina; login.js zet de --login-…-variabelen.
   Standaard: donkere huisstijlkleur met twee zachte gloeden (accent + wit).
   --------------------------------------------------------------------- */
.lp-login { background-color: var(--login-bg, var(--brand-dark)); color: var(--login-ink, var(--brand-dark-ink)); }
.lp-login-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lp-login-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--login-photo-pos, center); }
.lp-login-shade { position: absolute; inset: 0; display: none;
  background: linear-gradient(160deg, rgb(var(--login-bg-rgb, 25 23 70) / var(--login-dim-a, .3)) 0%, rgb(var(--login-bg-rgb, 25 23 70) / var(--login-dim-b, .4)) 55%, rgb(var(--login-bg-rgb, 25 23 70) / var(--login-dim-c, .5)) 100%); }
.lp-login-glow { position: absolute; border-radius: 9999px; filter: blur(64px); will-change: transform; }
.lp-login-glow-1 { right: -6rem; bottom: -8rem; width: 28rem; height: 28rem; background: var(--login-glow1, var(--brand)); opacity: var(--login-glow1-o, .25); }
.lp-login-glow-2 { left: 25%; top: -8rem; width: 24rem; height: 24rem; background: var(--login-glow2, #fff); opacity: var(--login-glow2-o, .1); }
.lp-login.is-photo .lp-login-shade { display: block; }
.lp-login.is-photo .lp-login-glow { display: none; }
.lp-login.is-moving .lp-login-glow-1 { animation: lp-drift-1 24s ease-in-out infinite alternate; }
.lp-login.is-moving .lp-login-glow-2 { animation: lp-drift-2 31s ease-in-out infinite alternate; }
@keyframes lp-drift-1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-18vw, -10vh) scale(1.2); } 100% { transform: translate(-34vw, -26vh) scale(.95); } }
@keyframes lp-drift-2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(16vw, 14vh) scale(.9); } 100% { transform: translate(-12vw, 30vh) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .lp-login.is-moving .lp-login-glow { animation: none; } }
.lp-login-card { background: #fff; color: #0f172a; }
.lp-login.card-glas .lp-login-card { background: rgb(255 255 255 / .8); border-color: rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.lp-login-help { opacity: .7; }
.lp-login.is-photo .lp-login-help { opacity: .95; text-shadow: 0 1px 3px var(--login-ink-shadow, rgb(0 0 0 / .55)); }

/* Kanaalkeuze per klant (Beheer → Klanten → Gegevens → Kanalen) */
.lp-chan-pick { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: calc(14px * var(--radius-scale, 1)); cursor: pointer; user-select: none; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.lp-chan-pick input { position: absolute; opacity: 0; pointer-events: none; }
.lp-chan-pick:not(.is-on) .lp-chan-dot, .lp-chan-pick:not(.is-on) > span:nth-of-type(2) { opacity: .45; filter: grayscale(1); }
.lp-chan-pick:hover { border-color: #cbd5e1; }
.lp-chan-pick.is-on { background: #fff; border-color: #0f172a; box-shadow: inset 0 0 0 1px #0f172a; }
.lp-chan-pick:has(input:focus-visible) { outline: 3px solid rgb(var(--brand-rgb) / .3); outline-offset: 1px; }
.lp-chan-check { width: 18px; height: 18px; flex-shrink: 0; border-radius: 9999px; border: 1.5px solid #cbd5e1; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.lp-chan-pick.is-on .lp-chan-check { background: #0f172a; border-color: #0f172a; color: #fff; }

/* Doel van de werving per klant (Beheer → Klanten → Gegevens): twee keuzes, precies één aan */
.lp-goal-pick { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: calc(14px * var(--radius-scale, 1)); cursor: pointer; user-select: none; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.lp-goal-pick input { position: absolute; opacity: 0; pointer-events: none; }
.lp-goal-pick:hover { border-color: #cbd5e1; }
.lp-goal-pick.is-on { background: #fff; border-color: #0f172a; box-shadow: inset 0 0 0 1px #0f172a; }
.lp-goal-pick:has(input:focus-visible) { outline: 3px solid rgb(var(--brand-rgb) / .3); outline-offset: 1px; }
.lp-goal-pick.is-on .lp-chan-check { background: #0f172a; border-color: #0f172a; color: #fff; }

/* Wervingsjaar in Beheer: jaarlabel op een funnel, melding bij een kopie, gele rand om velden die je moet nalopen,
   waarschuwing als het standaardevenement van een funnel voorbij is */
.lp-year-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 9999px; background: #f1f5f9; color: #475569;
  font-size: 10px; font-weight: 700; white-space: nowrap; }
.lp-copy-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: calc(14px * var(--radius-scale, 1)); background: #fffbeb; border: 1px solid #fde68a;
  color: #78350f; font-size: 12px; line-height: 1.5; }
.lp-copy-note code { font-size: 11px; background: #fef3c7; padding: 0 4px; border-radius: 4px; }
.lp-check-field { border-radius: calc(12px * var(--radius-scale, 1)); box-shadow: 0 0 0 2px #fcd34d; background: #fffbeb; padding: 8px; margin-left: -8px; margin-right: -8px; }
.lp-recv-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 9999px; background: #ecfdf5; color: #047857;
  font-size: 10px; font-weight: 700; white-space: nowrap; }
.lp-qr-thumb.is-sm { width: 34px; height: 34px; padding: 2px; }
.lp-ended-note { display: flex; gap: 6px; padding: 7px 9px; border-radius: calc(10px * var(--radius-scale, 1)); background: #fffbeb; color: #92400e; font-size: 11px; line-height: 1.45; }

/* ---------- Meldingen van het bureau (belletje, lijstje, balk "Belangrijk") ---------- */
.lp-notice-panel { position: fixed; z-index: 60; width: min(380px, calc(100vw - 32px)); background: #fff; border: 1px solid #e2e8f0;
  border-radius: calc(1rem * var(--radius-scale, 1)); box-shadow: 0 20px 40px -12px rgb(15 23 42 / .25); overflow: hidden; }
.lp-notice-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: calc(1rem * var(--radius-scale, 1));
  background: var(--brand-soft); border: 1px solid var(--brand-border); }
.lp-notice-count { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9999px;
  background: var(--brand); color: var(--brand-ink); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.lp-notice-body p, .lp-notice-body ul { margin: 0; }
/* Onderwerp (kleine regel boven de titel) van een melding: in de lichte kleur van het thema (de accentkleur) */
.lp-notice-kicker { color: var(--brand); }
/* Regel in het lijstje: melding openen + prullenbak (verwijderen uit je eigen lijst) */
.lp-notice-item { display: flex; align-items: flex-start; }
.lp-notice-item:hover { background: #f8fafc; }
.lp-notice-del { flex-shrink: 0; margin: .5rem .5rem 0 0; padding: .4rem; border-radius: calc(.5rem * var(--radius-scale, 1)); color: #94a3b8; }
.lp-notice-del:hover, .lp-notice-del:focus-visible { color: #e11d48; background: #fff1f2; }
.lp-notice-undo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1rem;
  background: #f8fafc; border-bottom: 1px solid #f1f5f9; font-size: 12px; color: #475569; }

/* =====================================================================
   Mailcampagnes (Beheer → Mailcampagnes, admin-mail.js; tabblad Mails in het dashboard)
   ===================================================================== */
/* Schakelaar aan/uit zonder tekst (Mailcampagnes). Let op: niet .lp-switch, dat is de schakelaar mét tekst (Vergelijken, Instellingen) */
.lp-toggle { position: relative; display: inline-flex; width: 44px; height: 26px; flex-shrink: 0; cursor: pointer; }
.lp-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.lp-toggle span { position: absolute; inset: 0; border-radius: 9999px; background: #cbd5e1; transition: background .15s; pointer-events: none; }
.lp-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgb(15 23 42 / .25); transition: transform .15s; }
.lp-toggle input:checked + span { background: var(--brand); }
.lp-toggle input:checked + span::after { transform: translateX(18px); }
.lp-toggle input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.lp-toggle input:disabled { cursor: not-allowed; }
.lp-toggle-sm { width: 36px; height: 22px; }
.lp-toggle-sm span::after { width: 16px; height: 16px; }
.lp-toggle-sm input:checked + span::after { transform: translateX(14px); }
/* Evenementenmenu bij de mailcijfers (Beheer en tabblad Mails) */
.lp-menu.lp-mail-ev-menu { min-width: 300px; max-width: min(380px, calc(100vw - 24px)); }
/* Uitklapmenu rechts uitlijnen (knop staat rechts in een kaart) */
.lp-menu.lp-menu-end { left: auto; right: 0; }
/* Filterknop naast een keuzeveld (.lp-input): even hoog en dezelfde vorm (Beheer → Mailcampagnes → Cijfers) */
html .lp-filter-btn.lp-filter-field { height: 40px; padding: 0 12px; gap: 8px; font-size: 13px; font-weight: 500; color: #0f172a; border-radius: calc(12px * var(--radius-scale, 1)); }
html .lp-filter-btn.lp-filter-field.is-set { color: var(--brand-text); font-weight: 700; }
.lp-filter-field .lp-filter-label { max-width: 240px; }
/* Klein voorbeeld van een mail (600px breed, verkleind) */
.lp-mail-thumb { position: relative; overflow: hidden; width: 100%; pointer-events: none; }
.lp-mail-thumb iframe { position: absolute; top: 0; left: 50%; width: 640px; height: 1400px; border: 0; transform: translateX(-50%) scale(.5); transform-origin: top center; background: #fff; }
/* De editor: volledig scherm */
.lp-mail-editor { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #f1f5f9; }
.lp-me-top { display: flex; align-items: center; gap: 8px; padding: 10px max(16px, env(safe-area-inset-left, 0px)); background: #fff; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.lp-me-meta { display: flex; gap: 12px; padding: 10px 16px 12px; background: #fff; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; align-items: flex-end; }
.lp-me-meta .lp-menu { left: auto; right: 0; }
.lp-me-main { flex: 1; display: flex; min-height: 0; }
.lp-me-canvas { flex: 1; min-width: 0; overflow: auto; padding: 24px 16px 40px; }
.lp-me-frame { margin: 0 auto; width: 100%; max-width: 680px; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px -12px rgb(15 23 42 / .25); overflow: hidden; transition: max-width .2s; }
.lp-me-frame.is-mobile { max-width: 375px; }
.lp-me-frame iframe { display: block; width: 100%; border: 0; min-height: 400px; }
.lp-me-panel { width: 360px; max-width: 46vw; flex-shrink: 0; background: #fff; border-left: 1px solid #e2e8f0; display: flex; flex-direction: column; min-height: 0; }
.lp-me-tabs { display: flex; border-bottom: 1px solid #e2e8f0; }
html .lp-me-tabs button { flex: 1; padding: 11px 4px; font-size: 12px; font-weight: 700; color: #64748b; border-bottom: 2px solid transparent; }
html .lp-me-tabs button.is-active { color: #0f172a; border-bottom-color: var(--brand); }
.lp-me-panel-body { flex: 1; overflow-y: auto; padding: 16px; }
.lp-me-panel-body .lp-menu { left: auto; right: 0; min-width: 220px; }
html .lp-me-block { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 1px solid #e2e8f0; border-radius: calc(12px * var(--radius-scale, 1));
  font-size: 12px; font-weight: 600; color: #334155; background: #fff; cursor: grab; transition: border-color .15s, box-shadow .15s; }
html .lp-me-block:hover { border-color: var(--brand); box-shadow: 0 4px 12px -6px rgb(var(--brand-rgb) / .5); }
html .lp-me-block svg { color: var(--brand-text); }
@media (max-width: 760px) {
  .lp-me-main { flex-direction: column; }
  .lp-me-panel { width: 100%; max-width: none; border-left: 0; border-top: 1px solid #e2e8f0; max-height: 50vh; }
  .lp-me-canvas { padding: 12px 8px 24px; }
}
/* Dashboard: tabblad Mails */
.lp-mail-view iframe { display: block; width: 100%; border: 0; background: #fff; }

/* Beheer: uitklapmenu "Meer" in de menubalk (Alle leads, Logboek, Instellingen) */
.lp-menu.lp-more-menu { position: fixed; top: 0; left: 0; z-index: 90; min-width: 210px; }
html .lp-more-menu .lp-menu-item { font-size: 13px; font-weight: 600; padding: 9px 12px; }
html .lp-more-menu .lp-menu-item svg { color: #64748b; flex-shrink: 0; }
html .lp-more-menu .lp-menu-item.is-active svg { color: var(--brand-text); }

/* =====================================================================
   Zoek scholen in de regio (Beheer → klant → Basisscholen / Middelbare scholen; admin-scholen.js openNearSchools)
   ===================================================================== */
.lp-near-list { max-height: min(52vh, 460px); min-height: 8rem; }
.lp-near-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.lp-near-row:last-child { border-bottom: 0; }
.lp-near-row:hover { background: #f8fafc; }
.lp-near-row.is-on { background: rgb(var(--brand-rgb) / .07); }
.lp-near-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }
.lp-near-row.is-have { cursor: default; opacity: .6; }
.lp-near-row.is-have:hover { background: none; }
.lp-near-have { flex-shrink: 0; font-size: 10px; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 9999px; padding: 2px 8px; }
.lp-near-row { align-items: flex-start; }
.lp-near-row input[type=checkbox] { margin-top: 2px; }
.lp-near-locs-btn { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; color: #475569; padding: 0 4px; border-radius: 6px; }
.lp-near-locs-btn:hover { background: #f1f5f9; color: #0f172a; }
.lp-near-locs { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 10px; background: #f8fafc; }
.lp-near-loc { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #475569; padding: 2px 0; flex-wrap: wrap; }

/* Niveaus van een middelbare school (pro · vmbo · mavo · havo · vwo · brugklas) en het niveau van een aanmelder */
.lp-lvl { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 9999px; font-size: 10.5px; font-weight: 700; line-height: 17px; border: 1px solid transparent; white-space: nowrap; }
.lp-lvl.is-sm { font-size: 9.5px; line-height: 15px; padding: 0 5px; }
.lp-lvl-pro { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.lp-lvl-vbo { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.lp-lvl-mavo { background: #fefce8; color: #854d0e; border-color: #fde68a; }
.lp-lvl-havo { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.lp-lvl-vwo { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.lp-lvl-brugjaar { background: #faf5ff; color: #6b21a8; border-color: #e9d5ff; }
html .lp-pill.lp-pill-lvl { padding: 3px 5px; }
html .lp-pill.lp-pill-lvl.is-active { background: #fff; box-shadow: 0 0 0 2px var(--brand); }
.lp-lead-level { display: inline-block; padding: 0 6px; border-radius: 6px; background: #f1f5f9; color: #334155; font-size: 10.5px; font-weight: 700; line-height: 17px; white-space: nowrap; }
/* Blok "Per niveau": verdeling als één balk; vaste kleur per niveau (laag → hoog) */
.lp-level-bar { display: flex; height: 12px; border-radius: 9999px; overflow: hidden; background: #f1f5f9; gap: 2px; }
.lp-level-seg { display: block; height: 100%; min-width: 3px; }
.lp-level-dot { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; }
.lp-level-seg-0 { background: #94a3b8; } .lp-level-seg-1 { background: #fdba74; } .lp-level-seg-2 { background: #fb923c; }
.lp-level-seg-3 { background: #facc15; } .lp-level-seg-4 { background: #a3e635; } .lp-level-seg-5 { background: #34d399; }
.lp-level-seg-6 { background: #22d3ee; } .lp-level-seg-7 { background: #60a5fa; } .lp-level-seg-8 { background: #cbd5e1; }
.lp-lead-level.is-other { background: #fff; border: 1px dashed #cbd5e1; color: #64748b; font-weight: 600; }
/* Bron van het aantal leerlingen achter het getal (Beheer → Scholen): DUO, schatting of met de hand */
.lp-pupil-src { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; font-size: 9.5px; font-weight: 700; line-height: 15px; vertical-align: 1px; cursor: help; }
.lp-pupil-src.is-duo { background: #eff6ff; color: #1e40af; }
.lp-pupil-src.is-schatting { background: #fff; color: #64748b; border: 1px dashed #cbd5e1; }
.lp-pupil-src.is-hand { background: #f1f5f9; color: #334155; }