/* ============================================================================
 * CleaningRecommendations re-skin — scoped to body.page-cleaning-recommendations
 *   Page: CleaningRecommendations.aspx hosting
 *         DesktopModules/Milbros/CleaningRecommendations.ascx
 *   Figma: ISZ58jrGcp1LwMEJeeG00Q / 2217:9693 (From/To Recommendations tab)
 *          (Water White Standard tab: derived re-skin sharing same token palette)
 *
 * Strategy: the .ascx markup stays intact. Add class="q88-card" to the
 * UpdatePanel (done in markup). Hide legacy chrome rows that aren't in Figma
 * (FROM/TO orange-green strips, GrayStrip 4px gradient lines). Restyle the
 * legacy ContentTabMenu blue strip as the Figma tabs strip. Style the legacy
 * commodity callBack divs as the From/To panels via :nth-child + ::before.
 * Rebuild the recommendations table rows as stacked sub-cards via CSS.
 *
 * Tokens re-derived from get_variable_defs on 2217:9693 — see
 * docs/figma/cleaning-recommendations/pixel-inventory.md for the source matrix.
 * ============================================================================ */

body.page-cleaning-recommendations {
    /* === Card chrome (Figma 2217:9704) === */
    --cr-card-bg:        #ffffff;          /* defs[base/card] */
    --cr-card-border:    #e2e8f0;          /* defs[base/border] */
    --cr-card-radius:    12px;             /* defs[border-radius/rounded-xl]=12 */
    --cr-card-shadow:    0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
    --cr-card-pad-x:     24px;             /* defs[spacing/6]=24 (slot horizontal padding) */
    --cr-card-pad-y:     24px;             /* py-6 */
    --cr-card-gap:       24px;             /* root flex-col gap-6 */
    --cr-card-margin-y:  24px;
    --cr-card-margin-x:  48px;             /* Figma Frame 3 p-12 page padding */

    /* === From/To panel (defs[2217:9703 panels]) === */
    --cr-panel-bg:       #f1f5f9;          /* defs[base/muted] */
    --cr-panel-border:   #e2e8f0;          /* defs[base/border] */
    --cr-panel-radius:   6px;              /* defs[border-radius/rounded-sm]=6 */
    --cr-panel-pad:      16px;             /* defs[spacing/4]=16 */
    --cr-panel-gap:      16px;             /* flex-col gap-4 inside */
    --cr-panels-row-gap: 20px;             /* defs[spacing/5]=20 (between From/To) */

    /* === Tabs strip (defs[119:11851]) === */
    --cr-tabs-bg:        #f1f5f9;          /* defs[base/muted] */
    --cr-tabs-radius:    10px;             /* defs[border-radius/rounded-lg]=10 */
    --cr-tabs-pad:       3px;              /* tabs root padding */
    --cr-tabs-h:         36px;             /* defs[height/h-9]=36 */
    --cr-tabs-w:         533px;            /* fixed in Figma */
    --cr-tab-bg:         transparent;
    --cr-tab-bg-on:      #ffffff;          /* defs[custom/background-dark:input/30] */
    --cr-tab-radius:     8px;              /* defs[border-radius/rounded-md]=8 */
    --cr-tab-text:       #0f172a;          /* defs[base/foreground] */
    --cr-tab-shadow-on:  0 1px 2px 0 rgba(0,0,0,.10);

    /* === Recommendation sub-cards (defs[123:9083]) === */
    --cr-reco-bg:        #f8fafc;          /* defs[colors/card-foreground-dark] (slate-50) */
    --cr-reco-radius:    8px;              /* rounded-md */
    --cr-reco-px:        14px;             /* defs[spacing/3-5]=14 */
    --cr-reco-py:        12px;             /* defs[spacing/3]=12 */
    --cr-reco-gap:       12px;             /* defs[spacing/3]=12 container gap */

    /* === Text === */
    --cr-text-color:     #000000;          /* defs[tailwind/base/black] */
    --cr-title-size:     18px;             /* defs[text/lg/font-size] */
    --cr-text-base-size: 16px;             /* defs[text/base/font-size] */
    --cr-text-base-lh:   24px;             /* defs[text/base/line-height] */
    --cr-text-sm-size:   14px;             /* defs[text/sm/font-size] */
    --cr-text-sm-lh:     20px;             /* defs[text/sm/line-height] */
    --cr-muted-text:     #475569;          /* defs[base/muted-foreground] */

    /* === Page-pinned brand: Figma's base/primary=#0d9488 (teal-600). Milbros
       portal's var(--brand-primary) resolves to slate-blue elsewhere; pin
       here so inline links match design. === */
    --cr-link-color:     var(--text-link);
    --cr-link-hover:     var(--link-hover);
}

/* =====================================================================
 * 1) PAGE CHROME — release legacy ContentPane width + paint card
 * ===================================================================== */
/* The legacy MainTableContent / ContentPane / ContentPaneBody chain
   width-constrains every page. Release inside this scope so the card
   can flex to the available content area (1664px on a 1920 viewport
   with the 256-wide Milbros sidebar). */
body.page-cleaning-recommendations .ContentPane,
body.page-cleaning-recommendations .ContentPaneBody,
body.page-cleaning-recommendations .MainTableContent {
    width: 100% !important;
    max-width: none !important;
}

/* Card chrome on the UpdatePanel (class="q88-card" via markup).
   Override the shared .q88-card defaults to match Figma's rounded-xl=12. */
