/*
 * Required-field asterisk colour — project-wide.
 * Loaded from every layout so any `<label>* / .req-star / etc.` renders red.
 *
 * Covers the asterisk patterns used across this codebase:
 *   <span class="req-star">*</span>
 *   <span class="sd-required">*</span>
 *   <span class="required-star">*</span>
 *   <span class="required-mark">*</span>
 *   <span class="req">*</span>
 *   <span class="text-danger">*</span>     (Bootstrap)
 *   <span class="text-red-500">*</span>    (Tailwind)
 *   <span style="color:...">*</span>       (inline — already styled)
 *
 * Plus a generic catch for unstyled `<span>*</span>` directly inside a label.
 *
 * `!important` is used so this wins over any later utility CSS or theme that
 * sets `color` on the same elements. The font weight bump makes the asterisk
 * read as a glyph at small label sizes.
 */

.req-star,
.sd-required,
.required-star,
.required-mark,
label .req,
label .text-danger,
label .text-red-500,
.form-label .text-danger,
.form-label .text-red-500 {
    color: #dc2626 !important;
    font-weight: 700;
}

/* Unstyled `<span>*</span>` directly inside a <label> — applies via :has() in
   modern browsers. Older browsers fall back to the explicit-class rules above. */
label > span:not([class]):not([style]) {
    color: #dc2626;
    font-weight: 700;
}