/* QEN-8865 — Milbros "Commodity Note" popup (pceNotes, opened from the
   Commodity Detail "Notes & Docs" tab) re-skin.

   Loads the SAME shared DocumentNoteEdit.ascx control as the Library Note
   (styles/Milbros/MilbrosLibraryNote.css) and the Q88 Inspection Note
   (styles/inspection-note.css), via the SAME LoadControl.aspx MTitle hash.
   Told apart in Blank.Master.cs by params: Commodity Note carries `comID`
   (no `insId`, no Library's `Type`/`MCISTabID`-only shape) — see
   isCommodityNoteLoadControl. Own Figma frame: ISZ58jrGcp1LwMEJeeG00Q node
   2534:20074 ("Milbros: Commodity Note") — a sibling of the Library Note's
   node 2217:13082, but NOT identical:
     - shows the Commodity Name + Specification rows (Library hides both)
     - specification-scope NOTE line is a plain icon+text line, not a boxed
       callout (current legacy markup renders `.NoticeInline` w/ yellow bg)
     - footer has NO grey band — buttons sit flush on white at the card
       bottom (Library's footer is deliberately grey per ITS Figma; do not
       copy that rule here)

   Two scopes in ONE file (loaded twice — Default.master for the parent
   Commodity Detail page, Blank.master for the LoadControl iframe):
     1. body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] — outer
        shell chrome (card, header bar, X close, footer slot). page-commodity-
        detail is already set for this page (Default.Master.cs bodyClass).
     2. body.popup-commodity-note — iframe document scope (DocumentNoteEdit.ascx).

   Toolbar selectors (.dxm-item / img.dxHtmlEditor_Icons_he*) are the
   BROWSER-VERIFIED DevExpress DOM structure carried over from
   inspection-note.css (confirmed live in a prior QEN-8776 session) — NOT the
   .dxtbItem/.dxhe-tlbrBtn guesses in the original MilbrosLibraryNote.css.

   Token re-derivation from this frame's get_variable_defs (NOT memory) —
   base/primary comes back stale teal #0d9488 (frame predates the QEN-8831
   indigo rebrand); use the site's actual current primary #4F46E5 instead,
   consistent with MilbrosLibraryNote.css and every other post-QEN-8831 page:
     base/primary (USE)         #4F46E5   (indigo-600 — QEN-8831 Milbros rebrand)
     base/primary-foreground    #eff6ff
     base/foreground            #0f172a
     base/muted-foreground      #475569
     base/secondary-foreground  #1e293b
     base/border / input        #e2e8f0
     base/muted                 #f1f5f9
     base/card / background     #ffffff
     custom/destructive-60      #dc2626
     spacing scale               4 / 6 / 8 / 12 / 16 / 24
     heights                     h-8 32, h-9 36
     radii                       xs 4, sm 6, md 8, xl 12
     shadow/xs                   0 1px 2px 0 rgba(0,0,0,.05)
     font                        Inter
*/

/* =====================================================================
   1) OUTER SHELL — body.page-commodity-detail scope
   ===================================================================== */

body.page-commodity-detail .modPopPnl[id$="pceNotes_pnlModalPopup"] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10),
                0 1px 2px -1px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    width: min(881px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 48px) !important;
    position: fixed !important;
    left: 50% !important;
    top: 5vh !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] table.modPopupTbl {
    background: transparent;
    border-collapse: collapse;
    width: 881px;
    max-width: 100%;
}

body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] table.modPopupTbl
    > tbody > tr > td.leftCornerIcon,
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] table.modPopupTbl
    > tbody > tr > td.rightCornerIcon {
    width: 0;
    padding: 0;
    background: transparent;
}
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] table.modPopupTbl
    > tbody > tr > td.modPopContentTop {
    display: none;
}

body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] td.hdrTblBar {
    background: transparent;
    border: 0;
    padding: 24px 24px 12px 24px;
}
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] td.hdrTblBar > table {
    width: 100%;
    border-collapse: collapse;
}
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] td.hdrTblBar
    > table > tbody > tr > td {
    padding: 0;
    vertical-align: middle;
}

