/* ============================================================================
   Question history popups (Q88 questionnaire) — Figma section 207:7902
   - Big "Answer History" modal:    node 90:9848   (Modal.ascx → modQHistory)
   - Small "Updated By:" tooltip:   node 192:11613 (global #ToolTipPopup)

   Both popups currently use the legacy "corner-image-table" chrome
   (.tL/.tM/.tR/.bL/.bM/.bR/contentL/contentR cells with clearpixel.gif).
   We hide all that chrome and lay the surviving .toolTipPopupContainer /
   .modPopupTbl as a flat card matching the Figma design tokens.

   Scope: body.page-questionnaire so other pages' modQHistory-equivalent
   modals (Modal.ascx is generic) and other ToolTipPopup callers stay legacy.
   ASP.NET id-suffix selector `[id$="_modQHistory_pnlModalPopup"]` avoids
   the substring-overshoot trap (see feedback_aspnet-naming-container...).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   §1 Big "Answer History" modal — Figma 90:9848 (764 × 328, white card,
   1px border #e2e8f0, 8px radius, shadow-md, padding 16, gap 16,
   header bold-16 + 16px X, table head 40h + body rows 36h with 1px bottoms)
   -------------------------------------------------------------------------- */

body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] {
    width: 764px !important;                       /* override ascx 550px */
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border: 1px solid var(--raw-slate-200, #e2e8f0);
    border-radius: 8px;
    box-shadow:
        0 4px 6px -1px rgba(0,0,0,0.10),
        0 2px 4px -1px rgba(0,0,0,0.10);
    padding: 16px;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
}

/* Hide the legacy 3-column corner-icon decorations */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .modPopContentTop,
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .leftCornerIcon,
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .rightCornerIcon {
    display: none !important;
}

/* Flatten the wrapping legacy tables to block-flow */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .modPopupTbl,
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .modPopupTbl > tbody,
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .modPopupTbl > tbody > tr,
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .modPopupTbl > tbody > tr > td {
    display: block;
    width: auto !important;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0 !important;
    background: transparent;
    vertical-align: baseline;
}

/* Header bar: title (bold 16) + 16px X — flatten the inner table to flex row */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .hdrTblBar {
    background: transparent;
    padding: 0 0 16px 0 !important;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .hdrTblBar > table {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    border-collapse: collapse;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .hdrTblBar > table > tbody,
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .hdrTblBar > table > tbody > tr {
    display: contents;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .hdrTblBar > table td {
    display: block;
    padding: 0 !important;
    width: auto !important;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .hdrTblBar > table td:first-child {
    flex: 1 1 auto;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .modPopTitlePnl {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #0f172a;
}

/* Replace the red close.gif with a Lucide X glyph */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] [id$="_lnkClose"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] [id$="_lnkClose"] img {
    display: none !important;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] [id$="_lnkClose"]::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] [id$="_lnkClose"]:hover {
    color: #0f172a;
}

/* Content + footer area */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .mainBG {
    background: transparent;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .modPopContent {
    padding: 0;
    color: #0f172a;
    font-size: 14px;
    line-height: 20px;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .modPopFooter {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    margin: 0;
}

/* The "Question: <name>" line above the entries. Match the EditQuestionAnswer
   iframe skin (editQuestionAnswerPopup.css): dark label + value, not muted. */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] #divQAudit > div:first-child {
    font-weight: 400;
    margin-bottom: 16px;
    color: #0f172a;
    font-size: 14px;
    line-height: 20px;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] #divQAudit > div:first-child b {
    color: #0f172a;
    font-weight: 600;
}
/* Drop the <br /> after the question line — the margin-bottom above is the gap */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] #divQAudit > br:first-of-type {
    display: none;
}

/* History entries (div-based markup from Q88WSInternal.GetQuestionAnswerInfoAudit
   — NOT the legacy table.sTbl below, which the WS no longer emits for this modal).
   Bring this surface to parity with the EditQuestionAnswer iframe skin
   (editQuestionAnswerPopup.css → body.popup-edit-qa .modPopPnl #divQAudit):
   recolor the inline navy #003366 date line → slate, retint the inline #d6d6d6
   divider → slate-200, even out the rhythm, drop the divider on the last entry.
   !important beats the inline styles the server writes on each div. */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] #divQAudit > div:not(:first-child) {
    border-bottom: 1px solid var(--raw-slate-200, #e2e8f0) !important;
    padding: 12px 0 !important;
    margin-bottom: 0 !important;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] #divQAudit > div:last-of-type {
    border-bottom: 0 !important;
}
/* Date + author line — inline `font-weight:bold; color:#003366`. Keep bold,
   recolor navy → dark slate. */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] #divQAudit > div > div:first-child {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 4px !important;
}
/* Answer value */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] #divQAudit .ahAnswer {
    color: #0f172a;
    font-size: 14px;
    line-height: 20px;
}
/* "This question does not have any historical data." empty state */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] #divQAudit > div[style*="padding:3px"] {
    color: #475569;
    padding: 8px 0 !important;
}

