/* ============================================================ * MilbrosUSCGChart.css * QEN-8704 Figma re-skin of USCGCompatibilityChart.ascx * Page: /USCGExceptions.aspx (and ?c=1 popup variant) * Figma: ISZ58jrGcp1LwMEJeeG00Q node 2199:11120 * Tokens (from get_variable_defs): * base/input #e2e8f0 header / row-number bg * base/secondary #f1f5f9 zebra-alt row bg * base/background #ffffff default row bg * font/font-sans Inter * text/sm 14 / 20 section labels * text/xs 12 / 16 data + numeric heads * font-weight 600 semibold * row height 36px * Scope: table[id$="_tblCompatibilityChart"] (unique on the page) * Override strategy: codebehind emits inline style="background-color:..." * + style="color:White" + style="border:solid 1px #C7C7C7" on every td, * so every paint rule needs !important to win over the inline attribute. * ============================================================ */ /* ---- Wrapper: release the inline width:975px lock on #divHtmlOutput so the table can breathe. q88-content host is ~1185px wide; we cap at 1160px to keep a small visual gutter. ---- */ #ctl00_cphTop_ctl00_divHtmlOutput { width: auto !important; max-width: 1300px !important; margin: 0 auto !important; padding: 8px 0 !important; overflow-x: auto !important; } /* ---- Outer table chrome ---- */ table[id$="_tblCompatibilityChart"] { border-collapse: collapse !important; border-bottom: none !important; margin-top: 0 !important; width: auto !important; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ---- Column-width plan (more breathing room within container budget) ---- Container (q88-content) = 1185px. Budget = 1160px to leave a small gutter. Logical col 1 = group label → 260px (fits "Miscellaneous Hydrocarbon Mixtures" @ ~238px natural) Logical col 2 = row # → 36px Logical cols 3-24 = data/heads → 36px each (× 22 = 792) Total: 260 + 36 + 792 = 1088px ✅ All cells use box-sizing: border-box so padding doesn't compound width. */ table[id$="_tblCompatibilityChart"] > tbody > tr > td { box-sizing: border-box !important; } /* Group-label cells (codebehind sets font-size:X-Small inline; that's the marker) */ table[id$="_tblCompatibilityChart"] > tbody > tr > td[style*="X-Small"] { width: 260px !important; min-width: 260px !important; white-space: normal !important; } /* Numeric-head cells (USCGHeader without colspan) + data icon cells + row-0 image cells: uniform 36px column so the matrix reads cleanly. IMPORTANT: scope to `td.*` so the rules don't match the IMG inside the cell (codebehind decorates the icon img with class="Img-Chart-InCompatible jqUSCGPopup" — so `.jqUSCGPopup` matches both the TD and the inner IMG, stretching the icon). */ table[id$="_tblCompatibilityChart"] td.USCGHeader:not([colspan]), table[id$="_tblCompatibilityChart"] td.jqUSCGPopup, table[id$="_tblCompatibilityChart"] > tbody > tr:first-child > td:not(.USCGHeaderWhite) { width: 36px !important; min-width: 36px !important; } /* Tighten numeric-head padding so 36px is enough for "22" at 12px */ table[id$="_tblCompatibilityChart"] td.USCGHeader:not([colspan]) { padding: 8px 2px !important; } /* Tighten data-cell padding — they're icon containers, not text */ table[id$="_tblCompatibilityChart"] td.jqUSCGPopup { padding: 2px !important; } /* ---- Lucide icon swap (replaces legacy PNG sprites) ---- Figma uses Lucide-style 24×24 glyphs per data cell. Strategy: 1. Hide the legacy IMG (display:none — TD has explicit width/height so layout is unaffected). 2. Paint a 24×24 Lucide mask on a ::before pseudo of the TD, dead-centered via absolute positioning + translate(-50%, -50%). Click handling: jqUSCGPopup class + uscgCompatibilityId + hasExceptions attributes are all on the TD itself, so hiding the IMG keeps the popup wiring intact. The TD-scoped :has() ensures the right glyph paints per cell variant. */ table[id$="_tblCompatibilityChart"] img.Img-Chart-InCompatible, table[id$="_tblCompatibilityChart"] img.Img-Chart-Compatible-W-Exception, table[id$="_tblCompatibilityChart"] img.Img-Chart-InCompatible-W-Exception { display: none !important; } table[id$="_tblCompatibilityChart"] td.jqUSCGPopup { position: relative; } /* Glyph mapping (mirrors legacy PNGs): Img-Chart-InCompatible → X (black) Img-Chart-Compatible-W-Exception → O (red) Img-Chart-InCompatible-W-Exception → X inside O (O red, X black — two pseudos) Centering: pseudos absolute top/left 50% + translate(-50%, -50%). */ table[id$="_tblCompatibilityChart"] td.jqUSCGPopup:has(img.Img-Chart-InCompatible)::before, table[id$="_tblCompatibilityChart"] td.jqUSCGPopup:has(img.Img-Chart-Compatible-W-Exception)::before, table[id$="_tblCompatibilityChart"] td.jqUSCGPopup:has(img.Img-Chart-InCompatible-W-Exception)::before, table[id$="_tblCompatibilityChart"] td.jqUSCGPopup:has(img.Img-Chart-InCompatible-W-Exception)::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; } /* Variant 1: plain X — black (204 cells) */ table[id$="_tblCompatibilityChart"] td.jqUSCGPopup:has(img.Img-Chart-InCompatible)::before { background-color: #000000; -webkit-mask-image: var(--icon-x); mask-image: var(--icon-x); } /* Variant 2: plain O (Lucide Circle) — red (78 cells) */ table[id$="_tblCompatibilityChart"] td.jqUSCGPopup:has(img.Img-Chart-Compatible-W-Exception)::before { background-color: #dc2626; /* Figma base/destructive */ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Variant 3a: X-in-O — the O outline (red) painted via ::before (14 cells) */ table[id$="_tblCompatibilityChart"] td.jqUSCGPopup:has(img.Img-Chart-InCompatible-W-Exception)::before { background-color: #dc2626; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Variant 3b: X-in-O — full-size X (black) painted via ::after, same 24×24 bounds as the O. Per Figma, both Icon/24px/Circle and Icon/24px/X are overlaid at the same position (2199:11306 → Group containing both instances at x=47.3, y=6, each 24×24). The X extends corner-to-corner, crossing outside the circle. */ table[id$="_tblCompatibilityChart"] td.jqUSCGPopup:has(img.Img-Chart-InCompatible-W-Exception)::after { background-color: #000000; -webkit-mask-image: var(--icon-x); mask-image: var(--icon-x); } /* ---- Legend icons (below the table) ---- Swap the legacy PNGs to inline Lucide SVGs via the `content` property on the IMG itself. `content` replaces the IMG's rendered resource, so the legacy bitmap is fully gone. Color baked into the SVG (no mask trickery needed). */ /* Legend "Incompatible Groups" — X glyph in black, matches chart variant 1. */ #ctl00_cphTop_ctl00_divHtmlOutput > div[align="left"] img[src$="/incompatible.png"] { content: url("data:image/svg+xml;utf8,") !important; width: 14px !important; height: 14px !important; vertical-align: middle !important; } /* Legend "Exceptions Exist" — O glyph in red, matches chart variant 2. */ #ctl00_cphTop_ctl00_divHtmlOutput > div[align="left"] img[src$="/compatible-w-exception.png"] { content: url("data:image/svg+xml;utf8,") !important; width: 14px !important; height: 14px !important; vertical-align: middle !important; } /* ---- Universal cell reset (typography, kill #C7C7C7 borders) ---- */ table[id$="_tblCompatibilityChart"] > tbody > tr > td { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 12px !important; line-height: 16px !important; border: none !important; color: #000000 !important; } /* ---- Title cell (row 0, "USCG Cargo Compatibility Chart" + Actions menu) ---- Centered both axes per user request. The cell hosts divActionsMenu (a runat=server div containing the title text + PopupMenu); centering applies to the whole block. text-align centers the inline text + popmenu trigger; vertical-align centers against the row's natural height. */ table[id$="_tblCompatibilityChart"] .USCGHeaderWhite { background-color: #ffffff !important; color: #000000 !important; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; border-bottom: 1px solid #e2e8f0 !important; text-align: center !important; padding: 10px !important; vertical-align: middle !important; } /* The Actions menu inside the title cell renders as a block via PopupMenu's wrapper; ensure it centers horizontally too. */ table[id$="_tblCompatibilityChart"] .USCGHeaderWhite > #ctl00_cphTop_ctl00_divActionsMenu, table[id$="_tblCompatibilityChart"] .USCGHeaderWhite > div[id$="_divActionsMenu"] { text-align: center !important; } table[id$="_tblCompatibilityChart"] .USCGHeaderWhite [id$="_popMenuActions"], table[id$="_tblCompatibilityChart"] .USCGHeaderWhite [id$="_popMenuActions"] > * { margin-left: auto !important; margin-right: auto !important; } /* ---- Title row vertical-text column heads (rotated rg_N.png images) ---- These cells are siblings of .USCGHeaderWhite on row 0. The codebehind already emits per-column alternation: odd cols = white, even cols = #DEE0E0. The zebra rule below converts #DEE0E0 → #f1f5f9. Don't blanket-override bg here — just paint the section-header border-bottom under the title strip. */ table[id$="_tblCompatibilityChart"] > tbody > tr:first-child > td:not(.USCGHeaderWhite) { border-bottom: 1px solid #e2e8f0 !important; } /* ---- All header cells (USCGHeader: section labels + numeric col/row heads) ---- */ table[id$="_tblCompatibilityChart"] .USCGHeader { background-color: #e2e8f0 !important; color: #000000 !important; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; border: none !important; height: 36px !important; padding: 10px !important; text-align: center !important; vertical-align: middle !important; } /* ---- Section label cells (REACTIVE GROUPS / CARGO GROUPS, colspan=2) ---- Use text-sm (14/20) per Figma "Reactive Groups" / "Cargoes Groups". */ table[id$="_tblCompatibilityChart"] .USCGHeader[colspan="2"] { font-size: 14px !important; line-height: 20px !important; text-align: left !important; border-bottom: 1px solid #e2e8f0 !important; } /* ---- Data row first cell (group name label: "Sulphuric acid", "Olefins", ...) ---- These cells have no class; they're identifiable by inline font-size:X-Small set by codebehind (FontUnit.XSmall on Cells[0]). */ table[id$="_tblCompatibilityChart"] > tbody > tr > td[style*="X-Small"] { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; height: 36px !important; padding: 10px !important; text-align: left !important; vertical-align: middle !important; } /* ---- Data cells (icon area, .jqUSCGPopup) ---- */ table[id$="_tblCompatibilityChart"] .jqUSCGPopup { height: 36px !important; vertical-align: middle !important; text-align: center !important; } /* ---- Zebra alt-row bg: codebehind emits inline style="background-color:#DEE0E0" on every cell of every other data row. Replace with Figma token #f1f5f9. ---- */ table[id$="_tblCompatibilityChart"] td[style*="DEE0E0"], table[id$="_tblCompatibilityChart"] td[style*="dee0e0"] { background-color: #f1f5f9 !important; } /* ---- White rows: codebehind emits style="background-color:White" — force the Figma background token (also #ffffff but explicit so it never inherits). ---- */ table[id$="_tblCompatibilityChart"] td[style*="background-color:White"] { background-color: #ffffff !important; } /* ---- Force the row-number column (.USCGHeader inside data rows) back to slate even when the row carries an inline #DEE0E0 — selector specificity above already wins because .USCGHeader rule uses !important and overrides bg. */ /* ---- Interactive states ---- */ table[id$="_tblCompatibilityChart"] .jqUSCGPopup { cursor: pointer; } table[id$="_tblCompatibilityChart"] .jqUSCGPopup:hover { background-color: #e7f2dd !important; } table[id$="_tblCompatibilityChart"] .selectedItem { background-color: #e7f2dd !important; } /* ---- Legend region below the table (Incompatible Groups / Exceptions Exist / see 46 CFR Part 150) — Inter typography polish, keep all text verbatim. ---- */ #ctl00_cphTop_ctl00_divHtmlOutput > div[align="left"] { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 12px !important; line-height: 18px !important; color: #000000 !important; padding-top: 16px !important; } #ctl00_cphTop_ctl00_divHtmlOutput > div[align="left"] strong { font-weight: 600 !important; } /* ---- Cell tooltip popup ("Incompatible Groups" / exception list) -------- Clicking a chart cell (`.jqUSCGPopup`) fires Scripts/script.js `ComUSCGChartAddEvent` -> `PopupGenerateGenericLoadingPopup(event, 350, "TipPopup")` -> AJAX `GetUSCGCompatibilityPopup` -> server HTML from `GeneralBusiness.GeneratePopupContent`. This is the same "8th popup mechanism" (`.toolTipPopupContainer`) as the Milbros CommodityDetail attribute popups and Officer Matrix Rank History — legacy image-sprite chrome + MilbrosWhiteout.css dark `.tM` title bar. This file only loads when USCGCompatibilityChart.ascx is on the page (Page_Init above), so no body-class guard is needed — mirrors the flatten in MilbrosCommodityRefresh.css §9.5. ---- */ #TipPopup .toolTipPopupContainer { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10) !important; box-sizing: border-box !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #0f172a; } /* Hide the legacy corner-image decorations */ #TipPopup .toolTipPopupContainer .pointerTl, #TipPopup .toolTipPopupContainer .pointerTr, #TipPopup .toolTipPopupContainer .tL, #TipPopup .toolTipPopupContainer .tR, #TipPopup .toolTipPopupContainer .contentL, #TipPopup .toolTipPopupContainer .contentR, #TipPopup .toolTipPopupContainer .bL, #TipPopup .toolTipPopupContainer .bM, #TipPopup .toolTipPopupContainer .bR { display: none !important; } /* Title bar (.tM) -> flat SemiBold-16 heading; right padding reserves room for the close X, which moves to an absolutely-positioned overlay below. */ #TipPopup .toolTipPopupContainer .tM { display: block !important; background: transparent !important; background-image: none !important; margin: 0 !important; padding: 16px 40px 12px 16px !important; width: auto !important; height: auto !important; border: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px !important; font-weight: 600 !important; line-height: 24px !important; color: #0f172a !important; text-align: left !important; } #TipPopup .toolTipPopupContainer .tM .sub { font-weight: 400 !important; color: #475569 !important; } /* Close (X) -> Lucide X mask, absolutely positioned top-right (the container keeps Main.css's `position:relative` as its anchor). */ #TipPopup .toolTipPopupContainer .tClose { display: block !important; position: absolute !important; top: 16px !important; right: 16px !important; width: 16px !important; height: 16px !important; margin: 0 !important; background: transparent !important; border: 0 !important; cursor: pointer; color: #475569; } #TipPopup .toolTipPopupContainer .tClose::before { content: ""; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 16px; mask: url("data:image/svg+xml;utf8,") no-repeat center / 16px; } #TipPopup .toolTipPopupContainer .tClose:hover { color: #0f172a; } /* Body content (plain text list, e.g. "2. Sulphuric acid
7. Aliphatic Amines") */ #TipPopup .toolTipPopupContainer .content { background: transparent !important; padding: 0 16px 16px 16px !important; max-height: 320px; overflow: auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px !important; line-height: 20px !important; color: #475569 !important; }