/**
 * BodyTec bovenop het aangekochte sjabloon.
 *
 * Hun opmaak blijft volledig staan; dit bestand komt er als laatste overheen
 * en doet precies drie dingen: de merkkleur zetten, de eigen bouwstenen
 * vormgeven die zij niet hebben, en de gaten dichten die in hun opmaak zitten.
 *
 * Dat laatste is niet vrijblijvend. Het sjabloon heeft nergens een zichtbare
 * focusrand — :focus haalt de schaduw weg en houdt dezelfde randkleur — en
 * hun getinte etiketten halen op wit rond 1,9 op tien. Wie met een toetsenbord
 * werkt is daar stuurloos, en wie slecht ziet leest de status niet. Dat mag
 * niet in een portaal met gezondheidsgegevens.
 */

:root {
  --bt: #009cde;          /* PMS 2925 */
  --bt-diep: #007ab0;     /* dezelfde kleur, donker genoeg voor tekst op wit */
  --bt-licht: #e6f5fc;
}

/* De merkkleur van het sjabloon overschrijven op de plekken waar hun eigen
   variabelen doorwerken. Zij gebruiken Bootstrap's primary. */
:root,
[data-bs-theme="dark"] {
  --bs-primary: #009cde;
  --bs-primary-rgb: 0, 156, 222;
  --bs-link-color: #007ab0;
  --bs-link-hover-color: #005c85;
}

.btn-primary {
  --bs-btn-bg: #009cde;
  --bs-btn-border-color: #009cde;
  --bs-btn-hover-bg: #0086c0;
  --bs-btn-hover-border-color: #0086c0;
  --bs-btn-active-bg: #00719f;
  --bs-btn-active-border-color: #00719f;
}

.btn-outline-primary {
  --bs-btn-color: #007ab0;
  --bs-btn-border-color: #009cde;
  --bs-btn-hover-bg: #009cde;
  --bs-btn-hover-border-color: #009cde;
}

.progress-bar { background-color: #009cde; }

/* De schermnaam in de kopbalk. Het sjabloon had daar een zoekbalk; bij het
   lid is die weggehaald en bleef 1100 pixels leeg. Nu staat er waar je bent —
   ook als <h1>, want dat ontbrak op elk scherm en dan heeft een schermlezer
   geen enkel houvast. */
.bt-schermnaam {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 560px) { .bt-schermnaam { display: none; } }

/* ---------------------------------------------------------------------
 * Merknaam
 * ------------------------------------------------------------------ */

.btmerk {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.btmerk small {
  display: block;
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bt);
  margin-top: 2px;
}

.btmerk-stip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bt);
  display: inline-block;
  flex: 0 0 auto;
  margin-right: 10px;
}

.codex-brand a { text-decoration: none; }

/* ---------------------------------------------------------------------
 * Aanmeldscherm
 * ------------------------------------------------------------------ */

.bt-aanmeldpagina {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(0, 156, 222, 0.13), transparent 62%),
    radial-gradient(880px 460px at 108% 108%, rgba(0, 156, 222, 0.09), transparent 60%),
    #f4f7fb;
}

.bt-aanmeldvak { width: 100%; max-width: 420px; }
.bt-aanmeldvak .card-body { padding: 2.4rem; }

.bt-aanmeldmerk {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  margin-bottom: 1.8rem;
}

/* ---------------------------------------------------------------------
 * Kerncijfers — hun kaart, onze tinten
 * ------------------------------------------------------------------ */

.stat-icon,
.stat-card .stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bt-licht);
  color: var(--bt-diep);
}

