:root { --bg:#0f172a; --card:#fff; --line:#e2e8f0; --ink:#1e293b; --accent:#2563eb; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background:#f1f5f9; color:var(--ink); }
.topbar { display:flex; align-items:center; gap:12px; padding:12px 20px;
          background:var(--bg); color:#fff; }
.topbar .brand { font-weight:700; letter-spacing:.3px; }
.topbar .spacer { flex:1; }
.topbar .who { opacity:.8; font-size:14px; }
.btn { display:inline-block; padding:8px 14px; border-radius:8px; background:var(--accent);
       color:#fff; text-decoration:none; border:0; font:inherit; cursor:pointer; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px;
        padding:20px; margin:20px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
h1,h2 { margin-top:0; }
#map { height:380px; margin:20px; border-radius:12px; border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:14px; }
th { color:#64748b; font-weight:600; }
/* ---- login / wachtwoord (dialoog-stijl) ---- */
.login { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
         gap:14px; padding:20px; background:linear-gradient(180deg,#eef2f7,#dbe3ec); }
.login-logo { height:104px; width:auto; max-width:86%; display:block; margin-bottom:4px; }
.login-card { width:360px; max-width:94vw; background:#fff; border-radius:10px; overflow:hidden;
              box-shadow:0 14px 44px rgba(20,28,40,.20); }
.login-head { background:#05578B; color:#fff; padding:12px 18px; font-size:15px; font-weight:600; }
.login-body { padding:18px 22px 22px; }
.login-body label { display:block; margin:12px 0 5px; font-size:13px; color:#4a5260; font-weight:600; }
.login-body input { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #cfd6e0;
                    border-radius:7px; font:inherit; }
.login-body input:focus { outline:none; border-color:#2b7de0; box-shadow:0 0 0 3px rgba(43,125,224,.12); }
.login-btn { width:100%; margin-top:20px; padding:11px; border-radius:7px; border:0; background:#05578B;
             color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.login-btn:hover { background:#04466f; }
.login-links { margin-top:14px; text-align:center; font-size:13px; }
.login-links a { color:#0094D2; text-decoration:none; }
.login-links a:hover { text-decoration:underline; }
.login-hint { font-size:13px; color:#5a6270; margin:0 0 6px; }
.login .notice { background:#ebfbee; border:1px solid #b2e2bd; color:#2b8a3e; padding:10px 12px;
                 border-radius:8px; font-size:14px; }
.error { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca;
         padding:10px 12px; border-radius:8px; font-size:14px; }

/* ---- navigatie ---- */
.navlink { color:#cbd5e1; text-decoration:none; padding:6px 10px; border-radius:7px; font-size:14px; }
.navlink:hover { background:rgba(255,255,255,.08); color:#fff; }
.navlink.on { background:rgba(255,255,255,.14); color:#fff; }

/* ---- live kaart ---- */
.maplayout { display:flex; height: calc(100vh - 52px); }
.maplayout #map { flex:1; height:100%; width:auto; margin:0; border:0; border-radius:0; }
.sidebar { width:300px; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.sidebar-head { padding:12px; border-bottom:1px solid var(--line); }
.sidebar-head input { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.devlist { list-style:none; margin:0; padding:0; overflow-y:auto; }
.devitem { display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid #f1f5f9; cursor:pointer; }
.devitem:hover { background:#f8fafc; }
.devitem .dot { width:11px; height:11px; border-radius:50%; flex:none; }
.devitem .meta { display:flex; flex-direction:column; line-height:1.35; }
.devitem small { color:#64748b; }
.veh-marker { transition: transform .8s linear; }   /* markers schuiven soepel mee */
.veh { transition: transform .8s linear; }

/* ---- statusbadges ---- */
.badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; color:#fff; }
.badge.moving { background:#16a34a; } .badge.stopped { background:#2563eb; }
.badge.nofix { background:#d97706; }  .badge.offline { background:#94a3b8; }

/* ---- tabel + acties ---- */
.card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.actions { display:flex; gap:8px; align-items:center; }
.actions form { margin:0; }
.btn.small { padding:5px 10px; font-size:13px; }
.btn.danger { background:#dc2626; }
.btn.ghost { background:#e2e8f0; color:#1e293b; }
.muted { color:#94a3b8; }

/* ---- formulier ---- */
.card.narrow { max-width:480px; }
.card label { display:block; margin:12px 0 4px; font-size:14px; }
.card input[type=text], .card input:not([type]) { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.card label.check { display:flex; align-items:center; gap:8px; margin-top:16px; }
.card label.check input { width:auto; }
.form-actions { margin-top:20px; display:flex; gap:10px; }
.err { display:block; color:#b91c1c; font-size:13px; margin-top:4px; }