/* QEN-8704 — Milbros Library Note modal (pceNotes) re-skin.
   Figma: ISZ58jrGcp1LwMEJeeG00Q node 2217:13082 (Milbros: Library Note).

   Two scopes in ONE file (loaded twice — once by Default.master for the
   parent Library.aspx page, once by Blank.master for the LoadControl iframe
   that renders DocumentNoteEdit.ascx):

   1. body.page-milbros-library .modPopPnl[id$="pceNotes_pnlModalPopup"]
      — outer shell chrome (card, header bar, X close, footer slot).
      Sub-modals on the same page (mpeDeleteNote / mpeCancelNote /
      mpeRemoveFile) also live under page-milbros-library so they inherit
      the same chrome.

   2. body.popup-library-note  — iframe document scope. Body class set in
      Blank.Master.cs gated on MTitle hash 554E4327…3463363465083, so other
      LoadControl iframes are unchanged.

   Token re-derivation from this file's get_variable_defs (NOT memory):
     base/primary               #4F46E5   (indigo-600 — QEN-8831 Milbros rebrand, was teal-600)
     base/primary-foreground    #eff6ff
     base/foreground            #0f172a
     base/secondary-foreground  #1e293b
     base/muted-foreground      #475569
     base/border / input        #e2e8f0
     base/muted                 #f1f5f9
     base/card / background     #ffffff
     spacing scale              4 / 6 / 8 / 12 / 16 / 24
     heights                    h-8 32, h-9 36
     radii                      sm 6, md 8, xl 12
     shadow/sm                  0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1)
     font                       Inter
*/

/* =====================================================================
   1) OUTER SHELL — body.page-milbros-library scope
   ===================================================================== */

