/* Voorkeuren. De vk-kaarten/velden/preview worden ook door Mijn profiel gebruikt
   (mijn-profiel.js + mijn-profiel.css). Vlakke kaarten, 1px-randen (huisstijl). */
.vk-kaart {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 14px;
  max-width: 640px;
}
.vk-kaart__titel { margin: 0 0 10px; font-size: 1rem; color: var(--blue-700); }

.vk-preview {
  padding: 14px 16px;
  background: var(--bg-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-900);
}
.vk-preview__leeg { color: var(--muted); font-style: italic; }

.vk-veld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.vk-veld > span { font-size: .8rem; font-weight: 600; color: var(--ink-900); }
.vk-veld input,
.vk-veld textarea {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .9rem;
  color: var(--ink-900);
  background: var(--paper);
  resize: vertical;
}
.vk-veld input:focus,
.vk-veld textarea:focus { outline: 2px solid var(--blue-100); outline-offset: 0; border-color: var(--blue-700); }
/* Label LINKS van de invoer (bespaart verticale ruimte). Een tekstveld (textarea, bv.
   het sjabloon) blijft volle breedte (kolom). */
.vk-veld { flex-direction: row; align-items: center; gap: 12px; }
.vk-veld > span { flex: 0 0 104px; text-align: left; }
.vk-veld > input,
.vk-veld > textarea { flex: 1 1 auto; min-width: 0; }
.vk-veld:has(textarea) { flex-direction: column; align-items: stretch; }
.vk-veld:has(textarea) > span { flex: none; text-align: left; }
.vk-veld__uitleg { margin: 0 0 10px; font-size: .82rem; color: var(--muted); }
.vk-veld__uitleg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82em;
  background: var(--bg-50);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
}

.vk-balk { display: flex; align-items: center; gap: 12px; }
.vk-status { font-size: .85rem; color: var(--muted); }

/* Radiogroep (Lijstweergave, Tekengrootte): keuzes naast elkaar, status erachter. */
.vk-keuze { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vk-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  cursor: pointer;
}
.vk-radio input { accent-color: var(--blue-700); }

/* Standaardregel onder de tekengrootte-keuze: toont of je een eigen keuze hebt
   of de organisatiestandaard volgt, met een lichte knop om terug te keren. */
.vk-standaardbalk {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: .82rem;
  color: var(--muted);
}
.vk-standaardbalk .btn { padding: 6px 12px; font-size: .82rem; }
/* De "Organisatiestandaard volgen"-knop (licht, blauwe tekst). Op .vk-standaardbalk
   gescoped zodat hij ook werkt in de Voorkeuren-kaart die nu de globale .inst-kaart
   gebruikt (i.p.v. .vk-kaart). Mijn profiel hergebruikt .vk-kaart maar geen .btn--licht. */
.vk-standaardbalk .btn--licht {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--blue-700);
}
.vk-standaardbalk .btn--licht:hover:not(:disabled) { background: var(--blue-100); }

/* ---- E-mailhandtekeningen (F4.18) ------------------------------------------
   Lijst van persoonlijke handtekeningen met per rij bewerk-/hernoem-/verwijder-
   knoppen, een editorvak (richteksteditor) en de standaardkeuze per situatie.
   Vlak: dunne 1px-scheidingslijnen, geen accentbalk. */
/* Werkbalk boven de lijst: de primaire actie "Nieuwe handtekening" (globale
   .btn-actie--primair), op dezelfde plek/stijl als de "Nieuw"-actie in de
   listgrid-werkbalk. Zo staat de knop nooit meer tussen de lijst en het
   editorvak. */
.vk-ht-bar { margin-bottom: 12px; }
.vk-ht-lijst { display: flex; flex-direction: column; margin-bottom: 10px; }
.vk-ht-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
}
.vk-ht-rij:first-child { border-top: 1px solid var(--line); }
.vk-ht-naam {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vk-ht-acties { display: inline-flex; gap: 6px; flex: none; }
.vk-ht-acties .btn-ico { width: 30px; height: 30px; }
.vk-ht-leeg { margin: 0 0 10px; font-size: .85rem; color: var(--muted); font-style: italic; }

/* Alleen-lezen weergave (B-93): elke rij is een klikbare knop (de hele rij) die
   de handtekening eronder alleen-lezen toont; geen bewerkacties. Reset alleen de
   knop-defaults; uiterlijk komt van de gedeelde .vk-ht-rij + tokens. */
.vk-ht-rij--lezen {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.vk-ht-rij--lezen:hover { background: var(--bg-50); }
.vk-ht-rij--lezen[aria-pressed="true"] { background: var(--blue-100); }
.vk-ht-rij--lezen:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.vk-ht-rij__bekijk { display: inline-flex; flex: none; color: var(--muted); }
.vk-ht-rij__bekijk svg { width: 16px; height: 16px; transition: transform .15s ease; }
.vk-ht-rij--lezen[aria-pressed="true"] .vk-ht-rij__bekijk svg { transform: rotate(180deg); }
.vk-ht-preview { margin-top: 12px; }
.vk-ht-readonly { margin: 12px 0 0; font-size: .82rem; color: var(--muted); }

/* Editorvak: licht vlak met volledige 1px-rand (geen accentbalk). */
.vk-ht-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 2px;
  padding: 12px;
  background: var(--bg-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.vk-ht-editor[hidden] { display: none; }
/* Kop van het editorvak: maakt onmiskenbaar of je een nieuwe handtekening maakt
   of een bestaande bewerkt. */
.vk-ht-editor__titel { font-size: .92rem; font-weight: 600; color: var(--blue-700); }
.vk-ht-editor .vk-veld { margin-bottom: 0; }
.vk-ht-editor .vk-veld > span { flex: 0 0 60px; }
.vk-ht-editorvak { flex-direction: column; align-items: stretch; }
.vk-ht-editorvak > span { flex: none; }
.vk-ht-editor .rte { background: var(--paper); }

/* Standaardkeuze per situatie (nieuw bericht versus antwoord/doorsturen). */
.vk-ht-standaards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vk-ht-standaards .vk-veld { margin-bottom: 0; }
.vk-ht-standaards .vk-veld > span { flex: 0 0 190px; }
.vk-ht-standaards select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .9rem;
  color: var(--ink-900);
  background: var(--paper);
}
.vk-ht-standaards select:focus { outline: 2px solid var(--blue-100); outline-offset: 0; border-color: var(--blue-700); }