/* Base */
html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Background image layer */
.bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* subtle scale so it feels “cinematic” */
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
  z-index: 0;
}

/* Dark overlay to make glass readable */
.bg-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(
      circle at 30% 20%,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.55) 55%,
      rgba(0, 0, 0, 0.70) 100%
  );
  z-index: 1;
}

/* Centering container */
.login-stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

/* Glass card */
.glass-card {
  width: 100%;
  max-width: 460px;
  padding: 34px 34px 28px;
  border-radius: 22px;

  /* Glass */
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.40);

  /* Blur */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  color: rgba(255, 255, 255, 0.92);
}

/* Headings */
.glass-card h2 {
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.95);
}

.subtext {
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* Logo (your sizing, works fine here too) */
.logo-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Inputs styled for glass */
.glass-input {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  color: rgba(255, 255, 255, 0.95);
}

.form-floating > label {
  color: rgba(255, 255, 255, 0.75);
}

/* Override Bootstrap's ::after that creates the white rectangle */
.form-floating > .glass-input:focus ~ label::after,
.form-floating > .glass-input:not(:placeholder-shown) ~ label::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 100%;
  content: "";
  background-color: transparent !important;
}

/* Autofill fix (Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.12) inset;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Button */
.glass-btn {
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
}

/* Error */
.error-msg {
  background: rgba(220, 53, 69, 0.22);
  border: 1px solid rgba(220, 53, 69, 0.35);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  margin-bottom: 16px;
}

/* Footer */
.login-footer {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.70);
}

/* If browser doesn't support backdrop-filter, still looks decent */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .glass-card {
    background: rgba(20, 20, 20, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* ---------- Mobile polish ---------- */
@media (max-width: 576px) {
  /* Reduce padding so card fits nicely */
  .login-stage {
    padding: 16px;
    align-items: flex-start; /* avoids feeling "stuck" under the keyboard */
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .glass-card {
    max-width: 100%;
    padding: 22px 18px 18px;
    border-radius: 18px;
  }

  /* Slightly smaller headings so they don’t wrap weird */
  .glass-card h2 {
    font-size: 1.6rem;
  }

  .subtext {
    font-size: 0.95rem;
  }

  /* Bigger tap targets */
  .glass-input {
    border-radius: 14px;
  }

  .btn.glass-btn {
    padding: 14px 14px;
    border-radius: 14px;
  }

  /* Keep logo from dominating vertical space */
  .logo-img {
    max-width: 240px;
  }
}

/* Prevent iOS zoom on focus (inputs must be >= 16px) */
@media (max-width: 576px) {
  input, button, select, textarea {
    font-size: 16px !important;
  }
}

/* Better keyboard/viewport behavior on modern mobile browsers */
@supports (height: 100svh) {
  .login-stage {
    min-height: 100svh;
  }
}
@media (max-width: 576px) {
  .bg {
    filter: saturate(1.0) contrast(1.05);
  }

  .bg-overlay {
    background: radial-gradient(
      circle at 30% 20%,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.68) 70%,
      rgba(0, 0, 0, 0.78) 100%
    );
  }
}