body.page-cleaning-recommendations #upFromToCleaning.q88-card,
body.page-cleaning-recommendations #upFromToCleaning {
    background: var(--cr-card-bg);
    border: 1px solid var(--cr-card-border);
    border-radius: var(--cr-card-radius);
    box-shadow: var(--cr-card-shadow);
    padding: var(--cr-card-pad-y) 0;
    margin: var(--cr-card-margin-y) var(--cr-card-margin-x);
    width: calc(100% - 2 * var(--cr-card-margin-x));
    max-width: none;
    box-sizing: border-box;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--cr-text-color);
    /* Defeat inherited text-align:-webkit-center from .modContainerStd / DNN
       chrome that would auto-center every block child (incl. the tabs strip). */
    text-align: left !important;
}

/* Disable the legacy Disclaimer/Back footer table chrome — kept functional,
   restyle as a muted card-footer aligned to the card margins.
   NOTE: the table is NOT a direct child of <form> — it renders nested inside
   the DNN layout table (td > tr#ctl00_trContentRow), so the original
   `form > table[...]` selectors matched ZERO elements and the legacy grey
   #F8F8F8 strip kept painting outside the card (QEN-8801 feedback:
   "disclaimer outside the border with grey background"). Match on the
   inline style attribute alone — this is the only #F8F8F8 table on the
   page (CleaningRecommendations.ascx:543). */
body.page-cleaning-recommendations table[width="975"][style*="height:34px"],
body.page-cleaning-recommendations table[style*="background-color: #F8F8F8"] {
    width: calc(100% - 2 * var(--cr-card-margin-x)) !important;
    max-width: none !important;
    margin: 0 var(--cr-card-margin-x) 32px var(--cr-card-margin-x) !important;
    background: transparent !important;
    height: auto !important;
    border-top: 1px solid var(--cr-card-border);
    padding-top: 16px;
}
body.page-cleaning-recommendations a#lnkDisclaimer {
    color: var(--cr-muted-text) !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    text-decoration: underline;
    padding-left: 0 !important;
}
/* Back button: render as shadcn 'secondary' outlined button. Selector by ID
   suffix (form-renders ASP.NET nested controls; can't rely on parent table
   style attribute matching). */
