/* ==========================================================================
   AGF Dashboard — Layar kunci & pengaturan sandi
   ========================================================================== */

/* Selama terkunci, isi aplikasi tidak boleh sempat terlihat sekilas pun */
html.is-locked body > .app { visibility: hidden; }

.lock-screen {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 15% -10%, hsl(var(--accent-h) 70% 55% / .22), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, hsl(calc(var(--accent-h) + 45) 70% 55% / .18), transparent 55%),
    var(--bg-app);
  animation: fade-in 220ms var(--ease);
}
.lock-screen.leaving { animation: fade-in 240ms var(--ease) reverse both; }

.lock-card {
  width: min(400px, 100%);
  padding: 28px 26px 22px;
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: pop-in 300ms var(--ease) both;
}
.lock-card.shake { animation: lock-shake 380ms var(--ease); }

@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  32% { transform: translateX(8px); }
  50% { transform: translateX(-6px); }
  68% { transform: translateX(4px); }
  85% { transform: translateX(-2px); }
}

.lock-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }

.lock-title { font-size: 21px; font-weight: 700; letter-spacing: -.028em; }
.lock-sub { font-size: 13.3px; color: var(--text-muted); margin-top: 4px; line-height: 1.55; }

/* Catatan penjelas di layar daftar */
.lock-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; padding: 11px 13px;
  border-radius: var(--r-md);
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--info) 24%, transparent);
  font-size: 12.5px; line-height: 1.6;
}
.lock-note svg { flex: none; margin-top: 2px; color: var(--info); }

/* Pemilih akun bila ada lebih dari satu di perangkat ini */
.acc-picker {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 16px;
}
.acc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; padding: 5px 12px 5px 5px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  font-size: 12.8px; font-weight: 550;
  cursor: pointer; transition: all var(--fast);
}
.acc-chip:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.acc-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }

.lock-form { display: flex; flex-direction: column; gap: 13px; margin-top: 20px; }
.lock-form .field > label { font-size: 12.5px; }

/* Umpan balik ketersediaan nama pengguna */
.field-hint.is-good { color: var(--success); }
.field-hint.is-bad { color: var(--danger); }

.lock-input-wrap { position: relative; display: flex; align-items: center; }
.lock-input-wrap > svg {
  position: absolute; left: 12px; width: 16px; height: 16px;
  color: var(--text-muted); pointer-events: none;
}
.lock-input-wrap .input {
  min-height: 46px; padding-left: 37px; padding-right: 42px;
  font-size: 15px; letter-spacing: .02em;
}
.lock-input-wrap .icon-btn { position: absolute; right: 7px; }

.lock-error {
  font-size: 12.8px; font-weight: 550; line-height: 1.5;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
  border-radius: var(--r-sm);
  padding: 8px 11px;
}

.lock-remember { font-size: 12.8px; color: var(--text-soft); }

.lock-foot {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 18px; padding-top: 15px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.lock-link {
  font-size: 12.5px; color: var(--text-muted);
  cursor: pointer; background: none; border: none;
  transition: color var(--fast);
}
.lock-link:hover { color: var(--accent-text); text-decoration: underline; }

/* ---------- Indikator kekuatan sandi ---------- */
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.pw-meter-bar {
  flex: 1; height: 4px; border-radius: var(--r-pill);
  background: var(--bg-active); overflow: hidden;
}
.pw-meter-bar span {
  display: block; height: 100%; width: 0;
  border-radius: var(--r-pill);
  background: var(--danger);
  transition: width var(--normal), background var(--normal);
}
.pw-meter-label { font-size: 11.5px; font-weight: 570; color: var(--text-muted); min-width: 74px; }

.pw-meter[data-score="2"] .pw-meter-bar span { background: var(--warning); }
.pw-meter[data-score="3"] .pw-meter-bar span,
.pw-meter[data-score="4"] .pw-meter-bar span { background: var(--success); }
.pw-meter[data-score="3"] .pw-meter-label,
.pw-meter[data-score="4"] .pw-meter-label { color: var(--success); }

/* ---------- Ringkasan status di Pengaturan ---------- */
.auth-state {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-surface-2);
}
.auth-state-ico {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--bg-sunken); color: var(--text-muted);
}
.auth-state.on .auth-state-ico { background: var(--success-soft); color: var(--success); }

@media (max-width: 520px) {
  .lock-card { padding: 24px 20px 18px; }
  .lock-title { font-size: 19px; }
}

/* ---------- Lencana status sinkronisasi (header) ---------- */
/* Hanya muncul saat ada yang perlu diketahui: luring atau gagal sinkron.
   Saat semuanya beres lencana disembunyikan supaya header tidak ramai. */
.sync-badge {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-surface-2);
  color: var(--text-muted);
  cursor: default;
}
.sync-badge svg { width: 13px; height: 13px; }

.sync-badge.ok   { border-color: transparent; background: var(--success-soft); color: var(--success); }
.sync-badge.warn { border-color: transparent; background: var(--warning-soft); color: var(--warning); }
.sync-badge.bad  { border-color: transparent; background: var(--danger-soft);  color: var(--danger); }

.sync-badge.bad { animation: sync-nudge var(--normal) both; }
@keyframes sync-nudge {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .sync-badge.bad { animation: none; } }

/* ---------- Masuk dengan Google ---------- */
.btn-google {
  /* Beri jarak dari teks pengantar di atasnya — tanpa ini tombolnya terasa
     menempel pada kalimat, bukan berdiri sebagai pilihan tersendiri. */
  margin-top: 22px;
  gap: 10px;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border-strong, var(--border));
  font-weight: 560;
}
.btn-google:hover:not(:disabled) {
  background: var(--bg-surface-2);
  border-color: var(--text-muted);
}
.btn-google:disabled { opacity: .6; cursor: progress; }
.btn-google svg { flex: none; }

/* Pemisah "atau" — garis di kiri dan kanan teks */
.lock-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 2px;
  color: var(--text-muted); font-size: 12px;
}
.lock-or::before, .lock-or::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}