body.page-milbros-library .modPopPnl[id$="pceNotes_pnlModalPopup"] {
    /* Card chrome — Figma root frame */
    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; /* clip table corners */
    /* Override inline width="750px" applied by Modal.ascx codebehind.
       Target Figma w-833, cap at viewport width minus 48px so the modal
       never overflows visible space. */
    width: min(833px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 48px) !important;
    /* Center on viewport. ACT's ModalPopupExtender positions the panel
       near the trigger element via inline `position: absolute; left: X;
       top: Y`, which can push the modal off-screen right when triggered
       from a grid row near the right edge. Force centered viewport
       positioning so the modal is always fully visible. */
    position: fixed !important;
    left: 50% !important;
    top: 5vh !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

/* The outer modPopupTbl is the layout table — make it transparent so the
   panel's chrome is what the user sees. Width comes from the pceNotes
   Width="750" attribute; widen via the inner content padding. */
body.page-milbros-library [id$="pceNotes_pnlModalPopup"] table.modPopupTbl {
    background: transparent;
    border-collapse: collapse;
    width: 833px; /* Figma frame width */
    max-width: 100%;
}

/* Hide the legacy corner-icon TDs (left/right gutter rounding) — the
   panel border-radius does the rounding now. */
body.page-milbros-library [id$="pceNotes_pnlModalPopup"] table.modPopupTbl
    > tbody > tr > td.leftCornerIcon,
body.page-milbros-library [id$="pceNotes_pnlModalPopup"] table.modPopupTbl
    > tbody > tr > td.rightCornerIcon {
    width: 0;
    padding: 0;
    background: transparent;
}
body.page-milbros-library [id$="pceNotes_pnlModalPopup"] table.modPopupTbl
    > tbody > tr > td.modPopContentTop {
    display: none;
}

/* Header strip: pt-24 / pb-12 / px-24 (Figma). The hdrTblBar td paints
   the whole header row — strip the legacy bg/border and apply Figma
   padding. Title fonts come from Figma: Inter 16/1 semibold for the
   prefix and regular 16/1 for the sub. */
body.page-milbros-library [id$="pceNotes_pnlModalPopup"] td.hdrTblBar {
    background: transparent;
    border: 0;
    /* !important — a components.css rule otherwise forces 16px all round.
       Trim top/bottom so the title sits closer to the Tab/Category row. Keep
       L/R at 0: the header's inner layout table ALREADY provides the 24px side
       inset for both the title and the close (X), so forcing 24 here double-
       inset the title (QEN-8865). */
    padding: 20px 0 4px 0 !important;
}

body.page-milbros-library [id$="pceNotes_pnlModalPopup"] td.hdrTblBar
    > table {
    width: 100%;
    border-collapse: collapse;
}

body.page-milbros-library [id$="pceNotes_pnlModalPopup"] td.hdrTblBar
    > table > tbody > tr > td {
    padding: 0;
    vertical-align: middle;
}

body.page-milbros-library [id$="pceNotes_pnlModalPopup"]
    .modPopTitlePnl {
    color: #0f172a;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1;
    /* Left-inset the title 24px so its text lines up with the field TEXT below
       (the Tab:/Category: labels sit at their cell edge + 24px cell padding).
       hdrTblBar's OWN L/R padding must stay 0 (see above) so this 24px is the
       only left inset — forcing 24 on both double-inset the title (QEN-8865). */
    padding-left: 24px !important;
}

body.page-milbros-library [id$="pceNotes_pnlModalPopup"]
    .modPopTitlePnl [id$="lblPopupTitle"] {
    /* !important to beat components.css `body.sidebar-nav .modPopPnl
       [id$="_lblPopupTitle"] { font-size: 18px !important }` */
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1 !important;
}

body.page-milbros-library [id$="pceNotes_pnlModalPopup"]
    .modPopTitlePnl .popupTitleSub {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #0f172a !important;
    margin-left: 0 !important; /* ": " already in the markup label */
    line-height: 1 !important;
}

/* Close button — replace red GIF with a Lucide X mask painted slate-900.
   Memory rule: don't override background-color/background on a mask-painted
   element when relying on currentColor. We're painting EXPLICITLY here
   (NOT via global Img-Std rule), so background-color is the paint color. */
body.page-milbros-library [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-milbros-library [id$="pceNotes_pnlModalPopup"]
    a[id$="lnkClose"] > img {
    width: 24px;
    height: 24px;
    /* Kill the raster pixels — mask clips, filter collapses image to black */
    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;
}

/* Main content cell — kill legacy chrome and let the iframe fill the
   card. The iframe (pceNotes content) is 833px wide minus 24L+24R when
   we want body padding, BUT the iframe content has its OWN padding via
   the .library-note-form scope, so the iframe spans full width inside
   the card and the inner form handles its own L/R inset. */
body.page-milbros-library [id$="pceNotes_pnlModalPopup"] td.mainBG {
    background: transparent;
    padding: 0;
}

body.page-milbros-library [id$="pceNotes_pnlModalPopup"]
    .modPopContent {
    padding: 0;
    background: transparent;
}

/* The pceNotes shell has empty pnlFooter (buttons live in iframe form);
   keep it collapsed so it doesn't add height. */
body.page-milbros-library [id$="pceNotes_pnlModalPopup"]
    .modPopFooter:empty {
    display: none;
}

/* Widen the iframe to ~833 minus any side gutters. The markup pceNotes
   iframe is 700px — we override here to match Figma. Width 785 leaves
   24px L/R reserved for the inner library-note-form padding scopes that
   handle their own header/filter/file-row padding. Actually we set 833
   so the iframe fills the whole card width and inner form provides the
   horizontal inset. */
body.page-milbros-library [id$="pceNotes_pnlModalPopup"] iframe#ifDetail {
    /* Override height="380" + width="700" HTML attributes set in
       LibraryNoteList.ascx. Width matches card (responsive — fits
       viewport); height fits the inner form content tightly:
         filter row (88) + RTE (200) + tdAttach (68) + footer (61) +
         inter-section gaps (~30) ≈ 447px.
       470 leaves a small breathing-room buffer without creating an
       empty white strip below the footer like the original 540 did. */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 470px !important;
    border: 0;
    display: block;
    background: #ffffff;
}


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

body.popup-library-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;
    /* Hide horizontal overflow only (DX menu sticks 7px past body); allow
       vertical so the iframe body grows with content. */
    overflow-x: hidden;
    overflow-y: visible;
}

body.popup-library-note html,
body.popup-library-note,
body.popup-library-note > form,
body.popup-library-note > form > div {
    box-sizing: border-box;
    max-width: 100%;
}

/* Hide rows we don't want in the Library variant (Commodity name +
   Specification rows render but are .Visible=false on the codebehind for
   Library type — keep this defensive). */
body.popup-library-note tr[id$="trCommodityNm"][style*="display: none" i],
body.popup-library-note tr[id$="trSpecification"][style*="display: none" i],
body.popup-library-note tr[id$="trImpNote"][style*="display: none" i] {
    display: none !important;
}

