/*
 * C-SADAP — WHITE PREMIUM LOGIN THEME
 *
 * Cara pakai:
 * 1. Simpan file ini di folder web-dashboard.
 * 2. Tambahkan baris berikut setelah blok <style> utama di login.php:
 *
 *    <link rel="stylesheet" href="login_white_premium.css">
 *
 * 3. Jika login.php berada di folder yang sama dengan file ini, path di atas sudah benar.
 *
 * File ini hanya mengubah tampilan. Tidak mengubah PHP, session, AJAX, OTP,
 * autentikasi, validasi, maupun alur redirect.
 */

:root {
  --wp-bg: #ffffff;
  --wp-bg-soft: #f8fafc;
  --wp-navy: #172044;
  --wp-slate: #334155;
  --wp-muted: #64748b;
  --wp-indigo: #4f46e5;
  --wp-blue: #2563eb;
  --wp-purple: #7c3aed;
  --wp-border: rgba(79, 70, 229, 0.22);
  --wp-card-start: #211252;
  --wp-card-end: #17113d;
  --wp-shadow: rgba(30, 41, 90, 0.18);
}

/* =========================================================
   BASE WHITE CANVAS
   ========================================================= */
html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background: var(--wp-bg) !important;
  color: var(--wp-navy) !important;
  overflow-x: hidden;
}

/* Hilangkan image background dan lapisan gelap tema lama. */
.bg-layer {
  display: none !important;
}

.bg-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 13% 15%, rgba(99, 102, 241, 0.075), transparent 27%),
    radial-gradient(circle at 88% 83%, rgba(59, 130, 246, 0.065), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #fbfcff 52%, #f8faff 100%) !important;
}

.bg-vignette {
  background: none !important;
  pointer-events: none !important;
}

.particle {
  display: none !important;
}

/* Dekorasi tipis agar putih tidak terasa datar. */
body::before,
body::after {
  content: '';
  position: fixed;
  z-index: 2;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(1px);
}

body::before {
  width: 240px;
  height: 240px;
  top: -120px;
  left: -80px;
  border: 1px solid rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 0 32px rgba(99, 102, 241, 0.025);
}

body::after {
  width: 300px;
  height: 300px;
  right: -150px;
  bottom: -150px;
  border: 1px solid rgba(37, 99, 235, 0.07);
  box-shadow: 0 0 0 38px rgba(37, 99, 235, 0.022);
}

/* =========================================================
   PREMIUM CARD
   ========================================================= */
.login-card {
  position: relative !important;
  z-index: 10 !important;
  background: linear-gradient(145deg, var(--wp-card-start) 0%, var(--wp-card-end) 100%) !important;
  border: 1px solid rgba(129, 140, 248, 0.32) !important;
  box-shadow:
    0 28px 80px var(--wp-shadow),
    0 10px 28px rgba(30, 41, 90, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

.login-card::before {
  height: 2px !important;
  left: 14% !important;
  right: 14% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(147, 197, 253, 0.72),
    rgba(196, 181, 253, 0.82),
    transparent
  ) !important;
}

.login-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.045), transparent 34%);
}

.corner-accent {
  border-color: rgba(253, 230, 138, 0.58) !important;
  box-shadow: 0 0 8px rgba(253, 230, 138, 0.14) !important;
}

/* =========================================================
   BRANDING
   ========================================================= */
.login-logo h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(96, 165, 250, 0.28) !important;
}

.login-logo p {
  color: rgba(238, 240, 255, 0.78) !important;
}

