/*
  Styles for the login page.  
  By separating layout and color rules into a CSS file we keep the React
  component free of long inline style objects and make it easier to
  customise the look and feel. Adjust any values (margins, colours,
  heights) as needed to match your design.
*/

.login-container {
  min-height: 100vh;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-wrapper {
  width: 100%;
  max-width: 28rem; /* 448px */
}

.login-card {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.login-logo {
  height: 3rem; /* adjust to the desired logo height */
  width: auto;
  display: block;
}

.login-subtitle {
  color: #1f2937;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: bold;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.login-link {
  color: #2D9CDB;
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

.login-link:hover {
  text-decoration: underline;
}

.login-footer {
  text-align: center;
  color: #6b7280;
  margin-top: 2rem;
}

.form-group {
  width: 100%;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #374151;
}

.form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: #2D9CDB;
}


.btn-primary {
  width: 100%;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  background-color: #2D9CDB;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #2589c4;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}