body.page-cleaning-recommendations a.LinkButton[id$="_lbCancelRecm"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px !important;
    border: 1px solid var(--cr-card-border) !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: var(--cr-text-color) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
body.page-cleaning-recommendations a.LinkButton[id$="_lbCancelRecm"] > ins,
body.page-cleaning-recommendations a.LinkButton[id$="_lbCancelRecm"] img {
    display: none !important;
}
body.page-cleaning-recommendations a.LinkButton[id$="_lbCancelRecm"] span,
body.page-cleaning-recommendations a.LinkButton[id$="_lbCancelRecm"] label {
    color: var(--cr-text-color) !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
}

/* =====================================================================
 * 2) HEADER TABLE — title row + From/To panels (re-purposed callBack row)
 * ===================================================================== */
/* The legacy 975px outer table at the top of #upFromToCleaning holds 4 rows:
     row 1: trTitle — PageTitle + (empty td) + ActionsMenu
     row 2: FROM/TO orange-green pills
     row 3: GrayStrip 4px gradient lines
     row 4: callBackDivFromHdr / ibSwapHdr / callBackDivToHdr
   Strategy: keep row 1 (re-skin), hide rows 2 + 3, re-purpose row 4 as the
   From/To panels (matches Figma 2217:9703 Card Content). */
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type {
    width: 100% !important;
    max-width: none !important;
    table-layout: auto;
    margin: 0 !important;
    padding: 0;
    border-collapse: collapse;
    background: transparent !important;
}
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type > tbody > tr {
    background: transparent !important;
}

/* --- Row 1: Title + Actions --- */
body.page-cleaning-recommendations [id$="_trTitle"] > td {
    padding: 0 var(--cr-card-pad-x) !important;
    height: auto !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: 0 !important;
}
body.page-cleaning-recommendations td.PageTitle,
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_tdTitle {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600 !important;
    font-size: var(--cr-title-size) !important;
    line-height: 1 !important;
    color: var(--cr-text-color) !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding-right: 0 !important;
    width: auto;
}
/* Hide the empty spacer td between title and actions */
body.page-cleaning-recommendations [id$="_trTitle"] > td:nth-child(2) {
    display: none !important;
}
/* Actions td: pad with right offset + align to right */
body.page-cleaning-recommendations [id$="_trTitle"] > td:nth-child(3) {
    width: auto !important;
    text-align: right !important;
    padding: 0 var(--cr-card-pad-x) !important;
}

/* --- Row 2: FROM/TO orange-green pills — hidden (not in Figma) --- */
/* --- Row 3: GrayStrip — hidden (not in Figma) --- */
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type > tbody > tr:nth-child(2),
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type > tbody > tr:nth-child(3) {
    display: none !important;
}

/* --- Row 4: callBack row → From/To panels --- */
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type > tbody > tr:nth-child(4) {
    display: flex !important;
    flex-direction: row;
    gap: var(--cr-panels-row-gap);
    align-items: stretch;
    padding: var(--cr-card-gap) var(--cr-card-pad-x) 0 var(--cr-card-pad-x);
    box-sizing: border-box;
}
/* The 3 tds → From panel / swap button / To panel */
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type > tbody > tr:nth-child(4) > td {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    background: var(--cr-panel-bg);
    border: 1px solid var(--cr-panel-border);
    border-radius: var(--cr-panel-radius);
    padding: var(--cr-panel-pad) !important;
    gap: var(--cr-panel-gap);
    box-sizing: border-box;
    vertical-align: top !important;
}
/* --- Swap button (#ibSwapHdr) ---
 * Was previously hidden here as "data-flow only, not visual in Figma", but the
 * control isn't decorative: it posts back to lbSwap_click (CleaningRecommendations.ascx.cs),
 * which swaps the From/To commodities server-side — hiding it removed real
 * functionality (regression vs. legacy/staging). The sibling From/To Cleaning
 * page hit the identical Figma gap and restored its equivalent control as an
 * icon button; same recipe reused here — see from-to-cleaning.css §5 for the
 * verified reasoning (masking/filtering the <input type="image" src="Refresh.gif">
 * raster breaks Lucide's stroke-only paths, so the <input> becomes an invisible
 * click target and the glyph is painted on the wrapping td via ::after). */
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type > tbody > tr:nth-child(4) > td:nth-child(2) {
    flex: 0 0 auto;
    align-self: center;
    position: relative;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .15s ease;
}
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type > tbody > tr:nth-child(4) > td:nth-child(2):hover {
    background: #e2e8f0;
}
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_ibSwapHdr {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
/* Lucide ArrowRightLeft, 16×16, stroke #0f172a slate-900 — matches the icon
 * painted on the From/To Cleaning page's swap button (from-to-cleaning.css §5). */
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type > tbody > tr:nth-child(4) > td:nth-child(2)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m16 3 4 4-4 4'/><path d='M20 7H4'/><path d='m8 21-4-4 4-4'/><path d='M4 17h16'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}
/* Label pseudo-elements for each panel */
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type > tbody > tr:nth-child(4) > td:nth-child(1)::before {
    content: "From commodity";
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: var(--cr-text-base-size);
    line-height: var(--cr-text-base-lh);
    color: var(--cr-text-color);
    order: 0;
    height: 24px;
}
body.page-cleaning-recommendations #upFromToCleaning > table:first-of-type > tbody > tr:nth-child(4) > td:nth-child(3)::before {
    content: "To commodity";
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: var(--cr-text-base-size);
    line-height: var(--cr-text-base-lh);
    color: var(--cr-text-color);
    order: 0;
    height: 24px;
}
/* Style the inner callBack div as the value */
body.page-cleaning-recommendations #callBackDivFromHdr,
body.page-cleaning-recommendations #callBackDivToHdr {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: var(--cr-text-base-size) !important;
    line-height: var(--cr-text-base-lh) !important;
    color: var(--cr-text-color) !important;
    order: 1;
}
/* The inner #tdFrom/#tdTo content (from ws return) — flatten any inline boldness/styles */
body.page-cleaning-recommendations #callBackDivFromHdr *,
body.page-cleaning-recommendations #callBackDivToHdr * {
    font-family: 'Inter', sans-serif;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
}
body.page-cleaning-recommendations #spanLoadingFromHdr,
body.page-cleaning-recommendations #spanLoadingToHdr {
    display: none !important;
}

/* =====================================================================
 * 3) ACTIONS POPUP MENU → card-header kebab (three-dot menu)
 * ===================================================================== */
/* The popMenuActions control renders as
   <a class="ActionsMenu" id="..._popMenuActions_lbPopupMenu">
     <img src="/cp.gif" class="imageCP16x16">
   </a>
   Match the QEN-8704 inspection-container convention (Lucide EllipsisVertical
   SVG via background-image, slate-700 #334155 stroke, 32×32 click target with
   16×16 icon). Hide the inner transparent shim image so it doesn't stack. */
