.form-label[for]:has(+ input[required]),
.form-label[for]:has(+ select[required]),
.form-label[for]:has(+ textarea[required]),
.form-label[for]:has(+ .form-control[required]),
.form-label[for]:has(+ .form-select[required]),
.form-label[for]:has(+ .input-group input[required]) {
    position: relative;
}

    .form-label[for]:has(+ input[required])::after,
    .form-label[for]:has(+ select[required])::after,
    .form-label[for]:has(+ textarea[required])::after,
    .form-label[for]:has(+ .form-control[required])::after,
    .form-label[for]:has(+ .form-select[required])::after,
    .form-label[for]:has(+ .input-group input[required])::after {
        content: "*";
        position: relative;
        color: #f44336; /* Material red color */
        margin-left: 4px;
        font-weight: bold;
    }

/* Style the required input fields themselves */
input[required],
select[required],
textarea[required],
.form-control[required],
.form-select[required] {
    border-left: 3px solid #f44336 !important; /* Red left border for required fields */
}

    /* Style for validation error states */
    input[required].is-invalid,
    select[required].is-invalid,
    textarea[required].is-invalid,
    .form-control[required].is-invalid,
    .form-select[required].is-invalid {
        border-color: #f44336;
        box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25);
    }

/* Add a "Required" tooltip on hover */
.form-label[for]:has(+ input[required]):hover::before,
.form-label[for]:has(+ select[required]):hover::before,
.form-label[for]:has(+ textarea[required]):hover::before,
.form-label[for]:has(+ .form-control[required]):hover::before,
.form-label[for]:has(+ .form-select[required]):hover::before,
.form-label[for]:has(+ .input-group input[required]):hover::before {
    content: "Required";
    position: absolute;
    background-color: #424242;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    top: -20px;
    left: 0;
    z-index: 1000;
}

/* For older browsers that don't support :has() we'll need a fallback approach */
.required-field::after {
    content: "*";
    color: #f44336;
    margin-left: 4px;
    font-weight: bold;
}