/* ══════════════════════════════════════════════════════════════════
   E&S STERLING — LCTS  |  auth-luna-xp.css
   Luna / Windows XP styling for standalone auth pages:
     auth/login.php · auth/forgot-password.php
     auth/reset-password.php
   Stand-alone file — no dashboard-luna.css dependency
   Replace Bootstrap inline <style> block + Bootstrap CDN link
   ══════════════════════════════════════════════════════════════════ */

/* ── Reset / Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Tahoma, Verdana, Geneva, sans-serif;
  font-size: 12px;
  /* XP Luna desktop wallpaper gradient — deep teal-to-navy */
  background: linear-gradient(160deg, #1a4a6e 0%, #0d2b4a 55%, #0a1f38 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Subtle tiled "desktop" texture overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(49,106,197,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 70%, rgba(10,36,106,.25) 0%, transparent 70%);
}

/* ── Auth card wrapper ─────────────────────────────────────────── */
.login-container,
.forgot-password-container,
.reset-password-container {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
}

.login-card,
.forgot-password-card,
.reset-password-card {
  background: #f5f3ee;
  border: 2px solid #aca899;
  /* XP raised window border trick */
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #888,
    3px 3px 12px rgba(0,0,0,.45),
    6px 6px 24px rgba(0,0,0,.25);
  border-radius: 0;
  overflow: hidden;
}

/* ── Title bar (XP window chrome) ─────────────────────────────── */
.login-header,
.forgot-password-header,
.reset-password-header {
  background: linear-gradient(180deg,
    #1b6ccc 0%,
    #1c6fd4 3%,
    #1969c9 8%,
    #1260bd 50%,
    #0e52a6 90%,
    #1541b0 100%) !important;
  padding: 0;
  text-align: center;
  border-bottom: 1px solid #0a3d82;
  position: relative;
}

/* Inner title bar gradient inset */
.login-header::before,
.forgot-password-header::before,
.reset-password-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,.35) 50%, transparent 95%);
}

/* Gavel / key icon wrapper */
.login-header i,
.forgot-password-header i,
.reset-password-header i {
  display: block;
  font-size: 28px !important;
  color: #c8e0ff;
  margin: 20px auto 8px;
  /* XP icon shadow */
  text-shadow: 0 2px 4px rgba(0,0,0,.4), 0 0 8px rgba(166,202,240,.35);
}

.login-header h1,
.forgot-password-header h1,
.reset-password-header h1 {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #fff !important;
  margin-bottom: 3px !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,.6) !important;
  letter-spacing: .5px;
}

.login-header p,
.forgot-password-header p,
.reset-password-header p {
  font-size: 10px !important;
  color: rgba(200,224,255,.85) !important;
  margin-bottom: 3px !important;
  line-height: 1.4;
}

/* Last <p> inside header = firm name */
.login-header p:last-child,
.forgot-password-header p:last-child,
.reset-password-header p:last-child {
  margin-bottom: 14px !important;
}

/* ── Body section ──────────────────────────────────────────────── */
.login-body,
.forgot-password-body,
.reset-password-body {
  padding: 18px 22px 14px !important;
  background: #f5f3ee;
}

/* ── Info box (forgot-password page) ──────────────────────────── */
.info-box {
  background: #eef4ff !important;
  border: 1px solid #7a9cc8 !important;
  border-left: 4px solid #316ac5 !important;
  padding: 8px 10px !important;
  margin-bottom: 14px !important;
  font-size: 11px !important;
  color: #0a246a !important;
  border-radius: 0 !important;
}
.info-box i { color: #316ac5; margin-right: 4px; }

/* ── Alerts ────────────────────────────────────────────────────── */
.alert {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  margin-bottom: 12px !important;
  font-size: 11px !important;
  border-radius: 0 !important;
  border: 1px solid !important;
}
.alert-danger {
  background: #ffe0d0 !important;
  border-color: #e08060 !important;
  color: #8b2000 !important;
}
.alert-success {
  background: #d0f0d0 !important;
  border-color: #66aa66 !important;
  color: #1a5a1a !important;
}
.alert i { flex-shrink: 0; font-size: 13px; margin-top: 1px; }
/* Bootstrap .me-2 spacer */
.me-2 { margin-right: 6px !important; }

/* ── Form elements ─────────────────────────────────────────────── */
.mb-3 { margin-bottom: 10px !important; }

.form-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: bold !important;
  color: #0a246a !important;
  margin-bottom: 3px !important;
}

