/* ==========================================================================
   Officer Matrix — per-vessel detail page (OfficerMatrixVessel.aspx) re-skin.
   Figma: h1mdRCUTlNsImj4y69I5my  349:3980 (Planned tab)  357:14377 (Onboard).

   Scoped to `body.page-officermatrix-vessel`. Layered on top of grid.css
   (loaded via the additional `body.page-grid` class) which already paints
   the card chrome (.modV2), DevExpress grid header/rows and the teal pill
   used by the page-level "Add" CTA.

   Layout strategy — CSS only (no DOM moves):
     * card root (.modV2) gets `position:relative` so the tab pills + action
       icons can be absolute-positioned into the title row.
     * existing tab control (uc:ContentTabMenu) is rendered inside <Main>
       at its natural place; CSS lifts it into the top-right of the card.
     * existing meta-row 4th column (lbNewOfficer + popMenuActions) is
       absolute-positioned next to the tabs. The original cell collapses
       to zero width via the rules below.
     * OCIMF Status + Published are RELOCATED (in the .ascx markup) out of the
       <TitleRight> slot into the meta row, so they flow inline after "OCIMF
       Submission Date" per Figma 349:3980. The status value renders as a solid
       pill coloured by status (Figma 878:9471). See §2.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Card root — make positioning context for the absolute tab/action chips.
   grid.css already paints background/border/radius/shadow on .modV2.
   We also stretch the card to fill the viewport vertically so the grid body
   scrolls inside the card rather than wasting space below it.
   -------------------------------------------------------------------------- */
body.page-officermatrix-vessel .modV2 {
    position: relative;
    /* leave headroom on the right for the absolute tabs + action icons */
    padding-right: 24px !important;
    overflow: visible !important;
}

/* The page renders an extra inline-bordered wrapper inside the card —
   neutralise it (the .om-detail class is added in OfficerMatrixVessel.ascx
   alongside the inline `border:1px solid #003366;` so this rule beats the
   inline style without an !important elsewhere on the page). */
body.page-officermatrix-vessel .om-detail[style*="border"] {
    border: 0 !important;
    background: transparent;
    padding: 0;
}


/* --------------------------------------------------------------------------
   2. Title row vessel name + meta-row OCIMF Status badge + Published.
   The vessel name (lblVesselName) stays in the title row; the OCIMF Status +
   Published fields were moved (in the .ascx) into the meta row. This section
   styles the vessel name, the per-status status pill, and the Published value.
   -------------------------------------------------------------------------- */

/* Vessel name (lblVesselName, CssClass="PageTitle") — text-lg / semibold
   base/foreground per Figma. The <Title> template of ModuleTemplateV2 renders
   into pnlTitleLeft (CssClass="modV2Title"), NOT modV2SubHeader. !important
   to defeat the modV2 > table td cascade trap noted in inspection-container.css
   §3. Line-height intentionally omitted; inherits from the title row layout. */
body.page-officermatrix-vessel .modV2Title .PageTitle,
body.page-officermatrix-vessel .modV2Title span.PageTitle {
    color: var(--foreground) !important;
    font-family: var(--raw-font-family-modern);
    font-size: var(--font-size-lg) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* OCIMF Status + Published — relocated (in OfficerMatrixVessel.ascx markup)
   out of the <TitleRight> slot and INTO the meta row, so they flow inline
   right after "OCIMF Submission Date", matching Figma 349:3980. This replaces
   the old fragile absolute-positioned pill (which broke as the variable-width
   "Modified: (username)" field shifted the row). The "OCIMF Status:" and
   "Published:" labels are now plain meta-row `tr > td > b`, so they inherit the
   bold meta-row label styling (§5 below). Only the value span needs work.

   Status colours per Figma 878:9471:
     Update Required → amber  #f59e0b (base/warning)
     Missing Data    → dark red #991b1b (base/error-foreground)
     Submitted       → teal   #0d9488 (base/primary)
     Not Applicable  → slate  #475569 (muted-foreground-light)
   text on all      → #eff6ff (base/primary-foreground). The server keys the
   status off the legacy dot class inside the value span (statusIconRed /
   AlertVal / Green / White / Orange); we read it with :has(). */

body.page-officermatrix-vessel [id$='_tdOCIMFStatusLbl'],
body.page-officermatrix-vessel td[id$='_tdOCIMFStatusVal'] {
    white-space: nowrap;
    vertical-align: middle;
}

/* The value SPAN becomes the solid status pill (the <td> stays a real cell so
   the meta-row table layout is preserved). */
body.page-officermatrix-vessel td[id$='_tdOCIMFStatusVal'] [id$='_lblOCIMFStatus'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--text-muted);                 /* default = slate (Not Applicable) */
    color: #eff6ff !important;           /* base/primary-foreground */
    font-family: var(--q88-grid-font, Inter, "Helvetica Neue", Arial, sans-serif);
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    padding: 2px 8px !important;         /* spacing/2 x spacing/0-5 */
    border-radius: 8px !important;       /* rounded-md */
    white-space: nowrap;
}