.login-logo-icon {
  box-shadow:
    0 8px 28px rgba(59, 108, 245, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

/* =========================================================
   FORM AND INPUTS
   ========================================================= */
.form-group label {
  color: rgba(238, 240, 255, 0.88) !important;
}

.form-group:focus-within label {
  color: #93c5fd !important;
}

.input-wrapper > i.icon-left {
  color: rgba(96, 165, 250, 0.58) !important;
}

.input-wrapper:focus-within > i.icon-left {
  color: #93c5fd !important;
}

.glass-input,
.otp-box {
  background: #ffffff !important;
  color: var(--wp-navy) !important;
  -webkit-text-fill-color: var(--wp-navy) !important;
  border: 1.5px solid rgba(165, 180, 252, 0.42) !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05) !important;
}

.glass-input::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

.glass-input:hover:not(:focus),
.otp-box:hover:not(:focus) {
  border-color: rgba(129, 140, 248, 0.68) !important;
  background: #ffffff !important;
}

.glass-input:focus,
.otp-box:focus {
  border-color: #818cf8 !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 4px rgba(129, 140, 248, 0.14),
    0 6px 18px rgba(79, 70, 229, 0.10) !important;
}

.otp-box.filled {
  border-color: rgba(16, 185, 129, 0.55) !important;
  background: #f0fdf4 !important;
}

.toggle-password {
  color: #94a3b8 !important;
}

.toggle-password:hover {
  color: #4f46e5 !important;
  background: rgba(99, 102, 241, 0.08) !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.glass-btn {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 52%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 26px rgba(79, 70, 229, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
}

.glass-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 52%, #6d28d9 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 34px rgba(79, 70, 229, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
}

.guest-btn {
  color: #dbeafe !important;
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(147, 197, 253, 0.38) !important;
}

.guest-btn:hover {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  border-color: #93c5fd !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28) !important;
}

.resend-btn {
  color: #93c5fd !important;
}

.resend-btn:hover:not(:disabled) {
  background: rgba(147, 197, 253, 0.10) !important;
  color: #bfdbfe !important;
}

/* =========================================================
   OTP, GUEST, RECOVERY, FOOTER
   ========================================================= */
.otp-info,
.guest-section {
  background: rgba(129, 140, 248, 0.10) !important;
  border-color: rgba(165, 180, 252, 0.24) !important;
}

.otp-info i,
.wa-display i {
  color: #60a5fa !important;
}

.otp-info-text,
.resend-text,
.login-footer,
.guest-info {
  color: rgba(238, 240, 255, 0.78) !important;
}

.otp-info-text strong,
.wa-display .wa-number {
  color: #ffffff !important;
}

.wa-display .wa-label {
  color: rgba(238, 240, 255, 0.72) !important;
}

.login-divider {
  background: linear-gradient(90deg, transparent, rgba(165, 180, 252, 0.28), transparent) !important;
}

.login-divider::before {
  background: rgba(165, 180, 252, 0.48) !important;
}

.system-recovery {
  border-top-color: rgba(248, 113, 113, 0.24) !important;
}

.system-recovery-heading {
  color: rgba(254, 202, 202, 0.88) !important;
}

.system-recovery-info {
  color: rgba(226, 232, 240, 0.64) !important;
}

.system-recovery .restore-btn {
  color: #fecaca !important;
  background: rgba(239, 68, 68, 0.11) !important;
  border-color: rgba(248, 113, 113, 0.34) !important;
}

/* =========================================================
   MODAL DAN TOAST
   ========================================================= */
.restore-gate-backdrop,
.blocking-notice-backdrop {
  background: rgba(15, 23, 42, 0.34) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.restore-gate,
.blocking-notice {
  background: linear-gradient(145deg, #211252, #17113d) !important;
  border-color: rgba(165, 180, 252, 0.34) !important;
  box-shadow: 0 28px 80px rgba(30, 41, 90, 0.28) !important;
}

.restore-gate input {
  background: #ffffff !important;
  color: var(--wp-navy) !important;
  border-color: rgba(165, 180, 252, 0.46) !important;
}

.restore-gate-cancel {
  color: #dbeafe !important;
}

.toast {
  border-color: rgba(165, 180, 252, 0.34) !important;
  box-shadow: 0 18px 48px rgba(30, 41, 90, 0.22) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 480px) {
  body {
    background: #f8fafc !important;
  }

  .bg-overlay {
    background:
      radial-gradient(circle at 12% 10%, rgba(99, 102, 241, 0.06), transparent 34%),
      #f8fafc !important;
  }

  .login-card {
    box-shadow:
      0 18px 54px rgba(30, 41, 90, 0.20),
      0 6px 20px rgba(30, 41, 90, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }
}

/* Hormati preferensi aksesibilitas pengguna. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   FINAL CENTERING PATCH
   Memastikan card benar-benar berada di tengah viewport.
   ========================================================= */
html,
body {
  width: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

body {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  padding: 16px !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.login-card {
  grid-area: 1 / 1 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 420px !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  margin: 0 !important;
  transform: none;
}

/* Elemen dekorasi tetap menjadi background dan tidak memengaruhi posisi card. */
.bg-layer,
.bg-overlay,
.bg-vignette,
.particle,
.restore-gate-backdrop,
.blocking-notice-backdrop,
.toast-container {
  position: fixed !important;
}

@media (max-width: 480px) {
  body {
    min-height: 100dvh !important;
    padding: 8px !important;
  }

  .login-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }
}

@media (min-width: 481px) {
  .login-card {
    max-height: calc(100dvh - 32px) !important;
  }
}

@media (max-height: 700px) and (min-width: 481px) {
  body {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .login-card {
    max-height: calc(100dvh - 24px) !important;
  }
}


/* =========================================================
   LIGHT MODE CONTRAST FIX — PEMULIHAN SISTEM
   ========================================================= */
html[data-theme="light"] .system-recovery {
  border-top-color: rgba(185, 28, 28, 0.24) !important;
}

html[data-theme="light"] .system-recovery-heading,
html[data-theme="light"] .system-recovery-heading span {
  color: #7f1d1d !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .system-recovery-heading i {
  color: #b91c1c !important;
}

html[data-theme="light"] .system-recovery-info {
  color: #475569 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .system-recovery .restore-btn,
html[data-theme="light"] .system-recovery .restore-btn span {
  color: #991b1b !important;
  background: rgba(254, 226, 226, 0.92) !important;
  border-color: rgba(185, 28, 28, 0.38) !important;
  text-shadow: none !important;
}

html[data-theme="light"] .system-recovery .restore-btn i {
  color: #b91c1c !important;
}

html[data-theme="light"] .system-recovery .restore-btn:hover {
  color: #7f1d1d !important;
  background: #fee2e2 !important;
  border-color: rgba(153, 27, 27, 0.58) !important;
  box-shadow: 0 5px 16px rgba(185, 28, 28, 0.14) !important;
}


/* =========================================================
   EXACT LIGHT MODE TEXT FIX — LOGIN.PHP SYSTEM RECOVERY
   Selector dibuat lebih spesifik agar mengalahkan aturan lama.
   ========================================================= */
html[data-theme="light"] .login-card .system-recovery .system-recovery-heading,
html[data-theme="light"] .login-card .system-recovery .system-recovery-heading span {
  color: #7f1d1d !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}

html[data-theme="light"] .login-card .system-recovery .system-recovery-heading i {
  color: #b91c1c !important;
  opacity: 1 !important;
}

html[data-theme="light"] .login-card .system-recovery p.system-recovery-info {
  color: #334155 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  font-weight: 500 !important;
}

html[data-theme="light"] .login-card .system-recovery {
  background: rgba(255, 255, 255, 0.72) !important;
  border-top: 1px solid rgba(185, 28, 28, 0.24) !important;
  border-radius: 12px !important;
  padding: 12px 10px 10px !important;
}