/* Login page: index background white, form with stylish green gradient */
:root {
  --form-green-1: #16a34a; /* emerald-600 */
  --form-green-2: #34d399; /* emerald-400 */
  --form-text-on-green: #052e20; /* dark green for contrast */
  --card-bg-fallback: #e8fff3;
}

/* Keep the layout centered vertically + horizontally */
.main-content {
  min-height: calc(100vh - 56px); /* account for header */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;

  /* Index background must be white */
  background: #ffffff;
}

/* Wrapper that centers the login card */
.login-page {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Form container should be ~50% of viewport width */
.login-container {
  width: 50vw;
  max-width: 700px;
  min-width: 320px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

/* Stylish green form background + subtle lift */
.login-card {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;

  /* Green gradient */
  background: linear-gradient(135deg, var(--form-green-2) 0%, var(--form-green-1) 100%);
  color: var(--form-text-on-green);
  border: 1px solid rgba(6,95,70,0.12);

  /* subtle shadow */
  box-shadow: 0 14px 34px rgba(6, 60, 40, 0.12);

  /* fallback for older browsers */
  background-color: var(--card-bg-fallback);
  -webkit-font-smoothing: antialiased;
}

/* Inside card: use a white inner panel for inputs so they remain readable */
.login-card .card-body {
  padding: 1.75rem;
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  color: #0f1720; /* neutral text for inputs/labels */
}

/* Title inside the inner panel */
.login-card .card-title {
  color: var(--form-text-on-green);
  font-weight: 700;
}

/* Inputs: keep white background for readability */
.login-card .form-control {
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(16,24,40,0.08);
  background: #fff;
  color: #0b1720;
  transition: box-shadow .14s ease, border-color .14s ease, transform .12s ease;
}

/* Focus state for inputs */
.login-card .form-control:focus {
  outline: none;
  border-color: rgba(20,120,87,0.9);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.08);
  transform: translateY(-1px);
}

/* Buttons: primary uses dark green to complement gradient */
.btn-primary {
  border-radius: 8px;
  padding: 0.55rem 1rem;
  background-image: linear-gradient(180deg, rgba(6,95,70,0.98), rgba(2,75,50,0.98));
  border: none;
  color: #fff;
  box-shadow: 0 8px 22px rgba(2,75,50,0.14);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .7; cursor: progress; }

/* Keep the Cancel button readable on white inner panel */
.btn-outline-secondary {
  border-radius: 8px;
}

/* Logo in login form */
.login-logo {
  max-width: 180px;
  width: 35%;
  height: auto;
  display: inline-block;
  object-fit: contain;
}

/* Slight spacing tweak if logo is large */
.login-card .card-body .text-center { margin-bottom: 0.5rem; }

/* Top row above register form: left contact, right support */
.register-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 1rem;
  gap: 1rem;
  box-sizing: border-box;
}

/* Contact (left) */
.register-top .contact {
  text-align: left;
  font-size: 0.95rem;
  color: #6b7280; /* muted */
  line-height: 1.2;
}

/* Support (right) */
.register-top .support a {
  color: #0d6efd;
  font-weight: 600;
  text-decoration: none;
}

/* Small screens: stack and center */
@media (max-width: 576px) {
  .register-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .register-top .contact { text-align: center; }
}

/* Responsive fallbacks: smaller widths on narrow screens */
@media (max-width: 960px) {
  .login-container { width: 80vw; max-width: 720px; min-width: auto; }
}
@media (max-width: 576px) {
  .login-container { width: 94vw; padding: 0 0.5rem; }
  .login-card .card-body { padding: 1rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .login-card .form-control,
  .btn-primary { transition: none; }
}