/* =====================================================================
   commout.css — Module 3.4 · Communicatie · Uitgaand (8 schermen).
   Prototype-navy/mauve → tokens; alleen token-kleuren. Prefix co-.
===================================================================== */

.co { max-width: 1240px; margin: 0 auto; padding: 26px 32px 48px; }
.co-kop { margin-bottom: 14px; }
.co-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; }
.co-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 72ch; }

.co-kaart { padding: 16px 18px; margin-bottom: 16px; }
.co-kaart > .kicker { display: block; margin-bottom: 12px; }
.co-kaart > strong { display: block; font-size: .9rem; }
.co-kaart--breed { margin-top: 2px; }
.co-sub { display: block; font: 500 .7rem var(--font-ui); color: var(--c-ink-3); margin: 3px 0 13px; }
.co-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 16px; align-items: start; margin-top: 14px; }
.co-grid--half { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { .co-grid, .co-grid--half { grid-template-columns: 1fr; } }

/* kanaal-iconen */
.co-kan { font: 600 .74rem var(--font-mono); color: var(--c-lijn-2); }
.co-kan.is-mail { color: var(--c-ink-2); }
.co-kan.is-wa { color: var(--c-groen); }
.co-kan.is-app { font-size: .52rem; color: var(--c-ink-3); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 5px; padding: 1px 4px; }

/* chips + switch */
.co-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.co-chips--vol { margin-bottom: 14px; }
.co-chips--vol .co-chip { flex: 1; text-align: center; }
.co-chips__scheider { width: 1px; align-self: stretch; background: var(--c-lijn-2); margin: 2px 4px; }
.co-chip { padding: 6px 13px; border-radius: 8px; border: 1.5px solid var(--c-lijn-2); cursor: pointer; font: 600 .7rem var(--font-ui); white-space: nowrap; background: #fff; color: var(--c-ink-2); }
.co-chip.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 700; }
.co-switch { position: relative; width: 38px; height: 21px; border: none; border-radius: var(--radius-pill); background: var(--c-lijn-2); cursor: pointer; flex: none; }
.co-switch i { position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.co-switch.is-aan { background: var(--c-groen-d); }
.co-switch.is-aan i { left: 19px; }
.co-telling { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); margin-left: 6px; }

/* ---- overzicht ---- */
.co-rij { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 8px; }
.co-rij__tijd { font-size: .64rem; color: var(--c-groen-d); width: 104px; flex: none; }
.co-rij > div { flex: 1; min-width: 0; }
.co-rij > div strong { display: block; font-size: .76rem; }
.co-rij > div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }
.co-feedrij { display: flex; align-items: center; gap: 11px; padding: 8px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.co-feedrij > .mono { font-size: .62rem; color: var(--c-ink-3); width: 44px; flex: none; }
.co-feedrij > div { flex: 1; min-width: 0; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-feedrij .chip { flex: none; font-size: .58rem; }
.co-meer { display: inline-block; margin-top: 10px; font: 600 .7rem var(--font-ui); color: var(--c-groen-d); }
.co-kaart--fail { border-color: var(--c-terra); }
.co-fail { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-terra); border-left: 3px solid var(--c-terra); margin-bottom: 9px; }
.co-fail > div { flex: 1; min-width: 0; }
.co-fail strong { display: block; font-size: .76rem; }
.co-fail span { font: 500 .66rem var(--font-ui); color: var(--c-terra-d); }
.co-kanaalrij { margin-bottom: 13px; }
.co-kanaalrij strong { font-size: .76rem; }
.co-kanaalrij span { float: right; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); }
.co-balk { height: 8px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; margin-top: 5px; }
.co-balk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-ink-2); }
.co-balk i.is-groen { background: var(--c-groen); }
.co-balk i.is-amber { background: var(--c-amber); }
.co-wawarn { display: flex; gap: 10px; margin-top: 13px; padding: 11px 13px; border-radius: 10px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); font: 500 .7rem/1.5 var(--font-ui); }
.co-wawarn span { color: var(--c-amber); flex: none; }

