/* MailHarbor UI — scoped design system. Everything lives under .mh-app so it
   never leaks into WP admin chrome or the theme. Tokens are harbor-themed:
   teal deep water, coral buoy accent, monospace for the technical "material". */

.mh-app {
  --mh-ink: #0f172a;
  --mh-muted: #64748b;
  --mh-faint: #94a3b8;
  --mh-line: #e2e8f0;
  --mh-canvas: #f1f5f9;
  --mh-surface: #ffffff;
  --mh-brand: #0f766e;
  --mh-brand-ink: #115e59;
  --mh-brand-soft: #ccfbf1;
  --mh-accent: #fb6f52;
  --mh-accent-ink: #c2410c;
  --mh-ok: #16a34a;      --mh-ok-soft: #dcfce7;
  --mh-warn: #b45309;    --mh-warn-soft: #fef3c7;
  --mh-bad: #dc2626;     --mh-bad-soft: #fee2e2;
  --mh-idle: #64748b;    --mh-idle-soft: #e2e8f0;
  --mh-r-lg: 14px;
  --mh-r-md: 9px;
  --mh-r-pill: 999px;
  --mh-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.18);
  --mh-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  color: var(--mh-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
}
.mh-app *, .mh-app *::before, .mh-app *::after { box-sizing: inherit; }

/* ---- masthead ---- */
.mh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.mh-head__title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.1; }
.mh-head__sub { color: var(--mh-muted); font-size: 13.5px; margin: 6px 0 0; }
.mh-head__brand { display: inline-flex; align-items: center; gap: 8px; }
.mh-head__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mh-brand);
  box-shadow: 0 0 0 4px var(--mh-brand-soft); display: inline-block; }

/* ---- cards ---- */
.mh-card { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: var(--mh-r-lg);
  box-shadow: var(--mh-shadow); overflow: hidden; }
