/* OnTrack – gedeelde stijl (licht, donkerblauw + geel) */
:root{
  --navy:#0b1f4d; --navy-2:#132f6b; --geel:#facc15; --blauw:#1d4ed8;
  --tekst:#0f172a; --zacht:#64748b; --lijn:#e5e7eb; --bg:#f4f6f9; --wit:#fff;
  --paars:#7c3aed; --rood:#dc2626; --oranje:#ea580c; --groen:#16a34a; --grijs:#94a3b8;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--tekst)}
a{color:inherit}

/* Menubalk */
.ot-header{background:var(--navy);color:#fff;height:62px;display:flex;align-items:center;padding:0 24px;gap:24px;position:sticky;top:0;z-index:20}
.ot-logo{font-weight:800;font-size:19px;display:flex;gap:10px;align-items:center;text-decoration:none;color:#fff}
.ot-logo b{width:26px;height:26px;border-radius:7px;background:var(--geel);display:inline-block}
.ot-nav{display:flex;gap:4px}
.ot-nav a{padding:8px 12px;border-radius:8px;font-size:14px;color:#bfdbfe;font-weight:500;text-decoration:none;white-space:nowrap}
.ot-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.ot-nav a.act{background:rgba(255,255,255,.14);color:#fff}
.ot-me{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px;color:#bfdbfe}
.ot-me a{color:#bfdbfe;text-decoration:none}.ot-me a:hover{color:#fff}
.ot-av{width:34px;height:34px;border-radius:50%;background:var(--geel);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}

/* Pagina */
.ot-wrap{max-width:1500px;margin:0 auto;padding:24px 24px 50px}
.ot-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.ot-head h1{font-size:28px;margin:0;font-weight:800;letter-spacing:-.025em}
.ot-sub{color:var(--zacht);margin-top:4px;font-size:14px}
.ot-acts{display:flex;gap:8px;flex-wrap:wrap}
.ot-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;border:1px solid #e2e8f0;background:#fff;color:var(--tekst);text-decoration:none;cursor:pointer}
.ot-btn:hover{border-color:#cbd5e1}
.ot-btn.pri{background:var(--blauw);border-color:var(--blauw);color:#fff}
.ot-btn.pri:hover{background:#1e40af}
.ot-card{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:18px}

/* menu inklappen zodra het niet meer op één regel past */
@media(max-width:1400px){
  .ot-nav{display:none}
  .ot-me .ot-naam{display:none}
}
@media(max-width:800px){
  .ot-header{padding:0 14px}
  .ot-wrap{padding:16px 14px 40px}
  .ot-head{align-items:flex-start}
  .ot-acts{width:100%}.ot-acts .ot-btn{flex:1;justify-content:center}
}

/* ---------- Mobiel menu ---------- */
.ot-menu-knop{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;padding:4px 8px;margin-left:auto}
@media(max-width:1400px){
  .ot-menu-knop{display:block}
  .ot-me{margin-left:0}
  .ot-nav.open{display:flex;position:absolute;top:62px;left:0;right:0;background:var(--navy);flex-direction:column;padding:8px 12px 14px;box-shadow:0 10px 20px rgba(0,0,0,.2)}
  .ot-nav.open a{padding:12px}
}

/* ---------- Algemene onderdelen (voor alle pagina's) ---------- */
.ot-wrap h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.ot-wrap h2{font-size:18px;font-weight:700;margin:0 0 12px}
.ot-wrap .card,.ot-wrap .ot-card{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.ot-smal{max-width:760px}
.ot-wrap .btn,.ot-wrap .button,.ot-wrap button.btn{display:inline-flex;align-items:center;gap:6px;background:var(--blauw);color:#fff;border:1px solid var(--blauw);padding:9px 15px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;font-family:inherit;line-height:1.2}
.ot-wrap .btn:hover,.ot-wrap .button:hover{background:#1e40af;border-color:#1e40af}
.ot-wrap .btn.grijs,.ot-wrap .btn.secundair{background:#fff;color:var(--tekst);border-color:#e2e8f0}
.ot-wrap .btn.grijs:hover,.ot-wrap .btn.secundair:hover{background:#f8fafc;border-color:#cbd5e1}
.ot-wrap .btn.rood{background:var(--rood);border-color:var(--rood)}
.ot-wrap .btn.klein{padding:6px 10px;font-size:13px;border-radius:8px}
.ot-wrap .button{width:auto}
.ot-wrap .link,.ot-wrap .action-link{color:var(--blauw);text-decoration:none;font-weight:600}
.ot-wrap .link:hover,.ot-wrap .action-link:hover{text-decoration:underline}
.ot-wrap table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
.ot-wrap th{background:#f8fafc;color:var(--zacht);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:11px 14px;border-bottom:1px solid var(--lijn)}
.ot-wrap td{padding:12px 14px;border-bottom:1px solid #f1f5f9;font-size:14px;vertical-align:middle}
.ot-wrap tr:last-child td{border-bottom:0}
.ot-wrap tbody tr:hover td,.ot-wrap table tr:hover td{background:#fafbfc}
.ot-wrap .card table,.ot-wrap .ot-card table{border:0;border-radius:0}
.ot-tabel{overflow-x:auto;border-radius:14px}
.ot-wrap label{font-weight:600;font-size:14px}
.ot-wrap input[type=text],.ot-wrap input[type=email],.ot-wrap input[type=password],.ot-wrap input[type=number],.ot-wrap input[type=date],.ot-wrap input[type=search],.ot-wrap select,.ot-wrap textarea{
  width:100%;max-width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:10px;font:inherit;font-size:15px;background:#fff;color:var(--tekst);margin-top:4px}
.ot-wrap input:focus,.ot-wrap select:focus,.ot-wrap textarea:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.ot-wrap .msg-error,.ot-wrap .error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;padding:11px 14px;border-radius:10px;margin-bottom:14px}
.ot-wrap .msg-success,.ot-wrap .ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;padding:11px 14px;border-radius:10px;margin-bottom:14px}
.ot-wrap .muted,.ot-wrap .hint{color:var(--zacht)}
.ot-wrap .badge{display:inline-block;padding:4px 10px;border-radius:99px;color:#fff;font-weight:700;font-size:12px;letter-spacing:.02em}
.ot-wrap .badge-paars,.ot-wrap span.paars{background:var(--paars);color:#fff}
.ot-wrap .badge-rood,.ot-wrap span.rood{background:var(--rood);color:#fff}
.ot-wrap .badge-oranje,.ot-wrap span.oranje{background:var(--oranje);color:#fff}
.ot-wrap .badge-groen,.ot-wrap span.groen{background:var(--groen);color:#fff}
.ot-wrap span.paars,.ot-wrap span.rood,.ot-wrap span.oranje,.ot-wrap span.groen{display:inline-block;padding:4px 10px;border-radius:99px;font-weight:700;font-size:12px}
.ot-terug{display:inline-flex;align-items:center;gap:6px;color:var(--zacht);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:12px}
.ot-terug:hover{color:var(--tekst)}

/* ---------- Pagina zonder menubalk (login e.d.) ---------- */
.ot-los{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:radial-gradient(900px 400px at 80% -10%,#1e3a8a 0,transparent 60%),linear-gradient(135deg,#0b1f4d,#132f6b)}
.ot-los .ot-card{width:100%;max-width:420px;padding:28px;border:0;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.ot-los .ot-logo{color:var(--navy);margin-bottom:18px}
.ot-los h1{font-size:24px;margin:0 0 6px}
.ot-los label{display:block;margin-top:14px;font-weight:600;font-size:14px}
.ot-los input{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px;font:inherit;font-size:15px;margin-top:6px}
.ot-los input:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.ot-los button{width:100%;margin-top:20px;background:var(--blauw);color:#fff;border:0;border-radius:10px;padding:13px;font:600 15px inherit;font-family:inherit;cursor:pointer}
.ot-los button:hover{background:#1e40af}
.ot-los .msg-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;padding:10px 12px;border-radius:10px;margin-top:12px;font-size:14px}
.ot-los .msg-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;padding:10px 12px;border-radius:10px;margin-top:12px;font-size:14px}
.ot-los a{color:var(--blauw);font-weight:600}

.ot-wrap td.groen{color:var(--groen);font-weight:700}.ot-wrap td.oranje{color:var(--oranje);font-weight:700}.ot-wrap td.rood{color:var(--rood);font-weight:700}.ot-wrap td.paars{color:var(--paars);font-weight:700}

.ot-wrap td a{color:var(--blauw);font-weight:600;text-decoration:none}
.ot-wrap td a:hover{text-decoration:underline}
.ot-wrap td a.btn{color:#fff;text-decoration:none}