/* ==========================================================================
   Officer Matrix page (OfficerMatrixList.aspx) — page-specific overrides
   layered on top of grid.css.
   ----------------------------------------------------------------------------
   Scoped via `body.page-officermatrix`. Shared chrome (card, filters, search,
   grid, pager) comes from grid.css via the additional `body.page-grid` class.

   Grid columns are DB-driven (tblGridColumn via shared ~/DesktopModules/GridView.ascx
   wrapper), so per-column nth-child width locks are intentionally omitted —
   users can reorder/hide columns and the locks would break.

   No primary "Add" CTA exists on this page — the TitleRight hosts an
   Img-Std-Options PopupMenu ("Actions") only, with Manage Officers / Export /
   Refresh / Reset / etc. So no `::before` label rule is registered here.

   Inline-style note: OfficerMatrixList.ascx has a sizeable inline <style>
   block covering `.ocimf-submit-container` (bottom-of-page OCIMF submit pill)
   and a compliance-overlay `#divComplaince` (sic) max-height rule. The skin
   stays neutral for the OCIMF submit container, but the compliance overlay
   `#divComplaince` (a jQuery UI dialog) IS re-skinned below — see §2; it ships
   transparent/unstyled here otherwise (same bug fixed for OfficerMatrixVessel
   in officer-matrix-vessel.css §15, which this is ported from).
   ========================================================================== */

/* --------------------------------------------------------------------------
   SubHeader divider — drop the heavy navy rule above the grid.
   MainWhiteout.css paints `.modV2 .modV2SubHeader { border-bottom: 1px solid
   var(--brand-accent) }` (#2D3663). Here the SubHeader holds only the temporary
   OCIMF notice and sits directly above the grid, so that dark navy line reads
   as an excessive border across the top of the grid. The grid's own header row
   supplies its top edge, so remove the divider. (This page lacks the
   `.q88-refresh` co-class that would otherwise soften it to --border-subtle.)
   -------------------------------------------------------------------------- */
