:root { --green:#186048; --green-dark:#124a38; --ink:#2d2d2d; --muted:#6a6a6a; --line:#e3e6e4; --rood:#b02a2a; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font-family:"Segoe UI",Arial,sans-serif; color:var(--ink); background:#f4f6f5; }
header { background:#fff; border-bottom:3px solid var(--green); }
.bar { max-width:960px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:18px; }
.bar img { height:52px; }
.bar .titles h1 { margin:0; font-size:22px; color:var(--green); }
.bar .titles p { margin:2px 0 0; font-size:13px; color:var(--muted); }
.gebruiker { margin-left:auto; font-size:13px; color:var(--muted); text-align:right; }
.tabs { max-width:960px; margin:18px auto 0; padding:0 24px; display:flex; gap:6px; }
.tabs button { border:1px solid var(--line); background:#fff; color:var(--green); padding:8px 16px; border-radius:7px 7px 0 0; cursor:pointer; font-size:14px; font-family:inherit; }
.tabs button.actief { background:var(--green); color:#fff; border-color:var(--green); }
main { max-width:960px; margin:0 auto 40px; padding:0 24px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px; box-shadow:0 1px 3px rgba(0,0,0,.04); margin-top:18px; }
h2 { color:var(--green); font-size:16px; margin:0 0 8px; }
.sub { color:var(--muted); font-size:13px; margin:0 0 18px; }
label { display:block; font-weight:600; color:var(--green); font-size:13px; margin:18px 0 6px; }
input[type=text], input[type=email], select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:7px; font-size:14px; font-family:inherit; }
.drop { border:2px dashed #c4ccc8; border-radius:9px; padding:22px; text-align:center; color:var(--muted); cursor:pointer; background:#fafbfb; }
.drop.hl { border-color:var(--green); background:#f0f6f3; }
#filelist { list-style:none; padding:0; margin:12px 0 0; }
#filelist li { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border:1px solid var(--line); border-radius:7px; margin-bottom:6px; font-size:14px; }
#filelist button, .link { border:none; background:none; color:var(--rood); cursor:pointer; font-size:13px; text-decoration:underline; font-family:inherit; }
.knoppen { margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
.btn { background:var(--green); color:#fff; border:2px solid var(--green); padding:11px 24px; border-radius:7px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; text-decoration:none; display:inline-block; }
.btn:hover { background:var(--green-dark); border-color:var(--green-dark); }
.btn:disabled { opacity:.6; cursor:default; }
.btn.secundair { background:#fff; color:var(--green); }
.btn.secundair:hover { background:#f0f6f3; }
.btn.klein { padding:9px 16px; font-size:14px; white-space:nowrap; }
.status { margin-top:18px; font-size:14px; white-space:pre-wrap; }
.status.ok { color:var(--green); font-weight:600; }
.status.err { color:var(--rood); }
.spinner { display:inline-block; width:16px; height:16px; border:3px solid #cfe0d8; border-top-color:var(--green); border-radius:50%; animation:sp .8s linear infinite; vertical-align:middle; margin-right:8px; }
@keyframes sp { to { transform:rotate(360deg); } }
.voortgang { margin:10px 0 0; padding-left:20px; font-size:12px; color:var(--muted); max-height:180px; overflow:auto; }
.downloads { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.note { font-size:12px; color:var(--muted); margin-top:8px; }
.rij { display:flex; gap:8px; flex-wrap:wrap; }
.rij input, .rij select { flex:1 1 180px; width:auto; }
table.lijst { width:100%; border-collapse:collapse; margin-top:16px; font-size:13px; }
.lijst th { text-align:left; color:var(--green); border-bottom:2px solid var(--line); padding:6px 8px; }
.lijst td { border-bottom:1px solid var(--line); padding:6px 8px; vertical-align:top; }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; background:#eef4f1; color:var(--green); }
.badge.uit { background:#f6e9e9; color:var(--rood); }
footer { text-align:center; color:var(--muted); font-size:12px; padding:16px; }
@media (max-width:600px) { .bar { flex-wrap:wrap; } .gebruiker { margin-left:0; text-align:left; } }

/* ---------- Loginpagina (zelfde uitstraling als mijn.nttl.nl) ---------- */
.login-wrap { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  background:radial-gradient(120% 120% at 20% 0%, #17463a 0%, #0A3729 70%); font-family:Roboto, "Segoe UI", Arial, sans-serif; }
.login-card { background:#fff; padding:34px 32px 28px; border-radius:14px; width:350px; max-width:100%; box-shadow:0 12px 50px rgba(0,0,0,.35); text-align:left; }
.login-logo { height:56px; width:auto; display:block; margin-bottom:14px; }
.login-title { margin:0 0 4px; font-family:"Roboto Slab", Georgia, serif; font-weight:600; font-size:22px; color:#215D4B; }
.login-sub { margin:0; color:#7A7A7A; font-size:15px; line-height:1.4; }
.login-card label { display:block; font-size:13px; font-weight:500; margin:18px 0 6px; color:#1b2733; }
.login-card input { width:100%; font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid #dfe5e2; border-radius:8px; }
.login-card input:focus { outline:2px solid #E96D1E; outline-offset:-1px; }
.login-btn { width:100%; margin-top:16px; background:#215D4B; color:#fff; border:1px solid #215D4B; border-radius:8px; padding:10px 14px; font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; }
.login-btn:hover { background:#1F574B; }
.login-btn:disabled { opacity:.7; cursor:default; }
.login-error { color:#b42318; font-size:13px; margin:12px 0 0; background:#fdeceb; border:1px solid #f4c7c3; padding:8px 10px; border-radius:8px; }
.sso-note { font-size:12px; color:#7A7A7A; margin-top:18px; line-height:1.45; }
.uitloggen { color:var(--green); font-size:12px; }
.link-groen { color:var(--green); }