/* Per-status background, keyed off the dot class the server emits. */
body.page-officermatrix-vessel [id$='_lblOCIMFStatus']:has(.statusIconRed)      { background: #f59e0b !important; } /* Update Required → amber    */
body.page-officermatrix-vessel [id$='_lblOCIMFStatus']:has(.statusIconAlertVal) { background: #991b1b !important; } /* Missing Data    → dark red */
body.page-officermatrix-vessel [id$='_lblOCIMFStatus']:has(.statusIconGreen)    { background: var(--primary) !important; } /* Submitted       → teal     */
body.page-officermatrix-vessel [id$='_lblOCIMFStatus']:has(.statusIconWhite)    { background: var(--text-muted) !important; } /* Not Applicable  → slate    */
body.page-officermatrix-vessel [id$='_lblOCIMFStatus']:has(.statusIconOrange)   { background: #f59e0b !important; } /* Processing (out-of-legend) → amber */

/* The new design is a solid pill — drop the legacy coloured dot. */
body.page-officermatrix-vessel td[id$='_tdOCIMFStatusVal'] img.statusIcon {
    display: none !important;
}

/* No status value → no pill chrome, and hide the now-orphan "OCIMF Status:"
   label so the row doesn't read "OCIMF Status:" with nothing after it. */
body.page-officermatrix-vessel td[id$='_tdOCIMFStatusVal'] [id$='_lblOCIMFStatus']:not(:has(img.statusIcon)) {
    display: none !important;
}
body.page-officermatrix-vessel [id$='_tdOCIMFStatusLbl']:has(+ td[id$='_tdOCIMFStatusVal'] [id$='_lblOCIMFStatus']:not(:has(img.statusIcon))) {
    display: none !important;
}

/* "Published:" value (lbPublish LinkButton) reads as plain meta-row value
   text, not a navy hyperlink. */
body.page-officermatrix-vessel a[id$='_lbPublish'] {
    color: #0f172a !important;
    text-decoration: none !important;
    font-weight: 500;
}
body.page-officermatrix-vessel a[id$='_lbPublish']:hover {
    color: var(--q88-grid-primary, #0d9488) !important;
    text-decoration: none !important;
}

/* The meta row is a flex container with a uniform 24px gap (spacing/6) between
   fields. Figma 878:9471 wants the label→value pairs tight (6px = spacing/1-5),
   while keeping the 24px gap BETWEEN field groups. Pull each value cell back by
   18px (24 − 18 = 6) so "OCIMF Status: [badge]" and "Published: No" read as
   pairs. The icons cell keeps its own right-side placement. */
body.page-officermatrix-vessel td[id$='_tdOCIMFStatusVal'],
body.page-officermatrix-vessel .om-detail > table.tbl:first-of-type > tbody > tr > td:has(> a[id$='_lbPublish']) {
    margin-left: -18px !important;
}


/* --------------------------------------------------------------------------
   3. Tab pill switcher — overrides the legacy ContentTabMenu sprite.
   The sprite is injected as an inline <style> via the control's `CssOverride`
   attribute; we beat it by scoping with `body.page-officermatrix-vessel` so
   the specificity rises to (0,2,1) vs the inline (0,1,0).
   -------------------------------------------------------------------------- */

/* Container — segmented control on a muted gray background, absolute top-right.
   IMPORTANT: the wrapper div around the tabs in OfficerMatrixVessel.ascx has
   NO id at all. The only descendant carrying a `_tabs_*` id suffix is the
   inner clearpixel img `_tabs_imgLeftSpacer`. The prior selector
   `[id$='_tabs']` matched ZERO elements — the absolute positioning never
   applied, which is why the tabs were rendering BELOW the title row in
   normal flow. Anchor via `:has(> img[id$='_tabs_imgLeftSpacer'])` to walk
   up to the wrapper. !important is required to beat the inline
   `style="top:1px; z-index:0; position:relative;"` on the wrapper div. */
body.page-officermatrix-vessel div:has(> img[id$='_tabs_imgLeftSpacer']) {
    position: absolute !important;
    top: 17px !important;         /* relative to .modV2 (after neutralizer below) */
    right: 24px !important;       /* flush to card padding — (+)(⋮) moved to meta row */
    left: auto !important;
    z-index: 5;
}

/* Neutralize the OfficerMatrixVessel.ascx markup wrapper
   `<div style="left:3px; top:2px; position:relative;">` that sits between
   .modV2Main and the tabs wrapper. It becomes the closest positioned ancestor
   of the tabs wrapper, so `top:17` measures from y=197 (this div's top)
   instead of y=117 (.modV2's top). Forcing it static lets the tabs anchor
   to .modV2 directly. Inline style requires !important. */
body.page-officermatrix-vessel .modV2Main > div:has(img[id$='_tabs_imgLeftSpacer']) {
    position: static !important;
    top: auto !important;
    left: auto !important;
}

/* Tabs reuse the homepage Dashboard/Classic pill-toggle pattern (see
   HomeDashboard.css `.dashboard-page-toggle` + `.dashboard-toggle-item`):
   white container with a 1px border + 12px radius + 3px inner padding,
   active item paints with --button-primary-bg (teal) + white text + drop
   shadow, inactive sits transparent and hovers to --muted. */
body.page-officermatrix-vessel .ContentTab,
body.page-officermatrix-vessel .ContentTabOn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--raw-radius-md, 8px) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.page-officermatrix-vessel .ContentTab + .ContentTab,
body.page-officermatrix-vessel .ContentTab + .ContentTabOn,
body.page-officermatrix-vessel .ContentTabOn + .ContentTab,
body.page-officermatrix-vessel .ContentTabOn + .ContentTabOn {
    margin-left: var(--raw-space-1, 2px) !important;
}

/* Collapse the sprite shoulders (.Left / .Right) so only .Middle paints. */
body.page-officermatrix-vessel .ContentTab .Left,
body.page-officermatrix-vessel .ContentTab .Right,
body.page-officermatrix-vessel .ContentTabOn .Left,
body.page-officermatrix-vessel .ContentTabOn .Right {
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

body.page-officermatrix-vessel .ContentTab .Middle,
body.page-officermatrix-vessel .ContentTabOn .Middle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    padding: var(--raw-space-2, 4px) var(--raw-space-4, 8px) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--raw-radius-md, 8px) !important;
    font-family: var(--q88-grid-font, Inter, "Helvetica Neue", Arial, sans-serif);
    font-size: var(--font-size-sm, 14px) !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: var(--foreground, #0f172a) !important;
    white-space: nowrap;
}

/* Active tab — teal pill + white text + subtle shadow (matches
   .dashboard-toggle-item--active). The .Middle gets the fill; .ContentTabOn
   is the LI/wrapper and stays radius-only so the fill clips cleanly. */
body.page-officermatrix-vessel .ContentTabOn .Middle {
    background: var(--button-primary-bg, #0d9488) !important;
    color: var(--button-primary-text, #ffffff) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    cursor: default;
}

body.page-officermatrix-vessel .ContentTab .Middle a,
body.page-officermatrix-vessel .ContentTabOn .Middle a {
    color: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit !important;
}

/* Hover (inactive only) — muted slate-100 fill, no commit to the teal active. */
body.page-officermatrix-vessel .ContentTab:hover .Middle {
    background: var(--muted, #f1f5f9) !important;
}

/* Container wrapper — match `.dashboard-page-toggle`: white surface, 1px
   slate-200 border, 12px radius, 3px inner padding. ContentTabMenu.ascx
   renders no element with the user-control id; anchor on `_imgLeftSpacer`
   (the only descendant carrying a `_tabs_…` id suffix) and walk up via
   :has() to reach the wrapper div. */
body.sidebar-nav.page-officermatrix-vessel div:has(> img[id$='_tabs_imgLeftSpacer']) {
    display: inline-flex;
    align-items: center;
    padding: var(--raw-space-1, 3px);
    background-color: var(--card-raised, #ffffff);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: var(--raw-radius-xl, 12px);
}


/* --------------------------------------------------------------------------
   4. Top-right action icons — (+) New Officer + (⋮) Actions menu.
   Per Figma 132:13298 / 132:11873 these are plain Lucide icons next to the
   "Updated" badge — NO border, NO background, NO circular button chrome.
   The page-grid stylesheet paints `.Img-Std-Add` as a 36px teal pill; this
   block strips that and the previous circle-button override.
   -------------------------------------------------------------------------- */

/* Override the teal pill ::before label injected by the page-grid skin. */
body.page-officermatrix-vessel a[id$='_lbNewOfficer']::before {
    content: none !important;
}

/* (+) New Officer — Lucide CirclePlus, plain icon, no chrome. */
body.page-officermatrix-vessel a[id$='_lbNewOfficer'].Img-Std-Add,
body.page-officermatrix-vessel a[id$='_lbNewOfficer']:has(> img.Img-Std-Add),
body.page-officermatrix-vessel a[id$='_lbNewOfficer'] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--foreground) !important;
    text-indent: 0 !important;
    line-height: 1 !important;
    font-size: 0;
    position: relative;
}

/* Hover — match the base rule's multi-selector shape so we tie/beat
   grid.css §5 `body.page-grid a.Img-Std-Add:hover` (paints teal). */
body.page-officermatrix-vessel a[id$='_lbNewOfficer'].Img-Std-Add:hover,
body.page-officermatrix-vessel a[id$='_lbNewOfficer']:has(> img.Img-Std-Add):hover,
body.page-officermatrix-vessel a[id$='_lbNewOfficer']:hover {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: var(--muted-foreground) !important;
}

/* Hide the inner clearpixel gif; draw the Lucide CirclePlus via mask. */
body.page-officermatrix-vessel a[id$='_lbNewOfficer'] > img {
    display: none !important;
}

body.page-officermatrix-vessel a[id$='_lbNewOfficer']::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    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'><circle cx='12' cy='12' r='10'/><path d='M8 12h8'/><path d='M12 8v8'/></svg>") no-repeat center / 20px;
            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'><circle cx='12' cy='12' r='10'/><path d='M8 12h8'/><path d='M12 8v8'/></svg>") no-repeat center / 20px;
}


/* (⋮) Actions menu trigger — Lucide EllipsisVertical, plain icon, no chrome. */
body.page-officermatrix-vessel a[id$='_popMenuActions_lbPopupMenu'],
body.page-officermatrix-vessel a.ActionsMenu[id*='popMenuActions'] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--foreground) !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    position: relative;
    margin-left: 8px;
    vertical-align: middle;
}

body.page-officermatrix-vessel a[id$='_popMenuActions_lbPopupMenu']:hover {
    background: transparent !important;
    color: var(--muted-foreground) !important;
}

/* Hide any inner content (caret, triangle, label) of the trigger anchor. */
body.page-officermatrix-vessel a[id$='_popMenuActions_lbPopupMenu'] > * {
    display: none !important;
}

body.page-officermatrix-vessel a[id$='_popMenuActions_lbPopupMenu']::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--icon-ellipsis-vertical) no-repeat center / 20px;
            mask: var(--icon-ellipsis-vertical) no-repeat center / 20px;
}

/* Lift the action-icon cell OUT of the meta row and INTO the title row's
   far-right edge. Anchored to .modV2 (position:relative). The td loses its
   table-cell layout role under position:absolute — the meta row collapses
   to its 3 information cells naturally. */
