/* Beheer Het Studentje — rustige admin-stijl op de tokens van het design system. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body.admin {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-paper);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; letter-spacing: var(--tracking-heading); line-height: 1.2; margin: 0 0 var(--space-16); }
h1 { font-size: 2rem; }
h2 { font-size: 1.375rem; }
a { color: var(--color-green); }
a:hover { color: var(--color-green-dark); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; }
.muted { color: var(--color-ink-soft); font-weight: 400; }
.hint { margin: var(--space-4) 0 0; font-size: var(--text-small); color: var(--color-ink-soft); }
.hint--over { color: var(--color-error); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--color-green); outline-offset: 2px; }

/* Zijbalk */
.sidebar {
  background: var(--color-green-dark);
  color: var(--color-mint);
  padding: var(--space-24) var(--space-16);
  display: flex; flex-direction: column; gap: var(--space-24);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar__brand { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--color-white); text-decoration: none; padding: 0 var(--space-8); }
.sidebar__brand span { display: block; font-family: var(--font-body); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-mint-strong); font-weight: 600; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar a, .sidebar button {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--space-8); border-radius: var(--radius-field);
  color: var(--color-mint); text-decoration: none; font: inherit; font-weight: 500;
  background: none; border: 0; width: 100%; cursor: pointer; text-align: left;
}
.sidebar a:hover, .sidebar button:hover { background: rgba(255, 255, 255, .08); color: var(--color-white); }
.sidebar a[aria-current="page"] { background: var(--color-green); color: var(--color-white); }
.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: var(--space-16); }
.sidebar form { margin: 0; }
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

.main { padding: var(--space-40); max-width: 1100px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-24); }
.page-head h1 { margin: 0; }
.section-title { margin-top: var(--space-40); }

/* Kaarten */
.card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: var(--space-24); margin-bottom: var(--space-24); box-shadow: var(--shadow-card); }
.card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-8); }
.subcard { border: 1px solid var(--color-line); border-radius: var(--radius-field); padding: var(--space-16); margin: 0 0 var(--space-16); background: var(--color-paper); min-width: 0; }
.subcard legend { font-weight: 600; padding: 0 var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); align-items: start; }
.columns-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-16); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.row input { flex: 1; min-width: 0; }
.stat { display: flex; flex-direction: column; text-decoration: none; color: var(--color-ink); }
.stat:hover { border-color: var(--color-green); }
.stat__n { font-family: var(--font-heading); font-size: 3rem; font-weight: 600; color: var(--color-green); line-height: 1; }
.quick { display: flex; flex-direction: column; gap: var(--space-4); }
.quick h2 { font-size: 1.125rem; margin-bottom: var(--space-8); }

/* Formulieren: label altijd boven het veld */
.field { margin-bottom: var(--space-16); min-width: 0; }
.field > label, .field > legend, .field-label, .add-block > label { display: block; font-weight: 600; margin-bottom: 6px; padding: 0; }
.field label > input, .field label > select, .field label > textarea { margin-top: 6px; font-weight: 400; }
fieldset.field { border: 0; padding: 0; margin-inline: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
  display: block; width: 100%;
  font: inherit; color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-field);
  padding: 10px 12px; min-height: 44px;
}
input[type="file"] { padding: 8px; }
input[readonly] { background: var(--color-paper); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--color-green); outline: 2px solid var(--color-mint-strong); }
.field--check label { display: flex; gap: var(--space-8); align-items: center; font-weight: 500; cursor: pointer; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-green); margin: 0; }
.field--error input, .field--error textarea { border-color: var(--color-error); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-8); }
.checks label { display: flex; gap: var(--space-8); align-items: center; }

/* Knoppen: één primary (groen) per scherm */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  min-height: 44px; padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-green); background: var(--color-white); color: var(--color-green);
}
.btn:hover { background: var(--color-mint); color: var(--color-green-dark); }
.btn--primary { background: var(--color-green); color: var(--color-white); }
.btn--primary:hover { background: var(--color-green-dark); color: var(--color-white); }
.btn--danger { border-color: var(--color-error); color: var(--color-error); }
.btn--danger:hover { background: var(--color-error); color: var(--color-white); }
.btn--small { min-height: 36px; padding: 6px 14px; font-size: var(--text-small); }
.btn--block { width: 100%; justify-content: center; }
.btn-icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-field);
  background: var(--color-white); color: var(--color-ink); font: inherit; cursor: pointer;
}
.btn-icon:hover:not(:disabled) { border-color: var(--color-green); color: var(--color-green); }
.btn-icon:disabled { opacity: .35; cursor: default; }
.btn-icon--danger:hover:not(:disabled) { border-color: var(--color-error); color: var(--color-error); }
.savebar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: var(--space-16); align-items: center;
  padding: var(--space-16) var(--space-24); margin: 0 0 var(--space-24);
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}

