/* PF Academy beheeromgeving — huisstijl.
   Overgenomen uit Photofacts.Beheer (C:\GIT\photofacts\src\Photofacts.Beheer), zodat beide
   beheeromgevingen hetzelfde voelen; zie migratieplan/12-beheeromgeving-stappenplan.md.
   Het accentgroen is bewust gelijk gehouden aan dat van Photofacts beheer — dat is toevallig
   ook precies het groen dat admin/includes/stylesheet.css al gebruikt (#a3c202).

   De oude admin-klassen (.tabel, .table-header, .default, .button, .btn-*, .onevenrij, …)
   blijven bestaan en worden hier opnieuw vormgegeven. Zo krijgen alle bestaande pagina's
   de nieuwe look zonder dat er in elke .cshtml iets hoeft te veranderen. Onderaan staat een
   blok met de klassen die alleen de PFA-admin gebruikt. */

/* ------------------------------------------------------------------ tokens */

:root {
  --pf-groen:        #a3c202;
  --pf-groen-donker: #8aa501;
  --pf-blauw:        #3a6ea5;
  --pf-blauw-donker: #2d5680;
  --pf-blauw-licht:  #eaf1f9;

  --tekst:        #1f2933;
  --tekst-zacht:  #5b6770;
  --tekst-vaag:   #8b959e;
  --rand:         #e3e7ec;
  --rand-sterk:   #cfd6de;
  --vlak:         #ffffff;
  --vlak-zacht:   #f6f8fa;
  --vlak-hover:   #eef2f7;
  --achtergrond:  #f2f4f7;

  --rood:      #c0392b;
  --rood-vlak: #fdecea;
  --groen:     #2f7d32;
  --groen-vlak:#e8f5e9;
  --oranje:    #b26a00;
  --oranje-vlak:#fff4e0;

  --radius:       8px;
  --radius-klein: 5px;
  --schaduw:      0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --schaduw-hoog: 0 4px 12px rgba(16, 24, 40, .10), 0 12px 32px rgba(16, 24, 40, .12);

  --menu-breedte: 216px;
  --topbar-hoogte: 56px;

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

/* ------------------------------------------------------------------ basis */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background-color: var(--achtergrond);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pf-blauw); text-decoration: none; }
a:hover { color: var(--pf-blauw-donker); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 12px 0; font-weight: 600; line-height: 1.3; color: var(--tekst); }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

p { margin: 0 0 12px 0; }

hr { border: 0; border-top: 1px solid var(--rand); margin: 20px 0; }

code, pre { font-family: var(--font-mono); font-size: 13px; }

/* ------------------------------------------------------------------ app-shell */

.app {
  display: flex;
  min-height: 100vh;
}

/* --- zijmenu --- */

.zijmenu {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--menu-breedte);
  height: 100vh;
  background: var(--vlak);
  border-right: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  z-index: 60;
}

.zijmenu__merk {
  padding: 16px 16px 12px 16px;
  flex: 0 0 auto;
}

.zijmenu__logo {
  display: block;
  background: var(--pf-groen);
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .2px;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--radius);
  text-decoration: none;
}
.zijmenu__logo:hover { background: var(--pf-groen-donker); color: #fff; text-decoration: none; }

.zijmenu__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 10px 16px 10px;
  scrollbar-width: thin;
}

.zijmenu__kop {
  padding: 16px 8px 6px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tekst-vaag);
}

.zijmenu a.menu-item,
.zijmenu button.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 1px;
  border: 0;
  background: none;
  border-radius: var(--radius-klein);
  color: var(--tekst);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.zijmenu a.menu-item:hover,
.zijmenu button.menu-item:hover {
  background: var(--vlak-hover);
  color: var(--tekst);
  text-decoration: none;
}
.zijmenu .menu-item.is-actief {
  background: var(--pf-blauw-licht);
  color: var(--pf-blauw-donker);
  font-weight: 600;
}
.zijmenu .menu-item svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
}
.zijmenu .menu-item.is-actief svg { opacity: 1; }
.zijmenu .menu-item__tekst { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zijmenu .menu-item__badge {
  flex: 0 0 auto;
  background: var(--vlak-hover);
  color: var(--tekst-zacht);
  border-radius: 20px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}
.zijmenu .menu-item__badge.is-actie { background: var(--rood); color: #fff; }
/* Een regel met een klikbaar getal: het getal ligt als eigen link rechts over de regel. */
.zijmenu .menu-rij { position: relative; }
.zijmenu a.menu-item--met-badge { padding-right: 46px; }
.zijmenu a.menu-item__badge {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
}
.zijmenu a.menu-item__badge:hover { filter: brightness(.9); text-decoration: none; }
.zijmenu .menu-item__extern { flex: 0 0 auto; opacity: .45; }

.zijmenu__nav-onder {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rand);
}
.zijmenu__nav-onder .menu-item { color: var(--tekst-zacht); }
.zijmenu__nav-onder .menu-item svg { opacity: .55; }

.zijmenu__zoek {
  padding: 4px 8px 0 8px;
  margin-bottom: 14px;
  display: flex;
  gap: 6px;
}
.zijmenu__zoek input[type=text] { min-width: 0; flex: 1 1 auto; }

.zijmenu__voet {
  flex: 0 0 auto;
  border-top: 1px solid var(--rand);
  padding: 10px;
}

.gebruiker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-klein);
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.gebruiker:hover { background: var(--vlak-hover); }
.gebruiker__avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pf-blauw);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gebruiker__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gebruiker__naam { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gebruiker__rol  { font-size: 11.5px; color: var(--tekst-vaag); }

.gebruikersmenu {
  display: none;
  margin-bottom: 6px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--vlak);
  box-shadow: var(--schaduw-hoog);
  padding: 4px;
}
.gebruikersmenu.is-open { display: block; }
.gebruikersmenu a,
.gebruikersmenu button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: none;
  border-radius: var(--radius-klein);
  font: inherit;
  font-size: 13px;
  color: var(--tekst);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.gebruikersmenu a:hover,
.gebruikersmenu button:hover { background: var(--vlak-hover); text-decoration: none; }

/* --- topbar (alleen mobiel zichtbaar) --- */

.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-hoogte);
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}
.topbar__titel { font-weight: 600; font-size: 15px; }

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--vlak);
  cursor: pointer;
  color: var(--tekst);
}
.hamburger:hover { background: var(--vlak-hover); }
.hamburger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  z-index: 55;
}
.menu-overlay.is-open { display: block; }

/* --- werkgebied --- */

.werkgebied {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--menu-breedte);
  display: flex;
  flex-direction: column;
}

/* --- submenubalk ---
   De items van het cluster waar je in zit, bovenaan de pagina. Vervangt de lange lijst in het
   zijmenu en is daarmee dezelfde oplossing als de submenu-container van de oude admin
   (admin/includes/menu.asp, iSubmenu). */

.submenu {
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 40;
}

.submenu__binnen {
  display: flex;
  gap: 2px;
  max-width: 1180px;
  padding: 0 28px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.submenu__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 11px 10px 9px 10px;
  border-bottom: 2px solid transparent;
  color: var(--tekst-zacht);
  font-size: 13.5px;
  white-space: nowrap;
  text-decoration: none;
}
.submenu__item:hover {
  color: var(--tekst);
  border-bottom-color: var(--rand-sterk);
  text-decoration: none;
}
.submenu__item.is-actief {
  color: var(--pf-blauw-donker);
  border-bottom-color: var(--pf-groen);
  font-weight: 600;
}
/* Het aantal achter een item, zoals "voornamen (12)" in het oude menu. */
.submenu__badge {
  background: var(--rood);
  color: #fff;
  border-radius: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
}

.content {
  padding: 24px 28px 60px 28px;
  max-width: 1180px;
  width: 100%;
}

/* Pagina's die zelf de volle breedte regelen (de editor) */
.content--vol { max-width: none; padding: 0; }

/* Pagina's met twee kolommen naast elkaar (het lidscherm) hebben meer nodig dan 1180px. */
.content--breed { max-width: 1500px; }

/* ------------------------------------------------------------------ meldingen */