body.page-officermatrix-vessel td[id$='_tdHeaderButtons'] {
    position: absolute !important;
    /* top:78 drops the (+)(⋮) cluster from the title row down to the meta-row
       line, so it sits at the far-right end of that row (the OCIMF Status badge
       + Published now flow inline earlier in the same row). */
    top: 78px !important;
    right: 24px !important;
    z-index: 5;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    width: auto !important;
    height: auto;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   5. Status meta row — "Compliant: chip | Modified | OCIMF Submission Date".
   Today rendered as a 4-col table with the 4th col holding the action icons
   (rule 4 styles those). We restyle the typography + spacing of cols 1–3
   and tighten the chip styling for the "Not Compliant" red square.
   -------------------------------------------------------------------------- */
/* Convert the meta-row table from default table-cell auto-layout to a flex row
   so the three info cells (Compliant / Modified / OCIMF Submission Date) hug
   their content on the LEFT with 24px gaps. Default `<table width="100%">` +
   table-cell layout was distributing the cells across the full row width — the
   per-cell `padding-right: 24px` added space INSIDE each cell but didn't
   prevent cell expansion. Switching to display:block (table) + display:flex
   (tr) gives us a flex row where flex-items hug intrinsic width. */
body.page-officermatrix-vessel .om-detail > table.tbl:first-of-type,
body.page-officermatrix-vessel .om-detail > table.tbl:first-of-type > tbody {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 0 16px 0;
    display: block !important;
}

body.page-officermatrix-vessel .om-detail > table.tbl:first-of-type > tbody > tr {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

body.page-officermatrix-vessel .om-detail > table.tbl:first-of-type > tbody > tr > td {
    background: transparent !important;
    padding: 0 !important;            /* gap on tr handles inter-cell spacing now */
    color: #0f172a;
    font-family: var(--q88-grid-font, Inter, "Helvetica Neue", Arial, sans-serif);
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    border: 0;
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
}

/* Alert row (om-alert-row) sits below — restore full-width block behavior so
   the warning banner spans the entire row instead of becoming a flex item. */
body.page-officermatrix-vessel .om-detail > table.tbl:first-of-type > tbody > tr.om-alert-row {
    display: block !important;
}

body.page-officermatrix-vessel .om-detail > table.tbl:first-of-type > tbody > tr.om-alert-row > td {
    display: block !important;
    width: 100%;
}

body.page-officermatrix-vessel .om-detail > table.tbl:first-of-type > tbody > tr > td > b {
    font-weight: 600;
    color: #0f172a;
    margin-right: 6px;
}

/* "Compliant:" — the status value (icon + "Partial" / "Compliant" / "Not
   Compliant") is rendered server-side into the <a id="hrefCompliant">
   anchor and opens a hint popup on click. Keep the anchor inline next
   to the bold "Compliant:" label and tighten its typography. */
body.page-officermatrix-vessel a[id$='_hrefCompliant'] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0f172a !important;
    text-decoration: none !important;
    font-weight: 500;
    margin-left: 4px;
}

body.page-officermatrix-vessel a[id$='_hrefCompliant']:hover {
    text-decoration: none !important;
    color: var(--q88-grid-primary, #0d9488) !important;
}

body.page-officermatrix-vessel a[id$='_hrefCompliant'] img.statusIcon {
    width: 12px !important;
    height: 12px !important;
    border-radius: 9999px; /* circle, per Figma 331:4727 rounded-full */
}

/* The shared OfficerMatrixComplianceSettings user control may render its
   own chip alongside; keep its inline-flex layout consistent. */
body.page-officermatrix-vessel [id$='_ucOfficerMatrixComplianceSettings'] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}


/* --------------------------------------------------------------------------
   6. "Officers updated" alert banner — Tab 1 only.
   Today: gray bg + thin gray border + red text + close X.
   Figma: amber bg (#fef3c7) + amber text (#b45309) + warning triangle icon
          + close X. Rounded 10px, 16px horizontal padding, 12px vertical.
   -------------------------------------------------------------------------- */
body.page-officermatrix-vessel .om-alert-row > td {
    padding: 0 !important;
    background: transparent !important;
}

body.page-officermatrix-vessel .om-alert {
    /* beat the inline style values */
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    /* QEN-8831 — 8px gap (spacing/2) between the meta/info row and the banner. */
    margin: 8px 0 16px 0 !important;
    font-family: var(--q88-grid-font, Inter, "Helvetica Neue", Arial, sans-serif);
    font-size: 13px;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-officermatrix-vessel .om-alert .om-alert__text {
    color: #b45309 !important;
    font-weight: 500;
    flex: 1 1 auto;
}

/* Hide raster icons inside the alert — TriangleAlert + X painted via mask below. */
body.page-officermatrix-vessel .om-alert > img.om-alert__icon,
body.page-officermatrix-vessel .om-alert .om-alert__close > img {
    display: none !important;
}

/* Lucide TriangleAlert — replaces /images/icons/alertVal.png raster.
   Painted as ::before on .om-alert so it's the first flex item (left of text). */
body.page-officermatrix-vessel .om-alert::before {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>") no-repeat center / 18px;
            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.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>") no-repeat center / 18px;
}

body.page-officermatrix-vessel .om-alert .om-alert__close {
    float: none !important;
    /* QEN-8831 — close X must sit at the END of the banner. It is the FIRST DOM
       child (before the icon + text), so push it last in the flex flow. The text
       (flex:1 1 auto) grows and seats the X flush to the banner's right edge. */
    order: 1;
    margin-left: auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #b45309 !important;
    opacity: 0.7;
    text-decoration: none !important;
    flex: 0 0 auto;
}

body.page-officermatrix-vessel .om-alert .om-alert__close:hover {
    opacity: 1;
}

/* Lucide X — replaces /images/icons/close.gif raster on the close link. */
body.page-officermatrix-vessel .om-alert .om-alert__close::after {
    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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>") no-repeat center / 16px;
}

/* Per-row "Missing Data" validation icon (the grid's `imgValidation`, a bare
   <img src="/images/icons/alertVal.png">). This is an advisory warning, not a
   field-validation error, so it stays AMBER (#f59e0b) — distinct from the
   global red TriangleAlert swap in icon-swaps.css. Targeted by id-suffix so
   the page's own red ValImage validators (e.g. the calIntended date error)
   keep the global red treatment. More specific than `img[src*=alertVal]`, so
   this wins; `content:url` replaces the raster, src/title left intact. */
body.page-officermatrix-vessel img[id$='imgValidation'][src*="alertVal" i] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>") !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
}


/* --------------------------------------------------------------------------
   7. Grid (gridOM) — the heavy lifting comes from grid.css §7.
   Page-specific tweaks:
     - row "action" column (pencil + X) trim + spacing
     - drop the navy 1px border from the legacy wrapper (handled by .om-detail)
     - Compliance icon column tightening
   -------------------------------------------------------------------------- */

/* Stretch the DevExpress vertical scroll panel to fill the viewport. The
   shared rule lives in grid.css §7 (keyed off --grid-page-vertical-offset);
   we just override the variable here because this page has extra below-grid
   chrome (status meta row, comments, bottom action buttons) that the
   default 340px doesn't reserve. When the planning-divergence alert is
   visible, the grid starts ~52px lower, so we bump the offset further. */
/* Specificity note: grid.css loads AFTER this file, so a single-class
   `body.page-officermatrix-vessel` selector ties on specificity and loses
   to grid.css's `body.page-grid` default. Match both classes (the body
   wears both) so we win the cascade. */
body.page-officermatrix-vessel.page-grid {
    --grid-page-vertical-offset: 561px;
}

body.page-officermatrix-vessel.page-grid:has(.om-alert) {
    --grid-page-vertical-offset: 613px;
}

body.page-officermatrix-vessel.page-grid .dxgvCSD {
    height: auto !important;
    max-height: calc(100vh - var(--grid-page-vertical-offset)) !important;
    min-height: 0 !important;
}

/* The action column renders <a id="..._lbViewDetail"><img class="Img-Std-EditV2">
   + 10px spacer img + <a id="..._lbDelete"><img class="Img-Std-Delete">, and on
   planned-officer rows a third <a id="..._lbSignOnboard"> sign-on icon. Tighten
   spacing and shrink to 16px icons per Figma. */
body.page-officermatrix-vessel #gridOM a[id$='_lbViewDetail'],
body.page-officermatrix-vessel #gridOM a[id$='_lbDelete'],
body.page-officermatrix-vessel #gridOM a[id$='_lbSignOnboard'],
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbViewDetail'],
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbDelete'],
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbSignOnboard'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #64748b;
    background: transparent;
    border: 0;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.page-officermatrix-vessel #gridOM a[id$='_lbViewDetail']:hover,
body.page-officermatrix-vessel #gridOM a[id$='_lbDelete']:hover,
body.page-officermatrix-vessel #gridOM a[id$='_lbSignOnboard']:hover,
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbViewDetail']:hover,
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbDelete']:hover,
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbSignOnboard']:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
}

