/* static/css/login.css */

/* ===========
   QUICK KNOBS
   =========== */
:root{
  /* 1) space around the entire login panel (inside content-area) */
  --login-page-pad: 0px;   /* increase to 16px / 20px if you want more */

  /* 2) inset the BACKGROUND image from the edges */
  --bg-inset: 10px;         /* increase to extend image inward */

  /* image control */
  --bg-position: 50% 50%;
  --bg-zoom: 1.06;
  --bg-saturate: 1.05;
  --bg-contrast: 1.05;

  /* overlay: the approved flat blue tint over photography (section 1).
     Text over a photograph always gets a treatment (section 7). */
  --overlay-color: 0,58,107;
  --overlay-opacity: .38;

  /* card sizing */
  --card-max-w: 520px;

  /* Solid navy panel - no frosted glass, no blur (section 4). */
  --card-bg: #002354;
  --card-border: rgba(255,255,255,.35);
  --card-shadow: 0 6px 18px rgba(0,24,68,.14);

  /* On dark, secondary text is taupe at full opacity (section 1/9). */
  --text-soft: #D7DAD6;
}

/* ============================================================
   LOGIN PAGE: content-area behaves like a fixed panel (no scroll)
   ============================================================ */
.content-area.login-content{
  padding: var(--login-page-pad); /* ✅ THIS controls top/bottom/left/right spacing */
  overflow: hidden;
}

/* Fill inside content-area */
.login-shell{
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--brand-navy);
}

/* background layer (inset inside the shell) */
.login-bg{
  position: absolute;

  /* ✅ THIS controls the “extended / inset” background edges */
  top: var(--bg-inset);
  left: var(--bg-inset);
  right: var(--bg-inset);
  bottom: var(--bg-inset);

  border-radius: calc(var(--radius-xl) - 2px);
  background-image: var(--login-bg-url);
  background-size: cover;
  background-position: var(--bg-position);
  background-repeat: no-repeat;

  filter: saturate(var(--bg-saturate)) contrast(var(--bg-contrast));
  transform: scale(var(--bg-zoom));
}

@supports (background-image: image-set("x" 1x)) {
  .login-bg{
    background-image: image-set(var(--login-bg-url-webp) 1x, var(--login-bg-url) 1x);
  }
}
@supports (background-image: -webkit-image-set("x" 1x)) {
  .login-bg{
    background-image: -webkit-image-set(var(--login-bg-url-webp) 1x, var(--login-bg-url) 1x);
  }
}

/* overlay */
.login-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* The flat blue tint, applied evenly (section 1). */
  background:
    linear-gradient(
      rgba(var(--overlay-color), var(--overlay-opacity)),
      rgba(var(--overlay-color), var(--overlay-opacity))
    );
}

/* vignette */
.login-bg::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  /* The approved bottom-up photo scrim (section 1). */
  background: var(--gradient-photo-scrim);
  pointer-events:none;
}

/* stage centers the card */
.login-stage{
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2vw, 26px);
}

/* glass card */
.login-card{
  width: min(var(--card-max-w), 92vw);
  /* Square-cornered, flat, solid navy - no glass, no blur (section 4). */
  border-radius: 0;
  height: auto;
  max-height: 100%;
  overflow: auto;
  position: relative;

  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

/* The red 32px anchor square sits at the bottom-right of the photographic
   field, not inside the panel where it would collide with the footer line. */
.login-stage::after{
  content: "";
  position: absolute;
  right: var(--bg-inset);
  bottom: var(--bg-inset);
  width: 32px;
  height: 32px;
  background: var(--brand-red);
  pointer-events: none;
  z-index: 2;
}

.login-card__inner{
  padding: 22px 22px 18px;
  position: relative;
  z-index: 1;
}

.login-brand{
  margin-bottom: 14px;
  text-align: center;
}

.login-brand-mark{
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto;
}

.login-head{
  text-align: center;
}

.login-title{
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--brand-white);
}

.login-title-rule{
  width: 40px;
  height: 1px;
  background: var(--brand-red);
  border-radius: 0;
  margin: 12px auto 14px;
}

.login-tagline{
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-white);
  letter-spacing: 0;
  margin-bottom: 6px;
}

.login-subtitle{
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 14px;
}

.login-alert{
  margin: 12px 0 14px;
  padding: 10px 12px;
  border-radius: 0;
  background: rgba(206,24,30,.16);
  border: 1px solid var(--brand-red);
  color: var(--brand-white);
  font-size: 13px;
}

.login-alert--success{
  background: rgba(0,176,80,.16);
  border-color: var(--brand-status-positive);
}

