/* Globale taak-modal (component). Vlakke kaart, 1px-rand, geen accentbalk.
   Zelfde popup-structuur als de listgrid-modal (voertuigen, besluit B-50):
   venster bovenin (7vh), kop staat vast, alleen het formulier scrolt en de
   actieknoppen plakken onderaan (scroll-lock). Velden op een vaste
   labelkolom, zodat alles strak uitlijnt. */
.taakmodal { position: fixed; inset: 0; z-index: 90; }
.taakmodal[hidden] { display: none; }
.taakmodal__scrim { position: absolute; inset: 0; background: rgba(28, 42, 57, .45); }
.taakmodal__venster {
  position: relative;
  margin: 7vh auto 0;
  width: min(720px, calc(100vw - 32px));
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(28, 42, 57, .28);
}
.taakmodal__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.taakmodal__kop h2 { margin: 0; font-size: 1.05rem; color: var(--blue-700); }
/* Onderpadding 0: anders schemert het formulier door in de strook onder de
   vastgeplakte actiebalk (zelfde bug als de listgrid-formulier-modal). */
.taakmodal__form { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 10px; overflow: auto; }

/* Koppelingsregel (crosslink naar mail/afspraak) + klikbare vervolgactie. */
.taakmodal__context {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 9px 12px;
  background: var(--bg-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-data);
  color: var(--muted);
  word-break: break-word;
}
.taakmodal__context svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--blue-700); }
.taakmodal__contextlink {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-data);
  font-weight: 600;
  color: var(--blue-700);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.taakmodal__contextlink:hover { color: var(--ink-900); }
.taakmodal__contextlink:focus-visible { outline: 2px solid var(--blue-100); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Velden: label LINKS op een vaste kolom (strakke uitlijning); een tekstveld
   (textarea) blijft volle breedte, want meerregelige invoer hoort niet smal. */
.taakmodal__veld { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.taakmodal__veld > span:first-child { flex: 0 0 96px; font-size: var(--fs-data); font-weight: 600; color: var(--ink-900); text-align: left; }
.taakmodal__veld input,
.taakmodal__veld textarea,
.taakmodal__veld select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-data);
  color: var(--ink-900);
  background: var(--paper);
  resize: vertical;
}
.taakmodal__veld > input,
.taakmodal__veld > select,
.taakmodal__veld > textarea { flex: 1 1 auto; min-width: 0; }
.taakmodal__veld input:focus,
.taakmodal__veld textarea:focus,
.taakmodal__veld select:focus { outline: 2px solid var(--blue-100); outline-offset: 0; border-color: var(--blue-700); }
.taakmodal__veld:has(textarea) { flex-direction: column; align-items: stretch; }
.taakmodal__veld:has(textarea) > span:first-child { flex: none; }

/* Twee velden naast elkaar (einddatum + herinnering). */
.taakmodal__rij { display: flex; gap: 16px; flex-wrap: wrap; }
.taakmodal__rij .taakmodal__veld { flex: 1 1 260px; }
.taakmodal__herinnering { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; }
.taakmodal__herinnering input[name="herinnering-datum"] { flex: 1 1 auto; min-width: 0; }
.taakmodal__herinnering input[name="herinnering-tijd"] { flex: 0 0 92px; }

/* Urgentie als keuzepillen (radiogroep): dot in de urgentiekleur + label. */
.taakmodal__urgentie { display: flex; gap: 8px; flex-wrap: wrap; }
.taakmodal__pil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: var(--fs-data);
  color: var(--ink-900);
  cursor: pointer;
}
.taakmodal__pil input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.taakmodal__pil-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--muted); }
.taakmodal__pil--let-op .taakmodal__pil-dot { background: var(--warn); }
.taakmodal__pil--urgent .taakmodal__pil-dot { background: var(--err); }
.taakmodal__pil:hover { background: var(--bg-50); }
.taakmodal__pil:has(input:checked) {
  border-color: var(--blue-700);
  background: var(--bg-50);
  font-weight: 600;
}
.taakmodal__pil:has(input:focus-visible) { outline: 2px solid var(--blue-100); outline-offset: 2px; }

.taakmodal__fout { margin: 0; color: var(--err); font-size: var(--fs-data); }
/* Scroll-lock: de actieknoppen plakken onderaan het scrollende formulier. */
.taakmodal__acties {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 4px -16px 0;
  padding: 10px 16px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.taakmodal__acties .btn { padding: 5px 12px; font-size: .8rem; }