/* wwhost — beheerpaneel */
:root{
  --bg:#0d0f12; --vlak:#171b21; --vlak2:#1d222a; --rand:#2a313b;
  --ink:#e8edf4; --ink2:#c9d1dc; --ink3:#97a1af;
  --goud:#e0b341; --groen:#57b54a; --rood:#e05d5d;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15.5px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex;min-height:100vh;
}

/* ── Zijbalk ───────────────────────────────────────────────────────────── */
.zij{
  width:240px;flex:0 0 240px;background:var(--vlak);border-right:1px solid var(--rand);
  padding:1.25rem 0;display:flex;flex-direction:column;gap:.25rem;
}
.merk{padding:0 1.25rem 1.25rem}
.merk span{display:block;font-size:.82rem;color:var(--ink3);margin-top:.35rem}
/* Het logo is wit op een doorzichtige achtergrond. Op deze donkere zijbalk
   klopt dat precies; op een licht vlak zou je er niets van zien. */
.logo{display:block;width:100%;max-width:200px;height:auto}
.zij nav{display:flex;flex-direction:column}
.zij a{
  padding:.6rem 1.25rem;color:var(--ink2);text-decoration:none;
  border-left:3px solid transparent;
}
.zij a:hover{background:var(--vlak2);color:var(--ink)}
.zij a.aan{border-left-color:var(--goud);color:var(--goud);background:var(--vlak2)}
.extern{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--rand);display:flex;flex-direction:column}
.extern a{font-size:.9rem;color:var(--ink3)}
.uit{margin-top:auto;font-size:.9rem;color:var(--ink3)}

/* ── Inhoud ────────────────────────────────────────────────────────────── */
main{flex:1;padding:2rem 2.5rem;max-width:1100px}
/* Zonder dit pakt een gewone link de standaardkleur van de browser: donkerblauw
   op een donkere achtergrond, en dan zie je hem niet. */
main a{color:var(--goud)}
main a:hover{color:var(--ink)}
h1{margin:0 0 1.5rem;font-size:1.7rem}
h2{margin:2.25rem 0 .5rem;font-size:1.1rem;color:var(--ink2)}
p{color:var(--ink2);margin:.25rem 0 1rem;max-width:62ch}

.uitvoer{
  background:var(--vlak);border:1px solid var(--rand);border-radius:6px;
  padding:1rem 1.15rem;overflow-x:auto;white-space:pre;
  font:13.5px/1.55 ui-monospace,"Cascadia Code",Consolas,monospace;color:var(--ink2);
}

/* ── Formulieren ───────────────────────────────────────────────────────── */
.rij{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.5rem}
input[type=text],input[type=email],input[type=password]{
  background:var(--vlak2);border:1px solid var(--rand);border-radius:5px;
  padding:.55rem .7rem;color:var(--ink);font:inherit;min-width:15rem;
}
input:focus{outline:2px solid var(--goud);outline-offset:1px}
.vink{display:flex;align-items:center;gap:.35rem;color:var(--ink2);font-size:.92rem}
.vink input{accent-color:var(--goud)}
button{
  background:var(--goud);border:0;border-radius:5px;padding:.58rem 1.1rem;
  color:#1a1408;font:inherit;font-weight:600;cursor:pointer;
}
button:hover{filter:brightness(1.08)}

/* ── Lijst met sites ───────────────────────────────────────────────────── */
.lijst{width:100%;border-collapse:collapse;margin-bottom:.5rem}
.lijst th,.lijst td{
  text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--rand);
  vertical-align:middle;
}
.lijst thead th{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink3);font-weight:600;border-bottom-color:var(--rand);
}
.lijst tbody tr:hover{background:var(--vlak)}
.lijst a{color:var(--ink2)}
.lijst td.doen{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}
.inline{display:inline;margin:0}

/* Knoppen in een lijst mogen niet schreeuwen; alleen de gevaarlijke valt op. */
.lijst button,.knop{
  background:var(--vlak2);border:1px solid var(--rand);color:var(--ink2);
  border-radius:5px;padding:.35rem .7rem;font:inherit;font-size:.86rem;
  font-weight:500;text-decoration:none;display:inline-block;cursor:pointer;
}
.lijst button:hover,.knop:hover{background:var(--rand);color:var(--ink);filter:none}
.lijst button.gevaar{color:var(--rood);border-color:rgba(224,93,93,.45)}
.lijst button.gevaar:hover{background:rgba(224,93,93,.14);color:var(--rood)}