.mh-card + .mh-card { margin-top: 16px; }
.mh-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--mh-line); background:
  linear-gradient(180deg, #fbfdfd, var(--mh-surface)); flex-wrap: wrap; }
.mh-card__name { font-weight: 650; font-size: 15.5px; letter-spacing: -.01em; margin: 0; display:flex; align-items:center; gap:10px; }
.mh-card__meta { color: var(--mh-muted); font-size: 12.5px; margin: 3px 0 0; }
.mh-card__body { padding: 6px 18px 14px; }
.mh-grid { display: grid; gap: 16px; }

/* ---- backend tag ---- */
.mh-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 6px; border: 1px solid; }
.mh-tag--vmin { color: var(--mh-brand-ink); background: var(--mh-brand-soft); border-color: #99f6e4; }

/* ---- status pill ---- */
.mh-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 4px 10px 4px 8px; border-radius: var(--mh-r-pill); border: 1px solid transparent; }
.mh-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mh-pill--ok   { color: var(--mh-ok);   background: var(--mh-ok-soft);   border-color: #bbf7d0; }
.mh-pill--warn { color: var(--mh-warn); background: var(--mh-warn-soft); border-color: #fde68a; }
.mh-pill--bad  { color: var(--mh-bad);  background: var(--mh-bad-soft);  border-color: #fecaca; }
.mh-pill--idle { color: var(--mh-idle); background: var(--mh-idle-soft); border-color: #cbd5e1; }

/* ---- meters ---- */
.mh-meters { display: flex; gap: 22px; flex-wrap: wrap; margin: 4px 0 2px; }
.mh-meter { min-width: 180px; flex: 1; }
.mh-meter__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.mh-meter__label { font-size: 12px; color: var(--mh-muted); font-weight: 500; }
.mh-meter__val { font-size: 12.5px; font-weight: 650; font-family: var(--mh-mono); }
/* The "n/m +" add-chip on a limit meter. Must beat the theme's button styles. */
.mh-app .mh-meter__add {
  font-size: 12.5px; font-weight: 650; font-family: var(--mh-mono);
  background: var(--mh-canvas); color: var(--mh-ink);
  border: 1px solid var(--mh-line); border-radius: var(--mh-r-pill);
  padding: 2px 10px; line-height: 1.5; cursor: pointer; box-shadow: none;
  transition: background .15s ease, border-color .15s ease;
}
.mh-app .mh-meter__add:hover:not([disabled]) { background: #fff; border-color: var(--mh-brand); color: var(--mh-brand); }
.mh-app .mh-meter__add[disabled] { opacity: .5; cursor: not-allowed; }
.mh-meter__warn { font-size: 11.5px; margin: 4px 0 0; font-weight: 600; }
.mh-meter__track { height: 7px; border-radius: var(--mh-r-pill); background: var(--mh-canvas); overflow: hidden; }
.mh-meter__fill { height: 100%; border-radius: var(--mh-r-pill);
  background: linear-gradient(90deg, var(--mh-brand), #14b8a6); transition: width .4s ease; }
.mh-meter__fill--hot { background: linear-gradient(90deg, var(--mh-accent), #f97316); }

/* ---- console records (the signature) ---- */
.mh-records { border: 1px solid var(--mh-line); border-radius: var(--mh-r-md); overflow: hidden; margin-top: 10px; }
.mh-rec { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 11px 14px; background: var(--mh-surface); }
.mh-rec + .mh-rec { border-top: 1px solid var(--mh-line); }
.mh-rec:nth-child(even) { background: #fbfdfd; }
.mh-rec__dom { font-family: var(--mh-mono); font-size: 13px; color: var(--mh-ink); display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.mh-rec__dom::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mh-ok); flex: none; }
.mh-rec__mail { font-family: var(--mh-mono); font-size: 12.5px; color: var(--mh-muted); overflow-wrap: anywhere; }
.mh-rec__head { grid-template-columns: auto 1fr auto; background: var(--mh-canvas); font-family: inherit; }
.mh-rec__head .mh-rec__dom, .mh-rec__head .mh-rec__mail { font-family: inherit; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--mh-faint); font-weight: 600; }
.mh-rec__head .mh-rec__dom::before { display: none; }

/* ---- buttons ---- */
.mh-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* Scoped with .mh-app so the host theme's button rules (which set their own
   hover `color`) cannot win and wash out our label text. Every state declares
   its own color explicitly — never inherit it from the theme. */
.mh-app .mh-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--mh-r-md); border: 1px solid var(--mh-line);
  background: var(--mh-surface); color: var(--mh-ink); cursor: pointer; text-decoration: none;
  line-height: 1; transition: background .15s, border-color .15s, color .15s, transform .05s; }
.mh-app .mh-btn:hover,
.mh-app .mh-btn:focus { background: var(--mh-canvas); border-color: #cbd5e1; color: var(--mh-ink); }
.mh-app .mh-btn:active { transform: translateY(1px); color: var(--mh-ink); }
.mh-app .mh-btn:focus-visible { outline: 2px solid var(--mh-brand); outline-offset: 2px; }

.mh-app .mh-btn--brand { background: var(--mh-brand); color: #fff; border-color: var(--mh-brand); }
.mh-app .mh-btn--brand:hover,
.mh-app .mh-btn--brand:focus,
.mh-app .mh-btn--brand:active { background: var(--mh-brand-ink); border-color: var(--mh-brand-ink); color: #fff; }

.mh-app .mh-btn--accent { background: var(--mh-accent); color: #fff; border-color: var(--mh-accent); }
.mh-app .mh-btn--accent:hover,
.mh-app .mh-btn--accent:focus,
.mh-app .mh-btn--accent:active { background: var(--mh-accent-ink); border-color: var(--mh-accent-ink); color: #fff; }

.mh-app .mh-btn--danger { color: var(--mh-bad); }
.mh-app .mh-btn--danger:hover,
.mh-app .mh-btn--danger:focus,
.mh-app .mh-btn--danger:active { background: var(--mh-bad-soft); border-color: #fecaca; color: var(--mh-bad); }

.mh-app .mh-btn[disabled] { opacity: .5; cursor: not-allowed; }
.mh-btn--sm { padding: 6px 11px; font-size: 12.5px; }
.mh-btn__ic { width: 15px; height: 15px; flex: none; }

/* ---- tab strip (admin client detail) ---- */
.mh-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--mh-line); margin: 14px 0; }
.mh-tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--mh-muted);
  text-decoration: none; border-bottom: 2px solid transparent; }
.mh-tab:hover { color: var(--mh-ink); }
.mh-tab--active { color: var(--mh-ink); border-bottom-color: var(--mh-accent, #2563eb); }

/* ---- data table (admin) ---- */
.mh-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mh-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--mh-faint); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--mh-line); background: var(--mh-canvas); }
.mh-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--mh-line); vertical-align: middle; }
.mh-table tbody tr:last-child td { border-bottom: none; }
.mh-table tbody tr:hover { background: #fbfdfd; }
.mh-table__id { font-family: var(--mh-mono); color: var(--mh-faint); font-size: 12.5px; }
.mh-table__strong { font-weight: 600; }
.mh-table__mono { font-family: var(--mh-mono); font-size: 12.5px; color: var(--mh-muted); }
.mh-table__actions { text-align: right; white-space: nowrap; }
.mh-table__group { background: var(--mh-bg, #f8fafc); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--mh-muted, #64748b); padding: 8px 12px; }

/* ---- empty state ---- */
.mh-empty { text-align: center; padding: 46px 20px; color: var(--mh-muted); }
.mh-empty__ic { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--mh-faint); }
.mh-empty__t { font-weight: 650; color: var(--mh-ink); font-size: 15px; margin: 0 0 4px; }
.mh-empty__p { font-size: 13.5px; margin: 0; }

/* ---- modal ---- */
.mh-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; }
.mh-modal.is-open { display: flex; }
.mh-modal__scrim { position: absolute; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
.mh-modal__panel { position: relative; width: 100%; max-width: 480px; background: var(--mh-surface);
  border-radius: var(--mh-r-lg); box-shadow: 0 24px 60px -12px rgba(15,23,42,.4); overflow: hidden;
  animation: mh-pop .16s ease; max-height: 90vh; display: flex; flex-direction: column; }
@keyframes mh-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.mh-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--mh-line); }
.mh-modal__title { font-size: 16px; font-weight: 650; margin: 0; }
.mh-app .mh-modal__x { border: none; background: none; cursor: pointer; color: var(--mh-muted); padding: 4px; border-radius: 6px; line-height: 0; }
.mh-app .mh-modal__x:hover,
.mh-app .mh-modal__x:focus { background: var(--mh-canvas); color: var(--mh-ink); }
/* The SMTP/other modals wrap head/body/foot in a <form>; make it a flex column
   too so the body (below) can actually scroll within the panel's max-height. */
.mh-app .mh-modal__panel > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: inherit; }
.mh-modal__body { padding: 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* "Example" header + its copy button (SMTP Other) */
.mh-smtp-exhead { display: flex; align-items: center; gap: 8px; }
.mh-smtp-exhead .mh-field__label { margin: 0; }
.mh-app .mh-copy-ex { border: 1px solid var(--mh-line); background: var(--mh-surface); color: var(--mh-muted);
  cursor: pointer; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.mh-app .mh-copy-ex:hover { border-color: var(--mh-brand); color: var(--mh-brand); }
.mh-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--mh-line); background: var(--mh-canvas); }

/* ---- form ---- */
.mh-field { margin-bottom: 15px; }
.mh-field:last-child { margin-bottom: 0; }
.mh-field__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--mh-ink); margin-bottom: 6px; }
.mh-field__hint { color: var(--mh-faint); font-weight: 400; }
.mh-input, .mh-select { width: 100%; font-size: 14px; padding: 9px 11px; border: 1px solid var(--mh-line);
  border-radius: var(--mh-r-md); background: var(--mh-surface); color: var(--mh-ink); font-family: inherit; }
.mh-input:focus, .mh-select:focus { outline: none; border-color: var(--mh-brand); box-shadow: 0 0 0 3px var(--mh-brand-soft); }
.mh-input--mono { font-family: var(--mh-mono); }
.mh-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- credential block (SMTP modal) ---- */
.mh-cred { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center;
  font-family: var(--mh-mono); font-size: 13px; background: #0f172a; color: #e2e8f0;
  padding: 14px 16px; border-radius: var(--mh-r-md); overflow-wrap: anywhere; }
.mh-cred__k { color: #7dd3fc; }

/* ---- collapsible per-domain credential panel ---- */
.mh-rec--toggle { cursor: pointer; }
.mh-rec--toggle:hover { background: var(--mh-canvas); }
.mh-cred-caret { display: inline-block; font-size: 10px; color: var(--mh-faint);
  transition: transform .15s ease; }
.mh-rec--toggle.is-open .mh-cred-caret { transform: rotate(90deg); }
.mh-cred-wrap { padding: 10px 14px 14px; background: var(--mh-canvas); }
.mh-cred-wrap[hidden] { display: none; }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .mh-rec, .mh-rec__head { grid-template-columns: 1fr; gap: 4px; }
  .mh-rec__actions { justify-self: start; }
  .mh-row2 { grid-template-columns: 1fr; }
  .mh-table thead { display: none; }
  .mh-table tbody td { display: block; border: none; padding: 4px 16px; }
  .mh-table tbody tr { display: block; border-bottom: 1px solid var(--mh-line); padding: 10px 0; }
  .mh-table__actions { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .mh-modal__panel, .mh-meter__fill, .mh-btn { animation: none; transition: none; }
}

/* ---- Admin: Slot Management ---- */
.mh-app .mh-card--pad { padding: 20px 22px 22px; }
.mh-app .mh-card--pad .mh-card__name { margin-bottom: 16px; }
.mh-app .mh-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.mh-app .mh-form .mh-field { margin: 0; }
.mh-app .mh-field__label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--mh-ink, #1e293b); }
.mh-app .mh-form .mh-input, .mh-app .mh-form .mh-select { box-sizing: border-box; }

/* Stacked form: short fields sit in a row, textarea + button go full width. */
.mh-app .mh-form--grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; max-width: 780px; }
.mh-app .mh-form--grid .mh-field { display: flex; flex-direction: column; }
.mh-app .mh-form--grid .mh-input, .mh-app .mh-form--grid .mh-select, .mh-app .mh-form--grid textarea.mh-input { width: 100%; box-sizing: border-box; }
.mh-app .mh-form--grid textarea.mh-input { resize: vertical; }
.mh-app .mh-form__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.mh-app .mh-form__row .mh-field { flex: 1 1 240px; }
/* Uniform label height so paired fields' inputs line up even if a label wraps. */
.mh-app .mh-form--grid .mh-field__label { min-height: 19px; }
/* A label that wraps to two lines must not drag its input below its neighbours':
   push every input to the bottom of its (stretched) field so the row stays level. */
.mh-app .mh-form__row .mh-field > .mh-input,
.mh-app .mh-form__row .mh-field > .mh-select { margin-top: auto; }
.mh-app .mh-form__row .mh-field--sm { flex: 0 0 120px; }

/* WP admin styles input[type=number]/select on its own (its own radius, height
   and inset shadow), so those controls looked unlike our text inputs sitting
   next to them. Restate ours at a specificity that wins, for every control. */
.mh-app input.mh-input,
.mh-app select.mh-select,
.mh-app textarea.mh-input {
  box-sizing: border-box;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-r-md);
  background-color: var(--mh-surface);
  color: var(--mh-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: none;
  margin: 0;
}
.mh-app textarea.mh-input { min-height: 0; }
.mh-app input.mh-input:focus,
.mh-app select.mh-select:focus,
.mh-app textarea.mh-input:focus {
  border-color: var(--mh-brand);
  box-shadow: 0 0 0 3px var(--mh-brand-soft);
  outline: none;
}
/* Native select chrome (grey gradient + system arrow) clashed with the rest;
   draw our own chevron instead. */
.mh-app select.mh-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 8px;
}
/* Inline notice inside a service card (e.g. "your domains span two servers"). */
.mh-note { padding: 10px 12px; border-radius: var(--mh-r-md); font-size: 13px; line-height: 1.5;
  border: 1px solid var(--mh-line); background: var(--mh-canvas); color: var(--mh-ink); }