#message,
.melding {
  border-radius: var(--radius);
  padding: 11px 14px;
  max-width: 900px;
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid transparent;
  font-size: 13.5px;
}
.message-note,
.melding--ok    { background: var(--groen-vlak); border-color: #c8e6c9; color: var(--groen); }
.message-error,
.melding--fout  { background: var(--rood-vlak); border-color: #f5c6c0; color: var(--rood); }
.melding--let_op { background: var(--oranje-vlak); border-color: #ffe0b2; color: var(--oranje); }

.errortext { color: var(--rood); }

/* ------------------------------------------------------------------ formulieren */

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
input[type=url],
input[type=date],
input[type=time],
select,
textarea {
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--tekst);
  background: var(--vlak);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--radius-klein);
  padding: 7px 9px;
  max-width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
textarea { line-height: 1.6; }

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--pf-blauw);
  box-shadow: 0 0 0 3px rgba(58, 110, 165, .14);
}

input[disabled], select[disabled], textarea[disabled] { background: var(--vlak-zacht); color: var(--tekst-vaag); }

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6770' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 28px;
}

label { cursor: pointer; }

input[type=radio], input[type=checkbox] { accent-color: var(--pf-blauw); margin-right: 4px; vertical-align: -1px; }

/* Radiogroepen als nette keuzeknoppen */
.keuzegroep { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.keuzegroep label {
  border: 1px solid var(--rand-sterk);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 12.5px;
  background: var(--vlak);
  color: var(--tekst-zacht);
  user-select: none;
}
.keuzegroep input { position: absolute; opacity: 0; pointer-events: none; }
/* De knop die aanstaat. Het hokje zelf is onzichtbaar, dus de keuze moet uit de knop
   blijken — en dat ging mis: er stond alleen een +-regel, die een input als voorganger
   van het label verwacht, terwijl elke pagina hier het hokje ín het label zet (zoals het
   hoort: dan is het hele label aanklikbaar). Daardoor zag geen enkele keuzegroep in het
   beheer er ooit gekozen uit. :has() dekt allebei de schrijfwijzen. */
.keuzegroep input:checked + label,
.keuzegroep label:has(input:checked) {
  background: var(--pf-blauw-licht);
  border-color: var(--pf-blauw);
  color: var(--pf-blauw-donker);
  font-weight: 600;
}
.keuzegroep input:focus-visible + label,
.keuzegroep label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(58, 110, 165, .18); }

.veld { margin-bottom: 14px; }
.veld > label,
.veld-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tekst-zacht);
}
.veld input[type=text],
.veld input[type=email],
.veld input[type=password],
.veld select,
.veld textarea { width: 100%; }
.veld__hint { margin-top: 4px; font-size: 11.5px; color: var(--tekst-vaag); }

/* ------------------------------------------------------------------ knoppen */

.button,
button.btn, button.btn-act, button.btn-error, button.btn-blue,
a.btn, a.btn-act, a.btn-error, a.btn-blue, a.btn-lrg, a.btn-act-lrg, a.btn-link,
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 14px;
  border-radius: var(--radius-klein);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s;
}
.button:hover, .knop:hover,
a.btn:hover, a.btn-act:hover, a.btn-error:hover, a.btn-blue:hover,
a.btn-lrg:hover, a.btn-act-lrg:hover, a.btn-link:hover,
button.btn:hover, button.btn-act:hover, button.btn-error:hover, button.btn-blue:hover { text-decoration: none; }

/* primair (groen) — .button, .btn-act, .btn-link, .knop--primair */
.button, a.btn-act, a.btn-act-lrg, a.btn-link, button.btn-act, .knop--primair {
  background: var(--pf-groen);
  border-color: var(--pf-groen);
  color: #fff;
}
.button:hover, a.btn-act:hover, a.btn-act-lrg:hover, a.btn-link:hover,
button.btn-act:hover, .knop--primair:hover {
  background: var(--pf-groen-donker);
  border-color: var(--pf-groen-donker);
  color: #fff;
}

/* blauw */
a.btn-blue, button.btn-blue, .knop--blauw {
  background: var(--pf-blauw);
  border-color: var(--pf-blauw);
  color: #fff;
}
a.btn-blue:hover, button.btn-blue:hover, .knop--blauw:hover {
  background: var(--pf-blauw-donker);
  border-color: var(--pf-blauw-donker);
  color: #fff;
}

/* neutraal */
a.btn, a.btn-lrg, button.btn, .knop--rustig {
  background: var(--vlak);
  border-color: var(--rand-sterk);
  color: var(--tekst);
}
a.btn:hover, a.btn-lrg:hover, button.btn:hover, .knop--rustig:hover {
  background: var(--vlak-hover);
  border-color: var(--rand-sterk);
  color: var(--tekst);
}

/* waarschuwend */
a.btn-error, button.btn-error, .knop--rood {
  background: var(--vlak);
  border-color: #edc3bd;
  color: var(--rood);
}
a.btn-error:hover, button.btn-error:hover, .knop--rood:hover { background: var(--rood-vlak); color: var(--rood); }

.knop--klein { padding: 4px 9px; font-size: 12px; }
.knop--icoon { padding: 7px; }
.knop svg, .button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.knoprij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* De oude admin gebruikte .btn ook voor mini-acties in tabellen; die blijven compact. */
.tabel a.btn, .tabel a.btn-act, .tabel a.btn-error, .tabel a.btn-blue,
table a.btn, table a.btn-act, table a.btn-error, table a.btn-blue {
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
}
/* Mini-acties (o.a. "publiceer"/"preview" op het dashboard) lichten groen op bij hover,
   zonder underline — specifieker dan .tabel a:hover zodat die de underline niet terugzet. */
.tabel a.btn:hover, .tabel a.btn-act:hover, .tabel a.btn-error:hover, .tabel a.btn-blue:hover,
table a.btn:hover, table a.btn-act:hover, table a.btn-error:hover, table a.btn-blue:hover {
  background: var(--pf-groen);
  border-color: var(--pf-groen);
  color: #fff;
  text-decoration: none;
}

/* ------------------------------------------------------------------ kaarten & tabellen */

.welcome-block,
.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 16px 18px;
  max-width: 900px;
  width: 100%;
  height: auto;
  margin-bottom: 18px;
}
.welcome-block { display: flow-root; }

.tabel,
.tables {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  width: 100%;
  max-width: 900px;
  margin-bottom: 22px;
  overflow: hidden;
  padding: 0;
}

.table-header {
  background: #d9e6ed;
  border-bottom: 1px solid var(--rand);
  border-radius: 0;
  padding: 12px 16px;
  width: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--tekst);
}
.table-header a { color: var(--pf-blauw) !important; font-weight: 500; }

/* Een .table-header bovenaan een .kaart: de kaart heeft (anders dan .tabel) padding, en
   zonder deze regel stond de kop als los blok binnen die marge in plaats van als
   balk over de volle breedte, zoals bij een tabel. */
.kaart > .table-header:first-child {
  margin: -16px -18px 14px -18px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

.table-footer {
  background: #d9e6ed;
  border-top: 1px solid var(--rand);
  border-radius: 0;
  padding: 8px 16px;
  width: auto;
  margin: 0;
  min-height: 8px;
  font-size: 12.5px;
  color: var(--tekst-zacht);
}
.table-footer:empty { padding: 0; border-top: 0; }

.default {
  width: auto;
  background: var(--vlak);
  border: 0;
  padding: 18px;
}

/* Het vangnet onder een zoekopdracht zonder treffers: waar ze dan wél zitten. */
.default .vangnet {
  margin-top: 8px;
  color: var(--tekst-zacht);
}

.default .vangnet a { margin: 0 2px; }

.tabel table,
.tables table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
}

.tabel th, table th, .tblHeader {
  background: var(--vlak-zacht);
  border-bottom: 1px solid var(--rand);
  padding: 9px 10px;
  color: var(--tekst-zacht);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
}

.tabel td, table td, TD {
  font-family: var(--font);
  font-size: 13.5px;
  border-bottom: 1px solid var(--rand);
  padding: 9px 10px;
  vertical-align: top;
}
.tabel tr:last-child td { border-bottom: 0; }

.tabel a { text-decoration: none; }
.tabel a:hover { text-decoration: underline; }

