:root{
  --bg:#f6f7f9; --panel:#fff; --ink:#1c2024; --muted:#6b7280; --line:#e3e6ea;
  --accent:#2f6feb; --accent-ink:#fff; --danger:#c0392b; --ok:#1e7a45;
  --okbg:#e8f5ee; --errbg:#fdecea; --radius:10px;
}
/* donkere waarden: gedeeld door de OS-voorkeur en de handmatige keuze.
   [data-theme="light"] sluit de OS-voorkeur expliciet uit, [data-theme="dark"]
   forceert donker ongeacht het OS. Geen data-theme = volg het OS zoals vanouds. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14171a; --panel:#1c2024; --ink:#e6e9ed; --muted:#98a1ad; --line:#2b3138;
    --accent:#5a8dff; --accent-ink:#0d1015; --danger:#ef6b5c; --ok:#4ec98a;
    --okbg:#16301f; --errbg:#32191a;
  }
}
:root[data-theme="dark"]{
  --bg:#14171a; --panel:#1c2024; --ink:#e6e9ed; --muted:#98a1ad; --line:#2b3138;
  --accent:#5a8dff; --accent-ink:#0d1015; --danger:#ef6b5c; --ok:#4ec98a;
  --okbg:#16301f; --errbg:#32191a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:0 0 .6rem}
h2{font-size:1.15rem;margin:1.6rem 0 .5rem}
.muted{color:var(--muted)}
.small{font-size:.85em}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.num{text-align:right;white-space:nowrap}
.lead{color:var(--muted);margin-top:0}

/* topbar */
.topbar{display:flex;gap:1rem;align-items:center;padding:.6rem 1rem;
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:700;font-size:1.05rem;color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none}
.searchbar{display:flex;flex:1 1 320px;min-width:220px;gap:.4rem}
.searchbar input{flex:1;padding:.5rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg);color:var(--ink)}
.searchbar button{padding:.5rem .9rem;border:0;border-radius:var(--radius);
  background:var(--accent);color:var(--accent-ink);cursor:pointer}
.topnav{display:flex;gap:.9rem;align-items:center;white-space:nowrap}

/* layout */
.layout{display:flex;align-items:flex-start;gap:0}
.sidebar{width:250px;flex:0 0 250px;padding:1rem;border-right:1px solid var(--line);
  background:var(--panel);min-height:calc(100vh - 110px)}
.side-head{display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:1rem 0 .4rem}
.side-head:first-child{margin-top:0}
.mini{border:1px solid var(--line);border-radius:6px;width:20px;height:20px;
  display:grid;place-items:center;line-height:1}
.tree{list-style:none;margin:0;padding:0}
.tree li{display:flex;align-items:center;gap:.15rem;
  padding:.18rem 0;padding-left:calc(var(--d,0) * 12px)}
.tree li.hidden{display:none}
.tree li a{flex:1;min-width:0}
.tree li.active > a{font-weight:600;color:var(--accent)}
/* uitvouw-driehoekje; ruimte blijft ook bij bladeren gereserveerd zodat namen uitlijnen */
.twist{flex:0 0 15px;width:15px;height:15px;padding:0;border:0;background:none;
  cursor:pointer;color:var(--muted);font-size:.62rem;line-height:1;
  display:grid;place-items:center;visibility:hidden}
.tree li.has-kids > .twist{visibility:visible}
.twist:hover{color:var(--ink)}
.content{flex:1;padding:1.3rem 1.6rem;min-width:0;max-width:1100px}
.centered{max-width:420px;margin:8vh auto;padding:1rem}
body.bare{background:var(--bg)}

/* kaarten en knoppen */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.2rem;margin:0 0 1.2rem}
.card.auth h1{margin-top:0}
.btn{display:inline-block;padding:.42rem .8rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);color:var(--ink);cursor:pointer;
  font-size:.9rem}
.btn:hover{text-decoration:none;border-color:var(--accent)}
.btn.primary,button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{color:var(--danger);border-color:var(--line)}
.btn.active{border-color:var(--accent);color:var(--accent)}
button{font:inherit}
button.primary{padding:.5rem .95rem;border-radius:var(--radius);border:0;cursor:pointer}
.linkish{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font-size:.88em}
.linkish.danger{color:var(--danger)}
.inline{display:inline}
.actions,.formactions,.pageactions,.adminnav,.pager{display:flex;gap:.5rem;
  align-items:center;flex-wrap:wrap}
