/* ─── LOGIN SCREEN (from login.html design) ─────────── */
#login-screen {
  position: fixed; inset: 0; background: var(--surface-2);
  z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 28px 26px 22px;
  width: 100%; max-width: 420px;
  box-shadow: 0 8px 40px rgba(44,51,71,.12);
}
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.login-tagline { font-size: .8rem; color: var(--text-muted); margin-bottom: 26px; }
.login-card h2 { font-weight: 700; font-size: 1.3rem; margin-bottom: 4px; }
.form-label { font-size: .8rem; font-weight: 500; color: var(--text); margin-bottom: 5px; }
.form-control {
  border: 1.5px solid var(--border); border-radius: 9px;
  padding: 9px 13px; font-size: .875rem;
  font-family: 'Open Sans', sans-serif; color: var(--text);
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  border-color: var(--primary); box-shadow: none;
  outline: none; background: var(--surface); color: var(--text);
}
.input-group .form-control { border-right: none; border-radius: 9px 0 0 9px; }
.input-group .btn-outline-secondary {
  border: 1.5px solid var(--border); border-left: none;
  border-radius: 0 9px 9px 0; background: var(--surface);
  color: var(--text-muted); transition: background .15s;
}
.input-group .btn-outline-secondary:hover { background: var(--surface-2); }
/* Highlight the whole password box (input + show/hide button) while either has focus */
.input-group:focus-within .form-control,
.input-group:focus-within .btn-outline-secondary { border-color: var(--primary); }
.input-group .btn-outline-secondary:focus,
.input-group .btn-outline-secondary:active { box-shadow: none; background: var(--surface); color: var(--text-muted); }
.btn-primary-custom {
  background: var(--primary); color: #fff; border: none;
  border-radius: 9px; padding: 10px 20px;
  font-family: 'Open Sans', sans-serif; font-size: .88rem;
  font-weight: 600; cursor: pointer; width: 100%;
  transition: background .2s, box-shadow .2s;
}
.btn-primary-custom:hover { background: var(--primary-dark); box-shadow: 0 4px 16px rgba(59,111,212,.3); }
.btn-primary-custom:disabled { opacity: .7; cursor: wait; }
.login-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0; color: var(--text-muted); font-size: .76rem;
}
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 9px; border: 1.5px solid var(--border);
  border-radius: 9px; background: var(--surface);
  font-family: 'Open Sans', sans-serif; font-size: .875rem;
  font-weight: 500; color: var(--text); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.btn-google:hover { border-color: var(--primary-mid); }
.login-footer { text-align: center; margin-top: 20px; font-size: .78rem; color: var(--text-muted); }
.login-footer a { color: var(--primary); text-decoration: none; font-weight: 500; }
.login-error {
  display: none; font-size: .8rem; border-radius: 9px; padding: 9px 12px; margin-bottom: 14px;
  background: #fdecec; color: #b42318; border: 1px solid #f6c9c9;
}
.login-error.show { display: block; }

/* Bootstrap overrides */
.form-check-input { background-color: var(--surface); border-color: var(--border); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.login-logo-img { height: 40px; width: auto; display: block; }