body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] .modPopTitlePnl {
    color: #0f172a;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1;
    /* !important to beat components.css `body.sidebar-nav .modPopPnl .modPopTitlePnl
       { padding: 0 !important }`. Left-inset ONLY the title text so it lines up
       with the 24px-inset rows below (Commodity Name, Tab:, Category:, etc.) —
       do NOT touch td.hdrTblBar's own padding for this, since that shifts the
       close (X) button and the header's vertical spacing too. */
    padding-left: 24px !important;
}
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"]
    .modPopTitlePnl [id$="lblPopupTitle"] {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1 !important;
}
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"]
    .modPopTitlePnl .popupTitleSub {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #0f172a !important;
    margin-left: 0 !important;
    line-height: 1 !important;
}

/* Close button — Lucide X mask painted slate-900 (same recipe as Library). */
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] a[id$="lnkClose"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    text-decoration: none;
    border: 0;
}
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] a[id$="lnkClose"] > img {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%);
    background-color: #0f172a;
    -webkit-mask-image: var(--icon-x);
    mask-image: var(--icon-x);
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    border: 0;
}

body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] td.mainBG {
    background: transparent;
    padding: 0;
}
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] .modPopContent {
    padding: 0;
    background: transparent;
}
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] .modPopFooter:empty {
    display: none;
}

/* Iframe height: Commodity Note carries two extra rows (Commodity Name +
   Specification incl. the NOTE line) vs the Library Note's 470px baseline —
   Commodity Name (~30) + Specification+NOTE (~54) + Library's 470 ≈ 560. */
body.page-commodity-detail [id$="pceNotes_pnlModalPopup"] iframe#ifDetail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 560px !important;
    border: 0;
    display: block;
    background: #ffffff;
}


/* =====================================================================
   2) IFRAME FORM — body.popup-commodity-note scope (DocumentNoteEdit.ascx)
   ===================================================================== */

body.popup-commodity-note {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #0f172a;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 20px;
    overflow-x: hidden;
    overflow-y: visible;
}
body.popup-commodity-note html,
body.popup-commodity-note,
body.popup-commodity-note > form,
body.popup-commodity-note > form > div {
    box-sizing: border-box;
    max-width: 100%;
}

/* Inline field labels (.NormalBold historically Verdana 12 bold). */
body.popup-commodity-note .NormalBold {
    color: #0f172a !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    height: auto !important;
}

/* ---- Name + Specification block — left-align + aligned value column -------
   The wrapping table is centered by an inherited text-align:-webkit-center,
   pushing both rows toward the middle. Force it full-width so the (flex) rows
   pack left at the standard 24px inset, kill the inherited centering on the
   cells, and pin both label cells to one width so the value column lines up. */
body.popup-commodity-note table:has(tr[id$="trCommodityNm"]) {
    width: 100% !important;
    margin: 0 !important;
}
body.popup-commodity-note tr[id$="trCommodityNm"] > td,
body.popup-commodity-note tr[id$="trSpecification"] > td {
    text-align: left !important;
}
body.popup-commodity-note tr[id$="trCommodityNm"] > td:first-child,
body.popup-commodity-note tr[id$="trSpecification"] > td:first-child {
    width: 150px !important;
}

/* ---- Commodity Name row (trCommodityNm) — label + plain bold value -------- */
body.popup-commodity-note tr[id$="trCommodityNm"] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 24px 0 24px !important;
}
body.popup-commodity-note tr[id$="trCommodityNm"] > td {
    padding: 0 !important;
    width: auto !important;
}
body.popup-commodity-note tr[id$="trCommodityNm"] [id$="lblCommodityName"] {
    color: #0f172a !important;
    font-family: Inter, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* ---- Specification row (trSpecification) — label + checkbox list --------- */
body.popup-commodity-note tr[id$="trSpecification"] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 6px 24px 0 24px !important;
}
body.popup-commodity-note tr[id$="trSpecification"] > td {
    padding: 0 !important;
    width: auto !important;
}
body.popup-commodity-note tr[id$="trSpecification"] > td:first-child {
    padding-top: 0 !important;
}
body.popup-commodity-note span[id$="spanSpecValImage"] {
    float: none !important;
    margin-left: 8px;
}

