/* ================================
   AUTH (Login/Register) LAYOUT
   ================================ */

body.mmu-auth{
  min-height: 100vh;
}

/* =================================
   Fixed full-width top header strip
   ================================= */
.auth-topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background: #fff;
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
}

/* Gradient accent line (header border) */
.auth-topbar::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mmu-sky), var(--mmu-forest), var(--mmu-gold));
}

.auth-topbar .top-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 14px 0; /* spacing inside the strip */
}

/* Brand text on the left */
.top-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--mmu-black);
}

.top-brand i{
  color: var(--mmu-gold); /* ✅ yellow icon */
  font-size: 1.15rem;
}

/* Main shell (push content below fixed header) */
.auth-shell{
  min-height: 100vh;
  display:flex;
  align-items:center;

  padding: 120px 0 50px; /* ✅ accounts for fixed header height */
}

/* Left welcome text */
.auth-left h1{
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mmu-black);
}

.auth-left p{
  color: rgba(17,24,39,.78);
  font-size: 1.03rem;
  line-height: 1.6;
  max-width: 60ch;
}

/* ================================
   Auth card (Logo + form)
   ================================ */

.auth-card{ padding: 0; }

/* White rounded card */
.mmu-card.auth-card{
  background: #fff !important;
  border-radius: 18px !important;
  overflow: hidden;
}

/* Stronger text */
.mmu-card.auth-card,
.mmu-card.auth-card *{
  color: var(--mmu-black);
}

.mmu-card.auth-card h2,
.mmu-card.auth-card .h4{
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mmu-black) !important;
}

.mmu-card.auth-card .text-muted{
  color: rgba(17,24,39,.72) !important;
}

/* Logo circle */
.logo-wrap{
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 12px;
}

/* Forms */
.form-label{
  font-weight: 700;
  color: rgba(17,24,39,.90);
}

.input-group-text{
  background: #fff !important;
  border-right: 0;
  border-color: rgba(17,24,39,.16) !important;
}

.input-group-text i{ color: var(--mmu-sky); }

.form-control{
  border-left: 0;
  border-color: rgba(17,24,39,.16) !important;
  color: var(--mmu-black) !important;
  font-weight: 600;
}

.form-control::placeholder{
  color: rgba(17,24,39,.45);
  font-weight: 500;
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control{
  border-color: rgba(29,161,210,.55) !important;
}

.form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(29,161,210,.18);
}

/* Login button: white + bold */
.mmu-card.auth-card .btn.btn-primary{
  color: #fff !important;
  font-weight: 900 !important;
}

/* Footer */
.auth-footer{ margin-top: 14px; }
.auth-footer.dark{ color: rgba(17,24,39,.70); }

/* Version = MMU yellow */
.version-text{
  color: var(--mmu-gold) !important;
  font-weight: 900;
}