/* Inboxvana: rustig, papier en inkt. Eén accentkleur (--merk), per organisatie in te stellen. */

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Kleuren en maten ---------- */

:root {
  color-scheme: light dark;
  --merk: #2E4A9E;
  --op-merk: #FFFFFF;

  --canvas: #F6F5F1;
  --oppervlak: #FFFFFF;
  --oppervlak-2: #FAF9F6;
  --oppervlak-3: #EFEDE7;
  --veld: #FCFBF9;
  --inkt: #16181D;
  --inkt-2: #454A52;
  --inkt-3: #6A6F78;
  --inkt-4: #9EA2A8;
  --lijn: rgba(22, 24, 29, 0.075);
  --lijn-sterk: rgba(22, 24, 29, 0.13);
  --lijn-hover: rgba(22, 24, 29, 0.24);
  --hover: rgba(22, 24, 29, 0.045);
  --rij-hover: rgba(255, 255, 255, 0.72);
  --scroll: rgba(22, 24, 29, 0.18);

  --schaduw-1: 0 1px 2px rgba(22, 24, 29, 0.05), 0 1px 1px rgba(22, 24, 29, 0.03);
  --schaduw-2: 0 1px 2px rgba(22, 24, 29, 0.04), 0 4px 12px -2px rgba(22, 24, 29, 0.05), 0 18px 40px -16px rgba(22, 24, 29, 0.1);
  --schaduw-3: 0 2px 6px rgba(22, 24, 29, 0.06), 0 14px 32px -8px rgba(22, 24, 29, 0.16), 0 40px 80px -24px rgba(22, 24, 29, 0.2);

  --groen: #1F8A5B;
  --groen-tekst: #17704A;
  --groen-zacht: #E7F4EC;
  --groen-inkt: #145C3D;
  --amber: #A8590A;
  --amber-stip: #E39A2D;
  --amber-zacht: #FCEFD9;
  --amber-inkt: #7A4308;
  --rood: #C23A2E;
  --rood-zacht: #FBE9E6;
  --rood-inkt: #93281F;
  --rood-knop: #C23A2E;
  --info-zacht: #EFEEE9;

  --notitie: #FFF7DD;
  --notitie-rand: #F0DFA4;
  --notitie-inkt: #4A3A0C;
  --notitie-inkt-2: #7A6420;
  --notitie-accent: #A87C0C;
  --notitie-ring: rgba(214, 166, 30, 0.22);
  --notitie-tabs: #F6EAC0;
  --notitie-knop: #8A6A12;
  --notitie-knop-inkt: #FFFFFF;

  --tabs-vlak: #F1EFEA;
  --toast: #1F2328;
  --toast-inkt: #F4F4F2;
  --schakel-uit: #D6D4CD;
  --skelet: #ECEAE4;
  --skelet-licht: #F6F5F1;
  --illu-lijn: #A9ACB1;
  --illu-schaduw: rgba(22, 24, 29, 0.06);

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-kop: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --snel: 160ms;
  --zacht: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Afgeleide merkkleuren; ook op het voorbeeld bij Eigen merk, zodat dat live meekleurt. */
:root, .merk-voorbeeld {
  --merk-tekst: var(--merk);
  --merk-zacht: color-mix(in oklab, var(--merk) 9%, var(--oppervlak));
  --merk-zachter: color-mix(in oklab, var(--merk) 5%, var(--oppervlak));
  --merk-hover: color-mix(in oklab, var(--merk) 86%, black);
  --merk-ring: color-mix(in oklab, var(--merk) 16%, transparent);
  --merk-rand-zacht: color-mix(in oklab, var(--merk) 16%, transparent);
  --uit-vlak: color-mix(in oklab, var(--merk) 5%, var(--oppervlak));
  --uit-rand: color-mix(in oklab, var(--merk) 14%, transparent);
  --focus: var(--merk-tekst);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #14171A;
    --oppervlak: #1C2024;
    --oppervlak-2: #212529;
    --oppervlak-3: #2A2F34;
    --veld: #181B1E;
    --inkt: #ECEDEE;
    --inkt-2: #C1C5CA;
    --inkt-3: #969CA3;
    --inkt-4: #6A717A;
    --lijn: rgba(255, 255, 255, 0.07);
    --lijn-sterk: rgba(255, 255, 255, 0.12);
    --lijn-hover: rgba(255, 255, 255, 0.22);
    --hover: rgba(255, 255, 255, 0.055);
    --rij-hover: rgba(255, 255, 255, 0.035);
    --scroll: rgba(255, 255, 255, 0.16);

    --schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --schaduw-2: 0 0 0 1px rgba(255, 255, 255, 0.045), 0 2px 8px rgba(0, 0, 0, 0.28), 0 20px 44px -18px rgba(0, 0, 0, 0.55);
    --schaduw-3: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 50px -10px rgba(0, 0, 0, 0.65);

    --groen: #3FB27F;
    --groen-tekst: #6FD3A2;
    --groen-zacht: rgba(63, 178, 127, 0.14);
    --groen-inkt: #A4E5C5;
    --amber: #F0A64B;
    --amber-stip: #F0A64B;
    --amber-zacht: rgba(240, 166, 75, 0.14);
    --amber-inkt: #F6C88E;
    --rood: #F07A6E;
    --rood-zacht: rgba(240, 122, 110, 0.13);
    --rood-inkt: #F8B4AC;
    --rood-knop: #C9483C;
    --info-zacht: #23282D;

    --notitie: #2A2517;
    --notitie-rand: #4A4024;
    --notitie-inkt: #F1E2B4;
    --notitie-inkt-2: #CDB878;
    --notitie-accent: #E3B53F;
    --notitie-ring: rgba(227, 181, 63, 0.2);
    --notitie-tabs: #36301C;
    --notitie-knop: #C79A26;
    --notitie-knop-inkt: #1E1704;

    --tabs-vlak: #15181B;
    --toast: #2C3238;
    --toast-inkt: #F2F3F4;
    --schakel-uit: #3A4046;
    --skelet: #23282D;
    --skelet-licht: #2C3238;
    --illu-lijn: #5E656D;
    --illu-schaduw: rgba(0, 0, 0, 0.3);
  }
  :root, .merk-voorbeeld {
    --merk-tekst: color-mix(in oklab, var(--merk) 48%, white);
    --merk-zacht: color-mix(in oklab, var(--merk) 26%, var(--oppervlak));
    --merk-zachter: color-mix(in oklab, var(--merk) 13%, var(--oppervlak));
    --merk-hover: color-mix(in oklab, var(--merk) 86%, white);
    --merk-ring: color-mix(in oklab, var(--merk-tekst) 22%, transparent);
    --merk-rand-zacht: color-mix(in oklab, var(--merk-tekst) 22%, transparent);
    --uit-vlak: color-mix(in oklab, var(--merk) 15%, var(--oppervlak));
    --uit-rand: color-mix(in oklab, var(--merk-tekst) 18%, transparent);
  }
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--scroll) transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--canvas);
  color: var(--inkt);
  font: 400 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
#app { height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--merk-tekst); }
img, svg { display: block; }
[hidden] { display: none !important; }
h1, h2, h3, p { overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in oklab, var(--merk) 22%, transparent); }

.alleen-lezer {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.icoon { flex: none; }

/* ---------- Knoppen ---------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 14px;
  border: 0; border-radius: 10px;
  font: 600 14px/1 var(--font); letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color var(--snel) var(--zacht), box-shadow var(--snel) var(--zacht), transform 100ms var(--zacht), color var(--snel);
}
.knop:active:not(:disabled) { transform: scale(0.98); }
.knop-tekst { overflow: hidden; text-overflow: ellipsis; }
/* Ruimte boven en onder (weer weggemargind), zodat de staarten van g, p en y niet worden afgeknipt. */
.knop-tekst { padding-block: 0.2em; margin-block: -0.2em; }
/* Een lange foutmelding met een adres erin loopt op een smal scherm niet buiten het blok. */
.melding-tekst { overflow-wrap: anywhere; }
.knop--eerste {
  background: var(--merk); color: var(--op-merk);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(15, 20, 40, 0.18), 0 3px 8px -3px color-mix(in oklab, var(--merk) 60%, transparent);
}
.knop--eerste:hover:not(:disabled) { background: var(--merk-hover); }
.knop--tweede { background: var(--oppervlak); color: var(--inkt); box-shadow: inset 0 0 0 1px var(--lijn-sterk), 0 1px 2px rgba(22, 24, 29, 0.04); }
.knop--tweede:hover:not(:disabled) { background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn-hover); }
.knop--gevaar { background: var(--rood-knop); color: #FFFFFF; }
.knop--gevaar:hover:not(:disabled) { background: color-mix(in oklab, var(--rood-knop) 88%, black); }
.knop--notitie { background: var(--notitie-knop); color: var(--notitie-knop-inkt); }
.knop--notitie:hover:not(:disabled) { background: color-mix(in oklab, var(--notitie-knop) 88%, black); }
.knop:disabled { opacity: 0.48; cursor: not-allowed; }
.knop--bezig:disabled { opacity: 1; cursor: progress; }
.knop--klein { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: 9px; gap: 6px; }
.knop--breed { width: 100%; }

.icoonknop {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--inkt-2);
  cursor: pointer;
  transition: background-color var(--snel), color var(--snel);
}
.icoonknop:hover:not(:disabled), .icoonknop[aria-expanded="true"] { background: var(--hover); color: var(--inkt); }
.icoonknop:disabled { opacity: 0.45; cursor: not-allowed; }
.icoonknop--gevaar:hover:not(:disabled) { background: var(--rood-zacht); color: var(--rood); }

.link-knop {
  border: 0; background: none;
  padding: 4px 6px; margin: -4px -2px;
  border-radius: 6px;
  color: var(--merk-tekst);
  font: 600 12.5px/1.2 var(--font);
  cursor: pointer;
}
.link-knop:hover { background: var(--merk-zacht); }

/* ---------- Velden ---------- */

.formulier { display: grid; gap: 16px; min-width: 0; }
.formulier--rij { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.formulier-knoppen { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.formulier-knoppen--links { justify-content: flex-start; }
.formrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; min-width: 0; }
.formrij--server { grid-template-columns: minmax(0, 1fr) 96px; }
.formrij--hex { grid-template-columns: minmax(0, 240px); }

.veld { display: grid; gap: 6px; min-width: 0; align-content: start; }
.veld-label { font-size: 13px; font-weight: 600; color: var(--inkt); }
.veld-uitleg { margin: 0; font-size: 12.5px; color: var(--inkt-3); line-height: 1.45; }
.veld-fout { margin: 0; font-size: 12.5px; color: var(--rood); font-weight: 500; }

.invoer {
  width: 100%; min-height: 40px;
  padding: 9px 12px;
  border: 0; border-radius: 10px;
  background: var(--veld);
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  font-size: 14px; line-height: 1.4;
  transition: box-shadow var(--snel), background-color var(--snel);
}
.invoer::placeholder { color: var(--inkt-4); }
.invoer:hover { box-shadow: inset 0 0 0 1px var(--lijn-hover); }
.invoer:focus { outline: none; background: var(--oppervlak); box-shadow: inset 0 0 0 1.5px var(--merk-tekst), 0 0 0 4px var(--merk-ring); }
.invoer[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--rood); }
.invoer--tekst { min-height: 96px; resize: vertical; line-height: 1.55; }
.invoer-met-knop { position: relative; }
.invoer-met-knop .invoer { padding-right: 46px; }
.invoer-knop {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: none; color: var(--inkt-3); cursor: pointer;
}
.invoer-knop:hover { color: var(--inkt); background: var(--hover); }

