/* ════════════════════════════════════════════════════════════════════════
 *  public/css/beheer.css  —  Stijlen voor de beheerpagina (beheerderspagina.html)
 * ════════════════════════════════════════════════════════════════════════ */

:root {
  --groen:       #2c3e2d;
  --groen-mid:   #4a6741;
  --groen-licht: #eef5ee;
  --accent:      #3d7a3d;
  --bg:          #f4f1eb;
  --wit:         #ffffff;
  --rand:        #ddd;
  --tekst:       #333;
  --rood:        #c0392b;
  --rood-licht:  #fdecea;
  --oranje:      #e67e22;
  --header-bg:   #2c3e2d;
  --header-fg:   #e8e0d0;
  --tabel-hoofd: #2c3e2d;
  --rij-hover:   #f0f4f0;
  --stats-bg:    #f8f5ef;
  --toolbar-bg:  #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  color: var(--tekst);
}

/* ── Login ── */
#login-scherm {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a271a 0%, #2c3e2d 60%, #4a6741 100%);
}
.login-kaart {
  background: #fff; border-radius: 18px;
  padding: 44px 40px 36px; width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35); text-align: center;
}
.login-logo { font-size: 2.8rem; margin-bottom: 10px; }
.login-kaart h1 { font-size: 1.15rem; color: #2c3e2d; margin-bottom: 4px; }
.login-kaart p  { font-size: 0.8rem; color: #888; margin-bottom: 28px; }
.login-kaart label {
  display: block; text-align: left;
  font-size: 0.82rem; font-weight: 600;
  color: #2c3e2d; margin-bottom: 5px;
}
.login-kaart input[type="password"] {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid #ddd; border-radius: 8px;
  font-size: 0.95rem; outline: none;
  transition: border-color 0.2s; margin-bottom: 18px;
}
.login-kaart input[type="password"]:focus { border-color: #3d7a3d; }
#login-fout {
  display: none; background: #fdecea; color: #c0392b;
  border-radius: 7px; padding: 8px 12px;
  font-size: 0.82rem; margin-bottom: 14px;
}
.btn-login {
  width: 100%; padding: 11px;
  background: #2c3e2d; color: #e8e0d0;
  border: none; border-radius: 9px;
  font-size: 0.97rem; font-weight: 700;
  cursor: pointer; transition: background 0.2s;
}
.btn-login:hover:not(:disabled) { background: #4a6741; }
.btn-login:disabled { opacity: 0.6; cursor: default; }

/* ── Admin-scherm ── */
#admin-scherm { display: flex; flex-direction: column; min-height: 100vh; }

header {
  background: var(--header-bg); color: var(--header-fg);
  padding: 12px 24px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
header h1 { font-size: 1.08rem; font-weight: 700; }
header span.sub { font-size: 0.78rem; opacity: 0.65; }
.header-acties { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.btn {
  padding: 7px 16px; border: none; border-radius: 8px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: background 0.18s; display: inline-flex;
  align-items: center; gap: 5px; white-space: nowrap;
}
.btn-wit    { background: rgba(255,255,255,0.15); color: var(--header-fg); }
.btn-wit:hover { background: rgba(255,255,255,0.28); }
.btn-export { background: #e8f0e8; color: #1a5c1a; border: 1.5px solid #b0d4b0; }
.btn-export:hover { background: #d0e8d0; }

/* ── Stats dashboard ── */
#stats-dashboard {
  background: #eef2ee;
  border-bottom: 1px solid #d8e0d8;
  padding: 14px 24px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.stats-kaart {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8e2;
  padding: 10px 14px;
  min-width: 120px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left-width: 3px;
  border-left-style: solid;
}

.stats-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.stats-getal {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #2d3748;
}
.stats-getal-klein {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a5568;
  line-height: 1.5;
}
.stats-label {
  font-size: 0.68rem;
  color: #718096;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stats-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sb-rood   { background: #fff0f0; color: #9b2c2c; }
.sb-oranje { background: #fff3e6; color: #7b341e; }

/* Gekleurde linker zijstreep */
.sk-blauw  { border-left-color: #3182ce; }
.sk-groen  { border-left-color: #38a169; }
.sk-oranje { border-left-color: #dd6b20; }
.sk-rood   { border-left-color: #e53e3e; }
.sk-grijs  { border-left-color: #a0aec0; }

/* ── Server banner ── */
#server-banner {
  display: none; background: #fff3cd;
  border-bottom: 2px solid #f0a500;
  color: #7a4e00; padding: 10px 24px;
  font-size: 0.85rem; align-items: center; gap: 10px;
}
#server-banner.zichtbaar { display: flex; }
#server-banner code {
  background: rgba(0,0,0,0.08); padding: 2px 7px;
  border-radius: 5px; font-family: monospace;
}

/* ── Toolbar ── */
.toolbar {
  background: var(--toolbar-bg); border-bottom: 1px solid var(--rand);
  padding: 10px 24px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.toolbar input[type="text"], .toolbar select {
  padding: 7px 13px; border: 1.5px solid var(--rand);
  border-radius: 8px; font-size: 0.86rem; outline: none;
  transition: border-color 0.2s;
  background: var(--wit); color: var(--tekst);
}
.toolbar input[type="text"] { width: 240px; }
.toolbar input[type="text"]:focus,
.toolbar select:focus { border-color: var(--accent); }
.toolbar select { cursor: pointer; }
.toolbar-sep { width: 1px; height: 24px; background: var(--rand); flex-shrink: 0; }

.badge {
  background: var(--groen-licht); color: var(--groen);
  border-radius: 20px; padding: 4px 12px;
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}

/* Toggle schakelaar */
.toggle-wrap { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--tekst); cursor: pointer; }
.toggle { position: relative; display: inline-block; width: 34px; height: 19px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #ccc; border-radius: 19px; transition: background 0.2s;
}
.toggle-slider::before {
  content: ""; position: absolute;
  height: 14px; width: 14px; left: 3px; bottom: 2.5px;
  background: white; border-radius: 50%; transition: transform 0.2s;
}
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(15px); }

/* ── Tabel ── */
.tabel-wrapper { flex: 1; overflow: auto; padding: 16px 24px 24px; }

table {
  width: 100%; border-collapse: collapse;
  background: var(--wit); border-radius: 12px;
  overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  min-width: 1200px;
}
thead tr { background: var(--tabel-hoofd); color: #e8e0d0; }
thead th {
  padding: 11px 10px; text-align: left;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.4px; white-space: nowrap;
}
thead th.sorteerbaar { cursor: pointer; user-select: none; }
thead th.sorteerbaar:hover { background: var(--groen-mid); }
thead th .sort-pijl { opacity: 0.5; font-size: 0.7rem; margin-left: 3px; }
thead th.actief .sort-pijl { opacity: 1; }

tbody tr {
  border-bottom: 1px solid var(--rand);
  transition: background 0.1s;
  cursor: pointer;
}
tbody tr:hover { background: var(--rij-hover); }
tbody td { padding: 8px 10px; font-size: 0.83rem; vertical-align: middle; }
td.graf-id { font-family: monospace; font-size: 0.78rem; color: #888; white-space: nowrap; }

/* Type badges */
.type-badge {
  display: inline-block; padding: 2px 9px;
  border-radius: 12px; font-size: 0.71rem; font-weight: 700;
}
.tb-Grafzerk    { background: #e8f0ff; color: #2c4ea0; }
.tb-Columbarium { background: #f0f5d0; color: #5a6a00; }
.tb-Urnenveld, .tb-Urneveld { background: #fff0e8; color: #a05c2c; }
.tb-Kindergraf  { background: #ffe8f0; color: #a02c6a; }
.tb-Strooiweide { background: #e8f8e8; color: #1a6a1a; }

/* Staat graf badges */
.staat-badge {
  display: inline-block; padding: 2px 10px;
  border-radius: 12px; font-size: 0.72rem; font-weight: 700;
}
.staat-goed   { background: #e8f5e9; color: #2e7d32; }
.staat-matig  { background: #fff3e0; color: #e65100; }
.staat-slecht { background: #ffebee; color: #b71c1c; }
.staat-leeg   { background: #f5f5f5; color: #bdbdbd; font-style: italic; font-weight: 400; }

/* Concessie datum */
.concessie-bijna    { color: var(--oranje); font-weight: 600; }
.concessie-verlopen { color: var(--rood);   font-weight: 600; }

/* Afgekapte tekst */
.cel-afkap {
  max-width: 130px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; display: block;
}

/* Acties kolom */
.td-acties { white-space: nowrap; }
.btn-rij {
  background: none; border: none; cursor: pointer;
  font-size: 0.8rem; padding: 4px 7px; border-radius: 6px;
  transition: background 0.15s; color: #888;
}
.btn-rij:hover { background: var(--groen-licht); color: var(--groen); }

/* ── Paginering ── */
#paginering {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 24px;
  background: var(--toolbar-bg); border-top: 1px solid var(--rand);
  flex-wrap: wrap;
}
.pagina-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1.5px solid var(--rand); border-radius: 7px;
  background: var(--wit); color: var(--tekst);
  font-size: 0.82rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.pagina-btn:hover:not(:disabled) { background: var(--groen-licht); border-color: var(--accent); }
.pagina-btn:disabled { opacity: 0.35; cursor: default; }
.pagina-btn.actief { background: var(--groen); color: #e8e0d0; border-color: var(--groen); font-weight: 700; }
#pagina-info { font-size: 0.82rem; color: #888; padding: 0 4px; white-space: nowrap; }

/* ── Lege staat ── */
#geen-resultaten {
  display: none; text-align: center;
  padding: 48px; color: #aaa; font-size: 0.9rem;
}

/* ── Toast ── */
#toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 9000; background: rgba(30,46,30,0.92); color: #e8e0d0;
  padding: 9px 22px; border-radius: 22px; font-size: 0.84rem;
  pointer-events: none; opacity: 0; transition: opacity 0.35s;
  white-space: nowrap; backdrop-filter: blur(6px);
}
#toast.zichtbaar { opacity: 1; }
#toast.fout { background: rgba(197,48,48,0.92); }

/* ── Bevestigings-modal ── */
#bevestig-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.45); z-index: 8000;
  align-items: center; justify-content: center;
}
#bevestig-overlay.open { display: flex; }
.bevestig-kaart {
  background: var(--wit); border-radius: 16px;
  padding: 32px 28px 24px; max-width: 400px; width: 90%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.30);
}
.bevestig-kaart h2 { font-size: 1.05rem; color: var(--groen); margin-bottom: 10px; }
.bevestig-kaart p  { font-size: 0.88rem; color: #555; margin-bottom: 22px; line-height: 1.5; }
.modal-knoppen { display: flex; gap: 10px; justify-content: flex-end; }
.btn-groen { background: var(--groen-licht); color: var(--groen); border: none; border-radius: 8px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.btn-groen:hover { background: #d6ecd6; }
.btn-rood  { background: var(--rood-licht);  color: var(--rood);  border: none; border-radius: 8px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.btn-rood:hover  { background: #f5c6c1; }

/* ── Detail modal ── */
#detail-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.50); z-index: 8500;
  align-items: flex-start; justify-content: center;
  padding: 40px 16px 24px; overflow-y: auto;
}
#detail-overlay.open { display: flex; }
.detail-kaart {
  background: var(--wit); border-radius: 16px;
  padding: 28px 28px 24px; width: 100%; max-width: 640px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.30);
  position: relative; flex-shrink: 0;
}
.detail-kaart h2 {
  font-size: 1.05rem; color: var(--groen);
  margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.detail-sub { font-size: 0.78rem; color: #999; margin-bottom: 20px; }
.detail-sluit {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 1.3rem;
  color: #aaa; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: background 0.15s, color 0.15s;
}
.detail-sluit:hover { background: var(--rood-licht); color: var(--rood); }

.detail-sectie { border-top: 1px solid var(--rand); padding-top: 14px; margin-top: 14px; }
.detail-sectie-titel {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #999; margin-bottom: 12px;
}
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.detail-grid.breed { grid-template-columns: 1fr; }
.detail-veld { display: flex; flex-direction: column; gap: 4px; }
.detail-veld label { font-size: 0.75rem; font-weight: 600; color: #555; }
.detail-veld input, .detail-veld select, .detail-veld textarea {
  padding: 7px 10px; border: 1.5px solid var(--rand); border-radius: 8px;
  font-size: 0.86rem; font-family: inherit;
  background: var(--wit); color: var(--tekst); outline: none;
  transition: border-color 0.15s;
}
.detail-veld input:focus,
.detail-veld select:focus,
.detail-veld textarea:focus { border-color: var(--accent); }
.detail-veld input.lees-alleen {
  background: #f7f7f7; color: #888; cursor: default;
}
.detail-veld textarea { resize: vertical; min-height: 64px; }

#detail-fout {
  display: none; background: var(--rood-licht); color: var(--rood);
  border-radius: 7px; padding: 8px 12px; font-size: 0.82rem; margin-top: 4px;
}

.detail-acties {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 20px; gap: 10px; flex-wrap: wrap;
}
.detail-acties-links { display: flex; gap: 8px; }
.btn-detail-kaart {
  padding: 8px 16px; background: var(--groen-licht);
  color: var(--groen); border: 1.5px solid #a0c8a0;
  border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: background 0.18s;
}
.btn-detail-kaart:hover { background: #d0ecd0; }
.btn-detail-verwijder {
  padding: 8px 16px; background: var(--rood-licht);
  color: var(--rood); border: 1.5px solid #e0b0aa;
  border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: background 0.18s;
}
.btn-detail-verwijder:hover { background: #f5c6c1; }
.btn-detail-opslaan {
  padding: 8px 18px; background: var(--groen); color: #e8e0d0;
  border: none; border-radius: 8px;
  font-size: 0.86rem; font-weight: 700;
  cursor: pointer; transition: background 0.18s, opacity 0.15s;
}
.btn-detail-opslaan:hover:not(:disabled) { background: var(--groen-mid); }
.btn-detail-opslaan:disabled { opacity: 0.6; cursor: default; }

/* ── Sneltoetsen hint ── */
#sneltoetsen-hint {
  position: fixed; bottom: 16px; right: 16px;
  background: rgba(0,0,0,0.55); color: #e8e0d0;
  border-radius: 10px; padding: 8px 14px;
  font-size: 0.72rem; line-height: 1.8;
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s; backdrop-filter: blur(6px); z-index: 500;
}
#sneltoetsen-hint.zichtbaar { opacity: 1; }
#sneltoetsen-hint kbd {
  background: rgba(255,255,255,0.2); padding: 1px 5px;
  border-radius: 4px; font-size: 0.7rem;
}

/* ── Responsive ── */
@media (max-width: 680px) {

  /* Header */
  header { padding: 10px 14px; gap: 8px; }
  header h1 { font-size: 0.94rem; }
  header span.sub { display: none; }
  .header-acties { gap: 6px; flex-wrap: wrap; }
  .btn { padding: 6px 11px; font-size: 0.78rem; }

  /* Stats-dashboard: 2-kolommen grid */
  #stats-dashboard {
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .stats-kaart  { min-width: auto; padding: 8px 10px; }
  .stats-getal  { font-size: 1.25rem; }
  .stats-label  { font-size: 0.62rem; }

  /* Toolbar: stapelen */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .toolbar input[type="text"] { width: 100%; }
  .toolbar select { width: 100%; }
  .toolbar-sep { display: none; }
  .toggle-wrap  { align-self: flex-start; }
  .badge        { align-self: flex-start; }

  /* Tabel: horizontaal scroll met iets kleinere minimumbreedte */
  .tabel-wrapper { padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 860px; }

  /* Detail modal: volle breedte, minder padding */
  #detail-overlay { padding: 16px 8px 16px; }
  .detail-kaart { padding: 20px 16px; }
  .detail-rijen  { grid-template-columns: 1fr; }
  .modal-knoppen { flex-direction: column; gap: 8px; }
  .modal-knoppen button { width: 100%; }
}

/* ═══ LOGIN OVERLAY ══════════════════════════════════════════════════ */
#admin-login-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
#admin-login-overlay[style*="flex"] { display: flex !important; }
.alo-kaart {
  background: #fff; border-radius: 16px;
  padding: 36px 32px 28px; width: 340px; max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.alo-logo  { font-size: 2.6rem; line-height: 1; }
.alo-titel { font-size: 1.15rem; font-weight: 700; margin: 0; color: #1a1a2e; text-align: center; }
.alo-sub   { font-size: 0.8rem; color: #666; margin: 0 0 6px; text-align: center; }
.alo-label { font-size: 0.83rem; font-weight: 600; color: #444; align-self: flex-start; }
.alo-kaart input[type=password] {
  width: 100%; padding: 10px 13px; border: 1.5px solid #ddd;
  border-radius: 9px; font-size: 0.95rem; outline: none; transition: border-color 0.2s;
}
.alo-kaart input[type=password]:focus { border-color: #2563eb; }
.alo-fout  { font-size: 0.8rem; color: #dc2626; min-height: 18px; align-self: flex-start; }
#alp-btn {
  width: 100%; padding: 11px; background: #1a1a2e; color: #fff;
  border: none; border-radius: 9px; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: background 0.18s; margin-top: 4px;
}
#alp-btn:hover:not(:disabled) { background: #2d2d4e; }
#alp-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.alo-annuleer {
  background: none; border: none; color: #888; font-size: 0.85rem;
  cursor: pointer; padding: 4px 8px; margin-top: 2px; text-decoration: none;
}

/* ── Medeoverledenen sectie ──────────────────────────────────────────────── */
.mede-teller { font-weight: 400; color: #999; margin-left: 4px; }

.mede-laden, .mede-leeg {
  font-size: 0.82rem; color: #aaa; padding: 6px 0;
}

.mede-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: #f7f9f7;
  border: 1px solid #e2e8e2;
  border-radius: 8px;
  margin-bottom: 6px;
  gap: 8px;
}

.mede-rij-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mede-naam  { font-size: 0.88rem; font-weight: 600; color: #2d3748; }
.mede-jaren { font-size: 0.76rem; color: #718096; }

.mede-rij-acties { display: flex; gap: 4px; flex-shrink: 0; }
.btn-mede-bewerk, .btn-mede-verwijder {
  background: none; border: 1px solid #e2e8e2; border-radius: 6px;
  padding: 3px 7px; font-size: 0.8rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-mede-bewerk:hover   { background: #eef2ee; border-color: #b8d4b8; }
.btn-mede-verwijder:hover { background: #fff0f0; border-color: #feb2b2; }

.btn-mede-toevoegen {
  margin-top: 6px;
  padding: 7px 14px;
  background: #f0f7f0;
  border: 1.5px solid #b8d4b8;
  border-radius: 7px;
  font-size: 0.83rem;
  color: #2d6a2d;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-mede-toevoegen:hover { background: #ddf0dd; border-color: #7ab87a; }

/* ── Mede-formulier (inline in detail modal) ──────────────────────── */
.mede-formulier {
  background: #f8fdf8;
  border: 1.5px solid #c8e0c8;
  border-radius: 10px;
  padding: 12px 14px 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mede-formulier-titel {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2d5a2d;
  margin-bottom: 2px;
}
.mede-form-rij {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mede-form-rij label {
  font-size: 0.78rem;
  color: #555;
  font-weight: 600;
}
.mede-form-rij input, .mede-form-rij textarea {
  padding: 6px 9px;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s;
}
.mede-form-rij input:focus, .mede-form-rij textarea:focus { border-color: #3a6340; }
.mede-form-acties {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.btn-mede-sla-op {
  background: #3a6340; color: #fff; border: none;
  padding: 6px 14px; border-radius: 6px; font-size: 0.83rem;
  cursor: pointer; transition: background 0.15s;
}
.btn-mede-sla-op:hover { background: #2c4a2c; }
.btn-mede-annuleer {
  background: none; border: 1.5px solid #ccc;
  padding: 6px 12px; border-radius: 6px; font-size: 0.83rem;
  color: #666; cursor: pointer; transition: background 0.15s;
}
.btn-mede-annuleer:hover { background: #f0f0f0; }
.mede-fout { color: #c53030; font-size: 0.8rem; }

/* ── Nieuw-modal ── */
.btn-nieuw {
  background: var(--groen);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-nieuw:hover { background: var(--groen-mid); }

#nieuw-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.50); z-index: 9000;
  align-items: flex-start; justify-content: center;
  padding: 60px 16px 32px; overflow-y: auto;
}
#nieuw-overlay.open { display: flex; }

.nieuw-kaart {
  background: var(--wit); border-radius: 16px;
  padding: 32px 28px 28px; width: 100%; max-width: 540px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.30);
  position: relative;
}
.nieuw-kaart h2 {
  font-size: 1.1rem; color: var(--groen);
  margin: 0 0 6px 0;
}
.nieuw-kaart > p {
  font-size: 0.88rem; color: #666;
  margin: 0 0 22px 0;
}
.nieuw-optie-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nieuw-optie-grid.uitgevouwen {
  grid-template-columns: 1fr;
}
.nieuw-optie-kaart {
  border: 2px solid #d4e6d4;
  border-radius: 12px;
  padding: 18px 16px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.nieuw-optie-kaart:hover {
  border-color: var(--groen-mid);
  background: #f4faf4;
}
.nieuw-optie-kaart.actief {
  border-color: var(--groen);
  background: #eef6ee;
}
.nieuw-optie-icoon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.nieuw-optie-titel {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--groen);
  margin-bottom: 5px;
}
.nieuw-optie-omschrijving {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.45;
}

/* Uitklapbare lege-graven sectie */
#lege-graven-sectie {
  margin-top: 14px;
  border-top: 1.5px solid #d4e6d4;
  padding-top: 12px;
}
.lege-graven-zoek {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #c8e0c8;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 0.85rem;
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.15s;
}
.lege-graven-zoek:focus { border-color: var(--groen-mid); }
.lege-graven-lijst {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lege-graf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 0.85rem;
}
.lege-graf-item:hover { background: var(--groen-licht); }
.lege-graf-type { flex-shrink: 0; }
.lege-graf-id { color: #333; font-weight: 600; }
.lege-graf-info { color: #888; font-size: 0.78rem; margin-left: auto; }
.lege-graven-leeg {
  text-align: center; color: #999;
  font-size: 0.85rem; padding: 20px 0;
}
.lege-graven-laden {
  text-align: center; color: #aaa;
  font-size: 0.85rem; padding: 14px 0;
}
@media (max-width: 540px) {
  .nieuw-optie-grid { grid-template-columns: 1fr; }
  .nieuw-kaart { padding: 24px 16px 20px; }
}

/* ── Mail-log sectie ── */
.mail-log-rij {
  display: grid;
  grid-template-columns: 130px 90px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 0.82rem;
  margin-bottom: 3px;
  background: #f9fbf9;
  border: 1px solid #e4ede4;
}
.mail-log-rij:hover { background: #f0f7f0; }
.mail-log-datum { color: #555; font-size: 0.78rem; }
.mail-log-type {
  color: #fff;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.73rem;
  font-weight: 600;
  text-align: center;
}
.mail-log-email { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-ok   { color: #2c7a2c; font-size: 0.78rem; white-space: nowrap; }
.mail-fout {
  color: #c53030;
  font-size: 0.75rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}
@media (max-width: 540px) {
  .mail-log-rij { grid-template-columns: 1fr 1fr; }
}

/* ── Mail preview knop ─────────────────────────────────────────── */
.mail-preview-knop {
  background: none;
  border: 1px solid #c8d9c8;
  border-radius: 5px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #2c5282;
  transition: background 0.15s;
  line-height: 1.4;
}
.mail-preview-knop:hover {
  background: #e8f0ff;
  border-color: #2c5282;
}