/* Meldingen */
.flash { display: flex; gap: var(--space-8); align-items: center; background: var(--color-mint); border: 1px solid var(--color-mint-strong); color: var(--color-green-dark); border-radius: var(--radius-field); padding: 12px var(--space-16); margin: 0 0 var(--space-24); font-weight: 600; }
.alert { background: color-mix(in srgb, var(--color-error) 12%, white); border: 1px solid var(--color-error); color: var(--color-error); border-radius: var(--radius-field); padding: 12px var(--space-16); margin: 0 0 var(--space-16); }
ul.alert { padding-left: var(--space-40); }
.alert ul { margin: var(--space-8) 0 0; }

/* Tabellen en lijsten */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px var(--space-8); border-bottom: 1px solid var(--color-line); vertical-align: top; }
.table th { font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-soft); }
.card:has(> .table) { overflow-x: auto; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: var(--space-8); border-bottom: 1px solid var(--color-line); padding: var(--space-8) 0; }
.rows li:last-child { border-bottom: 0; }
.rows li.is-hidden .rows__main { opacity: .6; }
.rows__main { flex: 1; display: flex; flex-wrap: wrap; gap: 4px var(--space-16); align-items: baseline; text-decoration: none; color: var(--color-ink); padding: var(--space-4) 0; min-width: 0; }
.rows__main:hover .rows__title { color: var(--color-green); text-decoration: underline; }
.rows__title { font-weight: 600; }
.rows__tools { display: flex; gap: var(--space-4); }
.rows__tools form { margin: 0; }
.dl { display: grid; grid-template-columns: minmax(120px, 35%) 1fr; gap: var(--space-8) var(--space-16); margin: 0 0 var(--space-24); }
.dl dt { font-weight: 600; color: var(--color-ink-soft); }
.dl dd { margin: 0; overflow-wrap: anywhere; }

/* Status-badges en filterpillen */
.badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-label); font-weight: 600; white-space: nowrap; }
.badge--nieuw { background: var(--color-yellow); color: var(--color-ink); }
.badge--gecontacteerd { background: var(--color-mint-strong); color: var(--color-green-dark); }
.badge--gepland { background: var(--color-green); color: var(--color-white); }
.badge--afgesloten { background: var(--color-line); color: var(--color-ink-soft); }
.badge--klant { background: var(--color-green-dark); color: var(--color-white); }
.badge--afgehaakt { background: var(--color-line); color: var(--color-ink-soft); }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-24); }
.pills a { padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); background: var(--color-white); text-decoration: none; color: var(--color-ink); font-weight: 500; }
.pills a[aria-current] { background: var(--color-green); border-color: var(--color-green); color: var(--color-white); }
/* Soort aanvraag (Leads): tabbladen boven de statusfilter */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-24); border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-16); }
.tabs a { padding: var(--space-8) 0; text-decoration: none; color: var(--color-ink-soft); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current] { color: var(--color-ink); border-bottom-color: var(--color-green); }
.opslaan { margin-top: var(--space-24); padding-top: var(--space-16); border-top: 1px solid var(--color-line); }
.opslaan h3 { margin: 0 0 var(--space-8); }
.badge--gelezen, .badge--document, .badge--gesprek, .badge--academy { background: var(--color-mint-strong); color: var(--color-green-dark); }
.badge--verstuurd, .badge--antwoorden, .badge--sleutel, .badge--aangenomen { background: var(--color-green); color: var(--color-white); }
.badge--afgewezen { background: var(--color-line); color: var(--color-ink-soft); }

