/* ═══════════════════════════════════════════════════════════════
   MdeS v2 — Klassiek perkament

   Kleuren en typografie zijn overgenomen uit de oude app
   (projects/mdes/Styles.html), zodat de familie geen nieuwe app
   voor zich ziet maar dezelfde, alleen sneller.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --perkament-licht: #f4e8c1;
  --perkament-mid: #e8d5a3;
  --perkament-donker: #d4c08a;
  --tekst: #3c2415;
  --tekst-zacht: #6b5240;
  --rood: #8b1a1a;
  --goud: #c4a35a;
  --goud-licht: #d4b76a;
  --zijbalk: #2c1810;
  --zijbalk-tekst: #e8d5a3;
  --rand: #c4a35a44;
  --schaduw: 0 2px 8px rgba(60, 36, 21, 0.15);
  --straal: 6px;
  --kop: 'Cormorant Garamond', Georgia, serif;
  --lopend: 'Crimson Text', Georgia, serif;
}

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

body {
  font-family: var(--lopend);
  font-size: 16px;
  color: var(--tekst);
  background: var(--perkament-licht);
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--kop); font-weight: 600; }
a { color: var(--rood); text-decoration: none; }
a:hover { text-decoration: underline; }
.verborgen { display: none !important; }

/* ─── Inloggen ─────────────────────────────────────────────── */

#inlogscherm {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--perkament-licht) 0%, var(--perkament-mid) 100%);
  padding: 20px;
}

.inlogkaart {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--straal);
  box-shadow: var(--schaduw); padding: 44px 40px; width: 100%; max-width: 420px;
}
.inlogkaart h1 { font-size: 25px; text-align: center; }
.wapen { font-size: 46px; color: var(--goud); text-align: center; line-height: 1; }
.ondertitel {
  text-align: center; color: var(--tekst-zacht); font-style: italic;
  font-size: 15px; margin: 4px 0 28px;
}

label { display: block; font-size: 14px; color: var(--tekst-zacht); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=search], select {
  width: 100%; padding: 10px 12px; font-family: var(--lopend); font-size: 16px;
  color: var(--tekst); background: #fffdf7;
  border: 1px solid var(--perkament-donker); border-radius: var(--straal);
}
input:focus, select:focus { outline: 2px solid var(--goud); outline-offset: -1px; }
.veld { margin-bottom: 16px; }

button {
  font-family: var(--lopend); font-size: 16px; cursor: pointer;
  padding: 10px 18px; border-radius: var(--straal);
  border: 1px solid var(--rood); background: var(--rood); color: #fff;
}
button:hover:not(:disabled) { background: #741616; }
button:disabled { opacity: .5; cursor: default; }
button.stil { background: transparent; color: var(--rood); border-color: var(--perkament-donker); }
button.stil:hover:not(:disabled) { background: var(--perkament-mid); }
.breed { width: 100%; }

.melding {
  padding: 10px 12px; border-radius: var(--straal); font-size: 15px; margin-bottom: 16px;
}
.melding.fout { background: #f8e0e0; border: 1px solid #d8a0a0; color: #7a1414; }
.melding.goed { background: #e4efdc; border: 1px solid #a8c496; color: #35521f; }
.melding.uitleg { background: var(--perkament-mid); border: 1px solid var(--rand); }

.codeveld {
  font-size: 26px !important; letter-spacing: 8px; text-align: center;
  font-family: var(--kop);
}

/* ─── Raamwerk ─────────────────────────────────────────────── */

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

#zijbalk {
  width: 232px; flex-shrink: 0; background: var(--zijbalk); color: var(--zijbalk-tekst);
  display: flex; flex-direction: column; padding: 22px 0;
}
#zijbalk .merk { padding: 0 22px 22px; border-bottom: 1px solid #ffffff1a; }
#zijbalk .merk .wapen { font-size: 30px; text-align: left; }
#zijbalk .merk h2 { font-size: 19px; line-height: 1.2; margin-top: 6px; }
#zijbalk .merk span { font-size: 13px; opacity: .65; font-style: italic; }

#zijbalk nav { padding: 14px 0; flex: 1; }
#zijbalk nav a {
  display: block; padding: 10px 22px; color: var(--zijbalk-tekst);
  font-size: 16px; border-left: 3px solid transparent;
}
#zijbalk nav a:hover { background: #ffffff0d; text-decoration: none; }
#zijbalk nav a.actief {
  background: #ffffff14; border-left-color: var(--goud); color: #fff;
}