/* Audit table: flat with header + bottom-border data rows. .sTbl + .trHdr
   are server-emitted classes from Q88WSInternal.GetQuestionAnswerInfoAudit. */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] table.sTbl {
    border-collapse: separate;
    border-spacing: 0;
    width: 100% !important;
    table-layout: fixed;
}

/* The server emits inline `width:80px` on Modified and `width:100px` on
   Modified By — too narrow for full date strings like "May 19, 2025" and
   names like "Thomas Christensen". Widen via !important and let column 1
   (Answer) take the remaining width. */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] table.sTbl td:nth-child(1) {
    width: auto;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] table.sTbl td:nth-child(2) {
    width: 120px !important;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] table.sTbl td:nth-child(3) {
    width: 200px !important;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] table.sTbl tr.trHdr td {
    height: 40px;
    padding: 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #0f172a;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--raw-slate-200, #e2e8f0);
    text-align: left;
    vertical-align: middle;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] table.sTbl tr:not(.trHdr) td {
    height: 36px;
    padding: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #0f172a;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--raw-slate-200, #e2e8f0);
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] table.sTbl tr:last-child td {
    border-bottom: 0;
}

/* Re-skin the legacy "Close" LinkButton as a filled slate secondary pill — same
   as the EditQuestionAnswer iframe Close (editQuestionAnswerPopup.css) and the
   target design. Ties components.css §9.10 (0,4,2) and wins by source order
   (page CSS loads after components.css) — no !important needed since QEN-8801
   dropped it from §9.10 and gated MainWhiteout's `.LinkButton` off refresh
   (commit 132bbd42). */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .modPopFooter a.LinkButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 84px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--raw-slate-800, #1e293b);
    background: var(--raw-slate-100, #f1f5f9);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] .modPopFooter a.LinkButton:hover {
    background: var(--raw-slate-200, #e2e8f0);
    color: var(--raw-slate-900, #0f172a);
}

/* The scrolling wrapper around the table (server emits max-height:200px) */
body.page-questionnaire [id$="_modQHistory_pnlModalPopup"] #divQAudit > div[style*="max-height"] {
    max-height: 240px !important;
    border: 0;
}

/* ---------------------------------------------------------------------------
   §2 Small "Updated By:" tooltip — Figma 192:11613 (363 × 146, same card chrome,
   bold "Updated By:" header + X, single-line user/date, right-aligned teal
   "Check History" button)
   -------------------------------------------------------------------------- */

/* The outer #ToolTipPopup gets an inline `max-width: 225px` from
   GeneratePopupContent (server) — without this override the inner card
   overflows the outer's bounding box.
   z-index 51 lifts it above the sticky bottom status toolbar (z-index 50,
   questionnaire.css) — without it, opening this popup for a question near
   the bottom of the table gets its lower half painted over by the toolbar.
   Same pattern as editQuestionAnswerPopup.css's #ToolTipPopup (z-index 31
   over its sticky title bar at 30). */
body.page-questionnaire #ToolTipPopup {
    max-width: 363px !important;
    width: 363px !important;
    z-index: 51 !important;
}