/* rijkleuren uit de oude admin: geen zebra meer, wel een duidelijke hover */
.oddrow, .evenrow, .evenrij, .onevenrij, TR.roweven { background: var(--vlak); }
.oddrow:hover, .evenrow:hover, .evenrij:hover, .onevenrij:hover { background: var(--vlak-hover); }
/* alleen een handje waar de rij ook echt ergens heen gaat (data-rijlink, zie beheer.js) */
tr:has(a[data-rijlink]) { cursor: pointer; }
.lastarticle, .lastarticle:hover { background: #f3f9ec; cursor: pointer; }

/* Rijen op volgorde slepen aan een grip (videovolgorde op de cursuspagina). De grip is een
   knop, zodat hij ook met de pijltjestoetsen werkt; touch-action: none laat een vinger
   slepen in plaats van de pagina te scrollen. */
.sleepgrip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 30px; padding: 0;
  border: 0; border-radius: 4px; background: transparent;
  color: var(--tekst-vaag); cursor: grab; touch-action: none;
}
.sleepgrip:hover, .sleepgrip:focus-visible { color: var(--tekst); background: var(--vlak-zacht); }
.sleepgrip svg { width: 18px; height: 18px; stroke: currentColor; fill: currentColor; stroke-width: 1.6; }
.sleepgrip:active, body.is-slepen, body.is-slepen * { cursor: grabbing !important; }
body.is-slepen { user-select: none; }
tr.is-gesleept > td { background: var(--pf-blauw-licht); }
tr.is-gesleept > td:first-child { box-shadow: inset 3px 0 0 var(--pf-blauw); }
tr.is-gesleept .sleepgrip { color: var(--pf-blauw); }
.volgordestatus { color: var(--tekst-zacht); }
.volgordestatus.is-fout { color: var(--rood); }

/* Brede tabellen mogen op smalle schermen scrollen in plaats van de pagina te breken */
.tabel { overflow-x: auto; }

/* Linkcontrole: de paden mogen afbreken, maar de twee actie-kolommen blijven
   altijd in beeld. Zonder vaste lay-out drukt een lang bestandsnaam de knop uit
   de tabel op smalle beheerpagina's. */
.linkcontrole-tabel table { table-layout: fixed; }
.linkcontrole-tabel__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.linkcontrole-tabel__kop form { margin: 0; flex: 0 0 auto; }
.linkcontrole-tabel__artikel { width: auto; min-width: 0; }
.linkcontrole-tabel__aantal {
  width: 70px;
  text-align: center;
  white-space: nowrap;
}
.linkcontrole-tabel__actie { width: 112px; white-space: nowrap; }
.linkcontrole-tabel__actie form { margin: 0; }
.linkcontrole-tabel__pad { overflow-wrap: anywhere; word-break: break-word; }

/* ------------------------------------------------------------------ diversen */

.preview-label { color: var(--tekst-vaag); font-size: 12.5px; font-weight: 600; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--concept    { background: var(--oranje-vlak); border-color: #ffe0b2; color: var(--oranje); }
.badge--gereed     { background: var(--pf-blauw-licht); border-color: #c9dcf0; color: var(--pf-blauw-donker); }
.badge--online     { background: var(--groen-vlak); border-color: #c8e6c9; color: var(--groen); }
.badge--fout       { background: var(--rood-vlak); border-color: #f5c6c0; color: var(--rood); }

/* Login staat los van de shell */
.loginpagina {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--achtergrond);
}
.loginpagina .tabel { max-width: 400px; }

/* ------------------------------------------------------------------ uploads (editor) */

.dropzone {
  border: 2px dashed var(--rand-sterk);
  padding: 18px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--vlak-zacht);
  transition: border-color .15s, background-color .15s;
  cursor: pointer;
}
.dropzone.drag-over { border-color: var(--pf-blauw); background: var(--pf-blauw-licht); }
.dropzone p { margin: 0 0 10px 0; color: var(--tekst-zacht); font-size: 13px; }

.upload-fout   { color: var(--rood); margin: 8px 0; display: none; font-size: 13px; }
.upload-gelukt { color: var(--groen); margin: 8px 0; display: none; font-size: 13px; }
.upload-bezig  { display: none; margin: 8px 0; color: var(--tekst-zacht); font-size: 13px; }

/* Voortgang van een upload. Is er een percentage, dan groeit de vulling mee; valt er
   niets te tellen (verkleinen in de browser, verwerken op de server) dan loopt hij
   als streep heen en weer, zodat zichtbaar blijft dat er nog iets gebeurt. */
.upload-balk {
  margin-top: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--rand);
  overflow: hidden;
}
.upload-balk__vulling {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--pf-blauw);
  transition: width .15s linear;
}
.upload-balk__vulling.is-onbekend {
  width: 35%;
  transition: none;
  animation: upload-schuiven 1.1s ease-in-out infinite;
}
@keyframes upload-schuiven {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .upload-balk__vulling.is-onbekend { animation: none; width: 100%; margin-left: 0; opacity: .5; }
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--pf-blauw);
  color: #fff;
  border-radius: var(--radius-klein);
  cursor: pointer;
  border: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  margin: 2px;
}
.upload-btn:hover { background: var(--pf-blauw-donker); }
.upload-btn-grijs { background: var(--vlak); color: var(--tekst); border: 1px solid var(--rand-sterk); }
.upload-btn-grijs:hover { background: var(--vlak-hover); }

#thumbDropZone { max-width: 100%; }
#thumbCropContainer { margin: 14px 0; }
#thumbCropPreview { max-width: 100%; max-height: 320px; background: var(--vlak-zacht); min-height: 140px; }

/* modale vensters */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(16, 24, 40, .5);
  padding: 20px;
  overflow-y: auto;
}
.overlay.is-open { display: block; }
.dialoog {
  background: var(--vlak);
  margin: 8vh auto 40px auto;
  padding: 20px 22px 24px 22px;
  border-radius: var(--radius);
  box-shadow: var(--schaduw-hoog);
  width: 100%;
  max-width: 540px;
  position: relative;
}
.dialoog h3 { margin-top: 0; }
.dialoog .sluit {
  position: absolute;
  top: 12px;
  right: 14px;
  color: var(--tekst-vaag);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 0;
}
.dialoog .sluit:hover { color: var(--tekst); }

/* Bevestigingsvenster — de vervanger van confirm(); wordt door beheer.js opgebouwd. */
.bevestiging {
  border: 0;
  padding: 0;
  border-radius: var(--radius);
  box-shadow: var(--schaduw-hoog);
  background: var(--vlak);
  color: var(--tekst);
  width: calc(100% - 32px);
  max-width: 440px;
}
.bevestiging::backdrop { background: rgba(16, 24, 40, .5); }
.bevestiging__binnen { padding: 22px 24px 18px 24px; }
.bevestiging__kop { display: flex; align-items: flex-start; gap: 12px; }
.bevestiging__icoon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--oranje-vlak);
  color: var(--oranje);
}
.bevestiging__icoon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bevestiging__titel { margin: 5px 0 0 0; font-size: 16px; font-weight: 600; }
.bevestiging__tekst { margin: 10px 0 0 46px; color: var(--tekst-zacht); font-size: 13.5px; line-height: 1.5; }
.bevestiging__knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* Het venster komt rustig binnen; wie animaties uit heeft staan krijgt het meteen. */
@media (prefers-reduced-motion: no-preference) {
  .bevestiging[open] { animation: bevestiging-in .14s ease-out; }
  .bevestiging[open]::backdrop { animation: bevestiging-waas .14s ease-out; }
}
@keyframes bevestiging-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes bevestiging-waas { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 480px) {
  .bevestiging__tekst { margin-left: 0; }
  .bevestiging__knoppen button { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
  .content { padding: 20px 18px 60px 18px; }
  .submenu__binnen { padding: 0 18px; }
}

@media (max-width: 900px) {
  .topbar { display: flex; }

  /* De topbar plakt zelf al bovenaan; de submenubalk schuift eronder. */
  .submenu { top: var(--topbar-hoogte); }

  .werkgebied { margin-left: 0; }

  .zijmenu {
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--schaduw-hoog);
    width: 264px;
  }
  .zijmenu.is-open { transform: translateX(0); }

  .content { padding: 16px 14px 60px 14px; }
  .submenu__binnen { padding: 0 14px; }

  /* De oude admin zette overal vaste breedtes; die mogen op mobiel meebewegen. */
  .tabel, .tables, .welcome-block, .kaart, .default, .table-header, .table-footer { max-width: 100%; }
  input[size], select, textarea { max-width: 100%; }
  #introductie-preview { width: 100% !important; }
}

@media (max-width: 560px) {
  .tabel td, table td { padding: 8px 8px; font-size: 13px; }
  .tabel th, table th { padding: 8px; }
  .content { padding: 14px 12px 60px 12px; }
}

/* ------------------------------------------------------------------ oude previews (introductie/promo)
   Typografie van de introductiepreview volgt newstyle.css (homepage-artikelblok):
   Verdana 16px / regelhoogte 1.8, titel Open Sans 24px. */

