/* HostExpress HRMS - Custom Login Styling (Strictly scoped to login page) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body[data-path="login"] {
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #0b1324 url('/custom_assets/login_bg.jpg') no-repeat center center fixed !important;
  background-size: cover !important;
  position: relative !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Subtle dark gradient overlay over wallpaper - ONLY on login page */
body[data-path="login"]::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.65) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Hide website chrome on login page only */
body[data-path="login"] nav.navbar,
body[data-path="login"] header,
body[data-path="login"] footer,
body[data-path="login"] .web-footer,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .page-header,
body[data-path="login"] .page-card-head img,
body[data-path="login"] .page-card-head .app-logo,
body[data-path="login"] .social-logins,
body[data-path="login"] .social-login-buttons,
body[data-path="login"] .login-with-email-link,
body[data-path="login"] .for-login-with-email-link,
body[data-path="login"] .for-email-login,
body[data-path="login"] .login-divider,
body[data-path="login"] .sign-up-message,
body[data-path="login"] .email-field svg,
body[data-path="login"] .password-field svg,
body[data-path="login"] #language-switcher {
  display: none !important;
}

/* Centering Wrapper */
body[data-path="login"] #page-login {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 16px !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

body[data-path="login"] .page-content-wrapper,
body[data-path="login"] main.container,
body[data-path="login"] .page_content {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Sections */
body[data-path="login"] section.for-login,
body[data-path="login"] section.for-forgot {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Greeting above Card */
body[data-path="login"] .page-card-head {
  padding: 0 0 20px 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
}

body[data-path="login"] .page-card-head h4,
body[data-path="login"] #login-greeting-title {
  color: #f1f5f9 !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8) !important;
}

/* Glassmorphic Card */
body[data-path="login"] .for-login .page-card,
body[data-path="login"] .for-forgot .page-card,
body[data-path="login"] .login-content.page-card {
  background: rgba(22, 33, 54, 0.76) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
  padding: 34px 34px 28px !important;
  width: 100% !important;
  max-width: 440px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

body[data-path="login"] .for-login .page-card form,
body[data-path="login"] .for-forgot .page-card form,
body[data-path="login"] form.form-signin {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-path="login"] .page-card-body {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Form Groups & Labels */
body[data-path="login"] .form-group {
  margin-bottom: 20px !important;
  position: relative !important;
}

body[data-path="login"] label.form-label,
body[data-path="login"] .form-group label,
body[data-path="login"] label.form-label.sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  display: block !important;
  color: #94a3b8 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
}

/* Input Fields */
body[data-path="login"] .email-field,
body[data-path="login"] .password-field {
  position: relative !important;
  width: 100% !important;
}

body[data-path="login"] input#login_email,
body[data-path="login"] input#login_password,
body[data-path="login"] input#forgot_email,
body[data-path="login"] input#login_token {
  background-color: rgba(36, 50, 75, 0.72) !important;
  background: rgba(36, 50, 75, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  color: #f8fafc !important;
  height: 48px !important;
  padding: 0 16px !important;
  font-size: 0.95rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

body[data-path="login"] input#login_email::placeholder,
body[data-path="login"] input#login_password::placeholder,
body[data-path="login"] input#forgot_email::placeholder {
  color: rgba(148, 163, 184, 0.5) !important;
  font-size: 0.92rem !important;
}

body[data-path="login"] input#login_email:focus,
body[data-path="login"] input#login_password:focus,
body[data-path="login"] input#forgot_email:focus {
  background: rgba(45, 62, 92, 0.9) !important;
  border-color: rgba(96, 165, 250, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
  outline: none !important;
}

/* Toggle Password */
body[data-path="login"] .toggle-password {
  position: absolute !important;
  right: 14px !important;
  top: 15px !important;
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  z-index: 5 !important;
  user-select: none !important;
}

body[data-path="login"] .toggle-password:hover {
  color: #ffffff !important;
}

/* Forgot Password */
body[data-path="login"] .forgot-password-message {
  margin: 6px 0 0 0 !important;
  text-align: right !important;
}

body[data-path="login"] .forgot-password-message a {
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  text-decoration: none !important;
}

body[data-path="login"] .forgot-password-message a:hover {
  color: #e2e8f0 !important;
  text-decoration: underline !important;
}

/* Action Button */
body[data-path="login"] .page-card-actions {
  margin-top: 24px !important;
  width: 100% !important;
}

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-forgot {
  width: 100% !important;
  height: 48px !important;
  background: rgba(74, 94, 126, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-forgot:hover {
  background: rgba(94, 118, 156, 1) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Live Clock & Version at Bottom */
body[data-path="login"] #login-live-clock {
  position: fixed !important;
  bottom: 24px !important;
  left: 28px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  z-index: 99 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  pointer-events: none !important;
}

body[data-path="login"] #login-version-badge {
  position: fixed !important;
  bottom: 24px !important;
  right: 28px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  z-index: 99 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  pointer-events: none !important;
}