/* /css/auth.css
   Mobile-first, scoped styles for auth pages
   Root selector #ax-auth-root prevents leaking to other pages.
*/

#ax-auth-root { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
#ax-auth-root * { box-sizing: border-box; }

/* Page layout */
#ax-auth-root {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 14px 92px; /* bottom space for mobile nav */
  background: linear-gradient(180deg,#f7fbfe 0%, #f2f7fb 100%);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color: #0b1220;
}

/* center wrapper */
#ax-auth-root .auth-wrap {
  width: 100%;
  max-width: 420px;
}

/* logo */
.auth-logo { display:block; height:56px; margin: 6px auto 12px; object-fit:contain; }

/* card */
.card-custom {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 16px 40px rgba(8,20,40,0.06);
  border: 1px solid rgba(11,17,30,0.04);
}

/* heading */
.auth-heading {
  margin: 2px 0 12px;
  font-size: 20px;
  font-weight: 800;
  text-align:center;
  letter-spacing: -0.2px;
}

/* alert */
.alert { padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size:14px; }
.alert-danger { background: #fff6f6; color: #7a1916; border: 1px solid rgba(122,25,22,0.08); box-shadow: 0 8px 18px rgba(122,25,22,0.04); }

/* fields */
.field { margin-bottom: 16px; }
.form-control {
  width:100%;
  height:48px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e6edf5;
  background: #fbfdff;
  font-size: 15px;
  color: #0b1220;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, transform .06s ease;
}
.form-control::placeholder { color: #9aa0a6; }
.form-control:focus {
  border-color: #88b9ff;
  box-shadow: 0 8px 26px rgba(45,118,255,0.08);
  transform: translateY(-0.5px);
}

/* actions */
.actions { margin-top: 6px; margin-bottom: 6px; }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  min-height:48px;
  border-radius: 12px;
  font-weight:800;
  font-size:15px;
  border:0;
  cursor:pointer;
}
.btn-custom {
  background: linear-gradient(180deg,#0b1220,#111827);
  color:#fff;
  box-shadow: 0 12px 30px rgba(17,18,25,0.12);
  width:100%;
}

/* helper row (links) */
.helper-row { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; }
.small-link { color:#0b73ff; text-decoration:none; font-weight:600; font-size:14px; }
.small-link:hover { text-decoration:underline; }

/* small text */
.muted { color:#6b7280; font-size:13px; text-align:center; margin-top:12px; }

/* sr-only for labels (accessibility) */
.sr-only { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* Responsive tweaks for larger screens */
@media (min-width: 760px) {
  #ax-auth-root { padding: 40px 12px 80px; }
  .card-custom { padding:28px; }
  .auth-wrap { max-width:520px; }
  .auth-logo { height:64px; margin-bottom:18px; }
  .form-control { height:52px; font-size:16px; }
  .btn { min-height:52px; font-size:16px; }
}

/* make sure footer / existing bottom nav doesn't overlap inputs on tiny screens */
@media (max-height:600px) {
  #ax-auth-root { padding-bottom:140px; }
}

/* focus-visible for keyboard users */
.form-control:focus-visible, .btn:focus-visible {
  outline: 3px solid rgba(11,115,255,0.14);
  outline-offset: 3px;
}