@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ============================================================
   ERPx — Login page skin
   Reference: Figma "ERPx" file VsY9EnwjV3IlDdmkf8YX1e, node 7:15
   Scope: body[data-path="login"] only (website pages stay untouched)
   - Card centered on the page
   - Default Frappe logo + site name kept in .page-card-head
   - Hide "Forgot Password?" link
   - Hide Google / social login buttons
   ============================================================ */

body[data-path="login"] {
  --erpx-navy: #172c4f;
  --erpx-ink: #0b1627;
  --erpx-fade: #979797;
  --erpx-link: #0022ff;
  --erpx-border: #cecece;

  font-family: 'Poppins', sans-serif;
  background-color: #fff !important;
  background-image:
    radial-gradient(circle 620px at -8% -34%, #dfe3ea 0 99%, transparent 100%),
    radial-gradient(circle 240px at calc(100% - 60px) -70px, var(--erpx-navy) 0 99%, transparent 100%),
    radial-gradient(circle 190px at 36% 104%, var(--erpx-navy) 0 99%, transparent 100%),
    radial-gradient(circle 520px at 106% 92%, #dfe3ea 0 99%, transparent 100%),
    radial-gradient(circle 300px at -4% 96%, #dfe3ea 0 99%, transparent 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Chrome ringan: hilangkan navbar/footer supaya fokus ke kartu */
body[data-path="login"] .navbar,
body[data-path="login"] .web-footer {
  display: none !important;
}

body[data-path="login"] .page-content-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body[data-path="login"] main.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-path="login"] .page_content {
  width: 100%;
}

/* Panggung login: semua konten di tengah */
body[data-path="login"] .for-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

/* Header bawaan Frappe dipertahankan: logo aplikasi + nama site */
body[data-path="login"] .for-login .page-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  padding: 0;
  margin: 0 auto 24px;
  text-align: center;
}

body[data-path="login"] .for-login .page-card-head .app-logo {
  width: auto;
  height: 64px;
  max-height: 64px;
  object-fit: contain;
}

body[data-path="login"] .for-login .page-card-head h4 {
  margin: 16px 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--erpx-navy);
}

/* ---------------- Kartu ---------------- */
body[data-path="login"] .for-login .login-content.page-card {
  width: 480px;
  max-width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 36px;
  border: none;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 0 12.3px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body[data-path="login"] .for-login .login-content .form-signin,
body[data-path="login"] .for-login .login-content form {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

body[data-path="login"] .for-login .page-card-body {
  width: 100%;
}

/* Label tampil (bawaan Frappe menyembunyikannya) */
body[data-path="login"] .for-login .form-group {
  margin-bottom: 16px;
}

body[data-path="login"] .for-login .form-group label.form-label,
body[data-path="login"] .for-login .form-group label.sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0;
  margin: 0 0 12px;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--erpx-ink);
}

body[data-path="login"] .for-login .form-group label.form-label::after,
body[data-path="login"] .for-login .form-group label.sr-only::after {
  content: "*";
  color: red;
  margin-left: 1px;
}

/* Input: pill, border tipis, placeholder abu */
body[data-path="login"] .for-login .page-card .email-field input,
body[data-path="login"] .for-login .page-card .password-field input,
body[data-path="login"] .for-login .page-card .form-control {
  height: auto;
  margin-bottom: 0;
  padding: 12px 16px;
  border: 1px solid var(--erpx-border);
  border-radius: 25px;
  background-color: #fff;
  color: var(--erpx-ink);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  box-shadow: none;
}

body[data-path="login"] .for-login .page-card .form-control::placeholder {
  color: var(--erpx-fade);
  opacity: 1;
}

body[data-path="login"] .for-login .page-card .form-control:focus {
  border-color: var(--erpx-navy);
  box-shadow: 0 0 0 3px rgba(23, 44, 79, 0.12);
}

/* Ikon kunci bawaan tidak ada di desain */
body[data-path="login"] .for-login .field-icon {
  display: none !important;
}

body[data-path="login"] .for-login .page-card .email-field input,
body[data-path="login"] .for-login .page-card .password-field input {
  padding-left: 16px;
}

/* Tombol mata untuk lihat/sembunyikan kata sandi.
   Teks bawaan Frappe ("Show"/"Hide") disembunyikan, diganti ikon mata.
   Ikon bertukar otomatis lewat type input yang diubah oleh login.js Frappe,
   jadi tidak perlu JavaScript tambahan. */
body[data-path="login"] .for-login .page-card .password-field {
  position: relative;
}

body[data-path="login"] .for-login .page-card .password-field input {
  padding-right: 48px;
}

body[data-path="login"] .for-login .page-card .password-field .toggle-password {
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: block !important;
  width: 24px;
  height: 24px;
  margin: auto 0;
  padding: 0;
  overflow: hidden;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background-color: var(--erpx-fade);
  cursor: pointer;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  transition: background-color 0.15s ease;
}

body[data-path="login"] .for-login .page-card .password-field input[type="password"] ~ .toggle-password {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.2%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.2%27%2F%3E%3C%2Fsvg%3E");
}

body[data-path="login"] .for-login .page-card .password-field input[type="text"] ~ .toggle-password {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M3.5%203.5%2020.5%2020.5%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M3.5%203.5%2020.5%2020.5%27%2F%3E%3C%2Fsvg%3E");
}

body[data-path="login"] .for-login .page-card .password-field .toggle-password:hover,
body[data-path="login"] .for-login .page-card .password-field .toggle-password:focus-visible {
  background-color: var(--erpx-navy);
}

/* Tombol masuk */
body[data-path="login"] .for-login .page-card-actions {
  width: 100%;
  margin-top: 16px;
}

body[data-path="login"] .for-login .btn-login {
  width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  background: var(--erpx-navy);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: none;
}

body[data-path="login"] .for-login .btn-login:hover,
body[data-path="login"] .for-login .btn-login:focus {
  background: #12233f;
  color: #fff;
}

/* ---- Dihapus sesuai permintaan: lupa kata sandi & login Google/sosial ---- */
body[data-path="login"] .forgot-password-message,
body[data-path="login"] .social-logins,
body[data-path="login"] .social-login-buttons,
body[data-path="login"] .login-divider {
  display: none !important;
}

/* Tautan daftar di bawah kartu */
body[data-path="login"] .for-login .sign-up-message {
  width: 480px;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--erpx-ink);
}

body[data-path="login"] .for-login .sign-up-message a {
  color: var(--erpx-link);
  text-decoration: underline;
}

/* ---------------- Responsif ---------------- */
@media (max-width: 1180px) {
  body[data-path="login"] .for-login {
    padding: 40px 24px;
  }

  body[data-path="login"] .for-login .login-content.page-card,
  body[data-path="login"] .for-login .sign-up-message {
    width: 100%;
    max-width: 480px;
  }
}

@media (max-width: 520px) {
  body[data-path="login"] .for-login {
    padding: 24px 16px;
  }

  body[data-path="login"] .for-login .login-content.page-card {
    padding: 24px;
    border-radius: 24px;
  }
}