/* ===========================================================================
   Agenda - opmaak
   ===========================================================================

   Het publieke deel hieronder is overgenomen uit assets/style.css van de agenda
   die vandaag op tvhtest draait. Letterlijk, want de afspraak was dat het er
   identiek uitziet. Wijzig hier dus niets aan de vorm zonder dat daar ook te
   doen, anders lopen de twee uit elkaar en is 'identiek' na één ronde al niet
   meer waar.

   EEN DING IS WEL VERANDERD: de kleuren staan in variabelen bovenaan, en die
   waren al zo. Ze staan nu op TVH-rood omdat TVH de eerste klant is. Bij een
   tweede klant hoort dat blok uit de merkinstellingen van de tenant te komen
   en niet uit dit bestand - Promatis360 heeft daar al brand_colors voor.

   Onderaan staat een blok voor het BEHEER. Dat hoort niet bij de vormtaal van
   de klant maar bij Promatis360, en het staat daarom apart, achter .beheer.
   =========================================================================== */

:root{
  --brand:#e4002b;          /* TVH rood */
  --inschrijf:#395067;      /* knop Inschrijven - bewust niet het rood: dat blijft
                               voorbehouden aan "volzet", zodat rood één ding betekent */
  --inschrijf-700:#2c3f52;
  --brand-700:#b80022;
  --ink:#2b2b2b;
  --muted:#646464;          /* TVH grijs */
  --paper:#f3f3f3;
  --surface:#ffffff;
  --line:#e2e2e2;
  --line-soft:#eeeeee;
  --ruim:#1f7a3d;
  --laag:#9a6a12;
  --vol:#e4002b;
  --radius:10px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",Arial,Helvetica,system-ui,sans-serif;font-size:15px;line-height:1.5;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* masthead */
.masthead{background:var(--surface);border-bottom:1px solid var(--line)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:inline-flex;align-items:center}
.logo{height:26px;width:auto;display:block}
.masthead-meta .count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.masthead-right{display:flex;align-items:center;gap:18px}
.taalkiezer{display:inline-flex;gap:2px;align-items:center}
.taalkiezer a{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-decoration:none;padding:5px 8px;border-radius:6px;line-height:1}
.taalkiezer a:hover{color:var(--brand);background:rgba(228,0,43,.06)}
.taalkiezer a.actief{color:var(--brand);background:rgba(228,0,43,.10)}

/* paginatitel */
.pagehead{background:var(--surface);border-bottom:1px solid var(--line)}
.pagehead h1{
  margin:0;padding:26px 0 24px;font-size:30px;font-weight:800;letter-spacing:-.02em;
  position:relative;
}
.pagehead h1::after{content:"";display:block;width:54px;height:4px;background:var(--brand);border-radius:3px;margin-top:12px}

/* ---- filters: groter, 2 rijen ---- */
.filters{position:relative;margin:26px 0 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 20px 18px}
.filters-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.filters-row.facets{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft);align-items:center;gap:10px}
.field{display:flex;flex-direction:column;gap:7px;min-width:160px}
.field.grow{flex:1 1 320px;min-width:240px}
.field label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.field input[type=search],.field input[type=date],.field select{
  appearance:none;font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid #cfcfcf;border-radius:8px;padding:12px 14px;min-height:48px;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(228,0,43,.14)}
.field.actions{margin-left:auto}

/* zoekveld met loep-knop */
.search-wrap{position:relative}
.search-wrap input[type=search]{width:100%;padding-right:46px}
.search-wrap input[type=search]::-webkit-search-cancel-button{display:none}
.search-btn{
  position:absolute;top:0;right:0;height:100%;width:46px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:0 8px 8px 0;
}
.search-btn:hover{color:var(--brand)}
.search-btn:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.btn{
  font:inherit;font-weight:700;cursor:pointer;border:1px solid var(--brand);
  background:var(--brand);color:#fff;border-radius:8px;padding:12px 20px;min-height:48px;
  text-decoration:none;display:inline-flex;align-items:center;transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--brand-700);border-color:var(--brand-700)}
.btn.ghost{background:#fff;color:var(--brand);border-color:#cfcfcf}
.btn.ghost:hover{border-color:var(--brand)}

.facets-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-right:2px}

/* dropdown facetten */
details.dropdown{position:relative}
/* Even breed, ook nadat er een telbadge bij komt. Zonder min-width en
   space-between groeide een keuzelijst zodra je er iets in aanvinkte, en
   verschoof de hele rij ernaast. */
details.dropdown>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;gap:9px;
  min-width:164px;
  border:1px solid #cfcfcf;background:var(--surface);border-radius:8px;padding:11px 14px;min-height:46px;font-weight:600;
}
/* De badge houdt zijn plek bezet, ook als er niets gekozen is. */
details.dropdown .dd-badge.leeg{visibility:hidden}
details.dropdown[open]>summary{border-color:var(--brand);color:var(--brand)}
details.dropdown>summary::-webkit-details-marker{display:none}
details.dropdown>summary::after{content:"▾";color:var(--muted);font-size:12px}
details.dropdown[open]>summary::after{color:var(--brand)}
.dd-badge{background:var(--brand);color:#fff;border-radius:20px;font-size:11px;font-weight:800;min-width:19px;height:19px;display:inline-grid;place-items:center;padding:0 5px}
.dd-panel{
  position:absolute;z-index:100;top:calc(100% + 8px);left:0;min-width:260px;max-height:320px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.16);padding:8px;
}
.dd-check{display:flex;gap:11px;align-items:center;padding:9px 11px;border-radius:7px;cursor:pointer;font-weight:400}
.dd-check:hover{background:var(--line-soft)}
.dd-check input{width:17px;height:17px;accent-color:var(--brand)}
.wis{margin-left:auto;color:var(--brand);font-weight:600;font-size:13px;text-decoration:none}
.wis:hover{text-decoration:underline}

