/* ═══════════════════════════════════════════════════════════
   SIGN-IN PAGE (admin/login.php only) — the navy "bare" look shared
   with Payables & Contracts and the Cloud Team portal: navy with the
   drifting aurora, the First Pacific Group lockup + gold seam, and the
   form on a white card with a gold submit button.

   Loaded AFTER style.css and only by login.php, so nothing here can
   reach the admin screens. It layers on style.css's auth rules (the
   password toggle, labels and inputs keep working as before).

   Every colour is a LITERAL, not a token: style.css re-points --navy,
   --surface, --text … under [data-theme="dark"], and this page must
   stay navy-and-white whatever theme or OS setting is active. Rules
   are scoped `body.auth-bare …` so they outrank the
   `[data-theme="dark"] .auth-*` overrides in style.css.
═══════════════════════════════════════════════════════════ */

html body.auth-bare {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  isolation: isolate;
  background: linear-gradient(140deg, #050C19 0%, #0A1730 45%, #0B1F3A 100%);
  color: #FFFFFF;
  color-scheme: light;
}

/* ─── Aurora: three slow light blooms + a faint dot grid ─── */
.auth-bare > .aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.auth-bare .aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask: radial-gradient(60% 60% at 50% 50%, #000, transparent);
          mask: radial-gradient(60% 60% at 50% 50%, #000, transparent);
}
.auth-bare .aurora span {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform, opacity;
}
.auth-bare .aurora span:nth-child(1) {
  width: 70vw; min-width: 520px; left: -20vw; top: -30vw;
  background: radial-gradient(closest-side, rgba(201,162,79,.42), rgba(201,162,79,.12) 55%, transparent);
  animation: sgn-aurora-a 19s ease-in-out infinite alternate;
}
.auth-bare .aurora span:nth-child(2) {
  width: 80vw; min-width: 560px; right: -30vw; top: 10vh;
  background: radial-gradient(closest-side, rgba(41,98,158,.70), rgba(27,69,112,.25) 55%, transparent);
  animation: sgn-aurora-b 23s ease-in-out infinite alternate;
}
.auth-bare .aurora span:nth-child(3) {
  width: 50vw; min-width: 360px; left: 20vw; top: 40vh;
  background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent);
  animation: sgn-aurora-c 29s ease-in-out infinite alternate;
}
@keyframes sgn-aurora-a { 0% { transform: translate3d(0,0,0) scale(.9); opacity: .55 } 50% { transform: translate3d(18%,14%,0) scale(1.15); opacity: 1 } 100% { transform: translate3d(34%,6%,0) scale(1); opacity: .7 } }
@keyframes sgn-aurora-b { 0% { transform: translate3d(0,0,0) scale(1.1); opacity: 1 } 50% { transform: translate3d(-16%,18%,0) scale(.9); opacity: .6 } 100% { transform: translate3d(-26%,4%,0) scale(1.05); opacity: .95 } }
@keyframes sgn-aurora-c { 0% { transform: translate3d(-20%,10%,0); opacity: .4 } 100% { transform: translate3d(30%,-12%,0); opacity: 1 } }
@keyframes sgn-rise { from { opacity: 0; transform: translateY(14px); } }

/* ─── Column ─── */
.auth-bare .bare__inner {
  position: relative;
  width: min(640px, 100%);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(48px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh;
}

/* ─── Lockup: white FPG logo · gold seam · "Support Center" ─── */
.auth-bare .lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  animation: sgn-rise .9s cubic-bezier(.22,1,.36,1) both;
}
.auth-bare .lockup__logo {
  display: block;
  flex: 0 0 auto;
  width: 188px;
  height: 42px;
  background-color: #FFFFFF;
  -webkit-mask: url('../../assets/img/fg-logo.png') no-repeat center / contain;
          mask: url('../../assets/img/fg-logo.png') no-repeat center / contain;
}
.auth-bare .lockup__seam {
  flex: 0 0 auto;
  width: 1.5px;
  height: 40px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(201,162,79,0), #C9A24F 28%, #E7C87A 50%, #C9A24F 72%, rgba(201,162,79,0));
}
.auth-bare .lockup__name {
  font: 800 27px/1 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -.02em;
  color: #FFFFFF;
  white-space: nowrap;
}
.auth-bare .bare__lead {
  margin: 18px 0 0;
  max-width: 480px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
  text-wrap: balance;
  animation: sgn-rise .9s cubic-bezier(.22,1,.36,1) .08s both;
}

/* ─── The white card (keeps style.css's form rules) ─── */
html body.auth-bare .auth-card {
  position: relative;
  z-index: auto;
  margin-top: 30px;
  width: 100%;
  max-width: 420px;
  text-align: left;
  color: #111827;
  background: #FFFFFF;
  border: 0;
  border-radius: 22px;
  padding: 30px 30px 26px;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(201,162,79,.18);
  animation: sgn-rise .9s cubic-bezier(.22,1,.36,1) .16s both;
}
body.auth-bare .auth-title {
  margin: 0;
  text-align: left;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0B1F3A;
}
body.auth-bare .auth-sub {
  text-align: left;
  margin: 6px 0 22px;
  font-size: .9rem;
  line-height: 1.5;
  color: #4B5563;
}
body.auth-bare .auth-error {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  color: #991B1B;
  border-radius: 8px;            /* matches the inline-styled signed-out notice */
}
body.auth-bare .auth-label { color: #374151; }
body.auth-bare .auth-input {
  background: #FFFFFF;
  color: #111827;
  border: 1.5px solid #D6DCE5;
  border-radius: 10px;
}
body.auth-bare .auth-input::placeholder { color: #9CA3AF; }
body.auth-bare .auth-input:focus {
  border-color: #0B1F3A;
  box-shadow: 0 0 0 3px rgba(201,162,79,.28);
}
body.auth-bare .auth-pw-toggle { color: #6B7280; }
body.auth-bare .auth-pw-toggle:hover { color: #0B1F3A; background: rgba(11,31,58,.06); }
body.auth-bare .auth-pw-toggle:focus-visible { outline: 2px solid #C9A24F; color: #0B1F3A; }

/* Gold submit, navy ink — same as Payables' .auth-submit */
body.auth-bare .auth-btn {
  margin-top: 22px;
  border: 0;
  border-radius: 10px;
  padding: 14px;
  background: linear-gradient(180deg, #E7C87A, #C9A24F);
  color: #0B1F3A;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  box-shadow: 0 10px 24px -12px rgba(168,132,47,.9);
}
body.auth-bare .auth-btn:hover {
  background: linear-gradient(180deg, #EDD393, #E7C87A);
  color: #0B1F3A;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(168,132,47,.95);
}
body.auth-bare .auth-btn:active { transform: none; }
body.auth-bare .auth-btn:focus-visible { outline: 2px solid #0B1F3A; outline-offset: 2px; }

body.auth-bare .auth-foot {
  margin-top: 20px;
  text-align: center;
  font-size: .825rem;
  color: #6B7280;
}
body.auth-bare .auth-foot a {
  color: #0B1F3A;
  text-decoration: underline;
  text-decoration-color: rgba(11,31,58,.35);
  text-underline-offset: 2px;
}
body.auth-bare .auth-foot a:hover { color: #7A5C22; text-decoration-color: #C9A24F; }

/* ─── Below the card ─── */
.auth-bare .bare__foot {
  margin: 28px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.6);
  text-wrap: balance;
  animation: sgn-rise .9s cubic-bezier(.22,1,.36,1) .3s both;
}
.auth-bare .bare__lock {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  color: #E7C87A;
}
.auth-bare .bare__inner :focus-visible { outline-color: #E7C87A; }
html body.auth-bare .auth-card :focus-visible { outline-color: #C9A24F; }

/* ─── Tablet / phone ─── */
@media (max-width: 860px) {
  html body.auth-bare .auth-card {
    max-width: 100%;
    border-radius: 20px;
    padding: 24px 20px 22px;
    box-shadow: 0 24px 50px -24px rgba(0,0,0,.6);
  }
  .auth-bare .lockup { gap: 12px; }
  .auth-bare .lockup__logo { width: 132px; height: 30px; }
  .auth-bare .lockup__seam { height: 28px; }
  .auth-bare .lockup__name { font-size: 21px; }
  .auth-bare .bare__inner {
    justify-content: flex-start;
    padding: calc(34px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  }
  .auth-bare .bare__lead { font-size: 14.5px; margin-top: 14px; }
  html body.auth-bare .auth-card { margin-top: 22px; }
}
/* Phone: the name takes two lines beside the logo, like Payables' phone lockup. */
@media (max-width: 560px) {
  .auth-bare .lockup__seam { height: 40px; }
  .auth-bare .lockup__name { white-space: normal; text-align: left; line-height: 1.08; max-width: 5em; }
}
/* iOS zooms into any input under 16px — keep fields at 16px on phones. */
@media (max-width: 640px) {
  body.auth-bare .auth-input { font-size: 16px; }
}
/* Touch: a full-size target for the show/hide password button. */
@media (pointer: coarse) {
  body.auth-bare .auth-input--with-toggle { padding-right: 52px; }
  body.auth-bare .auth-pw-toggle { width: 44px; height: 44px; right: 2px; }
}
/* Very narrow screens (≤340 px): the lockup stacks rather than squeezing. */
@media (max-width: 340px) {
  .auth-bare .lockup { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .auth-bare .lockup__seam { display: none; }
  .auth-bare .lockup__name { text-align: center; max-width: none; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-bare .aurora span { animation: none !important; }
  .auth-bare .lockup,
  .auth-bare .bare__lead,
  .auth-bare .bare__foot,
  html body.auth-bare .auth-card { animation: none !important; }
  body.auth-bare .auth-btn:hover { transform: none; }
}