/* =======================================
   AUTHENTICATION STYLING (PRODUCTION-READY)
   Dark theme with lifted card and clear inputs
======================================= */

/* BODY */
.auth-body {
  position: fixed;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: none !important;
  background: linear-gradient(135deg, #0C0F1A, #020617) !important;
  font-family: 'Segoe UI', sans-serif;
  overflow: hidden;
}

[class*="overlay"],
[class*="backdrop"] {
  display: none !important;
}

/* CARD */
.auth-card {
  position: relative;
  z-index: 1;
  width: 360px;
  padding: 35px 30px;
  background: rgba(15, 18, 35, 0.95); /* slightly lighter than body */
  border-radius: 12px;
  border: 1px solid rgba(0,255,245,0.1);
  box-shadow: 0 15px 40px rgba(0,255,245,0.2);
  color: #fff;
  backdrop-filter: blur(4px); /* subtle glass effect */
}

/* CARD HEADER */
.auth-card h3 {
  font-weight: 600;
  color: #00FFF5; /* cyan accent */
}

.auth-card p {
  color: #fff !important; /* lighter for subtitle */
}

/* FORM INPUTS */
.auth-card .form-control {
  background: #101224; /* darker but readable */
  border: 1px solid rgba(0,255,245,0.2);
  color: #fff;
  padding: 10px 12px;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

.auth-card .form-control::placeholder {
  color: #666;
}

.auth-card .form-control:focus {
  border-color: #00FFF5;
  box-shadow: 0 0 8px rgba(0,255,245,0.5);
  background: #121533;
  color: #fff;
  outline: none;
}

/* BUTTON */
.auth-card .btn {
  background-color: #00FFF5;
  color: #0C0F1A;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

.auth-card .btn:hover {
  background-color: #00d6cc;
  color: #000;
  box-shadow: 0 5px 15px rgba(0,255,245,0.3);
}

/* LINKS */
.auth-card a {
  color: #00FFF5;
  text-decoration: none;
  font-weight: 500;
}

.auth-card a:hover {
  text-decoration: underline;
  color: #00d6cc;
}

/* FORM FOOTER LINKS */
.auth-card .d-flex a {
  font-size: 0.9rem;
}

/* ERROR MESSAGES */
#login-error {
  font-size: 0.9rem;
  color: #FF6B6B; /* red for errors */
}

/* RESPONSIVE */
@media (max-width: 400px) {
  .auth-card {
    width: 90%;
    padding: 25px 20px;
  }
}