/* Zelfservice e-mailkoppelingen, strikt per geselecteerde organisatie */
.mail-security-note {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:11px;
  margin-top:18px;
  padding:13px;
  border:1px solid #c7d7c4;
  border-radius:12px;
  background:#edf5eb;
}
.mail-security-note > span {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:11px;
  background:#d6e7d1;
  color:#426444;
  font-size:17px;
  font-weight:850;
}
.mail-security-note strong,.mail-security-note p { display:block;margin:0; }
.mail-security-note strong { color:#39543c;font-size:13px; }
.mail-security-note p { margin-top:3px;color:#667163;font-size:11px;line-height:1.45; }
.mailbox-connection-list { display:grid;gap:13px;margin-top:16px; }
.mailbox-connection-row {
  padding:15px;
  border:1px solid #dfd2c4;
  border-radius:14px;
  background:#fff;
}
.mailbox-connection-row > header {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.mailbox-provider-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:11px;
  color:#fff;
  font-size:15px;
  font-weight:850;
}
.mailbox-provider-icon.transip { background:linear-gradient(145deg,#a65d42,#cf8362); }
.mailbox-provider-icon.microsoft { background:linear-gradient(145deg,#1769a8,#3593d3); }
.mailbox-connection-row h3 { overflow:hidden;margin:0;color:#3e3630;font-family:inherit;font-size:13px;text-overflow:ellipsis;white-space:nowrap; }
.mailbox-connection-row header p { margin:3px 0 0;color:#7e756c;font-size:10px; }
.mailbox-state { display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:10px;background:#eee8e0;color:#766b61;font-size:9px;font-style:normal;font-weight:800;white-space:nowrap; }
.mailbox-state i { width:7px;height:7px;border-radius:50%;background:#a3978a; }
.mailbox-state.connected { background:#e3eee0;color:#4f6e50; }
.mailbox-state.connected i { background:#6e946b; }
.mailbox-state.syncing { background:#eef0dc;color:#687044; }
.mailbox-state.syncing i { background:#929a5c; }
.mailbox-state.warning { background:#f7e6cf;color:#946027; }
.mailbox-state.warning i { background:#c9873e; }
.mailbox-connection-row dl { display:grid;grid-template-columns:1fr .65fr 1.25fr;gap:6px;margin:13px 0 0; }
.mailbox-connection-row dl div { min-width:0;padding:8px;border-radius:8px;background:#f7f2ec; }
.mailbox-connection-row dt { color:#8b8177;font-size:8px;font-weight:750;text-transform:uppercase;letter-spacing:.35px; }
.mailbox-connection-row dd { overflow:hidden;margin:3px 0 0;color:#514940;font-size:10px;font-weight:700;text-overflow:ellipsis;white-space:nowrap; }
.mailbox-row-actions { display:flex;justify-content:flex-end;gap:7px;margin-top:12px;padding-top:11px;border-top:1px solid #ece2d7; }
.mailbox-row-actions button,.microsoft-mail-setup button,.transip-mail-form button,.mail-drawer-error button {
  min-height:39px;
  padding:0 12px;
  border:1px solid #617047;
  border-radius:9px;
  background:#667448;
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  cursor:pointer;
}
.mailbox-row-actions button { border-color:#c9b9aa;background:#fffaf5;color:#785b48; }
.mailbox-row-actions button.danger { border-color:#dfb5aa;background:#fff5f2;color:#a34d3e; }
.mailbox-row-actions button:disabled,.microsoft-mail-setup button:disabled,.transip-mail-form button:disabled { opacity:.62;cursor:wait; }
.mail-owner-note { display:block;margin-top:12px;padding:10px;border-radius:9px;background:#f4eee7;color:#776e65;font-size:10.5px;line-height:1.45; }
.mailbox-empty-state { display:grid;justify-items:center;margin-top:16px;padding:25px 18px;border:1px dashed #d9c8b6;border-radius:15px;background:linear-gradient(145deg,#fffdf9,#f7f0e7);text-align:center; }
.mailbox-empty-state > span { display:grid;place-items:center;width:48px;height:48px;margin-bottom:11px;border-radius:15px;color:#efd17a;background:linear-gradient(145deg,#4e5a38,#26331f);font-size:21px;font-weight:900; }
.mailbox-empty-state strong { color:#3e3731;font-size:14px; }
.mailbox-empty-state p { max-width:340px;margin:5px 0 0;color:#7c7268;font-size:10.5px;line-height:1.5; }
.mail-onboarding { margin-top:16px;padding:16px;border:1px solid #dacbb9;border-radius:16px;background:linear-gradient(145deg,#fffdf9,#f8f0e5); }
.mail-onboarding > header > span { color:#a46346;font-size:8px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase; }
.mail-onboarding > header h3 { margin:5px 0 0;color:#39332d;font-family:inherit;font-size:16px; }
.mail-onboarding > header p { margin:5px 0 0;color:#7b7168;font-size:10.5px;line-height:1.5; }
.mail-provider-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px; }
.mail-provider-choice { display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;min-height:68px;padding:10px;border:1px solid #dfd2c4;border-radius:13px;background:#fff; }
.mail-provider-choice .mail-provider-mark { display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#fff;font-size:14px;font-weight:900; }
.mail-provider-choice.microsoft .mail-provider-mark { background:linear-gradient(145deg,#1769a8,#3593d3); }
.mail-provider-choice.transip .mail-provider-mark { background:linear-gradient(145deg,#a65d42,#cf8362); }
.mail-provider-choice strong,.mail-provider-choice small { display:block; }
.mail-provider-choice strong { color:#413932;font-size:11px; }
.mail-provider-choice small { margin-top:3px;color:#82776d;font-size:8.5px;line-height:1.35; }
.mail-provider-choice button { grid-column:1/-1;width:100%;min-height:38px;border:1px solid #1769a8;border-radius:9px;color:#fff;background:#1769a8;font-size:10px;font-weight:850;cursor:pointer; }
.mail-provider-choice button:disabled { cursor:wait;opacity:.62; }
.transip-mail-form { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;padding:13px;border:1px solid #e2d5c6;border-radius:13px;background:#fff; }
.transip-form-heading { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid #ece2d7; }
.transip-form-heading strong { color:#493e36;font-size:11px; }
.transip-form-heading span { color:#877a6e;font-size:8.5px; }
.transip-mail-form label,.transip-mail-form label > span { display:block; }
.transip-mail-form label > span { margin-bottom:5px;color:#61574f;font-size:10px;font-weight:750; }
.transip-mail-form label > span em { color:#94867a;font-size:8px;font-style:normal;font-weight:500; }
.transip-mail-form .wide { grid-column:1/-1; }
.transip-mail-form input {
  width:100%;
  height:43px;
  padding:0 11px;
  border:1px solid #d7c7b7;
  border-radius:9px;
  outline:0;
  background:#fffdf9;
  color:#403831;
  font-size:12px;
}
.transip-mail-form input:focus { border-color:#72815a;box-shadow:0 0 0 3px rgba(104,119,72,.12); }
.transip-mail-form input[readonly] { background:#f2ede7;color:#746b62; }
.transip-mail-form > p,.microsoft-mail-setup > p { margin:0;color:#776e65;font-size:10px;line-height:1.5; }
.transip-mail-form button { width:100%; }
.mailbox-error { margin:10px 0 0;padding:8px 10px;border-radius:8px;background:#fff0ec;color:#9b4a3e;font-size:10px; }
.mail-drawer-error { margin-top:16px;padding:14px;border:1px solid #e5b4aa;border-radius:12px;background:#fff1ee; }
.mail-drawer-error strong,.mail-drawer-error p { display:block;margin:0; }
.mail-drawer-error strong { color:#99483d;font-size:13px; }
.mail-drawer-error p { margin:5px 0 11px;color:#7b625c;font-size:11px; }
.open-mailbox-overview { display:flex;align-items:center;justify-content:space-between;min-height:47px;margin-top:15px;padding:0 14px;border:1px solid #c8b7a6;border-radius:10px;background:#fffaf4;color:#85573f;font-size:11.5px;font-weight:800; }

@media(max-width:480px) {
  .mailbox-connection-row { padding:13px; }
  .mailbox-connection-row > header { grid-template-columns:40px minmax(0,1fr); }
  .mailbox-state { grid-column:2;justify-self:start; }
  .mailbox-connection-row dl { grid-template-columns:1fr 1fr; }
  .mailbox-connection-row dl div:last-child { grid-column:1/-1; }
  .mailbox-row-actions { display:grid;grid-template-columns:1fr 1fr; }
  .mailbox-row-actions button { width:100%; }
  .mail-provider-grid,.transip-mail-form { grid-template-columns:1fr; }
  .transip-mail-form label,.transip-mail-form .wide,.transip-form-heading { grid-column:1; }
  .transip-form-heading { display:grid; }
}