body.page-cleaning-recommendations a.ActionsMenu,
body.page-cleaning-recommendations a[id$="_popMenuActions_lbPopupMenu"] {
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin-right: var(--cr-card-pad-x) !important;
    border: 0 !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    /* Lucide EllipsisVertical 24×24 — matches terminal-vetting +
       inspection-heatmap kebab convention. Stroke #0f172a (slate-900) for
       higher contrast vs the inspection-container slate-700 #334155 — that
       16×16 variant looked anaemic on the wider Milbros card. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='1'/><circle cx='12' cy='5' r='1'/><circle cx='12' cy='19' r='1'/></svg>") !important;
    background-position: center center !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    cursor: pointer !important;
    -webkit-mask: none !important;
            mask: none !important;
    vertical-align: middle;
}
/* Hide the inner shim image (transparent /cp.gif spacer) */
body.page-cleaning-recommendations a.ActionsMenu img.imageCP16x16,
body.page-cleaning-recommendations a.ActionsMenu img[src="/cp.gif"],
body.page-cleaning-recommendations a[id$="_popMenuActions_lbPopupMenu"] img {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}
/* Suppress the old "Actions ▾" pseudo-elements if any cascade is left over */
body.page-cleaning-recommendations a.ActionsMenu::before,
body.page-cleaning-recommendations a.ActionsMenu::after,
body.page-cleaning-recommendations a[id$="_popMenuActions_lbPopupMenu"]::before,
body.page-cleaning-recommendations a[id$="_popMenuActions_lbPopupMenu"]::after {
    content: none !important;
    display: none !important;
}
body.page-cleaning-recommendations a.ActionsMenu:hover,
body.page-cleaning-recommendations a[id$="_popMenuActions_lbPopupMenu"]:hover {
    background-color: var(--cr-panel-bg) !important;
}

/* =====================================================================
 * 4) LEGACY ContentTabMenu (blue 4f72a4) → Figma tabs strip
 * ===================================================================== */
/* The wrapper <div style="width:975px; height:32px; background-color:#4f72a4">
   holds the legacy tab anchors (.ContentTab + .ContentTabOn). Style its outer
   pill to match Figma's tabs strip; restyle inner anchors as triggers. */
body.page-cleaning-recommendations #upFromToCleaning > div[style*="background-color:#4f72a4"],
body.page-cleaning-recommendations #upFromToCleaning > div[style*="background-color: #4f72a4"] {
    background-color: var(--cr-tabs-bg) !important;
    background-image: none !important;
    /* Auto-fit width so the strip hugs the tab buttons (no trailing dead
       gray space). User wants tabs flush left, sharing the vertical line
       with the title + From/To panel left edges. */
    width: auto !important;
    max-width: fit-content !important;
    height: var(--cr-tabs-h) !important;
    padding: var(--cr-tabs-pad) !important;
    border-radius: var(--cr-tabs-radius) !important;
    box-sizing: border-box !important;
    /* Top: var(--cr-card-gap)=24 to clear the From/To panels above (row 4
       padding bottom is 0); Left: var(--cr-card-pad-x)=24 to align with
       title text + From/To panel left edge. */
    margin: var(--cr-card-gap) 0 0 var(--cr-card-pad-x) !important;
    top: auto !important;
    /* Inner flex distribution */
    display: flex !important;
    align-items: center;
}
body.page-cleaning-recommendations #upFromToCleaning > div[style*="#4f72a4"] > div,
body.page-cleaning-recommendations #upFromToCleaning > div[style*="#4f72a4"] > div > div {
    background: transparent !important;
    background-image: none !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
}

/* Hide ContentTabMenu's edge spacers */
body.page-cleaning-recommendations img[id$="_imgLeftSpacer"],
body.page-cleaning-recommendations img[id$="_imgRightSpacer"],
body.page-cleaning-recommendations td.tab-spacer {
    display: none !important;
}

/* Tab anchor + state spans — content-sized, left-packed (no flex-fill) so the
   first/active tab sits flush at the strip's left edge, sharing the vertical
   line with the title + panel left edges above. */
body.page-cleaning-recommendations a.ContentTabLink {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    text-decoration: none !important;
    color: var(--cr-tab-text) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: var(--cr-text-sm-size) !important;
    line-height: var(--cr-text-sm-lh) !important;
    height: 100%;
}
body.page-cleaning-recommendations span.ContentTab,
body.page-cleaning-recommendations span.ContentTabOn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 30px !important;
    padding: 4px 12px !important;
    border-radius: var(--cr-tab-radius) !important;
    background-color: var(--cr-tab-bg) !important;
    background-image: none !important;
    color: var(--cr-tab-text) !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: var(--cr-text-sm-size) !important;
    line-height: var(--cr-text-sm-lh) !important;
}
body.page-cleaning-recommendations span.ContentTabOn {
    background-color: var(--cr-tab-bg-on) !important;
    box-shadow: var(--cr-tab-shadow-on) !important;
}
/* Neutralise the legacy .Left/.Middle/.Right sub-spans (they used gradient bgs) */
body.page-cleaning-recommendations span.ContentTab .Left,
body.page-cleaning-recommendations span.ContentTab .Middle,
body.page-cleaning-recommendations span.ContentTab .Right,
body.page-cleaning-recommendations span.ContentTabOn .Left,
body.page-cleaning-recommendations span.ContentTabOn .Middle,
body.page-cleaning-recommendations span.ContentTabOn .Right {
    background: transparent !important;
    background-image: none !important;
    color: inherit !important;
    font-family: inherit;
    font-weight: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    height: auto !important;
    border: 0 !important;
}

/* =====================================================================
 * 5) Recommendations panel (From/To tab) — 4–6 stacked sub-cards
 * ===================================================================== */
/* pnlRecommendations contains <table id="tblRecm"> 955-wide. Release width
   and convert every (divHdrTitle + divFromTo) pair into a single sub-card. */
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlRecommendations {
    width: 100% !important;
    padding: 16px var(--cr-card-pad-x) 0 var(--cr-card-pad-x);
    box-sizing: border-box;
}
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlRecommendations table#tblRecm {
    width: 100% !important;
    max-width: none !important;
    border-collapse: collapse;
    border-spacing: 0;
    background: transparent;
}
body.page-cleaning-recommendations #tblRecm > tbody > tr > td > table {
    width: 100% !important;
    max-width: none !important;
    border-collapse: collapse;
    background: transparent;
}
body.page-cleaning-recommendations #tblRecm > tbody > tr > td > table > tbody > tr > td {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    vertical-align: top;
}

/* Hide empty spacer rows (the legacy <tr><td colspan=3>&nbsp;</td></tr>) */
body.page-cleaning-recommendations #tblRecm > tbody > tr > td[colspan="3"]:empty,
body.page-cleaning-recommendations #tblRecm > tbody > tr:has(> td[colspan="3"] > div:not(.divFromTo):not(.divHdrTitle):empty) {
    display: none !important;
}
body.page-cleaning-recommendations #tblRecm > tbody > tr:first-child,
body.page-cleaning-recommendations #tblRecm > tbody > tr:last-child {
    display: none !important;
}