/* Card chrome on the inner container (#ToolTipPopup outer is positioned by AjaxToolkit) */
body.page-questionnaire #ToolTipPopup > .toolTipPopupContainer {
    width: 363px !important;                       /* override inline 225px */
    background: #ffffff;
    border: 1px solid var(--raw-slate-200, #e2e8f0);
    border-radius: 8px;
    box-shadow:
        0 4px 6px -1px rgba(0,0,0,0.10),
        0 2px 4px -1px rgba(0,0,0,0.10);
    padding: 16px;
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
    position: relative;
}

/* Hide all the legacy corner-image chrome */
body.page-questionnaire #ToolTipPopup .pointerTl,
body.page-questionnaire #ToolTipPopup .tL,
body.page-questionnaire #ToolTipPopup .tR,
body.page-questionnaire #ToolTipPopup .contentL,
body.page-questionnaire #ToolTipPopup .contentR,
body.page-questionnaire #ToolTipPopup .bL,
body.page-questionnaire #ToolTipPopup .bM,
body.page-questionnaire #ToolTipPopup .bR {
    display: none !important;
}

/* The .tM cell is the title strip — turn into the Figma "Updated By:" heading.
   `margin: 0 !important` is required to beat MainWhiteout.css:2918 which sets
   `.toolTipPopupContainer .tM { margin: 0 16px 0 15px }` for the legacy blue
   title strip — without it, the heading sits 15px right of the body content. */
body.page-questionnaire #ToolTipPopup .tM {
    display: block !important;
    margin: 0 !important;
    padding: 0 24px 16px 0 !important;             /* 24px right reserves room for X */
    background: transparent !important;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #0f172a;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    text-align: left;
}
/* `:not(:has(> span.sub))` gates the injection to the server-rendered
   "Updated By:" tooltip (GeneralBusiness.GeneratePopupContent emits bare
   `&nbsp;` text in .tM). The questionnaire (?) hint popup is built client-side
   by PopupGenerate (Scripts/script.js) which always wraps its title in
   `<span class="sub">`, so `.tM:has(> span.sub)` is the hint case and must NOT
   get "Updated By:" injected — otherwise question hints render with the wrong
   header (Manifold rating number help text under an "Updated By:" title). */
body.page-questionnaire #ToolTipPopup .tM:not(:has(> span.sub))::after {
    content: "Updated By:";
}

/* Replace the .tClose cell with a positioned X icon */
body.page-questionnaire #ToolTipPopup .tClose {
    display: block !important;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: #475569;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
body.page-questionnaire #ToolTipPopup .tClose::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
}
body.page-questionnaire #ToolTipPopup .tClose:hover {
    color: #0f172a;
}

/* The body content lives in `.content > div[style*="padding"]` per
   Q88WSInternal.GetQuestionAnswerInfo. Strip its inline padding and
   layout the child table + link as a vertical stack.
   `padding: 0 !important` overrides the legacy `.content { padding: 5px }`
   that pushes values 5px right of the heading. */
body.page-questionnaire #ToolTipPopup .content {
    color: #0f172a;
    font-size: 14px;
    line-height: 20px;
    padding: 0 !important;
}
/* Hint popup body (.tM has a span.sub child — see "Updated By:" gate above for
   the structural distinction):
   - Justify the long descriptive text — multi-line help paragraphs read cleaner
     with both edges flush. The answer-history popup with its single-line
     "user at date" cell is unaffected because of the :has() scope.
   - padding-top reserves clearance below the X close button (top:16 + height:16
     = ends at y=32 within the container). Without it the empty .tM strip
     (16px from its bottom padding) puts body text top edge flush with the X's
     bottom edge — visually crowded. 24px = 16px X reach + 8px breathing room.
   - padding-right of 8px keeps the justified text's right edge from butting
     directly against the popup card border under the X icon's reserved space. */