.actions{margin:1rem 0}
.adminnav{margin:0 0 1.2rem}
.pager{margin-top:1rem}
.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.rowactions{display:flex;gap:.6rem;flex-wrap:wrap}

/* meldingen */
.flash{padding:.65rem .9rem;border-radius:var(--radius);margin:0 0 .9rem;border:1px solid transparent}
.flash.ok{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.flash.error{background:var(--errbg);border-color:var(--danger);color:var(--danger)}

/* formulieren */
.form label{display:block;margin:0 0 .8rem}
.form input[type=text],.form input[type=email],.form input[type=password],
.form select,.form textarea,.card input,.card select{
  display:block;width:100%;margin-top:.25rem;padding:.5rem .65rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);color:var(--ink);font:inherit}
.form textarea{resize:vertical}
.form textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem}
.form.row{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.form.row label{flex:1 1 180px;margin-bottom:0}
.upload{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.6rem 0 1rem}

/* statistieken */
.stats{display:flex;gap:.8rem;flex-wrap:wrap;margin:1rem 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:.7rem 1rem;min-width:120px}
.stat b{display:block;font-size:1.35rem}
.stat span{color:var(--muted);font-size:.82rem}

/* lijsten */
.cols{display:flex;gap:1.6rem;flex-wrap:wrap}
.cols section{flex:1 1 320px;min-width:280px}
.list{list-style:none;margin:.4rem 0;padding:0}
.list li{padding:.45rem 0;border-bottom:1px solid var(--line)}
.meta{display:block;color:var(--muted);font-size:.83rem}
.tag{display:inline-block;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:0 .5rem;font-size:.78rem;margin-right:.3rem}
.crumbs{color:var(--muted);font-size:.87rem;margin-bottom:.5rem}

.filelist{list-style:none;margin:.4rem 0;padding:0}
.filelist li{padding:.5rem 0;border-bottom:1px solid var(--line);
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.filelist.compact li{padding:.25rem 0}
.thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--line);
  display:block}

/* zoekresultaten */
.results{list-style:none;margin:0;padding:0}
.results li{padding:.7rem 0;border-bottom:1px solid var(--line)}
.rtitle{font-weight:600}
.kind{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  border:1px solid var(--line);border-radius:4px;padding:0 .35rem;margin-right:.45rem;
  color:var(--muted)}
.snippet{color:var(--muted);font-size:.88rem;margin-top:.25rem}

/* tabellen */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg);font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

/* artikel */
.prose{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.2rem;overflow-wrap:break-word}
.prose img{max-width:100%;height:auto;border-radius:6px}
.prose pre{background:var(--bg);padding:.7rem .9rem;border-radius:6px;overflow-x:auto;
  border:1px solid var(--line)}
.prose code{background:var(--bg);padding:.1rem .3rem;border-radius:4px;font-size:.9em}
.prose pre code{background:none;padding:0}
.prose table{margin:.6rem 0}
.prose th,.prose td{border:1px solid var(--line)}
.prose blockquote{margin:.6rem 0;padding:.2rem 0 .2rem .9rem;border-left:3px solid var(--line);
  color:var(--muted)}

/* links in de tekst: duidelijk zichtbaar zonder de zin te breken */
.prose a{color:var(--accent);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);
  text-decoration-thickness:1px;text-underline-offset:2px;
  border-radius:3px;padding:0 1px;
  /* een lange URL mag afbreken in plaats van de pagina te verbreden */
  overflow-wrap:anywhere}
