/* Solis.BackOffice.Portal — the authentication screens' own layout: the split hero/form page,
   its side panel and slide dots, the form column, the identity chip, biometric mode and footer.

   Shared building blocks (buttons, fields, alerts, OTP boxes, strength meter, QR frame) are NOT
   here — see solis-components.css. Anything in this file is specific to the auth page shape.

   Also loaded by _Layout, not just _AuthLayout: the lock overlay reproduces the auth page inside
   the app shell and reuses .solis-auth-side/.solis-auth-main/.solis-auth-form (see
   solis-lock-overlay.css). */

.solis-auth-body {
  margin: 0;
  min-height: 100vh;
  background: var(--solis-surface);
  font-family: var(--solis-font);
  color: var(--solis-text-primary);
  -webkit-font-smoothing: antialiased;
}

.solis-auth-page {
  display: flex;
  width: 100%;
  min-height: 100vh;
  /* No justify-content/max-width here — matches "Solis Login.dc.html": .solis-auth-side is a
     viewport-relative 44% (uncapped) and .solis-auth-main is flex:1 (uncapped), so the pair
     always spans full width. .solis-auth-main centers its own 360px form internally instead of
     this element centering the whole pair as a fixed-width block — see that class for why. */
}

.solis-auth-page a {
  color: var(--solis-accent-500);
}

.solis-auth-page a:hover {
  color: var(--solis-accent-600);
}

/* ---- Side panel (shared across login/lock/2FA/forgot-password; content is per-screen) ---- */

.solis-auth-side {
  width: 44%;
  min-width: 420px;
  /* No max-width — matches the mock. Grows with the viewport so the layout stays full-bleed
     instead of the pair sitting as a fixed-max-width block in the middle of a wide screen. */
  flex: none;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-sizing: border-box;
}

.solis-auth-side__media {
  position: absolute;
  inset: 0;
  /* Shows through whenever a screen has no branding image yet — same base tones as the scrim,
     so an unfilled slide still reads as intentional, not a broken image. */
  background: linear-gradient(160deg, var(--solis-accent-500) 0%, var(--solis-accent-900) 100%);
}

.solis-auth-side__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solis-auth-side__scrim {
  position: absolute;
  inset: 0;
  /* Every stop keeps some alpha (unlike the old opaque --accent-700/900 tokens) so the photo
     stays visible the whole way down — darkest only where the brand mark and headline text
     actually need the contrast, lightest in the empty middle. */
  background: linear-gradient(
    180deg,
    oklch(0.5 0.17 40 / 0.45) 0%,
    oklch(0.4 0.15 38 / 0.3) 30%,
    oklch(0.32 0.14 35 / 0.6) 65%,
    oklch(0.22 0.1 30 / 0.88) 100%
  );
  pointer-events: none;
}

.solis-auth-side__glow--bottom,
.solis-auth-side__glow--top {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.solis-auth-side__glow--bottom {
  bottom: -140px;
  left: -100px;
  width: 360px;
  height: 360px;
  background: var(--solis-auth-glow-bottom);
}

.solis-auth-side__glow--top {
  top: -100px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: var(--solis-auth-glow-top);
}

.solis-auth-side__copy {
  position: relative;
  padding: 0 var(--solis-space-9xl) var(--solis-space-7xl);
}

.solis-auth-side__headline {
  font-size: var(--solis-fs-5xl);
  font-weight: 700;
  color: var(--solis-text-on-accent);
  line-height: 1.3;
  max-width: 360px;
  margin: 0;
}

.solis-auth-side__body {
  font-size: var(--solis-fs-lg);
  color: var(--solis-text-on-accent-muted);
  margin-top: var(--solis-space-lg);
  max-width: 340px;
  line-height: 1.6;
}

.solis-auth-side__dots {
  display: flex;
  gap: var(--solis-space-xs);
  margin-top: var(--solis-space-4xl);
}

.solis-auth-side__dot {
  height: 6px;
  border-radius: var(--solis-radius-xs);
  background: var(--solis-auth-dot);
  border: none;
  padding: 0;
  cursor: pointer;
  width: 6px;
  transition: width 0.2s;
}

.solis-auth-side__dot[aria-current="true"] {
  width: 22px;
  background: var(--solis-on-scrim);
}

/* ---- Form column ---- */

.solis-auth-main {
  /* No max-width — matches the mock. This column takes all remaining space next to the (also
     uncapped) side panel, and centers its own 360px form within that via align-items/
     justify-content below — so on a wide viewport the extra room becomes even breathing room on
     both sides of the form, inside this column, rather than dead space stacking up on one edge. */
  flex: 1;
  display: flex;
  /* column, not the implicit row default — the brand mark now sits above the form as a second
     child, and row would put them side by side instead of stacked. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--solis-space-7xl);
}

/* The auth screens' only brand mark (the side panel carries none), so it is sized and animated as
   the page's one brand moment, on mobile too where the side panel is hidden. */

.solis-auth-main__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--solis-space-xs);
  margin-bottom: var(--solis-space-8xl);
}

