/* SMKG LOGIN V46 - dedicated login stylesheet. Loaded AFTER style.css. */
html, body { margin:0 !important; min-height:100% !important; }
html { background:#fff !important; }
body.login-body {
  min-height:100vh !important;
  margin:0 !important;
  padding:24px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(135deg,#003369 0%,#002b58 55%,#001f3f 100%) !important;
  background-image:linear-gradient(135deg,#003369 0%,#002b58 55%,#001f3f 100%) !important;
  background-color:#003369 !important;
}
body.login-body::before,
body.login-body::after { display:none !important; content:none !important; background:none !important; }
body.login-body .login-container {
  width:100% !important;
  max-width:450px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  background-color:transparent !important;
}
body.login-body .login-container::before,
body.login-body .login-container::after { display:none !important; content:none !important; }
body.login-body .login-box {
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:30px !important;
  background:#fff !important;
  background-image:none !important;
  background-color:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:18px !important;
  box-shadow:0 10px 30px rgba(15,23,42,.10) !important;
}
body.login-body .login-box::before,
body.login-body .login-box::after { display:none !important; content:none !important; background:none !important; }
body.login-body .login-logo,
body.login-body form,
body.login-body .login-footer { background:transparent !important; background-image:none !important; }
body.login-body .password-input-wrap {
  position:relative !important;
  display:block !important;
  width:100% !important;
  margin:0 !important;
}
body.login-body .password-input-wrap > input {
  display:block !important;
  width:100% !important;
  height:44px !important;
  box-sizing:border-box !important;
  padding:0 50px 0 14px !important;
}
body.login-body .password-toggle {
  position:absolute !important;
  top:50% !important;
  right:5px !important;
  left:auto !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  width:36px !important;
  height:36px !important;
  margin:0 !important;
  padding:7px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:#64748b !important;
  z-index:20 !important;
  cursor:pointer !important;
}
body.login-body .password-toggle:hover { background:#f1f5f9 !important; color:#003369 !important; }
body.login-body .password-eye {
  display:block !important;
  width:20px !important;
  height:20px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  pointer-events:none !important;
}
@media (max-width:600px) {
  body.login-body { padding:14px !important; }
  body.login-body .login-box { padding:28px 20px !important; }
}

/* V47 FINAL: login follows the same canvas/container proportions as forgot_password.php */
body.login-body {
  background: linear-gradient(135deg,#003369 0%,#002b58 55%,#001f3f 100%) !important;
  background-image: linear-gradient(135deg,#003369 0%,#002b58 55%,#001f3f 100%) !important;
  background-color:#003369 !important;
  padding:24px !important;
}
body.login-body .login-container { width:100% !important; max-width:450px !important; }
body.login-body .login-box { width:100% !important; max-width:450px !important; padding:30px !important; border-radius:18px !important; background:#fff !important; background-image:none !important; background-color:#fff !important; }
@media (max-width:600px){ body.login-body{padding:14px !important;} body.login-body .login-box{padding:30px 20px !important;} }


/* V49 FINAL - mobile login canvas + reliable Lupa Password touch target */
html.login-page,
html.login-page body.login-body {
  background:#003369 !important;
  background-color:#003369 !important;
  background-image:linear-gradient(135deg,#003b73 0%,#003369 50%,#00264d 100%) !important;
}
html.login-page {
  min-height:100% !important;
  width:100% !important;
}
body.login-body {
  min-height:100vh !important;
  min-height:100dvh !important;
  width:100% !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}
body.login-body .login-container,
body.login-body .login-box {
  -webkit-tap-highlight-color:transparent;
}
.login-forgot-link {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:8px 14px !important;
  margin:0 !important;
  color:#2563eb !important;
  text-decoration:none !important;
  font-weight:700 !important;
  font-size:14px !important;
  line-height:1.2 !important;
  border-radius:10px !important;
  position:relative !important;
  z-index:50 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}
.login-forgot-link:hover,
.login-forgot-link:focus-visible {
  background:#eff6ff !important;
  color:#003369 !important;
  text-decoration:none !important;
  outline:2px solid rgba(37,99,235,.18) !important;
  outline-offset:1px !important;
}
@media (max-width:600px) {
  html.login-page,
  html.login-page body.login-body {
    background:#003369 !important;
    background-color:#003369 !important;
    background-image:linear-gradient(160deg,#003b73 0%,#003369 48%,#00264d 100%) !important;
  }
  body.login-body {
    padding:14px !important;
    align-items:center !important;
    justify-content:center !important;
  }
  body.login-body .login-container { max-width:450px !important; }
  body.login-body .login-box { width:100% !important; }
  .login-forgot-link { min-height:46px !important; width:auto !important; }
}