.prose a:hover,.prose a:focus-visible{
  text-decoration-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* externe link krijgt een pijltje, zodat je ziet dat je de site verlaat */
.prose a.ext::after{content:"↗";font-size:.78em;margin-left:.15em;
  vertical-align:.15em;opacity:.65;text-decoration:none;display:inline-block}
.prose a.int{text-decoration-style:solid}
.prose a.mail::after{content:"✉";font-size:.8em;margin-left:.2em;opacity:.65}
/* geen pijltje op een link die alleen een afbeelding omsluit */
.prose a:has(> img)::after{content:none}
.prose a img{vertical-align:middle}

/* taalwisselaar */
.langswitch{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;font-size:.78rem}
/* De niet-actieve talen zijn knoppen in een POST-formulier (taalkeuze wordt
   opgeslagen), maar horen eruit te zien als de tekstlinks die het waren.
   display:contents haalt het formulier uit de flex-rij, zodat de knop zelf
   naast .on komt te staan. */
.langswitch form{display:contents}
.langswitch a,.langswitch button,.langswitch .on{padding:.2rem .45rem;line-height:1.4}
.langswitch .on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.langswitch a,.langswitch button{color:var(--muted)}
.langswitch button{background:none;border:0;font:inherit;font-size:inherit;cursor:pointer}
.langswitch a:hover,.langswitch button:hover{background:var(--bg);text-decoration:none;
  color:var(--ink)}
.barelang{display:flex;justify-content:flex-end;align-items:center;gap:.6rem;margin-bottom:.6rem}

/* licht/donker-knop */
.themetoggle{background:none;border:1px solid var(--line);border-radius:var(--radius);
  cursor:pointer;padding:.2rem .45rem;line-height:1.4;font-size:.95rem;color:var(--ink)}
.themetoggle:hover{border-color:var(--accent)}
.langtag{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:0 .3rem;
  font-size:.68rem;color:var(--muted);margin-left:.35rem;vertical-align:middle}
.mtnote{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:.45rem .7rem;color:var(--muted);font-size:.85rem;
  margin:.2rem 0 .8rem}
.mtbadge{display:inline-block;background:var(--accent);color:var(--accent-ink);border-radius:4px;
  padding:0 .35rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  margin-right:.35rem;vertical-align:1px}
.mtdot{font-size:.62rem;border:1px solid var(--accent);color:var(--accent);border-radius:3px;
  padding:0 .2rem;vertical-align:2px;letter-spacing:.03em}
.fallbacknote{background:var(--bg);border:1px dashed var(--line);border-radius:var(--radius);
  padding:.45rem .7rem;color:var(--muted);font-size:.85rem;margin:.2rem 0 .8rem}

/* taaltabbladen in formulieren */
.tabs{display:flex;gap:.3rem;margin:.2rem 0 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{background:none;border:1px solid transparent;border-bottom:0;cursor:pointer;
  padding:.4rem .8rem;color:var(--muted);border-radius:var(--radius) var(--radius) 0 0;
  font-size:.9rem}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--panel);border-color:var(--line);color:var(--ink);font-weight:600;
  margin-bottom:-1px}
.tab .dot{color:var(--danger);font-size:1.1em;line-height:0}
.tabpane{display:none;border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);padding:.9rem;background:var(--panel);
  margin-bottom:.9rem}
.tabpane.on{display:block}
.tabpane label:last-child{margin-bottom:0}

/* markdown-knoppenbalk */
.editor{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bg);margin-top:.25rem}
.toolbar{display:flex;gap:.2rem;flex-wrap:wrap;padding:.35rem;background:var(--panel);
  border-bottom:1px solid var(--line)}
.toolbar button{background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;
  padding:.25rem .5rem;color:var(--ink);font-size:.85rem;min-width:30px}
.toolbar button:hover{background:var(--bg);border-color:var(--line)}
.toolbar button.strong{color:var(--accent);font-weight:600}
.editor textarea{display:block;width:100%;border:0;margin:0;border-radius:0;
  background:var(--bg);color:var(--ink)}
.editor textarea:focus{outline:2px solid var(--accent);outline-offset:-2px}
.checkline{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.checkline input{width:auto;display:inline;margin:0}

/* linkvenster */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;
  padding:1rem;z-index:50}
.modal[hidden]{display:none}
.modalbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem;width:min(480px,100%);box-shadow:0 10px 40px rgba(0,0,0,.3)}
.modalbox h2{margin-top:0}
.modalbox label{display:block;margin-bottom:.8rem}
.modalbox input,.modalbox select{display:block;width:100%;margin-top:.25rem;padding:.5rem .65rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  color:var(--ink);font:inherit}