/* Filter row (Tab + Category + Checkboxes) — Figma's `2217:13090`.
   Original ASCX has TWO checkboxes (Admin* + Important Note**) which the
   user explicitly kept (Figma's single "Link to Commodites" was an
   oversight). To keep the layout tidy at 833w, lay out as 2 rows:
   Row 1: Tab + Category dropdowns
   Row 2: Admin + Important Note checkboxes
   This matches the spirit of Figma's compact filter row while keeping
   both checkboxes per the locked scope. */
body.popup-library-note tr[id$="trTabCategory"] > td {
    /* No top padding — the header already supplies the gap above; keeps the
       Tab/Category row close under the title. */
    padding: 0 24px 12px 24px !important;
}
body.popup-library-note tr[id$="trTabCategory"] > td > div {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
}

/* The inner Panel (updTabs) — un-cap its 70% width so it takes full row. */
body.popup-library-note tr[id$="trTabCategory"] > td > div > [id$="updTabs"],
body.popup-library-note tr[id$="trTabCategory"] > td > div > div:first-child {
    width: 100% !important;
}

/* Inner Tab/Category flex row — keep horizontal, gap 16 between fields. */
body.popup-library-note tr[id$="trTabCategory"] [id$="updTabs"] > div,
body.popup-library-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;
}

/* The checkbox container is the LAST direct child of the outer column.
   Use inline display (not flex) so each <input> + <label> pair tracks
   together — flex with gap puts gap BETWEEN every flex child, which
   pushes the label far from its own checkbox. Margins handle the
   spacing instead. */
body.popup-library-note tr[id$="trTabCategory"] > td > div > div:last-child {
    display: block !important;
    align-self: flex-start !important;
}

body.popup-library-note tr[id$="trTabCategory"] > td > div > div:last-child input[type="checkbox"] {
    margin-right: 8px !important; /* gap-2 from input to its label */
    vertical-align: middle !important;
    flex-shrink: 0;
}

body.popup-library-note tr[id$="trTabCategory"] > td > div > div:last-child label {
    margin-right: 24px !important; /* gap between this pair and the next */
    vertical-align: middle !important;
    cursor: pointer;
}

body.popup-library-note tr[id$="trTabCategory"] > td > div > div:last-child label:last-child {
    margin-right: 0 !important;
}

/* Inline field labels — Figma puts them adjacent to inputs with gap-12.
   The .NormalBold class historically rendered Verdana 12 bold; restyle. */
body.popup-library-note .NormalBold,
body.popup-library-note tr[id$="trTabCategory"] .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;
}

/* Dropdowns (Tab / Category) — Figma input default state: h-32 px-12 py-4,
   border 1px #e2e8f0, rounded-md 8, font 14/20 #475569, bg white, with
   Lucide chevron-down 16 on the right. appearance:none kills the native
   chevron — we paint our own via background-image SVG. */
body.popup-library-note select[id$="ddlTabs"],
body.popup-library-note select[id$="ddlCategory"] {
    height: 32px !important;
    padding: 4px 32px 4px 12px !important; /* extra right for chevron */
    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-library-note select[id$="ddlTabs"] {
    width: 160px !important;
}

/* Category text values can be longer (e.g. "Cleaning-General",
   "Coating - General") — give it more room so the value doesn't get
   truncated mid-word. */
body.popup-library-note select[id$="ddlCategory"] {
    width: 200px !important;
}

/* Checkboxes (Admin* / Important Note**) — Figma's "Link to Commodites"
   pattern: 16×16, bg #4F46E5 when checked (QEN-8831: indigo, was #0d9488
   teal), white check inside, rounded-4, shadow-xs. We keep both checkboxes
   per scope decision and style the native input via CSS (no markup change). */
body.popup-library-note input[id$="chkAdmin"],
body.popup-library-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-library-note input[id$="chkAdmin"]:checked,
body.popup-library-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;
}

/* Native ASP <asp:CheckBox> renders <input> + <label> as siblings inside
   a <span>. Pull the wrapping span flex so the box + label sit on one row
   with the Figma gap-8. */
body.popup-library-note span:has(> input[type="checkbox"][id$="chkAdmin"]),
body.popup-library-note span:has(> input[type="checkbox"][id$="chkImp"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}

body.popup-library-note label[for$="chkAdmin"],
body.popup-library-note label[for$="chkImp"] {
    color: #0f172a;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
}

/* RTE wrapper — frame the DevExpress widget. Width 785px = body 833
   minus 24+24 L/R margin. Use margin (not parent td padding) because
   table-cell padding doesn't honor box-sizing border-box: padding adds
   to width-100% and overflows the body. */
body.popup-library-note .dxheControl,
body.popup-library-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;
}