.kaart-uit{
  background:var(--vlak);border:1px solid var(--goud);border-radius:8px;
  padding:1.1rem 1.25rem;margin-bottom:1.75rem;
}
.kaart-uit h2{margin-top:0}
.let-op{color:var(--goud);font-size:.9rem}

/* ── Bestandsbeheer ────────────────────────────────────────────────────── */
select,input[type=file]{
  background:var(--vlak2);border:1px solid var(--rand);border-radius:5px;
  padding:.5rem .6rem;color:var(--ink);font:inherit;
}
.kruimel{font:13.5px/1.6 ui-monospace,Consolas,monospace;color:var(--ink3);margin:.25rem 0 1rem}
.kruimel a{color:var(--ink2)}
.stil{color:var(--ink3);font-size:.9rem}
.lijst td.stil{font-size:.85rem}

.bewerk{margin-bottom:1rem}
.bewerk textarea{
  width:100%;min-height:26rem;resize:vertical;
  background:var(--bg);border:1px solid var(--rand);border-radius:6px;
  padding:.9rem 1rem;color:var(--ink);
  font:13.5px/1.55 ui-monospace,"Cascadia Code",Consolas,monospace;
  /* Geen tekstterugloop: in code hoort een regel een regel te blijven. */
  white-space:pre;overflow-wrap:normal;overflow-x:auto;
}
.bewerk textarea:focus{outline:2px solid var(--goud);outline-offset:1px}
.bewerk .rij{margin-top:.6rem}

/* ── Meldingen ─────────────────────────────────────────────────────────── */
.melding{border-radius:6px;padding:.85rem 1.1rem;margin-bottom:1.5rem;border:1px solid}
.melding.ja {background:rgba(87,181,74,.09);border-color:var(--groen)}
.melding.nee{background:rgba(224,93,93,.09);border-color:var(--rood)}
.melding pre{margin:0;white-space:pre-wrap;font:13.5px/1.5 ui-monospace,Consolas,monospace}

/* ── Aanmelden ─────────────────────────────────────────────────────────── */
body.aanmeld{display:grid;place-items:center}
.kaart{
  background:var(--vlak);border:1px solid var(--rand);border-radius:10px;
  padding:2.25rem;width:min(26rem,92vw);display:flex;flex-direction:column;gap:.55rem;
}
.kaart h1{margin:0;font-size:1.5rem}
.kaart .logo{max-width:210px;margin:0 auto .25rem}
.kaart .sub{color:var(--ink3);margin:0 0 1rem;text-align:center}
.kaart label{font-size:.9rem;color:var(--ink2)}
.kaart input{min-width:0;width:100%}
.kaart button{margin-top:.75rem}
.voet{font-size:.83rem;color:var(--ink3);margin:1rem 0 0}
code{background:var(--bg);padding:.1rem .35rem;border-radius:4px;font-size:.9em}

@media(max-width:800px){
  body{flex-direction:column}
  .zij{width:auto;flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.75rem}
  /* De zijbalk wordt hier een balk bovenaan. Een logo van 200 px neemt dan de
     halve breedte van een telefoon in; de domeinnaam eronder past er niet bij
     en staat toch al in de titel van het venster. */
  .merk{padding:0 .9rem 0 .25rem}
  .merk span{display:none}
  .logo{max-width:125px}
  .zij nav{flex-direction:row;flex-wrap:wrap}
  .zij a{border-left:0;border-bottom:3px solid transparent;padding:.45rem .8rem}
  .zij a.aan{border-left:0;border-bottom-color:var(--goud)}
  .extern{margin:0;border:0;flex-direction:row;padding:0}
  .uit{margin-left:auto}
  main{padding:1.25rem}

  /* Op een telefoon past een tabel met drie kolommen niet: de knoppen vallen
     dan buiten beeld en je kunt er niet bij. Daarom stapelen de rijen. */
  .lijst,.lijst tbody,.lijst tr,.lijst td{display:block;width:100%}
  .lijst thead{display:none}
  .lijst tr{border-bottom:1px solid var(--rand);padding:.7rem 0}
  .lijst td{border:0;padding:.15rem 0}
  .lijst td.doen{justify-content:flex-start;padding-top:.55rem}
}