/* ---------------------------------------------------------------------------
   Werkbonnensysteem - opmaak
   Mobile first: de monteur werkt op een telefoon, kantoor op een laptop.
   --------------------------------------------------------------------------- */

:root {
  /* Zwart als hoofdkleur, koel grijs voor de letters. De "glans" is een
     verticaal verloop met een lichte rand bovenop: dat leest als een
     gelakt of geanodiseerd oppervlak zonder dat het glimmend wordt. */
  --merk:        #141416;
  --merk-donker: #08080a;
  --merk-licht:  #ecedf0;
  --merk-glans:  linear-gradient(180deg, #26272a 0%, #131315 62%, #0e0e10 100%);
  --merk-knop:   linear-gradient(180deg, #2b2c30 0%, #141416 100%);
  --merk-knop-h: linear-gradient(180deg, #35363b 0%, #1b1b1e 100%);
  --glans-rand:  inset 0 1px 0 rgba(255,255,255,.16);
  --glans-knop:  inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.28);
  --inkt:        #1c1e21;
  --grijs:       #54595f;
  --grijs-licht: #eef0f2;
  --lijn:        #dfe3e8;
  --vlak:        #ffffff;
  --achtergrond: #f4f5f7;
  --groen:       #1d7a4c;
  --groen-vlak:  #e6f4ec;
  --oranje:      #a35a08;
  --oranje-vlak: #fdf0e2;
  --blauw:       #17568c;
  --blauw-vlak:  #e8f0f8;
  --rood:        #b3261e;
  --rood-vlak:   #fdeceb;
  --radius:      10px;
  --schaduw:     0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--inkt);
  background: var(--achtergrond);
  -webkit-text-size-adjust: 100%;
}

/* Zwart valt als linkkleur niet op tussen de gewone tekst, dus krijgt een
   losse link een streepje in plaats van een kleur. Knoppen, de balk en de
   kaarten zetten dat zelf weer uit. */
a { color: #33393f; text-decoration: underline;
    text-decoration-color: rgba(51,57,63,.34); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

/* --- Balk ---------------------------------------------------------------- */
.balk {
  background: var(--merk-glans);
  box-shadow: var(--glans-rand);
  color: #fff;
  padding-top: env(safe-area-inset-top);
  position: sticky; top: 0; z-index: 40;
}
.balk-in {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 16px; flex-wrap: wrap;
}
.merk { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.merk-logo {
  font-weight: 800; letter-spacing: .5px; font-size: 15px;
  border: 2px solid #fff; padding: 1px 6px; border-radius: 3px;
}
.merk-tekst { font-weight: 600; font-size: 15px; opacity: .95; }
.hoofdnav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.hoofdnav a {
  color: #fff; text-decoration: none; opacity: .82;
  padding: 6px 11px; border-radius: 7px; font-size: 14.5px; white-space: nowrap;
}
.hoofdnav a:hover { opacity: 1; background: rgba(255,255,255,.12); }
.hoofdnav a.aan { opacity: 1; background: rgba(255,255,255,.19); font-weight: 600; }
.balk-rechts { display: flex; align-items: center; gap: 12px; }
.wie { font-size: 13.5px; line-height: 1.15; text-align: right; }
.wie small { display: block; opacity: .7; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
.uit {
  color: #fff; text-decoration: none; font-size: 13px;
  border: 1px solid rgba(255,255,255,.4); padding: 5px 10px; border-radius: 7px;
}
.uit:hover { background: rgba(255,255,255,.14); }

/* --- Indeling ------------------------------------------------------------ */
main { max-width: 1180px; margin: 0 auto; padding: 22px 16px 60px; }
main.breed { max-width: 100%; }
.voet {
  max-width: 1180px; margin: 0 auto; padding: 0 16px 34px;
  color: var(--grijs); font-size: 12.5px;
}
.versie { float: right; opacity: .6; }
/* De regel van de bouwer, bewust klein en rustig. */
.voet .vermelding { clear: both; padding-top: 7px; font-size: 11.5px; opacity: .75; }

h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: -.2px; }
h2 { font-size: 17px; margin: 26px 0 10px; }
h3 { font-size: 14px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .5px; color: var(--grijs); }
.onderkop { color: var(--grijs); margin: 0 0 20px; font-size: 14.5px; }

.kop-rij {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.kop-rij .acties { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Kaarten ------------------------------------------------------------- */
.kaart {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: 18px; margin-bottom: 16px;
}
.kaart-strak { padding: 0; overflow: hidden; }
.kaart h2:first-child, .kaart h3:first-child { margin-top: 0; }

.rooster { display: grid; gap: 16px; }
.rooster-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.rooster-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rooster-4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

.kental { text-align: left; }
.kental .getal { font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; }
.kental .label { color: var(--grijs); font-size: 13px; }

/* --- Tabellen ------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--grijs); padding: 11px 14px; border-bottom: 1px solid var(--lijn);
  background: #fafbfc; white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfd; }
td.rechts, th.rechts { text-align: right; }
td.nummer { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel-omhulsel { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Labels -------------------------------------------------------------- */
.label {
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.label.grijs  { background: var(--grijs-licht); color: var(--grijs); }
.label.blauw  { background: var(--blauw-vlak);  color: var(--blauw); }
.label.oranje { background: var(--oranje-vlak); color: var(--oranje); }
.label.groen  { background: var(--groen-vlak);  color: var(--groen); }
.label.rood   { background: var(--rood-vlak);   color: var(--rood); }

/* --- Knoppen ------------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--merk-knop); color: #fff; border: 1px solid var(--merk);
  box-shadow: var(--glans-knop);
  padding: 10px 17px; border-radius: 8px; font-size: 14.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit; line-height: 1.25;
}
.knop:hover { background: var(--merk-knop-h); border-color: var(--merk-donker); }
.knop.rustig { background: linear-gradient(180deg,#fff 0%,#f5f6f8 100%);
               color: var(--inkt); border-color: var(--lijn);
               box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16,24,40,.06); }
.knop.rustig:hover { background: var(--grijs-licht); }
.knop.gevaar { background: var(--rood); border-color: var(--rood); box-shadow: none; }
.knop.klein { padding: 6px 12px; font-size: 13px; }
.knop.vol { width: 100%; }
.knop.groot { padding: 15px 22px; font-size: 17px; }
.knop[disabled], .knop.uit { opacity: .5; pointer-events: none; }

/* --- Formulieren --------------------------------------------------------- */
label.veld { display: block; margin-bottom: 14px; }
label.veld > span {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: #333c47;
}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], input[type=file], select, textarea {
  width: 100%; padding: 10px 12px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--lijn); border-radius: 8px; background: #fff; color: var(--inkt);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--merk); box-shadow: 0 0 0 3px rgba(20,20,22,.14);
}
textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.hint { font-size: 12.5px; color: var(--grijs); margin-top: 4px; }
fieldset { border: 0; padding: 0; margin: 0; }

/* --- Meldingen ----------------------------------------------------------- */
.melding {
  padding: 12px 15px; border-radius: 9px; margin-bottom: 16px; font-size: 14.5px;
  border: 1px solid transparent;
}
.melding.ok   { background: var(--groen-vlak);  color: #14603a; border-color: #bfe3ce; }
.melding.fout { background: var(--rood-vlak);   color: #8c1c16; border-color: #f2c4c1; }
.melding.let  { background: var(--oranje-vlak); color: #7c4406; border-color: #f3d7b3; }
.melding.info { background: var(--blauw-vlak);  color: #124470; border-color: #c3d8ea; }

.leeg { text-align: center; padding: 44px 20px; color: var(--grijs); }
.leeg p { margin: 0 0 14px; }

/* --- Gegevenslijst ------------------------------------------------------- */
.gegevens { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 14.5px; }
.gegevens dt { color: var(--grijs); font-size: 13px; }
.gegevens dd { margin: 0; }

/* --- Werkbon: regels ----------------------------------------------------- */
.bonregel {
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: #fff; margin-bottom: 12px; overflow: hidden;
}
.bonregel.af { background: var(--groen-vlak); border-color: #bfe3ce; }
.bonregel-kop {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer;
  user-select: none;
}
.bonregel-kop .nr {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  background: var(--merk); color: #fff; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
}
.bonregel-kop .titel { flex: 1; font-weight: 600; font-size: 15.5px; }
.bonregel-kop .titel small { display: block; font-weight: 400; color: var(--grijs); font-size: 13px; }
.bonregel-kop .pijl { color: var(--grijs); font-size: 13px; transition: transform .15s; }
.bonregel[open] .pijl { transform: rotate(90deg); }
.bonregel-lijf { padding: 0 15px 15px; border-top: 1px solid var(--lijn); padding-top: 14px; }
.spec { display: grid; grid-template-columns: 128px 1fr; gap: 6px 14px; font-size: 14px; }
.spec dt { color: var(--grijs); font-size: 12.5px; padding-top: 1px; }
.spec dd { margin: 0; }
.tekening {
  margin-top: 14px; border: 1px solid var(--lijn); border-radius: 8px;
  overflow: hidden; background: #fff;
}
.tekening img { display: block; width: 100%; height: auto; }
.tekening figcaption { font-size: 12px; color: var(--grijs); padding: 7px 10px; border-top: 1px solid var(--lijn); }

/* --- Handtekening -------------------------------------------------------- */
.tekenvlak {
  border: 2px dashed var(--lijn); border-radius: 10px; background: #fff;
  position: relative; touch-action: none;
}
.tekenvlak canvas { display: block; width: 100%; height: 210px; border-radius: 9px; touch-action: none; }
.tekenvlak .aanwijzing {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #adb5bf; font-size: 14.5px; pointer-events: none;
}
.tekenvlak.beschreven .aanwijzing { display: none; }
.handtekening-beeld {
  max-width: 320px; width: 100%; border: 1px solid var(--lijn);
  border-radius: 8px; background: #fff;
}

/* --- Inloggen ------------------------------------------------------------ */
.inlogscherm { min-height: 100vh; display: grid; place-items: center; padding: 24px;
               background: radial-gradient(120% 80% at 50% 0%, #2a2b2f 0%, #141416 55%, #0b0b0d 100%); }
.inlogkaart { background: #fff; border-radius: 14px; padding: 30px; width: 100%; max-width: 390px; box-shadow: 0 10px 40px rgba(0,0,0,.22); }
.inlogkaart .logo { text-align: center; margin-bottom: 22px; }
.inlogkaart .logo strong {
  display: inline-block; border: 3px solid var(--merk); color: var(--merk);
  background: linear-gradient(180deg, #fff 0%, #f2f3f5 100%);
  font-size: 26px; font-weight: 800; padding: 3px 12px; border-radius: 4px; letter-spacing: 1px;
}
.inlogkaart .logo span { display: block; margin-top: 8px; color: var(--grijs); font-size: 14px; }

/* --- Stappen (installatie) ---------------------------------------------- */
.stappen { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.stap { flex: 1; min-width: 110px; padding: 9px 12px; border-radius: 8px; background: var(--grijs-licht); font-size: 13px; color: var(--grijs); }
.stap.aan { background: var(--merk); color: #fff; font-weight: 600; }
.stap.klaar { background: var(--groen-vlak); color: var(--groen); }

/* --- Mobiel -------------------------------------------------------------- */
@media (max-width: 720px) {
  .balk-in { padding: 9px 12px; gap: 10px; }
  .merk-tekst { display: none; }
  .hoofdnav { order: 3; width: 100%; flex: 0 0 100%; overflow-x: auto; padding-top: 2px; }
  .wie small { display: none; }
  main { padding: 16px 12px 70px; }
  h1 { font-size: 20px; }
  .kaart { padding: 15px; }
  .spec { grid-template-columns: 1fr; gap: 2px; }
  .spec dt { margin-top: 8px; }
  .gegevens { grid-template-columns: 1fr; gap: 2px; }
  .gegevens dt { margin-top: 9px; }
  .verberg-mobiel { display: none; }
}

/* --- Afdrukken ----------------------------------------------------------- */
@media print {
  .balk, .voet, .niet-printen, .knop { display: none !important; }
  body { background: #fff; font-size: 12px; }
  main { max-width: none; padding: 0; }
  .kaart { border: 0; box-shadow: none; padding: 0; margin-bottom: 12px; page-break-inside: avoid; }
  .bonregel { page-break-inside: avoid; border-color: #999; }
  a { color: #000; text-decoration: none; }
}

/* --- Foto's bij een werkbonregel ---------------------------------------- */
.fotoblok {
  margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--lijn);
}
.fotoraster {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.foto {
  margin: 0; position: relative; border: 1px solid var(--lijn);
  border-radius: 8px; overflow: hidden; background: #fff;
}
.foto img { display: block; width: 100%; height: 104px; object-fit: cover; }
.foto figcaption {
  font-size: 11px; color: var(--grijs); padding: 4px 7px;
  border-top: 1px solid var(--lijn); text-align: center;
}
.foto-weg {
  position: absolute; top: 5px; right: 5px; width: 26px; height: 26px;
  border-radius: 50%; border: 0; cursor: pointer; font-size: 17px; line-height: 1;
  background: rgba(17, 24, 39, .72); color: #fff; font-family: inherit;
}
.foto-weg:hover { background: var(--rood); }

@media print {
  .fotoraster { grid-template-columns: repeat(4, 1fr); }
  .foto img { height: 82px; }
  .foto-weg { display: none; }
}

/* --- Klantbestand -------------------------------------------------------- */

/* Zoekbalk boven de klantenlijst: één veld waar alles in mag. */
.zoekbalk {
  display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap;
}
.zoekbalk input[type=search] {
  flex: 1; min-width: 240px; padding: 11px 14px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--lijn); border-radius: 9px; background: #fff; color: var(--inkt);
}
.zoekbalk input[type=search]:focus {
  outline: none; border-color: var(--merk); box-shadow: 0 0 0 3px rgba(20,20,22,.14);
}

.fijn { color: var(--grijs); font-size: 13px; }
.fijn.let-op { color: var(--oranje); font-weight: 600; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Kaartkop met een telling erachter. */
.kaartkop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border-bottom: 1px solid var(--lijn);
}
.kaartkop h2 { margin: 0; font-size: 16px; }
.leeg.klein { padding: 26px 20px; }
.leeg.klein p { margin: 0; }

/* Velden naast elkaar; op een telefoon vallen ze vanzelf onder elkaar. */
.veldrij { display: flex; gap: 14px; flex-wrap: wrap; }
.veldrij > .veld { flex: 1 1 190px; }
.veldrij > .veld.breed { flex: 2 1 260px; }
.veldrij > .veld.smal  { flex: 0 1 130px; }
.knoprij { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

/* De klantstrook boven een offerte. */
.klantstrook { padding: 0; }
.klantstrook-in {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 14px 16px;
}
.klantstrook-in > div:first-child > span.fijn {
  display: block; text-transform: uppercase; letter-spacing: .6px; font-size: 11.5px;
  margin-bottom: 2px;
}
.klantstrook-in strong { font-size: 16px; }
.klantstrook-in .acties { display: flex; gap: 8px; align-items: center; }
.klantstrook-in .acties form { margin: 0; }

/* Foto's op de klantkaart: kleiner dan bij een werkbon, meer naast elkaar. */
.fotovak {
  display: block; border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden;
  background: #fff; text-decoration: none;
}
.fotovak img { display: block; width: 100%; height: 92px; object-fit: cover; }
.fotovak span {
  display: block; font-size: 11px; color: var(--grijs); padding: 4px 6px;
  border-top: 1px solid var(--lijn); text-align: center;
}

/* Bladeren onder een lange lijst. */
.bladeren { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 4px; }
.bladeren a {
  display: inline-block; min-width: 36px; text-align: center; padding: 7px 10px;
  border: 1px solid var(--lijn); border-radius: 8px; background: #fff;
  color: var(--inkt); text-decoration: none; font-size: 14px;
}
.bladeren a.aan { background: var(--merk); border-color: var(--merk); color: #fff; font-weight: 600; }

/* --- Klantenlijst: niet uitrekken over de volle breedte ------------------ */
.zoekbalk { max-width: 740px; }
.klantlijst { table-layout: auto; }
.klantlijst th.rechts, .klantlijst td.rechts,
.klantlijst th.nummer, .klantlijst td.nummer,
.klantlijst th:last-child, .klantlijst td:last-child {
  width: 1%; white-space: nowrap;
}
.klantlijst th:first-child, .klantlijst td:first-child { width: 30%; }
.klantlijst th:nth-child(2), .klantlijst td:nth-child(2) { width: 40%; }

/* --- Planning en tijden -------------------------------------------------- */

/* Begin- en eindtijd: op de telefoon onder elkaar, op de laptop op één regel. */
.tijdrij {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--lijn);
}
.tijdrij:last-of-type { border-bottom: 0; }
.tijdrij-dag { flex: 1 1 190px; }
.tijdveld { display: flex; align-items: center; gap: 7px; }
.tijdveld > span {
  font-size: 13px; font-weight: 600; color: #333c47; min-width: 40px;
}
.tijdveld input[type=time] {
  width: auto; min-width: 108px; padding: 9px 10px; font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.tijdrij-uren {
  flex: 0 0 92px; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.planningtabel td, .planningtabel th { white-space: nowrap; }
.planningtabel form { margin: 0; }
.dagtoevoegen { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--lijn); }
.monteurkeuze { display: flex; gap: 8px; flex-wrap: wrap; }
.vinkje {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px;
  border: 1px solid var(--lijn); border-radius: 999px; padding: 7px 13px;
  background: #fff; cursor: pointer;
}
.vinkje input { width: auto; margin: 0; }
.vinkje:has(input:checked) { border-color: var(--merk); background: var(--merk-licht); font-weight: 600; }

.klantopmerking {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--oranje-vlak); border: 1px solid #f3d7b3; font-size: 14.5px;
}
.klantopmerking .fijn {
  display: block; text-transform: uppercase; letter-spacing: .6px;
  font-size: 11.5px; margin-bottom: 3px; color: var(--oranje);
}

/* --- Weekagenda ---------------------------------------------------------- */
.agenda { table-layout: fixed; width: 100%; }
.agenda th, .agenda td {
  border: 1px solid var(--lijn); vertical-align: top; padding: 6px;
}
.agenda thead th {
  text-align: center; font-size: 12px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--grijs); background: var(--grijs-licht);
  padding: 7px 6px;
}
.agenda thead th span { display: block; font-size: 15px; color: var(--inkt); font-weight: 700; }
.agenda th.agenda-naam {
  width: 150px; text-align: left; background: var(--grijs-licht);
  font-size: 14.5px; color: var(--inkt); vertical-align: middle;
  text-transform: none; letter-spacing: 0; white-space: normal; line-height: 1.25;
}
/* Vandaag markeren we neutraal: een warme tint vloekt met het zwart-grijs. */
.agenda .vandaag { background: #f7f8fa; }
.agenda thead th.vandaag {
  background: var(--merk); color: #fff;
  box-shadow: var(--glans-rand); border-radius: 6px 6px 0 0;
}
.agenda-leeg { display: block; text-align: center; color: #cfd4da; font-size: 13px; }

.blok {
  display: block; text-decoration: none; color: var(--inkt);
  border-radius: 7px; padding: 7px 9px; margin-bottom: 5px;
  border-left: 4px solid var(--grijs); background: var(--grijs-licht);
  font-size: 13px; line-height: 1.3;
}
.blok:last-child { margin-bottom: 0; }
.blok.groen  { background: var(--groen-vlak);  border-left-color: var(--groen); }
.blok.blauw  { background: var(--blauw-vlak);  border-left-color: var(--blauw); }
.blok.oranje { background: var(--oranje-vlak); border-left-color: var(--oranje); }
.blok.af { box-shadow: inset 0 0 0 1px rgba(29,122,76,.35); }
/* Doorlopende meerdaagse klus: links en rechts open, zodat het één blok lijkt. */
.blok.vervolg  { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; padding-left: 9px; }
.blok.doorgaan { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.blok-klant { display: block; font-weight: 700; }
.blok-onder { display: block; color: var(--grijs); font-size: 11.5px; }
.blok.vervolg .blok-klant::before { content: "↳ "; color: var(--grijs); font-weight: 400; }

.agenda-legenda {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 22px;
  font-size: 13px; color: var(--grijs);
}
.agenda-legenda i.vlak {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; background: var(--grijs-licht);
}
.agenda-legenda i.groen  { background: var(--groen); }
.agenda-legenda i.blauw  { background: var(--blauw); }
.agenda-legenda i.oranje { background: var(--oranje); }
.agenda-legenda i.af     { background: #fff; box-shadow: inset 0 0 0 2px rgba(29,122,76,.5); }

@media (max-width: 820px) {
  .agenda th.agenda-naam { width: 104px; font-size: 13px; }
  .agenda thead th span { font-size: 13px; }
  .blok { font-size: 12px; padding: 5px 7px; }
}

/* --- Inmeten: de aanvraaglijst ------------------------------------------- */

/* Twee kolommen zoals op het papieren blok. Kolommen, geen raster: op papier
   loopt de lijst van boven naar beneden en pas dan naar de tweede kolom, en
   zo blijven groepjes als glas/triple/gelaagd bij elkaar staan.
   Op een telefoon één kolom, in dezelfde volgorde. */
.aanvraaglijst { column-count: 1; }
@media (min-width: 720px) {
  .aanvraaglijst { column-count: 2; column-gap: 26px; }
}
.aanvraagregel { -webkit-column-break-inside: avoid; break-inside: avoid; }
.kolombreuk { break-before: column; height: 0; }
/* Op een telefoon is er maar één kolom. De lege regels horen dan niet
   halverwege de lijst te staan maar onderaan; met flexbox zakken ze vanzelf. */
@media (max-width: 719px) {
  .kolombreuk { display: none; }
  .aanvraaglijst { display: flex; flex-direction: column; }
  .aanvraagregel.vrij { order: 2; }
}
.aanvraagregel {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer;
}
.aanvraagregel:hover { background: var(--grijs-licht); }
.aanvraagregel.aan { background: var(--merk-licht); border-color: rgba(20,20,22,.22); }
.aanvraagregel input[type=checkbox] {
  width: 24px; height: 24px; flex: 0 0 24px; margin: 0; accent-color: var(--merk);
}
.aanvraagregel .naam { flex: 0 0 auto; min-width: 9.5em; font-size: 15px; }
.aanvraagregel.aan .naam { font-weight: 600; }
.aanvraagregel .waarde {
  flex: 1; min-width: 0; padding: 7px 9px; font-size: 15px;
  border: 0; border-bottom: 1px dotted var(--grijs); border-radius: 0;
  background: transparent;
}
.aanvraagregel .waarde:focus {
  outline: none; border-bottom-color: var(--merk); box-shadow: none;
  background: #fff; border-radius: 6px;
}
.aanvraagregel .waarde-leeg { flex: 1; }
.aanvraagregel .naam-vrij {
  flex: 0 0 9.5em; padding: 7px 9px; font-size: 15px;
  border: 0; border-bottom: 1px dotted var(--grijs); border-radius: 0; background: transparent;
}
.aanvraagregel.vrij { opacity: .95; }

/* Fotovakjes bij de aanvraag. */
.fotovak-kaart.ontbreekt { border-color: #f2c4c1; background: #fffbfb; }
.fotovak-kop {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.fotovak-kop h3 { margin: 0 0 3px; }
.fotovak-kop p { margin: 0; max-width: 52ch; }
.fotoknop { margin: 0; }

/* Overtypescherm: links de velden, rechts het maatblad. */
.overtypen { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1100px) {
  .overtypen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .overtypen-rechts { position: sticky; top: 78px; }
}
.overtypelijst {
  display: grid; grid-template-columns: minmax(9em, auto) 1fr; gap: 5px 16px;
  font-size: 15px; margin: 0;
}
.overtypelijst dt { color: var(--grijs); }
.overtypelijst dd { margin: 0; }
.overtypelijst .vink { color: var(--groen); font-weight: 700; }
.maatblad-kaart { padding: 0; overflow: hidden; }
.maatblad-kaart .kaartkop { padding: 13px 15px; }
.maatblad { display: block; background: #f0f1f3; }
.maatblad img { display: block; width: 100%; height: auto; }

/* Kaartje in de lijst van de inmeter. */
.bonkaart { display: block; text-decoration: none; color: var(--inkt); margin-bottom: 12px; }
.bonkaart-kop {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 4px;
}
.bonkaart-kop strong { font-size: 16.5px; }

/* Filterbalk boven de aanvragenlijst. */
.filterbalk {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 16px;
}
.filterbalk .filter {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--lijn);
  background: #fff; color: var(--inkt); text-decoration: none; font-size: 14px;
}
.filterbalk .filter.aan { background: var(--merk); border-color: var(--merk); color: #fff; }
.filterbalk .filter.aan .fijn { color: rgba(255,255,255,.75); }

/* Inmeten in de agenda. */
:root { --paars: #6b4ea8; --paars-vlak: #efeaf9; }
.label.paars { background: var(--paars-vlak); color: var(--paars); }
.blok.paars { background: var(--paars-vlak); border-left-color: var(--paars); }
.agenda-legenda i.paars { background: var(--paars); }