/* ── Superadmin — page-specific styles ─────────────────────────────────────── */

/* ── Gate page (login) ── */
.sa-gate-body { display: flex; min-height: 100dvh; flex-direction: column; }

/* ── Billing mode card (billing_config.html) ── */
.sa-mode-card .sec-card { margin-top: 0; }
.sa-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sa-mode-status { display: flex; align-items: center; gap: 8px; }
.sa-mode-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sa-mode-dot--live { background: oklch(0.72 0.14 145); }
.sa-mode-dot--test { background: oklch(0.72 0.16 85); }
.sa-mode-label { font: 600 0.88rem/1 var(--f-body); }
.sa-mode-seg { display: flex; border-radius: 7px; overflow: hidden; border: 1px solid var(--dim2); }
.sa-mode-btn {
  padding: 7px 16px;
  font: 500 0.82rem/1 var(--f-body);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  min-height: 36px;
  transition: background 120ms ease-out;
}
.sa-mode-btn + .sa-mode-btn { border-left: 1px solid var(--dim2); }
.sa-mode-btn--active { background: var(--accent); color: oklch(0.14 0.01 204); cursor: default; }
.sa-mode-btn:not(.sa-mode-btn--active):hover { background: var(--dim); }
.sa-mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sa-mode-desc { font: 400 0.78rem/1.5 var(--f-body); color: var(--muted); }
.sa-mode-status-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sa-mode-tag {
  font: 600 0.68rem/1 var(--f-body);
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.sa-mode-tag--ok   { color: oklch(0.72 0.14 145); }
.sa-mode-tag--warn { color: oklch(0.72 0.16 85); }
.sa-mode-tag--err  { color: var(--danger); }

/* ── Tenant list (app.html) ── */
.sa-tenant-list { display: flex; flex-direction: column; gap: 2px; }
.sa-tenant-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 10px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 150ms, background 150ms;
}
.sa-tenant-row:hover { border-color: var(--accent); background: var(--surface2); }
.sa-tenant-row__id {
  font: 500 0.72rem/1 var(--f-body);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  width: 28px;
  flex-shrink: 0;
}
.sa-tenant-row__info { flex: 1; min-width: 0; }
.sa-tenant-row__name { font: 600 0.9rem/1 var(--f-body); }
.sa-tenant-row__meta {
  font: 400 0.72rem/1 var(--f-body);
  color: var(--muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-tenant-row__arrow { color: var(--muted); opacity: 0.4; flex-shrink: 0; }

/* ── Status badges ── */
.sa-badge {
  font: 700 0.65rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.sa-badge--active    { background: oklch(from var(--accent) l c h / 0.13); color: var(--accent); }
.sa-badge--trial     { background: oklch(0.64 0.048 204 / 0.10); color: oklch(0.78 0.06 204); }
.sa-badge--past-due  { background: oklch(from var(--warn) l c h / 0.13); color: var(--warn); }
.sa-badge--suspended { background: oklch(from var(--danger) l c h / 0.13); color: var(--danger); }
.sa-badge--cancelled { background: oklch(from var(--muted) l c h / 0.10); color: var(--muted); }
.sa-badge--disabled  { background: oklch(from var(--danger) l c h / 0.12); color: var(--danger); }
.sa-badge--comp      { background: oklch(from var(--accent-2) l c h / 0.13); color: var(--accent-2); }
.sa-badge--on        { background: oklch(from var(--accent) l c h / 0.13); color: var(--accent); }
.sa-badge--off       { background: oklch(from var(--muted) l c h / 0.10); color: var(--muted); }
.sa-badge--new       { background: oklch(0.64 0.048 204 / 0.10); color: oklch(0.78 0.06 204); }
.sa-badge--contacted { background: oklch(from var(--warn) l c h / 0.13); color: var(--warn); }
.sa-badge--converted { background: oklch(from var(--accent) l c h / 0.13); color: var(--accent); }
.sa-badge--archived  { background: oklch(from var(--muted) l c h / 0.10); color: var(--muted); }

/* ── Admin account list (tenant.html) ── */
.sa-acc-list { display: flex; flex-direction: column; }
.sa-acc-item { border-top: 1px solid var(--dim); }
.sa-acc-item:first-child { border-top: none; }
.sa-acc-item__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.sa-acc-item__info { flex: 1; min-width: 0; }
.sa-acc-item__name {
  font: 600 0.9rem/1 var(--f-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sa-acc-item__email {
  font: 400 0.75rem/1 var(--f-body);
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sa-acc-item__badges { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.sa-role-badge {
  font: 700 0.65rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.sa-role-badge--owner { background: oklch(from var(--accent) l c h / 0.12); color: var(--accent); }
.sa-role-badge--admin { background: oklch(from var(--muted) l c h / 0.10); color: var(--muted); }
.sa-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sa-status-dot--active   { background: oklch(0.72 0.14 145); }
.sa-status-dot--inactive { background: var(--danger); }

/* Kebab menu */
.sa-acc-menu { position: relative; flex-shrink: 0; }
.sa-acc-menu__btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background 120ms, color 120ms;
  min-height: 32px;
}
.sa-acc-menu__btn:hover { background: var(--dim); color: var(--white); }
.sa-acc-menu__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 9px;
  padding: 4px;
  min-width: 132px;
  box-shadow: 0 8px 24px -4px oklch(0 0 0 / 0.45);
}
.sa-acc-menu__dropdown[hidden] { display: none; }
.sa-acc-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 6px;
  font: 500 0.78rem/1 var(--f-body);
  color: var(--muted);
  font-family: var(--f-body);
  transition: background 100ms, color 100ms;
}
.sa-acc-menu__item:hover { background: var(--dim); color: var(--white); }
.sa-acc-menu__item--danger { color: var(--danger); }
.sa-acc-menu__item--danger:hover { background: oklch(from var(--danger) l c h / 0.12); color: var(--danger); }

/* Inline edit/password panels — negative-margin breakout from sec-card padding */
.sa-acc-edit-panel,
.sa-acc-pw-panel {
  padding: 14px 20px 16px;
  border-top: 1px solid var(--dim);
  background: var(--surface2);
  margin: 0 -20px;
}
.sa-acc-edit-panel[hidden],
.sa-acc-pw-panel[hidden] { display: none; }
.sa-acc-edit-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.sa-acc-edit-grid .sec-field { flex: 1; min-width: 130px; }
.sa-acc-edit-grid .sec-field--role { flex: 0 0 130px; }
.sa-acc-edit-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; padding-bottom: 1px; }
.sa-acc-pw-grid { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.sa-acc-pw-grid .sec-field { flex: 1; min-width: 160px; }

/* ── Subscription status display (billing_tenant.html) ── */
.sa-status-row { display: flex; gap: 20px; flex-wrap: wrap; }
.sa-status-item { display: flex; flex-direction: column; gap: 3px; }
.sa-status-item__key {
  font: 700 0.65rem/1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sa-status-item__val { font: 600 0.9rem/1 var(--f-body); }

/* ── Billing inline forms (amount/days inputs beside button) ── */
.sa-inline-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.sa-inline-form .sec-field { flex: 1; min-width: 100px; }

/* ── Data tables (billing history, promos list) ── */
.sa-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.sa-table th {
  padding: 8px 14px;
  text-align: left;
  font: 700 0.65rem/1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--dim);
}
.sa-table td {
  padding: 9px 14px;
  border-bottom: 1px solid oklch(from var(--dim) l c h / 0.5);
  vertical-align: middle;
}
.sa-table tbody tr:last-child td { border-bottom: none; }
.sa-table .mono { font-family: ui-monospace, monospace; font-size: 0.72rem; }

/* ── Waitlist lead rows ── */
.sa-lead-list { display: flex; flex-direction: column; gap: 2px; }
.sa-lead-row {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sa-lead-row__email {
  font: 500 0.88rem/1.4 var(--f-body);
  color: var(--text);
  text-decoration: none;
  word-break: break-all;
}
.sa-lead-row__email:hover { color: var(--accent); }
.sa-lead-row__controls { display: flex; align-items: center; gap: 10px; }
.sa-lead-row__date {
  font: 400 0.72rem/1 var(--f-body);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 560px) {
  .sa-lead-row { flex-direction: row; align-items: center; gap: 16px; }
  .sa-lead-row__email { flex: 1; min-width: 0; word-break: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sa-lead-row__controls { flex-shrink: 0; }
}

/* Waitlist inline status select */
.sa-status-sel {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 5px;
  padding: 4px 26px 4px 9px;
  font: 700 0.65rem/1 var(--f-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  outline: none;
  transition: opacity 100ms;
}
.sa-status-sel:hover { opacity: 0.85; }
.sa-status-sel[data-status="new"]       { background-color: oklch(0.64 0.048 204 / 0.10); color: oklch(0.78 0.06 204); border-color: oklch(0.64 0.048 204 / 0.30); }
.sa-status-sel[data-status="contacted"] { background-color: oklch(from var(--warn) l c h / 0.12); color: var(--warn); border-color: oklch(from var(--warn) l c h / 0.35); }
.sa-status-sel[data-status="converted"] { background-color: oklch(from var(--accent) l c h / 0.12); color: var(--accent); border-color: oklch(from var(--accent) l c h / 0.35); }
.sa-status-sel[data-status="archived"]  { background-color: oklch(from var(--muted) l c h / 0.10); color: var(--muted); border-color: oklch(from var(--muted) l c h / 0.25); }

/* ── Delete ghost button (waitlist) ── */
.sa-btn-delete {
  background: none;
  border: 1px solid oklch(from var(--danger) l c h / 0.25);
  color: oklch(from var(--danger) l c h / 0.45);
  border-radius: 5px;
  padding: 5px 7px;
  cursor: pointer;
  line-height: 0;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.sa-btn-delete:hover {
  background: oklch(from var(--danger) l c h / 0.10);
  color: var(--danger);
  border-color: var(--danger);
}

/* ── Sandbox actions panel (billing_tenant.html) ── */
.sa-sandbox {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 10px;
  overflow: hidden;
}
.sa-sandbox__head {
  padding: 14px 20px;
  background: oklch(from var(--danger) 0.14 0.04 h);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 700 0.72rem/1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.72 0.16 28);
  user-select: none;
}
.sa-sandbox__head::-webkit-details-marker { display: none; }
.sa-sandbox__head::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 120ms ease-out;
}
.sa-sandbox[open] .sa-sandbox__head { border-bottom: 1px solid var(--dim); }
.sa-sandbox[open] .sa-sandbox__head::before { transform: rotate(45deg); margin-top: 1px; }
.sa-sandbox__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sa-sandbox__head-text { display: flex; flex-direction: column; gap: 4px; }
.sa-sandbox__note {
  font: 400 0.72rem/1.45 var(--f-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.sa-sandbox__note code,
.sa-sandbox__action code {
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text);
}
.sa-sandbox__grid { display: flex; flex-direction: column; }
.sa-sandbox__action {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--dim);
}
.sa-sandbox__action:last-child { border-bottom: none; }
.sa-sandbox__action--gated { background: oklch(from var(--danger) 0.12 0.03 h); }
.sa-sandbox__action h3 { font: 600 0.88rem/1 var(--f-body); color: var(--text); }
.sa-sandbox__action > p { font: 400 0.78rem/1.45 var(--f-body); color: var(--muted); }
.sa-sandbox__action label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 0.78rem/1 var(--f-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.sa-sandbox__action label input[type="date"],
.sa-sandbox__action label select {
  background: var(--surface2);
  border: 1px solid var(--dim2);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.78rem;
  color: var(--text);
  color-scheme: dark;
  outline: none;
}
.sa-sandbox__action label input[type="date"] { font-family: ui-monospace, monospace; }
.sa-sandbox__action label input[type="date"]:focus,
.sa-sandbox__action label select:focus { border-color: var(--accent); }
.sa-sandbox__action button { align-self: flex-start; margin-top: 4px; }

/* ── Promo link in tables ── */
.sa-edit-link {
  font: 600 0.75rem/1 var(--f-body);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.03em;
}
.sa-edit-link:hover { text-decoration: underline; }

/* ── App Config toggles ── */
.sa-toggle-row { display: flex; align-items: center; gap: 10px; }
.sa-toggle-row label {
  font: 500 0.88rem/1 var(--f-body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
input[type="checkbox"].sa-check {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Two-column form grid (promo, billing) ── */
.sa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 440px) { .sa-row2 { grid-template-columns: 1fr; } }

/* ── Security (fail2ban bans / whitelist) ── */
.sa-sec-flash { margin-bottom: 14px; }
.sa-sec-stat { font: 500 0.78rem/1 var(--f-body); color: var(--muted); }
.sa-sec-list { list-style: none; margin: 0; padding: 0; }
.sa-sec-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--dim2);
}
.sa-sec-row:last-child { border-bottom: 0; }
.sa-sec-row__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sa-sec-ip { font: 600 0.9rem/1.2 var(--f-mono, ui-monospace, SFMono-Regular, monospace); word-break: break-all; }
.sa-sec-meta { font: 400 0.76rem/1.3 var(--f-body); color: var(--muted); }
.sa-sec-actions { display: flex; gap: 8px; flex-shrink: 0; }
.sa-sec-empty { padding: 14px; margin: 0; }
.sa-sec-forms { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sa-sec-form { display: flex; gap: 8px; }
.sa-sec-form .sec-input { flex: 1; min-width: 0; }
@media (max-width: 480px) { .sa-sec-actions { flex-direction: column; } }