/* 🌐 Basic layout */
body {
  background-color: #f5f7fb;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><text x='20' y='120' transform='rotate(-30 35 120)' fill='gray' fill-opacity='0.08' font-size='36' font-family='Arial'>e-Census</text></svg>");
  background-repeat: repeat;
  background-size: 350px 150px;
}

html, body {
  min-height: 100%;
  overflow-y: auto;
}

.login-container {
  margin: 50px auto;
  padding: 2rem;
}


/* 📦 Login card */
.login-container {
  max-width: 450px;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* 🖼️ Logo size */
.login-logo img {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

/* ✍️ Headings */
h2 {
  color: #131c7a;
  font-weight: 600;
}

/* 📩 Alerts */
.alert {
  border-radius: 8px;
  font-size: 0.95rem;
}

/* 🔑 Inputs */
.form-control:focus {
  border-color: #3949ab;
  box-shadow: 0 0 0 0.2rem rgba(57, 73, 171, 0.25);
}

/* 🔘 Buttons */
.btn-primary {
  font-weight: 600;
  border-radius: 8px;
}

.btn-primary:hover {
  background-color: #303f9f;
}

/* 📱 Responsive tweak */
@media (max-width: 576px) {
  .login-container {
    padding: 1.5rem !important;
  }
}