/* ---- journeys ---- */
.co-jgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
@media (max-width: 1000px) { .co-jgrid { grid-template-columns: 1fr; } }
.co-jgrid .kicker { display: block; margin-bottom: 9px; }
.co-jlijst { display: flex; flex-direction: column; gap: 9px; }
.co-jkaart { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border-radius: 13px; border: 1.5px solid var(--c-lijn); background: #fff; cursor: pointer; text-align: left; font: inherit; }
.co-jkaart.is-actief { border-color: var(--c-ink); background: var(--c-paneel); }
.co-jkaart__kop { display: flex; align-items: center; gap: 9px; width: 100%; }
.co-jkaart__ic { font-size: .9rem; color: var(--c-groen-d); }
.co-jkaart__kop strong { flex: 1; font-size: .76rem; line-height: 1.2; }
.co-jkaart__kop i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); flex: none; }
.co-jkaart__kop i.is-aan { background: var(--c-groen); }
.co-jkaart__voet { display: flex; justify-content: space-between; width: 100%; font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.co-nieuw { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; border: 1.5px dashed var(--c-lijn-2); border-radius: 11px; background: transparent; font: 600 .7rem var(--font-ui); color: var(--c-ink-3); text-align: center; cursor: pointer; }
.co-nieuw:hover { color: var(--c-ink); border-color: var(--c-ink-3); }
.co-nieuw--stap { width: auto; align-self: center; margin-top: 0; padding: 7px 14px; }
.co-jboven { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .co-jboven { grid-template-columns: 1fr; } }
.co-jboven .co-kaart { margin-bottom: 0; }
.co-funnelrij { margin-bottom: 10px; }
.co-funnelrij > div { display: flex; justify-content: space-between; margin-bottom: 4px; font: 600 .72rem var(--font-ui); }
.co-funnelrij .mono { font-size: .64rem; font-weight: 500; color: var(--c-ink-3); }
.co-tweeweg { background: var(--c-ink); border-radius: 14px; padding: 16px 18px; color: #fff; }
.co-tweeweg .kicker { color: color-mix(in srgb, #fff 60%, transparent); display: block; margin-bottom: 8px; }
.co-tweeweg p { margin: 0 0 12px; font: 400 .72rem/1.5 var(--font-ui); color: color-mix(in srgb, #fff 82%, transparent); }
.co-tweeweg .btn { width: 100%; justify-content: center; }
.co-builder { padding: 20px; }
.co-builder__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.co-builder__kop strong { display: block; font-size: .96rem; }
.co-builder__kop span { font: 500 .7rem var(--font-ui); color: var(--c-ink-3); }
.co-builder__kop .chip { border: none; cursor: pointer; font: 600 .66rem var(--font-ui); }
.co-stappen { display: flex; flex-direction: column; align-items: stretch; }
.co-stap { border-radius: 13px; padding: 14px 16px; border: 1.5px solid var(--c-lijn); background: #fff; }
.co-stap--trigger { border-color: var(--c-groen-d); background: var(--c-groen-t); }
.co-stap--wacht { border-color: var(--c-lijn-2); background: var(--c-creme); }
.co-stap--split { border-color: var(--c-amber); background: var(--c-amber-t); }
.co-lijn { display: block; width: 2px; height: 16px; background: var(--c-lijn-2); margin: 0 auto; }
.co-stappen > .co-lijn:last-of-type { height: 12px; }
.co-stap__trig { display: flex; align-items: center; gap: 10px; }
.co-stap__trig > span { width: 30px; height: 30px; border-radius: 8px; background: var(--c-groen-d); color: #fff; display: grid; place-items: center; font: 700 .74rem var(--font-mono); flex: none; }
.co-stap__trig--wacht > span { background: var(--c-paneel); color: var(--c-ink-2); }
.co-stap__trig strong { display: block; font-size: .78rem; }
.co-stap__trig div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }
.co-stap__berkop { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.co-stap__berkop strong { flex: 1; font-size: .8rem; }
.co-stap__berkop .chip { font-size: .56rem; }
.co-stap__meta { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.co-fallback { font-size: .6rem; color: var(--c-amber); background: var(--c-amber-t); padding: 2px 8px; border-radius: var(--radius-pill); }
.co-stap__cta { margin-top: 9px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); }
.co-stap__cta strong { font-size: .7rem; }
.co-stap__cta .mono { margin-left: auto; font-size: .62rem; color: var(--c-ink-3); }
.co-stap__stats { margin-top: 8px; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); }
.co-stap__stats strong { font-family: var(--font-mono); color: var(--c-groen-d); }
.co-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.co-ab > div { padding: 10px 12px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); }
.co-ab strong { display: block; font-size: .72rem; margin-bottom: 4px; }
.co-ab span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.co-ab b { color: var(--c-groen-d); }
.co-stap__splitkop { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: .78rem; }
.co-stap__splitkop span { color: var(--c-amber); font-family: var(--font-mono); }
.co-split { display: flex; gap: 9px; }
.co-split > div { flex: 1; padding: 9px 12px; border-radius: 9px; font: 600 .72rem var(--font-ui); }
.co-split__ja { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); color: var(--c-groen-d); }
.co-split__nee { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); color: var(--c-ink); }
.co-split span { display: block; font-size: .56rem; margin-bottom: 2px; }

/* ---- automatiseringen ---- */
.co-autokop { font: 500 .76rem var(--font-ui); color: var(--c-ink-2); margin-bottom: 10px; }
.co-autohead, .co-autorij { display: grid; grid-template-columns: 1.9fr 1.4fr 96px 84px 84px 48px 74px; gap: 12px; align-items: center; }
.co-autohead { padding: 8px 14px; font-size: .56rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); }
.co-fasegroep { margin-bottom: 18px; overflow-x: auto; }
.co-fasegroep .co-autohead, .co-fasegroep .co-autorij { min-width: 660px; }
.co-fasegroep__kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.co-fasegroep__kop i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-groen-d); }
.co-fasegroep__kop strong { font-size: .8rem; }
.co-fasegroep__kop .mono { font-size: .62rem; color: var(--c-ink-3); }
.co-autorij { padding: 10px 14px; border-radius: 10px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 6px; }
.co-autorij.is-uit { opacity: .55; }
.co-autorij > div strong { display: block; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-autorij > div > span { display: flex; gap: 6px; margin-top: 3px; }
.co-autorij .chip { font-size: .52rem; }
.co-autorij > span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); }
.co-ontv { text-transform: capitalize; }
.co-kans { display: flex; gap: 6px; align-items: center; }
.co-tpllink { background: none; border: none; cursor: pointer; text-align: left; font: 600 .72rem var(--font-ui); color: var(--c-groen-d); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-groen-d) 35%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-acties { display: flex; align-items: center; gap: 8px; }