body.page-questionnaire #ToolTipPopup:has(.tM > span.sub) .content {
    text-align: justify;
    padding-top: 24px !important;
    padding-right: 8px !important;
}
body.page-questionnaire #ToolTipPopup .content > div[style*="padding"] {
    padding: 0 !important;
}
body.page-questionnaire #ToolTipPopup .content table {
    width: 100% !important;
}
/* Hide the inline "Updated By:" cell since the header now carries it */
body.page-questionnaire #ToolTipPopup .content table td:first-child {
    display: none !important;
}
body.page-questionnaire #ToolTipPopup .content table td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Style the "Answer History" link as the Figma "Check History" teal button.
   Matches the design teal used by the date picker Save button. */
body.page-questionnaire #ToolTipPopup .content a {
    display: inline-block;
    margin: 16px 0 0 !important;
    padding: 8px 16px;
    height: 36px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-link);
    background: transparent;
    text-decoration: none;
    box-sizing: border-box;
    float: right;
}
body.page-questionnaire #ToolTipPopup .content a:hover {
    background: rgba(var(--primary-tint), 0.08);
    text-decoration: none;
}
body.page-questionnaire #ToolTipPopup .content a::after {
    content: " →";                                  /* affordance hint */
    display: none;                                  /* hidden by default; uncomment to enable */
}

/* ============================================================================
   §3 Cargo-history popups — Create.aspx?c=1 (CreateQuestionnaire.ascx)
   DESIGN.md §9.10 Hover Card / Dialog pattern:
     bg #fff, 1px #e2e8f0 border, 8px radius, shadow/sm, 16px padding,
     Frame 28 header (SemiBold 16, 16px X right), Frame 30 footer 36h right-aligned.

   Two popups share the same Modal.ascx chrome:
     - modalCargoHistory   (Title="Cargo History",  iframe body, 750w)
     - mpeCargoHistoryInfo (Title="",               narrative body + Close footer, 600w)

   `body.page-questionnaire` gates both; id-suffix selectors avoid the
   substring-overshoot trap and keep other Modal instances (Vetting, UDF,
   Incomplete, EntryError) on the legacy chrome. Mirrors the §1 modQHistory
   approach: flatten the 3-column corner-image table, replace red close.gif
   with the Lucide X mask, then style the body per popup variant.
   ============================================================================ */

/* --- Outer card — shared by both popups --- */
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"],
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] {
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-color: var(--raw-slate-200, #e2e8f0);
    border-radius: 8px;
    box-shadow:
        0 4px 6px -1px rgba(0,0,0,0.10),
        0 2px 4px -1px rgba(0,0,0,0.10);
    padding: 24px;                                 /* matches q88-card rhythm — gives narrative text breathing room from card edge */
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] {
    width: 750px !important;                       /* keeps ascx Width=750px geometry */
    max-width: calc(100vw - 32px);
}
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] {
    width: 600px !important;                       /* info popup ascx has no Width → clamp */
    max-width: calc(100vw - 32px);
}

/* Hide the legacy 3-column corner-icon decorations (clearpixel + MilbrosModal.png) */
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .modPopContentTop,
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .leftCornerIcon,
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .rightCornerIcon,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContentTop,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .leftCornerIcon,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .rightCornerIcon {
    display: none !important;
}

/* Flatten wrapping legacy tables to block flow */
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .modPopupTbl,
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .modPopupTbl > tbody,
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .modPopupTbl > tbody > tr,
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .modPopupTbl > tbody > tr > td,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopupTbl,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopupTbl > tbody,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopupTbl > tbody > tr,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopupTbl > tbody > tr > td {
    display: block;
    width: auto !important;
    height: auto;
    padding: 0;
    margin: 0;
    border-width: 0 !important;
    background-color: transparent;
    background-image: none;
    vertical-align: baseline;
}

