/* De beheerconsole (public_console/index.php). Rustig en dicht: tabellen om te overzien,
   formulieren om iets klaar te zetten. Een donkere balk bovenin maakt meteen duidelijk dat
   dit niet het portaal van een fractie is. */
:root{
  --grond:#F4F5F4; --vlak:#FFFFFF; --inkt:#1C2320; --zacht:#56615C; --lijn:#DDE2DF;
  --balk:#1F2A26; --balk-inkt:#E9EFEC; --accent:#0E6B4E; --accent-inkt:#FFFFFF;
  --let:#9A5B00; --let-vlak:#FFF4E0; --fout:#A4262C; --fout-vlak:#FDECEC;
  --r:6px;
}
@media (prefers-color-scheme: dark){
  :root{
    --grond:#121614; --vlak:#1A1F1D; --inkt:#E6ECE9; --zacht:#9AA6A0; --lijn:#2C3431;
    --balk:#0B0E0D; --balk-inkt:#E6ECE9; --accent:#3FA37F; --accent-inkt:#07130E;
    --let:#F0B45C; --let-vlak:#2B2212; --fout:#F08A8F; --fout-vlak:#2E1618;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--grond); color:var(--inkt);
  font:15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}
a{color:var(--accent)}
code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:4px; padding:1px 5px}

.balk{display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--balk); color:var(--balk-inkt); padding:12px 24px}
.merk{color:var(--balk-inkt); text-decoration:none; letter-spacing:.01em}
.merk b{font-weight:700; margin-left:4px; padding:1px 7px; border-radius:4px; background:var(--accent); color:var(--accent-inkt)}
.uit{display:flex; align-items:center; gap:12px; margin:0; font-size:14px}
.uit button{font:inherit; color:var(--balk-inkt); background:none; border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r); padding:4px 12px; cursor:pointer}
.uit button:hover{border-color:var(--balk-inkt)}

main{max-width:1180px; margin:0 auto; padding:28px 24px 64px}
h1{font-size:24px; line-height:1.25; margin:0 0 20px}
h2{font-size:17px; margin:0 0 10px; display:flex; align-items:center; gap:8px}
.tel{font-size:13px; font-weight:600; color:var(--zacht); background:var(--vlak); border:1px solid var(--lijn);
  border-radius:999px; padding:0 8px}
section{margin:0 0 30px}
p{margin:0 0 12px; max-width:68ch}
.klein{font-size:13px; color:var(--zacht)}
.let{color:var(--let)}

.rol{overflow-x:auto; background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r)}
table{width:100%; border-collapse:collapse; font-size:14px}
th, td{text-align:left; vertical-align:top; padding:9px 12px; border-bottom:1px solid var(--lijn)}
thead th{font-size:12px; font-weight:600; color:var(--zacht); white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
.getal{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tr.uit td{color:var(--zacht)}
.log td{padding:6px 12px}

.stand{display:grid; grid-template-columns:max-content 1fr; gap:6px 20px; margin:0; background:var(--vlak);
  border:1px solid var(--lijn); border-radius:var(--r); padding:14px 16px; font-size:14px}
.stand dt{color:var(--zacht)}
.stand dd{margin:0}

.vak{display:grid; gap:14px; max-width:380px; background:var(--vlak); border:1px solid var(--lijn);
  border-radius:var(--r); padding:20px; margin:0 0 16px}
label{display:grid; gap:5px; font-size:14px; font-weight:600}
input{font:inherit; font-weight:400; color:var(--inkt); background:var(--grond); border:1px solid var(--lijn);
  border-radius:var(--r); padding:9px 11px; width:100%}
input:focus-visible, button:focus-visible, a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.knop{display:inline-block; font:inherit; font-weight:600; text-decoration:none; color:var(--accent-inkt);
  background:var(--accent); border:0; border-radius:var(--r); padding:10px 16px; cursor:pointer; justify-self:start}
.knop:hover{filter:brightness(1.08)}
.fout{background:var(--fout-vlak); color:var(--fout); border-radius:var(--r); padding:10px 14px; max-width:520px}
.goed{background:var(--vlak); border:1px solid var(--accent); border-radius:var(--r); padding:10px 14px; max-width:640px}
select{font:inherit; color:var(--inkt); background:var(--grond); border:1px solid var(--lijn);
  border-radius:var(--r); padding:9px 11px; width:100%}
section > p:last-child{margin-top:12px}
.qr{width:200px; height:200px; margin:0 0 12px; background:#fff; padding:6px; border-radius:var(--r)}
.qr svg{width:100%; height:100%; display:block}

@media (max-width:640px){
  .balk{padding:10px 16px}
  .uit span{display:none}
  main{padding:20px 16px 48px}
  .rol table{min-width:620px}
  .stand{grid-template-columns:1fr; gap:2px}
  .stand dd{margin-bottom:8px}
}