.solis-auth-main__brand-name {
  font-size: var(--solis-fs-2xl);
  font-weight: 700;
  color: var(--solis-text-primary);
}

.solis-auth-main__brand .solis-wordmark {
  height: 48px;
  width: auto;
  color: var(--solis-text-primary);
}

.solis-auth-main__brand .solis-wordmark__sun {
  /* Centre of the sun's rays in the wordmark's 184x67 viewBox. */
  transform-box: view-box;
  transform-origin: 75.52px 38.91px;
  animation: solis-sun-spin 8s linear infinite;
}

@keyframes solis-sun-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .solis-auth-main__brand .solis-wordmark__sun {
    animation: none;
  }
}

.solis-auth-form {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--solis-space-4xl);
}

/* Centered to match the brand wordmark now sitting above them (_AuthMainBrand) — left-aligned
   text under a centered logo read as misaligned rather than intentional. Form fields/buttons
   below stay left-aligned as normal form controls; only this header block centers. */

.solis-auth-form__title {
  font-size: var(--solis-fs-4xl);
  font-weight: 700;
  color: var(--solis-text-primary);
  margin: 0;
  text-align: center;
}

.solis-auth-form__subtitle {
  font-size: var(--solis-fs-md);
  color: var(--solis-text-secondary);
  margin-top: var(--solis-space-2xs);
  text-align: center;
}

.solis-auth-identity {
  display: flex;
  align-items: center;
  gap: var(--solis-space-lg);
}

.solis-auth-identity__avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--solis-accent-500);
  color: var(--solis-text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--solis-fs-xl);
  font-weight: 700;
}

.solis-auth-identity__name {
  font-size: var(--solis-fs-xl);
  font-weight: 700;
  color: var(--solis-text-primary);
}

.solis-auth-identity__meta {
  font-size: var(--solis-fs-sm);
  color: var(--solis-text-muted);
}

/* ---- Biometric mode ---- */

.solis-auth-biometric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--solis-space-xl);
  padding: var(--solis-space-4xl) 0;
  border: 1px dashed var(--solis-border);
  border-radius: var(--solis-radius-lg);
  background: var(--solis-surface-muted);
}

.solis-auth-biometric__trigger {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--solis-accent-500);
  border: none;
  color: var(--solis-text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 6px var(--solis-auth-ring);
}

.solis-auth-biometric__trigger .ti {
  font-size: var(--solis-fs-6xl);
}

.solis-auth-biometric__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

/* Waiting on the challenge — the only moment this control is busy without the operating system's
   own prompt already covering the screen. A pulse rather than a spinner: the button is a 64px
   circle with a single glyph in it, and there is nowhere to put a second thing. */
.solis-auth-biometric__trigger[aria-busy="true"] {
  cursor: progress;
  animation: solis-biometric-pulse 1.2s ease-in-out infinite;
}

@keyframes solis-biometric-pulse {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solis-auth-biometric__trigger[aria-busy="true"] {
    animation: none;
    opacity: 0.55;
  }
}

.solis-auth-biometric__title {
  font-size: var(--solis-fs-md);
  font-weight: 600;
  color: var(--solis-text-primary);
  text-align: center;
}

.solis-auth-biometric__hint {
  font-size: var(--solis-fs-sm);
  color: var(--solis-text-muted);
  margin-top: var(--solis-space-3xs);
  text-align: center;
}

/* ---- Footer line ---- */

.solis-auth-footer {
  font-size: var(--solis-fs-sm);
  color: var(--solis-text-muted);
  text-align: center;
}

.solis-auth-footer a,
.solis-auth-footer button {
  text-decoration: none;
  font-weight: 600;
  color: var(--solis-text-secondary);
}

/* A footer action that posts (the lock screen's sign-out) reads as the links beside it. */
.solis-auth-footer button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.solis-auth-footer a:hover,
.solis-auth-footer button:hover {
  color: var(--solis-text-primary);
}

.solis-auth-footer button:focus-visible {
  outline: 2px solid var(--solis-accent-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Responsive: hero panel drops out below tablet width, form goes full-bleed ---- */

@media (max-width: 900px) {
  .solis-auth-side {
    display: none;
  }

  .solis-auth-main {
    padding: var(--solis-space-5xl) var(--solis-space-4xl);
  }

  .solis-auth-form {
    max-width: 100%;
  }
}