.keuzelijst {
  appearance: none; -webkit-appearance: none;
  height: 36px; padding: 0 32px 0 11px;
  border: 0; border-radius: 10px;
  background-color: var(--veld);
  background-image: linear-gradient(45deg, transparent 50%, var(--inkt-3) 50%), linear-gradient(135deg, var(--inkt-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
}
.keuzelijst:disabled { opacity: 0.6; cursor: default; }

.schakelaar-rij { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.schakelaar-tekst { display: grid; gap: 2px; min-width: 0; }
.schakelaar-label { font-weight: 600; font-size: 13.5px; cursor: pointer; }
.schakelaar {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none;
  width: 40px; height: 24px; margin: 0;
  border-radius: 999px;
  background: var(--schakel-uit);
  cursor: pointer;
  transition: background-color 180ms var(--zacht);
}
.schakelaar::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 1px 1px rgba(0, 0, 0, 0.06);
  transition: transform 180ms var(--zacht);
}
.schakelaar:checked { background: var(--merk); }
.schakelaar:checked::before { transform: translateX(16px); }
.schakelaar:disabled { opacity: 0.5; cursor: default; }

.kleurkiezer { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.kleurkiezer legend { padding: 0; margin-bottom: 8px; }
.kleuren { display: flex; flex-wrap: wrap; gap: 6px; }
.kleur { position: relative; width: 34px; height: 34px; cursor: pointer; }
.kleur input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kleur-stip {
  position: absolute; inset: 4px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--k);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  color: #FFFFFF;
  pointer-events: none;
  transition: box-shadow var(--snel), transform 120ms var(--zacht);
}
.kleur:hover .kleur-stip { transform: scale(1.06); }
.kleur input:checked + .kleur-stip, .kleur--gekozen .kleur-stip { box-shadow: 0 0 0 2px var(--oppervlak), 0 0 0 4px var(--k); }
.kleur input:focus-visible + .kleur-stip { outline: 2px solid var(--focus); outline-offset: 5px; }
.kleur--eigen .kleur-stip { background: var(--k, conic-gradient(from 210deg, #E5484D, #F5A524, #46A758, #3E63DD, #8E4EC6, #E5484D)); }
.kleur--eigen .kleur-stip .icoon { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }

.melding {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 12px;
  background: var(--info-zacht); color: var(--inkt-2);
  font-size: 13.5px; line-height: 1.45;
}
.melding > .icoon { margin-top: 1px; }
.melding-tekst { display: grid; gap: 2px; min-width: 0; }
.melding--fout { background: var(--rood-zacht); color: var(--rood-inkt); }
.melding--let-op { background: var(--amber-zacht); color: var(--amber-inkt); }
.melding--goed { background: var(--groen-zacht); color: var(--groen-inkt); }
.melding a { color: inherit; font-weight: 600; }

.chip-label {
  display: inline-block; max-width: 150px;
  height: 20px; padding: 0 7px;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 600; line-height: 20px;
  color: color-mix(in oklab, var(--k) 78%, var(--inkt));
  background: color-mix(in oklab, var(--k) 11%, var(--oppervlak));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.chip-label::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-right: 5px;
  border-radius: 2px; background: var(--k);
  vertical-align: 1px;
}
.chip-label--groot { height: 26px; line-height: 26px; padding: 0 10px; font-size: 13px; max-width: 100%; border-radius: 8px; }
@media (prefers-color-scheme: dark) {
  .chip-label { color: color-mix(in oklab, var(--k) 52%, white); background: color-mix(in oklab, var(--k) 20%, var(--oppervlak)); }
}

.avatar {
  display: inline-grid; place-items: center; flex: none;
  border-radius: 50%;
  font-weight: 650; letter-spacing: 0.01em; line-height: 1;
  user-select: none;
}
.avatar--klant { background: oklch(0.93 0.035 var(--tint)); color: oklch(0.4 0.07 var(--tint)); }
.avatar--team { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
@media (prefers-color-scheme: dark) {
  .avatar--klant { background: oklch(0.34 0.045 var(--tint)); color: oklch(0.89 0.06 var(--tint)); }
}

.stip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stip--open { background: var(--merk-tekst); box-shadow: 0 0 0 3px var(--merk-ring); }
.stip--wacht { background: var(--amber-stip); box-shadow: 0 0 0 3px var(--amber-zacht); }
.stip--afgerond { background: var(--inkt-4); }
.stip--ok { background: var(--groen); box-shadow: 0 0 0 3px var(--groen-zacht); }
.stip--uit { background: var(--inkt-4); }
.stip--bezig { background: var(--inkt-4); animation: puls 1.4s ease-in-out infinite; }

.spinner {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  opacity: 0.8;
  animation: draai 700ms linear infinite;
}
.spinner--klein { width: 14px; height: 14px; border-width: 1.75px; }

.skelet {
  display: block; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, var(--skelet) 0%, var(--skelet-licht) 50%, var(--skelet) 100%);
  background-size: 200% 100%;
  animation: glans 1.4s ease-in-out infinite;
}
.skelet--rond { width: 36px; height: 36px; border-radius: 50%; flex: none; }

/* ---------- Merk ---------- */

.merk { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.merk-naam {
  font: 700 19px/1.1 var(--font-kop); letter-spacing: -0.025em;
  color: var(--inkt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.merk--klein .merk-naam { font-size: 16px; }
.merk-logo { max-height: 30px; max-width: 170px; width: auto; object-fit: contain; }
.merkteken { flex: none; border-radius: 9px; box-shadow: 0 1px 2px rgba(15, 20, 40, 0.18), 0 4px 10px -4px color-mix(in oklab, var(--merk) 55%, transparent); }
.merkteken-vlak { fill: var(--merk); }
.merkteken-zon { fill: var(--op-merk); }
.merkteken-lijn { stroke: var(--op-merk); }

/* ---------- Inloggen en eerste keer ---------- */

.toegang {
  height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(28px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(900px 520px at 50% -12%, color-mix(in oklab, var(--merk) 9%, transparent), transparent 70%),
    var(--canvas);
}
/* In het midden als er ruimte is. Is de inhoud hoger dan het scherm, dan begint hij bovenaan en blijft alles bereikbaar
   (met justify-content: center viel de bovenkant buiten beeld, zonder dat je erheen kon scrollen). */
.toegang > :first-child { margin-top: auto; }
.toegang > :last-child { margin-bottom: auto; }
.toegang-kaart {
  width: 100%; max-width: 410px;
  padding: 32px;
  border-radius: 22px;
  background: var(--oppervlak);
  box-shadow: var(--schaduw-3);
}
.toegang-merk { margin-bottom: 30px; }
.toegang-titel { margin: 0 0 6px; font: 650 27px/1.15 var(--font-kop); letter-spacing: -0.025em; }
.toegang-intro { margin: 0 0 24px; color: var(--inkt-3); line-height: 1.5; }
.toegang-voet { margin: 18px 0 0; max-width: 360px; text-align: center; font-size: 12.5px; color: var(--inkt-3); }
.toegang .knop--eerste { min-height: 44px; margin-top: 4px; }

.opstarten { height: 100dvh; display: grid; place-items: center; }
.opstarten .merkteken { animation: puls 1.6s ease-in-out infinite; }

/* ---------- Werkplek ---------- */

.werkplek { height: 100dvh; display: grid; overflow: hidden; }
.werkplek--desktop { grid-template-columns: 252px minmax(330px, 392px) minmax(0, 1fr); }
.werkplek--desktop.werkplek--instellingen { grid-template-columns: minmax(0, 1fr); }
.werkplek--tablet { grid-template-columns: minmax(290px, 350px) minmax(0, 1fr); }
.werkplek--tablet.werkplek--instellingen,
.werkplek--telefoon { grid-template-columns: minmax(0, 1fr); }
.werkplek > * { min-height: 0; min-width: 0; }

/* ---------- Linkerkolom ---------- */

.zijbalk { display: flex; flex-direction: column; min-height: 0; padding: 14px 8px 10px 14px; }
.zijbalk-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 2px 8px 16px; }
.zijbalk-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px 8px; scrollbar-width: thin; }
.nav-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 0 10px;
  border-radius: 10px;
  color: var(--inkt-2); text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background-color var(--snel), color var(--snel), box-shadow var(--snel);
}
.nav-item:hover { background: var(--hover); color: var(--inkt); }
.nav-item > .icoon { color: var(--inkt-3); transition: color var(--snel); }
.nav-item:hover > .icoon { color: var(--inkt-2); }
.nav-item--actief, .nav-item--actief:hover { background: var(--oppervlak); color: var(--inkt); font-weight: 600; box-shadow: var(--schaduw-1), inset 0 0 0 1px var(--lijn); }
.nav-item--actief > .icoon, .nav-item--actief:hover > .icoon { color: var(--merk-tekst); }
.nav-naam { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-teller { min-width: 20px; text-align: right; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--inkt-3); }
.nav-item--actief .nav-teller { color: var(--merk-tekst); }
.nav-kop { margin: 22px 10px 6px; font: 600 12px/1 var(--font); color: var(--inkt-3); }
.nav-stip { width: 9px; height: 9px; margin: 0 4px; flex: none; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 3px color-mix(in oklab, var(--k) 16%, transparent); }
.nav-label-stip { width: 9px; height: 9px; margin: 0 4px; flex: none; border-radius: 3px; background: var(--k); }
.nav-item--fout { min-height: 48px; }
.nav-fout { display: block; font-size: 11.5px; font-weight: 500; color: var(--rood); }
.nav-status-fout { color: var(--rood); }
.nav-status { font-size: 11.5px; color: var(--inkt-3); }
.nav-bezig { width: 7px; height: 7px; border-radius: 50%; background: var(--inkt-4); animation: puls 1.4s ease-in-out infinite; }
.nav-leeg { margin: 2px 10px 6px; font-size: 12.5px; color: var(--inkt-3); line-height: 1.45; }
.nav-item--actie { color: var(--merk-tekst); font-weight: 600; }
.nav-item--actie > .icoon { color: var(--merk-tekst); }
.zijbalk-voet { display: grid; gap: 2px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.profiel { min-width: 0; }
.profiel-knop {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border: 0; border-radius: 12px;
  background: none; color: var(--inkt); text-align: left; cursor: pointer;
  transition: background-color var(--snel);
}
.profiel-knop:hover, .profiel-knop[aria-expanded="true"] { background: var(--hover); }
.profiel-knop > .icoon { color: var(--inkt-3); }
.profiel-tekst { flex: 1; min-width: 0; display: grid; }
.profiel-naam { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profiel-sub { font-size: 12px; color: var(--inkt-3); }

.lade {
  position: fixed; inset: 0 auto 0 0;
  width: min(86vw, 320px); max-width: none;
  height: 100dvh; max-height: none;
  margin: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  border: 0; border-radius: 0 20px 20px 0;
  background: var(--canvas); color: var(--inkt);
  box-shadow: var(--schaduw-3);
  overscroll-behavior: contain;
}
.lade[open] { display: flex; animation: ladeIn 240ms var(--zacht); }
.lade::backdrop { background: rgba(14, 16, 20, 0.38); overflow: hidden; overscroll-behavior: contain; animation: vervaag 200ms ease-out; }
.lade .zijbalk { flex: 1; width: 100%; padding: 12px; }
.lade:focus, .zwevend:focus, .dialoog:focus { outline: none; }
.zijbalk-sluit { margin-right: -6px; }

/* ---------- Lijst ---------- */

.lijst { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.lijst-kop { display: grid; gap: 12px; padding: 18px 14px 10px 12px; }
.lijst-titelrij { display: flex; align-items: center; gap: 8px; min-height: 36px; min-width: 0; }
.lijst-menu { margin-left: -6px; }
.lijst-titel { margin: 0; min-width: 0; font: 650 21px/1.2 var(--font-kop); letter-spacing: -0.022em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lijst-teller { padding: 4px 8px; border-radius: 999px; background: var(--oppervlak-3); color: var(--inkt-2); font: 600 12.5px/1 var(--font); font-variant-numeric: tabular-nums; }

.zoekveld { position: relative; display: flex; align-items: center; min-width: 0; }
.zoekveld > .icoon { position: absolute; left: 12px; color: var(--inkt-3); pointer-events: none; }
.zoek-invoer {
  width: 100%; height: 40px; padding: 0 40px 0 38px;
  border: 0; border-radius: 12px;
  background: var(--oppervlak);
  box-shadow: var(--schaduw-1), inset 0 0 0 1px var(--lijn);
  font-size: 14px;
  transition: box-shadow var(--snel);
}
.zoek-invoer::placeholder { color: var(--inkt-4); }
.zoek-invoer::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.zoek-invoer:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--merk-tekst), 0 0 0 4px var(--merk-ring); }
.zoek-wis {
  position: absolute; right: 4px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--inkt-3); cursor: pointer;
}
.zoek-wis:hover { background: var(--hover); color: var(--inkt); }
.zoekveld--klein { margin-bottom: 4px; }
.zoekveld--klein .zoek-invoer { height: 36px; box-shadow: inset 0 0 0 1px var(--lijn-sterk); background: var(--veld); }

.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 8px 0 8px;
  border-radius: 999px;
  background: var(--oppervlak); color: var(--inkt);
  box-shadow: var(--schaduw-1), inset 0 0 0 1px var(--lijn);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.filter-chip > .icoon { color: var(--inkt-3); }
.filter-chip:hover > .icoon { color: var(--inkt); }
.filter-chip .nav-stip, .filter-chip .nav-label-stip { margin: 0 2px; }

.lijst-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 18px; scrollbar-width: thin; overscroll-behavior: contain; }
.lijst-melding { margin: 0 4px 10px; }
/* Mailbox zonder verbinding: één rustige regel voor beheerders, geen grote rode balk. */
.lijst-storing { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; padding: 4px 4px 4px 12px; border-radius: 10px;
  background: var(--amber-zacht); color: var(--amber-inkt); font-size: 13px; line-height: 1.4; }
.lijst-storing > .icoon { flex: none; color: var(--amber); }
.lijst-storing-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lijst-storing-tekst a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.lijst-storing-sluit { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
.lijst-storing-sluit:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.lijst-storing-sluit:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (pointer: coarse) { .lijst-storing-sluit { width: 44px; height: 44px; } }
.lijst-fout { display: grid; gap: 12px; justify-items: start; padding: 12px 6px; }
.rijen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rij {
  position: relative;
  display: flex; gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: 14px;
  color: inherit; text-decoration: none;
  transition: background-color var(--snel) var(--zacht), box-shadow var(--snel) var(--zacht);
}
.rij:hover { background: var(--rij-hover); }
.rij--gekozen, .rij--gekozen:hover { background: var(--merk-zacht); box-shadow: inset 0 0 0 1px var(--merk-rand-zacht); }
.rij:focus-visible { outline-offset: -2px; }
.rij-stip {
  position: absolute; left: 5px; top: 26px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--merk-tekst);
  opacity: 0; transform: scale(0.4);
  transition: opacity var(--snel), transform var(--snel) var(--zacht);
}
.rij--ongelezen .rij-stip { opacity: 1; transform: none; }
.rij-avatar { margin-top: 1px; }
.rij-inhoud { flex: 1; min-width: 0; display: grid; gap: 2px; align-content: start; }
.rij-regel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rij-naam { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rij--ongelezen .rij-naam { font-weight: 680; }
.rij-tijd { flex: none; font-size: 12px; color: var(--inkt-3); font-variant-numeric: tabular-nums; }
.rij--ongelezen .rij-tijd { color: var(--merk-tekst); font-weight: 600; }
.rij-onderwerp { flex: 1; min-width: 0; font-size: 13.5px; color: var(--inkt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rij--ongelezen .rij-onderwerp { color: var(--inkt); font-weight: 560; }
.rij-uitsnede { display: block; font-size: 13px; color: var(--inkt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rij-uit { display: inline-block; margin-right: 5px; vertical-align: -1px; color: var(--inkt-3); }
.rij-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; }
.rij-mailbox, .rij-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--inkt-3); }
.rij-mailbox { flex: none; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rij-mailbox-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--k); }
.rij-status .stip { width: 6px; height: 6px; box-shadow: none; }
.rij-soort { height: 20px; padding: 0 7px; border-radius: 6px; background: var(--oppervlak-3); color: var(--inkt-2); font-size: 11.5px; font-weight: 500; line-height: 20px; }
.rij-notities { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--notitie-accent); }
.rij-eigenaar { box-shadow: 0 0 0 2px var(--canvas); }
.rij--gekozen .rij-eigenaar { box-shadow: 0 0 0 2px var(--merk-zacht); }
.wacht {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  height: 20px; padding: 0 6px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.wacht--amber { color: var(--amber); background: var(--amber-zacht); }
.wacht--rood { color: var(--rood); background: var(--rood-zacht); }
.rij--skelet { gap: 12px; padding: 14px 12px 14px 16px; }
.rij--skelet .rij-inhoud { gap: 9px; }
.lijst-eind { display: grid; place-items: center; min-height: 44px; color: var(--inkt-3); }
.lijst-einde { font-size: 12px; color: var(--inkt-4); }

/* ---------- Gesprek ---------- */

.gesprek {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  margin: 10px 10px 10px 0;
  border-radius: 20px;
  background: var(--oppervlak);
  box-shadow: var(--schaduw-2);
  overflow: hidden;
}
.gesprek--leeg { display: grid; place-items: center; }
.gesprek-kop { flex: none; display: grid; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--lijn); }
.gesprek-kop--kaal { border: 0; }
.gesprek-kop-rij { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.gesprek-titels { flex: 1; min-width: 0; }
.gesprek-onderwerp {
  margin: 0;
  font: 650 21px/1.25 var(--font-kop); letter-spacing: -0.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.gesprek-sub { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; min-width: 0; font-size: 13px; color: var(--inkt-3); }
.gesprek-klant { font-weight: 600; color: var(--inkt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.gesprek-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.gesprek-mailbox { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gesprek-mailbox .nav-stip { width: 8px; height: 8px; margin: 0 2px 0 0; }
.gesprek-kop-knop { margin: -4px -8px 0 0; }
.gesprek-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.gesprek-labels { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.actie { min-width: 0; }
.actie-knop {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; max-width: 100%; padding: 0 9px 0 7px;
  border: 0; border-radius: 10px;
  background: var(--oppervlak); color: var(--inkt);
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  font: 500 13.5px/1 var(--font);
  cursor: pointer;
  transition: background-color var(--snel), box-shadow var(--snel);
}
.actie-knop:hover { background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn-hover); }
.actie-knop[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--merk-tekst), 0 0 0 3px var(--merk-ring); }
.actie-knop--leeg { color: var(--inkt-2); }
.actie-knop--status { padding-left: 12px; gap: 9px; }
.actie-knop > .icoon:first-child { color: var(--inkt-3); }
.actie-tekst { min-width: 0; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actie-pijl { color: var(--inkt-3); margin-left: -1px; }
.actie-avatar-leeg {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; border: 1.5px dashed var(--inkt-4); color: var(--inkt-3);
}
.actie-avatar-leeg--groot { width: 24px; height: 24px; }

.draad { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 6px 22px 22px; scrollbar-width: thin; overscroll-behavior: contain; }
.draad-inhoud { max-width: 840px; display: grid; gap: 12px; animation: opkomen 200ms var(--zacht); }
.draad-melding { max-width: 840px; margin: 12px 0 2px; }
.dag-scheiding { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 12px; font-weight: 600; color: var(--inkt-3); }
.dag-scheiding::before, .dag-scheiding::after { content: ""; flex: 1; height: 1px; background: var(--lijn); }

.bericht { min-width: 0; padding: 16px 18px; border-radius: 16px; }
.bericht--in { background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn-sterk), var(--schaduw-1); }
.bericht--uit { background: var(--uit-vlak); box-shadow: inset 0 0 0 1px var(--uit-rand); }
.bericht-kop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bericht-wie { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.bericht-naam { max-width: 100%; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bericht-adres { max-width: 100%; font-size: 12.5px; color: var(--inkt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bericht-tijd { flex: none; align-self: flex-start; margin-top: 2px; font-size: 12px; color: var(--inkt-3); font-variant-numeric: tabular-nums; }
.bericht-ontvangers { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 8px 0 0 42px; font-size: 12.5px; color: var(--inkt-3); overflow-wrap: anywhere; }
.bericht-inhoud { margin: 10px 0 0 42px; min-width: 0; }
.bericht--dicht {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  border: 0; text-align: left; cursor: pointer; color: inherit;
  transition: background-color var(--snel);
}
.bericht--dicht.bericht--in:hover { background: var(--oppervlak-2); }
.bericht--dicht.bericht--uit:hover { background: color-mix(in oklab, var(--merk) 8%, var(--oppervlak)); }
.bericht--dicht .bericht-naam { flex: none; max-width: 34%; font-size: 13.5px; }
.bericht--dicht .bericht-tijd { align-self: center; margin: 0; }
.bericht-kort { flex: 1; min-width: 0; font-size: 13px; color: var(--inkt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bericht--skelet { display: grid; gap: 10px; padding: 18px; box-shadow: inset 0 0 0 1px var(--lijn); }

.tekst { font-size: 14.5px; line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--inkt); }
.tekst--leeg { margin: 0; color: var(--inkt-3); font-style: italic; }
.tekst a, .notitie-tekst a { color: var(--merk-tekst); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.citaat-blok { margin-top: 6px; white-space: normal; }
.citaat-knop {
  position: relative;
  display: inline-grid; place-items: center;
  height: 20px; padding: 0 9px;
  border: 0; border-radius: 999px;
  background: var(--oppervlak-3); color: var(--inkt-2);
  cursor: pointer;
}
.citaat-knop::after { content: ""; position: absolute; inset: -12px -6px; }
.citaat-knop:hover { background: var(--lijn-sterk); color: var(--inkt); }
.citaat { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--lijn-sterk); color: var(--inkt-3); white-space: pre-wrap; }

.mailpapier { border-radius: 12px; overflow: hidden; background: #FFFFFF; color-scheme: light; }
.mailframe { display: block; width: 100%; height: 120px; border: 0; background: #FFFFFF; }
.mailpapier-laden { height: 120px; display: grid; place-items: center; color: #9A9EA5; }
.mailpapier-fout { margin: 0; padding: 12px; color: #93281F; font-size: 13px; }
.afbeeldingen-balk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 9px 12px; margin-bottom: 8px;
  border-radius: 10px;
  background: #F4F3EF; color: #555B63;
  font-size: 12.5px; line-height: 1.4;
}
.afbeeldingen-balk span { flex: 1 1 220px; }
.afbeeldingen-balk .link-knop { color: #2E4A9E; margin: 0; }
@media (prefers-color-scheme: dark) {
  .mailpapier { padding: 14px 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
}

.bijlagen { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 42px; padding: 0; }
.bijlagen li { min-width: 0; max-width: 100%; }
.bijlage {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 300px; min-width: 0; height: 36px; padding: 0 10px;
  border-radius: 10px;
  background: var(--oppervlak); color: var(--inkt);
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  font-size: 13px; text-decoration: none;
  transition: background-color var(--snel), box-shadow var(--snel);
}
a.bijlage:hover { background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn-hover); }
.bijlage > .icoon:first-child { color: var(--inkt-3); }
.bijlage-naam { min-width: 0; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bijlage-grootte { flex: none; font-size: 12px; color: var(--inkt-3); font-variant-numeric: tabular-nums; }
.bijlage-actie { color: var(--inkt-4); }
.bijlage--weg { opacity: 0.7; }

.verzend { display: flex; align-items: center; gap: 6px; margin: 12px 0 0 42px; font-size: 12.5px; color: var(--inkt-3); }
.verzend--ok { color: var(--groen-tekst); font-weight: 500; }
.verzend--fout { flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--rood-zacht); color: var(--rood-inkt); font-size: 13px; }
.verzend-tekst { flex: 1 1 200px; min-width: 0; }

.notitie { min-width: 0; padding: 14px 18px 16px; border-radius: 16px; background: var(--notitie); box-shadow: inset 0 0 0 1px var(--notitie-rand); color: var(--notitie-inkt); }
.notitie-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.notitie-naam { font-size: 14px; font-weight: 650; }
.notitie-uitleg { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--notitie-inkt-2); }
.notitie .bericht-tijd { color: var(--notitie-inkt-2); }
.notitie-tekst { margin: 8px 0 0 36px; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

.gebeurtenis { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 2px 16px; font-size: 12.5px; color: var(--inkt-3); }
.gebeurtenis-tekst { min-width: 0; overflow-wrap: anywhere; }
.gebeurtenis-tekst strong { font-weight: 600; color: var(--inkt-2); }
.gebeurtenis-wie { color: var(--inkt-3); }
.gebeurtenis-tijd { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.gebeurtenis--fout { color: var(--rood); }

.nieuw-onder {
  position: sticky; bottom: 8px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  width: max-content; margin: 12px auto 0; height: 34px; padding: 0 14px;
  border: 0; border-radius: 999px;
  background: var(--inkt); color: var(--oppervlak);
  box-shadow: var(--schaduw-3);
  font: 600 13px/1 var(--font); cursor: pointer;
  animation: opkomen 200ms var(--zacht);
}

/* ---------- Opsteller ---------- */

.opsteller {
  position: relative; flex: none;
  margin: 0 14px 14px; padding: 10px 12px;
  border-radius: 16px;
  background: var(--oppervlak);
  box-shadow: 0 0 0 1px var(--lijn-sterk), 0 12px 30px -14px rgba(22, 24, 29, 0.2);
  transition: background-color 180ms var(--zacht), box-shadow 180ms var(--zacht);
}
.opsteller:focus-within { box-shadow: 0 0 0 1.5px var(--merk-tekst), 0 0 0 5px var(--merk-ring), 0 12px 30px -14px rgba(22, 24, 29, 0.2); }
.opsteller--notitie { background: var(--notitie); box-shadow: 0 0 0 1px var(--notitie-rand), 0 12px 30px -14px rgba(22, 24, 29, 0.16); }
.opsteller--notitie:focus-within { box-shadow: 0 0 0 1.5px var(--notitie-accent), 0 0 0 5px var(--notitie-ring), 0 12px 30px -14px rgba(22, 24, 29, 0.16); }
.opsteller--slepen, .opsteller--slepen:focus-within { box-shadow: 0 0 0 2px var(--merk-tekst), 0 0 0 6px var(--merk-ring); }
.opsteller-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.tabs { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--tabs-vlak); }
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--inkt-3);
  font: 600 13px/1 var(--font);
  cursor: pointer;
  transition: background-color var(--snel), color var(--snel), box-shadow var(--snel);
}
.tab:hover { color: var(--inkt); }
.tab[aria-selected="true"] { background: var(--oppervlak); color: var(--inkt); box-shadow: 0 1px 2px rgba(22, 24, 29, 0.08), 0 0 0 1px var(--lijn); }
.opsteller--notitie .tabs { background: var(--notitie-tabs); }
.opsteller--notitie .tab[aria-selected="true"] { color: var(--notitie-inkt); background: var(--notitie); }
.opsteller-aan { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--inkt-3); }
.opsteller-aan-tekst { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opsteller-aan strong { font-weight: 600; color: var(--inkt-2); }
.opsteller-aan--notitie { color: var(--notitie-inkt-2); gap: 5px; }
.opsteller-cc { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 4px 0 10px; border-radius: 10px; background: var(--veld); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.opsteller-cc label { font-size: 12.5px; font-weight: 600; color: var(--inkt-3); }
.opsteller-cc input { flex: 1; min-width: 0; height: 34px; border: 0; background: none; font-size: 13.5px; outline: none; }
.opsteller-cc-weg { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--inkt-3); cursor: pointer; }
.opsteller-cc-weg:hover { background: var(--hover); color: var(--inkt); }
.opsteller-tekst {
  display: block; width: 100%;
  margin-top: 6px; padding: 6px 4px;
  border: 0; background: transparent;
  font: 400 14.5px/1.6 var(--font);
  resize: none; outline: none;
  field-sizing: content;
  min-height: calc(3lh + 12px);
  max-height: 40vh;
  overflow-y: auto;
}
.opsteller-tekst::placeholder { color: var(--inkt-4); }
.opsteller--notitie .opsteller-tekst { color: var(--notitie-inkt); }
.opsteller--notitie .opsteller-tekst::placeholder { color: color-mix(in oklab, var(--notitie-inkt-2) 70%, transparent); }
.opsteller-bijlagen { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; }
.bijlage--opsteller { height: 34px; padding: 0 3px 0 10px; }
.bijlage--fout { color: var(--rood); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rood) 45%, transparent); background: var(--rood-zacht); }
.bijlage--fout .bijlage-grootte { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.bijlage--bezig .bijlage-grootte { color: var(--inkt-3); }
.bijlage-weg { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--inkt-3); cursor: pointer; }
.bijlage-weg:hover { background: var(--hover); color: var(--inkt); }
.opsteller-fout { display: flex; align-items: center; gap: 6px; margin: 6px 4px 0; font-size: 13px; font-weight: 500; color: var(--rood); }
.opsteller-info { margin: 6px 4px 0; font-size: 12.5px; color: var(--inkt-3); }
.opsteller-balk { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; }
.opsteller-tools { display: flex; align-items: center; gap: 2px; margin-left: -4px; }
.opsteller-hint { margin-left: auto; font-size: 12px; color: var(--inkt-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.opsteller-verstuur { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.opsteller-hint + .opsteller-verstuur { margin-left: 12px; }
.opsteller-voet { margin: 6px 4px 0; font-size: 11.5px; color: var(--inkt-4); }
.opsteller--notitie .opsteller-voet, .opsteller--notitie .opsteller-hint { color: var(--notitie-inkt-2); }
.ai-knop--uit { opacity: 0.5; }
.ai-knop:not(.ai-knop--uit) { color: var(--merk-tekst); }
.opsteller-sleep {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 8px;
  border-radius: inherit;
  background: color-mix(in oklab, var(--oppervlak) 90%, transparent);
  color: var(--merk-tekst); font-weight: 600;
  pointer-events: none;
}
.opsteller--compact { display: flex; align-items: center; gap: 6px; padding: 6px; }
.opsteller-start {
  flex: 1; min-width: 0; height: 44px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  border: 0; border-radius: 12px;
  background: var(--veld); color: var(--inkt-3);
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  font: 500 15px/1 var(--font); text-align: left; cursor: text;
}
.opsteller-start span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opsteller-start .icoon { color: var(--merk-tekst); }
.opsteller-compact-notitie { color: var(--notitie-accent); }

.snippets { display: grid; gap: 4px; }
.snippet {
  display: grid; gap: 2px;
  width: 100%; padding: 9px 10px;
  border: 0; border-radius: 10px;
  background: none; color: var(--inkt); text-align: left; cursor: pointer;
}
.snippet:hover, .snippet:focus-visible { background: var(--hover); outline: none; }
.snippet:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.snippet-titel { font-size: 13.5px; font-weight: 600; }
.snippet-tekst { font-size: 12.5px; color: var(--inkt-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.ai-paneel { display: grid; gap: 12px; padding: 8px; }
.ai-titel { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 650; }
.ai-titel .icoon { color: var(--merk-tekst); }
.ai-tekst { margin: 0; font-size: 13px; line-height: 1.5; color: var(--inkt-3); }

/* ---------- Zwevend: menu's, bladen, dialogen ---------- */

.zwevend { margin: 0; padding: 6px; border: 0; background: var(--oppervlak); color: var(--inkt); overflow: auto; overscroll-behavior: contain; }
.zwevend:modal { overscroll-behavior: contain; }
.zwevend::backdrop { overflow: hidden; overscroll-behavior: contain; }
.zwevend--menu { position: fixed; inset: auto; max-width: calc(100vw - 16px); border-radius: 14px; box-shadow: var(--schaduw-3); }
.zwevend--menu::backdrop { background: transparent; }
.zwevend--menu[open] { animation: menuIn 150ms var(--zacht); transform-origin: top center; }
.zwevend--menu[data-kant="boven"][open] { animation-name: menuInBoven; transform-origin: bottom center; }
.zwevend--blad {
  position: fixed; inset: auto 0 0 0;
  width: 100%; max-width: none; max-height: 86dvh;
  padding: 6px 10px calc(14px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
}
.zwevend--blad[open] { animation: bladIn 260ms var(--zacht); }
.zwevend--blad::backdrop { background: rgba(14, 16, 20, 0.38); animation: vervaag 200ms ease-out; }
.zwevend--blad:focus { outline: none; }
.blad-greep { width: 38px; height: 5px; margin: 4px auto 10px; border-radius: 3px; background: var(--lijn-sterk); }
.blad-titel { margin: 0 10px 8px; font: 650 17px/1.3 var(--font-kop); letter-spacing: -0.01em; }

.menu { display: grid; gap: 1px; }
.menu-titel { margin: 4px 10px 6px; font-size: 12px; font-weight: 600; color: var(--inkt-3); }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 38px; padding: 6px 10px;
  border: 0; border-radius: 9px;
  background: none; color: var(--inkt);
  font: 500 14px/1.3 var(--font); text-align: left;
  cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); outline: none; }
.menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.menu-item > .icoon { color: var(--inkt-3); }
.menu-item--gevaar, .menu-item--gevaar > .icoon { color: var(--rood); }
.menu-item-tekst { flex: 1; min-width: 0; display: grid; }
.menu-item-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item-uitleg { font-size: 12px; font-weight: 400; color: var(--inkt-3); }
.menu-item > .menu-item-vink { color: var(--merk-tekst); }
.menu-scheiding { height: 1px; margin: 4px 6px; background: var(--lijn); }
.menu-leeg { margin: 8px 10px; font-size: 13px; color: var(--inkt-3); line-height: 1.45; }
.menu-voet {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 38px; margin-top: 4px; padding: 6px 10px;
  border: 0; border-top: 1px solid var(--lijn); border-radius: 0 0 9px 9px;
  background: none; color: var(--inkt-2);
  font: 500 13px/1 var(--font); cursor: pointer;
}
.menu-voet:hover, .menu-voet:focus-visible { background: var(--hover); color: var(--inkt); outline: none; }
.menu-kop { display: grid; gap: 1px; margin-bottom: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--lijn); }
.menu-kop-naam { font-weight: 650; }
.menu-kop-sub { font-size: 12.5px; color: var(--inkt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-vinkvak { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--lijn-hover); color: var(--op-merk); }
.menu-item--gekozen .menu-vinkvak { background: var(--merk); box-shadow: none; }
.menu-stip { width: 24px; display: grid; place-items: center; flex: none; }

.dialoog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: 20px;
  background: var(--oppervlak); color: var(--inkt);
  box-shadow: var(--schaduw-3);
  overscroll-behavior: contain;
}
.dialoog[open] { display: flex; flex-direction: column; animation: dialoogIn 200ms var(--zacht); }
.dialoog::backdrop { background: rgba(14, 16, 20, 0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); overflow: hidden; overscroll-behavior: contain; animation: vervaag 200ms ease-out; }
.dialoog--klein { width: min(420px, calc(100vw - 32px)); }
.dialoog-kop { display: flex; align-items: flex-start; gap: 12px; padding: 22px 22px 0; }
.dialoog-titel { flex: 1; margin: 0; font: 650 19px/1.3 var(--font-kop); letter-spacing: -0.015em; }
.dialoog-sluit { margin: -6px -10px 0 0; }
.dialoog-inhoud { padding: 12px 22px 6px; overflow-y: auto; }
.dialoog-tekst { margin: 0 0 12px; line-height: 1.55; color: var(--inkt-2); }
.dialoog-tekst--klein { font-size: 13px; color: var(--inkt-3); }
.dialoog-voet { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 22px 20px; }

.toasts {
  position: fixed; z-index: 50; left: 50%; top: calc(14px + env(safe-area-inset-top));
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  max-width: 100%; padding: 10px 16px 10px 12px;
  border-radius: 12px;
  background: var(--toast); color: var(--toast-inkt);
  box-shadow: var(--schaduw-3);
  font-size: 13.5px; font-weight: 500; line-height: 1.4;
  animation: toastIn 220ms var(--zacht);
}
.toast .icoon { color: #8FD9B6; }
.toast--fout .icoon { color: #FF9C8F; }

/* ---------- Instellingen ---------- */

.instellingen { display: flex; min-height: 0; min-width: 0; }
.instellingen-nav { flex: none; width: 252px; display: flex; flex-direction: column; gap: 2px; padding: 16px 10px 16px 14px; overflow-y: auto; }
.instellingen-titel { margin: 18px 10px 12px; font: 650 21px/1.2 var(--font-kop); letter-spacing: -0.022em; }
.nav-item--terug { color: var(--inkt-3); }
.instellingen-scroll { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.instellingen-inhoud { max-width: 800px; margin: 0 auto; padding: 26px 28px 56px; }
.instellingen-inhoud:has(> .pagina--breed) { max-width: 1080px; }
.werkplek--desktop .instellingen-scroll, .werkplek--tablet .instellingen-scroll { margin: 10px 10px 10px 0; border-radius: 20px; background: var(--oppervlak-2); box-shadow: var(--schaduw-2); }
.pagina { display: grid; gap: 16px; min-width: 0; }
.pagina-kop { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; min-width: 0; }
.pagina-titels { flex: 1; min-width: 0; }
.pagina-titel { margin: 0; font: 650 26px/1.2 var(--font-kop); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.pagina-uitleg { margin: 6px 0 0; max-width: 62ch; color: var(--inkt-3); line-height: 1.5; overflow-wrap: anywhere; }
.pagina-actie { flex: none; }
.pagina-actie--onder { display: grid; }
.pagina-terug { margin: -2px 0 0 -8px; }
.pagina-voet { position: sticky; bottom: 0; z-index: 1; display: grid; gap: 10px; padding: 14px 0 6px; background: linear-gradient(to top, var(--oppervlak-2) 72%, transparent); }
.kaart { display: grid; gap: 16px; min-width: 0; padding: 20px; border-radius: 16px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn), var(--schaduw-1); }
.kaart-kop { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.kaart-icoon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--merk-zacht); color: var(--merk-tekst); }
.kaart-titel { margin: 0; font: 650 16px/1.3 var(--font-kop); letter-spacing: -0.01em; }
.kaart-uitleg { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--inkt-3); }
.kaart--gevaar .kaart-icoon { background: var(--rood-zacht); color: var(--rood); }
.formulier--pagina { gap: 16px; }

.beheer-lijst { list-style: none; display: grid; margin: -6px 0; padding: 0; }
.beheer-lijst > li + li { border-top: 1px solid var(--lijn); }
.beheer-rij { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 2px; }
.beheer-rij--link { margin: 0 -8px; padding: 12px 10px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color var(--snel); }
.beheer-rij--link:hover { background: var(--oppervlak-2); }
.beheer-rij--blok { align-items: flex-start; }
.beheer-rij--bewerk { display: block; padding: 14px 0; }
.beheer-rij-tekst { flex: 1; min-width: 0; display: grid; gap: 1px; }
.beheer-rij-tekst strong { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beheer-rij-knoppen { display: flex; gap: 2px; flex: none; }
.beheer-rij-ruimte { flex: 1; }
.beheer-sub { font-size: 13px; color: var(--inkt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beheer-fout { font-size: 12.5px; color: var(--rood); }
.beheer-pijl { flex: none; color: var(--inkt-4); }
.beheer-voorbeeld { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--inkt-3); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.beheer-jij { margin-left: 4px; padding: 2px 6px; border-radius: 6px; background: var(--merk-zacht); color: var(--merk-tekst); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.team-plek { width: 36px; flex: none; }
.mailbox-blok { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: color-mix(in oklab, var(--k) 13%, var(--oppervlak)); color: color-mix(in oklab, var(--k) 82%, var(--inkt)); }
.mb-status { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--inkt-2); white-space: nowrap; }
.mb-status--ok { color: var(--groen-tekst); }
.mb-status--fout { color: var(--rood); }
.mb-status--uit, .mb-status--bezig { color: var(--inkt-3); }
.mb-status-sub { font-weight: 500; color: var(--inkt-3); }
.status-blok { display: grid; gap: 10px; }
.status-melding { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--rood-zacht); color: var(--rood-inkt); font-size: 13px; }

.vast-veld { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 10px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn); font-weight: 600; }
.vast-veld > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.uitklap { border-radius: 12px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn); }
.uitklap-kop { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; list-style: none; cursor: pointer; }
.uitklap-kop::-webkit-details-marker { display: none; }
.uitklap-kop > .icoon:first-child { color: var(--inkt-3); }
.uitklap-titel { flex: none; font-weight: 650; }
.uitklap-samenvatting { flex: 1; min-width: 0; font-size: 13px; color: var(--inkt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uitklap-pijl { color: var(--inkt-3); transition: transform 180ms var(--zacht); }
.uitklap[open] .uitklap-pijl { transform: rotate(180deg); }
.uitklap-inhoud { display: grid; gap: 14px; padding: 4px 14px 16px; }
.serverblok { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 14px; border: 0; border-radius: 12px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn); }
.serverblok legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-size: 13.5px; font-weight: 650; }
.serverblok legend + * { clear: both; }

.test-blok { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.test-hint { font-size: 12.5px; color: var(--inkt-3); }
.test-uitslag { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.test-regel { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px; }
.test-regel--ok { background: var(--groen-zacht); color: var(--groen-inkt); }
.test-regel--fout { background: var(--rood-zacht); color: var(--rood-inkt); }
.test-icoon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; }
.test-regel--ok .test-icoon { background: var(--groen); }
.test-regel--fout .test-icoon { background: var(--rood); }
.test-tekst { display: grid; gap: 2px; min-width: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }

.keuzes { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.keuzes legend { padding: 0; margin-bottom: 8px; }
.keuze { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--lijn-sterk); cursor: pointer; transition: box-shadow var(--snel), background-color var(--snel); }
.keuze--gekozen { background: var(--merk-zachter); box-shadow: inset 0 0 0 1.5px var(--merk-tekst); }
.keuze input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--merk); }
.keuze-tekst { display: grid; gap: 2px; font-size: 13px; color: var(--inkt-3); }
.keuze-tekst strong { font-size: 14px; color: var(--inkt); }

.wachtwoord-vak { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.wachtwoord-code { flex: 1; min-width: 0; font: 600 18px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; }

.profiel-overzicht { display: flex; align-items: center; gap: 14px; min-width: 0; }
.profiel-overzicht-tekst { display: grid; gap: 1px; min-width: 0; }
.profiel-overzicht-tekst strong { font: 650 17px/1.3 var(--font-kop); }
.profiel-overzicht-tekst span { font-size: 13px; color: var(--inkt-3); overflow-wrap: anywhere; }

.merk-raster { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.merk-velden { display: grid; gap: 16px; min-width: 0; }
.merk-zij { position: sticky; top: 8px; display: grid; gap: 10px; min-width: 0; }
.merk-zij-titel { margin: 0; font-size: 13px; font-weight: 650; color: var(--inkt-3); }
.merk-voorbeeld {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  min-height: 210px; border-radius: 16px; overflow: hidden;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--lijn), var(--schaduw-2);
  font-size: 11px; pointer-events: none; user-select: none;
}
.mv-zijbalk { display: grid; align-content: start; gap: 3px; padding: 12px 6px 12px 8px; }
.mv-zijbalk .merk { margin: 2px 4px 12px; gap: 7px; }
.mv-zijbalk .merk-naam { font-size: 12.5px; }
.mv-zijbalk .merk-logo { max-height: 20px; max-width: 96px; }
.mv-zijbalk .merkteken { width: 20px; height: 20px; border-radius: 6px; }
.mv-nav { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 7px; color: var(--inkt-2); font-weight: 500; white-space: nowrap; overflow: hidden; }
.mv-nav .icoon { color: var(--inkt-3); }
.mv-nav--actief { background: var(--oppervlak); color: var(--inkt); box-shadow: var(--schaduw-1); }
.mv-nav--actief .icoon { color: var(--merk-tekst); }
.mv-teller { margin-left: auto; color: var(--merk-tekst); font-weight: 650; }
.mv-inhoud { display: grid; align-content: start; gap: 6px; margin: 8px 8px 8px 0; padding: 10px; border-radius: 12px; background: var(--oppervlak); box-shadow: var(--schaduw-1); }
.mv-rij { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 9px; }
.mv-rij--gekozen { background: var(--merk-zacht); }
.mv-stip { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--merk-tekst); }
.mv-stip--uit { background: transparent; }
.mv-lijnen { flex: 1; display: grid; gap: 5px; }
.mv-lijn { width: 82%; height: 5px; border-radius: 3px; background: var(--oppervlak-3); }
.mv-lijn--sterk { width: 52%; background: var(--lijn-hover); }
.mv-knoppen { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.mv-knop { display: inline-flex; align-items: center; gap: 4px; height: 25px; padding: 0 9px; border-radius: 7px; background: var(--merk); color: var(--op-merk); font-weight: 600; }
.mv-knop--tweede { background: var(--oppervlak); color: var(--inkt); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.logo-vak { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.logo-voorbeeld { width: 120px; height: 72px; flex: none; display: grid; place-items: center; padding: 10px; border-radius: 12px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--lijn); }
.logo-voorbeeld img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-tekst { flex: 1; min-width: 200px; display: grid; gap: 10px; }

.instellingen--overzicht { flex-direction: column; }
.instellingen-index { list-style: none; display: grid; gap: 8px; margin: 0; padding: 4px 12px calc(24px + env(safe-area-inset-bottom)); }
.index-rij { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 14px; border-radius: 16px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn), var(--schaduw-1); color: inherit; text-decoration: none; }
.index-icoon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--merk-zacht); color: var(--merk-tekst); }
.index-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.index-tekst strong { font-size: 15px; font-weight: 650; }
.index-tekst span { font-size: 13px; color: var(--inkt-3); }

/* ---------- Lege schermen ---------- */

.leeg { display: grid; justify-items: center; gap: 6px; max-width: 360px; margin: auto; padding: 48px 24px; text-align: center; }
.leeg--klein { padding: 18px 12px; }
.leeg .illustratie { width: 160px; height: 120px; margin-bottom: 10px; }
.leeg-titel { margin: 0; font: 650 17px/1.3 var(--font-kop); letter-spacing: -0.01em; color: var(--inkt); }
.leeg-tekst { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--inkt-3); }
.illu-lijn { stroke: var(--illu-lijn); }
.illu-papier { fill: var(--oppervlak); stroke: var(--illu-lijn); }
.illu-accent { stroke: var(--merk-tekst); }
.illu-vlak { fill: var(--merk-zacht); }
.illu-schaduw { fill: var(--illu-schaduw); stroke: none; }
.illu-stippel { stroke-dasharray: 3 6; }
.lijst .leeg .illu-papier { fill: var(--canvas); }

/* ---------- Tablet ---------- */

@media (max-width: 1179px) {
  .lijst-kop { padding-top: 14px; }
}

/* ---------- Telefoon ---------- */

@media (max-width: 760px) {
  body { font-size: 15px; }
  input, select, textarea, .invoer, .zoek-invoer, .keuzelijst, .opsteller-tekst, .opsteller-cc input { font-size: 16px; }
  .knop, .knop--klein { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .icoonknop { width: 44px; height: 44px; }
  .invoer { min-height: 44px; }
  .keuzelijst { height: 44px; }
  .nav-item { min-height: 44px; font-size: 15px; }
  .link-knop { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; margin: -10px -8px; font-size: 13.5px; }
  .invoer-knop { width: 44px; height: 44px; right: 0; }
  .zoekveld--tabel .zoek-invoer { height: 44px; }
  .zoekveld--tabel { width: 100%; }

  .lijst-kop { padding: calc(8px + env(safe-area-inset-top)) 12px 8px 10px; gap: 10px; }
  .lijst-titelrij { min-height: 44px; }
  .lijst-titel { font-size: 22px; }
  .zoek-invoer { height: 44px; }
  .zoek-wis { width: 40px; height: 40px; }
  .filter-chip { height: 36px; padding: 0 12px; }
  .lijst-scroll { padding: 2px 6px calc(20px + env(safe-area-inset-bottom)); }
  .rij { padding: 12px 10px 12px 16px; }
  .rij-tijd { font-size: 12.5px; }

  .gesprek { margin: 0; border-radius: 0; box-shadow: none; height: 100dvh; }
  .werkplek--gesprek .gesprek { animation: inschuiven 240ms var(--zacht); }
  .gesprek-kop { gap: 8px; padding: calc(4px + env(safe-area-inset-top)) 8px 10px 4px; }
  .gesprek-kop-rij { align-items: center; gap: 2px; }
  .gesprek-terug { flex: none; }
  .gesprek-onderwerp { font-size: 17px; -webkit-line-clamp: 1; }
  .gesprek-sub { margin-top: 1px; font-size: 12.5px; flex-wrap: nowrap; gap: 10px; }
  .gesprek-sub > * { flex: 0 1 auto; min-width: 0; }
  .gesprek-kop-knop { margin: 0; }
  .gesprek-acties { flex-wrap: nowrap; gap: 6px; padding: 0 4px 0 8px; }
  .gesprek-acties .actie { flex: 1 1 auto; }
  .actie-knop { width: 100%; height: 44px; justify-content: center; padding: 0 8px; font-size: 14px; }
  .actie-tekst { max-width: none; flex: 0 1 auto; }
  .draad { padding: 4px 10px 16px; }
  .draad-inhoud { gap: 10px; }
  .bericht { padding: 14px; border-radius: 14px; }
  .bericht-inhoud, .bericht-ontvangers, .bijlagen, .verzend { margin-left: 0; }
  .bericht--dicht { min-height: 52px; }
  .notitie { padding: 14px; }
  .notitie-tekst { margin-left: 0; }
  .tekst, .notitie-tekst { font-size: 15.5px; }
  .citaat-knop { height: 24px; padding: 0 12px; }
  .bijlage { height: 44px; max-width: 100%; }
  .bijlage-weg { width: 40px; height: 40px; }
  .bericht--in { box-shadow: inset 0 0 0 1px var(--lijn-sterk); }

  .opsteller { margin: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: 0 -1px 0 var(--lijn), 0 -10px 30px -16px rgba(22, 24, 29, 0.2); }
  .opsteller:focus-within { box-shadow: 0 -1px 0 var(--lijn), 0 -10px 30px -16px rgba(22, 24, 29, 0.2); }
  .opsteller--notitie, .opsteller--notitie:focus-within { box-shadow: 0 -1px 0 var(--notitie-rand), 0 -10px 30px -16px rgba(22, 24, 29, 0.18); }
  .opsteller--compact { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .tabs { padding: 2px; }
  .tab { height: 44px; padding: 0 14px; font-size: 14.5px; }
  .opsteller-aan { font-size: 13px; }
  .opsteller-tekst { min-height: calc(2lh + 12px); max-height: 32vh; font-size: 16px; line-height: 1.5; }
  .opsteller-hint, .opsteller-voet { display: none; }
  .opsteller-tools { margin-left: -6px; gap: 0; }
  .opsteller-verstuur { gap: 6px; }
  .opsteller-verstuur .knop { padding: 0 14px; }
  .opsteller-cc input { height: 44px; }
  .opsteller-cc-weg { width: 44px; height: 44px; }

  .zwevend--blad .menu-item, .zwevend--blad .menu-voet { min-height: 50px; font-size: 16px; }
  .zwevend--blad .snippet { padding: 12px; }
  .zwevend--blad .snippet-titel { font-size: 15px; }
  .zwevend--blad .menu-vinkvak { width: 22px; height: 22px; }

  .dialoog-kop { padding: 20px 18px 0; }
  .dialoog-inhoud { padding: 12px 18px 6px; }
  .dialoog-voet { padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); }
  .dialoog-voet .knop { flex: 1 1 auto; }


  .instellingen { flex-direction: column; }
  .instellingen-scroll { padding: 0; }
  .instellingen-inhoud { padding: 0 12px calc(28px + env(safe-area-inset-bottom)); }
  .pagina-kop { position: sticky; top: 0; z-index: 2; margin: 0 -12px 2px; padding: calc(6px + env(safe-area-inset-top)) 12px 10px 8px; background: var(--canvas); }
  .pagina-terug { margin: 0; }
  .pagina-titel { font-size: 21px; line-height: 26px; padding-block: 9px; } /* één regel: 44 px hoog, gelijk aan de terugknop */
  .pagina-titels .pagina-uitleg { margin-top: 0; font-size: 13.5px; }
  .pagina-voet { background: linear-gradient(to top, var(--canvas) 72%, transparent); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .pagina-voet .formulier-knoppen .knop { flex: 1 1 auto; }
  .kaart { padding: 16px; }
  .formrij--server { grid-template-columns: minmax(0, 1fr) 88px; }
  .formulier--rij { grid-template-columns: minmax(0, 1fr); }
  .merk-raster { grid-template-columns: minmax(0, 1fr); }
  .merk-zij { position: static; }
  .kleur { width: 44px; height: 44px; }
  .kleur-stip { inset: 6px; }
  .schakelaar { width: 48px; height: 28px; }
  .schakelaar::before { width: 22px; height: 22px; }
  .schakelaar:checked::before { transform: translateX(20px); }
  .team-rij { flex-wrap: wrap; row-gap: 8px; }
  .team-rij .beheer-rij-tekst { flex: 1 1 calc(100% - 110px); }
  .team-rij .keuzelijst { flex: 1; margin-left: 50px; }
  .beheer-rij--link { flex-wrap: wrap; }
  .beheer-rij--link .mb-status { order: 3; margin-left: 50px; }
  .beheer-rij--link .beheer-pijl { order: 2; }
  .uitklap-kop { min-height: 52px; }
  .vast-veld { min-height: 44px; }
}

@media (max-width: 360px) {
  .lijst-titel { font-size: 20px; }
  .actie-knop { gap: 5px; padding: 0 6px; font-size: 13.5px; }
  .actie-pijl { display: none; }
  .tab { padding: 0 11px; }
  .opsteller-verstuur .knop { padding: 0 12px; }
  .toegang-kaart { padding: 24px 20px; }
}

/* ---------- Beweging ---------- */

@keyframes draai { to { transform: rotate(360deg); } }
@keyframes puls { 50% { opacity: 0.35; } }
@keyframes glans { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes vervaag { from { opacity: 0; } }
@keyframes opkomen { from { opacity: 0; transform: translateY(4px); } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes menuInBoven { from { opacity: 0; transform: translateY(4px) scale(0.98); } }
@keyframes bladIn { from { transform: translateY(100%); } }
@keyframes ladeIn { from { transform: translateX(-100%); } }
@keyframes dialoogIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes inschuiven { from { opacity: 0.4; transform: translateX(28px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Aanmelden ---------- */

.toegang-wissel { margin: 20px 0 0; text-align: center; font-size: 13.5px; color: var(--inkt-3); }
.toegang-wissel a, .toegang-voet a { color: var(--merk-tekst); font-weight: 600; text-decoration: none; }
.toegang-wissel a:hover, .toegang-voet a:hover { text-decoration: underline; }
.toegang-voet p { margin: 0; }
.toegang-icoon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 16px; background: var(--merk-zacht); color: var(--merk-tekst); }
.toegang-noot { margin: -10px 0 20px; font-size: 13px; color: var(--inkt-3); }
.toegang-bezig { display: flex; align-items: center; gap: 12px; padding: 12px 0 4px; color: var(--inkt-2); }
.toegang-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.akkoord { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--inkt-2); cursor: pointer; }
.akkoord input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--merk); }
.akkoord a { color: var(--merk-tekst); font-weight: 600; }

/* ---------- Abonnement ---------- */

.proef-kaart {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; padding: 10px 12px 14px;
  border-radius: 12px;
  background: var(--merk-zachter);
  box-shadow: inset 0 0 0 1px var(--merk-rand-zacht);
  color: var(--inkt); text-decoration: none;
  overflow: hidden;
  transition: background-color var(--snel);
}
a.proef-kaart:hover { background: var(--merk-zacht); }
.proef-kaart > .icoon { color: var(--merk-tekst); }
.proef-tekst { flex: 1; min-width: 0; display: grid; gap: 1px; }
.proef-tekst strong { font-size: 13px; font-weight: 650; }
.proef-tekst span { font-size: 12px; color: var(--merk-tekst); font-weight: 500; }
div.proef-kaart .proef-tekst span { color: var(--inkt-3); }
.proef-balk { position: absolute; left: 12px; right: 12px; bottom: 7px; height: 3px; border-radius: 2px; background: var(--merk-ring); overflow: hidden; }
.proef-balk span { display: block; height: 100%; border-radius: 2px; background: var(--merk-tekst); }
.proef-kaart--bijna { background: var(--amber-zacht); box-shadow: none; }
.proef-kaart--bijna .proef-tekst span, .proef-kaart--bijna > .icoon { color: var(--amber); }
.proef-kaart--bijna .proef-balk { background: color-mix(in oklab, var(--amber) 22%, transparent); }
.proef-kaart--bijna .proef-balk span { background: var(--amber); }

.abonnement-balk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 12px 12px 0; padding: 12px 14px;
  border-radius: 14px;
  background: var(--rood-zacht); color: var(--rood-inkt);
}
.abonnement-balk > .icoon { flex: none; }
.abonnement-balk-tekst { flex: 1 1 200px; display: grid; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.4; }
.abonnement-balk-tekst strong { font-size: 13.5px; }
.abonnement-link { color: var(--merk-tekst); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.melding .abonnement-link, .opsteller-fout .abonnement-link, .veld-fout .abonnement-link { color: inherit; }
.abonnement-hint { color: var(--inkt-3); font-weight: 500; }
.opsteller-uit { display: flex; align-items: flex-start; gap: 8px; margin: 8px 4px 0; padding: 9px 11px; border-radius: 10px; background: var(--info-zacht); color: var(--inkt-2); font-size: 13px; line-height: 1.45; }
.opsteller-uit > .icoon { margin-top: 1px; color: var(--inkt-3); }

.slot-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: 16px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn), var(--schaduw-1); }
.slot-icoon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--merk-zacht); color: var(--merk-tekst); }
.slot-tekst { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.slot-tekst strong { font: 650 15px/1.3 var(--font-kop); }
.slot-tekst span { font-size: 13px; color: var(--inkt-3); line-height: 1.45; }
.kaal-veldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.formulier--slot .merk-raster { opacity: 0.55; filter: saturate(0.6); pointer-events: none; user-select: none; }

.kaart--abonnement { gap: 18px; }
.abonnement-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.abonnement-kop-tekst { display: grid; gap: 2px; min-width: 0; }
.abonnement-label { font-size: 12.5px; font-weight: 600; color: var(--inkt-3); }
.abonnement-naam { margin: 0; font: 650 26px/1.15 var(--font-kop); letter-spacing: -0.025em; }
.abonnement-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--inkt-3); }
.abonnement-prijs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.abonnement-prijs > div { display: grid; gap: 2px; padding: 14px; border-radius: 12px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn); }
.abonnement-getal { font: 650 22px/1.2 var(--font-kop); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.abonnement-eenheid { font-size: 12.5px; color: var(--inkt-3); }

.gebruik-lijst { display: grid; gap: 16px; }
.gebruik { display: grid; gap: 7px; }
.gebruik-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gebruik-label { font-size: 13.5px; font-weight: 600; }
.gebruik-getal { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gebruik-getal span { font-weight: 500; color: var(--inkt-3); }
.gebruik-balk { height: 8px; border-radius: 999px; background: var(--oppervlak-3); overflow: hidden; }
.gebruik-balk span { display: block; height: 100%; border-radius: 999px; background: var(--merk-tekst); transition: width 400ms var(--zacht); }
.gebruik--bijna .gebruik-balk span { background: var(--amber-stip); }
.gebruik--vol .gebruik-balk span { background: var(--rood); }
.gebruik--vol .gebruik-getal { color: var(--rood); }

.plannen-blok { display: grid; gap: 12px; margin-top: 6px; }
.blok-titel { margin: 0; font: 650 18px/1.3 var(--font-kop); letter-spacing: -0.015em; }
.plannen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 16px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn), var(--schaduw-1); }
.plan--huidig { box-shadow: inset 0 0 0 1.5px var(--merk-tekst), 0 0 0 4px var(--merk-ring); }
.plan-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-naam { margin: 0; font: 650 17px/1.3 var(--font-kop); }
.plan-label { padding: 3px 8px; border-radius: 999px; background: var(--merk-zacht); color: var(--merk-tekst); font-size: 11.5px; font-weight: 650; }
.plan-prijs { margin: 0; display: grid; gap: 2px; }
.plan-prijs strong { font: 650 28px/1.1 var(--font-kop); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan-prijs span { font-size: 12.5px; color: var(--inkt-3); }
.plan-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; align-content: start; }
.plan-lijst li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--inkt-2); }
.plan-lijst li .icoon { margin-top: 2px; color: var(--merk-tekst); }
.plan-lijst li.plan-niet { color: var(--inkt-3); }
.plan-lijst li.plan-niet .icoon { color: var(--inkt-4); }

/* ---------- Organisatie ---------- */

.bevestig-naam { font-weight: 700; color: var(--inkt); user-select: all; }
.dialoog--gevaar .dialoog-titel { color: var(--rood); }
.kaart a.knop { text-decoration: none; }

/* ---------- Platformbeheer ---------- */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 16px; border-radius: 16px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn), var(--schaduw-1); }
.kpi-label { font-size: 12.5px; font-weight: 600; color: var(--inkt-3); }
.kpi-waarde { font: 650 28px/1.1 var(--font-kop); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-sub { font-size: 12px; color: var(--inkt-3); }
.kaart--tabel { padding: 16px 0 6px; gap: 10px; }
.tabel-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; }
.zoekveld--tabel { width: min(260px, 100%); margin: 0; }
.tabel-schuif { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th { padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 600; color: var(--inkt-3); border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.tabel td { padding: 11px 10px; border-bottom: 1px solid var(--lijn); vertical-align: middle; white-space: nowrap; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel th:first-child, .tabel td:first-child { padding-left: 16px; }
.tabel th:last-child, .tabel td:last-child { padding-right: 16px; }
.tabel tbody tr { transition: background-color var(--snel); }
.tabel tbody tr:hover { background: var(--oppervlak-2); }
.tabel .getal { text-align: right; font-variant-numeric: tabular-nums; }
.tabel-naam { display: block; font-weight: 650; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.tabel-sub { display: block; font-size: 12px; color: var(--inkt-3); }
.tabel-sub-inline { color: var(--inkt-3); }
.tabel-actie { text-align: right; }
.klant-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.klant-status-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--inkt-4); }
.klant-status--ok { color: var(--groen-tekst); }
.klant-status--ok .klant-status-stip { background: var(--groen); }
.klant-status--proef { color: var(--merk-tekst); }
.klant-status--proef .klant-status-stip { background: var(--merk-tekst); }
.klant-status--fout { color: var(--rood); }
.klant-status--fout .klant-status-stip { background: var(--rood); }
.klant-status--uit { color: var(--inkt-3); }
.org-kaarten { list-style: none; margin: 0; padding: 0 10px 6px; display: grid; gap: 8px; }
.org-kaart { width: 100%; display: grid; gap: 4px; padding: 14px; border: 0; border-radius: 14px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn); text-align: left; cursor: pointer; color: inherit; }
.org-kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.org-kaart-kop strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.org-kaart-sub { font-size: 13px; color: var(--inkt-3); }
.dialoog--breed { width: min(600px, calc(100vw - 32px)); }
.klant-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.klant-feiten > div { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn); min-width: 0; }
.klant-feiten span { font-size: 12px; color: var(--inkt-3); }
.klant-feiten strong { font-size: 14px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beheer-blok { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--lijn); }
.beheer-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.beheer-waarde { flex: 1 1 200px; font-size: 13.5px; color: var(--inkt-2); }
.keuzelijst--breed { flex: 1 1 220px; min-width: 0; height: 38px; }
.invoer--datum { flex: 1 1 180px; width: auto; min-width: 0; }

@media (max-width: 1179px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .abonnement-balk { margin: calc(8px + env(safe-area-inset-top)) 10px 0; }
  .abonnement-balk .knop { width: 100%; }
  .proef-kaart { padding: 12px 12px 16px; }
  .kpis { gap: 8px; }
  .kpi { padding: 14px; }
  .kpi-waarde { font-size: 24px; }
  .plannen { grid-template-columns: minmax(0, 1fr); }
  .akkoord { font-size: 14.5px; }
  .akkoord input { width: 22px; height: 22px; }
  .keuzelijst--breed { height: 44px; }
  .beheer-regel .knop { flex: 1 1 auto; }
  .slot-balk .knop { width: 100%; }
}

/* ---------- Gesprek met klantpaneel ---------- */

.gesprek--werk { flex-direction: row; container-type: inline-size; container-name: gesprek; }
.gesprek-hoofd { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; container-name: hoofd; }
@container hoofd (max-width: 660px) {
  .opsteller-hint { display: none; }
  .opsteller-hint + .opsteller-verstuur { margin-left: auto; }
}
@container hoofd (max-width: 520px) {
  .opsteller-aan-tekst { display: none; }
}
.gesprek-kop-knoppen { display: flex; align-items: center; gap: 2px; flex: none; margin: -4px -8px 0 0; }
.gesprek-kop-knoppen .gesprek-kop-knop { margin: 0; }
.icoonknop.is-aan { color: var(--merk-tekst); background: var(--merk-zacht); }
.werkplek--desktop.werkplek--paneel { grid-template-columns: 252px minmax(300px, 344px) minmax(0, 1fr); }

.klantpaneel {
  flex: none; width: 300px;
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--lijn);
  background: var(--oppervlak-2);
  animation: paneelIn 200ms var(--zacht);
}
.klantpaneel-kop { display: flex; align-items: center; gap: 2px; min-height: 58px; padding: 14px 10px 6px 18px; }
.klantpaneel-titel { flex: 1; margin: 0; font: 650 16px/1.3 var(--font-kop); letter-spacing: -0.01em; }
.klantpaneel-vernieuw.is-bezig .icoon { animation: draai 900ms linear infinite; }
.klantpaneel-scroll { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 20px; padding: 4px 14px 22px; scrollbar-width: thin; overscroll-behavior: contain; }
.klant-kaart { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn); }
.klant-kaart-tekst { display: grid; gap: 1px; min-width: 0; }
.klant-kaart-tekst strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klant-email { font-size: 12.5px; color: var(--inkt-3); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klant-email:hover { color: var(--merk-tekst); text-decoration: underline; }
.klant-sectie { display: grid; gap: 8px; min-width: 0; }
.klant-sectie-titel { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 650; color: var(--inkt-3); }
.klant-teller { padding: 1px 7px; border-radius: 999px; background: var(--oppervlak-3); color: var(--inkt-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.klant-bron { display: grid; gap: 8px; min-width: 0; }
.klant-bron-naam { margin: 6px 0 0; font-size: 12px; font-weight: 500; color: var(--inkt-3); }
.klant-bronfout { font-size: 12.5px; }

.bestelling { display: grid; gap: 9px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn), var(--schaduw-1); }
.bestelling-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.bestelling-nummer { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bestelling-nummer .icoon { color: var(--inkt-3); }
.bestelling-datum { flex: none; font-size: 12px; color: var(--inkt-3); white-space: nowrap; }
.bestel-status { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 22px; max-width: 100%; padding: 0 9px; border-radius: 999px; background: var(--oppervlak-3); color: var(--inkt-2); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bestel-status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bestel-status--klaar { background: var(--groen-zacht); color: var(--groen-tekst); }
.bestel-status--bezig { background: var(--amber-zacht); color: var(--amber); }
.bestel-status--uit { color: var(--inkt-3); }
.bestelling-artikelen { list-style: none; display: grid; gap: 3px; margin: 0; padding: 0; font-size: 13px; color: var(--inkt-2); }
.bestelling-artikelen li { display: flex; gap: 6px; min-width: 0; }
.artikel-aantal { flex: none; min-width: 22px; color: var(--inkt-3); font-variant-numeric: tabular-nums; }
.artikel-naam { min-width: 0; overflow-wrap: anywhere; }
.bestelling-totaal { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--lijn-sterk); font-size: 13px; color: var(--inkt-3); }
.bestelling-totaal strong { font-size: 14px; color: var(--inkt); font-variant-numeric: tabular-nums; }
.bestelling-zending { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.bestelling-zending li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.bestelling-zending .icoon { color: var(--inkt-3); }
.bestelling-zending a { color: var(--merk-tekst); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.bestelling-zending a:hover { text-decoration: underline; }
.bestelling-link { justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--inkt-2); text-decoration: none; }
.bestelling-link:hover { color: var(--merk-tekst); }
.bestelling--ander { gap: 7px; padding: 10px 12px; background: transparent; box-shadow: none; border: 1px dashed var(--lijn-hover); }
.bestelling--ander .bestelling-nummer { font-weight: 600; color: var(--inkt-2); }
.bestelling-let-op { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--amber-inkt); }
.bestelling-let-op .icoon { margin-top: 1px; color: var(--amber); }
.bestelling-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--inkt-3); }
.bestelling-regel .bestelling-link { margin-left: auto; }
.bestelling-bedrag { font-variant-numeric: tabular-nums; }
.bestelling--skelet { gap: 10px; }
.klant-leeg { display: grid; justify-items: start; gap: 8px; padding: 14px; border-radius: 14px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn); font-size: 13px; color: var(--inkt-2); }
.klant-leeg p { margin: 0; line-height: 1.45; }
.klant-leeg-icoon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--merk-zacht); color: var(--merk-tekst); }
.klant-niets { margin: 0; font-size: 13px; color: var(--inkt-3); }
.eerder-lijst { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.eerder-rij { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 -8px; padding: 6px 8px; border-radius: 9px; color: var(--inkt); font-size: 13px; text-decoration: none; }
.eerder-rij:hover { background: var(--hover); }
.eerder-rij .stip { width: 7px; height: 7px; box-shadow: none; }
.eerder-onderwerp { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eerder-tijd { flex: none; font-size: 12px; color: var(--inkt-3); font-variant-numeric: tabular-nums; }

/* Smal gesprek (tablet, kleine desktop): het paneel schuift over het verloop. */
@container gesprek (max-width: 820px) {
  .klantpaneel:not(.klantpaneel--blad) { position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; border-left: 0; box-shadow: var(--schaduw-3); }
}

/* Telefoon: het paneel staat in een blad. */
.zwevend--klant { background: var(--oppervlak-2); }
.klantpaneel--blad { width: auto; border: 0; background: transparent; animation: none; }
.klantpaneel--blad .klantpaneel-kop { position: absolute; top: 8px; right: 10px; min-height: 0; padding: 0; }
.klantpaneel--blad .klantpaneel-scroll { overflow: visible; padding: 0 4px 4px; }

@keyframes paneelIn { from { opacity: 0; transform: translateX(12px); } }

/* ---------- Koppelingen ---------- */

.monogram { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: oklch(0.93 0.035 var(--tint)); color: oklch(0.4 0.07 var(--tint)); font: 700 16px/1 var(--font-kop); }
@media (prefers-color-scheme: dark) {
  .monogram { background: oklch(0.34 0.045 var(--tint)); color: oklch(0.89 0.06 var(--tint)); }
}
.koppeling-rij { flex-wrap: wrap; }
.koppeling-status { font-size: 12.5px; color: var(--groen-tekst); }
.koppeling-status--fout { color: var(--rood); }
.koppel-blok { display: grid; gap: 12px; margin-top: 4px; }
.koppel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.koppel-raster--klein { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.koppel-tegel { display: grid; align-content: start; gap: 10px; padding: 16px; border-radius: 16px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn), var(--schaduw-1); }
.koppel-tegel p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--inkt-3); }
.koppel-tegel .knop { justify-self: start; }
.koppel-tegel-kop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.koppel-tegel-kop strong { font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.koppel-tegel--binnenkort { gap: 8px; padding: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--lijn); }
.koppel-tegel--binnenkort .monogram { width: 30px; height: 30px; font-size: 14px; opacity: 0.75; filter: saturate(0.5); }
.koppel-tegel--binnenkort strong { font-size: 13.5px; color: var(--inkt-2); }
.koppel-binnenkort { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--oppervlak-3); color: var(--inkt-3); font-size: 11.5px; font-weight: 600; }

@media (max-width: 760px) {
  .gesprek-kop-knoppen { margin: 0; }
  .koppeling-rij .beheer-rij-knoppen { width: 100%; justify-content: flex-end; }
  .koppel-raster { grid-template-columns: minmax(0, 1fr); }
  .koppel-raster--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bestelling-zending li, .eerder-rij { min-height: 44px; }
}

/* ---------- Tweestapsverificatie ---------- */

/* Eén groot veld voor de code; de cijfers op afstand, de tekst blijft gecentreerd (text-indent vangt de letterafstand op). */
.veld--code .invoer {
  min-height: 56px; padding: 8px 12px;
  text-align: center; text-indent: 0.3em;
  font: 600 26px/1.2 var(--font); letter-spacing: 0.3em; font-variant-numeric: tabular-nums;
}
.veld--herstel .invoer { text-indent: 0; font: 600 19px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; }
.veld--herstel .invoer::placeholder { font-weight: 500; color: var(--inkt-4); }
.akkoord-uitleg { display: block; margin-top: 1px; font-size: 12.5px; color: var(--inkt-3); }
.tweestaps-intro { text-wrap: pretty; }
.toegang-icoon--goed { background: var(--groen-zacht); color: var(--groen-tekst); }
.toegang-wissel .link-knop, .toegang-voet .link-knop { font-size: 13.5px; }
.toegang-voet p + p { margin-top: 8px; }

.tweestaps-blok { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tweestaps-blok--krap { gap: 6px; }
.tweestaps-blok .dialoog-tekst { margin: 0; }
.tweestaps-wissel { margin: 0; }
.tweestaps-laden { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--inkt-2); }
.tweestaps-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tweestaps-sinds { font-size: 13px; color: var(--inkt-3); }

.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.stap { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
.stap-nummer { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--merk-zacht); color: var(--merk-tekst); font: 650 13px/1 var(--font); }
.stap-inhoud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
.stap-titel { margin: 3px 0 0; font: 650 15px/1.35 var(--font); letter-spacing: -0.005em; }
.stap-tekst { margin: 0; font-size: 13px; line-height: 1.5; color: var(--inkt-3); text-wrap: pretty; }
.stap-inhoud a.knop { text-decoration: none; }
/* QR-code altijd donker op wit (ook in donkere modus), anders scannen niet alle apps hem. */
.qr-vak { justify-self: start; padding: 10px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.qr-vak img { width: 168px; height: 168px; }
.sleutel-vak { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.sleutel-code { flex: 1 1 150px; min-width: 0; font: 600 14px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; word-spacing: 0.15em; user-select: all; }

.herstelcodes { list-style: none; margin: 0; padding: 12px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; border-radius: 12px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.herstelcodes code { font: 600 15px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; white-space: nowrap; user-select: all; }

.tweestaps-lid { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--inkt-3); }
.tweestaps-lid--aan { color: var(--groen-tekst); }
.tweestaps-lid--nodig { color: var(--amber); }

@media (max-width: 360px) {
  .herstelcodes { padding: 10px 12px; gap: 6px 10px; }
  .herstelcodes code { font-size: 14px; letter-spacing: 0.02em; }
}


/* ---------- Samenwerken: meekijken, concepten, sluimeren, gepland en samenvoegen ---------- */

.meekijkers { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--groen-tekst); font-weight: 600; white-space: nowrap; }
.meekijkers-avatars { display: inline-flex; align-items: center; }
.meekijker { box-shadow: 0 0 0 2px var(--oppervlak), 0 0 0 3.5px color-mix(in oklab, var(--groen) 55%, transparent); }
.meekijker + .meekijker { margin-left: -5px; }
.meekijkers-tekst { overflow: hidden; text-overflow: ellipsis; }
.meekijkers--compact { flex: none; }

.samen-regel {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 0 18px 8px; min-width: 0;
  font-size: 12.5px; color: var(--inkt-2);
  animation: opkomen 160ms var(--zacht);
}
.samen-typt { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 600; color: var(--groen-tekst); }
.samen-typt--notitie { color: var(--notitie-accent); }
.typ-stippen { display: inline-flex; gap: 3px; flex: none; }
.typ-stippen i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: typen 1.2s ease-in-out infinite; }
.typ-stippen i:nth-child(2) { animation-delay: 0.15s; }
.typ-stippen i:nth-child(3) { animation-delay: 0.3s; }
.samen-concept {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; max-width: 100%; padding: 0 9px 0 4px;
  border: 0; border-radius: 999px;
  background: var(--oppervlak-3); color: var(--inkt-2);
  font: 600 12px/1 var(--font); cursor: pointer;
  transition: background-color var(--snel), color var(--snel);
}
.samen-concept:hover { background: var(--lijn-sterk); color: var(--inkt); }
.samen-concept span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.concept-lezen { display: grid; gap: 10px; padding: 8px; }
.concept-lezen-kop { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--inkt-3); }
.concept-lezen-tekst { max-height: 46vh; overflow-y: auto; padding: 12px 14px; border-radius: 12px; background: var(--oppervlak-2); box-shadow: inset 0 0 0 1px var(--lijn); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.concept-lezen-laden { display: grid; place-items: center; min-height: 64px; color: var(--inkt-3); }
.concept-lezen-uitleg { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--inkt-3); }

.sluimer-balk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  max-width: 840px; margin: 12px 0 2px; padding: 10px 12px;
  border-radius: 12px;
  background: var(--merk-zachter); color: var(--inkt-2);
  box-shadow: inset 0 0 0 1px var(--merk-rand-zacht);
  font-size: 13.5px; line-height: 1.45;
}
.sluimer-balk > .icoon { color: var(--merk-tekst); }
.sluimer-balk-tekst { flex: 1 1 220px; min-width: 0; }
.sluimer-balk strong { color: var(--inkt); font-weight: 650; }

.gepland-lijst { max-width: 840px; display: grid; gap: 12px; margin-top: 12px; }
.gepland {
  display: grid; gap: 10px; min-width: 0;
  padding: 14px 18px 16px; border-radius: 16px;
  background: var(--uit-vlak);
  box-shadow: inset 0 0 0 1.5px var(--uit-rand);
  outline: 1.5px dashed color-mix(in oklab, var(--merk-tekst) 38%, transparent); outline-offset: -1.5px;
}
.gepland--mislukt { background: var(--rood-zacht); outline-color: color-mix(in oklab, var(--rood) 45%, transparent); box-shadow: none; }
.gepland-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.gepland-label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; font-weight: 650; color: var(--merk-tekst); }
.gepland--mislukt .gepland-label { color: var(--rood); }
.gepland-wie { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--inkt-3); }
.gepland-fout { margin: 0; font-size: 13px; line-height: 1.45; color: var(--rood-inkt); }
.gepland-tekst { font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--inkt); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.gepland-bijlagen { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.gepland-bijlage { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 9px; border-radius: 8px; background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn-sterk); font-size: 12.5px; font-weight: 550; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gepland-bijlage span { font-weight: 400; color: var(--inkt-3); }
.gepland-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }

