/**
 * Login page — supplemental styles (single-column card; mode switcher in HTML/JS).
 */

.login-panel {
  min-width: 0;
}

/* Login shell must sit above the reCAPTCHA badge so taps hit buttons (badge was z-50). */
.login-page-shell {
  position: relative;
  z-index: 20;
  isolation: isolate;
}

/*
 * Google reCAPTCHA badge — must remain visible (Google Terms of Service).
 * Top-left sits on the gradient; z-index MUST stay below .login-page-shell so
 * it never steals touch events from the login card (common mobile bug).
 */
body .grecaptcha-badge {
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  left: max(8px, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  top: max(10px, env(safe-area-inset-top, 0px)) !important;
  bottom: auto !important;
  z-index: 5 !important;
  transform: scale(0.88) !important;
  transform-origin: top left !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

/* Employee / account switcher: reliable taps on phones (iOS min ~44pt) */
#switchToEmployeeLogin,
#switchToAccountLogin {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(37, 99, 235, 0.15);
  position: relative;
  z-index: 1;
}