/* ==========================================================================
   Officer Matrix — Manage Officers page (OfficerMatrixManageOfficers.aspx) —
   page-specific overrides layered on top of grid.css.
   ----------------------------------------------------------------------------
   Scoped via `body.page-officermatrix-officers`. Shared chrome (card, filters,
   search, grid, pager, primary CTA pill) 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.

   Inline-style note: OfficerMatrixOfficersList.ascx has an inline <style>
   block that positions the merge-duplicates banner (`#divMergeInstructions`)
   with a fixed 1083px width and red border. The skin stays neutral for the
   merge overlay — revisit if the banner is refactored.
   ========================================================================== */

/* CTA label — the shared grid.css rule styles the teal pill AND hides the
   inner <img>; this `::before` renders the label text in the same position
   as Inspections' `lbNewInspection::before`. The CTA LinkButton is
   `lbNewOfficer` (rendered id ends with `_lbNewOfficer`). */
body.page-officermatrix-officers a[id$='_lbNewOfficer']::before {
    content: 'New Officer';
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


/* --------------------------------------------------------------------------
   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 — `OfficerMatrixOfficersList.ascx` L277 inlines
   `width:900px; height:470px` on the iframe. The modNewEdit Profile form
   (the dominant template) renders ~820px tall after the §"officer-matrix-
   person.css" re-skin (section heading padding + Comments textarea min-
   height grew from prior 760), so 470px clips the bottom rows. Override
   the inline height to 860px so Save / Cancel / Sign-Off footer sits in
   the visible iframe by default. Sticky footer in officer-matrix-person.css
   §1 also keeps buttons reachable if the form grows further. The shorter
   modNewPersonType ("New Officer:" type-selector) just shows extra white
   space below — fine.
   -------------------------------------------------------------------------- */
body.page-officermatrix-officers [id$="_pnlPerson"] {
    /* See officer-matrix-vessel.css §13 — center the popup inside the main
       CONTENT AREA, not the full viewport. Offsets compensate for the
       ~256px left sidebar (+128px) and ~79px top header (+40px) so the
       popup's centroid lands on the content-area centroid. 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-officers iframe#ifPerson {
    /* QEN-8801 — widen the inline 900px so Profile-form field labels stay on
       one line; see officer-matrix-vessel.css §13 for the full rationale.
       QEN-8831 — bumped 1000→1100: the label nowrap rule (officer-matrix-
       person.css §5) pushes the populated form's min-content to ~1050px, which
       the old 1000px scrolling="no" iframe clipped on the right ("content
       doesn't fit the screen"). 1100 shows it in full; max-width keeps the modal
       inside the content area, and officer-matrix-person.css §1 overflow-x:auto
       lets narrow laptops scroll rather than lose content. Keep in sync with the
       twin #ifPerson rule in officer-matrix-vessel.css §13. */
    width: 1100px !important;
    max-width: calc(100vw - 290px) !important;
    height: 860px !important;
    max-height: calc(100vh - 48px) !important;
}

/* See officer-matrix-vessel.css §13 — lock page body scroll while modal is
   open so wheel-over-popup doesn't bubble through to the page behind. */
body.page-officermatrix-officers:has(#mpePerson_backgroundElement):not(:has(#mpePerson_backgroundElement[style*="display: none"])):not(:has(#mpePerson_backgroundElement[style*="display:none"])) {
    overflow: hidden !important;
}