/* Backoffice in de huisstijl "Markt" (kleuren uit web/src/app/globals.css). Sober: geen scripts nodig, geen
   afbeeldingen, werkt met gewone HTML-formulieren en tabellen. Over te nemen door de data-sessie. */
:root {
  --achtergrond: #fffcf7; --vlak: #ffffff; --tekst: #2b1b2a; --zacht: #5f5670; --rand: #e2d9ef;
  --merk: #5e2d91; --merk-zacht: #e5d9f6; --op-merk-zacht: #47207a; --accent: #f4b942; --op-accent: #2b1b2a;
  --waarschuwing: #fdf0d5; --op-waarschuwing: #6b4a0e; --fout: #fbe3e1; --op-fout: #8a1f17;
  --goed: #dcf2e4; --op-goed: #14532d;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--achtergrond); color: var(--tekst); font: 16px/1.5 "Atkinson Hyperlegible", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--merk); }
h1 { margin: 0 0 16px; font-size: 26px; line-height: 1.25; color: var(--merk); }
h2 { margin: 28px 0 10px; font-size: 18px; }
.zacht { color: var(--zacht); } .klein { font-size: 14px; } .rechts { text-align: right; } .getal { font-variant-numeric: tabular-nums; }

/* Kader: balk boven met het merk, menu links (op een telefoon erboven), inhoud rechts. */
.balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 20px; background: var(--vlak); border-bottom: 1px solid var(--rand); }
.merk { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--merk); }
.merk::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); }
.merk span { font-weight: 400; color: var(--zacht); }
.kader { display: grid; grid-template-columns: 210px minmax(0, 1fr); max-width: 1200px; margin: 0 auto; }
.menu { padding: 20px 12px; }
.menu a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--tekst); text-decoration: none; }
.menu a[aria-current="page"] { background: var(--merk-zacht); color: var(--op-merk-zacht); font-weight: 700; }
.menu a:hover { background: var(--merk-zacht); }
.inhoud { padding: 24px 20px 48px; min-width: 0; }
@media (max-width: 760px) { .kader { grid-template-columns: 1fr; } .menu { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px 0; } .inhoud { padding: 16px 12px 40px; } }

/* Bouwstenen */
.vak { background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px; padding: 18px; }
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.tegel { background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px; padding: 14px 16px; }
.tegel b { display: block; font-size: 28px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tabelvak { overflow-x: auto; background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; white-space: nowrap; }
th { font-size: 13px; font-weight: 700; color: var(--zacht); background: var(--achtergrond); }
tr:last-child td { border-bottom: 0; }
td.breed { white-space: normal; min-width: 220px; }
.label { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.label.premium { background: var(--merk-zacht); color: var(--op-merk-zacht); }
.label.goed { background: var(--goed); color: var(--op-goed); }
.label.let-op { background: var(--waarschuwing); color: var(--op-waarschuwing); }
.label.fout { background: var(--fout); color: var(--op-fout); }
.label.grijs { background: #eeeaf3; color: var(--zacht); }
.knop, button { display: inline-block; padding: 9px 18px; border: 2px solid var(--merk); border-radius: 10px; background: var(--accent); color: var(--op-accent); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.knop.licht, button.licht { background: var(--vlak); color: var(--merk); }
.knop.gevaar, button.gevaar { background: var(--vlak); color: var(--op-fout); border-color: var(--op-fout); }
.balkje { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0 0 14px; }
label { display: block; font-size: 14px; font-weight: 700; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 12px; border: 1px solid #b9aecb; border-radius: 10px; background: var(--vlak); color: var(--tekst); font: inherit; }
.balkje label { flex: 1 1 180px; } .balkje label.smal { flex: 0 1 170px; }
:focus-visible { outline: 3px solid var(--merk); outline-offset: 2px; }
.formulier { display: grid; gap: 14px; max-width: 520px; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.melding { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--waarschuwing); color: var(--op-waarschuwing); }
.melding.goed { background: var(--goed); color: var(--op-goed); }
dl.feiten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dl.feiten dt { color: var(--zacht); } dl.feiten dd { margin: 0; font-weight: 700; }
.inlog { max-width: 400px; margin: 8vh auto; padding: 0 16px; }
.code { letter-spacing: 0.3em; font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; }

/* Alleen voor het voorbeeldbestand: de schermen onder elkaar. */
.scherm { margin: 0 0 40px; border: 2px dashed var(--rand); border-radius: 16px; overflow: hidden; background: var(--achtergrond); }
.schermnaam { margin: 28px 16px 8px; font: 700 13px/1.4 ui-monospace, monospace; color: var(--zacht); }