/* assets/style.css */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  background: #f4f6f4;
  color: #222;
}

/* --- Login / setup ------------------------------------------------------ */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f4f6f4;
}

.login-box {
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 360px;
}

.login-box h1 {
  font-size: 20px;
  margin: 0 0 20px 0;
  color: #222;
}

.login-box .hint {
  font-size: 13px;
  color: #888;
  margin-top: -8px;
  margin-bottom: 20px;
}

.login-box label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 4px 0;
  color: #444;
}

.login-box input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.login-box button {
  width: 100%;
  margin-top: 22px;
  padding: 10px;
  background: #5cb12f;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.login-box button:hover { background: #4c9626; }

.alert {
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 14px;
}

.alert-error { background: #fdecea; color: #a33a2e; border: 1px solid #f5c6c0; }
.alert-success { background: #eaf7e6; color: #2e7d1f; border: 1px solid #c6e8bd; }
/*
 * ALERT-WARNING WERD AL GEBRUIKT EN BESTOND NIET (bijgezet 14/09/2026).
 * admin/presentation_blocks.php schrijft al sinds jaar en dag
 * <div class="alert alert-warning"> voor een ontbrekende tabel; zonder deze
 * regel kreeg dat blok alleen de padding van .alert en verder geen kleur - het
 * zag er dus uit als gewone tekst, precies daar waar er iets aan de hand is.
 * Geel en niet rood: een waarschuwing is geen fout. Het KPI-dashboard gebruikt
 * hem nu ook voor een achterlopende sync en voor een rapport dat on hold staat.
 */
.alert-warning { background: #fdf6e3; color: #8a6d1f; border: 1px solid #f0e0b0; }

/* --- Layout na aanmelden ------------------------------------------------ */

.topbar {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 700;
  font-size: 16px;
  color: #222;
  text-decoration: none;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}

.topbar nav a { color: #5cb12f; text-decoration: none; font-weight: 600; }
.topbar nav a:hover { text-decoration: underline; }
.user-info { color: #888; }

/* DE BALK MAG AFBREKEN OP EEN SMAL SCHERM.
   Ze deed dat niet: .topbar-inner en nav zijn allebei flex zonder wrap, en op
   een telefoon liep de rij (merk, Beheer, statusbolletje, "Aangemeld als ...",
   Afmelden) een stuk buiten het scherm - de pagina kreeg daardoor een
   horizontale schuifbalk. Dat bestond al, maar het beheermenu is breder dan de
   losse link die er stond, dus het werd erger en hoort hier rechtgezet. */
@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; gap: 8px 14px; }
  .topbar nav { flex-wrap: wrap; gap: 6px 14px; }
}

/* --- Het beheermenu in de balk ------------------------------------------
   AANWIJZEN OPENT, KLIKKEN GAAT NAAR DE BEHEERPAGINA. Het was eerst een
   <details>, en dan kostte de beheerpagina twee klikken: één om open te
   klappen, één om te navigeren. Nu is 'Beheer' een gewone link en klapt het
   paneel open op :hover (muis) of :focus-within (toetsenbord). Nog altijd geen
   javascript - dat is een afspraak, zie de uitleg in includes/header.php.

   .topbar krijgt GEEN overflow, en de balk zelf geen z-index-valstrik: het
   paneel hangt absoluut onder de knop en moet over de pagina heen vallen. */
.topbar { position: relative; z-index: 20; }

.beheermenu { position: static; display: inline-block; }
.topbar nav a.beheermenu-knop {
  color: #5cb12f;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  text-decoration: none;
  position: relative;
}
.topbar nav a.beheermenu-knop::after {
  content: " \25BE";
  font-size: 11px;
  color: #8a9199;
}
.topbar nav a.beheermenu-knop:hover { background: #eef4e9; text-decoration: none; }
.beheermenu:focus-within > .beheermenu-knop { background: #eef4e9; }
.beheermenu-knop:focus-visible { outline: 2px solid #5cb12f; outline-offset: 1px; }

/* DE OVERBRUGGING. Tussen de onderkant van de knop en de bovenkant van het
   paneel zit de onderste padding van de balk (14 px). Zonder iets in die strook
   verlaat de muis .beheermenu op weg naar beneden, valt het paneel dicht, en
   heb je een menu dat je niet kunt bereiken. Dit onzichtbare blokje hangt
   precies onder de knop en hoort bij .beheermenu, dus :hover blijft gelden.
   Alleen onder de knop en niet over de hele balk: anders slikt het de klikken
   op het statusbolletje en Afmelden op. */
.beheermenu-knop::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 100%;
  height: 16px;
}

/* DICHT, MAAR NIET WEGGEGOOID. Het paneel wordt met visibility weggezet en niet
   met de andere manier die je hier zou verwachten: die zou de grid-opmaak
   hieronder in twee regels moeten splitsen. En visibility haalt de links óók uit
   de tabvolgorde zolang het paneel dicht staat - tab je naar 'Beheer', dan maakt
   :focus-within het zichtbaar en loopt de volgende Tab er gewoon in. */
.beheermenu-paneel {
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease-out;
  position: absolute;
  top: 100%;
  right: 24px;
  left: 24px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 14px 30px rgba(20, 30, 12, .13);
  padding: 20px 22px 14px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px 24px;
  align-items: start;
}
.beheermenu:hover > .beheermenu-paneel,
.beheermenu:focus-within > .beheermenu-paneel {
  visibility: visible;
  opacity: 1;
}
.beheermenu-kop {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a9199;
  font-weight: 700;
  border-bottom: 1px solid #eceff1;
  padding-bottom: 6px;
  margin: 0 0 7px;
}
/* .topbar nav a KLEURT ALLES IN DE BALK GROEN, en die selector is specifieker
   dan .beheermenu-groep a. Zonder .topbar ervoor staan alle drieentwintig
   menu-items in het groen - leesbaar, maar niets springt er nog uit, en groen
   betekent in dit dashboard "dit is een link die iets doet". */
.topbar .beheermenu-groep a {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: 4px;
}
.topbar .beheermenu-groep a:hover { background: #eef4e9; color: #2f6a17; text-decoration: none; }
.topbar .beheermenu-groep a:focus-visible { outline: 2px solid #5cb12f; outline-offset: -1px; }
.beheermenu-voet {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid #eceff1;
  font-size: 12.5px;
}
.topbar .beheermenu-voet a { color: #656d76; font-weight: 400; }

/* Onder deze breedte passen vijf kolommen niet meer naast elkaar. Het paneel
   wordt dan een gewone lijst onder de knop, met de groepen onder elkaar - een
   menu dat op een tablet alleen met een muis te bedienen is, is geen menu. */
@media (max-width: 1000px) {
  .beheermenu-paneel {
    grid-template-columns: repeat(2, 1fr);
    left: 12px;
    right: 12px;
    max-height: 70vh;
    overflow-y: auto;
  }
}
@media (max-width: 560px) {
  .beheermenu-paneel { grid-template-columns: 1fr; }
}

/* --- De beheerstrook op het klantendashboard ----------------------------
   Groen omrand en groen gevlakt, zodat ze zich onderscheidt van alles wat de
   klant wél te zien krijgt. Dat is niet alleen mooi: wie een screenshot maakt,
   moet in één oogopslag zien dat dit er niet op hoort. */
.beheerstrook {
  border: 1px solid #cfe0c2;
  border-left: 3px solid #5cb12f;
  background: #f4f9f0;
  border-radius: 6px;
  padding: 13px 16px 15px;
  margin: 0 0 22px;
}
.beheerstrook-kop {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.beheerstrook-kop b {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2f6a17;
}
.beheerstrook-kop span { font-size: 11.5px; color: #8a9199; }
.beheerstrook-links { display: flex; flex-wrap: wrap; gap: 7px; }
.beheerstrook-links a {
  font-size: 12.5px;
  text-decoration: none;
  color: #2f6a17;
  background: #eef4e9;
  border: 1px solid #d7e5cc;
  border-radius: 999px;
  padding: 4px 12px;
}
.beheerstrook-links a:hover { background: #e3eed9; }
.beheerstrook-links a:focus-visible { outline: 2px solid #5cb12f; outline-offset: 1px; }

/* --- De beheerpagina: groepen, kaarten, zoekveld ------------------------- */
.bm-zoekbalk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 26px;
}
.bm-zoeklabel {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a9199;
  font-weight: 700;
}
.bm-zoekveld {
  font: inherit;
  font-size: 13.5px;
  padding: 8px 12px;
  width: 340px;
  max-width: 100%;
  border: 1px solid #d0d7de;
  border-radius: 5px;
}
.bm-zoekveld:focus-visible { outline: 2px solid #5cb12f; outline-offset: 1px; }
.bm-teller { font-size: 12.5px; color: #8a9199; font-variant-numeric: tabular-nums; }

.bm-groep { margin: 0 0 26px; }
.bm-groep[hidden] { display: none; }
.bm-groepkop {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a9199;
  font-weight: 700;
  border-bottom: 1px solid #e4e7ea;
  padding-bottom: 7px;
  margin: 0 0 14px;
}

.bm-kaarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* DE HELE KAART IS DE LINK. Op de oude pagina was alleen de groene knop
   klikbaar, terwijl de titel het enige was waaraan je het scherm herkende. */
.bm-kaart {
  display: block;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 7px;
  padding: 14px 16px 15px;
  text-decoration: none;
  color: #222;
}
.bm-kaart:hover {
  border-color: #bcd9a8;
  background: #fbfdfa;
  text-decoration: none;
}
.bm-kaart:focus-visible { outline: 2px solid #5cb12f; outline-offset: 1px; }
.bm-kaart[hidden] { display: none; }
.bm-kaart b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.bm-kaart i {
  font-style: normal;
  display: block;
  font-size: 12.5px;
  color: #656d76;
  line-height: 1.4;
}

.bm-leeg { color: #656d76; font-size: 13.5px; }
.bm-voet {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid #e4e7ea;
  font-size: 12.5px;
  color: #8a9199;
  max-width: 76ch;
}

@media (max-width: 900px) {
  .bm-kaarten { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bm-kaarten { grid-template-columns: 1fr; }
}

.content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
}

.content h1 { font-size: 22px; margin: 0 0 4px 0; }
.content .subtitle { color: #888; font-size: 13px; margin-bottom: 28px; }

/* --- Dashboard-kaarten (zelfde stijl als de PDF/HTML-widgets) ---------- */

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 18px;
  min-width: 280px;
  flex: 1 1 300px;
}

.card .icon { flex-shrink: 0; padding-top: 2px; }

/* De tekstkolom van een kaart MOET kunnen krimpen.
   Zonder min-width:0 weigert een flex-item smaller te worden dan zijn breedste
   kind, en dat kind is hier een breakdown-pil met white-space:nowrap. Gevolg:
   lange pillen ("194 van 194 content-item(s) verwerkt...", "Geen recht op
   interesseleads") duwden zichzelf BUITEN de witte kaart in plaats van af te
   breken. Zelfde valkuil - en dezelfde oplossing - als bij .table-column
   hieronder. */
.card > div:last-child { min-width: 0; }
.card h2 {
  font-size: 15px;
  line-height: 1.3;
  margin: 0 0 8px 0;
  color: #222;
  min-height: 2.6em; /* ruimte voor 2 regels, ook als de titel er maar 1 nodig heeft - zo staan alle cijfers eronder mooi op 1 lijn */
  display: flex;
  align-items: flex-start; /* titel begint bovenaan die gereserveerde ruimte */
}
.card .number { font-size: 38px; font-weight: bold; color: #888; line-height: 1; }
.card .previous { font-style: italic; font-weight: 600; color: #333; font-size: 13px; margin: 6px 0 8px 0; }
.card .desc { color: #999; font-size: 13px; }

.card .breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.card .breakdown-item {
  background: #f4f6f4;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: #777;
  /* Hier stond white-space:nowrap. Dat werkt voor een korte pil ("B2B: 40"),
     maar een lange melding kon dan nergens afbreken en liep buiten de kaart.
     De pil mag nu wel afbreken; wat NIET mag afbreken is het getal zelf - zie
     de regel op strong hieronder. */
  white-space: normal;
  max-width: 100%;
  /* Vangnet voor iets zonder spaties waar niet in te breken valt, bv. een lange
     URL of een klantnaam met streepjes. */
  overflow-wrap: anywhere;
}
.card .breakdown-item strong {
  color: #444;
  font-weight: 700;
  /* "1 311" mag nooit over twee regels vallen: fmt_number() gebruikt een smalle
     ruimte als duizendscheidingsteken, en een afgebroken getal leest als twee
     getallen. */
  white-space: nowrap;
}

/* --- Tabellen (admin) --------------------------------------------------- */

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

table.data-table th, table.data-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

table.data-table th { background: #fafafa; color: #666; font-weight: 600; }
table.data-table tr:last-child td { border-bottom: none; }

/* --- Tabel-kolom in een flex-layout (adminlijsten naast een formulier) ---
   Voorkomt dat een brede tabel (bv. lange, komma-gescheiden lijsten) buiten
   haar kolom groeit en over het formulier ernaast heen schuift - de tabel
   scrollt dan liever intern horizontaal. */
.table-column {
  flex: 1 1 400px;
  min-width: 0;      /* essentieel: anders negeert een flex-item de flex-basis voor brede inhoud zoals tabellen */
  max-width: 100%;
}
.table-scroll {
  overflow-x: auto;
}

.btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary { background: #5cb12f; color: #fff; }
.btn-primary:hover { background: #4c9626; }
.btn-danger { background: #d9534f; color: #fff; }
.btn-danger:hover { background: #c9302c; }
.btn-secondary { background: #eee; color: #333; }
.btn-secondary:hover { background: #ddd; }

/* --- Compacte icoon-knoppen (bv. bewerken/verwijderen in een tabel) ------ */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 4px;
  vertical-align: middle;
}
.btn-icon svg { width: 16px; height: 16px; }

.toolbar { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }

form.admin-form {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  max-width: 520px;
}

form.admin-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 4px 0;
  color: #444;
}

form.admin-form label:first-child { margin-top: 0; }

form.admin-form input[type=text],
form.admin-form input[type=email],
form.admin-form input[type=password],
form.admin-form select,
form.admin-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

form.admin-form textarea { min-height: 90px; }
form.admin-form .field-hint { font-size: 12px; color: #999; margin-top: 3px; }
form.admin-form .checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
form.admin-form .checkbox-row input { width: auto; }
form.admin-form .actions { margin-top: 22px; display: flex; gap: 10px; }

/* --- Toggle switch (bv. 'vorige periode tonen') ------------------------- */

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  border-radius: 24px;
  transition: background-color 0.15s;
}

.toggle-switch .slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
}

.toggle-switch input:checked + .slider { background-color: #5cb12f; }
.toggle-switch input:checked + .slider::before { transform: translateX(18px); }
.toggle-switch input:focus-visible + .slider { outline: 2px solid #5cb12f; outline-offset: 2px; }


/* --- admin/project_checks.php: de controletabel -------------------------- */
/* Eén rij per klant, één kolom per controle. De kopteksten staan verticaal:
   met twaalf kolommen naast elkaar past horizontale tekst niet zonder de
   tabel breder te maken dan het scherm. */

.checks-table { table-layout: auto; }
.checks-table th.vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  padding: 10px 4px;
  font-weight: 600;
  font-size: 12px;
  vertical-align: bottom;
}
.checks-table td.bol { text-align: center; padding: 6px 4px; }
.checks-table tr.klantrij { cursor: pointer; }
.checks-table tr.klantrij:hover { background: #f7f9f7; }
.checks-table tr.klantrij.open { background: #f1f5f1; }

.bol span {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.bol .ok { background: #5cb12f; }
.bol .let_op { background: #e8a13a; }
.bol .fout { background: #cf4436; }
.bol .nvt { background: #fff; border-style: dashed; border-color: #bbb; }

.checks-detail > td { background: #fbfcfb; padding: 0 14px 14px; }
.checks-detail .melding {
  border-left: 3px solid #ddd;
  padding: 8px 0 8px 12px;
  margin-top: 12px;
  font-size: 13.5px;
}
.checks-detail .melding.fout { border-left-color: #cf4436; }
.checks-detail .melding.let_op { border-left-color: #e8a13a; }
.checks-detail .melding.nvt { border-left-color: #ccc; color: #777; }
.checks-detail .melding b { display: block; margin-bottom: 2px; }
.checks-detail .melding code {
  display: inline-block;
  background: #f0f2ef;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12.5px;
  margin-top: 6px;
  user-select: all;
}
.checks-detail .melding a { margin-left: 8px; font-size: 12.5px; }

.checks-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12.5px;
  color: #666;
  margin: 14px 0;
}
.checks-legend .bol { display: inline-block; }

.checks-samenvatting {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}
.checks-samenvatting span,
.checks-samenvatting a {
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 12px;
  background: #f0f2ef;
  color: #555;
  text-decoration: none;
  border: 1px solid transparent;
}
.checks-samenvatting a:hover { border-color: #bbb; }
.checks-samenvatting span.raakt,
.checks-samenvatting a.raakt { background: #fdecea; color: #a3382b; }
.checks-samenvatting a.raakt:hover { border-color: #e0a79e; }

/* De aangeklikte controle: waar je nu aan werkt. */
.checks-samenvatting a.actief {
  background: #2b5fa8;
  color: #fff;
  font-weight: 700;
  border-color: #2b5fa8;
}

/* De melding van de controle waarop gefilterd staat, licht uitgelicht - de
   andere aandachtspunten van die klant blijven zichtbaar maar op de achtergrond. */
.checks-detail .melding.gefocust {
  background: #fff;
  border: 1px solid var(--border, #e5e5e5);
  border-left-width: 3px;
  border-radius: 0 6px 6px 0;
  padding-right: 12px;
}
.checks-detail .melding.overig { opacity: 0.66; }


/* --- Doelgroeptabbladen (B2C / B2B) - [DASH-B2B] --------------------------
   ZONDER JAVASCRIPT, met verborgen radio-inputs. dashboard.php heeft nergens
   script staan en dat blijft zo: zo werken de tabbladen ook bij wie scripts
   blokkeert, en er is geen extra bestand nodig.

   Beide panelen staan ALTIJD in de HTML - alleen de zichtbaarheid wisselt.
   Daardoor kan de paginatest ze allebei nakijken zonder een browser.

   De inputs staan met opzet BUITEN het scherm en niet op display:none: een
   verborgen radio met display:none is voor een schermlezer en voor het
   toetsenbord niet meer bereikbaar, en dan zijn de tabbladen niet te bedienen
   zonder muis. */
.doelgroep-tabs .tab-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.doelgroep-tabs .tab-knoppen {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  border-bottom: 2px solid #e3e6e3;
}

.doelgroep-tabs .tab-knop {
  cursor: pointer;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-bottom: -2px;
  user-select: none;
}

.doelgroep-tabs .tab-knop:hover {
  color: #3d7a1f;
  background: #f4f8f2;
}

/* Het actieve tabblad. */
#tab-b2c:checked ~ .tab-knoppen label[for="tab-b2c"],
#tab-b2b:checked ~ .tab-knoppen label[for="tab-b2b"] {
  color: #3d7a1f;
  background: #fff;
  border-color: #e3e6e3;
  border-bottom: 2px solid #fff;
}

/* Toetsenbordbediening zichtbaar maken: zonder dit weet iemand die met Tab
   navigeert niet waar hij staat, want de radio zelf is onzichtbaar. */
#tab-b2c:focus-visible ~ .tab-knoppen label[for="tab-b2c"],
#tab-b2b:focus-visible ~ .tab-knoppen label[for="tab-b2b"] {
  outline: 2px solid #5cb12f;
  outline-offset: 2px;
}

.doelgroep-tabs .tab-paneel {
  display: none;
}

#tab-b2c:checked ~ .tab-paneel-b2c,
#tab-b2b:checked ~ .tab-paneel-b2b {
  display: block;
}

/* ZONDER TABBLADEN (een klant met maar één doelgroep) staat het paneel gewoon
   open. De regels hierboven gelden alleen binnen .doelgroep-tabs, dus een los
   paneel blijft zichtbaar - maar dat expliciet maken scheelt de volgende lezer
   een zoektocht. */
.tab-paneel {
  display: block;
}

/* Een melding voor de beheerder, bv. bij een klant zonder enige afspraak. */
.notice-warn {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #fff8e1;
  border: 1px solid #f0d878;
  color: #7a5b00;
  font-size: 14px;
}

/* --- Nieuwsbriefbeheer: newsletter_plan.php, newsletter_namen.php,
   newsletter_plan_checks.php ------------------------------------------------
   Bewust ACHTERAAN toegevoegd en niets erboven gewijzigd: dit blok kan weg
   zonder dat er elders iets kapotgaat. Het staat hier en niet in een eigen
   stylesheet omdat includes/header.php de <head> schrijft en precies een
   stylesheet laadt - een tweede erbij zou een wijziging in header.php vragen,
   en dat is een bestand waar elke pagina van afhangt. */

.nb-uitleg { color: #666; font-size: 13.5px; line-height: 1.6; }
.nb-klein { font-size: 12.5px; color: #666; }
.nb-leeg { color: #bbb; }
.nb-verborgen { display: none; }

/* --- De aandachtsbalk ----------------------------------------------------
   Dit is de vraag waarmee je de pagina opent: wat moet er gebeuren. Niet
   "hoeveel nieuwsbrieven staan er" - dat getal verandert nooit. */

.nb-aandacht { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.nb-kaart {
  flex: 1 1 130px;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.nb-kaart:hover { border-color: #bbb; }
.nb-kaart-label { display: block; font-size: 12px; color: #777; }
.nb-kaart-getal { display: block; font-size: 22px; font-weight: 700; color: #444; line-height: 1.2; }
.nb-kaart-danger { background: #fdecea; box-shadow: none; }
.nb-kaart-danger .nb-kaart-label { color: #8c3428; }
.nb-kaart-danger .nb-kaart-getal { color: #7a2a20; }
.nb-kaart-warning { background: #fff8e1; box-shadow: none; }
.nb-kaart-warning .nb-kaart-label { color: #7a5b00; }
.nb-kaart-warning .nb-kaart-getal { color: #6b4f00; }
.nb-kaart.actief { border-color: #2b5fa8; box-shadow: 0 0 0 1px #2b5fa8; }

.nb-filtermelding {
  background: #eef4fb;
  border: 1px solid #c9dcf2;
  color: #2b5fa8;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 14px;
}
.nb-filtermelding a { margin-left: 8px; }

/* --- Filterbalk en het formulier voor een nieuwe nieuwsbrief -------------- */

.nb-balk {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.nb-balk input[type=text] { flex: 1 1 200px; }
.nb-balk input, .nb-balk select {
  padding: 7px 9px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13.5px;
  font-family: inherit;
}
.nb-balk .btn:last-child { margin-left: auto; }

.nb-nieuwform {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  background: #fff;
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}
.nb-nieuwform label, .nb-velden label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: #777;
}
.nb-nieuwform label.breed { flex: 1 1 220px; }
.nb-nieuwform input, .nb-nieuwform select,
.nb-velden input, .nb-velden select {
  padding: 7px 9px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 400;
  color: #222;
}
.nb-nieuwform-knoppen { display: flex; gap: 8px; }

/* --- De maanden ----------------------------------------------------------
   Een maandkop met een teller laat je springen; 258 rijen scrollen is geen
   overzicht. Een maand die helemaal voorbij is staat dicht, zodat het scherm
   begint waar het werk zit. */

.nb-maand { margin-bottom: 10px; }
.nb-maand > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid #ddd;
  list-style: none;
}
.nb-maand > summary::-webkit-details-marker { display: none; }
.nb-maand > summary::before {
  content: "\25B8";
  color: #999;
  font-size: 11px;
  transition: transform 0.12s;
}
.nb-maand[open] > summary::before { transform: rotate(90deg); }
.nb-maand-naam { font-size: 15px; font-weight: 600; color: #333; }
.nb-maand-teller { font-size: 12.5px; color: #888; }
.nb-maand.voorbij .nb-maand-naam { color: #999; font-weight: 400; }

/* --- Een nieuwsbrief als kaartje ----------------------------------------- */

.nb-kaartje {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
}
.nb-kaartje.let-op { border-color: #f0d878; }
.nb-kaartje.voorbij { background: #fafafa; }
.nb-kaartje.voorbij .nb-datum, .nb-kaartje.voorbij .nb-thema { color: #999; }
.nb-kaartje.geschrapt .nb-datum, .nb-kaartje.geschrapt .nb-thema {
  text-decoration: line-through;
  color: #aaa;
}
/* Waar je net mee bezig was, na een handeling. Het anker brengt je hier terug. */
.nb-kaartje:target { border-color: #5cb12f; box-shadow: 0 0 0 1px #5cb12f; }

.nb-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
}
.nb-kop input[type=checkbox] { width: auto; margin: 0; }
.nb-datum { font-size: 13.5px; font-weight: 600; min-width: 56px; color: #333; }
.nb-thema { font-size: 13.5px; color: #555; }
.nb-kop-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.nb-aantal {
  font-size: 12px;
  color: #777;
  background: #f4f6f4;
  border-radius: 10px;
  padding: 2px 9px;
  min-width: 24px;
  text-align: center;
}

.nb-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
}
.nb-badge-redactioneel { background: #eef4fb; color: #2b5fa8; }
.nb-badge-dedicated    { background: #f3eefb; color: #5b3fa0; }
.nb-badge-beurs        { background: #eaf7e6; color: #2e7d1f; }
.nb-badge-zondag       { background: #fdf0ea; color: #97401f; }
.nb-badge-b2c          { background: #f1f1ef; color: #555; }
.nb-badge-b2b          { background: #e9eef1; color: #2f5766; }

.nb-vlag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f1f1ef;
  color: #666;
  white-space: nowrap;
}
.nb-vlag-datum { background: #fff8e1; color: #7a5b00; }
.nb-vlag-beurs { background: #fff8e1; color: #7a5b00; }
.nb-vlag-los   { background: #fdecea; color: #a33a2e; }
/* Een inlassing die nog een VOORSTEL is: ze staat in de planning en op de
   opstartslide, maar de klant moet ze nog bevestigen. Blauw en niet oranje:
   dit is geen aandachtspunt maar een tussenstand. */
.nb-vlag-voorstel { background: #edf3fb; color: #2b5fa8; }
.nb-slot-status { margin-left: 6px; padding: 1px 8px; font-size: 11px; }

/* De klanten als pillen onder de kop: zo zie je in een oogopslag wie erin zit
   zonder de kaart te moeten openklappen. */
.nb-pillen {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-left: 24px;
}
.nb-pil {
  font-size: 12px;
  background: #f4f6f4;
  border-radius: 10px;
  padding: 2px 9px;
  color: #555;
}
.nb-pil.los { background: #fdecea; color: #a33a2e; }
.nb-kaartje.voorbij .nb-pil { color: #999; }

/* --- Het detail, opengeklapt --------------------------------------------- */

.nb-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; }
.nb-velden {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.nb-velden label.breed { flex: 1 1 200px; }
.nb-detail-knoppen { display: flex; gap: 8px; margin-bottom: 14px; }

.nb-slots { box-shadow: none; border: 1px solid #eee; margin-bottom: 10px; }
.nb-slots td { padding: 6px 10px; font-size: 13px; }
.nb-slot-naam { width: 190px; }
.nb-slot-knop { width: 40px; text-align: right; }
.nb-slot-knop .btn { padding: 2px 9px; font-size: 15px; line-height: 1.2; }

.nb-toevoegen { display: flex; gap: 8px; flex-wrap: wrap; }
.nb-toevoegen input {
  padding: 6px 9px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.nb-toevoegen input[name=klant] { width: 220px; }
.nb-toevoegen input[name=notitie] { flex: 1 1 180px; }

/* --- De bulkbalk ---------------------------------------------------------
   Bestaat voor precies een reden: de vijftien beursnieuwsbrieven uit de Excel
   een voor een openklappen is vijftien keer dezelfde handeling. */

.nb-bulk {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 14px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.07);
  font-size: 13px;
}
.nb-bulk select {
  padding: 6px 9px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.nb-bulk .btn-danger { margin-left: auto; }

/* --- newsletter_namen.php ------------------------------------------------ */

.nb-namen {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.nb-naamrij {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.nb-naamrij:last-child { border-bottom: none; }
.nb-naamrij:hover { background: #fafbfa; }
.nb-naamrij-tekst { flex: 1 1 300px; min-width: 0; }
.nb-naamrij-tekst code {
  display: block;
  font-size: 13px;
  color: #333;
  overflow-wrap: anywhere;
}
.nb-naamrij-actie { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nb-naamrij-actie input {
  padding: 6px 9px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  width: 200px;
}


/* --- admin/newsletter_edit.php: de nieuwsbrief samenstellen -------------- */

.ne-kop, .ne-toevoegen, .ne-slots, .ne-opgehaald, .ne-blok {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.ne-kopje { font-size: 16px; margin: 26px 0 12px; }
.ne-koprij { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.ne-koprij code { background: #f0f2ef; padding: 2px 7px; border-radius: 4px; }

/* Wat er nog onaf is. Staat bovenaan en niet onderaan: dit is de vraag die je
   je stelt voor je verstuurt, niet nadat je alles doorgelezen hebt. */
.ne-nakijken {
  background: #fff8e1;
  border: 1px solid #f0d878;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
  color: #7a5b00;
}
.ne-nakijken ul { margin: 8px 0 0 18px; padding: 0; }
.ne-nakijken li { margin: 3px 0; font-size: 13.5px; }
.ne-nakijken li.fout { color: #a33a2e; font-weight: 600; }

.ne-blok { padding: 0; overflow: hidden; }
.ne-blok-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #f4f6f4;
  border-bottom: 1px solid #e6e9e6;
  padding: 10px 16px;
}
.ne-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #5cb12f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.ne-knoppen { margin-left: auto; display: flex; gap: 6px; }
.ne-knoppen .btn { padding: 4px 10px; }
.ne-blok-form { padding: 16px; }
.ne-blok-voet { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* De afbeelding klein naast het veld: je wil zien WELKE foto het is, niet hoe
   ze eruitziet op ware grootte. */
.ne-afbeelding { display: flex; align-items: flex-start; gap: 14px; margin: 12px 0; }
.ne-afbeelding img {
  width: 110px; height: 82px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  flex-shrink: 0;
  background: #f4f6f4;
}
/* DE OPMAAK VAN DIT LABEL MOET HIER STAAN, en dat is niet vanzelfsprekend: het
   zit BUITEN .nb-velden, dus het erft niets van de regel daar. Zonder deze
   regel staat er "Afbeelding" in gewone tekstgrootte naast een smal invoerveld,
   terwijl elk ander veld in dit scherm een klein grijs kopje boven een breed
   veld heeft. Dat gold voor elk blok met een afbeelding, niet alleen de banner. */
.ne-afbeelding label {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #666;
}
.ne-afbeelding label input[type=text] {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13.5px;
  font-family: inherit;
}
.ne-geen-beeld {
  width: 110px; height: 82px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed #ccc;
  border-radius: 6px;
  font-size: 11.5px;
  color: #aaa;
  flex-shrink: 0;
  text-align: center;
}

.ne-tekstveld { display: block; font-size: 12.5px; font-weight: 600; color: #666; margin: 12px 0; }
.ne-tekstveld textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
}
.ne-tekstveld .field-hint { font-weight: 400; }

/* Waar een opgehaald veld vandaan komt. Klein maar altijd zichtbaar: een
   verkeerde gok die je ziet, is overtypen; een die je niet ziet, staat in de
   mail. */
.ne-bron {
  font-weight: 400;
  font-size: 11px;
  color: #999;
  background: #f4f6f4;
  padding: 1px 7px;
  border-radius: 8px;
  margin-left: 6px;
}

.ne-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
  margin: 0;
}
.ne-slotnaam { min-width: 150px; font-size: 13.5px; }
.ne-slot select { max-width: 460px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }

.ne-toevoegen { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.ne-link { flex: 1 1 380px; display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.ne-link label { flex: 1 1 auto; min-width: 0; }
.ne-leeg { display: flex; gap: 10px; align-items: flex-end; margin: 0; }
.ne-toevoegen label { display: block; font-size: 12.5px; font-weight: 600; color: #666; }
.ne-toevoegen input[type=text], .ne-toevoegen select {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13.5px;
  font-family: inherit;
}
.ne-link .btn, .ne-leeg .btn { margin-top: 20px; flex-shrink: 0; }

.ne-opgehaald { border: 2px solid #5cb12f; }

/* Een bestand opladen bij een blok. Apart formulier, want multipart/form-data
   hoort niet bij het gewone opslaan van een titel of een tekst. */
.ne-opladen {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 0;
  background: #f4f6f4;
  border-top: 1px solid #e6e9e6;
}
.ne-opladen label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #666;
}
.ne-opladen input[type=file] {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-family: inherit;
}

/* Het uploadveld voor de banner bovenaan hoort bij het kopblok erboven, niet
   bij een blok - vandaar de eigen afronding en marge. */
.ne-opladen-kop {
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin: -16px 0 16px;
}

/* Het commando om naar Mailchimp te pushen. Er staat geen knop: de
   Mailchimp-sleutel hoort niet op deze webserver (zie D3 in het ontwerp). */
.ne-push {
  background: #eef4fb;
  border: 1px solid #c9dcf2;
  border-radius: 8px;
  padding: 16px 18px;
  margin: 26px 0 16px;
}
.ne-commando {
  display: block;
  background: #fff;
  border: 1px solid #d5e2f3;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 6px 0;
  font-size: 13px;
  user-select: all;
  overflow-wrap: anywhere;
}

/* --- De tekstbewerker in admin/newsletter_edit.php ----------------------- */
.ne-editor { display: block; margin: 12px 0; }
.ne-editor-kop { display: block; font-size: 12.5px; font-weight: 600; color: #666; margin-bottom: 4px; }

.ne-werkbalk {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: #f4f6f4;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.ne-werkbalk button {
  background: #fff;
  border: 1px solid #d5d9d5;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: #444;
  cursor: pointer;
  line-height: 1.5;
}
.ne-werkbalk button:hover { background: #eef2ee; border-color: #b9c1b9; }
.ne-werkbalk button.aan { background: #5cb12f; border-color: #5cb12f; color: #fff; }
.ne-bronknop { margin-left: auto; }

/* Het bewerkvlak. Bewust dezelfde maat en lijnhoogte als het tekstveld dat het
   vervangt, zodat je niet plots in een ander lettertype zit te typen. */
.ne-vlak {
  min-height: 130px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 0 0 4px 4px;
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.ne-vlak:focus { outline: 2px solid #5cb12f; outline-offset: -2px; }
.ne-vlak p { margin: 0 0 10px; }
.ne-vlak p:last-child { margin-bottom: 0; }
.ne-vlak ul, .ne-vlak ol { margin: 0 0 10px 20px; padding: 0; }
.ne-vlak a { color: #3d7a1f; }

/* De ruwe HTML, voor wie liever tikt of wil zien wat er staat. */
.ne-bronvlak {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 0 0 4px 4px;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.5;
}
.ne-bronvlak[hidden] { display: none; }
.ne-vlak[hidden] { display: none; }

/* --- De uitsnede van een afbeelding -------------------------------------- */
/* Het kader heeft de verhouding waarin het SJABLOON de afbeelding toont, en de
   foto schuift erin met object-position. Zo zie je de uitsnede die je krijgt en
   niet de hele foto. Er wordt hier niets bijgesneden: dat gebeurt pas bij het
   pushen, zodat de oorspronkelijke foto blijft bestaan. */
.ne-uitsnede {
  width: 170px;
  flex-shrink: 0;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  background: #f4f6f4;
}
.ne-uitsnede img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* VOLLEDIGE HOOGTE. Het kader heeft dan geen vaste verhouding meer (die staat
   inline en wordt door het scherm weggehaald), en de afbeelding bepaalt zelf hoe
   hoog ze wordt - net zoals in de mail, waar de <img> van het sjabloon alleen
   een width heeft en geen height. Zonder height:auto blijft de regel hierboven
   staan en wordt de foto alsnog uitgerekt. */
.ne-uitsnede.ne-volledig img {
  height: auto;
  object-fit: fill;
}

/* DE TWEE BEELDKEUZES ONDER ELKAAR IN EEN KOLOM.
   .ne-afbeelding is een flexrij zonder wrap, dus elk label erbij is een kolom
   erbij. Met de keuzelijst EN de schuifregelaar los ernaast werden dat er vijf,
   en dan wordt elke hint een smalle strook met rafelige regelovergangen. Samen
   in een kolom blijven het er vier en houdt elke uitleg volle breedte. */
.ne-beeldkeuze {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* In een kolom slaat flex-basis op de HOOGTE; de 100% van .ne-schuif zou die
   twee dus uit elkaar rekken. */
.ne-beeldkeuze .ne-schuif { flex: 0 0 auto; margin-top: 0; }

/* DE UITLEG ONDER EEN VELD IS GEEN KOPJE. Het label eromheen staat op 600, en
   zonder deze regel erft de hint dat - dan staat er een alinea vette grijze
   tekst onder elk veld. Bij de schuifregelaar stond dit al goed (.ne-schuif
   .field-hint), en juist daardoor viel het op zodra er twee kolommen naast
   elkaar kwamen te staan: de ene vet, de andere niet. */
.ne-afbeelding label .field-hint { font-weight: 400; }

/* Een keuzelijst in dit blok hoort er hetzelfde uit te zien als de tekstvelden
   ernaast - anders springt ze eruit als een vreemd element. */
.ne-afbeelding label select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13.5px;
  background: #fff;
}

/* De waarschuwing bij een staand beeld op volledige hoogte. Zelfde kleur als de
   foutmeldingen elders: dit is geen tip maar iets wat je wil zien voor je
   verzendt. */
.ne-hoogtemelding {
  display: block;
  margin-top: 6px;
  font-weight: 400;
  font-size: 12.5px;
  color: #b03030;
}

.ne-schuif {
  display: block;
  flex: 1 1 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: #666;
  margin-top: 10px;
}
.ne-schuif input[type=range] {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 6px 0 2px;
  accent-color: #5cb12f;
}
.ne-schuif input[type=range]:disabled { opacity: 0.45; }
.ne-schuif .field-hint { font-weight: 400; }

/* De regel die zegt naar welk segment een nieuwsbrief gaat. Opvallender dan de
   rest van dat blok: het is de vraag waarop een verkeerd antwoord niet terug te
   draaien is. */
.ne-ontvangers {
  background: #fff;
  border-left: 3px solid #2b5fa8;
  border-radius: 0 4px 4px 0;
  padding: 10px 14px;
  margin-top: 10px;
}

/* --- Hoofdtabbladen: Je cijfers / Je contract - [DASH-CONTRACT] ------------
   Dezelfde techniek als de doelgroeptabbladen hierboven (verborgen radio's,
   geen JavaScript), maar met een EIGEN naam voor de radiogroep. Twee groepen
   die 'doelgroep' zouden heten, zouden elkaars keuze uitzetten.

   HET VERBERGEN GAAT OP DIRECTE KINDEREN (> .tab-paneel) en niet op alle
   afstammelingen. Dat is geen nettigheid: bij een klant met maar EEN doelgroep
   staat .tab-paneel-b2c rechtstreeks in het cijferpaneel zonder .doelgroep-tabs
   eromheen, en dan is er geen enkele regel die dat paneel weer zichtbaar maakt.
   Met een afstammelingenselector zou zo'n klant een leeg dashboard zien. */
.hoofd-tabs .tab-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hoofd-tabs > .tab-paneel {
  display: none;
}

#hoofdtab-cijfers:checked ~ .tab-paneel-cijfers,
#hoofdtab-contract:checked ~ .tab-paneel-contract {
  display: block;
}

/* De knoppenbalk van de HOOFDtabbladen staat een maat groter dan die van de
   doelgroepen: het zijn twee lagen, en zonder verschil is niet te zien welke
   de bovenste is. */
.tab-knoppen-hoofd {
  display: flex;
  gap: 6px;
  margin: 0 0 22px;
  border-bottom: 2px solid #e3e6e3;
}

.tab-knoppen-hoofd .tab-knop {
  cursor: pointer;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  color: #666;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-bottom: -2px;
  user-select: none;
}

.tab-knoppen-hoofd .tab-knop:hover {
  color: #3d7a1f;
  background: #f4f8f2;
}

#hoofdtab-cijfers:checked ~ .tab-knoppen-hoofd label[for="hoofdtab-cijfers"],
#hoofdtab-contract:checked ~ .tab-knoppen-hoofd label[for="hoofdtab-contract"] {
  color: #3d7a1f;
  background: #fff;
  border-color: #e3e6e3;
  border-bottom: 2px solid #fff;
}

#hoofdtab-cijfers:focus-visible ~ .tab-knoppen-hoofd label[for="hoofdtab-cijfers"],
#hoofdtab-contract:focus-visible ~ .tab-knoppen-hoofd label[for="hoofdtab-contract"] {
  outline: 2px solid #5cb12f;
  outline-offset: 2px;
}

/* --- Het tabblad "Je contract" -------------------------------------------- */
.contract-intro {
  color: #666;
  font-size: 14px;
  max-width: 780px;
  margin: 0 0 22px;
}

.contract-blok {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 18px;
}

.contract-blok > h2 {
  margin: 0 0 14px;
  font-size: 18px;
  color: #222;
}

.contract-blok > h2 .admin-kop {
  font-weight: 400;
  font-size: 14px;
  color: #888;
}

/* Een beheerdersblok is herkenbaar zonder de tekst te lezen: dat scheelt de
   twijfel of iets wel of niet bij de klant terechtkomt. */
.contract-blok-admin {
  border-color: #f0d878;
  background: #fffdf5;
}

.contract-uitleg {
  color: #666;
  font-size: 13.5px;
  max-width: 760px;
  margin: 0 0 12px;
}

.contract-voetnoot {
  color: #888;
  font-size: 12.5px;
  max-width: 760px;
  margin: 8px 0 0;
}

/* De feitenrij: label klein erboven, waarde groot eronder. Als grid en niet als
   tabel, want het aantal feiten verschilt per klant en een tabel met lege
   cellen leest slechter dan een rij die gewoon korter is. */
.contract-feiten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px 26px;
}

.contract-feit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contract-feit .label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
}

.contract-feit .waarde {
  font-size: 19px;
  font-weight: 700;
  color: #222;
  word-break: break-word;
}

.contract-feit .admin-detail,
.contract-tabel .admin-detail,
.contract-lijst .admin-detail {
  font-size: 12.5px;
  color: #888;
}

.contract-balk {
  margin-top: 18px;
  height: 9px;
  border-radius: 999px;
  background: #eef1ee;
  overflow: hidden;
}

.contract-balk-vulling {
  height: 100%;
  background: #5cb12f;
}

.contract-balk-tekst {
  margin-top: 6px;
  font-size: 12.5px;
  color: #888;
}

/* Getalkolommen rechts, en de kopgroep per taal met een lijn eronder zodat de
   drie kolommen bij elkaar horen. */
.contract-tabel th.getal,
.contract-tabel td.getal {
  text-align: right;
  white-space: nowrap;
}

.contract-tabel th.taalgroep {
  text-align: center;
  border-bottom: 2px solid #e3e6e3;
}

/* Een nul of een streepje is GEDEMPT en niet weggelaten: het verschil tussen
   "niets meer over" en "niet afgesproken" moet leesbaar blijven, maar het hoeft
   niet even hard te roepen als een cijfer dat er wel toe doet. */
.contract-tabel .op {
  color: #aaa;
}

.contract-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contract-lijst li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.contract-lijst li:last-child {
  border-bottom: none;
}

.contract-lijst-datum {
  display: inline-block;
  min-width: 168px;
  font-weight: 700;
  color: #222;
}

@media (max-width: 640px) {
  .contract-lijst-datum { display: block; min-width: 0; }
}