.kies-kop { margin: 14px 2px 6px; font-size: 12.5px; font-weight: 600; color: var(--inkt-3); }
.kies-lijst { list-style: none; display: grid; gap: 4px; margin: 10px 0 4px; padding: 0; max-height: min(46vh, 360px); overflow-y: auto; }
.kies-kop + .kies-lijst { margin-top: 0; }
.kies-rij {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 0; border-radius: 12px;
  background: none; color: var(--inkt); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--lijn);
  transition: background-color var(--snel), box-shadow var(--snel);
}
.kies-rij:hover { background: var(--oppervlak-2); }
.kies-rij--gekozen, .kies-rij--gekozen:hover { background: var(--merk-zachter); box-shadow: inset 0 0 0 1.5px var(--merk-tekst); }
.kies-vink { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--lijn-hover); color: var(--op-merk); }
.kies-rij--gekozen .kies-vink { background: var(--merk); box-shadow: none; }
.kies-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kies-onderwerp { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kies-sub { font-size: 12.5px; color: var(--inkt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kies-meta { flex: none; display: grid; justify-items: end; gap: 3px; font-size: 12px; color: var(--inkt-3); font-variant-numeric: tabular-nums; }
.kies-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: var(--inkt-2); }
.kies-status .stip { width: 6px; height: 6px; box-shadow: none; }
.kies-leeg { margin: 14px 2px 6px; font-size: 13px; line-height: 1.5; color: var(--inkt-3); }
.kies-laden { display: grid; place-items: center; min-height: 96px; color: var(--inkt-3); }
.kies-fout { margin-top: 10px; }

.rij-aanwezig { flex: none; display: inline-flex; align-items: center; gap: 3px; max-width: 92px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--groen-zacht); color: var(--groen-tekst); font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.rij-aanwezig > span { overflow: hidden; text-overflow: ellipsis; }
.rij-aanwezig--typt .icoon { animation: puls 1.4s ease-in-out infinite; }
.rij-sluimer { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--merk-zacht); color: var(--merk-tekst); font-size: 11.5px; font-weight: 600; white-space: nowrap; }

.toast--actie { position: relative; overflow: hidden; pointer-events: auto; padding-right: 8px; }
.toast-knop {
  flex: none; height: 30px; margin-left: 6px; padding: 0 11px;
  border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, 0.14); color: #FFFFFF;
  font: 650 13px/1 var(--font); cursor: pointer;
  transition: background-color var(--snel);
}
.toast-knop:hover { background: rgba(255, 255, 255, 0.24); }
.toast-knop:focus-visible { outline-color: #FFFFFF; }
.toast-balk { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.55); transform-origin: left center; animation: aftellen var(--duur, 10s) linear forwards; }

