/**
 * Auth login pages — login.html + business-login.html
 * Load LAST. Must beat facility-unified / facility-pages / design-unified.
 * Prefix: html.auth-login-shell(+ site-facility/facility-auth/site-auth)
 */

/* Highest-priority shell selectors (beat facility-unified 3-class body rules) */
html.auth-login-shell,
html.auth-login-shell.site-auth,
html.auth-login-shell.site-facility,
html.auth-login-shell.facility-auth,
html.auth-login-shell.site-facility.facility-auth,
html.auth-login-shell.site-facility.site-auth,
html.auth-login-shell.site-facility.site-auth.facility-auth {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%) !important;
  background-color: #f5f7fa !important;
}

html.auth-login-shell body,
html.auth-login-shell.site-auth body,
html.auth-login-shell.site-facility body,
html.auth-login-shell.facility-auth body,
html.auth-login-shell.site-facility.facility-auth body,
html.auth-login-shell.site-facility.site-auth body,
html.auth-login-shell.site-facility.site-auth.facility-auth body,
html.site-app.auth-login-shell body {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 0 env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%) !important;
  background-color: #f5f7fa !important;
  font-family: 'Poppins', sans-serif !important;
  color: #0b1220 !important;
}

html.auth-login-shell body::before,
html.auth-login-shell.site-facility.facility-auth body::before,
html.auth-login-shell.site-facility.site-auth.facility-auth body::before {
  display: none !important;
  content: none !important;
}