#introductie-preview {
  width: 100%;
  max-width: 780px;
  display: flex;
  gap: 20px;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #363636;
}
#introductie-preview .thumb { flex: 0 0 150px; width: 150px; height: 150px; overflow: hidden; border-radius: 0; margin: 0; float: none; }
#introductie-preview .thumb img { width: 100%; height: 100%; object-fit: cover; }
#introductie-preview .tekst { flex: 1 1 auto; min-width: 0; width: auto; float: none; line-height: 1.8; }
#introductie-preview .titel {
  margin: 0 0 2px 0;
  font-family: 'Open Sans', Verdana, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #446da3;
}
#introductie-preview .meta {
  display: block;
  margin: 4px 0;
  color: #8d8d8d;
  font-size: 13px;
  line-height: 1.8;
}
#introductie-preview .meta a { color: #4c7cba; text-decoration: underline; }
#introductie-preview .meta a:hover { color: #314e73; text-decoration: none; }
#introductie-preview .intro { margin: 0; font-size: 16px; line-height: 1.8; color: #363636; }
#introductie-preview .verder { text-decoration: underline; color: #4c7cba; }
#introductie-preview .verder:hover { color: #314e73; text-decoration: none; }

#promopreview {
  max-width: 780px;
  font-size: 14px;
  line-height: 1.7;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px;
}

@media (max-width: 560px) {
  #introductie-preview { flex-direction: column; }
  #introductie-preview .thumb { width: 100%; flex: 0 0 auto; height: 180px; }
}

/* --- profielfoto met drag-and-drop (bloggerinfo) --- */

.profielfoto {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Een button, zodat slepen én klikken én tabben allemaal werken */
.profielfoto__zone {
  position: relative;
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  padding: 0;
  border: 2px dashed var(--rand-sterk);
  border-radius: 50%;
  background: var(--vlak-hover);
  cursor: pointer;
  overflow: hidden;
}
.profielfoto__zone:hover,
.profielfoto__zone:focus-visible { border-color: var(--pf-groen); }
.profielfoto__zone.drag-over {
  border-color: var(--pf-groen);
  border-style: solid;
  background: var(--vlak);
}
.profielfoto__zone.is-bezig { cursor: progress; opacity: .6; }

.profielfoto__beeld {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profielfoto__zone.is-leeg .profielfoto__beeld { display: none; }

/* De silhouetplaatshouder; alleen zichtbaar zolang er geen foto is */
.profielfoto__leeg {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--tekst-vaag);
}
.profielfoto__zone.is-leeg .profielfoto__leeg { display: flex; }
.profielfoto__leeg svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.profielfoto__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 11.5px;
  opacity: 0;
  transition: opacity .12s ease;
}
.profielfoto__zone:hover .profielfoto__overlay,
.profielfoto__zone:focus-visible .profielfoto__overlay,
.profielfoto__zone.drag-over .profielfoto__overlay { opacity: 1; }

.profielfoto__uitleg {
  flex: 1 1 260px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tekst-vaag);
}

.profielfoto__melding { margin-top: 8px; min-height: 1.4em; color: var(--tekst); }
.profielfoto__melding.is-fout { color: var(--rood); }

/* ------------------------------------------------------------------ dashboard

   De cijferblokken van index-stats.asp. Daar stonden het vijf tabelcellen met
   font-size: 40px en een onclick; hier is het een grid van tegels die meebeweegt met
   de breedte van het scherm. Een tegel is een link (naar de bijbehorende pagina) of
   een span (als er niets achter zit). */

.cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rand);
  border-bottom: 1px solid var(--rand);
}
/* Een losse cijferbalk boven een tabel (niet binnen een dashboardblok) kreeg geen lucht. */
.cijfers + .tabel,
.cijfers + .tables,
.cijfers + .tabbladen { margin-top: 22px; }

.cijfer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 16px 16px;
  background: var(--vlak);
  color: var(--tekst);
  text-decoration: none;
}
a.cijfer:hover { background: var(--vlak-hover); color: var(--tekst); text-decoration: none; }

.cijfer__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
.cijfer__waarde {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--tekst);
}
.cijfers--groot .cijfer__waarde { font-size: 38px; }
.cijfer__extra { font-size: 12px; color: var(--tekst-vaag); }
/* Een naam in plaats van een getal, zoals de gekozen cursus bij de beoordelingen. */
.cijfer__naam { font-size: 20px; font-weight: 600; line-height: 1.25; margin: 4px 0 2px 0; }
/* De sterrenbalk die op de site staat, bij de beoordelingen. */
/* align-self: anders rekt de flexkolom van .cijfer de afbeelding uit over de hele breedte. */
.cijfer__ster { display: block; align-self: flex-start; height: 22px; width: auto; margin-top: 4px; }

.grafiekvak {
  padding: 14px 12px 6px 12px;
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}

/* De staafgrafiek met een aantal per dag (proefleden); inline svg, zie Kolomgrafiek.cs */
.grafiek { display: block; width: 100%; height: auto; }
.grafiek__staaf  { fill: var(--pf-groen); }
.grafiek__as     { stroke: var(--rand-sterk); stroke-width: 1; }
.grafiek__waarde,
.grafiek__label  { text-anchor: middle; font-family: var(--font); }
.grafiek__waarde { font-size: 11px; font-weight: 600; fill: var(--tekst-zacht); }
.grafiek__label  { font-size: 11px; fill: var(--tekst-vaag); }

/* De omzetgrafiek op het dashboard; inline svg, zie Omzetgrafiek.cs. Grijs is vorig jaar,
   blauw dit jaar. Achter de staven, lichter, de opgetelde omzet als lijnen met een vlak ertussen:
   groen en rood zijn alleen voor voor/achter, en staan in kop en tooltip nooit zonder pijl of woord. */
.omzetgrafiek { --omzet-vorig: #9aa5b1; --omzet-dit: var(--pf-blauw); }
.omzetgrafiek__vorig  { fill: var(--omzet-vorig); }
.omzetgrafiek__dit    { fill: var(--omzet-dit); }
.omzetgrafiek__vandaag { font-weight: 700; fill: var(--tekst); }
.omzetgrafiek__lijn   { fill: none; stroke-width: 2; stroke-opacity: .5; stroke-linejoin: round; stroke-linecap: round; }
.omzetgrafiek__lijn--vorig { stroke: var(--omzet-vorig); }
.omzetgrafiek__lijn--dit   { stroke: var(--omzet-dit); }
.omzetgrafiek__punt   { fill: var(--omzet-dit); fill-opacity: .6; }
.omzetgrafiek__voor   { fill: var(--groen); fill-opacity: .14; }
.omzetgrafiek__achter { fill: var(--rood); fill-opacity: .14; }
.omzetgrafiek__vak    { fill: transparent; }
.omzetgrafiek__vak.is-actief { fill: var(--tekst); fill-opacity: .05; }

.omzetkop { display: flex; margin: 0 4px 6px 4px; }
.omzetkop__verschil {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-klein);
  white-space: nowrap;
}
.omzetkop__verschil--voor   { color: var(--groen); background: var(--groen-vlak); }
.omzetkop__verschil--achter { color: var(--rood); background: var(--rood-vlak); }

/* De tooltip bij de muis; beheer.js zet hem neer en vult hem uit de data-attributen. */
.omzetvak { position: relative; }
.omzettip {
  position: absolute;
  z-index: 5;
  min-width: 190px;
  padding: 8px 10px;
  background: var(--vlak);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--radius-klein);
  box-shadow: var(--schaduw-hoog);
  font-size: 12px;
  line-height: 1.5;
  color: var(--tekst);
  pointer-events: none;
  white-space: nowrap;
}
.omzettip__dag { font-weight: 600; margin-bottom: 2px; }
.omzettip__regel { display: flex; justify-content: space-between; gap: 14px; }
.omzettip__regel b { font-weight: 600; }
.omzettip__jaar::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--jaar-kleur); }
.omzettip__jaar--dit   { --jaar-kleur: var(--pf-blauw); }
.omzettip__jaar--vorig { --jaar-kleur: #9aa5b1; }
.omzettip__opgeteld { color: var(--tekst-zacht); }
.omzettip__verschil { margin-top: 4px; font-weight: 600; }
.omzettip__verschil--voor   { color: var(--groen); }
.omzettip__verschil--achter { color: var(--rood); }

/* Inklapbare én versleepbare blokken. Beide standen staan per beheerder in tblBeheerVoorkeur;
   beheer.js zet .is-ingeklapt en de order-waarden, en onthoudt ze.

   De volgorde loopt via css-order en niet via de volgorde in de html: de server geeft elk blok
   zijn plek mee (style="order:n"), zodat de pagina zelf in een leesbare vaste volgorde kan
   blijven staan. Inklappen verandert die plek niet — tot 22-09-2026 zakte een ingeklapt blok
   naar de onderkant, maar nu de beheerder de volgorde zelf kiest hoort inklappen daar niet
   doorheen te fietsen. */
.blokken { display: flex; flex-direction: column; }

.blok > .table-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  cursor: grab;
  user-select: none;
}
.blok > .table-header:active { cursor: grabbing; }