/* Blokken op de paginabewerker */
.block { padding: 0; }
.block > summary { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-16) var(--space-24); cursor: pointer; list-style: none; }
.block > summary::-webkit-details-marker { display: none; }
.block > summary::before { content: "▸"; color: var(--color-ink-soft); }
.block[open] > summary::before { content: "▾"; }
.block__type { font-weight: 600; color: var(--color-green); white-space: nowrap; }
.block__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-soft); }
.block__tools { display: flex; gap: var(--space-4); }
.block__body { padding: 0 var(--space-24) var(--space-24); }
.block--error { border-color: var(--color-error); }
.repeat { border: 0; padding: 0; margin: 0 0 var(--space-16); }
.repeat > legend { font-weight: 600; margin-bottom: var(--space-8); padding: 0; }
.repeat__item { position: relative; padding-top: 52px; }
.repeat__tools { position: absolute; top: var(--space-8); right: var(--space-8); display: flex; gap: var(--space-4); }
.add-block .row select { flex: 1; width: auto; }
.advanced summary, details.danger summary { cursor: pointer; font-weight: 600; }
.advanced textarea { margin: var(--space-16) 0; }
details.danger { margin-top: var(--space-24); }
details.danger summary { color: var(--color-error); }
details.card > summary { font-family: var(--font-heading); font-size: 1.25rem; }
.page-group { margin-bottom: var(--space-16); }
.page-group > summary { cursor: pointer; list-style: none; }
.page-group > summary::-webkit-details-marker { display: none; }
.page-group > summary::before { content: "▸ "; color: var(--color-ink-soft); }
.page-group[open] > summary::before { content: "▾ "; }
.page-group[open] > summary { margin-bottom: var(--space-16); }

/* Markdown-editor */
.md { border: 1px solid var(--color-line-strong); border-radius: var(--radius-field); overflow: hidden; background: var(--color-white); }
.md__tools { display: flex; gap: 2px; padding: 4px; background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
.md__tools button { font: inherit; font-size: var(--text-small); min-width: 40px; min-height: 36px; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--color-ink); }
.md__tools button:hover { background: var(--color-mint); }
.md__panes { display: grid; grid-template-columns: 1fr 1fr; }
.md__panes textarea { border: 0; border-radius: 0; border-right: 1px solid var(--color-line); min-height: 180px; }
.md__preview { padding: 10px 14px; overflow: auto; max-height: 420px; font-size: .9375rem; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3 { font-size: 1.125rem; margin: 1em 0 .4em; }

/* Media */
.media-field { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-16); align-items: start; }
.media-thumb { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-field); background: var(--color-mint); display: grid; place-items: center; font-size: var(--text-label); color: var(--color-ink-soft); text-align: center; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-24); }
.media-card { margin: 0; padding: var(--space-16); }
.media-card img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-field); background: var(--color-mint); display: block; margin-bottom: var(--space-16); }
.media-card .row { margin-bottom: var(--space-8); }

/* Login */