body.popup-commodity-note table[id$="cblSpecs"] {
    border-collapse: collapse;
}
body.popup-commodity-note table[id$="cblSpecs"] tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}
body.popup-commodity-note table[id$="cblSpecs"] td {
    padding: 0 !important;
}
body.popup-commodity-note table[id$="cblSpecs"] input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0;
}
body.popup-commodity-note table[id$="cblSpecs"] input[type="checkbox"]:checked {
    background-color: #4F46E5;
    border-color: #4F46E5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}
body.popup-commodity-note table[id$="cblSpecs"] label {
    color: #0f172a;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    vertical-align: middle;
    cursor: pointer;
}

/* ---- NOTE line (trImpNote / tblIMPNote) — raw text, no boxed callout ------
   Legacy markup: <table class="NoticeInline"><tr><td class="NormalBold">NOTE:
   </td><td><Literal/></td></tr></table> renders a yellow-background bordered
   box. Figma (2534:30527) is a single plain line: small CircleAlert icon (12
   px, muted) + muted-foreground text, no "NOTE:" label, no box. Strip the box
   chrome, hide the "NOTE:" label cell, and paint the icon via ::before on the
   remaining cell. */
body.popup-commodity-note table[id$="tblIMPNote"] {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    width: auto !important;
}
body.popup-commodity-note table[id$="tblIMPNote"] td.NormalBold {
    display: none !important;
}
body.popup-commodity-note table[id$="tblIMPNote"] td:not(.NormalBold) {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 24px !important;
    color: #475569 !important;
    font-family: Inter, sans-serif;
    font-size: 12px !important;
    line-height: 1 !important;
}
body.popup-commodity-note table[id$="tblIMPNote"] td:not(.NormalBold)::before {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background-color: #475569;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") no-repeat center / contain;
}
body.popup-commodity-note table[id$="tblIMPNote"] td:not(.NormalBold) span {
    font-size: 12px !important;
}

/* ---- Tab / Category / Admin / Important row (trTabCategory) --------------
   Same structure as the Library Note (2 rows: Tab+Category dropdowns, then
   Admin+Important checkboxes) — reuse that layout verbatim. */
body.popup-commodity-note tr[id$="trTabCategory"] > td {
    padding: 12px 24px !important;
}
body.popup-commodity-note tr[id$="trTabCategory"] > td > div {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
}
body.popup-commodity-note tr[id$="trTabCategory"] > td > div > [id$="updTabs"],
body.popup-commodity-note tr[id$="trTabCategory"] > td > div > div:first-child {
    width: 100% !important;
}
body.popup-commodity-note tr[id$="trTabCategory"] [id$="updTabs"] > div,
body.popup-commodity-note tr[id$="trTabCategory"] > td > div > div:first-child > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}
body.popup-commodity-note tr[id$="trTabCategory"] > td > div > div:last-child {
    display: block !important;
    align-self: flex-start !important;
}
body.popup-commodity-note tr[id$="trTabCategory"] > td > div > div:last-child input[type="checkbox"] {
    margin-right: 8px !important;
    vertical-align: middle !important;
    flex-shrink: 0;
}
body.popup-commodity-note tr[id$="trTabCategory"] > td > div > div:last-child label {
    margin-right: 24px !important;
    vertical-align: middle !important;
    cursor: pointer;
}
body.popup-commodity-note tr[id$="trTabCategory"] > td > div > div:last-child label:last-child {
    margin-right: 0 !important;
}

body.popup-commodity-note select[id$="ddlTabs"],
body.popup-commodity-note select[id$="ddlCategory"] {
    height: 32px !important;
    padding: 4px 32px 4px 12px !important;
    border: 1px solid #e2e8f0 !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' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 16px 16px !important;
    color: #475569 !important;
    font-family: Inter, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    width: 150px;
}
body.popup-commodity-note select[id$="ddlTabs"] {
    width: 160px !important;
}
body.popup-commodity-note select[id$="ddlCategory"] {
    width: 200px !important;
}

