/* ===== Sign-in page after the Webpixels sign-in screens (owner, 2026-10-14: "redesign the Signin page with the Webpixels app screens as
   inspiration"): a split screen — a brand panel on the left in the client's colour (white-label: --brand, set by applyLoginBranding)
   with its logo, name and "Powered by …", the form on the right on white, Webpixels inputs and buttons, Baloo Paaji 2.
   The four forms (sign in, forgot password, authenticator code, new password) keep their ids and behaviour. ===== */
.login-wrapper {
  --lg-line: #E4E4E7; --lg-ink: #18181B; --lg-text: #3F3F46; --lg-muted: #71717A; --lg-faint: #A1A1AA;
  --lg-font: 'Baloo Paaji 2', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; justify-content: stretch;
  background: #fff; font-family: var(--lg-font); color: var(--lg-text);
}
.login-wrapper.d-none { display: none !important; }
.login-wrapper :is(.form-control, .btn, .dropdown-item, h1, h2, .small, a) { font-family: var(--lg-font); }

/* ---------- the brand panel ---------- */
.login-side { display: none; position: relative; overflow: hidden; padding: 2.2rem 2.4rem; color: #fff;
  background:
    radial-gradient(110% 80% at 0% 100%, color-mix(in srgb, var(--brand) 60%, #7C3AED) 0%, transparent 62%),
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--brand) 75%, #EC4899) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 82%, black) 0%, var(--brand) 100%);
  flex-direction: column; justify-content: space-between; }
.login-side::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 60%); }
.login-side-logo { position: relative; z-index: 1; width: 3.4rem; height: 3.4rem; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.login-side-logo img { width: 78%; height: 78%; object-fit: contain; }
.login-side-text { position: relative; z-index: 1; max-width: 26rem; }
.login-side-name { font-size: 2.6rem; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
.login-side-sub { margin-top: .6rem; font-size: 1.1rem; color: rgba(255, 255, 255, .82); }

/* ---------- the form side ---------- */
.login-card { width: 100%; max-width: 27rem; margin: auto; border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent; padding: 1.5rem 1rem; }
.login-card .card-body { padding: 0 !important; }
.login-card #login-lang .btn { border: 1px solid var(--lg-line); border-radius: 8px; color: var(--lg-text); background: #fff; }
.login-card .text-center.mb-4 { text-align: left !important; margin-bottom: 1.6rem !important; }
.login-card .login-logo { width: auto; height: 2.6rem; max-width: 12rem; object-fit: contain; object-position: left; margin-bottom: 1.4rem !important; display: block; }
.login-card #login-title { font-size: 1.15rem; font-weight: 600; color: var(--lg-ink); margin-bottom: .2rem !important; }
.login-card [data-i18n="login.subtitle"] { font-size: 1.9rem; font-weight: 600; color: var(--lg-ink) !important; line-height: 1.15; letter-spacing: -.01em; }
.login-card #login-powered { margin-top: .35rem !important; color: var(--lg-muted) !important; }
.login-card h2.h6, .login-card #mfa-title { font-size: 1.6rem; font-weight: 600; color: var(--lg-ink); margin-bottom: .4rem !important; }
.login-card p.small, .login-card .form-text { color: var(--lg-muted) !important; font-size: .95rem; }
.login-card .form-label { font-size: .95rem; font-weight: 500; color: var(--lg-ink); margin-bottom: .35rem; }
.login-card .form-control { height: 2.9rem; border: 1px solid var(--lg-line); border-radius: 8px; color: var(--lg-ink); box-shadow: 0 1px 2px rgba(24, 24, 27, .05); }
.login-card .form-control:focus { border-color: color-mix(in srgb, var(--brand) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.login-card #mfa-code { height: 3.6rem; font-family: var(--lg-font) !important; font-size: 1.9rem; font-weight: 600; letter-spacing: .45em; }
.login-card .btn-primary { height: 2.9rem; border-radius: 8px; font-weight: 600; font-size: 1.05rem; box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18); }
.login-card a { color: var(--brand); text-decoration: none; font-weight: 500; }
.login-card a:hover { text-decoration: underline; }
.login-card .alert { border: 1px solid transparent; border-radius: 8px; font-size: .95rem; }
.login-card .alert-danger { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.login-card .alert-success { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.login-card .text-center.mt-3 { text-align: left !important; color: var(--lg-faint); }

@media (min-width: 992px) {
  .login-wrapper { grid-template-columns: minmax(22rem, 40%) minmax(0, 1fr); }
  .login-side { display: flex; margin: .75rem; border-radius: 18px; }
  .login-card .login-logo { display: none; } /* the logo is on the brand panel */
}
@media (prefers-reduced-motion: no-preference) {
  .login-card .card-body > form:not(.d-none) { animation: lg-in .35s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes lg-in { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }
}

/* the language picker at the top right of the form side; the "Sign in" heading only on the sign-in form */
.login-wrapper { position: relative; }
.login-card #login-lang { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; }
.login-card .d-flex.justify-content-end:has(#login-lang) { height: 0; }
.login-card:has(#login-form.d-none) [data-i18n="login.subtitle"] { display: none; }