/* Style each .divHdrTitle (heading) + its sibling .divFromTo (content) row as ONE sub-card.
   Use ::before on the .divFromTo row's td to draw the card chrome around BOTH rows via
   adjacent-sibling layout. Simpler: just style each pair via :has() + adjacent-sibling. */
body.page-cleaning-recommendations .comViewHeader.ComAttrHeader.divHdrTitle {
    display: block !important;
    margin: var(--cr-reco-gap) 0 0 0 !important;
    padding: var(--cr-reco-py) var(--cr-reco-px) 0 var(--cr-reco-px) !important;
    background: var(--cr-reco-bg) !important;
    background-image: none !important;
    color: var(--cr-text-color) !important;
    border: 0 !important;
    border-radius: var(--cr-reco-radius) var(--cr-reco-radius) 0 0 !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: var(--cr-text-sm-size) !important;
    line-height: 1 !important;
    text-align: left !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box;
}
/* First section in the inner table: NO top margin (pnlReco has padding-top 16).
   Target only the divHdrTitle inside the FIRST row of the inner table — every
   subsequent divHdrTitle keeps its 12px top margin to separate cards. */
body.page-cleaning-recommendations #tblRecm > tbody > tr:nth-of-type(2) > td > table > tbody > tr:nth-of-type(1) .comViewHeader.divHdrTitle {
    margin-top: 0 !important;
}
/* Suppress the legacy modTitleHeaderLightGray + TitleHeader chrome inside the cards */
body.page-cleaning-recommendations .modTitleHeaderLightGray,
body.page-cleaning-recommendations .TitleHeader {
    background: transparent !important;
    background-image: none !important;
    color: var(--cr-text-color) !important;
    border: 0 !important;
}

/* .divFromTo holds the literal/markup content — becomes the body of the sub-card */
body.page-cleaning-recommendations .divFromTo {
    display: block !important;
    margin: 0 0 0 0 !important;
    padding: 8px var(--cr-reco-px) var(--cr-reco-py) var(--cr-reco-px) !important;
    background: var(--cr-reco-bg) !important;
    border: 0 !important;
    border-radius: 0 0 var(--cr-reco-radius) var(--cr-reco-radius) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    font-size: var(--cr-text-sm-size) !important;
    line-height: var(--cr-text-sm-lh) !important;
    color: var(--cr-text-color) !important;
    box-sizing: border-box;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
body.page-cleaning-recommendations .divFromTo * {
    font-family: 'Inter', sans-serif;
    color: inherit;
}
body.page-cleaning-recommendations .divFromTo a {
    color: var(--cr-link-color) !important;
    text-decoration: underline;
}
body.page-cleaning-recommendations .divFromTo a:hover {
    color: var(--cr-link-hover) !important;
}
/* Kill default browser margins on block children inside the literal output
   (asp:Literal renders <ul>/<ol>/<p>/<br> with default UA margins ~16px,
   which adds 16+16=32px extra between adjacent reco sub-cards). */
body.page-cleaning-recommendations .divFromTo > ul,
body.page-cleaning-recommendations .divFromTo > ol,
body.page-cleaning-recommendations .divFromTo > p,
body.page-cleaning-recommendations .divFromTo ul:first-child,
body.page-cleaning-recommendations .divFromTo ul:last-child,
body.page-cleaning-recommendations .divFromTo ol:first-child,
body.page-cleaning-recommendations .divFromTo ol:last-child,
body.page-cleaning-recommendations .divFromTo p:first-child,
body.page-cleaning-recommendations .divFromTo p:last-child {
    margin: 0 !important;
}
body.page-cleaning-recommendations .divFromTo ul,
body.page-cleaning-recommendations .divFromTo ol {
    margin: 4px 0 !important;
    padding-left: 20px !important;
}
body.page-cleaning-recommendations .divFromTo p {
    margin: 4px 0 !important;
}

/* Hide the .ComName styling so commodity names render plain */
body.page-cleaning-recommendations #callBackDivFromHdr .ComName,
body.page-cleaning-recommendations #callBackDivToHdr .ComName,
body.page-cleaning-recommendations #callBackDivFromHdr .ComLabel,
body.page-cleaning-recommendations #callBackDivToHdr .ComLabel {
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    color: var(--cr-text-color) !important;
    opacity: 1 !important;
    padding: 0 !important;
}

/* =====================================================================
 * 6) Water White Standard tab — derived re-skin
 *    Inside pnlWhiteWaterStandard: CommodityView attribute grid +
 *    coating-type tabs row + Cleaning Method bar + ASPxGridView +
 *    NoticeInline callout + DocumentNoteList.
 * ===================================================================== */
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlWhiteWaterStandard {
    width: 100% !important;
    padding: 16px var(--cr-card-pad-x) 0 var(--cr-card-pad-x);
    box-sizing: border-box;
}
/* Release legacy 955/975 width on inner tables */
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlWhiteWaterStandard > table,
body.page-cleaning-recommendations #tblWWStd,
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlCleaningDetails {
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    border-collapse: collapse;
}
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlWhiteWaterStandard > table > tbody > tr > td,
body.page-cleaning-recommendations #tblWWStd > tbody > tr > td {
    padding: 0 !important;
    background: transparent !important;
}
/* Hide empty &nbsp; spacer rows */
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlWhiteWaterStandard > table > tbody > tr:has(> td[colspan="3"]:only-child) > td[colspan="3"]:only-child {
    height: 8px;
}

