/* ---------------------------------------------------------------------------
   Jesus House Lorain CRM — sign-in brand skin
   Scope: pre-login screens only (body.page-auth — login, password reset, 2FA).
   Loaded via Apache mod_substitute; no ChurchCRM file is modified, so this
   survives every application upgrade.

   THEME
   Stock ChurchCRM hardcodes the login page light and has no dark-aware
   page-auth rules at all, while the logged-in app follows the user's
   ui.style setting (default "auto" -> prefers-color-scheme). That mismatch
   means a dark-mode user gets a light login then a dark dashboard.
   This skin is fully token-driven and follows prefers-color-scheme, so the
   login matches wherever the user is about to land.

   Palette and type are taken from the computed styles of
   https://jesushouselorain.org — not chosen independently. The site is
   dark-only, so the dark set below is the literal brand; the light set is
   the same identity re-grounded on light surfaces.

   The emerald button is deliberately IDENTICAL in both themes: bright
   emerald with dark text, exactly as the church site renders its buttons,
   and it clears WCAG AA on either background (8.59:1).
--------------------------------------------------------------------------- */

/* ---- LIGHT (default) --------------------------------------------------- */
body.page-auth {
  --jhl-bg:        #f3f6f5;
  --jhl-surface:   #ffffff;
  --jhl-raised:    #f7faf9;
  --jhl-line:      #dde5e2;
  --jhl-ink:       #0f1a17;
  --jhl-muted:     #566661;   /* 6.4:1 on white                             */
  --jhl-link:      #047857;   /* emerald-700, 5.5:1 on white                */
  --jhl-accent:    #34d399;   /* site wordmark emerald                      */
  --jhl-accent-lo: #10b981;
  --jhl-on-accent: #04241b;   /* dark text on emerald, as the site does     */
  --jhl-glow-a:    rgba(52, 211, 153, 0.16);
  --jhl-glow-b:    rgba(26, 26, 60, 0.05);
  --jhl-card-shadow: 0 18px 40px -22px rgba(15, 26, 23, 0.28);
  --jhl-placeholder: #8a9a94;

  background: var(--jhl-bg);
  color: var(--jhl-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- DARK (device preference) ------------------------------------------ */
@media (prefers-color-scheme: dark) {
  body.page-auth {
    --jhl-bg:        #0b0e14;   /* site body background                     */
    --jhl-surface:   #131a24;
    --jhl-raised:    #1a2332;
    --jhl-line:      #253044;
    --jhl-ink:       #f8fafc;
    --jhl-muted:     #94a3b8;
    --jhl-link:      #34d399;
    --jhl-accent:    #34d399;
    --jhl-accent-lo: #059669;
    --jhl-on-accent: #04241b;
    --jhl-glow-a:    rgba(52, 211, 153, 0.13);
    --jhl-glow-b:    rgba(26, 26, 60, 0.55);
    --jhl-card-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
                       0 24px 60px -18px rgba(0, 0, 0, 0.8);
    --jhl-placeholder: #5b6880;
  }
}

/* A single soft emerald glow behind the card. The one decorative gesture. */
body.page-auth::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 38rem at 50% 30%, var(--jhl-glow-a), transparent 62%),
    radial-gradient(38rem 28rem at 50% 8%,  var(--jhl-glow-b), transparent 70%);
}

body.page-auth .login-container {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 2.5rem 1rem 1.5rem;
}

body.page-auth .login-card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  background: var(--jhl-surface) !important;
  border: 1px solid var(--jhl-line) !important;
  border-radius: 14px;
  box-shadow: var(--jhl-card-shadow);
  overflow: hidden;
}

body.page-auth .login-card::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--jhl-accent), transparent);
}

/* ---- header ------------------------------------------------------------ */

body.page-auth .login-card-header {
  padding: 2.25rem 2rem 0.5rem;
  text-align: center;
  background: none !important;
  border: 0;
}

/* Swap the shipped ChurchCRM logo for the church's own mark without touching
   the image file, so an upgrade cannot restore the wrong logo. The RCCG mark
   is a full-colour emblem on transparency and reads on both themes. */
body.page-auth .login-header-logo img { display: none; }
body.page-auth .login-header-logo {
  height: 76px;
  margin-bottom: 1.1rem;
  background: url('/brand/jhl-logo.png') center / contain no-repeat;
}

body.page-auth .login-header-church-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--jhl-ink) !important;
  margin: 0 0 0.35rem;
}

body.page-auth .login-header-tagline {
  font-size: 0.875rem;
  color: var(--jhl-muted) !important;
  margin: 0;
}

/* ---- body -------------------------------------------------------------- */

body.page-auth .login-card-body { padding: 1.5rem 2rem 2rem; }

body.page-auth .login-form-title { text-align: center; margin-bottom: 1.5rem; }
body.page-auth .login-form-title h1 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--jhl-ink);
  margin: 0 0 0.3rem;
}
body.page-auth .login-form-title h1 i { color: var(--jhl-link); margin-right: 0.4rem; }
body.page-auth .login-form-title p { font-size: 0.85rem; color: var(--jhl-muted); margin: 0; }

