/* ==========================================================
   WAVAssistants — Authentication Shell
   Authelia remains the authentication engine; this file only
   restyles the shell that nginx injects around #root.

   Layout rule: everything lives in normal document flow.
   body is the flex column that stacks brand -> #root -> trust.
   No fixed pixel offsets, so nothing can collide or clip.
   ========================================================== */

:root {
  --wav-navy: #0b2545;
  --wav-ink: #14243d;
  --wav-muted: #6b7a90;
  --wav-line: #dbe4ee;

  --wav-teal: #08bea9;
  --wav-cyan: #11aee2;
  --wav-blue: #086be8;
  --wav-orange: #ff941f;

  --wav-field: #f6f9fc;

  --wav-card-radius: 24px;
}


/* ---------- PAGE SHELL ---------- */

html {
  height: 100%;
}

body {
  min-height: 100vh;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 40px 20px 24px !important;
  box-sizing: border-box;

  overflow-x: hidden;

  color: var(--wav-ink) !important;

  background:
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f7fafd 55%,
      #f4f8fc 100%
    ) !important;
}


/* Wave backdrop — a footer band, not a full-page wash. `100% auto`
   keeps the artwork's own aspect so it never grows to cover the top
   half, where the brand and the card need clean white. */

body::before {
  content: "";

  position: fixed;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background:
    url("/wav-brand/bg.svg")
    center bottom / 100% auto
    no-repeat;
}


/* ---------- DOT ACCENTS ---------- */

.wav-auth-dots {
  position: fixed;
  z-index: 1;

  width: 104px;
  height: 104px;

  opacity: .55;

  pointer-events: none;

  background-image:
    radial-gradient(
      circle,
      #93a6bd 2.1px,
      transparent 2.6px
    );

  background-size: 22px 22px;
}

.wav-auth-dots.left {
  top: 58px;
  left: 62px;
}

.wav-auth-dots.right {
  right: 58px;
  bottom: 54px;
}


/* ---------- BRAND ---------- */

.wav-auth-brand {
  position: relative;
  z-index: 5;

  flex: 0 0 auto;

  width: min(760px, 100%);

  margin: 0 0 26px;

  text-align: center;

  pointer-events: none;
}

.wav-auth-mark {
  width: 200px;
  height: 134px;

  margin: 0 auto 8px;

  background:
    url("/wav-brand/wav-mark.png")
    center / contain
    no-repeat;
}

/* The mark is now artwork, not a CSS-drawn badge. */
.wav-auth-mark::before,
.wav-auth-mark::after {
  content: none !important;
}

.wav-auth-wordmark {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.04;

  font-weight: 800;
  letter-spacing: -1.6px;

  color: var(--wav-navy);
}

.wav-auth-wordmark .wav {
  color: transparent;

  background:
    linear-gradient(
      100deg,
      #7ed957 2%,
      #ffd12e 46%,
      #ff8f26 96%
    );

  -webkit-background-clip: text;
  background-clip: text;
}

.wav-auth-subtitle {
  margin-top: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  color: var(--wav-muted);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 5.5px;
  text-transform: uppercase;
}

/* Teal rule on the left, orange on the right. */
.wav-auth-subtitle::before,
.wav-auth-subtitle::after {
  content: "";

  height: 2px;
  width: clamp(48px, 8vw, 128px);

  border-radius: 2px;
}

.wav-auth-subtitle::before {
  background:
    linear-gradient(
      90deg,
      rgba(8,190,169,0),
      var(--wav-teal)
    );
}

.wav-auth-subtitle::after {
  background:
    linear-gradient(
      90deg,
      var(--wav-orange),
      rgba(255,148,31,0)
    );
}


/* ==========================================================
   AUTHELIA ROOT
   Authelia ships a full-viewport MUI grid. Collapse every
   layer that reserves height so the card sizes to content.
   ========================================================== */

#root {
  position: relative !important;
  z-index: 5 !important;

  flex: 0 0 auto;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: center !important;
}

/* :not(.hidden) matters — Authelia keeps a collapsed notification
   box as the first child, and forcing display on it would reserve
   real width and shove the card off-centre. */
#root > .MuiBox-root:not(.hidden) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: center !important;
}

#root > .hidden {
  display: none !important;
}

