/* ===== Auth (Dark Blue Theme) ===== */

/* Page baseline (if this file is standalone on the page) */
html, body {
  margin: 0;
  padding: 0;
  background: #0b1220;           /* deep navy page bg */
  color: #e6f0ff;                /* light foreground */
  font-family: Arial, sans-serif;
}

/* Container for the authentication form */
.auth-container {
  background-color: #12243f;     /* card bg */
  border: 1px solid #1e293b;     /* subtle border */
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.55); /* deep shadow */
  text-align: center;
  max-width: 360px;
  margin: 48px auto;
}

/* Header text styling */
.auth-container h2 {
  color: #ffffff;
  font-size: 24px;
  margin: 0 0 18px;
  letter-spacing: 0.2px;
}

/* Inputs + button share base shape */
.auth-container input[type="email"],
.auth-container input[type="password"],
.auth-container .btn {
  width: 100%;
  padding: 12px 16px;
  margin: 10px 0;
  border-radius: 9999px;
  border: 1px solid #1e293b;    /* dark border */
  background-color: #0b1220;     /* input bg */
  color: #e6f0ff;                /* input fg */
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .06s ease;
  caret-color: #93c5fd;
}

/* Placeholder color for contrast */
.auth-container input::placeholder {
  color: #7b8aa8;
}

/* Focus ring */
.auth-container input[type="email"]:focus,
.auth-container input[type="password"]:focus {
  outline: none;
  border-color: #2563eb;          /* blue accent */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* Success and error border colors for validation */
.input-valid {
  border-color: #22c55e !important;                  /* green */
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
}
.input-error {
  border-color: #ef4444 !important;                  /* red */
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* Log In button */
.auth-container .btn {
  background-color: #1d4ed8;      /* primary blue */
  border: 1px solid #1e40af;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.auth-container .btn:hover {
  background-color: #2563eb;
  border-color: #1d4ed8;
}
.auth-container .btn:active {
  transform: translateY(1px);
  background-color: #1e40af;
  border-color: #1e3a8a;
}
.auth-container .btn:disabled {
  background-color: #0f172a;
  border-color: #0f172a;
  color: #7b8aa8;
  cursor: not-allowed;
}

/* Text and link styling */
.auth-container p {
  color: #c9d7ff;
  margin-top: 10px;
  font-size: 14px;
}
.auth-container a {
  color: #93c5fd;                 /* link blue */
  text-decoration: none;
}
.auth-container a:hover {
  text-decoration: underline;
}
/* --- Force dark-blue page background (load LAST) --- */
html, body {
  background: #0b1220 !important;   /* deep navy */
  color: #e6f0ff;
  min-height: 100%;
}

/* If any wrappers are setting a light bg, make them transparent */
#content,
main,
.page-wrap,
.content-container,
.wrapper,
.container {
  background: transparent !important;
}

/* Keep the card on-theme */
.auth-container {
  background-color: #12243f !important; /* card/navy */
  border-color: #1e293b !important;
}


/* Messages */
.success-message {
  color: #22c55e;                 /* green */
  font-weight: 700;
  margin: 10px 0;
  text-align: center;
  background: transparent;
  border: none;
  padding: 0;
}
.error-message {
  color: #ef4444;                 /* red */
  font-weight: 700;
  margin-top: 10px;
  text-align: center;
}

/* Small screens */
@media (max-width: 420px) {
  .auth-container {
    margin: 32px 16px;
    padding: 24px;
  }
  .auth-container h2 {
    font-size: 22px;
  }
}