/* Bootstrap input-group → XP inset field */
.input-group {
  display: flex !important;
  align-items: stretch !important;
  border: 2px inset #7a7976 !important;
  background: #fff !important;
}
.input-group:focus-within { border-color: #a6caf0 !important; }

.input-group-text {
  background: #f5f3ee !important;
  border: none !important;
  border-right: 1px solid #bbb !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  color: #316ac5 !important;
  font-size: 11px !important;
}

.form-control {
  flex: 1 !important;
  height: 26px !important;
  border: none !important;
  outline: none !important;
  padding: 0 8px !important;
  font-family: Tahoma, Verdana, Geneva, sans-serif !important;
  font-size: 11px !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.form-control::placeholder { color: #aaa; }
/* Kill Bootstrap's focus ring */
.form-control:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Eye-toggle button (rightmost input-group-text) */
.toggle-password {
  background: #f5f3ee !important;
  border: none !important;
  border-left: 1px solid #bbb !important;
  padding: 0 8px !important;
  cursor: pointer !important;
  color: #555 !important;
  display: flex !important;
  align-items: center !important;
  font-size: 11px !important;
}
.toggle-password:hover { color: #316ac5 !important; background: #eef4ff !important; }

/* ── Remember me + Forgot password row ────────────────────────── */
/* Bootstrap .d-flex / .justify-content-between / .align-items-center */
.d-flex { display: flex !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }

.form-check { display: flex; align-items: center; gap: 5px; }
.form-check-input {
  width: 13px !important; height: 13px !important; cursor: pointer; margin: 0 !important;
  accent-color: #316ac5;
}
.form-check-label { font-size: 11px; color: #333; cursor: pointer; }
.form-check-input:checked + .form-check-label { color: #0a246a; font-weight: bold; }

.forgot-password {
  font-size: 11px !important; color: #316ac5 !important; text-decoration: none !important;
}
.forgot-password:hover { text-decoration: underline !important; }

/* ── Submit / action buttons ───────────────────────────────────── */
.btn-login,
.btn-reset {
  width: 100% !important;
  height: 28px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: Tahoma, Verdana, Geneva, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  /* XP blue raised button */
  background: linear-gradient(180deg,#4a80d8,#316ac5 45%,#1a4a9a) !important;
  border: 1px solid !important;
  border-color: #7ab0e8 #0a246a #0a246a #7ab0e8 !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.4) !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.btn-login:hover,
.btn-reset:hover {
  background: linear-gradient(180deg,#5a90e8,#3a78d5 45%,#2a5aaa) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* mt-3 spacer on reset page error/success buttons */
.mt-3 { margin-top: 10px !important; }

/* ── Back-to-login link ────────────────────────────────────────── */
.back-to-login {
  display: block !important;
  text-align: center !important;
  margin-top: 12px !important;
  font-size: 11px !important;
  color: #316ac5 !important;
  text-decoration: none !important;
}
.back-to-login:hover { text-decoration: underline !important; }

/* ── Password strength bar ─────────────────────────────────────── */
.password-strength {
  height: 4px !important;
  background: #e0ddd5 !important;
  margin-top: 5px !important;
  overflow: hidden;
}
.password-strength-bar {
  height: 100% !important;
  width: 0 !important;
  transition: all .3s !important;
}
.strength-weak   { width: 33% !important; background: #c42b2b !important; }
.strength-medium { width: 66% !important; background: #c85000 !important; }
.strength-strong { width: 100%!important; background: #1a7a1a !important; }

/* ── Password requirements text (reset page) ──────────────────── */
.password-requirements {
  font-size: 10px !important;
  color: #555 !important;
  margin-top: 6px !important;
  background: #f5f3ee;
  border: 1px solid #d4cfc4;
  padding: 7px 10px !important;
}
.password-requirements strong { color: #0a246a; }
.password-requirements ul { padding-left: 14px; margin: 4px 0 0; }
.password-requirements li { margin: 2px 0; line-height: 1.4; }

/* ── Footer strip ──────────────────────────────────────────────── */
.login-footer {
  background: #ece9d8 !important;
  border-top: 1px solid #aca899 !important;
  padding: 8px 22px !important;
  text-align: center !important;
  font-size: 10px !important;
  color: #555 !important;
}
.login-footer p { margin: 1px 0 !important; }
/* Bootstrap .mb-0 */
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 3px !important; }

/* ── XP "window border" inner highlight ───────────────────────── */
.login-card::before,
.forgot-password-card::before,
.reset-password-card::before {
  content: '';
  display: block;
  position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px;
  pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.login-card,
.forgot-password-card,
.reset-password-card { position: relative; }

/* ── Thin XP "taskbar" hint at bottom ─────────────────────────── */
body::after {
  content: '';
  position: fixed; bottom: 0; left: 0; right: 0; height: 30px; z-index: 0;
  background: linear-gradient(180deg, #1f5bb4 0%, #3a7fce 30%, #2566c0 60%, #1a52a8 100%);
  border-top: 1px solid #0a3d82;
  box-shadow: 0 -1px 0 rgba(255,255,255,.2) inset;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .login-body,
  .forgot-password-body,
  .reset-password-body { padding: 14px 16px 12px !important; }
  .login-container,
  .forgot-password-container,
  .reset-password-container { max-width: 100%; }
}