/* EmailComposer: opmaak van de herbruikbare e-mailcomposer (email-composer.js).
   Kleuren en lettertype komen uit de host-app via CSS-variabelen met een neutrale fallback:
   --ec-primair (knoppen, koppen), --ec-accent (focus, actieve opmaak), --ec-lijn, --ec-tekst, --ec-grijs,
   --ec-font. In het O-Care CRM worden die in crm.css op :root gezet. */
.ec-achtergrond {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 30, 50, .5);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  font-family: var(--ec-font, var(--font-body, system-ui, sans-serif));
  color: var(--ec-tekst, var(--ink, #1d2b3a));
}
.ec-kaart {
  background: #fff; border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
  width: 100%; max-width: 820px; max-height: calc(100vh - 2.4rem);
  display: flex; flex-direction: column; overflow: hidden;
}
.ec-kaart.ec-bezig { pointer-events: none; opacity: .85; }
.ec-kop { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem .7rem; border-bottom: 1px solid var(--ec-lijn, var(--line, #e3e9f0)); }
.ec-kop h2 { font-size: 1.1rem; margin: 0; flex: 1; color: var(--ec-primair, var(--navy, #1d3356)); }
.ec-afzender { font-size: .78rem; color: var(--ec-grijs, var(--grey, #5b6b76)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.ec-sluiten { border: none; background: none; font-size: 1.5rem; line-height: 1; color: var(--ec-grijs, var(--grey, #5b6b76)); cursor: pointer; padding: 0 .2rem; }
.ec-sluiten:hover { color: var(--ec-primair, var(--navy, #1d3356)); }

.ec-regel { display: flex; align-items: flex-start; gap: .6rem; padding: .35rem 1.3rem; border-bottom: 1px solid var(--ec-lijn, var(--line, #e3e9f0)); }
.ec-regel > label { flex: none; width: 5.2rem; padding-top: .45rem; font-size: .78rem; font-weight: 600; color: var(--ec-grijs, var(--grey, #5b6b76)); text-transform: uppercase; letter-spacing: .04em; }
.ec-regel input.ec-onderwerp, .ec-adressen input {
  flex: 1; min-width: 8rem; border: none; outline: none; background: transparent;
  font: inherit; font-size: .92rem; color: inherit; padding: .4rem 0;
}
.ec-adressen { flex: 1; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; cursor: text; min-height: 2.1rem; }
.ec-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: color-mix(in srgb, var(--ec-accent, var(--blue, #2bcba7)) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--ec-accent, var(--blue, #2bcba7)) 45%, transparent);
  color: var(--ec-tekst, var(--ink, #1d2b3a)); border-radius: 999px; padding: .15rem .3rem .15rem .6rem; font-size: .82rem; max-width: 100%;
}
.ec-chip-fout { background: #fdece8; border-color: #f2a48f; color: #b3341a; }
.ec-chip button { border: none; background: none; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; padding: 0 .25rem; opacity: .7; }
.ec-chip button:hover { opacity: 1; }

.ec-werkbalk { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem 1.3rem; border-bottom: 1px solid var(--ec-lijn, var(--line, #e3e9f0)); background: var(--ec-werkbalk-bg, #f7f8fa); flex-wrap: wrap; }
.ec-knoppen { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.ec-knoppen button {
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--ec-tekst, var(--ink, #1d2b3a)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-family: Georgia, 'Times New Roman', serif; font-size: .95rem;
}
.ec-knoppen button:hover { background: #fff; border-color: var(--ec-lijn, var(--line, #e3e9f0)); }
.ec-knoppen button.actief { background: color-mix(in srgb, var(--ec-accent, var(--blue, #2bcba7)) 18%, #fff); border-color: var(--ec-accent, var(--blue, #2bcba7)); color: var(--ec-primair, var(--navy, #1d3356)); }
.ec-knoppen button svg { display: block; }
.ec-scheiding { width: 1px; height: 18px; background: var(--ec-lijn, var(--line, #e3e9f0)); margin: 0 .3rem; }
.ec-sjabloon {
  font: inherit; font-size: .84rem; padding: .35rem .6rem; border: 1px solid var(--ec-lijn, var(--line, #e3e9f0)); border-radius: 8px;
  background: #fff; color: var(--ec-tekst, var(--ink, #1d2b3a)); max-width: 280px;
}

.ec-editor {
  flex: 1; min-height: 260px; overflow-y: auto; padding: 1rem 1.3rem; outline: none;
  font-size: .95rem; line-height: 1.55; word-break: break-word;
}
.ec-editor:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ec-accent, var(--blue, #2bcba7)) 35%, transparent); }
.ec-editor.ec-sleep { background: color-mix(in srgb, var(--ec-accent, var(--blue, #2bcba7)) 10%, #fff); }
.ec-editor:empty::before, .ec-editor[data-leeg]::before { content: attr(data-placeholder); color: var(--ec-grijs, var(--grey, #5b6b76)); pointer-events: none; }
.ec-editor p { margin: 0 0 .1rem; }
.ec-editor img { max-width: 100%; height: auto; border-radius: 4px; }
.ec-editor a { color: var(--ec-accent-donker, var(--blue-dark, #1fae8f)); }
.ec-editor ul, .ec-editor ol { margin: .2rem 0 .4rem 1.4rem; }
.ec-editor blockquote { margin: .4rem 0; padding: .2rem .8rem; border-left: 3px solid var(--ec-lijn, var(--line, #e3e9f0)); color: var(--ec-grijs, var(--grey, #5b6b76)); }
.ec-editor table { border-collapse: collapse; }
.ec-editor td, .ec-editor th { border: 1px solid var(--ec-lijn, var(--line, #e3e9f0)); padding: .2rem .5rem; }
.ec-handtekening { color: inherit; }
mark.ec-onbekend { background: #fff2a8; color: #6b5300; border-radius: 3px; padding: 0 .15rem; }

.ec-voet { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.3rem; border-top: 1px solid var(--ec-lijn, var(--line, #e3e9f0)); }
.ec-fout { color: #b3341a; font-size: .84rem; display: none; flex: 1; }
.ec-voet-knoppen { display: flex; gap: .6rem; margin-left: auto; }
.ec-knop { font: inherit; font-weight: 700; font-size: .85rem; border: none; border-radius: 8px; padding: .6rem 1.2rem; cursor: pointer; }
.ec-knop-primair { background: var(--ec-primair, var(--navy, #1d3356)); color: #fff; }
.ec-knop-primair:hover { filter: brightness(1.12); }
.ec-knop-primair:disabled { opacity: .6; cursor: wait; }
.ec-knop-stil { background: #fff; color: var(--ec-primair, var(--navy, #1d3356)); border: 1.5px solid var(--ec-lijn, var(--line, #e3e9f0)); }
.ec-knop-stil:hover { border-color: var(--ec-primair, var(--navy, #1d3356)); }

@media (max-width: 640px) {
  .ec-achtergrond { padding: 0; align-items: stretch; }
  .ec-kaart { max-height: 100vh; border-radius: 0; }
  .ec-regel > label { width: 3.6rem; }
}

/* Weergave van een opgeslagen/ontvangen e-mail in de host-app (zelfde sanitizer). */
.ec-weergave { font-size: .92rem; line-height: 1.5; word-break: break-word; }
.ec-weergave img { max-width: 100%; height: auto; }
.ec-weergave p { margin: 0 0 .1rem; }
.ec-weergave ul, .ec-weergave ol { margin: .2rem 0 .4rem 1.4rem; }
.ec-weergave-tekst { white-space: pre-wrap; font-size: .9rem; line-height: 1.5; }

/* Voorbeeld (knop "Voorbeeld" in de voet): de mail zoals de ontvanger hem ziet, samenvoegvelden ingevuld. */
.ec-knoppen.ec-uit { opacity: .35; pointer-events: none; }
.ec-kaart.ec-in-voorbeeld .ec-sjabloon { opacity: .35; pointer-events: none; }
.ec-voorbeeld-vak { flex: 1; min-height: 260px; overflow-y: auto; padding: 1rem 1.3rem; background: var(--ec-werkbalk-bg, #f7f8fa); }
.ec-voorbeeld-uitleg { margin: 0 0 .7rem; font-size: .8rem; color: var(--ec-grijs, var(--grey, #5b6b76)); }
.ec-voorbeeld-mail { background: #fff; border: 1px solid var(--ec-lijn, var(--line, #e3e9f0)); border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .25); }
.ec-voorbeeld-kop { padding: .8rem 1.1rem; border-bottom: 1px solid var(--ec-lijn, var(--line, #e3e9f0)); font-size: .85rem; display: grid; gap: .25rem; }
.ec-voorbeeld-kop span { display: inline-block; width: 5.5rem; color: var(--ec-grijs, var(--grey, #5b6b76)); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.ec-voorbeeld-inhoud { padding: 1.1rem 1.1rem 1.3rem; font-size: .95rem; line-height: 1.55; word-break: break-word; }
.ec-voorbeeld-inhoud p { margin: 0 0 .1rem; }
.ec-voorbeeld-inhoud img { max-width: 100%; height: auto; }
.ec-voorbeeld-inhoud ul, .ec-voorbeeld-inhoud ol { margin: .2rem 0 .4rem 1.4rem; }
.ec-voorbeeld-inhoud a { color: var(--ec-accent-donker, var(--blue-dark, #1fae8f)); }
.ec-knop-stil.actief { border-color: var(--ec-accent, var(--blue, #2bcba7)); background: color-mix(in srgb, var(--ec-accent, var(--blue, #2bcba7)) 12%, #fff); }