/* Sign-in steps: login + Turnstile, MFA code, authenticator enrollment, recovery codes */

.auth-step {
  max-width: 28rem;
}

.auth-step h2 {
  font-size: 1.125rem;
  margin: 0;
}

.auth-turnstile {
  min-height: 65px;
}

.auth-instructions {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
}

.auth-qr {
  align-self: flex-start;
  padding: var(--space-sm);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.auth-secret code,
.auth-recovery-codes code {
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  word-break: break-all;
}

.auth-recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-sm) var(--space-lg);
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-md) 2.25rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.auth-support {
  margin-top: var(--space-md);
}

.auth-step a:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* min-width: 0 so a wide table scrolls in its box instead of stretching the flex column. */
.admin-panel.auth-step {
  max-width: none;
  min-width: 0;
}

/* Admin > Password and CGJSoftware client page (superusers only); set off like the QuickBooks section. */
.admin-password,
.admin-cgjsoft {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.admin-password .form {
  max-width: 28rem;
}

.admin-cgjsoft .form {
  max-width: 36rem;
}

/* Admin > Activity (superusers only) */
.admin-activity {
  margin-top: var(--space-lg);
}

.admin-activity h2 {
  font-size: 1.125rem;
  margin: 0 0 var(--space-xs);
}

.admin-activity-wrap {
  max-height: 28rem;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

/* Below min-width the box scrolls sideways instead of crushing the columns. */
.admin-activity-table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-activity-table th,
.admin-activity-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.admin-activity-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Collapsed borders scroll away under a sticky header, so draw its rule with a shadow. */
.admin-activity-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--color-border);
}

.admin-activity-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-activity-table th:first-child,
.admin-activity-table td:first-child {
  padding-left: var(--space-md);
}

.admin-activity-table th:last-child,
.admin-activity-table td:last-child {
  padding-right: var(--space-md);
}

/* When, Who: one line. What, IP: fixed bands (IPv6 breaks at its colons). Details: the rest, wrapping. */
.admin-activity-table td:nth-child(1),
.admin-activity-table td:nth-child(2) {
  white-space: nowrap;
}

.admin-activity-table th:nth-child(3) {
  width: 11rem;
}

.admin-activity-table th:nth-child(5) {
  width: 8.5rem;
}

.admin-activity-table td:nth-child(4) {
  overflow-wrap: anywhere;
}

.admin-activity-table tr.is-failed td:nth-child(3) {
  color: var(--color-danger);
}