/* Tablet: zijbalk wordt een icoonbalk */
@media (max-width: 1024px) {
  body.admin { grid-template-columns: 72px minmax(0, 1fr); }
  .sidebar { padding: var(--space-16) var(--space-8); }
  .sidebar span, .sidebar__brand { display: none; }
  .sidebar a, .sidebar button { justify-content: center; padding: 12px; }
  .main { padding: var(--space-24); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body.admin { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; overflow-x: auto; gap: var(--space-8); }
  .sidebar nav { flex-direction: row; }
  .sidebar__foot { margin: 0; flex-direction: row; border: 0; padding: 0; }
  .main { padding: var(--space-16); }
  .grid-3, .grid-2, .columns-2, .md__panes { grid-template-columns: 1fr; }
  .md__panes textarea { border-right: 0; border-bottom: 1px solid var(--color-line); }
  .media-field { grid-template-columns: 1fr; }
}

/* Blogs: overzicht en editor */
.post-list { list-style: none; padding: 4px var(--space-24); }
.post-row { display: flex; align-items: center; gap: var(--space-16); padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.post-row:last-child { border-bottom: 0; }
.post-row__main { display: flex; align-items: center; gap: var(--space-16); flex: 1; min-width: 0; color: var(--color-ink); text-decoration: none; }
.post-row__main:hover strong { color: var(--color-green); text-decoration: underline; }
.post-row__thumb { flex: none; width: 96px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--color-mint); }
.post-row__thumb--empty { display: grid; place-items: center; color: var(--color-ink-soft); }
.post-row__text { display: grid; gap: 2px; min-width: 0; }
.post-row__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { text-align: center; padding: var(--space-40); }
.empty p { margin: 0 0 var(--space-16); }

.post-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-24); align-items: start; }
.post-editor__side { position: sticky; top: var(--space-24); display: grid; gap: var(--space-16); }
.post-editor__side .card { margin: 0; }
.input--title { font-family: var(--font-heading); font-size: 1.625rem; font-weight: 500; padding: 12px 14px; }
.cover-field__box { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-16); align-items: start; }
.cover-field__img { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; object-fit: cover; background: var(--color-mint); }
.cover-field__img--empty { display: grid; place-items: center; align-content: center; gap: 6px; color: var(--color-ink-soft); font-size: var(--text-small); border: 2px dashed var(--color-mint-strong); }
.cover-field__controls .btn { cursor: pointer; }
.cover-field__controls input:not([type=file]) { width: 100%; }
.field-label--small { font-weight: 600; margin-top: var(--space-16); font-size: var(--text-small); }
.hint--above { margin: 0 0 var(--space-8); }
.publish-box { display: grid; gap: var(--space-8); }
.publish-box__status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin: 0 0 var(--space-8); font-size: var(--text-small); }
.publish-box__date { margin: var(--space-8) 0 0; }
.checks--stack { grid-template-columns: 1fr; margin-bottom: var(--space-8); }
.slug-input { display: flex; align-items: center; gap: 4px; }
.slug-input input { flex: 1; min-width: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) {
  .post-editor { grid-template-columns: minmax(0, 1fr); }
  .post-editor__side { position: static; }
}
@media (max-width: 720px) {
  .cover-field__box { grid-template-columns: 1fr; }
}
.cat-field { border: 0; padding: 0; margin: 0; }
.cat-field input:not([type=checkbox]) { width: 100%; }
.post-editor__side details.card > summary { font-size: 1.0625rem; }

/* =========================================================
   Aanmelden, uitnodiging en herstel ("Schrift & Inkt")
   Links groen paneel met de gele vlieglijn, rechts het formulier
   op schriftpapier.
   ========================================================= */
body.auth {
  margin: 0; min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--color-ink); background: var(--color-paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.auth__brand {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-40);
  padding: clamp(32px, 4vw, 56px); background: var(--color-green-dark); color: var(--color-paper);
}
.auth__logo img { width: 150px; height: auto; filter: brightness(0) invert(1); }
.auth__welcome { margin-top: auto; max-width: 420px; position: relative; z-index: 1; }
.auth__eyebrow { margin: 0 0 var(--space-16); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-yellow); }
.auth__quote { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; }
.auth__quote em { font-style: italic; }
.auth__trail { position: absolute; right: -40px; bottom: 120px; width: 420px; max-width: 90%; }
.auth__trail path { fill: none; stroke: var(--color-yellow); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 11; opacity: .9; }
.auth__back { margin-top: auto; color: var(--color-mint-strong); font-size: var(--text-small); text-decoration: none; position: relative; z-index: 1; }
.auth__back:hover { color: var(--color-white); text-decoration: underline; }

.auth__main {
  display: grid; place-items: center; padding: clamp(24px, 5vw, 64px) var(--gutter);
  /* schriftpapier: zachte lijnen met een groene kantlijn */
  background:
    linear-gradient(90deg, transparent 47px, color-mix(in srgb, var(--color-green) 22%, transparent) 47px, color-mix(in srgb, var(--color-green) 22%, transparent) 49px, transparent 49px),
    repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--color-line) 70%, transparent) 31px 32px),
    var(--color-paper);
}
.auth__card {
  width: min(440px, 100%); padding: clamp(28px, 4vw, 44px); background: var(--color-white);
  border: 1px solid var(--color-line); border-radius: var(--radius-card);
  box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--color-green-dark) 45%, transparent);
}
.auth__title { margin: 0 0 var(--space-8); font-family: var(--font-heading); font-weight: 500; font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; }
.auth__intro { margin: 0 0 var(--space-24); color: var(--color-ink-soft); }
.auth__form { display: grid; gap: 18px; }
.auth__field { display: grid; gap: 6px; }
.auth__field label { font-weight: 600; font-size: .9375rem; }
.auth__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-8); }
.auth__field input {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--color-ink);
  background: var(--color-paper); border: 1.5px solid var(--color-line-strong); border-radius: var(--radius-field);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.auth__field input:hover { border-color: var(--color-ink-soft); }