#first-factor-stage,
#root .MuiGrid-container {
  min-height: 0 !important;
  height: auto !important;
}

#first-factor-stage {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Authelia's own logo asset is dark-background artwork; the
   shell renders the brand above, so suppress it here. */
#root img[alt="Logo"],
#root img[src*="logo"] {
  display: none !important;
}


/* ---------- CARD ---------- */

#first-factor-stage > .MuiContainer-root {
  position: relative;

  width: 100% !important;
  max-width: 500px !important;

  margin: 0 auto !important;

  padding: 34px 44px 26px !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  border: 1px solid rgba(219,228,238,.9) !important;
  border-radius: var(--wav-card-radius) !important;

  box-shadow:
    0 32px 60px -34px rgba(8,32,66,.30),
    0 16px 30px -22px rgba(8,32,66,.20),
    0 3px 8px -4px rgba(8,32,66,.06);
}

/* Avatar chip above the title. */
#first-factor-stage > .MuiContainer-root::before {
  content: "";

  display: block;

  width: 62px;
  height: 62px;

  margin: 0 auto 14px;

  border-radius: 50%;

  background:
    url("/wav-brand/icons/avatar.svg")
      center / 34px 34px
      no-repeat,
    linear-gradient(160deg, #f2f7fb, #e9f1f8);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    0 8px 16px -8px rgba(8,32,66,.28);
}


/* ---------- TITLE ---------- */

#first-factor-stage .MuiTypography-h5 {
  margin: 0 !important;

  color: var(--wav-navy) !important;

  font-size: 30px !important;
  line-height: 1.2 !important;

  font-weight: 800 !important;

  letter-spacing: -.6px !important;

  text-align: center !important;
}

#first-factor-stage .MuiTypography-h5::after {
  content: "Enter your credentials to continue";

  display: block;

  margin-top: 6px;

  color: var(--wav-muted);

  font-size: 15px;
  font-weight: 400;

  letter-spacing: 0;
}

/* The title's own grid row no longer needs Authelia's spacing. */
#first-factor-stage .MuiContainer-root > .MuiGrid-container {
  margin: 0 !important;
  width: 100% !important;
}


/* ---------- TEXT FIELDS ---------- */

#form-login {
  width: 100% !important;
}

#form-login .MuiOutlinedInput-root {
  position: relative;

  border-radius: 11px !important;

  background: var(--wav-field) !important;

  transition:
    background-color .18s ease,
    box-shadow .18s ease;
}

#form-login .MuiOutlinedInput-notchedOutline {
  border-color: var(--wav-line) !important;
  border-radius: 11px !important;
}

#form-login .MuiOutlinedInput-root:hover
  .MuiOutlinedInput-notchedOutline {
  border-color: #c3d2e2 !important;
}

#form-login .MuiOutlinedInput-root.Mui-focused {
  background: #ffffff !important;

  box-shadow:
    0 0 0 4px rgba(8,107,232,.10);
}

#form-login .MuiOutlinedInput-root.Mui-focused
  .MuiOutlinedInput-notchedOutline {
  border-color: var(--wav-blue) !important;
  border-width: 2px !important;
}

#form-login .MuiOutlinedInput-input {
  padding-left: 46px !important;

  height: 1.5em !important;

  color: var(--wav-ink) !important;

  font-size: 15px !important;
}

/* Leading icon, drawn on the input shell so it never scrolls. */
#form-login .MuiOutlinedInput-root::before {
  content: "";

  position: absolute;
  z-index: 1;

  top: 50%;
  left: 15px;

  width: 20px;
  height: 20px;

  transform: translateY(-50%);

  pointer-events: none;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  opacity: .62;
}

#form-login .MuiOutlinedInput-root:has(#username-textfield)::before {
  background-image:
    url("/wav-brand/icons/user.svg");
}

#form-login .MuiOutlinedInput-root:has(#password-textfield)::before {
  background-image:
    url("/wav-brand/icons/lock.svg");
}

/* Keep the resting label clear of the leading icon. */
#form-login .MuiInputLabel-root:not(.MuiInputLabel-shrink) {
  transform: translate(46px, 16px) scale(1) !important;

  color: #8494a8 !important;
}

