/*
 * MySite-beheer — zelfde look and feel als het Creativitijd-beheersysteem (beheer.creativitijd.be):
 * Geist, donkere zijbalk, paarse primaire kleur, shadcn-achtige maten (knoppen/velden 32 px, radius 10 px).
 * Kleurwaarden komen rechtstreeks uit beheersysteem/src/index.css.
 */

@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/static/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/static/fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/static/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/static/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.51 0.24 281);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.51 0.24 281);
  --ok: oklch(0.52 0.13 155);
  --radius: 0.625rem;
  --radius-md: calc(var(--radius) * 0.8);
  --radius-xl: calc(var(--radius) * 1.4);
  /* Merkkleur van het Creativitijd-logo */
  --brand: #33255e;
  --sidebar: oklch(0.22 0.02 275);
  --sidebar-foreground: oklch(0.86 0.01 275);
  --sidebar-primary: oklch(0.72 0.16 281);
  --sidebar-accent: oklch(0.29 0.04 278);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 8%);
  --font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
  /* Titels en grote cijfers, zoals in het beheersysteem */
  --font-display: 'Bricolage Grotesque Variable', var(--font-sans);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--background);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  font-size: 0.875rem;
}

a {
  color: inherit;
}
.inhoud a:not(.knop),
.dialoog a:not(.knop) {
  color: var(--primary);
  text-decoration: none;
}
.inhoud a:not(.knop):hover,
.dialoog a:not(.knop):hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--ring) 60%, transparent);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.3;
}
h1 {
  font-size: 1.125rem;
  font-weight: 600;
}
h2 {
  font-size: 1rem;
  font-weight: 500;
}
p {
  margin: 0 0 0.75rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  background: var(--muted);
  padding: 0.1em 0.4em;
  border-radius: calc(var(--radius) * 0.6);
}

.icoon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.icoon--groot {
  width: 1.25rem;
  height: 1.25rem;
}

.sr-only,
.skiplink:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skiplink:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 50;
  background: var(--background);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
}

/* ---------- App-raamwerk ---------- */
.app {
  display: flex;
  min-height: 100dvh;
  background: color-mix(in oklch, var(--muted) 40%, var(--background));
}

.merk {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--sidebar-accent-foreground);
}
/* Logo van creativitijd.be, ingekleurd via currentColor (wit in de zijbalk, paars op de aanmeldkaart) */
.merk__logo {
  display: block;
  width: 9rem;
  aspect-ratio: 969.3 / 300;
  background-color: currentColor;
  -webkit-mask: url('/static/logo-creativitijd.svg') no-repeat center / contain;
  mask: url('/static/logo-creativitijd.svg') no-repeat center / contain;
}
@media (forced-colors: active) {
  .merk__logo {
    background-color: CanvasText;
  }
}
.merk__sub {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: color-mix(in oklch, var(--sidebar-foreground) 70%, var(--sidebar));
}

.zijbalk {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 15rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  color: var(--sidebar-foreground);
}
.zijbalk__merk {
  display: block;
  padding: 1.25rem;
  text-decoration: none;
}

.zijmenu {
  list-style: none;
  margin: 0;
  padding: 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.zijmenu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--sidebar-foreground);
  transition:
    background-color 0.15s,
    color 0.15s;
}
.zijmenu a:hover {
  background: color-mix(in oklch, var(--sidebar-accent) 60%, transparent);
  color: var(--sidebar-accent-foreground);
}
.zijmenu a[aria-current='page'] {
  background: var(--sidebar-accent);
  color: var(--sidebar-primary);
}