/* Wrap the RTE table within the iframe form's outer table — the table
   containing the RTE is the one with the `.dxheControl` descendant.
   Constrain its td to the body width (no padding — margin lives on the
   RTE itself above). */
body.popup-library-note table:has(.dxheControl) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    table-layout: fixed !important;
}
body.popup-library-note table:has(.dxheControl) > tbody > tr > td {
    padding: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* Force-clamp inner DX toolbar elements so they don't push the body
   horizontally even if their intrinsic content is wider than the RTE. */
body.popup-library-note .dxheControl,
body.popup-library-note .dxhe-bardock {
    max-width: 100% !important;
}

/* RTE toolbar — bg muted, border-b, px-12 py-10, gap-2px between buttons.
   DevExpress paints the toolbar via .dxhe-bardock + .dxtbControl. */
body.popup-library-note .dxhe-bardock,
body.popup-library-note table.dxhe-bardock {
    background-color: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 10px 12px !important;
}

/* RTE toolbar buttons — VERIFIED DevExpress DOM.
   The real markup is  li.dxm-item > div.dxm-content > img.dxHtmlEditor_Icons_he<Cmd>
   (confirmed live). The prior .dxtbItem/.dxhe-tlbrBtn/.dxbButton selectors never
   matched, so the toolbar rendered its RAW multi-color DX sprites (e.g. a green
   insert-link globe) instead of the flat slate Lucide icons the Figma shows.
   This block ports the verified treatment used by the sibling Commodity /
   Inspection Note stylesheets. */
body.popup-library-note .dxhe-bardock .dxm-main,
body.popup-library-note .dxhe-bardock .dxmtb,
body.popup-library-note .dxhe-bardock .dxm-horizontal {
    background: transparent !important;
    border: 0 !important;
}

/* 28x28 rounded hover target for every icon button (excludes combo edits). */
body.popup-library-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-library-note .dxhe-bardock .dxm-main .dxm-item:not(.dxtb-comboBoxMenuItem):hover > .dxm-content,
body.popup-library-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-library-note .dxhe-bardock .dxm-main .dxm-item.dxm-selected > .dxm-content,
body.popup-library-note .dxhe-bardock .dxm-main .dxm-item.dxm-checked > .dxm-content {
    background-color: rgba(15, 23, 42, 0.10) !important;
}
body.popup-library-note .dxhe-bardock .dxm-item.dxm-disabled {
    opacity: 0.4;
}

/* The Library Note Figma (2217:13082) uses the SAME shared toolbar component as
   the Commodity Note: Font Name, Font Size, B/I/U, align, ordered/unordered
   list, Outdent/Indent, font-color, spell-check. It does NOT show strikethrough,
   super/subscript, or insert-link — hide those (the shared .ascx renders them).
   Font Name + Indent are NO LONGER hidden here (the earlier guard wrongly hid
   them — they ARE in this frame). NOTE: this drops strikethrough / super- /
   subscript / insert-link from the Library editor toolbar (functional change,
   matches the design + the sibling Commodity Note). */
body.popup-library-note .dxhe-bardock .dxm-item:has(img.dxHtmlEditor_Icons_heStrikethrough),
body.popup-library-note .dxhe-bardock .dxm-item:has(img.dxHtmlEditor_Icons_heSuperscript),
body.popup-library-note .dxhe-bardock .dxm-item:has(img.dxHtmlEditor_Icons_heSubscript),
body.popup-library-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 #475569). */
body.popup-library-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-library-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-library-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-library-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-library-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-library-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-library-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-library-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-library-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-library-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-library-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>");
}
body.popup-library-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-library-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>");
}

/* Fore-color split-button drop arrow (DX heToolbarPopOut, not an _Icons_ sprite). */
body.popup-library-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-library-note .dxhe-bardock .dxtb-comboBoxMenuItem table.dxeButtonEdit {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    overflow: hidden;
}
body.popup-library-note .dxhe-bardock .dxtb-comboBoxMenuItem .dxeEditArea,
body.popup-library-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;
}

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

/* File row + caption — Figma 2217:13095 wrapper has px-24 + gap-12 col.
   In current ASCX, the file link literal and Remove anchor live inside
   td#…_tdAttachFile, with the Note: caption in the next <tr>. Add the
   24px L/R inset on these and visually group them. */
body.popup-library-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;
}

