/* Brain Planning — kleuren uit de Brain-huisstijl (bureau/klanten/brain/merk.json) */

:root {
  --merk: #049998;
  --merk-donker: #047A78;
  --merk-heet: #04605F;
  --merk-zacht: #EAF7F6;
  --grond: #FFFFFF;
  --vlak: #FFFFFF;
  --vlak-2: #F7F7F7;
  --inkt: #222222;
  --inkt-2: #3F3F3F;
  --zacht: #6A6A6A;
  --lijn: #EBEBEB;
  --lijn-zacht: #F3F3F3;
  --rand-veld: #DDDDDD;
  --gevaar: #D63031;
  --gevaar-zacht: #FDECEC;
  --goed: #00A37A;
  --weekend: rgba(20, 29, 32, 0.035);
  --rasterlijn: rgba(20, 29, 32, 0.05);
  --schaduw: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
  --schaduw-hoog: 0 8px 28px rgba(0, 0, 0, 0.18);
  --schaduw-zweef: 0 6px 20px rgba(0, 0, 0, 0.12);
  --status-gepland: #8A9AA0;
  --status-bezig: #0984E3;
  --status-feedback: #E6A100;
  --status-klaar: #00A37A;

  --label: 310px;
  --radius: 14px;
  --kop: 'Poppins', system-ui, sans-serif;
  --tekst: 'Readex Pro', system-ui, sans-serif;
  color-scheme: light;
}

/* Bewust alleen een lichte variant, ook als het systeem op donker staat. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grond);
  color: var(--inkt);
  font: 400 14.5px/1.5 var(--tekst);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--kop); font-weight: 600; margin: 0; line-height: 1.25; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.zacht { color: var(--zacht); }
.klein { font-size: 12px; }
.vul { flex: 1; }
.rechts { text-align: right; white-space: nowrap; }
.fout-tekst { color: var(--gevaar); font-size: 13px; }
.fout-tekst:empty { display: none; }
.icoon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.stapel { display: flex; flex-direction: column; gap: 14px; }
.stip { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
:focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; }

/* ── Knoppen en velden ─────────────────────────────────────────────────── */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt);
  cursor: pointer; font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.knop:hover { border-color: var(--merk); color: var(--merk-donker); }
.knop--primair { background: var(--merk-donker); border-color: var(--merk-donker); color: #fff; }
.knop--primair:hover { background: var(--merk-heet); border-color: var(--merk-heet); color: #fff; }
.knop--gevaar { background: var(--gevaar); border-color: var(--gevaar); color: #fff; }
.knop--gevaar:hover { color: #fff; filter: brightness(.92); border-color: var(--gevaar); }
.knop--gevaar-tekst { border-color: transparent; background: transparent; color: var(--gevaar); padding: 0 8px; }
.knop--gevaar-tekst:hover { background: var(--gevaar-zacht); color: var(--gevaar); border-color: transparent; }
.knop--tekst { border-color: transparent; background: transparent; color: var(--merk-donker); padding: 0 8px; }
.knop--tekst:hover { background: var(--merk-zacht); border-color: transparent; }
.knop--icoon { width: 34px; height: 34px; padding: 0; border-color: transparent; background: transparent; color: var(--zacht); }
.knop--icoon:hover { background: var(--merk-zacht); border-color: transparent; }
.knop--klein { height: 30px; padding: 0 10px; font-size: 13px; }
.knop--actief { border-color: var(--merk); background: var(--merk-zacht); color: var(--merk-donker); }
.knop--icoon.knop--klein { width: 28px; height: 28px; padding: 0; }
.knop--vol { width: 100%; height: 42px; }
.knop:disabled { opacity: .6; cursor: progress; }

input:not([type=checkbox]):not([type=color]):not([type=file]), select, textarea {
  width: 100%; height: 38px; padding: 0 11px;
  border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak);
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 9px 11px; resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--merk); box-shadow: 0 0 0 3px var(--merk-zacht); }
input[type=checkbox] { accent-color: var(--merk-donker); width: 16px; height: 16px; margin: 0; }
select { cursor: pointer; padding-right: 28px; }

.veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.veld__label { font-size: 12px; font-weight: 500; color: var(--zacht); text-transform: uppercase; letter-spacing: .04em; }
.veld__hulp { font-size: 12px; color: var(--zacht); }
.rij-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.schakelaar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; user-select: none; font-size: 13px; }

.segment { display: inline-flex; background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segment__optie { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--zacht); font-weight: 500; }
.segment__optie:hover { color: var(--inkt); }
.segment__optie.actief { background: var(--vlak); color: var(--inkt); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.segment__optie.status--gepland.actief { box-shadow: inset 0 -2px 0 var(--status-gepland), 0 1px 3px rgba(0,0,0,.1); }
.segment__optie.status--bezig.actief { box-shadow: inset 0 -2px 0 var(--status-bezig), 0 1px 3px rgba(0,0,0,.1); }
.segment__optie.status--feedback.actief { box-shadow: inset 0 -2px 0 var(--status-feedback), 0 1px 3px rgba(0,0,0,.1); }
.segment__optie.status--klaar.actief { box-shadow: inset 0 -2px 0 var(--status-klaar), 0 1px 3px rgba(0,0,0,.1); }

.chip { border: 1px solid var(--lijn); background: var(--vlak); border-radius: 99px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--inkt-2); }
.chip:hover { border-color: var(--merk); color: var(--merk-donker); }
.snelkeuze { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 500; background: var(--vlak-2); color: var(--zacht); border: 1px solid var(--lijn); margin-left: 6px; vertical-align: middle; }
.badge--merk { background: var(--merk-zacht); color: var(--merk-donker); border-color: transparent; }
.badge--gevaar { background: var(--gevaar-zacht); color: var(--gevaar); border-color: transparent; }
.teller { font-size: 11px; font-weight: 500; color: var(--zacht); background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 99px; padding: 0 7px; line-height: 18px; }

.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--merk-zacht); color: var(--merk-donker); font: 600 11px/1 var(--kop); flex: none; }
.avatar--klein { width: 22px; height: 22px; font-size: 9.5px; }
.persoon { display: inline-flex; align-items: center; gap: 8px; }

/* ── Inloggen ──────────────────────────────────────────────────────────── */

.scherm-midden { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background:
  radial-gradient(1200px 600px at 10% -10%, var(--merk-zacht), transparent 60%), var(--grond); }
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; padding: 32px; box-shadow: var(--schaduw); }
.kaart--smal { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.laden { min-height: 60vh; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--zacht); }
.laden__stip { width: 10px; height: 10px; border-radius: 50%; background: var(--merk); animation: puls 1s infinite alternate; }
@keyframes puls { to { opacity: .3; transform: scale(.7); } }

.merk { display: inline-flex; align-items: center; gap: 10px; font-family: var(--kop); font-size: 16px; white-space: nowrap; }
.merk__beeld { width: 30px; height: 30px; border-radius: 8px; background: var(--merk); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; }
.merk__naam { font-weight: 500; color: var(--zacht); }
.merk__naam strong { color: var(--inkt); font-weight: 600; }

/* ── Bovenbalk ─────────────────────────────────────────────────────────── */

.balk {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  padding: 10px 24px; background: var(--vlak); border-bottom: 1px solid var(--lijn);
}
.balk__acties { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tab { border: 0; background: transparent; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--zacht); white-space: nowrap; }
.tab:hover { color: var(--inkt); background: var(--vlak-2); }
.tab--actief { color: var(--merk-donker); background: var(--merk-zacht); }
.tab--actief:hover { color: var(--merk-donker); background: var(--merk-zacht); }
.tabs--klein { margin-bottom: 16px; border-bottom: 1px solid var(--lijn); padding-bottom: 8px; }

.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu__knop { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 10px 3px 3px; border-radius: 99px; border: 1px solid var(--lijn); }
.menu__knop:hover { border-color: var(--merk); }
.menu__naam { font-weight: 500; font-size: 13px; }
.menu__lijst { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: var(--schaduw-hoog); padding: 6px; z-index: 40; display: flex; flex-direction: column; }
.menu__lijst button { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.menu__lijst button:hover { background: var(--merk-zacht); }
.menu__info { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--lijn); margin-bottom: 4px; }
.menu__versie { padding: 8px 10px 4px; border-top: 1px solid var(--lijn); margin-top: 4px; }

/* ── Dashboard en filters ──────────────────────────────────────────────── */

.tegel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.tegel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lijn); }
.tegel--merk::before { background: var(--merk); }
.tegel--gevaar::before { background: var(--gevaar); }
.tegel--gevaar:not(.tegel--nul) .tegel__waarde { color: var(--gevaar); }
.tegel--zacht::before { background: var(--status-klaar); }
.tegel__waarde { font: 600 26px/1.1 var(--kop); }
.tegel__label { font-size: 12px; color: var(--zacht); }
.tegel--nul .tegel__waarde { color: var(--zacht); opacity: .6; }

.filterbalk { padding: 14px 24px 0; display: flex; flex-direction: column; gap: 10px; }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters select { width: auto; max-width: 190px; height: 34px; font-size: 13px; }
.filters select.actief { border-color: var(--merk); background: var(--merk-zacht); }
.zoekveld { position: relative; display: flex; align-items: center; width: 220px; }
.zoekveld .icoon { position: absolute; left: 10px; color: var(--zacht); pointer-events: none; }
.zoekveld input { padding-left: 32px !important; height: 34px !important; font-size: 13px; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px; }
.legenda__item { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent; padding: 3px 9px 3px 7px; border-radius: 99px; font-size: 12px; cursor: pointer; color: var(--inkt-2); }
.legenda__item:hover { border-color: var(--lijn); background: var(--vlak); }
.legenda__item.actief { border-color: var(--merk); background: var(--vlak); font-weight: 500; }
.legenda__item.gedimd { opacity: .45; }

.weergave { padding: 14px 24px 24px; }
.hint { font-size: 12px; color: var(--zacht); margin-top: 10px; }
.leeg-staat { background: var(--vlak); border: 1px dashed var(--lijn); border-radius: var(--radius); padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--zacht); }
.leeg-staat h3 { color: var(--inkt); }
.leeg-staat .knop { margin-top: 8px; }
.stappen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 12px; text-align: left; }
.stappen li { background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 12px; font-size: 13px; color: var(--inkt-2); }
.stappen strong { display: block; font-family: var(--kop); color: var(--merk-donker); margin-bottom: 2px; }
@media (max-width: 760px) { .stappen { grid-template-columns: minmax(0, 1fr); } }

.werkbalk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.werkbalk__keuze { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--zacht); white-space: nowrap; }
.werkbalk__keuze select { height: 32px; width: auto; font-size: 13px; color: var(--inkt); }

/* ── Tijdlijn ──────────────────────────────────────────────────────────── */

.tl { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw); }
.tl-scroll { overflow: auto; position: relative; overscroll-behavior: contain; }
.tl-doek { position: relative; min-width: 100%; }

.tl-kop { position: sticky; top: 0; z-index: 6; display: flex; background: var(--vlak); border-bottom: 1px solid var(--lijn); height: 52px; }
.tl-hoek { position: sticky; left: 0; z-index: 7; width: var(--label); flex: none; background: var(--vlak); border-right: 1px solid var(--lijn); display: flex; align-items: flex-end; padding: 0 14px 8px; font-size: 11px; font-weight: 500; color: var(--zacht); text-transform: uppercase; letter-spacing: .05em; }
.tl-as { position: relative; flex: none; }
.tl-as__maanden, .tl-as__dagen { position: relative; height: 26px; }
.tl-as__maand { position: absolute; top: 0; height: 26px; border-left: 1px solid var(--lijn); padding: 6px 8px 0; font: 600 12px/1 var(--kop); white-space: nowrap; overflow: hidden; }
.tl-as__maand span { position: sticky; left: calc(var(--label) + 8px); }
.tl-as__dag { position: absolute; top: 0; height: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--zacht); line-height: 1; border-top: 1px solid var(--lijn-zacht); }
.tl-as__dag small { font-size: 9px; text-transform: uppercase; margin-bottom: 2px; opacity: .8; }
.tl--dag .tl-as__maanden, .tl--dag .tl-as__dagen { height: 26px; }
.tl-as__dag.weekend { color: var(--zacht); opacity: .55; }
.tl-as__dag.maandag { border-left: 1px solid var(--lijn-zacht); }
.tl-as__dag.vandaag { color: #fff; opacity: 1; }
.tl-as__dag.vandaag::before { content: ''; position: absolute; inset: 3px 2px; background: var(--gevaar); border-radius: 5px; z-index: -1; }
.tl--maand .tl-as__dag, .tl--kwartaal .tl-as__dag { border-left: 1px solid var(--lijn-zacht); }

.tl-lichaam { position: relative; }
.tl-laag { position: absolute; top: 0; bottom: 0; left: var(--label); right: 0; pointer-events: none; z-index: 1; }
.tl-maandlijn { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--lijn); }
.tl-vandaag { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gevaar); opacity: .7; }