/* --- CommodityView attribute panels (Chemical Characteristics, Misc.Properties, Reactivity)
 *   Ported from MilbrosCommodityRefresh.css §5 — see that file for the
 *   detailed markup contract. CommodityView.ascx.cs emits:
 *     <div id="divCommodityView">
 *       <div class="divColumnPanel" style="width:33%">
 *         <div class="comViewHeader ComAttrHeader divHdrTitle">Group Name</div>
 *         <div class="divAttrGrp">
 *           <div class="divAttrRow">
 *             <div class="divAttrNm">Label:</div>
 *             <span class="divStatIcon"/>
 *             <div class="divAttrVal"><span class="ComAttrValRead">value</span></div>
 *           </div>
 *           ...
 *         </div>
 *       </div>
 *       ... 2 more columns ...
 *     </div>
 *   The legacy layout floats columns at width:33%. After re-skin: parent is
 *   flex-row-wrap, each column is flex:1 with min-width:280, title + AttrGrp
 *   stack as one card per column. Labels right-align in a fixed 145px column;
 *   values flex-fill to the right.
 * ------------------------------------------------------------------------- */

/* Parent container — float row → flex row. Suffix selector because ASP.NET
   wraps the literal id with a runat="server" naming-container prefix.
   Override the inline `height: 120px` set by CleaningRecommendations.ascx.cs
   L478 — that fixed height clips the parent and lets sibling controls
   (coating tabs) overlap the content at narrow viewports. */
body.page-cleaning-recommendations [id$="divCommodityView"] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    column-gap: 12px;
    row-gap: 8px;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box;
    margin-bottom: var(--cr-reco-gap);
    padding-top: 0 !important;
}

body.page-cleaning-recommendations .divColumnPanel {
    float: none !important;
    flex: 1 1 0 !important;
    min-width: 240px;
    /* Legacy emits inline style="width:33%" + float:left — flex:1 overrides
       on layout; min-width guards against narrow viewports (wraps below 720). */
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
}

/* Card head (legacy divHdrTitle) — codebehind emits the section title as a
   DIRECT child of #divCommodityView (sibling of .divColumnPanel), NOT nested
   inside the first column. `display:block` is ignored on a flex item, so the
   title sat horizontally next to the column panels. Fix: flex-basis 100% so
   it claims its own flex row and the 3 columns wrap underneath. */
body.page-cleaning-recommendations [id$="divCommodityView"] > .divHdrTitle,
body.page-cleaning-recommendations [id$="divCommodityView"] > .comViewHeader.ComAttrHeader.divHdrTitle {
    flex: 0 0 100% !important;
    width: 100% !important;
    order: -1 !important;
    float: none !important;
    margin: 0 0 var(--cr-reco-gap) 0 !important;
    padding: 10px 14px !important;
    height: auto !important;
    background: var(--cr-reco-bg) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--cr-reco-radius) !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: var(--cr-text-sm-size) !important;
    line-height: var(--cr-text-sm-lh) !important;
    color: var(--cr-text-color) !important;
    text-align: left !important;
    box-sizing: border-box;
}

/* Card body — full radius (title is in its own bar above, not stacked with grp) */
body.page-cleaning-recommendations .divAttrGrp {
    background: var(--cr-reco-bg) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--cr-reco-radius) !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif;
    color: var(--cr-text-color) !important;
}

/* Property row — flex, not float; label right-aligned + value left-fills */
body.page-cleaning-recommendations .divAttrRow {
    clear: none !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: auto;
    min-height: 22px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: var(--cr-text-sm-size);
    line-height: var(--cr-text-sm-lh);
}
body.page-cleaning-recommendations .divAttrRow:last-child {
    border-bottom: 0;
}

/* Label column (right-aligned, muted) */
body.page-cleaning-recommendations .divAttrNm {
    float: none !important;
    flex: 0 0 145px;
    text-align: right;
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    font-size: var(--cr-text-sm-size) !important;
    color: var(--cr-muted-text) !important;
    background: transparent !important;
    white-space: nowrap;
    padding: 0;
}

/* Status icon column (Product / TradeName / Private status indicators) —
   keep its legacy meaning, just unfloat. */
body.page-cleaning-recommendations .divStatIcon,
body.page-cleaning-recommendations .divStatIconNoFloat {
    float: none !important;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
}

/* Value column (flex-fill, default body color) */
body.page-cleaning-recommendations .divAttrVal {
    float: none !important;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: var(--cr-text-sm-size) !important;
    color: var(--cr-text-color) !important;
    background: transparent !important;
}

/* Read-only value span — was bold #000, becomes underlined link-style */
body.page-cleaning-recommendations .ComAttrValRead {
    font-weight: 500 !important;
    color: var(--cr-text-color) !important;
    background: transparent !important;
}
body.page-cleaning-recommendations .ComAttrValRead a,
body.page-cleaning-recommendations .divAttrGrp a {
    color: var(--cr-link-color) !important;
    font-weight: 500 !important;
    text-decoration: underline;
}