body.page-auth .mb-3 { margin-bottom: 1.1rem; }

body.page-auth .form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
}
body.page-auth .form-footer a,
body.page-auth .login-contact-footer a { color: var(--jhl-link); text-decoration: none; }
body.page-auth .form-footer a:hover,
body.page-auth .login-contact-footer a:hover { text-decoration: underline; }

/* The one loud element on the page — identical in both themes. */
body.page-auth .btn-sign-in {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 0.8rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--jhl-on-accent) !important;
  background: linear-gradient(135deg, var(--jhl-accent), var(--jhl-accent-lo)) !important;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
body.page-auth .btn-sign-in:hover  { filter: brightness(1.07); }
body.page-auth .btn-sign-in:active { transform: translateY(1px); }

body.page-auth .login-contact-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.15rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--jhl-line);
  font-size: 0.8125rem;
}

/* ---- alerts ------------------------------------------------------------ */

body.page-auth .alert {
  border-radius: 9px;
  border: 1px solid;
  padding: 0.7rem 0.9rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
body.page-auth .alert-danger  { background: rgba(220, 38, 38, 0.08);  border-color: rgba(220, 38, 38, 0.35);  color: #b91c1c; }
body.page-auth .alert-warning { background: rgba(180, 83, 9, 0.08);   border-color: rgba(180, 83, 9, 0.35);   color: #92400e; }
@media (prefers-color-scheme: dark) {
  body.page-auth .alert-danger  { background: rgba(239, 68, 68, 0.10);  border-color: rgba(239, 68, 68, 0.38);  color: #fca5a5; }
  body.page-auth .alert-warning { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.38); color: #fcd34d; }
}

/* ---- self-registration pill (only when self-reg is enabled) ------------ */

body.page-auth .login-tab-control {
  display: flex;
  gap: 0.25rem;
  background: var(--jhl-raised);
  border: 1px solid var(--jhl-line);
  border-radius: 10px;
  padding: 0.25rem;
  margin-bottom: 1.5rem;
}
body.page-auth .login-tab-btn {
  flex: 1;
  border: 0;
  background: none;
  border-radius: 7px;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--jhl-muted);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
body.page-auth .login-tab-btn.active {
  background: var(--jhl-accent);
  color: var(--jhl-on-accent);
  font-weight: 600;
}

/* ---- footer chrome ChurchCRM renders below the card -------------------- */

body.page-auth .auth-footer,
body.page-auth .main-footer,
body.page-auth footer {
  background: none;
  border: 0;
  color: var(--jhl-muted);
  text-align: center;
  font-size: 0.75rem;
}
body.page-auth .auth-footer { padding: 1.5rem 1rem 2.5rem; }
body.page-auth .auth-footer a,
body.page-auth footer a { color: var(--jhl-muted); text-decoration: none; }
body.page-auth .auth-footer a:hover { color: var(--jhl-link); }
body.page-auth .auth-footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.6rem;
  font-size: 1rem;
}

/* ---- quality floor ----------------------------------------------------- */

body.page-auth :focus-visible {
  outline: 2px solid var(--jhl-link);
  outline-offset: 2px;
}

@media (max-width: 30rem) {
  body.page-auth .login-card-header { padding: 1.75rem 1.25rem 0.5rem; }
  body.page-auth .login-card-body   { padding: 1.25rem 1.25rem 1.75rem; }
  body.page-auth .login-header-church-name { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-auth * { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Specificity overrides.
   ChurchCRM ships its own LIGHT theme for body.page-auth using selectors more
   specific than ours, e.g.
     body.page-auth .mb-3 > input:not([type="checkbox"]):not([type="radio"])
   Left alone that paints our light text on its white field. We match the
   vendor's own selector shape so these win on specificity, and drive them from
   the same tokens so both themes stay correct.
--------------------------------------------------------------------------- */

body.page-auth .mb-3 > input:not([type="checkbox"]):not([type="radio"]),
body.page-auth .mb-3 > input.form-control,
body.page-auth .form-control {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 9px;
  font-size: 0.9375rem;
  background: var(--jhl-raised) !important;
  background-color: var(--jhl-raised) !important;
  border: 1px solid var(--jhl-line) !important;
  color: var(--jhl-ink) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-auth .mb-3 > input:focus,
body.page-auth .form-control:focus {
  outline: none;
  border-color: var(--jhl-accent) !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.20) !important;
}
body.page-auth .mb-3 > input::placeholder,
body.page-auth .form-control::placeholder { color: var(--jhl-placeholder) !important; }

body.page-auth .mb-3 label,
body.page-auth .mb-3 > label.form-label,
body.page-auth .form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--jhl-muted) !important;
}

/* Chrome autofill repaints the field with its own UA style. */
body.page-auth input:-webkit-autofill,
body.page-auth input:-webkit-autofill:hover,
body.page-auth input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--jhl-ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--jhl-raised) inset !important;
  caret-color: var(--jhl-ink);
}