/*
 * Styles for _LayoutAuth.cshtml. Consumes brand-tokens.css, which must load first.
 *
 * This layout loads no Bootstrap and no site.less, so anything those normally provide
 * has to be restated here — including the environment indicator's colors below, which
 * would otherwise be invisible.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Column layout so the footer sits at the bottom of short pages: the shell takes the slack. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--c2d-ground);
  color: var(--c2d-ink);
  font-family: var(--c2d-font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/*
 * Colors restated from site.less, which this layout does not load — they would
 * otherwise silently vanish. No rule for production: a colorless strip means live.
 * The site.less margin-top: -50px offset is omitted since its padding-top counterpart
 * isn't loaded here either; adding the offset back would pull the strip off-screen.
 */
#color-navbar {
  height: 6px;
  border: 0;
}

#color-navbar.environment-uat {
  background-color: #f5833b;
}

#color-navbar.environment-test {
  background-color: #d9534f;
}

#color-navbar.environment-dev {
  background: linear-gradient(to right, #d700ff, #35b558);
}

#color-navbar.environment-hotfix {
  background-color: #7f3fbf;
}

#color-navbar.environment-playground {
  background-color: #ffff00;
}

/* Horizontal padding scales (24px–120px) so the card has margin on wide screens without being crushed on a phone. */
.auth-shell {
  position: relative;
  /* Takes the slack in the body column, so the card stays optically centered. */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--c2d-gutter) clamp(var(--c2d-gutter), 7vw, 120px);
  gap: var(--c2d-gutter);
}

.auth-shell > * {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--c2d-card-max-width);
}

/*
 * Applied to the island's mount point, not `.auth-shell > *`: the no-JS fallback must
 * stay a plain white card, and JSON config blocks are also children here.
 */
.auth-shell > [data-vite-module] {
  display: flex;
  flex-direction: column;
  max-width: var(--c2d-auth-card-max-width);
  border-radius: var(--c2d-radius-card);
  background-color: var(--c2d-surface);
  box-shadow: var(--c2d-shadow-lg);
  overflow: hidden;
}

/* The split fills the card. */
.auth-shell > [data-vite-module] > * {
  flex: 1;
  min-width: 0;
}

/*
 * Shared by React and the pre-mount placeholder, so the swap cannot change the shape.
 * 1.05fr/1fr gives the brand panel a slightly larger share so the lockup doesn't read
 * as cramped next to a mostly-whitespace form.
 */
.auth-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 600px;
}

/* `color: #fff` paints the lockup, which takes currentColor from this panel. */
.auth-split__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  background-color: var(--c2d-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='2' cy='2' r='2' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  color: #ffffff;
}

/*
 * One size lives here for both implementations: the mark is sized in `em` off this
 * font-size, React passes `--auth-logo-size` into C2DLogo, and the placeholder inherits it.
 */
.auth-brand-lockup {
  --auth-logo-size: clamp(26px, 4.2vw, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  font-size: var(--auth-logo-size);
}

/*
 * These four values (gap 0.35em, weight 600, line-height 1.1, letter-spacing -0.02em)
 * are a matched pair with C2DLogo.tsx, which the placeholder cannot import from. Change
 * one, change the other.
 */
.auth-brand-lockup__mark {
  display: block;
  flex: none;
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.35em;
}

.auth-brand-lockup__word {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Vertically centred so short screens (forgot password) don't ride up against the top edge. */
.auth-split__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 60px;
  background-color: var(--c2d-surface);
}

/* Stacked below 900px: two columns at phone width would leave the form about 180px wide. */
@media (max-width: 899px) {
  .auth-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .auth-split__brand {
    padding: 36px 24px;
  }

  .auth-brand-lockup {
    --auth-logo-size: clamp(24px, 7vw, 36px);
  }

  .auth-split__form {
    padding: 32px 24px;
  }
}

/*
 * Loading placeholder, replaced by the island on mount. It carries `.auth-split` itself
 * (as a marker, not a wrapper) and stays a direct child of the card, so it keeps the
 * `flex: 1` that makes the split fill the card — required for the layout to hold.
 */

@media (prefers-reduced-motion: no-preference) {
  /*
   * Two states pulse the lockup: waiting for the bundle, and waiting for a submitted form
   * (AuthCard adds --busy). Opacity only: the mark is real content and must not move or
   * change color.
   */
  .auth-placeholder .auth-brand-lockup,
  .auth-brand-lockup--busy {
    animation: auth-lockup-breathe 1.8s ease-in-out infinite;
  }

  /* Scoped away from the placeholder, which paints on first load and must not wait on a fade. */
  .auth-shell > [data-vite-module] > *:not(.auth-placeholder) {
    animation: auth-card-fade-in 220ms ease-out both;
  }
}

@keyframes auth-lockup-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@keyframes auth-card-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fallback card, for the no-JS path. */
.auth-card {
  background-color: var(--c2d-surface);
  border-radius: var(--c2d-radius-card);
  box-shadow: var(--c2d-shadow);
  padding: 32px;
}

.auth-card h1 {
  margin: 0 0 24px;
  font-family: var(--c2d-font-body);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
}

/*
 * Outside the card: these are page-level meta links, not part of the sign-in task, and
 * putting them on the card would compete with the form's own footer links.
 */
.auth-footer {
  padding: 16px clamp(var(--c2d-gutter), 7vw, 120px) 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  font-size: 0.8125rem;
}

.auth-footer a {
  color: var(--c2d-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-footer a:hover {
  color: var(--c2d-accent-primary);
}

/* Not links, but need `.auth-footer a`'s color to match weight with their neighbors. */
.auth-footer__copyright,
.auth-footer__version {
  color: var(--c2d-ink-soft);
}

/* Teal at 10.5:1 contrast (WCAG 2.2 requires 3:1). Global so the fallback form gets it too. */
:focus-visible {
  outline: 2px solid var(--c2d-focus);
  outline-offset: 2px;
}