Modern UI – How to Highlight Entire Row in Red on Sales Order (SO301000) using GetRowCss

I am working on a customization in Acumatica 2025 R2 using the Modern UI framework for the Sales Order screen (SO301000).

I want to highlight the entire row in red whenever the CuryUnitPrice does not match my custom field UsrEDIPOPrice (which is defined in a SOLine extension).

I have implemented a TypeScript file and an SCSS file. However, the row styling is not being applied.

TypeScript Code (SO301000.ts)

import {
    RowCssHandlerArgs,
    handleEvent,
    CustomEventType
} from "client-controls";

import "./SO301000_CYBEDIWebService.scss";

export class SOOrderEntryExt {

    @handleEvent(CustomEventType.GetRowCss, { view: "Transactions" })
    getTransactionsRowCss(args: RowCssHandlerArgs) {

        const row = args?.selector?.row;
        if (!row) return "";

        // Unit Price
        const curyUnitPrice = row.CuryUnitPrice?.value;

        // 🔥 Equivalent of GetExtension<SOLineExt>()
        const usrEdiPoPrice = row?.extensions?.SOLineExt?.UsrEDIPOPrice?.value;

        // Apply red styling if mismatch
        if (
            curyUnitPrice != null &&
            usrEdiPoPrice != null &&
            curyUnitPrice !== usrEdiPoPrice
        ) {
            return "red-row";
        }

        return "";
    }
}

SCSS Code (SO301000_CYBWebService.scss)

.red-row {
    // Ensure styling persists when row is selected/focused
    --qp-highlight-color: rgba(255, 0, 0, 0.15) !important;
    --qp-highlight-hover-color: rgba(255, 0, 0, 0.25) !important;

    & > td {
        background-color: rgba(255, 0, 0, 0.15) !important;
    }

    & > td,
    & > td > span,
    & > td > .px-control,
    & > td > input {
        color: #ff0000 !important;
        font-weight: bold !important;
    }
}