.tl-rij { display: flex; position: relative; border-bottom: 1px solid var(--lijn-zacht); }
.tl-label {
  position: sticky; left: 0; z-index: 4; width: var(--label); flex: none;
  display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px;
  background: var(--vlak); border: 0; border-right: 1px solid var(--lijn); text-align: left; min-width: 0;
}
button.tl-label { cursor: pointer; }
.tl-label__tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; }
/* Lange titels lopen door op een tweede regel in plaats van af te breken. */
.tl-label__titel { overflow: hidden; white-space: normal; font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.tl-label__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--zacht); }
.label-te-laat { width: 18px; height: 18px; border-radius: 50%; background: var(--gevaar); color: #fff; font: 600 11px/18px var(--kop); text-align: center; flex: none; }

.tl-rij--groep { background: var(--vlak-2); border-bottom-color: var(--lijn); }
.tl-rij--groep .tl-label { background: var(--vlak-2); height: 38px; font-family: var(--kop); font-weight: 600; font-size: 13.5px; }
.tl-rij--groep .tl-label:hover { color: var(--merk-donker); }
.tl-pijl { display: inline-flex; transition: transform .15s; transform: rotate(90deg); color: var(--zacht); }
.tl-pijl.dicht { transform: rotate(0deg); }
.tl-rij--sub .tl-label { height: 30px; padding-left: 36px; font-weight: 500; font-size: 12.5px; color: var(--inkt-2); }
.tl-rij--item .tl-label { min-height: 40px; padding: 5px 12px 5px 36px; }
.tl-rij--item .tl-label:hover .tl-label__titel { color: var(--merk-donker); }
.tl-rij--baan .tl-label { height: 36px; padding-left: 36px; font-weight: 500; font-size: 13px; }
.tl-rij--baan .tl-label .tl-label__tekst { flex-direction: row; }
.tl-rij--baan .tl-label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }

.tl-baan {
  position: relative; flex: none;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--dw) * 5), var(--weekend) calc(var(--dw) * 5), var(--weekend) calc(var(--dw) * 7)),
    linear-gradient(90deg, var(--rasterlijn) 1px, transparent 1px);
  background-size: auto, var(--dw) 100%;
}
.tl--maand .tl-baan, .tl--kwartaal .tl-baan { background-size: auto, calc(var(--dw) * 7) 100%; }
.tl-baan--tekenbaar { cursor: crosshair; }
.tl-rij--item .tl-baan, .tl-rij--baan .tl-baan { cursor: default; }
.tl-rij--baan .tl-baan.tl-baan--tekenbaar { cursor: crosshair; }

.tl-samenvatting { position: absolute; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: rgba(4, 153, 152, .28); border: 1px solid rgba(4, 153, 152, .6); }
.tl-blok { position: absolute; top: 50%; height: 18px; margin-top: -9px; z-index: 2; border: 0; padding: 0; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px var(--vlak-2); }
.tl-blok:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px var(--vlak-2), 0 2px 6px rgba(0,0,0,.2); z-index: 3; }
.tl-blok.status--klaar { opacity: .5; }
.tl-rij--sub .tl-samenvatting { height: 6px; margin-top: -3px; background: var(--lijn); border-color: transparent; }

.tl-balk {
  position: absolute; top: 50%; height: 26px; margin-top: -13px; z-index: 2;
  background: var(--kleur); color: var(--balkinkt);
  border-radius: 6px; display: flex; align-items: center; cursor: grab;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); touch-action: none; user-select: none;
  transition: box-shadow .15s, transform .15s;
}
.tl-balk__tekst { flex: 1; min-width: 0; padding: 0 9px; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; pointer-events: none; }
/* Past de titel niet in de balk, dan staat hij ernaast (in gewone tekstkleur). */
.tl-balk--titel-ernaast .tl-balk__tekst { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); padding: 0; overflow: visible; color: var(--inkt); }
.tl-balk:hover { box-shadow: 0 3px 10px rgba(0,0,0,.2); z-index: 3; }
.tl-balk.sleept { cursor: grabbing; box-shadow: 0 8px 24px rgba(0,0,0,.28); z-index: 5; transform: scale(1.02); transition: none; }
.tl-balk__greep { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 1; }
.tl-balk__greep--links { left: -2px; }
.tl-balk__greep--rechts { right: -2px; }
.tl-balk__greep::after { content: ''; position: absolute; top: 7px; bottom: 7px; width: 2px; left: 4px; border-radius: 2px; background: currentColor; opacity: 0; transition: opacity .15s; }
.tl-balk:hover .tl-balk__greep::after { opacity: .45; }
.tl-balk.status--klaar { opacity: .5; }
.tl-balk.status--feedback { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.22) 6px 12px); }
.tl-balk.te-laat { outline: 2px solid var(--gevaar); outline-offset: 1px; }
.tl-balk--mijlpaal { width: 14px; height: 14px; margin-top: -7px; margin-left: -7px; border-radius: 2px; transform: rotate(45deg); }
.tl-balk--mijlpaal.sleept { transform: rotate(45deg) scale(1.2); }
.tl-spook { position: absolute; top: 6px; bottom: 6px; background: var(--merk-zacht); border: 2px dashed var(--merk); border-radius: 6px; z-index: 2; pointer-events: none; }
.tl-sleeplabel { position: fixed; z-index: 100; transform: translateX(-50%); background: var(--inkt); color: var(--vlak); padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .1s; }
.tl-sleeplabel.zichtbaar { opacity: 1; }

/* ── Kanban ────────────────────────────────────────────────────────────── */

.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.kanban__kolom { background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 12px; padding: 10px; min-height: 240px; transition: background .15s, border-color .15s; }
.kanban__kolom.doel { border-color: var(--merk); background: var(--merk-zacht); }
.kanban__kop { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; }
.kanban__kop h3 { font-size: 14px; }
.kanban__kop .knop { margin-left: auto; }
.kanban__stip { width: 10px; height: 10px; border-radius: 3px; }
.status--gepland .kanban__stip { background: var(--status-gepland); }
.status--bezig .kanban__stip { background: var(--status-bezig); }
.status--feedback .kanban__stip { background: var(--status-feedback); }
.status--klaar .kanban__stip { background: var(--status-klaar); }
.kanban__kaarten { display: flex; flex-direction: column; gap: 8px; }
.kanban__leeg { text-align: center; color: var(--zacht); font-size: 12px; padding: 28px 8px; border: 1px dashed var(--lijn); border-radius: 8px; }

.kaartje { background: var(--vlak); border: 1px solid var(--lijn); border-left: 4px solid var(--kleur); border-radius: 9px; padding: 10px 12px; cursor: grab; display: flex; flex-direction: column; gap: 5px; transition: box-shadow .15s, transform .15s; }
.kaartje:hover { box-shadow: var(--schaduw); transform: translateY(-1px); }
.kaartje.sleept { opacity: .4; }
.kaartje.te-laat { box-shadow: inset 0 0 0 1px var(--gevaar); }
.kaartje__dienst { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--zacht); font-weight: 500; }
.kaartje__dienst .stip { width: 8px; height: 8px; }
.kaartje__titel { font-family: var(--tekst); font-weight: 500; font-size: 14px; }
.kaartje__project { font-size: 12px; color: var(--zacht); }
.kaartje__voet { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.kaartje__voet .badge { margin: 0; }
.kaartje__datum { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--zacht); }
.kaartje__datum.loopt { color: var(--merk-donker); font-weight: 500; }

/* ── Lijst ─────────────────────────────────────────────────────────────── */

.lijst-houder { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--schaduw); }
.lijst { width: 100%; border-collapse: collapse; font-size: 13px; }
.lijst th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); padding: 10px 14px; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.lijst td { padding: 9px 14px; border-bottom: 1px solid var(--lijn-zacht); vertical-align: middle; }
.lijst .kol-getal { text-align: right; font-variant-numeric: tabular-nums; }
.lijst__totaal td { border-bottom: 0; border-top: 1px solid var(--lijn); padding-top: 12px; }
.lijst__maand th { background: var(--vlak-2); font-family: var(--kop); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--inkt); font-weight: 600; padding-top: 14px; }
.lijst__rij { cursor: pointer; }
.lijst__rij:hover td { background: var(--merk-zacht); }
.lijst__rij.loopt td:first-child { box-shadow: inset 3px 0 0 var(--merk); }
.lijst__rij.klaar td { opacity: .55; }
.lijst__periode { white-space: nowrap; font-weight: 500; }
.pil { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 7px; border-radius: 99px; background: color-mix(in srgb, var(--kleur) 14%, transparent); font-size: 12px; white-space: nowrap; }
.statuskeuze { height: 30px !important; width: auto !important; font-size: 12px; padding: 0 26px 0 8px !important; border-left-width: 3px !important; }
.statuskeuze.status--gepland { border-left-color: var(--status-gepland) !important; }
.statuskeuze.status--bezig { border-left-color: var(--status-bezig) !important; }
.statuskeuze.status--feedback { border-left-color: var(--status-feedback) !important; }
.statuskeuze.status--klaar { border-left-color: var(--status-klaar) !important; }
.lijst--team td { padding: 10px 14px; }

/* ── Diensten ──────────────────────────────────────────────────────────── */

