/* Beheerpaneel — zelfstandige, eenvoudige styling (Spes-huisstijl: geel/zwart). */
:root{
  --geel:#FFD400; --geel-donker:#E6BE00; --ink:#1a1a1a; --grijs:#5b5f66;
  --lijn:#e4e4e7; --paper:#f5f5f4; --ok-bg:#E7F6E9; --ok-br:#B8E0BE; --ok-tx:#245C30;
  --err-bg:#FCEBEA; --err-br:#F3C2BE; --err-tx:#8A1F1F; --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55}
a{color:#1b6ec2;text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0 0 1rem}
h2{font-size:1.15rem;margin:0 0 .4rem}

.admin-top{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;justify-content:space-between;
  background:var(--ink);color:#fff;padding:.8rem 1.2rem}
.admin-brand{font-weight:700;letter-spacing:.02em}
.admin-brand::before{content:"";display:inline-block;width:.7rem;height:.7rem;background:var(--geel);border-radius:2px;margin-right:.5rem;vertical-align:middle}
.admin-nav{display:flex;flex-wrap:wrap;gap:.3rem}
.admin-nav a{color:#fff;padding:.35rem .7rem;border-radius:8px}
.admin-nav a:hover{background:rgba(255,255,255,.14);text-decoration:none}
.admin-nav a.logout{background:var(--geel);color:var(--ink);font-weight:600}
.admin-main{max-width:820px;margin:0 auto;padding:1.8rem 1.2rem 3rem}
.admin-foot{max-width:820px;margin:0 auto;padding:1.5rem 1.2rem;color:var(--grijs);font-size:.85rem}

.lead{color:var(--grijs);margin-top:-.4rem}

/* meldingen */
.msg{padding:.7rem 1rem;border-radius:var(--radius);border:1px solid;font-size:.95rem;margin:0 0 1rem}
.msg.ok{background:var(--ok-bg);border-color:var(--ok-br);color:var(--ok-tx)}
.msg.err{background:var(--err-bg);border-color:var(--err-br);color:var(--err-tx)}
.hint{color:var(--grijs);font-size:.92rem}

/* knoppen */
.btn{display:inline-block;background:var(--geel);color:var(--ink);border:1px solid var(--geel-donker);
  font:inherit;font-weight:600;padding:.6rem 1.1rem;border-radius:var(--radius);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--geel-donker);text-decoration:none}
.btn.ghost{background:#fff;border-color:var(--lijn);color:var(--ink)}
.btn.ghost:hover{background:#fafafa}

/* dashboard-kaarten */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.2rem}
.card{display:block;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:1.2rem 1.3rem;color:inherit}
.card:hover{border-color:var(--geel-donker);text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.card p{color:var(--grijs);margin:.2rem 0 0}

/* formulieren */
.stack{display:grid;gap:1rem;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:1.4rem}
.field{display:grid;gap:.35rem}
.field span{font-weight:600;font-size:.92rem}
.field input,.field textarea,.field select{font:inherit;padding:.6rem .7rem;border:1px solid #cfcfd4;border-radius:8px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--geel-donker);box-shadow:0 0 0 3px rgba(255,212,0,.25)}
.field textarea{resize:vertical}
.actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

/* login */
.login-card{max-width:380px;margin:8vh auto 0;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:1.8rem}
.login-card form{display:grid;gap:.9rem;margin-top:.6rem}
.login-card label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}
.login-card input{font:inherit;padding:.6rem .7rem;border:1px solid #cfcfd4;border-radius:8px}

/* lijst */
.head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.list{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--lijn);border-radius:14px;overflow:hidden;margin-top:1rem}
.list th,.list td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--lijn);vertical-align:middle}
.list thead th{background:#fafafa;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--grijs)}
.list tr:last-child td{border-bottom:0}
.list .right{text-align:right}
.list .nowrap{white-space:nowrap;color:var(--grijs)}
.acties{display:flex;gap:.8rem;justify-content:flex-end;align-items:center}
.acties form{margin:0}
.link-del{background:none;border:0;color:#b00020;font:inherit;cursor:pointer;padding:0}
.link-del:hover{text-decoration:underline}