/* ---- templates ---- */
.co-tplgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, .9fr); gap: 16px; align-items: start; margin-top: 14px; }
@media (max-width: 1100px) { .co-tplgrid { grid-template-columns: 1fr; } }
.co-tplrij { display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 10px 11px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; cursor: pointer; text-align: left; font: inherit; }
.co-tplrij:hover { background: var(--c-creme); }
.co-tplrij.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); }
.co-tplrij > div { flex: 1; min-width: 0; }
.co-tplrij strong { display: block; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-tplrij > div > span { display: flex; gap: 5px; margin-top: 3px; }
.co-tplrij .chip { font-size: .52rem; }
.co-tplrij__kans { display: flex; gap: 4px; flex: none; }
.co-tplnaam { display: block; font-size: .92rem; }
.co-tplmeta { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); margin: 2px 0 12px; }
.co-tabs { display: flex; gap: 5px; margin-bottom: 14px; }
.co-boxchip { padding: 7px 14px; border-radius: 8px; cursor: pointer; font: 600 .7rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-2); }
.co-boxchip.is-actief { border-color: var(--c-ink); background: var(--c-paneel); color: var(--c-ink); font-weight: 700; }
.co-veld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.co-veld input, .co-veld textarea, .co-veld select { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1.5px solid var(--c-lijn-2); border-radius: 9px; font: 500 .76rem/1.55 var(--font-ui); color: var(--c-ink); background: #fff; resize: vertical; }
.co-wastatus { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.co-telling.mono { display: block; text-align: right; font-size: .62rem; margin: -8px 0 10px; }
.co-vars { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.co-var { padding: 5px 10px; border-radius: 7px; border: var(--lijndikte) solid var(--c-groen); background: var(--c-groen-t); cursor: pointer; font-size: .6rem; color: var(--c-groen-d); }
.co-tplacties { display: flex; gap: 9px; flex-wrap: wrap; }
.co-preview { padding: 0; overflow: hidden; margin-bottom: 16px; }
.co-preview > .kicker { display: block; padding: 8px 14px; background: var(--c-paneel); border-bottom: var(--lijndikte) solid var(--c-lijn); margin: 0; }
.co-preview > strong { display: block; padding: 14px 18px 0; font-size: .84rem; }
.co-preview__van { display: block; padding: 2px 18px 0; font: 500 .64rem var(--font-ui); color: var(--c-ink-3); }
.co-preview > p { margin: 0; padding: 12px 18px 16px; font: 500 .76rem/1.6 var(--font-ui); white-space: pre-wrap; }
.co-preview--wa { background: var(--c-creme); }
.co-wabubbel { margin: 16px; max-width: 88%; background: #fff; border-radius: 2px 12px 12px 12px; padding: 11px 13px; box-shadow: var(--schaduw-tegel); }
.co-wabubbel b { display: block; font-size: .68rem; color: var(--c-groen); margin-bottom: 3px; }
.co-wabubbel p { margin: 0; font: 500 .76rem/1.5 var(--font-ui); white-space: pre-wrap; }
.co-wabubbel em { display: block; text-align: right; font: 500 .58rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 4px; }
.co-preview--plak { position: sticky; top: 12px; }

/* ---- levering ---- */
.co-rij--keten { background: #fff; }
.co-ketenic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; font: 600 .84rem var(--font-mono); color: var(--c-groen-d); background: var(--c-groen-t); }
.co-toggelrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.co-toggelrij strong { display: block; font-size: .76rem; }
.co-toggelrij span { font: 400 .66rem var(--font-ui); color: var(--c-ink-3); }
.co-capkop { display: block; font-size: .76rem; margin: 14px 0 9px; }
.co-consentrij { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.co-consentrij strong { flex: 1; font-size: .78rem; }
.co-consentrij .chip { font-size: .56rem; }
.co-consentres { width: 260px; text-align: right; font: 600 .7rem var(--font-ui); }
.co-consentres.is-ok { color: var(--c-groen-d); }
.co-consentres.is-nee { color: var(--c-rood); }

/* ---- handmatig ---- */
.co-mangrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 14px; max-width: 940px; }
@media (max-width: 900px) { .co-mangrid { grid-template-columns: 1fr; } }
.co-mangrid .kicker { display: block; margin-bottom: 8px; }
.co-manverstuur { width: 100%; justify-content: center; margin-top: 4px; }

/* ---- verzendlog ---- */
.co-loghead, .co-logrij { display: grid; grid-template-columns: 52px 1.4fr 74px 1.6fr 66px 100px 86px; gap: 12px; align-items: center; }
.co-loghead { padding: 8px 14px; font-size: .56rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); }
.co-logrij { padding: 11px 14px; border-radius: 10px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 6px; }
.co-logrij > .mono { font-size: .64rem; color: var(--c-ink-3); }
.co-logrij strong { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-logorder { color: var(--c-groen-d); }
.co-logtpl { font: 500 .72rem var(--font-ui); color: var(--c-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-logrij .chip { font-size: .58rem; }

/* ---- instellingen ---- */
.co-typerij { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 10px; margin-bottom: 10px; }
.co-typerij.is-trans { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.co-typerij.is-mkt { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); }
.co-typerij > span { font: 700 .78rem var(--font-ui); flex: none; }
.co-typerij.is-trans > span { color: var(--c-groen-d); }
.co-typerij.is-mkt > span { color: var(--c-amber); }
.co-typerij strong { display: block; font-size: .76rem; }
.co-typerij div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }
.co-kaart .bs-form { margin-bottom: 12px; }
.co-wakaarten { display: flex; gap: 12px; flex-wrap: wrap; }
.co-wakaart { flex: 1; min-width: 160px; padding: 13px 15px; border-radius: 11px; }
.co-wakaart strong { display: block; font-size: 1.2rem; }
.co-wakaart span { font: 600 .7rem var(--font-ui); }
.co-wakaart.is-groen { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); color: var(--c-groen-d); }
.co-wakaart.is-amber { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); color: var(--c-ink); }
.co-wakaart.is-rood { background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); color: var(--c-rood); }

/* WA-goedkeuringsflow (D4b) */
.co-wareden { border: 1px solid var(--c-rood); border-radius: 12px; padding: 9px 12px; font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
.co-waflow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.co-wanoot { font-size: 11.5px; color: var(--c-ink-2); }

/* ---- FT-5.2a · verzendlog server-side (zoek/filter/paginering) ---- */
.co-logbalk { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.co-zoekveld { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 10px; background: #fff; color: var(--c-ink); font: 500 .74rem var(--font-ui); }
.co-zoekveld:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); }
.co-logbalk .co-telling { margin-left: auto; }
.co-logpag { display: flex; gap: 8px; justify-content: center; margin: 12px 0 2px; }
.co-logpag .btn[disabled] { opacity: .4; cursor: not-allowed; }
.co-loglaad { padding: 24px; text-align: center; color: var(--c-ink-3); font: 500 .8rem var(--font-ui); }