/*
 * auth.css — Bank ABC Portal API Sandbox
 * Styling halaman autentikasi (login, register, verify-otp, set-password)
 * Sesi 9.5 | FULL REPLACE
 *
 * Depends on: /assets/css/tokens.css, base.css, components.css
 * RULE: Tidak ada hardcoded hex. Semua via var(--*).
 * Persona panel LOCKED: --persona-p1-bg (register/otp/pwd), --persona-p2-bg (login)
 *
 * Sections:
 *  1. Page Wrapper              12. Form Body
 *  2. Auth Layout (split-grid)  13. Form Footer
 *  3. Brand Panel Base          14. Hint Card (demo credential)
 *  4. Brand Panel Persona Vars  15. Auth Divider
 *  5. Brand Panel Top           16. Form Error + Success
 *  6. Brand Panel Content       17. Form Group + Input
 *  7. Brand Panel Footer        18. OTP Input (6-box)
 *  8. Value List                19. Password Strength Meter
 *  9. Value Item                20. Responsive Layout
 * 10. Form Panel               21. prefers-reduced-motion
 * 11. Form Card + Header
 */

/* ─── 1. PAGE WRAPPER ───────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  background: var(--surface-canvas);
  display: flex;
  flex-direction: column;
}

/*
 * Header disembunyikan di auth pages — brand panel kiri sudah
 * berfungsi sebagai navigasi dan brand anchor. Tidak redundant.
 */
.auth-page .anon-header {
  display: none;
}

/*
 * PENTING: gunakan :not(.auth-layout) agar display:flex tidak
 * override display:grid di .auth-layout (specificity conflict fix).
 * .auth-page main = (0,1,1)=11 > .auth-layout = (0,1,0)=10 — flex menang tanpa ini.
 */
.auth-page main:not(.auth-layout) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ─── 2. AUTH LAYOUT (split-grid) ───────────────────────────── */
/*
 * Default (< 1024px): single column stack, brand panel on top (compact)
 * lg 1024px+: split-screen 1fr 1fr (50/50)
 * flex: 1 → grow sebagai flex child di dalam .auth-page (body flex column)
 */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
}

/* ─── 3. BRAND PANEL BASE ───────────────────────────────────── */
/*
 * Persona panel — warna bg via variant class.
 * Text: --text-primary (#0F172A): contrast 14.5:1 on P1, 14.0:1 on P2 — WCAG AAA.
 */
.auth-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-8) var(--space-8) var(--space-6);
  gap: var(--space-8);
  /* Mobile: compact, partial content */
  min-height: 200px;
}

/* ─── 4. BRAND PANEL PERSONA VARIANTS — LOCKED ──────────────── */
/*
 * Hex anchor (comment only, NOT in CSS rule):
 * P1 bg = #E3F2FD | P2 bg = #FFF3E0
 * Colors come from tokens — JANGAN ubah ke manual hex.
 */
.auth-brand-panel--p1 {
  background: var(--persona-p1-bg);
  border-right: 1px solid var(--persona-p1-border);
}

.auth-brand-panel--p2 {
  background: var(--persona-p2-bg);
  border-right: 1px solid var(--persona-p2-border);
}

/* ─── 5. BRAND PANEL TOP ────────────────────────────────────── */
.auth-brand-panel__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-brand-panel__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  margin-bottom: var(--space-2);
}

.auth-brand-panel__brand-logo {
  width: 32px;
  height: 32px;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  flex-shrink: 0;
}

.auth-brand-panel__brand-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.auth-brand-panel__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

.auth-brand-panel__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 40ch;
}

/* ─── 6. BRAND PANEL CONTENT ────────────────────────────────── */
.auth-brand-panel__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

/* ─── 7. BRAND PANEL FOOTER ─────────────────────────────────── */
.auth-brand-panel__footer {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
  padding-top: var(--space-4);
  border-top: 1px solid var(--surface-muted);
}

/* ─── 8. VALUE LIST ─────────────────────────────────────────── */
/* F14 (guidance) + F13 (learnability): value props per persona */
.auth-value-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ─── 9. VALUE ITEM ─────────────────────────────────────────── */
.auth-value-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.auth-value-item__icon {
  width: 18px;
  height: 18px;
  color: var(--status-success);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-value-item__icon svg {
  width: 16px;
  height: 16px;
}

.auth-value-item__text {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

/* ─── 10. FORM PANEL ────────────────────────────────────────── */
.auth-form-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  background: var(--surface-card);
  /* overflow-y: auto DIHAPUS — menyebabkan content ter-clip di desktop */
}

/* ─── 11. FORM CARD + HEADER ────────────────────────────────── */
.auth-form-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.auth-form-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.auth-form-header__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

.auth-form-header__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
}

