:root {
  /* Huisstijl: claude/ontwerp-huisstijl.md. Gebruik deze tokens; geen losse kleurcodes in nieuwe regels. */
  --zwart: #111213; --bg: #F3F4F5; --kaart: #fff; --tekst: #111213; --grijs: #6B7075; --lijn: #E2E4E6;
  /* 19-10-2026: één teal, uit het logo. --teal-d is een oude naam voor dezelfde kleur. Hover op de merknaam = --teal-hover. */
  --teal: #138395; --teal-d: var(--teal); --teal-l: #E2F1F3; --teal-zacht: #F1F8F9; --teal-rand: #B8DADF; --teal-hover: #6CC3C9;
  --rood: #C0392B; --rood-t: #F8E1DE; --rood-r: #E6A49B;
  --oranje: #D98A1E; --oranje-tx: #9A5D0C; --oranje-t: #FBEFDC; --oranje-r: #EFC98A;
  --groen: #1E7D46; --groen-t: #E0F2E8; --groen-r: #9FD3B5;
  --blauw: #3D5A80; --blauw-r: #6B8CAE; --blauw-t: #E3EBF5;
  --paars: #5B5FC7; --paars-t: #E8EAF7;
  --geel: #F4C300; --geel-tx: #8A6200; --geel-t: #FDF0C4;
  --grijs-l: #9AA0A6; --grijs-t: #EEF0F1;
  --intern-tx: #8A6D1F; --intern-t: #FBF7EA; --intern-r: #E2CF8F;
  --ster: #E6A700; --wa: #25D366;   /* 19-10-2026 ontwerp: per status tekst (-tx), vlak, tint (-t) en lichte rand (-r) */
  --breed: 1280px;
}
/* Tekstmaten (21-10-2026): alleen 11 · 13 · 15 · 18 · 22 · 28 px.
   11 label (.label: Oswald, grijs, hoofdletters, letterafstand .5) en badges · 13 klein (bijtekst, tabellen, mini-knopjes)
   15 basis · 18 knop en subkop (Bebas) · 22 sectiekop (h2) · 28 paginakop en grote getallen.
   Eigen maten houden alleen de kentekenplaat (.kt-plaat) en de merknaam (.merk). Bebas altijd 400, Oswald hoogstens 600. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--tekst); font-family: Oswald, Arial, sans-serif; font-size: 15px; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
button { cursor: pointer; }
/* Knoppen en velden nemen lettertype en kleur van de pagina over. Zonder deze regel kleurt iOS Safari
   de tekst in elke <button> (agendakaarten, dagtabs) systeemblauw — de oorzaak van de blauwe tekst. */
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
.verborgen { display: none !important; }
a { color: var(--teal); }

