/* static/css/style.css (or within a <style> tag in your HTML) */

/* Base AG Grid row styling (your theme will provide this, e.g., .ag-theme-legacy .ag-row) */
/* You typically want your custom rules to override, hence the !important */

/* 1. Rule for Recommended Status (Lowest visual priority if conflicts) */
.ag-row.recommended-status-row {
    background-color: #fffacd !important; /* A light yellow/lemon chiffon */
    /* Optional: Add a border or slightly bolder text for attention */
    /* border-left: 3px solid #f0ad4e !important; */
}

/* 2. Rule for Hidden Products (Medium visual priority) */
.ag-row.hidden-row {
    background-color: #f0f0f0 !important; /* Light grey */
    color: #888 !important; /* Dimmed text */
    font-style: italic;
}

/* 3. Rule for Out of Stock Products (Highest visual priority - typically last in CSS to win conflicts) */
.ag-row.not-in-stock-row {
    background-color: #ffe0e0 !important; /* A light red background */
    color: #cc0000 !important; /* Darker red text */
}

/* You can also define styles for individual cells if needed, e.g.: */
.ag-row.not-in-stock-row .ag-cell-value[col-id="in_stock"] {
    font-weight: bold;
}