/* Beheeromgeving — zelfde huisstijl als de website */
:root {
    --coral:#E87B4E; --coral-donker:#C85F30; --coral-licht:#FAEDE2;
    --blad:#6FAE7A; --zon:#F5B942; --roos:#E88B99;
    --achtergrond:#FBF5EC; --wit:#fff; --grijs:#EBDFC9;
    --tekst:#2D2824; --tekst-zacht:#6E625A; --tekst-muted:#A69B92;
    --radius:16px; --radius-klein:10px; --radius-small:6px;
    --schaduw:0 6px 22px rgba(45,40,36,.07);
}
* , *::before, *::after { box-sizing:border-box; }
body {
    margin:0; font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
    background:var(--achtergrond); color:var(--tekst); font-size:15px; line-height:1.55;
}
a { color:var(--coral-donker); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { font-weight:800; letter-spacing:-.01em; }

/* ---- Layout ---- */
.admin { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.zijbalk {
    background:var(--tekst); color:#d8cfc6; display:flex; flex-direction:column;
    padding:20px 16px; position:sticky; top:0; height:100vh;
}
.merk { display:flex; align-items:center; gap:12px; color:#fff; font-weight:800; margin-bottom:24px; }
.merk:hover { text-decoration:none; }
.merk small { color:#b3a89f; font-weight:600; }
.logo-mark { display:grid; place-items:center; width:42px; height:42px; background:var(--coral); border-radius:var(--radius-klein); color:#fff; font-weight:800; }
.zijbalk nav { display:flex; flex-direction:column; gap:2px; }
.zijbalk nav a { color:#d8cfc6; padding:10px 12px; border-radius:var(--radius-small); font-weight:600; }
.zijbalk nav a:hover { background:rgba(255,255,255,.08); text-decoration:none; }
.zijbalk nav a.actief { background:var(--coral); color:#fff; }
.zijbalk-voet { margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); }
.zijbalk-voet a { color:#b3a89f; padding:8px 12px; font-weight:600; }
.zijbalk-voet a:hover { color:#fff; text-decoration:none; }

.werkblad { display:flex; flex-direction:column; min-width:0; }
.werkblad-kop {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:22px 32px; background:var(--wit); border-bottom:1px solid var(--grijs);
}
.werkblad-kop h1 { margin:0; font-size:1.5rem; }
.werkblad-kop .gebruiker { color:var(--tekst-zacht); font-size:.9rem; }
.werkblad-inhoud { padding:28px 32px; max-width:1000px; }

/* ---- Knoppen ---- */
.knop {
    display:inline-block; background:var(--coral); color:#fff; border:none; cursor:pointer;
    padding:10px 20px; border-radius:999px; font:inherit; font-weight:700;
}
.knop:hover { background:var(--coral-donker); text-decoration:none; }
.knop.secundair { background:var(--wit); color:var(--coral-donker); box-shadow:inset 0 0 0 2px var(--coral); }
.knop.secundair:hover { background:var(--coral-licht); }
.knop.klein { padding:6px 14px; font-size:.88rem; }
.knop.gevaar { background:#fff; color:#b14250; box-shadow:inset 0 0 0 2px #e7a9b1; }
.knop.gevaar:hover { background:#fbe1e5; }

/* ---- Kaarten / panelen ---- */
.paneel { background:var(--wit); border:1px solid var(--grijs); border-radius:var(--radius); box-shadow:var(--schaduw); padding:24px; margin-bottom:24px; }
.balk { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }

/* ---- Dashboard tegels ---- */
.tegels { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; }
.tegel { background:var(--wit); border:1px solid var(--grijs); border-radius:var(--radius); padding:20px; box-shadow:var(--schaduw); }
.tegel:hover { text-decoration:none; transform:translateY(-3px); transition:transform .15s; }
.tegel .getal { font-size:2rem; font-weight:800; color:var(--coral-donker); line-height:1; }
.tegel .naam { color:var(--tekst-zacht); font-weight:600; margin-top:6px; }

/* ---- Tabellen ---- */
table.lijst { width:100%; border-collapse:collapse; background:var(--wit); }
table.lijst th, table.lijst td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--grijs); vertical-align:middle; }
table.lijst th { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tekst-muted); }
table.lijst tr:last-child td { border-bottom:none; }
table.lijst .acties { display:flex; gap:8px; justify-content:flex-end; }
table.lijst img.mini { width:54px; height:40px; object-fit:cover; border-radius:6px; border:1px solid var(--grijs); }
.leeg { color:var(--tekst-zacht); padding:24px; text-align:center; }

/* ---- Formulieren ---- */
.form-veld { margin-bottom:18px; }
.form-veld label { display:block; font-weight:700; margin-bottom:6px; }
.form-veld .hint { font-weight:400; color:var(--tekst-muted); font-size:.85rem; }
.form-veld input[type=text], .form-veld input[type=email], .form-veld input[type=password],
.form-veld input[type=date], .form-veld input[type=url], .form-veld input[type=number],
.form-veld textarea, .form-veld select, .form-veld input[type=file] {
    width:100%; padding:11px 13px; border:1px solid var(--grijs); border-radius:var(--radius-klein);
    font:inherit; background:#fff;
}
.form-veld textarea { min-height:140px; resize:vertical; }
.form-veld input:focus, .form-veld textarea:focus, .form-veld select:focus {
    outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-licht);
}
.veld-rij { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-acties { display:flex; gap:12px; align-items:center; margin-top:24px; }
.huidige-media { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.huidige-media img { max-width:120px; border-radius:8px; border:1px solid var(--grijs); }

/* ---- Status chips ---- */
.chip { display:inline-block; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700; line-height:1.4; }
.chip-bezig    { background:#e4f1e7; color:#3f7a52; }
.chip-nieuw    { background:#fae3d8; color:var(--coral-donker); }
.chip-afgerond { background:#efe9e2; color:var(--tekst-muted); }

/* ---- Meldingen ---- */
.melding { padding:13px 16px; border-radius:var(--radius-klein); margin-bottom:18px; }
.melding.ok { background:#e4f1e7; color:#3f7a52; border:1px solid #bfe0c9; }
.melding.fout { background:#fbe1e5; color:#b14250; border:1px solid #f3c2cb; }

/* ---- Inlog ---- */
.inlog-scherm { display:grid; place-items:center; min-height:100vh; padding:24px; }
.inlog-kaart { background:var(--wit); border:1px solid var(--grijs); border-radius:var(--radius); box-shadow:var(--schaduw); padding:34px; width:100%; max-width:400px; }
.inlog-kaart .logo-mark { width:54px; height:54px; font-size:1.3rem; margin:0 auto 14px; }
.inlog-kaart h1 { text-align:center; font-size:1.4rem; margin:0 0 4px; }
.inlog-kaart .sub { text-align:center; color:var(--tekst-zacht); margin-bottom:22px; }

/* ---- Fotobeheer ---- */
.foto-raster { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.foto-vak { border:1px solid var(--grijs); border-radius:var(--radius-klein); overflow:hidden; background:var(--wit); }
.foto-vak img { width:100%; height:120px; object-fit:cover; display:block; }
.foto-vak .onder { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; }

@media (max-width:820px) {
    .admin { grid-template-columns:1fr; }
    .zijbalk { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; }
    .zijbalk nav { flex-direction:row; flex-wrap:wrap; }
    .zijbalk-voet { margin:0; border:none; flex-direction:row; padding:0; }
    .merk { margin:0 12px 0 0; }
    .werkblad-inhoud { padding:20px; }
    .veld-rij { grid-template-columns:1fr; }
}