/* "More Available" link inside group titles (Prior Cargo Lists exception) */
body.page-cleaning-recommendations .divHdrTitle a.ContentTabLink {
    margin-left: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: var(--cr-link-color) !important;
    text-decoration: none;
}
body.page-cleaning-recommendations .divHdrTitle a.ContentTabLink u {
    text-decoration: underline;
}

/* --- Coating type tabs row (CoatingTabContainer inside a 4f72a4 strip) --- */
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlCleaningDetails > div[style*="background-color:#4f72a4"] {
    background-color: var(--cr-tabs-bg) !important;
    background-image: none !important;
    width: auto !important;
    min-width: 0;
    max-width: fit-content;
    height: var(--cr-tabs-h) !important;
    padding: var(--cr-tabs-pad) !important;
    border-radius: var(--cr-tabs-radius) !important;
    box-sizing: border-box !important;
    margin: 0 0 var(--cr-reco-gap) 0 !important;
    display: flex !important;
    align-items: center;
}
body.page-cleaning-recommendations .CoatingTabContainer {
    display: flex !important;
    align-items: center;
    gap: 4px;
    height: 100%;
    background: transparent !important;
}
body.page-cleaning-recommendations .CoatingTabContainer a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 30px !important;
    padding: 4px 12px !important;
    border-radius: var(--cr-tab-radius) !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--cr-tab-text) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: var(--cr-text-sm-size) !important;
    line-height: var(--cr-text-sm-lh) !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
}
body.page-cleaning-recommendations .CoatingTabContainer a.coatingTabActive,
body.page-cleaning-recommendations .CoatingTabContainer a.is-active,
body.page-cleaning-recommendations .CoatingTabContainer a[class*="Active"],
body.page-cleaning-recommendations .CoatingTabContainer a[class*="On"] {
    background: var(--cr-tab-bg-on) !important;
    box-shadow: var(--cr-tab-shadow-on) !important;
}
body.page-cleaning-recommendations .CoatingTabContainer a:hover {
    background: rgba(255,255,255,.5) !important;
}

/* --- Cleaning Method + Cleaning Steps title bars → section headings --- */
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlCleaningDetails > div > .modTitleHeaderLightGray,
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlCleaningDetails .modTitleHeaderLightGray {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: var(--cr-reco-py) 0 8px 0 !important;
    margin: var(--cr-reco-gap) 0 0 0 !important;
    color: var(--cr-text-color) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: var(--cr-text-base-size) !important;
    line-height: var(--cr-text-base-lh) !important;
    text-align: left !important;
}
/* Hide the clearpixel.gif anchor icons that prefix the section headers */
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlCleaningDetails .modTitleHeaderLightGray img[src*="clearpixel"] {
    display: none !important;
}
/* The Cleaning Steps title has a nested table layout — flatten */
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlCleaningDetails .modTitleHeaderLightGray > table,
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlCleaningDetails .modTitleHeaderLightGray > table > tbody,
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlCleaningDetails .modTitleHeaderLightGray > table > tbody > tr,
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_pnlCleaningDetails .modTitleHeaderLightGray > table > tbody > tr > td {
    display: block;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    width: auto !important;
}

/* --- divCleaningMethod content body --- */
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_divCleaningMethod {
    padding: 8px 14px 12px 14px !important;
    background: var(--cr-reco-bg) !important;
    border-radius: 0 0 var(--cr-reco-radius) var(--cr-reco-radius);
    margin-bottom: var(--cr-reco-gap);
    font-family: 'Inter', sans-serif;
    font-size: var(--cr-text-sm-size) !important;
    line-height: var(--cr-text-sm-lh) !important;
    color: var(--cr-text-color) !important;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* --- ASPxGridView grids inside the cleaning recommendations card — bare `dxgv`
   classes (no _Version3). Two grids share these rules: gridCleaningSteps
   (cleaning steps under Water-White tab) and docNote_gridNotes (Document Notes
   grid at the bottom of the same tab, rendered by DocumentNoteList.ascx).
   Both descend from #upFromToCleaning (UpdatePanel has ClientIDMode="Static"),
   so scope at that parent instead of per-grid ID — keeps the docNote grid
   from falling back to the legacy navy chrome.
   Ported from the shared body.page-grid skin in grid.css §7 (Inspections /
   Inspectors / Observations look): muted header, white data cells, sharp
   border-bottom, hover #f8fafc. Page-scoped here because this card is NOT
   body.page-grid. The .ascx inline <style> block sets `.dxgvHeader {
   background:#2d3663 !important; border:1px solid #fff !important; padding:0;
   text-align:center !important }` — every header property below carries
   !important to win, paired with #upFromToCleaning + element + class
   selectors for specificity headroom. */
#upFromToCleaning {
    /* Local fallback token definitions — the body.page-cleaning-recommendations
       block at top of file owns the canonical values, but the body class is
       only applied when Config.EnableRefreshedFrontend && Request.IsAuthenticated
       (Default.master.cs L391). Defining the tokens on the card itself lets the
       grid skin survive unauth state, app-pool recycles, and feature-flag flips
       without falling back to the legacy navy chrome. Values mirror lines 21-65. */
    --cr-card-bg: #ffffff;
    --cr-card-border: var(--border-default);
    --cr-panel-bg: var(--surface-muted);
    --cr-reco-radius: 8px;
    --cr-text-color: #000000;
    --cr-text-sm-size: 14px;
    --cr-text-sm-lh: 20px;
}
#upFromToCleaning table.dxgvControl.dxgv {
    width: 100% !important;
    border: 1px solid var(--cr-card-border) !important;
    border-radius: var(--cr-reco-radius);
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
    background: var(--cr-card-bg);
    font-family: 'Inter', sans-serif;
}
#upFromToCleaning table.dxgvControl.dxgv table {
    border-collapse: collapse;
    background: transparent !important;
}