#form-login .MuiInputLabel-root.MuiInputLabel-shrink {
  color: var(--wav-blue) !important;

  font-weight: 600 !important;
}

/* Password visibility toggle. */
#form-login .MuiInputAdornment-root .MuiIconButton-root {
  color: #8b9bb0 !important;
}

#form-login .MuiInputAdornment-root .MuiIconButton-root:hover {
  color: var(--wav-blue) !important;

  background: rgba(8,107,232,.07) !important;
}


/* ---------- REMEMBER ME ---------- */

#form-login .MuiFormControlLabel-root {
  margin-left: -6px !important;
}

#form-login .MuiFormControlLabel-label {
  color: #55647c !important;

  font-size: 14.5px !important;
}

#form-login .MuiCheckbox-root {
  color: #b6c4d4 !important;
}

#form-login .MuiCheckbox-root.Mui-checked {
  color: var(--wav-blue) !important;
}


/* ---------- SIGN IN BUTTON ---------- */

#sign-in-button {
  position: relative;

  width: 100% !important;
  min-height: 50px !important;

  border: 0 !important;
  border-radius: 11px !important;

  color: #fff !important;

  font-size: 15px !important;
  font-weight: 700 !important;

  letter-spacing: .8px !important;

  background:
    linear-gradient(
      100deg,
      #0abfa2 0%,
      #0aa7c8 38%,
      #0a7ae2 74%,
      #0a5fcc 100%
    ) !important;

  box-shadow:
    0 12px 22px -10px rgba(8,107,232,.55),
    0 4px 8px -4px rgba(8,60,140,.28),
    inset 0 1px 0 rgba(255,255,255,.26) !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease !important;
}

/* Trailing arrow. */
#sign-in-button::after {
  content: "";

  position: absolute;

  top: 50%;
  right: 20px;

  width: 20px;
  height: 20px;

  transform: translateY(-50%);

  background:
    url("/wav-brand/icons/arrow.svg")
    center / contain
    no-repeat;

  opacity: .95;

  transition: transform .18s ease;
}

#sign-in-button:hover {
  filter: saturate(1.05) brightness(1.03);

  box-shadow:
    0 16px 28px -12px rgba(8,107,232,.60),
    0 5px 10px -5px rgba(8,60,140,.30),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}

#sign-in-button:hover::after {
  transform: translate(3px, -50%);
}

#sign-in-button:active {
  transform: translateY(1px);
}


/* ---------- "OR" DIVIDER + RESET LINK ---------- */

#form-login .MuiGrid-root:has(> #reset-password-button) {
  position: relative;

  margin-top: 34px !important;

  /* MUI right-aligns this row by default. */
  display: flex !important;
  justify-content: center !important;

  text-align: center;
}

/* Rule across the row. */
#form-login .MuiGrid-root:has(> #reset-password-button)::before {
  content: "";

  position: absolute;
  top: -19px;
  left: 0;
  right: 0;

  height: 1px;

  background: var(--wav-line);
}

/* "or" sitting on top of the rule. */
#form-login .MuiGrid-root:has(> #reset-password-button)::after {
  content: "or";

  position: absolute;
  top: -30px;
  left: 50%;

  transform: translateX(-50%);

  padding: 0 12px;

  background: #ffffff;

  color: #9aa8ba;
  font-size: 13px;
}

#reset-password-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  color: var(--wav-blue) !important;

  font-size: 14.5px !important;
  font-weight: 600 !important;

  text-decoration: none !important;
}

#reset-password-button::before {
  content: "";

  width: 16px;
  height: 16px;

  background:
    url("/wav-brand/icons/lock-blue.svg")
    center / contain
    no-repeat;
}

#reset-password-button:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}


/* ---------- POWERED BY ---------- */

#first-factor-stage .MuiContainer-root
  > .MuiGrid-container:last-child {
  margin-top: 20px !important;

  justify-content: center !important;
}

#first-factor-stage a[href*="authelia.com"] {
  color: #93a2b5 !important;

  font-size: 12.5px !important;

  text-decoration: none !important;
}

#first-factor-stage a[href*="authelia.com"]:hover {
  color: var(--wav-blue) !important;
}


/* ---------- LANGUAGE SELECTOR ---------- */