.foot{padding:1rem;text-align:center;color:var(--muted);font-size:.8rem}

/* mobiel categoriemenu: schakelaar + knop staan verborgen op desktop */
.menucb{display:none}
.menubtn{display:none}

@media (max-width:820px){
  .layout{flex-direction:column}
  .content{padding:1rem;max-width:100%;min-width:0}

  /* de zijbalk wordt een inklapbaar menu bóven de inhoud, standaard dicht */
  .sidebar{width:100%;flex:auto;min-height:0;padding:.3rem 1rem;
    border-right:0;border-bottom:1px solid var(--line)}
  .menubtn{display:block;cursor:pointer;user-select:none;font-weight:600;
    color:var(--ink);padding:.55rem .1rem}
  .menubtn::after{content:"▾";float:right;transition:transform .15s}
  .menucb:checked ~ .menubtn::after{transform:rotate(180deg)}
  .sidebody{display:none;padding-bottom:.5rem}
  .menucb:checked ~ .sidebody{display:block}

  /* topbalk: merk + navigatie op één regel, zoekbalk eronder op volle breedte */
  .topbar{gap:.45rem .7rem;padding:.5rem .8rem}
  .brand{order:1}
  .topnav{order:2;margin-left:auto;flex-wrap:wrap;gap:.5rem .7rem;white-space:normal}
  .searchbar{order:3;flex-basis:100%;min-width:0}
  /* een lang e-mailadres in de nav mag de regel niet uit elkaar duwen */
  .acct{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    display:inline-block;vertical-align:bottom}

  /* brede markdown-tabellen scrollen zelf i.p.v. de pagina te verbreden */
  .prose table{display:block;overflow-x:auto;max-width:100%}
}

/* ---- tweestapsverificatie ---- */
/* De QR krijgt altijd een witte ondergrond: de code bestaat uit zwarte paden
   zonder eigen achtergrond, en die zou in het donkere thema onleesbaar zijn. */
.mfasetup{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-start;margin:1rem 0}
.qr{background:#fff;padding:.7rem;border-radius:var(--radius);border:1px solid var(--line);
  line-height:0;flex:0 0 auto}
.qr svg{display:block;width:190px;height:190px}
.secret{font-size:1.05rem;letter-spacing:.06em;word-break:break-all}
.reccodes{columns:2;column-gap:1.5rem;margin:.6rem 0}
.reccodes li{margin:.25rem 0;break-inside:avoid}
.reccodes code{font-size:1.02rem;letter-spacing:.04em}
button.danger{color:var(--danger);border:1px solid var(--line);background:var(--panel);
  padding:.42rem .8rem;border-radius:var(--radius);cursor:pointer;font:inherit}
button.danger:hover{border-color:var(--danger)}

@media (max-width:520px){
  .reccodes{columns:1}
  .mfasetup{gap:.9rem}
}

/* Kop van de itemlijst met sorteerkeuze rechts */
.listhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.listhead h2{margin:0}
.sortform{display:flex;align-items:center;gap:.4rem}
.sortform label{font-size:.88em}
.sortform select{font:inherit;padding:.28rem .5rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);color:inherit;cursor:pointer}

/* Labels (chips) */
.chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.5rem 0}
.chips.inline{display:inline-flex;margin:0 0 0 .3rem;vertical-align:middle}
.chip{--chip:#6b7280;display:inline-block;padding:.12rem .55rem;border-radius:999px;
  background:var(--chip);color:#fff;font-size:.8rem;line-height:1.55;text-decoration:none;white-space:nowrap}
.chip:hover{filter:brightness(1.1)}
.chip.sm{font-size:.72rem;padding:.05rem .45rem}
.labelpicker{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .4rem}
.chip.pick{border:0;cursor:pointer;font:inherit;font-size:.8rem;opacity:.5;filter:grayscale(.35)}
.chip.pick:hover{opacity:.85}
.chip.pick.on{opacity:1;filter:none}
.chip.pick.on::before{content:"\2713 "}
.chip.active{box-shadow:0 0 0 2px var(--line);font-weight:600}