/* Header cell — beats the .ascx-local navy #2d3663 + 1px white border block. */
#upFromToCleaning td.dxgvHeader {
    background-color: var(--cr-panel-bg) !important;
    background-image: none !important;
    color: var(--cr-text-color) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cr-card-border) !important;
    padding: 11px 16px !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: var(--cr-text-sm-size) !important;
    line-height: var(--cr-text-sm-lh) !important;
    text-align: inherit !important; /* honor DX inline text-align:Left/Center */
    vertical-align: middle !important;
    height: auto !important;
}
/* Divider between header columns */
#upFromToCleaning td.dxgvHeader + td.dxgvHeader {
    border-left: 1px solid var(--cr-card-border) !important;
}
/* Reset the inner <table class="tblColHeader"> chrome — DX wraps every header
   caption in a nested table that brings its own padding / centering. */
#upFromToCleaning td.dxgvHeader table.tblColHeader,
#upFromToCleaning td.dxgvHeader .tblColHeader td,
#upFromToCleaning td.dxgvHeader .tblColHeader td > div {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: inherit !important;
}
#upFromToCleaning td.dxgvHeader .tblColHeader td,
#upFromToCleaning td.dxgvHeader .tblColHeader td > div,
#upFromToCleaning td.dxgvHeader .tblColHeader a {
    color: var(--cr-text-color) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: var(--cr-text-sm-size) !important;
    line-height: var(--cr-text-sm-lh) !important;
    text-decoration: none !important;
}

/* Data rows — white cells, subtle row divider, hover #f8fafc (shared spec) */
#upFromToCleaning tr.dxgvDataRow > td {
    padding: 10px 16px !important;
    background-color: var(--cr-card-bg) !important;
    background-image: none !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--cr-card-border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    font-size: var(--cr-text-sm-size) !important;
    line-height: var(--cr-text-sm-lh) !important;
    color: var(--cr-text-color) !important;
    vertical-align: middle;
}
#upFromToCleaning tr.dxgvDataRow:hover > td {
    background-color: var(--surface-card) !important;
}
#upFromToCleaning tr.dxgvDataRow:last-of-type > td {
    border-bottom: 0 !important;
}
/* Honor DX column alignment classes on data cells (dx-al / dx-ac / dx-ar) */
#upFromToCleaning tr.dxgvDataRow > td.dx-al { text-align: left !important; }
#upFromToCleaning tr.dxgvDataRow > td.dx-ac { text-align: center !important; }
#upFromToCleaning tr.dxgvDataRow > td.dx-ar { text-align: right !important; }

/* DocumentNoteList wrapper — `<div style="width:975px; padding-top:10px;">`
   emitted by DocumentNoteList.ascx pins the Notes grid to 975px. Release so
   the grid fills the card width like gridCleaningSteps above. */
#divNotesMain > div[style*="975px"] {
    width: 100% !important;
}

/* --- NoticeInline (yellow tip box) → muted callout --- */
body.page-cleaning-recommendations .NoticeInline,
body.page-cleaning-recommendations #ctl00_cphMiddle_ctl00_divStdNotice {
    background: var(--cr-reco-bg) !important;
    background-image: none !important;
    border: 1px solid var(--cr-card-border) !important;
    border-radius: var(--cr-reco-radius);
    padding: var(--cr-reco-py) var(--cr-reco-px) !important;
    margin: var(--cr-reco-gap) 0 !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    font-size: var(--cr-text-sm-size) !important;
    line-height: var(--cr-text-sm-lh) !important;
    color: var(--cr-muted-text) !important;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* =====================================================================
 * 7) Mute legacy outer chrome (BG patterns, Milbros title bar wrappers)
 * ===================================================================== */
/* The Milbros portal MainTableContent uses default DNN content chrome.
   Inside this scope it should fall away to neutral. */
body.page-cleaning-recommendations .modV2,
body.page-cleaning-recommendations .modContainer,
body.page-cleaning-recommendations .modContainerStd {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* =====================================================================
 * 8) Inline links inside the recommendation bodies (Water-White anchor in
 *    Milbros Cleaning Matrix Recommendations card)
 * ===================================================================== */
body.page-cleaning-recommendations .divFromTo a[href*="CleaningRecommendations.aspx"] {
    color: var(--cr-link-color) !important;
    text-decoration: underline;
}

/* =====================================================================
 * 9) Misc resets — kill legacy OrangeStrip/GreenStrip/GrayStrip filters
 *    (the .ascx inline <style> declares these as gradient bg widgets).
 *    They appear inside the From/To recommendation bodies sometimes. */
body.page-cleaning-recommendations .OrangeStrip,
body.page-cleaning-recommendations .GreenStrip,
body.page-cleaning-recommendations .GrayStrip {
    background: transparent !important;
    background-image: none !important;
    filter: none !important;
    width: auto !important;
    height: auto !important;
}

/* =====================================================================
 * 10) Page background — Milbros portal already has a bg pattern; do not
 *     paint here (preserve user's portal-level styling).
 * ===================================================================== */