/*
 * Aura Enterprise - Login Page Stylesheet (Polished & Fully Responsive)
 * CBT Shima v4
 */

:root {
  --login-bg: #f2f4f6;
  --login-card-bg: #ffffff;
  --login-text: #191c1e;
  --login-text-muted: #45464d;
  --login-border: #e0e3e5;
  --login-input-border: #c6c6cd;
  --login-primary: #0058be;
  --login-primary-hover: #004bb0;
  --login-alert-bg: #e8f0fe;
  --login-alert-text: #004395;
  --login-card-footer1: #eceef0;
  --login-card-footer2: #f2f4f6;
}

/* Base Body Override saat belum login */
body {
  background-color: var(--login-bg) !important;
  color: var(--login-text) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Sembunyikan elemen bawaan TCExam lama saat login */
.header,
#containerWrapper > h1,
.pagehelp,
#footer .minibutton.skip-link,
#footer .copyright,
#footer div[dir="ltr"],
#footer,
#topofdoc,
#menusection {
  display: none !important;
}

#containerWrapper {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.body {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  padding: 24px 16px 70px 16px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Floating Top-Right Menu Button */
.aura-login-top-menu {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 1050 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid var(--login-input-border) !important;
  border-radius: 9999px !important;
  padding: 6px 14px 6px 8px !important;
  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  text-decoration: none !important;
  color: var(--login-text) !important;
}

.aura-login-top-menu:hover {
  background-color: var(--login-bg) !important;
  transform: translateY(-1px) !important;
}

.aura-login-top-menu-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #131b2e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.aura-login-top-menu-icon img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}

/* Main Login Container Card */
#aura-login-container.login_box {
  width: 100% !important;
  max-width: 440px !important;
  background: var(--login-card-bg) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(198, 198, 205, 0.5) !important;
  margin: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* Header Section */
.aura-login-header {
  padding: 32px 24px 22px 24px !important;
  text-align: center !important;
  border-bottom: 1px solid var(--login-border) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: #ffffff !important;
}

.aura-login-logo {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  margin-bottom: 12px !important;
}

.aura-login-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--login-text) !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.aura-login-subtitle {
  font-size: 13.5px !important;
  color: var(--login-text-muted) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* Body Form Section */
.aura-login-body-section {
  padding: 24px !important;
  flex-grow: 1 !important;
  background: #ffffff !important;
}

/* Alert Info Box */
.aura-login-alert {
  background-color: var(--login-alert-bg) !important;
  color: var(--login-alert-text) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
  line-height: 1.4 !important;
}

.aura-login-alert .material-symbols-outlined {
  font-size: 20px !important;
  color: var(--login-primary) !important;
  flex-shrink: 0 !important;
}

/* Form Group & Override Label Absolute */
.aura-form-group {
  margin-bottom: 16px !important;
  text-align: left !important;
  position: relative !important;
}

#aura-login-container label,
#aura-login-container label[for="xuser_name"],
#aura-login-container label[for="xuser_password"],
#aura-login-container .aura-form-label {
  position: static !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--login-text-muted) !important;
  margin-bottom: 6px !important;
  text-transform: none !important;
  top: auto !important;
  left: auto !important;
  line-height: 1.4 !important;
  background: transparent !important;
}

/* Input Wrapper */
.aura-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.aura-input-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #76777d !important;
  font-size: 20px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Form Inputs Override */
#aura-login-container input.aura-form-input,
#aura-login-container input#xuser_name,
#aura-login-container input#xuser_password {
  width: 100% !important;
  height: 44px !important;
  padding: 0 42px 0 42px !important;
  font-size: 14px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  color: var(--login-text) !important;
  background-color: #f7f9fb !important;
  border: 1px solid var(--login-input-border) !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  line-height: normal !important;
  display: block !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}

#aura-login-container input.aura-form-input:focus,
#aura-login-container input#xuser_name:focus,
#aura-login-container input#xuser_password:focus {
  background-color: #ffffff !important;
  border-color: var(--login-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 88, 190, 0.15) !important;
  outline: none !important;
}

#aura-login-container input.aura-form-input::placeholder {
  color: #9aa0a6 !important;
}

/* Password Toggle Visibility Button */
#aura-login-container .aura-password-toggle {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #76777d !important;
  cursor: pointer !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  z-index: 2 !important;
}

#aura-login-container .aura-password-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: var(--login-text) !important;
}

#aura-login-container .aura-password-toggle .material-symbols-outlined {
  font-size: 20px !important;
}

/* Submit Button */
#aura-login-container button#login,
#aura-login-container .aura-btn-login {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px !important;
  background-color: var(--login-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  margin: 14px 0 0 0 !important;
  box-shadow: 0 4px 10px rgba(0, 88, 190, 0.25) !important;
  text-transform: uppercase !important;
  transition: background-color 0.2s, transform 0.1s !important;
}

#aura-login-container button#login:hover,
#aura-login-container .aura-btn-login:hover {
  background-color: var(--login-primary-hover) !important;
}

#aura-login-container button#login:active,
#aura-login-container .aura-btn-login:active {
  transform: scale(0.99) !important;
}

/* Card Footer 1: Help info */
.aura-login-card-footer1 {
  background-color: var(--login-card-footer1) !important;
  padding: 14px 20px !important;
  border-top: 1px solid var(--login-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--login-text-muted) !important;
  line-height: 1.4 !important;
}

.aura-login-card-footer1 .material-symbols-outlined {
  font-size: 20px !important;
  color: var(--login-text-muted) !important;
  flex-shrink: 0 !important;
}

/* Card Footer 2: Logo ExamBrowser */
.aura-login-card-footer2 {
  background-color: var(--login-card-footer2) !important;
  padding: 16px 20px !important;
  border-top: 1px solid var(--login-border) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}

.aura-login-card-footer2 img {
  height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Page Bottom Fixed Footer */
.aura-login-page-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background-color: var(--login-bg) !important;
  padding: 12px 16px !important;
  border-top: 1px solid rgba(198, 198, 205, 0.3) !important;
  text-align: center !important;
  font-size: 12px !important;
  color: rgba(69, 70, 77, 0.8) !important;
  z-index: 1000 !important;
}

.aura-login-page-footer strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.aura-login-page-footer a {
  color: var(--login-primary) !important;
  text-decoration: none !important;
}

.aura-login-page-footer a:hover {
  text-decoration: underline !important;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .body {
    padding: 16px 12px 60px 12px !important;
  }
  #aura-login-container.login_box {
    border-radius: 14px !important;
    margin: 8px auto 20px auto !important;
  }
  .aura-login-header {
    padding: 24px 16px 16px 16px !important;
  }
  .aura-login-logo {
    width: 60px !important;
    height: 60px !important;
  }
  .aura-login-title {
    font-size: 18px !important;
  }
  .aura-login-body-section {
    padding: 16px !important;
  }
  .aura-login-alert {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    margin-bottom: 16px !important;
  }
  .aura-login-card-footer1,
  .aura-login-card-footer2 {
    padding: 12px 16px !important;
  }
  .aura-login-top-menu {
    top: 12px !important;
    right: 12px !important;
    padding: 4px 10px 4px 6px !important;
  }
}