/* Styles specific to the Login page */
/* File: public/assets/css/login.css */

:root {
  --brand-700: #26410E;
  --muted-600: #6C7797;
  --danger-600: #c62828;
  --success-600: #2e7d32;
}

.login-wrapper {
  padding-block: 4rem;
}

.login-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3rem;
  align-items: center;
}

@media screen and (max-width: 993px) {
  .login-grid { grid-template-columns: 1fr; }
}

.login-box {
  background: #ffffff;
  padding: 2.25rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(33,37,41,0.06);
}

.login-info .box h1 {
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
  color: #212121;
}

.login-info .box p {
  font-size: 1.125rem;
  color: #293C2A;
  margin-bottom: 1rem;
}

.login-benefits {
  margin-top: 1rem;
  list-style: none;
  padding: 0;
  color: var(--muted-600);
}
.login-benefits li { margin-bottom: 0.5rem; }

.login-box h2 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: #212121;
}

.login-box .input-group { margin-bottom: 1rem; }

.login-box label { 
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem; 
  font-weight: 600; 
  color: #212121; 
  margin-bottom: .5rem; 
}

.input-icon {
  width: 20px;
  height: 20px;
  color: #26410E;
  flex-shrink: 0;
}

.login-box input[type="email"],
.login-box input[type="password"],
.login-box textarea {
  border: 1px solid #D2D5DF;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  width: 100%;
  color: #212121;
  transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
}

.login-box input[type="email"]::placeholder,
.login-box input[type="password"]::placeholder { color: #9AADB5; }

.login-box input[type="email"]:focus,
.login-box input[type="password"]:focus,
.login-box textarea:focus {
  border-color: var(--brand-700);
  box-shadow: 0 6px 18px rgba(38,65,14,0.08);
}

.login-box input[type="checkbox"] { width: 16px; height: 16px; vertical-align: middle; margin-right: .5rem; }
.remember-label { display:flex; align-items:center; gap:8px; cursor:pointer; }

.login-box .btn-primary {
  display: inline-block;
  width: 100%;
  padding-block: 1rem;
  border-radius: 8px;
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
}
.login-box .btn-primary:hover { transform: translateY(-1px); }

.login-footer-links { text-align: center; margin-top: 1rem; }
.login-footer-links a { color: var(--brand-700); text-decoration: none; font-weight: 600; }
.login-footer-links a:hover { text-decoration: underline; }
.login-footer-links .separator { color: #666; margin: 0 .6rem; }

.login-box .alert { padding: 12px; border-radius: 6px; margin-bottom: 1rem; font-weight: 600; }
.login-box .alert-error { background: #fff1f0; color: var(--danger-600); border: 1px solid #f2b8b8; }
.login-box .alert-success { background: #e8f5e9; color: var(--success-600); border: 1px solid #c7e6d2; }

.login-test { margin-top: 1rem; background: #f5f5f5; padding: 12px; border-radius: 6px; font-size: 14px; color: #333; }
.login-test code { background: transparent; padding: 0 4px; color: var(--brand-700); font-weight: 700; }
.login-test .muted { margin-top: 6px; color: #666; font-size: 12px; }

@media screen and (max-width: 480px) {
  .login-grid { gap: 1.25rem; }
  .login-box { padding: 1.25rem; }
  .login-info .box h1 { font-size: 1.5rem; }
}