/* ============================================================================
   Milbros Commodity Detail Refresh
   Spec: docs/DESIGN.md §12 (Figma file ISZ58jrGcp1LwMEJeeG00Q)
   Plan: docs/superpowers/plans/2026-05-05-milbros-commodity-detail-refresh.md
   Scope: body.page-commodity-detail
   Loaded after: dx.light.compact.css, MainWhiteout.css, MilbrosWhiteout.css,
                 tokens.css, components.css
   ============================================================================ */

/* -- 0. Page backdrop (§12.1) ----------------------------------------------
   Figma shows the card sitting on a light-gray app-background panel, with a
   subtle topographic pattern. The legacy ContentPane is transparent, so we
   tint the body and let the card chrome below sit on top.
   ----------------------------------------------------------------------- */
body.page-commodity-detail {
    background-color: #f3f4f6;
}

/* The legacy chrome puts everything inside <table class="ContentPane"> /
   <td class="ContentPaneBody"> — keep them transparent so the body tint
   shows through around the card. */
body.page-commodity-detail table.ContentPane,
body.page-commodity-detail td.ContentPaneBody {
    background: transparent;
}

/* Card-too-wide / page horizontal-scroll fix.
   The legacy DNN chrome wraps the card in a `<table.ContentPane>` → inner
   `<table width="100%">` chain that both run `table-layout: auto`. Auto tables
   size to their content's MIN-content, ignoring the `width:100%` the shared
   chain-release rule (components.css) sets. The card's min-content is driven by
   the .cd-tabbar strip: its 12 tabs, at their natural non-shrinking widths, sum
   to ~1183px (verified via getComputedStyle — NOT the title, which wraps, and
   NOT the empty cphLeft/cphRight placeholders, which collapse to 0). That floor
   forces the card ~76px wider than the .q88-content column, so its right edge
   (incl. the actions menu / New-Spec button) fell outside the viewport.
   Fix has two coupled halves:
     1. Pin the two chrome tables to `table-layout: fixed` so `width: 100%`
        becomes authoritative and the card can no longer grow past its column.
     2. Make .cd-tabbar actually shrink (see §3) so, once the width is pinned,
        the tabs ellipsis instead of overflowing the now-narrower card.
   `> table` child combinator keeps this off the descendant DX grid tables. */
body.page-commodity-detail .q88-content .ContentPane,
body.page-commodity-detail .q88-content .ContentPane td.ContentPaneBody > table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Last-resort SCROLL (never clip). With the table-layout fix above the card
   fits its column in the normal case, so no scrollbar shows. But a tab whose
   inner grid has genuinely unbreakable wide content can still exceed the column
   — and there is a floor past which nothing can shrink. Let that overflow reach
   the page so the browser shows a reachable, window-anchored horizontal
   scrollbar instead of hiding data. Alternatives verified worse (2026-07-13):
   `overflow-x: hidden` clips the excess (data lost); `overflow-x: auto` HERE
   parks the scrollbar at the bottom of the ~1200px-tall .q88-content box, far
   below the fold and effectively unreachable. `visible` keeps it sticky at the
   window bottom. Explicit `visible` also resets overflow-y (which `hidden`
   would have forced to computed `auto`) back to non-clipping. */
body.page-commodity-detail .q88-content {
    overflow-x: visible;
}

/* -- 1. Outer card frame (§12.2) -----------------------------------------
   The UpdatePanel `[id$="upCommodity"]` is the card surface — it wraps the
   header + tabs + tab content + modals. As of QEN-8704 it carries the
   shared `.q88-card` class (attached via CommodityContainer.ascx.cs
   Page_Load), so bg / border / radius / shadow / padding / margin all come
   from components.css. Only page-specific overrides live here.
   ----------------------------------------------------------------------- */

/* The .cd-header and .cd-tabbar already sit inside that wrapper. The legacy
   markup has the Specifications/Actions table outside .cd-header but inside
   #upCommodity — keep it transparent so the card surface shows through. */
body.page-commodity-detail [id$="upCommodity"] > * {
    background-color: transparent;
}

/* The legacy `<table.ContentPane>` chain release is shared in components.css
   (scoped to `body.sidebar-nav … :has(.q88-card)`). #upCommodity carries
   .q88-card via codebehind, so the shared rule applies — no page-specific
   copy needed here. */

/* `.cd-card` is reserved for a future DOM restructure (plan Task 8) — when
   the chrome wraps explicit slot divs. The element doesn't exist in markup
   yet; rule kept for structural intent (flex column) but stripped of
   duplicate chrome that would conflict with .q88-card. */
body.page-commodity-detail .cd-card {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.page-commodity-detail .cd-card-header,
body.page-commodity-detail .cd-card-content,
body.page-commodity-detail .cd-card-footer {
    box-sizing: border-box;
    padding: 24px;   /* §12.2.1 — px-6 (24) gutter on each slot */
    width: 100%;
}

body.page-commodity-detail .cd-card-header {
    padding-top: 24px;
    padding-bottom: 0;
}

body.page-commodity-detail .cd-card-content {
    padding-top: 24px;
    padding-bottom: 24px;
}

body.page-commodity-detail .cd-card-footer {
    padding-top: 0;
    padding-bottom: 24px;
}

/* -- 2. Card header (§12.5) -- */
body.page-commodity-detail .cd-header {
    /* Explicitly white — `--surface-card` resolves to #F8F8F8 in token set
       which would re-create the flat gray strip we're trying to escape. */
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0 0 16px 0;
    gap: 6px;
    border-bottom: 1px solid #e5e7eb;  /* §12.5 divider between header and tabs */
    margin-bottom: 16px;
    /* override legacy .commodityHeader if it leaks through */
    height: auto;
    position: static;
    text-align: left;
    z-index: auto;
}

body.page-commodity-detail .cd-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    overflow: visible;
}

body.page-commodity-detail .cd-header__row--meta {
    overflow: hidden;  /* §12.5.2 overflow-clip */
}

body.page-commodity-detail .cd-header__title {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #0a0a0a;
    white-space: normal;
    overflow-wrap: break-word;
    flex: 1 1 0;
}

body.page-commodity-detail .cd-header__menu {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

body.page-commodity-detail .cd-header__product,
body.page-commodity-detail .cd-header__spec {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--commodity-meta-muted, #4d4d4d);
}

body.page-commodity-detail .cd-header__product a,
body.page-commodity-detail .cd-header__product .ltProductLink {
    color: var(--primary);  /* §12.5.2 — Product-Name linked text (QEN-8776: blue→teal) */
    text-decoration: none;
}

body.page-commodity-detail .cd-header__marpol,
body.page-commodity-detail .cd-header__updated {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--commodity-meta-muted, #4d4d4d);
}

body.page-commodity-detail .cd-header__label {
    color: var(--commodity-meta-muted, #4d4d4d);
}

/* Spec radio strip — keep horizontal, override legacy block layout */
body.page-commodity-detail .cd-header__spec input[type="radio"] {
    margin-right: 4px;
}
body.page-commodity-detail .cd-header__spec label {
    margin-right: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: var(--text-foreground, #0f172a);
    cursor: pointer;
}

/* MountSpecsRadio is defined on CommodityHeader.ascx.cs but not yet wired
   from CommodityContainer (Plan Task 8 follow-up). Until that wiring lands,
   .cd-header__spec is an empty "Specification:" anchor that visually
   duplicates the working strip in tblSpecificationsAndActions and leaves a
   stray divider line between them. Hide the orphan label and drop the
   header bottom border so the card reads as a single unit. */
body.page-commodity-detail .cd-header__row--spec .cd-header__spec {
    display: none;
}
body.page-commodity-detail .cd-header {
    border-bottom: 0;
}

/* The legacy tblSpecificationsAndActions sits between .cd-header and
   .cd-tabbar. Plan Task 8 relocates its contents into the header mount
   points (phSpecsHeader, cdHeaderMenuMount) and removes the table; for now
   we just blend it into the card surface so it doesn't read as an orphan
   strip. */
body.page-commodity-detail [id$="tblSpecificationsAndActions"] {
    background: transparent;
    border: 0;
    margin-bottom: 16px;
}
body.page-commodity-detail [id$="tblSpecificationsAndActions"] td {
    background: transparent;
    padding: 4px 0;
}

/* Spec radio strip typography + alignment to DESIGN.md §12.5.3.
   Counters: <td><b>Specification:</b></td> in markup, plus the inline
   <style> block in CommodityContainer.ascx that sets `.itemSelected
   input/.itemSelected label { font-weight:bold; text-decoration:underline }`
   on the checked option. Specificity here (≥0,0,4,2) beats both. */
body.page-commodity-detail [id$="tblSpecificationsAndActions"] [id$="tdViewSpec"] b {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--commodity-meta-muted, #4d4d4d);
}

/* Wrap each <span> radio group as an inline-flex row so the input and label
   share the same baseline/center and a consistent inter-option gap. */
body.page-commodity-detail [id$="tblSpecificationsAndActions"] td > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Custom radio per Figma 2063:11522 RadioButton spec — 16×16 white circle
   with #e2e8f0 border, 8×8 dark inner dot when checked. Strip native
   appearance so we control geometry/colors exactly. */
body.page-commodity-detail [id$="tblSpecificationsAndActions"] input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    box-sizing: border-box;
    /* Figma uses #e2e8f0 specifically for this radio's outer ring; the global
       --border-input token resolves to a much darker gray (#adadad) which
       reads as a heavier outline than the design intends. */
    border: 1px solid var(--border-default);
    border-radius: 50%;
    background: #ffffff;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

body.page-commodity-detail [id$="tblSpecificationsAndActions"] input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* Figma RadioButton's checked-state vector fills with #0D9488 (teal).
       Hardcoded — the global --primary token resolves to #0d4d4d in this
       project (much darker), which would dull the indicator. */
    background: var(--primary);
    transform: translate(-50%, -50%);
}

body.page-commodity-detail [id$="tblSpecificationsAndActions"] input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary, #0d9488);
    outline-offset: 2px;
}

body.page-commodity-detail [id$="tblSpecificationsAndActions"] label,
body.page-commodity-detail [id$="tblSpecificationsAndActions"] .itemSelected label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-foreground, #0f172a);
    text-decoration: none;
    cursor: pointer;
}

/* Breathing room between "Specification:" label cell and the radios cell —
   the table cellpadding alone reads as a hard butt-up at 14px label size. */
body.page-commodity-detail [id$="tblSpecificationsAndActions"] [id$="tdViewSpec"] + td {
    padding-left: 12px;
}

/* Favorite-star — moved to components.css global Lucide swap (24×24, matches
   Figma Milbros file ISZ58jrGcp1LwMEJeeG00Q node 2064:10023). Earlier
   re-derivation of "Figma star 1 is 16×16" was wrong — that 16 came from the
   sprite's source PNG dimensions, not Figma; the actual `star 1` instance
   in CommodityDetail is 24×24 (verified via get_metadata 2026-05-27). Keep
   a 4px horizontal margin local to this table to preserve the spec-row
   alignment with the "Specifications" label. */
body.page-commodity-detail [id$="tblSpecificationsAndActions"] img.Img-StarOff,
body.page-commodity-detail [id$="tblSpecificationsAndActions"] img.Img-StarOn {
    margin: 0 4px !important;
}

/* -- 2.9  Actions menu → title-row kebab (Figma 2528:23218) -----------------
   Figma renders the commodity actions menu as a vertical-ellipsis (kebab)
   pinned to the card's top-right on the TITLE row (the cd-header__menu mount).
   The proper fix re-parents popMenuActions into that mount (CommodityHeader
   .MountActionsMenu — deferred "Task 8" wiring); until that server change
   lands we match the Figma VISUAL with CSS only: swap the legacy StdIcons
   hamburger sprite for a Lucide EllipsisVertical and absolute-position the
   anchor to the card top-right. popMenuActions is a PopupMenu whose dropdown
   positions off click coordinates, so repositioning the trigger anchor does
   NOT break the menu (same proven approach as inspection-container.css §14). */
body.page-commodity-detail [id$="upCommodity"] {
    position: relative;
}
body.page-commodity-detail a.ActionsMenu {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23334155' 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: 20px 20px !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    position: absolute !important;
    top: 30px !important;
    right: 30px !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    z-index: 3 !important;
}
body.page-commodity-detail a.ActionsMenu:hover {
    background-color: var(--surface-muted) !important;
}
/* Hide the transparent shim <img src="/cp.gif"> inside the anchor so it doesn't
   stack a phantom 16×16 box over the swapped icon. */
body.page-commodity-detail a.ActionsMenu img.imageCP16x16,
body.page-commodity-detail a.ActionsMenu img[src="/cp.gif"] {
    visibility: hidden !important;
}

