.mails-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 18px;
  width: 100%;
}
.mails-navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mails-navbar__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}
.mails-navbar__user {
  font-size: 13px;
  color: var(--color-dark-gray);
}
/* ── Section divider inside tblcard-body ─────────────────────────────────── */
.mails-section-divider {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}
/* ── Optional label helper ───────────────────────────────────────────────── */
.mails-optional {
  color: var(--color-dark-gray);
  font-size: var(--font-size-xs);
  font-weight: 400;
}
/* ── Cancel / danger action button ──────────────────────────────────────── */
.mails-btn-danger {
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}
.mails-btn-danger:hover {
  background-color: var(--color-danger);
  color: var(--color-white) !important;
}
/* ── Test-email row (input + inline button) ──────────────────────────────── */
.mails-input-btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.mails-input-btn-row input {
  flex: 1;
}
.mails-message {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-top: 16px;
  display: none;
  animation: fadeIn 0.3s ease;
}
.mails-message.success {
  background-color: var(--form-success-bg);
  color: var(--form-success);
  border: 1px solid var(--form-success-border);
}
.mails-message.error {
  background-color: var(--form-error-bg);
  color: var(--form-error);
  border: 1px solid var(--form-error-border);
}
/* ── Progress bar ────────────────────────────────────────────────────────── */
.mails-progress-wrap {
  margin-top: 24px;
}
.mails-progress-bar {
  width: 100%;
  height: 16px;
  background-color: var(--color-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.mails-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-success));
  width: 0%;
  transition: width 0.4s ease;
}
.mails-progress-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}