/* ===== Header — full-bleed bar; inner row aligned to card column ===== */
html.auth-login-shell .app-header,
html.auth-login-shell .app-header--auth-login,
html.auth-login-shell.site-facility .app-header,
html.auth-login-shell.facility-auth .app-header,
html.auth-login-shell.site-facility.facility-auth .app-header,
html.auth-login-shell.site-facility.site-auth.facility-auth .app-header,
html.auth-login-shell.site-facility .app-header.app-header--auth-login,
html.auth-login-shell.site-facility.facility-auth .app-header.app-header--auth-login,
html.auth-login-shell.site-facility.site-auth.facility-auth .app-header.app-header--auth-login,
html.site-app.auth-login-shell .app-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  height: auto !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 0 8px !important;
  background: linear-gradient(135deg, #0bb3b5 0%, #ff7a29 100%) !important;
  box-shadow: 0 4px 20px rgba(11, 179, 181, 0.22) !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

html.auth-login-shell .app-header::before,
html.auth-login-shell .app-header::after {
  content: none !important;
  display: none !important;
}

html.auth-login-shell .app-header-left,
html.auth-login-shell .app-header h1 {
  display: none !important;
}

/* Same column as .app-container (420 + 16px side padding) */
html.auth-login-shell .app-header-auth-inner {
  width: 100% !important;
  max-width: min(420px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

html.auth-login-shell .app-header-auth-logo,
html.auth-login-shell.site-facility .app-header-auth-logo,
html.auth-login-shell.site-facility.facility-auth .app-header-auth-logo,
html.auth-login-shell.site-facility.site-auth.facility-auth .app-header-auth-logo {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 6px !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 35, 102, 0.12) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
}

html.auth-login-shell .app-header-auth-logo .app-logo,
html.auth-login-shell .app-header .app-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.auth-login-shell .app-header-auth-logo .app-logo img,
html.auth-login-shell .app-header .app-logo img {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  display: block !important;
  margin: 0 auto !important;
}

html.auth-login-shell .app-header-auth-title {
  grid-column: 2 !important;
  margin: 0 !important;
  padding: 0 4px !important;
  text-align: center !important;
  font-size: clamp(0.95rem, 2.8vw, 1.05rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
  position: static !important;
  transform: none !important;
  left: auto !important;
  max-width: 100% !important;
}

html.auth-login-shell .app-header-auth-spacer {
  grid-column: 3 !important;
  width: 40px !important;
  height: 40px !important;
  justify-self: end !important;
}

/* ===== Main + card (same on user + facility) ===== */
html.auth-login-shell .app-container,
html.auth-login-shell.site-auth .app-container,
html.auth-login-shell.site-facility .app-container,
html.auth-login-shell.facility-auth .app-container,
html.auth-login-shell.site-facility.facility-auth .app-container,
html.auth-login-shell.site-facility.site-auth.facility-auth .app-container,
html.site-app.auth-login-shell .app-container {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: min(420px, 100%) !important;
  margin: 0 auto !important;
  padding: 12px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: transparent !important;
  align-self: center !important;
}

html.auth-login-shell .auth-login-watermark {
  position: absolute !important;
  left: 50% !important;
  top: 46% !important;
  transform: translate(-50%, -50%) !important;
  width: min(68vw, 220px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

html.auth-login-shell .auth-login-watermark img {
  width: 100% !important;
  opacity: 0.07 !important;
  object-fit: contain !important;
}

html.auth-login-shell .app-container > .card,
html.auth-login-shell.site-auth .app-container > .card,
html.auth-login-shell.site-facility .app-container > .card,
html.auth-login-shell.facility-auth .app-container > .card,
html.auth-login-shell.site-facility.facility-auth .app-container > .card,
html.auth-login-shell.site-facility.site-auth.facility-auth .app-container > .card {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border: 1px solid rgba(11, 179, 181, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  padding: 24px 20px !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
}

html.auth-login-shell .app-container > .card h2,
html.auth-login-shell.site-facility.facility-auth .app-container > .card h2,
html.auth-login-shell.site-facility.site-auth.facility-auth .app-container > .card h2 {
  color: #0bb3b5 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
  text-align: center !important;
  display: block !important;
  line-height: 1.25 !important;
}

html.auth-login-shell .login-subtitle,
html.auth-login-shell .app-container > .card > p.login-subtitle,
html.auth-login-shell.site-facility.facility-auth .login-subtitle,
html.auth-login-shell.site-facility.site-auth.facility-auth .login-subtitle {
  color: #495057 !important;
  font-size: 0.9rem !important;
  margin: 0 0 20px !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

html.auth-login-shell .card form,
html.auth-login-shell.site-facility.facility-auth .card form,
html.auth-login-shell.site-facility.site-auth.facility-auth .card form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 8px !important;
}

html.auth-login-shell .card input[type="email"],
html.auth-login-shell .card input[type="password"],
html.auth-login-shell .card input[type="text"],
html.auth-login-shell.site-facility.facility-auth .card input[type="email"],
html.auth-login-shell.site-facility.facility-auth .card input[type="password"],
html.auth-login-shell.site-facility.site-auth.facility-auth .card input[type="email"],
html.auth-login-shell.site-facility.site-auth.facility-auth .card input[type="password"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-family: 'Poppins', sans-serif !important;
  background: #f8f9fa !important;
  color: #0b1220 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html.auth-login-shell .card .password-input-wrap {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
}

html.auth-login-shell .card .password-input-wrap input {
  padding-right: 48px !important;
}

html.auth-login-shell .card button.primary,
html.auth-login-shell .card .register-action-btn,
html.auth-login-shell .card button[type="submit"],
html.auth-login-shell.site-facility.facility-auth .card button.primary,
html.auth-login-shell.site-facility.facility-auth .card .register-action-btn,
html.auth-login-shell.site-facility.site-auth.facility-auth .card button.primary,
html.auth-login-shell.site-facility.site-auth.facility-auth .card .register-action-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px !important;
  margin: 4px 0 0 !important;
  padding: 14px 20px !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.auth-login-shell .oauth-buttons,
html.auth-login-shell.site-facility .oauth-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

html.auth-login-shell .oauth-btn,
html.auth-login-shell .oauth-btn.google-btn,
html.auth-login-shell .oauth-btn.apple-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: 'Poppins', sans-serif !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

html.auth-login-shell .google-oauth-mount,
html.auth-login-shell .google-oauth-overlay-slot {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.auth-login-shell .google-oauth-mount {
  overflow: hidden !important;
  min-height: 48px !important;
}

html.auth-login-shell .google-oauth-overlay-slot > div,
html.auth-login-shell .google-oauth-overlay-slot .nsm7Bb-HzV7m-LgbsSe {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html.auth-login-shell .card .toggle-password {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: none !important;
  background: transparent !important;
  padding: 6px !important;
  margin: 0 !important;
  min-height: auto !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
  animation: none !important;
}

html.auth-login-shell .divider,
html.auth-login-shell.site-facility .divider {
  text-align: center !important;
  margin: 14px 0 !important;
  color: #495057 !important;
  position: relative !important;
}

html.auth-login-shell .divider span {
  background: #ffffff !important;
  padding: 0 16px !important;
  position: relative !important;
  z-index: 1 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

html.auth-login-shell .divider hr {
  border: none !important;
  border-top: 2px solid #dee2e6 !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 0 !important;
  margin: 0 !important;
}

html.auth-login-shell .link-container,
html.auth-login-shell.site-facility .link-container {
  text-align: center !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

html.auth-login-shell .link,
html.auth-login-shell.site-facility .link {
  color: #0bb3b5 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

html.auth-login-shell .link:hover {
  color: #ff7a29 !important;
  text-decoration: underline !important;
}

html.auth-login-shell #footerLogo {
  display: none !important;
}

@media (max-width: 480px) {
  html.auth-login-shell .app-header,
  html.auth-login-shell .app-header--auth-login,
  html.auth-login-shell.site-facility.facility-auth .app-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html.auth-login-shell .app-header-auth-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
  }

  html.auth-login-shell .app-header-auth-logo,
  html.auth-login-shell .app-header-auth-spacer {
    width: 36px !important;
    height: 36px !important;
  }

  html.auth-login-shell .app-header-auth-logo .app-logo img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }

  html.auth-login-shell .app-container,
  html.auth-login-shell.site-facility.facility-auth .app-container,
  html.auth-login-shell.site-facility.site-auth.facility-auth .app-container {
    padding: 10px 14px 14px !important;
    max-width: min(420px, 100%) !important;
  }
}