/* Huisstijl Dijkstra Klimaattechniek B.V. */
:root {
  --navy-900: #071b35;
  --navy-800: #0a2444;
  --navy-700: #0e2e56;
  --navy-600: #14406f;
  --line:     rgba(255, 255, 255, .12);

  --oranje:   #f15a24;
  --oranje-d: #d24a18;
  --blauw:    #1c6fbf;
  --groen:    #2e9e63;
  --rood:     #c63a28;

  --tekst:    #ffffff;
  --tekst-2:  #a9bcd4;

  --radius:   14px;
  --tap:      52px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  /* Niets in deze app hoort zijwaarts te schuiven. Dit is een slot, geen
     oplossing: als er ooit tóch iets te breed is, valt het hier stil in
     plaats van de hele pagina scheef te trekken. */
  overflow-x: hidden;
  max-width: 100%;
  background: var(--navy-900);
  color: var(--tekst);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.4;
}

/* ------------------------------ header ------------------------------ */

header {
  background: var(--navy-800);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px 0;
  position: sticky; top: 0; z-index: 20;
}

header > * { max-width: 720px; margin-left: auto; margin-right: auto; }

.merk { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.logo { line-height: 1; }
.logo .naam { font-size: 22px; font-weight: 800; letter-spacing: 1.5px; }
.logo .sub  { font-size: 9.5px; font-weight: 600; letter-spacing: 3.1px; color: var(--tekst-2); margin-top: 2px; }
.logo .bars { display: flex; gap: 3px; margin-top: 6px; }
.logo .bars i { display: block; height: 4px; width: 34px; border-radius: 1px; }
.logo .bars i:nth-child(1) { background: var(--rood); }
.logo .bars i:nth-child(2) { background: var(--blauw); }
.logo .bars i:nth-child(3) { background: var(--groen); }

.wie { text-align: right; font-size: 13px; color: var(--tekst-2); }
.wie b { display: block; color: #fff; font-size: 15px; }

nav { display: flex; gap: 8px; margin-top: 14px; }
nav button {
  flex: 1; background: none; border: 0; border-bottom: 3px solid transparent;
  color: var(--tekst-2); font: inherit; font-weight: 600; font-size: 15px;
  padding: 10px 4px; cursor: pointer;
}
nav button.actief { color: #fff; border-bottom-color: var(--oranje); }

/* ------------------------------ layout ------------------------------ */

main { padding: 16px 16px 120px; max-width: 720px; margin: 0 auto; }
.verborgen { display: none !important; }

.veld { margin-bottom: 18px; }
.veld > label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--tekst-2); margin-bottom: 8px;
}

/* --------------------------- keuzeknoppen --------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  min-height: 44px; padding: 10px 16px;
  background: var(--navy-700); color: var(--tekst);
  border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.chip:hover { background: var(--navy-600); }
.chip.aan { background: var(--blauw); border-color: var(--blauw); }
.chip.aan.werk-onderhoud  { background: var(--groen);  border-color: var(--groen); }
.chip.aan.werk-storing    { background: var(--rood);   border-color: var(--rood); }
.chip.aan.werk-installatie{ background: var(--blauw);  border-color: var(--blauw); }
.chip.aan.werk-reistijd   { background: var(--oranje); border-color: var(--oranje); }
.chip.aan.werk-overig     { background: var(--navy-600); border-color: #55708f; }
.chip.klein { min-height: 38px; padding: 7px 13px; font-size: 14px; }
.chip.toevoegen { background: transparent; border-style: dashed; color: var(--tekst-2); }

/* ------------------------------ datum ------------------------------- */

.datumrij { display: flex; align-items: stretch; gap: 8px; }
.datumrij button.pijl {
  width: 48px; background: var(--navy-700); border: 1px solid var(--line);
  border-radius: var(--radius); color: #fff; font-size: 22px; cursor: pointer;
}
.datumrij button.pijl:hover { background: var(--navy-600); }
.datumveld {
  flex: 1; position: relative; background: var(--navy-700);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; min-height: var(--tap);
}
.datumveld span { font-weight: 700; font-size: 17px; pointer-events: none; }
.datumveld input {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  border: 0; cursor: pointer;
}

/* ------------------------------ tijden ------------------------------ */

.tijdvak { display: grid; grid-template-columns: 1fr; gap: 10px; }

.tijdblok {
  background: var(--navy-800); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px;
}
.tijdblok h3 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--tekst-2); font-weight: 700;
}
.tijdblok .waarde { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tijdblok input[type="time"] {
  flex: 1 1 0; width: 0; min-width: 0; background: var(--navy-900); color: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 8px 6px; text-align: center;
}
.tijdblok input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .5; }
.stap {
  width: 40px; height: 40px; flex: 0 0 40px;
  background: var(--navy-700); border: 1px solid var(--line); border-radius: 10px;
  color: #fff; font-size: 20px; font-weight: 700; cursor: pointer;
}
.stap:hover { background: var(--navy-600); }
.tijdblok .snel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tijdblok .snel .chip { flex: 1 1 auto; }