#root .MuiAppBar-root {
  position: fixed !important;
  z-index: 60 !important;

  top: 16px !important;
  right: 22px !important;
  left: auto !important;

  width: auto !important;

  background: transparent !important;
  box-shadow: none !important;
}

#root .MuiAppBar-root .MuiToolbar-root {
  min-height: 0 !important;

  padding: 0 !important;
}

#language-button {
  gap: 9px !important;

  padding: 8px 14px !important;

  border-radius: 999px !important;

  color: #4a5c74 !important;

  font-size: 14.5px !important;
  font-weight: 600 !important;

  background: rgba(255,255,255,.72) !important;

  border: 1px solid rgba(203,215,229,.85) !important;

  box-shadow:
    0 6px 16px -10px rgba(8,32,66,.35) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    background-color .18s ease,
    border-color .18s ease !important;
}

#language-button:hover {
  background: #ffffff !important;

  border-color: #b9cade !important;
}

#language-button .MuiSvgIcon-root {
  color: #5a6d88 !important;
}

#language-button::after {
  content: "";

  width: 15px;
  height: 15px;

  background:
    url("/wav-brand/icons/chevron.svg")
    center / contain
    no-repeat;
}


/* ---------- TRUST ROW ---------- */

.wav-auth-trust {
  position: relative;
  z-index: 5;

  flex: 0 0 auto;

  width: min(880px, 100%);

  margin: 34px 0 0;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  color: var(--wav-ink);
}

.wav-auth-trust-item {
  position: relative;

  padding: 0 26px;

  display: flex;
  align-items: center;
  gap: 14px;
}

.wav-auth-trust-item:not(:last-child)::after {
  content: "";

  position: absolute;

  right: 0;
  top: 6px;
  bottom: 6px;

  width: 1px;

  background: rgba(140,161,185,.34);
}

.wav-trust-icon {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  border-radius: 50%;

  /* The glyph in the markup is replaced by artwork. */
  font-size: 0 !important;
  color: transparent !important;

  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 23px 23px;

  border: 1px solid rgba(214,225,237,.9);

  box-shadow:
    0 10px 18px -10px rgba(8,35,65,.32),
    inset 0 1px 0 #ffffff;
}

.wav-trust-icon.secure {
  background-image:
    url("/wav-brand/icons/shield.svg");
}

.wav-trust-icon.role {
  background-image:
    url("/wav-brand/icons/people.svg");
}

.wav-trust-icon.clock {
  background-image:
    url("/wav-brand/icons/clock.svg");
}

.wav-trust-title {
  font-size: 14.5px;
  font-weight: 700;

  color: var(--wav-navy);

  white-space: nowrap;
}

.wav-trust-copy {
  margin-top: 2px;

  color: #7a889c;

  font-size: 12.5px;
}


/* ==========================================================
   RESPONSIVE
   The stack is flow-based, so these only tune scale.
   ========================================================== */

/* Laptop heights: shrink the brand before anything clips. A browser
   window on a 1080p screen leaves roughly 940-1010px of viewport, so
   this has to start well above 940 or the trust row falls off. */
@media (max-height: 1010px) {

  body {
    padding-top: 28px !important;
  }

  .wav-auth-mark {
    width: 168px;
    height: 112px;
  }

  .wav-auth-wordmark {
    font-size: clamp(30px, 3.1vw, 42px);
  }

  .wav-auth-subtitle {
    margin-top: 8px;

    font-size: 11.5px;
    letter-spacing: 4.5px;
  }

  .wav-auth-brand {
    margin-bottom: 20px;
  }

  #first-factor-stage > .MuiContainer-root {
    padding: 28px 40px 22px !important;
  }

  .wav-auth-trust {
    margin-top: 26px;
  }
}

/* 768p laptops: trim every band so the whole page still fits
   in one view rather than scrolling by a few dozen pixels. */