.link-knop--later { display: inline-flex; align-items: center; gap: 4px; }
.link-knop--later.is-aan { background: var(--merk-zacht); }
.opsteller-later { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 4px 0 10px; border-radius: 10px; background: var(--merk-zachter); box-shadow: inset 0 0 0 1px var(--merk-rand-zacht); color: var(--merk-tekst); }
.opsteller-later-tekst { flex: 1; min-width: 0; padding: 7px 0; font-size: 13px; color: var(--inkt-2); }
.opsteller-later-tekst strong { font-weight: 650; color: var(--inkt); }

.formrij--moment { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.veld--smal { max-width: 320px; }

.variabelen { display: grid; gap: 8px; margin-top: -6px; }
.variabelen-titel { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--inkt-3); }
.variabelen-lijst { display: flex; flex-wrap: wrap; gap: 6px; }
.variabele {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px 0 8px;
  border: 0; border-radius: 8px;
  background: var(--oppervlak-2); color: var(--inkt-2);
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  font: 600 12.5px/1 var(--font); cursor: pointer;
  transition: background-color var(--snel), box-shadow var(--snel), color var(--snel);
}
.variabele:hover { background: var(--merk-zachter); box-shadow: inset 0 0 0 1px var(--merk-rand-zacht); color: var(--merk-tekst); }
.variabele-haak { font: 700 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--merk-tekst); letter-spacing: -0.05em; }