.gebruiker {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid var(--sidebar-border);
}
.gebruiker__avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  font-size: 0.75rem;
  font-weight: 500;
}
.gebruiker__tekst {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.gebruiker__naam,
.gebruiker__mail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gebruiker__naam {
  color: var(--sidebar-accent-foreground);
}
.gebruiker__mail {
  font-size: 0.75rem;
  color: color-mix(in oklch, var(--sidebar-foreground) 60%, transparent);
}
.gebruiker form {
  margin: 0;
}

.ikoonknop {
  display: inline-grid;
  place-items: center;
  padding: 0.375rem;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  cursor: pointer;
}
.ikoonknop:hover {
  background: var(--sidebar-accent);
}

/* Gsm: kopbalk + uitklapmenu */
.mobiel {
  display: none;
}

.inhoud {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
}
.inhoud:focus {
  outline: none;
}
.inhoud > * {
  max-width: 72rem;
}

/* ---------- Aanmelden ---------- */
.auth {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 1rem;
  background: var(--sidebar);
}
.auth__kaart {
  width: 100%;
  max-width: 24rem;
  background: var(--background);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.auth__kaart .merk {
  color: var(--brand);
}
.auth__kaart .merk__logo {
  width: 10rem;
}
.auth__kaart .merk__sub {
  color: var(--muted-foreground);
}
.auth__kaart h1 {
  font-size: 1.25rem;
  margin: 1rem 0 1.5rem;
}
.auth__kaart:focus {
  outline: none;
}
.auth__kaart a {
  color: var(--primary);
}

/* ---------- Paginakop ---------- */
.titelrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.titelrij__acties {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.kruimel {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
.inhoud .kruimel a {
  color: var(--muted-foreground);
}
.inhoud .kruimel a:hover {
  color: var(--foreground);
}

.pagina-titel {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Filterpillen (Actief / Gearchiveerd) */
.pillen {
  display: flex;
  gap: 0.25rem;
}
.inhoud a.pil {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
}
.inhoud a.pil:hover {
  background: var(--muted);
  text-decoration: none;
}
.inhoud a.pil[aria-current='page'] {
  border-color: color-mix(in oklch, var(--primary) 30%, transparent);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  color: var(--foreground);
}
.pil__aantal {
  color: var(--muted-foreground);
}

/* ---------- Kaarten / secties ---------- */
.sectie {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
}
.sectie > h2 {
  margin-bottom: 0.25rem;
}
.sectie > h2 + .formulier,
.sectie > h2 + .tabelvak,
.sectie > h2 + .lijst,
.sectie > h2 + .veldlijst,
.sectie > h2 + .leeg {
  margin-top: 0.75rem;
}
.sectie > h2 + p,
.sectie__uitleg {
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
}
.sectie > :last-child {
  margin-bottom: 0;
}

.voetnoot {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  margin-top: 0.75rem;
}

.leeg {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  color: var(--muted-foreground);
  margin: 0;
}

.opmerking {
  background: color-mix(in oklch, var(--primary) 8%, transparent);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

.label {
  display: inline-block;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0.125rem 0.5rem;
  line-height: 1.4;
  vertical-align: middle;
}
.label--primair {
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  color: var(--primary);
}

.melding {
  border: 1px solid oklch(0.86 0.07 155);
  background: oklch(0.97 0.025 155);
  color: var(--foreground);
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

/* ---------- Tabellen ---------- */
.tabelvak {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  overflow-x: auto;
}
.sectie .tabelvak {
  margin-bottom: 0.75rem;
}
.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.tabel th,
.tabel td {
  text-align: left;
  padding: 0.5rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.tabel th:first-child,
.tabel td:first-child {
  padding-left: 0.75rem;
}
.tabel th:last-child,
.tabel td:last-child {
  padding-right: 0.75rem;
}
.tabel th {
  height: 2.5rem;
  font-weight: 500;
  white-space: nowrap;
}
.tabel tbody tr:last-child td {
  border-bottom: 0;
}
.tabel tbody tr:hover {
  background: color-mix(in oklch, var(--muted) 50%, transparent);
}
.tabel__sub {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.tabel .hoofd {
  font-weight: 500;
}
.inhoud .tabel a.hoofd {
  color: var(--foreground);
}
.getal {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
.rechts {
  text-align: right !important;
}
.nowrap {
  white-space: nowrap;
}
.zacht {
  color: var(--muted-foreground);
}

/* Lijst met acties (modules) */
.lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lijst__rij {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.lijst__rij p {
  margin: 0.125rem 0 0;
}
.lijst__titel {
  font-weight: 500;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.lijst__rij form {
  margin: 0;
}

/* ---------- Formulieren ---------- */
.formulier {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 44rem;
}
.auth .formulier {
  max-width: none;
}
.veld {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.veld--half {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 13rem;
}
.veld label,
.veld legend {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  padding: 0;
}
.veld legend {
  margin-bottom: 0.375rem;
}
.verplicht {
  font-weight: 400;
  color: var(--muted-foreground);
}
.veld__hulp {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin: 0;
}
.veld__fout {
  font-size: 0.75rem;
  color: var(--destructive);
  margin: 0;
}

input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
select,
textarea {
  font: inherit;
  font-size: 0.875rem;
  color: inherit;
  width: 100%;
  min-width: 0;
  height: 2rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: transparent;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
select {
  background: var(--background);
}
textarea {
  height: auto;
  min-height: 4rem;
  padding: 0.5rem 0.625rem;
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted-foreground);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}
[aria-invalid='true'] {
  border-color: var(--destructive) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}
.keuzes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.keuzes--onder {
  flex-direction: column;
  gap: 0.5rem;
}
.keuzes--onder .keuze {
  align-items: flex-start;
}
.keuzes--onder .keuze input {
  margin-top: 0.2rem;
}
.keuze {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
.keuze input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.acties {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.foutoverzicht {
  border: 1px solid oklch(0.83 0.08 27);
  background: oklch(0.975 0.015 27);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  max-width: 44rem;
}
.foutoverzicht:focus {
  outline: none;
}
.foutoverzicht h2 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.foutoverzicht ul {
  margin: 0;
  padding-left: 1.1rem;
}
.inhoud .foutoverzicht a,
.auth .foutoverzicht a {
  color: var(--destructive);
}

/* ---------- Knoppen (shadcn-maten) ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.knop:hover {
  background: color-mix(in oklch, var(--primary) 80%, transparent);
  text-decoration: none !important;
}
.knop:active {
  transform: translateY(1px);
}
.inhoud a.knop,
.auth a.knop {
  color: var(--primary-foreground);
}
.knop--secundair,
.inhoud a.knop--secundair {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
}
.knop--secundair:hover {
  background: var(--muted);
}
.knop--gevaar {
  background: color-mix(in oklch, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
.knop--gevaar:hover {
  background: color-mix(in oklch, var(--destructive) 20%, transparent);
}
.knop--link {
  height: auto;
  padding: 0;
  background: none;
  color: var(--primary);
}
.knop--link:hover {
  background: none;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}
.knop--vol {
  width: 100%;
}
form.inline {
  display: inline;
  margin: 0;
}

.uitklap {
  margin-top: 0.75rem;
}
.uitklap > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  color: var(--primary);
}
.uitklap > summary::-webkit-details-marker {
  display: none;
}
.uitklap[open] > summary {
  margin-bottom: 1rem;
}

/* ---------- Formulierbouwer ---------- */
.subnav {
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.bouwer {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.bouwer > .sectie {
  margin-top: 1rem;
}
@media (min-width: 1100px) {
  .bouwer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .bouwer > .sectie:last-child {
    position: sticky;
    top: 1rem;
  }
}
.titelrij--sectie {
  margin-bottom: 0.25rem;
}
.veldlijst {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.veldlijst__rij {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.veldlijst__rij:last-child {
  border-bottom: 0;
}
.veldlijst__info {
  flex: 1;
  min-width: 0;
}
.inhoud .veldlijst a.hoofd {
  color: var(--foreground);
}
.veldlijst__acties {
  display: flex;
  gap: 0.25rem;
}
.knop--klein {
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
}
.knop:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.veld-toevoegen {
  border-top: 1px dashed var(--border);
  padding-top: 1rem;
  max-width: none;
}
.voorbeeld {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.voorbeeld .cf-form {
  --cf-accent: var(--primary);
  --cf-error: var(--destructive);
  --cf-radius: var(--radius);
}
.voorbeeld .cf-label {
  font-weight: 500;
}
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0 0 0.75rem;
}
.tussentitel {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 1.25rem 0 0.25rem;
}
.plakbalk {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 -4px 12px -6px rgb(0 0 0 / 0.08);
}

/* ---------- Inzendingen en spam ---------- */
.label--waarschuwing {
  background: oklch(0.95 0.06 85);
  color: oklch(0.45 0.1 70);
}
.label--gevaar {
  background: color-mix(in oklch, var(--destructive) 12%, var(--background));
  color: var(--destructive);
}
.tabel td > .label {
  margin-left: 0.375rem;
}
.stip {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--primary);
  margin-right: 0.4rem;
  vertical-align: middle;
}
.rij--nieuw .hoofd {
  font-weight: 600;
}
.vakje {
  width: 2rem;
}
.vakje input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.filters .veld {
  flex: 0 1 auto;
  width: auto;
  min-width: 9rem;
}
.filters .veld--zoek {
  flex: 1 1 14rem;
}
.filters select {
  max-width: 22rem;
}
.filters__knoppen {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2rem;
}
.bulk__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
}
.bulk__balk select {
  width: auto;
}
.paginering {
  margin-left: auto;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.detail {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.detail > .sectie {
  margin-top: 0;
}
@media (min-width: 1100px) {
  .detail {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}
.gegevens {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 0 0;
}
.gegevens dt {
  color: var(--muted-foreground);
}
.gegevens dd {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.gegevens--klein {
  font-size: 0.8125rem;
}
.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.blokkeren {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.blokkeren .formulier {
  margin-top: 0.75rem;
}
.kerncijfers {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}
.kerncijfers strong {
  font-size: 1.125rem;
  margin-right: 0.25rem;
}
@media (max-width: 767px) {
  .gegevens {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }
  .gegevens dd {
    margin-bottom: 0.5rem;
  }
  .filters .veld {
    flex: 1 1 100%;
  }
  .paginering {
    margin-left: 0;
  }
}

/* DNS-records: lange waarden laten afbreken */
.breek,
.tabel--dns code {
  word-break: break-all;
}
.tabel--dns td {
  vertical-align: top;
}

/* Stappenlijst (maildomein automatisch instellen) */
.stappen {
  list-style: none;
  margin: 0.75rem 0 1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stappen__stap {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.stappen__stap:last-child {
  border-bottom: 0;
}
.stappen__naam {
  font-weight: 500;
  margin-right: 0.5rem;
}
.stappen__stap .veld__hulp {
  margin-top: 0.25rem;
}

/* Waarschuwing (bv. sleutel vervalt binnenkort) */
.waarschuwing {
  border: 1px solid oklch(0.85 0.09 80);
  background: oklch(0.97 0.04 85);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  margin-bottom: 1rem;
}
.waarschuwing--fout {
  border-color: oklch(0.83 0.08 27);
  background: oklch(0.975 0.015 27);
}

/* ---------- Social media ---------- */
.label--ok {
  background: oklch(0.95 0.04 155);
  color: oklch(0.42 0.1 155);
}
.kanalen {
  display: inline-flex;
  gap: 0.25rem;
  vertical-align: middle;
}
.kanaal {
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 0.3rem;
  color: var(--muted-foreground);
}
.compact {
  margin: 0;
  padding-left: 1.1rem;
}
.sectie--nadruk {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
}
.aanpassing {
  margin-top: 1rem;
}
.voorbeeldtekst {
  white-space: pre-wrap;
  background: var(--muted);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin: 0 0 0.25rem;
}
.mediaraster {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.75rem;
}
.mediaraster__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.mediaraster__acties {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  margin-top: 0.25rem;
}
.publiceren {
  margin-top: 1rem;
}
/* Voorbeeld zoals op Facebook en Instagram */
.voorbeelden {
  display: grid;
  gap: 1rem;
}
.vb {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  max-width: 30rem;
  overflow: hidden;
}
.vb__kop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
}
.vb__avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
}
.vb__sub {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.vb__tekst {
  white-space: pre-wrap;
  padding: 0 0.75rem 0.75rem;
  margin: 0;
}
.vb--ig .vb__tekst {
  padding-top: 0.625rem;
}
.vb__raster {
  display: grid;
  gap: 2px;
}
.vb__raster--2,
.vb__raster--4 {
  grid-template-columns: 1fr 1fr;
}
.vb__raster--3 {
  grid-template-columns: 1fr 1fr;
}
.vb__raster--3 .vb__cel:first-child {
  grid-column: 1 / -1;
}
.vb__cel {
  position: relative;
}
.vb__cel img,
.vb__ig-beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vb__raster--1 .vb__cel img {
  height: auto;
}
.vb__raster--2 .vb__cel img,
.vb__raster--3 .vb__cel img,
.vb__raster--4 .vb__cel img {
  aspect-ratio: 1;
}
.vb__meer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}
.vb__ig-beeld {
  position: relative;
}
.vb__ig-beeld--staand {
  aspect-ratio: 4 / 5;
}
.vb__ig-beeld--vierkant {
  aspect-ratio: 1;
}
.vb__ig-beeld--liggend {
  aspect-ratio: 1.91 / 1;
}
.vb__teller {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
}
.vb__leeg {
  margin: 0 0.75rem 0.75rem;
  color: var(--destructive);
}
/* Gesprek */
.gesprek {
  list-style: none;
  margin: 0.75rem 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.gesprek__item {
  border-left: 2px solid var(--border);
  padding: 0.25rem 0 0.25rem 0.75rem;
}
.gesprek__item--klant {
  border-left-color: var(--primary);
}
.gesprek__kop {
  margin: 0;
  font-size: 0.8125rem;
}
.gesprek__tekst {
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
}
@media (min-width: 768px) {
  .verberg-groot {
    display: none;
  }
}
@media (max-width: 767px) {
  .kalender {
    display: none;
  }
}

/* ============================================================
   Bouwstenen zoals in het beheersysteem (beheer.creativitijd.be)
   ============================================================ */
.inhoud h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.terug {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}
.inhoud a.terug {
  color: var(--muted-foreground);
}
.inhoud a.terug:hover {
  color: var(--foreground);
  text-decoration: none;
}
.kop-sub {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Zachte statuspillen */
.pil-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.pil-status::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
}
.toon--grijs {
  background: var(--muted);
  color: var(--muted-foreground);
}
.toon--amber {
  background: oklch(0.97 0.045 85);
  color: oklch(0.5 0.12 65);
}
.toon--rood {
  background: oklch(0.96 0.03 15);
  color: oklch(0.52 0.18 22);
}
.toon--blauw {
  background: oklch(0.96 0.03 250);
  color: oklch(0.5 0.15 255);
}
.toon--paars {
  background: oklch(0.96 0.03 300);
  color: oklch(0.5 0.17 300);
}
.toon--groen {
  background: oklch(0.96 0.04 155);
  color: oklch(0.47 0.12 155);
}
.stip-status {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
  background: currentColor;
}

/* Avatars met een vaste kleur per naam */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.avatar--klein {
  width: 2rem;
  height: 2rem;
  font-size: 0.6875rem;
}
.avatar--k0 {
  background: oklch(0.94 0.04 300);
  color: oklch(0.45 0.15 300);
}
.avatar--k1 {
  background: oklch(0.94 0.04 230);
  color: oklch(0.45 0.12 235);
}
.avatar--k2 {
  background: oklch(0.94 0.05 160);
  color: oklch(0.43 0.11 160);
}
.avatar--k3 {
  background: oklch(0.95 0.06 85);
  color: oklch(0.45 0.11 70);
}
.avatar--k4 {
  background: oklch(0.94 0.04 15);
  color: oklch(0.48 0.16 20);
}
.avatar--k5 {
  background: oklch(0.94 0.04 185);
  color: oklch(0.43 0.09 185);
}
.avatar--k6 {
  background: oklch(0.93 0.05 275);
  color: oklch(0.45 0.16 275);
}
.avatar--k7 {
  background: oklch(0.95 0.05 55);
  color: oklch(0.5 0.14 50);
}
.avatar--k8 {
  background: oklch(0.95 0.06 125);
  color: oklch(0.45 0.11 130);
}

/* Kanaal-iconen (Facebook, Instagram) */
.kanaalicoon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.kanaalchip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.125rem 0.5rem 0.125rem 0.3rem;
  font-size: 0.75rem;
  background: var(--background);
}

/* Chips (filters) en segmentknop (weergave) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.inhoud a.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: var(--background);
  text-decoration: none;
}
.inhoud a.chip:hover {
  color: var(--foreground);
  background: var(--muted);
}
.inhoud a.chip[aria-current='page'] {
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
  background: color-mix(in oklch, var(--primary) 9%, var(--background));
  color: var(--foreground);
}
.chip__aantal {
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.segment {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.inhoud .segment a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: var(--background);
  text-decoration: none;
}
.inhoud .segment a + a {
  border-left: 1px solid var(--border);
}
.inhoud .segment a[aria-current='page'] {
  background: var(--primary);
  color: var(--primary-foreground);
}
.ikoonknop--rand {
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  border-radius: var(--radius);
  width: 2rem;
  height: 2rem;
  padding: 0;
}
.ikoonknop--rand:hover {
  background: var(--muted);
}

/* Kerncijfertegels */
.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.tegel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  padding: 0.75rem;
}
.tegel__label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.tegel__waarde {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.inhoud a.tegel {
  color: inherit;
  text-decoration: none;
}
.inhoud a.tegel:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
}

/* Tabs met lijn, zoals in het beheersysteem */
.tabs {
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 1.25rem;
}
.inhoud .tabs a,
.dialoog .tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.25rem 0.125rem 0.75rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
}
.inhoud .tabs a:hover,
.dialoog .tabs a:hover {
  color: var(--foreground);
}
.inhoud .tabs a[aria-current='page'],
.dialoog .tabs a[aria-current='page'] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.tabs__aantal {
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0 0.4rem;
  font-variant-numeric: tabular-nums;
}

/* Twee kolommen: inhoud + vaste zijkolom */
.met-zijkolom {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 1100px) {
  .met-zijkolom {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
  .zijkolom {
    position: sticky;
    top: 1.5rem;
  }
}
.zijkolom {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  padding: 1rem;
  font-size: 0.875rem;
}
.zijkolom h2 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.zijkolom dl {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.zijkolom dt {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.zijkolom dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Instellingenrij: titel + uitleg + bediening */
.instelrijen {
  display: grid;
  gap: 0.75rem;
}
.instelrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  padding: 1rem;
}
.instelrij__titel {
  font-size: 0.875rem;
  font-weight: 500;
}
.instelrij__uitleg {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin: 0.125rem 0 0;
}
.instelrij form {
  margin: 0;
  flex-shrink: 0;
}
/* Schakelaar (aan/uit) als knop */
.schakelaar {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 0;
  background: var(--input);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s;
}
.schakelaar::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform 0.15s;
}
.schakelaar[aria-checked='true'] {
  background: var(--primary);
}
.schakelaar[aria-checked='true']::after {
  transform: translateX(1rem);
}

/* Gesprek als chatballonnen */
.berichten {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.bericht {
  display: flex;
  gap: 0.75rem;
}
.bericht--team {
  flex-direction: row-reverse;
}
.bericht__inhoud {
  min-width: 0;
  max-width: 85%;
  display: grid;
  gap: 0.25rem;
}
.bericht--team .bericht__inhoud {
  justify-items: end;
}
.bericht__kop {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  padding: 0 0.25rem;
}
.bericht__kop strong {
  color: var(--foreground);
  font-weight: 500;
}
.bericht__ballon {
  border-radius: 1rem;
  padding: 0.625rem 0.875rem;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  background: var(--muted);
}
.bericht--team .bericht__ballon {
  background: var(--primary);
  color: var(--primary-foreground);
}
.bericht--aanpassing .bericht__ballon {
  background: oklch(0.96 0.03 15);
  color: oklch(0.35 0.1 22);
}
.gebeurtenis {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.gebeurtenis .icoon {
  width: 0.875rem;
  height: 0.875rem;
}
.opsteller {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--background);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  overflow: hidden;
}
.opsteller textarea {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 5rem;
  padding: 0.75rem !important;
}
.opsteller__voet {
  display: flex;
  justify-content: flex-end;
  padding: 0 0.75rem 0.75rem;
}

/* ---------- Social media: kalender, rijen, post ---------- */
.mini {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: cover;
  background: var(--muted);
}
.mini--groot {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
}
.mini--leeg {
  display: inline-grid;
  place-items: center;
  color: var(--muted-foreground);
}
.mini--leeg .icoon {
  width: 0.875rem;
  height: 0.875rem;
}
.postrijen {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.postrijen li + li {
  border-top: 1px solid var(--border);
}
.inhoud a.postrij {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  color: var(--foreground);
  text-decoration: none;
  min-height: 3.5rem;
}
.inhoud a.postrij:hover {
  background: color-mix(in oklch, var(--muted) 60%, transparent);
}
.postrij__tekst {
  flex: 1;
  min-width: 0;
  display: grid;
}
.postrij__titel {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.postrij__sub {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  overflow: hidden;
  white-space: nowrap;
}
.postrij__sub .icoon {
  width: 0.75rem;
  height: 0.75rem;
}
.postrij__klant {
  font-weight: 600;
  color: color-mix(in oklch, var(--foreground) 70%, transparent);
  margin-right: 0.25rem;
}
.pillen-rij {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem;
}
.kalender-titel {
  text-transform: capitalize;
}
.kalender-filters {
  margin-bottom: 1rem;
}
/* Maandraster zoals het overzicht van het beheersysteem */
.kal__kop,
.kal__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}
.kal__week {
  margin-bottom: 0.25rem;
}
.kal__kop span {
  padding: 0.375rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.kal__dag {
  min-height: 8.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  transition: border-color 0.15s;
}
.kal__dag:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
}
.kal__dag--buiten {
  background: color-mix(in oklch, var(--muted) 45%, var(--background));
}
.kal__dag--vandaag {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 30%, transparent);
}
.kal__dagkop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 0.25rem 0.375rem;
}
.kal__nummer {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kal__dag--buiten .kal__nummer {
  opacity: 0.4;
}
.kal__dag--vandaag .kal__nummer {
  color: var(--primary);
}
.inhoud a.kal__plus {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  opacity: 0;
  transition: opacity 0.15s;
}
.kal__dag:hover a.kal__plus,
.inhoud a.kal__plus:focus-visible {
  opacity: 1;
}
.inhoud a.kal__plus:hover {
  background: var(--muted);
  color: var(--foreground);
}
.inhoud a.kal__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.375rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--foreground);
  text-decoration: none;
  min-width: 0;
}
.inhoud a.kal__item:hover {
  background: var(--muted);
}
.kal__tijd {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}
.kal__titel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Lijst per dag (lijstweergave en gsm) */
.daglijst {
  display: grid;
  gap: 0.75rem;
}
.dagkaart {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--background);
  overflow: hidden;
}
.dagkaart--vandaag {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 30%, transparent);
}
.dagkaart__kop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}
.dagkaart__nummer {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dagkaart__dag {
  display: block;
  font-weight: 600;
  text-transform: capitalize;
}
.dagkaart__aantal {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.dagkaart .postrijen {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
/* Post */
.post-kop {
  margin-bottom: 1rem;
}
.post-kop__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.kanaalchip .icoon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--muted-foreground);
}
.stappenbalk {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.stappenbalk li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stappenbalk li + li::before {
  content: '';
  width: 2rem;
  height: 1px;
  margin: 0 0.5rem;
  background: var(--border);
}
.stappenbalk__stip {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--background);
}
.stappenbalk__stip .icoon {
  width: 1.25rem;
  height: 1.25rem;
}
.stappenbalk .klaar {
  color: var(--foreground);
}
.stappenbalk .klaar .stappenbalk__stip {
  border: 0;
  color: oklch(0.55 0.13 155);
}
.stappenbalk .huidig {
  color: var(--foreground);
  font-weight: 600;
}
.stappenbalk .huidig .stappenbalk__stip {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 3px var(--background);
  background: var(--primary);
}
.stappenbalk--aanpassing .huidig .stappenbalk__stip {
  border-color: oklch(0.6 0.18 22);
  background: oklch(0.6 0.18 22);
}
.keurkaart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid color-mix(in oklch, var(--primary) 35%, var(--border));
  background: color-mix(in oklch, var(--primary) 6%, var(--background));
  border-radius: var(--radius-xl);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.keurkaart h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
}
.keurkaart p {
  margin: 0;
}
.keurkaart__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.knop--groot {
  height: 2.5rem;
  padding: 0 1rem;
}
.post-raster {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.post-raster__hoofd > .sectie:first-child {
  margin-top: 0;
}
@media (min-width: 1100px) {
  .post-raster {
    grid-template-columns: minmax(0, 1fr) 23rem;
  }
  .post-raster__zij {
    position: sticky;
    top: 1.5rem;
  }
}
.tekstblok + .tekstblok {
  margin-top: 1rem;
}
.tekstblok__kop {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.5rem 0 0.375rem;
}
.tekstblok__kop .knop--link {
  margin-left: auto;
  font-size: 0.75rem;
}
.voorbeelden__tabs {
  margin-bottom: 0.75rem;
}
.vb {
  max-width: none;
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}
.vb__acties {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--border);
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.vb__ig-ring {
  display: inline-grid;
  place-items: center;
  padding: 2px;
  border-radius: 999px;
  background: #d6249f;
}
.vb__ig-ring .avatar {
  border: 2px solid #fff;
}
.vb__bolletjes {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  padding-top: 0.5rem;
}
.vb__bolletjes span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--border);
}
.vb__bolletjes .actief {
  background: #0095f6;
}
.alleen-gsm {
  display: none;
}

.kerncijfers div {
  display: flex;
  flex-direction: column;
}
.kerncijfers dt {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.kerncijfers dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Statistieken ---------- */
.periode-uitleg {
  margin: -0.5rem 0 1rem;
  font-size: 0.8125rem;
}
.tegel__verschil {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.pil-status.verschil {
  font-size: 0.6875rem;
  white-space: nowrap;
}
.grafiek {
  margin: 0.75rem 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  background: var(--background);
}
.grafiek__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.8125rem;
  margin-bottom: 0.5rem;
}
.grafiek__sleutel::before {
  content: '';
  display: inline-block;
  width: 0.875rem;
  height: 0;
  border-top: 2px solid var(--primary);
  vertical-align: middle;
  margin-right: 0.375rem;
}
.grafiek__sleutel--vorig::before {
  border-top: 2px dashed var(--muted-foreground);
}
.grafiek__max {
  margin-left: auto;
  color: var(--muted-foreground);
}
.grafiek__svg {
  display: block;
  width: 100%;
  height: 10rem;
  overflow: visible;
}
.grafiek__raster {
  stroke: var(--border);
  stroke-width: 1;
}
.grafiek__vlak {
  fill: oklch(0.51 0.24 281 / 8%);
}
.grafiek__lijn {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.grafiek__lijn--hoofd {
  stroke: var(--primary);
}
.grafiek__lijn--vorig {
  stroke: var(--muted-foreground);
  stroke-dasharray: 4 4;
  stroke-width: 1.5;
  opacity: 0.7;
}
.grafiek__strook {
  fill: transparent;
}
.grafiek__strook:hover {
  fill: oklch(0.51 0.24 281 / 6%);
}
.grafiek__as {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.375rem;
}
.sectie .kerncijfers {
  margin: 1rem 0 1.25rem;
}
.stat-raster {
  display: grid;
  gap: 1.25rem 2rem;
}
@media (min-width: 1024px) {
  .stat-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.stat-raster h3,
.sectie h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}
.stat-raster > div > h3:first-child {
  margin-top: 0;
}
.balklijst td:first-child {
  position: relative;
  max-width: 0;
  width: 100%;
}
.balklijst__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.balklijst .tabel__sub {
  display: block;
}
.balklijst + .balklijst {
  margin-top: 0.75rem;
}
.balk {
  display: block;
  height: 0.25rem;
  margin-top: 0.25rem;
  border-radius: 999px;
  background: var(--muted);
}
.balk__vulling {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in oklch, var(--primary) 55%, var(--background));
}
.balk__vulling--1 {
  width: 5%;
}
.balk__vulling--2 {
  width: 10%;
}
.balk__vulling--3 {
  width: 15%;
}
.balk__vulling--4 {
  width: 20%;
}
.balk__vulling--5 {
  width: 25%;
}
.balk__vulling--6 {
  width: 30%;
}
.balk__vulling--7 {
  width: 35%;
}
.balk__vulling--8 {
  width: 40%;
}
.balk__vulling--9 {
  width: 45%;
}
.balk__vulling--10 {
  width: 50%;
}
.balk__vulling--11 {
  width: 55%;
}
.balk__vulling--12 {
  width: 60%;
}
.balk__vulling--13 {
  width: 65%;
}
.balk__vulling--14 {
  width: 70%;
}
.balk__vulling--15 {
  width: 75%;
}
.balk__vulling--16 {
  width: 80%;
}
.balk__vulling--17 {
  width: 85%;
}
.balk__vulling--18 {
  width: 90%;
}
.balk__vulling--19 {
  width: 95%;
}
.balk__vulling--20 {
  width: 100%;
}
.sectie__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.kopieerregel code {
  font-size: 0.8125rem;
  background: var(--muted);
  border-radius: calc(var(--radius) - 4px);
  padding: 0.125rem 0.375rem;
  word-break: break-all;
}
.instelrij .knoppenrij {
  margin-top: 0;
  flex-wrap: nowrap;
}

/* ---------- Klanten ---------- */
.zoekveld {
  flex: 1 1 14rem;
  max-width: 20rem;
  margin-left: auto;
}
.zoekveld + .titelrij__acties {
  margin-left: 0;
}
.klantcel {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.inhoud a.klantcel {
  color: var(--foreground);
  text-decoration: none;
}
.inhoud a.klantcel:hover .hoofd {
  color: var(--primary);
}
.pillen-rij--links {
  justify-content: flex-start;
}
.klantkop {
  align-items: center;
}
.klantkop h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.inhoud a.kop-sub {
  color: var(--muted-foreground);
}
.tabs + .sectie,
.tabs + .sitekaart,
.sectie--eerste {
  margin-top: 0;
}
.sitekaart {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  padding: 1rem;
  margin-bottom: 1rem;
}
.sitekaart__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.sitekaart__kop h2 {
  font-size: 1rem;
  font-weight: 600;
}
.sitekaart__kop p {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
}
.sitekaart .instelrij {
  background: color-mix(in oklch, var(--muted) 35%, var(--background));
}
.zijkolom__label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.notities {
  white-space: pre-wrap;
  margin: 0.125rem 0 0;
}

/* Modulestatus in de klantenlijst: gekleurd icoon = actief, vaag icoon = niet actief */
.tabel th.modulekolom,
.tabel td.modulekolom {
  text-align: center;
  width: 6.5rem;
}
.modulestatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px dashed var(--border);
}
.modulestatus:not(.modulestatus--aan) {
  color: color-mix(in oklch, var(--muted-foreground) 45%, transparent);
}
.modulestatus .icoon {
  width: 1rem;
  height: 1rem;
}
.modulestatus--aan {
  border-style: solid;
  border-color: transparent;
}

/* ---------- Gsm ---------- */
@media (max-width: 767px) {
  .app {
    flex-direction: column;
  }
  .zijbalk {
    display: none;
  }
  .mobiel {
    display: block;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--sidebar);
    color: var(--sidebar-foreground);
  }
  .mobiel__balk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.5rem;
    padding: env(safe-area-inset-top) 0.75rem 0;
    list-style: none;
    cursor: pointer;
  }
  .mobiel__balk::-webkit-details-marker {
    display: none;
  }
  .mobiel__balk .merk {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  .mobiel__balk .merk__logo {
    width: 6.5rem;
  }
  .mobiel__menu {
    padding-bottom: 0.5rem;
    border-top: 1px solid var(--sidebar-border);
  }
  .mobiel__menu .zijmenu {
    padding-top: 0.5rem;
  }
  .mobiel__menu .zijmenu a {
    padding: 0.625rem 0.75rem;
  }
  .inhoud {
    padding: 1rem;
  }
  .titelrij__acties {
    width: 100%;
    margin-left: 0;
  }
  .titelrij__acties .knop {
    flex: 1;
    height: 2.5rem;
  }
  .knop,
  input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
  select {
    height: 2.5rem;
  }
  input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
  select,
  textarea {
    font-size: 1rem;
  }
  .verberg-gsm {
    display: none;
  }
  .lijst__rij {
    flex-direction: column;
    align-items: stretch;
  }
  .kal {
    display: none;
  }
  .alleen-gsm {
    display: grid;
  }
  .inhoud a.postrij .kanalen,
  .inhoud a.postrij .pillen-rij {
    display: none;
  }
  .stappenbalk li + li::before {
    width: 0.75rem;
    margin: 0 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
.zijkolom .hoofd {
  display: block;
  font-weight: 500;
}

/* ---------- Klantpagina ---------- */
.klantkop__info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
}
.inhoud .klantkop__info a {
  color: var(--muted-foreground);
}
.inhoud .klantkop__info a:hover {
  color: var(--primary);
}
.overzichtrijen {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}
.overzichtrij {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.5rem 1rem;
}
.overzichtrij + .overzichtrij {
  border-top: 1px solid var(--border);
}
.overzichtrij__naam {
  font-weight: 500;
  width: 8.5rem;
  flex-shrink: 0;
}
.overzichtrij__tekst {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
}
@media (max-width: 599px) {
  .overzichtrij {
    flex-wrap: wrap;
  }
  .overzichtrij__tekst {
    flex-basis: calc(100% - 1.25rem);
    order: 3;
    margin-left: 1.25rem;
  }
}
.sitekeuze {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}
.modulekaart {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  margin-bottom: 0.75rem;
}
.modulekaart > .instelrij {
  border: 0;
  background: transparent;
}
.modulekaart__inhoud {
  border-top: 1px solid var(--border);
  padding: 0 1rem 1rem;
}
/* De sectie van de module heeft al een titel in de schakelrij erboven */
.modulekaart__inhoud > .sectie {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}
.modulekaart__inhoud > .sectie > h2:first-child,
.modulekaart__inhoud > .sectie > .sectie__kop > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.modulekaart__inhoud > .sectie > .sectie__kop {
  justify-content: flex-end;
  margin-top: 0.75rem;
}
.modulekaart__inhoud > .sectie > :first-child + * {
  margin-top: 0.75rem;
}
#geavanceerd .instelrijen {
  margin-top: 0.75rem;
}
#geavanceerd code {
  font-size: 0.75rem;
  font-weight: 400;
  margin-left: 0.375rem;
}

/* Sjablonen bij een nieuw formulier */
.sjablonen {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.sjabloon {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  background: var(--background);
  cursor: pointer;
}
.sjabloon:has(input:checked) {
  border-color: var(--primary);
  background: oklch(0.51 0.24 281 / 5%);
}
.sjabloon input {
  margin-top: 0.2rem;
  accent-color: var(--primary);
}
.sjabloon__naam {
  display: block;
  font-weight: 500;
}
.sjabloon__uitleg {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* ---------- Vensters (pop-up) ---------- */
.dialoog {
  width: min(44rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 20px 50px oklch(0 0 0 / 25%);
}
.dialoog::backdrop {
  background: oklch(0.2 0.02 275 / 45%);
}
.dialoog__kop {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}
.dialoog__kop h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.dialoog__inhoud {
  padding: 1rem 1.25rem 1.25rem;
}
.dialoog__inhoud > .sectie,
.dialoog__inhoud form > .sectie {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  box-shadow: none;
  background: transparent;
}
.dialoog .plakbalk {
  position: sticky;
  bottom: -1.25rem;
}

/* ---------- Formulierbouwer: snelle lijst ---------- */
.knoppenrij--kop {
  margin: 0 0 0.5rem;
}
.veldlijst__label {
  width: 100%;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  font: inherit;
  font-weight: 500;
  color: var(--foreground);
}
.veldlijst__label:hover {
  border-color: var(--border);
}
.veldlijst__label:focus {
  border-color: var(--ring);
  outline: 2px solid oklch(0.51 0.24 281 / 25%);
}
.veldlijst__info .tabel__sub {
  padding-left: 0.5rem;
}
.veldlijst__verplicht {
  flex-shrink: 0;
  width: 6rem;
  font-size: 0.8125rem;
}
.knop--gevaar-zacht:hover {
  color: var(--destructive);
  border-color: color-mix(in oklch, var(--destructive) 40%, var(--border));
}
.knop--gevaar-tekst {
  color: var(--destructive);
}
.verwijderrij {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 599px) {
  .veldlijst__rij {
    flex-wrap: wrap;
  }
  .veldlijst__info {
    flex-basis: 100%;
  }
}

/* ---------- Formulierbouwer: sjablonen en snelle velden ---------- */
.veldlijst__nr {
  width: 1.25rem;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.sjabloonkeuze {
  margin-bottom: 1.25rem;
}
.sjabloonkeuze > p {
  margin: 0 0 0.75rem;
  color: var(--muted-foreground);
}
.sjablonen form {
  display: contents;
}
.sjabloon--knop {
  width: 100%;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
  font: inherit;
  color: inherit;
}
.sjabloon--knop:hover {
  border-color: var(--primary);
  background: oklch(0.51 0.24 281 / 5%);
}
.veld-toevoegen h3 {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.snelvelden {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.875rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  font: inherit;
  font-size: 0.8125rem;
  color: var(--foreground);
  cursor: pointer;
}
button.chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.chip .icoon {
  width: 0.875rem;
  height: 0.875rem;
}
.chip--gebruikt {
  color: var(--muted-foreground);
}
.dialoog .voorbeeld {
  margin-top: 0.75rem;
}
.dialoog .pillen {
  margin-bottom: 0.75rem;
}

/* Voorbeeld van een mail (maandrapport) */
.mailvoorbeeld {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: #fff;
  color: #1d1d1f;
}
.mailvoorbeeld h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}
.mailvoorbeeld h4 {
  margin: 1.25rem 0 0.375rem;
  font-size: 0.9375rem;
}
.mailvoorbeeld__regels {
  margin: 0;
}
.mailvoorbeeld__regels > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  border-top: 1px solid var(--border);
}
.mailvoorbeeld__regels dt {
  color: var(--muted-foreground);
}
.mailvoorbeeld__regels dd {
  margin: 0;
  text-align: right;
}

/* ---------- Blog ---------- */
.blogeditor__velden {
  border: 0;
  padding: 0;
  margin: 0;
  display: contents;
}
.blogeditor__tekst {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  min-height: 22rem;
}
.mdbalk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.25rem 0 0.375rem;
}
.blogeditor__rij {
  display: grid;
  gap: 1rem;
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .blogeditor__rij {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}
.blogeditor__rij > .veld {
  width: auto;
}
.blogeditor__beeld {
  display: block;
  max-width: 100%;
  max-height: 16rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 0.375rem 0;
}
.bestandknop {
  cursor: pointer;
  margin-top: 0.25rem;
}
.bestandknop:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.leeg--klein {
  padding: 0.75rem;
  margin: 0.375rem 0;
}
.veld__label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.blogeditor__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.inplannen {
  position: relative;
}
.inplannen > summary {
  list-style: none;
}
.inplannen > summary::-webkit-details-marker {
  display: none;
}
.inplannen__velden {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.75rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px oklch(0 0 0 / 12%);
}
.inplannen__velden label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
}
.blogvoorbeeld img {
  max-width: 100%;
  border-radius: var(--radius);
}
.blogvoorbeeld h1 {
  font-size: 1.5rem;
  margin: 0.25rem 0 0.75rem;
}
.blogvoorbeeld__intro {
  font-size: 1.0625rem;
  color: var(--muted-foreground);
}
.blogeditor {
  max-width: 52rem;
}
.blogeditor > .plakbalk,
.blogeditor > .verwijderrij,
.blogeditor > .waarschuwing,
.blogeditor__rij {
  flex-basis: 100%;
}
.veld label.bestandknop {
  display: inline-flex;
  align-items: center;
  width: auto;
  font-size: 0.8125rem;
  line-height: normal;
  padding: 0 0.625rem;
}
.blogeditor__rij .veld {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.blogeditor__rij .veld input[type='date'] {
  width: 100%;
}
.overzichtrij__acties {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.schakelaarform {
  display: inline-flex;
}
.overzichtrij__schakelaar {
  display: inline-flex;
  width: 2.25rem;
  flex-shrink: 0;
}
.overzichtrij__acties {
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 0.375rem;
}
.overzichtrij__schakelaar,
.schakelaarform {
  align-items: center;
}
.overzichtrij__schakelaar .schakelaar {
  display: block;
}
.schakelaarform {
  margin: 0;
}

/* ---------- Kaarten (zoals het beheersysteem) ---------- */
.kaart {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}
.kaart + .kaart,
.kaart + .kaartgroep,
.kaartgroep + .kaart {
  margin-top: 1rem;
}
.kaart__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.kaart__kop h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-sans);
}
.kaart__uitleg {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.kaart__acties {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.kaart__inhoud {
  padding: 1rem;
}
.kaart--lijst > .kaart__inhoud {
  padding: 0;
}
.kaart .formulier {
  max-width: none;
}
.kaart .tabelvak {
  border: 0;
  border-radius: 0;
  margin: 0;
}
.kaart--lijst .leeg {
  margin: 0;
  border: 0;
  padding: 2rem 1rem;
  text-align: center;
}
.kaart__inhoud > :first-child {
  margin-top: 0;
}
.kaart__inhoud > :last-child {
  margin-bottom: 0;
}
.kaart__voet {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
}
.kaartlijst {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kaartrij {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
}
.kaartrij + .kaartrij {
  border-top: 1px solid var(--border);
}
.kaartrij__voor {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.kaartrij__tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.kaartrij__titel {
  font-size: 0.875rem;
  font-weight: 500;
}
.kaartrij__sub {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.kaartrij__acties {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
@media (max-width: 599px) {
  .kaartrij {
    flex-wrap: wrap;
  }
  .kaartrij__acties {
    margin-left: auto;
  }
}
.kaart .uitklap {
  margin: 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
}
.kaart--lijst .formulier {
  padding: 1rem;
}
.knop--stil {
  background: transparent;
  border-color: transparent;
  color: var(--muted-foreground);
}
.knop--stil:hover {
  color: var(--foreground);
  background: var(--muted);
}

/* ---------- Klantpagina (herzien) ---------- */
.klantkop {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0.25rem 0 1.25rem;
}
.klantkop__naam {
  min-width: 0;
  flex: 1;
}
.klantkop h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}
.inhoud a.klantkop__site {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
}
.inhoud a.klantkop__site:hover {
  color: var(--primary);
}
.klantkop__site .icoon {
  width: 0.75rem;
  height: 0.75rem;
}
.met-zijkolom .tabs {
  margin-bottom: 1.25rem;
}
.sitekeuze {
  margin: 0 0 1rem;
}
.module-uit {
  margin-top: 1rem;
}
.kopieerblok {
  margin-bottom: 1rem;
}
.kopieerregel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0;
}
.uitklap--plat {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
.uitklap--plat > summary {
  padding: 0;
  font-size: 0.875rem;
}
.uitklap--plat[open] > summary {
  margin-bottom: 0.75rem;
}
.select--klein {
  height: 1.75rem;
  padding: 0 1.75rem 0 0.5rem;
  font-size: 0.8125rem;
}
.inline-rij {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.veld--onderaan {
  align-self: flex-end;
}
.kaartrij .kanaalicoon {
  width: 1.5rem;
  height: 1.5rem;
}
.kaartrij__titel .pil-status {
  margin-left: 0.25rem;
  vertical-align: 1px;
}
.kaartrij__titel a.hoofd {
  color: var(--foreground);
}
.zijkolom .pil-status {
  margin-left: 0.25rem;
}
.kaart__voet .uitklap,
.kaart .kaart__voet .uitklap {
  border: 0;
  padding: 0;
}
.kaart__voet > .formulier,
.kaart--lijst .kaart__voet > .formulier {
  padding: 0;
}
[hidden] {
  display: none !important;
}
.select--klein {
  width: auto;
  max-width: 11rem;
}
.kaartrij__titel {
  overflow-wrap: anywhere;
}
@media (max-width: 599px) {
  .kaartrij__tekst {
    flex-basis: calc(100% - 3.5rem);
  }
  .kaartrij__acties {
    width: 100%;
    justify-content: flex-end;
  }
  .kaart__kop {
    flex-wrap: wrap;
  }
}
tr[data-href] {
  cursor: pointer;
}
tr[data-href]:hover > td {
  background: color-mix(in oklch, var(--muted) 60%, transparent);
}
.tabel a.hoofd:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Mailstatus per inzending */
.tabel .mailkolom {
  width: 3.5rem;
  text-align: center;
}
.mailstatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
}
.mailstatus .icoon {
  width: 0.875rem;
  height: 0.875rem;
}
.mailstatus--ok {
  background: oklch(0.96 0.04 155);
  color: oklch(0.47 0.12 155);
}
.mailstatus--bezig {
  background: oklch(0.97 0.045 85);
  color: oklch(0.5 0.12 65);
}
.mailstatus--fout {
  background: oklch(0.96 0.03 15);
  color: oklch(0.52 0.18 22);
}
.mailstatus--geen {
  color: var(--muted-foreground);
}

/* Uitklapmenu (bv. exporteren per formulier) */
.menu {
  position: relative;
}
.menu > summary {
  list-style: none;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu__lijst {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 20;
  min-width: 16rem;
  max-height: 20rem;
  overflow: auto;
  padding: 0.375rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px oklch(0 0 0 / 12%);
}
.inhoud .menu__lijst a {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: calc(var(--radius) - 4px);
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.875rem;
}
.inhoud .menu__lijst a:hover {
  background: var(--muted);
}
.menu__uitleg {
  margin: 0.25rem 0.625rem 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Sjabloonkeuze: nette kaarten (de algemene regel voor .veld label drukt de regelafstand samen) */
.veld label.sjabloon {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  line-height: 1.4;
  font-weight: 400;
  min-height: 5.5rem;
}
.sjablonen {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
}
.sjabloon input {
  margin-top: 0.125rem;
  flex-shrink: 0;
}
.sjabloon__naam {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.sjabloon__uitleg {
  line-height: 1.45;
}
.sjabloon:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
}

/* ---------- Formulier: stappen om klaar te zetten ---------- */
.instelstappen {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  overflow: hidden;
}
.instelstappen__stap + .instelstappen__stap {
  border-left: 1px solid var(--border);
}
.instelstappen__knop,
.instelstappen__knop button {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
  height: 100%;
  padding: 0.75rem 0.875rem;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--foreground);
  cursor: pointer;
}
form.instelstappen__knop {
  padding: 0;
}
.inhoud a.instelstappen__knop {
  color: var(--foreground);
  text-decoration: none;
}
.instelstappen__knop:hover,
.instelstappen__knop button:hover {
  background: color-mix(in oklch, var(--muted) 60%, transparent);
}
.instelstappen__teken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.instelstappen__teken--ok {
  border-color: transparent;
  background: oklch(0.96 0.04 155);
  color: oklch(0.47 0.12 155);
}
.instelstappen__teken .icoon {
  width: 0.875rem;
  height: 0.875rem;
}
.instelstappen__tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.instelstappen__titel {
  font-size: 0.875rem;
  font-weight: 500;
}
.instelstappen__sub {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.instelstappen__stap:not(.is-ok) .instelstappen__titel {
  color: var(--primary);
}
@media (max-width: 899px) {
  .instelstappen {
    grid-template-columns: 1fr;
  }
  .instelstappen__stap + .instelstappen__stap {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

/* Instellingenvenster: tabbladen en ingeklapte talen */
.tabs--venster {
  margin: -0.25rem 0 1.25rem;
}
.andere-talen {
  flex-basis: 100%;
  margin: -0.25rem 0 0;
}
.andere-talen > summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  list-style: none;
}
.andere-talen > summary::before {
  content: '▸ ';
}
.andere-talen[open] > summary::before {
  content: '▾ ';
}
.andere-talen[open] > summary {
  margin-bottom: 0.75rem;
}
.andere-talen > .veld + .veld {
  margin-top: 1rem;
}
.kaartlijst--rand {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}
.inhoud .tabs a:hover,
.dialoog .tabs a:hover {
  text-decoration: none;
}
.instelstappen {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
}
@media (max-width: 899px) {
  .instelstappen {
    grid-auto-flow: row;
  }
}

/* Statistieken koppelen: genummerde stappen en overzicht per bron */
.koppelstappen {
  list-style: none;
  margin: 0;
  padding: 0;
}
.koppelstap + .koppelstap {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.koppelstap__titel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.koppelstap__nr {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.koppelstap__inhoud {
  margin-top: 0.75rem;
}
.koppelstap__inhoud .kopieerregel {
  margin: 0 0 0.75rem;
}
.koppelbronnen {
  margin-bottom: 0;
}
.uitklap .koppelstap__titel {
  margin-top: 0.25rem;
}
.uitklap .koppelstap__inhoud + .koppelstap__titel {
  margin-top: 1.25rem;
}
.kaart--lijst .uitklap .formulier {
  padding: 0;
}
.koppelfout {
  display: block;
  color: var(--destructive, #c0392b);
}

/* Statistieken: samenvatting in gewone taal, raster met drie kolommen */
.samenvatting {
  margin-top: 0;
  margin-bottom: 1rem;
}
.samenvatting__lijst {
  margin: 0.5rem 0 0;
  padding-left: 1.125rem;
  display: grid;
  gap: 0.25rem;
}
.samenvatting__lijst li::marker {
  color: var(--primary);
}
@media (min-width: 1024px) {
  .stat-raster--drie {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.sectie > h2 + .stat-raster {
  margin-top: 1rem;
}