/* The Edit beside Disconnect, and the form it opens.
 *
 * The button is cloned from the platform's own Disconnect, so its shape, size
 * and radius are whatever this release uses; only the colour is set here -
 * Disconnect is the destructive one and must stay the one that looks it.
 */
.crm-ie__edit {
  margin-inline-end: 8px;
  color: inherit !important;
  background: transparent !important;
  border-color: rgba(130, 140, 155, .45) !important;
}

.crm-ie__edit:hover { background: rgba(130, 140, 155, .12) !important; }

/* ---- the dialog ---- */

.crm-ie__back {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 17, 20, .55);
  backdrop-filter: blur(2px);
}

.crm-ie {
  --ie-ink: #1d1b1c;
  --ie-muted: #55606c;
  --ie-line: #e8ebe4;
  --ie-card: #ffffff;
  --ie-brand: #d4fb08;
  --ie-bad: #b91c1c;

  width: min(520px, 100%);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--ie-card);
  color: var(--ie-ink);
  border: 1px solid var(--ie-line);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(15, 17, 20, .28);
  font-size: 13px;
}

.dark .crm-ie {
  --ie-ink: #e7e7e7;
  --ie-muted: #9aa4b0;
  --ie-line: rgba(255, 255, 255, .12);
  --ie-card: #1b1d21;
}

.crm-ie__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ie-line);
}

.crm-ie__title { margin: 0; font-size: 14px; font-weight: 700; }

.crm-ie__x {
  border: 0;
  background: transparent;
  color: var(--ie-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.crm-ie__body {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crm-ie__note { font-size: 12px; line-height: 1.6; color: var(--ie-muted); }
.crm-ie__note.is-bad { color: var(--ie-bad); font-weight: 600; }

.crm-ie__field { display: flex; flex-direction: column; gap: 5px; }
.crm-ie__label { font-size: 12px; font-weight: 600; }
.crm-ie__help { font-size: 11.5px; line-height: 1.55; color: var(--ie-muted); }

/* The platform's base stylesheet puts a bottom margin on every input; these
   sit in a gap-spaced column and do not want a second one. */
.crm-ie__field input,
.crm-ie__field select {
  font: inherit;
  font-size: 13px;
  margin: 0 !important;
  padding: 8px 10px;
  border: 1px solid var(--ie-line);
  border-radius: 8px;
  background: var(--ie-card);
  color: var(--ie-ink);
  width: 100%;
}

.crm-ie__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--ie-line);
}

.crm-ie__go {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border: 1px solid var(--ie-brand);
  border-radius: 8px;
  background: var(--ie-brand);
  color: #1d1b1c;
  cursor: pointer;
}

.crm-ie__go:disabled { opacity: .6; cursor: default; }
.crm-ie__said { font-size: 12px; color: var(--ie-muted); min-width: 0; }