/* PDF file link inside literal (renders as <a target=_blank>) */
body.popup-library-note td[id$="tdAttachFile"] a[href*="ViewFile"],
body.popup-library-note td[id$="tdAttachFile"] a[href*="DesktopModules/ViewFile"],
body.popup-library-note td[id$="tdAttachFile"] a[href$=".pdf"] {
    color: #4F46E5;
    font-weight: 500;
    text-decoration: underline;
}

/* Remove button — ghost, no chrome (color-pick on Figma showed uniform
   bg through the pill width: no border). !important on dims to beat
   any inherited link sizing. */
body.popup-library-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-library-note a[id$="lnkBtnReplace"]:hover {
    background-color: rgba(var(--primary-tint, 79, 70, 229), 0.08) !important;
}

/* Hide the Cancel icon image (uc:ImageManager renders an <img>) — we use
   text-only buttons matching Figma. */
body.popup-library-note a[id$="lnkBtnReplace"] img {
    display: none !important;
}

/* Attach File widget (fu:Upload) — the legacy fixed-height .qq-uploader
   overflows onto the "max 4MB" note; size it to content and re-skin the button
   as a single-line outline pill with a paperclip (matches the Q88 note). */
body.popup-library-note td[id$="tdAttachFile"] .qq-uploader {
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
}
body.popup-library-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-library-note td[id$="tdAttachFile"] .qq-upload-list:empty {
    display: none !important;
}
body.popup-library-note .qq-upload-button,
body.popup-library-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-library-note .qq-upload-button:hover,
body.popup-library-note .qq-upload-replace-button:hover {
    background: #f8fafc !important;
}
body.popup-library-note .qq-upload-button > ins,
body.popup-library-note .qq-upload-replace-button > ins,
body.popup-library-note .qq-upload-button > img,
body.popup-library-note .qq-upload-replace-button > img {
    display: none !important;
}
body.popup-library-note .qq-upload-button::before,
body.popup-library-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;
}

/* Caption rows — Figma "Uploaded:..." "Note: max 4MB" "*If checked..." */
body.popup-library-note td.Disclaimer,
body.popup-library-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-library-note td[id$="tdAttachFile"] [id$="litModifiedDate"] {
    color: #1e293b;
    font-size: 12px;
    line-height: 16px;
    display: block;
    margin-top: 4px;
}

/* Uploaded-file overlap fix (ports the Commodity Note's fix — same shared
   DocumentNoteEdit.ascx). Once a file is attached the uploader sits inside
   <div style="text-align:left;float:left;"> plus an empty 250px float spacer;
   the uncleared floats collapse td#tdAttachFile, so the qq "confirm" line
   overlaps the "Note: max 4MB" disclaimer in the next <tr>. Un-float the
   wrapper, drop the spacer, and render the confirm line on its own clean row.
   Also drops the legacy red delete.gif on the uploader's Remove link. */
body.popup-library-note td[id$="tdAttachFile"] > div[style*="float"] {
    float: none !important;
    width: auto !important;
    overflow: hidden;
}
body.popup-library-note td[id$="tdAttachFile"] > div[style*="float"] > div[style*="float"] {
    display: none !important;
}
body.popup-library-note td[id$="tdAttachFile"] .qq-uploader,
body.popup-library-note td[id$="tdAttachFile"] #qq-upload-list,
body.popup-library-note td[id$="tdAttachFile"] .qq-upload-success {
    float: none !important;
    height: auto !important;
    overflow: visible !important;
}
body.popup-library-note #qq-upload-confirm {
    display: block !important;
    flex-basis: 100% !important; /* own line even inside the flex #qq-upload-container */
    width: 100% !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 16px !important;
    margin-top: 2px !important;
}
body.popup-library-note #qq-upload-confirm br {
    display: none !important;
}
body.popup-library-note #qq-upload-remove img {
    display: none !important;
}
body.popup-library-note #qq-upload-remove {
    color: #4F46E5 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* Footer — Figma 2217:13100: bg muted, border-t, px-24 py-12, justify-end
   gap-16. The buttons live in the table containing lbSave (not a direct
   child of <form> — the form has a div wrapper, then tables inside).
   Target via :has() to find the footer table reliably. */
body.popup-library-note table:has(a[id$="_lbSave"]) {
    width: 100% !important;
    margin-top: 16px !important;
    /* No grey band AND no top divider — the action buttons sit flush on white at
       the card bottom (current design direction; the 2217:13082 Figma frame's
       grey/bordered footer is stale). */
    background-color: transparent !important;
    border-top: 0 !important;
    border-collapse: collapse !important;
}