body.popup-commodity-note input[id$="chkAdmin"],
body.popup-commodity-note input[id$="chkImp"] {
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0;
}
body.popup-commodity-note input[id$="chkAdmin"]:checked,
body.popup-commodity-note input[id$="chkImp"]:checked {
    background-color: #4F46E5;
    border-color: #4F46E5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}
body.popup-commodity-note span:has(> input[type="checkbox"][id$="chkAdmin"]),
body.popup-commodity-note span:has(> input[type="checkbox"][id$="chkImp"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}
body.popup-commodity-note label[for$="chkAdmin"],
body.popup-commodity-note label[for$="chkImp"] {
    color: #0f172a;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}

/* ---- Rich-text editor (DevExpress ASPxHtmlEditor) -------------------------
   Selectors verified against the live DOM in inspection-note.css (QEN-8776):
   li.dxm-item > div.dxm-content > img.dxHtmlEditor_Icons_he<Cmd>. */

body.popup-commodity-note .dxheControl,
body.popup-commodity-note [id$="_richTextEditor"] {
    width: calc(100% - 48px) !important;
    max-width: calc(100% - 48px) !important;
    margin: 0 24px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}
body.popup-commodity-note table:has(.dxheControl) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    table-layout: fixed !important;
}
body.popup-commodity-note table:has(.dxheControl) > tbody > tr > td {
    padding: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}
body.popup-commodity-note table:has(.dxheControl) > tbody > tr > td > div {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body.popup-commodity-note .dxheControl td[id$="_richTextEditor_MainCell"] > table {
    width: 100% !important;
}
body.popup-commodity-note .dxheControl,
body.popup-commodity-note .dxhe-bardock {
    max-width: 100% !important;
}

/* Toolbar band. */
body.popup-commodity-note .dxhe-bardock,
body.popup-commodity-note table.dxhe-bardock {
    background-color: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 10px 12px !important;
}
body.popup-commodity-note .dxhe-bardock .dxm-main,
body.popup-commodity-note .dxhe-bardock .dxmtb,
body.popup-commodity-note .dxhe-bardock .dxm-horizontal {
    background: transparent !important;
    border: 0 !important;
}

/* 28x28 rounded hover target for every icon button (excludes combo edits). */
body.popup-commodity-note .dxhe-bardock .dxm-main .dxm-item:not(.dxtb-comboBoxMenuItem) > .dxm-content {
    position: relative;
    box-sizing: border-box;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 150ms ease;
}
body.popup-commodity-note .dxhe-bardock .dxm-main .dxm-item:not(.dxtb-comboBoxMenuItem):hover > .dxm-content,
body.popup-commodity-note .dxhe-bardock .dxm-main .dxm-item:not(.dxtb-comboBoxMenuItem).dxm-hover > .dxm-content {
    background-color: rgba(15, 23, 42, 0.06) !important;
}
body.popup-commodity-note .dxhe-bardock .dxm-main .dxm-item.dxm-selected > .dxm-content,
body.popup-commodity-note .dxhe-bardock .dxm-main .dxm-item.dxm-checked > .dxm-content {
    background-color: rgba(15, 23, 42, 0.10) !important;
}
body.popup-commodity-note .dxhe-bardock .dxm-item.dxm-disabled {
    opacity: 0.4;
}

/* Hidden per Commodity Note's Figma (not in the toolbar there): strikethrough,
   superscript, subscript, insert-link. Kept for Library/Inspection. */
body.popup-commodity-note .dxhe-bardock .dxm-item:has(img.dxHtmlEditor_Icons_heStrikethrough),
body.popup-commodity-note .dxhe-bardock .dxm-item:has(img.dxHtmlEditor_Icons_heSuperscript),
body.popup-commodity-note .dxhe-bardock .dxm-item:has(img.dxHtmlEditor_Icons_heSubscript),
body.popup-commodity-note .dxhe-bardock .dxm-item:has(img.dxHtmlEditor_Icons_heInsertLinkDialog) {
    display: none !important;
}

/* Kill the DX sprite on every remaining command icon; repaint as a 16x16
   Lucide mask tinted slate (matches Figma's toolbar icon color). */
body.popup-commodity-note .dxhe-bardock img[class*="dxHtmlEditor_Icons_he"] {
    background-image: none !important;
    background-color: #475569 !important;
    width: 16px !important;
    height: 16px !important;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 16px 16px;
            mask-size: 16px 16px;
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heBold {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8H6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8H6'/></svg>");
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heItalic {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='4' x2='10' y2='4'/><line x1='14' y1='20' x2='5' y2='20'/><line x1='15' y1='4' x2='9' y2='20'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='4' x2='10' y2='4'/><line x1='14' y1='20' x2='5' y2='20'/><line x1='15' y1='4' x2='9' y2='20'/></svg>");
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heUnderline {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4v6a6 6 0 0 0 12 0V4'/><line x1='4' y1='20' x2='20' y2='20'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 4v6a6 6 0 0 0 12 0V4'/><line x1='4' y1='20' x2='20' y2='20'/></svg>");
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heLeft {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='15' y1='12' x2='3' y2='12'/><line x1='17' y1='18' x2='3' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='15' y1='12' x2='3' y2='12'/><line x1='17' y1='18' x2='3' y2='18'/></svg>");
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heCenter {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='17' y1='12' x2='7' y2='12'/><line x1='19' y1='18' x2='5' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='17' y1='12' x2='7' y2='12'/><line x1='19' y1='18' x2='5' y2='18'/></svg>");
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heRight {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='21' y1='12' x2='9' y2='12'/><line x1='21' y1='18' x2='7' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='21' y1='12' x2='9' y2='12'/><line x1='21' y1='18' x2='7' y2='18'/></svg>");
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heInsertOrderedList {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='10' y1='6' x2='21' y2='6'/><line x1='10' y1='12' x2='21' y2='12'/><line x1='10' y1='18' x2='21' y2='18'/><path d='M4 6h1v4'/><path d='M4 10h2'/><path d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='10' y1='6' x2='21' y2='6'/><line x1='10' y1='12' x2='21' y2='12'/><line x1='10' y1='18' x2='21' y2='18'/><path d='M4 6h1v4'/><path d='M4 10h2'/><path d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/></svg>");
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heInsertUnorderedList {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>");
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heCheckSpelling {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 16 6-12 6 12'/><path d='M8 12h8'/><path d='m16 20 2 2 4-4'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 16 6-12 6 12'/><path d='M8 12h8'/><path d='m16 20 2 2 4-4'/></svg>");
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heForeColor {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16'/><path d='m6 16 6-12 6 12'/><path d='M8 12h8'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16'/><path d='m6 16 6-12 6 12'/><path d='M8 12h8'/></svg>");
}
/* Indent / Outdent — added to the shared toolbar for THIS popup's Figma
   (IndentDecrease/IndentIncrease); hidden in Library/Inspection scopes. */
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heOutdent {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='21' y1='12' x2='11' y2='12'/><line x1='21' y1='18' x2='11' y2='18'/><path d='m7 8-4 4 4 4'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='21' y1='12' x2='11' y2='12'/><line x1='21' y1='18' x2='11' y2='18'/><path d='m7 8-4 4 4 4'/></svg>");
}
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_Icons_heIndent {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='21' y1='12' x2='11' y2='12'/><line x1='21' y1='18' x2='11' y2='18'/><path d='m3 8 4 4-4 4'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='21' y1='6' x2='3' y2='6'/><line x1='21' y1='12' x2='11' y2='12'/><line x1='21' y1='18' x2='11' y2='18'/><path d='m3 8 4 4-4 4'/></svg>");
}

/* Fore-color split-button drop arrow. */
body.popup-commodity-note .dxhe-bardock img.dxHtmlEditor_heToolbarPopOut {
    background-image: none !important;
    background-color: #475569 !important;
    width: 12px !important;
    height: 12px !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / 12px 12px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / 12px 12px;
}

/* Font-Name + Font-Size combos — clean refresh dropdown (border, radius, Inter). */
body.popup-commodity-note .dxhe-bardock .dxtb-comboBoxMenuItem table.dxeButtonEdit {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    overflow: hidden;
}
body.popup-commodity-note .dxhe-bardock .dxtb-comboBoxMenuItem .dxeEditArea,
body.popup-commodity-note .dxhe-bardock .dxtb-comboBoxMenuItem input {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    color: #1e293b !important;
    background: transparent !important;
}
/* Drop the legacy beveled dropdown button + raster triangle sprite; flat cell
   with a clean chevron matching the native Tab/Category selects. */
body.popup-commodity-note .dxhe-bardock .dxtb-comboBoxMenuItem td.dxeButtonEditButton {
    background: transparent none !important;
    border: none !important;
    border-left: 1px solid #e2e8f0 !important;
}
body.popup-commodity-note .dxhe-bardock .dxtb-comboBoxMenuItem img.dxEditors_edtDropDown {
    background: none !important;
    background-color: #475569 !important;
    width: 12px !important;
    height: 12px !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / 12px 12px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center / 12px 12px;
}

/* Editing surface — a SINGLE flush white field under the toolbar (the "two
   background colors" defect: DX paints .dxheContentArea a 3-D gray and gives
   .dxheDesignViewArea its own border, together rendering as a gray frame
   wrapping a separate white box). Flatten both. */
body.popup-commodity-note .dxheContentArea,
body.popup-commodity-note .dxheContentAreaSys,
body.popup-commodity-note .dxheDesignView,
body.popup-commodity-note .dxheDesignViewArea {
    background: #ffffff !important;
    border: 0 !important;
}

/* Characters-left counter (DX) — not in the design; hide it. */
body.popup-commodity-note [id$="lblCharactersLeft"] {
    display: none !important;
}

/* ---- File row --------------------------------------------------------- */

body.popup-commodity-note td[id$="tdAttachFile"] {
    padding: 12px 24px 0 24px !important;
    color: #1e293b;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}
body.popup-commodity-note td[id$="tdAttachFile"] a[href*="ViewFile"],
body.popup-commodity-note td[id$="tdAttachFile"] a[href*="DesktopModules/ViewFile"],
body.popup-commodity-note td[id$="tdAttachFile"] a[href$=".pdf"] {
    color: #4F46E5;
    font-weight: 500;
    text-decoration: underline;
}
body.popup-commodity-note a[id$="lnkBtnReplace"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    height: 36px !important;
    padding: 8px 16px !important;
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #4F46E5 !important;
    font-family: Inter, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    margin-left: 8px;
    box-shadow: none !important;
    box-sizing: border-box;
    min-width: 0 !important;
}
body.popup-commodity-note a[id$="lnkBtnReplace"]:hover {
    background-color: rgba(var(--primary-tint, 79, 70, 229), 0.08) !important;
}
body.popup-commodity-note a[id$="lnkBtnReplace"] img {
    display: none !important;
}

body.popup-commodity-note td.Disclaimer,
body.popup-commodity-note .Disclaimer {
    color: #1e293b !important;
    font-family: Inter, sans-serif;
    font-size: 12px !important;
    line-height: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    padding: 4px 24px !important;
}
body.popup-commodity-note td[id$="tdAttachFile"] [id$="litModifiedDate"] {
    color: #1e293b;
    font-size: 12px;
    line-height: 16px;
    display: block;
    margin-top: 4px;
}

/* Attach File / Replace upload widget (fu:Upload -> .qq-uploader). */
body.popup-commodity-note td[id$="tdAttachFile"] .qq-uploader {
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
}
body.popup-commodity-note td[id$="tdAttachFile"] #qq-upload-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    height: auto !important;
    width: auto !important;
}
body.popup-commodity-note td[id$="tdAttachFile"] .qq-upload-list:empty {
    display: none !important;
}
body.popup-commodity-note .qq-upload-button,
body.popup-commodity-note .qq-upload-replace-button {
    width: fit-content !important;
    max-width: none !important;
    height: 36px !important;
    padding: 0 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 34px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    margin: 0 !important;
    cursor: pointer;
}
body.popup-commodity-note .qq-upload-button:hover,
body.popup-commodity-note .qq-upload-replace-button:hover {
    background: #f8fafc !important;
}
body.popup-commodity-note .qq-upload-button > ins,
body.popup-commodity-note .qq-upload-replace-button > ins,
body.popup-commodity-note .qq-upload-button > img,
body.popup-commodity-note .qq-upload-replace-button > img {
    display: none !important;
}
body.popup-commodity-note .qq-upload-button::before,
body.popup-commodity-note .qq-upload-replace-button::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    background-color: #0f172a;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>") no-repeat center / 16px 16px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>") no-repeat center / 16px 16px;
    pointer-events: none;
}

/* Uploaded-file display fix. The legacy uploader wrapper (<div style="float:
   left">) plus an empty 250px spacer div take the widget out of flow, so the
   cell height collapses and the "Uploaded:" line overlaps the size-limit
   disclaimer below. Drop the floats, let the widget flow as a normal block,
   and render the upload confirmation on its own clean line. */
body.popup-commodity-note td[id$="tdAttachFile"] > div[style*="float"] {
    float: none !important;
    width: auto !important;
    overflow: hidden;
}
body.popup-commodity-note td[id$="tdAttachFile"] > div[style*="float"] > div[style*="float"] {
    display: none !important;
}
body.popup-commodity-note td[id$="tdAttachFile"] .qq-uploader,
body.popup-commodity-note td[id$="tdAttachFile"] #qq-upload-list,
body.popup-commodity-note td[id$="tdAttachFile"] .qq-upload-success {
    float: none !important;
    height: auto !important;
    overflow: visible !important;
}
body.popup-commodity-note #qq-upload-confirm {
    display: block !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 16px !important;
    margin-top: 2px !important;
}
body.popup-commodity-note #qq-upload-confirm br {
    display: none !important;
}
/* Drop the legacy red delete.gif on the uploader's Remove link — text only. */
body.popup-commodity-note #qq-upload-remove img {
    display: none !important;
}
body.popup-commodity-note #qq-upload-remove {
    color: #4F46E5 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* ---- Footer — NO grey fill band (Figma: buttons flush on white, only a
   hairline top divider). Copies the Inspection Note's fix, NOT the Library
   Note's deliberate grey band (that file's Figma frame differs). ----------- */
body.popup-commodity-note table:has(a[id$="_lbSave"]) {
    width: calc(100% - 48px) !important;
    margin: 16px 24px 0 24px !important;
    background-color: transparent !important;
    border-top: 1px solid #e2e8f0 !important;
    border-collapse: collapse !important;
}
body.popup-commodity-note table:has(a[id$="_lbSave"]) > tbody > tr {
    height: auto !important;
}
body.popup-commodity-note table:has(a[id$="_lbSave"]) > tbody > tr > td {
    padding: 12px 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
}
body.popup-commodity-note table:has(a[id$="_lbSave"]) > tbody > tr > td:not([align="right"]) {
    display: none !important;
}
body.popup-commodity-note table:has(a[id$="_lbSave"]) > tbody > tr > td[align="right"] {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 16px !important;
    width: auto !important;
}

body.popup-commodity-note a[id$="_lbCancel"],
body.popup-commodity-note a[id$="_lbDelete"],
body.popup-commodity-note a[id$="_lbSave"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 36px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-family: Inter, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    border: 0;
    box-shadow: none !important;
    text-shadow: none !important;
    min-width: 0 !important;
}
body.popup-commodity-note a[id$="_lbCancel"] {
    background-color: transparent !important;
    background-image: none !important;
    color: #0f172a !important;
    border: 0 !important;
}
body.popup-commodity-note a[id$="_lbCancel"]:hover {
    background-color: rgba(15, 23, 42, 0.05) !important;
}
body.popup-commodity-note a[id$="_lbDelete"] {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
body.popup-commodity-note a[id$="_lbDelete"]:hover {
    background-color: #f8fafc !important;
}
body.popup-commodity-note a[id$="_lbSave"] {
    background-color: #4F46E5 !important;
    background-image: none !important;
    color: #eff6ff !important;
    border: 0 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
body.popup-commodity-note a[id$="_lbSave"]:hover {
    opacity: 0.9;
}
body.popup-commodity-note a[id$="_lbCancel"] img,
body.popup-commodity-note a[id$="_lbDelete"] img,
body.popup-commodity-note a[id$="_lbSave"] img {
    display: none !important;
}
body.popup-commodity-note a.LinkButton > ins {
    display: none !important;
}

/* =====================================================================
   3) SUB-MODALS (Delete/Cancel/Remove-file confirm dialogs) — render inside
   the note iframe (body.popup-commodity-note); components.css §9.10 doesn't
   reach Blank.master, so chrome is restated here (same recipe as
   MilbrosLibraryNote.css's equivalent section).
   ===================================================================== */

body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10),
                0 1px 2px -1px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) table.modPopupTbl {
    background: transparent;
    border-collapse: collapse;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) td.leftCornerIcon,
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) td.rightCornerIcon {
    width: 0;
    padding: 0;
    background: transparent;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) td.modPopContentTop {
    display: none;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) td.mainBG {
    background: transparent;
    padding: 0;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) td.hdrTblBar {
    background: transparent;
    border: 0;
    padding: 24px 24px 12px 24px;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) .modPopTitlePnl [id$="lblPopupTitle"],
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) .modPopTitlePnl .popupTitleSub {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #0f172a;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) .modPopTitlePnl [id$="lblPopupTitle"] {
    font-weight: 600;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) a[id$="lnkClose"] > img {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%);
    background-color: #0f172a;
    -webkit-mask-image: var(--icon-x);
    mask-image: var(--icon-x);
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) .modPopContent {
    padding: 0 24px 16px 24px;
    color: #0f172a;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 20px;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) .modPopFooter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background-color: transparent;
    border-top: 1px solid #e2e8f0;
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) .modPopFooter a.LinkButton,
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) .modPopFooter a[class*="LinkButton"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    border: 0;
    background: #4F46E5;
    color: #eff6ff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) .modPopFooter a.LinkButton.Secondary {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
body.popup-commodity-note .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) .modPopFooter a.LinkButton img {
    display: none !important;
}