:root{
  --pri:#3b82f6; --pri-d:#2563eb; --bg:#f1f5f9; --kaart:#ffffff;
  --tekst:#1e293b; --grijs:#64748b; --rand:#e2e8f0; --rood:#dc2626; --groen:#16a34a;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--tekst)}
a{color:var(--pri-d);text-decoration:none}
a:hover{text-decoration:underline}
.klein{font-size:.85rem;color:var(--grijs)}
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.auth-card{background:var(--kaart);padding:32px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);width:100%;max-width:380px}
.auth-card h1{margin:0 0 4px;font-size:1.6rem}
.auth-card label{display:block;margin:14px 0 4px;font-weight:600;font-size:.9rem}
.auth-card input{width:100%;padding:10px 12px;border:1px solid var(--rand);border-radius:8px;font-size:1rem}
.knop{display:inline-block;background:var(--pri);color:#fff;border:0;padding:10px 18px;border-radius:8px;font-size:.95rem;cursor:pointer;margin-top:16px;font-weight:600}
.knop:hover{background:var(--pri-d);text-decoration:none;color:#fff}
.knop.klein-knop{padding:5px 10px;font-size:.8rem;margin:0}
.knop.grijs{background:#64748b}
.knop.rood{background:var(--rood)}
.melding{padding:10px 14px;border-radius:8px;margin:12px 0;font-size:.9rem}
.melding.fout{background:#fee2e2;color:#991b1b}
.melding.ok{background:#dcfce7;color:#166534}
.topbar{background:var(--kaart);border-bottom:1px solid var(--rand);padding:12px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topbar .logo{font-weight:800;font-size:1.2rem;color:var(--pri-d)}
.topbar nav{display:flex;gap:16px;flex:1}
.topbar .rechts{display:flex;align-items:center;gap:12px}
.container{max-width:1200px;margin:0 auto;padding:20px}
.weeknav{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.weeknav h2{margin:0;font-size:1.2rem}
.filterbalk{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.filterbalk select,.filterbalk input{padding:8px 10px;border:1px solid var(--rand);border-radius:8px}
.week-wrap{overflow-x:auto;background:var(--kaart);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
table.week{border-collapse:collapse;width:100%;min-width:900px}
table.week th,table.week td{border:1px solid var(--rand);padding:6px;vertical-align:top}
table.week th{background:#f8fafc;font-size:.85rem;position:sticky;top:0}
table.week th.dag{min-width:130px}
table.week td.naamcel{background:#f8fafc;font-weight:600;white-space:nowrap;position:sticky;left:0}
.item{border-radius:6px;padding:4px 6px;margin-bottom:4px;font-size:.8rem;color:#fff;line-height:1.25}
.item .tijd{opacity:.85;font-size:.72rem;display:block}
.item a{color:#fff;opacity:.8;font-size:.72rem}
.leeg{color:#cbd5e1;font-size:.8rem}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;color:#fff}
.paneel{background:var(--kaart);padding:20px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.05);margin-bottom:20px}
.paneel h3{margin-top:0}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.grid-form label{display:block;font-weight:600;font-size:.85rem;margin-bottom:4px}
.grid-form input,.grid-form select,.grid-form textarea{width:100%;padding:8px 10px;border:1px solid var(--rand);border-radius:8px;font-size:.95rem}
table.lijst{border-collapse:collapse;width:100%}
table.lijst th,table.lijst td{border-bottom:1px solid var(--rand);padding:8px 10px;text-align:left;font-size:.9rem}
table.lijst th{background:#f8fafc}
.checkboxlijst{display:flex;flex-wrap:wrap;gap:8px 16px;margin:6px 0}
.checkboxlijst label{font-weight:400;font-size:.9rem}


/* ===== Projecten-agenda ===== */
.agenda-kop { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.agenda-titel { font-size:22px; margin:0; flex:1 1 auto; }
.agenda-filters { margin-bottom:16px; }
.agenda-filters label { font-weight:600; font-size:14px; }
.agenda-filters select { padding:6px 10px; border:1px solid #cbd5e1; border-radius:6px; margin-left:6px; }
.agenda-hint { margin-top:18px; color:#64748b; font-size:14px; }

.project-kaart { background:#fff; border:1px solid #e2e8f0; border-left:5px solid #3b82f6; border-radius:6px; padding:8px 10px; margin-bottom:8px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.pk-naam { font-weight:700; font-size:14px; color:#1e293b; }
.pk-tijd { font-size:13px; color:#0f766e; font-weight:600; margin-top:2px; }
.pk-locatie { font-size:13px; color:#475569; margin-top:2px; }
.pk-personen { font-size:13px; color:#475569; margin-top:2px; }

.agenda-dag .dag-kolom-vol { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:12px; min-height:120px; max-width:520px; }

.agenda-week { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.week-kolom { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; min-height:150px; display:flex; flex-direction:column; }
.week-kolom.vandaag { border:2px solid #3b82f6; }
.week-kop { background:#eef2ff; padding:8px; text-align:center; font-weight:700; font-size:13px; border-bottom:1px solid #e2e8f0; }
.week-kop .wk-datum { display:block; font-weight:500; color:#64748b; font-size:12px; }
.week-inhoud { padding:8px; flex:1 1 auto; }
.week-inhoud .project-kaart { margin-bottom:6px; }

.agenda-maand .maand-kop-rij { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
.maand-kop { text-align:center; font-weight:700; font-size:13px; color:#475569; padding:4px; }
.maand-raster { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.maand-cel { background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; min-height:96px; padding:4px; }
.maand-cel.buiten { background:#f1f5f9; color:#94a3b8; }
.maand-cel.buiten .cel-datum { color:#94a3b8; }
.maand-cel.vandaag { border:2px solid #3b82f6; }
.cel-datum { font-size:12px; font-weight:700; color:#334155; margin-bottom:4px; }
.maand-item { color:#fff; font-size:11px; padding:2px 5px; border-radius:4px; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Projectformulier in beheer */
.project-form { margin-bottom:16px; }
.project-form .veld-rij { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:10px; }
.project-form .veld-rij label { font-size:13px; font-weight:600; }
.project-form input[type=text], .project-form input[type=date], .project-form input[type=time], .project-form textarea { padding:6px 8px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; }
.project-form textarea { width:100%; max-width:520px; }
.personen-keuze { border:1px solid #e2e8f0; border-radius:8px; padding:10px 12px; margin:10px 0; }
.personen-keuze legend { font-size:13px; font-weight:700; padding:0 6px; }
.pers-optie { display:inline-flex; align-items:center; gap:5px; margin:4px 14px 4px 0; font-size:14px; }

@media (max-width:900px){ .agenda-week { grid-template-columns:1fr; } }


/* ===== Klikbare projectkaart ===== */
a.project-kaart { display:block; text-decoration:none; color:inherit; cursor:pointer; transition:box-shadow .1s, transform .1s; }
a.project-kaart:hover { box-shadow:0 2px 8px rgba(0,0,0,.15); transform:translateY(-1px); }
a.maand-item { display:block; text-decoration:none; cursor:pointer; }
a.maand-item:hover { opacity:.85; }

/* ===== Projectdetailpagina ===== */
.project-detail { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:22px 26px; margin-top:14px; max-width:760px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.project-detail h1 { margin:0 0 16px; font-size:24px; color:#1e293b; }
.pd-regel { display:flex; padding:7px 0; border-bottom:1px solid #f1f5f9; font-size:15px; }
.pd-label { flex:0 0 160px; font-weight:600; color:#64748b; }
.pd-waarde { flex:1 1 auto; color:#1e293b; }
.pd-blok { margin-top:18px; }
.pd-blok h3 { margin:0 0 6px; font-size:15px; color:#0f766e; }
.pd-blok p { margin:0; color:#334155; line-height:1.5; }
.pd-beheer { margin-top:22px; }


/* Persoonlijke agenda-items */
.plan-kaart { border: 1px solid #d9e2ec; border-left: 4px solid #7b8794; border-radius: 6px; padding: 8px 10px; margin: 6px 0; background: #f8fafc; }
.plan-kaart .pk-naam { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-kaart .pk-tijd { font-size: 13px; color: #486581; }
.plan-kaart .pk-personen { font-size: 13px; color: #627d98; }
.plan-kaart .pk-oms { font-size: 13px; color: #486581; margin-top: 2px; }
.pk-badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.pk-badge.openbaar { background: #def7ec; color: #03543f; }
.pk-badge.prive { background: #e5e7eb; color: #4b5563; }
.maand-item.plan { background: #7b8794; }
.maand-item.plan.openbaar { background: #0e9f6e; }
.agenda-toevoegen { margin-top: 24px; padding: 16px; border: 1px solid #d9e2ec; border-radius: 8px; background: #fff; }
.agenda-toevoegen h2 { margin: 0 0 12px; font-size: 18px; }
.item-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.item-form label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: #334e68; gap: 3px; }
.item-form input[type=text], .item-form input[type=date], .item-form input[type=time], .item-form textarea { padding: 6px 8px; border: 1px solid #cbd5e0; border-radius: 5px; font: inherit; }
.item-form textarea { min-width: 220px; }
.item-form .checkbox-optie { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; }
.item-form .checkbox-optie input { width: auto; }