/**
 * assets/css/auth.css
 * Centered card layout for login / register pages.
 * Mobile-friendly: full-bleed card on narrow viewports.
 */

.auth-body {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 55%, #051622 100%);
  min-height: 100vh;
  min-height: 100dvh;   /* dvh handles mobile browser chrome collapse */
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.auth-wrapper {
  width: 100%;
  padding: 16px;
}

.auth-card {
  max-width: 420px;
  margin: 0 auto;
  border-radius: 16px;
  border: none;
  overflow: hidden;
}
.auth-card-wide { max-width: 620px; }

.auth-brand {
  background-color: var(--brand-navy);
  color: #fff;
  padding: 24px 20px 16px;
}
.auth-brand i { font-size: 2.2rem; color: var(--brand-gold); }

/* ---- Very narrow phones: shrink typography + padding ---- */
@media (max-width: 480px) {
  .auth-wrapper { padding: 12px; }
  .auth-card { border-radius: 12px; }
  .auth-brand { padding: 20px 16px 12px; }
  .auth-brand i { font-size: 1.9rem; }
  .auth-brand .h4 { font-size: 1.1rem; }
  .auth-brand .small { font-size: .78rem; }
  .card-body { padding: 1rem; }
  .form-label { font-size: .9rem; }
}