/* Form-wide errors container */
ul.errorlist {
  color: #dc3545;  /* Better red than #ff0000 (Bootstrap danger color) */
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif; /* Modern system stack */
  font-weight: 600; /* Semi-bold for better readability */
  font-size: 0.875rem; /* 14px - smaller than body text */
  line-height: 1.5;
  padding-left: 1.25rem; /* Proper indentation */
  margin: 0.5rem 0;
  list-style-type: none; /* Remove bullets */
}

/* Individual error items */
ul.errorlist li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.25rem;
}

/* Error icon (optional) */
ul.errorlist li::before {
  content: "⚠️"; /* Or use SVG icon */
  position: absolute;
  left: 0;
  top: 0.1em;
}

/* Non-field errors (e.g., form.non_field_errors) */
ul.errorlist.nonfield {
  background-color: #f8d7da; /* Light red background */
  border-left: 3px solid #dc3545;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
}

/* Help text (for form fields) */
.helptext {
  display: block; /* Ensure it's on new line */
  color: #6c757d !important; /* Bootstrap's muted gray */
  font-size: 0.75rem; /* 12px */
  font-weight: 400;
  margin-top: 0.25rem;
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
  line-height: 1.4;
}

/* Contextual help for specific states */
input:valid + .helptext {
  color: #0d6efd !important; /* Green when valid (optional) */
}

input:invalid + .helptext {
  color: #6c757d !important; /* Keep muted when invalid */
}

.required-label:after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

.required label:after {
    content: " *";
    color: red;
}

/* Style for the error message */
/* Style required fields */
.required label:after {
    content: " *";
    color: #dc3545;
}

/* Style required inputs */
input:required, select:required {
    border-left: 3px solid #dc3545;
}