@keyframes typen { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes aftellen { to { transform: scaleX(0); } }

@media (max-width: 760px) {
  .samen-regel { margin: 0 12px 6px; font-size: 13px; }
  .samen-concept { height: 32px; }
  .gepland { padding: 14px; }
  .gepland-knoppen .knop { flex: 1 1 auto; }
  .toast-knop { height: 36px; }
  .link-knop--later { margin-right: -4px; }
  .link-knop--later .link-knop-tekst { display: none; }
  .kies-rij { min-height: 56px; }
  .kies-meta { display: none; }
  .variabele { height: 36px; }
  .formrij--moment { grid-template-columns: minmax(0, 1fr); }
  .veld--smal { max-width: none; }
}

/* ---------- Rasters mogen smaller worden dan hun inhoud (lange woorden en nowrap-tekst) ---------- */

.kaart, .formulier:not(.formulier--rij), .pagina, .draad-inhoud, .klantpaneel-scroll, .uitklap-inhoud, .serverblok, .veld, .menu, .snippets, .gebruik-lijst, .plannen-blok, .koppel-blok { grid-template-columns: minmax(0, 1fr); }
.uitklap, .uitklap-kop { min-width: 0; }

/* Op aanraakschermen blijft hover anders hangen na een tik. */
@media (hover: none) {
  .icoonknop:hover:not(:disabled):not([aria-expanded="true"]):not(.is-aan) { background: transparent; color: var(--inkt-2); }
  .knop--tweede:hover:not(:disabled) { background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn-sterk), 0 1px 2px rgba(22, 24, 29, 0.04); }
  .rij:hover:not(.rij--gekozen) { background: transparent; }
  .nav-item:hover:not(.nav-item--actief) { background: transparent; color: var(--inkt-2); }
  .actie-knop:hover { background: var(--oppervlak); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
}

/* ---------- Taal (kern): de taalkiezer onder de schermen voor inloggen en aanmelden ---------- */

.taalkiezer {
  display: inline-flex; gap: 2px; padding: 3px; margin-top: 16px;
  border-radius: 999px; background: color-mix(in oklab, var(--inkt) 5%, transparent);
}
.taalkiezer-optie {
  min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
  background: none; color: var(--inkt-3); font: 600 12.5px/1 var(--font); cursor: pointer;
  transition: background var(--snel), color var(--snel);
}
.taalkiezer-optie:hover { color: var(--inkt); }
.taalkiezer-optie[aria-pressed="true"] { background: var(--oppervlak); color: var(--inkt); box-shadow: 0 1px 2px rgba(22, 24, 29, 0.08), 0 0 0 1px var(--lijn); cursor: default; }
.taalkiezer-optie:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (pointer: coarse) { .taalkiezer-optie { min-height: 40px; padding: 0 16px; font-size: 13.5px; } }

/* ---------- Ruimte per gebied voor de vertaling (docs/talen.md) ----------
   Moet een tekst in het Engels anders passen? Zet de regel dan in het blok van je eigen gebied, niet elders in dit bestand.
   Zo werken de gebieden elk in hun eigen stuk en botsen hun wijzigingen niet. */

/* gebied inbox: begin */
/* Engelse titel en intro op de schermen voor inloggen en aanmelden: geen los woord op de laatste regel ("Try Inboxvana free for 14 / days").
   De titel krijgt pretty en de intro balance: balance zet een titel soms af na "two-" in "two-step", pretty een intro na "6-" in "6-digit". */
html[lang="en-GB"] .toegang-titel { text-wrap: pretty; }
html[lang="en-GB"] .toegang-intro { text-wrap: balance; }
/* Het zoekveld in de lijst: "Search by name, subject or text" past op 320 px net niet ("... or tex"), dus iets kleiner op het smalste scherm. */
@media (max-width: 340px) { html[lang="en-GB"] #zoekveld::placeholder { font-size: 15px; } }
/* gebied inbox: einde */

/* gebied gesprek: begin */
/* gebied gesprek: einde */

/* gebied instellingen: begin */
/* gebied instellingen: einde */

/* gebied automatisering: begin */
/* gebied automatisering: einde */

/* gebied inzichten: begin */
/* AI-geheugen, "Leer van eerdere gesprekken": "All mailboxes and channels" is langer dan het Nederlands; de mailboxkeuze krijgt iets meer
   ruimte (boven de telefoonbreedte van geheugen.css, daaronder staan de velden onder elkaar). */
@media (min-width: 761px) {
  html[lang="en-GB"] .gh-ronde .gh-keuze-veld:nth-child(2) { flex-basis: 232px; }
}
/* gebied inzichten: einde */

/* gebied klant: begin */
/* gebied klant: einde */