/* Opmaak van het Processware-skelet, met de kleuren van autosiero.nl (app voor één klant, zelfde als PW-Carsys): donkerblauw
   #023f6b voor de kopbalk, #0163a6 als accent, helder blauw #048dee voor de hoofdknop, rood #f04b47 en
   groen #2fb15a voor fout en goed. Letters blijven Space Grotesk / JetBrains Mono, zelf geserveerd. */

:root {
  --letter: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cijfer: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bg: #f3f6fa; --kaart: #ffffff; --rand: #d9e2ec; --tekst: #0f2a44; --zacht: #5b7a99;
  --accent: #0163a6; --inkt: #023f6b; --inkt-tekst: #ffffff; --link: #0163a6; --knop: #048dee;
  --ok: #2fb15a; --ok-bg: #e6f6ec; --let-op: #c7881c; --fout: #e03c38; --fout-bg: #fdecec;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1a2a; --kaart: #122840; --rand: #1f3a55; --tekst: #e7eef6; --zacht: #9ab4cf;
    --accent: #4aa8f0; --inkt: #023f6b; --link: #6dbcf7; --knop: #048dee;
    --ok: #4fd07a; --ok-bg: #123524; --let-op: #e0a63a; --fout: #ff6b66; --fout-bg: #3d1a1a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 400 16px/1.55 var(--letter); }
h1, h2 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 .75rem; }
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, .cijfer, .log-uit { font-family: var(--cijfer); }
code { background: var(--rand); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.zacht { color: var(--zacht); }
.klein { font-size: .875rem; }

.kopbalk { background: var(--inkt); color: var(--inkt-tekst); padding-top: env(safe-area-inset-top); }
.kopbalk .binnen { max-width: 860px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; gap: 16px; }
.kopbalk .naam { font-weight: 700; font-size: 1.1rem; color: inherit; text-decoration: none; flex: 1; }
.kopbalk nav { display: flex; align-items: center; gap: 14px; }
.kopbalk nav a, .tekstknop { color: inherit; opacity: .85; text-decoration: none; background: none; border: 0; padding: 0; }
.kopbalk nav a:hover, .tekstknop:hover { opacity: 1; text-decoration: underline; }

.pagina { max-width: 860px; margin: 0 auto; padding: 22px 18px 60px; }
.pagina.smal { max-width: 460px; }

.blok { background: var(--kaart); border: 1px solid var(--rand); border-radius: 12px; padding: 18px; margin: 18px 0; }
.stapel { display: grid; gap: 14px; }
.rij2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.acties { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }

.veld { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
.veld input, .veld select, .veld textarea { font-weight: 400; padding: 9px 11px; border: 1px solid var(--rand); border-radius: 8px; background: var(--kaart); width: 100%; }

.knop { display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--rand); background: var(--kaart); color: var(--tekst); text-decoration: none; font-weight: 600; }
.knop:hover { border-color: var(--link); }
.knop.hoofd { background: var(--link); border-color: var(--link); color: #fff; }
@media (prefers-color-scheme: dark) { .knop.hoofd { color: #0d1620; } }

.berichten { display: grid; gap: 8px; margin-bottom: 16px; }
.bericht { padding: 10px 14px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); }
.bericht.fout { background: var(--fout-bg); color: var(--fout); }

.tabel-wrap { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rand); }
.tabel th { font-size: .82rem; color: var(--zacht); font-weight: 600; }

.log-uit { background: var(--bg); border: 1px solid var(--rand); border-radius: 8px; padding: 10px; font-size: .8rem; max-height: 320px; overflow: auto; white-space: pre-wrap; }

/* ---------- raadplegen: lijsten voor op de telefoon ---------- */
.kopbalk nav form { display: inline; }
.kopbalk .naam { white-space: nowrap; }
@media (max-width: 420px) { .kopbalk .binnen { gap: 10px; padding: 10px 14px; } .kopbalk nav { gap: 10px; font-size: .95rem; } }
.knop.groot { padding: 13px 18px; font-size: 1.05rem; width: 100%; }
.knop.klein { padding: 5px 10px; font-size: .85rem; }
.knop.hoofd { background: var(--knop); border-color: var(--knop); }
.midden { text-align: center; }
.rechts { text-align: right; }
.fout { color: var(--fout); }
.bericht.tip { display: block; background: var(--ok-bg); color: var(--ok); text-decoration: none; margin-bottom: 14px; }

.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.cijfers > div { background: var(--kaart); border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; display: grid; min-width: 0; }
.cijfers strong { font-size: .95rem; overflow-wrap: anywhere; }
body { overflow-x: hidden; }                      /* nooit zijwaarts schuiven op een telefoon */

.zoekveld { width: 100%; padding: 11px 13px; border: 1px solid var(--rand); border-radius: 10px; background: var(--kaart); font-size: 1rem; }
.zoekrij { display: flex; gap: 8px; margin-bottom: 14px; }
.zoekrij .zoekveld { flex: 1; }

.lijst { display: grid; gap: 8px; margin-top: 12px; }
.auto-kaart { display: block; background: var(--kaart); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; color: inherit; text-decoration: none; }
.auto-kaart:hover { border-color: var(--link); }
.auto-kaart .kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.auto-kaart .merk { font-weight: 600; flex: 1; }
.auto-kaart .bedrag { font-weight: 600; white-space: nowrap; }
.kenteken { font-family: var(--cijfer); font-weight: 700; background: #f5c400; color: #111; padding: 1px 7px; border-radius: 5px; font-size: .9rem; white-space: nowrap; }
.kenteken.groot { font-size: 1.1rem; vertical-align: middle; }
.label { font-size: .75rem; padding: 1px 7px; border-radius: 999px; background: var(--rand); }
.label.ok { background: var(--ok-bg); color: var(--ok); }

.feiten { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.feiten dt { color: var(--zacht); font-size: .875rem; }
.feiten dd { margin: 0; overflow-wrap: anywhere; }
.totaal { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rand); font-size: 1.05rem; }
h3.klein { margin: 12px 0 4px; font-size: .9rem; color: var(--zacht); }

.regel-kaart { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.regel-kaart > div { flex: 1; }
.regel-kaart:last-child { border-bottom: 0; }
.inlijn { display: inline-flex; gap: 4px; align-items: center; margin: 2px 4px 2px 0; }
.inlijn input { width: 9em; padding: 4px 7px; border: 1px solid var(--rand); border-radius: 6px; background: var(--kaart); }
.werkkaart { border-top: 1px solid var(--rand); padding: 8px 0; }
.werkkaart summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.werkkaart summary::-webkit-details-marker { display: none; }