body.page-officermatrix-vessel #gridOM a[id$='_lbViewDetail'] img.Img-Std-EditV2,
body.page-officermatrix-vessel #gridOM a[id$='_lbDelete'] img.Img-Std-Delete,
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbViewDetail'] img.Img-Std-EditV2,
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbDelete'] img.Img-Std-Delete {
    width: 16px;
    height: 16px;
    display: block;
}

/* The lbDelete <a> renders <img src="/images/icons/delete.png"> with NO class
   (the DXX grid loses the class on the inner img), so the `img.Img-Std-Delete`
   selector above never matches and the raster red X sprite still paints at 15×15.
   Hide the inner img and paint a Lucide X mask in slate-500 to match Figma's
   muted-gray delete icon. Same approach as lbNewOfficer. */
body.page-officermatrix-vessel #gridOM a[id$='_lbDelete'] > img,
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbDelete'] > img {
    display: none !important;
}

body.page-officermatrix-vessel #gridOM a[id$='_lbDelete']::after,
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbDelete']::after {
    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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>") no-repeat center / 16px;
}

/* lbSignOnboard (rendered only on planned-officer rows) ships <img src=
   "/images/icons/add.gif"> — the legacy raster "+" that clashes with the
   refresh. Hide it and paint a Lucide user-plus mask, mirroring the lbDelete
   swap above (the DXX grid strips the inner img class but the anchor id
   survives, so the ::after hook hangs off the <a>). */
body.page-officermatrix-vessel #gridOM a[id$='_lbSignOnboard'] > img,
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbSignOnboard'] > img {
    display: none !important;
}

body.page-officermatrix-vessel #gridOM a[id$='_lbSignOnboard']::after,
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbSignOnboard']::after {
    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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><line x1='19' x2='19' y1='8' y2='14'/><line x1='22' x2='16' y1='11' y2='11'/></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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><line x1='19' x2='19' y1='8' y2='14'/><line x1='22' x2='16' y1='11' y2='11'/></svg>") no-repeat center / 16px;
}

/* Drop the 10px spacer pixels between the action icons — the 28px hover boxes
   give each icon its own breathing room. imgClear sits edit↔delete; imgClear1
   sits delete↔sign-on (planned rows only). */
body.page-officermatrix-vessel #gridOM img[id$='_imgClear'],
body.page-officermatrix-vessel [id$='_gridOM'] img[id$='_imgClear'],
body.page-officermatrix-vessel #gridOM img[id$='_imgClear1'],
body.page-officermatrix-vessel [id$='_gridOM'] img[id$='_imgClear1'] {
    display: none !important;
}

/* Kill the stray "…" (the "3 dots"). grid.css §7 puts `overflow:hidden;
   text-overflow:ellipsis` on EVERY data cell to truncate long text. The
   action column holds icon anchors, not text — and once the sign-on button
   became a full 28px box (was a ~13px add.gif) the three icons overflow the
   auto-sized last column, so the browser paints an ellipsis after the clipped
   icons. That ellipsis is a render artifact (no DOM node, no SVG), which is
   why it couldn't be found in the inspector. Let this one cell show its icons
   in full and never paint the ellipsis. Targeted via the edit anchor it always
   contains; specificity (0,4,2) beats grid.css's `.dxgvDataRow td` (0,2,1),
   which loads after this file. */
body.page-officermatrix-vessel #gridOM .dxgvDataRow td:has(> a[id$='_lbViewDetail']),
body.page-officermatrix-vessel [id$='_gridOM'] .dxgvDataRow td:has(> a[id$='_lbViewDetail']) {
    overflow: visible !important;
    text-overflow: clip !important;
    /* QEN-8831 — flex the action cell so the icons can be reordered (X last)
       via `order` below without a DOM/code-behind change. justify-content:center
       preserves the centered last-column alignment from grid.css §7. */
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* QEN-8831 — row action icon order + colour per Figma feedback:
     edit (order 0) → add/sign-on (order 1, grey) → remove X (order 2, RED, last).
   In markup the order is edit → X → sign-on (X is built before sign-on in
   ColumnCustomActionTemplate), so `order` re-sequences them visually. The X
   paints via currentColor (§7 mask), so colouring the anchor red colours the X.
   On onboard (non-planned) rows there is no sign-on icon — edit (0) + X (2)
   still leave the X last. */
body.page-officermatrix-vessel #gridOM a[id$='_lbViewDetail'],
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbViewDetail'] {
    order: 0;
}

body.page-officermatrix-vessel #gridOM a[id$='_lbSignOnboard'],
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbSignOnboard'] {
    order: 1;
    color: #64748b !important;            /* add button → grey (slate-500) */
}

body.page-officermatrix-vessel #gridOM a[id$='_lbDelete'],
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbDelete'] {
    order: 2;
    color: var(--red-600, #dc2626) !important;   /* remove X → red, always last */
}

/* Keep the X red on hover (the §7 base hover repaints all icons to
   --text-primary; for the destructive X a darker red reads better). */
body.page-officermatrix-vessel #gridOM a[id$='_lbDelete']:hover,
body.page-officermatrix-vessel [id$='_gridOM'] a[id$='_lbDelete']:hover {
    color: #b91c1c !important;            /* red-700 */
}

/* Tighter rank-column compliance icon — currently a clearpixel + label;
   keep it inline. */
body.page-officermatrix-vessel #gridOM img[id$='_imgValidation'] {
    margin-right: 4px;
}


/* --------------------------------------------------------------------------
   8. Comments section — "Comments (OCIMF)" + "Comments (Internal)"
   Figma: clean text labels (14px regular slate-900, NO background, NO bold)
   sitting flush-left above each textarea with a small bottom gap.
   Note: `.tbl:first-of-type + table` cannot reach the comments table because
   13 sibling nodes (ASPxGridView output + scripts + ASPx popups) sit between
   the two `.tbl` tables. Use `.tbl:last-of-type` instead.
   -------------------------------------------------------------------------- */
body.page-officermatrix-vessel .om-detail > table.tbl:last-of-type {
    margin-top: 16px;
    border-spacing: 0;
    /* Legacy .tbl rule paints rgb(248,248,248) on the <table> — strip it so the
       comments band sits flat on the card's white background. */
    background-color: transparent !important;
    background-image: none !important;
}

/* Top row holds the labels; bottom row holds the textareas. Add a small gap
   between the label row and the textarea row to match Figma. */
body.page-officermatrix-vessel .om-detail > table.tbl:last-of-type > tbody > tr:first-child > td {
    padding-bottom: 6px !important;
}

/* The labels render as <b> inside a <div class="FloatLeft">. Strip the bold,
   neutralise the legacy 12px size, push to Figma 14px / slate-900 / regular.
   .FloatContainer + .FloatLeft carry no background of their own (probed
   transparent) but we lock the wrapper bg to transparent anyway in case a
   global rule paints it later. */
body.page-officermatrix-vessel .om-detail > table.tbl:last-of-type b {
    font-family: var(--q88-grid-font, Inter, "Helvetica Neue", Arial, sans-serif);
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    line-height: 20px;
    letter-spacing: 0;
}

body.page-officermatrix-vessel .om-detail > table.tbl:last-of-type .FloatContainer,
body.page-officermatrix-vessel .om-detail > table.tbl:last-of-type .FloatLeft,
body.page-officermatrix-vessel .om-detail > table.tbl:last-of-type .FloatRight {
    background: transparent !important;
}

/* Both header cells (OCIMF + Internal) need their labels on the SAME baseline.
   The Internal cell has a 28px pencil in .FloatRight, the OCIMF cell only has a
   20px text .FloatLeft, so floats land the labels 4px apart vertically. Convert
   the .FloatContainer to a centered flex row and lock the minimum height to the
   tallest child (28px). Both labels then sit on the same y. */
