/* Halaman akun, keamanan, pengguna & jejak audit (Modul Akun). Memakai token dari app.css. */

/* Login & 2FA ------------------------------------------------------------ */
.auth-help { margin: var(--space-4) 0 0; text-align: center; }
.auth-help .icon { vertical-align: -0.15em; }
.auth-card input[name="code"] { font-size: var(--text-xl); letter-spacing: 0.3em; text-align: center; }

/* Kepala profil (avatar + nama) ------------------------------------------ */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.card__body > .profile-head { margin-bottom: var(--space-4); }
.profile-head__text { min-width: 0; }
.profile-head__name { margin: 0; color: var(--color-text-strong); font-size: var(--text-lg); font-weight: 650; }
.page-header .profile-head .page-title { margin: 0; }
.page-header .profile-head .page-subtitle { margin: 0.1rem 0 0; }

.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list li + li { margin-top: 0.2rem; }

.tips-list { margin: 0; padding-left: 1.1rem; }
.tips-list li + li { margin-top: var(--space-2); }

.profile-actions,
.security-actions { margin-top: var(--space-4); }
.security-actions form { margin: 0; }

.admin-note {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--c-warning-300);
  border-radius: var(--radius-sm);
  background: var(--c-warning-50);
}

/* Bantuan peran pada formulir pengguna */
.role-help { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.role-help li + li { margin-top: 0.15rem; }

/* Isian yang tidak berlaku (mis. badan usaha saat akses semua) */
.field.is-dimmed { opacity: 0.55; }
.field.is-dimmed .field__choices { pointer-events: none; }

.user-status { gap: 0.35rem; }
.ua-cell { display: inline-block; max-width: 18rem; vertical-align: bottom; }

/* Kata sandi sementara (ditampilkan sekali) ------------------------------- */
.temp-password__value {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px dashed var(--c-warning-600);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  user-select: all;
}

/* Penyiapan 2FA ------------------------------------------------------------ */
.twofa-steps { margin: 0; padding: 0; list-style: none; }
.twofa-step { display: flex; gap: var(--space-4); }
.twofa-step + .twofa-step { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.twofa-step__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--c-primary-100);
  color: var(--c-primary-800);
  font-weight: 700;
}
.twofa-step__body { flex: 1; min-width: 0; }
.twofa-step__title { margin: 0.2rem 0 var(--space-2); font-size: var(--text-lg); }
.twofa-step .form-grid { grid-template-columns: minmax(0, 1fr); max-width: 18rem; }
.twofa-qr {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  line-height: 0;
}
.twofa-qr svg { max-width: 100%; height: auto; }
.secret-key {
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

/* Jejak audit ------------------------------------------------------------- */
.badge--audit-user { --badge-bg: #f3e8ff; --badge-fg: #6b21a8; --badge-border: #e9d5ff; }
.audit-table td { vertical-align: top; }
.audit-object { min-width: 9rem; overflow-wrap: anywhere; }
.audit-message { min-width: 16rem; overflow-wrap: anywhere; }
.audit-changes { margin-top: 0.35rem; }
.audit-changes > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.audit-changes > summary::-webkit-details-marker { display: none; }
.audit-changes > summary:hover { color: var(--color-link-hover); text-decoration: underline; }
.audit-changes__table {
  width: 100%;
  margin-top: var(--space-2);
  table-layout: fixed;
  border: 1px solid var(--color-border);
  border-collapse: collapse;
  background: var(--color-surface-muted);
  font-size: var(--text-sm);
}
.audit-changes__table th,
.audit-changes__table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.audit-changes__table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.audit-changes__table th[scope="row"] { width: 38%; font-weight: 600; }
.audit-changes__table tr:last-child > * { border-bottom: 0; }
.audit-changes__old { color: var(--c-danger-700); text-decoration: line-through; text-decoration-color: rgba(185, 28, 28, 0.35); }
.audit-changes__new { color: var(--c-success-800); text-decoration: none; }
.audit-footnote { margin-top: var(--space-3); }

@media (max-width: 720px) {
  .twofa-step { gap: var(--space-3); }
  .temp-password__value { font-size: var(--text-lg); }
}