/* ------------------------------ notitie ----------------------------- */

textarea, input[type="text"], input[type="password"] {
  display: block; width: 100%; background: var(--navy-700); color: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; padding: 13px 14px; min-height: var(--tap); resize: vertical;
}
textarea::placeholder, input::placeholder { color: #6d84a1; }

/* ------------------------------ totaal ------------------------------ */

.balk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--navy-800); border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
}
.balk .totaal { flex: 0 0 auto; min-width: 0; }
.balk .totaal small { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-2); }
.balk .totaal b { font-size: 22px; font-variant-numeric: tabular-nums; }

/*
 * min-width: 0 is hier het hele punt. Zonder die regel valt een flex-item
 * terug op min-width:auto en kan het níét kleiner worden dan zijn eigen
 * tekst -- dan duwt de knop de balk breder dan het scherm. Die balk staat
 * bovendien fixed, dus overflow-x op de body vangt dat ook niet af.
 */
.opslaan {
  flex: 1 1 0; min-width: 0; min-height: 46px;
  background: var(--oranje); color: #fff; border: 0; border-radius: 999px;
  font: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
  cursor: pointer;
}
.opslaan:hover { background: var(--oranje-d); }
.opslaan:disabled { background: #46586e; cursor: not-allowed; }

/* ------------------------------ melding ----------------------------- */

.melding {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 40;
  background: var(--groen); color: #fff; font-weight: 700;
  padding: 11px 18px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s, bottom .2s;
  max-width: calc(100vw - 32px); text-align: center; line-height: 1.35;
}
.melding.zien { opacity: 1; bottom: 108px; }
.melding.fout { background: var(--rood); }

/* ----------------------------- overzicht ---------------------------- */

.weekbalk { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.weekbalk .titel { flex: 1; text-align: center; font-weight: 700; }
.weekbalk .titel small { display: block; color: var(--tekst-2); font-weight: 500; font-size: 13px; }

.samenvatting {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-600));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.samenvatting b { font-size: 32px; font-variant-numeric: tabular-nums; }
.samenvatting span { color: var(--tekst-2); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }

.dag { margin-bottom: 18px; }
.dag > h4 {
  margin: 0 0 8px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--tekst-2); display: flex; justify-content: space-between;
}

.regel {
  background: var(--navy-800); border: 1px solid var(--line);
  border-left: 4px solid var(--blauw); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.regel.werk-onderhoud   { border-left-color: var(--groen); }
.regel.werk-storing     { border-left-color: var(--rood); }
.regel.werk-installatie { border-left-color: var(--blauw); }
.regel.werk-reistijd    { border-left-color: var(--oranje); }
.regel.werk-overig      { border-left-color: #55708f; }

.regel .info { flex: 1; min-width: 0; }
.regel .info .klant { font-weight: 700; }
.regel .info .meta { color: var(--tekst-2); font-size: 13.5px; margin-top: 2px; }
.regel .uren { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 19px; }
.regel .weg {
  background: none; border: 0; color: #6d84a1; font-size: 20px;
  cursor: pointer; padding: 4px 6px; line-height: 1;
}
.regel .weg:hover { color: var(--rood); }

.leeg { text-align: center; color: var(--tekst-2); padding: 40px 20px; }

.knoprij { display: flex; gap: 8px; margin-top: 20px; }
.knop-2 {
  flex: 1; min-height: 48px; background: var(--navy-700); color: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-weight: 700; cursor: pointer; text-align: center;
  text-decoration: none; display: flex; align-items: center; justify-content: center;
}
.knop-2:hover { background: var(--navy-600); }

/* ------------------------------ desktop ----------------------------- */

@media (min-width: 640px) {
  .tijdvak { grid-template-columns: 1fr 1fr; }
  main { padding-bottom: 110px; }
}

/* ============================== INLOGGEN ============================= */

.loginwrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 80% at 50% 0%, var(--navy-700), var(--navy-900) 70%);
}
.loginbox { width: 100%; max-width: 360px; text-align: center; }