.auth-form-header__subtitle a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: color var(--transition-fast);
}

.auth-form-header__subtitle a:hover {
  text-decoration: underline;
}

/* Flow step indicator (F14 guidance + F5 transparency) */
.auth-step-indicator {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}

/* ─── 12. FORM BODY ─────────────────────────────────────────── */
.auth-form-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Form group: label + input + hint/error */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.form-label--required::after {
  content: ' *';
  color: var(--status-danger);
  font-weight: var(--font-normal);
}

.form-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-input:hover {
  border-color: var(--text-tertiary);
}

.form-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-subtle);
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

.form-input:invalid:not(:placeholder-shown) {
  border-color: var(--status-danger-border);
}

.form-input--error {
  border-color: var(--status-danger-border);
  box-shadow: 0 0 0 3px var(--status-danger-bg);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
  margin: 0;
}

.form-hint a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.form-hint a:hover { text-decoration: underline; }

.form-hint a[data-disabled] {
  color: var(--text-tertiary);
  pointer-events: none;
}

/* Checkbox row */
.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.form-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.form-checkbox-row__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  cursor: pointer;
  user-select: none;
}

/* Submit button utility */
.btn-full {
  width: 100%;
  justify-content: center;
}

/* ─── 13. FORM FOOTER ───────────────────────────────────────── */
.auth-form-footer {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  line-height: var(--leading-normal);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--surface-muted);
}

.auth-form-footer a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: color var(--transition-fast);
}

.auth-form-footer a:hover { text-decoration: underline; }

/* ─── 14. HINT CARD (demo credential) ───────────────────────── */
/*
 * F13 (learnability): Demo credential exposed agar reviewer bisa langsung
 * mencoba tanpa harus buat akun sungguhan.
 * F14 (guidance): Konteks jelas — "Demo: gunakan ..."
 */
.auth-hint-card {
  background: var(--status-info-bg);
  border: 1px solid var(--status-info-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--status-info);
  line-height: var(--leading-relaxed);
}

.auth-hint-card code {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  background: var(--surface-subtle);
  color: var(--text-primary);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-muted);
}

/* ─── 15. AUTH DIVIDER ──────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-medium);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--surface-muted);
}

/* ─── 16. FORM ERROR + SUCCESS ──────────────────────────────── */
/*
 * F5 (transparency): Error dan success state inline, bukan di pop-up.
 * aria-live region agar screen reader announce otomatis.
 */
.auth-form-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--status-danger);
  line-height: var(--leading-normal);
}

.auth-form-error[hidden] { display: none; }

.auth-form-success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--status-success);
  line-height: var(--leading-normal);
}

.auth-form-success[hidden] { display: none; }

/* ─── 17. FORM GROUP + INPUT (already in section 12) ────────── */
/* Section placeholder to maintain count. See section 12 for rules. */

/* ─── 18. OTP INPUT (6-box) ─────────────────────────────────── */
/*
 * Q-F = F1: 6 kotak terpisah, auto-advance, paste detection.
 * F13 (learnability): Hint card "Demo: gunakan 123456"
 * F14 (guidance): Label per digit, jelas instruksinya
 */
.auth-otp-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.auth-otp-input {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  width: 100%;
  max-width: 320px;
}

.auth-otp-box {
  width: 100%;
  aspect-ratio: 1;
  min-height: 52px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 2px solid var(--surface-muted);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  caret-color: var(--brand-primary);
  /* Tap target: min 44px enforced via min-height */
}

.auth-otp-box:hover {
  border-color: var(--text-tertiary);
}

.auth-otp-box:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-subtle);
}

.auth-otp-box--filled {
  border-color: var(--brand-primary);
  background: var(--brand-primary-subtle);
}

