/* California Coach portaal — zelfde retro/bakeliet-stijl als het dashboard */
:root{
  --camper:#2d756a; --camper-light:#3f9c8d; --teal-txt:#7fe0cd;
  --bg:#100d09; --panel1:#1c1712; --panel2:#14100b; --brass:#8a6a3a;
  --ink:#e2d9cc; --muted:#a99a7f; --dim:#7a6f5c;
  --amber:#ffb46b; --amber-glow:#ff8c2a; --danger:#f0a98c;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5;
}
a{color:var(--teal-txt);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- header ---- */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:linear-gradient(180deg,#1d2624,#141a18);
  border-bottom:2px solid #0a0e0d;padding:.8rem 1.2rem;
}
.brand{color:var(--ink);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.1em}
.brand:hover{text-decoration:none}
.vw{color:var(--ink)}
.year{
  font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive;
  color:var(--camper-light);font-weight:400;text-transform:none;letter-spacing:.02em;font-size:1.25rem
}
nav{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
nav a,.link{
  color:#b7a98e;padding:.35rem .75rem;border-radius:4px;font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent
}
nav a:hover{background:#ffffff10;text-decoration:none}
nav a.on{background:var(--camper);color:#eafaf6;border-color:#4fae9f66}
.inline{display:inline;margin:0}
.link{background:none;border:none;cursor:pointer;font:inherit}

main{max-width:860px;margin:0 auto;padding:1.4rem 1rem 3rem}

/* ---- hero ---- */
.hero{
  background:linear-gradient(135deg,#17322d,#0f1d16);
  border:1px solid #2d756a55;border-radius:14px;padding:2.4rem 1.6rem;margin-bottom:1.4rem;
  box-shadow:inset 0 1px 0 #3f9c8d22
}
.hero h1{margin:0 0 1rem;font-size:1.9rem;color:var(--ink);text-transform:uppercase;letter-spacing:.06em}
.hero h1 .year{font-size:1.6rem}
.hero .intro{max-width:54ch;color:#cfe0da}

/* ---- panelen ---- */
.card{
  background:linear-gradient(180deg,var(--panel1),var(--panel2));
  border:1px solid #8a6a3a55;border-radius:12px;padding:1.3rem 1.4rem;margin-bottom:1.2rem;
  box-shadow:inset 0 1px 0 #ffffff0d,0 3px 6px #000000aa
}
.card.narrow{max-width:360px;margin:2.4rem auto}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
h2{margin:.1rem 0 .8rem;color:var(--amber);text-shadow:0 0 6px #ff8c2a33;font-size:1.15rem;letter-spacing:.03em}
h3{color:var(--teal-txt);margin:1.2rem 0 .5rem}
.muted{color:var(--muted);font-size:.85rem}
ul{padding-left:1.2rem}li{margin:.2rem 0}

/* ---- formulieren ---- */
label{display:block;margin:.6rem 0;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
input,textarea,select{
  width:100%;margin-top:.3rem;padding:.55rem .65rem;font:inherit;color:var(--ink);
  background:#221b13;border:1px solid #8a6a3a66;border-radius:6px
}
input::placeholder,textarea::placeholder{color:#66512e}
input[type=date]{color-scheme:dark}
.row{display:flex;gap:.8rem}.row label{flex:1}
.btn{
  display:inline-block;margin-top:.9rem;background:var(--camper);color:#eafaf6;border:1px solid #4fae9f66;
  padding:.55rem 1.3rem;border-radius:6px;font:inherit;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;box-shadow:0 2px 3px #000a
}
.btn:hover{background:var(--camper-light)}
button.btn{width:auto}
.btn.cam{background:transparent;border:1px solid #8a6a3a88;color:var(--amber);margin-top:.6rem}
.btn.cam:hover{background:#221b13;border-color:var(--amber-glow)}

/* ---- items ---- */
.entries{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}
.entry{
  display:flex;justify-content:space-between;gap:1rem;padding:.7rem .85rem;
  border:1px solid #8a6a3a44;border-radius:8px;background:#1a140d
}
.entry-main strong{display:block;color:var(--ink)}
.entry .meta{color:var(--amber);font-size:.82rem;font-variant-numeric:tabular-nums}
.entry .note{margin-top:.3rem;font-size:.9rem;color:#c9bda6}
.entry-side{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;white-space:nowrap}
.file{font-size:.85rem;color:var(--teal-txt)}
.entry-actions{display:flex;gap:.7rem;align-items:center}
.entry-actions .link{padding:0;font-size:.75rem}
.edit{color:var(--teal-txt);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.del{color:var(--danger);font-size:.75rem;background:none;border:none;cursor:pointer;padding:0;text-transform:uppercase;letter-spacing:.05em}

.add{background:#0f0b06;border:1px dashed #8a6a3a55;border-radius:12px;padding:1rem 1.2rem;margin-top:1.2rem}

/* ---- dropzone ---- */
.dropzone{
  margin-top:.3rem;border:2px dashed #8a6a3a77;border-radius:10px;background:#221b13;
  padding:1.3rem 1rem;text-align:center;cursor:pointer;transition:.15s;user-select:none
}
.dropzone:hover{border-color:var(--camper-light);background:#26201a}
.dropzone.over{border-color:var(--camper-light);background:#16443d;transform:scale(1.01)}
.dropzone.has{border-color:var(--camper-light);border-style:solid;background:#12211e}
.dz-icon{font-size:1.6rem}
.dz-text{color:var(--muted);font-size:.85rem;margin-top:.2rem;text-transform:none;letter-spacing:normal}
.dz-text span{font-size:.8rem;color:var(--dim)}
.dz-file{margin-top:.5rem;color:var(--teal-txt);font-weight:600;font-size:.9rem;word-break:break-all}

/* ---- documentscanner ---- */
body.scan-open{overflow:hidden;position:fixed;width:100%}
/* Hoogte: op mobiel is 100vh het LAYOUT-venster (inclusief het stuk onder de adresbalk),
   dus valt de knoppenbalk van het scherm. 100dvh volgt de zichtbare hoogte; scanner.js
   zet daarnaast --scan-h op basis van visualViewport voor browsers zonder dvh. */
.scan-ov{
  position:fixed;top:0;left:0;width:100%;
  height:100vh;height:100dvh;height:var(--scan-h,100dvh);
  z-index:900;background:#080705;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain
}
.scan-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;background:#141a18;border-bottom:1px solid #0a0e0d
}
.scan-titel{color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
.scan-x{background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;line-height:1;padding:.2rem .5rem}
.scan-stage{flex:1;position:relative;min-height:0;background:#000}
.scan-cam,.scan-view{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;touch-action:none
}
.scan-weg{display:none}
.scan-hint{padding:.6rem 1rem;text-align:center;color:var(--muted);font-size:.85rem;min-height:2.2rem}
.scan-bar{
  display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;
  padding:.4rem 1rem 1rem;background:#0f0b06;border-top:1px solid #8a6a3a33
}
.scan-btn{
  background:transparent;border:1px solid #8a6a3a88;color:var(--ink);
  padding:.6rem 1.1rem;border-radius:8px;font:inherit;font-size:.85rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer
}
.scan-btn:hover{background:#221b13}
.scan-btn.scan-groot{background:var(--camper);border-color:#4fae9f66;color:#eafaf6;padding:.7rem 1.8rem}
.scan-btn.scan-klaar{background:var(--camper);border-color:#4fae9f66;color:#eafaf6}
.scan-btn.scan-weg-knop{color:var(--danger);border-color:#a23b2888}

/* ---- meldingen ---- */
.err{background:#3d1a10;border:1px solid #a23b28;color:var(--danger);padding:.5rem .8rem;border-radius:6px}
.ok{background:#16443d;border:1px solid #2d756a;color:var(--teal-txt);padding:.5rem .8rem;border-radius:6px}

.dl{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:#0f0b06;border:1px solid #2d756a66;border-radius:10px;padding:.9rem 1.1rem;margin:1rem 0 .4rem}
.dl-info{display:flex;flex-direction:column;gap:.15rem}
.dl-info strong{color:var(--ink)}
.dl-ver{color:var(--amber);font-size:.85rem;font-variant-numeric:tabular-nums}
.dl .btn{margin:0}

/* ---- app-documentatie ---- */
.keten{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.9rem 0 .2rem;
  background:#0f0b06;border:1px solid #8a6a3a44;border-radius:10px;padding:.8rem 1rem
}
.keten span{font-size:.82rem;color:var(--muted)}
.keten span:nth-child(odd){
  color:var(--teal-txt);background:#16443d;border:1px solid #2d756a66;
  border-radius:6px;padding:.25rem .6rem;white-space:nowrap
}
code{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:.88em;
  background:#221b13;border:1px solid #8a6a3a55;border-radius:4px;padding:.05rem .35rem;
  color:var(--amber);word-break:break-all
}
/* documentatie uit APP.md */
.doc h3{margin-top:1.6rem}
.doc h4{color:var(--ink);margin:1.1rem 0 .3rem;font-size:.95rem}
.doc p{margin:.6rem 0}
.doc ol{padding-left:1.3rem;margin:.6rem 0}
.doc ol li{margin:.35rem 0}
.doc pre{
  background:#0f0b06;border:1px solid #8a6a3a55;border-radius:8px;padding:.8rem 1rem;
  overflow-x:auto;font-size:.85rem;color:var(--teal-txt);line-height:1.4
}
.tabelwrap{overflow-x:auto;margin:.7rem 0}
.doc table{border-collapse:collapse;width:100%;font-size:.9rem}
.doc th,.doc td{border:1px solid #8a6a3a44;padding:.45rem .6rem;text-align:left;vertical-align:top}
.doc th{background:#1a140d;color:var(--amber);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.doc td strong{color:var(--ink)}

.creds{margin:.6rem 0 0}
.creds dt{
  color:var(--teal-txt);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  margin-top:.9rem;font-weight:700
}
.creds dd{margin:.25rem 0 0;padding-left:0;font-size:.92rem;color:#c9bda6}

footer{text-align:center;color:var(--dim);padding:1.6rem;font-size:.8rem;letter-spacing:.05em}

/* ---- beveiliging / diefstal-alarm (22-07) ---- */
.alarm-groot{background:#3a1414;border:1px solid #a33;color:#ffb0b0;padding:.7rem .9rem;
  border-radius:6px;font-weight:600;margin-bottom:.8rem}
.bev-stand{font-size:1.05rem;margin:.4rem 0 1rem}
.bev-stand .rood{color:#ff8a8a}
.bev-stand .amber{color:var(--amber)}
.bev-stand .teal{color:var(--teal-txt)}
.bev-pending{color:#9a8f7c;font-size:.9rem}
.bev-knoppen{display:flex;gap:.7rem;flex-wrap:wrap}
.bev-knoppen form{margin:0}
.bev-uitleg{color:#9a8f7c;font-size:.9rem;line-height:1.5;margin-top:1rem}
button.btn[disabled]{opacity:.4;cursor:default}