body.page-officermatrix .modV2 .modV2SubHeader {
    border-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   1. Compliance column status links (grid cells).
   Each row's Compliance cell holds <a id="hrefCompliant…"> (opens the
   #divComplaince popup) wrapping a status-square <img> + a
   <span class="ComplianceStatusOverallText"> with the status text
   ("Partial" / "Not Compliant" / …). The text inherits the legacy global link
   navy (#4F72A4) from the anchor — no per-class colour rule sets it. These are
   links, so recolour them to brand teal (status itself is conveyed by the
   coloured square, not the text). Darker teal on hover; the page's inline
   `.ComplianceStatusOverallText:hover { text-decoration:underline }` supplies
   the underline. Scope to the hrefCompliant anchors so only these cells change.
   -------------------------------------------------------------------------- */
body.page-officermatrix a[id^='hrefCompliant'],
body.page-officermatrix a[id^='hrefCompliant'] .ComplianceStatusOverallText {
    color: var(--text-link) !important;
}
body.page-officermatrix a[id^='hrefCompliant']:hover,
body.page-officermatrix a[id^='hrefCompliant']:hover .ComplianceStatusOverallText {
    color: var(--link-hover) !important;
}

/* Compliance grid-cell overall-status indicator → 12px circle (Figma 331:4727
   rounded-full). The <img.statusIcon> inside the hrefCompliant anchor otherwise
   falls back to the base 8px square (Q88Whiteout.css). */
body.page-officermatrix a[id^='hrefCompliant'] img.statusIcon {
    width: 12px !important;
    height: 12px !important;
    border-radius: 9999px !important;
    vertical-align: middle;
}


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

   Clicking a "Compliance" status cell in the grid (ShowCompliantHint) opens a
   jQuery UI dialog (#divComplaince) whose content (#spanComplianceList) is
   injected HTML: a "Compliance / Edit Settings" header row (a <div> on this
   page — see §2.5) followed by a <br>-separated list of <a> rows (status icon +
   oil-company name).

   This is a jQuery UI dialog — its 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 grid behind it. The dialog is
   a direct child of <body>. Scope by the unique content id via
   `:has(#divComplaince)` so no other jQuery UI dialog is touched.

   Ported verbatim from officer-matrix-vessel.css §15 — same markup, same
   dialog init (width:250, closeText:"Close"). Only difference: the trigger
   here is a grid row at a variable scroll position (not a fixed header), so the
   body keeps the page's existing fixed `max-height:400px` cap instead of the
   header-offset `calc(100vh - 200px)` used on the vessel page. Chrome values
   match the §9.10 popup recipe (white surface, slate-200 border, 12px radius,
   soft shadow, Inter, Lucide-x close) — literal hex, kept self-contained since
   a body-level dialog sits outside the page card.

   "Edit Settings" here calls showComplianceIframe/ShowComplianceWindow, both of
   which `.dialog("close")` this dialog FIRST, so there is no parent/child
   bleed-through to suppress (unlike officer-matrix-vessel.css §14.9).
   -------------------------------------------------------------------------- */

/* §2.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 .ui-dialog:has(#divComplaince) {
    box-sizing: border-box;
    background-color: #ffffff !important;
    border: 1px solid var(--border-default) !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: var(--text-primary);
}

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

/* §2.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 .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 .ui-dialog:has(#divComplaince) .ui-dialog-title {
    display: none !important;
}

/* §2.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 .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 .ui-dialog:has(#divComplaince) .ui-dialog-titlebar-close .ui-icon,
body.page-officermatrix .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 .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 .ui-dialog:has(#divComplaince) .ui-dialog-titlebar-close:hover {
    color: #0f172a;
    background: #f1f5f9 !important;
}

/* §2.4 — Content body: white, padded, capped + scrollable. #divComplaince IS
   the .ui-dialog-content node (jQuery adds the class to the dialog target).
   The inline <style> already caps it at 400px; keep that cap (more specific id
   selector here) and add the chrome. The titlebar supplies the top gutter, so
   4px top. Overrides the unscoped inline `.ui-widget-content { bg:#F8F8F8 }`. */
body.page-officermatrix .ui-dialog:has(#divComplaince) .ui-dialog-content,
body.page-officermatrix #divComplaince {
    box-sizing: border-box;
    background: #ffffff !important;
    color: #0f172a;
    padding: 4px 16px 16px 16px !important;
    font-size: 13px;
    line-height: 20px;
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}
body.page-officermatrix #divComplaince > #spanComplianceList {
    display: block;
}

/* §2.5 — Content header row. NOTE: this page injects a DIFFERENT header
   markup than OfficerMatrixVessel.aspx (which uses a <table>). Here it is a
   <div> wrapping two 50%-floated halves:
     <div>
       <div style="float:left;width:50%"><b><u>Compliance</u></b></div>
       <div style="float:right;width:50%" align="right"><a …>Edit Settings</a></div>
     </div>
   Flex the wrapper (floats don't apply to flex items, so the inline floats are
   neutralised automatically; only the inline width:50% needs overriding so the
   two halves hug their content with space-between). Drop the <u> underline, set
   the heading size/weight, recolor the "Edit Settings" link teal, add a
   slate-200 divider beneath. The header is the only <div> in #spanComplianceList
   (company rows are bare <a> siblings), so :first-child is unambiguous. */
body.page-officermatrix #divComplaince #spanComplianceList > div:first-child {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--border-default) !important;
}
body.page-officermatrix #divComplaince #spanComplianceList > div:first-child > div {
    float: none !important;
    width: auto !important;
}
body.page-officermatrix #divComplaince #spanComplianceList > div:first-child b {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}
body.page-officermatrix #divComplaince #spanComplianceList > div:first-child u {
    text-decoration: none !important;
}
body.page-officermatrix #divComplaince #spanComplianceList > div:first-child a {
    color: var(--primary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap;
}
body.page-officermatrix #divComplaince #spanComplianceList > div:first-child a:hover {
    color: var(--button-primary-hover) !important;
    text-decoration: underline !important;
}

/* §2.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 #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 #divComplaince #spanComplianceList > a:hover {
    color: var(--primary) !important;
    text-decoration: none !important;
}
body.page-officermatrix #divComplaince #spanComplianceList > br {
    display: none !important;
}

/* Status indicator → 12×12 circle (Figma 331:4727 rounded-full), aligned with the
   company name. This page also uses the animated `.statusIconBlack` (pending)
   variant — round both. */
body.page-officermatrix #divComplaince #spanComplianceList > a .statusIcon,
body.page-officermatrix #divComplaince #spanComplianceList > a .statusIconBlack {
    width: 12px !important;
    height: 12px !important;
    border-radius: 9999px !important;
    vertical-align: middle;
    margin-right: 7px;
}