.login-alert--info{
  background: rgba(104,151,184,.20);
  border-color: var(--brand-blue-mid);
}

.login-alert--warning{
  background: rgba(255,147,0,.16);
  border-color: var(--brand-status-warning);
}

.login-form{ display: grid; gap: 12px; }
.login-field{ display: grid; gap: 6px; }

.login-label{
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 700;
}

.login-input{
  width: 100%;
  border-radius: 0;
  border: 1px solid var(--card-border);
  background: rgba(0,0,0,.22);
  color: var(--brand-white);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.login-input:focus-visible{
  border-color: var(--brand-white);
  background: rgba(0,0,0,.28);
  outline: 2px solid var(--brand-white);
  outline-offset: 2px;
}

/* Password field: label + input row */
.login-password{
  display: grid;
  gap: 6px; /* same spacing as other fields */
}

/* This is the ONLY positioned parent for the eye */
.login-input-wrap{
  position: relative;
}

/* Give space inside the input so the eye doesn't overlap text */
.login-input-wrap .login-input{
  padding-right: 64px;
}

/* Eye button perfectly centered relative to the INPUT box */
.login-eye{
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);

  height: 34px;
  width: 46px;

  border-radius: 0;
  border: 1px solid var(--card-border);
  background: rgba(0,0,0,.22);
  color: var(--brand-white);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;
}

.login-eye:hover{
  background: rgba(0,0,0,.30);
}


.login-btn{
  width: 100%;
  max-width: 100%;
  margin-top: 4px;
  height: 44px;
  border-radius: 0;
  border: 1px solid var(--brand-white);
  background: transparent;
  color: var(--brand-white);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-size: 14px;
}
.login-btn:hover{ background: var(--brand-white); color: var(--brand-navy); }
.login-btn:active{ background: var(--brand-taupe); color: var(--brand-navy); }

.login-btn--ms{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  background: var(--brand-white);
  border-color: var(--brand-white);
  margin-top: 6px;
  padding: 0 16px;
  height: 48px;
  font-size: 14px;
  font-weight: 700;
}
.login-btn--ms:hover{
  background: var(--brand-taupe);
  border-color: var(--brand-taupe);
  color: var(--brand-navy);
}
.login-btn-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  /* The EPI-USE wordmark is a wide lockup, so it sits in its own clear
     space rather than a sphere - never distorted or recoloured (section 7). */
  width: auto;
  height: 22px;
  background: none;
  flex-shrink: 0;
}
.login-btn-icon img{ width: auto; height: 22px; object-fit: contain; display: block; }
.login-btn-label{
  /* The card is centre-aligned throughout, so the logo and label sit as one
     centred lockup rather than the label absorbing the spare width. */
  flex: 0 0 auto;
}
/* A hairline separates the wordmark from the action, so the logo reads as a
   mark rather than as part of the sentence. */
.login-btn--ms .login-btn-icon{
  padding-right: 14px;
  margin-right: 2px;
  border-right: 1px solid var(--brand-border-hairline);
}
.login-btn-arrow{
  color: var(--brand-navy);
  font-size: 16px;
  line-height: 1;
}
/* On the SSO button the lockup is centred, so no trailing arrow. */
.login-btn--ms .login-btn-arrow{ display: none; }

.login-divider{
  margin: 10px 0 6px;
  text-align: center;
  color: var(--text-soft);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.login-help{
  margin-top: 18px;
  font-size: 13px;
  text-align: center;
}

.login-help a{
  color: var(--text-soft);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .15s ease, color .15s ease;
}

.login-help a:hover,
.login-help a:focus-visible{
  color: var(--brand-white);
  text-decoration-color: currentColor;
}

.login-foot{
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
}

@media (max-width: 520px){
  :root{
    --login-page-pad: 10px;
    --bg-inset: 8px;
  }
  .login-card__inner{ padding: 18px 18px 16px; }
}


/* ── On-dark link colours ─────────────────────────────────────────────────
   base.css styles every <a> with the brand link blue, which is correct on a
   white field but fails on this navy panel. These rules are qualified with
   the element so they outrank that global rule. */
a.login-btn--ms,
a.login-btn--ms:visited,
a.login-btn--ms:hover { color: var(--brand-navy); }

/* This sits on navy, so it must beat any global link colour regardless of
   where the block is used. Repeating the class raises specificity without
   depending on an ancestor, so the rule cannot be defeated by a stray
   a:visited elsewhere in the cascade. */
.login-help.login-help a:link,
.login-help.login-help a:visited { color: var(--text-soft); }
.login-help.login-help a:hover,
.login-help.login-help a:focus-visible { color: var(--brand-white); }