.auth__field input:focus { outline: none; background: var(--color-white); border-color: var(--color-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-green) 18%, transparent); }
.auth__pw { position: relative; }
.auth__pw input { padding-right: 52px; }
.auth__pw-toggle {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-field); background: none; color: var(--color-ink-soft); cursor: pointer;
}
.auth__pw-toggle:hover { color: var(--color-green); }
.auth__help { margin: 0; font-size: var(--text-small); color: var(--color-ink-soft); }
.auth__link { font-size: var(--text-small); font-weight: 600; color: var(--color-green); }
.auth__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 12px 20px;
  font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  border-radius: var(--radius-pill); border: 1.5px solid var(--color-green); background: var(--color-white); color: var(--color-green);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.auth__btn:hover { background: var(--color-mint); color: var(--color-green-dark); }
.auth__btn:active { transform: translateY(1px); }
.auth__btn--primary { margin-top: 4px; background: var(--color-green); color: var(--color-white); box-shadow: 0 3px 0 var(--color-green-dark); }
.auth__btn--primary:hover { background: var(--color-green-dark); color: var(--color-white); }
.auth__btn--passkey .icon { width: 20px; height: 20px; }
.auth__btn:focus-visible, .auth__pw-toggle:focus-visible, .auth__link:focus-visible, .auth__back:focus-visible { outline: 3px solid var(--color-green); outline-offset: 3px; }
.auth__back:focus-visible { outline-color: var(--color-yellow); }
.auth__or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--color-ink-soft); font-size: var(--text-small); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.auth__alert { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-field); border-left: 4px solid var(--color-error); background: color-mix(in srgb, var(--color-error) 9%, var(--color-white)); color: var(--color-error); font-weight: 600; font-size: .9375rem; }
.auth__ok { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 14px; border-radius: var(--radius-field); background: var(--color-mint); color: var(--color-green-dark); }
.auth__ok .icon { flex: none; margin-top: 2px; }
.auth__foot { margin: 20px 0 0; text-align: center; }
@media (max-width: 860px) {
  body.auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth__brand { flex-direction: row; align-items: center; gap: var(--space-16); padding: 16px 20px; }
  .auth__logo img { width: 92px; }
  .auth__welcome, .auth__trail { display: none; }
  .auth__back { margin: 0 0 0 auto; }
  .auth__main { place-items: start center; padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth__btn, .auth__field input { transition: none; }
}

/* Mijn account en medewerkers */
.sidebar__me { display: flex; align-items: center; gap: 10px; }
.sidebar__me small { display: block; font-size: .75rem; opacity: .75; font-weight: 400; }
.sidebar__avatar, .user-row__avatar {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-yellow); color: var(--color-ink); font-family: var(--font-heading); font-weight: 600;
}
.card__head h2 { display: flex; align-items: center; gap: 8px; }
.key-list { list-style: none; padding: 0; margin: var(--space-16) 0; display: grid; gap: 8px; }
.key-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-field); }
.key-list__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-mint); color: var(--color-green); flex: none; }
.key-list__text { flex: 1; display: grid; min-width: 0; }
.passkey-add { margin-top: var(--space-16); }
.passkey-add__row { display: flex; flex-wrap: wrap; gap: 8px; }
.passkey-add__row input { flex: 1 1 220px; }
.invite-form { display: grid; grid-template-columns: 1fr 1.3fr .8fr auto; gap: 12px; align-items: end; }
.invite-form .field { margin: 0; }
.invite-done { border-color: var(--color-green); background: var(--color-mint); }
.invite-done h2 { display: flex; align-items: center; gap: 8px; }
.copy-row { display: flex; gap: 8px; margin: 8px 0; }
.copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; background: var(--color-white); }
.user-list { list-style: none; padding: 0; margin: 0; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-line); flex-wrap: wrap; }
.user-row:last-child { border-bottom: 0; }
.user-row--off { opacity: .6; }
.user-row__avatar { width: 40px; height: 40px; background: var(--color-mint); color: var(--color-green-dark); }
.user-row__text { flex: 1 1 240px; display: grid; min-width: 0; }
.user-row__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: var(--text-small); }
.user-row__meta .icon { vertical-align: -2px; }
.user-row__form { display: flex; gap: 8px; align-items: center; }
.user-row__form select { min-height: 36px; }
@media (max-width: 900px) {
  .invite-form { grid-template-columns: 1fr; }
}