/* Het greepje links in de kop: twee kolommen puntjes, getekend met een herhalend verloop zodat
   er geen icoon in elke blokkop hoeft. Alleen een hint dat je kunt slepen — de hele kop is de
   greep, niet dit blokje. Zonder JS (geen draggable-attribuut) heeft het geen betekenis, dus
   dan blijft het weg: beheer.js zet .blokken--sleepbaar. */
.blokken--sleepbaar > .blok > .table-header::before {
  content: "";
  flex: none;
  width: 7px;
  height: 16px;
  margin-right: 2px;
  background-image: radial-gradient(currentColor 1.1px, transparent 1.2px);
  background-size: 4px 5px;
  background-position: center;
  opacity: .35;
}

.blok__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -4px -6px -4px auto;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tekst-zacht);
  cursor: pointer;
}
.blok__knop:hover { background: rgba(255, 255, 255, .55); color: var(--tekst); }
.blok__knop svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(180deg);
  transition: transform .15s ease;
}
.blok.is-ingeklapt .blok__knop svg { transform: none; }

.blok.is-ingeklapt > :not(.table-header) { display: none; }
.blok.is-ingeklapt > .table-header { border-bottom: 0; color: var(--tekst-zacht); }
.blok.is-ingeklapt { margin-bottom: 10px; box-shadow: none; }

/* Slepen. Het blok dat aan de muis hangt blijft staan waar het stond maar wordt vaag; de plek
   waar het terechtkomt zie je doordat de andere blokken er meteen omheen schuiven. */
.blok.is-gesleept { opacity: .4; }
.blokken--sleept .blok > .table-header { cursor: grabbing; }

/* De regel onder de blokken: uitleg en de knop om de eigen volgorde weg te gooien. */
.blokvoet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 4px 0 20px;
  color: var(--tekst-zacht);
  font-size: 13px;
}

/* ------------------------------------------------------------------ oude PFA-admin klassen

   Klassen die alleen in admin/includes/stylesheet.css voorkomen en dus niet in de
   Photofacts-huisstijl zaten. Ze staan hier zodat markup die 1-op-1 uit een .asp-pagina
   wordt overgenomen meteen goed staat. De rijklassen die beide admins delen (.oddrow,
   .evenrij, .onevenrij) zijn hierboven al vormgegeven. */

.selectedrij  { background: var(--groen-vlak); cursor: pointer; }
.highliterij  { background: var(--groen-vlak); cursor: pointer; }
.lastarticle  { background: var(--groen-vlak); }
.errorrow     { background: var(--rood-vlak); }
.errorrow:hover { background: var(--rood-vlak); cursor: pointer; }
.greyedrow    { color: var(--tekst-vaag); }
.greyedrow:hover { color: var(--tekst); cursor: pointer; }

.label     { color: var(--tekst-zacht); }
.tblHeader { border-bottom: 1px solid var(--rand); color: var(--tekst-zacht); }

/* De knoplinks uit de oude admin: a.btn-act (accent), a.btn-grey/a.btn-lrg (neutraal),
   a.btn-blue (secundair). Zelfde vorm als .button hierboven. */
a.btn-act, a.btn-act-lrg, a.btn-link,
a.btn-grey, a.btn-lrg, a.btn-blue {
  display: inline-block;
  border-radius: var(--radius-klein);
  color: #fff;
  text-decoration: none;
  line-height: 1.4;
}
a.btn-act, a.btn-blue { padding: 3px 8px; font-size: 12px; }
a.btn-act-lrg, a.btn-link, a.btn-grey, a.btn-lrg { padding: 7px 14px; font-size: 13px; }

a.btn-act, a.btn-act-lrg, a.btn-link { background: var(--pf-groen); }
a.btn-grey, a.btn-lrg { background: var(--rand-sterk); color: var(--tekst); }
a.btn-blue { background: var(--pf-blauw); }

a.btn-act:hover, a.btn-act-lrg:hover, a.btn-link:hover { background: var(--pf-groen-donker); color: #fff; text-decoration: none; }
a.btn-grey:hover, a.btn-lrg:hover { background: var(--tekst-vaag); color: #fff; text-decoration: none; }
a.btn-blue:hover { background: var(--pf-blauw-donker); color: #fff; text-decoration: none; }

a.white { color: #fff; text-decoration: underline; }
a.white:hover { color: #fff; text-decoration: none; }

/* ------------------------------------------------------------------ leden (cluster 2)

   De schermen van stap 5: de ledenlijst met filtertabbladen, het detailscherm en de
   werkstromen eromheen. De tabellen zelf gebruiken de bestaande klassen (.tabel,
   .table-header, .onevenrij/.evenrij); hieronder staat alleen wat daar nog bij komt. */

.zoekbalk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zoekbalk input[type=text] { flex: 1 1 320px; min-width: 0; }

/* Filters boven de lijst: leden / maandleden / vip / proefleden / verwijderd. */
.tabbladen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px 0; }

.tabblad {
  padding: 6px 12px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--vlak);
  color: var(--tekst-zacht);
  font-size: 13px;
  text-decoration: none;
}
.tabblad:hover { background: var(--vlak-hover); text-decoration: none; }
.tabblad.is-actief { background: var(--pf-groen); border-color: var(--pf-groen); color: #fff; }
.tabblad--schakelaar { margin-left: auto; }
.tabblad--schakelaar.is-actief { background: var(--oranje); border-color: var(--oranje); }

.rechts { text-align: right; }

/* Actieve leden stonden in de oude admin groen, verlopen datums rood. */
.is-actief-lid a, .is-actief-lid { color: var(--groen); }
.is-verlopen { color: var(--rood); }

.blader { display: inline-flex; gap: 10px; align-items: center; margin-right: 14px; }

/* ------------------------------------------------------------------ lidscherm */

.lidnummer { color: var(--tekst-vaag); font-weight: 400; }

/* De kop: naam met kenmerken links, profielfoto rechts. */
.lid-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 14px;
}
.lid-kop h1 { margin-bottom: 8px; }
.lid-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.lid-badges a.badge:hover { text-decoration: none; border-color: var(--pf-blauw); }

/* De vier, vijf dingen die je bij een klant meestal als eerste wilt weten. Ze staan in
   één band boven de rest, zodat je er niet meer voor hoeft te zoeken in de gegevenslijst. */
.lid-samenvatting {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--rand);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  overflow: hidden;
  margin-bottom: 16px;
}
.kerncijfer { background: var(--vlak); padding: 12px 14px; }
.kerncijfer__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tekst-vaag);
}
.kerncijfer__waarde { display: block; font-size: 18px; font-weight: 600; margin-top: 3px; }
.kerncijfer__extra { display: block; font-size: 12px; color: var(--tekst-zacht); margin-top: 3px; }

.lid-snelacties { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

/* Twee kolommen: links waar het werk gebeurt (contact, lidmaatschap, betalingen,
   producten), rechts de context die je erbij leest. Onder 1100px onder elkaar. */
.lid-kolommen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}
.lid-kolommen .kaart,
.lid-kolommen .tabel { max-width: none; }

/* Een tabel die de volle breedte van de pagina mag gebruiken, voor lange tekstkolommen. */
.tabel--vol { max-width: none; }
.lid-zij .kaart { padding: 14px 16px; }
.lid-zij h2 { font-size: 15px; }

@media (max-width: 1100px) {
  .lid-kolommen { grid-template-columns: 1fr; }
}

/* Twee velden naast elkaar in een formulier (postcode + plaats, land + btw). */
.veldrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }

/* Een kaartkop met een link erin, zoals de .table-header van een tabel die heeft. */
.kaart h2 a.kaart__link {
  float: right;
  font-size: 12.5px;
  font-weight: 500;
  margin-left: 12px;
}

