/* UI-2026.07.17.02: selected facade entry. This file must not style the authenticated shell. */
#loginScreen.login-entry-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 100dvh;
  overflow: hidden;
  padding: 0;
  color: #102d52;
  background: #eaf4ff;
  isolation: isolate;
}

#loginScreen .login-entry-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/admin-v2/assets/images/login-facade-20260717.png") 28% center / cover no-repeat;
  background-image: image-set(url("/admin-v2/assets/images/login-facade-20260717.webp?v=20260717-login-entry-02v1") type("image/webp"), url("/admin-v2/assets/images/login-facade-20260717.png?v=20260717-login-entry-02v1") type("image/png"));
}

#loginScreen .login-entry-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(3 39 88 / 0.16), rgb(4 41 92 / 0.05) 48%, rgb(7 51 111 / 0.38));
  content: "";
}

#loginScreen .login-entry-brand {
  position: absolute;
  top: 26px;
  left: clamp(28px, 5vw, 78px);
  z-index: 2;
  display: inline-flex;
  align-items: flex-start;
  gap: 11px;
  color: #fff;
}

#loginScreen .login-entry-brand .brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  color: #1269d4;
  background: #fff;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
}

#loginScreen .login-entry-title { display: grid; gap: 1px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
#loginScreen .login-entry-title > small { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; opacity: 0.72; }
#loginScreen .login-entry-tagline { display: block; margin-top: 8px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
#loginScreen .login-entry-tagline small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.82; }

#loginScreen .login-entry-form-wrap { position: relative; min-height: 100dvh; z-index: 1; }

#loginScreen .login-panel {
  position: absolute;
  top: 50%;
  right: clamp(32px, 10vw, 180px);
  width: min(450px, calc(100% - 64px));
  min-height: 555px;
  align-content: center;
  padding: 54px 44px;
  transform: translateY(-45%);
  border: 0;
  border-top: 7px solid #1269d4;
  border-radius: 0;
  color: #102d52;
  background: rgb(255 255 255 / 0.96);
  box-shadow: -24px 26px 60px rgb(4 42 90 / 0.24);
  backdrop-filter: none;
}

#loginScreen .login-panel h2 { margin-bottom: 20px; color: #0a315d; font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.055em; }
#loginScreen .login-portal-context { display: grid; gap: 6px; margin: -12px 0 8px; }
#loginScreen .login-portal-context p { margin: 0; color: #617795; font-size: 13px; line-height: 1.6; }
#loginScreen .login-panel label { color: #102d52; font-size: 13px; font-weight: 700; }
#loginScreen .login-panel input { height: 48px; border-color: #d5e3f2; border-radius: 8px; color: #102d52; background: #fff; box-shadow: none; }
#loginScreen .login-panel input:focus { border-color: #1269d4; box-shadow: 0 0 0 3px rgb(18 105 212 / 0.11); }
#loginScreen .password-toggle { color: #617795; }
#loginScreen .password-toggle:hover,
#loginScreen .password-toggle:focus-visible { color: #1269d4; background: #eaf4ff; }
#loginScreen .primary-button { min-height: 50px; border: 1px solid #1269d4; border-radius: 8px; color: #fff; background: #1269d4; box-shadow: 0 12px 22px rgb(18 105 212 / 0.18); }
#loginScreen .primary-button:hover,
#loginScreen .primary-button:focus-visible { background: #0c58b5; }
#loginScreen .form-message { color: #617795; }
#loginScreen .mfa-challenge-panel,
#loginScreen .mfa-setup-panel { border-color: #d5e3f2; background: #f8fbff; }
#loginScreen .mfa-method-switch button.active { color: #0c58b5; border-color: #1269d4; background: #eaf4ff; }
#loginScreen .mfa-back-button,
#loginScreen .mfa-cancel-button { color: #617795; }

@media (max-width: 900px) {
  #loginScreen .login-panel { right: clamp(24px, 7vw, 64px); }
}

@media (max-width: 560px) {
  #loginScreen.login-entry-shell { min-height: 100svh; }
  #loginScreen .login-entry-brand { top: 22px; left: 24px; }
  #loginScreen .login-entry-tagline { font-size: 12px; }
  #loginScreen .login-entry-form-wrap { min-height: 100svh; }
  #loginScreen .login-panel { top: 52%; right: 16px; width: calc(100% - 32px); min-height: 0; padding: 42px 24px 32px; transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  #loginScreen *,
  #loginScreen *::before,
  #loginScreen *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; }
}