/* ===== Blogs: inplannen, statistiekbalk en kalender ===== */
.badge--ingepland { display: inline-flex; align-items: center; gap: 4px; background: var(--color-white); color: var(--color-green-dark); box-shadow: inset 0 0 0 1.5px var(--color-green); }
.publish-box__date legend { font-weight: 600; margin-bottom: 6px; }
.publish-box__when { display: grid; grid-template-columns: 1fr 7.5rem; gap: var(--space-8); }
.publish-box__date .hint { margin-top: 6px; }

.pills--small { margin: 0; gap: 4px; }
.pills--small a { padding: 4px 12px; font-size: var(--text-small); }
.pills a:focus-visible, .blog-cal a:focus-visible, .top-posts a:focus-visible { outline: 3px solid var(--color-green); outline-offset: 2px; }

.blog-stats__empty { margin: var(--space-8) 0 0; }
.blog-stats__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin: var(--space-16) 0 var(--space-24); }
.blog-stats__figures > div { padding: var(--space-16); background: var(--color-paper); border-radius: var(--radius-field); }
.blog-stats__figures dt { font-size: var(--text-small); color: var(--color-ink-soft); }
.blog-stats__figures dd { margin: 4px 0 0; font-family: var(--font-heading); font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--color-green-dark); font-variant-numeric: tabular-nums; }
.blog-stats__figures dd .muted { font-family: var(--font-body); font-size: var(--text-small); font-weight: 400; }
.blog-stats__figures .hint { margin: 2px 0 0; }
.blog-stats__cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-40); }
.blog-stats h3 { font-size: 1rem; margin-bottom: var(--space-8); }

