/**
 * auth.css — the sign-in / forgot-password / reset journey.
 *
 * These three pages were the last of the v1 layout: a bare Bootstrap form on a
 * full-bleed background photo, its own copy of the eye-toggle offset hack, and
 * no shared vocabulary between them. They are one journey and now share one
 * sheet, so a change to the card lands on all three.
 */

:root {
  --auth-brand: #015826;
  --auth-brand-dark: #013f1b;
  --auth-ink: #101828;
  --auth-muted: #667085;
  --auth-line: #d0d5dd;
}

body.auth-page {
  min-height: 100vh;
  min-height: 100dvh; /* phone browsers: excludes the address bar */
  display: flex;
  flex-direction: column;
  color: var(--auth-ink);

  /* The site photo, behind a white wash so the card and the text on it stay
     readable over whatever part of the image they land on. */
  background-color: #f7f8fa;
  background-image:
    linear-gradient(rgba(247, 248, 250, .90), rgba(247, 248, 250, .90)),
    url("../img/slide2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

body.auth-page #authFooter {
  margin-top: auto;
  width: 100%;
}

/* THE HEADER IS `position: fixed` — assets/css/style.css sets that on every
   `header` on the site, and the v1 pages compensated with
   `.headerBeginner { margin-top: 70px }` on the section below it. That class
   went with the old markup, so the top of the card sat underneath the bar and
   the page would not scroll up to reveal it. The offset lives here instead.

   It is PADDING on this element rather than a margin on the body: `.auth-main`
   already flexes to fill the column, so the padding is absorbed and the page
   does not gain a permanent scrollbar on a short card. */
.auth-main {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(70px + 3rem) 1rem 4rem;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
  padding: 2rem;
}

@media (max-width: 480px) {
  .auth-main { padding: calc(70px + 1.5rem) 1rem 2.5rem; }
  .auth-card { padding: 1.5rem; border-radius: 14px; }
}

/* The Zamfara crest. It is a detailed coat of arms rather than a flat mark, so
   it gets room to read instead of being shrunk into an icon circle — and a
   height cap rather than a width, since the artwork is wider than it is tall
   (1600x1142). */
.auth-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.auth-badge img {
  height: 78px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 480px) {
  .auth-badge img { height: 64px; }
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 .4rem;
}

.auth-subtitle {
  color: var(--auth-muted);
  text-align: center;
  font-size: .9rem;
  margin: 0 0 1.75rem;
}

.auth-field { margin-bottom: 1.1rem; }

.auth-field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .4rem;
}

.auth-field .req { color: #d92d20; }

/* One input rule for all three pages, instead of Bootstrap's .form-control
   fighting Tailwind's reset per page. */
.auth-input {
  width: 100%;
  padding: .7rem .9rem;
  font-size: .95rem;
  color: var(--auth-ink);
  background: #fff;
  border: 1.5px solid var(--auth-line);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-input::placeholder { color: #98a2b3; }

.auth-input:focus {
  outline: none;
  border-color: var(--auth-brand);
  box-shadow: 0 0 0 4px rgba(1, 88, 38, .12);
}

/* The eye sits INSIDE the field. The old rule was `margin-left:-50px` on a
   floated <i>, which drifted with the font size and overlapped typed text. */
.auth-password { position: relative; }
.auth-password .auth-input { padding-right: 2.75rem; }

.auth-password .auth-eye {
  position: absolute;
  top: 50%;
  right: .9rem;
  transform: translateY(-50%);
  color: var(--auth-muted);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  background: none;
  border: 0;
  padding: 0;
}

.auth-password .auth-eye:hover { color: var(--auth-brand); }

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.auth-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  margin: 0;
  cursor: pointer;
}

.auth-check input { width: 1rem; height: 1rem; accent-color: var(--auth-brand); }

.auth-link {
  color: var(--auth-brand);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.auth-link:hover { text-decoration: underline; }

.auth-btn {
  width: 100%;
  padding: .8rem 1rem;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  background: var(--auth-brand);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.auth-btn:hover:not(:disabled) { background: var(--auth-brand-dark); }
.auth-btn:disabled { opacity: .6; cursor: not-allowed; }

.auth-btn-ghost {
  width: 100%;
  padding: .8rem 1rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--auth-brand);
  background: #fff;
  border: 1.5px solid var(--auth-brand);
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background .15s ease;
}

.auth-btn-ghost:hover { background: rgba(1, 88, 38, .06); color: var(--auth-brand); }

/* Feedback line. The pages used to emit Bootstrap `.text-warning` etc., which
   on a white card rendered as unreadable pale yellow. */
.auth-msg {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .88rem;
  text-align: center;
}

.auth-msg-success { background: #ecfdf3; color: #027a48; }
.auth-msg-error { background: #fef3f2; color: #b42318; }
.auth-msg-info { background: #f2f4f7; color: #475467; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.5rem 0 1rem;
  color: var(--auth-muted);
  font-size: .85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eaecf0;
}

.auth-fineprint {
  color: var(--auth-muted);
  font-size: .8rem;
  text-align: center;
  margin: 1rem 0 0;
  line-height: 1.5;
}

.auth-foot {
  text-align: center;
  font-size: .9rem;
  color: var(--auth-muted);
  margin: 1.25rem 0 0;
}

.auth-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: auth-spin .7s linear infinite;
}

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