.sectie { margin-bottom: 32px; }
.sectie__kop { display: flex; align-items: flex-end; gap: 16px; justify-content: space-between; margin-bottom: 14px; }
.sectie__kop p { max-width: 640px; margin-top: 4px; }
.diensten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.dienst { display: flex; gap: 12px; align-items: flex-start; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 12px; }
.dienst__staal { width: 44px; height: 44px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.dienst__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dienst__gebruik { color: var(--merk-donker); margin-top: 4px; }
.dienst__acties { display: flex; }
.leeg-regel { background: var(--vlak); border: 1px dashed var(--lijn); border-radius: var(--radius); padding: 20px; text-align: center; }

.palet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.palet__kleur { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.palet__kleur.actief { box-shadow: 0 0 0 2px var(--vlak), 0 0 0 4px var(--inkt); }
.palet__kleur.bezet { opacity: .4; }
.palet input[type=color] { width: 30px; height: 30px; border: 1px dashed var(--zacht); border-radius: 8px; padding: 0; background: none; cursor: pointer; }
.dienst-voorbeeld { padding: 14px; border-radius: 8px; background: var(--vlak-2); border: 1px solid var(--lijn); }
.voorbeeld-balk { display: inline-block; padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; min-width: 160px; }

/* ── Formulier ─────────────────────────────────────────────────────────── */

.formulier { display: flex; flex-direction: column; gap: 14px; }
.dienstkeuze { display: flex; flex-wrap: wrap; gap: 6px; }
.dienstkeuze__optie { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 99px; border: 1px solid var(--lijn); background: var(--vlak); cursor: pointer; font-size: 12.5px; }
.dienstkeuze__optie:not(.actief):hover { background: var(--vlak-2); }
.dienstkeuze__optie .stip { width: 9px; height: 9px; }
.dienstkeuze__optie.actief { font-weight: 500; }
.duurregel { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -4px; }
.duur { font-size: 12.5px; color: var(--merk-donker); font-weight: 500; }

/* ── Dialogen en meldingen ─────────────────────────────────────────────── */

.dialoog { border: 0; padding: 0; border-radius: 16px; background: var(--vlak); color: var(--inkt); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-shadow: var(--schaduw-hoog); }
.dialoog[open] { display: flex; flex-direction: column; animation: binnen .18s ease-out; }
.dialoog--breed { width: min(1180px, calc(100vw - 32px)); }
.dialoog::backdrop { background: rgba(15, 22, 24, .45); backdrop-filter: blur(2px); }
@keyframes binnen { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dialoog__kop { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px 24px; }
.dialoog__inhoud { padding: 4px 24px 20px; overflow-y: auto; flex: 1; }
.dialoog__voet { display: flex; align-items: center; gap: 8px; padding: 14px 20px 18px 24px; border-top: 1px solid var(--lijn); flex-wrap: wrap; }

#meldingen { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.melding { background: var(--inkt); color: var(--vlak); padding: 10px 18px; border-radius: 10px; box-shadow: var(--schaduw-hoog); font-size: 13px; max-width: min(520px, calc(100vw - 32px)); transition: opacity .3s, transform .3s; animation: binnen .2s ease-out; }
.melding--fout { background: var(--gevaar); color: #fff; }
.melding--goed { background: var(--merk-donker); color: #fff; }
.melding.weg { opacity: 0; transform: translateY(6px); }

/* ── Exportvenster ─────────────────────────────────────────────────────── */

.export { display: grid; grid-template-columns: 320px 1fr; gap: 24px; min-height: 0; }
.export__rechts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.export__voorbeeld { background: var(--grond); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; max-height: 66vh; overflow: auto; }
.blad-houder { position: relative; flex: none; box-shadow: 0 2px 12px rgba(0,0,0,.15); background: #fff; overflow: hidden; }
.blad-houder .blad { transform-origin: top left; position: absolute; top: 0; left: 0; }
.export__bestanden { max-width: 680px; }
.bestandsoptie { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--lijn); border-radius: var(--radius); }
.bestandsoptie h3 { margin-bottom: 2px; }
.bestandsoptie--gevaar { border-color: color-mix(in srgb, var(--gevaar) 35%, var(--lijn)); }
.bestandsoptie .knop { cursor: pointer; }

/* ── Paginakop en navigatie ────────────────────────────────────────────── */

a.tab { text-decoration: none; display: inline-flex; align-items: center; }
.merk-link { text-decoration: none; color: inherit; border-radius: 8px; }
.paginakop { padding: 20px 24px 0; display: flex; flex-direction: column; gap: 12px; }
.paginakop:empty { display: none; }
.kruimels { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--zacht); }
.kruimels a { display: inline-flex; align-items: center; gap: 4px; color: var(--merk-donker); text-decoration: none; font-weight: 500; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: 6px; }
.kruimels a:hover { background: var(--merk-zacht); }
.kruimels [aria-current] { color: var(--inkt-2); }
.paginakop__rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.paginakop__titel { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.paginakop__titel h1 { font-size: 26px; overflow-wrap: anywhere; }
.paginakop__titel p { font-size: 13px; }
.paginakop__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paginakop__weergave { align-self: flex-start; }
.paginakop__weergave .segment__optie { padding: 6px 16px; }
.klantwissel { width: auto !important; max-width: 200px; height: 36px !important; font-size: 13px; color: var(--zacht); }
.gedeeld { display: inline-flex; align-items: center; gap: 4px; color: var(--merk-donker); font-weight: 500; }
.badge--goed { background: color-mix(in srgb, var(--goed) 14%, transparent); color: color-mix(in srgb, var(--goed) 75%, var(--inkt)); border-color: transparent; }
.lijst--team .badge { margin: 0; white-space: nowrap; }
.accountfeiten { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 12px 14px; background: var(--vlak-2); border-radius: 12px; }
.accountfeiten dt { font-size: 12px; color: var(--zacht); }
.accountfeiten dd { margin: 2px 0 0; }
.badge--wacht { background: color-mix(in srgb, var(--status-feedback) 18%, transparent); color: color-mix(in srgb, var(--status-feedback) 70%, var(--inkt)); border-color: transparent; }

/* ── Klantenoverzicht ──────────────────────────────────────────────────── */

.klanten__zoek { margin-bottom: 18px; max-width: 360px; }
.klanten__zoek .zoekveld { width: 100%; }
.klanten__zoek input { height: 38px !important; }
.klantgroep { margin-bottom: 28px; }
.klantgroep > h2, .klantgroep summary h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); font-weight: 500; margin-bottom: 12px; }
.klantgroep summary { cursor: pointer; list-style: none; }
.klantgroep summary::-webkit-details-marker { display: none; }
.klantgroep summary h2::before { content: '▸ '; }
.klantgroep[open] summary h2::before { content: '▾ '; }
.klantraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.klantkaart { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.klantkaart:hover { border-color: var(--merk); box-shadow: var(--schaduw); transform: translateY(-1px); }
.klantkaart--te-laat { border-left: 3px solid var(--gevaar); }
.klantkaart__kop { display: flex; align-items: center; gap: 12px; }
.klantkaart__letter { width: 40px; height: 40px; border-radius: 10px; background: var(--merk-zacht); color: var(--merk-donker); display: grid; place-items: center; font: 600 17px/1 var(--kop); flex: none; }
.klantkaart__naam { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.klantkaart__naam h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klantkaart__naam span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klantkaart__gedeeld { color: var(--merk-donker); background: var(--merk-zacht); border-radius: 99px; width: 28px; height: 28px; display: grid; place-items: center; flex: none; }
.klantkaart__voortgang { display: flex; flex-direction: column; gap: 6px; }
.klantkaart__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.klantkaart__chips .badge { margin: 0; }
.klantkaart__voet { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--lijn-zacht); padding-top: 10px; margin-top: auto; }
.klantkaart__pijl { color: var(--merk-donker); display: inline-flex; transition: transform .15s; }
.klantkaart:hover .klantkaart__pijl { transform: translateX(3px); }

/* ── Delen en updates ──────────────────────────────────────────────────── */

.dialoog--delen { width: min(680px, calc(100vw - 32px)); }
.dialoog--delen .dialoog__inhoud > * + * { margin-top: 16px; }
.deel-nieuw { display: flex; align-items: flex-end; gap: 12px; padding: 14px; background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: var(--radius); }
.deel-nieuw .rij-2 { flex: 1; }
.deel-kop { margin-top: 24px !important; }
.deellinks { display: flex; flex-direction: column; gap: 12px; }
.deellink { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.deellink.nieuw { border-color: var(--merk); box-shadow: 0 0 0 3px var(--merk-zacht); }
.deellink__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.deellink__kop .badge { margin: 0; white-space: nowrap; }
.deellink__url { display: flex; gap: 8px; }
.deellink__url input { font-size: 12.5px; color: var(--zacht); }
.deellink__voet { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.deellink__updates summary { cursor: pointer; font-size: 13px; color: var(--merk-donker); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.deellink__updates summary::-webkit-details-marker { display: none; }
.deellink__updates[open] summary { margin-bottom: 10px; }

.voortgang { display: flex; flex-direction: column; gap: 10px; }
.voortgang__nieuw { display: flex; gap: 8px; align-items: flex-end; }
.voortgang__nieuw textarea { min-height: 44px; }
.voortgang__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.voortgang__lijst li { background: var(--vlak-2); border: 1px solid var(--lijn-zacht); border-left: 3px solid var(--merk); border-radius: 8px; padding: 8px 10px; }
.voortgang__lijst li p { white-space: pre-wrap; font-size: 13px; }
.voortgang__lijst li.voortgang__leeg { border-left-color: var(--lijn); font-size: 12px; }
.voortgang__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.voortgang__meta .knop { margin-left: auto; }

/* ── Klantpagina ───────────────────────────────────────────────────────── */

.klant-balk { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px; background: var(--vlak); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 10; }
.klant { max-width: 1120px; margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-direction: column; gap: 24px; }
.klant-held h1 { font-size: 32px; }
.klant-held__klant { font: 500 13px/1 var(--kop); color: var(--merk-donker); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.klant-held .zacht { margin-top: 6px; }
.klant-overzicht { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 12px; }
.klant-voortgang, .klant-feit { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.klant-voortgang__cijfer { display: flex; align-items: baseline; gap: 8px; }
.klant-voortgang__cijfer strong { font: 600 30px/1 var(--kop); color: var(--merk-donker); }
.klant-voortgang__balk { height: 8px; border-radius: 99px; background: var(--merk-zacht); overflow: hidden; }
.klant-voortgang__balk span { display: block; height: 100%; background: var(--merk); border-radius: 99px; }
.klant-feit__label { font-size: 12px; color: var(--zacht); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.klant-feit__waarde { font: 600 15px/1.35 var(--kop); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.klant-actie { background: color-mix(in srgb, var(--status-feedback) 12%, var(--vlak)); border: 1px solid color-mix(in srgb, var(--status-feedback) 45%, var(--lijn)); border-radius: var(--radius); padding: 18px 20px; }
.klant-actie h2 { font-size: 16px; margin-bottom: 4px; }
.klant-actie ul { margin: 10px 0 0; padding-left: 18px; }
.klant-actie li { margin: 2px 0; }
.klant-sectie { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 20px; }
.klant-sectie__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.legenda--statisch .legenda__item { cursor: default; padding-left: 0; }
.legenda--statisch .legenda__item:hover { border-color: transparent; background: transparent; }

.klant-tijdlijn { position: relative; }
.kt-as { position: relative; height: 24px; border-bottom: 1px solid var(--lijn); }
.kt-maand { position: absolute; top: 0; height: 24px; border-left: 1px solid var(--lijn); padding-left: 6px; font: 600 12px/24px var(--kop); white-space: nowrap; overflow: hidden; }
.kt-lichaam { position: relative; padding: 6px 0; }
.kt-vandaag { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gevaar); z-index: 2; opacity: .75; }
.kt-vandaag span { position: absolute; top: -2px; left: 4px; font-size: 10px; color: var(--gevaar); font-weight: 500; white-space: nowrap; }
.kt-project { font: 600 13px/1 var(--kop); padding: 12px 0 6px; color: var(--inkt-2); }
.kt-rij { display: flex; align-items: center; height: 34px; }
.kt-label { flex: none; display: flex; align-items: center; gap: 8px; padding-right: 12px; font-size: 13px; overflow: hidden; }
.kt-label span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-baan { position: relative; flex: 1; height: 100%; }
.kt-balk { position: absolute; top: 5px; bottom: 5px; border-radius: 6px; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 4px; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.kt-balk span { overflow: hidden; text-overflow: ellipsis; }
.kt-rij.status--klaar .kt-balk { opacity: .5; }
.kt-rij.status--feedback .kt-balk { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.25) 6px 12px); }

.klant-agenda__maand { font-size: 14px; margin: 18px 0 8px; text-transform: capitalize; }
.klant-agenda__maand:first-child { margin-top: 0; }
.klant-agenda__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.klant-onderdeel { display: grid; grid-template-columns: 140px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--lijn-zacht); border-left: 4px solid var(--kleur); border-radius: 8px; }
.klant-onderdeel.loopt { background: var(--merk-zacht); }
.klant-onderdeel.status--klaar { opacity: .6; }
.klant-onderdeel__datum, .klant-onderdeel__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.klant-onderdeel__wat .stip { width: 8px; height: 8px; }
.klant-status { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 99px; white-space: nowrap; background: var(--vlak-2); color: var(--zacht); }
.klant-status--bezig { background: color-mix(in srgb, var(--status-bezig) 14%, transparent); color: var(--status-bezig); }
.klant-onderdeel.loopt .klant-status--gepland { background: color-mix(in srgb, var(--status-bezig) 14%, transparent); color: var(--status-bezig); }
.klant-status--feedback { background: color-mix(in srgb, var(--status-feedback) 18%, transparent); color: color-mix(in srgb, var(--status-feedback) 75%, var(--inkt)); }
.klant-status--klaar { background: color-mix(in srgb, var(--status-klaar) 14%, transparent); color: var(--status-klaar); }

.klant-updates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.klant-updates li { border-left: 3px solid var(--merk); padding: 2px 0 2px 14px; }
.klant-updates__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.klant-updates__meta .badge { margin: 0; }
.klant-updates p { white-space: pre-wrap; }
.klant-voet { text-align: center; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }

/* ── Filters inklappen op mobiel ───────────────────────────────────────── */


/* ── Vormgeving: rustig, wit en rond (Airbnb-achtig) ───────────────────── */

.balk { padding: 14px 32px; gap: 28px; box-shadow: none; }
.balk .tabs { gap: 4px; margin: 0 auto; }
.tab { border-radius: 99px; padding: 9px 16px; color: var(--zacht); font-weight: 500; }
.tab:hover { background: var(--vlak-2); color: var(--inkt); }
.tab--actief, .tab--actief:hover { background: var(--vlak-2); color: var(--inkt); box-shadow: inset 0 0 0 1px var(--lijn); }
.menu__knop { padding: 4px 12px 4px 4px; border-color: var(--rand-veld); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.menu__knop:hover { box-shadow: var(--schaduw-zweef); border-color: var(--rand-veld); }

.knop { height: 40px; padding: 0 16px; border-radius: 10px; border-color: var(--rand-veld); font-weight: 500; }
.knop:hover { border-color: var(--inkt); color: var(--inkt); background: var(--vlak-2); }
.knop--primair, .knop--primair:hover { border-color: transparent; color: #fff; }
.knop--primair { background: linear-gradient(180deg, var(--merk), var(--merk-donker)); }
.knop--primair:hover { background: var(--merk-donker); }
.knop--tekst, .knop--tekst:hover, .knop--icoon, .knop--icoon:hover, .knop--gevaar-tekst, .knop--gevaar-tekst:hover { border-color: transparent; }
.knop--tekst { color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; }
.knop--tekst:hover { background: var(--vlak-2); color: var(--inkt); }
.knop--icoon { border-radius: 99px; }
.knop--klein { height: 32px; }
.knop--groot { height: 48px; padding: 0 24px; font-size: 15px; }
.knop--actief { border-color: var(--inkt); background: var(--vlak-2); color: var(--inkt); }

input:not([type=checkbox]):not([type=color]):not([type=file]), select, textarea {
  height: 44px; border-radius: 10px; border-color: var(--rand-veld); padding: 0 14px;
}
textarea { padding: 10px 14px; }
input:focus, select:focus, textarea:focus { border-color: var(--inkt); box-shadow: 0 0 0 1px var(--inkt); }
.veld { gap: 6px; }
.veld__label { font-size: 13px; font-weight: 500; color: var(--inkt-2); text-transform: none; letter-spacing: 0; }
.veld__hulp { font-size: 12.5px; }
.rij-2 { gap: 14px; }

.segment { border-radius: 99px; padding: 4px; background: var(--vlak-2); border-color: var(--lijn); }
.segment__optie { border-radius: 99px; padding: 6px 14px; }
.segment__optie.actief { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.chip, .badge, .teller { border-radius: 99px; }

/* Paginakop */
.paginakop { padding: 28px 32px 0; gap: 16px; }
.paginakop__titel h1 { font-size: 30px; letter-spacing: -0.01em; }
.paginakop__titel p { font-size: 14px; }
.kruimels a { color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; }
.kruimels a:hover { background: var(--vlak-2); }
.klantwissel { border-radius: 99px !important; }
.gedeeld { color: var(--merk-donker); }

/* Overzicht en filters */
.tegel { border-radius: var(--radius); padding: 16px 18px; border-color: var(--lijn); }
.tegel::before { display: none; }
.tegel__waarde { font-size: 28px; }
.tegel__label { font-size: 13px; }
.tegel--merk .tegel__waarde { color: var(--merk-donker); }
.tegel--zacht .tegel__waarde { color: var(--status-klaar); }
.filterbalk { padding: 18px 32px 0; }
.filters select { height: 38px !important; border-radius: 99px !important; padding: 0 30px 0 14px !important; }
.filters select.actief { border-color: var(--inkt); background: var(--vlak-2); }
.zoekveld input { height: 38px !important; border-radius: 99px !important; }
.weergave { padding: 18px 32px 40px; }
.werkbalk select { border-radius: 99px !important; height: 34px !important; }

/* Tijdlijn, kanban, lijst: zachte randen in plaats van harde kaders */
.tl, .lijst-houder { border-radius: var(--radius); box-shadow: none; border-color: var(--lijn); }
.tl-rij--groep, .tl-rij--groep .tl-label { background: var(--vlak-2); }
.kanban__kolom { background: var(--vlak-2); border-color: transparent; border-radius: 18px; }
.kaartje { border-radius: 12px; border-color: var(--lijn); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.kaartje:hover { box-shadow: var(--schaduw-zweef); }
.lijst__maand th { background: var(--vlak); font-size: 15px; padding-top: 22px; border-bottom-color: var(--lijn); }
.lijst__rij:hover td { background: var(--vlak-2); }

/* Dialogen: gecentreerde titel, sluitknop links */
.dialoog { border-radius: 22px; }
.dialoog__kop { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--lijn); }
.dialoog__kop h2 { grid-column: 2; grid-row: 1; text-align: center; font-size: 16px; }
.dialoog__kop .knop { grid-column: 1; grid-row: 1; }
.dialoog__inhoud { padding: 22px 24px; }
.dialoog__voet { padding: 14px 24px; }
.dialoog::backdrop { background: rgba(0, 0, 0, .5); backdrop-filter: none; }

/* Itemformulier */
.formulier { gap: 18px; }
.keuze-kleur { position: relative; }
.keuze-kleur__stip { position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; pointer-events: none; }
.keuze-kleur select { padding-left: 36px !important; }
.duur { font-size: 13px; color: var(--zacht); margin-top: -8px; }
.meer { border-top: 1px solid var(--lijn); padding-top: 14px; }
.meer summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.meer summary::-webkit-details-marker { display: none; }
.meer summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 4px 4px 0; transition: transform .15s; }
.meer[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.meer__inhoud { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }

/* Delen */
.deel-leeg { text-align: center; padding: 28px 16px; background: var(--vlak-2); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.deellink { border-radius: var(--radius); padding: 18px; }

/* Klantkaarten */
.klantraster { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 28px 22px; }
.klantkaart, .klantkaart:hover { border: 0; padding: 0; background: transparent; box-shadow: none; transform: none; gap: 12px; }
.klantkaart__beeld { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--vlak-2); overflow: hidden; transition: box-shadow .2s; }
.klantkaart:hover .klantkaart__beeld { box-shadow: var(--schaduw-zweef); }
.klantkaart__veld { position: absolute; inset: 18px 16px; }
.klantkaart__balk { position: absolute; border-radius: 99px; opacity: .92; }
.klantkaart__balk.klaar { opacity: .35; }
.klantkaart__vandaag { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--gevaar); border-radius: 2px; }
.klantkaart__beeld--leeg { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--vlak-2) 0 12px, var(--lijn-zacht) 12px 24px); }
.klantkaart__plus { width: 44px; height: 44px; border-radius: 50%; background: var(--vlak); display: grid; place-items: center; color: var(--zacht); box-shadow: var(--schaduw); }
.klantkaart__gedeeld { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; width: auto; height: auto; padding: 4px 10px; border-radius: 99px; background: var(--vlak); color: var(--inkt); font-size: 12px; font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.klantkaart__tekst { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.klantkaart__regel { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.klantkaart__regel h3 { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klantkaart__procent { font-weight: 500; font-size: 14px; white-space: nowrap; }
.klantkaart__tekst .zacht { font-size: 14px; }
.klantkaart__volgende { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klantkaart__status { margin-top: 6px; }
.klantkaart__status .badge { margin: 0; }
.klantgroep > h2, .klantgroep summary h2 { font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--inkt); font-weight: 600; margin-bottom: 16px; }
.klantgroep { margin-bottom: 40px; }
.klanten__zoek .zoekveld input { height: 48px !important; border-radius: 99px !important; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05); border-color: var(--lijn) !important; }
.klanten__zoek { margin-bottom: 28px; max-width: 420px; }

/* Klantpagina die de klant ziet */
.klant-sectie, .klant-voortgang, .klant-feit { border-radius: var(--radius); border-color: var(--lijn); }
.klant-held h1 { font-size: 36px; letter-spacing: -0.01em; }

/* ── Bovenkant planning: zoekbalk, snelkeuzes, filters (Airbnb-achtig) ──── */

.filterbalk { padding: 22px 32px 0; display: flex; flex-direction: column; gap: 12px; }
.zoekbalk { display: flex; align-items: center; gap: 12px; }
.zoekpil { flex: 1; max-width: 560px; margin: 0 auto; position: relative; display: flex; align-items: center; }
.zoekpil .icoon { position: absolute; left: 18px; color: var(--inkt); pointer-events: none; }
.zoekpil input { height: 48px !important; border-radius: 99px !important; padding-left: 46px !important; border-color: var(--lijn) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05); font-size: 14.5px; }
.zoekpil input:focus { box-shadow: 0 0 0 2px var(--inkt) !important; }
.filterknop { height: 48px; border-radius: 12px; gap: 8px; padding: 0 18px; position: relative; }
.filterknop__aantal { min-width: 20px; height: 20px; border-radius: 99px; background: var(--inkt); color: #fff; font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; padding: 0 6px; }
.zoekbalk .segment { flex: none; }

.dashboard { padding: 4px 32px 0; }
.snelkeuzes { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--lijn); }
.snelkeuzes::-webkit-scrollbar { display: none; }
.urenregel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 0 2px; font-size: 13px; color: var(--zacht); }
.urenregel__totaal { display: inline-flex; align-items: center; gap: 6px; color: var(--inkt); }
.urenregel__persoon { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.snelkeuze { display: flex; align-items: baseline; gap: 6px; border: 0; background: none; padding: 12px 0 14px; cursor: pointer; color: var(--zacht); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.snelkeuze:hover:not(:disabled) { color: var(--inkt); border-bottom-color: var(--rand-veld); }
.snelkeuze.actief { color: var(--inkt); border-bottom-color: var(--inkt); }
.snelkeuze:disabled { opacity: .4; cursor: default; }
.snelkeuze__aantal { font: 600 16px/1 var(--kop); color: var(--inkt); }
.snelkeuze.gevaar .snelkeuze__aantal, .snelkeuze.gevaar { color: var(--gevaar); }
.snelkeuze.gevaar.actief { border-bottom-color: var(--gevaar); }

.actieve-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filterchip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 14px; border-radius: 99px; border: 1px solid var(--inkt); background: var(--vlak); font-size: 13px; font-weight: 500; cursor: pointer; }
.filterchip:hover { background: var(--vlak-2); }

.dialoog--filters { width: min(620px, calc(100vw - 32px)); }
.filtervenster { display: flex; flex-direction: column; }
.filtervenster section { padding: 22px 0; border-bottom: 1px solid var(--lijn); }
.filtervenster section:first-child { padding-top: 4px; }
.filtervenster section:last-child { border-bottom: 0; padding-bottom: 4px; }
.filtervenster h3 { font-size: 18px; margin-bottom: 14px; }
.keuzechips { display: flex; flex-wrap: wrap; gap: 8px; }
.keuzechip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--rand-veld); background: var(--vlak); cursor: pointer; font-size: 14px; }
.keuzechip:hover { border-color: var(--inkt); }
.keuzechip.actief { border-color: var(--inkt); background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--inkt); font-weight: 500; }
.filterschakel { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; cursor: pointer; }
.filterschakel > span { display: flex; flex-direction: column; }
.filterschakel strong { font-weight: 500; }
.filterschakel input[type=checkbox] { width: 22px; height: 22px; }

.tl-voet { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.tl-tip { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* ── Keuzelijsten en datumvelden: eigen pijltje, overal dezelfde ruimte ─── */

select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
  padding-right: 40px !important;
}
.statuskeuze { background-position: right 10px center; padding-right: 30px !important; }
input[type=date] { padding-right: 12px !important; }
input[type=date]::-webkit-calendar-picker-indicator { margin: 0; padding: 4px; border-radius: 6px; cursor: pointer; opacity: .75; }
input[type=date]::-webkit-calendar-picker-indicator:hover { background: var(--vlak-2); opacity: 1; }
input[type=checkbox] { flex: none; }
.schakelaar { gap: 10px; }

/* ── Personen: profielfoto's en stapels ────────────────────────────────── */

.avatar { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; flex: none; font-family: var(--kop); font-weight: 600; line-height: 1; background: var(--vlak-2); color: var(--zacht); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--xs { width: 22px; height: 22px; font-size: 9px; }
.avatar--s { width: 28px; height: 28px; font-size: 10.5px; }
.avatar--m { width: 34px; height: 34px; font-size: 12px; }
.avatar--l { width: 56px; height: 56px; font-size: 19px; }
.avatar--xl { width: 112px; height: 112px; font-size: 36px; }
.avatar--meer { background: var(--vlak-2) !important; color: var(--inkt-2) !important; font-family: var(--tekst); font-weight: 500; }
.avatarstapel { display: inline-flex; align-items: center; }
.avatarstapel .avatar { box-shadow: 0 0 0 2px var(--vlak); }
.avatarstapel .avatar + .avatar { margin-left: -7px; }
.avatarknop { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.avatarknop:hover .avatar { box-shadow: 0 0 0 2px var(--inkt); }
.persoon { gap: 10px; }

.personenkeuze { display: flex; flex-wrap: wrap; gap: 8px; }
.persoonchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 99px; border: 1px solid var(--rand-veld); background: var(--vlak); cursor: pointer; font-size: 14px; }
.persoonchip:hover { border-color: var(--inkt); }
.persoonchip.actief { border-color: var(--inkt); box-shadow: inset 0 0 0 1px var(--inkt); background: var(--vlak-2); font-weight: 500; }
.keuzechip .avatar { margin-left: -8px; }

.fotokeuze { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 0; }
.fotokeuze__knoppen { display: flex; gap: 8px; align-items: center; }
.fotokeuze__knoppen .knop { cursor: pointer; }

.tl-balk__mensen { display: inline-flex; padding-right: 6px; pointer-events: none; }
.tl-label--item .avatarstapel { margin-left: auto; }
.klantkaart__status { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ── Updates voor de klant: berichtenvak ───────────────────────────────── */

.voortgang { gap: 14px; }
.voortgang__vak { border: 1px solid var(--rand-veld); border-radius: 14px; background: var(--vlak); transition: border-color .15s, box-shadow .15s; }
.voortgang__vak:focus-within { border-color: var(--inkt); box-shadow: 0 0 0 1px var(--inkt); }
.voortgang__vak textarea { border: 0 !important; box-shadow: none !important; border-radius: 14px 14px 0 0 !important; min-height: 76px; resize: none; padding: 14px 16px 6px !important; }
.voortgang__balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-top: 1px solid var(--lijn-zacht); }
.voortgang__zicht { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--zacht); }
.voortgang__zicht.waarschuwing { color: color-mix(in srgb, var(--status-feedback) 70%, var(--inkt)); }
.voortgang__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.voortgang__lijst .voortgang__bericht { display: flex; gap: 12px; align-items: flex-start; background: none; border: 0; border-radius: 0; padding: 0; }
.voortgang__tekst { flex: 1; min-width: 0; }
.voortgang__tekst p { white-space: pre-wrap; font-size: 14px; margin-top: 2px; }
.voortgang__meta { display: flex; align-items: baseline; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.voortgang__bericht > .knop { opacity: 0; transition: opacity .15s; }
.voortgang__bericht:hover > .knop, .voortgang__bericht > .knop:focus-visible { opacity: 1; }
.deellink__updates { border-top: 1px solid var(--lijn); padding-top: 16px; }
.deellink__updates h3 { font-size: 15px; margin-bottom: 12px; }

/* ── Mijn werk ─────────────────────────────────────────────────────────── */

.mijn { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.mijn__kop { display: flex; align-items: center; gap: 16px; }
.mijn__kop h1 { font-size: 30px; letter-spacing: -0.01em; }
.mijn__raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.mijn__groep { margin-bottom: 28px; }
.mijn__groep h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 10px; }
.mijn__groep--gevaar h2 { color: var(--gevaar); }
.mijn__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mijnregel { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--lijn); }
.mijnregel:last-child { border-bottom: 0; }
.mijnregel__inhoud { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }
button.mijnregel__inhoud:hover .mijnregel__titel { text-decoration: underline; text-underline-offset: 3px; }
.mijnregel__titel { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mijnregel__sub { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zacht); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mijnregel__sub .stip { width: 8px; height: 8px; }
.mijnregel__rechts { display: flex; align-items: center; gap: 10px; flex: none; }
.mijnregel__deadline { font-size: 13px; color: var(--inkt-2); white-space: nowrap; }
.mijnregel__deadline.gevaar { color: var(--gevaar); font-weight: 500; }
.mijnregel--actie.klaar .mijnregel__titel { text-decoration: line-through; color: var(--zacht); }
.afvinken { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--rand-veld); background: var(--vlak); display: grid; place-items: center; cursor: pointer; flex: none; color: transparent; transition: all .15s; }
.mijnregel:not(.mijnregel--actie) .afvinken { border-color: var(--kleur); }
.afvinken:hover { color: var(--zacht); border-color: var(--inkt); }
.afvinken.aan { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.status-badge { margin: 0; white-space: nowrap; }
.status-badge--bezig { background: color-mix(in srgb, var(--status-bezig) 12%, transparent); color: var(--status-bezig); border-color: transparent; }
.status-badge--feedback { background: color-mix(in srgb, var(--status-feedback) 16%, transparent); color: color-mix(in srgb, var(--status-feedback) 70%, var(--inkt)); border-color: transparent; }
.mijn__zij { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; }
.mijnkaart { border: 1px solid var(--lijn); border-radius: 18px; padding: 20px; box-shadow: var(--schaduw-zweef); display: flex; flex-direction: column; gap: 12px; background: var(--vlak); }
.mijnkaart h2 { font-size: 18px; }
.mijn__actieinvoer { display: grid; grid-template-columns: 1fr 44px; gap: 8px; }
.mijn__actieinvoer input:not([type=date]) { grid-column: 1 / -1; }
.mijn__actieinvoer input[type=date] { min-width: 0; }
.mijn__actieinvoer .knop { width: 44px; height: 44px; padding: 0; }
.mijnkaart .mijnregel { padding: 10px 0; }
.notities { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notitie { background: #FFF8E6; border-radius: 12px; padding: 12px 14px; }
.notitie p { white-space: pre-wrap; font-size: 14px; }
.notitie__voet { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

/* ── Meldingen ─────────────────────────────────────────────────────────── */

.meldstip { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--gevaar); color: #fff; font: 600 10.5px/1 var(--tekst); margin-left: 6px; vertical-align: middle; flex: none; }
.bel { position: relative; }
.belknop { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--rand-veld); background: var(--vlak); cursor: pointer; font-weight: 500; color: var(--inkt); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.belknop:hover { box-shadow: var(--schaduw-zweef); }
.belknop--nieuw { border-color: var(--gevaar); }
.belknop--nieuw .icoon { color: var(--gevaar); }
.belknop__aantal { min-width: 20px; height: 20px; border-radius: 99px; background: var(--gevaar); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; padding: 0 6px; }
.bel__paneel { position: absolute; right: 0; top: calc(100% + 10px); width: min(420px, calc(100vw - 24px)); max-height: min(560px, 75vh); display: flex; flex-direction: column; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 18px; box-shadow: var(--schaduw-hoog); z-index: 50; overflow: hidden; }
.bel__kop { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 10px; }
.bel__kop h2 { font-size: 18px; }
.bel__lijst { overflow-y: auto; padding: 0 8px 8px; }
.bel__lijst h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); font-weight: 500; padding: 10px 10px 6px; }
.bel__lijst ul { list-style: none; margin: 0; padding: 0; }
.bel__melding { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; }
.bel__melding:hover { background: var(--vlak-2); }
.bel__melding.ongelezen .bel__tekst { font-weight: 500; }
.bel__melding.gevaar .bel__tekst { color: var(--gevaar); }
.bel__icoon { width: 34px; height: 34px; border-radius: 50%; background: var(--vlak-2); display: grid; place-items: center; flex: none; color: var(--inkt-2); }
.bel__icoon--deadline { background: var(--gevaar-zacht); color: var(--gevaar); }
.bel__icoon--bekeken { background: var(--merk-zacht); color: var(--merk-donker); }
.bel__inhoud { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }
.bel__tekst { font-size: 14px; line-height: 1.35; }
.bel__acties { display: flex; opacity: 0; transition: opacity .15s; }
.bel__melding:hover .bel__acties, .bel__acties:focus-within { opacity: 1; }
.bel__punt { width: 8px; height: 8px; border-radius: 50%; background: var(--gevaar); flex: none; }
.bel__leeg { padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--zacht); }
.bel__leeg p:first-of-type { color: var(--inkt); font-weight: 500; }
.bel__voet { border-top: 1px solid var(--lijn); padding: 8px 12px; display: flex; justify-content: flex-end; }
.klantkaart__nieuw { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 4px 10px; border-radius: 99px; background: var(--gevaar); color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.tl-balk.heeft-melding::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--gevaar); box-shadow: 0 0 0 2px var(--vlak); }
.kaartje__dienst .meldstip { margin-left: 0; }

/* ── Klantpagina: rijkere tijdlijn en detailvenster ─────────────────────── */

.klant-held__regel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.klant-held__regel .zacht { margin-top: 0; }
.klant-nieuw { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px 6px 8px; border-radius: 99px; background: var(--gevaar-zacht); color: var(--gevaar); font-weight: 500; text-decoration: none; font-size: 14px; }
.klant-nieuw .meldstip { margin: 0 4px 0 0; }
.kt-as { height: auto; border-bottom: 1px solid var(--lijn); }
.kt-as__rij { position: relative; height: 22px; }
.kt-as__rij--weken { height: 20px; }
.kt-maand { height: 22px; line-height: 22px; border-left: 0; padding-left: 0; }
.kt-week { position: absolute; top: 0; height: 20px; font-size: 11px; color: var(--zacht); border-left: 1px solid var(--lijn); padding-left: 4px; line-height: 20px; }
.kt-week.nu { color: var(--gevaar); font-weight: 600; }
.kt-raster { position: absolute; top: 0; bottom: 0; right: 0; pointer-events: none; }
.kt-rasterlijn { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--lijn-zacht); }
.kt-rij { width: 100%; height: 48px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; border-radius: 10px; position: relative; }
.kt-rij:hover { background: var(--vlak-2); }
.kt-rij:hover .kt-balk { box-shadow: var(--schaduw-zweef); }
.kt-label { gap: 10px; padding-left: 8px; }
.kt-label__tekst { display: flex; flex-direction: column; min-width: 0; }
.kt-label__titel { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-label__datum { font-size: 12px; color: var(--zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-balk { top: 10px; bottom: 10px; border-radius: 99px; padding: 0 12px; }
.kt-tip { margin-top: 10px; }
.klant-agenda__lijst li { list-style: none; }
button.klant-onderdeel { width: 100%; text-align: left; background: var(--vlak); font: inherit; color: inherit; cursor: pointer; }
button.klant-onderdeel:hover { box-shadow: var(--schaduw-zweef); }
.klant-updates li.nieuw { border-left-color: var(--gevaar); }
.onderdeel { display: flex; flex-direction: column; gap: 20px; }
.onderdeel__kop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.onderdeel__feiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 16px; background: var(--vlak-2); border-radius: 14px; }
.onderdeel__feiten dt { font-size: 12px; color: var(--zacht); }
.onderdeel__feiten dd { margin: 2px 0 0; font-weight: 500; font-size: 14px; }
.onderdeel h3 { font-size: 15px; margin-bottom: 8px; }
.onderdeel__uitleg { white-space: pre-wrap; line-height: 1.6; }

/* ── Mijn werk: dashboard met compacte planning en ruime zijkolom ───────── */

.mijn__raster { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 28px; }
.mijn__zij { top: 88px; gap: 20px; }
.mijn__dagen { border: 1px solid var(--lijn); border-radius: 18px; padding: 8px 20px 4px; }
.mijn__groep { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.mijn__groep:last-child { border-bottom: 0; }
.mijn__groep h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); font-weight: 500; margin-bottom: 4px; }
.mijn__groep--gevaar h2 { color: var(--gevaar); }
.mijnregel { padding: 8px 0; gap: 12px; border-bottom: 0; }
.mijnregel__titel { font-size: 14.5px; }
.mijnregel__sub { font-size: 12.5px; }
.mijnregel__rechts { gap: 8px; }
.mijnregel__deadline { font-size: 12.5px; }
.afvinken { width: 22px; height: 22px; }

.mijnkaart { padding: 22px 24px; gap: 14px; box-shadow: none; }
.mijnkaart__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mijnkaart__kop .zacht { display: inline-flex; align-items: center; gap: 4px; }
.mijnkaart__leeg { padding: 4px 0; }

.actie-invoer { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--rand-veld); border-radius: 14px; background: var(--vlak); transition: border-color .15s, box-shadow .15s; }
.actie-invoer__regel { display: flex; align-items: center; gap: 8px; padding-left: 8px; }
.actie-invoer__regel > .icoon { color: var(--zacht); }
.actie-invoer__opties { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--lijn-zacht); padding-top: 6px; }
.actie-invoer__opties .klantkeuze { flex: 1 1 120px; max-width: none; }
.actie-invoer__opties .actie-invoer__datum { flex: 1 1 120px; width: auto !important; }
.actie-invoer:focus-within { border-color: var(--inkt); box-shadow: 0 0 0 1px var(--inkt); }
.actie-invoer > .icoon { color: var(--zacht); }
.actie-invoer input:not([type=date]) { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; padding: 0 4px !important; height: 36px !important; }
.actie-invoer__datum { width: 132px !important; height: 34px !important; border-radius: 99px !important; font-size: 13px; padding: 0 10px !important; background: var(--vlak-2); border-color: transparent !important; color: var(--zacht); }
.actie-invoer__datum:valid { color: var(--inkt); }
.acties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.actie { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn-zacht); }
.actie:last-child { border-bottom: 0; }
.actie .afvinken { margin-top: 1px; }
.actie__inhoud { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.actie__tekst { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.actie.klaar .actie__tekst { text-decoration: line-through; color: var(--zacht); }
.actie__datum { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px 10px; border-radius: 99px; background: var(--vlak-2); font-size: 12px; color: var(--inkt-2); margin-top: 1px; }
.actie__datum.gevaar { background: var(--gevaar-zacht); color: var(--gevaar); font-weight: 500; }
.actie__weg { opacity: 0; transition: opacity .15s; }
.actie:hover .actie__weg, .actie__weg:focus-visible { opacity: 1; }
.actie--compact { padding: 8px 0; border-bottom: 0; align-items: center; }
.actie--compact .actie__tekst { font-size: 14.5px; font-weight: 500; }
.bewerkbaar { cursor: text; border-radius: 6px; outline: none; }
.bewerkbaar:hover { background: var(--vlak-2); box-shadow: 0 0 0 4px var(--vlak-2); }
.bewerkbaar[contenteditable=true] { background: var(--vlak); box-shadow: 0 0 0 2px var(--inkt); }

.mijnkaart .voortgang__vak textarea { min-height: 110px; font-size: 15px; }
.notities { gap: 12px; }
.notitie { background: #FFF8E6; border-radius: 14px; padding: 16px 18px; border: 1px solid #F5E6BE; }
.notitie__tekst { display: block; white-space: pre-wrap; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.notitie .bewerkbaar:hover { background: rgba(255,255,255,.6); box-shadow: 0 0 0 4px rgba(255,255,255,.6); }
.notitie__voet { margin-top: 10px; }

/* ── Itemformulier: blokken 'voor de klant' en 'intern' ────────────────── */

.meer__inhoud { gap: 14px; }
.meer__blok { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--lijn); border-radius: 14px; }
.meer__blok--intern { background: var(--vlak-2); border-color: transparent; }
.meer__kop { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.meer__blok .voortgang { margin-top: 4px; }

/* Afvinkrondjes: geen standaard-binnenmarge, vinkje precies in het midden. */
.afvinken { padding: 0; line-height: 0; }
.afvinken .icoon { display: block; }

/* ── Klantnotities (tab op het klantbord) en persoonlijke borden ────────── */

.segment__aantal { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--zacht); }
.segment__optie.actief .segment__aantal { color: var(--inkt); }
.klantdossier { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 32px; align-items: start; }
.klantdossier__notities { display: flex; flex-direction: column; gap: 16px; }
.klantdossier__zij { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 88px; }
.klantnotities { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.klantnotitie { border: 1px solid var(--lijn); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--vlak); }
.klantnotitie.vast { border-color: #F5E6BE; background: #FFFBF0; }
.klantnotitie__kop { display: flex; align-items: center; gap: 10px; }
.klantnotitie__wie { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.klantnotitie__wie strong { font-size: 14px; }
.klantnotitie__pin.aan { color: #B07800; background: #FFF1CC; }
.klantnotitie__tekst { display: block; white-space: pre-wrap; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.dossier__regel { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dossier__subkop { font-size: 14px; margin-top: 4px; }
.dossier__item { border: 0; background: var(--vlak-2); border-radius: 99px; padding: 1px 8px; font-size: 12px; cursor: pointer; color: var(--inkt-2); }
.dossier__item:hover { background: var(--lijn); }
.actie__notitie { width: 22px; height: 22px; display: grid; place-items: center; color: var(--zacht); flex: none; }

.borden { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.borden::-webkit-scrollbar { display: none; }
.bordchip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--rand-veld); background: var(--vlak); cursor: pointer; font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--inkt-2); }
.bordchip:hover { border-color: var(--inkt); }
.bordchip.actief { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.bordchip__aantal { font-size: 11.5px; opacity: .7; }
.klantlabel { align-self: flex-start; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--merk-zacht); color: var(--merk-donker); text-decoration: none; font-weight: 500; }
.klantlabel:hover { background: var(--merk); color: #fff; }
.notitie__meta { display: inline-flex; align-items: center; gap: 8px; }
.klantkeuze { height: 34px !important; width: auto !important; max-width: 170px; border-radius: 99px !important; font-size: 13px; background-color: var(--vlak-2); border-color: transparent !important; }

/* ── Mijn werk: tabs Planning en Notities & actiepunten ────────────────── */

.mijn { gap: 22px; }
.mijn__tabs { align-self: flex-start; }
.mijn__tabs .segment__optie { padding: 8px 18px; font-size: 14px; }
.mijn__dagen { max-width: 1040px; }
.mijn__borden { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.bordenlijst { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 88px; max-height: calc(100dvh - 110px); }
.bordkeuze { display: none; }
.bordenlijst__zoek { width: 100%; margin-bottom: 10px; }
.bordenlijst__zoek input { height: 40px !important; border-radius: 99px !important; }
.bordenlijst__kop { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); font-weight: 500; padding: 14px 10px 6px; }
.bordenlijst__klanten { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.bordenlijst__leeg { padding: 4px 10px; }
.bordregel { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; color: var(--inkt-2); font-size: 14px; }
.bordregel:hover { background: var(--vlak-2); }
.bordregel.actief { background: var(--vlak-2); color: var(--inkt); font-weight: 600; box-shadow: inset 0 0 0 1px var(--lijn); }
.bordregel > .icoon { color: var(--zacht); width: 24px; }
.bordregel__letter { width: 24px; height: 24px; border-radius: 7px; background: var(--merk-zacht); color: var(--merk-donker); display: grid; place-items: center; font: 600 11px/1 var(--kop); flex: none; }
.bordregel__naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bordregel__aantal { font-size: 12px; color: var(--zacht); font-weight: 500; }
.mijn__bord { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mijn__bord .notities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; align-items: start; }
.mijn__bordkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mijn__bordkop h2 { font-size: 24px; }
.mijn__bordraster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 20px; align-items: start; }

/* ── Opmaak in notities (zoals Apple Notities) ─────────────────────────── */

.opmaak { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.opmaak p { margin: 0; }
.opmaak__kop { font: 600 17px/1.3 var(--kop); margin: 6px 0 4px; }
.opmaak__kop:first-child { margin-top: 0; }
.opmaak__witregel { height: 10px; }
.opmaak__lijst { margin: 2px 0; padding-left: 20px; }
.opmaak__afvink { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.opmaak__afvink li { display: flex; align-items: flex-start; gap: 10px; }
.opmaak__afvink li.klaar span { text-decoration: line-through; color: var(--zacht); }
.opmaak__vakje { width: 20px; height: 20px; flex: none; margin-top: 2px; border-radius: 6px; border: 1.5px solid var(--rand-veld); background: var(--vlak); display: grid; place-items: center; padding: 0; line-height: 0; color: transparent; cursor: pointer; transition: all .15s; }
.opmaak__vakje:hover:not(:disabled) { border-color: var(--inkt); color: var(--zacht); }
.opmaak__vakje.aan { background: var(--merk-donker); border-color: var(--merk-donker); color: #fff; }
.opmaak__vakje:disabled { cursor: default; }
.opmaak__vakje .icoon { display: block; }

.opmaak-editor { border: 1px solid var(--rand-veld); border-radius: 14px; background: var(--vlak); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.opmaak-editor:focus-within { border-color: var(--inkt); box-shadow: 0 0 0 1px var(--inkt); }
.opmaak-editor__balk { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--lijn-zacht); background: var(--vlak-2); }
.opmaak-editor__knop { min-width: 32px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--inkt-2); font-size: 13px; display: inline-grid; place-items: center; }
.opmaak-editor__knop:hover { background: var(--vlak); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.opmaak-editor__veld { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; resize: vertical; font-size: 15px; line-height: 1.55; padding: 12px 14px !important; min-height: 110px; }
.notitie-nieuw { display: flex; flex-direction: column; gap: 8px; }
.notitie-nieuw .voortgang__balk { border: 0; padding: 0; }

.notitie { padding: 16px 18px; }
.notitie__inhoud { cursor: text; border-radius: 8px; }
.notitie.bewerkt { background: var(--vlak); border-color: var(--rand-veld); }
.notitie__acties { display: inline-flex; gap: 4px; align-items: center; }
.notitie__telling { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--inkt-2); }
.notitie__telling.klaar { color: var(--status-klaar); }
.klantnotitie__tekst { cursor: text; display: flex; flex-direction: column; gap: 8px; }

.uitnotities { border-top: 1px solid var(--lijn); padding-top: 12px; }
.uitnotities__kop { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zacht); font-weight: 500; margin-bottom: 4px; }

/* ── Detailvenster en bijlagen ─────────────────────────────────────────── */

.dialoog--detail { width: min(680px, calc(100vw - 32px)); }
.detail { display: flex; flex-direction: column; gap: 22px; }
.detail__labels { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail__labels .klantlabel { align-self: center; font-size: 13px; padding: 3px 10px; }
.detail__feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 0; padding: 16px; background: var(--vlak-2); border-radius: 14px; }
.detail__feiten dt { font-size: 12px; color: var(--zacht); }
.detail__feiten dd { margin: 3px 0 0; font-weight: 500; font-size: 14px; }
.detail__feiten dd.gevaar { color: var(--gevaar); }
.detail__mensen { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.detail__sectie h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 10px; }
.detail__sectie h3 .icoon { color: var(--zacht); }
.dialoog--detail .dialoog__voet .statuskeuze { height: 40px !important; font-size: 14px; }

.bijlagen { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bijlage { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 12px; }
.bijlage__icoon { width: 36px; height: 36px; border-radius: 10px; background: var(--vlak-2); display: grid; place-items: center; color: var(--inkt-2); flex: none; }
.bijlage__naam { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.bijlage__naam strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bijlage__naam:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.bijlage__klant { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--vlak-2); cursor: pointer; white-space: nowrap; color: var(--zacht); }
.bijlage__klant.aan { background: var(--merk-zacht); color: var(--merk-donker); font-weight: 500; }
.bijlage__klant input { width: 14px; height: 14px; }
.bijlage-toevoegen { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px dashed var(--rand-veld); border-radius: 12px; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--inkt-2); }
.bijlage-toevoegen:hover { border-color: var(--inkt); background: var(--vlak-2); }
.klant-bestanden { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--zacht); vertical-align: middle; }

.checklistpil { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: var(--vlak-2); color: var(--inkt-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; margin-left: 6px; vertical-align: middle; }
.checklistpil.klaar { background: color-mix(in srgb, var(--status-klaar) 14%, transparent); color: var(--status-klaar); }
.tl-label__titel .checklistpil, .tl-label .checklistpil { margin-left: 4px; }
.tl-balk .checklistpil { background: rgba(255,255,255,.85); color: #222; margin: 0 6px 0 0; flex: none; pointer-events: none; }

/* ── Rustigere focus en duidelijk klikbare regels ──────────────────────── */

:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; border-radius: 8px; }
.mijnregel { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 12px; transition: background .12s; }
.mijnregel:hover { background: var(--vlak-2); }
.mijnregel__inhoud:focus-visible { outline-offset: 4px; }
.mijnregel__link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--zacht); }
.mijnregel__link:hover { color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; }
.actie--compact { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 12px; }
.actie--compact:hover { background: var(--vlak-2); }

/* ── Takenlijst (standaard checklist per dienst) ───────────────────────── */

.takenlijst { display: flex; flex-direction: column; gap: 8px; }
.takenlijst__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.takenlijst__taak { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); transition: transform .15s, box-shadow .15s; touch-action: none; }
.takenlijst__taak.sleept { box-shadow: var(--schaduw-zweef); transition: none; z-index: 2; position: relative; background: var(--vlak); }
.takenlijst__taak:focus-within { border-color: var(--inkt); }
.takenlijst__greep { width: 24px; height: 32px; display: grid; place-items: center; color: var(--zacht); cursor: grab; flex: none; border-radius: 8px; }
.takenlijst__greep:hover { background: var(--vlak-2); color: var(--inkt); }
.takenlijst__greep .icoon { stroke-width: 3.2; }
.takenlijst__taak.sleept .takenlijst__greep { cursor: grabbing; }
.takenlijst__nummer { width: 22px; height: 22px; border-radius: 50%; background: var(--vlak-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--inkt-2); flex: none; }
.takenlijst__taak input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; height: 34px !important; padding: 0 6px !important; background: transparent; }
.takenlijst__nieuw { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1.5px dashed var(--rand-veld); border-radius: 12px; }
.takenlijst__nieuw:focus-within { border-style: solid; border-color: var(--inkt); }
.takenlijst__nieuw > .icoon { color: var(--zacht); }
.takenlijst__nieuw input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; height: 36px !important; padding: 0 4px !important; }

/* ── Opmaakeditor: echte vakjes en kopjes tijdens het typen ────────────── */

.opmaak-editor { position: relative; }
.rijk { outline: none; padding: 12px 14px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; cursor: text; position: relative; max-height: 60vh; overflow-y: auto; }
.rijk.leeg::before { content: attr(data-placeholder); position: absolute; left: 14px; right: 14px; top: 12px; color: var(--zacht); pointer-events: none; }
.rijk .blok { position: relative; min-height: 1.55em; }
.rijk .blok[data-soort="kop"] { font: 600 17px/1.4 var(--kop); margin: 4px 0 2px; }
.rijk .blok[data-soort="lijst"] { padding-left: 22px; }
.rijk .blok[data-soort="lijst"]::before { content: '•'; position: absolute; left: 7px; top: 0; color: var(--inkt-2); }
.rijk .blok[data-soort="afvink"] { padding-left: 30px; }
.rijk .blok[data-soort="afvink"]::before { content: ''; position: absolute; left: 1px; top: .18em; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--rand-veld); background: var(--vlak); cursor: pointer; box-sizing: border-box; transition: all .15s; }
.rijk .blok[data-soort="afvink"]:hover::before { border-color: var(--inkt); }
.rijk .blok[data-soort="afvink"][data-klaar="ja"]::before { background: var(--merk-donker) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--merk-donker); }
.rijk .blok[data-soort="afvink"][data-klaar="ja"] { text-decoration: line-through; color: var(--zacht); }

/* ── Nieuwe versie beschikbaar ─────────────────────────────────────────── */

.nieuwe-versie { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--inkt); color: #fff; box-shadow: var(--schaduw-hoog); font-size: 14px; max-width: calc(100vw - 24px); }
.nieuwe-versie .icoon { color: #FFD166; }

/* ── Kleuraccent: los afgerond streepje in plaats van een rand die met de hoek meebuigt ── */

.kaartje, button.klant-onderdeel, .klant-onderdeel { border-left-width: 1px !important; border-left-color: var(--lijn) !important; position: relative; padding-left: 20px; }
.kaartje::before, .klant-onderdeel::before { content: ''; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 4px; border-radius: 99px; background: var(--kleur); }
.klant-onderdeel.status--klaar::before { opacity: .5; }
.klantkaart--te-laat { border-left: 0; }

/* ── Notities: volle breedte, kopje boven de lijst, geen sleephoekje ───── */

.rijk { resize: none; }
.notitie-nieuw .voortgang__balk { justify-content: flex-end; gap: 8px; }
.notitie-nieuw .voortgang__balk > span:empty { display: none; }
.notitie-nieuw .voortgang__balk:has(.klantkeuze) { justify-content: space-between; }
.notities__kop { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--inkt-2); padding-top: 18px; border-top: 1px solid var(--lijn); }
.notities__kop .zacht { font-weight: 400; }

/* ── @collega's, activiteit en uitleg ──────────────────────────────────── */

.tag { display: inline-block; padding: 0 6px; border-radius: 6px; background: #E3ECFB; color: #2648A0; font-weight: 500; white-space: nowrap; }
.tagkeuze { position: fixed; z-index: 400; list-style: none; margin: 0; padding: 6px; width: 250px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; box-shadow: var(--schaduw-hoog); }
.tagkeuze li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.tagkeuze li > span { display: flex; flex-direction: column; min-width: 0; }
.tagkeuze li.actief, .tagkeuze li:hover { background: var(--vlak-2); }

.activiteit { display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
.activiteit__balk { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.activiteit__klant { width: auto !important; min-width: 180px; border-radius: 99px !important; height: 40px !important; }
.activiteit__dag h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); font-weight: 500; margin-bottom: 6px; }
.activiteit__lijst { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lijn); border-radius: 16px; overflow: hidden; }
.activiteit__regel { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--lijn-zacht); }
.activiteit__regel:last-child { border-bottom: 0; }
.activiteit__regel:hover { background: var(--vlak-2); }
.activiteit__regel--genoemd { background: #F5F8FF; }
.activiteit__inhoud { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.activiteit__tekst { font-size: 14.5px; }
.activiteit__voor { display: inline-flex; align-items: center; gap: 6px; flex: none; }

.uitleg-kaart { border: 1px solid var(--lijn); border-radius: 18px; padding: 20px 22px; background: linear-gradient(180deg, var(--merk-zacht), var(--vlak) 70%); display: flex; flex-direction: column; gap: 14px; }
.uitleg-kaart header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.uitleg-kaart h2 { font-size: 18px; }
.uitleg-kaart__voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.uitleg__stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.uitleg__stappen li { display: flex; gap: 12px; align-items: flex-start; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 14px; }
.uitleg__stappen strong { display: block; margin-bottom: 2px; }
.uitleg__stappen p { font-size: 13.5px; }
.uitleg__nummer { width: 28px; height: 28px; border-radius: 50%; background: var(--merk-donker); color: #fff; display: grid; place-items: center; font: 600 13px/1 var(--kop); flex: none; }
.dialoog .uitleg__stappen { grid-template-columns: minmax(0, 1fr); }
.uitleg__extra { margin-top: 14px; }

/* ── A4-bladen (voorbeeld én afdruk). Altijd licht, maten in mm. ───────── */

.blad {
  background: #fff; color: #141D20; font-family: var(--tekst); font-size: 7.5pt; line-height: 1.3;
  display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.blad__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; border-bottom: 0.5mm solid #049998; padding-bottom: 2mm; margin-bottom: 3mm; flex: none; }
.blad__kop h1 { font: 600 15pt/1.15 var(--kop); color: #141D20; }
.blad__kop p { font-size: 8pt; color: #5C6C70; margin-top: 1mm; }
.blad__afzender { text-align: right; display: flex; flex-direction: column; font-size: 7pt; color: #5C6C70; max-width: 45%; }
.blad__afzender strong { font: 600 8.5pt/1.3 var(--kop); color: #047A78; }
.blad__inhoud { flex: 1; min-height: 0; position: relative; }
.blad__voet { display: flex; justify-content: space-between; align-items: flex-end; gap: 6mm; flex: none; border-top: 0.2mm solid #DCE6E6; padding-top: 1.5mm; }
.blad__legenda { display: flex; flex-wrap: wrap; gap: 0.8mm 3.5mm; font-size: 6.5pt; color: #21292D; overflow: hidden; max-height: 6.5mm; }
.blad__legenda span { display: inline-flex; align-items: center; gap: 1.2mm; white-space: nowrap; }
.blad__legenda i { width: 2.6mm; height: 2.6mm; border-radius: 0.6mm; display: inline-block; }
.blad__paginanr { font-size: 6.5pt; color: #5C6C70; white-space: nowrap; }
.blad__leeg { padding: 20mm; text-align: center; color: #5C6C70; font-size: 10pt; }

.pt-as { display: flex; border-bottom: 0.25mm solid #C9D6D6; }
.pt-as__label { flex: none; }
.pt-as__tijd { flex: 1; position: relative; }
.pt-as__rij { position: relative; height: 4.5mm; }
.pt-as__maand { position: absolute; top: 0; height: 4.5mm; border-left: 0.2mm solid #C9D6D6; padding-left: 1mm; font: 600 6.5pt/4.5mm var(--kop); white-space: nowrap; overflow: hidden; color: #141D20; }
.pt-as__dag { position: absolute; top: 0; height: 4.5mm; text-align: center; font-size: 5.5pt; line-height: 4.5mm; color: #5C6C70; overflow: hidden; white-space: nowrap; }
.pt-as__dag.weekend { color: #A9B6B8; }
.pt-lichaam { position: relative; }
.pt-laag { position: absolute; top: 0; }
.pt-weekend { position: absolute; top: 0; bottom: 0; background: #F3F6F6; }
.pt-maandlijn { position: absolute; top: 0; bottom: 0; border-left: 0.2mm solid #DCE6E6; }
.pt-vandaag { position: absolute; top: 0; bottom: 0; border-left: 0.35mm solid #D63031; }
.pt-rij { display: flex; position: relative; border-bottom: 0.15mm solid #EDF2F2; }
.pt-rij--groep { background: rgba(4, 153, 152, 0.06); border-bottom-color: #DCE6E6; }
.pt-label { height: 100%; display: flex; align-items: center; gap: 1.5mm; padding: 0 2mm 0 1.5mm; overflow: hidden; white-space: nowrap; border-right: 0.2mm solid #DCE6E6; }
.pt-label span { overflow: hidden; text-overflow: ellipsis; }
.pt-label--groep { font: 600 7.5pt/1 var(--kop); }
.pt-label--sub { padding-left: 4mm; font-weight: 500; color: #21292D; font-size: 7pt; }
.pt-label--item, .pt-label--baan { padding-left: 4mm; font-size: 6.8pt; }
.pt-label__titel { flex: 1; }
.pt-label__wie { flex: none; font-size: 5.5pt; color: #5C6C70; border: 0.2mm solid #C9D6D6; border-radius: 1mm; padding: 0 0.8mm; }
.pt-stip { width: 2.2mm; height: 2.2mm; border-radius: 50%; display: inline-block; flex: none; }
.pt-baan { position: relative; flex: none; }
.pt-balk { position: absolute; top: 50%; height: calc(3.8mm * var(--groei, 1)); margin-top: calc(-1.9mm * var(--groei, 1)); border-radius: 0.8mm; font-size: 6pt; font-weight: 500; line-height: calc(3.8mm * var(--groei, 1)); padding: 0 1.2mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-balk.status--klaar { opacity: .55; }
.pt-balk.afgekapt-links { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pt-balk.afgekapt-rechts { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pt-mijlpaal { position: absolute; top: 50%; width: 2.6mm; height: 2.6mm; margin: -1.3mm 0 0 -1.3mm; transform: rotate(45deg); border-radius: 0.3mm; }
.pt-samenvatting { position: absolute; top: 50%; height: 1.6mm; margin-top: -0.8mm; border-radius: 0.8mm; background: #DCE6E6; }

.pl-tabel { border-collapse: collapse; table-layout: fixed; font-size: 7pt; }
.pl-tabel th { text-align: left; font-size: 6pt; text-transform: uppercase; letter-spacing: .04em; color: #5C6C70; font-weight: 500; height: 6mm; border-bottom: 0.3mm solid #C9D6D6; padding: 0 1.5mm; }
.pl-tabel td { height: 6mm; padding: 0 1.5mm; border-bottom: 0.15mm solid #EDF2F2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tabel tr.klaar td { color: #8A9AA0; }
.pl-maand td { font: 600 7.5pt/1 var(--kop); background: rgba(4, 153, 152, 0.06); color: #047A78; }
.pl-dienst { display: inline-flex; align-items: center; gap: 1.2mm; }
.pl-dienst i { width: 2.4mm; height: 2.4mm; border-radius: 0.6mm; display: inline-block; flex: none; }

#afdruk { display: none; }

@media print {
  body { background: #fff; }
  body > *:not(#afdruk), dialog, #meldingen { display: none !important; }
  #afdruk { display: block; }
  #afdruk .blad { break-after: page; page-break-after: always; }
  #afdruk .blad:last-child { break-after: auto; page-break-after: auto; }
}

/* ── Smalle schermen ───────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .mijn__bordraster { grid-template-columns: minmax(0, 1fr); }
  .mijn__bordraster { grid-template-columns: minmax(0, 1fr); }
  .klantdossier { grid-template-columns: minmax(0, 1fr); }
  .klantdossier__zij { position: static; }
  .mijn__raster { grid-template-columns: minmax(0, 1fr); }
  .mijn__zij { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .klant-overzicht { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .export { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --label: 150px; }
  .detail__feiten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bijlage { flex-wrap: wrap; }
  .bijlage__naam { flex-basis: calc(100% - 60px); }
  .mijn__borden { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bordenlijst { position: static; max-height: none; }
  .bordenlijst > :not(.bordkeuze) { display: none; }
  .bordkeuze { display: block; height: 44px !important; border-radius: 12px !important; font-weight: 500; }
  .mijn__tabs { align-self: stretch; }
  .mijn__tabs .segment__optie { flex: 1; padding: 8px 10px; }
  .klantdossier { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .klantdossier__zij { position: static; }
  .actie-invoer__opties { flex-wrap: wrap; }
  .bel__paneel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .belknop { padding: 0 12px; }
  .onderdeel__feiten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mijn__raster { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mijn__zij { position: static; display: flex; }
  .mijn__kop h1 { font-size: 24px; }
  .mijnregel { flex-wrap: wrap; }
  .mijnregel__rechts { width: 100%; padding-left: 40px; flex-wrap: wrap; }
  .filterbalk { padding: 14px 16px 0; }
  .zoekbalk { flex-wrap: wrap; gap: 10px; }
  .zoekbalk .segment { width: 100%; order: 3; }
  .zoekbalk .segment .segment__optie { flex: 1; }
  .zoekpil { max-width: none; margin: 0; }
  .filterknop { padding: 0 14px; }
  .dashboard { padding: 4px 16px 0; }
  .snelkeuzes { gap: 20px; }
  .filtervenster h3 { font-size: 16px; }
  .balk { padding: 10px 16px; gap: 10px; }
  .balk .tabs { margin: 0; }
  .tab { padding: 7px 12px; }
  .paginakop { padding: 18px 16px 0; }
  .paginakop__titel h1 { font-size: 24px; }
  .filterbalk { padding: 14px 16px 0; }
  .weergave { padding: 14px 16px 32px; }
  .dialoog { border-radius: 22px 22px 0 0; }
  .klantraster { gap: 24px; }
  .klantkaart__beeld { aspect-ratio: 2 / 1; }
  .formulier .rij-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .formulier input[type=date] { padding: 0 10px 0 12px !important; font-size: 14px; }
  .paginakop { padding: 14px 16px 0; gap: 10px; }
  .paginakop__titel h1 { font-size: 22px; }
  .paginakop__rij { align-items: flex-start; }
  .paginakop__acties { width: 100%; }
  .paginakop__acties .knop:not(.knop--icoon) { flex: 1; width: auto; padding: 0 10px; }
  .paginakop__acties .knop--primair .verberg-smal { display: inline; }
  .klantwissel { flex: 1 1 100%; max-width: none; order: -1; }
  .paginakop__weergave { width: 100%; }
  .paginakop__weergave .segment__optie { flex: 1; }
  .klantraster { grid-template-columns: minmax(0, 1fr); }
  .klanten__zoek { max-width: none; }
  .werkbalk { gap: 8px; }
  .werkbalk .hint, .hint { display: none; }
  .kanban { grid-template-columns: repeat(4, 82%); scroll-snap-type: x mandatory; }
  .kanban__kolom { scroll-snap-align: start; }
  /* Smal scherm: periode, wat en status. De dienst zie je aan de kleurrand. */
  .lijst .kol-bij { display: none; }
  .lijst__rij td:first-child { box-shadow: inset 4px 0 0 var(--kleur) !important; padding-left: 12px; }
  .lijst td, .lijst th { padding: 9px 8px; }
  .lijst__periode { white-space: normal; font-size: 12px; }
  .statuskeuze { max-width: 116px; }
  .dialoog { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .dialoog__inhoud { padding: 4px 16px 16px; }
  .dialoog__kop { padding: 14px 12px 8px 16px; }
  .dialoog__voet { padding: 12px 16px 16px; }
  .dialoog__voet .vul.klein { flex-basis: 100%; order: 9; }
  .dialoog__voet > .vul:not(.klein) { display: none; }
  .dialoog__voet > .knop:not(.knop--tekst):not(.knop--gevaar-tekst) { flex: 1 1 40%; }
  .formulier .segment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .voortgang__nieuw { flex-direction: column; align-items: stretch; }
  .deel-nieuw { flex-direction: column; align-items: stretch; }
  .deellink__url { flex-wrap: wrap; }
  .deellink__url input { flex-basis: 100%; }
  .deellink__url .knop { flex: 1; }
  .klant-balk { padding: 10px 16px; }
  .klant { padding: 20px 16px 40px; gap: 16px; }
  .klant-held h1 { font-size: 26px; }
  .klant-overzicht { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .klant-voortgang, .klant-feit:last-child { grid-column: 1 / -1; }
  /* Op een telefoon is de lijst duidelijker dan smalle balken zonder namen. */
  .klant-sectie--tijdlijn { display: none; }
  .klant-sectie { padding: 16px; }
  .klant-onderdeel { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .klant-onderdeel__datum { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
  .klant-onderdeel__wat { grid-column: 1; }
  .balk { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .balk .tabs { order: 3; width: 100%; }
  .verberg-smal { display: none; }
  .balk__acties { gap: 6px; }
  .balk__acties > .knop { width: 36px; padding: 0; }
  .merk { font-size: 15px; }
  .tab { padding: 7px 9px; font-size: 13.5px; }
  .werkbalk__tekst { display: none; }
  .werkbalk .segment { width: 100%; }
  .werkbalk .segment__optie { flex: 1; }
  .werkbalk .vul { display: none; }
  .werkbalk__keuze { flex: 1; }
  .werkbalk__keuze select { width: 100%; }
  .menu__naam { display: none; }
  .menu__knop { padding: 3px; }
  .filterbalk, .weergave { padding-left: 16px; padding-right: 16px; }
  .rij-2 { grid-template-columns: minmax(0, 1fr); }
  .tl-rij--item .tl-label, .tl-rij--sub .tl-label, .tl-rij--baan .tl-label { padding-left: 14px; }
  .sectie__kop { flex-direction: column; align-items: flex-start; }
  .kaart { padding: 24px; }
  .bestandsoptie { flex-direction: column; align-items: flex-start; }
}

/* ── Werkdagen, beschikbaarheid en bezetting ─────────────────────────────── */
.werkdagenkeuze { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.werkdagenkeuze label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--zacht); text-transform: capitalize; }
.werkdagenkeuze input { text-align: center; }
.schakelregel { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.schakelregel input { margin-top: 3px; }
.beschikbaarheid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.beschikbaarheid:empty { display: none; }
.beschikbaarheid li { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: color-mix(in srgb, var(--status-feedback) 70%, var(--inkt)); }
.beschikbaarheid li .icoon { flex: none; margin-top: 2px; }
.bezetting { display: grid; gap: 12px; }
.bezetting__nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bezetting__houder { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 14px; background: var(--vlak); }
.bezetting__tabel { border-collapse: collapse; width: 100%; min-width: 900px; font-size: 13px; }
.bezetting__tabel th, .bezetting__tabel td { padding: 8px 10px; border-bottom: 1px solid var(--lijn-zacht); text-align: left; vertical-align: middle; }
.bezetting__tabel tbody tr:last-child > * { border-bottom: 0; }
.bezetting__week { font-weight: 500; white-space: nowrap; }
.bezetting__week span { display: block; }
.bezetting__week.nu { color: var(--merk-donker, var(--inkt)); }
.bezetting__persoon { position: sticky; left: 0; background: var(--vlak); z-index: 1; min-width: 170px; font-weight: 400; }
.bezetting__persoon .persoon { display: flex; gap: 8px; align-items: center; }
.bezetting__persoon .persoon > span:last-child { display: flex; flex-direction: column; }
.bezetting__dagen { white-space: nowrap; }
.bezetting__cel { white-space: nowrap; font-variant-numeric: tabular-nums; cursor: default; }
.bezetting__cel--vrij { background: var(--vlak-2); }
.bezetting__balk { display: block; height: 4px; margin-top: 5px; border-radius: 99px; background: var(--lijn-zacht); overflow: hidden; }
.bezetting__balk span { display: block; height: 100%; border-radius: inherit; background: var(--goed); }
.bezetting__cel--vol .bezetting__balk span { background: var(--status-feedback); }
.bezetting__cel--over { background: color-mix(in srgb, var(--gevaar) 8%, transparent); }
.bezetting__cel--over .bezetting__balk span { background: var(--gevaar); }
.bezetting__cel--over strong { color: var(--gevaar); }
.bezetting__uitleg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.bezetting__uitleg > span { display: inline-flex; align-items: center; gap: 6px; }
.bezetting__tekst { margin: 0; max-width: 80ch; }
.bezetting__stip { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.bezetting__stip--rustig { background: var(--goed); }
.bezetting__stip--vol { background: var(--status-feedback); }
.bezetting__stip--over { background: var(--gevaar); }