/* Een tabel binnen een kaart: dezelfde regels als .tabel, maar zonder eigen kader. */
.tabel-plat { width: 100%; border-collapse: collapse; margin: 10px 0; }

/* Bedragen en datums horen op één regel; in de smallere kolom brak "€ 179,00" anders af. */
.cel-kort { white-space: nowrap; }

/* De soortkolom van het gecombineerde betalingsoverzicht op het lidscherm: één overzicht
   voor tblBetaling, tblBetalingRecurring en tblProductsOrders, dus moet per regel te zien
   zijn waar hij vandaan komt. Rustiger dan .badge — het staat op élke rij. */
.soortlabel {
  display: inline-block;
  border-radius: var(--radius-klein);
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--vlak-zacht);
  color: var(--tekst-zacht);
  border: 1px solid var(--rand);
}
.soortlabel--betaling { background: var(--pf-blauw-licht); border-color: #c9dcf0; color: var(--pf-blauw-donker); }
.soortlabel--incasso  { background: var(--oranje-vlak);    border-color: #ffe0b2; color: var(--oranje); }
.soortlabel--product  { background: var(--groen-vlak);     border-color: #c8e6c9; color: var(--groen); }

/* De opbouw onder een tabelvoet: waar het totaal uit is opgebouwd, in kleine letters. */
.tabel-uitleg {
  margin: 8px 12px 12px;
  font-size: 12.5px;
  color: var(--tekst-zacht);
}


/* Een tussenkopje na een gegevenslijst mag niet tegen de laatste regel aan plakken. */
.kaart .veld-label { margin-top: 14px; }

.knoprij--onder { margin-top: 6px; }

/* Bewerken op de plek van de waarde zelf — de opvolger van de "(aanpassen)"-links van
   lid.asp. Dicht is het een klein linkje achter de waarde; open klapt het formulier
   eronder open, zonder paginabezoek en zonder JavaScript. */
.bewerk { display: inline-block; }
.bewerk[open] { display: block; margin-top: 4px; }
.bewerk > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--pf-blauw);
  list-style: none;
}
.bewerk > summary::-webkit-details-marker { display: none; }
.bewerk > summary:hover { text-decoration: underline; }
.bewerk--gevaar > summary { color: var(--rood); }
/* Een uitklapper die een blok voor zichzelf is (wachtwoord, account verwijderen) in plaats
   van een linkje achter een waarde. */
.bewerk--blok { display: block; margin-top: 8px; }
/* Dezelfde uitklapper, maar dicht een knop in plaats van een linkje (de adresmail). */
.mailknop > summary { list-style: none; }
.mailknop > summary::-webkit-details-marker { display: none; }

.bewerk__vak {
  margin: 8px 0 4px 0;
  padding: 12px 14px;
  background: var(--vlak-zacht);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.bewerk__vak .veld:last-of-type { margin-bottom: 10px; }

/* Klantcontacten als leesbare regels onder elkaar; openstaande vallen op. */
.contactlijst { list-style: none; margin: 0 0 10px 0; padding: 0; }
.contactlijst li { border-top: 1px solid var(--rand); padding: 8px 0; font-size: 13px; }
.contactlijst li:first-child { border-top: 0; }
.contact--open { background: var(--oranje-vlak); }
.contact__kop { color: var(--tekst-zacht); font-size: 12px; margin-bottom: 3px; }
.contact__kop a { margin-left: 6px; }

.lid-foto {
  flex: 0 0 auto;
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--pf-blauw-licht);
}
.lid-foto--leeg {
  display: flex; align-items: center; justify-content: center;
  background: var(--pf-blauw-licht);
  color: var(--pf-blauw);
  font-size: 26px; font-weight: 600;
}

/* Naam/waarde-lijst; op smalle schermen onder elkaar in plaats van naast elkaar. */
.gegevenslijst { display: grid; grid-template-columns: 170px 1fr; gap: 6px 16px; margin: 0; }
.gegevenslijst dt { color: var(--tekst-zacht); font-size: 12.5px; }
.gegevenslijst dd { margin: 0; }

/* In de smalle kolom is 170px voor het label te veel van de breedte. */
.gegevenslijst--smal { grid-template-columns: 110px 1fr; gap: 6px 10px; }

@media (max-width: 640px) {
  .lid-kop { flex-direction: column-reverse; align-items: flex-start; }
  .gegevenslijst { grid-template-columns: 1fr; gap: 2px; }
  .gegevenslijst dd { margin-bottom: 8px; }
}

/* Uitklapbare formulieren: <details> in plaats van de jQuery-toggles van lid.asp, zodat
   ze ook zonder JavaScript werken en met een directe link opengeklapt kunnen staan. */
.paneel { border-top: 1px solid var(--rand); padding: 10px 0; }
.paneel:first-of-type { border-top: 0; }
.paneel > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.paneel > summary:hover { color: var(--pf-blauw); }
.paneel[open] > summary { margin-bottom: 12px; }
.paneel .veld input[type=text],
.paneel .veld input[type=email],
.paneel .veld input[type=date],
.paneel .veld input[type=number],
.paneel .veld select,
.paneel .veld textarea { max-width: 420px; }
.paneel--gevaar > summary { color: var(--rood); }

/* Een knop die in een regel tekst meeloopt (verwijderen, +/- bij het aantal jaren lid). */
.inline-form { display: inline; }
.inline-form button { vertical-align: baseline; }

/* De suggestielijst onder het adresveld (wwwroot/js/adresaanvullen.js). Het veld zit in een
   .adresaanvul zodat de lijst er precies onder hangt en niets eronder wegduwt. */
.adresaanvul { position: relative; display: block; }
.adreslijst {
  position: absolute;
  z-index: 60;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 2px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--vlak);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--radius-klein);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}
.adreslijst li {
  padding: 7px 9px;
  border-radius: var(--radius-klein);
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adreslijst li:hover, .adreslijst li.is-actief { background: var(--vlak-hover); }

/* De kale variant van de pagina: geen zijmenu, alleen de balk met de titel en uitloggen.
   Voor het losse podcastaccount, dat maar bij één scherm mag (zie Auth/Podcasttoegang.cs).
   De topbar staat normaal alleen op smalle schermen aan; hier hoort hij er altijd te zijn. */
.app--kaal .werkgebied { margin-left: 0; }
.app--kaal .topbar { display: flex; }
.topbar__uit { margin-left: auto; }

/* Een keuzelijst met een knopje ernaast, midden in een tabelcel: het omwisselen van het
   boek op /bestellingen/30ms. De select mag de kolom niet opeten en de knop blijft ernaast. */
.regelactie { display: flex; gap: 6px; align-items: center; }
.regelactie select { max-width: 260px; }

/* Een <button> die eruitziet als een tekstlink ("verlengen?", "NL"/"BE"): voor kleine
   acties in een tabelcel die een POST moeten zijn maar geen knop verdienen. Tot 2026-09-08
   stonden die als <button class="btn-link">, en daar bestond geen regel voor — ze
   verschenen als grijze standaardknoppen van de browser. */
.knop--tekst {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--pf-blauw);
  cursor: pointer;
  white-space: nowrap;
}
.knop--tekst:hover { text-decoration: underline; }

/* Icoonknoppen in een actiekolom (bewerken / factuur / verwijderen bij betalingen):
   compact naast elkaar, de betekenis in de title. */