/* Header */
header { background: var(--zwart); color: #fff; position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); }
.kop-binnen { max-width: var(--breed); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.merk { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1px; line-height: 1; }
.merk span { color: var(--teal); }
.versie { font-size: 11px; color: var(--grijs-l); }
.terug { background: none; border: 0; color: #fff; font-family: 'Bebas Neue'; font-size: 18px; letter-spacing: 1px; padding: 4px 8px 4px 0; }
#kopLinks { display: flex; align-items: center; gap: 12px; min-width: 0; }
.merkknop { background: none; border: 0; color: #fff; cursor: pointer; padding: 0; text-align: left; white-space: nowrap; }
.merkknop:hover span { color: var(--teal-hover); }
#kopLinks .terug { color: var(--teal); border-left: 1px solid #3a3d40; padding-left: 12px; }
.terug { white-space: nowrap; }
@media (max-width: 599px) {
  #app.diep .kop-binnen > div:last-child { display: none; }
  #kopLinks.met-terug .merk { font-size: 18px; }
  #kopLinks .terug { font-size: 18px; padding-left: 10px; }
  #kopLinks { gap: 10px; }
}
.navbalk { display: flex; gap: 4px; }
.navbalk button { background: none; border: 0; color: #cfd3d6; font-family: 'Bebas Neue'; font-size: 18px; letter-spacing: .8px; padding: 6px 10px; border-radius: 8px; display: flex; align-items: center; gap: 6px; }
.navbalk button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.navbalk button:hover { color: #fff; background: #23262a; }
.navbalk button.aan { color: #fff; background: #2a2e32; box-shadow: inset 0 -2px 0 var(--teal); }

/* iOS Navigatie fix */
@media (max-width: 899px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .navbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--zwart); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around; box-shadow: 0 -2px 10px rgba(0,0,0,.15); }
  .navbalk button { flex: 1; flex-direction: column; gap: 2px; font-size: 13px; padding: 6px 2px; border-radius: 10px; }
  .navbalk button svg { width: 22px; height: 22px; }
  .navbalk button.aan { box-shadow: none; color: var(--teal); background: none; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}

.lijstkop { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 10px; }
.lijstkop .zoek { font-size: 18px; padding: 10px 12px 10px 40px; border-width: 1.5px; background-position: 10px center; flex: 1; min-width: 200px; }
.rij.met-meer { cursor: pointer; }
.menu-knoppen { display: flex; flex-direction: column; gap: 8px; }
.menu-knoppen .knop { justify-content: flex-start; }
.weegsom { display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px 12px; font-size: 15px; background: var(--teal-l); border-radius: 10px; padding: 10px 12px; margin-top: 4px; }
.weegsom .k { color: var(--grijs); }
.weegsom b { font-weight: 500; }
.hunterlijst .hist { align-items: center; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--zwart); color: #fff; padding: 11px 18px; border-radius: 10px; z-index: 10001; font-size: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 92vw; text-align: center; }

main { max-width: var(--breed); margin: 0 auto; padding: 16px; }

/* Zoekbalk */
.zoekwrap { position: sticky; top: var(--nav-h, calc(52px + env(safe-area-inset-top)));   /* v4.55b: precies onder de zwarte balk (gemeten), schuift niet meer een stukje mee */
  z-index: 9; background: var(--bg); padding: 4px 0 10px; }
.zoek { width: 100%; font-size: 18px; padding: 14px 16px 14px 46px; border: 2px solid var(--zwart); border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23111213' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 14px center; outline: none; }
.zoek:focus { border-color: var(--teal); }
.zoekinfo { font-size: 13px; color: var(--grijs); margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; }

/* Kaarten + lijsten */
h2 { font-family: 'Bebas Neue'; font-size: 22px; letter-spacing: .5px; color: var(--teal); margin: 18px 0 8px; font-weight: 400; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kaart { background: var(--kaart); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.rij { display: flex; align-items: center; gap: 12px; background: var(--kaart); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.06); width: 100%; border: 0; text-align: left; color: inherit; font-size: 15px; }
button.rij:hover { background: var(--teal-zacht); }
button.rij:active { background: var(--teal-l); }
.rij .info { flex: 1; min-width: 0; }
.rij .t1 { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rij .t2 { font-size: 13px; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tijd { font-family: 'Bebas Neue'; font-size: 22px; color: var(--teal); min-width: 52px; }
.leeg { color: var(--grijs); font-size: 15px; padding: 8px 2px; }
.label { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .5px; }
.waarde { font-size: 15px; }
.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--grijs-t); color: var(--grijs); white-space: nowrap; }
.badge.teal { background: var(--teal-l); color: var(--teal); font-weight: 500; }
.badge.oranje { background: var(--oranje-t); color: var(--oranje-tx); }
.badge.rood { background: var(--rood-t); color: var(--rood); }
.badge.groen { background: var(--groen-t); color: var(--groen); }
.hist { border-top: 1px solid var(--lijn); padding: 10px 0; display: flex; justify-content: space-between; gap: 10px; }
.hist:first-child { border-top: 0; padding-top: 0; }
.hist:last-child { padding-bottom: 0; }
.hist.klik { cursor: pointer; }
.hist.klik:hover { background: var(--teal-zacht); }
.klein { font-size: 13px; color: var(--grijs); }
.laden { color: var(--grijs); font-size: 15px; }
.laden::after { content: ''; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--teal); border-right-color: transparent; border-radius: 50%; margin-left: 8px; animation: draai .7s linear infinite; vertical-align: -2px; }
@keyframes draai { to { transform: rotate(360deg); } }
.fout { background: var(--rood-t); color: var(--rood); border-radius: 10px; padding: 10px 12px; font-size: 15px; margin-bottom: 10px; }
.melding { background: var(--teal-l); color: var(--zwart); border-radius: 10px; padding: 10px 12px; font-size: 15px; margin-bottom: 10px; }

/* Kentekenplaat */
.kt-plaat { display: inline-flex; align-items: stretch; background: #F4C300; border: 2px solid #111; border-radius: 6px; font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; color: #111; overflow: hidden; line-height: 1; white-space: nowrap; flex: none; }
.kt-plaat .eu { background: #003399; color: #fff; font-family: Arial; font-size: 9px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2px 3px; }
.kt-plaat .eu::before { content: '★'; color: #F4C300; font-size: 8px; margin-bottom: 1px; }
.kt-plaat .nr { padding: 4px 7px; font-size: 14px; letter-spacing: .5px; }
.kt-plaat.groot .nr { font-size: 26px; padding: 6px 12px; }
.kt-plaat.groot .eu { font-size: 11px; padding: 3px 5px; }
.kt-leeg { display: inline-block; min-width: 96px; font-size: 13px; color: var(--grijs); }

/* Dossier-kop */
.dkop { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.dkop .naam { font-family: 'Bebas Neue'; font-size: 28px; letter-spacing: .5px; line-height: 1.05; }
.dkop .sub { color: var(--grijs); }
.acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.knop { white-space: nowrap; background: var(--zwart); color: #fff; border: 0; border-radius: 10px; padding: 10px 14px; font-family: 'Bebas Neue'; font-size: 18px; letter-spacing: .5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1.1; }
.knop.teal { background: var(--teal); }
.knop.licht { background: #fff; color: var(--zwart); border: 1.5px solid var(--zwart); }
.knop.klein { font-size: 15px; padding: 7px 10px; }
.knop.vol { white-space: normal; width: 100%; justify-content: center; font-size: 18px; padding: 13px; }
.knop[disabled] { opacity: .4; cursor: default; }

/* Formulieren */
.veld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.veld input, .veld select, .veld textarea, .invoer { width: 100%; border: 1.5px solid var(--lijn); border-radius: 10px; padding: 10px 12px; background: #fff; outline: none; }
.veld input:focus, .veld select:focus, .veld textarea:focus, .invoer:focus { border-color: var(--teal); }
.veld textarea { min-height: 70px; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { background: var(--bg); color: var(--grijs); }
/* Diensten keuzeknoppen (chips) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  border: 1.5px solid var(--lijn);
  background: #fff;
  color: var(--tekst);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  user-select: none;
}
.chip:hover {
  border-color: var(--teal);
  background: var(--teal-l);
}
.chip.aan {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.chip:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.segment { display: flex; border: 1.5px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.segment button { flex: 1; border: 0; background: #fff; padding: 9px 4px; font-size: 15px; border-left: 1px solid var(--lijn); }
.segment button:first-child { border-left: 0; }
.segment button.aan { background: var(--zwart); color: #fff; }
.segment.mini { display: inline-flex; border-radius: 8px; }
.segment.mini button { flex: 0 0 auto; padding: 5px 9px; font-size: 13px; }
.segment.mini button.aan { background: var(--teal); }
.subkop { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 6px; }
.prijstoggle { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -2px 0 6px; }
.knop.mini { font-size: 13px; padding: 4px 7px; border-radius: 7px; white-space: nowrap; }
.inkooprij { grid-column: 1/3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--grijs); background: var(--bg); border-radius: 8px; padding: 6px 8px; }
.inkooprij input { width: 80px; text-align: right; padding: 5px 7px; }

/* Werkorderregels op mobiel */
.regel { border-top: 1px solid var(--lijn); padding: 10px 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.regel:first-child { border-top: 0; padding-top: 0; }
.regel .oms { grid-column: 1/2; }
.regel .weg { grid-column: 2/3; grid-row: 1/2; background: none; border: 0; color: var(--grijs); font-size: 22px; line-height: 1; padding: 4px 8px; }
.regel .getallen { grid-column: 1/3; display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--grijs); }
.regel .getallen input { width: 70px; text-align: right; padding: 7px 8px; }
.regel .getallen .prijs { width: 92px; }
.regel .getallen .tot { margin-left: auto; color: var(--tekst); font-weight: 500; white-space: nowrap; }

/* Desktop compact layout voor regels */
@media (min-width: 900px) {
  .kolommen { grid-template-columns: 35% 1fr !important; }

  #woRegels .regel, #ofRegels .regel {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    padding: 8px; background: #fff; border: 1px solid var(--lijn); border-radius: 6px; margin-bottom: 6px;
  }
  #woRegels .regel .oms.regeloms, #ofRegels .regel .oms.regeloms { flex: 1; margin: 0; }
  #woRegels .regel .getallen, #ofRegels .regel .getallen {
    display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 0; min-width: 320px;
  }
  #woRegels .regel .getallen input, #ofRegels .regel .getallen input { padding: 6px 10px; height: 36px; }
  #woRegels .regel .weg, #ofRegels .regel .weg { position: static; margin-left: 8px; }
  .inkooprij { grid-column: auto; width: 100%; margin-top: 6px; }
}

.totalen { margin-top: 10px; border-top: 2px solid var(--zwart); padding-top: 10px; }
.totalen div { display: flex; justify-content: space-between; padding: 2px 0; }
.totalen .eind { font-weight: 600; font-size: 18px; }
.opslagstatus { font-size: 13px; color: var(--grijs-l); white-space: nowrap; }
.opslagstatus.fout { background: none; color: #ff8f84; padding: 0; margin: 0; }

/* Regels: snel toevoegen op nummer */
.regelknoppen { display: flex; gap: 6px; align-items: center; }
.snelnr { width: 64px !important; padding: 7px 8px !important; font-size: 15px; text-align: center; }
.fout-rand { border-color: var(--rood) !important; }
.regeloms { display: flex; align-items: center; gap: 6px; min-width: 0; }
.regeloms input { flex: 1; min-width: 0; }
.nrbadge { display: inline-block; background: var(--zwart); color: #fff; font-size: 11px; border-radius: 6px; padding: 2px 6px; margin-right: 6px; font-weight: 500; }

/* Metingen */
.raster.wielraster { grid-template-columns: 1fr; gap: 4px 20px; }
@media (min-width: 560px) { .raster.wielraster { grid-template-columns: 1fr 1fr; } }
.wielblok { margin-bottom: 12px; }
.wielen { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 8px; align-items: center; margin-top: 4px; }
.wielen .as { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .5px; writing-mode: horizontal-tb; width: 44px; }
.wiel { display: flex; align-items: center; gap: 6px; }
.wiel span { font-size: 11px; color: var(--grijs); width: 20px; }
.wiel input { text-align: center; padding: 9px 6px; font-size: 18px; min-width: 0; }
.wiel input.goed { background: var(--groen-t); border-color: var(--groen-r); }
.wiel input.matig { background: var(--oranje-t); border-color: var(--oranje-r); }
.wiel input.slecht { background: var(--rood-t); border-color: var(--rood-r); }
.checkpunt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--lijn); flex-wrap: wrap; }
.checkpunt:first-child { border-top: 0; padding-top: 0; }
.klein-seg button { padding: 7px 9px; font-size: 13px; }
.segment button.aan.ok { background: var(--groen); }
.segment button.aan.letop { background: var(--oranje); }
.segment button.aan.vervangen { background: var(--rood); }
.segment button.aan.nvt { background: var(--grijs); }

/* Foto's */
.fotogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.foto { position: relative; background: var(--grijs-t); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #dde0e2; }
.foto .badge { position: absolute; top: 6px; left: 6px; }
.foto .weg { position: absolute; top: 2px; right: 2px; background: rgba(17,18,19,.6); color: #fff; border: 0; border-radius: 50%; width: 28px; height: 28px; font-size: 18px; line-height: 1; }
.foto input { border-radius: 0; border: 0; border-top: 1px solid var(--lijn); font-size: 13px; padding: 7px 8px; }
.foto.bezig img { opacity: .5; }
.foto.misl img { opacity: .3; }
.fotostatus { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 13px; color: var(--zwart); font-weight: 500; }
.fotostatus.foto-opnieuw { background: none; border: 0; padding: 8px 0; font-family: inherit; text-decoration: underline; cursor: pointer; }   /* v4.58d: mislukte foto opnieuw met een tik */

/* Offertes */
.schakel { display: inline-flex; align-items: center; gap: 6px; font-family: Oswald; font-size: 13px; color: var(--grijs); letter-spacing: 0; }
.schakel input { width: 18px; height: 18px; accent-color: var(--teal); }
.bandsom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--teal-l); border-radius: 10px; padding: 10px 12px; }
.bandsom div { display: flex; flex-direction: column; }
.bandsom b { font-size: 18px; }
.margeblok { margin-top: 8px; border-top: 1px dashed var(--lijn); padding-top: 8px; font-size: 15px; }
.margeblok div { display: flex; justify-content: space-between; padding: 2px 0; }

/* Offerte: plakveld + EU-label inklapbaar */
.plakveld input { border-style: dashed !important; background: #fbfdfd !important; }
.herkend { font-size: 13px; color: var(--teal); margin: -6px 0 10px; }
.herkend.fout-t { color: var(--rood); }
details.labels { border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); margin: 2px 0 12px; padding: 6px 0; }
details.labels summary { cursor: pointer; font-size: 13px; color: var(--grijs); list-style: none; display: flex; justify-content: space-between; }
details.labels summary::-webkit-details-marker { display: none; }
details.labels summary::after { content: '＋'; color: var(--teal); }
details.labels[open] summary::after { content: '－'; }
details.labels[open] summary { margin-bottom: 8px; }
.snelknoppen { display: flex; gap: 6px; margin-top: 6px; }

/* Agenda */
.rij.afspraak { border-left: 4px solid #616161; cursor: pointer; }
.rij .meer { background: none; border: 0; font-size: 22px; color: var(--grijs); padding: 0 2px 0 6px; line-height: 1; }
.dagtabs { display: flex; gap: 6px; overflow-x: auto; margin: 6px 0 10px; padding-bottom: 2px; }
.dagtab { flex: 1; min-width: 56px; border: 1.5px solid var(--lijn); background: #fff; border-radius: 10px; padding: 6px 4px; text-align: center; font-size: 13px; line-height: 1.15; }
.dagtab b { display: block; font-family: 'Bebas Neue'; font-size: 22px; font-weight: 400; }
.dagtab small { display: block; font-size: 11px; color: var(--grijs); min-height: 13px; }
.dagtab.aan { background: var(--zwart); color: #fff; border-color: var(--zwart); }
.dagtab.aan small { color: var(--grijs-l); }
.dagtab.vandaag b { color: var(--teal); }
.dagkol { display: none; }
.dagkol.aan { display: block; }
.dagkop { font-family: 'Bebas Neue'; font-size: 22px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--zwart); margin-bottom: 8px; padding-bottom: 2px; gap: 6px; }
.dagkop.vandaag { border-color: var(--teal); color: var(--teal); }
.dagkop small { font-family: Oswald; font-size: 13px; color: var(--grijs); }
.week { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 8px; align-items: start; }
.uurkol .dagkop { border-color: transparent; }
.uren { position: relative; }
.uren span { position: absolute; right: 2px; transform: translateY(-50%); font-size: 11px; color: var(--grijs); }
.uren span:first-child { transform: none; }
.dagbody { position: relative; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.06); background-image: repeating-linear-gradient(to bottom, #e7eaec 0, #e7eaec 1px, transparent 1px, transparent 28px), repeating-linear-gradient(to bottom, #d3d8db 0, #d3d8db 1px, transparent 1px, transparent 56px); }
.dicht { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, rgba(17,18,19,.035) 0, rgba(17,18,19,.035) 6px, transparent 6px, transparent 12px); pointer-events: none; }
.slot { position: absolute; left: 0; right: 0; background: none; border: 0; color: transparent; font-size: 13px; text-align: left; padding: 0 8px; z-index: 1; }
.slot span { display: inline-block; line-height: 28px; }
.slot:hover, .slot:focus { background: var(--teal-l); color: var(--teal); }
@media (pointer: coarse) { .slot { color: var(--teal-rand); } }
.akaart.blok { position: absolute; z-index: 2; margin: 0; overflow: hidden; padding: 4px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.akaart.blok.klein { padding: 2px 6px; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 1.2; }
.akaart.heledag { border-left-color: #bbb; font-size: 13px; }
.nu { position: absolute; left: 0; right: 0; height: 2px; background: var(--rood); z-index: 3; pointer-events: none; }
.nu::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rood); }
.slot:hover { background: var(--teal-l); border-style: solid; }
.akaart { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-left: 4px solid #616161; border-radius: 8px; padding: 7px 9px; margin-bottom: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.08); font-size: 13px; line-height: 1.3; }
.akaart:hover { background: var(--teal-zacht); }
.akaart .tt { font-weight: 600; }
.akaart .kl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akaart .kt-plaat .nr { font-size: 12px; padding: 3px 5px; }
.statusknoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.statusknoppen button { border: 1.5px solid var(--lijn); background: #fff; border-radius: 20px; padding: 5px 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.statusknoppen button i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.statusknoppen button.aan { border-color: var(--zwart); background: var(--zwart); color: #fff; }
.zoeklijst .rij { padding: 8px 10px; margin-bottom: 6px; }
.af-klant { display: flex; gap: 10px; align-items: center; }

/* Overlay (artikelkiezer, factuurcontrole) */
.overlay { position: fixed; inset: 0; background: rgba(17,18,19,.5); z-index: 10000; display: flex; align-items: flex-end; justify-content: center; }
.paneel { background: var(--bg); width: 100%; max-width: 720px; max-height: 92vh; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.paneel-kop { background: var(--zwart); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.paneel-kop .titel { font-family: 'Bebas Neue'; font-size: 22px; letter-spacing: .5px; }
.paneel-kop button { background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; }
.paneel-inhoud { padding: 14px 16px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* v4.31: venster open -> pagina erachter staat stil */
html { scrollbar-gutter: stable; }
html.ov-open, html.ov-open body { overflow: hidden; }
.overlay { overscroll-behavior: contain; }
.artikel { display: flex; justify-content: space-between; gap: 10px; width: 100%; background: #fff; border: 0; border-radius: 10px; padding: 11px 12px; margin-bottom: 6px; text-align: left; }
.artikel:hover { background: var(--teal-zacht); }

/* Login */
#login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--zwart); padding: 24px; }
#login .doos { width: 100%; max-width: 360px; color: #fff; }
#login .merk { font-size: 40px; margin-bottom: 6px; }
#login p { color: var(--grijs-l); font-size: 15px; margin-bottom: 24px; }
#login input { width: 100%; font-size: 18px; padding: 13px 14px; border-radius: 10px; border: 0; margin-bottom: 10px; color: #111; }
#login button { width: 100%; background: var(--teal); color: #fff; border: 0; border-radius: 10px; padding: 13px; font-family: 'Bebas Neue'; font-size: 22px; letter-spacing: 1px; }
#loginFout { color: #ff8f84; font-size: 15px; min-height: 20px; margin-top: 10px; }

@media (min-width: 900px) {
  main { padding: 20px 24px; }
  .kop-binnen { padding: 12px 24px; }
  .alleen-mobiel { display: none !important; }
  .kolommen { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .kolommen > div > h2:first-child { margin-top: 4px; }
  #resultaten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
  #resultaten .rij { margin-bottom: 0; }
  #resultaten .leeg, #resultaten .fout { grid-column: 1/-1; }
  .zoekhint { display: block; }
  .overlay { align-items: center; }
  .paneel { border-radius: 16px; }
  .dkop { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
  .dkop .acties { margin-top: 0; margin-left: auto; }
  .raster.drie { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1500px) { :root { --breed: 1440px; } }
.zoekhint { display: none; }
/* Drag and Drop hendel */
.drag-handle {
  cursor: grab;
  font-size: 18px;
  color: var(--grijs-l);
  padding: 0 4px;
  user-select: none;
  display: flex;
  align-items: center;
}
.drag-handle:active { cursor: grabbing; }
.regel[draggable="true"] { transition: background 0.2s; }
.regel[draggable="true"]:hover { background: #fdfdfd; }

/* ================================================================
   v3.2026.09.28d — voorheen tijdelijk als CSS-string in app.js
   ================================================================ */

/* Agenda: Dag/Week-schakelaar (weekregels voor brede schermen) */
#agInhoud.ag-week .dagtabs { display: none; }
#agInhoud.ag-week .week { grid-template-columns: 44px repeat(var(--dagen), minmax(0, 1fr)); gap: 0 10px; }
#agInhoud.ag-week .dagkol { display: block; }
#agInhoud.ag-week .dagkol .dagkop { cursor: pointer; }
#agInhoud.ag-week .dagkol .dagkop:hover span { color: var(--teal); }
@media (max-width: 899px) {
  #agInhoud.ag-week { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #agInhoud.ag-week .week { grid-template-columns: 44px repeat(var(--dagen), minmax(130px, 1fr)); min-width: calc(44px + var(--dagen) * 140px); }
}
.agweergave { flex: none; }
.agweergave button { min-width: 58px; }

/* Vandaag-balk op het startscherm: compacte pijltjes */
.vandaagnav { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.vandaagnav .pijl { background: #fff; border: 1.5px solid var(--lijn); color: var(--zwart); border-radius: 8px; width: 30px; height: 30px; font-size: 18px; line-height: 1; padding: 0; flex: none; }
.vandaagnav .pijl:hover { border-color: var(--teal); color: var(--teal); }
#vandaagTitel { flex-wrap: wrap; }
.akaart:hover, .rij.afspraak:hover { filter: brightness(.97); }

/* iOS Safari: tijden, datums en getallen niet als blauwe links tonen */
a[x-apple-data-detectors], a[href^="x-apple-data-detectors:"] { color: inherit !important; text-decoration: none !important; font: inherit !important; pointer-events: none; }
#vandaag a:not(.knop), #agInhoud a:not(.knop), #agKop a:not(.knop), .akaart a, .dagtab a, .dagkop a, .tijd a, .uren a { color: inherit !important; text-decoration: none !important; }
.akaart, .akaart *, .tijd, .dagtab, .dagkop, .uren span { -webkit-text-fill-color: currentColor; }

/* Werkorder alleen-lezen (afgerond, geannuleerd of in SnelStart) */
.alleenlezen-melding { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.opslagstatus.klikbaar { cursor: pointer; text-decoration: underline; }

/* Offerte: breedset, velgen en TPMS */
.extra-blok { border-top: 1px solid var(--lijn); padding-top: 10px; margin-top: 4px; }
.extra-blok .schakel { margin-bottom: 8px; }
.breedset-kop { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 6px; }

/* ================================================================
   v3.2026.09.28e
   ================================================================ */

/* Harde override voor iOS Safari (data-detectors en linkkleuren in de agenda) */
a[x-apple-data-detectors],
a[href^="x-apple-data-detectors"],
.akaart, .akaart *,
.dagtab, .dagtab *,
.rij.afspraak, .rij.afspraak * {
  color: #111213 !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #111213 !important;
}
.akaart .badge, .rij.afspraak .badge { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
/* Uitzonderingen, anders wordt het onleesbaar: */
.rij.afspraak .tijd { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; }
.rij.afspraak .t2, .rij.afspraak .meer, .akaart .klein, .dagtab small { color: var(--grijs) !important; -webkit-text-fill-color: var(--grijs) !important; }
.akaart .kt-plaat .eu, .rij.afspraak .kt-plaat .eu { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.dagtab.aan, .dagtab.aan * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.dagtab.aan small { color: var(--grijs-l) !important; -webkit-text-fill-color: var(--grijs-l) !important; }
.dagtab.vandaag b { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; }
.rij.afspraak .badge.groen { color: var(--groen) !important; -webkit-text-fill-color: var(--groen) !important; }
.rij.afspraak .badge.oranje { color: var(--oranje-tx) !important; -webkit-text-fill-color: var(--oranje-tx) !important; }
.rij.afspraak .badge.teal { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; }
.rij.afspraak .badge.rood { color: var(--rood) !important; -webkit-text-fill-color: var(--rood) !important; }

/* Werkorder ontgrendeld: opvallend oranje, met knop om weer te vergrendelen */
.alleenlezen-melding.ontgrendeld { background: var(--oranje-t); color: var(--oranje-tx); }

/* ================================================================
   v3.2026.09.28f — online aanvragen (status Aanvraag, oranje / kleur 6)
   ================================================================ */
.badge.aanvraag, .rij.afspraak .badge.aanvraag { background: var(--geel-t); color: var(--geel-tx) !important; -webkit-text-fill-color: var(--geel-tx) !important; }   /* v4.18: aanvraag = Banaan (geel) */
.aanvraag-melding { background: var(--geel-t); color: var(--geel-tx); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.aanvraag-melding .knop { background: var(--geel-tx); }

/* v3.2026.09.29a — openstaande aanvragen op het startscherm */
#aanvragenBlok h2.aanvragen-kop { color: var(--rood); margin-top: 4px; }
#aanvragenBlok .aanvraag-rij .tijd { color: var(--geel-tx) !important; -webkit-text-fill-color: var(--geel-tx) !important; }
.rij.afspraak .bevestig-knop, .bevestig-knop { background: var(--groen); color: #fff !important; -webkit-text-fill-color: #fff !important; flex: none; }
.afspraak-bij-offerte { color: var(--teal) !important; }

/* v3.7.0 — aanvraag afwijzen / ander voorstel + snelle offerte */
.rij.afspraak .afwijs-knop, .afwijs-knop { flex: none; color: var(--zwart) !important; -webkit-text-fill-color: var(--zwart) !important; margin-right: 6px; }
.aanvraag-rij { flex-wrap: wrap; }
@media (max-width: 480px) { .aanvraag-rij .afwijs-knop, .aanvraag-rij .bevestig-knop { flex: 1 1 40%; } }
#afwToelichting { min-height: 90px; }
.snel-melding { background: var(--geel-t); border-left: 4px solid var(--geel); border-radius: 8px; padding: 10px 12px; font-size: 15px; margin-bottom: 12px; }

/* v3.2026.09.29e — universele zoekbalk (gegroepeerd) + eigenaar wijzigen */
.zoekgroep { grid-column: 1/-1; display: flex; align-items: center; gap: 8px; font-family: 'Bebas Neue', Oswald, sans-serif; font-size: 18px; letter-spacing: 1px; color: var(--teal); margin: 12px 2px 6px; }
.zoekgroep:first-child { margin-top: 2px; }
.zoekgroep span { font-family: Oswald, sans-serif; font-size: 11px; letter-spacing: 0; color: var(--grijs); background: var(--grijs-t); border-radius: 10px; padding: 1px 7px; }
.rij .avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--teal); color: #fff !important; -webkit-text-fill-color: #fff !important;
  display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', Oswald, sans-serif; font-size: 18px; }
.rij.zoek-klant.gekozen { outline: 2.5px solid var(--geel); background: var(--geel-t); }
#eigTreffers { max-height: 300px; overflow-y: auto; }

/* v3.2026.09.30a — Wacht op reactie klant (verstuurde voorstellen) */
.voorstel-kop { display: flex; align-items: center; gap: 8px; color: var(--blauw); }
.badge.voorstel { background: var(--blauw-t); color: var(--blauw) !important; -webkit-text-fill-color: var(--blauw) !important; }
.rij.voorstel-rij { border-left: 4px solid var(--blauw-r); background: var(--blauw-t); flex-wrap: wrap; gap: 6px; }
.rij.voorstel-rij .tijd { color: var(--blauw) !important; -webkit-text-fill-color: var(--blauw) !important; }
.rij.voorstel-rij .knop { flex: none; }
@media (max-width: 480px) { .rij.voorstel-rij .knop { flex: 1 1 28%; } }

/* v3.2026.09.30e — dossier: linkerkolom blijft staan (desktop), uitlijnwaarschuwing */
@media (min-width: 900px) {
  #schermDossier .kolommen > div:first-child { position: sticky; top: calc(64px + env(safe-area-inset-top)); max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
}
.uitlijn-oud { background: var(--oranje-t); border-left: 4px solid var(--oranje); border-radius: 0 6px 6px 0; padding: 4px 8px; margin: -4px 0; }
.uitlijn-oud .waarde { color: var(--oranje-tx); }

/* v3.2026.10.01a — dag-tijdlijn in het afspraakformulier */
.af-tl { margin: -2px 0 14px; }
.tl-balk { position: relative; height: 38px; background: var(--teal-l); border-radius: 8px; overflow: hidden; border: 1px solid var(--teal-rand); }
.tl-voorbij { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--grijs-t), var(--grijs-t) 4px, #e2e5e7 4px, #e2e5e7 8px); }
.tl-bezet { position: absolute; top: 0; bottom: 0; background: #9aa1a6; color: #fff; font-size: 11px; line-height: 38px; padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-left: 1px solid #fff; border-right: 1px solid #fff; }
.tl-bezet span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.tl-keuze { position: absolute; top: 3px; bottom: 3px; background: rgba(244, 195, 0, .55); border: 2px solid var(--geel); border-radius: 6px; pointer-events: none; z-index: 2; }
.tl-keuze.botst { background: rgba(192, 57, 43, .35); border-color: var(--rood); }
.tl-cel { position: absolute; top: 0; bottom: 0; background: transparent; border: 0; padding: 0; cursor: pointer; z-index: 3; border-right: 1px dashed rgba(19, 131, 149, .18); }
.tl-cel:hover { background: rgba(19, 131, 149, .18); }
.tl-uren { position: relative; height: 16px; font-size: 11px; color: var(--grijs); }
.tl-uren span { position: absolute; transform: translateX(-50%); top: 2px; }
.tl-uren span:first-child { transform: none; }
.tl-uren span:last-child { transform: translateX(-100%); }
.tl-leeg { font-size: 13px; color: var(--grijs); padding: 8px 0; }

/* v3.2026.10.01a — Te betalen (inkoopfacturen) op het startscherm */
#betaalBlok { margin-top: 18px; }
.betaal-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.betaal-kop .klein { font-family: Oswald, sans-serif; letter-spacing: 0; color: var(--grijs); }
.betaal-kop .knop { margin-left: auto; }
.betaal-lijst { padding: 4px 12px; }
.betaal-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.betaal-rij:last-child { border-bottom: 0; }
.betaal-rij .info { min-width: 0; }
.betaal-rij .t1 { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.betaal-rij .t2 { font-size: 13px; color: var(--grijs); }
.betaal-rij .bedrag { text-align: right; white-space: nowrap; }
.betaal-rij .bedrag .klein { display: block; }
.betaal-rij.te-laat .bedrag .klein { color: var(--rood); font-weight: 600; }
.betaal-rij.vandaag .bedrag .klein { color: var(--oranje-tx); font-weight: 600; }
.betaal-leeg { margin-top: 14px; }

/* v3.2026.10.01a — dossierkop blijft staan onder de navigatiebalk (desktop)
   v3.2026.10.03a — muurvast: --nav-h = gemeten hoogte van de zwarte balk (app.js). De kop begint precies op de plek
   waar hij blijft plakken (margin-top heft de 20px van main op), dus hij schuift niet eerst een stukje mee. */
@media (min-width: 900px) {
  #dossierKop { position: sticky; top: var(--nav-h, 62px); z-index: 8; background: var(--bg); padding: 12px 0 8px; margin-top: -20px; box-shadow: 0 6px 8px -8px rgba(0,0,0,.25); }
  #schermDossier .kolommen > div:first-child { top: calc(var(--nav-h, 62px) + var(--dkop-h, 76px) + 8px); max-height: calc(100vh - var(--nav-h, 62px) - var(--dkop-h, 76px) - 16px); }
}
/* v3.2026.10.03a — werkorder wissen (inklapbaar, onderaan het ⋯-menu) */
details.wis-blok { margin-top: 14px; border-top: 1px solid var(--lijn); padding-top: 10px; }
details.wis-blok summary { cursor: pointer; font-size: 13px; color: var(--grijs); }

/* v3.2026.10.01b — offerte mailen + akkoord nog inplannen */
.verzend-info { font-size: 13px; line-height: 1.55; color: var(--tekst); background: var(--teal-l); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.mail-voorbeeld { margin-top: 10px; border: 1px solid var(--lijn); border-radius: 8px; padding: 8px; background: #f2f2f2; }
.mail-voorbeeld iframe { display: block; width: 100%; height: 520px; border: 0; border-radius: 6px; background: #f2f2f2; }
@media (max-width: 480px) { .mail-voorbeeld iframe { height: 440px; } }
.akkoord-kop { display: flex; align-items: center; gap: 8px; color: var(--groen); }
.rij.akkoord-rij { border-left: 4px solid var(--groen); background: var(--groen-t); flex-wrap: wrap; gap: 6px; }
.rij.akkoord-rij .tijd { color: var(--groen) !important; -webkit-text-fill-color: var(--groen) !important; }
.rij.akkoord-rij .knop { flex: none; }
@media (max-width: 480px) { .rij.akkoord-rij .knop { flex: 1 1 28%; } }
.rij.akkoord-rij .info, .rij.voorstel-rij .info { min-width: 140px; }
@media (max-width: 480px) { .rij.akkoord-rij .info, .rij.voorstel-rij .info { flex: 1 1 calc(100% - 200px); } }

/* v3.2026.10.02b — betalen: kattenbelletje op het startscherm + betaalscherm */
#betaalBlok { margin-top: 14px; }
.betaal-regel { display: flex; align-items: center; gap: 8px; width: 100%; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--tekst); text-align: left; cursor: pointer; }
.betaal-regel .wat { flex: 1; min-width: 0; }
.betaal-regel .pijl { color: var(--grijs); font-size: 18px; line-height: 1; }
.betaal-regel.rustig { color: var(--grijs); background: transparent; border-style: dashed; }
.betaal-regel.heeft-rood { border-color: var(--rood); }
.betaal-rood { margin-top: 6px; border-left: 4px solid var(--rood); background: var(--rood-t); border-radius: 0 10px 10px 0; }
.br-rij { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; font-size: 13px; cursor: pointer; }
.br-rij span:first-child { font-weight: 500; }
.br-rij .klein { flex: 1; color: var(--rood); }
.betaal-ov .paneel { max-width: 820px; }
.bt-pagina { max-width: 860px; }   /* v4.76: Betalen als pagina */
.bt-pagina .bt-lijst { padding: 0 12px; }
.bt-pagina .bt-acties { bottom: 0; }
.bt-klaar .knop { white-space: normal; text-align: left; max-width: 100%; }
@media (max-width: 899px) { .bt-pagina .bt-acties { bottom: calc(68px + env(safe-area-inset-bottom)); } }
.bt-kop { margin-bottom: 8px; line-height: 1.6; }
button.link { background: none; border: 0; padding: 0; color: var(--teal); text-decoration: underline; font: inherit; cursor: pointer; }
.bt-lijst { padding: 4px 10px; }
.bt-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--lijn); }
.bt-rij:last-child { border-bottom: 0; }
.bt-rij .info { flex: 1; min-width: 150px; }
.bt-rij .t1 { font-weight: 500; }
.bt-rij .t2 { font-size: 13px; color: var(--grijs); }
.bt-rij.g-rood .t1 { color: var(--rood); }
.bt-rij.gekozen { background: var(--teal-l); margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.bt-reden { color: var(--rood) !important; }
.bt-tegoed { color: var(--teal) !important; }   /* v4.76 creditfacturen */
.bt-rij.g-credit .bt-bedrag b { color: var(--teal); }
.bt-vink input { width: 20px; height: 20px; accent-color: var(--teal); }
.bt-bedrag { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bt-kopie { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px 30px; }
.bt-chip { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--lijn); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.bt-chip .klein { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--grijs); }
.bt-chip.gekopieerd { border-color: var(--groen); background: var(--groen-t); }
.bt-acties { position: sticky; bottom: -14px; background: var(--bg); padding: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--lijn); margin-top: 6px; z-index: 2; }
.bt-acties .klein { flex-basis: 100%; }
.bt-acties .knop { flex: 1; }
.bt-sectie { margin-top: 12px; background: #fff; border-radius: 10px; padding: 8px 12px; }
.bt-sectie summary { cursor: pointer; font-weight: 500; padding: 4px 0; }
.bt-inc { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.bt-klaar { margin-bottom: 10px; line-height: 1.5; }

/* v3.2026.10.03b — notities & herinneringen, wielen nagetrokken, projectchecklist */
.herinner-kop { display: flex; align-items: center; gap: 8px; color: var(--oranje-tx); }
.rij.herinner-rij { border-left: 4px solid var(--oranje); background: var(--oranje-t); flex-wrap: wrap; gap: 6px; }
.rij.herinner-rij .tijd { color: var(--oranje-tx) !important; -webkit-text-fill-color: var(--oranje-tx) !important; }
.rij.herinner-rij .knop { flex: none; }
.rij.herinner-rij .info { min-width: 140px; }
.nt-kort { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 480px) { .rij.herinner-rij .info { flex: 1 1 calc(100% - 200px); } .rij.herinner-rij .knop { flex: 1 1 40%; } }
/* Ontwerp notities (21-10-2026, ontwerper): rustige lijst. Rondje links = afvinken, potlood rechts, herinnering als datum
   in de regel eronder. Vandaag of eerder: oranje tint met rand links, zoals Herinneringen op het startscherm (wens Rouke: niet alles wit). */
.notities .notitie { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; border-top: 1px solid var(--lijn); padding: 10px 0; }
.notities .notitie:first-child { border-top: 0; padding-top: 2px; }
.notitie .nt-vink { width: 36px; height: 36px; margin: -7px 0 -7px -7px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; }
.notitie .nt-vink::before { content: ''; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--grijs-l); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.notitie .nt-vink:hover::before { border-color: var(--teal); }
.notitie .nt-vink.aan::before, .notitie .nt-vink:disabled::before { content: '✓'; background: var(--teal); border-color: var(--teal); }
.notitie .nt-tekst { white-space: pre-wrap; font-size: 15px; line-height: 1.35; }
.notitie .nt-tekst b { font-weight: 500; }
.notitie .nt-meta { font-size: 13px; color: var(--grijs); margin-top: 2px; }
.notities .notitie.verlopen { background: var(--oranje-t); margin: 0 -16px; padding-left: 12px; padding-right: 16px; border-left: 4px solid var(--oranje); border-top-color: var(--oranje-r); }
.notities .notitie.verlopen + .notitie { border-top-color: var(--oranje-r); }
.kaart.notities { overflow: hidden; }
.notities .notitie.verlopen:first-child { margin-top: -14px; padding-top: 12px; }
.notities .notitie.verlopen:last-child { margin-bottom: -14px; padding-bottom: 12px; }
.notitie.verlopen .nt-dag { color: var(--oranje-tx); font-weight: 500; }
.notitie .nt-acties { margin-top: 6px; }
.notitie .nt-pen { width: 34px; height: 34px; margin: -6px -6px -6px 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--grijs); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.notitie .nt-pen:hover { background: var(--grijs-t); color: var(--tekst); }
.notitie .nt-pen .ic { width: 17px; height: 17px; vertical-align: 0; }
.notitie.klaar .nt-tekst { color: var(--grijs); text-decoration: line-through; }
.notities .nt-meer { display: block; margin-top: 4px; padding: 8px 0 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--grijs); text-decoration: underline; cursor: pointer; }
.wielen-rij { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.schakel.groot { font-size: 15px; color: var(--tekst); }
.schakel.groot input { width: 22px; height: 22px; }
.nm-veld { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.nm-veld input { width: 80px; text-align: center; font-size: 18px; padding: 8px; }
.chip.nm-advies { margin-top: 8px; background: var(--teal-l); border-color: var(--teal); color: var(--teal); }
details.project-det { margin-top: 18px; }
details.project-det > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
details.project-det > summary::-webkit-details-marker { display: none; }
details.project-det > summary::before { content: '▸'; color: var(--teal); font-size: 15px; transition: transform .15s; }
details.project-det[open] > summary::before { transform: rotate(90deg); }
.pj-titel { font-family: 'Bebas Neue'; font-size: 22px; letter-spacing: .5px; color: var(--teal); }
.pj-rij { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--lijn); }
.pj-rij:first-child { border-top: 0; padding-top: 0; }
.pj-rij label { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; min-width: 0; }
.pj-rij input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--teal); }
.pj-rij.klaar label span { color: var(--grijs); text-decoration: line-through; }
.pj-rij .weg, .pj-rij .pj-omhoog { background: none; border: 0; color: var(--grijs); font-size: 18px; padding: 2px 6px; line-height: 1; }
.pj-nieuw { display: flex; gap: 6px; margin-top: 10px; }
.pj-nieuw .invoer { flex: 1; }
/* v3.2026.10.03c — fabriekswaarde aanhaalmoment, sjabloonkeuze projectchecklist */
.fabriek-regel { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fab-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip.mini-chip { font-size: 13px; padding: 4px 10px; }
.pj-sjabloon { margin-top: 8px; width: 100%; color: var(--grijs); }

/* v3.2026.10.03e — tijd blokkeren / gesloten, notities in de werkorder */
.gesloten-patroon, .akaart.gesloten-blok, .akaart.gesloten-dag, .rij.blok-rij, .gesloten-vlak {
  background: repeating-linear-gradient(135deg, #e6e8ea 0, #e6e8ea 7px, #d9dcdf 7px, #d9dcdf 14px) !important; }
.akaart.gesloten-blok { border-left: 4px solid #616161 !important; color: #3b3f43; font-weight: 500; }
.akaart.gesloten-dag { border-left: 4px solid #616161 !important; color: #3b3f43; font-weight: 600; }
.gesloten-vlak { z-index: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; pointer-events: none; }
.gesloten-vlak span { background: #fff; border-radius: 12px; padding: 2px 10px; font-size: 13px; color: #3b3f43; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.rij.blok-rij { border-left: 4px solid #616161; cursor: pointer; }
.rij.blok-rij .tijd { color: #616161 !important; -webkit-text-fill-color: #616161 !important; }
.tl-bezet.tl-blok { background: repeating-linear-gradient(135deg, #b9bdc1 0, #b9bdc1 6px, #a7acb1 6px, #a7acb1 12px); color: #222; z-index: 2; }
.af-blokknop { margin-top: 8px; }
.blok-kaart .naam-blok { font-family: 'Bebas Neue'; font-size: 22px; letter-spacing: .5px; }
.wo-notities { background: var(--oranje-t); border: 1px solid var(--oranje-r); border-left: 4px solid var(--oranje); border-radius: 10px; padding: 10px 12px; margin: 4px 0 6px; }
.wo-nt-kop { font-family: 'Bebas Neue'; font-size: 18px; letter-spacing: .5px; color: var(--oranje-tx); margin-bottom: 4px; }
.wo-nt { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--oranje-r); font-size: 15px; }
.wo-nt:first-of-type { border-top: 0; }
.wo-nt .nt-tekst { flex: 1; white-space: pre-wrap; }
.wo-nt .nt-nu { color: var(--oranje-tx); font-weight: 600; }

/* v3.2026.10.05a: factuurstatus, taken, foto-intake */
button.factuur-badge { border: 0; cursor: pointer; font: inherit; }
button.factuur-badge:hover { filter: brightness(1.08); text-decoration: underline; }
.taak-rij .tijd { color: var(--teal); }
.taak-rij.taak-nu { border-left: 4px solid var(--teal); }
.intake-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.intake-knop { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 56px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 10px; background: #fff; font: 15px Oswald, sans-serif; cursor: pointer; text-align: left; }
.intake-knop:last-child { grid-column: 1 / -1; }
.intake-knop.klaar { border-color: var(--teal); background: var(--teal-l); }

/* v3.2026.10.05b: slepen in de agenda (muis) */
@media (hover: hover) and (pointer: fine) { #agInhoud .akaart[data-sleep] { cursor: grab; } }
body.sleept, body.sleept * { cursor: grabbing !important; user-select: none; }
.akaart.sleep-bron { opacity: .35; }
.akaart.sleep-spook { z-index: 6; pointer-events: none; opacity: .92; outline: 2px dashed var(--teal); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.sleep-tijd { position: absolute; right: 4px; bottom: 3px; background: var(--teal); color: #fff !important; -webkit-text-fill-color: #fff !important; font: 12px Oswald, sans-serif; padding: 1px 6px; border-radius: 6px; }

/* v3.2026.10.05c: plan-modus via de agenda */
.planbalk { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px 14px; background: var(--teal); color: #fff; border-radius: 10px; font-size: 15px; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.planbalk b { font-weight: 600; }
.planbalk .klein { color: var(--teal-l); }
.planbalk-knoppen { display: flex; gap: 6px; }
.planbalk .knop.licht { background: #fff; }
body.plant .slot { color: var(--teal); background: rgba(19, 131, 149, .08); border-bottom: 1px dashed rgba(19, 131, 149, .35); }
body.plant .slot:hover { background: var(--teal); color: #fff; }
body.plant .slot:hover span { -webkit-text-fill-color: #fff; }
.af-gekozen { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border: 2px solid var(--teal); border-radius: 10px; background: var(--teal-l); }
.af-gekozen .label { display: block; }
.af-gekozen b { font: 17px Oswald, sans-serif; }
.af-handmatig { margin-bottom: 12px; }
.af-handmatig > summary { cursor: pointer; color: var(--grijs); font-size: 13px; margin-bottom: 8px; }

/* v3.2026.10.05c: fotoalbum + hoofdfoto */
.kop-foto { width: 64px; height: 48px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; flex: 0 0 auto; background: var(--lijn); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.kop-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.album-duim { position: relative; padding: 0; border: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; background: var(--lijn); cursor: pointer; }
.album-duim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-groep { margin-bottom: 14px; }
.album-groep > .label { margin-bottom: 6px; }
.album-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.album-foto { position: relative; margin: 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.album-foto.gekozen { outline: 3px solid var(--teal); }
.album-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.album-foto figcaption { font-size: 13px; padding: 4px 6px; color: var(--grijs); }
.ster { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(17,18,19,.55); color: #fff; font-size: 15px; line-height: 30px; text-align: center; cursor: pointer; padding: 0; }
.ster.aan { background: var(--geel); color: #111213; }
.album-duim .ster { width: 20px; height: 20px; font-size: 11px; line-height: 20px; cursor: default; }
/* v4.65: dossierfoto's (+ Foto, uploaden, weghalen met een vraag) */
.dfoto-soort { margin: 4px 0 12px; }
.album-duim.dfoto-bezig { cursor: default; }
.album-duim.bezig img { opacity: .5; }
.album-duim.misl img { opacity: .3; }
.album-duim .fotostatus { top: 30%; font-size: 11px; line-height: 1.2; padding: 0 2px; }
.dfoto-weg { position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(17,18,19,.55); color: #fff; font-size: 13px; line-height: 30px; text-align: center; cursor: pointer; padding: 0; }
.album-duim .dfoto-weg { width: 20px; height: 20px; font-size: 11px; line-height: 20px; top: 2px; left: auto; right: 2px; }
.dfoto-vraag { position: absolute; inset: 0; background: rgba(255,255,255,.95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 8px; font-size: 13px; }
.dfoto-vraag .knoppen { display: flex; gap: 6px; margin-top: 6px; }

/* v3.2026.10.05c: WhatsApp */
.wa-knop { background: var(--wa) !important; color: #fff !important; border-color: var(--wa) !important; }
.wa-knop:hover { filter: brightness(.95); }
.wa-klaar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; background: var(--groen-t); border: 2px solid var(--wa); }
.toast-knop { margin-left: 12px; background: var(--wa); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; }
.planbalk .knop.licht { color: var(--zwart) !important; -webkit-text-fill-color: var(--zwart); }
body.plant .slot.buiten { background: none; border-bottom-color: transparent; color: #a9b9bb; }

/* v3.2026.10.05d: hoofdfoto staand (portret) */
.kop-foto { width: 48px; height: 64px; }
.kaart.met-foto { display: flex; gap: 16px; align-items: flex-start; }
.kaart.met-foto > .raster { flex: 1; min-width: 0; }
.dos-foto { position: relative; flex: 0 0 168px; width: 168px; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: #dfe3e5; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.dos-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dos-foto span { position: absolute; left: 6px; bottom: 6px; background: rgba(17,18,19,.65); color: #fff; font: 12px Oswald, sans-serif; padding: 2px 7px; border-radius: 6px; }
@media (max-width: 700px) {
  .kaart.met-foto { gap: 12px; }
  .dos-foto { flex: 0 0 116px; width: 116px; }
  .kaart.met-foto > .raster { grid-template-columns: 1fr; }
}
@media (max-width: 700px) { .kop-foto { display: none; } }

/* v3.2026.10.05e: per-hoek invullen, dempers, rapport-meter, In het kort */
.hoeken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hoek { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.hk-veld { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; }
.hk-veld .invoer { width: 72px; text-align: center; }
.demper-raster { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px; gap: 6px 10px; align-items: center; }
.demper-raster .invoer { text-align: center; }
.meter { border: 2px solid var(--groen); border-radius: 10px; padding: 10px 12px; }
.meter.mager { border-color: var(--oranje); }
.meter-kop { display: flex; justify-content: space-between; font-family: Oswald, sans-serif; }
.meter.compleet .meter-kop b { color: var(--groen); } .meter.mager .meter-kop b { color: var(--oranje-tx); }
.meter-balk { height: 6px; border-radius: 3px; background: var(--grijs-t); margin: 6px 0; overflow: hidden; }
.meter-balk div { height: 6px; background: var(--groen); }
.meter.mager .meter-balk div { background: var(--oranje); }
.meter-punt { display: flex; gap: 8px; font-size: 13px; padding: 2px 0; }
.groen-t { color: var(--groen); } .oranje-t { color: var(--oranje-tx); }
.kort-rij { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 15px; }
.kort-rij .invoer { flex: 1; min-width: 0; }
.kort-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 0; color: #fff; background: var(--groen); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; padding: 0; }
.kort-ic.let { background: var(--oranje-tx); }
.kort-ic.nu { background: var(--rood); }   /* v4.77 */
@media (max-width: 700px) { .hk-veld .invoer { width: 64px; } }

/* v3.2026.10.06a: offertes opvolgen, intern veld per regel, onderdelen in het dossier */
.opvolg-kop { display: flex; align-items: center; gap: 8px; color: var(--oranje-tx); }
.badge.opvolg { background: var(--oranje-t); color: var(--oranje-tx) !important; -webkit-text-fill-color: var(--oranje-tx) !important; }
.rij.opvolg-rij { border-left: 4px solid var(--oranje); background: var(--oranje-t); flex-wrap: wrap; gap: 6px; }
.rij.opvolg-rij .tijd { color: var(--oranje-tx) !important; -webkit-text-fill-color: var(--oranje-tx) !important; }
.rij.opvolg-rij .knop { flex: none; }
.internrij { grid-column: 1/3; display: flex; align-items: center; gap: 8px; background: var(--intern-t); border: 1px dashed var(--intern-r); border-radius: 8px; padding: 5px 8px; margin-top: 4px; font-size: 13px; }
.internrij input { flex: 1; min-width: 0; padding: 5px 7px; font-size: 13px; background: transparent; border: 0; }
.internrij input:focus { outline: none; background: #fff; }
/* v4.22: interne bestelgegevens (artikelnummer, leverancier, levertijd, notitie) */
.internrij .intern-nr { flex: 1.2 1 0; font-family: 'Oswald', sans-serif; letter-spacing: .02em; }
.internrij .intern-lev { flex: 0 1 auto; max-width: 190px; padding: 4px 6px; font-size: 13px; background: transparent; border: 0; border-left: 1px dashed var(--intern-r); border-radius: 0; }
.internrij .intern-lt { flex: 0 0 72px; border-left: 1px dashed var(--intern-r); }
.internrij .intern-not { flex: 2 1 0; border-left: 1px dashed var(--intern-r); }
@media (max-width: 700px) { .internrij { flex-wrap: wrap; } .internrij .intern-nr { flex: 1 1 45%; } .internrij .intern-lev { flex: 1 1 45%; max-width: none; } .internrij .intern-not { flex: 1 1 100%; border-left: 0; border-top: 1px dashed var(--intern-r); } }
@media (max-width: 700px) { .internrij { grid-column: auto; width: 100%; } }
.kaart.onderdelen { padding: 4px 14px; }
.onderdeel { padding: 9px 0; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.onderdeel:last-child { border-bottom: 0; }
.onderdeel .intern { font-family: Oswald, sans-serif; color: var(--intern-tx); font-size: 13px; margin: 1px 0; }
.verzend-info .knop.mini { margin-left: 6px; vertical-align: middle; }
@media (min-width: 900px) {
  #woRegels .regel:has(.internrij), #ofRegels .regel:has(.internrij), #ofRegels .regel:has(.inkooprij) { flex-wrap: wrap; }
  #woRegels .regel:has(.internrij) .oms.regeloms, #ofRegels .regel:has(.internrij) .oms.regeloms, #ofRegels .regel:has(.inkooprij) .oms.regeloms { flex: 1 1 0; min-width: 0; }
  .internrij, .regel .inkooprij { flex: 0 0 calc(100% - 28px); margin-left: 28px; width: auto; box-sizing: border-box; }
}

/* ── v4.5: klikbare werkorder in de planning ─────────────────────── */
.wo-knop { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; line-height: 1.2; padding: 3px 9px 3px 6px; border-radius: 6px;
  background: #fff; border: 1.5px solid var(--zwart); color: var(--zwart) !important; -webkit-text-fill-color: var(--zwart) !important; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.wo-knop b { font-family: 'Oswald', Arial, sans-serif; font-weight: 600; letter-spacing: .3px; }
.wo-knop .wo-ic { font-size: 13px; }
.wo-knop:hover, .wo-knop:focus-visible { background: var(--teal-l); }
.wo-knop.teal { border-color: var(--teal); color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; }
.wo-knop.oranje { border-color: var(--oranje-tx); color: var(--oranje-tx) !important; -webkit-text-fill-color: var(--oranje-tx) !important; }
.wo-knop.groen { border-color: var(--groen); color: var(--groen) !important; -webkit-text-fill-color: var(--groen) !important; }
.wo-knop.rood { border-color: var(--rood); color: var(--rood) !important; -webkit-text-fill-color: var(--rood) !important; }

/* ── v4.5: bestellijst ───────────────────────────────────────────── */
#bestelBlok { margin-top: 14px; }
#bestelBlok .betaal-regel.rustig { cursor: default; }
.bs-lev { padding: 10px 12px; }
.bs-levkop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.bs-levkop span.klein { flex: 1; }
.bs-levkop .knop { width: auto; flex: 0 0 auto; }
.bs-rij { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--lijn); }
.bs-levkop + .bs-rij, .bs-wo .bs-rij:first-child { border-top: 0; }
.bs-rij.spoed { border-left: 4px solid var(--rood); padding-left: 8px; }
.bs-rij.klaar { opacity: .6; }
.bs-info { flex: 1; min-width: 0; }
.bs-wat { font-size: 15px; }
.bs-spoed { color: var(--rood); font-size: 11px; letter-spacing: .5px; }
.bs-voor { font-size: 13px; color: var(--grijs); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 2px; }
.bs-voor a { color: var(--teal); font-weight: 600; text-decoration: none; }
.bs-opm { font-size: 13px; color: var(--oranje-tx); margin-top: 2px; }
.bs-st { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bs-knoppen { display: flex; gap: 4px; }
.bs-knoppen .knop.klein { font-size: 13px; padding: 5px 9px; }
.bs-lev-kies { font: inherit; font-size: 13px; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--lijn); background: #fff; }
.bs-spoedkies { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
@media (max-width: 520px) { .bs-rij { flex-wrap: wrap; } .bs-st { flex-direction: row; width: 100%; justify-content: space-between; } }

.rij.afspraak .t2.badges { white-space: normal; overflow: visible; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wo-knop { max-width: 100%; overflow: hidden; }
@media (max-width: 520px) { .rij.afspraak .wo-knop .wo-st, .rij.afspraak .wo-knop .wo-pre { display: none; } }
/* v4.6b: Reedijk-zoekcode */
.bs-codes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.bs-code { font: 600 13px 'Oswald', Arial, sans-serif; letter-spacing: .4px; padding: 3px 8px; border-radius: 6px; border: 1.5px dashed var(--teal); background: var(--teal-l); color: var(--teal); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.bs-code span { font-size: 13px; opacity: .7; }
.bs-code.ok { background: var(--groen-t); border-color: var(--groen); color: var(--groen); }
.bs-dicht b { color: var(--rood); }
/* v4.2: artikelen per dienst */
.art-filter { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 8px; font-size: 13px; color: var(--grijs); }
.art-filter .knop.klein { font-size: 13px; padding: 4px 9px; }
.pakket-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.pakket-knoppen .knop.klein { font-size: 13px; padding: 4px 9px; }
.korting-terug { margin-bottom: 6px; }
.korting-terug .knop.klein { font-size: 13px; padding: 4px 9px; }
/* v4.8: banden ingekocht */
.bs-rijtje { display: flex; gap: 6px; align-items: stretch; }
.bs-rijtje > :first-child { flex: 1; }
.bs-cijfers { flex: 0 0 auto; }
.bt-jaren { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.bt-jaar { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--lijn); background: #fff; font: inherit; cursor: pointer; }
.bt-jaar span { font-family: 'Oswald', Arial, sans-serif; font-size: 18px; color: var(--teal); }
.bt-jaar.aan { border-color: var(--teal); background: var(--teal-l); }
.bt-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.bt-tabel th, .bt-tabel td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--lijn); }
.bt-tabel th:first-child, .bt-tabel td:first-child { text-align: left; }
.bt-tabel tfoot td { border-top: 2px solid var(--zwart); border-bottom: 0; font-weight: 600; }
/* v4.9: Cijfers */
#schermCijfers h2 { margin-top: 18px; }
.cf-periode { margin: -4px 0 6px; }
.cf-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 6px; }
.cf-tegel { background: var(--kaart); border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cf-label { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .5px; }
.cf-waarde { font-family: 'Oswald', Arial, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.15; }
.cf-sub { font-size: 13px; color: var(--grijs); min-height: 16px; }
.cf-vs { font-size: 13px; font-weight: 600; color: var(--grijs); }
.cf-vs.op { color: var(--groen); }
.cf-vs.neer { color: var(--rood); }
.cf-balken { padding: 8px 12px; }
.cf-balk { display: grid; grid-template-columns: 150px 1fr 90px 40px 56px; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.cf-bb { background: var(--grijs-t); border-radius: 4px; height: 10px; overflow: hidden; }
.cf-bb i { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.cf-bb i.min { background: var(--rood); }
.cf-bv { text-align: right; font-family: 'Oswald', Arial, sans-serif; }
.cf-bp { text-align: right; color: var(--grijs); font-size: 13px; }
.cf-scroll { overflow-x: auto; padding: 6px 10px; }
.cf-scroll .bt-tabel { min-width: 560px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.cf-chip { background: var(--grijs-t); color: var(--grijs); border-radius: 999px; padding: 2px 9px; font-size: 13px; white-space: nowrap; }   /* teller, geen knop */
.cf-chip b { color: var(--tekst); font-weight: 500; }
.cf-voet { margin: 14px 0 30px; }
@media (max-width: 600px) { .cf-balk { grid-template-columns: 110px 1fr 76px 36px; } .cf-balk .cf-vs { display: none; } }
.bt-tabel td, .bt-tabel th { white-space: nowrap; }

/* v4.9.1 cijfercode */
.cf-pin { max-width: 260px; margin: 30px auto; padding: 18px; text-align: center; }
.cf-pin input { width: 100%; font-family: 'Oswald', Arial, sans-serif; font-size: 28px; letter-spacing: 10px; text-align: center; padding: 8px; margin: 8px 0 4px; border: 1px solid #d6d9db; border-radius: 10px; }
.cf-pin .cf-sub { color: var(--rood); }
@keyframes cfSchud { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.cf-pin input.schud { animation: cfSchud .25s 2; }

/* v4.10 bandensets */
.bs-lijst { display: grid; gap: 8px; margin-bottom: 6px; }
.bs-set { background: var(--kaart); border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); cursor: pointer; }
.bs-set.weg { opacity: .55; }
.bs-kop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.bs-kop b { font-family: 'Bebas Neue'; font-weight: 400; font-size: 18px; letter-spacing: .5px; margin-right: 4px; }
.bs-band { font-family: 'Oswald', Arial, sans-serif; font-size: 15px; margin: 2px 0 6px; }
.bs-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.bs-mm { display: inline-flex; gap: 4px; align-items: baseline; border-radius: 8px; padding: 2px 8px; background: var(--grijs-t); font-family: 'Oswald', Arial, sans-serif; font-size: 13px; }
.bs-mm i { font-style: normal; font-size: 11px; color: var(--grijs); }
.bs-mm.groen { background: var(--groen-t); color: var(--groen); }
.bs-mm.oranje { background: var(--oranje-t); color: var(--oranje-tx); }
.bs-mm.rood { background: var(--rood-t); color: var(--rood); }
.bs-hoeken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bs-hoek { display: flex; flex-direction: column; gap: 2px; }
.bs-hoek input { text-align: center; font-family: 'Oswald', Arial, sans-serif; font-size: 18px; padding: 8px 4px; min-width: 0; }
.bs-hoek input.groen { background: var(--groen-t); } .bs-hoek input.oranje { background: var(--oranje-t); } .bs-hoek input.rood { background: var(--rood-t); }
.bs-meer { margin: 4px 0 12px; } .bs-meer summary { cursor: pointer; font-size: 13px; color: var(--grijs); margin-bottom: 6px; }
.bs-velg input { margin-top: 6px; }
.bs-voorstel { display: grid; gap: 6px; }
.bs-vrij { background: var(--bg); border-radius: 8px; padding: 6px 8px; }
.af-banden { margin-top: 8px; } .af-bandregel { font-size: 15px; margin: 2px 0; } .af-bandregel .bs-mm { padding: 0 6px; font-size: 13px; }
.taak-melding { background: var(--teal-l); }
.versie.versie-oud { color: var(--oranje); font-weight: 600; }
/* v4.11 afspraakduur */
.af-duur { flex-wrap: wrap; }
.af-eigenduur { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.af-eigenduur input { max-width: 90px; text-align: center; }
/* v4.12 — klantherinneringen (APK / seizoen) */
.hr-kop { display: flex; align-items: center; gap: 8px; color: var(--teal); cursor: pointer; flex-wrap: wrap; }
.hr-kop .regelknoppen { margin-left: auto; display: flex; gap: 6px; }
.hr-mm { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.hr-mm .bs-mm { padding: 0 6px; font-size: 13px; }
.knop.groen { background: var(--wa); color: #fff; }
.hr-voorbeeld { width: 100%; height: 70vh; border: 1px solid var(--lijn); border-radius: 10px; background: #f2f2f2; }
.kanaal-keuze { display: grid; gap: 8px; }
/* v4.14 */
#aanvragenBlok.kopie { opacity: .85; }
table.snelheid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.snelheid th, table.snelheid td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--lijn); }
.rood-t { color: var(--rood); } .oranje-t { color: var(--oranje-tx); } .groen-t { color: var(--groen); }

/* ================================================================
   v4.16 — STARTSCHERM ALS WERKBANK
   Links: Vandaag (+ Morgen vanaf 15:00). Rechts: Te doen (knoppen met tellers), bestellen, betalen, recent.
   Op de telefoon onder elkaar in die volgorde: de auto's van vandaag staan meteen onder de zoekbalk.
   ================================================================ */
@media (min-width: 900px) {
  #schermStart .start-kolommen { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; }
}
#startLinks > #vandaagBlok > h2:first-child { margin-top: 4px; }
.td-kop { margin-top: 4px; }
.td-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.td-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--lijn); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 15px; color: var(--tekst); cursor: pointer; }
.td-chip .badge { margin: 0; }
.td-chip.aan { border-color: var(--teal); background: var(--teal-l); }
.td-sec.dicht { display: none; }
#bestelBlok, #betaalBlok { margin-top: 8px; }
/* lopende / eerstvolgende afspraak */
.rij.afspraak.is-nu { box-shadow: 0 0 0 2px var(--teal); position: relative; }
.rij.afspraak.is-nu .tijd::after { content: 'NU'; display: block; font-family: 'Bebas Neue'; font-size: 13px; letter-spacing: .5px; color: var(--teal); -webkit-text-fill-color: var(--teal); }
.rij.afspraak .dos-knop { font-size: 15px; }
.klaar-regel { display: flex; align-items: center; gap: 8px; width: 100%; margin: 4px 0 8px; background: transparent; border: 1px dashed var(--lijn); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 15px; color: var(--grijs); text-align: left; cursor: pointer; }
.klaar-regel .pijl { margin-left: auto; font-size: 15px; }
.klaar-lijst .rij { opacity: .75; }
/* morgen */
.morgen-kop { color: var(--grijs); margin-top: 22px; }
.morgen-rij { background: #fafafa; }
.morgen-rij .tijd { color: var(--grijs) !important; -webkit-text-fill-color: var(--grijs) !important; }
/* recent: knop naar de open werkorder */
.recent-wo { flex: none; }
.recent-wo:empty { display: none; }
@media (max-width: 899px) {
  .recent-rij .recent-wo .wo-knop .wo-st { display: none; }
}
@media (max-width: 899px) { .recent-rij .wo-pre { display: none; } }
.nb-hint { background: var(--groen-t); color: var(--groen); border-radius: 8px; padding: 7px 10px; margin: -2px 0 10px; }

/* ================================================================
   v4.16c — TELEFOON: nooit breder dan het scherm; afspraakregel compact met kentekenknop
   ================================================================ */
/* v4.31: overflow-x alleen op html (gaat naar het venster). Op body maakte het van body een eigen scrollvak:
   daardoor scrolde de kopbalk mee en bleef de onderbalk op de iPad halverwege de pagina hangen. */
html { overflow-x: hidden; max-width: 100%; }
body { max-width: 100%; overflow-x: clip; }
.rij .info { min-width: 0; }
.rij .t1, .rij .t2 { overflow-wrap: anywhere; }
.kt-knop { display: none; }
@media (max-width: 899px) {
  .kop-binnen > div:last-child { padding-right: max(10px, env(safe-area-inset-right)); }
  .rij.afspraak .tijd { font-size: 18px; min-width: 46px; }
  .rij.afspraak > .kt-plaat, .rij.afspraak .dos-knop { display: none; }
  .rij.afspraak .t1.met-kt { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .rij.afspraak .t1.met-kt .t1-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rij.afspraak .kt-knop, .rij .kt-knop { display: inline-block; flex: none; margin-top: -2px; background: var(--teal); color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0; border-radius: 7px; padding: 3px 8px;
    font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .5px; line-height: 1.3; cursor: pointer; }
  .rij.afspraak .t2.badges { display: flex; flex-wrap: wrap; gap: 4px; }
  /* v4.17: Recent geopend - zelfde kleine kentekenknop als bij Vandaag */
  .recent-rij > .kt-plaat { display: none; }
  .recent-rij .t1.met-kt { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .recent-rij .t1.met-kt .t1-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rij.afspraak .t2 { white-space: normal; }
  /* bestellen: geen dubbele info op de telefoon */
  #bestelBlok .bs-cijfers, #bestelBlok .bs-klap { display: none; }
  #bestelBlok .bs-codes .bs-code + .bs-code { display: none; }
}
.nb-blok { background: var(--teal-zacht); border: 1px solid var(--teal-rand); border-radius: 10px; padding: 9px 11px; margin: 0 0 12px; }
.nb-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.nb-rij .chip { cursor: pointer; }   /* keuzeknop (ontwerp keuzeknopjes 21-10): zelfde als .chip */
/* v4.20 — agendakaarten vol in de statuskleur (zoals Google Agenda) */
#agInhoud .akaart.vol { box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.08); filter: none; }   /* v4.22: schaduwlijntje links weer weg (Rouke); nieuwe schaduw rechtsonder volgt in een designronde */
#agInhoud .akaart.vol:hover { filter: brightness(1.06); }
#agInhoud .akaart.vol, #agInhoud .akaart.vol * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
#agInhoud .akaart.vol.licht, #agInhoud .akaart.vol.licht * { color: #111213 !important; -webkit-text-fill-color: #111213 !important; }
#agInhoud .akaart.vol .klein { opacity: .92; }
#agInhoud .akaart.vol .kt-plaat .nr, #agInhoud .akaart.vol.licht .kt-plaat .nr { color: #111213 !important; -webkit-text-fill-color: #111213 !important; }
#agInhoud .akaart.vol .kt-plaat .eu { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.af-soort { width: 100%; }
.af-soort button { flex: 1; }

.ap-mails { margin-top: 8px; border-top: 1px solid var(--lijn); padding-top: 6px; }

/* v4.22: leveranciersprofielen */
.lv-kaart { padding: 0; margin-bottom: 8px; overflow: hidden; }
.lv-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; background: none; border: 0; padding: 10px 12px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.lv-kop b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: .03em; color: var(--teal); }
.lv-kop .lv-samen { flex: 1 1 100%; color: var(--grijs); }
.lv-kop .pijl { margin-left: auto; color: var(--grijs); }
.lv-form { padding: 4px 12px 12px; border-top: 1px solid var(--lijn); display: grid; gap: 8px; }
.lv-veld { display: grid; gap: 3px; font-size: 13px; }
.lv-veld > span { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .5px; }
.lv-dagen { display: flex; gap: 10px; flex-wrap: wrap; }
.lv-dagen label { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.lv-knoppen { display: flex; gap: 8px; }

/* v4.23: menu Meer + pagina Inkooporders */
.navbalk button { position: relative; }
.nav-tel { position: static; margin-left: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--rood); color: #fff; font: 11px/16px 'Oswald', sans-serif; text-align: center; }
.meer-menu { position: fixed; z-index: 10000; width: 220px; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 6px; display: grid; gap: 2px; }
.meer-menu button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 8px; padding: 10px; font: 18px 'Bebas Neue', sans-serif; letter-spacing: .6px; color: #111213; cursor: pointer; text-align: left; }
.meer-menu button:hover { background: var(--bg); }
.meer-menu svg { width: 20px; height: 20px; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.meer-tel { margin-left: auto; font: 13px 'Oswald', sans-serif; color: var(--grijs); }
.meer-tel.rood { color: var(--rood); font-weight: 600; }
.io-dkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.io-acties { display: flex; gap: 6px; }
.io-tabs { display: flex; flex-wrap: wrap; margin: 6px 0 14px; }
.io-tabs button { flex: 1 1 auto; }
.io-tel { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 9px; background: rgba(0,0,0,.08); font: 12px/18px 'Oswald', sans-serif; }
.io-tel.oranje { background: var(--oranje-t); color: var(--oranje-tx); }
.io-tel.rood { background: var(--rood); color: #fff; }
.io-sub { margin-top: 18px; }
.io-sub .klein { font-family: 'Oswald', sans-serif; letter-spacing: 0; text-transform: none; color: var(--grijs); margin-left: 6px; }
.io-later { opacity: .85; }
.io-sug { margin-top: 8px; padding: 8px; border: 1px dashed var(--teal-rand); border-radius: 8px; background: var(--teal-zacht); }
.io-sugkop { font: 13px 'Oswald', sans-serif; color: var(--teal); margin-bottom: 4px; }
.bs-kies { display: flex; align-items: center; padding-right: 6px; }
.bs-kies input { width: 18px; height: 18px; }
.bs-rij.probleem { background: var(--rood-t); }
.bs-prob { color: var(--rood); }
.bs-rood { color: var(--rood); }
.knop.rood { background: var(--rood); color: #fff; border-color: var(--rood); }
.io-zoek { width: 100%; margin-bottom: 10px; }
.io-klaarkop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; background: none; border: 0; padding: 2px 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.io-klaarkop .pijl { margin-left: auto; color: var(--grijs); }
.io-wolijst { padding: 0; overflow: hidden; }
.io-worij { display: grid; grid-template-columns: 88px 1fr auto 14px; gap: 10px; align-items: center; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--lijn); padding: 10px 12px; text-align: left; cursor: pointer; font: 14px 'Oswald', sans-serif; color: inherit; }
.io-worij:last-child { border-bottom: 0; }
.io-worij:hover { background: var(--teal-zacht); }
.io-wodag { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--teal); letter-spacing: .5px; }
.io-wowie { min-width: 0; }
.io-wodelen { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--grijs); }
.io-worij .pijl { color: var(--grijs); }
.io-niets { margin-bottom: 10px; }
@media (max-width: 700px) {
  .nav-tel { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; }
  .io-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .io-worij { grid-template-columns: 64px 1fr 14px; }
  .io-worij .io-wost { grid-column: 2 / 3; }
  .io-tabs button { font-size: 15px; padding: 6px 4px; }
}

/* v4.24: schroefset-calculator (offerte) */
.os-soort { margin-bottom: 10px; }
.os-auto { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.os-autokop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.os-autokop .klein { flex: 1; }
.os-zoek { display: flex; gap: 6px; margin: 10px 0; }
.os-zoek .invoer { flex: 1; min-width: 0; }
.os-telling { margin-bottom: 6px; }
.os-set { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--lijn); }
.os-set.mat { opacity: .55; }
.os-setinfo { flex: 1; min-width: 0; }
.os-setnaam { margin-bottom: 2px; }
.os-setnaam .badge { margin-left: 4px; }
.os-past { color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-notes { margin: 4px 0 0 16px; padding: 0; font-size: 13px; color: var(--grijs); }
.os-setprijs { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 110px; }
.os-setprijs b { font-family: 'Oswald', sans-serif; font-size: 15px; }
.os-gekozen { border: 2px solid var(--teal); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: var(--teal-zacht); }
.os-gekozenkop { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.os-reken { width: 100%; border-collapse: collapse; font: 14px 'Oswald', sans-serif; margin-bottom: 8px; }
.os-reken td { padding: 3px 0; border-bottom: 1px solid var(--lijn); }
.os-reken td.r { text-align: right; }
.os-reken tr.grijs td { color: var(--grijs); }
.os-marge { font-size: 13px; margin: 6px 0; }
.os-knoppen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.os-cond { width: 100%; border-collapse: collapse; font-size: 13px; }
.os-cond th { text-align: left; font: 13px 'Bebas Neue', sans-serif; color: var(--grijs); letter-spacing: .04em; }
.os-cond td { padding: 3px 4px 3px 0; }
.os-cond .invoer { width: 100%; min-width: 50px; padding: 4px 6px; }
@media (max-width: 520px) { .os-set { flex-wrap: wrap; } .os-setprijs { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; } }
/* v4.25 */
.os-lt { margin-top: 6px; color: var(--teal); }
.melding.af-telaat { background: var(--rood-t); border-color: var(--rood-r); color: var(--rood); }
/* v4.26: werkorderlijst op datum */
.wl-periode { width: auto; flex: none; padding: 8px 10px; }
.wl-groep { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .5px; color: var(--teal); margin: 14px 2px 6px; }
.wl-groep:first-child { margin-top: 2px; }
.wl-groep span { font-family: 'Oswald', sans-serif; font-size: 13px; color: var(--grijs); margin-left: 4px; }
.wl-af { font-weight: 500; color: #111213; }
.wl-af.later { color: var(--teal); }
/* v4.26: kleine schaduw rechtsonder bij de afspraakblokken (wens Rouke 12-10) */
#agInhoud .akaart.blok, #agInhoud .akaart.vol { box-shadow: 2px 3px 2px rgba(0,0,0,.30), 0 0 0 1px rgba(0,0,0,.06); }   /* v4.27: harder en strakker */
/* v4.27: klantweergave op de offerte (klant kijkt mee) */
#schermOfferte.klantweergave .of-intern, #schermOfferte.klantweergave .inkooprij, #schermOfferte.klantweergave .internrij,
#schermOfferte.klantweergave .intern-knop, #schermOfferte.klantweergave .margeblok { display: none !important; }
#schermOfferte.klantweergave .of-banden .kw-weg { display: none !important; }   /* v4.55b: banden zoeken mag, zonder inkoop en marge */
.bk-prijs.bk-km b { font-size: 18px; }
.kw-knop.aan { background: var(--teal); color: #fff; border-color: var(--teal); }
.kw-melding { background: var(--teal-l); border-color: var(--teal-rand); }
/* v4.27: Google-reviews */
.rv-ster { color: var(--ster); letter-spacing: 1px; font-size: 15px; }
.rv-ster i { color: #d5d8db; font-style: normal; }
.rv-kort { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.rv-detail { background: var(--bg); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.rv-tekst { margin-top: 6px; font-size: 15px; line-height: 1.45; }
.rv-antw { color: var(--teal); }
/* v4.28: leverancier koppelen aan SnelStart */
.lv-treffers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gemaild{margin-left:6px;color:var(--teal);white-space:nowrap}   /* v4.29 */

/* v4.30: vragen uit het contactformulier */
.vr-bericht { margin-top: 8px; padding: 10px 12px; background: var(--bg); border-left: 4px solid var(--teal); border-radius: 6px; white-space: normal; line-height: 1.45; }
.vr-detail { margin-bottom: 12px; }
.vr-spam { margin: 10px 0; padding: 10px 12px; background: var(--oranje-t); border-left: 4px solid var(--oranje); border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.45; }   /* v4.83: vraag van de website op spam */

/* ================================================================
   v4.31 — WERKORDERLIJST: status in kleur + stappen + onderdelen
   ================================================================ */
.wl-rij { border-left: 4px solid #c9ced3; align-items: center; }
.wl-rij.st-open { border-left-color: var(--grijs); }
.wl-rij.st-bezig { border-left-color: var(--teal); }
.wl-rij.st-wacht { border-left-color: var(--oranje); }
.wl-rij.st-gereed { border-left-color: var(--paars); }
.wl-rij.st-factuur { border-left-color: #8aa58a; }
.wl-rij.st-betaald { border-left-color: var(--groen); }
.wl-rij.st-weg { border-left-color: var(--rood); opacity: .65; }
.wl-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.wl-stappen { display: inline-flex; gap: 2px; }
.wl-stappen span { font-size: 11px; letter-spacing: .2px; padding: 2px 7px; background: var(--grijs-t); color: var(--grijs-l); text-transform: uppercase; }
.wl-stappen span:first-child { border-radius: 10px 0 0 10px; }
.wl-stappen span:last-child { border-radius: 0 10px 10px 0; }
.wl-stappen span.x-af { background: var(--teal-l); color: var(--teal); }
.wl-stappen span.x-nu { background: var(--zwart); color: #fff; font-weight: 600; }
.st-wacht .wl-stappen span.x-nu { background: var(--oranje); }
.st-gereed .wl-stappen span.x-nu { background: var(--paars); }
.st-betaald .wl-stappen span.x-nu { background: var(--groen); }
.wl-mat { font-size: 13px; padding: 2px 9px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wl-mat.bestellen { background: var(--oranje-t); color: var(--oranje-tx); font-weight: 600; }
.wl-mat.bestellen.laat, .wl-mat.probleem { background: var(--rood-t); color: var(--rood); font-weight: 600; }
.wl-mat.onderweg { background: var(--teal-l); color: var(--teal); }
.wl-mat.controleren { background: var(--blauw-t); color: var(--blauw); }
.wl-mat.binnen { background: var(--groen-t); color: var(--groen); font-weight: 600; }
.wl-mat.geen, .wl-mat.leeg, .wl-mat.laden { background: none; color: var(--grijs-l); padding-left: 0; }
.wl-mat.leeg { color: var(--oranje-tx); }
.wl-status { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .5px; white-space: nowrap; text-align: right; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.st-open .wl-status { color: var(--grijs); } .st-bezig .wl-status { color: var(--teal); } .st-wacht .wl-status { color: var(--oranje-tx); }
.st-gereed .wl-status { color: var(--paars); } .st-factuur .wl-status { color: #5e7d5e; } .st-betaald .wl-status { color: var(--groen); } .st-weg .wl-status { color: var(--rood); }
.wl-matfilters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -2px 0 8px; }
.wl-geenkt { width: 0; }
.wl-st-m { display: none; }
.wl-stappen span { position: static; }
@media (max-width: 599px) {
  .wl-rij { gap: 10px; padding: 10px 10px 10px 12px; }
  .wl-rij .kt-plaat { align-self: flex-start; margin-top: 2px; }
  .wl-rij .t1 { white-space: normal; }
  .wl-rij .t2 { white-space: normal; }
  .wl-status { display: none; }
  .wl-st-m { display: inline; font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: .5px; }
  .st-open .wl-st-m { color: var(--grijs); } .st-bezig .wl-st-m { color: var(--teal); } .st-wacht .wl-st-m { color: var(--oranje-tx); }
  .st-gereed .wl-st-m { color: var(--paars); } .st-factuur .wl-st-m { color: #5e7d5e; } .st-betaald .wl-st-m { color: var(--groen); } .st-weg .wl-st-m { color: var(--rood); }
  .wl-stappen span { font-size: 0; width: 16px; height: 7px; padding: 0; }
  .wl-onder { gap: 4px 8px; margin-top: 5px; }
  .wl-rij .meer { align-self: flex-start; }
  .wl-mat { white-space: normal; }
}

/* ================================================================
   v4.32 — POSTS (Instagram/Facebook)
   ================================================================ */
.foto .ster { position: absolute; bottom: 6px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(17,18,19,.6); display: flex; align-items: center; justify-content: center; padding: 0; }
.foto:has(input) .ster { bottom: 42px; }
.foto .ster svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.foto .ster.aan svg { fill: var(--teal); stroke: var(--teal); }
.pt-tabs { max-width: 560px; margin: 4px 0 14px; }
.pt-dagkop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; }
.pt-dagkop .label { flex-basis: 100%; }
.pt-dagkop > div:nth-child(2) { flex: 1; min-width: 180px; }
.pt-kaart { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pt-kaart.klein-kaart { opacity: .85; }
.pt-rij { display: flex; gap: 12px; align-items: center; }
.pt-rij .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.pt-rij .t1 { font-weight: 500; font-size: 15px; }
.pt-rij .t2 { font-size: 13px; color: var(--grijs); }
.pt-duim { flex: none; border-radius: 8px; object-fit: cover; background: #dde0e2; display: block; }
.pt-duim.leeg { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--grijs); text-align: center; }
.pt-reden { font-size: 13px; line-height: 1.45; }
.pt-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.pt-kaart .pt-knoppen .knop.teal { flex: 1.5; justify-content: center; }
.pt-kaart .pt-knoppen .knop.licht:not(.klein) { flex: 1; justify-content: center; }
.pt-rustig { border-top: 3px solid var(--teal); }
.pt-rustig-titel { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .5px; color: var(--teal); margin-bottom: 4px; }
.pt-idee { margin: 12px 0 8px; justify-content: center; width: 100%; }
.pt-bakrij { gap: 12px; }
.pt-bakrij .badge { flex: none; }
.pt-filters { margin: 0 0 10px; }
.pt-postkop { margin: 12px 0 10px; }
.pt-postkop .naam { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: .5px; color: var(--teal); line-height: 1.1; }
.pt-postkop .sub { color: var(--grijs); font-size: 13px; }
.pt-type { margin: 4px 0 6px; max-width: 420px; }
.pt-fotogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pt-foto { display: flex; flex-direction: column; gap: 6px; }
.pt-fotoknop { position: relative; border: 0; padding: 0; background: #dde0e2; border-radius: 10px; overflow: hidden; display: block; width: 100%; align-self: start; }
.pt-fotoknop img { width: 100%; height: auto; display: block; min-height: 80px; }   /* eigen verhouding: het gele vlak staat op de juiste plek */
.pt-fotoknop .pt-vlak { position: absolute; background: #F7C600; }
.pt-fotoknop .pt-platen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }   /* v4.80: plaat in de echte vorm (vier hoeken) */
.pt-fotoknop .pt-platen polygon { fill: #F7C600; }
.pt-nr { position: absolute; top: 6px; left: 6px; background: rgba(17,18,19,.7); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 18px; min-width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.pt-fotobalk { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pt-fotobalk .knop.klein { padding: 6px 9px; min-width: 36px; justify-content: center; }
.pt-tekst { width: 100%; min-height: 180px; font-size: 15px; line-height: 1.5; padding: 10px 12px; border: 1.5px solid var(--lijn); border-radius: 10px; resize: vertical; margin-top: 4px; }
.pt-achter { width: 100%; margin: 4px 0 12px; }
.pt-plan { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.pt-plan .invoer { width: auto; padding: 7px 8px; }
.letop-melding { background: var(--oranje-t); color: var(--oranje-tx); }
.pt-dekvak { position: relative; background: #111213; border-radius: 10px; overflow: hidden; display: flex; justify-content: center; min-height: 200px; }
.pt-dekvak canvas { display: block; max-width: 100%; touch-action: none; cursor: move; }
.pt-dekvak .laden { color: #fff; position: absolute; top: 45%; }
.pt-kiesgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pt-kies { position: relative; display: block; border-radius: 8px; overflow: hidden; border: 3px solid transparent; cursor: pointer; background: #dde0e2; }
.pt-kies.aan { border-color: var(--teal); }
.pt-kies img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pt-kies input { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; accent-color: var(--teal); }
.pt-kies .pt-ster { position: absolute; bottom: 4px; right: 6px; color: var(--teal); font-size: 18px; text-shadow: 0 0 3px #fff; }
.pt-kies .weg { position: absolute; top: 4px; right: 4px; background: rgba(17,18,19,.6); color: #fff; border: 0; border-radius: 50%; width: 30px; height: 30px; font-size: 18px; }
.pt-kies .pt-onscherp { position: absolute; bottom: 4px; left: 4px; }
.pt-dropvak { width: 100%; border: 2px dashed var(--teal); background: var(--teal-l); border-radius: 12px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--teal); font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .5px; }
.pt-dropvak svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#ptMenuTel { color: var(--teal); font-size: 15px; }
@media (max-width: 599px) {
  .pt-tabs button { font-size: 13px; padding: 9px 2px; }
  .pt-kaart .pt-knoppen .knop { font-size: 15px; padding: 10px 8px; }
}

/* ================= v4.35 UITWEGEN ================= */
.uw-samen { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.uw-samen .uw-st { grid-column: 1 / -1; }
.uw-pijl { align-self: center; color: var(--grijs); font-size: 18px; }
.uw-tegel { background: var(--teal-l); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uw-tegel b { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 22px; font-variant-numeric: tabular-nums; }
.uw-kop { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin-bottom: 10px; }
.uw-kop .uw-tank { margin: 0; width: 150px; }
.uw-kop .schakel { margin: 0 0 10px; }
.uw-kop > .knop { margin: 0 0 6px auto; }
.uw-tabs { flex-wrap: wrap; margin-bottom: 12px; }
.uw-tabs .uw-plus { color: var(--teal); }
.uw-punt { color: var(--teal); font-weight: 600; }
.uw-tabs button.aan .uw-punt { color: inherit; }
.uw-kaart { container-type: inline-size; }
.uw-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
#uwTekening { max-width: 380px; margin: 0 auto; width: 100%; }
@container (min-width: 640px) { .uw-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #uwTekening { position: sticky; top: 70px; } }
.uw-raster .wiel input { font-size: 18px; }
.uw-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.uw-tegels .uw-tegel b { font-size: 15px; }
.uw-kruis { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 10px; }
.uw-kruis-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uw-kruis-kop b { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 22px; color: var(--teal); font-variant-numeric: tabular-nums; }
.uw-verschil { display: grid; grid-template-columns: auto 1fr 1fr; gap: 3px 12px; font-size: 13px; margin-top: 8px; padding: 8px 12px; background: var(--bg); border-radius: 10px; }
.uw-verschil .k { color: var(--grijs); }
.uw-verschil b { font-weight: 500; font-variant-numeric: tabular-nums; }
.uw-rijder { margin-top: 8px; }
.uw-h3 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: 1.5px; color: var(--teal); font-size: 18px; margin: 16px 0 6px; }
.tabel-scroll { overflow-x: auto; }
table.uw-tabel { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.uw-tabel th, table.uw-tabel td { padding: 6px 6px; border-bottom: 1px solid var(--grijs-t); text-align: right; white-space: nowrap; }
table.uw-tabel th:first-child, table.uw-tabel thead th { font-weight: 400; color: var(--grijs); }
table.uw-tabel th[scope="row"] { text-align: left; }
.uw-tegels { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
/* database */
.uwd-kop, .uwd-rij { display: grid; grid-template-columns: 92px minmax(0, 1fr) 72px 84px; gap: 10px; align-items: center; }
.uwd-kop { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .5px; padding: 0 14px 4px; }
.uwd-kop span:nth-child(3), .uwd-kop span:nth-child(4), .uwd-kruis, .uwd-totaal { text-align: right; }
.uwd-datum { font-size: 13px; color: var(--grijs); }
.uwd-kruis { font-family: 'Oswald', sans-serif; font-weight: 500; font-variant-numeric: tabular-nums; }
.uwd-kruis.ok { color: var(--groen); }
.uwd-totaal { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uwd-detailkop { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.uwd-detailkop .t1 { font-size: 18px; font-weight: 500; }
.uwd-metingen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 10px; }
.uwd-st { text-align: center; margin-top: 4px; }
@media (max-width: 560px) {
  .uwd-kop { display: none; }
  .uwd-rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info kruis" "datum totaal"; row-gap: 2px; }
  .uwd-rij .info { grid-area: info; } .uwd-rij .uwd-kruis { grid-area: kruis; } .uwd-rij .uwd-datum { grid-area: datum; } .uwd-rij .uwd-totaal { grid-area: totaal; }
}
/* v4.36 uitwegen: instellingen en advies */
.uw-inst, .uw-verst { margin: 0 0 12px; border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 12px; }
.uw-inst summary, .uw-verst summary { cursor: pointer; font-size: 15px; color: var(--grijs); }
.uw-inst[open] summary, .uw-verst[open] summary { margin-bottom: 6px; }
.uw-doel { margin-top: 4px; }
.uw-veren { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.uw-veren .veld { margin: 0; }
.uw-advies { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--teal); background: #fff; }
.uw-ar { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; padding: 4px 0; }
.uw-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: var(--teal-l); color: var(--teal); }
.uw-ar.controle .uw-ic { background: var(--oranje-t); color: var(--oranje-tx); }
.uw-ar.ok .uw-ic { background: var(--groen-t); color: var(--groen); }
.uw-hkn { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 8px; align-items: center; margin: 4px 0 6px; }
.uw-hkn .as { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .5px; width: 44px; }
.uw-hk { display: flex; justify-content: space-between; align-items: center; border-radius: 8px; padding: 7px 10px; background: var(--bg); }
.uw-hk span { font-size: 11px; color: var(--grijs); }
.uw-hk b { font-family: 'Oswald', sans-serif; font-weight: 500; font-variant-numeric: tabular-nums; }
.uw-hk.op { background: var(--groen-t); } .uw-hk.neer { background: var(--oranje-t); }
/* v4.39: terugroepactie in het dossier */
.terugroep { border-left: 4px solid var(--rood); }
.terugroep-item + .terugroep-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.terugroep ul { margin: 6px 0 0 18px; padding: 0; font-size: 15px; }
.terugroep li { margin: 2px 0; }
/* v4.41: Autel-uitlezing (dossier en werkorder) */
.diag-rij + .diag-rij { border-top: 1px solid var(--lijn); }
.diag-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 10px 0; text-align: left; font-family: Oswald; font-size: 15px; color: var(--tekst); cursor: pointer; }
.diag-detail { padding: 0 0 10px 14px; }
.diag-module { margin: 8px 0; }
.diag-code { font-family: Oswald; font-size: 13px; margin: 4px 0; line-height: 1.4; }
.diag-stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; background: #b9bec3; }
.diag-stip.rood { background: var(--rood); } .diag-stip.oranje { background: var(--oranje); } .diag-stip.grijs { background: #b9bec3; }
.diag-wo { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; margin: 12px 0 4px; font-family: Oswald; font-size: 13px; }
/* v4.42: telefoon */
.tel-rij .info[role="button"] { cursor: pointer; }
.tel-rij { flex-wrap: wrap; }
.tel-rij .info { flex: 1 1 180px; min-width: 160px; }
/* v4.43: storingsadvies */
.diag-advies { margin: 10px 0; }
.diag-advies-tekst { white-space: pre-wrap; font-family: Oswald; font-size: 15px; line-height: 1.45; background: var(--bg); border-left: 4px solid var(--teal); border-radius: 8px; padding: 10px 12px; margin-top: 4px; }
/* v4.44: advies per regel */
.adv-rij { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.adv-rij .adv-urg { flex: 0 0 120px; }
.adv-rij .adv-txt { flex: 1 1 220px; }
.adv-rij .adv-prijs { flex: 0 0 90px; }
.adv-snel { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.adv-snel .chip { cursor: pointer; }   /* keuzeknop (ontwerp keuzeknopjes 21-10): zelfde als .chip */
.adv-oud { background: var(--oranje-t); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.adv-oud-rij { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-family: Oswald; font-size: 13px; }
.adv-oud-rij > span { flex: 1 1 200px; }
/* v4.58: advies met offerte - prijs komt uit de offerte (alleen-lezen) */
.adv-rij .adv-prijs[readonly] { background: var(--bg); color: var(--grijs); }
/* v4.68 (IB-012): "Later" herinneren per advies (werkorder en dossier) en "Nog geen reactie" in Te doen */
.adv-rij .adv-later, .adv-dos-later .adv-later { flex: 0 1 230px; width: auto; min-width: 0; font-size: 13px; padding: 8px 10px; }
.adv-rij .adv-datum, .adv-dos-later .adv-datum { flex: 0 0 160px; width: auto; font-size: 13px; padding: 7px 10px; }
.adv-dos-later { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.adv-gr .adv-gr-lijst { white-space: normal; }

/* v4.45: opmerking van de afspraak bovenin de werkorder */
.wo-afspraak-opm { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--geel-t); color: var(--geel-tx); white-space: pre-line; }
.wo-afspraak-opm .knop { flex: none; }
/* v4.45: RDW-uitklap in de werkorder */
.wo-rdw #woRdw { margin-top: 8px; }
.rdw-groepen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px; margin-bottom: 6px; }
.rdw-groep table { width: 100%; border-collapse: collapse; font-family: Oswald, sans-serif; font-size: 13px; }
.rdw-groep td { padding: 2px 0; vertical-align: top; }
.rdw-groep td:first-child { color: var(--grijs); width: 48%; padding-right: 8px; }
.rdw-groep .mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; letter-spacing: .3px; }

/* v4.46 Reedijk fase 1: bandkeuze bij een maat (offerte, bandenmapje) */
.bk-plek:empty { display: none; }
.bk { border: 1.5px solid var(--lijn); border-radius: 10px; padding: 8px 10px; margin: -2px 0 12px; background: var(--kaart); }
.bk-kop { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bk-kop b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 18px; letter-spacing: .5px; color: var(--teal); }
.bk-kop .knop.mini { margin-left: auto; padding: 2px 8px; font-size: 13px; }
.bk-dicht .bk-kop .knop.klein { margin-left: auto; }
.bk-kop .laden::after { content: ' …'; }
.bk-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.bk-filters .segment { flex: 1 1 260px; }
.bk-filters .segment button { font-size: 13px; padding: 6px 2px; }
.bk-filters .segment button:disabled { color: #b8bcc0; }
.bk-zoek { flex: 1 1 160px; min-width: 0; padding: 6px 10px; font-size: 15px; }
.bk-lijst { display: flex; flex-direction: column; }
.bk-rij { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "naam prijs" "lab prijs"; gap: 0 10px; text-align: left; width: 100%; border: 0; border-top: 1px solid var(--lijn); background: none; padding: 7px 2px; font-size: 15px; color: inherit; cursor: pointer; }
.bk-rij:first-child { border-top: 0; }
.bk-rij:hover, .bk-rij:focus-visible { background: var(--teal-l); }
.bk-naam { grid-area: naam; font-family: 'Oswald', sans-serif; }
.bk-lab { grid-area: lab; }
.bk-prijs { grid-area: prijs; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; white-space: nowrap; font-family: 'Oswald', sans-serif; }
.bk-sz { font-size: 13px; }
.bk-voet { margin-top: 6px; }
.bk > .knop.klein { margin-top: 6px; }

/* v4.47 bandkeuze: zoekregel, filters, gekozen band, merken */
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chip { cursor: pointer; }   /* filterpil, zie "Ontwerp keuzeknopjes" onderaan */
.bk-chip:disabled { color: #b8bcc0; cursor: default; }
.bk-tel { opacity: .6; font-size: 11px; }
.bk-filters { flex-direction: column; align-items: stretch; gap: 6px; }
.bk-sz-seg { flex: none !important; }
.bk-reden { margin-top: -2px; }
.bk-ster { color: var(--ster); margin-right: 3px; }
.bk-klant { font-size: 13px; color: var(--teal); }
.bk-rij.gekozen { background: var(--teal-l); }
.bk-niets { padding: 8px 0; }
.bk-leeg { margin: -4px 0 12px; }
.bk-gekozen { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--teal); background: var(--teal-l); border-radius: 10px; padding: 8px 12px; margin: -2px 0 12px; font-family: 'Oswald', sans-serif; font-size: 15px; }
.bk-gekozen-tekst { flex: 1; min-width: 0; }
.bk-gekozen .knop { flex: none; }
.bk-auto { border-left: 4px solid var(--teal); padding: 2px 0 2px 10px; margin-bottom: 12px; font-size: 13px; }
.bk-auto-rij { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 2px 0; }
.bk-auto-rij .knop.mini { padding: 2px 8px; font-size: 13px; flex: none; }
.bk-hand { margin: 4px 0 12px; }
.bk-hand > summary { cursor: pointer; font-size: 13px; color: var(--grijs); padding: 4px 0; }
.bk-hand[open] > summary { margin-bottom: 8px; }
.bm-lijst { display: flex; flex-direction: column; }
.bm-rij { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--lijn); }
.bm-naam { flex: 1; min-width: 0; font-family: 'Oswald', sans-serif; }
.bm-ster { border: 1.5px solid var(--lijn); background: #fff; border-radius: 8px; width: 34px; height: 30px; font-size: 15px; color: #c9ccd0; cursor: pointer; }
.bm-ster.aan { color: var(--ster); border-color: var(--ster); background: var(--geel-t); }
.bm-rij .segment.mini button { padding: 5px 8px; font-size: 13px; }

/* v4.50 Reedijk fase 2: bestellen */
.rb-rij { border: 1.5px solid var(--lijn); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.rb-rij.fout { border-color: var(--rood); }
.rb-kop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.rb-art { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: 'Oswald', sans-serif; margin-bottom: 6px; }
.rb-art .knop.mini { padding: 2px 8px; font-size: 13px; flex: none; }
.rb-regel { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.rb-regel label { display: flex; flex-direction: column; font-size: 13px; color: var(--grijs); gap: 2px; }
.rb-aant { width: 70px; padding: 6px 8px; }
.rb-sla { padding: 6px 8px; max-width: 260px; }
.rb-prijs { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font-family: 'Oswald', sans-serif; }
.rb-status { margin-top: 6px; }
.rb-voet { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; }
.rb-voet > div:first-child { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.knop.rb-definitief { background: var(--rood); }
/* v4.55: per levering voorraad + aantal */
.rb-levs { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px; }
.rb-lev { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--lijn); border-radius: 8px; }
.rb-lev.aan { border-color: var(--teal); background: var(--teal-zacht); }
.rb-lev.te { border-color: var(--rood); }
.rb-lev-naam { display: flex; flex-direction: column; min-width: 0; font-family: 'Oswald', sans-serif; font-size: 13px; }
.rb-lev-naam .klein { font-size: 13px; }
.rb-lev-vr { font-family: 'Oswald', sans-serif; font-size: 13px; white-space: nowrap; }
.rb-lev-vr.leeg { color: var(--grijs); }
.rb-lev-n { display: flex; align-items: center; gap: 4px; min-width: 32px; justify-content: flex-end; font-family: 'Oswald', sans-serif; }
.rb-lev-n .rb-aant { width: 52px; text-align: center; padding: 5px 4px; }
.rb-lev-n .knop.mini { padding: 4px 9px; font-size: 15px; }
.rb-haal summary { font-size: 13px; color: var(--grijs); cursor: pointer; padding: 4px 2px; }
.rb-haal .rb-lev { margin-top: 4px; }
.rb-som { font-size: 13px; margin-bottom: 4px; }
.rb-som.kort { color: var(--oranje-tx); }
.rb-stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--grijs); }
.rb-stip.groen { background: var(--groen); } .rb-stip.geel { background: var(--geel); } .rb-stip.blauw { background: #1f5fbf; }

/* v4.53 — bel met meldingen + scherm Meldingen */
.bel-knop { position: relative; background: none; border: 0; color: #fff; padding: 6px; margin-right: 6px; cursor: pointer; display: flex; align-items: center; }
.bel-knop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.bel-knop.heeft svg { opacity: 1; }
.bel-tel { position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--rood); color: #fff; font: 600 11px/17px Oswald, sans-serif; text-align: center; }
.ml-acties { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 10px; }
.ml-rij .ml-ic { min-width: 54px; font-size: 18px; line-height: 1.1; text-align: center; }
.ml-rij .ml-ic .klein { font-family: Oswald, sans-serif; font-size: 11px; }
.ml-rij .t1 { font-weight: 600; }
.ml-rij.gelezen { opacity: .55; }
.ml-rij.gelezen .t1 { font-weight: 400; }
.ml-stil { padding: 4px 8px; }
.ml-status { margin-bottom: 12px; }
.ml-status ol { margin: 6px 0 0 18px; padding: 0; }
.ml-soort { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.ml-soort:last-child { border-bottom: 0; }
.ml-soort input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--teal); }
.ml-soort span { display: flex; flex-direction: column; }
.ml-hoofd { background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; border: 0; }
@media (max-width: 480px) {   /* telefoon: logo iets kleiner zodat de bel ernaast past */
  .kop-binnen.met-bel { gap: 8px; }
  .kop-binnen.met-bel .merk { font-size: 20px; }
  .kop-binnen.met-bel .bel-knop { padding: 4px; margin-right: 0; }
}
.bel-knop { flex: 0 0 auto; }

/* v4.53a — vensters op de iPhone (app op het beginscherm): nooit hoger dan het scherm minus de statusbalk, onderin ruimte voor de veegbalk;
   de pagina eronder schuift niet zijwaarts mee */
.paneel { max-height: calc(100vh - max(env(safe-area-inset-top), 12px) - 8px); }
@supports (height: 100dvh) { .paneel { max-height: calc(100dvh - max(env(safe-area-inset-top), 12px) - 8px); } }
.paneel-inhoud { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.paneel-kop button { min-width: 44px; min-height: 44px; margin: -8px -10px -8px 0; }
html { overflow-x: clip; }   /* geen scrollcontainer, sticky blijft werken */
html { touch-action: manipulation; }   /* v4.53b: geen dubbeltik-zoom */

/* v4.55b: prio-taken - bovenaan, rood */
.rij.prio { border-left: 4px solid var(--rood); background: var(--rood-t); }
.prio-label { display: inline-block; background: var(--rood); color: #fff; border-radius: 4px; padding: 0 6px; font-size: 11px; font-family: 'Oswald', sans-serif; margin-right: 6px; vertical-align: 1px; }
.tk-prio { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--lijn); border-radius: 10px; margin-bottom: 12px; cursor: pointer; }
.tk-prio.aan { border-color: var(--rood); background: var(--rood-t); }
.tk-prio input { width: 20px; height: 20px; accent-color: var(--rood); }

/* v4.55c: de zoekbalk begint direct onder de zwarte balk (de ruimte zit nu ín de balk), zodat hij bij scrollen niet meer verspringt */
#schermStart { padding-top: 0; }
#schermStart > .zoekwrap { padding-top: 20px; }
@media (min-width: 900px) { #schermStart > .zoekwrap { padding-top: 24px; } }

/* v4.56: herinneringen in Klant bewerken */
.kf-hr { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.kf-hr .schakel { margin: 0; }

/* v4.57: betaalbestanden in Betalen (betaalbestanden.js) - eigen klassen .bb-…, kleuren uit de tokens */
.bb-eerder { color: var(--oranje-tx) !important; }
.bb-sectie > summary .badge { margin-left: 6px; }
.bb-bestand { border-top: 1px solid var(--lijn); padding: 6px 0; }
.bb-bestand > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; cursor: pointer; padding: 4px 0; list-style-position: outside; }
.bb-bestand > summary .bb-wanneer { font-weight: 500; }
.bb-bestand > summary .bb-samen { flex: 1; min-width: 160px; font-size: 13px; color: var(--grijs); font-variant-numeric: tabular-nums; }
.bb-bestand.bb-letop { border-left: 4px solid var(--rood); background: var(--rood-t); border-radius: 0 10px 10px 0; padding-left: 10px; padding-right: 10px; margin: 4px 0; }
.bb-bestand.bb-letop > summary .bb-wanneer { color: var(--rood); }
.bb-bestand .bb-regel { padding-left: 16px; }
.bb-bestand .bb-regel .bt-bedrag { font-variant-numeric: tabular-nums; }
.bb-regel.s-letop .t1 { color: var(--rood); }
.bb-naam { padding: 4px 0 2px 16px; }
.bb-leeg { padding: 8px 0; }
.bb-vraag { flex-basis: 100%; background: var(--oranje-t); border-left: 4px solid var(--oranje); border-radius: 0 10px 10px 0; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.bb-vraag b { font-size: 15px; font-weight: 500; }
.bb-vraag-rij { font-variant-numeric: tabular-nums; }
.bb-vraag-knoppen { display: flex; gap: 8px; margin-top: 4px; }

/* v4.61 (IB-007): "Stel uit" bij Herinneringen - klein keuzemenu onder de knop (uitstellen.js). Zwevend menu zoals Meer. */
.su-menu { position: absolute; z-index: 10000; width: 280px; max-width: calc(100vw - 16px); background: #fff; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); padding: 6px; display: grid; gap: 2px; }
.su-keuze { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; background: none; border: 0; border-radius: 8px; padding: 8px 10px; font: 18px 'Bebas Neue', sans-serif; letter-spacing: .5px; color: var(--zwart); cursor: pointer; text-align: left; }
.su-keuze:hover, .su-keuze:focus-visible { background: var(--bg); outline: none; }
.su-keuze.aan { background: var(--teal-l); }
.su-wanneer { font: 13px 'Oswald', sans-serif; letter-spacing: 0; color: var(--grijs); white-space: nowrap; }
.su-datum { display: grid; gap: 8px; margin-top: 4px; padding: 10px 4px 4px; border-top: 1px solid var(--lijn); }
.su-datum[hidden] { display: none; }
.su-veld { display: grid; gap: 4px; }
.su-veld input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--lijn); border-radius: 10px; background: #fff; color: var(--zwart); font: 15px 'Oswald', sans-serif; }
.su-veld input:focus { border-color: var(--teal); outline: none; }
.su-fout .fout { margin: 0; }
.su-datum .knop { width: 100%; justify-content: center; }
@media (max-width: 480px) { .su-menu { width: calc(100vw - 32px); } .su-keuze { min-height: 48px; } }
/* v4.62: alternatieven in een offerte (alternatieven.js). Regels van de aanrader met een teal rand, keuzeblok eronder. */
#ofRegels .regel.alt-in { border-left: 4px solid var(--teal); padding-left: 8px; }
.alt-blok { background: var(--teal-zacht); border: 1px solid var(--teal-rand); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
.alt-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.alt-titel { display: flex; align-items: center; gap: 6px; }
.alt-titel .invoer { width: 180px; padding: 5px 8px; }
.alt-optie { background: #fff; border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.alt-optie.hoofd { border-color: var(--teal); }
.alt-optie-kop { display: flex; align-items: center; gap: 6px; }
.alt-nr { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--grijs-t); color: var(--grijs); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.alt-optie.hoofd .alt-nr { background: var(--teal); color: #fff; }
.alt-naam { flex: 1; min-width: 0; font-weight: 500; }
.alt-info, .alt-hier { margin: 2px 0 0 26px; }
.alt-regel { display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; align-items: center; padding: 6px 0 0 26px; }
.alt-regel .alt-oms { padding: 6px 8px; }
.alt-regel .weg { background: none; border: 0; color: var(--grijs); font-size: 22px; line-height: 1; padding: 2px 6px; }
.alt-getallen { grid-column: 1/3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--grijs); }
.alt-getallen .invoer { width: 64px; text-align: right; padding: 5px 7px; }
.alt-getallen .prijs { width: 88px; }
.alt-getallen .tot { margin-left: auto; color: var(--tekst); font-weight: 500; white-space: nowrap; }
.alt-inkoop { display: inline-flex; align-items: center; gap: 4px; }
.alt-inkoop select.invoer { width: auto; text-align: left; }
.alt-regel-erbij { margin: 6px 0 0 26px; }
.alt-vrij { margin-bottom: 10px; }
.alt-vraag { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#schermOfferte.klantweergave .alt-kw-weg { display: none !important; }
/* v4.63: eigen autotitel (autotitels.js). ✎ Titel achter de autonaam in de dossierkop, klein de RDW-naam eronder. */
.dkop .sub .at-knop { margin-left: 6px; vertical-align: 1px; }
.dkop .at-rdw { font-family: 'Oswald', sans-serif; font-size: 13px; color: var(--grijs); letter-spacing: .2px; margin-top: 1px; }
.at-venster .at-rdw-naam { font-family: 'Oswald', sans-serif; margin: 2px 0 12px; }
.at-venster .at-uitleg { margin: -4px 0 12px; }

/* ── Ontwerp app-kop (20-10-2026, ontwerper): één kop voor dossier, werkorder en offerte ──
   Plaat op ware grootte (niet meer over de hele breedte), status naast het nummer, knoppen klein en wit met lijn-icoontjes
   (geen emoji), één teal knop alleen in het dossier (+ Werkorder), ⋯ altijd rechts in de rij. */
.dkop-plaat { display: flex; }
.dkop-titel { min-width: 0; }
.dkop-regel { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.dkop-regel .badge { font-size: 13px; padding: 3px 9px; }
.dkop .acties { align-items: center; }
.dkop .acties .dkop-meer { margin-left: auto; min-width: 40px; justify-content: center; }
@media (min-width: 900px) { .dkop .acties .dkop-meer { margin-left: 0; } }

/* Lijn-icoontjes in knoppen, zelfde stijl als de menubalk: class="knop licht klein ico ico-bel" */
.ico::before { content: ''; width: 15px; height: 15px; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
/* ── Ontwerp app-icoontjes (20-10-2026): één set lijn-icoontjes (Feather MIT / Lucide ISC, lijn 2, zoals de menubalk) ──
   In een knop: class="knop … ico ico-<naam>" (icoontje vóór de tekst). In tekst: ic('<naam>') in app.js → <i class="ic ico-<naam>">. */
.ico-bel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.ico-mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E"); }
.ico-ververs { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6'/%3E%3Cpath d='M20.5 15a9 9 0 1 1-2.1-9.4L23 10'/%3E%3C/svg%3E"); }
.ico-slot { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.ico-letop { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.ico-ster { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }
.ico-melding { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
.ico-melding-uit { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3Cpath d='M18.6 13A17.9 17.9 0 0 1 18 8'/%3E%3Cpath d='M6.3 6.3A5.9 5.9 0 0 0 6 8c0 7-3 9-3 9h14'/%3E%3Cpath d='M18 8a6 6 0 0 0-9.3-5'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E"); }
.ico-nieuw { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E"); }
.ico-agenda { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.ico-klok { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.ico-pen { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3C/svg%3E"); }
.ico-gereedschap { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z'/%3E%3C/svg%3E"); }
.ico-winter { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M2 12h20M4.9 4.9l14.2 14.2M19.1 4.9L4.9 19.1'/%3E%3Cpath d='M9 3l3 3 3-3M9 21l3-3 3 3M3 9l3 3-3 3M21 9l-3 3 3 3'/%3E%3C/svg%3E"); }
.ico-zomer { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4'/%3E%3C/svg%3E"); }
.ico-allseason { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2M4.9 4.9l1.4 1.4M20 12h2M19.1 4.9l-1.4 1.4'/%3E%3Cpath d='M15.9 12.7A4 4 0 0 0 8.1 10.6'/%3E%3Cpath d='M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6z'/%3E%3C/svg%3E"); }
.ico-duim { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.3a2 2 0 0 0 2-1.7l1.4-9a2 2 0 0 0-2-2.3z'/%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
.ico-snel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E"); }
.ico-notitie { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); }
.ico-pakket { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7z'/%3E%3Cpath d='M3.3 7L12 12l8.7-5M12 22V12'/%3E%3C/svg%3E"); }
.ico-oog { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ico-inbox { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E"); }
.ico-verstuurd { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E"); }
.ico-mic { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2M12 19v3'/%3E%3C/svg%3E"); }
.ico-bestellen { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E"); }
.ico-onderweg { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1z'/%3E%3Cpath d='M16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); }
.ico-camera { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.ico-schild { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.ico-map { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.ico-zoek { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.4-4.4'/%3E%3C/svg%3E"); }
.ico-bericht { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z'/%3E%3C/svg%3E"); }
.ico-link { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
.ico-pin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ico-grafiek { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); }
.ico-instellingen { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.ico-terug { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M20 20v-7a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E"); }
.ico-extern { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3C/svg%3E"); }
.ico-gesprek { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
.ico-wissel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 1l4 4-4 4'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpath d='M7 23l-4-4 4-4'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); }
.ico-vink { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.ico-kruis { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.ico-plus { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ico-taken { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); }
.ico-speel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l14 8-14 8z'/%3E%3C/svg%3E"); }
.ic { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.18em; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.knop .ic { width: 15px; height: 15px; vertical-align: -2px; }
.knop.ico:empty, .knop.ico.mini:empty { padding-left: 9px; padding-right: 9px; }
.ic.ico-winter, .ic.ico-allseason { color: var(--blauw); } .ic.ico-zomer { color: var(--oranje); } .ic.ico-ster { color: var(--ster); }
.knop.teal .ic, .knop .ic.ico-ster, .aan .ic { color: inherit; }   /* in een gekleurde knop of gekozen keuze: de kleur van de tekst */

/* ── Ontwerp app-kop: wat op de telefoon buiten beeld viel ──
   1. Knoppen naast een kop (dossier: Klant & voertuig) schuiven eronder als ze niet passen.
   2. Een lange keuzebalk (Offertes: Lopend … Alle) kun je vegen; niets valt meer weg.
   3. Regels in werkorder en offerte: het bedrag staat op de eerste regel, de knopjes (+ Inkoop, + Alternatief) eronder. */
h2 { flex-wrap: wrap; row-gap: 6px; }
h2 .regelknoppen { flex-wrap: wrap; }
.segment { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.segment::-webkit-scrollbar { display: none; }
@media (max-width: 599px) { .segment:has(> button:nth-child(7)) button { font-size: 13px; padding-left: 3px; padding-right: 3px; } }   /* 7 keuzes (Offertes) passen dan net op de telefoon */
@media (max-width: 899px) {
  .regel .getallen { flex-wrap: wrap; row-gap: 8px; }
  .regel .getallen > .knop { order: 2; }
  .regel .getallen::after { content: ''; order: 1; flex-basis: 100%; height: 0; }
}

/* ── Ontwerp app-kop: offertelijst op de telefoon ──
   Nummer en omschrijving naast de plaat, klant · datum · bedrag eronder over de hele breedte, status rechts eronder.
   Zo wordt de regel niet meer na een paar letters afgekapt. */
@media (max-width: 599px) {
  #olInhoud .rij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; }
  #olInhoud .rij .info { display: contents; }
  #olInhoud .rij > .kt-plaat { grid-column: 1; grid-row: 1; }
  #olInhoud .rij .t1 { grid-column: 2; grid-row: 1; }
  #olInhoud .rij .meer { grid-column: 3; grid-row: 1; }
  #olInhoud .rij .t2 { grid-column: 1 / 3; }
  #olInhoud .rij > .badge { grid-column: 3; justify-self: end; }
}

/* ── Ontwerp startscherm telefoon (21-10-2026, ontwerper) ──
   Op de computer verandert niets. Op de telefoon (tot 599 px): kop en zoekbalk kleiner (zoekbalk schuift mee weg),
   Vandaag-balk op één regel, afspraken en Te doen compacter, knoppen in Te doen als icoontje (vink, potlood, klok …).
   Knoppen met .ico-m tonen hun icoontje alleen op de telefoon; de tekst staat in .kt (op de telefoon verborgen). */
.rij-knoppen { display: contents; }
.rij.afspraak .knop .kt { color: inherit !important; -webkit-text-fill-color: inherit !important; }   /* tekst in een knop houdt de kleur van de knop (Bevestig wit) */
.wo-ico-knop { display: none !important; background: #fff; border: 1.5px solid var(--zwart); border-radius: 7px; align-items: center; cursor: pointer;
  color: var(--zwart) !important; -webkit-text-fill-color: var(--zwart) !important; }
.wo-ico-knop.teal { border-color: var(--teal); color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; }
.wo-ico-knop.oranje { border-color: var(--oranje-tx); color: var(--oranje-tx) !important; -webkit-text-fill-color: var(--oranje-tx) !important; }
.wo-ico-knop.groen { border-color: var(--groen); color: var(--groen) !important; -webkit-text-fill-color: var(--groen) !important; }
.wo-ico-knop.rood { border-color: var(--rood); color: var(--rood) !important; -webkit-text-fill-color: var(--rood) !important; }
.dl-kort { display: none; }
@media (max-width: 599px) {
  .kop-binnen { padding-top: 8px; padding-bottom: 8px; }
  #schermStart { padding-top: 10px; }
  #schermStart .zoekwrap { position: static; padding: 0 0 2px; }
  #schermStart .zoek { font-size: 15px; padding: 10px 12px 10px 40px; border-width: 1.5px; background-position: 12px center; background-size: 18px; }
  #schermStart .zoekinfo { display: none; }
  #schermStart h2 { margin: 14px 0 6px; }
  /* Vandaag-balk: datum kort, knoppen als icoontje, alles op één regel */
  #vandaagTitel { flex-wrap: wrap; row-gap: 6px; }
  #vandaagTitel .dl-lang { display: none; }
  #vandaagTitel .dl-kort { display: inline; }
  #vandaagTitel .regelknoppen { flex-wrap: nowrap; gap: 6px; }
  #vandaagTitel .knop.ico-m, .rij-knoppen .knop.ico-m { width: 34px; height: 34px; padding: 0; justify-content: center; flex: none; }
  #vandaagTitel .knop.ico-m .kt, .rij-knoppen .knop.ico-m .kt { display: none; }
  #vandaagTitel .knop.ico-m::before, .rij-knoppen .knop.ico-m::before { content: ''; width: 18px; height: 18px; flex: none; background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  /* Afspraken van vandaag: minder ruimte */
  #startLinks .rij.afspraak { padding: 9px 12px; gap: 10px; margin-bottom: 6px; }
  #startLinks .rij.afspraak:not(.blok-rij) .info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 3px; align-items: center; }
  #startLinks .rij.afspraak .info > .t1 { grid-column: 1 / 3; }
  #startLinks .rij.afspraak .info > .t2:not(.badges) { grid-column: 1; grid-row: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #startLinks .rij.afspraak .info > .t2.badges { grid-column: 2; grid-row: 2; margin-top: 0 !important; flex-wrap: nowrap; }
  #startLinks .rij.afspraak .meer { font-size: 18px; padding-left: 2px; }
  /* werkorder: alleen het icoontje naast het kenteken; de werkorderknop eronder valt weg (de hele regel opent de werkorder al) */
  #startLinks .rij.afspraak .t1.met-kt { justify-content: flex-start; gap: 6px; }
  #startLinks .rij.afspraak .t1.met-kt .t1-tekst { flex: 1; }
  #startLinks .rij.afspraak .t1.met-kt .wo-ico-knop { display: inline-flex !important; flex: none; width: 30px; height: 24px; padding: 0; margin-top: -2px; justify-content: center; border-radius: 7px; }
  #startLinks .rij.afspraak .wo-ico-knop .ic { width: 15px; height: 15px; vertical-align: 0; }
  #startLinks .rij.afspraak .t2.badges > .wo-knop { display: none; }
  #startLinks .rij.blok-rij { padding-top: 7px; padding-bottom: 7px; }
  #startLinks .rij.blok-rij .info { display: flex; align-items: baseline; gap: 8px; }
  #startLinks .rij.blok-rij .t2 { flex: 1; min-width: 0; }
  .klaar-regel { padding: 7px 12px; }
  /* Te doen: twee regels per ding, knoppen als icoontje rechtsonder, kenteken als kleine teal knop (zoals bij de afspraken) */
  .td-chip { font-size: 13px; padding: 4px 10px; gap: 5px; }
  .td-chips { gap: 5px; margin-bottom: 2px; }
  #aanvragenBlok h2 { font-size: 18px; margin: 12px 0 5px; }
  #aanvragenBlok .rij:has(> .rij-knoppen) { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; align-items: center; padding: 7px 10px 7px 12px; margin-bottom: 5px; }
  #aanvragenBlok .rij:has(> .rij-knoppen) > .tijd { grid-column: 1; grid-row: 1 / 3; align-self: center; min-width: 0 !important; font-size: 15px !important; line-height: 1.05 !important; }
  #aanvragenBlok .rij:has(> .rij-knoppen) > .tijd .klein { font-size: 13px; line-height: 1.15; }
  #aanvragenBlok .rij:has(> .rij-knoppen) > .info { display: contents; }
  #aanvragenBlok .rij:has(> .rij-knoppen) .t1 { grid-column: 2; grid-row: 1; white-space: nowrap; }
  #aanvragenBlok .rij:has(> .rij-knoppen):not(:has(> .kt-plaat)) .t1 { grid-column: 2 / 4; }
  #aanvragenBlok .rij:has(> .rij-knoppen) .t2 { grid-column: 2; grid-row: 2; white-space: nowrap; }
  #aanvragenBlok .rij:has(> .rij-knoppen) > .kt-plaat { display: inline-flex; grid-column: 3; grid-row: 1; justify-self: end; }
  #aanvragenBlok .rij:has(> .rij-knoppen) > .rij-knoppen { grid-column: 3; grid-row: 2; display: flex; gap: 5px; justify-self: end; }
  #aanvragenBlok .rij-knoppen .knop.ico-m { width: 30px; height: 30px; border-radius: 8px; }
  #aanvragenBlok .rij-knoppen .knop.ico-m::before { width: 16px; height: 16px; }
  /* tekst die de app tijdelijk in een knop zet ("Zeker? Tik nogmaals", "Bezig…"): dan gewoon breder */
  .rij-knoppen .knop.ico-m:not(:has(> .kt)) { width: auto; padding: 0 9px; }
  /* ook zonder icoontjes-knoppen (Klantherinneringen): kenteken als kleine teal knop */
  #aanvragenBlok .rij > .kt-plaat { background: var(--teal); border: 0; border-radius: 7px; }
  #aanvragenBlok .rij > .kt-plaat .eu { display: none; }
  #aanvragenBlok .rij > .kt-plaat .nr { font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .5px; line-height: 1.3; padding: 3px 8px;
    color: #fff !important; -webkit-text-fill-color: #fff !important; }
}

/* ── Ontwerp keuzeknopjes (21-10-2026, ontwerper): twee soorten ──
   1. Keuzeknop .chip: iets kiezen of aanzetten (diensten, datum, seizoen, advies snel). Hoek 8, rand 1,5; aan = teal gevuld.
   2. Filterpil: een lijst filteren (Te doen, bandkeuze, onderdelen bij Werkorders, Posts, Uitwegen). Rond, rand 1;
      aan = teal rand met lichte tint. Voor nieuw werk: class="filterpil" (Te doen .td-chip is de grote, 15 px). */
.filterpil, .bk-chip, .wl-matfilters .chip, .pt-filters .chip, #uwdFilters .chip {
  display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--lijn); border-radius: 999px;
  padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 400; color: var(--tekst); line-height: 1.25; cursor: pointer; box-shadow: none; }
.filterpil:hover, .bk-chip:hover:not(:disabled), .wl-matfilters .chip:hover, .pt-filters .chip:hover, #uwdFilters .chip:hover { border-color: var(--teal); background: #fff; }
.filterpil.aan, .bk-chip.aan, .wl-matfilters .chip.aan, .pt-filters .chip.aan, #uwdFilters .chip.aan {
  background: var(--teal-l) !important; border-color: var(--teal) !important; color: var(--tekst) !important; box-shadow: none; font-weight: 500; }
.wl-matfilters .chip.rood:not(.aan) { border-color: var(--rood-r); color: var(--rood); }
/* ── v4.67 (IB-015): Banden bij binnenkomst (bandenbinnenkomst.js) ──
   Kop = uitklapknop met samenvatting. Vier vakjes als bovenaanzicht (LV RV boven, LA RA onder), grijs = voorgevuld, zwart = zelf getikt.
   Profielkleur als statusrand links (4 px): groen vanaf 4 mm, oranje 3-4, rood onder 3. */
.bnk-h2 { margin-bottom: 8px; }
.bnk-kop { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.bnk-kop:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.bnk-titel { flex: none; }
.bnk-samen { flex: 1; min-width: 0; font-family: Oswald, Arial, sans-serif; font-size: 13px; letter-spacing: 0; color: var(--grijs); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnk-pijl { flex: none; font-family: Oswald, Arial, sans-serif; font-size: 22px; line-height: 1; color: var(--grijs); transition: transform .15s; }
.bnk-kop[aria-expanded="true"] .bnk-pijl { transform: rotate(90deg); }
.bnk-kaart { display: grid; gap: 16px; }
.bnk-kaart[hidden] { display: none; }
.bnk-blok > .label { display: block; margin-bottom: 6px; }
.bnk-rij { display: flex; gap: 8px; align-items: center; }
.bnk-rij .bnk-regel { flex: 1; min-width: 0; font-size: 15px; }
.bnk-foto { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; border-style: dashed; border-color: var(--lijn); color: var(--grijs); }
.bnk-foto .ic { width: 20px; height: 20px; }
.bnk-herkend { font-size: 13px; color: var(--teal); min-height: 18px; margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bnk-herkend.leeg { color: var(--grijs); }
.bnk-mogelijk { border: 0; cursor: pointer; font-family: inherit; }
.bnk-keuzes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bnk-keuze { text-align: left; font-size: 13px; }
.bnk-link { background: none; border: 0; padding: 0; margin-top: 6px; color: var(--teal); font-size: 13px; text-decoration: underline; cursor: pointer; }
.bnk-achter { margin-top: 10px; }
.bnk-achter > .label { display: block; margin-bottom: 4px; }
.bnk-uitleg { margin-bottom: 8px; }
/* ontwerp werkorder 21-10: profiel en spanning naast elkaar, elk vier vakjes zoals de wielen van bovenaf (LV RV boven, LA RA onder);
   wielnaam in het hoekje van het vakje; geen middenbalk "voor" (Rouke) */
.bnk-wielen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.bnk-helft > .label { display: block; margin-bottom: 6px; }
.bnk-auto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lv rv" "la ra"; gap: 6px; }
.bnk-lv { grid-area: lv; } .bnk-rv { grid-area: rv; } .bnk-ra { grid-area: ra; } .bnk-la { grid-area: la; }
.bnk-wiel { position: relative; display: block; min-width: 0; }
.bnk-wiel > .label { position: absolute; top: 5px; left: 8px; margin: 0; line-height: 1; pointer-events: none; z-index: 1; }
.bnk-wiel .invoer { height: 50px; text-align: center; font-size: 22px; font-weight: 500; padding: 13px 4px 3px; font-variant-numeric: tabular-nums; color: var(--tekst); }
.bnk-wiel .invoer.vul { color: var(--grijs); font-weight: 400; }
.bnk-wiel .invoer.goed { border-left: 4px solid var(--groen); }
.bnk-wiel .invoer.matig { border-left: 4px solid var(--oranje); }
.bnk-wiel .invoer.slecht { border-left: 4px solid var(--rood); }
.bnk-advies { margin-top: 10px; }
.bnk-advies[hidden] { display: none; }
.bnk-advies b { color: var(--tekst); font-weight: 500; }
.bnk-gecontroleerd { margin-top: 10px; }
.bnk-ok { margin-top: 8px; color: var(--groen); }
.bnk-meer { border-top: 1px solid var(--lijn); padding-top: 8px; }
.bnk-meer > summary { cursor: pointer; font-size: 13px; color: var(--teal); }
.bnk-meer[open] > summary { margin-bottom: 8px; }
.bnk-kaart .nb-hint, .bnk-kaart .nb-blok { margin: 0; }
/* v4.73 (bandenblok, bouwer): één kaart "Banden" - kop met seizoen en Seizoenswissel, "Op de auto" uit het bandenmapje, wissel, andere sets.
   Alleen eigen klassen; de ontwerper kijkt nog naar de opmaak. */
.bnk-h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bnk-h2 .bnk-kop { width: auto; flex: 1 1 200px; min-width: 0; }
.bnk-kopextra { display: flex; align-items: center; gap: 6px; flex: none; font-family: Oswald, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.bnk-kopextra:empty { display: none; }
.bnk-sz .ic { width: 12px; height: 12px; vertical-align: -2px; }
.bnk-mapje { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--teal-zacht); }
.bnk-mapband { font-size: 15px; font-weight: 500; }
.bnk-bron { color: var(--grijs); margin-top: 2px; }
.bnk-pen .ic { width: 18px; height: 18px; }
.bnk-vraag { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--oranje-t); color: var(--oranje-tx); font-size: 13px; }
.bnk-vraag .acties { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.bnk-anders { margin-top: 6px; }
.bnk-anders:empty { display: none; }
.bnk-wissel .nb-rij { margin-top: 6px; }
.bnk-erop { margin-top: 12px; }
.bnk-erop > .label { display: block; margin-bottom: 6px; }
.bnk-erop .bnk-auto { max-width: 50%; }
.bnk-sets { display: grid; gap: 6px; margin-bottom: 4px; }
.bnk-set { display: flex; align-items: center; gap: 6px; text-align: left; width: 100%; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--kaart); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.bnk-set:hover:not(:disabled) { border-color: var(--teal); }
.bnk-set .ic { flex: none; width: 14px; height: 14px; }
.nb-nieuw { font-size: 14px; }
.nb-uitleg { margin-top: 6px; }
@media (max-width: 599px) { .bnk-erop .bnk-auto { max-width: none; } }

/* ── Ontwerp werkorder telefoon (21-10-2026, ontwerper) ──
   Op de computer verandert niets (behalve het bandenblok hierboven: profiel en spanning naast elkaar).
   Telefoon (tot 599 px): knoppen in de kop als icoontje naast de plaat, deelknoppen van het rapport als icoontje,
   "Advies snel toevoegen" op één rij om opzij te vegen. Telefoon en iPad (tot 899 px): sleepgreep, omschrijving en kruisje van een regel op één regel.
   Knoppen met .ico-m: icoontje alleen op de telefoon, de tekst staat in .kt (zie ook "Ontwerp startscherm telefoon"). */
@media (max-width: 899px) {
  .regel { grid-template-columns: auto minmax(0, 1fr) auto; }
  .regel > .drag-handle { grid-column: 1; grid-row: 1; padding: 0 2px 0 0; }
  .regel > .oms { grid-column: 2; grid-row: 1; }
  .regel:not(:has(> .drag-handle)) > .oms { grid-column: 1 / -1; }
  .regel > .weg { grid-column: 3; grid-row: 1; }
  .regel > .getallen, .regel > .inkooprij, .regel > .internrij { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  /* kop: plaat met de knoppen ernaast, nummer en klant eronder */
  #woKop .dkop { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plaat acties" "titel titel"; gap: 8px 10px; align-items: center; }
  #woKop .dkop-plaat { grid-area: plaat; }
  #woKop .dkop-titel { grid-area: titel; }
  #woKop .dkop .acties { grid-area: acties; margin: 0; justify-content: flex-end; gap: 6px; }
  #woKop .dkop .acties .dkop-meer { margin-left: 0; min-width: 0; width: 36px; height: 36px; padding: 0; }
  /* knoppen met alleen een icoontje */
  #schermWerkorder .knop.ico-m { width: 36px; height: 36px; padding: 0; justify-content: center; flex: none; }
  #schermWerkorder .knop.ico-m .kt { display: none; }
  #schermWerkorder .knop.ico-m::before { content: ''; width: 18px; height: 18px; flex: none; background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  #schermWerkorder .knop.ico-m:not(:has(> .kt)) { width: auto; padding: 0 10px; }   /* de app zet tijdelijk andere tekst in de knop ("Bezig…", "Link gekopieerd!") */
  /* advies snel toevoegen: één rij, opzij vegen */
  #woRapport .adv-snel { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-right: -16px; padding-right: 16px; }
  #woRapport .adv-snel::-webkit-scrollbar { display: none; }
  #woRapport .adv-snel .chip { flex: none; white-space: nowrap; }
}

/* ── Ontwerp klantherinneringen telefoon (21-10-2026, ontwerper) ──
   Zelfde als Te doen (zie "Ontwerp startscherm telefoon"): knoppen als icoontje, kenteken als teal knop.
   Omdat een herinnering tot 5 knoppen heeft: uitleg over de hele breedte, profielwaarden en knoppen op een eigen regel. */
@media (max-width: 599px) {
  #aanvragenBlok .rij.hr-rij:has(> .rij-knoppen) > .tijd { grid-row: 1 / -1; }
  #aanvragenBlok .rij.hr-rij:has(> .rij-knoppen) .t2 { grid-column: 2 / 4; }
  #aanvragenBlok .rij.hr-rij:has(> .rij-knoppen) .hr-mm { grid-column: 2 / 4; grid-row: 3; margin-top: 1px; }
  #aanvragenBlok .rij.hr-rij:has(> .rij-knoppen) > .rij-knoppen { grid-column: 2 / 4; grid-row: 3; margin-top: 2px; }
  #aanvragenBlok .rij.hr-rij:has(.hr-mm) > .rij-knoppen { grid-row: 4; }
  /* zet de app tijdelijk andere tekst in een icoonknop ("Zeker? Tik nogmaals", "Bezig…"), dan wordt hij breder (gold ook al voor Te doen) */
  #vandaagTitel .knop.ico-m:not(:has(> .kt)), #aanvragenBlok .rij-knoppen .knop.ico-m:not(:has(> .kt)) { width: auto; padding: 0 9px; }
}
/* ── v4.70 (IB-015 stap 3): foto van de band en van de bandenspanningssticker (bandfoto.js) ──
   Paneel onder de bandregel of bij Spanning: foto links, gelezen waarden rechts (op de telefoon onder elkaar). Alleen tokens uit de huisstijl. */
.bs-snelrij { display: flex; gap: 8px; align-items: center; }
.bs-snelrij .invoer { flex: 1; min-width: 0; }
.bf-plek:empty { display: none; }
.bf-paneel { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; padding: 10px; border: 1px solid var(--teal-rand); border-left: 4px solid var(--teal); border-radius: 10px; background: var(--teal-zacht); }
.bf-fotos { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.bf-fotos img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--lijn); background: var(--bg); }
.bf-inhoud { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bf-bezig { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grijs); }
.bf-band { font-family: Oswald, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.25; }
.bf-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bf-mist { font-size: 13px; color: var(--oranje-tx); background: var(--oranje-t); border-radius: 8px; padding: 6px 8px; }
.bf-past { font-size: 13px; color: var(--groen); background: var(--groen-t); border-radius: 8px; padding: 6px 8px; }
.bf-knoppen { margin-top: 2px; }
.bf-rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.bf-rij .bf-dot { width: 90px; }
.bf-seizoen { display: flex; gap: 6px; flex-wrap: wrap; }
.bf-seizoen .chip { cursor: pointer; }
.bf-tabel { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.bf-tr { display: grid; grid-template-columns: minmax(0, 1fr) 56px 64px 64px 32px; gap: 6px; align-items: center; padding: 3px 4px; border-radius: 6px; }
.bf-tr.bf-th { font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .5px; }
.bf-tr.past { background: var(--groen-t); }
.bf-tr.weg { color: var(--grijs-l); text-decoration: line-through; }
.bf-tr .bf-bar { padding: 5px 6px; font-size: 13px; text-align: center; }
.bnk-sticker { margin-top: 6px; }
.bnk-advies .bnk-kies { margin-left: 4px; cursor: pointer; }
@media (max-width: 560px) {
  .bf-paneel { flex-direction: column; }
  .bf-fotos { flex-direction: row; flex-wrap: wrap; }
  .bf-fotos img { width: 88px; height: 88px; }
  .bf-tr { grid-template-columns: minmax(0, 1fr) 48px 58px 56px 30px; gap: 4px; }
}
/* ── v4.74 (IB-018): Cijfers › Marge (cijfersmarge.js; tabs in cijfers.js) ── */
.cm-kopbalk { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 2px 0 12px; }
.cm-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cm-tab { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 18px; letter-spacing: .5px; padding: 8px 16px; min-height: 40px; border-radius: 8px; border: 1px solid var(--teal-rand); background: #fff; color: var(--tekst); cursor: pointer; }
.cm-tab.aan { background: var(--teal); border-color: var(--teal); color: #fff; }
.cm-ss { color: var(--grijs); }
.cm-tab.aan .cm-ss { color: #fff; }
.cm-periodebalk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-pijl { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--lijn); background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: var(--tekst); }
.cm-plabel { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: .5px; min-width: 150px; text-align: center; }
.cm-psoort { margin-left: 4px; }
.cm-compleet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.cm-pil { display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; line-height: 1.3; }
.cm-pil.groen { background: var(--groen-t); color: var(--groen); }
.cm-pil.oranje { background: var(--oranje-t); color: var(--oranje-tx); cursor: pointer; }
.cm-pil.grijs { background: var(--grijs-t); color: var(--grijs); cursor: pointer; }
button.cm-pil:hover { text-decoration: underline; }
.cm-uitleg { margin-bottom: 12px; }
.cm-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.cm-tegel { background: var(--kaart); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cm-tegel.teal { outline: 2px solid var(--teal); outline-offset: -2px; }
.cm-waarde { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 28px; letter-spacing: .5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cm-tegel.teal .cm-waarde { color: var(--teal); }
.cm-sub { font-size: 13px; color: var(--grijs); display: flex; flex-direction: column; gap: 2px; }
.cm-tov { font-weight: 400; color: var(--grijs); }
.cm-vk-kop, .cm-12-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
#cmInhoud .kaart h2 { margin: 0 0 8px; }   /* #schermCijfers h2 zet 18px boven */
.cm-vk-kop b { font-weight: 600; }
.cm-link { border: 0; background: none; padding: 0 0 0 6px; font: inherit; font-size: 13px; color: var(--teal); text-decoration: underline; cursor: pointer; }
.cm-vk-balk { position: relative; height: 20px; background: var(--grijs-t); border-radius: 999px; margin: 6px 0; }
.cm-vk-balk i { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.cm-vk-nu { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--zwart); }
.cm-vk-voet { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.cm-legenda { display: flex; gap: 14px; flex-wrap: wrap; }
.cm-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cm-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.cm-lg-omzet, .cm-st-omzet { background: var(--grijs-l); opacity: .55; }
.cm-lg-verdiend, .cm-st-verdiend { background: var(--teal); }
.cm-legenda i.cm-lg-vk { width: 14px; height: 0; border-top: 2px dashed var(--zwart); border-radius: 0; }
.cm-grafiek { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; height: 200px; padding-bottom: 20px; margin: 8px 0; border-bottom: 1px solid var(--lijn); }
.cm-kol { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.cm-staven { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.cm-staven i { display: block; width: 40%; min-height: 0; border-radius: 3px 3px 0 0; }
.cm-st-vk { position: absolute; left: -4px; right: -4px; height: 0; border-top: 2px dashed var(--zwart); opacity: .55; margin-bottom: -1px; }
.cm-kol-naam { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 11px; color: var(--grijs); }
.cm-6n { display: none; }
.cm-rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.cm-soorten { flex: 999 1 560px; min-width: 0; }
.cm-orders { flex: 1 1 340px; min-width: 0; }
.cm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cm-tabel { min-width: 560px; font-variant-numeric: tabular-nums; }
.cm-tabel td { padding: 8px; }
.cm-gr { color: var(--grijs); }
.cm-mbalk { display: inline-block; width: 64px; height: 8px; background: var(--grijs-t); border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.cm-mbalk i { display: block; height: 100%; background: var(--teal); }
.cm-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.cm-filters .filterpil.cm-f-oranje:not(.aan) { background: var(--oranje-t); border-color: var(--oranje-r); color: var(--oranje-tx); }
.cm-order { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--lijn); padding: 10px 2px; font: inherit; color: var(--tekst); cursor: pointer; }
.cm-order:hover { background: var(--teal-zacht); }
.cm-stip { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--grijs-l); }
.cm-stip.groen { background: var(--groen); }
.cm-stip.oranje { background: var(--oranje); }
.cm-stip.rood { background: var(--rood); }
.cm-o-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cm-o-auto { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-o-sub { font-size: 13px; color: var(--grijs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-o-rechts { flex: none; text-align: right; display: flex; flex-direction: column; max-width: 45%; }
.cm-o-rechts b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cm-o-rechts span { font-size: 13px; color: var(--grijs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-meer { margin: 8px 0; }
.cm-leeg { padding: 8px 0; }
.cm-dt { display: flex; flex-direction: column; gap: 10px; }
.cm-dt-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-dt-kop b { font-weight: 500; }
.cm-dt-som { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: var(--kaart); border-radius: 10px; padding: 10px 12px; }
.cm-dt-som div { display: flex; flex-direction: column; min-width: 0; }
.cm-dt-som b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cm-teal { color: var(--teal); }
.cm-dt-tabel { min-width: 520px; background: var(--kaart); font-variant-numeric: tabular-nums; }
.cm-dt-tabel td:first-child { white-space: normal; min-width: 170px; }
.cm-dt-tabel tr.cm-mist td { background: var(--oranje-t); }
.cm-lev { display: block; font-size: 11px; }
.cm-ink { width: 96px; padding: 6px 8px; text-align: right; }
.cm-dt-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.cm-nm { display: flex; flex-direction: column; gap: 6px; background: var(--kaart); border-radius: 10px; padding: 10px 12px; }
.cm-inst-rij { display: flex; gap: 10px; flex-wrap: wrap; }
.cm-inst-rij .veld { flex: 1 1 160px; margin-bottom: 8px; }
.cm-inst .knop { margin: 2px 0 8px; }
.cm-vk-lijst { display: flex; flex-direction: column; margin: 6px 0 10px; }
.cm-vk-lijst div { display: flex; justify-content: space-between; border-top: 1px solid var(--lijn); padding: 6px 0; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .cm-kopbalk { margin-bottom: 8px; }
  .cm-tab { padding: 8px 12px; }
  .cm-ss { display: none; }
  .cm-periodebalk { width: 100%; justify-content: space-between; background: var(--kaart); border-radius: 10px; padding: 0 4px; }
  .cm-pijl { border: 0; background: none; }
  .cm-plabel { min-width: 0; flex: 1; }
  .cm-psoort { order: 4; width: 100%; margin: 0 0 6px; }
  .segment.mini.cm-psoort { display: flex; }
  .segment.mini.cm-psoort button { flex: 1 1 0; }
  .cm-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cm-tegel { padding: 12px; }
  .cm-tov { display: none; }
  .cm-oud { display: none; }
  .cm-grafiek { grid-template-columns: repeat(6, minmax(0, 1fr)); height: 150px; }
  .cm-12n { display: none; }
  .cm-6n { display: inline; }
  .cm-dt-som { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* v4.75: km-stand - vorige stand en controle */
.km-info { margin-top: 4px; color: var(--grijs); }
.km-info .km-let { margin-top: 4px; color: var(--oranje-tx); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* v4.82 ontwerp (claude/ontwerp-app-posten-meta.md): Voorbeeld (post zoals op Instagram) */
.pv-kolommen { display: flex; flex-direction: column; gap: 4px; }
.pv-kol-ig, .pv-kol-fotos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (min-width: 700px) {
  .pv-kolommen { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .pv-kol-ig { position: sticky; top: calc(var(--nav-h, 62px) + 12px); }
  .pv-kolommen h2:first-child { margin-top: 4px; }
}
.pv-ig { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); overflow: hidden; max-width: 430px; }
.pv-ig-kop { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.pv-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--zwart); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--teal); }
.pv-avatar img { width: 30px; height: auto; display: block; }
.pv-account { display: flex; flex-direction: column; line-height: 1.2; }
.pv-account b { font-weight: 500; font-size: 15px; }
.pv-account span { font-size: 11px; color: var(--grijs); }
.pv-beeld { position: relative; background: #dde0e2; }
.pv-strook { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pv-strook::-webkit-scrollbar { display: none; }
.pv-dia { flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; position: relative; overflow: hidden; }
.pv-dia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-teller { position: absolute; top: 10px; right: 10px; background: rgba(17,18,19,.7); color: #fff; font-size: 13px; padding: 3px 9px; border-radius: 12px; }
.pv-dia .pv-snijlabel { position: absolute; left: 10px; bottom: 10px; }
.pv-iconen { display: flex; align-items: center; gap: 14px; padding: 10px 12px 4px; color: var(--zwart); }
.pv-iconen svg { width: 24px; height: 24px; display: block; }
.pv-iconen .pv-rechts { margin-left: auto; }
.pv-stipjes { display: flex; gap: 4px; justify-content: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pv-stipjes i { width: 6px; height: 6px; border-radius: 50%; background: var(--grijs-l); display: block; }
.pv-stipjes i.aan { background: var(--teal); }
.pv-onder { position: relative; }
.pv-onder .pv-iconen { position: relative; }
.pv-kolommen > * { flex: none; }
.pv-tekst { padding: 4px 12px 14px; font-size: 15px; line-height: 1.45; white-space: pre-line; }
.pv-tekst b { font-weight: 500; }
.pv-meer { color: var(--grijs); background: none; border: 0; padding: 0; font: inherit; display: inline; cursor: pointer; }
.pv-uitleg { font-size: 13px; color: var(--grijs); margin: 8px 2px 0; }
.pv-foto { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; }
.pv-knoppen { flex-basis: 100%; margin-top: 0; }
.pv-knoppen .knop.aan { border-color: var(--teal); color: var(--teal); background: var(--teal-zacht); }
.pv-duim { width: 64px; height: 80px; border-radius: 8px; overflow: hidden; flex: none; position: relative; background: #dde0e2; display: flex; align-items: center; justify-content: center; }
.pv-duim > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-duim.liggend { width: 107px; }
.pv-heel { position: relative; display: block; max-width: 100%; max-height: 100%; }
.pv-duim .pv-heel { height: 100%; width: auto; }
.pv-heel img { width: 100%; height: 100%; display: block; }
.pv-kader { position: absolute; top: 0; bottom: 0; border: 2px solid var(--teal); box-shadow: 0 0 0 999px rgba(17,18,19,.45); border-radius: 2px; }
.pv-foto .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pv-foto .t1 { font-weight: 500; font-size: 15px; }
.pv-foto .t2 { font-size: 13px; color: var(--grijs); }
.pv-foto .pt-knoppen { margin-top: 4px; align-self: stretch; }
.pv-foto .t1, .pv-foto .t2 { white-space: normal; overflow: visible; text-overflow: clip; }
.pv-foto .t1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pv-nr { position: absolute; top: 4px; left: 4px; background: rgba(17,18,19,.7); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 13px; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; z-index: 1; }
.rij.pv-let { border-left: 4px solid var(--oranje); background: var(--oranje-t); }
.pv-schuif { flex-basis: 100%; }
.pv-schuif-beeld { position: relative; border-radius: 10px; overflow: hidden; background: #dde0e2; touch-action: none; user-select: none; }
.pv-schuif-beeld .pv-heel { width: 100%; height: auto; max-height: none; }
.pv-schuif-beeld .pv-kader { border-width: 3px; cursor: grab; }
.pv-schuif input[type=range] { width: 100%; accent-color: var(--teal); margin: 10px 0 2px; }
.pv-schuif .pv-schaal { display: flex; justify-content: space-between; font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .5px; }
.pv-plan .chips { margin: 6px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
/* v4.82 ontwerp: Meta koppelen, regel bovenin Posts en het venster */
.pt-meta { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; min-height: 52px; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; font: inherit; font-size: 15px; color: var(--tekst); text-align: left; cursor: pointer; }
.pt-meta .rondje { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--grijs-t); color: var(--grijs); }
.pt-meta .rondje .ic { width: 16px; height: 16px; }
.pt-meta .rondje.aan { background: var(--teal); color: #fff; }
.pt-meta .pm-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.pt-meta .pm-tekst b { font-weight: 500; }
.pt-meta .pm-pijl { color: var(--grijs); font-size: 22px; line-height: 1; padding: 0 4px; }
.pt-meta.let { background: var(--oranje-t); border-color: var(--oranje-r); }
.pt-meta.let .rondje { background: #fff; color: var(--oranje-tx); }
.pt-meta.let .pm-tekst b { color: var(--oranje-tx); }
.pt-meta .knop { flex: none; pointer-events: none; }
.mk-status { display: flex; gap: 12px; align-items: center; }
.mk-status .rondje { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--grijs-t); color: var(--grijs); }
.mk-status .rondje.aan { background: var(--teal); color: #fff; }
.mk-status .rondje.let { background: var(--oranje-t); color: var(--oranje-tx); }
.mk-status .rondje .ic { width: 22px; height: 22px; }
.mk-status .t1 { font-weight: 500; font-size: 18px; line-height: 1.25; }
.mk-status .t2 { font-size: 13px; color: var(--grijs); }
.mk-velden { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.mk-velden .label { margin-top: 8px; }
.mk-geheim { position: relative; }
.mk-geheim .invoer { padding-right: 40px; width: 100%; }
.mk-geheim .ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--grijs-l); }
.mk-noot { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--grijs); margin: 10px 0 12px; }
.mk-noot .ic { flex: none; margin-top: 2px; }
.mk-hulp { margin-top: 12px; border-top: 1px solid var(--lijn); padding-top: 10px; }
.mk-hulp summary { cursor: pointer; color: var(--teal); font-weight: 500; list-style: none; display: flex; align-items: center; gap: 6px; min-height: 36px; }
.mk-hulp summary::-webkit-details-marker { display: none; }
.mk-hulp ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; margin-top: 4px; }
.mk-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
/* v4.82 (Rouke 26-10 avond): Instagram live in Post maken, hashtags blauw, regel gepland/geplaatst, profielraster */
.pm-raam { display: flex; flex-direction: column; gap: 4px; }
.pm-live, .pm-werk { min-width: 0; }
.pm-live:empty { display: none; }
@media (min-width: 700px) {
  .pm-raam { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .pm-live { position: sticky; top: calc(var(--nav-h, 62px) + 12px); max-height: calc(100vh - var(--nav-h, 62px) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .pm-live::-webkit-scrollbar { display: none; }
  .pm-live h2:first-child { margin-top: 4px; }
  .pm-werk .kolommen { display: block; }
}
@media (min-width: 1400px) { .pm-werk .kolommen { display: grid; } }
.pv-tag { color: #00376b; }
.pv-grijs { color: var(--grijs); }
.pv-status { padding: 0 12px 12px; font-size: 11px; color: var(--grijs); text-transform: uppercase; letter-spacing: .3px; }
.pv-dia.pv-leeg { display: flex; align-items: center; justify-content: center; color: var(--grijs); font-size: 14px; }
.pv-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; max-width: 430px; background: #fff; border-radius: 12px; overflow: hidden; }
.pv-tegel { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: #dde0e2; }
.pv-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-tegel.pv-leeg { background: #eef0f1; }
.pv-tegel.pv-nieuw { outline: 3px solid var(--teal); outline-offset: -3px; }
.pv-tegel-label { position: absolute; left: 6px; top: 6px; background: var(--teal); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 9px; }
/* v4.82a: kenteken bevestigen in Voorbeeld */
.pv-ktvraag { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pv-ktvraag .pt-knoppen { margin-top: 0; }
/* v4.82c (Rouke 27-10): klantherinneringen - naam en uitleg helemaal leesbaar (mogen afbreken) */
#aanvragenBlok .hr-rij .t1, #aanvragenBlok .hr-rij .t2 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
#aanvragenBlok .hr-rij .t1 { line-height: 1.2; }