/* New login styles for Bootstrap 5 layout with subtle texture background */
:root{
  --logo-blue: #0b61f2;
  --logo-gold: #f6b700;
  --card-bg: #ffffff;
  --side-bg: linear-gradient(180deg, #0b61f2 0%, #254e9c 100%);
}

body{
  font-family: "Lato", sans-serif;
  background-color: #f2f6fb; /* light background color */
  /* subtle repeating SVG texture overlay (data URI) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><rect width='20' height='20' fill='%23f2f6fb'/><circle cx='2' cy='2' r='0.8' fill='%23e9eef8'/></svg>");
  background-repeat: repeat;
  background-size: 20px 20px;
  height:100vh;
}

.login-page{
  width:100%;
  padding:2rem;
}

.login-card{
  max-width:1100px;
  width:100%;
  border-radius: .65rem;
  overflow:hidden;
  background:var(--card-bg);
  box-shadow: none; /* remove shadow to leave flat texture look */
}

/* Left side now uses a responsive background image and gradient overlay */
.login-side{
  /* Use relative path from this CSS file (wwwroot/css) to wwwroot/Images */
  background: linear-gradient(180deg, rgba(11,97,242,0.45), rgba(37,78,156,0.55)), url('../Images/login-left.png');
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #fff;
  min-height: 480px;
  /* Fallback color to help debugging if image not found */
  background-color: rgba(11,97,242,0.35);
}

.logo-container{height:160px; display:flex; align-items:center; justify-content:center;}
.login-side .logo{max-width:160px}

.card-body{padding:2rem}

.form-label{font-weight:600}

.btn-primary{background-image:linear-gradient(90deg,var(--logo-blue),#254e9c);border:none}

/* small screens adjust */
@media (max-width:767px){
  .login-card{box-shadow:none;border-radius:.25rem}
  .login-side{display:none}
  .card-body{padding:1.25rem}
}