.acties { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.knop--klein.knop--icoon { padding: 4px; }
.knop--klein svg { width: 14px; height: 14px; }
.tabel .acties .knop { padding: 4px; }

/* Een formulier achter een knop: de knop is de <summary> van een <details>, zodat het
   zonder JavaScript open en dicht kan. De knop draagt twee opschriften (.als-dicht /
   .als-open, bijvoorbeeld "bewerken" / "sluiten"); een compacte .leesweergave die als
   broer achter de <details> staat, verdwijnt zodra het formulier open is. */
.bewerkvak > summary { list-style: none; }
.bewerkvak > summary::-webkit-details-marker { display: none; }
.bewerkvak > summary .als-open { display: none; }
.bewerkvak[open] > summary .als-dicht { display: none; }
.bewerkvak[open] > summary .als-open { display: inline; }
.bewerkvak[open] > summary { margin-bottom: 10px; }
.bewerkvak[open] + .leesweergave { display: none; }

/* Dezelfde knop, maar rechtsboven in de kop van een kaart (Contact en adres, Notitie). */
.kaart--met-knop { position: relative; }
.kaart__knop { position: absolute; top: 12px; right: 14px; }
.lid-zij .kaart__knop { top: 10px; right: 12px; }

/* Kaarten in twee kolommen (bestellingdetail), zodat alles zonder scrollen te zien is. Elke
   kolom stapelt zijn eigen kaarten, dus een hoge kaart links duwt rechts niets omlaag. */
.kaartraster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 900px;
  margin-bottom: 18px;
  align-items: start;
}
.kaartkolom { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kaartkolom > .kaart { margin-bottom: 0; padding: 14px 16px; max-width: none; }
.kaartraster h2 { font-size: 15px; }
.kaartraster .kaart__knop { top: 10px; right: 12px; }
.kaartraster .gegevenslijst { grid-template-columns: 120px 1fr; gap: 4px 10px; }
.kaartraster select,
.kaartraster input { max-width: 100%; }

@media (max-width: 760px) {
  .kaartraster { grid-template-columns: 1fr; }
}

/* De strook onder een tabel met de toevoegknop (betaling toevoegen). */
.tabel-voet-acties { padding: 10px 16px 12px; border-top: 1px solid var(--rand); }
.tabel-voet-acties .bewerk__vak { margin-top: 0; }

/* De handelingen bij de doorlopende incasso: dichtgeklapt staan de knoppen naast elkaar,
   een opengeklapt formulier neemt de hele breedte. Zonder die laatste regel wordt een
   <details> een smalle flexkolom en breken de velden af. */
.incasso-acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 14px; }
.incasso-acties > details[open] { flex: 1 1 100%; }
.incasso-acties > details[open] .bewerk__vak { margin-top: 0; }

/* Elk lopend abonnement een eigen blok in de incassokaart, met een lijn ertussen. */
.incasso-abonnement + .incasso-abonnement { border-top: 1px solid var(--rand); margin-top: 16px; padding-top: 14px; }
.incasso-abonnement__kop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px 0; font-size: 13.5px; }

/* Tussenkopje in een kaart, boven de gegevens die bij Mollie zelf opgehaald zijn. */
.kaart__kopje { font-size: 13.5px; margin: 16px 0 6px 0; }

/* De compacte contactweergave: naam, bereikbaarheid en adres als drie regels tekst. */
.leesweergave { font-size: 13.5px; line-height: 1.55; }
.leesweergave__regel { margin: 0; }
.leesweergave__regel .label { margin-left: 4px; }
.leesweergave .scheiding { color: var(--tekst-vaag); margin: 0 6px; }

.lijst { margin: 4px 0 12px 0; padding-left: 18px; }
.lijst li { margin-bottom: 4px; }

.notitie { white-space: normal; background: var(--vlak-zacht); border-radius: var(--radius-klein); padding: 8px 10px; }

/* De boeken als tegels: een kleine omslag met de titel ernaast en de actie eronder.
   Tot 2026-09-08 was dit een rij losse omslagen van 100px met een knop eronder. */
.boektegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.boektegel {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 9px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--vlak);
  min-width: 0;
}
.boektegel img { flex: 0 0 auto; width: 34px; height: auto; border-radius: 2px; }
.boektegel__tekst { min-width: 0; font-size: 12px; line-height: 1.35; }
.boektegel__titel { font-weight: 600; font-size: 12.5px; margin-bottom: 3px; }
.boektegel__stand { color: var(--tekst-zacht); }
.boektegel--klaargezet { border-color: var(--oranje); background: var(--oranje-vlak); }
.boektegel--klaargezet .boektegel__stand { color: var(--oranje); font-weight: 600; }
.boektegel--verzonden { opacity: .45; }
.knop--tekst svg { width: 12px; height: 12px; vertical-align: -2px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

.jaarkeuze { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ cluster 4: mail */

/* Kruimelpad boven een detailscherm (mailing, sequence, losse mail). */
.kruimels { font-size: 12.5px; color: var(--tekst-zacht); margin: 0 0 6px 0; }

/* Een regel die opvalt zonder een volledige melding te zijn: "er staan nog X mails klaar". */
.waarschuwing {
  background: var(--oranje-vlak);
  border-left: 3px solid var(--oranje);
  border-radius: var(--radius-klein);
  padding: 8px 12px;
  margin: 0 0 14px 0;
}

/* Toelichting onder een veld of tabel; nooit het belangrijkste op het scherm. */
.hint { color: var(--tekst-zacht); font-size: 12.5px; margin: 4px 0 10px 0; }

/* Een bijzin achter een waarde of een knop. Stond op twintig plaatsen in de pagina's maar
   had tot 2026-09-09 geen eigen regel, dus die tekst was even zwart als de rest. */
.tekst-zacht { color: var(--tekst-zacht); }

/* De kaart waarin om bevestiging van een verzending gevraagd wordt. */
.kaart--waarschuwing { border-left: 3px solid var(--oranje); background: var(--oranje-vlak); }

/* De voortgang van een mailingverzending (verzendscherm). De balk vult zich met wat er al
   de deur uit is; is het totaal onbekend, dan loopt er een streep heen en weer zoals bij
   een upload. */
.verzendvoortgang__stand {
  float: right;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
}
.verzendvoortgang__stand.is-bezig   { background: var(--pf-blauw); color: #fff; }
.verzendvoortgang__stand.is-klaar   { background: var(--groen-vlak); color: var(--groen); }
.verzendvoortgang__stand.is-gestopt { background: var(--oranje-vlak); color: var(--oranje); }
.verzendvoortgang__cijfer { margin: 0 0 8px 0; font-size: 15px; }
.verzendvoortgang__cijfer b { font-size: 22px; }
.verzendvoortgang__regels { margin: 12px 0 10px 0; padding-left: 18px; }
.verzendvoortgang__regels li { margin: 2px 0; }
.verzendbalk {
  height: 14px;
  border-radius: 7px;
  background: var(--rand);
  overflow: hidden;
}
.verzendbalk__vulling {
  height: 100%;
  min-width: 4px;
  border-radius: 7px;
  background: var(--pf-blauw);
  transition: width .6s ease;
}
.verzendbalk__vulling.is-klaar   { background: var(--groen); }
.verzendbalk__vulling.is-gestopt { background: var(--oranje); }
.verzendbalk__vulling.is-onbekend {
  width: 35%;
  transition: none;
  animation: upload-schuiven 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .verzendbalk__vulling.is-onbekend { animation: none; width: 100%; opacity: .5; }
}

/* De ontvangersgroepen op het verzendscherm en de sjablonen op het losse-mailscherm:
   radioknoppen als volwaardige regels, zodat het aantal en de toelichting leesbaar
   naast elkaar staan en de hele regel klikbaar is. */
.keuzelijst { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 16px 0; }
.keuzeregel {
  display: block;
  padding: 5px 8px;
  border-radius: var(--radius-klein);
  cursor: pointer;
}
.keuzeregel:hover { background: var(--vlak-zacht); }
.keuzeregel input { margin-right: 6px; }
.keuzeregel b { display: inline-block; min-width: 60px; text-align: right; margin-right: 8px; }

/* Het inplanformulier onder "Ja, nu klaarzetten" op het verzendscherm. */
.inplannen { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--rand-sterk); }
.inplannen input[type="datetime-local"] { margin-right: 8px; }

/* Hoe de mail eruit komt te zien: een wit vlak dat losstaat van de beheerhuisstijl,
   zodat je niet per ongeluk de opmaak van het beheer voor die van de mail aanziet. */
.mail-voorbeeld {
  background: #fff;
  border: 1px solid var(--rand-sterk);
  border-radius: var(--radius-klein);
  padding: 16px 18px;
  max-width: 720px;
}
.mail-voorbeeld__onderwerp { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.mail-voorbeeld__preview { color: var(--tekst-zacht); font-size: 12.5px; margin-bottom: 12px; }
.mail-voorbeeld__inhoud {
  border-top: 1px solid var(--rand);
  padding-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.mail-voorbeeld__inhoud img { max-width: 100%; height: auto; }

/* --- achtergrondtaken (stap 9) -------------------------------------------
   De statuspagina zet per taak drie regels onder elkaar in één cel; zonder
   deze klassen loopt de omschrijving even zwaar mee als de naam van de taak. */
.taak-toelichting { display: inline-block; color: var(--tekst-zacht); font-size: 12.5px; line-height: 1.5; }
.taak-fout        { display: inline-block; color: var(--rood); font-size: 12.5px; line-height: 1.5; }
.taak-aan         { color: var(--groen); font-weight: 600; }
.taak-uit         { color: var(--tekst-zacht); font-weight: 600; }

/* --- fotobalken (cluster 6) ----------------------------------------------
   De oude pagina zette deze regels als <style> bovenin content-barimages.asp;
   .imagebar heette daar zo. De foto's overlappen elkaar een stukje, precies
   zoals de balk er op de site uitziet. */
.fotobalk {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  padding-bottom: 10px;
  cursor: pointer;
}
.fotobalk img { margin-left: -19px; width: 150px; }
.fotobalk form:first-child .fotoknop img { margin-left: 0; }

/* De keuzelijst eronder toont dezelfde foto's náást elkaar in plaats van over
   elkaar, want daar gaat het om herkennen en niet om het eindresultaat. */
.fotokeuze { display: flex; flex-wrap: wrap; gap: 6px; }
.fotokeuze img { width: 150px; }

.fotoknop {
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.fotoknop:hover { border-color: var(--groen); }
.fotoknop img { display: block; }

/* --- leerpaden (cluster 6) -----------------------------------------------
   Een leerpad is een lijst met koppen ertussen; de koppen springen daarom
   naar links uit en de genummerde items staan iets ingesprongen. */
.leerpad-kop  { font-weight: 600; }
.leerpad-item { padding-left: 18px; }
.leerpad-nr   { display: inline-block; min-width: 26px; color: var(--tekst-zacht); }

/* De exportpagina van een vragenlijst: alle antwoorden onder elkaar met een dun
   lijntje ertussen, zoals vragenlijst-export.asp het deed. */
.export-antwoorden { width: 100%; border-collapse: collapse; }
.export-antwoorden td { border-bottom: 1px solid var(--rand); padding: 6px 4px; vertical-align: top; }

/* --- bestellingen (cluster 7) --------------------------------------------
   De kleuren waarmee product-openstaand.asp de regels markeerde: grijs voor
   'wachten op', oranje voor incompleet en rood voor nog niet betaald. */
tr.bestelling--wacht      { background-color: #efefef !important; color: #888; }
tr.bestelling--incompleet { background-color: #fff3e4 !important; }
tr.bestelling--onbetaald  { background-color: #f6ebeb !important; }

/* --- statistieken (cluster 8) --------------------------------------------
   De niveauverdeling per onderwerp. stats-onderwerpen-niveau.asp tekende hier
   per onderwerp een lijngrafiek met Chart.js van een cdn; dit zijn balkjes van
   een paar regels css, zonder externe afhankelijkheid en zonder JavaScript. */
.niveaubalken {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 60px;
}

.niveaubalk {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 34px;
  height: 100%;
}

.niveaubalk__vulling {
  width: 100%;
  background: var(--pf-groen);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.niveaubalk__label {
  font-size: 11px;
  color: var(--tekst-vaag);
  line-height: 1.4;
}

/* ---- verzendlijst: uitkomst van de adrescontrole (PDOK) ---- */
.adres-ok   { color: var(--groen); white-space: nowrap; }
.adres-fout { color: var(--oranje); font-weight: 600; white-space: nowrap; }

/* Verzendlijst: het adres is zelf de knop; aanklikken klapt het formulier eronder open. */
.adresvak > summary { list-style: none; cursor: pointer; border-bottom: 1px dashed transparent; display: inline; }
.adresvak > summary::-webkit-details-marker { display: none; }
.adresvak > summary:hover { border-bottom-color: currentColor; }
.adresvak[open] > summary { font-weight: 600; }
.adresvak form { margin-top: 10px; min-width: 220px; }
.adresvak .veld { margin-bottom: 8px; }
.adresvak__rij { display: grid; grid-template-columns: 90px 1fr; gap: 0 8px; }

/* ---- voornamen: net als voornamen.asp één smal kaartje, zodat het op de telefoon werkt ---- */
.voornamen { max-width: 400px; }
.voornamen .tabel { max-width: 400px; }
.voornamen__gegeven { display: flex; flex-direction: column; margin-bottom: 12px; }
.voornamen__gegeven .label { font-size: 12.5px; }
.voornamen__email { overflow-wrap: anywhere; }
.voornamen .veld input[type=text] { width: 12em; font-size: 16px; } /* 16px: geen inzoomen op iOS */
.voornamen__keuzes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.voornamen__opslaan { padding-top: 9px; padding-bottom: 9px; }

/* ---- thumbnail uploaden op de videopagina: sleepvak en snijkader (js/thumbnailupload.js) ---- */
.thumbupload { margin-top: 12px; max-width: 640px; }
.thumbupload [hidden] { display: none !important; }  /* anders wint display: flex van het sleepvak */
.thumbupload__zone {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px; border: 2px dashed var(--rand-sterk); border-radius: var(--radius);
  background: var(--vlak-zacht); color: var(--tekst-zacht); font-size: 12.5px;
  text-align: center; cursor: pointer;
}
.thumbupload__zone strong { color: var(--tekst); font-size: 13.5px; }
.thumbupload__zone:hover, .thumbupload__zone.is-erboven { border-color: var(--pf-blauw); background: var(--pf-blauw-licht); }
.thumbupload__zone.is-bezig { opacity: .6; pointer-events: none; }
.thumbupload__bestand { display: none; }
.thumbupload__vlak { position: relative; display: inline-block; line-height: 0; overflow: hidden; border-radius: var(--radius-klein); user-select: none; }
.thumbupload__beeld { max-width: 100%; max-height: 60vh; display: block; }
.thumbupload__kader {
  position: absolute; box-sizing: border-box; cursor: move; touch-action: none;
  border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
}
.thumbupload__hoek {
  position: absolute; width: 14px; height: 14px; background: #fff;
  border: 1px solid var(--pf-blauw); border-radius: 2px;
}
.thumbupload__hoek[data-hoek=lb] { left: -2px;  top: -2px;    cursor: nwse-resize; }
.thumbupload__hoek[data-hoek=rb] { right: -2px; top: -2px;    cursor: nesw-resize; }
.thumbupload__hoek[data-hoek=lo] { left: -2px;  bottom: -2px; cursor: nesw-resize; }
.thumbupload__hoek[data-hoek=ro] { right: -2px; bottom: -2px; cursor: nwse-resize; }
.thumbupload__melding { margin-top: 10px; }

/* ---- foto in een mailing: sleepvak onder het bericht, en het bericht zelf als sleepdoel (js/mailafbeelding.js) ---- */
.mailafbeelding { margin: 8px 0 12px 0; max-width: 700px; }
.mailafbeelding [hidden] { display: none !important; }
.mailafbeelding__zone { padding: 12px; }
.mailafbeelding__melding { margin-top: 8px; }
textarea.is-erboven { outline: 2px dashed var(--pf-blauw); outline-offset: 2px; }

/* ---- AI-hulp en live voorbeeld op het opstelscherm van een mailing (js/mailai.js, js/mailvoorbeeld.js) ---- */
.mailai { margin: 8px 0 4px 0; max-width: 700px; }
.mailai [hidden] { display: none !important; }
.mailai .aisuggestie__resultaat { margin-top: 10px; }
.mailai .knoprij { margin-top: 12px; }
.mailai--bericht { margin-top: 12px; }
.mail-voorbeeld.is-verouderd { opacity: .5; }

/* ---- AI-suggestie op de videopagina: voorstel per veld met een knop om over te nemen (js/aisuggestie.js) ---- */
.aisuggestie { margin: 4px 0 18px 0; max-width: 640px; }
.aisuggestie [hidden] { display: none !important; }
.aisuggestie__resultaat { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--vlak-zacht); }
.aisuggestie__resultaat > .melding { margin: 0; }
.aisuggestie__rij { padding: 8px 0; border-bottom: 1px solid var(--rand); }
.aisuggestie__rij:first-child { padding-top: 0; }
.aisuggestie__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.aisuggestie__lengte { font-size: 11.5px; color: var(--tekst-vaag); margin-right: auto; }
.aisuggestie__tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.aisuggestie .knoprij { margin-top: 12px; }

/* ------------------------------------------------------------------ contractsjablonen */
/* De editor op /contracten/sjablonen/{id}: per partij, veld of artikel één regel met knoppen
   erachter. Geen .veld, want daar worden invoervelden en keuzelijsten 100% breed. */
.kaart__kop { margin: 0 0 12px 0; font-size: 15px; }
.contractregel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.contractregel input[type=text] { width: 260px; }
.contractregel select { width: auto; min-width: 130px; }
.contractregel label { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; }
.contractregel code { font-size: 12px; color: var(--tekst-zacht); }