.mh-note--warn { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.mh-note .mh-btn { margin-left: 6px; vertical-align: middle; }

/* Search bars: one row, everything the same height and vertically centred. */
.mh-app form.mh-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mh-app form.mh-form--grid { display: grid; }
.mh-app form.mh-form .mh-btn { min-height: 40px; }
.mh-app .mh-form__actions { margin-top: 2px; }

/* ---- Searchable multi-select (mh-msel) ---- */
.mh-app .mh-msel { position: relative; }
.mh-app .mh-msel__control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 42px; padding: 6px 8px; border: 1px solid var(--mh-line, #cbd5e1); border-radius: 8px;
  background: #fff; cursor: text; }
.mh-app .mh-msel.is-open .mh-msel__control { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.mh-app .mh-msel__chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px;
  background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; border-radius: 999px; font-size: 12.5px;
  font-weight: 600; line-height: 1.4; }
.mh-app .mh-msel__x { border: 0; background: transparent; color: #6366f1; cursor: pointer; font-size: 15px;
  line-height: 1; padding: 0 2px; border-radius: 999px; }
.mh-app .mh-msel__x:hover { background: #c7d2fe; color: #312e81; }
.mh-app .mh-msel__search, .mh-app .mh-msel__search:focus { flex: 1 1 120px; min-width: 100px; font-size: 14px;
  padding: 4px; background: transparent; color: var(--mh-ink, #1e293b);
  border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* no inner border inside the control */
.mh-app .mh-msel__menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid var(--mh-line, #cbd5e1);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: 4px; }
.mh-app .mh-msel__opt { padding: 8px 10px; border-radius: 6px; font-size: 13.5px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; color: var(--mh-ink, #1e293b); }
.mh-app .mh-msel__opt:hover { background: #f1f5f9; }
.mh-app .mh-msel__opt.is-selected { color: #3730a3; font-weight: 600; }
.mh-app .mh-msel__opt.is-selected::after { content: "✓"; color: #4f46e5; font-weight: 700; }
.mh-app .mh-msel__empty { padding: 10px; color: var(--mh-faint, #94a3b8); font-size: 13px; }

/* ---- Drag & drop file picker (mh-drop) ---- */
.mh-app .mh-drop__input { display: none; }
.mh-app .mh-drop__zone { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 22px 16px; border: 2px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; cursor: pointer;
  color: #64748b; transition: border-color .15s, background .15s, color .15s; }
.mh-app .mh-drop__zone:hover { border-color: #94a3b8; background: #f1f5f9; }
.mh-app .mh-drop.is-drag .mh-drop__zone { border-color: #2563eb; background: #eff6ff; color: #2563eb; }
.mh-app .mh-drop__ic { color: #94a3b8; transition: color .15s; }
.mh-app .mh-drop.is-drag .mh-drop__ic { color: #2563eb; }
.mh-app .mh-drop__text { font-size: 13.5px; }
.mh-app .mh-drop__browse { color: #2563eb; font-weight: 600; text-decoration: underline; }
.mh-app .mh-drop__file { font-size: 13px; font-weight: 600; color: #166534; background: #dcfce7;
  padding: 5px 12px; border-radius: 6px; word-break: break-all; }
.mh-app .mh-drop.has-file .mh-drop__zone { border-style: solid; border-color: #86efac; background: #f0fdf4; }
.mh-app .mh-drop.has-file .mh-drop__ic { color: #16a34a; }
.mh-app .mh-drop__clear { border: 0; background: transparent; color: #b91c1c; font-size: 12px; cursor: pointer;
  text-decoration: underline; padding: 0; }
.mh-app .mh-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.mh-app .mh-badge--green { background: #dcfce7; color: #166534; }
.mh-app .mh-badge--red { background: #fee2e2; color: #b91c1c; }
.mh-app .mh-badge--gray { background: #f1f5f9; color: #475569; }
.mh-app .mh-badge--amber { background: #fef3c7; color: #92400e; }
.mh-app .mh-notice { margin: 12px 0; }
.mh-app .mh-table td code { font-family: var(--mh-mono); font-size: 12.5px; }

/* ---- WHMCS-parity theme pass ---- */

/* SWAP: dark-navy -> blue gradient pill (PDF p3-4 "SWAP" button). */
.mh-app .mh-btn--swap {
  background: linear-gradient(180deg, #2b3a67, #1e2a4a);
  color: #fff; border-color: #1e2a4a; border-radius: var(--mh-r-pill);
  padding: 8px 16px;
}
.mh-app .mh-btn--swap:hover,
.mh-app .mh-btn--swap:focus,
.mh-app .mh-btn--swap:active { background: linear-gradient(180deg, #33447a, #232f57); color: #fff; border-color: #232f57; }

/* SMTP: amber -> orange gradient pill (PDF p3-4 "SMTP" button). */
.mh-app .mh-btn--smtp {
  background: linear-gradient(180deg, #f4b74a, #e08a1e);
  color: #fff; border-color: #e08a1e; border-radius: var(--mh-r-pill);
  padding: 8px 16px;
}
.mh-app .mh-btn--smtp:hover,
.mh-app .mh-btn--smtp:focus,
.mh-app .mh-btn--smtp:active { background: linear-gradient(180deg, #f6c268, #ea9a34); color: #fff; border-color: #ea9a34; }

/* Modal primary actions (SWAP DOMAIN / DOWNLOAD): green gradient, scoped to
   modal footers only. .mh-btn--brand is also the site's general primary-
   button class (17+ non-modal Save/Assign/Add buttons across admin +
   dashboard) which must stay teal — so this must NOT be a bare
   .mh-app .mh-btn--brand rule. SwapView.php / SmtpModal.php both wrap their
   submit button in <div class="mh-modal__foot">, so scope on that. */
.mh-app .mh-modal__foot .mh-btn--brand {
  background: linear-gradient(180deg, #3aa35a, #2c8047);
  border-color: #2c8047;
}
.mh-app .mh-modal__foot .mh-btn--brand:hover,
.mh-app .mh-modal__foot .mh-btn--brand:focus,
.mh-app .mh-modal__foot .mh-btn--brand:active { background: linear-gradient(180deg, #43b566, #328e51); border-color: #328e51; color: #fff; }

/* Alias rows (SwapView / domain table): indent under their parent domain. */
.mh-row--alias td:first-child,
.mh-row--alias .mh-rec__dom { padding-left: 2rem; }

/* Copy-to-clipboard affordance on a credential value. */
.mh-cred__v { cursor: pointer; }
.mh-cred__v:hover { text-decoration: underline; }
.mh-copied { color: var(--mh-ok, #16a34a) !important; font-weight: 700; }

/* Impersonation banner (admin "viewing as customer"). */
.mh-imp-banner {
  background: #fde68a; color: #78350f; text-align: center;
  padding: 10px 14px; font-weight: 600; font-size: 13.5px;
}
.mh-imp-banner a { color: #78350f; text-decoration: underline; }

/* Per-client admin detail: identity header. */
.mh-client-head{margin:.25rem 0 .85rem}
.mh-client-head__name{font-size:1.1rem;font-weight:700}
.mh-client-head__id{color:#64748b;font-weight:600;margin-left:.35rem}

/* ============================================================
   Customer-facing button palette (front-end only, my-account).
   Navy = primary everywhere (Swap, Renew, Regenerate, Expand all,
   Add/Save, modal confirm); amber = SMTP/download; red = destructive
   (Remove); neutral = Cancel/Close. Admin screens (.wrap.mh-app) are
   NOT affected — this is scoped to body.woocommerce-account.
   ============================================================ */
body.woocommerce-account .mh-app .mh-btn, .mh-viewas .mh-app .mh-btn {
  background: linear-gradient(180deg, #2b3a67, #1e2a4a);
  color: #fff; border-color: #1e2a4a;
}
body.woocommerce-account .mh-app .mh-btn:hover, .mh-viewas .mh-app .mh-btn:hover ,
body.woocommerce-account .mh-app .mh-btn:focus, .mh-viewas .mh-app .mh-btn:focus ,
body.woocommerce-account .mh-app .mh-btn:active, .mh-viewas .mh-app .mh-btn:active {
  background: linear-gradient(180deg, #33447a, #232f57);
  color: #fff; border-color: #232f57;
}
/* SMTP / download stays amber */
body.woocommerce-account .mh-app .mh-btn--smtp, .mh-viewas .mh-app .mh-btn--smtp {
  background: linear-gradient(180deg, #f4b74a, #e08a1e);
  color: #fff; border-color: #e08a1e;
}
body.woocommerce-account .mh-app .mh-btn--smtp:hover, .mh-viewas .mh-app .mh-btn--smtp:hover ,
body.woocommerce-account .mh-app .mh-btn--smtp:focus, .mh-viewas .mh-app .mh-btn--smtp:focus ,
body.woocommerce-account .mh-app .mh-btn--smtp:active, .mh-viewas .mh-app .mh-btn--smtp:active {
  background: linear-gradient(180deg, #f6c268, #ea9a34);
  color: #fff; border-color: #ea9a34;
}
/* Destructive (Remove) stays red */
body.woocommerce-account .mh-app .mh-btn--danger, .mh-viewas .mh-app .mh-btn--danger {
  background: linear-gradient(180deg, #e05656, #c0392b);
  color: #fff; border-color: #c0392b;
}
body.woocommerce-account .mh-app .mh-btn--danger:hover, .mh-viewas .mh-app .mh-btn--danger:hover ,
body.woocommerce-account .mh-app .mh-btn--danger:focus, .mh-viewas .mh-app .mh-btn--danger:focus ,
body.woocommerce-account .mh-app .mh-btn--danger:active, .mh-viewas .mh-app .mh-btn--danger:active {
  background: linear-gradient(180deg, #e86a6a, #a93226);
  color: #fff; border-color: #a93226;
}
/* Cancel / Close in modals: neutral outline, not navy */
body.woocommerce-account .mh-app .mh-btn[data-mh-close], .mh-viewas .mh-app .mh-btn[data-mh-close] {
  background: #fff; color: var(--mh-ink); border-color: #e2e8f0;
}
body.woocommerce-account .mh-app .mh-btn[data-mh-close]:hover, .mh-viewas .mh-app .mh-btn[data-mh-close]:hover ,
body.woocommerce-account .mh-app .mh-btn[data-mh-close]:focus, .mh-viewas .mh-app .mh-btn[data-mh-close]:focus {
  background: var(--mh-canvas); color: var(--mh-ink); border-color: #cbd5e1;
}

/* Loading state for customer action submits (Swap/Renew/Regenerate/modal
   confirms run inline and can take a few seconds against the backend). */
.mh-app .mh-btn.is-loading { pointer-events: none; opacity: .9; }
.mh-app .mh-btn.is-loading::after {
  content: ""; width: 13px; height: 13px; margin-left: 8px; vertical-align: -2px;
  display: inline-block; border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff; border-radius: 50%; animation: mh-spin .6s linear infinite;
}
@keyframes mh-spin { to { transform: rotate(360deg); } }

/* Assign-To-Client customer picker dropdown (Slot Management) */
.mh-cust-drop {
  /* Opens UPWARD — the picker lives in a footer at the page bottom, so a
     downward menu would be clipped below the viewport. */
  position: absolute; z-index: 50; bottom: calc(100% + 2px); left: 0;
  min-width: 240px; max-width: 360px; max-height: 260px; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.mh-cust-opt {
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: #111827; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mh-cust-opt.is-active, .mh-cust-opt:hover { background: #eef2ff; }

/* Toast notifications (customer dashboard) — floating, auto-dismiss */
.mh-toast-wrap {
  position: fixed; top: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  max-width: min(92vw, 420px);
}
.mh-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px; color: #fff;
  font-size: 14px; line-height: 1.4; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border-left: 4px solid rgba(255,255,255,.5);
  transform: translateX(120%); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}
.mh-toast.is-in  { transform: translateX(0); opacity: 1; }
.mh-toast.is-out { transform: translateX(120%); opacity: 0; }
.mh-toast--ok  { background: #16794f; }   /* green */
.mh-toast--bad { background: #b42318; }   /* red */
.mh-toast__msg { flex: 1; }
.mh-toast__x {
  background: none; border: 0; color: rgba(255,255,255,.85);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.mh-toast__x:hover { color: #fff; }
@media (max-width: 600px) {
  .mh-toast-wrap { top: auto; bottom: 16px; right: 12px; left: 12px; max-width: none; }
}

/* SMTP "Other" clickable variable chips */
.mh-smtp-vars .mh-var {
  color: #14b8a6; font-family: var(--mh-mono, monospace); cursor: pointer;
  text-decoration: none; border-bottom: 1px dashed currentColor;
}
.mh-smtp-vars .mh-var:hover { color: #0f766e; }

/* SMTP "Other" live preview */
.mh-smtp-preview {
  background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 12px 14px;
  font-family: var(--mh-mono, monospace); font-size: 12.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto;
  margin: 0; min-height: 40px;
}

/* Persistent "still working" banner: rendered from the stored PendingOps
   record on every page load, so it survives a refresh until the job ends. */
.mh-pending { display: flex; gap: 10px; align-items: flex-start;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  border-radius: 10px; padding: 11px 13px; margin: 0 0 14px;
  font-size: 13.5px; line-height: 1.5; }
.mh-pending__spin { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px;
  border: 2px solid #bfdbfe; border-top-color: #1d4ed8; border-radius: 50%;
  animation: mh-pending-spin .9s linear infinite; }
@keyframes mh-pending-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mh-pending__spin { animation: none; } }

/* ================================================================
   Client feedback pass — "correctur please (3)"
   Colour-coded action buttons, a readable domain table with Excel-style
   banding, and a catch-all picker tall enough to see. Reference for the
   palette is the client's own WHMCS client area: green = grow,
   amber = export, red = destructive, cool tones for everything else.
   Rules are doubled under body.woocommerce-account because the Astra
   theme's own button styling is more specific than a bare .mh-app rule.
   ================================================================ */

.mh-app {
  --mh-up:    linear-gradient(180deg, #5cb85c, #3d8b3d);
  --mh-up-2:  linear-gradient(180deg, #6ec96e, #45a045);
  --mh-rm:    linear-gradient(180deg, #e05656, #c0392b);
  --mh-rm-2:  linear-gradient(180deg, #ea6b6b, #d04434);
  --mh-dns:   linear-gradient(180deg, #3aa8c1, #2b7f94);
  --mh-dns-2: linear-gradient(180deg, #48bcd6, #3291a8);
  --mh-rnw:   linear-gradient(180deg, #4a7fd4, #3563ab);
  --mh-rnw-2: linear-gradient(180deg, #5b90e2, #3e71bd);
  --mh-rgn:   linear-gradient(180deg, #7a5cc4, #5d43a0);
  --mh-rgn-2: linear-gradient(180deg, #8b6dd4, #6a4eb4);
}

.mh-app .mh-btn--upgrade,
.mh-app .mh-btn--remove,
.mh-app .mh-btn--dns,
.mh-app .mh-btn--renew,
.mh-app .mh-btn--regen {
  color: #fff; border-radius: var(--mh-r-pill); padding: 8px 16px;
}
.mh-app .mh-btn--upgrade { background: var(--mh-up);  border-color: #3d8b3d; }
.mh-app .mh-btn--remove  { background: var(--mh-rm);  border-color: #c0392b; }
.mh-app .mh-btn--dns     { background: var(--mh-dns); border-color: #2b7f94; }
.mh-app .mh-btn--renew   { background: var(--mh-rnw); border-color: #3563ab; }
.mh-app .mh-btn--regen   { background: var(--mh-rgn); border-color: #5d43a0; }

body.woocommerce-account .mh-app .mh-btn--upgrade { background: var(--mh-up);  color:#fff; border-color:#3d8b3d; }
body.woocommerce-account .mh-app .mh-btn--remove  { background: var(--mh-rm);  color:#fff; border-color:#c0392b; }
body.woocommerce-account .mh-app .mh-btn--dns     { background: var(--mh-dns); color:#fff; border-color:#2b7f94; }
body.woocommerce-account .mh-app .mh-btn--renew   { background: var(--mh-rnw); color:#fff; border-color:#3563ab; }
body.woocommerce-account .mh-app .mh-btn--regen   { background: var(--mh-rgn); color:#fff; border-color:#5d43a0; }

body.woocommerce-account .mh-app .mh-btn--upgrade:hover, .mh-viewas .mh-app .mh-btn--upgrade:hover ,
body.woocommerce-account .mh-app .mh-btn--upgrade:focus { background: var(--mh-up-2);  color:#fff; }
body.woocommerce-account .mh-app .mh-btn--remove:hover, .mh-viewas .mh-app .mh-btn--remove:hover ,
body.woocommerce-account .mh-app .mh-btn--remove:focus  { background: var(--mh-rm-2);  color:#fff; }
body.woocommerce-account .mh-app .mh-btn--dns:hover, .mh-viewas .mh-app .mh-btn--dns:hover ,
body.woocommerce-account .mh-app .mh-btn--dns:focus     { background: var(--mh-dns-2); color:#fff; }
body.woocommerce-account .mh-app .mh-btn--renew:hover, .mh-viewas .mh-app .mh-btn--renew:hover ,
body.woocommerce-account .mh-app .mh-btn--renew:focus   { background: var(--mh-rnw-2); color:#fff; }
body.woocommerce-account .mh-app .mh-btn--regen:hover, .mh-viewas .mh-app .mh-btn--regen:hover ,
body.woocommerce-account .mh-app .mh-btn--regen:focus   { background: var(--mh-rgn-2); color:#fff; }

/* The action row gets a little more air now that the buttons are pills. */
.mh-app .mh-btns { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

/* Meter fills tinted per meter, matching the purple/blue pills in the
   client's WHMCS screenshot. :first-child = Inbox, + .mh-meter = the
   Catchall Emails/Domains meter beside it. */
.mh-app .mh-meters .mh-meter:first-child .mh-meter__fill:not(.mh-meter__fill--hot) {
  background: linear-gradient(90deg, #8b6dd4, #6a4eb4);
}
.mh-app .mh-meters .mh-meter + .mh-meter .mh-meter__fill:not(.mh-meter__fill--hot) {
  background: linear-gradient(90deg, #4a90d9, #2f6fb5);
}
.mh-app .mh-meter__label { font-size: 13px; font-weight: 600; color: var(--mh-ink); }
.mh-app .mh-meter__add { font-size: 13px; }

/* ---- domain table: bigger type + Excel-style banding ---- */
.mh-app .mh-rec { padding-top: 11px; padding-bottom: 11px; }
.mh-app .mh-rec__dom  { font-size: 14.5px; }
.mh-app .mh-rec__mail { font-size: 13.5px; color: #475569; }
.mh-app .mh-rec__head .mh-rec__dom,
.mh-app .mh-rec__head .mh-rec__mail { font-size: 12px; }
/* Banding is driven by .mh-rec--alt from PHP, not :nth-child — an open
   credential panel is a sibling row and would shift the pattern.

   The reset and the stripe must carry the SAME specificity, with --alt last.
   `:nth-child()` weighs as much as a class, so the reset is (0,4,0) and a
   plain `.mh-rec--alt` (0,3,0) loses to it on exactly the even rows — which
   is why the table still read as unbanded. `.mh-rec.mh-rec--alt` brings it
   level, and being later it wins. */
.mh-app .mh-records .mh-rec:nth-child(even) { background: transparent; }
.mh-app .mh-records .mh-rec.mh-rec--alt { background: #eef2f6; }
.mh-app .mh-rec--toggle:hover { background: #e8eef6; }

/* ---- Add Catchall picker: show a real list, not one and a half rows ---- */
.mh-app select.mh-select--tall {
  min-height: 190px; height: auto; width: 100%; padding: 6px;
  background-image: none; /* kill the single-select caret */
}
.mh-app select.mh-select--tall option { padding: 5px 8px; font-size: 13.5px; }

/* The "Add New" modal stacks TWO forms in one panel (Add Domain + Add
   Catchall). Only .mh-modal__body scrolls, and the second form is not inside
   one — so once the catch-all picker grew, "Save Catchall" fell off the
   bottom of a short window with nothing to scroll. Let this panel scroll as a
   whole. Scoped to the modifier so the single-form modals keep their
   fixed header/footer with only the body scrolling. */
.mh-app .mh-modal--stack .mh-modal__panel { display: block; overflow-y: auto; }
.mh-app .mh-modal--stack .mh-modal__panel > form { display: block; max-height: none; }
/* And keep the picker from eating a short screen in the first place. */
.mh-app select.mh-select--tall { min-height: min(190px, 26vh); }

/* ============================================================
   Admin → "View as customer". The customer dashboard rendered
   inside wp-admin. The palette rules above are mirrored onto
   .mh-viewas because they were scoped to body.woocommerce-account,
   which of course never matches in the admin.
   ============================================================ */
.mh-viewas { margin: 12px 0 0; }
.mh-viewas .mh-app { max-width: 1100px; }