body.popup-library-note table:has(a[id$="_lbSave"]) > tbody > tr {
    height: auto !important;
}

body.popup-library-note table:has(a[id$="_lbSave"]) > tbody > tr > td {
    padding: 12px 24px !important;
    vertical-align: middle !important;
    background: transparent !important;
}

/* The left footnote cell + spacer cell — collapse them; we want the
   buttons aligned right with no leading text. */
body.popup-library-note table:has(a[id$="_lbSave"])
    > tbody > tr > td:not([align="right"]) {
    display: none !important;
}

body.popup-library-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;
    /* Don't force width:100% — that bypasses table-cell sizing and the
       cell expands to its intrinsic content width (881px), overflowing
       the 833px body. Let the table sizing constrain it. */
    width: auto !important;
}

/* Footer buttons — Cancel ghost, Delete outline, Save primary.
   .LinkButton class in MainWhiteout.css applies `background-color:
   var(--brand-primary) !important` (resolves to #0d4d4d here), so each
   property below uses !important to win the cascade. */
body.popup-library-note a[id$="_lbCancel"],
body.popup-library-note a[id$="_lbDelete"],
body.popup-library-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-library-note a[id$="_lbCancel"] {
    background-color: transparent !important;
    background-image: none !important;
    color: #0f172a !important;
    border: 0 !important;
}
body.popup-library-note a[id$="_lbCancel"]:hover {
    background-color: rgba(15, 23, 42, 0.05) !important;
}

body.popup-library-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-library-note a[id$="_lbDelete"]:hover {
    background-color: #f8fafc !important;
}

body.popup-library-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-library-note a[id$="_lbSave"]:hover {
    opacity: 0.9;
}

/* Hide the ImageManager-rendered icons inside the button labels — Figma
   uses text-only labels. */
body.popup-library-note a[id$="_lbCancel"] img,
body.popup-library-note a[id$="_lbDelete"] img,
body.popup-library-note a[id$="_lbSave"] img {
    display: none !important;
}

/* LinkButton <ins>&nbsp;</ins> spacer renders as a stray "_" before the label */
body.popup-library-note a.LinkButton > ins {
    display: none !important;
}

/* Characters-left label (DX) — Figma doesn't show this counter. Hide
   it; if the product team wants it back we'd surface it as a flagged
   item. */
body.popup-library-note [id$="lblCharactersLeft"] {
    display: none !important;
}


/* =====================================================================
   3) SUB-MODALS (Library page + note iframe) — delete/cancel/remove confirmation.
   The mpeDeleteNote/mpeCancelNote/mpeRemoveFile <uc:Modal> shells render inside
   the note iframe (body.popup-library-note); components.css §9.10 doesn't reach
   Blank.master, so the chrome is restated here for both scopes.
   ===================================================================== */

:is(body.page-milbros-library, body.popup-library-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;
}

/* Neutralize the legacy table frame — the corner-icon cells otherwise paint
   as stray black triangles over the white card. */
:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) table.modPopupTbl {
    background: transparent;
    border-collapse: collapse;
}
:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) td.leftCornerIcon,
:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) td.rightCornerIcon {
    width: 0;
    padding: 0;
    background: transparent;
}
:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) td.modPopContentTop {
    display: none;
}
:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"]) td.mainBG {
    background: transparent;
    padding: 0;
}

:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"])
    td.hdrTblBar {
    background: transparent;
    border: 0;
    padding: 24px 24px 12px 24px;
}

:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"])
    .modPopTitlePnl [id$="lblPopupTitle"],
:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"])
    .modPopTitlePnl .popupTitleSub {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #0f172a;
}

:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"])
    .modPopTitlePnl [id$="lblPopupTitle"] {
    font-weight: 600;
}

:is(body.page-milbros-library, body.popup-library-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;
}

:is(body.page-milbros-library, body.popup-library-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;
}

:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"])
    .modPopFooter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    /* No grey band — buttons flush on white, hairline top divider only. */
    background-color: transparent;
    border-top: 1px solid #e2e8f0;
}

:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"])
    .modPopFooter a.LinkButton,
:is(body.page-milbros-library, body.popup-library-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);
}

:is(body.page-milbros-library, body.popup-library-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);
}

:is(body.page-milbros-library, body.popup-library-note) .modPopPnl:not([id$="pceNotes_pnlModalPopup"])
    .modPopFooter a.LinkButton img {
    display: none !important;
}