.auth-otp-box--error {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.auth-otp-resend {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  line-height: var(--leading-normal);
  margin: 0;
}

.auth-otp-resend__link {
  color: var(--brand-primary);
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.auth-otp-resend__link:hover { color: var(--brand-primary); opacity: 0.8; }

.auth-otp-resend__link:disabled {
  color: var(--text-tertiary);
  text-decoration: none;
  cursor: default;
  opacity: 1;
}

/* ─── 19. PASSWORD STRENGTH METER ───────────────────────────── */
/*
 * Q-E = E1: 4-segment bar (Lemah/Sedang/Bagus/Kuat)
 * F5 (transparency): skor real-time visible saat user mengetik
 * F14 (guidance): label teks berubah sesuai skor
 * Score via data-strength attribute on .auth-password-strength container.
 */
.auth-password-strength {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.auth-password-strength__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  height: 6px;
  border-radius: var(--radius-full);
  overflow: visible;
}

.auth-password-strength__segment {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  transition: background var(--transition-base);
}

/* Score 1 — Lemah: hanya segment 1 merah */
.auth-password-strength[data-strength="1"]
  .auth-password-strength__segment:nth-child(1) {
  background: var(--status-danger);
}

/* Score 2 — Sedang: segment 1-2 amber */
.auth-password-strength[data-strength="2"]
  .auth-password-strength__segment:nth-child(-n+2) {
  background: var(--status-warning);
}

/* Score 3 — Bagus: segment 1-3 biru */
.auth-password-strength[data-strength="3"]
  .auth-password-strength__segment:nth-child(-n+3) {
  background: var(--status-info);
}

/* Score 4 — Kuat: semua segment hijau */
.auth-password-strength[data-strength="4"]
  .auth-password-strength__segment {
  background: var(--status-success);
}

.auth-password-strength__label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-snug);
  margin: 0;
  transition: color var(--transition-fast);
}

.auth-password-strength[data-strength="1"] .auth-password-strength__label {
  color: var(--status-danger);
}
.auth-password-strength[data-strength="2"] .auth-password-strength__label {
  color: var(--status-warning);
}
.auth-password-strength[data-strength="3"] .auth-password-strength__label {
  color: var(--status-info);
}
.auth-password-strength[data-strength="4"] .auth-password-strength__label {
  color: var(--status-success);
}

/* ─── 20. RESPONSIVE LAYOUT ─────────────────────────────────── */

/* Mobile default: brand panel hidden (form only) for narrow screens */
@media (max-width: 1023px) {
  .auth-brand-panel {
    padding: var(--space-5) var(--space-6);
    min-height: auto;
    gap: var(--space-4);
  }

  /* Hide value list and footer note on small screens */
  .auth-brand-panel__content,
  .auth-brand-panel__footer {
    display: none;
  }

  .auth-brand-panel__top {
    gap: var(--space-2);
  }

  .auth-brand-panel__title {
    font-size: var(--text-base);
  }

  .auth-brand-panel__subtitle {
    font-size: var(--text-xs);
    display: none;
  }

  .auth-form-panel {
    padding: var(--space-6) var(--space-4);
    align-items: flex-start;
  }
}

/* 1024px+: split-screen 50/50 */
@media (min-width: 1024px) {
  .auth-layout {
    grid-template-columns: 1fr 1fr;
  }

  .auth-brand-panel {
    padding: var(--space-12) var(--space-10);
    gap: var(--space-10);
  }

  .auth-brand-panel__content { display: flex; }
  .auth-brand-panel__footer { display: block; }
  .auth-brand-panel__subtitle { display: block; }

  .auth-form-panel {
    padding: var(--space-12) var(--space-10);
    align-items: flex-start;
    padding-top: var(--space-16);
  }

  .auth-form-card {
    max-width: 440px;
    width: 100%;
  }
}

/* ─── 21. PREFERS-REDUCED-MOTION ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .form-input,
  .auth-otp-box,
  .auth-form-header__subtitle a,
  .auth-form-footer a,
  .auth-hint-card,
  .auth-password-strength__segment,
  .auth-password-strength__label,
  .auth-otp-resend__link { transition: none; }
}
/* ─── 22. AUTH FOOTER OVERRIDE ──────────────────────────────── */
/*
 * site-footer--rich di auth pages menyebabkan tinggi footer
 * tidak konsisten antar step karena 3-col grid wrap mengikuti
 * perubahan viewport width (scrollbar muncul/hilang).
 * Fix: sembunyikan grid, pertahankan hanya copyright bar.
 * Tidak perlu ubah HTML di register/verify-otp/set-password.
 */
.auth-page .site-footer--rich .site-footer__grid {
  display: none;
}

.auth-page .site-footer--rich {
  padding: var(--space-3) var(--space-8);
  flex-shrink: 0;
}

.auth-page .site-footer--rich .site-footer__inner {
  padding: 0;
}

.auth-page .site-footer--rich .site-footer__bottom {
  border-top: none;
  padding: 0;
}