@media (max-height: 820px) {

  body {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }

  .wav-auth-mark {
    width: 138px;
    height: 92px;

    margin-bottom: 4px;
  }

  .wav-auth-wordmark {
    font-size: clamp(26px, 2.7vw, 34px);
  }

  .wav-auth-subtitle {
    font-size: 10px;
    letter-spacing: 3.6px;
  }

  .wav-auth-brand {
    margin-bottom: 16px;
  }

  #first-factor-stage > .MuiContainer-root::before {
    width: 46px;
    height: 46px;

    margin-bottom: 8px;

    background-size: 26px 26px, auto;
  }

  #first-factor-stage .MuiTypography-h5 {
    font-size: 24px !important;
  }

  #first-factor-stage .MuiTypography-h5::after {
    margin-top: 4px;

    font-size: 13.5px;
  }

  #first-factor-stage > .MuiContainer-root {
    padding: 20px 34px 16px !important;
  }

  #form-login .MuiGrid-root:has(> #reset-password-button) {
    margin-top: 26px !important;
  }

  #first-factor-stage .MuiContainer-root
    > .MuiGrid-container:last-child {
    margin-top: 12px !important;
  }

  .wav-auth-trust {
    margin-top: 12px;
  }

  .wav-trust-icon {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    background-size: 20px 20px;
  }
}

/* Short desktop viewports. A 1080p screen at 125% Windows scaling
   reports only ~733px of viewport height, which is the common case —
   so compact the whole stack here rather than dropping the trust row. */
@media (max-height: 760px) and (min-width: 761px) {

  body {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }

  .wav-auth-mark {
    width: 118px;
    height: 79px;

    margin-bottom: 2px;
  }

  .wav-auth-wordmark {
    font-size: clamp(22px, 2.2vw, 28px);
  }

  .wav-auth-subtitle {
    margin-top: 6px;

    font-size: 9px;
    letter-spacing: 3.2px;
  }

  .wav-auth-brand {
    margin-bottom: 12px;
  }

  #first-factor-stage > .MuiContainer-root::before {
    width: 38px;
    height: 38px;

    margin-bottom: 6px;

    background-size: 22px 22px, auto;
  }

  #first-factor-stage .MuiTypography-h5 {
    font-size: 21px !important;
  }

  #first-factor-stage .MuiTypography-h5::after {
    margin-top: 2px;

    font-size: 12.5px;
  }

  #first-factor-stage > .MuiContainer-root {
    padding: 16px 30px 12px !important;
  }

  #form-login .MuiGrid-root:has(> #reset-password-button) {
    margin-top: 22px !important;
  }

  #first-factor-stage .MuiContainer-root
    > .MuiGrid-container:last-child {
    margin-top: 8px !important;
  }

  .wav-auth-trust {
    margin-top: 10px;
  }

  .wav-trust-icon {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    background-size: 17px 17px;
  }

  .wav-trust-title {
    font-size: 13px;
  }

  .wav-trust-copy {
    font-size: 11.5px;
  }
}

/* Below this there is genuinely no room; drop the decoration
   rather than make the sign-in card itself scroll. */
@media (max-height: 660px) and (min-width: 761px) {

  .wav-auth-trust {
    display: none;
  }

  .wav-auth-dots {
    display: none;
  }
}


/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

  body {
    padding: 26px 16px 24px !important;
  }

  .wav-auth-dots {
    display: none;
  }

  .wav-auth-mark {
    width: 132px;
    height: 88px;
  }

  .wav-auth-wordmark {
    font-size: 30px;
    letter-spacing: -1.2px;
  }

  .wav-auth-subtitle {
    font-size: 9.5px;
    letter-spacing: 3px;
    gap: 10px;
  }

  .wav-auth-subtitle::before,
  .wav-auth-subtitle::after {
    width: 38px;
  }

  #first-factor-stage > .MuiContainer-root {
    padding: 26px 22px 20px !important;

    border-radius: 20px !important;
  }

  #first-factor-stage .MuiTypography-h5 {
    font-size: 25px !important;
  }

  .wav-auth-trust {
    margin-top: 24px;

    grid-template-columns: 1fr;
    gap: 12px;

    width: min(360px, 100%);
  }

  .wav-auth-trust-item {
    padding: 0;
  }

  .wav-auth-trust-item:not(:last-child)::after {
    content: none;
  }

  #root .MuiAppBar-root {
    top: 10px !important;
    right: 12px !important;
  }

  #language-button {
    padding: 6px 11px !important;
    font-size: 13.5px !important;
  }
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {

  #sign-in-button,
  #sign-in-button::after,
  #form-login .MuiOutlinedInput-root {
    transition: none !important;
  }
}