#zijbalk .voet { padding: 16px 22px 0; border-top: 1px solid #ffffff1a; font-size: 14px; }
#zijbalk .voet .naam { color: #fff; }
#zijbalk .voet .rol { opacity: .6; font-size: 13px; }
#zijbalk .voet .punten { color: var(--goud); font-size: 13px; margin-top: 3px; min-height: 17px; }
#zijbalk .voet button {
  margin-top: 10px; padding: 5px 10px; font-size: 14px;
  background: transparent; border-color: #ffffff33; color: var(--zijbalk-tekst);
}
#zijbalk .voet button:hover { background: #ffffff14; }

#hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#inhoud { flex: 1; padding: 28px 32px; max-width: 1200px; width: 100%; }

.paginakop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.paginakop h1 { font-size: 28px; }
.paginakop .telling { color: var(--tekst-zacht); font-style: italic; }

/* ─── Meetstrip ────────────────────────────────────────────────
   De reden dat deze fase bestaat: laten zien dat het probleem weg
   is. Blijft staan zolang de oude app nog draait. */

.meetstrip {
  background: #fffdf7; border: 1px solid var(--rand); border-radius: var(--straal);
  padding: 9px 14px; margin-bottom: 20px; font-size: 14px; color: var(--tekst-zacht);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.meetstrip .nieuw { color: #35521f; font-weight: 600; }
.meetstrip .oud { text-decoration: line-through; opacity: .7; }
.meetstrip .factor { color: var(--rood); font-weight: 600; }
.meetstrip button { padding: 4px 10px; font-size: 13px; margin-left: auto; }

/* ─── Tabellen ─────────────────────────────────────────────── */

.kaart {
  background: #fffdf7; border: 1px solid var(--rand);
  border-radius: var(--straal); box-shadow: var(--schaduw); overflow: hidden;
}

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-family: var(--kop); font-size: 15px; font-weight: 600;
  padding: 11px 14px; background: var(--perkament-mid);
  border-bottom: 1px solid var(--rand); white-space: nowrap;
}
td { padding: 10px 14px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--perkament-licht); }
td.zacht { color: var(--tekst-zacht); font-size: 15px; }

.miniatuur {
  width: 44px; height: 44px; object-fit: cover; border-radius: 3px;
  border: 1px solid var(--rand); background: var(--perkament-mid); display: block;
}
.geen-miniatuur {
  width: 44px; height: 44px; border-radius: 3px; border: 1px dashed var(--perkament-donker);
  display: flex; align-items: center; justify-content: center;
  color: var(--perkament-donker); font-size: 18px;
}