/* -- 3. Tab strip (§12.6) -- */
body.page-commodity-detail .cd-tabbar {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    display: flex;
    align-items: center;
    /* Light gray pill-strip background, matches Figma §12.6 */
    background: var(--surface-muted);
    border-radius: 8px;
    margin-bottom: 24px;
    overflow: visible;
}

/* ContentTabMenu's real DOM (verified live) is
     <a class="ContentTabLink"><span class="ContentTab|ContentTabOn">
        <span class="Left">&nbsp;</span><span class="Middle">Label</span>
        <span class="Right">&nbsp;</span></span></a>
   i.e. the clickable FLEX ITEM is the <a.ContentTabLink>; the pill chrome rides
   on the inner <span.ContentTab/On>; the label is <span.Middle>. Older comments
   here named the wrong elements — the sizing rules below now target the <a>. */
body.page-commodity-detail .cd-tabbar > div { /* ContentTabMenu's outer wrapper */
    flex: 1 1 auto;
    display: flex;
    /* min-width:0 is the linchpin — without it this wrapper keeps its auto
       (=min-content) minimum, refusing to shrink and blocking the whole tab
       chain from ever squeezing, which forces the card (and page) wide. */
    min-width: 0;
}
body.page-commodity-detail .cd-tabbar > div > div { /* the inner div with the tab links */
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

/* The <a.ContentTabLink> is the actual flex item — make each an equal 1fr
   track that can shrink to zero so all tabs share the row width evenly. */
body.page-commodity-detail .cd-tabbar .ContentTabLink {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

/* Zero out gradient image bookends */
body.page-commodity-detail .cd-tabbar .ContentTab .Left,
body.page-commodity-detail .cd-tabbar .ContentTab .Right,
body.page-commodity-detail .cd-tabbar .ContentTabOn .Left,
body.page-commodity-detail .cd-tabbar .ContentTabOn .Right {
    display: none;
}

/* Tab pill (inactive + active share size/shape). The pill span must be able to
   shrink WITHIN its <a.ContentTabLink> flex track (max-width:100% + overflow
   hidden), otherwise its nowrap label re-inflates the <a>'s min-content and the
   whole strip stops shrinking again — the exact loop that forced the card wide. */
body.page-commodity-detail .cd-tabbar .ContentTab,
body.page-commodity-detail .cd-tabbar .ContentTabOn {
    height: 32px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    flex: 1 1 0;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    border-bottom: 0;  /* override legacy 1px solid #666 */
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
}

/* The label span */
body.page-commodity-detail .cd-tabbar .ContentTab .Middle,
body.page-commodity-detail .cd-tabbar .ContentTabOn .Middle {
    background: none;
    height: auto;
    line-height: 20px;
    padding: 4px 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-foreground, #0f172a);
    white-space: nowrap;
    /* display:block is required for text-overflow:ellipsis to engage — as a
       flex child inside the inline-flex pill it would otherwise never clip. */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

/* Active state — bg white + shadow-sm + transparent border (§12.6) */
body.page-commodity-detail .cd-tabbar .ContentTabOn {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
body.page-commodity-detail .cd-tabbar .ContentTabOn .Middle {
    font-weight: 500;  /* spec is Medium; legacy was bold */
}

/* Hover (light reinforcement; spec doesn't cover but parity needed) */
body.page-commodity-detail .cd-tabbar .ContentTab:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* -- 4. Card footer / legend (§12.8.3) -------------------------------------
   Figma footer = horizontal strip with three legend dots
   (Product Name / Trade Name / Private) + a Cancel button on the right.
   Legacy markup doesn't emit a legend strip on most tabs; on Notes&Docs +
   Cleaning + Synonyms it shows up as `.commodityFooter` if present.
   ----------------------------------------------------------------------- */
body.page-commodity-detail .commodityFooter,
body.page-commodity-detail .CommodityFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--commodity-legend-bg, #f8fafc);
    border-top: 1px solid #e5e7eb;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 0 0 8px 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--commodity-meta-muted, #4d4d4d);
}

body.page-commodity-detail .commodityFooter .legendDot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.page-commodity-detail .commodityFooter .legendDot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: var(--commodity-bullet-default, #94a3b8);
}

body.page-commodity-detail .commodityFooter .legendDot.CommodityIcon-Tradename::before {
    /* Token --commodity-bullet-inline is gray-400 (the inline-value bullet,
       §12.7.2). The Figma legend dot for Trade Name/Specification Data is
       blue-400 — same token as the Heating category bullet. */
    background: var(--commodity-bullet-heating, #60a5fa);  /* Trade Name = blue-400 */
}
body.page-commodity-detail .commodityFooter .legendDot.CommodityIcon-Private::before {
    background: var(--commodity-bullet-private, #15803d);  /* Private = green-700 */
}

/* MilbrosWhiteout.css gives .CommodityIcon-Product/Tradename/Private a fixed
   9×9 inline-block with colored bg. When those classes ride on a .legendDot
   <span>Text</span>, the label collapses inside the 9×9 box and overlaps
   siblings. Reset size + bg here so the ::before bullet drives the dot
   and the text flows normally. */
body.page-commodity-detail .commodityFooter .legendDot.CommodityIcon-Product,
body.page-commodity-detail .commodityFooter .legendDot.CommodityIcon-Tradename,
body.page-commodity-detail .commodityFooter .legendDot.CommodityIcon-Private,
body.page-commodity-detail .commodityFooter .legendDot.CommodityIcon-Synonym {
    width: auto;
    height: auto;
    background: transparent;
}

body.page-commodity-detail .commodityFooter__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* -- 4.1  Cancel button (DESIGN.md §12.12.1 — outline variant) ------------
   Markup: <a class="LinkButton Secondary"> wrapping <uc:ImageManager> that
   emits "Cancel" text + 5px clearpixel spacer + /images/icons/cancel.png
   icon + trailing 5px spacer. The Figma spec is a pure-text button with
   white bg + #e2e8f0 border + 8px radius + 36h. We:
     • hide the trailing icons (clearpixel.lbcp + cancel.png)
     • restyle the anchor to the spec geometry
   Specificity (0,0,3,2) beats `a:link` (0,0,1,1) in MainWhiteout without
   needing !important on most rules; we still use !important where legacy
   `MainWhiteout.css .LinkButton` rules use it themselves. */
body.page-commodity-detail .commodityFooter a.LinkButton.Secondary,
body.page-commodity-detail .commodityFooter a.LinkButton.Secondary:link,
body.page-commodity-detail .commodityFooter a.LinkButton.Secondary:visited,
body.page-commodity-detail .commodityFooter__actions a.LinkButton,
body.page-commodity-detail .commodityFooter__actions a.LinkButton:link,
body.page-commodity-detail .commodityFooter__actions a.LinkButton:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 36px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    cursor: pointer !important;
    min-width: 80px;  /* visual parity with Figma "Cancel" button width */
    text-align: center !important;
}

body.page-commodity-detail .commodityFooter a.LinkButton.Secondary:hover,
body.page-commodity-detail .commodityFooter__actions a.LinkButton:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

body.page-commodity-detail .commodityFooter a.LinkButton.Secondary:focus-visible,
body.page-commodity-detail .commodityFooter__actions a.LinkButton:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Hide ImageManager-emitted icon + clearpixel spacers so the anchor reads
   as plain "Cancel" text per spec. ASP.NET LinkButton also prepends a legacy
   <ins>&nbsp;</ins> spacer (compensating for an old MainWhiteout `.LinkButton
   ins` icon hook) — left in flex layout it's a ~4px item that, combined with
   gap: 8px, pushes the "Cancel" text right of geometric center. */
body.page-commodity-detail .commodityFooter a.LinkButton.Secondary img,
body.page-commodity-detail .commodityFooter__actions a.LinkButton img,
body.page-commodity-detail .commodityFooter a.LinkButton.Secondary > ins,
body.page-commodity-detail .commodityFooter__actions a.LinkButton > ins {
    display: none !important;
}

/* -- 5. Property cards / P1 (§12.7) ----------------------------------------
   Re-skin of CommodityView output. CommodityView.ascx.cs's
   GenerateCommodityViewContentAlternate emits the legacy DOM:

     <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">[icon|spacer]</span>
             <div class="divAttrVal"><span class="ComAttrValRead">value</span></div>
           </div>
           ...
         </div>
       </div>
       <div class="divColumnPanel">...</div>
     </div>

   We re-skin in place: pair divHdrTitle (card head) with the divAttrGrp that
   immediately follows it (card body) so they read as a single card.
   Specificity is body.page-commodity-detail .X (0,0,2,1) — beats the inline
   <style> rules in CommodityView.ascx (0,0,1,0) without !important.
   ----------------------------------------------------------------------- */

/* Container: float columns -> flex row.
   Suffix selector — ASP.NET runat="server" rewrites the literal id to
   ctl00_…_divCommodityView, so #divCommodityView never matches. */
body.page-commodity-detail [id$="divCommodityView"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    column-gap: 24px;
    row-gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

body.page-commodity-detail .divColumnPanel {
    float: none;
    flex: 1 1 0;
    min-width: 280px;
    /* Legacy emits inline width:33% / 50% / 100% — flex:1 wins on layout
       while the inline style remains as a hint. min-width prevents collapse. */
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

/* Card head (legacy divHdrTitle) — visually merged with the divAttrGrp below */
body.page-commodity-detail .divColumnPanel .divHdrTitle {
    background: var(--commodity-card-fill, #f8fafc);
    border: none;
    border-radius: 8px 8px 0 0;
    margin: 0;
    padding: 8px 10px 0 10px;
    height: auto;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    /* Group name is a bare text node followed (on Prior Cargo Lists only) by
       a.ContentTabLink "More Available" — flex + margin-left:auto on the link
       pushes it flush to the card's right edge regardless of the legacy
       &nbsp;-run CommodityView.ascx.cs:233 bakes in ahead of it. */
    display: flex;
    align-items: baseline;
}

/* Card body (legacy divAttrGrp) — bottom of card pair */
body.page-commodity-detail .divAttrGrp {
    background: var(--commodity-card-fill, #f8fafc);
    border-bottom: 0;        /* override legacy 10px white gap */
    border-radius: 0 0 8px 8px;
    margin: 0;
    padding: 8px 10px;
}

/* When the title is hidden (ShowSectionHeaders=false on some tabs),
   the lone divAttrGrp gets full radius */
body.page-commodity-detail .divColumnPanel > .divAttrGrp:first-child {
    border-radius: 8px;
}

/* "More Available" link inside group titles (e.g. Prior Cargo Lists) */
body.page-commodity-detail .divHdrTitle a.ContentTabLink {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-link);  /* QEN-8776: blue→teal */
    text-decoration: none;
}
body.page-commodity-detail .divHdrTitle a.ContentTabLink u {
    text-decoration: underline;
}

/* Property row — flex instead of float */
body.page-commodity-detail .divAttrRow {
    clear: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    min-height: 22px;
    padding: 2px 0;
}

/* Label (left, gray, right-aligned) */
body.page-commodity-detail .divAttrNm {
    float: none;
    flex: 0 0 145px;
    text-align: right;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--commodity-label-muted, #666);
    white-space: nowrap;
}

/* Status icon column — legacy meaning (Product / TradeName / Private status,
   §12.12.3) preserved. Just unfloat and let flexbox align it. */
body.page-commodity-detail .divStatIcon,
body.page-commodity-detail .divStatIconNoFloat {
    float: none;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
}

/* Row bullets — legacy 9×9 squares -> round dots, matching the treatment
   already applied to the footer legend (§4.1) and grid subheads (§6.8). */
body.page-commodity-detail .divStatIcon .CommodityIcon-Product,
body.page-commodity-detail .divStatIcon .CommodityIcon-Tradename,
body.page-commodity-detail .divStatIcon .CommodityIcon-Private,
body.page-commodity-detail .divStatIcon .CommodityIcon-Synonym,
body.page-commodity-detail .divStatIconNoFloat .CommodityIcon-Product,
body.page-commodity-detail .divStatIconNoFloat .CommodityIcon-Tradename,
body.page-commodity-detail .divStatIconNoFloat .CommodityIcon-Private,
body.page-commodity-detail .divStatIconNoFloat .CommodityIcon-Synonym {
    border-radius: 50%;
}

/* Value (right) */
body.page-commodity-detail .divAttrVal {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
}

/* Read-only value text — dark static; links get blue + underline (rule below) */
body.page-commodity-detail .ComAttrValRead {
    font-weight: 500;
    color: var(--cd-grid-fg, #0a0a0a);
}
body.page-commodity-detail .ComAttrValRead a,
body.page-commodity-detail .divAttrGrp a {
    color: var(--commodity-value-link, #1e40af);
    font-weight: 500;
    text-decoration: underline;
}

/* IBC-mismatch warning span (CommodityView.ascx.cs:294,302) keeps its inline
   background:#ff8d00 — leave alone, just bring text color to default so the
   warning stays loud. */
body.page-commodity-detail .ComAttrValRead[style*="ff8d00"] {
    color: #0a0a0a;
    text-decoration: none;
}

/* -- 6. ASPxGridView subgrid skin (§12.8 / §12.9 / §12.10) ------------------
   All commodity-detail tabs render one or more DevExpress ASPxGridView
   instances inside the card body:
     - DocumentNoteList.gridNotes          (Notes/Docs + bottom of every tab)
     - CommodityContainerCleaning.gridCleaningSteps
     - CommodityContainerCoating.gridProducerNotes / gridCoating
     - CommodityContainerIBCCode.gridIBCCode
     - CommodityContainerIBCCode2021.gridIBCCode2021
     - CommodityContainerPriorCargo.gridPriorCargoCheckNameList / gridPriorCargo
     - CommodityContainerSafety.gridSafety
     - CommodityContainerSynonyms.gridSynonyms
   We give them the same chrome the Milbros listing pages use
   (`milbros-grid.css` §5-7) so the commodity-detail subgrids read as the
   "main" grid look. !important is required because DX inlines styles via
   DXR.axd at runtime and ships its own theme stylesheet (`dx.light.compact.css`).
   --------------------------------------------------------------------- */

body.page-commodity-detail {
    /* Local aliases so we don't depend on tokens that vary by theme. */
    --cd-grid-fg: #0a0a0a;
    --cd-grid-muted-bg: #f5f5f5;
    --cd-grid-muted-fg: var(--text-muted);
    --cd-grid-border: #e5e5e5;
    --cd-grid-row-hover: var(--surface-card);
    --cd-grid-row-selected: var(--surface-muted);
    --cd-grid-link: var(--primary);  /* teal-600 (QEN-8776: links blue→teal) */
    --cd-grid-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 6.1  Outer table -------------------------------------------------------- */
body.page-commodity-detail table.dxgvTable {
    border-collapse: collapse !important;
    border: 0 !important;
    background: #ffffff !important;
    width: 100% !important;
    font-family: var(--cd-grid-font);
}

body.page-commodity-detail table.dxgvControl {
    border: 1px solid var(--cd-grid-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    width: 100% !important;
}

/* DocumentNoteList.ascx wraps the grid in `<div style="width:975px">`; flex it
   to fill the card body. */
body.page-commodity-detail [id$="divNotesMain"] > div[style*="width"]:has(> .dxgvControl),
body.page-commodity-detail [id$="divNotesMain"] > div[style*="width"]:has(.dxgvControl) {
    width: 100% !important;
}

/* CommodityContainerCoating.ascx wraps both the read-only grid and the admin
   edit form in legacy fixed-width tables (`<table width="975">` for
   pnlCoatingDetail; `<table width="950">` for pnlEditCoatingNote). The card
   chrome's 24px padding already provides the side margin, so let these tables
   fill the card content. Without this override, the grid sits 975w against the
   1351w card body — the gap on the right reads as a layout bug. */
body.page-commodity-detail [id$="pnlCoatingDetail"] > table[width="975"],
body.page-commodity-detail [id$="pnlEditCoatingNote"] > table[width="950"] {
    width: 100% !important;
}

/* CommodityContainerCleaning.ascx pins the whole tab to 975px via
   `<asp:Panel pnlCleaningDetails Width="975">` (renders as inline
   `style="width: 975px"`). The DX grid inside already declares Width="100%",
   so once the panel un-pins, gridCleaningSteps fills the card body. The admin
   edit-mode tables (`<table width="945px">` header + per-row reorder list)
   sit below the read-only grid in the same UpdatePanel — same treatment. */
body.page-commodity-detail [id$="pnlCleaningDetails"] {
    width: 100% !important;
}
body.page-commodity-detail [id$="upCleaningStepsEdit"] table[width="945px"] {
    width: 100% !important;
}
/* Coating-tab strip: reskin the legacy navy band (CommodityContainerCleaning.ascx
   L47, hardcoded <div style="...background-color:#4f72a4...">) into the segmented
   pill-tab style already established on cleaning-recommendations.css's
   .CoatingTabContainer (same markup, same tokens) - light muted track, active tab =
   white pill with soft shadow. !important beats the inline bg (its #4f72a4 carries
   no !important). The "View From/To Cleaning Recommendations" link (ascx L40) lost
   its forced white color since the band is no longer dark - now takes the page's
   normal link color (--brand-primary). QEN-8865. */
body.page-commodity-detail div[style="margin-top:-20px"]:has(> [id$="pnlCleaningDetails"]) {
    margin-top: 0 !important;
}
body.page-commodity-detail [id$="pnlCleaningDetails"] > div[style*="background-color:#4f72a4"] {
    background-color: #f1f5f9 !important;
    background-image: none !important;
    width: auto !important;
    min-width: 0;
    max-width: fit-content;
    height: 36px !important;
    padding: 3px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center;
}
body.page-commodity-detail [id$="pnlCleaningDetails"] .CoatingTabContainer {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
    height: 100%;
}
body.page-commodity-detail [id$="pnlCleaningDetails"] .CoatingTabContainer a {
    color: #0f172a !important;
    text-decoration: none !important;
}
body.page-commodity-detail [id$="pnlCleaningDetails"] .CoatingTabContainer span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
}
body.page-commodity-detail [id$="pnlCleaningDetails"] .CoatingTabContainer .active {
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.10) !important;
}
body.page-commodity-detail [id$="pnlCleaningDetails"] .CoatingTabContainer a:hover span:not(.active) {
    background: rgba(255,255,255,.5);
}
body.page-commodity-detail [id$="ucCleaning"] a[href="FromToCleaning.aspx"] {
    color: var(--brand-primary) !important;
}

/* CommodityContainerSafety.ascx pins the whole tab to 975px via
   `<asp:Panel pnlSafetyDetails Width="975">`. The header strip is a
   `<table width="973px">` (modTitleHeaderLightBlue) sitting above the DX
   grid; the admin edit-mode tables (`<table width="950px">` header + per-row
   repeater) live in upSafetyScenariosEdit. Same treatment as Cleaning — let
   the panel and its tables fill the card body. The grid itself declares no
   width, so it follows the freed panel naturally. */
body.page-commodity-detail [id$="pnlSafetyDetails"] {
    width: 100% !important;
}
body.page-commodity-detail [id$="pnlSafetyDetails"] > table[width="973px"],
body.page-commodity-detail [id$="upSafetyScenariosEdit"] table[width="950px"] {
    width: 100% !important;
}
/* The "Safety Scenarios" strip (modTitleHeaderLightBlue table + inner td) is the
   last legacy colored band on this tab — MilbrosWhiteout.css paints it a solid
   var(--brand-primary) bar with white 12px text + a white "Edit" link. Figma
   target: a flat section subtitle with NO filled background, matching the sibling
   card headers (comViewHeader = Inter 16/24 SemiBold #1c2024). Kill the band fill,
   set the heading type, and recolor the now-orphaned white "Edit" link (it
   inherited color:var(--text-on-brand) from the table) to the normal brand link
   color. Same idiom as the Prior Cargo "Edible Oil" band conversion below. QEN-8865. */
body.page-commodity-detail [id$="pnlSafetyDetails"] > table.modTitleHeaderLightBlue,
body.page-commodity-detail [id$="pnlSafetyDetails"] td.modTitleHeaderLightBlue {
    background-color: transparent !important;
    background-image: none !important;
    color: #1c2024 !important;
}
body.page-commodity-detail [id$="pnlSafetyDetails"] td.modTitleHeaderLightBlue {
    font-family: 'Inter', sans-serif;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    padding: 8px 0 4px !important;
}
body.page-commodity-detail [id$="pnlSafetyDetails"] .lbEditModeLink,
body.page-commodity-detail [id$="pnlSafetyDetails"] .lbEditModeLink * {
    color: var(--brand-primary) !important;
}

/* CommodityContainerSynonyms.ascx wraps the synonyms grid in a hardcoded
   `<div style="width:975px;">` (no server id). Match it via :has() on the
   gridSynonyms child — same idiom as the divNotesMain rule above. The grid
   itself declares no width, so it follows once the wrapper is freed. */
body.page-commodity-detail div[style*="width:975px"]:has(> [id$="gridSynonyms"]) {
    width: 100% !important;
}

/* CommodityContainerPriorCargo.ascx ships two panels with legacy fixed-width
   tables — `<table width="975">` for pnlPriorCargoDetail (read-only) and
   `<table width="950">` for pnlEditPriorCargoNote (admin edit). The detail
   panel also has an inline-styled "Edible Oil Prior Cargo Lists" band div
   pinned to `width:975px` (display:table-cell). Free all three so the two
   prior-cargo grids fill the card body. */
body.page-commodity-detail [id$="pnlPriorCargoDetail"] > table[width="975"],
body.page-commodity-detail [id$="pnlEditPriorCargoNote"] > table[width="950"] {
    width: 100% !important;
}
/* The inline-styled "Edible Oil Prior Cargo Lists" band (ascx L172:
   `background-color:#2d3663;color:white;text-align:center;...width:975px;
   display:table-cell`). Figma 2528:23218 renders it as a plain left-aligned
   section heading (Inter SemiBold 18/28, #1c2024) — the "Task card tight/Title"
   node — with NO navy band. Kill the band chrome, set heading type, and give
   it the 24px footer rhythm (Safety-SDS frame uses gap-6 = 24 between children;
   `display:table-cell` makes width:100% shrink-to-fit so force block too). */
body.page-commodity-detail [id$="pnlPriorCargoDetail"] div[style*="width:975px"] {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    color: #1c2024 !important;
    text-align: left !important;
    height: auto !important;
    font-family: 'Inter', sans-serif;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    /* +6px each side comes from the band td's legacy StdPadding, so 18/18
       lands the checkGrid->band and band->banned gaps on ~24. */
    margin: 18px 0 18px 0 !important;
    padding: 0 !important;
}

/* FOSFA/NIOP/EU/China/KOSHER status row (trPriorCargoHdr): legacy 5 fixed-width
   <td>s that stretch to fill the freed 100% table width, spreading the groups
   edge-to-edge. Figma packs them left with 24px gaps and bold 14px labels. Take
   the row out of table layout (display:flex) so the colspan=5 grid rows drive
   the table width and the groups pack left. Scoped by id-suffix — other tabs'
   status rows are untouched. */
body.page-commodity-detail [id$="trPriorCargoHdr"] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    /* grid below carries its own padding-top:5px, so 19 lands the gap on ~24. */
    margin: 0 0 19px 0;
    padding: 0 !important;
}
body.page-commodity-detail [id$="trPriorCargoHdr"] > td {
    width: auto !important;
    flex: 0 0 auto;
    padding: 0 !important;
    border: 0 !important;
}
body.page-commodity-detail [id$="trPriorCargoHdr"] > td > div {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* bare label span ("FOSFA:" etc) — Figma Inter SemiBold 14/20 #000 */
body.page-commodity-detail [id$="trPriorCargoHdr"] > td > div > span:first-child {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    white-space: nowrap;
}
/* status link (Banned/Unacceptable/Likely) is already indigo #4f46e5 underline;
   Figma text-sm/regular, so bump 12->14 and normalise weight */
body.page-commodity-detail [id$="trPriorCargoHdr"] .divAttrGrp,
body.page-commodity-detail [id$="trPriorCargoHdr"] .divAttrGrp a {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* 6.2  Header row --------------------------------------------------------- */
body.page-commodity-detail table.dxgvTable td.dxgvHeader {
    background: var(--cd-grid-muted-bg) !important;
    background-image: none !important;
    padding: 11px 16px !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--cd-grid-border) !important;
    font-family: var(--cd-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: var(--cd-grid-fg) !important;
    vertical-align: middle !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 48px !important;
}

/* DX wraps non-anchor headers in <div>/<table.tblColHeader> — flatten them. */
body.page-commodity-detail table.dxgvTable .dxgvHeader td,
body.page-commodity-detail table.dxgvTable .dxgvHeader .tblColHeader td,
body.page-commodity-detail table.dxgvTable .dxgvHeader .tblColHeader td > div {
    background: transparent !important;
    color: var(--cd-grid-fg) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    vertical-align: middle !important;
}

/* DXR.axd sets non-inheriting `font: tahoma 12px` on inner header divs;
   force Inter 14/600 on every descendant so headers stay consistent. */
body.page-commodity-detail table.dxgvTable td.dxgvHeader,
body.page-commodity-detail table.dxgvTable td.dxgvHeader *,
body.page-commodity-detail table.dxgvTable td.dxgvHeader a,
body.page-commodity-detail table.dxgvTable td.dxgvHeader span {
    font-family: var(--cd-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: var(--cd-grid-fg) !important;
    text-decoration: none !important;
}

body.page-commodity-detail table.dxgvTable td.dxgvHeader a:hover {
    color: var(--cd-grid-link) !important;
}

/* 6.3  Data row ----------------------------------------------------------- */
body.page-commodity-detail table.dxgvTable tr.dxgvDataRow > td,
body.page-commodity-detail table.dxgvTable tr.dxgvDataRowAlt > td {
    height: 42px !important;
    padding: 11px 16px !important;
    font-family: var(--cd-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: var(--cd-grid-fg) !important;
    vertical-align: middle !important;
    background: #ffffff !important;
    background-image: none !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--cd-grid-border) !important;
}

/* Last data row drops its bottom border so it sits flush against the pager
   or card edge. */
body.page-commodity-detail table.dxgvTable tr.dxgvDataRow:last-child > td,
body.page-commodity-detail table.dxgvTable tr.dxgvDataRowAlt:last-child > td {
    border-bottom: 0 !important;
}

body.page-commodity-detail table.dxgvTable tr.dxgvDataRow:hover > td,
body.page-commodity-detail table.dxgvTable tr.dxgvDataRowAlt:hover > td {
    background: var(--cd-grid-row-hover) !important;
}

body.page-commodity-detail table.dxgvTable tr.dxgvFocusedRow > td,
body.page-commodity-detail table.dxgvTable tr.dxgvSelectedRow > td {
    background: var(--cd-grid-row-selected) !important;
    color: var(--cd-grid-fg) !important;
}

/* Inline edit / link buttons inside data cells stay readable. */
body.page-commodity-detail table.dxgvTable tr.dxgvDataRow a,
body.page-commodity-detail table.dxgvTable tr.dxgvDataRowAlt a {
    color: var(--cd-grid-link) !important;
    text-decoration: none !important;
}

body.page-commodity-detail table.dxgvTable tr.dxgvDataRow a:hover,
body.page-commodity-detail table.dxgvTable tr.dxgvDataRowAlt a:hover {
    text-decoration: underline !important;
}

/* 6.4  Empty / no-data row ------------------------------------------------ */
body.page-commodity-detail table.dxgvTable tr.dxgvEmptyDataRow > td {
    background: #ffffff !important;
    color: var(--cd-grid-muted-fg) !important;
    padding: 24px 16px !important;
    font-family: var(--cd-grid-font);
    font-size: 14px !important;
    text-align: center !important;
    border: 0 !important;
}

/* 6.5  Pager -------------------------------------------------------------- */
body.page-commodity-detail .GridPager,
body.page-commodity-detail .dxgvPagerBottomPanel {
    background-color: var(--cd-grid-muted-bg) !important;
    background-image: none !important;
    border-top: 1px solid var(--cd-grid-border) !important;
    border-bottom: 0 !important;
    padding: 6px 16px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    font-family: var(--cd-grid-font);
    color: var(--cd-grid-fg) !important;
    font-size: 14px !important;
}

body.page-commodity-detail .GridPager > div,
body.page-commodity-detail .GridPager table {
    background: transparent !important;
    border: 0 !important;
    border-collapse: collapse !important;
}

body.page-commodity-detail .GridPager table td {
    background: transparent !important;
    padding: 0 8px !important;
    border: 0 !important;
    font-family: var(--cd-grid-font);
    vertical-align: middle !important;
    color: var(--cd-grid-muted-fg) !important;
}

body.page-commodity-detail .GridPager a {
    color: var(--cd-grid-link) !important;
    text-decoration: none !important;
}
body.page-commodity-detail .GridPager a:hover {
    text-decoration: underline !important;
}

/* 6.6  Filter bar (when present, e.g. PriorCargo) ------------------------- */
body.page-commodity-detail .dxgvFilterBar,
body.page-commodity-detail tr.dxgvFilterBar > td {
    background: #ffffff !important;
    border-bottom: 1px solid var(--cd-grid-border) !important;
    padding: 6px 16px !important;
    font-family: var(--cd-grid-font);
    color: var(--cd-grid-muted-fg) !important;
}

/* 6.7  Per-control overrides leaking from inline <style> ------------------
   DocumentNoteList.ascx ships an inline `<style>` that strips left/right
   borders with !important. Our reset already does that — keep parity so
   overall card chrome stays consistent. */
body.page-commodity-detail .dxgvTable {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* 6.8  Category-column status icons — round, centered with label ----------
   Subgrids render category bullets as
       <img class="CommodityIcon-Product" src="/images/clearpixel.gif">
   which MilbrosWhiteout.css scales to a 9×9 inline-block colored *square*
   (clearpixel.gif is a 1×1 transparent shim; the class supplies size + bg).
   Per DESIGN.md §12.8 these are 16×16 round bullets, vertically centered
   against the Category label. We size + round them and use vertical-align
   middle plus a 1px optical lift (Inter's x-height midpoint sits below the
   line's geometric center, so `vertical-align: middle` reads slightly low
   against 14/20 body text). 8px right margin opens the bullet/label gap to
   roughly the spec's 10px once the markup's `&nbsp;` collapses. */
body.page-commodity-detail table.dxgvTable .CommodityIcon-Product,
body.page-commodity-detail table.dxgvTable .CommodityIcon-Tradename,
body.page-commodity-detail table.dxgvTable .CommodityIcon-Private,
body.page-commodity-detail table.dxgvTable .CommodityIcon-Synonym {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    transform: translateY(-1px) !important;
}

/* ============================================================================
   §7  USCG/Reactivity tab — CommodityContainerUSCG.ascx + USCGCompatibilitySearch.ascx
   Spec: DESIGN.md §12.10 (List view + Check Compatibility view)
   Scope: body.page-commodity-detail .uscg-tab
   The two view modes share the same outer chrome — JS toggles which inner row
   is on (`trDetailsTitle`+`trDetails` for List, `trLookup` for Check).
   ============================================================================ */

/* 7.0  Outer table — drop legacy 950w fixed canvas, fill the card content.
   No max-width cap: every other tab on this page (Coating, Cleaning, Safety,
   Synonyms, Prior Cargo — see §6 comments above) frees its legacy fixed-width
   wrapper to `width:100%` of the card body with no cap, so it stretches on
   wide screens. The USCG tab previously re-capped itself at 1351px, leaving
   large unused gutters on wide monitors while every sibling tab filled the
   card — removed for consistency.
   ----------------------------------------------------------------------- */
body.page-commodity-detail .uscg-tab {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    /* Outer kept on auto layout: `table-layout: fixed` would inherit column
       widths from the first row (toggle row, whose right td has
       `width="200"` HTML attr) and clobber the body-row percentages. */
}

body.page-commodity-detail .uscg-tab > tbody > tr > td {
    background: transparent;
}

/* 7.1  Toggle row — View label + radios + chart link
   ----------------------------------------------------------------------- */
body.page-commodity-detail .uscg-tab tr.uscg-toggle > td {
    padding-bottom: 16px !important;
    vertical-align: middle !important;
}

/* Make the cell itself a flex row so every child (label + radio + label …)
   sits on a single baseline with the radio dot vertically centered against
   the label text — same shape as the §12.5.3 Specifications strip. The bare
   <input>+<label> rendering this `<asp:RadioButton>` emits has no <span>
   wrapper, so the alignment has to live on the cell, not on the per-radio
   wrapper. */
body.page-commodity-detail .uscg-tab .uscg-toggle__cell {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    padding: 0 0 16px 0 !important;
}

body.page-commodity-detail .uscg-tab .uscg-toggle__label {
    display: inline-block;
    margin-right: 8px;     /* "View:" → first radio (matches §12.10.1 spec) */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--commodity-meta-muted, #4d4d4d);
}

/* When ASP.NET renders `<asp:RadioButton>` with a `<span>` wrapper (the
   Specifications strip rendering), keep that path styled as an inline-flex
   group. The `.uscg-toggle__cell` is bare here, but leave this in for
   robustness across renderer variants. */
body.page-commodity-detail .uscg-tab .uscg-toggle__cell > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
}

/* Custom radio appearance — same spec as §12.5.3 Specifications strip */
body.page-commodity-detail .uscg-tab .uscg-toggle__cell input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;             /* radio → its label = 6px (matches Specs) */
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

/* Group separator: each non-first radio gets extra left margin so the gap
   between the previous group's label and this radio is 12 — matches the
   §12.10.1 Figma `flex gap 12 items-center` spec for the radio-button row. */
body.page-commodity-detail .uscg-tab .uscg-toggle__cell input[type="radio"] ~ input[type="radio"] {
    margin-left: 12px !important;
}

body.page-commodity-detail .uscg-tab .uscg-toggle__cell input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    transform: translate(-50%, -50%);
}

body.page-commodity-detail .uscg-tab .uscg-toggle__cell input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

body.page-commodity-detail .uscg-tab .uscg-toggle__cell label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-foreground, #0f172a);
    cursor: pointer;
    margin: 0 !important;          /* gap is owned by the input/group selector */
    text-decoration: none !important;
}

/* Right cell — chart link */
body.page-commodity-detail .uscg-tab .uscg-toggle__chart-cell {
    width: auto !important;
    padding: 0 0 16px 0 !important;
    text-align: right !important;
    vertical-align: middle !important;
}

body.page-commodity-detail .uscg-tab .uscg-toggle__chart-wrap {
    float: none !important;
    display: inline-flex;
    align-items: center;
}

/* `.darkBlueLink` (MilbrosWhiteout.css) sets bold + brand-accent !important.
   Override with the same weight to bring it back to Medium. */
body.page-commodity-detail .uscg-tab a.uscg-toggle__chart-link,
body.page-commodity-detail .uscg-tab a.uscg-toggle__chart-link:link,
body.page-commodity-detail .uscg-tab a.uscg-toggle__chart-link:visited {
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 20px !important;
    color: var(--primary) !important;  /* QEN-8776: blue→teal (matches the :hover below) */
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

body.page-commodity-detail .uscg-tab a.uscg-toggle__chart-link:hover {
    color: var(--primary) !important;
}

/* 7.2  Body row — 3 equal cards (Incompat | Compat | Reactivity) with 24px gaps
   ----------------------------------------------------------------------- */
/* Outer auto layout: pin the side cell to 434px (one card) and let the centre
   cell take the rest of the tab's width, however wide that ends up (no cap —
   see §7.0). centre's 24 padding-right is the gap between the centre region
   and the side card. */
body.page-commodity-detail .uscg-tab .uscg-body__centre {
    vertical-align: top !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

body.page-commodity-detail .uscg-tab .uscg-side {
    vertical-align: top !important;
    width: 434px !important;
    height: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Inner centre table — fills centre.contentArea, two equal 50/50 cells split
   visually by 12 + 12 = 24 px of transparent padding (card chrome moves to the
   inner wrappers below so the gap stays bg-free). */
body.page-commodity-detail .uscg-centre {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    table-layout: fixed !important;
}

/* Legacy `ShowLookup()` JS toggles `tr.style.display = 'block'` (instead of '' or
   'table-row'). `display:block` on a `<tr>` breaks table column-sharing — each
   row sizes its cells independently against the same fixed-table width, so the
   title row's `width:305px` inline attr and the body row's auto-width come out
   different. Force `table-row` so columns stay shared. */
body.page-commodity-detail .uscg-centre > tbody > tr.uscg-centre__titles,
body.page-commodity-detail .uscg-centre > tbody > tr.uscg-centre__bodies {
    display: table-row !important;
}

body.page-commodity-detail .uscg-centre > tbody > tr.uscg-centre__lookup {
    display: table-row !important;
}

/* Centre-mode JS toggles `tr.style.display = 'none'`/'block' to switch List ↔
   Check. Add a class hook so we can scope display from CSS without depending
   on the inline style — but JS still writes inline, so we need an override
   chain: when JS sets `display:none`, leave it alone; when JS sets `display:
   block`, our `table-row !important` wins. The result: list mode shows
   titles/bodies, hides lookup; check mode is opposite (managed by JS). */
body.page-commodity-detail .uscg-centre > tbody > tr[style*="display: none"],
body.page-commodity-detail .uscg-centre > tbody > tr[style*="display:none"] {
    display: none !important;
}

body.page-commodity-detail .uscg-centre__titles > td:first-child,
body.page-commodity-detail .uscg-centre__bodies > td:first-child {
    width: 50% !important;
    padding-right: 12px !important;
}

body.page-commodity-detail .uscg-centre__titles > td:last-child,
body.page-commodity-detail .uscg-centre__bodies > td:last-child {
    width: 50% !important;
    padding-left: 12px !important;
}

/* 7.3  List mode — title row tds (layout cells; card chrome lives on the inner
   `.FloatContainer` so the 12+12 padding gap between the two cards stays
   transparent, not filled with card bg).
   ----------------------------------------------------------------------- */
body.page-commodity-detail .uscg-tab .uscg-list__head {
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    height: auto !important;
    /* counter the legacy `.divHdrTitle { padding: 3px 0 0 18px; height: 21px; }`
       inline-style block sitting in the ascx */
}

/* Carry the card chrome on the inner wrapper (top half of each card). */
body.page-commodity-detail .uscg-list__head .FloatContainer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: var(--commodity-card-fill, #f8fafc) !important;
    border-bottom: 1px solid #e5e5e5 !important;
    border-radius: 8px 8px 0 0 !important;
    position: static !important;
    box-sizing: border-box !important; /* keep auto-width FC inside TD's content-box */
    width: 100% !important;             /* …and explicitly fill that content-box */
}

body.page-commodity-detail .uscg-list__head .FloatLeft {
    float: none !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #0a0a0a !important;
}

body.page-commodity-detail .uscg-list__head .FloatRight {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;
}

body.page-commodity-detail .uscg-list__head--incompat .FloatRight {
    color: #ea580c !important;  /* orange-600 — matches Img-Tri-Orange */
}

body.page-commodity-detail .uscg-list__head--compat .FloatRight {
    color: #16a34a !important;  /* green-600 — matches Img-Tri-Green */
}

/* Reset the 9×8 triangle sprite's legacy `margin-top: 3px` so it centers in the
   header's flex row. Keep its existing background-image / background-position. */
body.page-commodity-detail .uscg-list__head .Img-Tri-Orange,
body.page-commodity-detail .uscg-list__head .Img-Tri-Green {
    margin: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* 7.4  Body cells — layout cells; card chrome lives on the inner
   `.uscg-list__scroll` wrapper so the 12+12 padding gap stays transparent.
   ----------------------------------------------------------------------- */
body.page-commodity-detail .uscg-tab .uscg-list__body {
    background: transparent !important;
    border: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
}

/* The internal-scroll wrapper carries the card chrome (bottom half of each
   card). Inline `style` was dropped from the ascx; class drives geometry now. */
body.page-commodity-detail .uscg-list__scroll {
    overflow-y: auto;
    max-height: 250px;
    padding: 4px 12px 12px;
    background: var(--commodity-card-fill, #f8fafc);
    border-radius: 0 0 8px 8px;
    box-sizing: border-box;
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

body.page-commodity-detail .uscg-list__scroll::-webkit-scrollbar {
    width: 6px;
}
body.page-commodity-detail .uscg-list__scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}
body.page-commodity-detail .uscg-list__scroll::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* 7.5  Inner asp:Table — group separator rows + data rows
   ----------------------------------------------------------------------- */
body.page-commodity-detail .uscg-list__rows {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

body.page-commodity-detail .uscg-list__rows td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle !important;
}

/* "Commodities" / "Groups" sub-section heading row.
   BindCargos emits this as `<td colspan=3 class="USCGTypeSeperator">`. */
body.page-commodity-detail .uscg-list__rows td.USCGTypeSeperator {
    padding: 8px 0 4px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    margin-bottom: 4px !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #0a0a0a !important;
    text-transform: none !important;
}

/* First USCGTypeSeperator in the list — drop top padding so it hugs the body top. */
body.page-commodity-detail .uscg-list__rows tr:first-child td.USCGTypeSeperator {
    padding-top: 4px !important;
}

/* Status icon column (16w) — holds the optional triangle */
body.page-commodity-detail .uscg-list__rows td.tdStatusIcon {
    width: 16px !important;
    padding: 4px 8px 4px 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

body.page-commodity-detail .uscg-list__rows td.tdStatusIcon img.Img-Tri-Orange,
body.page-commodity-detail .uscg-list__rows td.tdStatusIcon img.Img-Tri-Green {
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Cargo group code column (28w right-aligned) — Groups sub-section only */
body.page-commodity-detail .uscg-list__rows td.tdCargoGroup {
    width: 28px !important;
    padding: 4px 8px 4px 0 !important;
    text-align: right !important;
    vertical-align: middle !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #737373 !important;
}

/* Label column — takes remaining width */
body.page-commodity-detail .uscg-list__rows td.tdCargoName {
    padding: 4px 0 !important;
    vertical-align: middle !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #0a0a0a !important;
}

/* Commodity rows have `tdCargoName` with colspan=2 (no group code col). Add a
   28px left-padding so the label aligns with Group labels (which start after
   the 28w code col). */
body.page-commodity-detail .uscg-list__rows td.tdCargoName[colspan="2"] {
    padding-left: 28px !important;
}

/* Override the inline `.PadLeftTab { margin-left:15px }` from the ascx — we
   manage padding via the scroll wrapper instead. */
body.page-commodity-detail .uscg-list__rows.PadLeftTab {
    margin-left: 0 !important;
}

/* 7.6  Check Compatibility mode — inner search row + grid + pager
   USCGCompatibilitySearch.ascx renders a 2-row table:
     row 1: <asp:Panel pnlSearch> with "Search:" label + textbox + Search link
     row 2: ASPxGridView (skinned via §6 already)
   ----------------------------------------------------------------------- */
body.page-commodity-detail .uscg-tab td.uscg-lookup {
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border-right: 0 !important;
    vertical-align: top !important;
}

body.page-commodity-detail .uscg-lookup [id$="trLookupHdr"] > td {
    padding: 0 0 16px 0 !important;
}

body.page-commodity-detail .uscg-lookup [id$="pnlSearch"] {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-commodity-detail .uscg-lookup [id$="pnlSearch"] strong {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--commodity-meta-muted, #4d4d4d);
}

/* Search textbox — InputGroup geometry per §12.10.3.1 */
body.page-commodity-detail .uscg-lookup input[id$="txtCriteria"] {
    height: 32px !important;
    padding: 4px 12px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    color: #0a0a0a !important;
    box-shadow: none !important;
    width: 239px !important;
    box-sizing: border-box !important;
}

body.page-commodity-detail .uscg-lookup input[id$="txtCriteria"]:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15) !important;
}

/* Search submit (lnkSearch LinkButton) — primary teal pill per §12.10.3.1 / §12.12.2 */
body.page-commodity-detail .uscg-lookup a.LinkButton[id$="lnkSearch"],
body.page-commodity-detail .uscg-lookup a.LinkButton[id$="lnkSearch"]:link,
body.page-commodity-detail .uscg-lookup a.LinkButton[id$="lnkSearch"]:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-width: 80px !important;
    padding: 0 16px !important;
    background: var(--primary) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

body.page-commodity-detail .uscg-lookup a.LinkButton[id$="lnkSearch"]:hover {
    background: var(--button-primary-hover) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Hide the LinkButton's auto-prepended <ins>&nbsp;</ins> spacer so the label
   centers. Same trick as the §4.1 Cancel button. */
body.page-commodity-detail .uscg-lookup a.LinkButton[id$="lnkSearch"] > ins {
    display: none !important;
}

body.page-commodity-detail .uscg-lookup .DisabledText {
    color: #737373 !important;
    font-family: 'Inter', sans-serif;
    font-style: normal !important;
}

/* The legacy `.BorderRight` class on the lookup td adds a visible separator
   line — drop it (the centre/sidebar gap is the visual divider). */
body.page-commodity-detail .uscg-tab td.uscg-lookup.BorderRight {
    border-right: 0 !important;
}

/* The AutoComplete dropdown (`AutoCompleteExtender_CompletionList`) inherits
   global Milbros styling — leave alone. The §6 grid skin already covers
   `gridUSCGSearch` via `body.page-commodity-detail table.dxgvTable` rules. */

/* 7.6.1  Grid columns — even distribution + centered headers
   --------------------------------------------------------------------------
   Default DX column widths leave Commodity at ~200 / others at ~90 (text
   wraps). Force `table-layout: fixed` and lay 4 cols out 28/24/28/20 so
   "USCG Group Compatible" fits on one line and the chrome reads balanced.
   Header cells get `text-align: center` per the user's "centered headers"
   ask — this overrides DX's default left alignment and the legacy
   `.dxgvHeader { text-align: left }` from `dx.light.compact.css`.
   ----------------------------------------------------------------------- */
/* DX renders the grid as outer `.dxgvControl` (correct 893w) but inner
   `_DXHeaderTable` / `_DXMainTable` and their wrappers (`.dxgvHSDC`,
   `.dxgvCSD`) get an inline `width: 442px` based on the empty-state column
   sum. Override the inline widths so the inner tables fill the outer
   container, then apply our percentage column widths under `table-layout:
   fixed`. */
body.page-commodity-detail .uscg-lookup table.dxgvControl,
body.page-commodity-detail .uscg-lookup table.dxgvTable,
body.page-commodity-detail .uscg-lookup .dxgvHSDC,
body.page-commodity-detail .uscg-lookup .dxgvCSD,
body.page-commodity-detail .uscg-lookup .dxgvHSDC > div,
body.page-commodity-detail .uscg-lookup .dxgvCSD > div {
    width: 100% !important;
    max-width: 100% !important;
}

body.page-commodity-detail .uscg-lookup table.dxgvTable {
    table-layout: fixed !important;
}

body.page-commodity-detail .uscg-lookup table.dxgvTable > tbody > tr > td:nth-child(1) { width: 28% !important; }   /* Commodity */
body.page-commodity-detail .uscg-lookup table.dxgvTable > tbody > tr > td:nth-child(2) { width: 24% !important; }   /* USCG Group */
body.page-commodity-detail .uscg-lookup table.dxgvTable > tbody > tr > td:nth-child(3) { width: 28% !important; }   /* USCG Group Compatible */
body.page-commodity-detail .uscg-lookup table.dxgvTable > tbody > tr > td:nth-child(4) { width: 20% !important; }   /* View */

/* DX header structure:
     <td class="dxgvHeader" style="vertical-align:Bottom; padding:0">
       <table class="tblColHeader">
         <tbody><tr>
           <td class="ColHeaderCaption" style="text-align:left">
             <div>Caption text</div>
           </td>
         </tr></tbody>
       </table>
     </td>
   We need to override vertical alignment on every level (outer td + inner
   caption td + the inner div) so the caption text sits in the cell's
   vertical center, not at the bottom (DX's inline default) or anchored to
   the table-baseline. `nowrap` + an explicit `min-height: 48px` give every
   header column a consistent strip with text vertically centered in it. */
body.page-commodity-detail .uscg-lookup table.dxgvTable tr.dxgvHeader > td,
body.page-commodity-detail .uscg-lookup table.dxgvTable td.dxgvHeader {
    text-align: center !important;
    vertical-align: middle !important;
    height: 48px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
}

/* Inner DX caption table — fill the outer cell and inherit vertical-align. */
body.page-commodity-detail .uscg-lookup table.dxgvTable td.dxgvHeader > table.tblColHeader {
    width: 100% !important;
    height: 100% !important;
    vertical-align: middle !important;
}

/* Inner caption td (DX paints the actual text here, inline style sets
   text-align:left). Center horizontally and vertically. */
body.page-commodity-detail .uscg-lookup table.dxgvTable td.ColHeaderCaption,
body.page-commodity-detail .uscg-lookup table.dxgvTable td.ColHeaderCaptionNoHover,
body.page-commodity-detail .uscg-lookup table.dxgvTable td.ColHeaderCaptionEndNoHover {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 0 !important;
}

/* Caption divs inside `td.dxgvHeader` — every div in the chain (the outer
   wrapper that DX emits and the inner `.Wrap` div) must be the SAME single-
   line geometry, otherwise the inner div becomes taller than the outer and
   visually anchors to the top of the cell instead of its center. */
body.page-commodity-detail .uscg-lookup table.dxgvTable td.dxgvHeader div {
    display: inline-block !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    line-height: 20px !important;
    height: 20px !important;          /* single-line; prevents 2-line overflow */
    text-align: center !important;
}

/* "USCG Group Compatible" caption is rendered as `USCG Group<br> Compatible`
   by the codebehind. With `display: none` on the br, the visible text becomes
   one line — but the rendering engine still reserves the 2-line box for
   inline-block measurement on some browsers, leaving the inner `.Wrap` div
   28 px tall while the outer wrapper stays 8 px and the text floats up to
   the cell top. Forcing the height + line-height combo above pins both divs
   to a single 20-px line; the explicit br hide is still needed in case CSS
   load races the layout pass. */
body.page-commodity-detail .uscg-lookup table.dxgvTable td.dxgvHeader br {
    display: none !important;
}

/* `.Wrap` inside DX header captions — explicit single-line, inline-block,
   centered. Stronger override than the generic `td.dxgvHeader div` rule so
   any `.Wrap`-specific rules elsewhere in the cascade can't reintroduce the
   2-line box. */
body.page-commodity-detail .uscg-lookup table.dxgvTable td.dxgvHeader .Wrap {
    display: inline-block !important;
    width: auto !important;
    height: 20px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    text-align: center !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

/* Body cells stay left-aligned for readability; numeric/icon cells center. */
body.page-commodity-detail .uscg-lookup table.dxgvTable > tbody > tr:not(.dxgvHeader) > td:nth-child(2),
body.page-commodity-detail .uscg-lookup table.dxgvTable > tbody > tr:not(.dxgvHeader) > td:nth-child(3),
body.page-commodity-detail .uscg-lookup table.dxgvTable > tbody > tr:not(.dxgvHeader) > td:nth-child(4) {
    text-align: center !important;
}

/* 7.6.2  Pager — port milbros-grid.css §7c pattern (Show on left, Prev/Next +
   page input on right) into the page-commodity-detail scope. The §6.5 rules
   above cover bg / padding / borders; these add the split-row layout, the
   pill-shaped Prev/Next, the 36×36 page input chip, and the rounded select.
   ----------------------------------------------------------------------- */
body.page-commodity-detail .uscg-lookup .GridPager > div > table > tbody > tr,
body.page-commodity-detail .uscg-lookup .dxgvPagerBottomPanel > div > table > tbody > tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Push tdPageSizeOptions ("Show [N ▾]") to the LEFT, tdPagerButtons to RIGHT */
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPageSizeOptions'],
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPageSizeOptions_0'] {
    order: -1 !important;
    margin-right: auto !important;
    width: auto !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons'],
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons_0'] {
    width: auto !important;
    text-align: right !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons'] > table,
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons_0'] > table {
    display: inline-table !important;
}

body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons'] > table td,
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons_0'] > table td {
    padding: 0 2px !important;
}

/* Hide unused extra-pager-text slots (legend / pnlPagerLeft) */
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdExtraPagerText'],
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdExtraPagerText_0'],
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerText'],
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerText_0'] {
    display: none !important;
}

/* Hide First / Last (only Prev / Next exposed, per the model) */
body.page-commodity-detail .uscg-lookup .GridPager a[class*='Img-PgrFirst'],
body.page-commodity-detail .uscg-lookup .GridPager a[class*='Img-PgrLast'],
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons'] > table td:has(> a[class*='Img-PgrFirst']),
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons'] > table td:has(> a[class*='Img-PgrLast']),
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons_0'] > table td:has(> a[class*='Img-PgrFirst']),
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons_0'] > table td:has(> a[class*='Img-PgrLast']) {
    display: none !important;
}

/* Symbol + label via ::before/::after on Prev / Next */
body.page-commodity-detail .uscg-lookup .GridPager a[class*='Img-PgrPrev']::before { content: '‹'; margin-right: 6px; font-size: 16px; line-height: 1; color: #4d4d4d; }
body.page-commodity-detail .uscg-lookup .GridPager a[class*='Img-PgrPrev']::after  { content: 'Previous'; }
body.page-commodity-detail .uscg-lookup .GridPager a[class*='Img-PgrNext']::before { content: 'Next'; }
body.page-commodity-detail .uscg-lookup .GridPager a[class*='Img-PgrNext']::after  { content: '›'; margin-left: 6px; font-size: 16px; line-height: 1; color: #4d4d4d; }

/* Ghost pill style for Prev / Next */
body.page-commodity-detail .uscg-lookup .GridPager a.Img-Pgr,
body.page-commodity-detail .uscg-lookup .GridPager a[class*='Img-PgrPrev'],
body.page-commodity-detail .uscg-lookup .GridPager a[class*='Img-PgrNext'] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 32px !important;
    padding: 0 12px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #0a0a0a !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
}

body.page-commodity-detail .uscg-lookup .GridPager a[class*='Img-PgrPrev']:hover,
body.page-commodity-detail .uscg-lookup .GridPager a[class*='Img-PgrNext']:hover {
    background: #e5e7eb !important;
}

/* Disabled state */
body.page-commodity-detail .uscg-lookup .GridPager a.Img-PgrFirstDis,
body.page-commodity-detail .uscg-lookup .GridPager a.Img-PgrPrevDis,
body.page-commodity-detail .uscg-lookup .GridPager a.Img-PgrNextDis,
body.page-commodity-detail .uscg-lookup .GridPager a.Img-PgrLastDis {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Page-number input — 36×36 active-page chip */
body.page-commodity-detail .uscg-lookup .GridPager input[id*='txtPage'] {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 4px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0a0a0a !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

body.page-commodity-detail .uscg-lookup .GridPager input[id*='txtPage']:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary) !important;
}

/* "Page X of Y" muted label flanking the input */
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons'] > table > tbody > tr > td:nth-child(3),
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPagerButtons_0'] > table > tbody > tr > td:nth-child(3) {
    color: #4d4d4d !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    padding: 0 4px !important;
}

/* Rows-per-page select — rounded pill with chevron */
body.page-commodity-detail .uscg-lookup .GridPager .grdRecordsToShow {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: #4d4d4d !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    line-height: 20px;
    white-space: nowrap;
}

body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPageSizeOptions'] select,
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPageSizeOptions_0'] select,
body.page-commodity-detail .uscg-lookup .GridPager select#dlGridPageSizes {
    height: 32px !important;
    min-width: 64px !important;
    padding: 0 28px 0 10px !important;
    margin: 0 !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    color: #0a0a0a !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPageSizeOptions'] select:hover,
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPageSizeOptions_0'] select:hover,
body.page-commodity-detail .uscg-lookup .GridPager select#dlGridPageSizes:hover {
    background-color: #f5f5f5 !important;
    border-color: var(--border-strong) !important;
}

body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPageSizeOptions'] select:focus,
body.page-commodity-detail .uscg-lookup .GridPager td[id$='_tdPageSizeOptions_0'] select:focus,
body.page-commodity-detail .uscg-lookup .GridPager select#dlGridPageSizes:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary) !important;
}

/* 7.7  Sidebar — let CommodityView render at full width of the 409w slot
   ----------------------------------------------------------------------- */
body.page-commodity-detail .uscg-tab .uscg-side > div,
body.page-commodity-detail .uscg-tab .uscg-side [id$="divCommodityView"] {
    width: 100% !important;
    box-sizing: border-box;
}

/* CommodityView renders a single `divColumnPanel` inside `divCommodityView`;
   make sure it fills the sidebar slot rather than collapsing to its inline
   33%/50% width. */
body.page-commodity-detail .uscg-tab .uscg-side .divColumnPanel {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

/* ============================================================================
   §8  CleaningChemicalDetail — single-page Cleaning Chemical spec view
   Scope: body.page-commodity-detail .cc-detail
   Reuses §2 (header), §5 (CommodityView cards), §6 (DocumentNoteList grid).
   New rules here are for the page's own chrome: Actions strip, 2-column
   Manufacturer + CommodityView layout, and footer Back / Cancel / Save row.
   ============================================================================ */

/* The cc-detail wrapper carries .q88-card, so card chrome (bg, border, radius,
   shadow, padding, margin) comes from components.css. Width must stay `auto`
   so the q88-card's `margin: 24px 48px` actually constrains the card inside
   the parent — setting `width: 100%` would make the border-box equal the
   parent's content width and the 48px side margins would then push the box
   48px past the parent's right edge (visible as page-level horizontal
   overflow past the viewport).

   `text-align: left` resets the inherited `-webkit-center` that comes down
   from the legacy `<td class="ContentPaneBody">` chain on Milbros pages —
   without this reset, every block-level descendant inside the card that's
   narrower than the card content area sits in the middle instead of flush
   left (observed on the CommodityHeader's `<div style="width: 975px">`
   wrapper sliding right and the "AA118 SAFETY NON-CAUSTIC" title block
   appearing centered in the card). */
body.page-commodity-detail .cc-detail {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    text-align: left;
}

/* The legacy `<table.ContentPane>` chain wraps this card; let the card chrome
   show through. */
body.page-commodity-detail .cc-detail > * {
    background-color: transparent;
}

/* The DNN page mount renders this control inside `<div class="StdPadding">` /
   `<table class="ContentPane">` with a 5px margin chain. Drop that gutter so
   the card hugs the page padding consistently with CommodityContainer pages. */
body.page-commodity-detail:has(.cc-detail) .StdPadding {
    padding: 0;
}

/* CommodityHeader.ascx (CleaningChemical mode) emits a hardcoded
   `<div style="width: 975px">` around the `.commodityHeader` strip + the
   ASPxCallbackPanel ID="cbComHeader" outer wrapper sets its own width via
   .dxpnlControl. Both shrink the header below the card's content width and —
   combined with the inherited `text-align: -webkit-center` from the legacy
   td chain — center the header inside the card. Free both so the header
   spans the card content area edge-to-edge. */
body.page-commodity-detail .cc-detail .dxpnlControl,
body.page-commodity-detail .cc-detail .dxpnlControl > div[style*="width: 975px"],
body.page-commodity-detail .cc-detail .dxpnlControl > div[style*="width:975px"],
body.page-commodity-detail .cc-detail [id$="cbComHeader"],
body.page-commodity-detail .cc-detail [id$="cbComHeader"] > div[style*="width: 975px"],
body.page-commodity-detail .cc-detail [id$="cbComHeader"] > div[style*="width:975px"] {
    width: 100% !important;
    text-align: left;
}

/* `.commodityHeader` itself ships inline `text-align: left; width: 100%` from
   CommodityHeader.ascx — re-affirm so any cached/specificity-shadowed copy
   keeps the strip flush left and full-width inside the card. */
body.page-commodity-detail .cc-detail .commodityHeader {
    width: 100% !important;
    text-align: left;
    /* legacy inline `height: 55px` is a fixed bar — keep it for now so the
       Updated/IMO meta on the right still sits at the right z-index, but
       allow content to grow if the title wraps. */
    height: auto;
    min-height: 55px;
}

/* The legacy `.PageTitle` carries `padding-left: 5px` from CommodityHeader's
   inline `<style>`. Bump it up so the title aligns with the rest of the card
   content (Manufacturer / Product / Coating cards start at the card's left
   padding edge). The card has 28px horizontal padding, so the title sits at
   the card content-box left already — no extra padding needed here. */
body.page-commodity-detail .cc-detail .commodityHeader .PageTitle {
    padding-left: 0;
}

/* -- 8.1  Actions strip — Edit/Add menu under the card header -------------- */
body.page-commodity-detail .cc-detail .cc-detail__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 0 16px 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}

body.page-commodity-detail .cc-detail .cc-detail__actions .cc-detail__spec-slot:empty {
    display: none;
}

/* Hide the whole strip (drop its bottom border + 16px margin) when the only
   element child is an empty spec-slot — happens when the PopupMenu is hidden
   by role-gating (popMenuActions.Visible = false for non-Commodity_Editor users).
   Without this, the strip renders as a 17px dangling separator below the header. */
body.page-commodity-detail .cc-detail .cc-detail__actions:has(> .cc-detail__spec-slot:empty:only-child) {
    display: none;
}

/* PopupMenu emits a div.popMenu wrapper — let it sit inline-flex on the right */
body.page-commodity-detail .cc-detail .cc-detail__actions > div,
body.page-commodity-detail .cc-detail .cc-detail__actions > span {
    display: inline-flex;
    align-items: center;
}

/* -- 8.2  2-column body: Manufacturer panel + CommodityView ---------------- */
body.page-commodity-detail .cc-detail .cc-detail__columns {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    margin-bottom: 24px;
}

body.page-commodity-detail .cc-detail .cc-detail__col {
    box-sizing: border-box;
    min-width: 0;
}

body.page-commodity-detail .cc-detail .cc-detail__col--manuf {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.page-commodity-detail .cc-detail .cc-detail__col--view {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* -- 8.3  Manufacturer panel head + table ---------------------------------- */
/* Section head: same look as `.divHdrTitle` in §5 — light-gray bg, 600 weight,
   16/24, joined to the table below via top-only radius. */
body.page-commodity-detail .cc-detail .cc-detail__section-head {
    background: var(--commodity-card-fill, #f8fafc);
    border-radius: 8px 8px 0 0;
    padding: 8px 12px 0 12px;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}

/* The manufacturer table carries .divAttrGrp, so §5 already provides the
   bg/radius/padding (bottom-corner radius + 8/10 padding). Just override the
   top corners so they butt flush against the section head above. */
body.page-commodity-detail .cc-detail .cc-detail__manuf-table.divAttrGrp {
    border-radius: 0 0 8px 8px;
    width: 100%;
    padding: 8px 12px 12px 12px;
    border-collapse: collapse;
}

/* The §5 `.divColumnPanel > .divAttrGrp:first-child` rule re-applies full
   8px radius when there's no preceding divHdrTitle sibling. Our section head
   is a separate `<div>` not a `.divHdrTitle`, so that rule would otherwise
   match this table. Override here with higher specificity (0,0,3,1). */
body.page-commodity-detail .cc-detail .cc-detail__col--manuf > .cc-detail__manuf-table.divAttrGrp,
body.page-commodity-detail .cc-detail [id$="upManufacturer"] > div .cc-detail__manuf-table.divAttrGrp {
    border-radius: 0 0 8px 8px;
}

/* Label cell — right-aligned muted gray, fixed width so the value column lines
   up across all rows. The legacy .ComAttrLbl class still ships from
   MilbrosWhiteout.css (right-align bold). Override here for the Inter look. */
body.page-commodity-detail .cc-detail .cc-detail__manuf-table .ComAttrLbl {
    width: 90px;
    text-align: right;
    padding: 4px 8px 4px 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: var(--commodity-label-muted, #666);
    vertical-align: top;
    white-space: nowrap;
}

/* Value cell — Inter Medium. The DropDownList for company switching (admin)
   needs to read normally too. */
body.page-commodity-detail .cc-detail .cc-detail__manuf-table tr > td:nth-child(2) {
    padding: 4px 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 18px;
    vertical-align: top;
}

body.page-commodity-detail .cc-detail .cc-detail__manuf-table .ComAttrValRead {
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: var(--cd-grid-fg, #0a0a0a);
}

/* Only Email/Web Site render as real <a>'s inside ComAttrValRead (Company/
   Contact/Tel/Fax are plain text, see CleaningChemicalDetail.ascx.cs) — link
   colour + underline belongs on the anchor only, not the whole value cell,
   or non-clickable text reads as a broken link. */
body.page-commodity-detail .cc-detail .cc-detail__manuf-table a {
    color: var(--commodity-value-link, #1e40af);
    text-decoration: underline;
}

/* DropDownList for company swap (admin edit mode) — match the input chrome
   used in components.css for sidebar-nav selects, but kept compact here. */
body.page-commodity-detail .cc-detail .cc-detail__manuf-table select {
    min-width: 180px;
    padding: 4px 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--border-input, #e2e8f0);
    border-radius: 6px;
}

/* -- 8.4  CommodityView slot ---------------------------------------------- */
/* The right column hosts <uc:CommodityView>. §5 already styles the inner
   `[id$="divCommodityView"]` flex container + .divColumnPanel cards. We just
   need to ensure the column flexes and lets §5 do its thing. The Manufacturer
   panel is 320w; the View slot fills the rest. */
body.page-commodity-detail .cc-detail .cc-detail__col--view [id$="divCommodityView"] {
    width: 100%;
}

/* -- 8.5  Notes / Documents grid ------------------------------------------ */
/* DocumentNoteList.ascx wraps the grid in a hardcoded `<div style="width:975px">`.
   §6's `[id$="divNotesMain"] > div[style*="width"]:has(.dxgvControl)` rule
   already frees it to 100%. We just need the cc-detail wrapper to give it
   bottom margin so the footer isn't flush against the grid pager. */
body.page-commodity-detail .cc-detail .cc-detail__notes {
    width: 100%;
    margin: 0 0 16px 0;
    box-sizing: border-box;
}

/* The notes-list inline `<div style="margin-left:-10px; width:970px;">` from
   the legacy markup is gone in the refreshed ascx; if any cached/old copies
   leak through with the inline width, override here. */
body.page-commodity-detail .cc-detail .cc-detail__notes > div[style*="width"] {
    width: 100% !important;
    margin-left: 0 !important;
}

/* -- 8.6  Footer — Back (read-only) / Cancel + Save (edit) ----------------- */
body.page-commodity-detail .cc-detail .cc-detail__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

body.page-commodity-detail .cc-detail .cc-detail__footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Cancel / Back buttons — outline secondary; Save — primary teal.
   Specificity (0,0,3,2) beats `a:link` (0,0,1,1) in MainWhiteout for most rules;
   !important matches §4.1's existing pattern for cross-portal LinkButton resets. */
body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton.Secondary,
body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton.Secondary:link,
body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton.Secondary:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 36px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    cursor: pointer !important;
    min-width: 80px;
    text-align: center !important;
}

body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton.Secondary:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

/* Save = primary teal */
body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton:not(.Secondary),
body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton:not(.Secondary):link,
body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton:not(.Secondary):visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 36px !important;
    padding: 0 16px !important;
    background: var(--primary) !important;
    background-image: none !important;
    border: 1px solid var(--primary) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    cursor: pointer !important;
    min-width: 80px;
    text-align: center !important;
}

body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton:not(.Secondary):hover {
    background: #0b7c72 !important;
    border-color: #0b7c72 !important;
    color: #ffffff !important;
}

/* Hide ImageManager-emitted icon images + clearpixel spacers + the legacy
   `<ins>&nbsp;</ins>` LinkButton spacer so each button reads as plain text. */
body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton img,
body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton > ins {
    display: none !important;
}

/* The ImageManager emits a label <span> alongside the icon — let it render as
   the button text (no img is showing, so the span carries the label). */
body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton span,
body.page-commodity-detail .cc-detail .cc-detail__footer-actions a.LinkButton .imLabel {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: inherit !important;
    background: transparent !important;
}

/* -- 8.7  Narrow viewport — stack columns under 720px --------------------- */
@media (max-width: 720px) {
    body.page-commodity-detail .cc-detail .cc-detail__columns {
        flex-direction: column;
    }
    body.page-commodity-detail .cc-detail .cc-detail__col--manuf {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ============================================================================
   §9  Documents popup — "Email Documents" / "View Documents" (mpeDocuments)
   Scope: body.page-commodity-detail  (uc:Modal renders inline on the page)
   Spec: QEN-8801 UX R&D feedback (popup polish)

   ONE uc:Modal (#…_mpeDocuments) serves both modes; SetDisplayItems(value)
   in CommodityContainer.ascx toggles them client-side:
     • Email (value=true)  — checkboxes shown; #tblItems + #divfooter visible.
     • View  (value=false) — checkboxes set inline display:none; #tblItems and
                             #divfooter hidden; the report links go clickable.
   Outer card / header / X / footer chrome is painted globally (components.css
   §9.10) and is shared by every popup — left untouched here (incl. the
   site-standard title indent in the header band). Only the body content of
   this popup is corrected below.
   ----------------------------------------------------------------------- */

/* -- 9.1  Email mode — wrap long document filenames -----------------------
   #tblItems lists uploaded-document filenames (e.g.
   "INTERTANKO_Cargo_Tank_Cleanliness_Standards_for_Chemical_Tankers.pdf").
   These are single unbreakable tokens: with the legacy white-space:normal /
   overflow-wrap:normal they set an intrinsic cell width ~431px and spill
   ~80px past the 400px card's right edge. table-layout:fixed pins the table
   to its container; overflow-wrap:anywhere (with the word-break:break-word
   fallback) lets the long token wrap so the list stays inside the card.
   ----------------------------------------------------------------------- */
body.page-commodity-detail #tblItems {
    table-layout: fixed;
    width: 100% !important;
}
body.page-commodity-detail #tblItems td {
    overflow-wrap: anywhere;
    word-break: break-word;
}
body.page-commodity-detail #tblItems td:first-child {
    width: 20px;   /* checkbox column — the rest goes to the filename cell */
}

/* -- 9.2  View mode — align the report links with the prompt --------------
   In View mode the report checkboxes are hidden (inline display:none) but
   their <td> (first column — only the first row carries HTML width="15", the
   others share the column width) keeps occupying the column, indenting every
   link 15px to the right of the "Select the document…"
   prompt above it. Collapse the checkbox cell *only when its checkbox is
   hidden* so the links line up with the prompt at the card's content edge.
   The :has() match re-evaluates live as SetDisplayItems() flips the inline
   display, so Email mode (checkbox display:block) is untouched — the labels
   still sit after the visible checkboxes there.
   ----------------------------------------------------------------------- */
body.page-commodity-detail #tblReports td:first-child:has(input[style*="display: none"]) {
    width: 0 !important;
    padding: 0 !important;
}

/* -- 9.3  Checkbox ↔ document-name top alignment --------------------------
   The row cells render vertical-align:middle (the markup's valign="top" on
   the checkbox cell is overridden by a global td rule), so once a filename
   wraps to two lines the checkbox sits centred against the whole block
   instead of the first line. Top-align both cells so the checkbox lines up
   with the first line of the document name; the checkbox's own ~3px top
   margin optically centres it on that first line.
   ----------------------------------------------------------------------- */
body.page-commodity-detail #tblReports td,
body.page-commodity-detail #tblItems td {
    vertical-align: top !important;
}

/* -- 9.4  Header — title flush-left, X flush-right ------------------------
   The shared modal header cell (.hdrTblBar) carries 16px horizontal padding,
   insetting its inner title/X table 16px from the popup's body-content edges
   (title lands at the body's left + 16, the X at the body's right − 16).
   Drop that padding for THIS popup only so the "Documents: …" title aligns
   with the body content on the left and the X close aligns with it on the
   right.
   Isolation comes from the `body.page-commodity-detail` prefix — the
   mpeDocuments panel-id suffix is also produced by BookingDetailContainer,
   but that page renders under a different body class, so the global popup
   chrome on every other uc:Modal is unaffected.
   The global chrome rule (`body.sidebar-nav .modPopPnl .hdrTblBar`, padding
   16px !important) is specificity (0,3,1); pairing `.modPopPnl` with the
   id-suffix on the same panel element lifts this rule to (0,4,1) so it wins
   on specificity rather than on CSS load order.
   ----------------------------------------------------------------------- */
body.page-commodity-detail .modPopPnl[id$="mpeDocuments_pnlModalPopup"] .hdrTblBar {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* -- 9.5  Attribute/value popups — flat §9.10 hover-card chrome ------------
   Every small info popup fired from CommodityView.ascx (`#TipPopup` span,
   L87) shares ONE legacy "8th popup mechanism" chrome ([[popup-chrome-
   mechanisms-index]]): Scripts/script.js `PopupGenerateGenericLoadingPopup`
   builds a `div#ToolTipPopup > table.toolTipPopupContainer` placeholder,
   then `PopupWSCallSuccess` swaps in server HTML from
   GeneralBusiness.GeneratePopupContent — the same corner-image
   tL/tM/tClose/tR .../contentL/content/contentR/bL/bM/bR table every time
   (chrome in Main.css:1500-1565, tint tweaks in MilbrosWhiteout.css). Covers
   the attribute value detail popup (e.g. "Specific Gravity" ->
   .jqComAttrValueDetailPopup -> GetComAttrDtlGeneric, reported as rendering
   with the old navy/image-bordered layout), the attribute value SOURCE
   popup (.jqComAttrPopup -> "Compare Values" grid), Prior Cargo List,
   Cleaning Chemical Type, and Coating Producer Notes popups — all reuse the
   same #ToolTipPopup/.toolTipPopupContainer, so one generic chrome flatten
   fixes every variant without needing per-popup markup knowledge. Mirrors
   [[historyPopup]] §2 / officer-matrix-person.css §15 for the same
   mechanism elsewhere.
   ----------------------------------------------------------------------- */
body.page-commodity-detail #ToolTipPopup {
    max-width: calc(100vw - 32px) !important;
}
body.page-commodity-detail .toolTipPopupContainer {
    background: #ffffff !important;
    border: 1px solid var(--raw-slate-200, #e2e8f0) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10) !important;
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary, #0f172a);
}

/* Hide the legacy corner-image decorations */
body.page-commodity-detail .toolTipPopupContainer .pointerTl,
body.page-commodity-detail .toolTipPopupContainer .pointerTr,
body.page-commodity-detail .toolTipPopupContainer .tL,
body.page-commodity-detail .toolTipPopupContainer .tR,
body.page-commodity-detail .toolTipPopupContainer .contentL,
body.page-commodity-detail .toolTipPopupContainer .contentR,
body.page-commodity-detail .toolTipPopupContainer .bL,
body.page-commodity-detail .toolTipPopupContainer .bM,
body.page-commodity-detail .toolTipPopupContainer .bR {
    display: none !important;
}

/* Title bar (.tM) -> flat SemiBold-16 heading; right padding reserves room
   for the close X, which moves to an absolutely-positioned overlay below. */
body.page-commodity-detail .toolTipPopupContainer .tM {
    display: block !important;
    background: transparent !important;
    background-image: none !important;
    margin: 0 !important;
    padding: 16px 40px 12px 16px !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--text-primary, #0f172a);
    text-align: left;
}
body.page-commodity-detail .toolTipPopupContainer .tM .sub {
    font-weight: 400;
    color: var(--text-secondary, #475569);
}
/* MilbrosWhiteout.css .tM .sub a:link forces near-white text (--text-on-brand,
   meant for the old colored title bar) with !important; override it here now
   that the title bar is flattened to a white card. */
body.page-commodity-detail .toolTipPopupContainer .tM .sub a:link {
    color: var(--text-secondary, #475569) !important;
}

/* Close (X) -> Lucide X mask, absolutely positioned top-right (the
   container keeps Main.css's `position:relative` as its anchor). */
body.page-commodity-detail .toolTipPopupContainer .tClose {
    display: block !important;
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
    color: var(--text-secondary, #475569);
}
body.page-commodity-detail .toolTipPopupContainer .tClose::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
}
body.page-commodity-detail .toolTipPopupContainer .tClose:hover {
    color: var(--text-primary, #0f172a);
}

/* Body content */
body.page-commodity-detail .toolTipPopupContainer .content {
    background: transparent !important;
    padding: 0 16px 16px 16px !important;
    max-height: 320px;
    overflow: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: var(--text-secondary, #475569);
}

/* Grid-shaped variants (attribute value SOURCE "Compare Values", Cleaning
   Chemical Type) reuse the legacy ColHeader/GridRow[/GridRowAlt] classes ->
   flat header band (teal fill from MilbrosWhiteout.css already applies to
   `.ColHeader TD DIV`; this adds the text treatment) + hairline data rows. */
body.page-commodity-detail .toolTipPopupContainer table {
    width: 100% !important;
    border-collapse: collapse !important;
}
body.page-commodity-detail .toolTipPopupContainer .ColHeader td {
    color: var(--text-on-brand, #ffffff) !important;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 6px !important;
}
body.page-commodity-detail .toolTipPopupContainer .GridRow td {
    padding: 5px 6px !important;
    border-bottom: 1px solid var(--raw-slate-100, #f1f5f9) !important;
    color: var(--text-secondary, #475569);
}

/* ============================================================================
   §10  Notes & Docs tab — search bar (SearchNotes.ascx, `srchNotesDocs`)
   Spec: DESIGN.md §12.8 (Category/Note table) + §12.12.2 (primary button atom)
   Scope: body.page-commodity-detail [id$="srchNotesDocs_..."]
   SearchNotes.ascx renders `<asp:Panel pnlSearch><table width="950"
   align="center" cellpadding="0"><tr><td><strong>Search:</strong> txtCriteria
   lnkSearch</td></tr></table></asp:Panel>` — the legacy centered/fixed-950
   table sits the whole search row in the middle of the (much wider) card
   body instead of flush left. Free the table and reflow its one <td> as a
   flex row, same shape as the §7.6 USCG Check-Compatibility search
   (identical pnlSearch/txtCriteria/lnkSearch component), plus a leading
   search icon on the input per the Figma InputGroup atom (mirrors
   milbros-search.css §4's `.milbros-search-input`; <input> can't take
   ::before/::after generated content so the icon is a background-image).
   ============================================================================ */

/* Kill the legacy centered/fixed-950 table wrapper — presentational `align`/
   `width` HTML attributes lose to any explicit CSS rule regardless of
   specificity, so no !important needed here. */
body.page-commodity-detail [id$="srchNotesDocs_pnlSearch"] table {
    width: auto;
    margin: 0;
}

/* The one <td> holds "Search:" label + textbox + button inline — flex it
   into a left-aligned row. */
body.page-commodity-detail [id$="srchNotesDocs_pnlSearch"] table td {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

body.page-commodity-detail [id$="srchNotesDocs_pnlSearch"] strong {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--commodity-meta-muted, #4d4d4d);
}

/* Search textbox — InputGroup geometry matching the §7.6 USCG search box,
   with a leading 16x16 search icon per the Figma InputGroup atom. */
body.page-commodity-detail input[id$="srchNotesDocs_txtCriteria"] {
    height: 32px !important;
    width: 239px !important;
    padding: 4px 12px 4px 34px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    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='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    color: #0a0a0a !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body.page-commodity-detail input[id$="srchNotesDocs_txtCriteria"]:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15) !important;
}

/* Search submit (lnkSearch LinkButton) — primary teal pill per DESIGN.md
   §12.12.2, same treatment as the §7.6 USCG lookup search button. */
body.page-commodity-detail a.LinkButton[id$="srchNotesDocs_lnkSearch"],
body.page-commodity-detail a.LinkButton[id$="srchNotesDocs_lnkSearch"]:link,
body.page-commodity-detail a.LinkButton[id$="srchNotesDocs_lnkSearch"]:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-width: 80px !important;
    padding: 0 16px !important;
    background: var(--primary) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

body.page-commodity-detail a.LinkButton[id$="srchNotesDocs_lnkSearch"]:hover {
    background: var(--button-primary-hover) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Hide the LinkButton's auto-prepended <ins>&nbsp;</ins> spacer so the label
   centers — same trick as §4.1 / §7.6. */
body.page-commodity-detail a.LinkButton[id$="srchNotesDocs_lnkSearch"] > ins {
    display: none !important;
}

/* ============================================================================
   §11  New Specification modal (mpeNewSpec) — body content re-skin
   Scope: body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"]
   CommodityContainer.ascx L383-398 renders a raw `<table cellpadding="3">`
   inside the `<uc:Modal>` PopupContent. Outer chrome (card/header/X/footer)
   is already painted globally (components.css §9.10) — only this inline
   form body was never touched. The Charterer <select class="NormalTextBox">
   already inherits the global select skin (components.css:1273 — 32h, 8px
   radius, chevron), but `txtSpecificationName` is a bare `<asp:TextBox>`
   with NO class, so no global rule reaches it: it was rendering with the
   raw browser "inset" textbox chrome (2px grey bevel, 0 radius, 12px system
   font) sitting directly under the modernised dropdown. Flatten the legacy
   right-aligned table rows into label+field flex rows and give the text
   input the same treatment already applied to the select.
   ============================================================================ */

/* Widen slightly (ascx Width="350px") so a 140px label column + field don't
   crowd the Charterer combobox's longer company-name options. */
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] {
    width: 380px !important;
}

/* Flatten the legacy `<table cellpadding="3">` to a column flex stack —
   `display:contents` on tbody keeps the table a transparent pass-through so
   `gap` on the table applies directly between the `<tr>` flex rows. Using
   `gap` instead of a `tr:last-child { margin: 0 }` rule means the hidden
   chkCopyPrivateData row (below) doesn't leave a stray trailing gap when
   suppressed. */
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent table {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100% !important;
}
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent table tbody {
    display: contents;
}
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent table tr {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* chkCopyPrivateData row (CommodityContainer.ascx.cs: `Visible =
   SpecificationID != 1`) renders as a bare empty `<td align="right"></td>`
   when suppressed (e.g. viewing the "General Specs" spec) — collapse that
   row entirely instead of leaving a blank flex gap. */
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent table tr:has(> td:empty) {
    display: none;
}

body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent table tr > td {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 !important;
    text-align: left !important;
}

/* Label ("Charterer:" / "Specification Name:") — fixed column so both rows'
   fields line up on the same left edge regardless of label length. */
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent table tr > td > b {
    flex: 0 0 140px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
}

/* Charterer <select> already inherits components.css's global select skin —
   just let it fill the field column. The Specification Name <input> has NO
   class, so give it the matching treatment here (it would otherwise keep
   rendering as a bare browser textbox — see file banner above). */
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent select,
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent input[type="text"] {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    height: 32px !important;
    padding: 4px 12px !important;
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0)) !important;
    border-radius: 8px !important;
    background-color: var(--surface-raised, #ffffff) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary, #0f172a) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
}
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent input[type="text"]:focus {
    border-color: var(--primary, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15) !important;
}

/* RequiredFieldValidator icon (`span.Val` wrapping the global Lucide
   TriangleAlert swap of `img.ValImage`) — keep it inline after the field
   instead of the browser block-default. Hidden via inline `display:none`
   until validation fails. */
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent .Val {
    flex: 0 0 auto;
}

/* "Copy '<Spec>' Data" checkbox row (chkCopyPrivateData, when visible) —
   native checkbox + label, left-aligned under the fields above. */
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent input[id$="chkCopyPrivateData"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary, #6366f1);
}
body.page-commodity-detail [id$="mpeNewSpec_pnlModalPopup"] .modPopContent label[for$="chkCopyPrivateData"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: var(--text-primary, #0f172a);
}

/* ── Conversion Calculator popup (Controls/ConverterPopup.ascx, the calculator
   icon in the Edit-Commodity Specs header) ───────────────────────────────────
   Legacy chrome: `.BorderContainer` panel + teal `.modTitleHeader` bar
   (`.FloatLeft` = "Conversion Type:" label + <select>, `.FloatRight` = a red-gif
   close) + grey `.modMain` body of three input tables (Pressure/Temperature/
   Viscosity, one shown at a time). Re-skinned to the refresh popover: flat white
   rounded card (slate-200 border + shadow/md, 16px pad, Inter), a §9.6.1 select,
   design input chips with a brand focus ring, and a Lucide-X close pinned
   top-right. CSS-only — the popup's on-screen position is fixed in the .ascx
   script. Mirrors the sibling `conversionPopup.css` (the Converter.ascx popup);
   borders use `--raw-slate-200` (not `--input`, which resolves to #e5e5e5 here).
   Width 300px so the Viscosity view's long labels ("Centistokes (cSt):") + input
   + unit ("mm²/sec") fit on one line without wrapping. */

/* Card */
body.page-commodity-detail [id$="_pnlConverterPopup"].BorderContainer {
    width: 300px !important;                        /* beats inline width:240px */
    padding: 16px !important;                       /* beats inline padding:0 */
    background: var(--card-raised, #ffffff) !important;
    border: 1px solid var(--raw-slate-200, #e2e8f0) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10) !important;
    box-sizing: border-box;
    overflow: visible;
    color: var(--foreground, #0f172a);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header — flatten the teal bar; anchor the close X */
body.page-commodity-detail [id$="_pnlConverterPopupHeader"].modTitleHeader {
    display: block;
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 12px 0;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: var(--foreground, #0f172a) !important;
    cursor: move;                                   /* keep drag affordance */
    overflow: visible;
}
/* "Conversion Type:" label (text node) + select, stacked */
body.page-commodity-detail [id$="_pnlConverterPopupHeader"] .FloatLeft {
    float: none;
    display: block;
    padding: 0 24px 0 0;                            /* 24px right reserves room for the X */
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: var(--muted-foreground, #475569);
}
body.page-commodity-detail [id$="_pnlConverterPopupHeader"] .FloatLeft select {
    display: block;
    width: 100% !important;
    margin-top: 6px;
}
/* Close (X) — hide the legacy gifs, draw a Lucide X pinned top-right */
body.page-commodity-detail [id$="_pnlConverterPopupHeader"] .FloatRight {
    float: none;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0 !important;
}
body.page-commodity-detail [id$="_pnlConverterPopupHeader"] .FloatRight a {
    display: block;
    position: relative;
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: var(--muted-foreground, #475569);
}
body.page-commodity-detail [id$="_pnlConverterPopupHeader"] .FloatRight a img { display: none !important; }
body.page-commodity-detail [id$="_pnlConverterPopupHeader"] .FloatRight a::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
}
body.page-commodity-detail [id$="_pnlConverterPopupHeader"] .FloatRight a:hover { color: var(--foreground, #0f172a); }

/* Body — drop the grey fill, left-align, remove inner padding (card has 16px) */
body.page-commodity-detail [id$="_pnlConverterPopup"] .modMain {
    background: transparent !important;
    padding: 0 !important;
    text-align: left !important;
}
/* Conversion rows — fixed layout so inputs align in a column and long
   (Viscosity) labels neither squeeze the input nor wrap. */
body.page-commodity-detail [id$="_pnlConverterPopup"] .modMain table {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin: 0 !important;
}
body.page-commodity-detail [id$="_pnlConverterPopup"] .modMain table td {
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    vertical-align: middle;
    font-family: inherit;
}
/* Label cell */
body.page-commodity-detail [id$="_pnlConverterPopup"] .modMain table td:first-child {
    width: 122px;
    padding-right: 8px;
    font-size: 13px;
    line-height: 20px;
    color: var(--foreground, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
/* Input cell */
body.page-commodity-detail [id$="_pnlConverterPopup"] .modMain table td:nth-child(2) { width: 78px; }
/* Unit cell */
body.page-commodity-detail [id$="_pnlConverterPopup"] .modMain table td:last-child {
    padding-left: 8px;
    font-size: 13px;
    line-height: 20px;
    color: var(--muted-foreground, #475569);
    white-space: nowrap;
    text-align: left;
}
/* Input chips — slate-200 border, 8px radius, brand focus ring.
   `width` needs `!important` to beat the .ascx inline `#tblConvert* INPUT
   { width:75px }` (ID-specificity) rule. */
body.page-commodity-detail [id$="_pnlConverterPopup"] .modMain input {
    width: 100% !important;
    height: 32px !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 4px 10px !important;
    border: 1px solid var(--raw-slate-200, #e2e8f0) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500;
    color: var(--foreground, #0f172a) !important;
    text-align: right !important;
    box-shadow: none !important;
}
body.page-commodity-detail [id$="_pnlConverterPopup"] .modMain input:focus {
    outline: none !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.20) !important;
}