/* Fase 1: aanvullingen op app.css voor notities, taken, dagprioriteiten, documenten en signalen.
   Alleen tokens uit app.css (:root) gebruiken. */

/* Huisstijlkoppeling voor de gedeelde e-mailcomposer (email-composer.js/.css, ongewijzigd
   overgenomen uit het O-Care-CRM, zie email-composer.md). Zelfde aanpak als bij O-Care: alleen
   deze variabelen zetten, de module zelf niet aanpassen. */
:root {
  --ec-primair: var(--navy);
  --ec-accent: var(--roze);
  --ec-accent-donker: var(--roze-donker);
  --ec-lijn: var(--lijn);
  --ec-tekst: var(--inkt);
  --ec-grijs: var(--tekst-zacht);
  --ec-font: var(--font);
  --ec-werkbalk-bg: var(--grond);
}
.notitie-invoer { display: grid; grid-template-columns: 170px 1fr; gap: .6rem; align-items: start; }
.notitie-invoer select, .notitie-invoer textarea, .prio-invoer input, .prio-invoer select {
  padding: .6rem .8rem; border: 1.5px solid var(--lijn); border-radius: var(--r-s); background: #fff; font: inherit; color: var(--inkt);
}
.notitie-invoer textarea { grid-column: 1 / -1; resize: vertical; min-height: 70px; }
.notitie-invoer .btn { justify-self: start; }
.notitie-invoer select:focus, .notitie-invoer textarea:focus, .prio-invoer input:focus, .prio-invoer select:focus { border-color: var(--navy); outline: none; }

.prio-invoer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .5rem; align-items: center; }

.lijst-item .vink { cursor: pointer; }
.lijst-item .btn-tekst { flex: none; }

.kaartje { position: relative; }
.kaartje.te-lang { border-color: var(--let-op); background: var(--let-op-tint); }
.te-lang-tekst { color: #8a6200; font-size: .72rem; font-weight: 600; }

.inlees-zone { border: 2px dashed var(--lijn); transition: border-color .15s, background .15s; }
.inlees-zone.sleep-over { border-color: var(--roze); background: var(--roze-tint); }

.tl-tekst .btn-tekst { font-size: .72rem; padding: 0; }

@media (max-width: 700px) {
  .notitie-invoer, .prio-invoer { grid-template-columns: 1fr; }
}