:root {
  --bg: #f3f4f1; --vlak: #ffffff; --tekst: #1b1c1a; --grijs: #6a6d68; --lijn: #e3e5df; --lijn-z: #eef0ea;
  --rood: #d4432f; --rood-l: #fbe4e0; --oranje: #ec9a1f; --oranje-l: #fdeccd;
  --bezet: #dadbd6; --bezet-d: #868882; --groen: #2e8b57; --groen-l: #dff2e6; --accent: #175c8a; --accent-l: #e4eef5;
  --groen-k: #d6efdd; --groen-k-rand: #7cc496; --rood-k: #f4c7c2; --rood-k-rand: #d4432f;
  --radius: 10px; --schaduw: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tekst); background: var(--bg); }
a { color: var(--accent); }
main { max-width: 1240px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 8px 0 16px; }
h2 { font-size: 17px; margin: 0; }
h2 small { font-weight: 400; color: var(--grijs); font-size: 14px; margin-left: 6px; }
h3 { font-size: 15px; margin: 0 0 10px; font-weight: 650; }

header.top { background: var(--vlak); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 20; }
.topbalk { max-width: 1240px; margin: 0 auto; display: flex; align-items: baseline; gap: 12px; padding: 12px 16px 4px; flex-wrap: wrap; }
.merk { font-weight: 800; text-decoration: none; color: var(--accent); font-size: 17px; letter-spacing: .2px; }
.topbalk .kop { font-weight: 600; }
.sub { color: var(--grijs); font-size: 13px; }
nav.tabs { max-width: 1240px; margin: 0 auto; display: flex; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs a { padding: 8px 12px; text-decoration: none; color: var(--grijs); border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap; }
nav.tabs a.actief { color: var(--accent); border-bottom-color: var(--accent); }
footer { text-align: center; color: var(--grijs); padding: 24px; font-size: 13px; }

section.kaart, section.kal { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; box-shadow: var(--schaduw); }
.kolommen { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 980px) { .kolommen { grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr); align-items: start; } }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.flash.ok { background: var(--groen-l); color: #1d5e3b; }
.flash.fout { background: var(--rood-l); color: #8a2a22; }

/* werkbalk agenda */
.werkbalk { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.werkbalk .nav { display: flex; gap: 4px; }
.werkbalk h2 { font-size: 18px; flex: 1; text-align: center; min-width: 150px; }
.weergaven { display: inline-flex; border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden; }
.weergaven a { padding: 6px 14px; text-decoration: none; color: var(--grijs); font-size: 14px; }
.weergaven a + a { border-left: 1px solid var(--lijn); }
.weergaven a.actief { background: var(--accent); color: #fff; }

/* maand (met weeknummerkolom) */
.raster { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 3px; }
.kopdag { text-align: center; font-size: 12px; color: var(--grijs); padding: 2px 0; }
.raster .wk { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--grijs); text-decoration: none; border-radius: 6px; }
.raster a.wk:hover { background: var(--accent-l); color: var(--accent); }
.dag { min-height: 86px; border-radius: 8px; border: 1px solid var(--lijn-z); padding: 24px 4px 4px; background: var(--vlak); font-size: 12px; position: relative; }
.dag .nr { position: absolute; top: 4px; right: 5px; color: var(--grijs); font-size: 12px; text-decoration: none; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; }
.dag.vandaag .nr { background: var(--accent); color: #fff; font-weight: 600; }
.dag.leeg { border: none; background: transparent; }
.dag.verleden { background: #f3f4f1; }
.dag.verleden .chip { opacity: .55; }
.dag.bezet { background: var(--bezet); }
.dag.optie { background: var(--oranje-l); border-color: var(--oranje); }
.dag.bevestigd { background: var(--rood-l); border-color: var(--rood); }
.dag.klik { cursor: pointer; }
.dag.klik:hover, .dag.gekozen, .wkol.klik:hover, .wkol.gekozen { outline: 2px solid var(--accent); outline-offset: -2px; }
.chips { display: grid; gap: 2px; }
.chip { display: block; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.chip.inline { display: inline; }
.chip.bevestigd { background: var(--rood); color: #fff; }
.chip.optie { background: var(--oranje); color: #fff; }
.chip.blok, .chip.bezet { background: var(--bezet-d); color: #fff; }
.chip.google { background: #e3ebf1; color: #2b4a63; border: 1px dashed #8aa4b8; }
.chip em { font-style: normal; opacity: .85; }
.meer { font-size: 11px; color: var(--grijs); }

/* week en dag: tijdraster */
.tijdraster { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 0 3px; }
.tijdraster.dagweergave { grid-template-columns: 44px 1fr; }
.tkolom { min-width: 0; }
.tkolom.uren { font-size: 11px; color: var(--grijs); }
.tkolom.uren .uur { text-align: right; padding-right: 6px; transform: translateY(-7px); }
.tkolom.uren .heledag { justify-content: flex-end; font-size: 11px; padding-right: 6px; }
.wkol { border: 1px solid var(--lijn-z); border-radius: 8px; background: var(--vlak); display: flex; flex-direction: column; overflow: hidden; }
.wkol.verleden { background: #f3f4f1; }
.wkol.verleden .tblok, .wkol.verleden .chip { opacity: .6; }
.wkol.bezet { background: var(--bezet); }
.wkol.optie { background: var(--oranje-l); border-color: var(--oranje); }
.wkol.bevestigd { background: var(--rood-l); border-color: var(--rood); }
.wkol.klik { cursor: pointer; }
.wkop { padding: 6px 8px; border-bottom: 1px solid var(--lijn-z); font-size: 13px; color: var(--grijs); white-space: nowrap; }
.wkop a { color: inherit; text-decoration: none; }
.wkop b { font-size: 17px; color: var(--tekst); margin-left: 2px; }
.wkol.vandaag .wkop b { background: var(--accent); color: #fff; border-radius: 50%; display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center; }
.heledag { min-height: 30px; padding: 4px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--lijn-z); }
.turen { position: relative; background-image: repeating-linear-gradient(to bottom, var(--lijn-z) 0, var(--lijn-z) 1px, transparent 1px, transparent var(--uur)); cursor: crosshair; user-select: none; }
.tblok { position: absolute; border-radius: 6px; padding: 3px 6px; font-size: 11px; line-height: 1.25; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.tblok b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tblok span { display: block; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dagweergave .tblok { font-size: 13px; padding: 6px 10px; }
.tblok.bevestigd { background: var(--rood); color: #fff; }
.tblok.optie { background: var(--oranje); color: #fff; opacity: .92; }
.tblok.blok, .tblok.bezet { background: var(--bezet-d); color: #fff; }
.tblok.google { background: repeating-linear-gradient(135deg, #e3ebf1, #e3ebf1 6px, #d3dee7 6px, #d3dee7 12px); color: #2b4a63; border: 1px dashed #8aa4b8; box-shadow: none; }
.selectie { position: absolute; left: 2px; right: 2px; background: rgba(23,92,138,.22); border: 1px dashed var(--accent); border-radius: 4px; pointer-events: none; font-size: 11px; color: var(--accent); padding: 2px 4px; }
.vrijtekst { color: var(--grijs); font-size: 12px; padding: 2px; }

/* klantenportaal: groen vrij, rood bezet, deels = beide */
.klant .dag.vrij, .klant .wkol.vrij { background: var(--groen-k); border-color: var(--groen-k-rand); }
.klant .vrijtekst { color: #1d5e3b; font-weight: 600; }
.klant .dag.bezet, .klant .wkol.bezet, .klant .dag.bevestigd, .klant .wkol.bevestigd { background: var(--rood-k); border-color: var(--rood-k-rand); }
.klant .dag.deels, .klant .wkol.deels { background: linear-gradient(135deg, var(--groen-k) 0 50%, var(--rood-k) 50% 100%); border-color: var(--groen-k-rand); }
.klant .chip.bezet, .klant .blok.bezet, .klant .tblok.bezet { background: var(--rood); color: #fff; }
.klant .dag.verleden, .klant .wkol.verleden { background: #ececea; border-color: var(--lijn); }

.legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--grijs); margin: -6px 0 14px 4px; }
.legenda .vak { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; border: 1px solid var(--lijn); }
.vak.vrij { background: #fff; } .vak.optie { background: var(--oranje); } .vak.bevestigd { background: var(--rood); } .vak.bezet { background: var(--bezet); } .vak.blok { background: var(--bezet-d); }
.vak.google { background: #e3ebf1; border: 1px dashed #8aa4b8; } .vak.kvrij { background: var(--groen-k); border-color: var(--groen-k-rand); } .vak.kbezet { background: var(--rood-k); border-color: var(--rood-k-rand); }
.vak.kdeels { background: linear-gradient(135deg, var(--groen-k) 0 50%, var(--rood-k) 50% 100%); border-color: var(--groen-k-rand); }
.vak.slot { background: transparent; border: none; width: auto; }

/* formulieren en knoppen */
form.f { display: grid; gap: 10px; }
form.f label, .f label { display: grid; gap: 4px; font-size: 13px; color: var(--grijs); }
input, textarea, select { font: inherit; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 8px; background: #fff; color: var(--tekst); width: 100%; min-width: 0; }
input[type="checkbox"] { width: auto; }
textarea { min-height: 60px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-l); border-color: var(--accent); }
.rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.knop { display: inline-block; font: inherit; font-weight: 500; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap; }
.knop:hover { filter: brightness(1.08); }
.knop:disabled { opacity: .45; cursor: not-allowed; }
.knop.licht { background: #fff; color: var(--accent); }
.knop.rood { background: var(--rood); border-color: var(--rood); }
.knop.groen { background: var(--groen); border-color: var(--groen); }
.knop.klein { padding: 5px 10px; font-size: 13px; }
.inline { display: inline; }
.acties { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acties input, .acties select { width: auto; padding: 5px 8px; font-size: 13px; }
.urenform label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--grijs); }
.urenform input { width: 64px; }

.tabel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--lijn-z); vertical-align: top; }
th { color: var(--grijs); font-weight: 600; font-size: 12px; white-space: nowrap; }
table.diensten td.num, table.diensten th.num { text-align: right; white-space: nowrap; }
table.diensten tr.subtotaal td { font-weight: 600; border-top: 2px solid var(--lijn); background: #fafaf7; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #eee; }
.badge.optie { background: var(--oranje-l); color: #8a5410; }
.badge.bevestigd { background: var(--rood-l); color: #8a2a22; }
.badge.afgewezen, .badge.vervallen, .badge.geannuleerd { background: #ececea; color: var(--grijs); }
.stil { color: var(--grijs); font-size: 13px; }
.waarschuw { color: #8a2a22; font-weight: 600; font-size: 13px; }
code, .code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: #f1f1ee; padding: 2px 6px; border-radius: 4px; word-break: break-all; }
details summary { cursor: pointer; font-weight: 600; }
details.details summary { font-weight: 500; font-size: 13px; color: var(--accent); }
.lijst { margin: 0; padding-left: 18px; }
.kaartje { border: 1px solid var(--lijn-z); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: #fff; display: grid; gap: 4px; }
.kaartje .kop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.kaartje.optie { border-left: 4px solid var(--oranje); }
.kaartje.bevestigd { border-left: 4px solid var(--rood); }
.kaartje.blok { border-left: 4px solid var(--bezet-d); }
.kaartje.gekozen { outline: 2px solid var(--accent); }
.callsheet { font-size: 13px; background: #fafaf7; border-radius: 6px; padding: 8px 10px; line-height: 1.5; }
.planners { border-top: 1px dashed var(--lijn); margin-top: 6px; padding-top: 6px; display: grid; gap: 4px; }
.planner { font-size: 13px; }
pre.mail { white-space: pre-wrap; font-size: 12px; background: #f7f7f4; padding: 8px; border-radius: 6px; margin: 6px 0 0; }
.teller { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--oranje); color: #fff; font-size: 12px; text-align: center; margin-left: 6px; }
nav.tabs .teller { font-size: 11px; line-height: 16px; min-width: 16px; vertical-align: 1px; }
.kopmetknop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kopmetknop .knop { margin-left: auto; font-weight: 400; }
.totaal { margin-left: auto; font-size: 18px; font-weight: 700; color: var(--accent); }
.dagtotaal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--grijs); padding: 8px 10px; border-top: 1px solid var(--lijn); background: #fafaf7; border-radius: 6px; }
.dagtotaal b { color: var(--tekst); }
dialog.dialoog { border: 1px solid var(--lijn); border-radius: 12px; padding: 18px; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
dialog.dialoog::backdrop { background: rgba(0,0,0,.3); }
dialog.dialoog h3 { margin-bottom: 4px; }

/* tijdbalk per dag (maandcel, aanvragen) */
.dagbalk { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 7px; border-radius: 3px; background: #ecedea; overflow: hidden; }
.dagbalk i { position: absolute; top: 0; bottom: 0; }
.dagbalk i.bevestigd, .dagbalk i.bezet { background: var(--rood); }
.dagbalk i.optie { background: var(--oranje); }
.dagbalk i.blok { background: var(--bezet-d); }
.dagbalk i.google { background: repeating-linear-gradient(135deg, #b9c9d6, #b9c9d6 2px, #e3ebf1 2px, #e3ebf1 4px); }
.klant .dagbalk { background: #bfe3cb; }
.dag { padding-bottom: 14px; }
.dagbalk.groot { position: relative; left: 0; right: 0; bottom: 0; height: 22px; border-radius: 5px; background: repeating-linear-gradient(to right, var(--lijn-z) 0, var(--lijn-z) 1px, #f4f5f1 1px, #f4f5f1 calc(100% / 24)); border: 1px solid var(--lijn-z); }
.dagbalk.groot i { border-radius: 3px; top: 2px; bottom: 2px; }
.dagbalk.groot i.reis { opacity: .35; }
.dagbalk.groot i.optie { top: 5px; bottom: 5px; box-shadow: 0 0 0 1px #fff; }

/* aanvragen: oordeel en tijdlijn */
.oordeel { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.oordeel.past { background: var(--groen-l); color: #1d5e3b; }
.oordeel.krap { background: var(--oranje-l); color: #8a5410; }
.oordeel.past_niet { background: var(--rood-l); color: #8a2a22; }
.redenen li { font-size: 13px; color: #8a2a22; }

/* telefoon */
@media (max-width: 760px) {
  main { padding: 10px; }
  section.kaart, section.kal { padding: 12px; }
  .werkbalk h2 { order: -1; width: 100%; text-align: left; font-size: 17px; }
  .weergaven { display: flex; width: 100%; }
  .weergaven a { flex: 1; text-align: center; padding: 8px 0; }
  .werkbalk .nav { margin-left: auto; }
  .tijdraster.week { display: block; }
  .tijdraster.week .tkolom.uren { display: none; }
  .tijdraster.week .wkol { margin-bottom: 8px; }
  .tijdraster.week .wkol.verleden { display: none; }
  .tijdraster.week .wkop { display: flex; align-items: center; gap: 6px; }
  .tijdraster.week .heledag { border-bottom: none; }
  .tijdraster.week .turen { height: auto !important; background: none; display: grid; gap: 6px; padding: 0 6px 6px; cursor: default; }
  .tijdraster.week .tblok { position: static !important; height: auto !important; width: auto !important; left: auto !important; top: auto !important; font-size: 13px; padding: 6px 10px; }
  .tijdraster.week .wkol.vrij .turen:empty::after { content: "vrij"; color: var(--grijs); font-size: 12px; padding: 2px 4px; }
  .klant .tijdraster.week .wkol.vrij .turen:empty::after { color: #1d5e3b; font-weight: 600; }
  .raster { grid-template-columns: 22px repeat(7, minmax(0, 1fr)); gap: 2px; }
  .dag { min-height: 58px; padding-top: 22px; }
  .chip { font-size: 10px; }
  .rij { grid-template-columns: 1fr; }
  .kaartje .kop { flex-wrap: wrap; }
  .totaal { font-size: 16px; }
  .legenda { gap: 8px 12px; }
}
.balkrij { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: center; margin: 2px 0; }
.balklabel { font-size: 12px; color: var(--grijs); white-space: nowrap; }
.balklabel small { font-size: 10px; }
.kaartje.aanvraag .waarschuw { font-weight: 500; }
@media (max-width: 760px) { .balkrij { grid-template-columns: 84px 1fr; } }
a.chip, a.blok, a.tblok { text-decoration: none; cursor: pointer; }
a.tblok:hover, a.chip:hover { filter: brightness(1.08); outline: 2px solid #fff; }
.chip em { font-style: normal; opacity: .8; font-size: 10px; }
.notitie { font-size: 13px; background: #fff8e1; border-left: 3px solid var(--oranje); padding: 6px 10px; border-radius: 4px; }
.kaartje .kop a { color: inherit; text-decoration: none; }
.kaartje .kop a:hover { text-decoration: underline; }
.volknop { padding: 6px 10px; }
body.vol main { max-width: none; padding: 8px 12px; }
body.vol section.kal { margin-bottom: 6px; }
body.vol footer { display: none; }
body.vol .dag { min-height: 120px; }