.bars, .top-posts { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--space-8); padding: 5px 0; font-size: var(--text-small); }
.bars__track { height: 10px; border-radius: var(--radius-pill); background: var(--color-mint); overflow: hidden; }
.bars__fill { display: block; height: 100%; border-radius: inherit; background: var(--color-green); }
.bars__n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.top-posts { counter-reset: top; }
.top-posts li { counter-increment: top; display: flex; gap: var(--space-8); align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-small); }
.top-posts li:last-child { border-bottom: 0; }
.top-posts li::before { content: counter(top); flex: none; width: 1.25rem; font-weight: 600; color: var(--color-ink-soft); }
.top-posts a { flex: 1; min-width: 0; color: var(--color-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-posts a:hover { color: var(--color-green); text-decoration: underline; }

.blog-cal__head { align-items: center; }
.blog-cal__head h2 { margin: 0; }
.blog-cal__nav { display: flex; gap: 4px; }
.blog-cal__legend { display: flex; align-items: center; gap: 6px; margin: var(--space-8) 0 var(--space-16); font-size: var(--text-small); }
.blog-cal__key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--color-green); }
.blog-cal__key--later { margin-left: var(--space-8); background: var(--color-white); border: 1.5px dashed var(--color-green); }
.blog-cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.blog-cal__grid th { padding: 0 0 6px; font-size: var(--text-label); font-weight: 600; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: var(--tracking-label); text-align: left; }
.blog-cal__grid abbr { text-decoration: none; }
.blog-cal__grid td { height: 96px; padding: 6px; vertical-align: top; border: 1px solid var(--color-line); position: relative; }
.blog-cal__grid td.blog-cal__out { background: var(--color-paper); }
.blog-cal__grid td.is-past .blog-cal__day { color: var(--color-ink-soft); }
.blog-cal__day { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 4px; border-radius: var(--radius-pill); font-size: var(--text-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.blog-cal__grid td.is-today { background: var(--color-mint); }
.blog-cal__grid td.is-today .blog-cal__day { background: var(--color-green); color: var(--color-white); }
.blog-cal__post { position: relative; display: inline-block; margin: 0 2px 4px 0; border-radius: 6px; vertical-align: top; }
.blog-cal__post img, .blog-cal__noimg { display: block; width: 54px; height: 38px; object-fit: cover; border-radius: 6px; border: 2px solid var(--color-green); background: var(--color-mint); }
.blog-cal__noimg { display: grid; place-items: center; color: var(--color-ink-soft); }
.blog-cal__post.is-later img, .blog-cal__post.is-later .blog-cal__noimg { border-style: dashed; opacity: .8; }
.blog-cal__post:hover img { opacity: 1; box-shadow: var(--shadow-card); }
.blog-cal__clock { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-yellow); color: var(--color-ink); box-shadow: 0 0 0 2px var(--color-white); }
.blog-cal__add { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--color-green); border: 1px dashed var(--color-line-strong); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.blog-cal__grid td:hover .blog-cal__add, .blog-cal__add:focus-visible { opacity: 1; }
.blog-cal__add:hover { background: var(--color-mint); border-color: var(--color-green); }
.blog-cal__list, .blog-cal__list-empty { display: none; }

@media (max-width: 900px) {
    .blog-stats__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
}
@media (max-width: 720px) {
    /* 1fr zou meegroeien met lange titels (nowrap) en de pagina breder maken dan het scherm. */
    body.admin { grid-template-columns: minmax(0, 1fr); }
    .blog-stats__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-stats__figures > div:last-child { grid-column: 1 / -1; }
    .blog-stats__figures dd { font-size: 1.625rem; }
    .bars li { grid-template-columns: 7.5rem minmax(0, 1fr) 2.75rem; }
    .blog-cal__grid { display: none; }
    .blog-cal__list { display: grid; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
    .blog-cal__list-empty { display: block; margin: 0; }
    .blog-cal__list li { display: flex; align-items: center; gap: var(--space-16); padding: 6px 0; border-bottom: 1px solid var(--color-line); }
    .blog-cal__list li:last-child { border-bottom: 0; }
    .blog-cal__list .blog-cal__post { margin: 0; flex: none; }
    .blog-cal__list .blog-cal__post img, .blog-cal__list .blog-cal__noimg { width: 72px; height: 48px; }
    .blog-cal__list-text { display: grid; gap: 2px; min-width: 0; font-size: var(--text-small); }
    .blog-cal__list-text a { color: var(--color-ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-cal__add { transition: none; }
}

/* ===== Tarieven/reviews per aanbod, formulier-editor ===== */
/* Beheer: uitklapbare lijsten per aanbod (tarieven, reviews) en de vereenvoudigde formulier-editor. */

.fold { padding-block: 0; }
.fold__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-8); padding-block: var(--space-16); cursor: pointer; list-style: none; }
.fold__head::-webkit-details-marker { display: none; }
.fold__head::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: var(--space-8); border-right: 2px solid var(--color-green); border-bottom: 2px solid var(--color-green); transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease); align-self: center; }
.fold[open] > .fold__head::before { transform: rotate(45deg); }
.fold__title { flex: 1; font-weight: 600; font-size: 1.0625rem; color: var(--color-ink); }
.fold__count { font-size: var(--text-small); color: var(--color-ink-soft); }
.fold__head:hover .fold__title { color: var(--color-green); }
.fold__head:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; border-radius: 4px; }
.fold__add { margin: 0 0 var(--space-8); }
.fold[open] { padding-bottom: var(--space-16); }

/* Aanbod-keuze: het tekstveld voor een nieuw aanbod verschijnt pas bij "Nieuw aanbod…". */
.aanbod-new { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@supports selector(:has(*)) {
  .aanbod-new { display: none; }
  .field--aanbod:has(option[value="__nieuw__"]:checked) .aanbod-new { display: grid; }
}

/* Formulier-editor: keuzes alleen bij keuzevelden, technische zaken onder "Geavanceerd". */
.form-field__options:not(.is-choice) { display: none; }
@supports selector(:has(*)) {
  .form-field__options { display: none; }
  .form-field:has(select[name$="[type]"] :is(option[value="select"], option[value="radio"]):checked) .form-field__options { display: grid; }
}
.form-field__advanced { margin-top: var(--space-8); }
.form-field__advanced > summary { cursor: pointer; font-size: var(--text-small); color: var(--color-ink-soft); }
.form-field__advanced[open] > summary { margin-bottom: var(--space-8); }

/* Overzicht: recente en meest gelezen blogs */
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.toplist { margin: var(--space-16) 0 0; padding-left: 1.25rem; display: grid; gap: 8px; }
.toplist .muted { margin-left: 4px; }

/* Registreren (/registreren): leeftijdsvinkje */
.auth__check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-small); line-height: 1.4; margin: 4px 0 0; cursor: pointer; }
.auth__check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--color-green); }