/* O-Care CRM: huisstijl van o-care.com.
   Navy #1d3356 (primair, tekst en donkere vlakken), teal #2bcba7 (secundair, accenten en de grote
   hero-vlakken), Poppins met gewicht 600 voor koppen en knoppen, pilvormige knoppen (navy met witte
   tekst, of teal met navy tekst zoals "Buy O-Care"), grote ronde hoeken (20px) en de organische
   'blob'-vormen uit de hero en het druppel-logo. Opzet van de componenten overgenomen van de Solvid-CRM. */
:root {
  --navy: #1d3356;
  --navy-2: #264370;
  --navy-deep: #16294a;
  --teal: #2bcba7;
  --teal-dark: #1fae8f;
  --teal-tint: #e6f8f4;
  --teal-soft: #cdf1e8;
  /* Aliassen uit de Solvid-opzet, zodat de bestaande component-CSS blijft werken. */
  --blue: var(--teal);
  --blue-dark: var(--teal-dark);
  --blue-tint: var(--teal-tint);
  /* Signaalkleur voor fouten, verlopen taken en opzeggingen. De website heeft geen oranje;
     dit is bewust een functionele kleur, geen merkkleur. --negatief (grafieken) is dezelfde tint. */
  --negatief: #e0575b;
  --orange: var(--negatief);
  --orange-dark: #B93F35;
  --ink: #1d3356;
  --grey: #5B6B76;
  --line: #E3E9F0;
  --bg-soft: #f7f7f7;
  --radius: 20px;
  --radius-s: 12px;
  --pill: 999px;
  --shadow: 0 14px 40px -18px rgba(29, 51, 86, .22);
  --shadow-kaart: 0 2px 22px rgba(29, 51, 86, .06);
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --blob: 58% 42% 55% 45% / 52% 60% 40% 48%;
}

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

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-soft);
  display: flex;
  min-height: 100vh;
  font-size: 15px;
}

h1, h2, h3 { font-family: var(--font-head); color: var(--navy); font-weight: 600; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--teal-soft); color: var(--navy); }

/* ---------- Zijbalk ---------- */
.zijbalk {
  width: 240px;
  flex: none;
  background: var(--navy);
  color: #b8c6da;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
/* Teal blob die achter het witte logoblok vandaan komt: het hero-motief van de website
   (teal vlak met organische vorm), hier omgekeerd op navy. */
.zijbalk::before {
  content: '';
  position: absolute;
  top: -70px; right: -90px;
  width: 240px; height: 240px;
  background: var(--teal);
  border-radius: var(--blob);
  transform: rotate(-14deg);
  pointer-events: none;
}
.zijbalk > * { position: relative; z-index: 1; }
.logo-blok {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .45);
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  margin-bottom: 1.8rem;
  position: relative;
  z-index: 5;
}
.entiteit-toggler { position: relative; min-width: 0; width: 100%; }
.entiteit-knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy);
}
.entiteit-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.entiteit-dot {
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  flex: none;
  background: var(--entiteit-kleur, var(--blue));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7) inset;
}
.entiteit-optie-label { display: flex; align-items: center; gap: .55rem; min-width: 0; overflow: hidden; }
.entiteit-optie-label .entiteit-dot { box-shadow: none; }
.entiteit-naam {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.entiteit-knop .chevron { flex: none; opacity: .5; transform: rotate(90deg); transition: transform .15s; font-size: 1rem; }
.entiteit-toggler.open .entiteit-knop .chevron { transform: rotate(-90deg); }
.entiteit-menu {
  position: absolute;
  top: calc(100% + .6rem);
  left: -1rem;
  width: calc(100% + 2rem);
  background: #fff;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
  padding: .4rem;
  z-index: 20;
}
.entiteit-optie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--ink);
  padding: .5rem .6rem;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.entiteit-optie:hover { background: var(--bg-soft); }
