/* =====================================================================
   werkdag.css — schouw · wvb · signalen · dagboog · meldingen.
   Op tokens; diepte alleen via de vaste tokens.
===================================================================== */

.wd { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.wd .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin: 10px 0 8px; }
.wd-kop { margin-bottom: 18px; }
.wd-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; }
.wd-kop p { max-width: 780px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; }
.wd .mono { font-family: var(--font-mono); }
.wd .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--schaduw-tegel); margin-bottom: 12px; }
.wd .kaart--strak { padding: 6px 0; }
.wd-blok { display: flex; flex-direction: column; gap: 9px; }
.wd-blok.is-actief { border-color: var(--c-groen); }
.wd-rek { flex: 1; }
.wd-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.wd-sub { font-size: 12px; color: var(--c-ink-3); }
.wd-voetnoot { font-size: 12px; color: var(--c-ink-3); font-style: normal; line-height: 1.5; }
.wd-melding { padding: 10px 14px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; }
.wd-melding.is-blok { background: var(--c-rood-t); color: var(--c-rood); }
.wd-melding.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); }

.wd-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-knop); width: fit-content; }
.wd-knop:hover { border-color: var(--c-ink-3); }
.wd-knop--klein { padding: 6px 12px; font-size: 12px; }
.wd-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--c-creme); }
.wd-knop--primair:hover { background: var(--gradient-primair-hover); }
.wd-knop.is-dicht { opacity: .55; cursor: not-allowed; }

/* rijkoppen + checklists */
.wd-rijkop { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-ui); padding: 0; flex-wrap: wrap; }
div.wd-rijkop { cursor: default; }
.wd-rijkop strong { font-size: 14.5px; font-weight: 800; color: var(--c-ink); }
.wd-rijkop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; }
.wd-checkrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 13px; color: var(--c-ink); }
.wd-checkrij--knop { background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; cursor: pointer; font-family: var(--font-ui); text-align: left; justify-content: flex-start; }
.wd-checkrij--knop i { width: 22px; height: 22px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; background: var(--c-paneel-2); color: var(--c-ink-3); }
.wd-checkrij--knop.is-ok i { background: var(--c-groen); color: var(--c-creme); }
.wd-checkrij--knop:disabled { cursor: default; }
.wd-janee { display: flex; gap: 6px; }
.wd-check { width: 32px; height: 28px; border-radius: 8px; border: 1.5px solid var(--c-lijn-2); background: var(--c-creme); cursor: pointer; font: 800 13px var(--font-ui); color: var(--c-ink-3); }
.wd-check.is-ok { background: var(--c-groen); border-color: var(--c-groen-d); color: var(--c-creme); }
.wd-check.is-nee { background: var(--c-rood); border-color: var(--c-rood); color: var(--c-creme); }

/* signalen + meldingen */
.wd-signaal, .wd-melding-rij { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-family: var(--font-ui); padding: 12px 18px; font-size: 13px; color: var(--c-ink); }
.wd-signaal:last-child, .wd-melding-rij:last-child { border-bottom: 0; }
.wd-signaal:hover, .wd-melding-rij:hover { background: var(--c-creme); }
.wd-signaal i, .wd-melding-rij i { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; background: var(--c-paneel-2); color: var(--c-ink-2); }
.wd-signaal i.is-rood { background: var(--c-rood-t); color: var(--c-rood); }
.wd-signaal i.is-amber { background: var(--c-amber-t); color: var(--c-amber); }
.wd-signaal i.is-groen, .wd-melding-rij i.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); }
.wd-melding-rij i.is-terra { background: var(--c-terra-t); color: var(--c-terra-d); }
.wd-signaal span, .wd-melding-rij span { flex: 1; }
.wd-signaal em, .wd-melding-rij em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; }
.wd-melding-rij.is-ongelezen { background: var(--c-creme); }
.wd-melding-rij.is-ongelezen span { font-weight: 700; }
.wd-balkje { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.wd-chipknop { font: 600 12px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 5px 13px; cursor: pointer; }
.wd-chipknop.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }

/* dagboog */
.wd-doelrij { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: var(--lijndikte) solid var(--c-lijn); }
.wd-doelrij:first-of-type { border-top: 0; }
.wd-doelrij > div { flex: 1; }
.wd-doelrij strong { display: block; font-size: 13px; color: var(--c-ink); margin-bottom: 5px; }
.wd-balk { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--c-paneel-2); overflow: hidden; max-width: 320px; }
.wd-balk b { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); }
.wd-doelrij > span.mono { font-size: 12px; color: var(--c-ink-2); }
.wd-lognoot { display: flex; gap: 12px; padding: 8px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 13px; color: var(--c-ink); }
.wd-lognoot:first-of-type { border-top: 0; }
.wd-lognoot em { font-size: 11px; color: var(--c-ink-3); font-style: normal; flex: none; padding-top: 2px; }
.wd-logform { display: flex; gap: 9px; margin-top: 6px; }
.wd-logform input { flex: 1; padding: 10px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 500 13px var(--font-ui); color: var(--c-ink); }
.wd-visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 1080px) { .wd-tweekolom { grid-template-columns: 1fr; } }

/* Foto-plicht (C2a) + templates (C2b) */
.wd-foto { border: 1px dashed var(--c-lijn); border-radius: 99px; background: none; font: inherit; font-size: 11px; padding: 4px 10px; cursor: pointer; color: var(--c-ink-2); white-space: nowrap; }
.wd-foto.is-vast { border-style: solid; border-color: var(--c-groen-d); color: var(--c-groen-d); font-weight: 700; }
.wd-tpl { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.wd-tpl__punt { font-size: 12.5px; color: var(--c-ink-2); }

/* ---------- Toegezegde uitvoerdata (Planning 2.0) ---------- */
.wd-reserveringen { border-color: var(--c-amber); }
.wd-resrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: var(--lijndikte) solid var(--c-lijn); padding: 11px 0; }
.wd-resrij strong { display: block; font: 700 .84rem var(--font-ui); }
.wd-resrij span { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); }
.wd-resacties { display: flex; gap: 6px; }
.wd-resleeg { padding: 12px 0; font-size: .78rem; color: var(--c-ink-3); }
.wd-resafgehandeld { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px dashed var(--c-lijn);
  padding-top: 9px; margin-top: 4px; font-size: .66rem; color: var(--c-ink-3); }
.wd-resuitleg { margin: 8px 0 0; font: 400 .7rem/1.55 var(--font-ui); color: var(--c-ink-3); }

/* Akkoordknop: bij een blokkade écht uit, met de reden ernaast in plaats van
   erna — anders leer je pas na de klik dat het niet mag. */
.wd-akkoordrij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wd-knop--primair:disabled { background: var(--c-paneel); color: var(--c-ink-3);
  border-color: var(--c-lijn); cursor: not-allowed; }
.wd-blokkade { font: 700 .74rem var(--font-ui); color: var(--c-rood); }
.wd-vrij { font: 700 .74rem var(--font-ui); color: var(--c-groen-d); }