/* Verkeer in Suriname — vriendelijk, modern, responsive thema (geen externe deps) */
:root{
  --bg:#eef3ec; --card:#ffffff; --ink:#1c2b23; --mut:#5f6f65;
  --pri:#0e7c3a; --pri-dark:#0a5c2c; --pri-soft:#e3f3e9;
  --acc:#f5b301; --acc-soft:#fdf3d0;
  --line:#e2e9e3; --danger:#c0392b; --danger-soft:#fdecea;
  --radius:16px; --shadow:0 6px 24px rgba(20,60,35,.08);
  --touch:44px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:16px; line-height:1.55;
  background:
    radial-gradient(1200px 400px at 10% -5%, #d9efdf 0%, transparent 60%),
    radial-gradient(1000px 380px at 95% 0%, #fdf0c0 0%, transparent 55%),
    var(--bg);
}
a{color:var(--pri-dark)}
a:hover{color:var(--pri)}
:focus-visible{outline:3px solid var(--acc); outline-offset:2px; border-radius:8px}
.skip{position:absolute; left:-9999px; top:0; background:#fff; padding:8px 12px; border-radius:0 0 10px 0; z-index:99}
.skip:focus{left:0}

/* ---- Topbar ---- */
.topbar{background:linear-gradient(135deg,#0b3d24,#0e7c3a); color:#fff; position:sticky; top:0; z-index:40; box-shadow:0 2px 14px rgba(0,0,0,.18)}
.topbar-inner{max-width:1220px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 16px}
.brandwrap{display:flex; align-items:center; gap:10px; min-width:0}
.brand{color:#fff; text-decoration:none; font-weight:800; font-size:18px; display:flex; gap:10px; align-items:center; letter-spacing:.2px}
.brand-badge{background:var(--acc); color:#3a2c00; border-radius:12px; padding:5px 11px; font-weight:900; box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.brand-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.burger{display:none; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:12px; width:44px; height:44px; font-size:20px; cursor:pointer}
.burger:hover{background:rgba(255,255,255,.25)}
.topnav{display:flex; gap:10px; align-items:center}
.user{display:flex; gap:9px; align-items:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:5px 12px 5px 6px; border-radius:999px; font-size:14px}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--acc); color:#3a2c00; display:inline-flex; align-items:center; justify-content:center; font-weight:800}
.user-meta{display:flex; flex-direction:column; line-height:1.15}
.user-meta small{opacity:.85; font-size:11px; text-transform:capitalize}

/* ---- Layout ---- */
.shell{max-width:1220px; margin:0 auto; display:grid; grid-template-columns:230px minmax(0,1fr); gap:18px; padding:18px 16px 8px; min-height:72vh; align-items:start}
.shell.no-side{grid-template-columns:minmax(0,1fr)}
.side{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px; display:flex; flex-direction:column; gap:4px; position:sticky; top:76px; box-shadow:var(--shadow)}
.side a{text-decoration:none; color:var(--ink); padding:11px 12px; border-radius:12px; display:flex; gap:10px; align-items:center; font-weight:500}
.side a .ico{width:28px; text-align:center}
.side a:hover{background:var(--pri-soft)}
.side a.on{background:var(--pri); color:#fff; font-weight:700; box-shadow:0 4px 12px rgba(14,124,58,.35)}
.side a.on .ico{filter:none}
.side-foot{font-size:12.5px; color:var(--mut); background:#f6faf7; border:1px dashed var(--line); border-radius:12px; padding:9px 11px; margin-top:8px}
.scrim{display:none}
.main{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); min-width:0}
h1{margin:0 0 16px; font-size:clamp(22px,3.4vw,28px); letter-spacing:-.3px}
h1::after{content:""; display:block; width:64px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--pri),var(--acc)); margin-top:8px}
h2{font-size:18px; margin:24px 0 10px}

/* ---- Kaarten / dashboard ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:12px 0 20px}
.card{border:1px solid var(--line); border-radius:14px; padding:14px 14px 12px; background:linear-gradient(180deg,#fdfffe,#f2f8f3); position:relative; overflow:hidden}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--pri),var(--acc))}
.card b{font-size:28px; display:block; line-height:1.1}
.card span{color:var(--mut); font-size:13px}

/* ---- Knoppen ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--pri); color:#fff !important; border:0; border-radius:999px; padding:10px 18px; text-decoration:none; cursor:pointer; font-size:14.5px; font-weight:700; min-height:var(--touch); box-shadow:0 3px 10px rgba(14,124,58,.28); transition:transform .06s ease, box-shadow .15s, background .15s}
.btn:hover{background:var(--pri-dark); box-shadow:0 5px 14px rgba(14,124,58,.35)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:#e9eef0; color:#16241c !important; box-shadow:none}
.btn.sec:hover{background:#dbe4e1}
.btn.warn{background:var(--danger)}
.btn.warn:hover{background:#96281b}
.btn.small{padding:7px 13px; font-size:13.5px; min-height:38px}
.btn.ghost{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.28)}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(max-width:640px){.grid3{grid-template-columns:1fr}}

/* ---- Formulieren ---- */
label{display:block; font-size:13.5px; font-weight:600; color:#3c4c42; margin:12px 0 5px}
input,select,textarea{width:100%; padding:11px 12px; border:1.5px solid #c9d6cc; border-radius:12px; font-size:15px; background:#fff; color:var(--ink); min-height:var(--touch)}
input:focus,select:focus,textarea:focus{border-color:var(--pri); box-shadow:0 0 0 3px rgba(14,124,58,.15); outline:none}
textarea{min-height:76px; resize:vertical}
input[type="checkbox"],input[type="radio"]{width:auto; min-height:auto; accent-color:var(--pri)}
.form{max-width:780px}
.searchbar{display:flex; gap:8px; margin-bottom:12px; flex:1}
.searchbar input{flex:1}

/* ---- Meldingen ---- */
.flash{padding:12px 14px 12px 44px; border-radius:12px; margin-bottom:14px; position:relative; font-weight:500}
.flash.ok{background:#e6f6ec; border:1px solid #a9dfbc}
.flash.ok::before{content:"✓"; position:absolute; left:12px; top:9px; width:26px; height:26px; border-radius:50%; background:var(--pri); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800}
.flash.err{background:var(--danger-soft); border:1px solid #f0b9b1}
.flash.err::before{content:"!"; position:absolute; left:12px; top:9px; width:26px; height:26px; border-radius:50%; background:var(--danger); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800}

/* ---- Tabellen ---- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin:0 -2px}
.table-wrap table{border:0}
table{width:100%; border-collapse:collapse; font-size:14.5px; background:#fff}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
th{background:#eef5ef; font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; color:#33503e; white-space:nowrap; position:sticky; top:0}
tbody tr:hover td{background:#f4faf5}
tbody tr:last-child td{border-bottom:0}
.thumb{width:110px; height:70px; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#eef2ee}

/* ---- Examen ---- */
.exam-q{border:1.5px solid var(--line); border-radius:14px; padding:16px; margin:14px 0; background:#fdfffe}
.exam-q img.q{max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); display:block}
.opts label{display:flex; gap:10px; align-items:flex-start; background:#f6faf7; border:1.5px solid var(--line); border-radius:12px; padding:12px; margin:8px 0; color:var(--ink); cursor:pointer; font-weight:500; min-height:var(--touch)}
.opts label:hover{border-color:var(--pri)}
.opts label:has(input:checked){border-color:var(--pri); background:var(--pri-soft); box-shadow:0 0 0 3px rgba(14,124,58,.12)}
.opts input{margin-top:4px; width:20px; height:20px}
.pill{display:inline-block; padding:3px 12px; border-radius:999px; font-size:12.5px; font-weight:700; background:#eef2ff}
.pill.good{background:#dcfce7; color:#14532d}
.pill.bad{background:#fee2e2; color:#7f1d1d}

/* ---- Maquette editor ---- */
.editor{display:grid; grid-template-columns:260px minmax(0,1fr); gap:14px}
.editor-big{grid-template-columns:300px minmax(0,1fr)}
.editor-big .lib{max-height:740px}
.editor-big .lib-grid{grid-template-columns:repeat(4,1fr)}
.lib{border:1.5px solid var(--line); border-radius:14px; padding:10px; max-height:660px; overflow:auto; background:#fbfdfb}
.lib h3{margin:10px 2px 6px; font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.6px}
.lib-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.lib-grid img{width:100%; height:46px; object-fit:contain; background:#fff; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; transition:transform .1s, border-color .1s}
.lib-grid img:hover{border-color:var(--pri); transform:scale(1.05)}
.stage-wrap{border:1.5px solid var(--line); border-radius:14px; padding:12px; background:#fff; min-width:0}
#stage{position:relative; width:100%; max-width:660px; aspect-ratio:1/1; margin:0 auto; border:2px dashed #9db5a4; border-radius:12px; overflow:hidden; background-size:cover; background-position:center; background-color:#eef4ef; touch-action:none}
#stage img.item{position:absolute; cursor:move; user-select:none; -webkit-user-drag:none}
#stage img.item.sel{outline:3px solid var(--acc); outline-offset:1px; border-radius:4px}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.toolbar .btn{flex:1 1 auto}

/* ---- Voettekst / login ---- */
.foot{max-width:1220px; margin:10px auto 30px; padding:0 16px; color:var(--mut); font-size:13px; display:flex; gap:8px; flex-wrap:wrap}
.login{max-width:440px; margin:34px auto; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow)}
.login::before{content:"🚗 Theorie-examen oefenen"; display:block; text-align:center; font-weight:800; font-size:15px; color:var(--pri-dark); background:var(--pri-soft); border-radius:12px; padding:10px; margin-bottom:14px}
.canvas-render{position:relative; width:100%; max-width:560px; aspect-ratio:1/1; border:1px solid var(--line); border-radius:12px; overflow:hidden; background-size:cover; background-position:center; background-color:#eef4ef}
.canvas-render img{position:absolute}

/* ---- Responsive ---- */
@media(max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr); padding:14px 12px 4px}
  .burger{display:inline-flex; align-items:center; justify-content:center}
  .side{position:fixed; inset:64px auto 0 0; width:min(300px,86vw); z-index:50; border-radius:0 18px 18px 0; transform:translateX(-105%); transition:transform .22s ease; top:60px; max-height:calc(100dvh - 60px); overflow:auto}
  body.side-open .side{transform:none; box-shadow:0 12px 40px rgba(0,0,0,.3)}
  body.side-open .scrim{display:block; position:fixed; inset:60px 0 0 0; background:rgba(10,30,18,.45); z-index:45}
  .main{padding:18px 16px}
  .editor{grid-template-columns:minmax(0,1fr)}
  .lib{max-height:300px}
  .user-meta{display:none}
  .brand-name{font-size:16px}
}
@media(max-width:640px){
  body{font-size:15px}
  .topbar-inner{padding:8px 10px}
  .main{padding:14px 12px; border-radius:14px}
  .grid2{grid-template-columns:1fr}
  .row .btn, .row button{flex:1 1 100%}
  .searchbar{flex-basis:100%}
  th,td{padding:8px 9px; font-size:13.5px}
  .thumb{width:84px; height:56px}
  .card b{font-size:24px}
  .login{margin:16px auto; padding:20px 16px}
  .exam-q{padding:12px}
  #stage{width:100%}
  .canvas-render{width:100%}
  .toolbar .btn{min-height:40px; font-size:13px; padding:8px 10px}
}
@media print{
  body{background:#fff}
  .topbar,.side,.foot,.noprint,.scrim,.burger,.skip{display:none !important}
  .shell{display:block; padding:0}
  .main{border:0; box-shadow:none; padding:0}
  .table-wrap{border:0; overflow:visible}
}