/* ==========================================================================
   Kitchen Expense System — Authentication Pages
   Shared by Login, Register, ForgotPassword, ResetPassword, SetPassword.
   Brand hex values are identical to wwwroot/css/site.css by design.
   ========================================================================== */

:root {
  --brand-primary: #0E519E;
  --brand-primary-dark: #0a3d78;
  --brand-primary-light: #1a6bc4;
  --brand-primary-rgb: 14, 81, 158;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .10), transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(255, 255, 255, .08), transparent 40%),
    linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  background-attachment: fixed;
}

.auth-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
  overflow: hidden;
  max-width: 440px;
  width: 100%;
}

.auth-header {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  padding: 2.25rem 2rem 1.85rem;
  text-align: center;
  position: relative;
}

.auth-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(255, 255, 255, .18);
}

.auth-header img {
  max-height: 60px;
  object-fit: contain;
  margin-bottom: .85rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

.auth-header h4 {
  color: #fff;
  font-weight: 700;
  letter-spacing: .1px;
  margin: 0 0 .15rem;
}

.auth-header p {
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  margin: 0;
}

.auth-body {
  padding: 2rem;
}

.auth-body h5 {
  font-weight: 700;
  color: #101828;
}

.auth-body .form-label {
  font-weight: 600;
  font-size: .875rem;
  color: #344054;
}

.auth-body .form-control,
.auth-body .form-select {
  border-radius: var(--radius-sm);
}

.auth-body .form-control:focus,
.auth-body .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .18);
}

.auth-body .input-group-text {
  background-color: #f8f9fa;
  border-color: #dee2e6;
  color: #667085;
}

.btn-login {
  background: var(--brand-primary);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: #fff;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.btn-login:hover {
  background: var(--brand-primary-dark);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(var(--brand-primary-rgb), .45);
}

.btn-login:active { transform: translateY(1px); }

.auth-body a.text-decoration-none {
  color: var(--brand-primary);
  font-weight: 500;
}

.auth-body a.text-decoration-none:hover {
  color: var(--brand-primary-dark);
}

.auth-footnote {
  text-align: center;
  font-size: .8rem;
  color: #98a2b3;
  margin-top: 1.25rem;
}

@media (max-width: 420px) {
  .auth-header { padding: 1.85rem 1.5rem 1.5rem; }
  .auth-body { padding: 1.5rem; }
}