.entiteit-optie.actief { color: var(--blue-dark); font-weight: 700; }
.entiteit-optie .vink { color: var(--blue-dark); font-weight: 700; visibility: hidden; }
.entiteit-optie.actief .vink { visibility: visible; }
.entiteit-scheiding { border-top: 1px solid var(--line); margin: .3rem 0; }
.logo-blok .omgeving {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--blue-dark);
  background: var(--blue-tint);
  padding: .2rem .5rem;
  border-radius: 5px;
}
.zijbalk nav { display: grid; gap: .25rem; }
.nav-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #b8c6da;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  padding: .62rem 1.05rem;
  border-radius: var(--pill);
  transition: background .2s, color .2s;
}
/* Lucide-iconen (inline SVG, zelfde set als het And Repeat CRM) voor elk menu-item; kleur volgt de tekst. */
.nav-item .ico { width: 18px; height: 18px; flex: none; opacity: .8; }
.nav-item.actief .ico, .nav-item:hover .ico { opacity: 1; }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* Actief menu-item als de teal "Buy O-Care"-knop: teal pil met navy tekst. */
.nav-item.actief { background: var(--teal); color: var(--navy); }
/* Sectiekopje in het hoofdmenu ("Tools"), zoals in het And Repeat CRM: klein, kapitalen, gedempt. */
.nav-sectie { margin: 1.4rem 0 .25rem; padding: 1.1rem 1.05rem 0; border-top: 1px solid rgba(255, 255, 255, .12); font-family: var(--font-head); font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #7E9FB2; }

.nav-terug {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #7E9FB2;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem .8rem;
  margin-bottom: .6rem;
  transition: color .2s;
}
.nav-terug:hover { color: #fff; }

.zijbalk-onder { margin-top: auto; display: grid; gap: .6rem; }
.nav-schakelaar { justify-content: space-between; }
.nav-schakelaar .chevron { opacity: .6; font-size: 1.1rem; line-height: 1; }
/* ---------- Hoofd ---------- */
.hoofd { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbalk {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: .8rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
#zoek {
  width: min(420px, 50%);
  border: 1.5px solid var(--line);
  border-radius: var(--pill);
  padding: .65rem 1.25rem;
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--ink);
  background: var(--bg-soft);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#zoek:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px var(--teal-tint); }
.gebruiker { display: flex; align-items: center; gap: .7rem; font-size: .85rem; }
.gebruiker b { font-family: var(--font-head); color: var(--navy); display: block; line-height: 1.2; }
.gebruiker span { color: var(--grey); font-size: .78rem; }
.uitlog-knop {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--grey);
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  transition: color .15s, border-color .15s;
}
.uitlog-knop:hover { color: var(--navy); border-color: var(--navy); }

/* ---------- Login ---------- */
#app-shell { display: flex; width: 100%; }
.login-scherm {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
/* Hero van o-care.com: teal vlak met een grote navy organische vorm rechts. */
.login-scherm::before {
  content: '';
  position: absolute;
  right: -22vw; top: -25vh;
  width: 78vw; height: 150vh;
  background: var(--navy);
  border-radius: 45% 55% 40% 60% / 60% 40% 60% 40%;
  transform: rotate(8deg);
  pointer-events: none;
}
/* Het druppel-icoon uit het logo, groot en licht op de achtergrond. */
.login-scherm::after {
  content: '';
  position: absolute;
  left: -40px; bottom: -60px;
  width: 340px; height: 340px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-width='4' stroke-linejoin='round'%3E%3Cpath stroke='%23ffffff' stroke-opacity='.55' transform='rotate(-16 50 50) translate(6 -4)' d='M50 92C30 80 8 52 14 30 18 14 34 8 50 10c16-2 32 4 36 20 6 22-16 50-36 62Z'/%3E%3Cpath stroke='%231d3356' d='M50 92C30 80 8 52 14 30 18 14 34 8 50 10c16-2 32 4 36 20 6 22-16 50-36 62Z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .5;
  pointer-events: none;
}
.login-kaart {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 32px 68px -20px rgba(29, 51, 86, .45);
  padding: 2.4rem 2.2rem;
  width: 100%;
  max-width: 380px;
  display: grid;
  gap: 1rem;
}
.login-logo { height: 56px; width: auto; justify-self: start; }
#app-laden .login-logo { height: 72px; background: #fff; padding: .8rem 1rem; border-radius: 20px; box-sizing: content-box; position: relative; z-index: 1; }
.login-kaart h1 { font-size: 1.3rem; margin-bottom: .2rem; }
.login-veld {
  display: grid;
  gap: .35rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  color: var(--grey);
  min-width: 0;
}
.login-veld input, .login-veld select {
  font-family: var(--font-body);
  font-size: .95rem;
  padding: .65rem .8rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
  background: #fff;
  width: 100%;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.login-veld input:focus, .login-veld select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-tint); }
/* Primaire knop zoals "Find your dealer" / "Learn more" op de website: navy pil, witte tekst. */
.login-knop {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--pill);
  padding: .85rem 1.4rem;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.login-knop:hover { background: var(--navy-2); }
.login-knop:active { transform: scale(.98); }
.login-knop:disabled { opacity: .6; cursor: default; }
.login-scheiding { display: flex; align-items: center; gap: .6rem; color: var(--grey); font-size: .78rem; }
.login-scheiding::before, .login-scheiding::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.login-knop-microsoft { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
.login-knop-microsoft:hover { border-color: var(--navy); background: var(--bg-soft); }
.login-fout { color: var(--orange); font-size: .85rem; }
.login-melding { color: var(--blue-dark); font-size: .85rem; }
.login-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--blue-dark);
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-link:hover { color: var(--navy); }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: .85rem;
}

.inhoud {
  flex: 1;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  align-items: start;
}

/* ---------- Zoektabel-modus (Leads/Klanten/Opdrachtgevers/Contactpersonen/Trajecten) ----------
   Zonder geopend record: brede zoektabel, geen detail. Met geopend record: alleen het
   detail op volle breedte (meer ruimte); terug naar de lijst gaat via het menu-item
   opnieuw aan te klikken of de browser-terugknop. */
.inhoud.zoektabel-modus { grid-template-columns: 1fr; }
.inhoud.zoektabel-modus .lijst-paneel { display: block; }
.inhoud.zoektabel-modus .detail-paneel { display: none; }
.inhoud.zoektabel-modus.detail-open .lijst-paneel { display: none; }
.inhoud.zoektabel-modus.detail-open .detail-paneel { display: block; }
.zoektabel { width: 100%; }
.zoektabel .data-tabel { font-size: .82rem; }
.zoektabel .data-tabel th { white-space: nowrap; }

.paneel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-kaart);
}
.paneel-kop {
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.paneel-kop h1 { font-size: 1.2rem; }
.teller { font-size: .78rem; font-weight: 600; color: var(--navy); background: var(--teal-tint); border: none; border-radius: var(--pill); padding: .2rem .7rem; }

/* ---------- Klantenlijst ---------- */
.klantenlijst { max-height: calc(100vh - 180px); overflow-y: auto; }
.laden { padding: 1.4rem; color: var(--grey); font-size: .9rem; }
.klant-rij {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1.3rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.klant-rij:hover { background: var(--bg-soft); }
.klant-rij.actief { background: var(--blue-tint); box-shadow: inset 3px 0 0 var(--blue); }
.klant-rij .avatar { flex: none; background: var(--navy); }
.klant-rij b { font-family: var(--font-head); color: var(--navy); display: block; font-size: .95rem; line-height: 1.25; }
.klant-rij small { color: var(--grey); font-size: .78rem; }

/* ---------- Detail ---------- */
.detail-paneel { min-height: 420px; }
.leeg-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 420px;
  color: var(--grey);
  font-size: .95rem;
}
/* Druppel uit het O-Care-logo als illustratie bij een lege detailkolom (vervangt het favicon-plaatje uit leegDetail()). */
.leeg-detail img { display: none; }
.leeg-detail::before {
  content: '';
  width: 84px; height: 84px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-width='5' stroke-linejoin='round'%3E%3Cpath stroke='%232bcba7' transform='rotate(-16 50 50) translate(6 -4)' d='M50 92C30 80 8 52 14 30 18 14 34 8 50 10c16-2 32 4 36 20 6 22-16 50-36 62Z'/%3E%3Cpath stroke='%231d3356' d='M50 92C30 80 8 52 14 30 18 14 34 8 50 10c16-2 32 4 36 20 6 22-16 50-36 62Z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .9;
}
#klant-detail { padding: 1.5rem 1.6rem; }
.detail-kop h2, .paneel-kop h1, .kpi-kaart b { letter-spacing: -.01em; }
/* Recordbanner (navy hero-banner). De negatieve marges laten de banner tot de
   randen van het paneel lopen; het paneel knipt de hoeken bij. */
.paneel.detail-paneel { position: relative; overflow: hidden; }
.detail-kop {
  margin: -1.4rem -1.5rem 1.4rem;
  padding: 1.5rem 1.6rem 1.4rem;
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 55%, #14506E 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}
/* Organische vormen in de landkleur (standaard teal), zoals de blob in de hero van de website. */
.detail-kop::after {
  content: '';
  position: absolute;
  right: -60px; top: -110px;
  width: 300px; height: 300px;
  border-radius: var(--blob);
  transform: rotate(-18deg);
  background: color-mix(in srgb, var(--entiteit-kleur, var(--teal)) 72%, transparent);
}
.detail-kop::before {
  content: '';
  position: absolute;
  right: 150px; bottom: -150px;
  width: 240px; height: 240px;
  border-radius: 45% 55% 40% 60% / 60% 40% 60% 40%;
  transform: rotate(20deg);
  border: 22px solid color-mix(in srgb, var(--entiteit-kleur, var(--teal)) 30%, transparent);
}
.detail-kop-tekst { position: relative; z-index: 1; min-width: 0; }
/* Rechterkant van de banner: recordacties (knop-kop). Dit is dé vaste plek
   daarvoor; komen er meer knoppen, dan rijgen ze hier aan. */
.detail-kop-rechts {
  flex: none;
  position: relative;
  z-index: 1;
}
.detail-kop-acties { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
/* Recordacties in de navy banner: witte pil met navy tekst, zoals de "Login"-knop in de
   header van de website. Blijft leesbaar op zowel het navy vlak als de teal blob erachter. */
.knop-kop {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .8rem;
  color: var(--navy);
  background: #fff;
  border: none;
  border-radius: var(--pill);
  padding: .55rem 1.2rem;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
  transition: background .15s, transform .1s;
}
.knop-kop:hover { background: var(--teal-tint); }
.knop-kop:active { transform: scale(.97); }
.knop-kop:disabled { opacity: .6; cursor: wait; }
.detail-kop h2 { color: #fff; font-size: 1.45rem; margin-bottom: .5rem; }
.detail-kop-sub { color: #b8c6da; font-size: .82rem; margin-bottom: .6rem; }
.detail-kop-chips .chip { margin: 0 .3rem .3rem 0; border: 1px solid rgba(255, 255, 255, .35); }
.chip {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .25rem .75rem;
  border-radius: var(--pill);
  margin-right: .4rem;
}
.chip-blauw { background: var(--teal-tint); color: var(--navy); }
.chip-groen { background: #E7F6EC; color: #1E7A3C; }
.chip-entiteit {
  background: color-mix(in srgb, var(--entiteit-kleur, var(--blue)) 16%, #fff);
  color: color-mix(in srgb, var(--entiteit-kleur, var(--blue)) 80%, #1d3356);
}
.detail-kop-chips .chip-entiteit { border-color: color-mix(in srgb, var(--entiteit-kleur, var(--blue)) 55%, transparent); }

.veld-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
  margin-bottom: .3rem;
}
.veld {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--line);
  min-height: 2.1rem;
}
.veld label { flex: 0 0 42%; font-size: .8rem; color: var(--grey); font-weight: 500; }
.veld span { flex: 1; font-size: .84rem; color: var(--ink); word-break: break-word; }
.veld-potlood {
  flex: none;
  opacity: 0;
  border: none;
  background: none;
  color: var(--grey);
  cursor: pointer;
  font-size: .85rem;
  padding: 0 .2rem;
  transition: opacity .15s, color .15s;
}
.veld-bewerkbaar:hover .veld-potlood { opacity: 1; }
.veld-potlood:hover { color: var(--blue-dark); }
.veld-in-bewerking .veld-potlood { opacity: 0; pointer-events: none; }
.veld-input {
  flex: 1;
  border: 1.5px solid var(--blue);
  border-radius: 4px;
  padding: .15rem .4rem;
  font-size: .84rem;
  font-family: var(--font-body);
  background: #fff;
  min-width: 0;
}
.veld-multiselect {
  flex: 1;
  border: 1.5px solid var(--blue);
  border-radius: 6px;
  padding: .5rem .6rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.veld-multiselect-optie {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--ink);
  cursor: pointer;
}
.veld-multiselect-knoppen { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }

/* ---------- Opzoekveld (koppelingen met te veel records voor een <select>) ---------- */
.veld-zoek { flex: 1; position: relative; min-width: 0; }
.veld-zoek-wis {
  display: block;
  border: none;
  background: none;
  color: var(--grey);
  font-size: .78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: .2rem 0 0;
}
.veld-zoek-wis:hover { color: var(--orange); }
.veld-zoek-resultaten {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: .25rem;
  background: #fff;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
  z-index: 30;
  padding: .3rem;
}
.veld-zoek-optie {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: .84rem;
  color: var(--ink);
  padding: .45rem .5rem;
  border-radius: 6px;
  cursor: pointer;
}
.veld-zoek-optie:hover { background: var(--bg-soft); }
.veld-zoek-leeg { color: var(--grey); font-size: .82rem; padding: .45rem .5rem; }

/* ---------- Veldhistorie ---------- */
.historie-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding: .7rem 0;
}
.historie-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.historie-info b { font-family: var(--font-head); color: var(--navy); font-size: .86rem; }
.historie-waarden { font-size: .84rem; color: var(--ink); word-break: break-word; }
.historie-pijl { color: var(--grey); }
.historie-info small { color: var(--grey); font-size: .76rem; }
.historie-terugdraaien { flex: none; font-size: .78rem; }

/* ---------- Documentkaart ---------- */
.doc-kaart {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.doc-kop {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  padding: 1.1rem 1.4rem;
}
.doc-kop h3 { color: #fff; font-size: 1.05rem; }
.doc-kop p { color: #b8c6da; font-size: .85rem; margin-top: .15rem; }
.template-lijst { display: grid; }
.template-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.template-rij:first-child { border-top: none; }
.template-info b { font-family: var(--font-head); color: var(--navy); display: block; }
.template-info small { color: var(--grey); font-size: .8rem; }
.template-acties { display: flex; align-items: center; gap: .6rem; }

/* Knoppen zoals op o-care.com: pilvormig, Poppins 600. Primair = navy met witte tekst,
   accent = teal met navy tekst, stil = wit met dunne rand. */
.knop {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  border: none;
  border-radius: var(--pill);
  padding: .65rem 1.35rem;
  cursor: pointer;
  transition: background .2s, transform .15s, border-color .15s;
}
.knop:active { transform: scale(.98); }
.knop-primair {
  background: var(--navy);
  color: #fff;
}
.knop-primair:hover { background: var(--navy-2); }
.knop-primair:disabled { opacity: .6; cursor: wait; }
.knop-accent { background: var(--teal); color: var(--navy); }
.knop-accent:hover { background: #3fd9b6; }
.knop-stil { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
.knop-stil:hover { border-color: var(--navy); }
.knop-klein { font-size: .74rem; padding: .35rem .7rem; margin-left: .6rem; }
.uitnodigen-vorm {
  margin: 0 1.3rem 1rem;
  padding: 1rem 1.1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: grid;
  gap: .8rem;
}
.uitnodigen-vorm select {
  font-family: var(--font-body);
  font-size: .95rem;
  padding: .65rem .8rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
  background: #fff;
}
.uitnodigen-fout { color: var(--orange); font-size: .85rem; }
.uitnodigen-knoppen { display: flex; justify-content: flex-end; gap: .6rem; }

/* Entiteitbanner: verplichte entiteitkeuze bovenaan een aanmaakformulier, kleurt mee
   met de gekozen entiteit zodat direct duidelijk is in welke entiteit je aanmaakt. */
.entiteit-banner {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  background: color-mix(in srgb, var(--entiteit-kleur, var(--blue)) 10%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--entiteit-kleur, var(--blue)) 40%, transparent);
  border-left: 4px solid var(--entiteit-kleur, var(--blue));
  border-radius: var(--radius-s);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink);
  flex-wrap: wrap;
}
.entiteit-banner select {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .88rem;
  padding: .4rem .6rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--ink);
  flex: 1;
  min-width: 160px;
}
.entiteit-banner select:invalid { border-color: var(--orange); color: var(--grey); }

/* ---------- Modal (nieuwe klant/lead) ---------- */
.modal-achtergrond {
  position: fixed;
  inset: 0;
  background: rgba(10, 46, 64, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 200;
}
.modal-kaart {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.7rem;
  width: 100%;
  max-width: 460px;
  min-width: 0;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.modal-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .2rem; }
.modal-kop h2 { font-size: 1.15rem; }
.modal-sluiten {
  flex: none;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--grey);
  cursor: pointer;
  padding: 0 .2rem;
}
.modal-sluiten:hover { color: var(--navy); }

/* Mapping-tabel (uitklapbaar) */
/* ---------- Detailonderdelen ---------- */
.detail-inhoud { min-height: 380px; padding: 1.4rem 1.5rem; }
.subkop {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy);
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 -1.5rem 1rem -1.5rem;
  padding: .6rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
}
.subkop::before { content: '\25be'; font-size: .68rem; color: var(--grey); transition: transform .15s; display: inline-block; }
.subkop.subkop-dicht::before { transform: rotate(-90deg); }
.subkop-toel { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: normal; font-size: .74rem; color: var(--grey); }
.detail-tekst { font-size: .88rem; color: var(--ink); margin-bottom: .6rem; white-space: pre-wrap; }
.factureren-dienst-rij {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}
.factureren-dienst-rij:last-child { border-bottom: none; }
.factureren-dienst-check {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 400;
  font-size: .88rem;
  color: var(--ink);
  cursor: pointer;
}
/* .login-veld input zet standaard width:100%; hier expliciet weer smal maken,
   anders eist het vinkje alle breedte op en blijft er niets over voor de tekst. */
.factureren-dienst-check input { flex: none; width: auto; margin-top: .2rem; }
.factureren-dienst-check span { flex: 1 1 auto; min-width: 0; }
.factureren-dienst-bedrag {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  padding-top: .1rem;
}
.po-nummer-toevoegen-rij { display: flex; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.po-nummer-toevoegen-rij input {
  flex: 1 1 180px;
  font-family: var(--font-body);
  font-size: .88rem;
  padding: .55rem .7rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
}
.po-nummer-toevoegen-rij input:focus { outline: none; border-color: var(--blue); }
.sub-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  margin-bottom: .45rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sub-rij:hover { border-color: var(--blue); background: var(--blue-tint); }
.sub-rij b { font-family: var(--font-head); font-size: .88rem; color: var(--navy); display: block; line-height: 1.3; }
.sub-rij small { color: var(--grey); font-size: .76rem; }
.email-rij { align-items: flex-start; }
.activiteit-icoon {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  margin-top: .1rem;
}
.email-preview { color: var(--grey); font-size: .8rem; margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-inhoud { margin: -.3rem 0 .6rem; padding: .8rem; border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--radius-s) var(--radius-s); background: var(--bg-soft); }
.email-iframe { width: 100%; min-height: 220px; border: none; background: #fff; border-radius: var(--radius-s); }
.data-tabel { width: 100%; border-collapse: collapse; font-size: .84rem; margin-bottom: .6rem; }
/* Facturatievoorstel-blokken op het traject (Administratie-tab) */
.voorstel-blok {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: .7rem .9rem .3rem;
  margin-bottom: .9rem;
  background: #fff;
}
.voorstel-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .5rem;
}
.voorstel-kop b { font-family: var(--font-head); color: var(--navy); font-size: .92rem; }
.voorstel-subtotaal { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .92rem; }
.voorstel-blok .data-tabel { margin-bottom: .3rem; }
.data-tabel th {
  text-align: left; color: var(--grey); font-weight: 500;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .08em;
  padding: .4rem .5rem; border-bottom: 1.5px solid var(--line);
}
.data-tabel td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-tabel-klik tr[data-traject], .data-tabel-klik tr[data-factuur], .data-tabel-klik tr[data-id] { cursor: pointer; }
.data-tabel-klik tr[data-factuur]:hover td { background: var(--bg-soft); }
.data-tabel-klik tr[data-id]:hover td { background: var(--bg-soft); }
.data-tabel-klik tr[data-id].actief td { background: var(--blue-tint); }
.data-tabel-klik tr[data-id].actief td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.th-sorteerbaar { cursor: pointer; user-select: none; }
.th-sorteerbaar:hover { color: var(--navy); }
.factuur-detail-rij td { background: var(--bg-soft); padding: .8rem 1rem; }
div.factuur-detail-rij { background: var(--bg-soft); padding: .8rem 1rem; border-radius: var(--radius-s); margin: -1px 0 .5rem; }
.data-tabel-klik tr[data-traject]:hover td { background: var(--bg-soft); }
.mijlpaal-blok { margin-bottom: .45rem; }
.mijlpaal-blok .sub-rij { margin-bottom: 0; }
.taken-blok { border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--radius-s) var(--radius-s); padding: .5rem .8rem; background: var(--bg-soft); }

/* ---------- Mijlpalen: verticale tijdlijn ---------- */
.tijdlijn { margin-bottom: .6rem; }
.tijdlijn-stap { display: flex; gap: .7rem; }
.tijdlijn-marker {
  flex: none;
  width: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tijdlijn-stap:not(.tijdlijn-laatste) .tijdlijn-marker::after {
  content: '';
  width: 2px;
  flex: 1;
  min-height: 12px;
  margin: 3px 0;
  background: var(--line);
  border-radius: 2px;
}
.tijdlijn-stap.pad-afgerond:not(.tijdlijn-laatste) .tijdlijn-marker::after { background: #9ED9BA; }
.tijdlijn-inhoud { flex: 1; min-width: 0; padding-bottom: .55rem; }
.tijdlijn-kop {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  padding: .5rem .7rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color .15s, background .15s;
}
.tijdlijn-kop:hover { border-color: var(--blue); background: var(--blue-tint); }
.pad-tekst { min-width: 0; }
.pad-tekst b {
  font-family: var(--font-head);
  font-size: .85rem;
  display: block;
  line-height: 1.3;
  color: var(--navy);
}
.pad-tekst small { color: var(--grey); font-size: .74rem; display: block; }
.pad-icoon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: .35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--grey);
}
.pad-afgerond .pad-icoon { background: #2FA96A; border-color: #2FA96A; color: #fff; }
.pad-afgerond .pad-tekst b { color: #1E7A46; }
.pad-actief .pad-icoon { background: var(--blue); border-color: var(--blue); color: #fff; }
.pad-concept .pad-icoon { border-style: dashed; background: transparent; }
.pad-concept .pad-tekst b { color: var(--grey); }
.pad-geselecteerd .tijdlijn-kop { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.tijdlijn-taken {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  background: var(--bg-soft);
  padding: .5rem .8rem;
  margin: 0 .35rem;
}
.veld-link { color: var(--blue-dark); text-decoration: none; }
.veld-link:hover { text-decoration: underline; }

/* ---------- Traject: tabs ---------- */
.traject-tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.traject-tab {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .88rem;
  color: var(--grey);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: .7rem .3rem;
  margin-bottom: -1px;
  cursor: pointer;
}
.traject-tab:hover { color: var(--navy); }
.traject-tab.actief { color: var(--navy); border-bottom-color: var(--teal); }

/* ---------- Statuspad (horizontaal, traject-status en administratie-fase) ---------- */
.status-pad { display: flex; gap: 3px; overflow-x: auto; margin-bottom: 1rem; }
.status-stap {
  flex: 1 1 0;
  min-width: 110px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: .55rem .9rem .55rem 1.3rem;
  background: #E8EEF3;
  color: var(--grey);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .78rem;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  transition: filter .15s;
}
.status-stap:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-left: .9rem; border-radius: 999px 0 0 999px; }
.status-stap:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); border-radius: 0 999px 999px 0; }
.status-stap:only-child { clip-path: none; border-radius: 999px; }
.status-stap:hover { filter: brightness(.95); }
.status-afgerond {
  background: #9ED9BA; color: #17512F;
  flex: 0 0 56px; min-width: 56px; padding: .55rem .4rem .55rem .8rem;
}
.status-afgerond .status-stap-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.status-actief { background: var(--navy); color: #fff; flex: 1.4 1.4 0; }
.status-open { background: #E8EEF3; color: var(--grey); flex: 1.4 1.4 0; }

/* ---------- SharePoint-bestandenlijst (zelfde opzet als de And Repeat-CRM) ---------- */
.sp-kaart { position: relative; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; margin: .4rem 0 1rem; }
.sp-verborgen { display: none; }
.sp-kop { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.sp-kop h3 { font-family: var(--font-head); font-size: .9rem; color: var(--navy); margin: 0; }
.sp-teller { font-size: .78rem; color: var(--grey); }
.sp-kop-rechts { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.sp-icoon-knop {
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius-s);
  color: var(--grey); cursor: pointer; padding: .3rem .5rem; font-size: .95rem; line-height: 1;
}
.sp-icoon-knop:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-dark); }
.sp-icoon-knop:disabled { opacity: .5; cursor: default; }
.sp-nieuw-knop { padding: .35rem .8rem; font-size: .82rem; }
.sp-menu-houder { position: relative; }
.sp-menu {
  position: absolute; right: 0; top: 100%; margin-top: .25rem; z-index: 30;
  min-width: 190px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-s); box-shadow: 0 8px 24px rgba(20, 30, 50, .14); padding: .25rem;
}
.sp-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: .45rem .6rem; font-size: .82rem; color: var(--navy); cursor: pointer; border-radius: 6px;
  font-family: var(--font-head);
}
.sp-menu button:hover { background: var(--blue-tint); color: var(--blue-dark); }
.sp-kruimels { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--grey); }
.sp-kruimel { border: none; background: none; color: var(--grey); cursor: pointer; padding: 0; font-size: .78rem; }
.sp-kruimel:hover { color: var(--blue-dark); text-decoration: underline; }
.sp-kruimel-actief { color: var(--navy); font-weight: 600; }
.sp-kruimel-scheiding { color: var(--line); }
.sp-nieuwe-map { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.sp-nieuwe-map .veld-input { flex: 1; }
.sp-annuleer-knop { border: 1px solid var(--line); background: #fff; border-radius: var(--radius-s); padding: .35rem .7rem; font-size: .8rem; cursor: pointer; color: var(--grey); }
.sp-bezig { padding: .5rem 1rem; font-size: .8rem; color: var(--blue-dark); border-bottom: 1px solid var(--line); }
.sp-fout { padding: .5rem 1rem; font-size: .82rem; color: var(--orange); border-bottom: 1px solid var(--line); }
.sp-tabel { margin: 0; }
.sp-tabel th, .sp-tabel td { padding: .45rem .7rem; }
.sp-tabel tr:hover td { background: var(--bg-soft); }
.sp-icoon-cel { width: 2rem; padding-right: 0 !important; line-height: 0; }
.sp-map-knop { border: none; background: none; padding: 0; font-size: .84rem; color: var(--navy); cursor: pointer; text-align: left; font-family: inherit; }
.sp-map-knop:hover { color: var(--blue-dark); text-decoration: underline; }
.sp-tabel a { color: var(--navy); text-decoration: none; font-size: .84rem; }
.sp-tabel a:hover { color: var(--blue-dark); text-decoration: underline; }
.sp-meta { color: var(--grey); font-size: .78rem; white-space: nowrap; }
.sp-extern { color: var(--grey); font-size: 1rem; text-decoration: none; }
.sp-sleepzone {
  display: flex; align-items: center; justify-content: center;
  margin: .8rem; padding: .7rem 1rem; border: 1px dashed var(--line);
  border-radius: var(--radius-s); font-size: .78rem; color: var(--grey);
}
.sp-sleep-over { border-color: var(--blue); }
.sp-sleep-overlay {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(0, 131, 135, .08); border: 2px dashed #1A9BA1;
  border-radius: var(--radius-s); pointer-events: none;
}
.sp-sleep-overlay span {
  background: var(--navy); color: #fff; font-size: .84rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: var(--radius-s); font-family: var(--font-head);
}

.taak-klikbaar { cursor: pointer; border-radius: 6px; padding: .22rem .35rem; margin: 0 -.35rem; }
.taak-klikbaar:hover { background: var(--blue-tint); }
.taak-klikbaar:hover .taak-status { color: var(--blue-dark); }
.taken-afronden-knop {
  margin-top: .45rem;
  border: 1.5px solid var(--blue);
  background: #fff;
  color: var(--blue-dark);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .78rem;
  cursor: pointer;
  transition: all .15s;
}
.taken-afronden-knop:hover { background: var(--blue); color: #fff; }
/* ---------- Taken chronologisch gegroepeerd binnen een mijlpaal ---------- */
.taken-tijdlijn { margin: .2rem 0 .5rem; }
.taken-groep { position: relative; padding-left: .9rem; margin-bottom: .5rem; }
.taken-groep::before {
  content: ''; position: absolute; left: 0; top: 1.35rem; bottom: .2rem;
  width: 2px; border-radius: 2px; background: var(--line);
}
.taken-groep-verlopen::before { background: var(--orange); }
.taken-groep-vandaag::before { background: var(--blue); }
.taken-groep-kop {
  font-family: var(--font-head); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--grey);
  margin-bottom: .2rem; display: flex; align-items: center; gap: .35rem;
}
.taken-groep-verlopen .taken-groep-kop { color: var(--orange); }
.taken-groep-vandaag .taken-groep-kop { color: var(--blue-dark); }
.taken-groep-aantal { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 .35rem; font-size: .65rem; color: var(--grey); }
.taak-verlopen .taak-deadline { color: var(--orange); font-weight: 600; }
.taak-vandaag .taak-deadline { color: var(--blue-dark); font-weight: 600; }
.taak-afgerond .taak-onderwerp { color: var(--grey); text-decoration: line-through; }
.taak-rij { display: flex; align-items: baseline; gap: .55rem; font-size: .82rem; padding: .18rem 0; }
.taak-status { color: var(--grey); }
.taak-status.afgerond { color: #1E7A3C; }
.taak-onderwerp { flex: 1; }
.taak-deadline { color: var(--grey); font-size: .76rem; }
.filter-chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .9rem; }
.filter-chip {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: .32rem .85rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .8rem;
  color: var(--grey);
  cursor: pointer;
  transition: all .15s;
}
.filter-chip:hover { border-color: var(--blue); color: var(--blue-dark); }
.filter-chip.actief { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.model-mijlpaal { margin-bottom: .8rem; font-size: .88rem; border: 1px solid var(--line); border-radius: var(--radius-s); padding: .6rem .8rem; background: #fff; }
.model-mijlpaal > b { font-family: var(--font-head); color: var(--navy); }
.model-taken { margin: .3rem 0 .3rem 1.2rem; font-size: .84rem; list-style: none; padding: 0; }
.model-taken li { margin-bottom: .3rem; }
.model-taken small { color: var(--grey); }
.model-leeg { color: var(--grey); font-size: .82rem; margin-bottom: .6rem; }
.model-rij-kop { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.model-mijlpaal > .model-rij-kop { border-bottom: none; padding-bottom: 0; }
.model-sleep-handle { cursor: grab; color: var(--grey); flex: none; line-height: 1; user-select: none; }
.model-sleep-actief { opacity: .4; }
.model-verwijder-knop {
  flex: none; border: none; background: none; color: var(--grey);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
}
.model-verwijder-knop:hover { color: #c0392b; }
.model-toevoegen-knop {
  border: 1.5px dashed var(--line); background: none; color: var(--grey);
  border-radius: var(--radius-s); padding: .35rem .8rem; font-size: .8rem;
  font-family: var(--font-head); cursor: pointer; margin: .3rem 0 1rem;
}
.model-toevoegen-knop:hover { border-color: var(--blue); color: var(--blue-dark); }
.model-mijlpalen-lijst { margin-bottom: 0; }
.data-tabel .veld { border-bottom: none; padding: 0; min-height: 0; }
.data-tabel .veld label:empty { display: none; }
.model-product-select { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .25rem .4rem; font-size: .84rem; max-width: 100%; }
.detail-kop a { color: var(--blue-dark); text-decoration: none; }
.veld a { color: var(--blue-dark); text-decoration: none; }
.veld a:hover { text-decoration: underline; }

.mapping-blok { border-top: 1px dashed var(--line); background: var(--bg-soft); padding: .9rem 1.4rem; display: none; }
.mapping-blok.open { display: block; }
.mapping-blok table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mapping-blok th { text-align: left; color: var(--grey); font-weight: 500; text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; padding: .3rem .4rem; }
.mapping-blok td { padding: .3rem .4rem; border-top: 1px solid var(--line); }
.mapping-blok code { font-family: Consolas, monospace; background: var(--blue-tint); color: var(--blue-dark); padding: .1rem .4rem; border-radius: 4px; font-size: .78rem; }

/* ---------- Dashboard: KPI-kaarten ---------- */
/* (opzet en kleuren staan verderop bij ".kpi-grid"/".kpi-kaart"; dit was een ongebruikt dubbel blok) */
.kpi-waarschuwing .kpi-getal { color: var(--orange); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  border: 2px solid var(--teal);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 100;
}
.toast.zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.fout { background: #B3261E; }

/* "Login als": bewust dezelfde felrode kleur als .toast.fout (het enige "let op"-rood in de huisstijl),
   zodat de balk blijft opvallen zolang je niet in je eigen account zit. */
.login-als-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #B3261E;
  color: #fff;
  padding: .55rem 1.6rem;
  font-size: .84rem;
}
.login-als-balk b { color: #fff; }
.login-als-balk .knop { flex: none; padding: .4rem 1rem; font-size: .8rem; background: #fff; color: #B3261E; border-color: #fff; }

/* ---------- Instellingen ---------- */
.inhoud-breed { grid-template-columns: 1fr; }
.instellingen-paneel { padding-bottom: .6rem; }
.instellingen-tabs {
  display: flex;
  gap: .3rem;
  padding: 0 1.3rem;
  border-bottom: 1px solid var(--line);
}
.instellingen-tab {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .88rem;
  color: var(--grey);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: .85rem .3rem;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s;
}
.instellingen-tab:hover { color: var(--navy); }
.instellingen-tab.actief { color: var(--navy); border-bottom-color: var(--teal); }
.instellingen-inhoud { padding: 1.3rem; }
.instellingen-uitleg { color: var(--grey); font-size: .88rem; margin-bottom: 1.2rem; max-width: 640px; }
.zoek-instellingen {
  display: block;
  width: min(360px, 100%);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-family: var(--font-body);
  font-size: .88rem;
  background: var(--bg-soft);
  margin-bottom: 1.2rem;
}
.zoek-instellingen:focus { outline: none; border-color: var(--blue); background: #fff; }

.automatisering-categorie h3 {
  font-size: .95rem;
  margin: 1.5rem 0 .6rem;
}
.automatisering-categorie:first-child h3 { margin-top: 0; }
.automatisering-kaart {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  margin-bottom: .6rem;
  overflow: hidden;
}
.automatisering-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  padding: .9rem 1.1rem;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}
.automatisering-kop:hover { background: var(--bg-soft); }
.automatisering-titel { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .92rem; display: block; }
.automatisering-kort { color: var(--grey); font-size: .82rem; margin-top: .2rem; }
.automatisering-kop-rechts { display: flex; align-items: center; gap: .7rem; flex: none; }
.automatisering-pijl { color: var(--grey); font-size: .8rem; transition: transform .2s; }
.automatisering-kaart.open .automatisering-pijl { transform: rotate(180deg); }
.chip-oranje { background: #FDEDE6; color: var(--orange-dark); }
.chip-grijs { background: #EEF1F3; color: var(--grey); }
/* Alleen gebruikt voor de jaarplanning-statussen (idee/plan/gepland/in_uitvoering). */
.chip-sky { background: #E7F3FC; color: #1B6FA8; }
.chip-teal { background: #E4F6F3; color: #167D6E; }
.chip-paars { background: #F1EAFB; color: #6A3FB5; }
.chip-amber { background: #FDF1DE; color: #B4750B; }
.automatisering-detail {
  display: none;
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.automatisering-kaart.open .automatisering-detail { display: block; }
.automatisering-label {
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--grey);
  margin-bottom: .4rem;
}
.automatisering-stappen { list-style: none; margin-bottom: 1rem; }
.automatisering-stappen li { display: flex; gap: .7rem; font-size: .88rem; padding-bottom: .6rem; }
.automatisering-stappen li:last-child { padding-bottom: 0; }
.automatisering-stapnr {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue-dark);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  display: grid;
  place-items: center;
}
.automatisering-opmerkingen { list-style: none; margin-bottom: 1rem; }
.automatisering-opmerkingen li { font-size: .84rem; color: var(--grey); padding-left: 1rem; position: relative; margin-bottom: .3rem; }
.automatisering-opmerkingen li::before { content: '\00b7'; position: absolute; left: .25rem; color: var(--blue); font-weight: 700; }
.automatisering-techniek { font-size: .78rem; color: var(--grey); font-family: Consolas, monospace; }

/* ---------- Werkprocessen ---------- */
.werkproces-kaart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
  flex-wrap: wrap;
}
.werkproces-info b { font-family: var(--font-head); color: var(--navy); display: block; font-size: .92rem; }
.werkproces-info small { color: var(--grey); font-size: .82rem; }
.werkproces-leeg { color: var(--grey); font-size: .88rem; padding: .5rem 0; }

/* ---------- Instellingen: Jaarplanning (visuele, alleen-lezen kwartaalgrid) ---------- */
.jaarplanning-jaarkeuze { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.jaarplanning-jaarkeuze label { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .85rem; }
.jaarplanning-jaarkeuze select {
  font-family: var(--font-body); font-size: .88rem; padding: .35rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; color: var(--navy);
}
/* Eén grid over alle kwartalen heen (niet per kwartaal een eigen grid) zodat
   de maandkolommen overal even breed zijn, ook als een maand veel meer tekst
   heeft dan de maand ernaast; minmax(0, 1fr) i.p.v. 1fr voorkomt dat lange,
   onafgebroken tekst een kolom breder trekt dan de rest. */
.jaarplanning-kwartalen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem .8rem; }
.jaarplanning-kwartaal-kop {
  grid-column: 1 / -1;
  font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .85rem;
  text-transform: uppercase; letter-spacing: .03em; margin: .4rem 0 0;
}
.jaarplanning-kwartaal-kop:first-child { margin-top: 0; }
.jaarplanning-kwartaal-kop span { color: var(--grey); font-weight: 500; text-transform: none; letter-spacing: normal; }
.jaarplanning-maand-kaart {
  min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: .7rem .8rem; background: #FBFDFE; min-height: 4.5rem;
}
.jaarplanning-maand-naam {
  font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .84rem;
  text-transform: capitalize; margin-bottom: .5rem;
}
.jaarplanning-maand-leeg { color: var(--grey); font-size: .78rem; margin: 0; }
.jaarplanning-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: .45rem .6rem; margin-bottom: .4rem; overflow-wrap: break-word;
}
.jaarplanning-item:last-child { margin-bottom: 0; }
.jaarplanning-item b { display: block; font-family: var(--font-body); font-weight: 500; color: var(--navy); font-size: .82rem; margin-bottom: .3rem; }
.jaarplanning-item-omschrijving { margin: 0 0 .4rem; color: var(--grey); font-size: .76rem; line-height: 1.35; }
.jaarplanning-onvolledig {
  margin-top: 1.1rem; border: 1px dashed var(--line); border-radius: var(--radius-s); padding: .8rem 1rem;
}
.jaarplanning-onvolledig b { font-family: var(--font-head); color: var(--navy); font-size: .85rem; display: block; margin-bottom: .5rem; }
.jaarplanning-onvolledig-items { display: flex; flex-wrap: wrap; gap: .5rem; }
.jaarplanning-chip-klein {
  display: inline-block; background: var(--blue-tint); color: var(--navy);
  border-radius: var(--radius-s); padding: .3rem .6rem; font-size: .8rem;
}
@media (max-width: 900px) {
  .jaarplanning-kwartalen { grid-template-columns: 1fr; }
  .jaarplanning-kwartaal-kop { grid-column: 1; }
}

/* ---------- Instellingen: Entiteiten (kleurbeheer) ---------- */
.entiteit-rij-label { display: flex; align-items: center; gap: .6rem; }
.entiteit-rij-label b { font-family: var(--font-head); color: var(--navy); font-size: .92rem; }
.entiteit-kleur-invoer { display: flex; align-items: center; gap: .5rem; }
.entiteit-kleur-picker { width: 2.4rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-s); cursor: pointer; background: none; }
.entiteit-kleur-hex { width: 5.5rem; border: 1px solid var(--line); border-radius: var(--radius-s); padding: .35rem .5rem; font-family: Consolas, monospace; font-size: .82rem; color: var(--ink); }

/* ---------- Adresblok (opgemaakte tekst + opvouwbare velden + mini-kaart) ---------- */
.veld-adres { grid-column: 1 / -1; padding: .5rem 0 .9rem; border-bottom: 1px solid var(--line); }
.veld-adres-kop { display: flex; align-items: baseline; gap: .7rem; }
.veld-adres-kop label { flex: 0 0 42%; font-size: .8rem; color: var(--grey); font-weight: 500; }
.veld-adres-weergave { flex: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.veld-adres-tekst { font-size: .84rem; color: var(--ink); line-height: 1.5; }
.adres-potlood { flex: none; border: none; background: none; color: var(--grey); cursor: pointer; font-size: .85rem; padding: 0 .2rem; transition: color .15s; }
.adres-potlood:hover { color: var(--blue-dark); }
.veld-adres-velden { margin: .6rem 0 0; padding: .7rem .8rem; background: var(--bg-soft); border-radius: var(--radius-s); }
.veld-adres-velden .veld { border-bottom: 1px solid var(--line); }
.veld-adres-velden .veld:last-child { border-bottom: none; }
.mini-kaart {
  height: 140px; margin-top: .6rem; border-radius: var(--radius-s); border: 1px solid var(--line);
  background: #e9eef2; z-index: 0;
}
.mini-kaart-leeg {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  color: var(--grey); font-size: .78rem;
}
.mini-kaart-leeg .adres-geocode-knop {
  border: 1.5px solid var(--line); background: #fff; color: var(--navy); border-radius: var(--pill);
  padding: .3rem .8rem; font-size: .78rem; font-family: inherit; cursor: pointer;
}
.mini-kaart-leeg .adres-geocode-knop:hover { border-color: var(--teal); }
.mini-kaart-leeg .adres-geocode-knop:disabled { opacity: .6; cursor: default; }

/* ---------- Statuspad (bestelling) ---------- */
.statuspad { display: flex; align-items: flex-start; margin: 0 0 1.2rem; }
.statuspad-stap { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 74px; }
.statuspad-stip {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: .68rem; color: #fff; flex: none;
}
.statuspad-stap.is-klaar .statuspad-stip { background: var(--teal); border-color: var(--teal); }
.statuspad-stap.is-huidig .statuspad-stip { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-tint); }
.statuspad-label { font-size: .74rem; color: var(--grey); }
.statuspad-stap.is-klaar .statuspad-label, .statuspad-stap.is-huidig .statuspad-label { color: var(--navy); font-weight: 600; }
.statuspad-lijn { flex: 1; height: 2px; background: var(--line); margin: 11px -6px 0; }
.statuspad-lijn.is-klaar { background: var(--teal); }
.statuspad.is-geannuleerd { align-items: center; gap: .6rem; background: #FDEDE6; border-radius: var(--radius-s); padding: .6rem .9rem; }
.statuspad-kruis { width: 22px; height: 22px; border-radius: 50%; background: var(--orange-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; flex: none; }
.statuspad-tekst { font-size: .84rem; font-weight: 600; color: var(--orange-dark); }

/* ---------- Commission payout ---------- */
.cu-blok { padding: .3rem 0 1.6rem; }
.cu-uitleg { color: var(--grey); font-size: .84rem; margin: 0 0 .9rem; }
.cu-velden { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: .9rem; }
.veld-los { display: flex; flex-direction: column; gap: .3rem; }
.veld-los label { font-size: .78rem; color: var(--grey); font-weight: 500; }
.veld-los input[type="date"] { border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: .4rem .6rem; font: inherit; font-size: .84rem; color: var(--navy); }
.cu-zoek-wrap { flex: 1; min-width: 220px; }
.cu-zoek-wrap .veld-zoek { display: block; }
.cu-zoek-wrap .veld-input { width: 100%; border-color: var(--line); border-width: 1.5px; padding: .4rem .6rem; }
.cu-resultaat { margin-top: 1rem; }
.cu-samenvatting { font-size: .9rem; margin: 0 0 .7rem; }
.cu-fout { color: var(--orange-dark); font-size: .84rem; }
.cu-leeg { color: var(--grey); font-size: .84rem; }

@media (max-width: 1100px) {
  .inhoud { grid-template-columns: 1fr; }
  .veld-grid { grid-template-columns: repeat(2, 1fr); }
  .zijbalk { display: none; }
}

/* ---------- Extra entiteiten (klant) ---------- */
.entiteit-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--blue-tint);
  color: var(--blue-dark);
  border-radius: 999px;
  padding: .2rem .3rem .2rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  margin: 0 .35rem .35rem 0;
}
.entiteit-badge-x { border: none; background: none; color: var(--blue-dark); cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 .2rem; }
.entiteit-badge-x:hover { color: var(--orange); }
.entiteit-toevoegen-select {
  border: 1.5px dashed var(--line);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .78rem;
  color: var(--grey);
  background: #fff;
}

/* ---------- Inspector (alleen beheer) ---------- */
#inspector-knop {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 40;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: .8rem .35rem;
  font-size: .85rem;
  cursor: pointer;
  box-shadow: -4px 0 12px -6px rgba(0,0,0,.3);
}
#inspector-knop:hover { background: var(--navy-2); }
#inspector-paneel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 28px -14px rgba(10,46,64,.3);
  z-index: 50;
  overflow-y: auto;
  padding: 1.1rem 1.3rem;
  transition: right .2s ease;
}
#inspector-paneel.open { right: 0; }
.inspector-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.inspector-kop h3 { font-size: 1rem; }
#inspector-sluiten { border: none; background: none; font-size: 1.3rem; color: var(--grey); cursor: pointer; line-height: 1; }
#inspector-sluiten:hover { color: var(--orange); }
.inspector-rij { display: flex; gap: .6rem; padding: .32rem 0; border-bottom: 1px solid var(--line); font-family: 'Courier New', monospace; font-size: .72rem; }
.inspector-key { flex: 0 0 46%; color: var(--grey); word-break: break-all; }
.inspector-val { flex: 1; color: var(--ink); word-break: break-all; }
.inspector-rij-bewerkbaar { cursor: pointer; border-radius: 4px; }
.inspector-rij-bewerkbaar:hover { background: var(--blue-tint); }
.inspector-rij-bewerkbaar:hover .inspector-val { color: var(--blue-dark); }
.inspector-input {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: .72rem;
  border: 1.5px solid var(--blue);
  border-radius: 4px;
  padding: .1rem .3rem;
  min-width: 0;
}
#inspector-zoek {
  display: block;
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .45rem .9rem;
  font-size: .82rem;
  margin-bottom: .7rem;
}

/* Contact gehad-formulier op het traject (proactieve communicatie, stap 1) */
.contact-vorm { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: .3rem 0 1rem; }
.contact-vorm label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; }
.contact-vorm input, .contact-vorm select { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .35rem .5rem; font-size: .88rem; font-family: inherit; background: #fff; }
.contact-vorm input[name="notitie"] { min-width: 240px; }

/* Info-knop met uitlegpopover (proactieve communicatie-dashboard) */
.info-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin-left: .2rem;
  border: 1px solid var(--grey); color: var(--grey); background: none;
  font-size: .68rem; line-height: 1; cursor: pointer; vertical-align: middle; padding: 0;
}
.info-knop:hover, .info-knop.actief { border-color: var(--blue); color: var(--blue-dark); }
.info-popover {
  position: fixed; z-index: 60; max-width: 260px; background: var(--navy);
  color: #fff; font-size: .8rem; line-height: 1.4; padding: .55rem .7rem;
  border-radius: var(--radius-s); box-shadow: var(--shadow); display: none;
}
.info-popover.zichtbaar { display: block; }

/* Wie-kiezer voor het hele dashboard (KPI's, taken, communicatie), zelfde stijl als bij Activiteiten */
#dashboard-wie-select { flex: none; width: auto; min-width: 160px; padding: .4rem .6rem; cursor: pointer; }

/* Afvinkbare taak in de dashboard-aandachtlijst */
.taak-aandacht-info { display: flex; align-items: center; gap: .6rem; }
.taak-aandacht-info .taak-status { cursor: pointer; font-size: 1.05rem; }
.taak-aandacht-info .taak-status:hover { color: var(--blue-dark); }

/* Draaiende spinner in .laden-placeholders, zodat wisselen van filter/adviseur
   herkenbaar 'aan het laden' is i.p.v. dat het scherm lijkt vast te lopen */
.spinner {
  display: inline-block; width: 13px; height: 13px; margin-right: .5rem;
  border: 2px solid var(--line); border-top-color: var(--blue);
  border-radius: 50%; vertical-align: -2px;
  animation: spinner-draaien .7s linear infinite;
}
@keyframes spinner-draaien { to { transform: rotate(360deg); } }

/* Klanten-statusfilter naast de teller in de paneelkop */
#klanten-status-select { flex: none; width: auto; min-width: 150px; cursor: pointer; }

/* Concept-klaarzetten-knoppen in de communicatielijsten (dashboard + traject) */
.knop-mini { padding: .22rem .6rem; font-size: .74rem; white-space: nowrap; }
.communicatie-rij-acties { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }


/* ---------- O-Care: aanvullingen ---------- */
.zijbalk .logo-blok img.logo { width: 100%; max-width: 150px; display: block; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
/* Uitlijning van de getallen (8-9-2026). Titels en subregels lopen in lengte uiteen ("Omzet totaal"
   versus "Commissie nog te betalen", "2 regels" versus "exclusief concept en geannuleerd"), waardoor
   de getallen op de kaarten in een rij niet op dezelfde hoogte stonden. Eerdere pogingen (vaste
   min-height op de titel, daarna margin-top:auto op het getal) losten dat maar half op: het getal
   ging dan meeschuiven met het aantal regels van de subregel eronder.
   Nu deelt elke kaart hetzelfde rijenraster als het grid (grid-template-rows: subgrid over drie
   rijen: titel, getal, subregel). De hoogte van elke rij is die van de langste in die rij, dus
   titels, getallen en subregels staan altijd onderling op een lijn - ongeacht hoeveel regels ze
   innemen. Kaarten zonder subregel laten de derde rij simpelweg leeg.
   De flex-opzet blijft eronder staan als terugval voor browsers zonder subgrid. */
.kpi-kaart { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-kaart); transition: border-color .15s, transform .15s; }
.kpi-kaart:hover { border-color: var(--teal); transform: translateY(-1px); }
.kpi-kaart small { display: block; color: var(--grey); font-size: .78rem; line-height: 1.35; margin-bottom: .3rem; }
.kpi-kaart b { font-family: var(--font-head); font-size: 1.6rem; font-weight: 600; color: var(--navy); margin-top: auto; line-height: 1.2; }
.kpi-kaart .kpi-sub { display: block; color: var(--grey); font-size: .78rem; margin-top: .25rem; line-height: 1.35; }
@supports (grid-template-rows: subgrid) {
  /* De kaart zet zijn eigen rij-afstand op nul en laat de ruimte tussen titel, getal en subregel uit
     de marges van die elementen komen (net als in de terugval hierboven, dus dezelfde compacte kaart).
     De rij-afstand van het grid zelf blijft staan: die maakt de ruimte tussen twee rijen kaarten. */
  .kpi-kaart { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  .kpi-kaart small { align-self: start; }
  .kpi-kaart b { align-self: start; margin-top: 0; }
  .kpi-kaart .kpi-sub { align-self: start; }
}
.tijdlijn { display: flex; flex-direction: column; gap: .6rem; }
.tijdlijn-item { display: grid; grid-template-columns: 34px 1fr; gap: .7rem; padding: .7rem .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); }
.tijdlijn-icoon { width: 34px; height: 34px; border-radius: 50%; background: var(--blue-tint); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.tijdlijn-item b { display: block; font-size: .9rem; }
.tijdlijn-item small { color: var(--grey); font-size: .78rem; }
.tijdlijn-item p { margin: .3rem 0 0; font-size: .86rem; white-space: pre-wrap; }
.tijdlijn-vorm { display: flex; gap: .5rem; margin-bottom: .8rem; }
.tijdlijn-vorm textarea { flex: 1; min-height: 60px; border: 1px solid var(--line); border-radius: var(--radius-s); padding: .5rem .7rem; font: inherit; font-size: .88rem; }
.tijdlijn-vorm select { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .4rem .5rem; font: inherit; font-size: .85rem; }
.filter-select { border: 1.5px solid var(--line); border-radius: var(--pill); padding: .45rem .9rem; font: inherit; font-size: .85rem; color: var(--navy); background: #fff; margin-left: auto; }
.mapping-groep h3 { margin: 1.2rem 0 .5rem; }
.mapping-tabel td, .mapping-tabel th { font-size: .82rem; }
.chip-teal { background: var(--blue-tint); color: var(--blue-dark); }
.datamodel-tellers { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.datamodel-tellers span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; }

/* ---------- Dashboard: grafieken (nagebouwd op de Salesforce-dashboards per land, alles in CSS, geen library) ---------- */
.dashboard-grafieken { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
@media (max-width: 900px) { .dashboard-grafieken { grid-template-columns: 1fr; } }
.grafiek-kaart { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-kaart); }
.grafiek-kaart h3 { margin: 0 0 .9rem; font-family: var(--font-head); font-size: .92rem; color: var(--navy); font-weight: 600; }
.grafiek-kaart.breed { grid-column: 1 / -1; }
.grafiek-leeg { color: var(--grey); font-size: .85rem; padding: 1rem 0; text-align: center; }

.donut-wrap { display: flex; align-items: center; gap: 1.2rem; }
.donut { width: 110px; height: 110px; border-radius: 50%; flex: none; }
.donut-legenda { flex: 1; display: flex; flex-direction: column; gap: .4rem; font-size: .82rem; min-width: 0; }
.donut-legenda-item { display: flex; align-items: center; gap: .5rem; }
.donut-legenda-dot { width: .62rem; height: .62rem; border-radius: 50%; flex: none; }
.donut-legenda-item span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legenda-item b { color: var(--navy); }

.barlijst { display: flex; flex-direction: column; gap: .55rem; }
.barlijst-rij { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: .6rem; font-size: .82rem; }
.barlijst-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlijst-bar-track { background: var(--bg-soft); border-radius: 999px; height: .55rem; overflow: hidden; }
.barlijst-bar { height: 100%; border-radius: 999px; }
.barlijst-waarde { text-align: right; color: var(--grey); font-variant-numeric: tabular-nums; }

.maandgrafiek { display: flex; align-items: flex-end; gap: .9rem; height: 150px; padding-top: .5rem; }
.maandgrafiek-kolom { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; height: 100%; justify-content: flex-end; }
.maandgrafiek-staven { display: flex; gap: .35rem; align-items: flex-end; height: 100%; }
.maandgrafiek-staaf-wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .2rem; height: 100%; }
.maandgrafiek-aantal { font-size: .72rem; color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.maandgrafiek-staaf { width: .8rem; border-radius: 3px 3px 0 0; min-height: 2px; }
.maandgrafiek-staaf.nieuw { background: var(--blue); }
.maandgrafiek-staaf.opgezegd { background: var(--negatief); }
.maandgrafiek-maand { font-size: .72rem; color: var(--grey); }
.maandgrafiek-legenda { display: flex; gap: 1.2rem; font-size: .78rem; color: var(--grey); margin-top: .6rem; }
.maandgrafiek-legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.maandgrafiek-legenda i { width: .6rem; height: .6rem; border-radius: 2px; display: inline-block; }

/* ---------- Dealerkaart: KPI-blok bovenaan een tabblad (dealer-kpis.js) ---------- */
/* Zelfde bouwstenen als het dashboard (.kpi-kaart, .grafiek-kaart, .barlijst, .donut, .maandgrafiek),
   maar een maat kleiner: een tabblad is smaller dan het dashboard en de lijst eronder moet nog in beeld
   passen. Een paneel zonder inhoud (dealer zonder bestellingen bijvoorbeeld) valt helemaal weg. */
.detail-kpis { margin-bottom: 1.4rem; }
.detail-kpis:empty { display: none; }
.detail-kpis .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.detail-kpis .kpi-kaart { padding: .8rem .9rem; }
.detail-kpis .kpi-kaart small { font-size: .74rem; }
.detail-kpis .kpi-kaart b { font-size: 1.25rem; }
.detail-kpis .kpi-kaart .kpi-sub { font-size: .72rem; }
.detail-kpis-grafieken { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1150px) { .detail-kpis-grafieken { grid-template-columns: 1fr; } }
.detail-kpis .grafiek-kaart { padding: 1rem 1.1rem; }
.detail-kpis .grafiek-kaart h3 { font-size: .86rem; margin-bottom: .8rem; }
.detail-kpis .maandgrafiek { height: 118px; gap: .5rem; }
.detail-kpis .donut { width: 92px; height: 92px; }
.kpi-fout { color: var(--grey); font-size: .82rem; margin-bottom: .8rem; }
/* Enkelvoudige staafgrafiek: hergebruikt de maandgrafiek-opzet, maar met bredere staven omdat er per
   kolom maar een staaf staat (omzet of commissie per jaar). */
.staafgrafiek .maandgrafiek-staaf { width: 1.5rem; }
/* Verhoudingsbalk: een balkje dat twee of drie delen tegen elkaar afzet, met de aantallen eronder. */
.verhouding { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bg-soft); margin-bottom: .6rem; }
.verhouding-legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--grey); }
.verhouding-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.verhouding-legenda i { width: .55rem; height: .55rem; border-radius: 2px; display: inline-block; flex: none; }

/* ---------- E-mail (composer-module + tabblad E-mails op kaarten) ---------- */
/* De losse composer (email-composer.css) leest zijn kleuren via deze variabelen, zodat hij de huisstijl volgt. */
:root {
  --ec-primair: var(--navy);
  --ec-accent: var(--blue);
  --ec-accent-donker: var(--blue-dark);
  --ec-lijn: var(--line);
  --ec-tekst: var(--ink);
  --ec-grijs: var(--grey);
  --ec-font: var(--font-body);
  --ec-werkbalk-bg: var(--bg-soft);
}
.email-acties { display: flex; justify-content: flex-end; margin-bottom: .6rem; }
.email-acties .knop-klein { margin-left: 0; }
.email-tabel .email-richting { width: 1.6rem; color: var(--grey); font-size: 1rem; text-align: center; }
.email-tabel tr.actief td { background: var(--blue-tint); }
.email-weergave { margin-top: .6rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; overflow: hidden; }
.email-weergave-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.email-weergave-kop b { font-size: .95rem; }
.email-weergave-kop small { display: block; color: var(--grey); font-size: .78rem; margin-top: .25rem; }
.email-weergave-kop .knop-klein { margin-left: 0; flex: none; }
.email-fout { margin: .4rem 0 0; color: #b3341a; font-size: .82rem; }
.email-weergave .ec-weergave, .email-weergave .ec-weergave-tekst { padding: 1rem; }
#activiteit-email { margin-bottom: 1rem; }
.sjabloon-voorbeeld { grid-column: 1 / -1; padding: .9rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); }
.detail-kop-acties .email-knop:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Kaart (dealers en prospects, heatmap, dichtbij mij) ---------- */
.kaart-modus { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--pill); overflow: hidden; margin-left: auto; }
.kaart-modus button { border: none; background: #fff; padding: .45rem 1rem; font: inherit; font-size: .85rem; font-weight: 600; color: var(--navy); cursor: pointer; }
.kaart-modus button + button { border-left: 1.5px solid var(--line); }
.kaart-modus button.actief { background: var(--navy); color: #fff; }
.kaart-werkbalk { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .8rem 1.3rem 0; }
.kaart-werkbalk .filter-select { margin-left: 0; }
.kaart-werkbalk-scheiding { flex: 1; min-width: .5rem; }
.kaart-plaats { display: inline-flex; }
.kaart-plaats input { border: 1.5px solid var(--line); border-right: none; border-radius: var(--pill) 0 0 var(--pill); padding: .45rem .9rem; font: inherit; font-size: .85rem; width: 190px; color: var(--navy); }
.kaart-plaats input:focus { outline: none; border-color: var(--navy); }
.kaart-plaats .knop { border-radius: 0 var(--pill) var(--pill) 0; }
#kaart-straal-wrap { display: inline-flex; gap: .5rem; align-items: center; }
.kaart-body { padding: .9rem 1.3rem 1.3rem; }
.kaart-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; }
.kaart-wrap { position: relative; }
.kaart-canvas { height: calc(100vh - 290px); min-height: 420px; border-radius: var(--radius-s); border: 1px solid var(--line); z-index: 0; background: #e9eef2; }
.kaart-legenda { position: absolute; left: 12px; bottom: 12px; z-index: 700; background: rgba(255, 255, 255, .95); border-radius: var(--radius-s); padding: .45rem .8rem; font-size: .76rem; font-weight: 600; color: var(--navy); box-shadow: var(--shadow-kaart); display: flex; gap: .9rem; flex-wrap: wrap; pointer-events: none; }
.kaart-legenda > span { display: inline-flex; align-items: center; gap: .35rem; }
.kaart-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(29, 51, 86, .15); }
.kaart-dot-mij { background: var(--negatief); }
.kaart-mijn-icoon span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--negatief); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(224, 87, 91, .3); }
.kaart-zijlijst { border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 290px); min-height: 420px; background: #fff; }
.kaart-lijst-kop { padding: .6rem .9rem; font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--navy); background: var(--bg-soft); border-bottom: 1px solid var(--line); flex: none; }
#lijst-kaart { overflow-y: auto; flex: 1; }
.kaart-lijst-item { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line); padding: .55rem .9rem; cursor: pointer; font: inherit; color: var(--ink); }
.kaart-lijst-item:hover { background: var(--bg-soft); }
.kaart-lijst-item.actief { background: var(--teal-tint); }
.kaart-lijst-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kaart-lijst-tekst b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kaart-lijst-tekst small { color: var(--grey); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kaart-afstand { font-size: .76rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.kaart-melding { margin-top: .8rem; font-size: .84rem; color: var(--grey); }
.kaart-melding summary { cursor: pointer; color: var(--navy); }
.kaart-melding p { margin: .6rem 0 .2rem; }
.kaart-melding ul { margin: .4rem 0 0 1.2rem; columns: 2; }
.kaart-melding a { color: var(--navy); }
.knop-klein { padding: .3rem .8rem; font-size: .78rem; }
/* Leaflet en markercluster in de huisstijl. */
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content-wrapper { border-radius: var(--radius-s); box-shadow: var(--shadow); }
.leaflet-popup-content { margin: .9rem 1rem; font-size: .84rem; line-height: 1.4; }
.kaart-popup b { font-family: var(--font-head); font-size: .95rem; color: var(--navy); display: block; margin-bottom: .3rem; }
.kaart-popup-chips { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .5rem; }
.kaart-popup-adres { color: var(--grey); margin-bottom: .3rem; }
.kaart-popup-afstand { font-weight: 600; color: var(--navy); margin-top: .3rem; }
.kaart-popup-acties { display: flex; gap: .4rem; margin-top: .7rem; }
.kaart-popup-acties .knop { text-decoration: none; }
.leaflet-tooltip { font-family: var(--font-body); font-size: .8rem; border-radius: 8px; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(43, 203, 167, .35); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 12px; }
@media (max-width: 900px) {
  .kaart-layout { grid-template-columns: 1fr; }
  .kaart-canvas { height: 55vh; min-height: 320px; }
  .kaart-zijlijst { max-height: 40vh; min-height: 0; }
  .kaart-melding ul { columns: 1; }
  .kaart-plaats input { width: 150px; }
}

/* ---------- Marketing: e-mailtemplates (volledige HTML-mails in een afgeschermd iframe) ---------- */
.mt-voorbeeld { grid-column: 1 / -1; padding: .6rem; background: #e9ecf0; border: 1px solid var(--line); border-radius: var(--radius-s); }
.mt-voorbeeld-balk { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; font-size: .82rem; color: var(--grey); }
.mt-voorbeeld-balk > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-breedte { display: inline-flex; flex-shrink: 0; margin-left: auto; border: 1.5px solid var(--line); border-radius: var(--pill); overflow: hidden; background: #fff; }
.mt-breedte button { border: none; background: #fff; padding: .3rem .8rem; font: inherit; font-size: .78rem; font-weight: 600; color: var(--navy); cursor: pointer; }
.mt-breedte button + button { border-left: 1.5px solid var(--line); }
.mt-breedte button.actief { background: var(--navy); color: #fff; }
.mt-voorbeeld-frame { display: block; width: 100%; height: 600px; margin: 0 auto; border: none; border-radius: 4px; background: #fff; transition: width .2s ease; }
.mt-voorbeeld.mt-mobiel .mt-voorbeeld-frame { width: 390px; }
.mt-velden { display: flex; flex-wrap: wrap; gap: .3rem; }
.mt-velden code { padding: .1rem .45rem; font-size: .78rem; background: #f2f4f7; border: 1px solid var(--line); border-radius: 4px; color: var(--navy); }