/* Login, sign-up, password reset and the other public account pages (rendered in _Layout, which does not load
   dashboard.css): the same card, input and button language as the app, with a brand-coloured top edge. */

main[role="main"] .card {
  border: 1px solid color-mix(in srgb, var(--brand-text) 14%, var(--brand-border));
  border-top: 4px solid var(--brand-primary);
  border-radius: 12px;
  box-shadow: var(--brand-shadow-card);
}

main[role="main"] .card h1 {
  font-weight: 800;
}

main[role="main"] .form-label {
  font-size: 0.83rem;
  font-weight: 700;
}

main[role="main"] .form-control,
main[role="main"] .form-select {
  padding: 0.6rem 0.85rem;
  background-color: var(--brand-surface);
  border-color: var(--brand-border-strong);
  border-radius: 0.5rem;
}

main[role="main"] .form-control:focus,
main[role="main"] .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.18);
}

main[role="main"] .form-control.input-validation-error {
  border-color: var(--brand-danger);
  background-color: color-mix(in srgb, var(--brand-danger) 4%, var(--brand-surface));
}

main[role="main"] .field-validation-error {
  font-weight: 700;
}

main[role="main"] .validation-summary-errors {
  padding: 0.6rem 0.9rem;
  background: var(--brand-danger-tint);
  border: 1px solid color-mix(in srgb, var(--brand-danger) 30%, var(--brand-border));
  border-radius: 0.6rem;
  font-weight: 600;
}

main[role="main"] .validation-summary-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

main[role="main"] .btn-primary {
  padding: 0.6rem 1rem;
  font-weight: 800;
}

main[role="main"] .form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.navbar-brand {
  font-weight: 800;
  color: var(--brand-primary);
}