body.page-officermatrix-vessel .om-detail > table.tbl:last-of-type > tbody > tr:first-child .FloatContainer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 28px;
}

body.page-officermatrix-vessel .om-detail > table.tbl:last-of-type > tbody > tr:first-child .FloatLeft,
body.page-officermatrix-vessel .om-detail > table.tbl:last-of-type > tbody > tr:first-child .FloatRight {
    float: none !important;
    display: inline-flex;
    align-items: center;
}

/* Read-only comment textareas — reset the inline border + bg to Figma look. */
body.page-officermatrix-vessel [id$='_txtPublicCommentsView'],
body.page-officermatrix-vessel [id$='_txtCommentsView'] {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-family: var(--q88-grid-font, Inter, "Helvetica Neue", Arial, sans-serif);
    font-size: 13px !important;
    color: var(--text-primary) !important;
    width: 100% !important;
    min-height: 84px !important;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.page-officermatrix-vessel [id$='_txtPublicCommentsView']:focus,
body.page-officermatrix-vessel [id$='_txtCommentsView']:focus {
    outline: none;
    border-color: var(--q88-grid-primary, #0d9488) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15);
}

/* Edit-Comments LinkButton (pencil) next to "Comments (Internal)" — small icon. */
body.page-officermatrix-vessel a[id$='_lbComments'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #64748b;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.page-officermatrix-vessel a[id$='_lbComments']:hover {
    background: var(--surface-muted);
    color: var(--q88-grid-primary, #0d9488);
}

body.page-officermatrix-vessel a[id$='_lbComments'] img {
    width: 14px;
    height: 14px;
}

/* Refresh skin (body.sidebar-nav) — larger comments icon. */
body.sidebar-nav.page-officermatrix-vessel a[id$='_lbComments'] img {
    width: 22px;
    height: 22px;
}


/* --------------------------------------------------------------------------
   9. Bottom action buttons — "Fleet Overview" (secondary) + "Submit" (primary).
   The .ascx adds two CSS classes on each LinkButton: `om-btn` + `om-btn--*`.
   Both buttons retain `.LinkButton` from legacy code which gets paint from
   MainWhiteout etc. — we beat it with higher specificity.
   -------------------------------------------------------------------------- */
body.page-officermatrix-vessel .om-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0 0 0 !important;
    text-align: right !important;
}

body.page-officermatrix-vessel .om-actions a.LinkButton.om-btn,
body.page-officermatrix-vessel .om-actions a.om-btn,
body.page-officermatrix-vessel .om-actions .om-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    height: 36px !important;
    min-width: 0;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-family: var(--q88-grid-font, Inter, "Helvetica Neue", Arial, sans-serif);
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
    background-image: none !important;
}

/* Secondary outline — Fleet Overview */
body.page-officermatrix-vessel .om-actions .om-btn--secondary,
body.page-officermatrix-vessel .om-actions a.LinkButton.om-btn--secondary {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid #e5e7eb !important;
}

body.page-officermatrix-vessel .om-actions .om-btn--secondary:hover,
body.page-officermatrix-vessel .om-actions a.LinkButton.om-btn--secondary:hover {
    background: var(--surface-muted) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

/* Primary teal — Submit to OCIMF (uses the page-grid teal token) */
body.page-officermatrix-vessel .om-actions .om-btn--primary,
body.page-officermatrix-vessel .om-actions a.LinkButton.om-btn--primary {
    background: var(--q88-grid-primary, #0d9488) !important;
    color: var(--q88-grid-primary-fg, #ffffff) !important;
    border: 1px solid var(--q88-grid-primary, #0d9488) !important;
}

body.page-officermatrix-vessel .om-actions .om-btn--primary:hover,
body.page-officermatrix-vessel .om-actions a.LinkButton.om-btn--primary:hover {
    background: var(--q88-grid-primary-hover, #0f766e) !important;
    border-color: var(--q88-grid-primary-hover, #0f766e) !important;
    color: var(--q88-grid-primary-fg, #ffffff) !important;
}

/* Hide the legacy <ins>&nbsp;</ins> spacer that ASP.NET prepends to LinkButton —
   it becomes a flex item in the inline-flex container and offsets the icon.
   See linkbutton-ins-spacer-trap memory note. */
body.page-officermatrix-vessel .om-actions a.LinkButton.om-btn > ins {
    display: none !important;
}

/* Re-paint the ImageManager icon inside the buttons. The ImageManager outputs
   a small <img class="Img-Std Img-Std-Back"> + <span class="Label"> structure;
   keep label visible, normalise icon size. */
body.page-officermatrix-vessel .om-actions a.LinkButton.om-btn img {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    border: 0;
}

body.page-officermatrix-vessel .om-actions a.LinkButton.om-btn .Label,
body.page-officermatrix-vessel .om-actions a.LinkButton.om-btn .LabelText {
    font: inherit;
    color: inherit;
    background: transparent !important;
    padding: 0 !important;
}


/* --------------------------------------------------------------------------
   10. Read-only banner — keep it visible but match Figma muted-blue tone.
   The page renders a "Read Only Access" banner via a div with class BGv4
   StdPadding when permission is read-only. Re-skin to a neutral chip style.
   -------------------------------------------------------------------------- */
body.page-officermatrix-vessel .om-detail > div.BGv4 {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1e40af !important;
    border-radius: 8px;
    padding: 8px 12px !important;
    margin: 0 0 16px 0;
    font-size: 13px;
    font-weight: 500;
}


/* --------------------------------------------------------------------------
   11. Narrow viewport fallbacks — when the card is < ~1100px the absolute
   tabs would clip with the title text. Drop them into normal flow.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    body.page-officermatrix-vessel .modV2 {
        padding-right: 16px !important;
    }

    body.page-officermatrix-vessel [id$='_pnlTitleRight'] {
        margin-right: 0 !important;
    }

    body.page-officermatrix-vessel [id$='_tabs'] {
        position: static;
        margin: 8px 0 12px 0;
    }
}


/* --------------------------------------------------------------------------
   12. Popup body content tweaks.
   The shared <uc:Modal> chrome (panel border, header, X close, footer
   buttons) is painted by components.css §"Generic Modal popup [uc:Modal]"
   under body.sidebar-nav — every uc:Modal on this page inherits it.
   This block adds OM-Vessel-specific BODY content that falls outside the
   generic rule:
     12a. mpeComments — two textareas with legacy OS default chrome.
     12b. mpeOCIMFSubmit — text/password inputs + an <asp:Button> "Submit"
          which renders as <input type="submit"> (outside the generic
          a.LinkButton scope) + inline blue progress bar.
     12c. dxxPopHint — non-uc:Modal ASPxPopupControl with hardcoded navy
          border + yellow bg.
   Selectors target explicit element IDs / classes so shared CalendarControl
   text inputs aren't accidentally swept up.
   -------------------------------------------------------------------------- */

/* 12a. mpeComments textareas — modern bordered field. */
body.page-officermatrix-vessel #txtPublicComments,
body.page-officermatrix-vessel #txtComments {
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0)) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    background: #ffffff;
    color: var(--text-primary, #0f172a);
    font: 14px/20px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    resize: vertical;
}

body.page-officermatrix-vessel #txtPublicComments:focus,
body.page-officermatrix-vessel #txtComments:focus {
    border-color: var(--q88-grid-primary, #0d9488) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15);
}

/* mpeComments footnotes — moved OUT of the footer into a slim helper line
   directly under the two textareas. The footer is now a clean right-aligned
   Cancel+Save cluster handled by the global `.modPopFooter` flex chrome.
   Previously the footer-left footnote cell stole horizontal width, squeezing
   the button cell narrow and wrapping the two pills into a vertical stack. */
body.page-officermatrix-vessel .omCommentsFootnote {
    margin: 12px 3px 0;
    font: 12px/18px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-muted, #475569);
}

/* mpeComments footer buttons — pin to the 36px design height. The global
   `.modPopFooter a.LinkButton` rule sets `height: 36px` but without
   `box-sizing: border-box`; legacy `.LinkButton` padding (6px vertical) +
   border then inflate the rendered box to ~50px ("very large" buttons).
   border-box absorbs the padding/border back into the 36px so Cancel/Save
   render at the intended pill size. */
body.page-officermatrix-vessel [id$="_mpeComments_pnlModalPopup"] .modPopFooter a.LinkButton {
    box-sizing: border-box !important;
    height: 36px !important;
    padding: 0 16px !important;
}


/* 12b. mpeOCIMFSubmit text/password inputs — modern bordered field. */
body.page-officermatrix-vessel [id$="_mpeOCIMFSubmit_pnlModalPopup"] input[type="text"],
body.page-officermatrix-vessel [id$="_mpeOCIMFSubmit_pnlModalPopup"] input[type="password"] {
    height: 32px !important;
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0)) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    background: #ffffff;
    color: var(--text-primary, #0f172a);
    font: 14px/20px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

body.page-officermatrix-vessel [id$="_mpeOCIMFSubmit_pnlModalPopup"] input[type="text"]:focus,
body.page-officermatrix-vessel [id$="_mpeOCIMFSubmit_pnlModalPopup"] input[type="password"]:focus {
    border-color: var(--q88-grid-primary, #0d9488) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15);
}

/* OCIMF row labels — column 1 cells become an aligned label. */
body.page-officermatrix-vessel [id$="_mpeOCIMFSubmit_pnlModalPopup"] .modPopContent td:first-child {
    color: var(--text-muted, #475569);
    font: 500 13px/20px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 6px 12px 6px 0;
    vertical-align: middle;
}

/* Submit body button — <asp:Button> → <input type="submit" class="LinkButton">.
   Match the teal pill that the global rule paints on <a class="LinkButton">. */
body.page-officermatrix-vessel [id$="_btnOCIMFSubmit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    background: var(--button-primary-bg, var(--brand-primary, #0d9488)) !important;
    color: var(--button-primary-text, #ffffff) !important;
    border: 1px solid var(--button-primary-bg, var(--brand-primary, #0d9488)) !important;
    font: 500 14px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    min-width: 64px;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

body.page-officermatrix-vessel [id$="_btnOCIMFSubmit"]:hover {
    background: var(--button-primary-bg-hover, var(--brand-primary-hover, #0f766e)) !important;
    border-color: var(--button-primary-bg-hover, var(--brand-primary-hover, #0f766e)) !important;
}

/* OCIMF progress bar — inline style sets background #4F72A4 (legacy navy).
   Repaint to teal so it matches the rest of the popup. */
body.page-officermatrix-vessel #ocimfProgressBar {
    background: var(--q88-grid-primary, #0d9488) !important;
    border-radius: 6px !important;
}

/* OCIMF progress log box — soften the bg + add radius for consistency.
   Hide entirely when empty (initial state pre-submit). */
body.page-officermatrix-vessel #ocimfProgressLog {
    background: var(--surface-muted, #f8fafc) !important;
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0)) !important;
    border-radius: 8px !important;
    font: 12px/18px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body.page-officermatrix-vessel #ocimfProgressLog:empty {
    display: none !important;
}


/* 12c. dxxPopHint — Compliant hint popup. Non-uc:Modal (ASPxPopupControl),
   so the generic .modPopPnl rule doesn't touch it. Markup:
   <div class="CompliantPopup">
     <div class="q88-bg-highlight" style="border:1px solid #003366;">
       <table>
         <tr>
           <td><img src='HintPointerLeft.gif'></td>
           <td><span id="spanHint"></span></td>
         </tr>
       </table>
     </div>
   </div>
   Strip the navy border + yellow bg, replace with modern card chrome.
   Keep the pointer image hidden — modern popovers don't use it. */
body.page-officermatrix-vessel .CompliantPopup,
body.page-officermatrix-vessel [id*="_dxxPopHint"].CompliantPopup {
    background: transparent !important;
    border: 0 !important;
}

body.page-officermatrix-vessel .CompliantPopup .q88-bg-highlight,
body.page-officermatrix-vessel [id*="_dxxPopHint"] .q88-bg-highlight {
    background: var(--surface-raised, #ffffff) !important;
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0)) !important;
    border-radius: 8px !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

body.page-officermatrix-vessel .CompliantPopup .q88-bg-highlight table {
    border-collapse: collapse;
}

body.page-officermatrix-vessel .CompliantPopup .q88-bg-highlight td {
    padding: 8px 12px;
    font: 13px/20px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary, #0f172a);
}

/* Hide the legacy HintPointer gif — modern popover relies on the card border. */
body.page-officermatrix-vessel .CompliantPopup img[src*="HintPointer"] {
    display: none !important;
}

body.page-officermatrix-vessel .CompliantPopup .q88-bg-highlight td:first-child:has(img[src*="HintPointer"]) {
    display: none;
}


/* --------------------------------------------------------------------------
   13. mpePerson iframe popup — parent-side chrome.

   The popup is a raw `<asp:Panel id="pnlPerson">` wrapping
   `<iframe id="ifPerson">` driven by AjaxControlToolkit's
   `ModalPopupExtender` (NOT a `<uc:Modal>`), so the global §"Generic Modal
   popup" chrome at components.css L2056-2288 does NOT apply. Paint the
   modern card chrome on the panel here; the iframe body re-skin lives in
   `/styles/officer-matrix-person.css` and is registered via Blank.master.cs
   when LoadControl loads OfficerMatrixPerson.ascx.

   Iframe size — `OfficerMatrixVessel.ascx` inlines width:900px; height:470px
   on the iframe (same shape as the Officers page). The modNewEdit Profile
   form renders ~820px tall after the §"officer-matrix-person.css" re-skin
   (was ~760px before — section heading padding + Comments textarea min-
   height grew). Override the inline 470px to 860px so the Save / Cancel /
   Sign-Off footer sits inside the visible iframe by default. Sticky footer
   in officer-matrix-person.css §1 still keeps the buttons reachable if the
   form ever grows past 860 (long Year Experience tables, validation rows).
   The shorter modNewPersonType ("New Officer:" type-selector) just shows
   extra white space below — fine.
   -------------------------------------------------------------------------- */
body.page-officermatrix-vessel [id$="_pnlPerson"] {
    /* ModalPopupExtender computes top/left relative to the content TD —
       on this page that TD sits inside a layout table to the right of the
       ~256px sidebar, so the inline calc lands the popup either skewed
       (default) or at true viewport center (a previous attempt) — the user
       wants the popup centered inside the main CONTENT AREA (q88-card),
       i.e. the rectangle BETWEEN the left sidebar and the top header bar
       and the viewport's right/bottom edges. Shift the fixed-center anchor
       by half-sidebar (~128px right) + half-topbar (~40px down) so the
       popup's centroid lands at the content-area centroid regardless of
       viewport size. Sidebar = 256px, topbar = 79px on this layout. Beats
       the inline `top`/`left` ACT writes on the panel. */
    position: fixed !important;
    top: calc(50% + 40px) !important;
    left: calc(50% + 128px) !important;
    transform: translate(-50%, -50%) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0)) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}

body.page-officermatrix-vessel iframe#ifPerson {
    /* QEN-8801 — widen the inline 900px so the Profile form's field labels
       fit on one line (at 900 the OMData label columns squeezed to 182/107px
       and "Certificate of Competency:" / "On This Type of Tanker:" et al.
       wrapped to 2-3 lines). The label nowrap rule in officer-matrix-person.css
       §5 keeps every label on a single line, which pushes the populated form's
       min-content to ~1050px (two side-by-side OMData columns + the 120px Years
       inputs + the "As of <date>" column). At the old 1000px width that ~1050px
       overflowed the scrolling="no" iframe and was CLIPPED on the right (View
       History, the "As of Today" column, Save/Cancel) — QEN-8831 feedback
       "content doesn't fit the screen". 1100px gives the form ~35px of slack so
       it shows in full without a scrollbar on a normal screen. max-width keeps
       the whole modal inside the content area on smaller laptops (it centres in
       the space right of the 257px sidebar, so vw-290 < content-area width
       guarantees side margins at every width); below ~1366px the iframe is
       capped narrower than the form, but officer-matrix-person.css §1 now lets
       the body scroll horizontally (overflow-x:auto) so nothing is permanently
       clipped — it's reachable, not lost. Keep width/max-width in sync with the
       twin #ifPerson rule in officer-matrix-officers.css (same popup, second
       host page). */
    width: 1100px !important;
    max-width: calc(100vw - 290px) !important;
    height: 860px !important;
    max-height: calc(100vh - 120px) !important;
}

/* Lock the parent page's body scroll while the popup is open so that
   wheeling the mouse over the popup scrolls the iframe (or does nothing if
   it fits) instead of bubbling to the page behind. ACT's ModalPopupExtender
   toggles inline `display: none` on the backdrop when closed; the absence
   of that inline style = modal is open. */
body.page-officermatrix-vessel:has(#mpePerson_backgroundElement):not(:has(#mpePerson_backgroundElement[style*="display: none"])):not(:has(#mpePerson_backgroundElement[style*="display:none"])) {
    overflow: hidden !important;
}


/* --------------------------------------------------------------------------
   14. Compliance Settings popup — modComplianceSetting (MPE + ModuleTemplate).

   The "Edit Settings" affordance on the Compliance dialog opens the shared
   OfficerMatrixComplianceSettings.ascx control, embedded on THIS page (NOT an
   iframe here — the OfficerMatrixCompliance.ascx flow loads the same control
   via a LoadControl iframe, which is a separate Blank.master context not
   covered by this file). It is a V1 <uc:ModuleTemplate> wrapped in an
   ajaxToolkit:ModalPopupExtender — the "third popup mechanism" (DESIGN.md
   §16.12). The global components.css §9.10 chrome only matches <uc:Modal>
   `.modPopPnl`, so this renders FULLY legacy: navy #2D3663 `.modTitle`,
   #4F72A4 `.GridHeader` sub-header band, #003366 `.modInnerContainer` border,
   slate-50 `.modMain`, #ddd `.modFooter2`.

   Fix = clone the §9.11 / scheduledreports.css §8 chrome recipe, scoped by the
   panel id-suffix `[id$='_pnlComplianceSetting']` (the divMod is a <table> with
   class `.modContainerStd`; only one on the page — gotcha #7 satisfied), using
   LITERAL hex (the ModuleTemplate sits under MainWhiteout `!important`
   shorthands; var() in a shorthand+!important loses the cascade — §32.2/§32.3).

   Body is mostly already-refreshed: checkbox accent + footer buttons inherit
   the global teal/ghost `.LinkButton` skin. Work here is chrome + the navy
   `.GridHeader` band + the legacy #ddd footer band + the (glyph-less on Q88)
   close X.
   -------------------------------------------------------------------------- */

/* §14.1 — Outer card (modInnerContainer): white surface, slate-200 border,
   12px radius, soft shadow. Keep the ModuleTemplate's inline 700px width. */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modInnerContainer {
    box-sizing: border-box;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
}

/* Release the transparent table/cell wrappers (the .modContainerStd divMod
   table + its layout cells). Leave width alone (700px is the intended size). */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modContainerStd,
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modContainerStd > tbody > tr > td {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
}

/* Border-box on the three sections — they are legacy content-box @ width:100%,
   so 16px padding would overflow the card by 32px and overflow:hidden clips the
   right-seated close X. */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modTitle,
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modMain,
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modFooter2 {
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Collapse the empty ModuleTemplate header/sub panels between title and body. */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modTitleHeader:empty,
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modSub1:empty,
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modSubHeader:empty {
    display: none !important;
}

/* §14.2 — Header: strip the navy #2D3663 ribbon, flex row (title left / close
   right), 16/16/12 padding cadence. */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modTitle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    padding: 16px 16px 12px 16px !important;
    height: auto !important;
}

/* §14.3 — Title text (the inline <span> keeps font-weight:normal for the
   vessel name). */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modTLeft {
    flex: 1 1 auto;
    min-width: 0;
    background-color: transparent !important;
    color: #0f172a !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    text-align: left;
}

/* §14.4 — Close X: paint a Lucide x via the --icon-x token mask on the
   (glyph-less on Q88) TitleRight anchor. The anchor's onclick
   (ShowModal('mpeComplianceSetting', false)) is already wired in markup
   (id="lnkClose"), so no markup change is needed. */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modTRight {
    flex: 0 0 auto;
    width: auto !important;
    background-color: transparent !important;
    padding: 0 !important;
}
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modTRight a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #64748b;
    background-color: transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modTRight a img {
    display: none !important;
}
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modTRight a::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon-x) no-repeat center / 16px;
            mask: var(--icon-x) no-repeat center / 16px;
}
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modTRight a:hover {
    color: var(--text-primary);
    background-color: var(--surface-muted);
}

/* §14.5 — Body: drop the slate-50 fill. Padding handled per-cell below so the
   sub-header band can span full-width while the list gets a 16px gutter. */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modMain {
    background-color: #ffffff !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 20px;
}

/* §14.6 — Sub-header band: strip the #4F72A4 navy GridHeader cells → a slate-50
   strip with slate-600 text and a 1px slate-200 divider. Spans full width
   (left "Select Oil Companies:" label + right "Copy Settings…" link + the
   hidden "Select Vessel(s) To Save To:" header all carry .GridHeader). */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .GridHeader {
    background-color: var(--surface-card) !important;
    background-image: none !important;
    color: var(--text-muted) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    padding: 10px 16px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* §14.6b — "Copy Settings to Another Vessel" link (lnkSaveTo) carries inline
   ForeColor="White"; !important on color beats the inline style. Recolor to
   teal now that the band is light. (ImageManager ImageIcon="Fleet" emits no
   glyph on Q88, so this is label-only.) */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] a[id$='_lnkSaveTo'],
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] a[id$='_lnkSaveTo'] .LabelText,
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] a[id$='_lnkSaveTo'] span {
    color: var(--primary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] a[id$='_lnkSaveTo']:hover,
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] a[id$='_lnkSaveTo']:hover .LabelText {
    color: var(--button-primary-hover) !important;
    text-decoration: underline !important;
}

/* §14.7 — List body cells (the colspan=2 oil-company column + the hidden
   copy-to-vessel column). Direct children of tblOilCompanySelection ONLY (the
   `>` combinators exclude the nested 4-column CheckBoxList cells, which must
   keep their tight spacing). */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] [id$='_tblOilCompanySelection'] > tbody > tr > td:not(.GridHeader) {
    padding: 12px 16px !important;
    background-color: #ffffff !important;
    color: var(--text-primary);
    vertical-align: top;
}

/* "Select All | None" toggles (and the copy-column's lnkSelectAll/Unselect
   LinkButtons) → teal text links. */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] [id$='_tblOilCompanySelection'] > tbody > tr > td:not(.GridHeader) a {
    color: var(--text-link) !important;
    text-decoration: none !important;
}
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] [id$='_tblOilCompanySelection'] > tbody > tr > td:not(.GridHeader) a:hover {
    text-decoration: underline !important;
}

/* Native checkbox accent — teal per §16.8 (already global, restated for the
   popup's isolation under MainWhiteout). */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] input[type='checkbox'] {
    accent-color: var(--primary);
}

/* Soften the copy-to-vessel column's inline medium-gray left divider when it
   becomes visible. */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] [id$='_tdCopyAnswer'] {
    border-left: 1px solid #e2e8f0 !important;
}

/* §14.8 — Footer: strip the legacy #ddd gray band, slate-200 top divider,
   flex-end pill cluster. The inner <table width="100%"> + right-aligned <td>
   already cluster the Cancel (ghost) + Save (teal) LinkButtons via the global
   skin — just neutralise the table chrome. */
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modFooter2 {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 12px 16px !important;
}
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modFooter2 table {
    width: 100% !important;
    background: transparent !important;
}
body.page-officermatrix-vessel [id$='_pnlComplianceSetting'] .modFooter2 td {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    text-align: right !important;
}

/* §14.9 — Bleed-through fix.
   The compliance display behind this popup is a body-level jQuery UI dialog
   (`.ui-dialog` wrapping `#divComplaince`, z-index 1002, a direct child of
   <body>). This Settings popup's MPE panel (z 100003) AND its modalBackground
   backdrop (z 100002) are both nested inside `.ContentPane { position:relative;
   z-index:1 }` — a refresh-layout stacking context. At the document root that
   makes it jQuery-dialog (z 1002) vs ContentPane (z 1): the dialog paints above
   the ENTIRE ContentPane subtree, so the backdrop cannot dim it and the popup
   cannot rise above it (the company list bleeds over the popup's left edge and
   below it).

   Lowering the dialog's z-index does NOT work: `.q88-content` (the refresh
   layout wrapper around ContentPane) is itself a stacking context, so
   ContentPane's z:1 is trapped inside it and a body-level dialog still wins by
   DOM order even at z:0. Rather than fight the stacking math, suppress the
   compliance dialog outright while the Settings popup is open — it is the
   PARENT this popup was launched from, so hiding it behind the child popup +
   dim is the correct "child modal covers parent" behavior. The :has() gate
   keys off the MPE backdrop being present and NOT display:none, so the dialog
   returns the instant the popup closes (same open-state detection pattern as
   §13's mpePerson scroll-lock). Scoped via `:has(#divComplaince)` so no other
   jQuery UI dialog is touched. visibility (not display) keeps jQuery's own
   layout/position intact for when it reappears. */
body.page-officermatrix-vessel:has(#mpeComplianceSetting_backgroundElement):not(:has(#mpeComplianceSetting_backgroundElement[style*="display: none"])):not(:has(#mpeComplianceSetting_backgroundElement[style*="display:none"])) .ui-dialog:has(#divComplaince) {
    visibility: hidden !important;
}


/* --------------------------------------------------------------------------
   15. Compliance DISPLAY dialog — #divComplaince (jQuery UI .ui-dialog).

   The "Compliant: <status>" link in the vessel header (hrefCompliant →
   ShowCompliantHint) opens a jQuery UI dialog (#divComplaince). Its content
   (#spanComplianceList) is injected HTML: a "Compliance / Edit Settings"
   header <table> followed by a <br>-separated list of <a> rows (status icon +
   oil-company name).

   This is a FIFTH popup mechanism — a jQuery UI dialog — distinct from the
   four in DESIGN.md §16 (uc:Modal, subModal, ModuleTemplate-in-MPE, AlertBox).
   The jQuery UI THEME chrome (.ui-widget-content bg/border, .ui-widget-header
   ribbon) does NOT reach it under the refresh layout, so the dialog renders
   FULLY TRANSPARENT — no background, border, radius, shadow, or padding — and
   the company list bleeds over the page behind it (the reported bug).

   The dialog is a direct child of <body> (z 1001). Scope by the unique content
   id via `:has(#divComplaince)` so no other jQuery UI dialog is touched. §14.9
   already hides THIS dialog while the Edit Settings popup is open; these chrome
   rules and that hide-gate coexist (different triggers). Chrome values match
   the §9.10 / §14 popup recipe (white surface, slate-200 border, 12px radius,
   soft shadow, Inter, Lucide-x close) — literal hex (a body-level dialog sits
   outside the page card; keep it self-contained like register.css).
   -------------------------------------------------------------------------- */

/* §15.1 — Outer card. jQuery sets width:250px inline and positions the dialog
   by its own width calc — keep the width, restyle the chrome. overflow:hidden
   clips the scrolling body to the 12px radius. */
body.page-officermatrix-vessel .ui-dialog:has(#divComplaince) {
    box-sizing: border-box;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    padding: 0 !important;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
}

/* This is a display-only popup — suppress jQuery's resize handles (the
   ui-resizable-se corner can paint a legacy gripper sprite). */
body.page-officermatrix-vessel .ui-dialog:has(#divComplaince) .ui-resizable-handle {
    display: none !important;
}

/* §15.2 — Title bar: jQuery's .ui-dialog-titlebar holds an empty .ui-dialog-
   title span + the close button. Strip the ui-widget-header ribbon; make it a
   slim flex bar that pins the close X to the right. (The visible "Compliance"
   heading lives in the content header row below.) */
body.page-officermatrix-vessel .ui-dialog:has(#divComplaince) .ui-dialog-titlebar {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 8px 8px 0 8px !important;
    min-height: 0 !important;
}
body.page-officermatrix-vessel .ui-dialog:has(#divComplaince) .ui-dialog-title {
    display: none !important;
}

/* §15.3 — Close X. jQuery renders <a.ui-dialog-titlebar-close> with a sprite
   <span.ui-icon-closethick> that shows the screen-reader "Close" text on Q88
   (no theme sprite loaded). Hide the text/sprite, paint a Lucide x mask. The
   close handler is jQuery's own (titlebar-close) — no markup change needed. */
body.page-officermatrix-vessel .ui-dialog:has(#divComplaince) .ui-dialog-titlebar-close {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px;
    background: transparent !important;
    color: #64748b;
    text-indent: 0 !important;
    overflow: hidden;
    cursor: pointer;
}
body.page-officermatrix-vessel .ui-dialog:has(#divComplaince) .ui-dialog-titlebar-close .ui-icon,
body.page-officermatrix-vessel .ui-dialog:has(#divComplaince) .ui-dialog-titlebar-close .ui-button-icon-space {
    width: 0 !important;
    height: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    background: none !important;
}
body.page-officermatrix-vessel .ui-dialog:has(#divComplaince) .ui-dialog-titlebar-close::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon-x) no-repeat center / 16px;
            mask: var(--icon-x) no-repeat center / 16px;
}
body.page-officermatrix-vessel .ui-dialog:has(#divComplaince) .ui-dialog-titlebar-close:hover {
    color: var(--text-primary);
    background: var(--surface-muted) !important;
}

/* §15.4 — Content body: white, padded, capped + scrollable (57 oil companies
   would otherwise make an ~850px card that runs off-screen). The titlebar
   already supplied the top gutter, so 4px top here. jQuery's inline
   min-height:136px is fine; cap the height to the viewport. */
body.page-officermatrix-vessel .ui-dialog:has(#divComplaince) .ui-dialog-content,
body.page-officermatrix-vessel #divComplaince {
    box-sizing: border-box;
    background: #ffffff !important;
    color: var(--text-primary);
    padding: 4px 16px 16px 16px !important;
    font-size: 13px;
    line-height: 20px;
    /* jQuery positions the dialog ~70px above the trigger, which sits in the
       vessel header (~135px down the viewport). Subtract that offset + the
       titlebar + a bottom margin so the capped card stays fully on-screen for
       the common (page-at-top) case instead of running ~70px below the fold. */
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}
body.page-officermatrix-vessel #divComplaince > #spanComplianceList {
    display: block;
}

/* §15.5 — Content header row. Injected markup:
   <table width="100%"><td class="left"><b><u>Compliance</u></b></td>
   <td align="right"><a …>Edit Settings</a></td></table>.
   Drop the <u> underline, set heading size/weight, recolor the link teal,
   add a slate-200 divider beneath. */
body.page-officermatrix-vessel #divComplaince #spanComplianceList > table {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--border-default) !important;
    border-collapse: collapse;
}
body.page-officermatrix-vessel #divComplaince #spanComplianceList > table td.left,
body.page-officermatrix-vessel #divComplaince #spanComplianceList > table td.left b {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}
body.page-officermatrix-vessel #divComplaince #spanComplianceList > table td.left u {
    text-decoration: none !important;
}
body.page-officermatrix-vessel #divComplaince #spanComplianceList > table td a {
    color: var(--primary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
body.page-officermatrix-vessel #divComplaince #spanComplianceList > table td a:hover {
    color: var(--button-primary-hover) !important;
    text-decoration: underline !important;
}

/* §15.6 — Company list rows: each is a top-level <a> (status icon + name)
   separated by <br>. Make them block rows (full-width target), neutralise the
   legacy navy (#4F72A4) → slate-700, teal on hover; hide the <br> spacers so
   the row padding alone controls rhythm. */
body.page-officermatrix-vessel #divComplaince #spanComplianceList > a {
    display: block;
    padding: 5px 0;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-size: 13px;
    line-height: 18px;
}
body.page-officermatrix-vessel #divComplaince #spanComplianceList > a:hover {
    color: var(--primary) !important;
    text-decoration: none !important;
}
body.page-officermatrix-vessel #divComplaince #spanComplianceList > br {
    display: none !important;
}

/* Status indicator → 12×12 circle (Figma 331:4727 rounded-full), aligned with the name. */
body.page-officermatrix-vessel #divComplaince #spanComplianceList > a .statusIcon {
    width: 12px !important;
    height: 12px !important;
    border-radius: 9999px !important;
    vertical-align: middle;
    margin-right: 7px;
}