/* Header bar — flatten Modal.ascx's inner header <table> to flex row */
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .hdrTblBar,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .hdrTblBar {
    background-color: transparent;
    background-image: none;                        /* beats MainWhiteout MilbrosContentTabBG.png */
    border-width: 0 !important;
    padding: 0 0 16px 0 !important;
    height: auto !important;
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .hdrTblBar > table,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .hdrTblBar > table {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    border-collapse: collapse;
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .hdrTblBar > table > tbody,
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .hdrTblBar > table > tbody > tr,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .hdrTblBar > table > tbody,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .hdrTblBar > table > tbody > tr {
    display: contents;
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .hdrTblBar > table td,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .hdrTblBar > table td {
    display: block;
    padding: 0 !important;
    width: auto !important;
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .hdrTblBar > table td:first-child,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .hdrTblBar > table td:first-child {
    flex: 1 1 auto;                                /* title TD takes remaining width */
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .modPopTitlePnl,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopTitlePnl {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #0f172a;
    cursor: move;                                  /* legacy drag handle for ModalPopupExtender */
    height: auto !important;
}

/* Close icon — replace /images/icons/close_red.gif with a Lucide X mask */
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] [id$="_lnkClose"],
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] [id$="_lnkClose"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    background-color: transparent;
    border-width: 0;
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] [id$="_lnkClose"] img,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] [id$="_lnkClose"] img {
    display: none !important;
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] [id$="_lnkClose"]::before,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] [id$="_lnkClose"]::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] [id$="_lnkClose"]:hover,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] [id$="_lnkClose"]:hover {
    color: var(--text-primary);
}

/* Body cell — strip legacy gradient + padding; outer card already owns 16px */
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .mainBG,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .mainBG {
    background-color: transparent;
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .modPopContent,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent {
    background-color: transparent !important;      /* beats MainWhiteout MilbrosModalGradient.png */
    background-image: none !important;
    padding: 0 !important;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 20px;
}
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] .modPopFooter,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopFooter {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0 0 0 !important;                /* gap from content above */
    margin: 0;
}

/* --- §3a modalCargoHistory — iframe body fills card width, no inline gap --- */
body.page-questionnaire [id$="_modalCargoHistory_pnlModalPopup"] [id$="_ifCargoHistory"] {
    display: block;                                /* kills the inline-image baseline gap */
    width: 100% !important;                        /* overrides width="700" attr */
    border-width: 0;
    background-color: #ffffff;
}

/* --- §3b mpeCargoHistoryInfo — narrative body --- */

/* The PopupContent wraps two inline-styled <div>s (oil vs dry portal variant);
   neutralise the inline `background-color:#fff` so our card chrome shows through */
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent > div {
    background-color: transparent !important;
}
/* The inner <table style="display:block;width:750px;min-height:200px;..."> clamps
   the content too wide; flatten so the body flows naturally inside the 600w card */
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent table {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    border-spacing: 0 !important;
    padding: 0 !important;
}
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent table tbody,
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent table tr {
    display: block;
}
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent table td {
    display: block;
    padding: 0 !important;
    border-width: 0 !important;
}
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-primary);
}
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent p {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent p:last-child {
    margin-bottom: 0;
}
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent a {
    color: var(--text-link);
    text-decoration: underline;
}
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopContent a:hover {
    color: var(--link-hover);
}

/* "Close" LinkButton in the footer — outline pill (Cancel variant per DESIGN.md §9.10).
   Ties §9.10 (0,4,2), wins by source order; !important dropped in QEN-8801 (see above). */
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopFooter a.LinkButton {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-primary);
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: var(--raw-slate-200, #e2e8f0);
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopFooter a.LinkButton:hover {
    background-color: var(--accent, #f1f5f9);
}
/* Hide the ASP.NET LinkButton `<ins>&nbsp;</ins>` spacer (memory: linkbutton-ins-spacer-trap) */
body.page-questionnaire [id$="_mpeCargoHistoryInfo_pnlModalPopup"] .modPopFooter a.LinkButton > ins {
    display: none;
}