/* Shared visual styles for student and teacher sign-in. */
body.auth-login-page.student-page {
  --auth-heading-size: clamp(2rem, 3vw, 2.25rem);
  --auth-copy-size: 1rem;
  --auth-control-size: 1.0625rem;
}

body.auth-login-page {
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-hover);
  --line: var(--color-border);
  --soft: var(--color-page);
  --danger: var(--color-danger);
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-page);
}

html body.auth-login-page :is(.login, .form-panel, .brand-panel),
html body.auth-login-page :is(.login, .form-panel, .brand-panel) :where(h1, h2, p, label, input, button, a, span) {
  font-family: var(--font-body) !important;
}

html body.auth-login-page :is(.login, .login-heading) h2 {
  color: var(--color-heading) !important;
  font-size: var(--auth-heading-size, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
}

html body.auth-login-page :is(.login, .login-heading) p,
html body.auth-login-page .support {
  color: var(--color-text-muted) !important;
  font-size: var(--auth-copy-size, 0.875rem) !important;
  font-weight: 400;
  line-height: 1.6;
}

html body.auth-login-page :is(.form-signin, #facultyLoginForm) label {
  color: var(--color-text) !important;
  font-size: var(--auth-copy-size, 0.875rem) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}

html body.auth-login-page :is(.form-signin, #facultyLoginForm) input:not([type="checkbox"]) {
  height: 50px;
  min-height: 50px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-page) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--auth-control-size, 1rem) !important;
  font-weight: 400;
  line-height: 1.5;
}

html body.auth-login-page :is(.form-signin, #facultyLoginForm) input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

html body.auth-login-page :is(.form-signin, #facultyLoginForm) input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
  background: var(--color-surface) !important;
}

html body.auth-login-page :is(.form-signin, #facultyLoginForm) input.invalid {
  border-color: var(--color-danger);
}

html body.auth-login-page :is(.form-signin, #facultyLoginForm) [type="submit"] {
  min-height: 50px;
  border-radius: 12px;
  color: var(--color-surface) !important;
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  font-size: var(--auth-control-size, 1rem) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  box-shadow: 0 8px 20px var(--color-primary-soft);
}

html body.auth-login-page :is(.form-signin, #facultyLoginForm) [type="submit"]:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

html body.auth-login-page :is(.login .forgot-link, .login .text-primary, .text-link) {
  color: var(--color-primary) !important;
  font-size: var(--auth-copy-size, 0.875rem) !important;
  font-weight: 600;
}

html body.auth-login-page :is(.login .form-check, .remember) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
}

html body.auth-login-page :is(.login .form-check, .remember) input[type="checkbox"] {
  position: static !important;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 0 !important;
  accent-color: var(--color-primary);
}

html body.auth-login-page :is(.form-signin, #facultyLoginForm) :is(.form-check-label, .remember) {
  margin: 0;
  padding: 0;
  color: var(--color-text-muted) !important;
  font-weight: 400 !important;
  cursor: pointer;
}

body.auth-login-page .brand-panel {
  background: linear-gradient(145deg, var(--color-dark-surface) 0%, #172d50 65%, #244775 100%);
}

body.auth-login-page .brand-mark { color: var(--color-primary); }
body.auth-login-page .form-panel {
  background: var(--color-surface);
}
body.auth-login-page .toggle-password:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}