/* Huisstijl: dezelfde kleuren als de PDF's en het monteursscherm (CONFIG.HUISSTIJL). */
:root {
  --donkerblauw: #131C63;
  --groen: #3FA62A;
  --blauw: #0E8FE0;
  --grijs: #F4F5F7;
  --lijn: #D8DCE6;
  --tekst: #1d2233;
  --zacht: #5d6478;
  --rood: #c0392b;
  --oranje: #d97a00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tekst);
  background: var(--grijs);
}

.kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--lijn);
  position: sticky; top: 0; z-index: 2;
}
.merk img { height: 34px; display: block; }
.wie { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--zacht); }
.wie form { margin: 0; }

main { max-width: 640px; margin: 0 auto; padding: 16px; }
main.breed { max-width: 1100px; }

/* Kantooroverzicht */
.tabs { display: flex; gap: 4px; background: #fff; border: 1px solid var(--lijn); border-radius: 8px; padding: 3px; }
.tabs a { padding: 6px 12px; border-radius: 6px; text-decoration: none; color: var(--zacht); font-weight: 600; font-size: 14px; }
.tabs a.actief { background: var(--donkerblauw); color: #fff; }
.tellers { display: flex; gap: 18px; margin: 4px 0 12px; color: var(--zacht); font-size: 14px; }
.tellers strong { color: var(--tekst); font-size: 16px; }
.tabel-schuif { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--zacht); padding: 6px 8px; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.tabel td { padding: 9px 8px; border-bottom: 1px solid var(--grijs); vertical-align: top; }
.tabel td .label { margin: 0 4px 3px 0; }
.label-rood { background: #fdecea; color: var(--rood); }
.gegevens { border-collapse: collapse; margin: 10px 0; width: 100%; }
.gegevens th { text-align: left; font-weight: 600; color: var(--zacht); padding: 5px 12px 5px 0; vertical-align: top; width: 38%; font-size: 14px; }
.gegevens td { padding: 5px 0; }

h1 { font-size: 22px; margin: 0 0 8px; color: var(--donkerblauw); }
h2 { font-size: 18px; margin: 0 0 10px; color: var(--donkerblauw); }
h3 { font-size: 15px; margin: 14px 0 4px; }
a { color: var(--blauw); }

.kaart {
  background: #fff; border: 1px solid var(--lijn); border-radius: 12px;
  padding: 16px; margin-bottom: 14px;
}
.kaart.smal { max-width: 420px; margin: 24px auto; }
.kaart.nadruk { border: 2px solid var(--blauw); }

.zacht { color: var(--zacht); }
.klein { font-size: 13px; }

label { display: block; margin: 10px 0; font-weight: 600; font-size: 14px; }
input[type=text], input[type=email], input[type=password], input[type=datetime-local], textarea {
  display: block; width: 100%; margin-top: 4px; padding: 11px 12px;
  font: inherit; font-weight: 400; border: 1px solid var(--lijn); border-radius: 8px; background: #fff;
}
input:focus, textarea:focus { outline: 2px solid var(--blauw); border-color: var(--blauw); }

.knop {
  display: inline-block; padding: 11px 18px; border: 0; border-radius: 8px;
  background: var(--donkerblauw); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; text-align: center;
}
.knop.licht { background: #fff; color: var(--donkerblauw); border: 1px solid var(--donkerblauw); }
.knop.groot { width: 100%; padding: 14px; font-size: 17px; background: var(--groen); }
.knop:disabled { opacity: .6; cursor: wait; }
button.link { background: none; border: 0; padding: 0; color: var(--blauw); font: inherit; cursor: pointer; text-decoration: underline; }

.rij { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.rij input { flex: 1 1 200px; margin: 0; }

.melding { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; background: #eef5ff; }
.melding.goed { background: #e8f6e4; color: #245c17; }
.melding.fout { background: #fdecea; color: var(--rood); }

.label { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.label-blauw { background: #e3f1fc; color: #0b6fb0; }
.label-oranje { background: #fff1de; color: var(--oranje); }
.label-groen { background: #e3f4de; color: #2d7a1d; }
.label-grijs { background: #eceef2; color: var(--zacht); }
.label.groot { font-size: 16px; padding: 8px 14px; }

.lijst { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.klus {
  display: block; background: #fff; border: 1px solid var(--lijn); border-radius: 12px;
  padding: 14px 16px; color: inherit; text-decoration: none;
}
.klus:hover { border-color: var(--blauw); }
.klus-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.klus-kop h1 { margin: 0; }

details { margin: 10px 0; }
summary { cursor: pointer; color: var(--blauw); font-weight: 600; }

.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; }
.fotos a { position: relative; display: block; }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.fotos span {
  position: absolute; left: 4px; bottom: 4px; background: rgba(19, 28, 99, .8);
  color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 4px;
}
.fotoform input[type=file] { display: block; margin: 8px 0; max-width: 100%; }
.keuze { display: flex; gap: 16px; }
.keuze label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 4px 0; }

.qr { max-width: 260px; margin: 8px auto 12px; background: #fff; padding: 8px; }
.qr svg { width: 100%; height: auto; display: block; }

.notities { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.notities li { padding: 8px 12px; border-radius: 10px; max-width: 90%; }
.van-mij { background: #e3f1fc; align-self: flex-end; }
.van-kantoor { background: var(--grijs); align-self: flex-start; }