/* SYSTJEM 11.6.0 — communicatie, veilige verzending en mobiele afwerking */
.communication-heading{gap:18px}
.communication-heading .communication-status{white-space:nowrap;background:#e9e2ca;color:#324738;border:1px solid #d4c79c}
.communication-tabs{position:relative;display:flex;gap:7px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:8px;margin-bottom:18px}
.communication-tabs a{scroll-snap-align:start;min-height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.communication-tabs a.active{background:#173e32!important;color:#fff!important;box-shadow:none!important}
.communication-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.communication-metrics article{min-width:0;padding:18px;border:1px solid #d9ddd5;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(29,35,31,.05)}
.communication-metrics span,.communication-metrics small{display:block;color:#687066}
.communication-metrics strong{display:block;margin:7px 0 4px;font-size:24px;color:#173e32;overflow-wrap:anywhere}
.communication-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
.communication-overview .communication-card{min-height:190px;display:flex!important;flex-direction:column;align-items:flex-start}
.communication-overview .communication-card p{flex:1}
.communication-inbox-layout{display:grid;grid-template-columns:minmax(280px,390px) minmax(0,1fr);gap:18px;align-items:start}
.communication-compose,.communication-outbox{min-width:0;margin:0!important}
.communication-compose form{display:grid;gap:10px}
.communication-compose textarea{min-height:220px;resize:vertical}
.communication-compose code,.template-token-list code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;background:#f1f3ee;border:1px solid #dde2da;border-radius:7px;padding:3px 6px;color:#24493d}
.communication-outbox .calhead{align-items:center;margin-bottom:12px}
.outbox-count{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:999px;background:#173e32;color:#fff;font-weight:850}
.outbox-list{display:grid;gap:9px;max-height:780px;overflow:auto;padding-right:3px;overscroll-behavior:contain}
.outbox-item{border:1px solid #dfe3dc;border-radius:13px;background:#fbfcfa;overflow:hidden}
.outbox-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:13px;min-height:62px}
.outbox-item summary::-webkit-details-marker{display:none}
.outbox-main{min-width:0;display:block}
.outbox-main strong,.outbox-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outbox-main strong{color:#24322c}
.outbox-main small{margin-top:4px;color:#737c74}
.outbox-status{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:4px 8px;border-radius:999px;background:#eceee9;color:#4d594f;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.status-verzonden .outbox-status{background:#dfeee2;color:#235b35}
.status-testmodus .outbox-status{background:#eee6cb;color:#715a1f}
.status-mislukt .outbox-status,.status-ongeldig .outbox-status,.status-geblokkeerd .outbox-status{background:#f5dddd;color:#862e2e}
.outbox-detail{padding:0 14px 14px;border-top:1px solid #e4e7e1;background:#fff}
.outbox-detail p{white-space:normal;overflow-wrap:anywhere;line-height:1.55}
.communication-empty-state{padding:24px;text-align:center;border:1px dashed #ccd3cb;border-radius:12px;color:#6a746d}
.outbox-danger{margin-top:14px;border-top:1px solid #e1e4df;padding-top:12px}
.outbox-danger summary{cursor:pointer;color:#8a3636;font-weight:800}
.outbox-danger form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:12px}
.outbox-danger form label{grid-column:1/-1}
.mail-safety-banner{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px;padding:14px 16px;border-radius:13px;background:#edf3ea;border:1px solid #d2dfcf}
.mail-safety-banner strong{color:#173e32}
.mail-safety-banner span{color:#59675f;text-align:right}
.communication-test-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,460px);gap:20px;align-items:center;margin-top:18px;padding:18px;border:1px solid #d8ded6;border-radius:14px;background:#f8faf6}
.communication-test-card h4{margin:0 0 6px}
.communication-test-card p{margin:0;color:#687066}
.communication-test-card form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.communication-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.communication-template-card{margin:0!important;min-width:0}
.communication-template-card form{display:grid;gap:9px}
.communication-template-card textarea{min-height:300px;resize:vertical;font-family:inherit;line-height:1.5}
.template-help{margin-top:18px!important}
.template-token-list{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.live-confirm-line{border:1px solid #d8c792!important;background:#fff9e8!important;color:#4e431d!important}
.communication-setup .settings-grid{align-items:start}
.communication-setup .setting-card{min-width:0}
.communication-setup input,.communication-setup select,.communication-setup textarea,.communication-compose input,.communication-compose select,.communication-compose textarea,.communication-template-card input,.communication-template-card textarea{max-width:100%}

@media(max-width:1050px){
  .communication-inbox-layout{grid-template-columns:1fr}
  .communication-compose textarea{min-height:180px}
  .outbox-list{max-height:none}
}
@media(max-width:800px){
  .communication-heading{align-items:flex-start!important}
  .communication-metrics{grid-template-columns:1fr 1fr}
  .communication-metrics article:first-child{grid-column:1/-1}
  .communication-overview,.communication-template-grid{grid-template-columns:1fr}
  .communication-overview .communication-card{min-height:0}
  .communication-test-card{grid-template-columns:1fr}
  .mail-safety-banner{align-items:flex-start;flex-direction:column}
  .mail-safety-banner span{text-align:left}
}
@media(max-width:560px){
  .communication-heading h2{font-size:30px!important}
  .communication-heading .communication-status{max-width:100%;white-space:normal}
  .communication-tabs{margin-left:-8px;margin-right:-8px;border-radius:0;padding-left:12px;padding-right:12px}
  .communication-tabs a{min-height:46px;padding:10px 13px}
  .communication-metrics{grid-template-columns:1fr;gap:10px}
  .communication-metrics article:first-child{grid-column:auto}
  .communication-metrics article{padding:15px}
  .communication-inbox-layout{gap:12px}
  .communication-compose,.communication-outbox,.communication-template-card,.communication-setup{padding:16px!important;border-radius:14px!important}
  .communication-compose input,.communication-compose select,.communication-compose textarea,.communication-template-card input,.communication-template-card textarea,.communication-setup input,.communication-setup select{font-size:16px!important;min-height:48px}
  .communication-compose textarea,.communication-template-card textarea{min-height:230px}
  .outbox-item summary{grid-template-columns:1fr;gap:8px;padding:12px}
  .outbox-status{justify-self:start}
  .outbox-main strong,.outbox-main small{white-space:normal;overflow-wrap:anywhere}
  .communication-test-card{padding:14px}
  .communication-test-card form{grid-template-columns:1fr}
  .communication-test-card button,.communication-compose button,.communication-template-card button,.setup-save{width:100%;min-height:48px}
  .outbox-danger form{grid-template-columns:1fr}
  .outbox-danger form label{grid-column:auto}
}
@supports(padding:max(0px)){
  @media(max-width:800px){
    .communication-tabs{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  }
}