.logo.groot { margin-bottom: 34px; }
.logo.groot .naam { font-size: 30px; letter-spacing: 2px; }
.logo.groot .sub { font-size: 11px; letter-spacing: 3.6px; margin-top: 3px; }
.logo.groot .bars { justify-content: center; margin-top: 9px; }
.logo.groot .bars i { width: 46px; height: 5px; }

.loginvraag { color: var(--tekst-2); font-size: 15px; margin: 0 0 16px; }
.loginvraag b { color: #fff; }

.chips.groot { flex-direction: column; gap: 10px; }
.chip.groot { width: 100%; min-height: 56px; font-size: 17px; border-radius: var(--radius); }

.bolletjes { display: flex; justify-content: center; gap: 14px; margin: 4px 0 26px; }
.bolletjes i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--tekst-2); background: transparent;
}
.bolletjes i.vol { background: var(--oranje); border-color: var(--oranje); }
.bolletjes i.flauw { opacity: .3; }
.bolletjes.schud { animation: schud .35s; }
@keyframes schud {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-9px); }
  75% { transform: translateX(9px); }
}

.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.toets {
  min-height: 64px; font-size: 26px; font-weight: 700;
  background: var(--navy-700); color: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.toets:active { background: var(--navy-600); }
.toets.ok { background: var(--oranje); border-color: var(--oranje); }
.toets.stil { background: transparent; }

.tekstknop {
  margin-top: 20px; background: none; border: 0; color: var(--tekst-2);
  font: inherit; font-size: 15px; text-decoration: underline; cursor: pointer;
}
.loginfout { color: #ff8f7e; font-size: 15px; min-height: 22px; margin: 16px 0 0; }

/* ============================ WIE-KNOP/MENU ========================= */

.wieknop {
  background: var(--navy-700); border: 1px solid var(--line); border-radius: var(--radius);
  color: #fff; font: inherit; font-weight: 700; font-size: 15px;
  padding: 8px 14px; text-align: right; cursor: pointer; line-height: 1.25;
}
.wieknop:hover { background: var(--navy-600); }
.wieknop small { display: block; font-weight: 500; font-size: 11px; color: var(--tekst-2); text-transform: uppercase; letter-spacing: 1px; }

.overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(3, 12, 25, .72);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px calc(16px + env(safe-area-inset-bottom));
}
@media (min-width: 640px) { .overlay { align-items: center; } }

.menu {
  width: 100%; max-width: 380px;
  background: var(--navy-800); border: 1px solid var(--line);
  border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.menu button {
  min-height: 52px; background: var(--navy-700); color: #fff;
  border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.menu button:hover { background: var(--navy-600); }
.menu button.rood { background: var(--rood); border-color: var(--rood); }
.menu button.stil { background: transparent; border-color: transparent; color: var(--tekst-2); font-weight: 500; }

.menu.uitleg { padding: 22px; text-align: left; }
.menu.uitleg h3 { margin: 0 0 12px; font-size: 18px; }
.menu.uitleg p { margin: 0 0 12px; color: var(--tekst-2); font-size: 15px; line-height: 1.5; }
.menu.uitleg p b { color: #fff; }

/* ============================== BEHEER ============================== */

.kaart {
  background: var(--navy-800); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.kaart h3 { margin: 0 0 12px; font-size: 15px; }
.kaart input[type="text"], .kaart input[type="password"] { margin-bottom: 10px; }
.kaart input[type="date"] { margin-bottom: 10px; }

.knop-1 {
  width: 100%; min-height: 48px; background: var(--blauw); color: #fff;
  border: 0; border-radius: var(--radius); font: inherit; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.knop-1:hover { filter: brightness(1.1); }

.vinkje { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--tekst-2); font-size: 15px; cursor: pointer; }
.vinkje input { width: 20px; height: 20px; accent-color: var(--oranje); }

.tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label.klein { display: block; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--tekst-2); }
label.klein input {
  width: 100%; margin-top: 6px; background: var(--navy-700); color: #fff;
  border: 1px solid var(--line); border-radius: 10px; font: inherit; padding: 11px 12px;
}

.regel.beheer { flex-wrap: wrap; border-left-color: var(--blauw); }
.regel.beheer.uit { opacity: .5; border-left-color: #55708f; }
.regel .acties { display: flex; gap: 6px; flex: 1 0 100%; margin-top: 10px; }
.mini {
  flex: 1; min-height: 38px; background: var(--navy-700); color: #fff;
  border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.mini:hover { background: var(--navy-600); }
.mini.waarschuw { color: #ff9c8d; }

.badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  background: var(--oranje); color: #fff; padding: 2px 7px; border-radius: 999px;
  vertical-align: middle; margin-left: 6px;
}

.mtotaal {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--navy-800); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 6px;
}
.mtotaal b { font-variant-numeric: tabular-nums; }
#perMonteur { margin-bottom: 16px; }

/* de weekpijlen in het overzicht */
.weekbalk .pijl {
  width: 48px; min-height: 48px; background: var(--navy-700);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: #fff; font-size: 22px; cursor: pointer;
}
.weekbalk .pijl:hover { background: var(--navy-600); }

/* pincode-dialoog */
.menu.uitleg input { margin-bottom: 10px; }
.menu button.knop-1 { background: var(--blauw); border-color: var(--blauw); margin-bottom: 4px; }
.menu button.knop-1:hover { background: var(--blauw); filter: brightness(1.1); }

/* ========================= HERINNERINGSBANNER ======================= */

.herinner {
  position: relative;
  background: linear-gradient(135deg, rgba(241, 90, 36, .18), rgba(241, 90, 36, .07));
  border: 1px solid rgba(241, 90, 36, .45);
  border-radius: var(--radius);
  padding: 14px 44px 14px 16px;
  margin-bottom: 18px;
}
.herinner .tekst { font-weight: 700; margin-bottom: 10px; }
.herinnerknoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.herinner .weg {
  position: absolute; top: 8px; right: 8px;
  background: none; border: 0; color: var(--tekst-2);
  font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer;
}
.herinner .weg:hover { color: #fff; }

/* =========================== DAGSTROOKJE ============================ */

.dagstrip {
  background: var(--navy-800); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 18px;
}
.dagstrip-kop {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--tekst-2); font-weight: 700; margin-bottom: 10px;
}
.dagstrip-kop b { font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0; }

.dagregel {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--navy-700); border: 1px solid var(--line);
  border-left: 3px solid var(--blauw); border-radius: 9px;
  color: #fff; font: inherit; font-size: 14.5px; text-align: left;
  padding: 9px 12px; margin-bottom: 6px; cursor: pointer;
}
.dagregel:hover { background: var(--navy-600); }
.dagregel:last-child { margin-bottom: 0; }
.dagregel.werk-onderhoud   { border-left-color: var(--groen); }
.dagregel.werk-storing     { border-left-color: var(--rood); }
.dagregel.werk-installatie { border-left-color: var(--blauw); }
.dagregel.werk-reistijd    { border-left-color: var(--oranje); }
.dagregel.werk-overig      { border-left-color: #55708f; }
.dagregel .tijd { color: var(--tekst-2); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.dagregel .wie { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dagregel .uren { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* ============================ MATERIALEN ============================ */

.plusknop {
  width: 100%; min-height: 48px;
  background: transparent; color: var(--tekst-2);
  border: 1px dashed var(--line); border-radius: var(--radius);
  font: inherit; font-weight: 700; cursor: pointer;
}
.plusknop:hover { background: var(--navy-700); color: #fff; }

.chip.materiaal { background: var(--navy-600); border-color: var(--blauw); }
.chip.materiaal.aan { background: var(--navy-600); border-color: var(--blauw); }

.materiaalkiezer { max-height: 86vh; display: flex; flex-direction: column; padding: 18px; }
.materiaalkiezer h3 { margin: 0 0 12px; font-size: 18px; }
.materiaalkiezer input[type="text"] { margin-bottom: 10px; }

.matlijst { overflow-y: auto; flex: 1; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }

.matrij {
  display: flex; align-items: center; gap: 10px;
  background: var(--navy-700); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 6px;
}
.matrij.aan { border-color: var(--blauw); background: var(--navy-600); }
.matnaam { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; }
.matnaam small { display: block; color: var(--tekst-2); font-weight: 500; font-size: 12px; }
.mataantal { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mataantal span {
  min-width: 38px; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mataantal .stap { width: 38px; height: 38px; flex: 0 0 38px; font-size: 19px; }

.regel .mat { color: var(--blauw); font-size: 13.5px; margin-top: 3px; }

/* ============================= BEWERKEN ============================= */

.bewerkbox { max-height: 88vh; overflow-y: auto; }
.bewerkbox label.klein { margin-bottom: 10px; }
.bewerkbox .bwwie {
  margin: -4px 0 12px; color: var(--tekst-2); font-size: 13px;
  text-transform: uppercase; letter-spacing: 1px;
}
.bwuren { margin: 4px 0 12px; color: var(--tekst-2); }
.bwuren b { color: #fff; font-size: 19px; font-variant-numeric: tabular-nums; }

.regel .wijzig {
  background: none; border: 0; color: #6d84a1; font-size: 17px;
  cursor: pointer; padding: 6px 8px; line-height: 1;
}
.regel .wijzig:hover { color: var(--oranje); }

/* ============================== BEHEER ============================== */

.beheerlabel {
  color: var(--oranje); font-size: 12px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; margin: -22px 0 26px;
}

.knop-1.rood { background: var(--rood); }
.knop-2.breed { width: 100%; margin-top: 10px; }

.uitlegtekst { color: var(--tekst-2); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }

.openstaand { border-color: rgba(241, 90, 36, .4); }
.openrij {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.openrij:last-child { border-bottom: 0; }
.openrij .dagen { color: var(--oranje); font-size: 14px; text-align: right; }

nav button { font-size: 14px; }
@media (max-width: 480px) { nav button { font-size: 13px; padding: 10px 2px; } }

.mataantal span {
  padding: 4px 2px; border-radius: 7px;
}
.mataantal span.leeg { color: #55708f; }
.mataantal span.gekozen { color: #fff; }
.mataantal .stap:disabled { opacity: .35; cursor: default; }

/* de herinnering mag opvallen, maar niet schreeuwen */
.herinner { padding: 12px 40px 12px 14px; }
.herinner .tekst { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.herinnerknoppen .chip { min-height: 34px; padding: 6px 12px; font-size: 13.5px; }

/* =============================== FOTO'S ============================= */

.fotostrip { display: flex; flex-wrap: wrap; gap: 8px; }
.fotostrip:not(:empty) { margin-bottom: 10px; }
.fotostrip.inregel { margin-top: 8px; gap: 6px; }

.fotominiatuur {
  position: relative; width: 84px; height: 84px; padding: 0;
  background: var(--navy-700); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; cursor: pointer;
}
.fotostrip.inregel .fotominiatuur { width: 58px; height: 58px; }
.fotominiatuur img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotominiatuur span {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(4, 14, 28, .8); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 2px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fotostrip.inregel .fotominiatuur span { font-size: 8.5px; padding: 2px 1px; }
.fotominiatuur:hover { border-color: var(--oranje); }

/* foto groot bekijken */
.overlay.kijker { align-items: center; padding: 12px; }
.kijkerbox {
  width: 100%; max-width: 900px;
  background: var(--navy-800); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.kijkerbox img {
  display: block; width: 100%; max-height: 74vh;
  object-fit: contain; background: #030c18;
}
.kijkerbalk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; flex-wrap: wrap;
}
.kijkerbalk span { color: var(--tekst-2); font-size: 14px; }
.kijkerbalk > div { display: flex; gap: 6px; }
.kijkerbalk .mini { min-height: 38px; padding: 0 14px; display: flex; align-items: center; text-decoration: none; }

.fotostrip.galerij { gap: 10px; }
.fotominiatuur.groot { width: 130px; height: 130px; }
.fotominiatuur.groot span { font-size: 10.5px; padding: 4px 3px; }

/* ---------------------- tijdknoppen met twee regels ------------------ */

.chip.tweeregelig {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1.15; padding: 6px 10px; min-height: 46px;
}
.chip.tweeregelig span { font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.chip.tweeregelig small { font-size: 10.5px; font-weight: 500; color: var(--tekst-2); letter-spacing: .02em; }
.chip.tweeregelig.aan small { color: rgba(255, 255, 255, .82); }
.snel.duren .chip { flex: 1 1 auto; }

.tijdblok h3 small {
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--oranje); margin-left: 4px; font-variant-numeric: tabular-nums;
}

.fotoknoppen { display: flex; gap: 8px; }
.fotoknoppen .plusknop { flex: 1; }

.uitslag {
  margin: 12px 0 0; padding: 11px 13px; border-radius: 10px;
  background: var(--navy-700); border: 1px solid var(--line);
  color: var(--tekst-2); font-size: 14px; line-height: 1.5;
}
.uitslag.goed { border-color: var(--groen); color: #fff; }
.uitslag b { color: #fff; font-weight: 600; }

/* ------------------------ klantsuggesties --------------------------- */

.suggesties {
  display: none; margin-top: 6px;
  background: var(--navy-800); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.suggesties.zien { display: block; }
.suggesties button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  color: #fff; font: inherit; font-size: 15px; padding: 12px 14px; cursor: pointer;
}
.suggesties button:last-child { border-bottom: 0; }
.suggesties button:hover { background: var(--navy-700); }
.suggesties mark { background: none; color: var(--oranje); font-weight: 700; }