/* active chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:#fdeaed;color:var(--brand-700);border:1px solid #f4c2cb;
  border-radius:30px;padding:7px 13px;font-size:13px;font-weight:600;
}
.chip span{font-weight:800;opacity:.75}
.chip:hover{background:#fbdce1}

/* resultaten */
.table-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
table.opl{width:100%;border-collapse:collapse}
table.opl thead th{
  text-align:left;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  padding:15px 18px;border-bottom:2px solid var(--line);background:#fafafa;
}
table.opl tbody td{padding:15px 18px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.opl tbody tr:last-child td{border-bottom:0}
table.opl tbody tr:hover{background:#fafafa}
.c-prijs,.c-vrij{white-space:nowrap}
.c-prijs{font-weight:600}
.c-act{text-align:right}

.opl-naam{display:block;font-weight:700;letter-spacing:-.01em}
.opl-soort{display:block;color:var(--muted);font-size:13px;margin-top:2px}

.chip-date{
  display:inline-grid;justify-items:center;line-height:1;border:1px solid var(--line);border-radius:9px;padding:7px 11px;min-width:56px;background:#fff;
}
.chip-date b{font-size:19px;font-weight:800}
.chip-date.start b{color:var(--brand)}
.chip-date.eind b{color:var(--muted)}
.chip-date i{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:3px}
.chip-date u{text-decoration:none;font-size:11px;color:var(--muted)}

.pill{display:inline-flex;align-items:center;border-radius:30px;padding:6px 12px;font-size:12.5px;font-weight:700;border:1px solid transparent;white-space:nowrap}
.pill.ruim{color:var(--ruim);background:#e9f5ee;border-color:#bfe3cd}
.pill.laag{color:var(--laag);background:#fbf2dd;border-color:#eed9a6}
/* Nul vrije plaatsen is een getal, geen waarschuwing. De rode knop ernaast
   zegt al dat er niet ingeschreven kan worden. */
.pill.vol{color:var(--muted);background:var(--line-soft);border-color:var(--line)}
.pill.open{color:var(--muted);background:var(--line-soft)}

.soon{display:inline-flex;align-items:center;color:#fff;background:#bdbdbd;font-size:13px;font-weight:700;border-radius:8px;padding:9px 16px;display:inline-block;cursor:default}

.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:44px;text-align:center;color:var(--muted)}
.empty p{margin:0 0 14px}

/* mobiele filter-toggle (verborgen op desktop) */
.filter-toggle{display:none}

/* ---- mobiel ---- */
@media (max-width:820px){
  .field{min-width:140px;flex:1 1 140px}
  .field.grow{flex:1 1 100%}
  .field.actions{margin-left:0;width:100%}
  .field.actions .btn{width:100%;justify-content:center}
}
@media (max-width:760px){
  .filter-toggle{
    display:flex;align-items:center;gap:10px;width:100%;
    margin:18px 0 0;font:inherit;font-weight:700;cursor:pointer;
    background:var(--surface);color:var(--ink);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;min-height:52px;
  }
  .filter-toggle .ft-caret{margin-left:auto;color:var(--muted);transition:transform .15s}
  .filter-toggle[aria-expanded=true] .ft-caret{transform:rotate(180deg);color:var(--brand)}
  .filter-toggle .ft-badge{background:var(--brand);color:#fff;border-radius:20px;font-size:12px;font-weight:800;min-width:22px;height:22px;display:inline-grid;place-items:center;padding:0 6px}
  .filters{display:none;margin:12px 0 20px}
  .filters.open{display:block}
  .pagehead h1{font-size:25px}
  table.opl thead{display:none}
  table.opl,table.opl tbody,table.opl tr,table.opl td{display:block;width:100%}
  .table-card{border:0;background:transparent;box-shadow:none;overflow:visible}
  table.opl tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;padding:4px 2px}
  table.opl tbody td{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line-soft);padding:12px 16px}
  table.opl tbody tr td:last-child{border-bottom:0}
  table.opl tbody td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto}
  td.c-naam{flex-direction:column;align-items:flex-start;gap:2px}
  td.c-naam::before{display:none}
  .c-act{justify-content:flex-end}
  .c-act::before{display:none}
  .chip-date{grid-auto-flow:column;gap:6px;min-width:0;align-items:baseline}
  .chip-date b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== inschrijvingsknop in overzicht ===== */
/* Inschrijven en Volzet staan onder elkaar in dezelfde kolom. Zonder een
   gemeenschappelijke breedte springt de rand per rij op en neer, want
   "Volzet" is korter dan "Inschrijven". min-width en niet width: een
   vertaling die langer uitvalt mag de knop nog steeds laten groeien. */
.btn-inschrijf,.soon{min-width:126px;justify-content:center;text-align:center}
.btn-inschrijf{display:inline-flex;align-items:center;background:var(--inschrijf);color:#fff;font-weight:700;font-size:13px;text-decoration:none;border-radius:8px;padding:9px 16px;white-space:nowrap}
.btn-inschrijf:hover{background:var(--inschrijf-700)}
/* De interesseknop: even breed als inschrijven, maar in omtrek. Wie hier
   klikt krijgt geen plaats maar een plek op een lijst - dat mag je zien. */
.btn-interesse{display:inline-flex;align-items:center;justify-content:center;
  min-width:126px;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:700;
  text-decoration:none;white-space:nowrap;background:#fff;color:var(--inschrijf);
  border:1px solid var(--inschrijf)}
.btn-interesse:hover{background:var(--inschrijf);color:#fff}
/* De gewenste periode, in de melding bovenaan het interesseformulier.
   De velden staan IN de zin: zo leest het als een vraag en niet als een
   formulier dat er nog eens bij komt. */
.notice .notice-kop{margin:0 0 10px;font-weight:700}
.notice .periode{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px}
.periode-veld{display:inline-flex;align-items:center;gap:6px}
/* Wel voorgelezen, niet getoond. Niet display:none of visibility:hidden -
   die halen het ook bij een schermlezer weg, en dan is het datumveld naamloos. */
.enkel-voorlezer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.periode-veld input{font:inherit;font-size:14px;padding:6px 9px;border:1px solid #cfcfcf;
  border-radius:7px;background:#fff;color:var(--ink)}
.opl-geen-data{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.btn-detail.interesse{background:#fff;color:var(--inschrijf);
  border:1px solid var(--inschrijf);margin-top:8px}
.btn-detail.interesse:hover{background:var(--inschrijf);color:#fff}
.soon.vol{background:var(--brand)}

/* ===== inschrijvingsformulier ===== */
.masthead-in .back{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.masthead-in .back:hover{color:var(--brand)}
.form-wrap{padding-bottom:60px}
.pagehead-form h1{margin:26px 0 6px;font-size:28px;font-weight:800;letter-spacing:-.02em}
.pagehead-form h1::after{content:"";display:block;width:54px;height:4px;background:var(--brand);border-radius:3px;margin-top:10px}

.opl-summary{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin:18px 0 8px}
.os-naam{font-size:18px;font-weight:800;letter-spacing:-.01em}
.os-naam span{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:2px}
.os-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:12px;color:var(--ink);font-size:14px}
.os-meta b{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;margin-right:6px}

.notice{border-radius:var(--radius);padding:14px 18px;margin:16px 0;font-weight:600}
.notice.warn{background:#fdeaed;color:var(--brand-700);border:1px solid #f4c2cb}
/* Een geslaagde betaling hoort geen rood kader te krijgen. .notice bestond
   alleen met .warn erbij, en dat is de waarschuwingskleur. */
.notice.goed{background:#e9f2ec;color:#0f5e32;border:1px solid #bcd9c6}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin:16px 0}
.card>h2{margin:0 0 16px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);padding-bottom:10px;border-bottom:2px solid var(--brand);display:inline-block}
.hidden{display:none!important}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.span2{grid-column:1 / -1}
.f label{font-size:12px;font-weight:700;color:var(--muted)}
.f label i,.check i,.vw i{color:var(--brand);font-style:normal}
.f input,.f select,.f textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid #cfcfcf;border-radius:8px;padding:11px 13px;min-height:44px;width:100%}
.f select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23646464' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(228,0,43,.14)}
.hint{margin:2px 0 0;font-size:12.5px;color:var(--muted)}

.keuze{display:flex;gap:12px;flex-wrap:wrap}
.radiocard{flex:1 1 200px;display:flex;align-items:center;gap:10px;border:1px solid #cfcfcf;border-radius:10px;padding:14px 16px;cursor:pointer;font-weight:600}
.radiocard input{width:18px;height:18px;accent-color:var(--brand)}
.radiocard:has(input:checked){border-color:var(--brand);background:#fdeaed}

.checks{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer}
.check input{width:17px;height:17px;margin-top:1px;accent-color:var(--brand)}

.lijst{margin-top:8px}
.radiolist{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.radioline{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;font-size:14px}
.radioline:hover{background:var(--line-soft)}
.radioline input{margin-top:2px;accent-color:var(--brand)}

.deelnemers{display:flex;flex-direction:column;gap:14px}
.deelnemer{position:relative;border:1px solid var(--line);border-radius:10px;padding:16px;background:#fcfcfb}
.deelnemer .verwijder{position:absolute;top:10px;right:10px;border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;width:28px;height:28px;border-radius:6px}
.deelnemer .verwijder:hover{background:#fdeaed;color:var(--brand)}
.add{margin-top:14px}

.vw{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.vw a{color:var(--brand);font-weight:600;text-decoration:none}
.vw a:hover{text-decoration:underline}

.submitbar{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:8px;flex-wrap:wrap}
.frm-msg{font-weight:600;font-size:14px}
.frm-msg.err{color:var(--brand-700)}
.frm-msg.ok{color:#1f7a3d}

@media (max-width:680px){ .grid{grid-template-columns:1fr} .submitbar{justify-content:stretch} .submitbar .btn{width:100%;justify-content:center} }

/* bedankblok na inschrijving */
.bedankt{text-align:center;padding:40px 24px}
.bedankt h2{border-bottom:0;display:block;font-size:20px;text-transform:none;letter-spacing:-.01em;margin-bottom:8px}
.bedankt p{color:var(--muted);margin:0 0 20px}

/* ondernemingsnummer-feedback (VIES / controlegetal) */
.nr-feedback{margin-top:8px;font-size:13px;font-weight:600;min-height:1px}
.nr-feedback.ok{color:#1f7a3d}
.nr-feedback.err{color:var(--brand-700)}
.nr-feedback.warn{color:#9a6a12}
.nr-bevestig{margin-top:12px}

/* foutmarkering bij indienen (ontbrekende/foute blokken lichtrood) */
.f.veld-fout input,.f.veld-fout select,.f.veld-fout textarea{border-color:var(--brand);background:#fdeaed}
.f.veld-fout label{color:var(--brand-700)}
.check.veld-fout{color:var(--brand-700);font-weight:600}
.deelnemer.veld-fout{border-color:var(--brand);background:#fdeaed}

/* interesse-rijen (opleidingssoorten zonder boekbare datum) */
.interesse-rij .c-geen-datums{color:#5b6770;font-style:italic}
.btn-inschrijf.interesse{background:var(--brand-700,#0e5a2e)}



/* --- de detailpagina -----------------------------------------------------
   Overgenomen uit het <style>-blok van opleiding-detail.php van de agenda
   die vandaag draait. Daar stond het in de pagina zelf; hier hoort het,
   want anders staat de opmaak van de site op twee plaatsen.

   EEN WIJZIGING: de kleuren zijn omgezet naar de variabelen bovenaan. In
   het origineel staan groentinten (#127039, #2b6b46) hardgecodeerd,
   terwijl de lijstpagina TVH-rood gebruikt. Dat leek een overblijfsel van
   een eerder ontwerp, en hardgecodeerde kleuren van een klant horen sowieso
   niet in een bestand dat bij dertig klanten draait. Maten, afrondingen en
   afstanden zijn onaangeroerd.
   -------------------------------------------------------------------- */

.detail-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.detail-back { display: inline-block; margin-bottom: 14px; color: var(--brand); text-decoration: none; font-weight: 600; }
.detail-back:hover { text-decoration: underline; }
.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.detail-main h1 { font-size: 28px; line-height: 1.15; margin: 0 0 18px; color: var(--ink); }
.detail-block { margin: 0 0 22px; }
.detail-block h2 { font-size: 18px; margin: 0 0 8px; color: var(--brand); }
.detail-block .inhoud { color: var(--ink); line-height: 1.6; }
.detail-block .inhoud p { margin: 0 0 10px; }
.detail-block .inhoud ul, .detail-block .inhoud ol { margin: 0 0 10px 20px; }
.detail-card { background: #fafafa; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; }
.detail-card h2 { font-size: 18px; margin: 0 0 14px; color: var(--ink); }
.pr-rij { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.pr-rij:last-of-type { border-bottom: none; }
.pr-rij .lbl { color: var(--muted); min-width: 120px; }
.pr-rij .val { color: var(--ink); font-weight: 600; }
.pr-prijs { font-size: 22px; font-weight: 800; color: var(--brand); margin: 6px 0 2px; }
.pr-prijs small { font-size: 12px; font-weight: 600; color: var(--muted); }
.pr-regels { list-style: none; margin: 0 0 8px; padding: 0; }
.pr-regels li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink); padding: 3px 0; }
.pr-regels li + li { border-top: 1px solid var(--line-soft); }
.pr-totaal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 2px solid var(--line); padding-top: 8px; }
.btn-detail { display: inline-block; width: 100%; text-align: center; box-sizing: border-box;
  background: var(--brand); color: #fff; border-radius: 999px; padding: 12px 18px; font-weight: 700;
  text-decoration: none; margin-top: 14px; }
.btn-detail:hover { background: var(--brand-700); }
.btn-detail.uit { background: var(--line); color: var(--muted); pointer-events: none; }
.pr-plaatsen { font-weight: 700; }
.pr-plaatsen.laag { color: var(--laag); }
.pr-plaatsen.vol  { color: var(--vol); }
.detail-leeg { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px; text-align: center; color: var(--muted); }
.pr-geen-datums { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.onderdelen { margin-top: 34px; }
.onderdelen h2 { font-size: 20px; margin: 0 0 14px; color: var(--ink); }
.onderdelen-tabel { width: 100%; border-collapse: collapse; font-size: 14px; border-radius: 10px; overflow: hidden; }
.onderdelen-tabel thead th { background: var(--ink); color: #fff; text-align: left; padding: 12px 16px; font-weight: 700; }
.onderdelen-tabel tbody td { padding: 12px 16px; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.onderdelen-tabel tbody tr:nth-child(even) { background: #fafafa; }
.onderdelen-tabel tbody tr:last-child td { border-bottom: none; }
.onderdelen-tabel .nog { color: var(--muted); font-style: italic; }
@media (max-width: 640px) {
  .onderdelen-tabel thead { display: none; }
  .onderdelen-tabel tbody td { display: block; padding: 6px 14px; border: none; }
  .onderdelen-tabel tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .onderdelen-tabel tbody td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
  .onderdelen-tabel tbody td.naam-cel::before { content: ""; }
  .onderdelen-tabel tbody td.naam-cel { font-weight: 700; }
}
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; } }

/* Twee klassen die in het origineel niet voorkwamen: daar heette het
   rechterkolom-blok anders en stond de soortnaam er niet bij. */
.detail-aside { display: block; }
.detail-soort { margin: -10px 0 18px; color: var(--muted); font-size: 15px; }
.pr-rij .val small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }
/* De pill uit de lijsttabel wordt ook in het praktische kader gebruikt. */
.detail-card .pill { font-size: 12px; }

/* --- het inschrijfformulier ---------------------------------------------
   Hier stond een eigen opmaak met .veldgroep, .velden en .veld. Overbodig:
   de stylesheet die hierboven uit de draaiende agenda is overgenomen bevat
   .card, .grid, .f, .radiocard, .check, .deelnemer en .submitbar al. Ik had
   die klassenamen niet gebruikt en dus een tweede opmaak gebouwd naast een
   die er al was - met een formulier dat er anders uitzag als gevolg.

   Wat hieronder overblijft is het lokvak, dat in het origineel niet bestaat.
   -------------------------------------------------------------------- */
/* Niet display:none - sommige scripts slaan verborgen velden over, en dan
   vangt het niets. Wel buiten beeld. */
.lokvak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* .check zet display:flex, en dat wint van het hidden-attribuut. Zonder deze
   regel blijft het bevestigingsvinkje altijd staan, ook als de controle nog
   niets te melden heeft. */
[hidden]{display:none !important}
/* Een veld dat overgenomen is van de contactpersoon. Grijs en alleen-lezen,
   zodat meteen te zien is dat het meeloopt en niet zomaar leeg gelaten is. */
.f input.overgenomen{background:#f4f5f6;color:var(--muted);cursor:default}
.f input.overgenomen:focus{border-color:#cfcfcf;box-shadow:none}
button.klein{font-size:12px;padding:4px 10px;min-height:0}
form.inline{display:inline}

/* --- de lijst met inschrijvingen (beheer) ------------------------------ */
.inschrijvingen td{vertical-align:top}
.staat{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700}
.staat.s-nieuw{background:#eef1f3;color:var(--muted)}
.staat.s-gesimuleerd{background:var(--goed-grond);color:#2b6b46}
.staat.s-verstuurd{background:var(--goed-grond);color:#1f7a3d}
.staat.s-mislukt{background:var(--fout-grond);color:var(--fout-inkt)}
.staat.s-vervallen{background:#eef1f3;color:var(--muted)}
/* De twee statussen van de betaling. Geen rood - er is niets stuk, er is een
   verkoop niet doorgegaan. Amber, dezelfde toon als de aandachttegel. */
.staat.s-wacht_op_betaling{background:#fdfaf2;color:#b45309;box-shadow:inset 0 0 0 1px #e6c98a}
.staat.s-niet_betaald{background:#fdfaf2;color:#b45309;box-shadow:inset 0 0 0 1px #e6c98a}
.fout-tekst{color:var(--fout-inkt)}
.uitgeklapt{background:#fafafa}
.uitgeklapt h3{font-size:14px;margin:12px 0 4px}
/* De payload kan lang zijn. Laten rollen in plaats van de pagina op te rekken. */
.payload{max-height:420px;overflow:auto;background:var(--grond);border:1px solid var(--rand);border-radius:3px;padding:10px 12px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5;white-space:pre;margin:0 0 10px}

/* --- toevoeging op de overgenomen opmaak ---------------------------------
   De draaiende agenda heeft altijd het TVH-logo linksboven. Deze agenda draait
   bij dertig klanten, en zolang er voor een klant geen logo staat, komt daar
   zijn naam als tekst. Die had nog geen opmaak.
   Dit is bewust het enige dat aan het publieke deel is toegevoegd. */
.brand-naam{font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.brand{text-decoration:none}

/* De opleidingsnaam is een link maar hoort er niet als een link uit te zien:
   in de draaiende agenda staat daar een inline style met text-decoration:none
   en color:inherit op. Dat hoort in de stylesheet en niet in de markup. */
a.opl-naam{text-decoration:none;color:inherit}
a.opl-naam:hover{color:var(--brand)}

/* --- paginering ---------------------------------------------------------
   Nieuw ten opzichte van de draaiende agenda: die toont alles op één pagina.
   Bij honderd opleidingen wordt dat een lange rol, vandaar. De vormtaal is
   die van de rest: dezelfde randen, dezelfde radius, het merk voor de
   huidige pagina. */
.paginering{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:12px;margin:18px 0 40px;
}
.pag-telling{margin:0;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.pag-lijst{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.pag-lijst a,.pag-lijst .nu,.pag-lijst .uit{
  display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 11px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
  font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pag-lijst a:hover{border-color:var(--brand);color:var(--brand)}
.pag-lijst .nu{background:var(--brand);border-color:var(--brand);color:#fff}
/* Uitgeschakeld, niet weggelaten: zo blijft de rij knoppen op dezelfde plek
   staan wanneer je doorbladert. */
.pag-lijst .uit{color:#b6b6b6;border-color:var(--line-soft);background:transparent}
.pag-lijst a:focus-visible,.filter-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

@media (max-width:560px){
  .paginering{justify-content:center}
  .pag-lijst a,.pag-lijst .nu,.pag-lijst .uit{min-width:34px;height:34px;padding:0 8px}
}

/* De kleurnamen van het beheer.

   Deze negen werden drieendertig keer gebruikt en nergens gedefinieerd: ze
   bleven achter toen de bladwijzer eronder vervangen werd. Een css-variabele
   die niet bestaat geeft geen fout - de regel valt weg. Het etiket "mislukt"
   verloor daardoor zijn achtergrond, en een melding na het opslaan haar grond
   en rand.

   De waarden zijn afgeleid van de p-tokens die het beheer al draagt, zodat de
   oudere regels en de kaarten dezelfde taal spreken. */
:root {
  --grond: #f6f5f2;
  --rand: #d9ded9;
  --inkt: #0f1a14;
  --grijs: #5a6a61;
  --goed-grond: #e9f2ec;
  --goed-rand: #bcd9c6;
  --fout-grond: #fbeded;
  --fout-rand: #e3b4b4;
  --fout-inkt: #8a2b2b;
}

/* --- alleen het beheer ---------------------------------------------------
   De publieke kalender krijgt straks de vormtaal van de draaiende agenda.
   Het beheer niet: dat is een werkscherm en hoort bij Promatis360. Vandaar
   .beheer eromheen - zo gaan deze regels niet mee wanneer de publieke opmaak
   vervangen wordt. */

.beheer h2 { font-size: 19px; margin: 32px 0 8px; }
.beheer h3 { font-size: 15px; margin: 24px 0 6px; color: var(--grijs); }
.beheer .kenmerken { grid-template-columns: minmax(140px, auto) 1fr; }
.beheer .kenmerken.instelbaar { align-items: baseline; gap: 12px 16px; }
.beheer .kenmerken.instelbaar dd { font-family: inherit; }
.beheer .kenmerken.instelbaar input, .beheer .kenmerken.instelbaar select {
  font: inherit;
  font-size: 14px;
  padding: 6px 9px;
  border: 1px solid var(--rand);
  border-radius: 3px;
  background: var(--grond);
  color: var(--inkt);
  margin-right: 10px;
}
.beheer .kenmerken.instelbaar input { width: 90px; font-variant-numeric: tabular-nums; }
.beheer .kenmerken.instelbaar .uitleg { display: inline; font-size: 13px; }

.melding {
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px solid var(--rand);
  border-left-width: 4px;
  border-radius: 3px;
  font-size: 14px;
}
.melding.goed { background: var(--goed-grond); border-color: var(--goed-rand); }
.melding.fout { background: var(--fout-grond); border-color: var(--fout-rand); color: var(--fout-inkt); }

.stand {
  border-collapse: collapse;
  width: 100%;
  max-width: 560px;
  font-size: 14px;
}
.stand th, .stand td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--rand);
  text-align: left;
}
.stand th { color: var(--grijs); font-weight: 600; }
/* Getallen die je met elkaar vergelijkt, horen recht onder elkaar te staan -
   tabular-nums zorgt dat de cijfers even breed zijn. */
.stand .getal { text-align: right; font-variant-numeric: tabular-nums; }
.stand .tabelnaam { color: var(--grijs); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.stand .ontbreekt { color: var(--fout-inkt); }

/* De trechter. De regel waar het getal wegzakt is het antwoord, dus die moet
   eruit springen zonder dat de hele tabel gaat schreeuwen. */
.trechter td:first-child { padding-left: 0; }
.trechter .verschil {
  width: 70px;
  text-align: right;
  color: var(--grijs);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.trechter tr.gezakt .verschil { color: var(--fout-inkt); }
.trechter tr.leeggelopen { background: var(--fout-grond); }
.trechter tr.leeggelopen td { font-weight: 600; color: var(--fout-inkt); }

.verdelingen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 28px;
  margin-top: 8px;
}
.verdelingen .stand { max-width: none; }

.naast-elkaar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.naast-elkaar .uitleg { margin: 0; flex: 1 1 22ch; font-size: 13px; }

.beheer button.rustig {
  background: transparent;
  color: var(--inkt);
  border-color: var(--rand);
}
.beheer button.rustig:hover { border-color: var(--inkt); opacity: 1; }

.beheer button {
  font: inherit;
  font-size: 14px;
  padding: 7px 16px;
  border: 1px solid var(--inkt);
  border-radius: 3px;
  background: var(--inkt);
  color: var(--grond);
  cursor: pointer;
}
.beheer button:hover { opacity: .88; }
.beheer button:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }

/* Het cronadres draagt een geheim en is lang. Laten aflopen in plaats van de
   pagina breed te maken. */
.adres {
  margin: 0;
  padding: 10px 12px;
  background: #F5F6F8;
  border: 1px solid var(--rand);
  border-radius: 3px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  overflow-x: auto;
}

/* Locatie bij een onderdeel: naam op de eerste regel, adres eronder. Het
   adres komt van het bedrijf achter de locatie - bezoekadres als dat er is,
   anders het postadres. */
.onderdelen-tabel .loc-naam{display:block;font-weight:600}
.onderdelen-tabel .loc-adres{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}

/* --- de beheerpagina van de klant ----------------------------------------
   Deze pagina begon als werkbank voor onszelf en dat was eraan te zien: een
   rij koppen met tabellen eronder. Maar dit is wat een opleidingscentrum ziet
   als het inlogt.

   De vormtaal komt van de andere modules: de KMOP-tool en de cursist-admin
   hebben allebei een witte balk met het logo, een grijze ondergrond en witte
   kaarten met veel lucht. Drie modules die er alle drie anders uitzien, laten
   een klant twijfelen of hij nog in hetzelfde systeem zit. De tokens hieronder
   zijn letterlijk die van promatis.css uit de KMOP-tool, zodat het niet bij
   "ongeveer hetzelfde" blijft. */

/* Op :root en niet op .beheer. De balk hierboven staat buiten .beheer - met
   opzet, hij hoort bij de pagina - en gebruikt var(--p-groen) om te tonen waar
   je staat. Stonden de namen op .beheer, dan betekenden ze daar niets: het
   actieve menu-item werd wit op wit en verdween uit de balk. */
:root {
  --p-groen:#127039;
  --p-groen-700:#0f5e32;
  --p-blauw:#2388bf;
  --p-blauw-700:#1c72aa;
  --p-inkt:#0f1a14;
  --p-leisteen:#2c3a33;
  --p-grijs:#5a6a61;
  --p-rand:#d9ded9;
  --p-vlak:#f6f5f2;
  --p-wit:#ffffff;
  --p-radius:16px;
}

/* De balk staat buiten .beheer - hij hoort bij de pagina, niet bij de inhoud. */
.p-balk { background:#fff; border-bottom:1px solid #d9ded9; }
.p-balk-binnen {
  max-width:1100px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.p-merk { display:flex; align-items:center; gap:12px; }
.p-logo { height:44px; width:auto; display:block; }
/* HIER STOND .p-merkteken: een vierkantje met een verloop van blauw naar
   groen, als terugval wanneer een centrum geen eigen logo heeft. Die kleuren
   komen uit geen enkele huisstijl - in het beheer werken wij met die van
   Promatis. De terugval is nu het Promatis-logo zelf; zie Agenda::beheerKop().
   De regel is weg in plaats van ongebruikt te blijven staan: opmaak waar niets
   meer naar wijst, is opmaak die niemand nog durft aan te raken. */
.p-merk-titel { display:flex; flex-direction:column; line-height:1.15; }
.p-merk-titel strong { font-weight:700; font-size:16px; color:#0f1a14; }
.p-merk-titel span { color:#5a6a61; font-size:12px; margin-top:2px; }

.p-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.p-nav-link {
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:12px;
  border:1px solid transparent; color:#2c3a33; font-weight:700; font-size:13px;
  text-decoration:none;
}
.p-nav-link:hover { border-color:#d9ded9; background:rgba(15,26,20,.03); color:#0f1a14; }

/* Waar je nu staat. Zonder dit zijn alle menu-items gelijk en weet je het niet. */
.p-nav-link.nu { background:var(--p-groen); color:#fff; }
.p-nav-link.nu:hover { background:var(--p-groen-700); color:#fff; border-color:transparent; }

/* Uitloggen en de weg terug horen bij de balk maar zijn geen scherm. */
.p-nav-link.rustig { color:#5a6a61; font-weight:600; }
.p-nav-scheiding {
  width:1px; height:20px; background:#d9ded9; margin:0 4px;
}
@media (max-width:640px) { .p-nav-scheiding { display:none; } }

/* De inhoud eronder. */
body:has(.p-balk) { background:#f6f5f2; }
.beheer { max-width:1100px; margin:0 auto; padding:24px; }

.beheer-kop {
  display:flex; flex-wrap:wrap; gap:12px 24px;
  align-items:flex-end; justify-content:space-between; margin:0 0 22px;
}
.beheer-kop h1 { margin:0; font-size:28px; line-height:1.2; color:var(--p-inkt); }
.beheer-sub { margin:5px 0 0; color:var(--p-grijs); font-size:14px; }
.beheer-bekijk {
  display:inline-block; background:var(--p-groen); color:#fff; font-weight:700;
  font-size:13px; text-decoration:none; border-radius:12px; padding:10px 16px; white-space:nowrap;
}
.beheer-bekijk:hover { background:var(--p-groen-700); }
.beheer-bekijk::after { content:" \2197"; }

/* Twee getallen. Meer zou weer een dashboard worden, en daar was het net om
   begonnen. */
.stat-rij { display:flex; flex-wrap:wrap; gap:16px; margin:0 0 18px; }
.stat {
  flex:1 1 220px; background:var(--p-wit); border:1px solid var(--p-rand);
  border-radius:var(--p-radius); padding:20px 22px;
  display:flex; flex-direction:column; gap:4px;
}
.stat b {
  font-size:32px; line-height:1.05; font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--p-inkt);
}
.stat span { color:var(--p-grijs); font-size:13.5px; }
.stat.aandacht { border-color:#e6c98a; background:#fdfaf2; }
.stat.aandacht b { color:#b45309; }

.beheer .kaart {
  background:var(--p-wit); border:1px solid var(--p-rand);
  border-radius:var(--p-radius); padding:24px; margin:0 0 16px;
}
.beheer .kaart > h2 { margin:0 0 6px; font-size:16px; font-weight:800; color:var(--p-inkt); }
.beheer .kaart .uitleg { color:var(--p-grijs); font-size:14px; }
.beheer h3 { color:var(--p-leisteen); }

.beheer .melding { border-radius:12px; padding:14px 16px; margin:0 0 16px; }

.knop-link {
  display:inline-block; background:var(--p-groen); color:#fff; font-weight:700;
  font-size:13px; text-decoration:none; border-radius:12px; padding:10px 16px;
}
.knop-link:hover { background:var(--p-groen-700); }

.beheer button {
  border-radius:12px; background:var(--p-groen); color:#fff; font-weight:700;
  /* Uitdrukkelijk, want de oudere regel hierboven zet border:1px solid
     var(--inkt). Zolang die naam niets betekende viel de rand terug op de
     tekstkleur en zag je hem niet; nu wel. */
  border:1px solid var(--p-groen);
}
.beheer button:hover { background:var(--p-groen-700); opacity:1; }
.beheer button.rustig {
  background:#fff; color:var(--p-leisteen); border:1px solid var(--p-rand);
}
.beheer button.rustig:hover { background:rgba(15,26,20,.03); border-color:var(--p-rand); }

/* De tekstvelden mogen breed: hier komt een volzin in, geen getal. De regel
   verderop zet elk invoerveld op 90px, en dat is voor een zin te smal. */
.beheer .kenmerken.instelbaar textarea {
  width:100%; max-width:620px; font:inherit; padding:9px 11px;
  border:1px solid var(--p-rand); border-radius:10px; resize:vertical;
}
.beheer .kenmerken.instelbaar input[type=url] { width:100%; max-width:620px; }
.beheer .kenmerken.instelbaar input, .beheer .kenmerken.instelbaar select {
  border-radius:10px; border-color:var(--p-rand);
}
.beheer .kenmerken.instelbaar .uitleg { display:block; margin-top:5px; }

/* De documenten naast elkaar zolang er plaats is. */
.doc-lijst { display:flex; flex-wrap:wrap; gap:16px; }
.doc {
  flex:1 1 300px; border:1px solid var(--p-rand); border-radius:12px;
  padding:16px 18px; background:var(--p-vlak);
}
.doc h3 { margin:0 0 8px; font-size:14px; font-weight:800; color:var(--p-inkt); }
.doc-nu { margin:0 0 10px; }
.doc-nu .uitleg { display:block; margin-top:3px; font-size:12.5px; }
.doc-knoppen { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.doc-knoppen form { margin:0; }
.uitleg.let-op { color:#b45309; }

/* --- talen en vertalingen ----------------------------------------------- */

/* Een rij velden of knoppen naast elkaar, die netjes doorbreekt op een smal
   scherm. Wordt gebruikt voor de taalkiezer en het formulier om een taal toe
   te voegen. */
.beheer .rij { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; }
.beheer .rij label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--grijs); }
.beheer .rij input {
  font:inherit; font-size:14px; padding:8px 10px;
  border:1px solid var(--p-rand); border-radius:10px; background:var(--grond); width:auto;
}
.beheer .rij form.inline { margin:0; }

/* EEN SELECT ZAG ER IN HET BEHEER NIET UIT.
   Hierboven stond alleen .rij input; een keuzelijst kreeg dus de kale opmaak
   van de browser en stond als enige bedieningselement uit de toon. Zelfde rand,
   zelfde ronding, zelfde hoogte als een invoerveld, met een eigen pijltje zodat
   hij op elke browser hetzelfde oogt. */
.beheer .rij select,
.beheer select.tc-keuze,
.beheer .tc-veld select {
  font:inherit; font-size:14px; padding:8px 30px 8px 10px;
  border:1px solid var(--p-rand); border-radius:10px; background-color:var(--grond);
  color:var(--p-inkt); min-height:38px; max-width:100%;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23646464' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.beheer .rij select:focus,
.beheer select.tc-keuze:focus,
.beheer .tc-veld select:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(228,0,43,.14);
}

/* --- de taalcategorie ---------------------------------------------------- */

/* Het ophalen staat apart van het kiezen. Het is een handeling die je zelden
   doet, en ze hoort niet tussen de keuzes waar je elke keer langs moet. */
.beheer .tc-ophalen {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding:10px 12px; margin:12px 0 18px;
  background:var(--p-vlak); border:1px solid var(--p-rand); border-radius:12px;
}
.beheer .tc-ophalen .uitleg { margin:0; }

/* Twee stappen, en ze staan in een volgorde die ertoe doet: zonder groep is de
   lijst per taal onbruikbaar lang. Het nummer maakt dat zichtbaar zonder dat er
   een zin voor nodig is. */
.beheer .tc-stap { display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; }
.beheer .tc-stap:last-child { margin-bottom:0; }
.beheer .tc-nr {
  flex:0 0 auto; width:22px; height:22px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--p-inkt); color:#fff;
  font-size:12px; font-weight:800; line-height:1;
}
.beheer .tc-inhoud { flex:1 1 auto; min-width:0; }
.beheer .tc-label {
  display:block; font-size:13px; font-weight:700; color:var(--p-inkt); margin-bottom:6px;
}
.beheer .tc-veld { display:block; max-width:420px; }
.beheer .tc-veld select { width:100%; }
.beheer .tc-inhoud .uitleg { margin:6px 0 0; }
.beheer .tc-inhoud button { margin-top:12px; }

/* De tabel: links lees je, rechts kies je. Even breed zou verkeerd zijn, net
   als bij de vertaaltabel. */
.beheer table.tc-tabel { max-width:760px; }
.beheer table.tc-tabel td:first-child { width:38%; white-space:nowrap; }
.beheer table.tc-tabel select { width:100%; max-width:340px; }
.beheer .tc-taal { font-weight:600; }
.beheer .tc-code {
  display:inline-block; margin-left:6px; padding:1px 6px;
  border-radius:6px; background:var(--p-vlak); color:var(--grijs);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.beheer .tc-uit { margin-left:6px; font-size:12px; color:var(--grijs); font-style:italic; }

@media (max-width:640px) {
  .beheer table.tc-tabel td:first-child { width:auto; white-space:normal; }
  .beheer table.tc-tabel select { max-width:none; }
}

/* Een brede tabel mag binnen zijn eigen kader schuiven. De pagina zelf hoort
   nooit zijwaarts te schuiven - dat is op een telefoon niet te bedienen. */
.beheer .schuif { overflow-x:auto; }

/* De vertaaltabel. Links onze tekst als naslag, rechts het veld. Beide even
   breed zou verkeerd zijn: je leest links en typt rechts. */
.beheer table.vertaal { width:100%; border-collapse:collapse; font-size:14px; }
.beheer table.vertaal th {
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--grijs); font-weight:700; padding:6px 10px 8px; border-bottom:1px solid var(--p-rand);
}
.beheer table.vertaal td {
  padding:8px 10px; border-bottom:1px solid var(--p-vlak); vertical-align:top;
}
.beheer table.vertaal td:first-child { color:var(--grijs); line-height:1.45; }
.beheer table.vertaal textarea {
  width:100%; font:inherit; font-size:14px; padding:8px 10px;
  border:1px solid var(--p-rand); border-radius:10px; resize:vertical;
}
.beheer table.vertaal .uitleg { display:block; margin-top:4px; }
.beheer .groepkop { margin:16px 0 6px; font-size:14px; font-weight:800; color:var(--p-inkt); }

/* Een rij keuzeknoppen: talen, of onderdelen van het portaal.
 *
 * De gekozen knop is gevuld, de rest is een omtrek. Waren ze alle vier gevuld -
 * en dat waren ze - dan zie je niet waar je bent, en op een scherm waar je per
 * taal en per onderdeel bewaart is dat geen schoonheidsfoutje: dan typ je in
 * de verkeerde taal. */
.beheer .knoppenrij { margin-bottom:14px; align-items:center; }
.beheer a.knop-link {
  border:1px solid transparent; line-height:1.2;
  display:inline-flex; align-items:center; gap:7px;
}
.beheer a.knop-link.rustig {
  background:#fff; color:var(--p-leisteen); border-color:var(--p-rand); font-weight:600;
}
.beheer a.knop-link.rustig:hover { background:var(--p-vlak); border-color:var(--p-leisteen); }
.beheer a.knop-link.nu { background:var(--p-groen); color:#fff; border-color:var(--p-groen); }
.beheer a.knop-link:focus-visible { outline:2px solid var(--p-inkt); outline-offset:2px; }

/* Het aantal zinnen in een onderdeel. Meelezen mag, opvallen niet. */
.beheer .knop-link .aantal {
  font-weight:600; font-size:11.5px; padding:1px 6px; border-radius:20px;
  background:rgba(15,26,20,.07); color:inherit;
}
.beheer .knop-link.nu .aantal { background:rgba(255,255,255,.22); }

/* --- de mailteksten ------------------------------------------------------ */

.beheer .mailveld { margin:20px 0 0; }
.beheer .mailveld > label {
  display:block; font-weight:700; font-size:14px; color:var(--p-inkt); margin-bottom:6px;
}
.beheer .mailveld > .uitleg { display:block; margin-top:6px; }
.beheer .mailveld input.breed {
  width:100%; max-width:640px; font:inherit; font-size:14px; padding:9px 11px;
  border:1px solid var(--p-rand); border-radius:10px; background:var(--grond);
}

/* De editor. Bewust weinig knoppen: zie de uitleg in mails.php. */
.beheer .editor {
  max-width:640px; border:1px solid var(--p-rand); border-radius:10px; overflow:hidden;
  background:#fff;
}
.beheer .editor-balk {
  display:flex; gap:2px; padding:6px; background:var(--p-vlak);
  border-bottom:1px solid var(--p-rand);
}
.beheer .editor-balk button {
  min-width:32px; height:30px; padding:0 8px; border-radius:7px;
  background:transparent; color:var(--p-inkt); border:1px solid transparent;
  font-size:13px; font-weight:600; line-height:1;
}
.beheer .editor-balk button:hover { background:#fff; border-color:var(--p-rand); }
.beheer .editor-vlak {
  min-height:120px; padding:12px 14px; font:inherit; font-size:14.5px; line-height:1.6;
  color:var(--inkt); outline:none;
}
.beheer .editor-vlak:focus { box-shadow:inset 0 0 0 2px rgba(31,86,115,.12); }
.beheer .editor-vlak p { margin:0 0 10px; }
.beheer .editor-vlak p:last-child { margin-bottom:0; }
.beheer .editor-vlak h3 { font-size:15px; margin:14px 0 6px; }
.beheer .editor-vlak ul, .beheer .editor-vlak ol { margin:0 0 10px; padding-left:22px; }

/* Het voorbeeld in een iframe: zo kleurt de opmaak van het beheer niet door de
   mail heen en zie je werkelijk wat er verstuurd wordt. */
.beheer .mailvoorbeeld {
  width:100%; max-width:700px; height:520px; border:1px solid var(--p-rand);
  border-radius:10px; background:#f3f5f6;
}

/* Een lijst binnen een kaart. Ze hing aan .stand, en dat is de stijl van de
   smalle teltabellen: afgetopt op 560 pixels. Zes kolommen persten zich daarin. */
.beheer table.lijst { width:100%; border-collapse:collapse; font-size:14px; }
.beheer table.lijst th {
  text-align:left; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--p-grijs);
  padding:0 12px 8px; border-bottom:1px solid var(--p-rand); white-space:nowrap;
}
.beheer table.lijst td {
  padding:12px; border-bottom:1px solid var(--p-rand); vertical-align:top;
}
.beheer table.lijst tr:last-child td { border-bottom:0; }
.beheer table.lijst th:first-child, .beheer table.lijst td:first-child { padding-left:0; }
.beheer table.lijst th:last-child, .beheer table.lijst td:last-child { padding-right:0; }
.beheer table.lijst .getal { text-align:right; font-variant-numeric:tabular-nums; }
/* Naam op de eerste regel, e-mail of datum eronder - niet als monospace-code,
   dat leest hier als iets technisch terwijl het gewoon een adres is. */
.beheer table.lijst .tabelnaam {
  display:block; color:var(--p-grijs); font-size:12.5px; margin-top:2px; font-family:inherit;
}
.beheer table.lijst .ontbreekt { color:var(--p-grijs); font-style:italic; }
/* Bekijken en opnieuw naast elkaar, rechts uitgelijnd. */
.beheer table.lijst .acties {
  text-align:right; white-space:nowrap;
  display:flex; gap:10px; justify-content:flex-end; align-items:center;
}
.beheer table.lijst .acties a { color:var(--p-groen); font-weight:600; text-decoration:none; }
.beheer table.lijst .acties a:hover { text-decoration:underline; }
.beheer button.klein { padding:5px 10px; font-size:12px; }

/* Het uitgeklapte bericht. Binnen een kaart hoort dat een eigen vlak te zijn en
   geen tweede tabelrij die toevallig grijs is. */
.beheer .uitgeklapt { background:var(--p-vlak); border-radius:12px; }
.beheer .payload { border-radius:10px; background:#fff; border-color:var(--p-rand); }
.beheer .uitgeklapt h3 { margin:4px 0 4px; font-size:14px; }

@media (max-width:640px) {
  .p-balk-binnen { padding:12px 16px; }
  .beheer { padding:16px; }
  .beheer .kaart { padding:18px; }
  .beheer-kop { align-items:flex-start; }
}