.stat-icon.success { background: #e4f6ec; color: #0f7a43; }
.stat-icon.info    { background: #e6f5fc; color: #00618c; }
.stat-icon.warning { background: #fdf2dd; color: #8a6100; }
.stat-icon.danger  { background: #fdeaea; color: #b3261e; }

.stat-card h4 { font-size: 1.85rem; letter-spacing: -0.03em; }
.stat-card .bt-onder { font-size: 0.8rem; color: #5c6572; margin-top: 2px; }
.stat-card .progress { height: 6px; border-radius: 99px; }

/* Hun etiketten dragen te weinig contrast om een status mee te lezen.
   Dezelfde vorm, kleuren die de norm halen. */
.badge-primary   { background: var(--bt-licht); color: #005f88; }
.badge-success   { background: #e4f6ec; color: #0f6b3c; }
.badge-info      { background: #e6f5fc; color: #00618c; }
.badge-warning   { background: #fdf2dd; color: #7a5600; }
.badge-danger    { background: #fdeaea; color: #a5231c; }
.badge-secondary { background: #eef0f3; color: #545c66; }

.badge {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.4em 0.7em;
  border-radius: 7px;
}

/* ---------------------------------------------------------------------
 * Sessies op de dag
 * ------------------------------------------------------------------ */

.bt-slot {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(5, 23, 34, 0.07);
}

.bt-slot:last-child { border-bottom: 0; }
.bt-slot.is-vol { background: rgba(0, 156, 222, 0.035); }

.bt-tijd strong { display: block; font-size: 1.05rem; letter-spacing: -0.02em; }
.bt-tijd span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: #5c6572; }

.bt-namen { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-niemand { color: #5f6875; font-style: italic; font-size: 0.9rem; }
.bt-wanneer { color: #5b636d; }

.bt-lid {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border-radius: 99px;
  border: 1px solid rgba(5, 23, 34, 0.14);
  background: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  color: #2b333c;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.bt-lid i { font-size: 15px; color: #9aa2ac; }
.bt-lid:hover { border-color: var(--bt); }

.bt-lid.is-aanwezig {
  background: #e4f6ec;
  border-color: #a5d9bd;
  color: #0f6b3c;
}

.bt-lid.is-aanwezig i { color: #158a4e; }
.bt-lid[disabled] { opacity: 0.55; cursor: wait; }

.bt-telling {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #5b636d;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .bt-slot { grid-template-columns: 72px 1fr; }
  .bt-telling { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------------------------------------
 * Ledenlijst
 * ------------------------------------------------------------------ */

.bt-persoon { display: flex; align-items: center; gap: 12px; }

.bt-cirkel {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bt-licht);
  color: var(--bt-diep);
  display: grid;
  place-items: center;
  font-weight: 700;
  flex: 0 0 auto;
}

.bt-persoon strong { display: block; line-height: 1.25; }
.bt-persoon small { color: #5c6572; }
.bt-weinig { color: #a5231c; font-weight: 700; }

#bt-ledentabel th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5c6572;
  font-weight: 700;
}

#bt-ledentabel td { vertical-align: middle; }

/* ---------------------------------------------------------------------
 * Metingen
 * ------------------------------------------------------------------ */

.bt-meting {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(5, 23, 34, 0.07);
}

.bt-meting:last-child { border-bottom: 0; }
.bt-meting span { color: #5b636d; }
.bt-meting strong { font-variant-numeric: tabular-nums; }

.bt-omlaag, .bt-omhoog {
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.bt-omlaag { color: #0f6b3c; }
.bt-omhoog { color: #a5231c; }

/* ---------------------------------------------------------------------
 * Lege en ladende toestanden
 * ------------------------------------------------------------------ */

.bt-leeg { text-align: center; padding: 46px 20px; color: #5c6572; }
.bt-leeg i { font-size: 34px; color: #b6bdc6; display: block; margin-bottom: 10px; }
.bt-leeg p { margin: 0; }
.bt-laden { padding: 34px; text-align: center; color: #5f6875; }

.bt-melding {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 0.88rem;
  margin-bottom: 14px;
}

.bt-melding-fout { background: #fdeaea; color: #a5231c; }
.bt-melding-goed { background: #e4f6ec; color: #0f6b3c; }

.bt-welkom .card-body { padding: 1.8rem; gap: 16px; }

/* ---------------------------------------------------------------------
 * Wat het sjabloon niet heeft: een zichtbare focus
 *
 * In hun hele opmaak staat op :focus alleen `box-shadow:none` met dezelfde
 * randkleur. Wie met tab door het scherm loopt ziet dus nergens waar hij is.
 * ------------------------------------------------------------------ */

.codex-header :is(a, button, input, select):focus-visible,
.codex-sidebar :is(a, button):focus-visible,
.theme-body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bt) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------
 * Donkere stand
 *
 * Het sjabloon schakelt via data-bs-theme. Onze eigen bouwstenen moeten mee.
 * ------------------------------------------------------------------ */

[data-bs-theme="dark"] {
  --bt-licht: rgba(0, 156, 222, 0.16);
  --bt-diep: #6cc7f0;
}

[data-bs-theme="dark"] .bt-aanmeldpagina {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(0, 156, 222, 0.14), transparent 62%),
    #0e1116;
}

[data-bs-theme="dark"] .bt-lid {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e3e7ec;
}

[data-bs-theme="dark"] .bt-lid.is-aanwezig {
  background: rgba(21, 138, 78, 0.2);
  border-color: rgba(21, 138, 78, 0.5);
  color: #7fd8a6;
}

[data-bs-theme="dark"] .bt-lid.is-aanwezig i { color: #7fd8a6; }
[data-bs-theme="dark"] .bt-slot { border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .bt-niemand,
[data-bs-theme="dark"] .bt-leeg,
[data-bs-theme="dark"] .bt-laden { color: #9aa3ad; }
[data-bs-theme="dark"] .bt-meting { border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .bt-slot.is-vol { background: rgba(0, 156, 222, 0.07); }

[data-bs-theme="dark"] .badge-primary   { background: rgba(0, 156, 222, 0.2);  color: #7dcdf0; }
[data-bs-theme="dark"] .badge-success   { background: rgba(21, 138, 78, 0.2);  color: #7fd8a6; }
[data-bs-theme="dark"] .badge-info      { background: rgba(0, 156, 222, 0.2);  color: #7dcdf0; }
[data-bs-theme="dark"] .badge-warning   { background: rgba(214, 158, 0, 0.2);  color: #f0cd7a; }
[data-bs-theme="dark"] .badge-danger    { background: rgba(200, 60, 52, 0.22); color: #f2a6a1; }
[data-bs-theme="dark"] .badge-secondary { background: rgba(255, 255, 255, 0.09); color: #b7bfc9; }

[data-bs-theme="dark"] .stat-icon.success { background: rgba(21, 138, 78, 0.18);  color: #7fd8a6; }
[data-bs-theme="dark"] .stat-icon.info    { background: rgba(0, 156, 222, 0.18);  color: #7dcdf0; }
[data-bs-theme="dark"] .stat-icon.warning { background: rgba(214, 158, 0, 0.18);  color: #f0cd7a; }
[data-bs-theme="dark"] .stat-icon.danger  { background: rgba(200, 60, 52, 0.2);   color: #f2a6a1; }

[data-bs-theme="dark"] .bt-persoon small,
[data-bs-theme="dark"] .bt-tijd span,
[data-bs-theme="dark"] .bt-meting span,
[data-bs-theme="dark"] .bt-telling,
[data-bs-theme="dark"] .stat-card .bt-onder,
[data-bs-theme="dark"] #bt-ledentabel th { color: #a8b0ba; }

[data-bs-theme="dark"] .bt-weinig { color: #f2a6a1; }
[data-bs-theme="dark"] .bt-omlaag { color: #7fd8a6; }
[data-bs-theme="dark"] .bt-omhoog { color: #f2a6a1; }
[data-bs-theme="dark"] .bt-melding-fout { background: rgba(200, 60, 52, 0.18); color: #f2a6a1; }
[data-bs-theme="dark"] .bt-melding-goed { background: rgba(21, 138, 78, 0.18); color: #7fd8a6; }

/* ---------------------------------------------------------------------
 * De initiaal in de koptekst, in plaats van hun demo-avatar
 * ------------------------------------------------------------------ */

.user-icon .bt-initiaal {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bt);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------------
 * De dagbalk
 * ------------------------------------------------------------------ */

.bt-pijl {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(5, 23, 34, 0.14);
  background: #fff;
  border-radius: 9px;
  color: #3a434d;
}

.bt-pijl:hover { border-color: var(--bt); color: var(--bt-diep); }
#bt-dagtitel { text-transform: capitalize; letter-spacing: -0.02em; }

[data-bs-theme="dark"] .bt-pijl {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: #dfe4ea;
}

/* Gelijke hoogte voor de kerncijfers. Zonder dit zakt een kaart zonder
   voortgangsbalk in en staat de rij ongelijk. */
#bt-kpi .card { height: 100%; }

/* ---------------------------------------------------------------------
 * Wat we uit hun koptekst niet gebruiken
 *
 * Het meldingenmenu vult zich in het sjabloon met verzonnen groepslessen, en
 * de instellingenknop opent hun kleurkiezer. Beide blijven in de HTML staan —
 * ze eruit knippen brak hun geneste uitklapmenu — maar ze horen niet in een
 * portaal dat echte gegevens toont.
 * ------------------------------------------------------------------ */

.codex-header .nav-iconlist > li:has(.notiicon-iconwrap),
.codex-header .navicon-wrap:has(> .ti-settings),
.codex-header .navicon-wrap:has(> .ti-shopping-cart) { display: none !important; }

/* Hun demo-avatar is een grijs blokje van 42 bij 42. Het plaatje verbergen
   liet de doos inklappen tot 8 bij 23 pixels — een knop die je op een telefoon
   niet raakt en met de muis nauwelijks. De maat hoort dus op de doos zelf. */
.user-icon img { display: none; }

.codex-header .user-icon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

/* ---------------------------------------------------------------------
 * Profielmenu
 * ------------------------------------------------------------------ */

.bt-profiel { padding: 6px; min-width: 232px; }

.bt-profiel-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 14px;
  border-bottom: 1px solid rgba(5, 23, 34, 0.09);
  margin-bottom: 6px;
}

.bt-profiel-kop strong { display: block; line-height: 1.3; }
.bt-profiel-kop small { color: #6b7480; }

.bt-afmelden {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #a5231c;
  font-weight: 600;
  text-decoration: none;
}

.bt-afmelden:hover { background: #fdeaea; color: #a5231c; }

[data-bs-theme="dark"] .bt-profiel-kop { border-bottom-color: rgba(255, 255, 255, 0.1); }
[data-bs-theme="dark"] .bt-profiel-kop small { color: #a8b0ba; }
[data-bs-theme="dark"] .bt-afmelden { color: #f2a6a1; }
[data-bs-theme="dark"] .bt-afmelden:hover { background: rgba(200, 60, 52, 0.18); }

/* De dagtitel stond op capitalize; dat maakt er "Maandag 3 Augustus" van. */
#bt-dagtitel { text-transform: none; }

/* ---------------------------------------------------------------------
 * Contrast dat het sjabloon niet haalt
 *
 * Hun tijdelijke tekst staat op #9d9d9d tegen #f5f5f5: dat is 2,5 op tien,
 * ruim onder de 4,5 die de norm vraagt. En onze eigen merkkleur haalt op wit
 * maar 3,1 — mooi als vlak, te licht als letter. Voor tekst gebruiken we
 * dezelfde kleur een slag dieper.
 * ------------------------------------------------------------------ */

.codex-header input::placeholder,
.theme-body input::placeholder,
.theme-body .form-control::placeholder { color: #6a7280 !important; opacity: 1; }

.btmerk small { color: var(--bt-diep); }
#bt-vandaag { --bs-btn-color: #00658f; }

[data-bs-theme="dark"] .codex-header input::placeholder,
[data-bs-theme="dark"] .theme-body input::placeholder,
[data-bs-theme="dark"] .theme-body .form-control::placeholder { color: #9aa3ad !important; }

[data-bs-theme="dark"] .btmerk small { color: #6cc7f0; }
[data-bs-theme="dark"] #bt-vandaag { --bs-btn-color: #6cc7f0; }

/* Bootstrap's d-flex zet display:flex en wint van het hidden-kenmerk; zonder
   deze regel blijft een verborgen paneel gewoon staan. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
 * Etiketten: hun kleuren winnen op specificiteit
 *
 * Het sjabloon zet .badge-info op #2196f3 tegen #deeffd — 2,6 op tien. Als
 * dat het enige is wat het verschil tussen "actief" en "opgezegd" draagt,
 * leest een deel van de mensen het niet. Onze kleuren moeten dus harder.
 * ------------------------------------------------------------------ */

.theme-body .badge.badge-primary,
.codex-header .badge.badge-primary { background: #e6f5fc !important; color: #00567c !important; }
.theme-body .badge.badge-success   { background: #e4f6ec !important; color: #0d5f35 !important; }
.theme-body .badge.badge-info      { background: #e6f5fc !important; color: #00567c !important; }
.theme-body .badge.badge-warning   { background: #fdf2dd !important; color: #6e4d00 !important; }
.theme-body .badge.badge-danger    { background: #fdeaea !important; color: #96201a !important; }
.theme-body .badge.badge-secondary { background: #eef0f3 !important; color: #4c545e !important; }

[data-bs-theme="dark"] .theme-body .badge.badge-primary,
[data-bs-theme="dark"] .codex-header .badge.badge-primary { background: rgba(0,156,222,.2) !important; color: #93d7f5 !important; }
[data-bs-theme="dark"] .theme-body .badge.badge-success   { background: rgba(21,138,78,.22) !important; color: #92dfb2 !important; }
[data-bs-theme="dark"] .theme-body .badge.badge-info      { background: rgba(0,156,222,.2) !important; color: #93d7f5 !important; }
[data-bs-theme="dark"] .theme-body .badge.badge-warning   { background: rgba(214,158,0,.22) !important; color: #f4d68f !important; }
[data-bs-theme="dark"] .theme-body .badge.badge-danger    { background: rgba(200,60,52,.24) !important; color: #f5b3ae !important; }
[data-bs-theme="dark"] .theme-body .badge.badge-secondary { background: rgba(255,255,255,.1) !important; color: #c2cad3 !important; }

/* ---------------------------------------------------------------------
 * Nasleep van de kleuromzetting
 *
 * Het sjabloon gebruikte #1AB0B0 zowel als vlak als als letter. Toen die
 * kleur onze PMS 2925 werd, erfden alle letters een tint die op een licht
 * vlak 2,8 haalt. Als vlak is hij prima — als letter niet. Voor tekst dus
 * dezelfde kleur, twee stappen dieper: #00658f haalt 4,6 op wit.
 *
 * Hetzelfde geldt voor hun invoervelden: die staan op #9d9d9d, wat tegen
 * hun eigen #f5f5f5 achtergrond 2,5 oplevert. Wie een datum intikt moet
 * kunnen zien wat er staat.
 * ------------------------------------------------------------------ */

.theme-body .form-control,
.codex-header .form-control,
.theme-body input,
.theme-body select { color: #2b333c; }

.theme-body .form-control::placeholder,
.codex-header .form-control::placeholder { color: #667080; opacity: 1; }

.theme-body .btn-outline-primary,
.theme-body .text-primary,
.theme-body a.text-primary { color: #00658f !important; }

.theme-body .btn-outline-primary:hover { color: #fff !important; }

/* Op het lichtblauwe vlak van een volle sessie zakt hun grijs naar 3,8. */
.bt-slot.is-vol .bt-tijd span,
.bt-slot.is-vol .bt-telling { color: #5c6572; }

[data-bs-theme="dark"] .theme-body .form-control,
[data-bs-theme="dark"] .codex-header .form-control,
[data-bs-theme="dark"] .theme-body input,
[data-bs-theme="dark"] .theme-body select { color: #e6eaef; }

[data-bs-theme="dark"] .theme-body .btn-outline-primary,
[data-bs-theme="dark"] .theme-body .text-primary { color: #7dcdf0 !important; }

[data-bs-theme="dark"] .bt-slot.is-vol .bt-tijd span,
[data-bs-theme="dark"] .bt-slot.is-vol .bt-telling { color: #aeb6c0; }

/* Het sjabloon zet de menu-items op capitalize. In het Engels klopt "Session
   Booking"; in het Nederlands schrijf je "Sessie boeken" met één hoofdletter. */
.codex-menu a span { text-transform: none !important; }

/* =====================================================================
 * De schermen die na de eerste opzet zijn bijgekomen
 *
 * Alles hieronder gebruikt de maten en het gedrag van het sjabloon: 17px op
 * vlakken, 5 op bedieningselementen, dezelfde schaduw, dezelfde letterschaal.
 * ================================================================== */

/* ---- merkjes onder de groet ---- */

.bt-merkjes { display: flex; flex-wrap: wrap; gap: 8px; }

.bt-merkje {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 99px;
  background: var(--bt-licht); color: #00567c;
  font-size: 0.82rem; font-weight: 600;
}

.bt-merkje i { font-size: 15px; }
[data-bs-theme="dark"] .bt-merkje { background: rgba(0,156,222,.18); color: #93d7f5; }

/* ---- snelknoppen ---- */

.bt-snel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.bt-snelknop {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border-radius: 12px; text-decoration: none;
  border: 1px solid rgba(5, 23, 34, 0.09);
  color: inherit; transition: border-color .14s, transform .14s;
}

.bt-snelknop:hover { border-color: var(--bt); transform: translateY(-2px); color: inherit; }
.bt-snelknop .stat-icon { width: 38px; height: 38px; margin-bottom: 6px; }
.bt-snelknop .stat-icon i { font-size: 19px; }
.bt-snelknop strong { font-size: 0.95rem; }
.bt-snelknop small { color: #5c6572; }

[data-bs-theme="dark"] .bt-snelknop { border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .bt-snelknop small { color: #9aa3ad; }

@media (max-width: 480px) { .bt-snel { grid-template-columns: 1fr; } }

/* ---- aanwezigheidskalender ---- */

.bt-kalender {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}

.bt-kaldagkop {
  text-align: center; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: #5c6572; padding-bottom: 6px;
}

.bt-kaldag {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 10px; font-size: 0.85rem; font-weight: 600;
  background: rgba(5, 23, 34, 0.035); color: #3a434d;
  position: relative;
}

.bt-kalleeg { aspect-ratio: 1; }

.bt-kaldag.is-gekomen  { background: #d7f0e2; color: #0d5f35; }
.bt-kaldag.is-gemist   { background: #fbdcdc; color: #96201a; }
.bt-kaldag.is-gepland  { background: var(--bt-licht); color: #00567c; }
.bt-kaldag.is-afgezegd { background: #ebedf0; color: #4c545e; text-decoration: line-through; }

.bt-kaldag.is-vandaag { box-shadow: inset 0 0 0 2px var(--bt); }

[data-bs-theme="dark"] .bt-kaldagkop { color: #9aa3ad; }
[data-bs-theme="dark"] .bt-kaldag { background: rgba(255,255,255,.05); color: #c8ced6; }
[data-bs-theme="dark"] .bt-kaldag.is-gekomen  { background: rgba(21,138,78,.28); color: #92dfb2; }
[data-bs-theme="dark"] .bt-kaldag.is-gemist   { background: rgba(200,60,52,.28); color: #f5b3ae; }
[data-bs-theme="dark"] .bt-kaldag.is-gepland  { background: rgba(0,156,222,.24); color: #93d7f5; }
[data-bs-theme="dark"] .bt-kaldag.is-afgezegd { background: rgba(255,255,255,.09); color: #aab2bc; }

.bt-legenda {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 0.8rem; color: #5c6572;
}

.bt-legenda span { display: inline-flex; align-items: center; gap: 6px; }

.bt-stip {
  width: 12px; height: 12px; border-radius: 4px; display: inline-block;
}

.bt-stip.is-gekomen  { background: #d7f0e2; }
.bt-stip.is-gemist   { background: #fbdcdc; }
.bt-stip.is-gepland  { background: var(--bt-licht); }
.bt-stip.is-afgezegd { background: #ebedf0; }

[data-bs-theme="dark"] .bt-legenda { color: #9aa3ad; }
[data-bs-theme="dark"] .bt-stip.is-gekomen  { background: rgba(21,138,78,.5); }
[data-bs-theme="dark"] .bt-stip.is-gemist   { background: rgba(200,60,52,.5); }
[data-bs-theme="dark"] .bt-stip.is-gepland  { background: rgba(0,156,222,.45); }
[data-bs-theme="dark"] .bt-stip.is-afgezegd { background: rgba(255,255,255,.18); }

/* ---- logregels ---- */

.bt-log { max-height: 520px; overflow-y: auto; }

.bt-logregel {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid rgba(5, 23, 34, 0.07);
}

.bt-logregel:last-child { border-bottom: 0; }
.bt-logregel strong { display: block; line-height: 1.3; }
.bt-logregel small { color: #5c6572; }

[data-bs-theme="dark"] .bt-logregel { border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .bt-logregel small { color: #9aa3ad; }

/* ---- verloop en maten ---- */

.bt-verloopregel, .bt-maat {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
  align-items: center; padding: 12px 0;
  border-bottom: 1px solid rgba(5, 23, 34, 0.07);
}

.bt-verloopregel:last-child, .bt-maat:last-child { border-bottom: 0; }
.bt-maat { grid-template-columns: 1fr auto auto; }
.bt-verloopregel > div { display: flex; flex-direction: column; align-items: flex-end; }
.bt-verloopregel small { font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: #5c6572; }
.bt-gelijk { color: #5c6572; font-size: 0.82rem; }

[data-bs-theme="dark"] .bt-verloopregel,
[data-bs-theme="dark"] .bt-maat { border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .bt-verloopregel small,
[data-bs-theme="dark"] .bt-gelijk { color: #9aa3ad; }

/* ---- doelen ---- */

.bt-doel {
  padding: 16px; border-radius: 12px; margin-bottom: 12px;
  border: 1px solid rgba(5, 23, 34, 0.09);
}

.bt-doel:last-child { margin-bottom: 0; }
.bt-doel.is-dicht { opacity: 0.62; }

.bt-doelkop {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 6px;
}

.bt-doelkop small { display: block; color: #5c6572; font-weight: 500; }
.bt-doelstand { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.bt-doelpct { font-size: 0.78rem; color: #5c6572; margin-top: 5px; }

[data-bs-theme="dark"] .bt-doel { border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .bt-doelkop small,
[data-bs-theme="dark"] .bt-doelpct { color: #9aa3ad; }

/* ---- boeken ---- */

.bt-boekdag { margin-bottom: 22px; }
.bt-boekdag:last-child { margin-bottom: 0; }
.bt-boekdag h6 { margin-bottom: 10px; letter-spacing: -0.01em; }
.bt-tijden { display: flex; flex-wrap: wrap; gap: 9px; }

.bt-tijdknop {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 82px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(5, 23, 34, 0.14); background: #fff;
  cursor: pointer; transition: border-color .14s, background .14s;
}

.bt-tijdknop strong { font-size: 1rem; letter-spacing: -0.02em; }
.bt-tijdknop small { font-size: 0.7rem; color: #5c6572; }
.bt-tijdknop:hover { border-color: var(--bt); background: var(--bt-licht); }
.bt-tijdknop.is-geboekt { background: #d7f0e2; border-color: #8bcfab; color: #0d5f35; }
.bt-tijdknop[disabled] { cursor: wait; opacity: .6; }

[data-bs-theme="dark"] .bt-tijdknop {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: #e3e7ec;
}
[data-bs-theme="dark"] .bt-tijdknop small { color: #9aa3ad; }
[data-bs-theme="dark"] .bt-tijdknop.is-geboekt {
  background: rgba(21,138,78,.24); border-color: rgba(21,138,78,.5); color: #92dfb2;
}

/* ---- gegevens en instellingen ---- */

.bt-gegeven {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid rgba(5, 23, 34, 0.07);
}

.bt-gegeven:last-child { border-bottom: 0; }
.bt-gegeven span { color: #5c6572; }
.bt-gegeven strong { text-align: right; word-break: break-word; }

.bt-instelling {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(5, 23, 34, 0.07);
}

.bt-instelling:last-child { border-bottom: 0; }
.bt-instelling small { display: block; color: #5c6572; }

[data-bs-theme="dark"] .bt-gegeven,
[data-bs-theme="dark"] .bt-instelling { border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .bt-gegeven span,
[data-bs-theme="dark"] .bt-instelling small { color: #9aa3ad; }

/* ---- zoekresultaten in het dossier ---- */

.bt-uitslag:not(:empty) { margin-top: 14px; display: grid; gap: 8px; }

.bt-uitslagregel {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 10px; text-align: left;
  border: 1px solid rgba(5, 23, 34, 0.09); background: transparent;
  cursor: pointer; color: inherit;
}

.bt-uitslagregel:hover { border-color: var(--bt); background: var(--bt-licht); }
.bt-uitslagregel strong { display: block; line-height: 1.25; }
.bt-uitslagregel small { color: #5c6572; }

[data-bs-theme="dark"] .bt-uitslagregel { border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .bt-uitslagregel:hover { background: rgba(0,156,222,.12); }
[data-bs-theme="dark"] .bt-uitslagregel small { color: #9aa3ad; }

/* ApexCharts zet zijn eigen tekstkleur; die volgt onze stand niet. */
.apexcharts-text, .apexcharts-legend-text { font-family: Manrope, sans-serif !important; }
[data-bs-theme="dark"] .apexcharts-legend-text { color: #c2cad3 !important; }

/* Het sjabloon zet elk etiket op capitalize. Bij hen staat er "Active" en
   klopt dat; bij ons wordt "niet gekomen" dan "Niet Gekomen", wat Engels
   oogt. In het Nederlands blijft een statuswoord gewoon klein. */
.theme-body .badge { text-transform: none !important; }

/* =====================================================================
 * Een eerlijke noot over de merkkleur
 *
 * Witte letters op PMS 2925 halen 3,08 op tien. De norm voor gewone tekst is
 * 4,5. Een gevulde knop met witte tekst in exact 2925 is dus niet leesbaar
 * genoeg voor wie minder scherp ziet — en dat is bij een klantenbestand van
 * een paar honderd mensen geen theoretisch geval.
 *
 * Het vlak blijft 2925: koppen, iconen, balken, de stip in het logo. Alleen
 * waar witte tekst erop staat gaat de achtergrond één tint dieper naar
 * #007ab0. Dat haalt 4,76 en staat naast 2925 zonder dat je het verschil
 * ziet, want het is dezelfde kleur — alleen donkerder.
 * ================================================================== */

.btn-primary {
  --bs-btn-bg: #007ab0;
  --bs-btn-border-color: #007ab0;
  --bs-btn-hover-bg: #00699a;
  --bs-btn-hover-border-color: #00699a;
  --bs-btn-active-bg: #005c86;
  --bs-btn-active-border-color: #005c86;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  --bs-btn-hover-bg: #007ab0;
  --bs-btn-hover-border-color: #007ab0;
}

/* Hun knop zet de kleur met !important; alleen de variabele aanpassen helpt
   dus niet. En de zijbalk haalt het actieve item uit een eigen variabele. */
.btn-primary,
.btn-primary:focus {
  background-color: #007ab0 !important;
  border-color: #007ab0 !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:active {
  background-color: #00699a !important;
  border-color: #00699a !important;
}

:root, [data-bs-theme="dark"], [data-bs-theme="light"] {
  --bs-sidebar-linkactive: #007ab0;
  --bs-sidebar-linkactivefont: #ffffff;
}

/* Mijn eigen lege-staat tekst zat op 2,7. */
.bt-leeg { color: #5c6572; }
.bt-leeg p { color: inherit; }
[data-bs-theme="dark"] .bt-leeg { color: #9aa3ad; }

/* Hun rode omlijnde knop staat op #f75c7f — een roze die op wit 3,1 haalt.
   Zij zetten dat rechtstreeks als `color`, niet via de Bootstrap-variabele,
   dus die variabele aanpassen doet niets; het moet op dezelfde manier terug. */
.btn-outline-danger,
.theme-body .btn-outline-danger {
  color: #a5231c !important;
  border-color: #dda6a2 !important;
}

.btn-outline-danger:hover,
.theme-body .btn-outline-danger:hover {
  color: #fff !important;
  background-color: #a5231c !important;
  border-color: #a5231c !important;
}

[data-bs-theme="dark"] .btn-outline-danger,
[data-bs-theme="dark"] .theme-body .btn-outline-danger {
  color: #f2a6a1 !important;
  border-color: #7a3b37 !important;
}

/* ---------------------------------------------------------------------
 * Aanraakvlakken en toetsenbord
 *
 * De donkerschakelaar van het sjabloon is een kale <div>: niet aan te wijzen
 * met tab, dus voor wie geen muis gebruikt bestaat hij niet. De rol en de
 * tabindex worden in de code gezet; hier staat wat je moet zien als je hem
 * bereikt, en de maat die een vinger nodig heeft.
 * ------------------------------------------------------------------ */

.codex-header .navicon-wrap,
.codex-header .sidebar-action {
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
}

.codex-header .navicon-wrap:focus-visible,
.codex-header .sidebar-action:focus-visible,
.codex-header .user-icon:focus-visible {
  outline: 2px solid var(--bt) !important;
  outline-offset: 2px;
}

/* Een sprong over de zijbalk heen, voor wie met het toetsenbord werkt.
   Hij staat buiten beeld tot je hem met tab bereikt. */
.bt-sprong {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100001;
  padding: 12px 20px;
  background: var(--bt-diep);
  color: #fff;
  border-radius: 0 0 9px 0;
  font-weight: 600;
  text-decoration: none;
}

.bt-sprong:focus {
  left: 0;
  color: #fff;
}

/* ---------------------------------------------------------------------
 * Logo
 *
 * Een blikseminslag in een cirkel: elektrostimulatie in één teken, en het
 * werkt op 20 pixels net zo goed als op 200. Getekend in plaats van een
 * plaatje, zodat de kleur de stand volgt en het scherp blijft.
 * ------------------------------------------------------------------ */

.btlogo {
  width: 26px; height: 26px; flex: 0 0 auto;
  color: var(--bt); margin-right: 10px;
}

.codex-sidebar .btlogo, .codex-header .btlogo { width: 24px; height: 24px; }
.bt-aanmeldmerk .btlogo { width: 34px; height: 34px; }
[data-bs-theme="dark"] .btlogo { color: #46b6ea; }

/* ---------------------------------------------------------------------
 * Drukste tijden
 *
 * Het sjabloon zet hier gekleurde blokjes per uur neer, en dat werkt: je ziet
 * in één blik waar de dag vol zit. Hun kleuren zijn alleen decoratief — roze,
 * geel, groen door elkaar. Bij ons betekent de kleur iets: hoe voller, hoe
 * warmer. En omdat kleur alleen niet genoeg is voor wie hem niet onderscheidt,
 * staat het percentage er gewoon bij.
 * ------------------------------------------------------------------ */

.bt-uurraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 9px;
}

.bt-uurblok {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 14px 6px; border-radius: 11px;
  font-variant-numeric: tabular-nums;
}

.bt-uurblok strong { font-size: 1.02rem; letter-spacing: -0.02em; }
.bt-uurblok small { font-size: 0.72rem; opacity: 0.85; }

.bt-uurblok.is-vol    { background: #fbdcdc; color: #8f1f19; }
.bt-uurblok.is-druk   { background: #fdeed2; color: #6e4d00; }
.bt-uurblok.is-rustig { background: #d7f0e2; color: #0d5f35; }
.bt-uurblok.is-stil   { background: #eef0f3; color: #4c545e; }

.bt-stip.is-vol    { background: #fbdcdc; }
.bt-stip.is-druk   { background: #fdeed2; }
.bt-stip.is-rustig { background: #d7f0e2; }
.bt-stip.is-stil   { background: #eef0f3; }

[data-bs-theme="dark"] .bt-uurblok.is-vol    { background: rgba(200,60,52,.3);  color: #f5b3ae; }
[data-bs-theme="dark"] .bt-uurblok.is-druk   { background: rgba(214,158,0,.28); color: #f4d68f; }
[data-bs-theme="dark"] .bt-uurblok.is-rustig { background: rgba(21,138,78,.3);  color: #92dfb2; }
[data-bs-theme="dark"] .bt-uurblok.is-stil   { background: rgba(255,255,255,.08); color: #b7bfc9; }

[data-bs-theme="dark"] .bt-stip.is-vol    { background: rgba(200,60,52,.55); }
[data-bs-theme="dark"] .bt-stip.is-druk   { background: rgba(214,158,0,.5); }
[data-bs-theme="dark"] .bt-stip.is-rustig { background: rgba(21,138,78,.55); }
[data-bs-theme="dark"] .bt-stip.is-stil   { background: rgba(255,255,255,.18); }

/* ---------------------------------------------------------------------
 * Dagkeuze
 * ------------------------------------------------------------------ */

.bt-dagkeuze { display: flex; flex-wrap: wrap; gap: 7px; }

.bt-dagvak input {
  position: absolute; opacity: 0; width: 0; height: 0;
}

.bt-dagvak span {
  display: grid; place-items: center;
  width: 44px; padding: 9px 0; border-radius: 9px;
  border: 1px solid rgba(5, 23, 34, 0.14);
  font-size: 0.82rem; font-weight: 600; text-transform: capitalize;
  cursor: pointer; user-select: none;
}

.bt-dagvak input:checked + span {
  background: var(--bt-licht); border-color: var(--bt); color: #00567c;
}

/* De focus zit op het verborgen vakje; de rand moet dus op het zichtbare
   deel verschijnen, anders is de keuze met toetsenbord onvindbaar. */
.bt-dagvak input:focus-visible + span {
  outline: 2px solid var(--bt); outline-offset: 2px;
}

[data-bs-theme="dark"] .bt-dagvak span { border-color: rgba(255,255,255,.14); }
[data-bs-theme="dark"] .bt-dagvak input:checked + span {
  background: rgba(0,156,222,.2); border-color: #009cde; color: #93d7f5;
}

/* ---------------------------------------------------------------------
 * Formulieren in hun vormtaal
 * ------------------------------------------------------------------ */

.theme-body .form-label { font-weight: 600; font-size: 0.86rem; margin-bottom: 6px; }
.theme-body .form-text { font-size: 0.78rem; color: #5c6572; }
.theme-body fieldset legend.form-label { float: none; width: auto; }
[data-bs-theme="dark"] .theme-body .form-text { color: #9aa3ad; }

.card-header small { display: block; font-weight: 500; margin-top: 2px; }

/* Hun opmaak zet elk label op capitalize. In het Engels leest "Tot En Met"
   als een titel; in het Nederlands is het gewoon fout. */
/* De correctie hing aan .theme-body, en die klasse heeft het aanmeldscherm
   niet — juist het enige scherm dat iedereen elke ochtend ziet. Daar stond
   dus "E-Mailadres Of Gebruikersnaam". Nu zonder scope. */
.form-label,
label,
.card-header h5,
legend,
.codex-menu a span,
.bt-dagvak span { text-transform: none !important; }

/* =====================================================================
 * De dashboardindeling van het sjabloon
 *
 * Hun welkomstbanner, hun snelactie-tegels en hun vierkolomsblok. De vormen
 * komen van hen; de kleur is de onze en de inhoud komt uit de database.
 * ================================================================== */

/* ---- welkomstbanner ---- */

/* Het verloop liep naar #23b3ec en daar haalde witte tekst nog maar 2,33 op
   tien; de norm is 4,5. Een gradient wordt door toetsingsgereedschap als
   "onbeoordeelbaar" gemeld in plaats van als fout, dus dit glipte er eerst
   doorheen. Nu loopt hij van donker naar minder donker en haalt elk punt de
   norm — gemeten op de daadwerkelijke pixels, niet op de opgegeven kleuren. */
.welcome-card {
  background: linear-gradient(122deg, #00506f 0%, #00658f 55%, #007ab0 100%);
  border: 0 !important;
  overflow: hidden;
  position: relative;
}

/* Een lichtval over de banner, zodat het vlak niet doods blijft. */
.welcome-card::after {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 62%);
  pointer-events: none;
}

.welcome-card .card-body { padding: 2.2rem; position: relative; z-index: 1; }
.welcome-card h1 { font-size: 2rem; letter-spacing: -0.035em; margin-bottom: 4px; }
.welcome-card p { opacity: 0.92; }

.welcome-stat { display: flex; align-items: center; gap: 12px; }

.welcome-stat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.18);
  color: #fff; font-size: 20px;
}

.welcome-stat-info h4 { color: #fff; margin: 0; font-size: 1.4rem; letter-spacing: -0.03em; }
.welcome-stat-info p { color: rgba(255, 255, 255, 0.88); margin: 0; font-size: 0.82rem; }

.welcome-badge {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  padding: 0.5em 0.85em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

/* ---- snelactie-tegels ---- */

.quickaction-grid {
  padding: 22px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(5, 23, 34, 0.08);
  box-shadow: 0 9px 20px rgba(5, 23, 34, 0.05);
  cursor: pointer;
  height: 100%;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.quickaction-grid:hover {
  transform: translateY(-3px);
  border-color: var(--bt);
  box-shadow: 0 14px 28px rgba(0, 122, 176, 0.14);
}

.quickaction-grid .icon-wrap {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 14px;
  background: var(--bt-licht); color: var(--bt-diep); font-size: 21px;
}

.quickaction-grid .qaction-title { font-size: 1rem; letter-spacing: -0.02em; }
.quickaction-grid p { margin: 0; font-size: 0.82rem; color: #5c6572; }

.quickaction-grid:focus-visible { outline: 2px solid var(--bt); outline-offset: 2px; }

[data-bs-theme="dark"] .quickaction-grid {
  background: #04222e; border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .quickaction-grid p { color: #9aa3ad; }

/* ---- het vierkolomsblok ---- */

/* Het icoon moet vierkant blijven; in een kolom zonder vaste breedte rekt
   een grid-element zich anders uit tot de volle breedte. */
.insight-vak .stat-icon { width: 42px; height: 42px; }
.insight-vak .stat-icon i { font-size: 19px; }

.insight-card .card-body { padding: 1.9rem; }

.insight-vak {
  padding: 18px;
  border-radius: 13px;
  border: 1px solid rgba(5, 23, 34, 0.08);
  height: 100%;
}

.insight-kop {
  font-size: 0.88rem; font-weight: 700; letter-spacing: -0.01em;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(5, 23, 34, 0.08);
}

.insight-regel {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 7px 0; font-size: 0.88rem;
}

.insight-regel span:first-child { color: #5c6572; }
.insight-regel strong { font-variant-numeric: tabular-nums; }

.insight-link {
  display: inline-block; margin-top: 10px;
  font-size: 0.82rem; font-weight: 600; color: #00658f; text-decoration: none;
}

.insight-link:hover { text-decoration: underline; color: #00658f; }

[data-bs-theme="dark"] .insight-vak { border-color: rgba(255, 255, 255, 0.09); }
[data-bs-theme="dark"] .insight-kop { border-bottom-color: rgba(255, 255, 255, 0.09); }
[data-bs-theme="dark"] .insight-regel span:first-child { color: #9aa3ad; }
[data-bs-theme="dark"] .insight-link { color: #6cc7f0; }

/* ---- het uitgelichte doel ---- */

.doel-card {
  background: linear-gradient(140deg, #063a52 0%, #00618c 62%, #007ab0 100%);
  border: 0 !important;
  color: #fff;
}

.doel-card .card-body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.doel-card h2 { color: #fff; font-size: 1.6rem; letter-spacing: -0.03em; }
.doel-card p { color: rgba(255, 255, 255, 0.9); }
.doel-card small { color: rgba(255, 255, 255, 0.85); }
.doel-card .progress { background: rgba(255, 255, 255, 0.2); height: 8px; }
.doel-card .progress-bar { background: #fff; }

.doel-merkje {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 6px 12px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.78rem; font-weight: 600;
}

.btn-licht {
  background: #fff; color: #00567c;
  align-self: flex-start; font-weight: 600;
  border-radius: 5px; padding: 10px 18px;
}

.btn-licht:hover { background: #eaf6fd; color: #00567c; }

@media (max-width: 640px) {
  .welcome-card .card-body { padding: 1.5rem; }
  .welcome-card h1 { font-size: 1.55rem; }
  .insight-card .card-body { padding: 1.3rem; }
}

/* =====================================================================
 * Vormtaal uit de designskill, toegepast waar het een dashboard helpt
 *
 * De skill is geschreven voor landingspagina's: py-40 witruimte, verhalen die
 * onthullen bij het scrollen, "$150k agency build". Dat is precies verkeerd
 * voor een scherm waarop een trainer de hele dag werkt — daar telt hoeveel
 * sessies er tegelijk op passen, niet hoe groots het ademt.
 *
 * Wat wel overgenomen is:
 *
 * - De dubbele bezel. Vlakken staan niet plat op de achtergrond maar in een
 *   omhulsel, met een binnenrand die het licht vangt. Dat geeft diepte zonder
 *   één pixel extra ruimte te kosten.
 * - Genest icoon in de knop, in plaats van een pijl die er los naast hangt.
 * - Eigen bewegingscurves. Geen ease-in-out; massa en veerkracht.
 * - Eyebrow-labels boven koppen, zodat een kaart zegt waar hij over gaat
 *   voordat je de titel leest.
 *
 * Wat bewust niet: de macro-witruimte en de onthullingen bij het scrollen.
 * Een tabel die zich langzaam opbouwt is geen elegantie maar vertraging.
 * ================================================================== */

:root {
  /* De curve van de skill: begint hard, remt lang uit. Voelt als iets met
     gewicht in plaats van iets dat aan- en uitgaat. */
  --veer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---- dubbele bezel op de vlakken ---- */

.theme-body .card {
  border: 1px solid rgba(5, 23, 34, 0.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(5, 23, 34, 0.04),
    0 12px 28px -8px rgba(5, 23, 34, 0.09) !important;
  transition: box-shadow 0.4s var(--veer), transform 0.4s var(--veer);
}

[data-bs-theme="dark"] .theme-body .card {
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 14px 32px -10px rgba(0, 0, 0, 0.5) !important;
}

/* De kerncijferkaarten reageren op aanwijzen: ze komen naar je toe. */
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(5, 23, 34, 0.04),
    0 20px 40px -12px rgba(0, 122, 176, 0.16) !important;
}

[data-bs-theme="dark"] .stat-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 40px -12px rgba(0, 0, 0, 0.6) !important;
}

/* Het icoonvlak krijgt een binnenrand, zodat het in het oppervlak ligt
   in plaats van erop geplakt. */
.stat-icon {
  box-shadow: inset 0 0 0 1px rgba(5, 23, 34, 0.05),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] .stat-icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* ---- knop met genest icoon ---- */

.bt-pil {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 99px !important;
  padding: 8px 8px 8px 20px !important;
  transition: transform 0.35s var(--veer), background-color 0.35s var(--veer);
}

.bt-pil .bt-pil-icoon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  transition: transform 0.35s var(--veer);
}

.bt-pil:hover .bt-pil-icoon { transform: translateX(3px) scale(1.06); }
.bt-pil:active { transform: scale(0.98); }

/* ---- eyebrow ---- */

.bt-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #00658f;
  margin-bottom: 5px;
}

[data-bs-theme="dark"] .bt-eyebrow { color: #6cc7f0; }

/* ---- beweging op de rest ---- */

.quickaction-grid,
.bt-lid,
.bt-tijdknop,
.bt-snelknop,
.bt-uitslagregel,
.bt-pijl {
  transition: transform 0.35s var(--veer), border-color 0.35s var(--veer),
              background-color 0.35s var(--veer), box-shadow 0.35s var(--veer);
}

.bt-tijdknop:active, .bt-lid:active { transform: scale(0.97); }

/* Wie beweging liever niet heeft, krijgt hem niet. Dat is geen extraatje:
   voor sommige mensen veroorzaakt bewegende opmaak misselijkheid. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .stat-card:hover { transform: none; }
}

/* ---- abonnementsblok in het beheerscherm ---- */

.bt-abo {
  padding: 15px;
  border-radius: 12px;
  border: 1px solid rgba(5, 23, 34, 0.09);
  margin-bottom: 11px;
}

.bt-abo:last-child { margin-bottom: 0; }
.bt-abo.is-actief { border-color: rgba(0, 156, 222, 0.4); background: rgba(0, 156, 222, 0.035); }

[data-bs-theme="dark"] .bt-abo { border-color: rgba(255, 255, 255, 0.09); }
[data-bs-theme="dark"] .bt-abo.is-actief {
  border-color: rgba(0, 156, 222, 0.45); background: rgba(0, 156, 222, 0.09);
}

.card-header .bt-eyebrow + h5 { margin-top: 0; }

/* Hun .card-header is een flexrij met space-between. Staat er een eyebrow in,
   dan springt die naar de overkant in plaats van boven de titel. Waar we een
   eyebrow gebruiken zet de kop dus terug op blokrichting. */
.theme-body .card-header:has(.bt-eyebrow) {
  display: block !important;
}

.theme-body .card-header > div:has(.bt-eyebrow) {
  display: block;
}

/* ---------------------------------------------------------------------
 * Incasso
 * ------------------------------------------------------------------ */

.bt-partijlijst { max-height: 380px; overflow-y: auto; }

.bt-partijregel {
  display: grid;
  grid-template-columns: auto 1fr 140px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(5, 23, 34, 0.07);
}

.bt-partijregel:last-child { border-bottom: 0; }
.bt-partijnaam strong { display: block; line-height: 1.25; }
.bt-partijnaam small { color: #5c6572; }
.bt-eerste { color: #7a5600; font-weight: 600; }

/* Het vinkje van het sjabloon is een kaal vakje; dit is er een die je op een
   telefoon ook raakt. */
.bt-vinkje { position: relative; display: block; width: 22px; height: 22px; }
.bt-vinkje input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.bt-vinkje span {
  display: block; width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid rgba(5, 23, 34, 0.22);
  transition: background-color 0.2s var(--veer), border-color 0.2s var(--veer);
}

.bt-vinkje input:checked + span {
  background: var(--bt); border-color: var(--bt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 15px; background-position: center; background-repeat: no-repeat;
}

.bt-vinkje input:focus-visible + span { outline: 2px solid var(--bt); outline-offset: 2px; }

.bt-bedrag { display: flex; align-items: center; gap: 7px; }
.bt-bedrag span { color: #5c6572; font-weight: 600; }
.bt-bedrag input { text-align: right; font-variant-numeric: tabular-nums; }

.bt-alle {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 15px; border-radius: 11px; background: rgba(0, 156, 222, 0.05);
  border: 1px solid rgba(0, 156, 222, 0.18);
}

.bt-alle .bt-bedrag { width: 160px; }

.bt-machtigingvak {
  padding: 18px; border-radius: 13px; margin-bottom: 18px;
  background: rgba(0, 156, 222, 0.04);
  border: 1px solid rgba(0, 156, 222, 0.2);
}

.bt-waarschuwing {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 11px;
  background: #fdf2dd; color: #6e4d00;
}

.bt-waarschuwing i { font-size: 20px; flex: 0 0 auto; margin-top: 1px; }
.bt-waarschuwing strong { display: block; }
.bt-waarschuwing small { display: block; margin-top: 2px; }

[data-bs-theme="dark"] .bt-partijregel { border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .bt-partijnaam small,
[data-bs-theme="dark"] .bt-bedrag span { color: #9aa3ad; }
[data-bs-theme="dark"] .bt-eerste { color: #f4d68f; }
[data-bs-theme="dark"] .bt-vinkje span { border-color: rgba(255, 255, 255, 0.24); }
[data-bs-theme="dark"] .bt-alle,
[data-bs-theme="dark"] .bt-machtigingvak {
  background: rgba(0, 156, 222, 0.09); border-color: rgba(0, 156, 222, 0.26);
}
[data-bs-theme="dark"] .bt-waarschuwing {
  background: rgba(214, 158, 0, 0.16); color: #f4d68f;
}

@media (max-width: 560px) {
  .bt-partijregel { grid-template-columns: auto 1fr; }
  .bt-bedrag { grid-column: 2; }
}

/* ---------------------------------------------------------------------
 * Tabellen op een telefoon
 *
 * De ledentabel is 685 pixels breed in een scherm van 364. Vier kolommen en
 * de actieknop stonden buiten beeld, zonder dat iets aangaf dat er meer was.
 * Op smalle schermen wordt elke rij daarom een blokje met de kop ervoor.
 * ------------------------------------------------------------------ */

@media (max-width: 640px) {
  #bt-ledentabel thead,
  #bt-metingtabel thead { position: absolute; left: -9999px; }

  #bt-ledentabel tr,
  #bt-metingtabel tr {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(5, 23, 34, 0.08);
  }

  #bt-ledentabel td,
  #bt-metingtabel td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border: 0 !important;
    padding: 5px 0 !important;
  }

  /* De kolomnaam komt voor de waarde te staan, uit het data-kop-kenmerk. */
  #bt-ledentabel td::before,
  #bt-metingtabel td::before {
    content: attr(data-kop);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #5c6572;
    font-weight: 700;
    flex: 0 0 auto;
  }

  /* De eerste cel is de naam; die heeft geen label nodig. */
  #bt-ledentabel td:first-child { display: block; margin-bottom: 8px; }
  #bt-ledentabel td:first-child::before { content: none; }

  #bt-ledentabel td:last-child { justify-content: flex-end; margin-top: 8px; }
  #bt-ledentabel td:last-child::before { content: none; }

  [data-bs-theme="dark"] #bt-ledentabel tr,
  [data-bs-theme="dark"] #bt-metingtabel tr { border-bottom-color: rgba(255,255,255,.09); }
  [data-bs-theme="dark"] #bt-ledentabel td::before,
  [data-bs-theme="dark"] #bt-metingtabel td::before { color: #9aa3ad; }
}

/* Het sjabloon laadt een laadplaatje dat er niet is; dat gaf op elk scherm
   een 404. De loader zelf is toch onzichtbaar, dus alleen het plaatje weg. */
.codex-loader img { display: none; }

/* ---------------------------------------------------------------------
 * Voeding
 * ------------------------------------------------------------------ */

.bt-maaltijd { margin-bottom: 22px; }
.bt-maaltijd:last-child { margin-bottom: 0; }

.bt-maaltijd h6 {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: #00658f;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(5, 23, 34, 0.08);
}

.bt-hap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding: 8px 0;
}

.bt-hap small { color: #5c6572; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bt-macro {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(5, 23, 34, 0.07);
}

.bt-macro:last-child { border-bottom: 0; }
.bt-macro span { color: #5c6572; }
.bt-macro strong { font-variant-numeric: tabular-nums; }
.bt-macro-som strong { font-size: 1.05rem; }

[data-bs-theme="dark"] .bt-maaltijd h6 { color: #6cc7f0; border-bottom-color: rgba(255,255,255,.09); }
[data-bs-theme="dark"] .bt-hap small,
[data-bs-theme="dark"] .bt-macro span { color: #9aa3ad; }
[data-bs-theme="dark"] .bt-macro { border-bottom-color: rgba(255,255,255,.08); }

/* ---------------------------------------------------------------------
 * Mijlpalen
 * ------------------------------------------------------------------ */

.bt-mijlpaal .card-body { padding: 1.4rem; }
.bt-mijlpaal strong { display: block; line-height: 1.3; }
.bt-mijlpaal small { display: block; color: #5c6572; margin-top: 3px; font-size: 0.78rem; }

.bt-mp-icoon {
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center; margin: 0 auto 12px;
  background: linear-gradient(140deg, #00658f, #009cde);
  color: #fff; font-size: 24px; flex: 0 0 auto;
}

.bt-mp-icoon.is-open {
  background: rgba(5, 23, 34, 0.05);
  color: #8b939e;
  width: 44px; height: 44px; font-size: 20px; margin: 0;
}

.bt-mijlpaal.is-behaald { border-color: rgba(0, 156, 222, 0.32) !important; }

[data-bs-theme="dark"] .bt-mijlpaal small { color: #9aa3ad; }
[data-bs-theme="dark"] .bt-mp-icoon.is-open { background: rgba(255,255,255,.07); color: #8f98a3; }
[data-bs-theme="dark"] .bt-mijlpaal.is-behaald { border-color: rgba(0,156,222,.4) !important; }

/* ---------------------------------------------------------------------
 * Foto's
 *
 * Twee foto's naast elkaar, even groot, met de datum eronder. Alleen zo is
 * er iets te vergelijken; een raster van willekeurige formaten laat vooral
 * zien dat de ene foto verder weg is genomen dan de andere.
 * ------------------------------------------------------------------ */

.bt-vergelijk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

/* Eén foto hoort niet de volle breedte te vullen; een portret van 1400 pixels
   breed uitgerekt over een dashboard leest als een fout. Twee foto's naast
   elkaar krijgen ieder de helft, en dat is precies wat vergelijken vraagt. */
.bt-vergelijk:has(> :only-child) { grid-template-columns: minmax(0, 320px); }
.bt-vergelijk { max-width: 720px; }

.bt-fotogroot { position: relative; margin: 0; }

.bt-fotogroot img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 13px; background: rgba(5, 23, 34, 0.05);
  display: block;
}

.bt-fotogroot figcaption {
  margin-top: 9px; font-size: 0.84rem; color: #5c6572;
  font-variant-numeric: tabular-nums;
}

.bt-fotoetiket {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 12px; border-radius: 99px;
  background: rgba(0, 0, 0, 0.62); color: #fff;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  backdrop-filter: blur(6px);
}

.bt-fotostrook {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(5, 23, 34, 0.08);
}

.bt-mini { position: relative; margin: 0; }

.bt-mini img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 9px; display: block;
}

.bt-mini figcaption {
  margin-top: 5px; font-size: 0.7rem; color: #5c6572; text-align: center;
}

.bt-fotoweg {
  position: absolute; top: 5px; right: 5px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, 0.55); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity 0.25s var(--veer);
}

.bt-mini:hover .bt-fotoweg,
.bt-fotoweg:focus-visible { opacity: 1; }

/* Op een aanraakscherm is er geen hover; daar staat de knop gewoon aan. */
@media (hover: none) { .bt-fotoweg { opacity: 1; } }

[data-bs-theme="dark"] .bt-fotogroot figcaption,
[data-bs-theme="dark"] .bt-mini figcaption { color: #9aa3ad; }
[data-bs-theme="dark"] .bt-fotogroot img { background: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .bt-fotostrook { border-top-color: rgba(255,255,255,.09); }

/* De meerekenende controle onder de macroverdeling. */
.bt-checkgoed { color: #0d5f35 !important; font-weight: 600; }
.bt-checkfout { color: #a5231c !important; font-weight: 600; }
[data-bs-theme="dark"] .bt-checkgoed { color: #92dfb2 !important; }
[data-bs-theme="dark"] .bt-checkfout { color: #f5b3ae !important; }

/* =====================================================================
 * Leesbaarheid en raakbaarheid
 *
 * Uit een controle tegen de UI-richtlijnen kwamen twee dingen die met het
 * blote oog te missen zijn maar in gebruik meteen opvallen.
 * ================================================================== */

/* "UTRECHT" onder het merk stond op 5,9 pixels. Dat is geen kleine letter
   meer, dat is een streepje. Tien pixels met ruime letterafstand blijft
   ondergeschikt aan de merknaam en is wél te lezen. */
.btmerk small {
  font-size: 10px;
  letter-spacing: 0.18em;
}

/* De eyebrow-labels stonden op 10; elf leest merkbaar rustiger zonder dat ze
   met de kop gaan concurreren. */
.bt-eyebrow { font-size: 11px; }

/* Etiketten net onder de twaalf. Ze dragen status — "actief", "niet gekomen" —
   en dat is precies het soort woord dat je niet wilt moeten turen. */
.theme-body .badge { font-size: 12px; }

/* ---- raakvlakken ----
   Een vinger is ongeveer negen millimeter breed; 44 pixels is het minimum dat
   je betrouwbaar raakt. Deze knoppen zaten daaronder. De knop zelf blijft
   even groot ogen — het raakvlak eromheen groeit. */

.bt-pijl,
.theme-body .btn-sm,
.theme-body .btn-icon,
.codex-header .sidebar-action,
.bt-fotoweg {
  position: relative;
}

.bt-pijl::after,
.theme-body .btn-sm::after,
.codex-header .sidebar-action::after,
.bt-fotoweg::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  /* Alleen het raakvlak vergroten; niets tekenen en niets in de weg leggen. */
  pointer-events: auto;
}

/* Op een muisscherm is dit onnodig en kan het overlappende knoppen hinderen. */
@media (hover: hover) and (pointer: fine) {
  .bt-pijl::after,
  .theme-body .btn-sm::after,
  .codex-header .sidebar-action::after,
  .bt-fotoweg::after { display: none; }
}

/* De uitklapknop van de zijbalk was 20 bij 30. */
.codex-header .sidebar-action,
.codex-sidebar .sidebar-action {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}

/* =====================================================================
 * Reactie op aanraken en aanwijzen
 *
 * Uit de richtlijnen: een micro-interactie duurt 150 tot 300 milliseconden,
 * en er hoort binnen 100ms zichtbaar iets te gebeuren als je iets aanraakt.
 * De menulinks in de zijbalk sprongen zonder overgang van kleur — dat leest
 * als een schokje in plaats van als een reactie.
 * ================================================================== */

.codex-menu a,
.codex-header .navicon-wrap,
.codex-header .user-icon,
.codex-header .sidebar-action,
.bt-uitslagregel,
.bt-logregel {
  transition: background-color 0.2s var(--veer),
              color 0.2s var(--veer),
              transform 0.2s var(--veer);
}

/* Iets dat je aantikt moet meteen laten merken dat het is aangekomen. Een
   kleine indruk is genoeg — en gebeurt binnen de 100ms die de richtlijn
   vraagt, want het is geen animatie maar een stand. */
.codex-menu a:active,
.codex-header .navicon-wrap:active,
.codex-header .user-icon:active,
.quickaction-grid:active,
.bt-snelknop:active {
  transform: scale(0.98);
}

/* Browsers wachten op aanraakschermen 300 milliseconden af of er een tweede
   tik komt (dubbeltikken om in te zoomen). Op knoppen is dat wachten onnodig
   en voelt het traag. */
a, button, [role="button"], input, select, textarea, label,
.quickaction-grid, .bt-lid, .bt-tijdknop, .bt-kaldag {
  touch-action: manipulation;
}

/* Wie beweging heeft uitgezet krijgt de standen zonder de overgang ernaartoe. */
@media (prefers-reduced-motion: reduce) {
  .codex-menu a:active,
  .quickaction-grid:active,
  .bt-snelknop:active { transform: none; }
}

/* De duur onder elke sessietijd stond op 11,5 pixels — net onder de grens van
   twaalf. Het is geen bijschrift maar informatie: een trainer leest het bij
   elke sessie van de dag, vierentwintig keer op één scherm. */
.bt-tijd span {
  font-size: 12px;
}

/* De meldingen uit het sjabloon zijn met opmaak verborgen, maar staan nog in
   de HTML. Ze tellen daardoor mee als tekst en dragen tijden van 08:30 die
   nergens op slaan. Uit de toegankelijkheidsboom halen scheelt bovendien een
   schermlezer een reeks onzinnige tijdstippen. */
.codex-header .navnotification-drop,
.codex-header .nav-iconlist > li:has(.notiicon-iconwrap) {
  display: none !important;
}

/* =====================================================================
 * Punten uit de Web Interface Guidelines
 * ================================================================== */

/* De browser moet weten dat dit een donker vlak is. Zonder color-scheme
   blijven de schuifbalk, de datumkiezer en de keuzelijsten in hun lichte
   uitvoering staan — witte blokken midden in een donker scherm. */
:root:not([data-bs-theme="light"]) { color-scheme: dark; }
:root[data-bs-theme="light"] { color-scheme: light; }

/* Koppen mogen niet eindigen met één los woord op de laatste regel. */
h1, h2, h3, h4, h5, h6,
.stat-card h4, .bt-doelkop strong, .card-header h5 {
  text-wrap: balance;
}

/* Lopende tekst leest prettiger als de regels niet ver uiteenlopen. */
.theme-body p, .bt-leeg p, .form-text {
  text-wrap: pretty;
}

/* Een uitklapmenu of zijbalk mag de pagina eronder niet meescrollen. */
.codex-sidebar,
.navprofile-drop,
.action-dropdown,
.bt-log,
.bt-partijlijst,
.bt-fotostrook {
  overscroll-behavior: contain;
}

/* De tikmarkering van mobiele browsers is standaard een grijs vierkant dat
   over afgeronde knoppen heen valt. Wij tekenen de indruk zelf. */
a, button, [role="button"], .quickaction-chip, .bt-lid, .bt-tijdknop {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------
 * Balk voor wie in het verkeerde portaal zit
 *
 * Een beheerder op /portaal/mijn/ zag "Goedenavond" met nul sessies en geen
 * abonnement. Dat leest als een kapot portaal, terwijl het gewoon het
 * ledenscherm is voor iemand die geen lid is. Deze balk zegt wat er aan de
 * hand is en brengt je in één klik naar de goede kant.
 * ------------------------------------------------------------------ */
.bt-portaalwissel{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  margin:0 0 1.4rem;padding:1rem 1.25rem;
  border:1px solid rgba(0,156,222,.42);
  border-radius:14px;
  background:rgba(0,156,222,.10);
  font-size:.95rem;line-height:1.55;
}
.bt-portaalwissel > div{flex:1 1 22rem;min-width:0;}
.bt-portaalwissel strong{font-weight:600;}

.bt-portaalknop{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.7rem 1.3rem;
  border-radius:999px;
  background:#009cde;color:#08090b;
  font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background-color .18s cubic-bezier(.22,1,.36,1),
             transform .18s cubic-bezier(.22,1,.36,1);
}
.bt-portaalknop:hover,
.bt-portaalknop:focus-visible{
  background:#4fc1ea;color:#08090b;transform:translateY(-1px);
}
@media (prefers-reduced-motion:reduce){
  .bt-portaalknop:hover,.bt-portaalknop:focus-visible{transform:none;}
}

/* =====================================================================
 * Knopvocabulaire — Operate-modus
 *
 * Gemeten op het studioportaal: zes verschillende hoekrondingen naast
 * elkaar (50%, 5px, 6px, 9px, 14px, 99px) en drie klikdoelen onder de
 * 44px. De regel voor beheerschermen is dat een gebruiker niet per scherm
 * opnieuw moet leren wat klikbaar is: dezelfde knopvorm, hetzelfde
 * formulier-vocabulaire, dezelfde pictogramstijl.
 *
 * Drie rondingen, elk met een reden:
 *   --r-knop  8px   een knop
 *   --r-vlak  14px  een kaart of paneel
 *   --r-rond  50%   iets wat werkelijk rond is (pictogramknop, avatar)
 * ================================================================== */

:root {
  --r-knop: 8px;
  --r-vlak: 14px;
  --r-rond: 50%;
  --klik-min: 44px;       /* ondergrens voor alles wat je aanraakt */
}

/* ---- knoppen ---- */
.btn, button.btn, a.btn,
.bt-pijl, .btn-sm, .btn-close,
.bt-tijdknop, .bt-actie {
  border-radius: var(--r-knop) !important;
}

/* Klikdoelen. De agenda-pijlen waren 38px, "Vandaag" 32 en het
   sluitkruisje 30 — allemaal onder de grens waarop je met een muis snel
   en met een vinger überhaupt raakt wat je bedoelt. */
.btn, button.btn, a.btn,
.bt-pijl, .btn-sm, .btn-close,
.sidebar-action, .bt-tijdknop {
  min-height: var(--klik-min);
  min-width: var(--klik-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Behalve knoppen die tekst dragen: die mogen breder dan hoog zijn. */
.btn:not(.btn-icoon), .btn-sm { min-width: 0; padding-inline: 1rem; }

/* Rond blijft rond: pictogramknoppen en avatars. */
.sidebar-action, .avatar, .navprofile-pic, .btn-icoon-rond {
  border-radius: var(--r-rond) !important;
}

/* ---- vlakken ---- */
.card, .stat-card, .quickaction-chip, .bt-paneel, .bt-kaart {
  border-radius: var(--r-vlak) !important;
}
/* De snelactie-kaart stond op 99px: een pilvorm op een blok van 222×149.
   Dat leest als een fout, niet als een keuze. */
.quickaction-grid, .quickaction-grid > * {
  border-radius: var(--r-vlak) !important;
}

/* =====================================================================
 * De toestanden die ontbraken
 *
 * Elk element dat je kunt bedienen heeft er zeven: standaard, hover,
 * focus, actief, uitgeschakeld, bezig en fout. Gemeten waren alleen de
 * eerste twee aanwezig. Wie op "Opslaan" drukt en niets ziet gebeuren,
 * drukt nog een keer.
 * ================================================================== */

.btn, button.btn, a.btn {
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, opacity .16s ease;
}

.btn:active:not([disabled]) { transform: translateY(1px); }

.btn[disabled], .btn[aria-disabled="true"],
button[disabled], input[disabled], select[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Bezig. Het knopje houdt zijn breedte, zodat de opmaak niet verspringt
   op het moment dat je juist zit te wachten. */
.btn[data-bezig="ja"], .btn.is-bezig {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn[data-bezig="ja"]::after, .btn.is-bezig::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: bt-draai .7s linear infinite;
}
@keyframes bt-draai { to { transform: rotate(360deg); } }

/* Fout. Rood alleen als drager is te weinig: er staat ook een tekst bij. */
.bt-veld-fout input, .bt-veld-fout select, .bt-veld-fout textarea,
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: #ff6b6b !important;
  background: rgba(255,107,107,.06);
}
.bt-foutregel {
  display: flex; align-items: flex-start; gap: .4rem;
  margin: .4rem 0 0;
  font-size: .84rem;
  color: #ff8f8f;          /* 6,1:1 op #14171c */
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active:not([disabled]) { transform: none; }
  .btn[data-bezig="ja"]::after, .btn.is-bezig::after { animation-duration: 2s; }
}

/* ---- bijstellingen na meten ----
   De regels hierboven werkten grofweg, maar drie dingen liepen mis:
     · het sluitkruisje schoot van 30 naar 60 doordat min-width én padding
       optelden;
     · de agendapijlen bleven 38 breed omdat `.btn { min-width: 0 }` ze ving;
     · de snelactie-kaart hield zijn pilvorm — die regel verloor.            */

/* Vierkante pictogramknoppen: precies 44, niet meer. */
.btn-close, .bt-pijl {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
}

/* De snelactie-kaarten. Met de ouder ervoor wint hij wel. */
.quickaction-grid .quickaction-chip,
.quickaction-grid > a,
.quickaction-grid > button,
.dashboard-wrapper .quickaction-chip {
  border-radius: var(--r-vlak) !important;
}

/* Een lid in de lijst is een chip: pilvorm mag, maar wel aan te tikken. */
.bt-lid {
  min-height: var(--klik-min);
  display: inline-flex;
  align-items: center;
}