.label {
  display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 13px;
  border: 1px solid var(--rand); background: var(--perkament-mid); white-space: nowrap;
}
.label.done { background: #e4efdc; border-color: #a8c496; color: #35521f; }
.label.error { background: #f8e0e0; border-color: #d8a0a0; color: #7a1414; }
.label.processing { background: #f2e6cd; }

/* ─── Bladeren ─────────────────────────────────────────────── */

.bladeren {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 16px; color: var(--tekst-zacht);
}
.bladeren button { padding: 6px 14px; }

.zoekbalk { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.zoekbalk input { max-width: 380px; }

/* ─── Documentpagina ───────────────────────────────────────── */

.twee-koloms { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; }
@media (max-width: 900px) { .twee-koloms { grid-template-columns: 1fr; } }

.scanhouder {
  background: var(--perkament-mid); border: 1px solid var(--rand);
  border-radius: var(--straal); overflow: hidden; position: sticky; top: 20px;
}
.scanhouder img { width: 100%; display: block; }
.scanhouder iframe { width: 100%; height: 78vh; border: 0; display: block; }
.scanhouder .leeg {
  padding: 48px 20px; text-align: center; color: var(--tekst-zacht); font-style: italic;
}

.blok { margin-bottom: 22px; }
.blok h3 {
  font-size: 19px; margin-bottom: 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--rand);
}
.transcriptie {
  white-space: pre-wrap; line-height: 1.65; font-size: 17px;
  background: #fffdf7; border: 1px solid var(--rand);
  border-radius: var(--straal); padding: 16px;
}
.transcriptie.oud { font-style: italic; color: var(--tekst-zacht); }

dl.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 15px; }
dl.gegevens dt { color: var(--tekst-zacht); }

.personenlijst { display: flex; flex-wrap: wrap; gap: 8px; }
.personenlijst a {
  border: 1px solid var(--rand); background: var(--perkament-mid);
  border-radius: 13px; padding: 3px 11px; font-size: 15px;
}

/* ─── Dubbelen-werkbank ────────────────────────────────────── */

.dub-uitleg {
  color: var(--tekst-zacht); font-size: 15px; margin-bottom: 12px; max-width: 70ch;
}
.dub-groep { margin-bottom: 14px; }
.dub-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 11px 14px; background: var(--perkament-mid);
  border-bottom: 1px solid var(--rand); font-size: 17px;
}
.dub-acties {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-top: 1px solid var(--rand);
}
.dub-acties button { padding: 6px 14px; font-size: 15px; }
.dub-groep input[type=radio] { accent-color: var(--rood); width: 16px; height: 16px; }

/* ─── Toestanden ───────────────────────────────────────────── */

.bezig, .leegmelding {
  padding: 48px 20px; text-align: center; color: var(--tekst-zacht); font-style: italic;
}
.foutkaart {
  background: #f8e0e0; border: 1px solid #d8a0a0; color: #7a1414;
  border-radius: var(--straal); padding: 16px;
}

/* ─── Stamboom ─────────────────────────────────────────────── */

.boom { display: flex; flex-direction: column; gap: 6px; }
.generatie { text-align: center; }
.genlabel {
  font-family: var(--kop); font-size: 14px; color: var(--tekst-zacht);
  font-style: italic; margin: 10px 0 6px;
}
.boom-rij {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  align-items: stretch;
}
.boom-groep { display: inline-flex; flex-direction: column; align-items: center; }
.groeplabel { font-size: 13px; color: var(--tekst-zacht); font-style: italic; margin-bottom: 4px; }

.pkaart {
  background: #fffdf7; border: 1px solid var(--rand); border-radius: var(--straal);
  box-shadow: var(--schaduw); padding: 10px 14px; min-width: 150px; max-width: 220px;
  text-align: center;
}
.pkaart.focus { border-color: var(--goud); border-width: 2px; background: var(--perkament-mid); }
.pkaart.voorstel { border-style: dashed; border-color: var(--perkament-donker); }
.pkaart .pnaam { font-family: var(--kop); font-size: 17px; font-weight: 600; display: block; }
.pkaart .pjaren { font-size: 13px; color: var(--tekst-zacht); margin-top: 2px; }
.pkaart .pvoet {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  margin-top: 5px; font-size: 12px; min-height: 18px;
}
.pkaart .pprofiel { font-size: 14px; opacity: .55; }
.pkaart .pprofiel:hover { opacity: 1; text-decoration: none; }

/* ─── Voorstellen ──────────────────────────────────────────── */

.vrs-bron {
  padding: 10px 14px; background: var(--perkament-mid);
  border-bottom: 1px solid var(--rand); font-family: var(--kop); font-size: 15px;
}
.vrs-acties { text-align: right; white-space: nowrap; width: 1%; }
.vrs-acties button { padding: 5px 12px; font-size: 14px; margin-left: 6px; }

/* ─── Verificatie ──────────────────────────────────────────── */

.verificatie { padding: 12px 14px; }
.ver-status { margin-bottom: 8px; }
.ver-eisen { list-style: none; margin: 0 0 10px; }
.ver-eisen li { padding: 3px 0; font-size: 15px; }
.ver-vink { display: inline-block; width: 18px; color: #35521f; font-weight: 600; }
.ver-vink.mis { color: #7a1414; }
.ver-actie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ver-actie button { padding: 6px 14px; font-size: 15px; }
.ver-melding { font-size: 14px; color: #7a1414; }

.rel-acties { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rel-acties button { padding: 2px 9px; font-size: 14px; line-height: 1.4; }

.voortgang {
  height: 10px; background: var(--perkament-mid); border: 1px solid var(--rand);
  border-radius: 5px; overflow: hidden;
}
.voortgang-balk { height: 100%; background: var(--goud); }

/* ─── Zoekpagina ───────────────────────────────────────────── */

.zoektelling { font-size: 14px; color: var(--tekst-zacht); margin-bottom: 14px; }
.zoekgroep { margin-bottom: 22px; }
.zoekgroep h2 { font-size: 20px; margin-bottom: 8px; }
.zoekgroep .telling { font-size: 14px; color: var(--tekst-zacht); font-family: var(--lopend); }

.zoektreffer {
  display: block; padding: 10px 14px;
  border-bottom: 1px solid var(--rand); color: var(--tekst);
}
.zoektreffer:last-child { border-bottom: none; }
.zoektreffer:hover { background: var(--perkament-licht); text-decoration: none; }
.zoektreffer .zoektitel {
  display: block; font-family: var(--kop); font-size: 17px;
  font-weight: 600; color: var(--rood);
}
.zoektreffer .zoekfragment { display: block; font-size: 15px; color: var(--tekst-zacht); }

/* De treffer zelf oplichten in perkamentgoud, niet in browsergeel. */
mark { background: var(--goud-licht); color: var(--tekst); padding: 0 2px; border-radius: 2px; }

/* ─── Tijdlijn ─────────────────────────────────────────────── */

.tijdlijn { padding: 4px 0; }
.tl-rij {
  display: flex; gap: 12px; align-items: baseline;
  padding: 8px 14px; border-bottom: 1px solid var(--rand);
}
.tl-rij:last-child { border-bottom: none; }
.tl-rij.voorstel { background: var(--perkament-licht); }
.tl-jaar {
  width: 44px; flex-shrink: 0; text-align: right;
  font-family: var(--kop); font-weight: 600; color: var(--rood);
}
.tl-inhoud { flex: 1; min-width: 0; }
.tl-onder { font-size: 14px; margin-top: 2px; }
.tl-signaal { color: #7a5a14; }
.tl-acties { flex-shrink: 0; }
.tl-kop { padding: 10px 14px 4px; font-size: 13px; border-bottom: 1px solid var(--rand); }
.tl-toevoegen summary { cursor: pointer; font-family: var(--kop); font-size: 17px; }
.tl-toevoegen form { padding: 14px; margin-top: 10px; }
.tl-melding { font-size: 14px; color: #7a1414; margin-left: 10px; }

.oordelen { border-top: 1px solid var(--rand); padding-top: 10px; margin-bottom: 10px; }
.oordelen .ver-actie button { padding: 4px 12px; font-size: 14px; }
.oordeel-veld { display: flex; gap: 6px; margin-top: 8px; }
.oordeel-veld.verborgen { display: none; }
.oordeel-veld input { flex: 1; min-width: 0; padding: 4px 8px; font-size: 14px; }
.oordeel-veld button { padding: 4px 12px; font-size: 14px; }

.doc-datering { display: flex; gap: 6px; }
.doc-datering input { flex: 1; min-width: 0; padding: 3px 8px; font-size: 14px; }
.doc-datering button { padding: 3px 10px; font-size: 13px; }