/* ==========================================================================
   Certificates & Documents page (Certificates.aspx) — page-specific overrides
   layered on top of grid.css.
   ----------------------------------------------------------------------------
   Scoped via `body.page-certificates`. 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: CertificateDocumentList.ascx has an inline <style> block
   that sets `.modV2 .modV2TitleContainer { min-width: 1100px; }` to prevent
   search overlap with dropdowns. Do not try to override here; it wins on
   specificity + source-order. Revisit when that inline block is removed.
   ========================================================================== */

body.page-certificates .modV2:has(.popupMenuV2StandardWidth[style*="visibility: visible"]) {
    overflow-x: auto !important;
}

/* 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 `lbNew`
   (rendered id ends with `_lbNew`). */
body.page-certificates a[id$='_lbNew']::before {
    content: 'New Certificate';
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Attachment indicator — swap the legacy red/green sprite (Img-Std-FilePublish /
   Img-Std-FilePrivate from MainWhiteout.css StdIcons.png) for the Figma
   paperclip (Inspections file h1mdRCUTl..., node 527:1676). Uses mask-image
   so the stroke color follows token vars (light + dark mode). */
body.page-certificates .Img-Std-FilePublish,
body.page-certificates .Img-Std-FilePrivate {
    background-image: none;
    background-position: 0 0;
    -webkit-mask-image: url('/styles/icons/paperclip.svg');
            mask-image: url('/styles/icons/paperclip.svg');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

body.page-certificates .Img-Std-FilePublish {
    background-color: var(--red-600, #dc2626);
}

body.page-certificates .Img-Std-FilePrivate {
    background-color: var(--raw-green-600, #16a34a);
}

/* Edit-column Add icon — swap the legacy teal sprite (Img-Std-Add) for the
   Figma CirclePlus (Inspections file, node 527:1678). Scoped to the data-row
   Edit HyperLink (`a.jqEdit`) so the title-bar "New Certificate" CTA pill
   (also `Img-Std-Add` on lbNew) is untouched.

   Two grid.css rules need to be reversed for `a.jqEdit`:
   1. §5 primary-CTA pill: `a:has(> img.Img-Std-Add)` turns the row anchor
      into a 36px teal pill (the "teal rectangle" the user wanted gone) and
      hides the inner <img> via `display: none !important`. We restore the
      anchor to a transparent row-level link and re-show the img.
   2. §7 pencil mask: the Add state inherits the Edit pencil mask. Override
      with the CirclePlus SVG via the same `mask:` shorthand pattern.

   Specificity: grid.css selectors hit 0,4,3 with !important. Stack
   `.page-certificates.page-grid` (both classes are on body) to reach 0,5,3
   and beat them. */
body.page-certificates.page-grid .dxgvDataRow td a.jqEdit,
body.page-certificates.page-grid .dxgvDataRow td a.jqEdit:has(> img.Img-Std-Add) {
    display: block !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center;
    line-height: 0;
    color: var(--text-primary, #000) !important;
}

body.page-certificates.page-grid .dxgvDataRow td a.jqEdit > img.Img-Std-Add {
    display: inline-block !important;
    background-color: var(--text-primary, #000) !important;
    -webkit-mask: url('/styles/icons/circle-plus.svg') no-repeat center / contain !important;
            mask: url('/styles/icons/circle-plus.svg') no-repeat center / contain !important;
}

body.page-certificates .FilterAppliedItem {
    background-color: #999999 !important;
}

/* Date-filter chips (CertificatesDateFilters.ascx) — "Past Due", "0 - 30 days"
   etc. The control ships an inline <style> block that only sets padding,
   cursor, and hover bg, so the label/value inherit whatever font the legacy
   title bar provides (Tahoma stack via MainWhiteout). Apply the refresh Inter
   stack and split label/value typography so the chips read as proper KPI
   tiles.

   The Past Due value div has an inline `style="color: red;"` (specificity 1,0,0,0).
   We respect the red semantic but route it through the dark-mode-aware
   `--text-error` token via !important so the chip works in both themes. */
body.page-certificates .custom-date-filter-wrapper {
    font-family: var(--q88-grid-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--text-default, #0F172A);
    border-radius: 6px;
    padding: 2px 10px;
    transition: background-color 120ms ease;
}

body.page-certificates .custom-date-filter-wrapper:hover {
    background: var(--surface-hover, #F1F5F9);
}

body.page-certificates .custom-date-filter-wrapper .custom-date-filter-header {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted, #64748B);
    white-space: nowrap;
}

body.page-certificates .custom-date-filter-wrapper .custom-date-filter-value {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-default, #0F172A);
    margin-top: 0;
}

body.page-certificates [id$='_pastDueCertificatesNumberDiv'].custom-date-filter-value {
    color: var(--text-error, #DC2626) !important;
}

/* Center the "Certificates & Documents:" label vertically against the
   FleetVessel/View dropdowns and date-filter chips. grid.css §2 sets
   `align-self: center` on pnlTitleLeft's DIRECT DOM children, but the label
   <td> is wrapped in the inner Title <table> (collapsed via display:contents),
   so the rule never reaches it. Result: the td anchors to the TOP of a row
   taller than 40px (the chip td here is 48px), leaving the label 4px high.
   Force align-self center so the label tracks the row midline regardless of
   how tall the chips/filters grow. Probe-confirmed: chip midY=150, label
   midY was 146 before, 150 after. */
body.page-certificates.page-grid [id$='_pnlTitleLeft'] td.modV2Title {
    align-self: center !important;
}

/* ==========================================================================
   New Certificate/Document modal — Figma node 349:8241
   (Inspections & Observations file h1mdRCUTl...)
   --------------------------------------------------------------------------
   Re-skin the legacy uc:Modal chrome (red bar header + corner-image table)
   into a flat white card: 1px border, 8px radius, drop shadow, 16px padding,
   Inter typography. Mirrors historyPopup.css §1 pattern.

   Scope: `[id$="_modalNewCertificateDocument_pnlModalPopup"]` — the rendered
   id of the modal's outer panel (Modal.ascx → pnlModalPopup). Suffix-match
   avoids the ASP.NET naming-container substring overshoot trap.
   ========================================================================== */

:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] {
    width: 578px !important;                       /* override ascx 500px to fit 80 label + 2x ~190 fields + 40px l/r padding + 12 gap */
    max-width: calc(100vw - 32px);
    background: var(--surface-raised);
    border: 1px solid var(--raw-slate-200, var(--border-default));
    border-radius: 8px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -1px rgba(0, 0, 0, 0.10);
    /* Left/right padding widened from the original 16px on purpose: several
       validator icons (cvCertificate next to Name, rfvdlVessel on the Vessel
       row) render in normal flow and spill past their field's right edge
       instead of claiming layout space. The old symmetric 16px was too
       narrow for the Vessel row's badge (~22px), which overflowed past the
       card's own border. Widened both sides to 40px (rather than just the
       right) so the card reads as evenly framed — content width
       (578 - 40 - 40 = 498) is unchanged from the old 530 - 16 - 16, so
       every row's label/field math below is unaffected. */
    padding: 16px 40px;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
}

/* Hide the legacy 3-column corner-icon decorations */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContentTop,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .leftCornerIcon,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .rightCornerIcon {
    display: none !important;
}

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

/* Header bar: title (bold 16) + 16px X — flatten the inner table to a flex row.
   The legacy red ribbon background is stripped. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .hdrTblBar {
    background: transparent !important;
    padding: 0 0 16px 0 !important;
    height: auto !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .hdrTblBar > table {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    border-collapse: collapse;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .hdrTblBar > table > tbody,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .hdrTblBar > table > tbody > tr {
    display: contents;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .hdrTblBar > table td {
    display: block;
    padding: 0 !important;
    width: auto !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .hdrTblBar > table td:first-child {
    flex: 1 1 auto;
}

/* Title: "Certificate/Document" + ": New" subtitle — single bold line. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopTitlePnl {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopTitlePnl span,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopTitlePnl .popupTitleSub {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Close X — hide the legacy red.gif and draw a Lucide X via mask */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_lnkClose"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    background: transparent;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_lnkClose"] img {
    display: none !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_lnkClose"]::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_lnkClose"]:hover {
    color: var(--text-muted);
}

/* Content body */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .mainBG {
    background: transparent;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent {
    padding: 0;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 20px;
}

/* The three legacy form tables (one per UpdatePanel + one for buttons)
   each ship inline `margin-left:15px`. Reset that and use plain block flow.
   Stack the tables with a 12px gap between rows. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent > div,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent > table {
    margin: 0 0 12px 0 !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent > div:last-child,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent > table:last-child {
    margin-bottom: 0 !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent table {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}

/* Hide the empty checkbox row (first <tr> with the hidden chkCompanyDocument) */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_upAddNew"] table > tbody > tr:first-child {
    display: none;
}

/* Each form row containing a `.label` cell flips to a flex row so colspan
   on `<td colspan="2">Name:</td>` and inline `width:55px` cell hints stop
   overriding our 80px label budget. Excludes the button table at the bottom
   of upAddNewFooter (its rows have no `.label` cell). */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent tbody:has(td.label),
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent table:has(td.label),
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent table:has(td.label) > tbody {
    display: block;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent tr:has(td.label) {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px 0;
    width: 100%;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent tr:has(td.label):last-child {
    margin-bottom: 0;
}

/* Label cell: fixed 80px slot. Width hints (inline 55px, colspan=2) are
   irrelevant under flex. Inner flex aligns the label text vertically with
   the 32px field next to it; `font-size: 0` collapses the legacy "Vessel:" /
   "Name:" / "Type:" / "Code:" text so the per-row ::before pseudo can draw
   colon-less Inter labels matching the Figma. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent tr td.label {
    flex: 0 0 80px;
    width: 80px !important;
    max-width: 80px;
    min-width: 80px;
    height: 32px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    font-family: inherit;
    font-size: 0;
    color: var(--text-primary);
    white-space: nowrap;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent tr td.label::before {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: inherit;
}

/* Per-row label text (no colons). Selectors target each row uniquely:
   - Vessel row lives inside the `_upAddNew` UpdatePanel.
   - Name row is a standalone <table> directly under `.modPopContent`.
   - Type + Code rows have IDs from the ascx markup. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_upAddNew"] td.label::before {
    content: "Vessel";
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent > table td.label::before {
    content: "Name";
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #trDocumentType td.label::before {
    content: "Type";
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #trCode td.label::before {
    content: "Code";
}

/* Field cell — only inside label-bearing form rows (NOT the button row).
   Flex container so its inner control sits centered without the inline-block
   line-box descender padding that was inflating row heights (Type cell was
   52px tall around a 32px select because the inline-block select + surrounding
   whitespace text nodes built a tall line box). */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent tr:has(td.label) > td:not(.label) {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    line-height: 0;
}

/* Stretch the inner control to fill the field cell exactly. `flex: 0 0 auto`
   takes the select out of flex-grow/shrink so its explicit `width: 100%`
   (set in the main select/input rule above) is honored directly. Using
   flex-basis 0 or 100% caused the Type dropdown to render 4px short. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent tr:has(td.label) > td:not(.label) > select,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent tr:has(td.label) > td:not(.label) > input[type="text"] {
    flex: 0 0 auto;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Validator spans (ASP.NET RequiredFieldValidator / CustomValidator) render
   `visibility: hidden` initially but still occupy layout — they were pushing
   the Name row to 58px tall (32 input + 26 validator). Take them out of flow
   so they only re-appear absolute-positioned when validation fails.
   Target these three by ID suffix only — NOT the generic `.ValHighlight`
   class. The Vessel row's `rfvdlVessel` (from the nested FleetVessel.ascx
   user control) also carries `.ValHighlight`, but its `<td>` is
   `display: flex`; making it `position: absolute` too strips it from flex
   layout and Chrome falls back to painting it at the flex container's
   origin corner, on top of the "All Fleets" dropdown. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent [id$="_rfvDocumentName"],
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent [id$="_cvDocumentType"],
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent [id$="_cvAddNew"] {
    position: absolute !important;
    pointer-events: none;
}

/* AutoComplete popup (Name combobox suggestions) — the popup renders inside
   the Name field td which has `line-height: 0` (set above to suppress the
   inline-block line-box that inflated row heights). The popup is absolutely
   positioned so it escapes the flex flow, but it still INHERITS `line-height: 0`
   from the td, collapsing every .ACItem suggestion to 4px tall (the items
   overlap into illegible mush). Restore a sane line-height and add a card
   shell that fits the Figma's flat-popup language.

   The SAME modalNewCertificateDocument opens from BOTH the Certificates list
   (body.page-certificates) and the Certificate Document detail form
   (body.page-certificate-detail) — scope every rule to :is(both) so the Name
   dropdown renders identically in both places (it was previously skinned only
   on the list page, so on the detail page the records displayed inconsistently). */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .AutoCompleteExtender_CompletionList,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .AutoCompleteExtender_CompletionList * {
    line-height: 20px;
}
/* Name field TD becomes the positioning context for the autocomplete popup
   so we can re-anchor it directly below the input. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent tr:has(td.label) > td:not(.label):has(> input[id$="_cbDocumentName_txtComboBox"]) {
    position: relative;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .AutoCompleteExtender_CompletionList {
    /* JS leaves `top:17.7px` (stale "static" position inside the flex td)
       which renders the popup over the modal header. Override to flush
       against the bottom edge of the input with a 4px gap, and let the
       popup span the full input width. */
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface-raised);
    border: 1px solid var(--raw-slate-200, var(--border-default));
    border-radius: 8px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -1px rgba(0, 0, 0, 0.10);
    padding: 4px;
    font-family: inherit;
    font-size: 14px;
    z-index: 100002;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .AutoCompleteExtender_CompletionList .ACItem,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .AutoCompleteExtender_CompletionList .AutoCompleteExtender_CompletionListItem {
    display: block;
    padding: 6px 12px;
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .AutoCompleteExtender_CompletionList .AutoCompleteExtender_HighlightedItem {
    background: var(--raw-slate-100, var(--surface-muted));
}

/* Code row: take the help-icon cell OUT of flex flow via absolute positioning
   and overlay it inside the 80px label slot. This keeps row layout identical
   to Vessel/Name/Type — label 80px + gap 12px + field — so the Code input
   left edge lines up exactly with the selects in the rows above. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #trCode {
    position: relative;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #tdCodeHelp {
    position: absolute;
    /* "Code" label text ≈ 36px wide (Inter 14px/500), measured 35.6px. Offset the
       icon to 43px so it clears the label with a ~7px gap (matches Figma's
       "Code ⓘ") — earlier 36px landed the icon right on the "e". Stays within the
       80px label slot, leaving the field aligned at 92px like the rows above. */
    left: 43px;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    display: inline-flex;
    align-items: center;
}

/* Vessel row: the FleetVessel ascx renders Fleet + Vessel selects (plus a
   validator span + hidden field) as direct children of the field <td>, with
   whitespace text nodes between them. Flip that td to flex so the two selects
   get equal width with a 12px gap. `font-size: 0` collapses the anonymous-
   flex-item whitespace text nodes that would otherwise steal ~16px from the
   distribution; the selects restore their own font-size in the main rule.
   The two selects consume the full 404px field column (50% + 50% + 12px
   gap), so the validator span below (`rfvdlVessel`) has zero room and
   overflows in normal flow, spilling rightward into the card's widened
   right-padding gutter (see the `pnlModalPopup` padding comment above)
   when it renders — the same pattern the Name row's `cvCertificate` icon
   already relies on. `flex-wrap` deliberately stays at its `nowrap`
   default: wrapping is evaluated against this `<td>`'s own (unchanged)
   width, not the gutter beyond it, so a wrapped line would never actually
   reach the extra space — it would just stack the badge under "All
   Fleets" regardless of how wide the gutter is. Letting it overflow
   instead is what lets the wider gutter actually catch it. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] td:has(> select[id$="_fvAddNew_dlFleet"]) {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0;
    /* Positioning context for the rfvdlVessel validator icon pinned to the
       field's right edge (see the rfvdlVessel rule further below). */
    position: relative;
}
/* Higher-specificity selector (chains `.modPopContent` + `:not(.label)` so the
   broad-field rule above can't override our calc widths). */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent tr:has(td.label) > td:not(.label):has(> select[id$="_fvAddNew_dlFleet"]) > select {
    /* `flex: 1 1 0` was distributing only ~190px each despite the 404px field
       column (browsers honor a min-content reservation for <select> driven by
       the widest option). Hard-pin each to half the column minus half the gap
       so they fill the full 404px → matches the right edge of Name/Type/Code. */
    flex: 0 0 calc(50% - 6px) !important;
    min-width: 0 !important;
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}
/* Validator span + hidden field — keep them in flow but don't claim a column */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] td:has(> select[id$="_fvAddNew_dlFleet"]) > span,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] td:has(> select[id$="_fvAddNew_dlFleet"]) > input[type="hidden"] {
    flex: 0 0 auto;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] td:has(> select[id$="_fvAddNew_dlFleet"]) > br {
    display: none;
}

/* Vessel-row required-field validator (rfvdlVessel, from FleetVessel.ascx).
   It carries `.ValHighlight`, whose MainWhiteout base rule paints the legacy
   alertVal.png as a CSS *background-image* + a yellow box + a red "*" — and
   the global icon-swap (icon-swaps.css) only rewrites `<img src=alertVal>`,
   NOT CSS backgrounds, so this span was missed by that sweep. Left in flex
   flow it rendered as a crushed 22x6 yellow chip floating high in the right
   gutter (`font-size:0` on the td collapsed the "*"), out of line with the
   Name-row validator's clean red triangle.
   Restyle it to the same 16px red Lucide TriangleAlert and pin it absolutely
   to the field's right edge + 8px (left: calc(100% + 8px) of the now-
   `position:relative` Vessel td), vertically centered — so it forms an aligned
   column with the Name-row icon (both land 8px past their field's right edge,
   the Name one via a matching margin-left below). Explicit offsets also make its
   placement deterministic, foreclosing the old "paints at the flex origin,
   on top of All Fleets" fallback. `display` is left untouched so ASP.NET's
   Display="Dynamic" (inline display:none until invalid) still gates it. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_fvAddNew_rfvdlVessel"].ValHighlight {
    position: absolute;
    left: calc(100% + 8px);   /* 8px gap between the field's right edge and the icon */
    top: 50%;
    transform: translateY(-50%);
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: 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='%23dc2626' 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 / 16px 16px !important;
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
}

/* Name-row validator (cvCertificate, from CertificateSelector.ascx) — an
   <img src=alertVal.png> the global icon-swap already turns into the red
   triangle. It overflows to the field's right edge as an end-of-row flex
   item, flush against the input; add the same 8px gap as the Vessel icon
   above so both triangles sit an even step off their fields. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_ucCertificateSelector_cvCertificate"] {
    margin-left: 8px !important;
}

/* Inputs, selects, and the ComboBox text input — 32px chips with 8px radius,
   1px border, white BG, 14px Inter text. `width: 100% !important` overrides
   the inline `Width="185px"` ASP.NET property on ddlDocumentType so the Type
   field matches Name / Code in the same column. The Fleet/Vessel selects in
   the flex container have a more-specific `width: 0 !important` rule below
   that wins, letting flex-grow distribute equally. Other !importants beat
   components.css `body.sidebar-nav select { border ... !important }` and the
   MainWhiteout `.NormalTextBox` baseline. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] select,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] input[type="text"],
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] input.NormalTextBox {
    width: 100% !important;
    height: 32px !important;
    padding: 4px 12px !important;
    border: 1px solid var(--raw-slate-200, var(--border-default)) !important;
    border-radius: 8px !important;
    background-color: var(--surface-raised) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] select:focus,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] input[type="text"]:focus,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] input.NormalTextBox:focus {
    border-color: var(--primary, #0891b2) !important;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15) !important;
}

/* The Name field uses an ASP.NET ComboBox (uc:ComboBox) that renders as
   `input.cbArrow` + a sibling arrow image. The td also drops a hidden select.
   Give the input the full row width minus 32px label column. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] input.cbArrow {
    width: 100% !important;
    max-width: 100% !important;
}
/* Help icon next to "Code:" — render the tiny help.gif as a muted CircleHelp */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #lnkCodeHelp {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    vertical-align: middle;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #lnkCodeHelp img {
    width: 16px;
    height: 16px;
    background-color: var(--text-muted);
    background-image: none !important;
    -webkit-mask: var(--icon-circle-help) no-repeat center / 16px !important;
            mask: var(--icon-circle-help) no-repeat center / 16px !important;
    border: 0 !important;
}

/* Help tooltip popover (built by ShowHelpToolTip JS as a legacy blue-sprite
   table, appended inside #tdCodeHelp's #HelpToolTip span). Re-skin it into a
   flat refresh popover card — white surface, 8px radius, slate border, soft
   shadow — to match the modal + autocomplete dropdown. The old sprite chrome
   broke two ways under the refresh: #tdCodeHelp's inherited `line-height: 0`
   collapsed the caption to a 1px sliver, and the navy header's white text would
   be invisible on the new white body. Both are handled below. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup {
    width: 250px !important;
    background: var(--surface-raised) !important;
    border: 1px solid var(--raw-slate-200, var(--border-default)) !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.10) !important;
    overflow: hidden !important;
    font-family: inherit !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup table {
    width: 100% !important;
}
/* Drop the legacy decorations: corner/edge sprite cells, pointer, footer row */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .pointerTl {
    display: none !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup > table > tbody > tr:last-child {
    display: none !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .tL,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .tR,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .contentL,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .contentR {
    background: none !important;
    width: 0 !important;
    font-size: 0 !important;
}
/* Title row */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .tM {
    background: none !important;
    margin: 0 !important;
    padding: 8px 4px 0 12px !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    height: auto !important;
    text-align: left !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .tM .sub {
    font-weight: 600 !important;
}
/* Close X — Lucide glyph via mask, matches the modal close */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .tClose {
    background: none !important;
    width: 16px !important;
    padding: 10px 12px 0 0 !important;
    vertical-align: top !important;
    color: var(--text-muted);
    cursor: pointer;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .tClose::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 14px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 14px;
}
/* Body caption */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .contentPreview {
    background: transparent !important;
    border: none !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #HelpToolTipPopup .StdPadding {
    padding: 2px 12px 10px 12px !important;
    color: var(--text-secondary, var(--text-muted)) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

/* Stretch the Code field to match the other rows (was Width=110px inline) */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_txtCode"] {
    width: 100% !important;
}

/* Type row has a 12px-wide empty gutter td between the label and the field
   (`<td width="12">&nbsp;</td>`) — drop it. Code row's gutter td (`#tdCodeHelp`)
   is kept and absolute-positioned (see below), so target only the Type row. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] #trDocumentType > td:nth-child(2) {
    display: none;
}

/* Footer row (button table) — flex right-aligned, 11px gap between buttons,
   16px top spacing. The upAddNewFooter UpdatePanel renders as `<div>` with
   two direct-child <table>s (the first holds tblMiscFields, the last holds
   the button row), so `> table:last-of-type` is the right hop. The button
   row has a 200px-wide spacer td that we hide; the buttons live in the row's
   last cell. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_upAddNewFooter"] > table:last-of-type {
    margin-top: 16px !important;
    border-spacing: 0;
    width: 100%;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_upAddNewFooter"] > table:last-of-type > tbody > tr {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 11px;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_upAddNewFooter"] > table:last-of-type > tbody > tr > td:not(:last-child) {
    display: none;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] [id$="_upAddNewFooter"] > table:last-of-type > tbody > tr > td:last-child {
    padding: 0 !important;
    display: flex;
    gap: 11px;
    align-items: center;
}

/* Cancel + Create buttons. !important on bg/border/color is required to beat
   components.css `.LinkButton { background: ... !important }` and the
   grid.css primary-CTA pill rule. */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent a.LinkButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    min-width: 0;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-sizing: border-box;
    cursor: pointer;
}
/* Hide any inner <ins> spacer and ImageManager icon — Figma is text-only */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent a.LinkButton > ins,
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent a.LinkButton img {
    display: none !important;
}

/* Cancel (LinkButton Secondary) — light gray surface */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent a.LinkButton.Secondary {
    background: var(--raw-slate-100, var(--surface-muted)) !important;
    background-color: var(--raw-slate-100, var(--surface-muted)) !important;
    color: var(--accent-foreground) !important;
    border: 1px solid transparent !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent a.LinkButton.Secondary:hover {
    background: var(--raw-slate-200, var(--border-default)) !important;
    background-color: var(--raw-slate-200, var(--border-default)) !important;
}

/* Create (LinkButton primary) — Figma teal var(--brand-primary) (raw-teal-600), white text
   (var(--text-on-brand) per Figma but #fff renders identical on screen). */
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent a.LinkButton:not(.Secondary) {
    background: var(--brand-primary) !important;
    background-color: var(--brand-primary) !important;
    color: var(--surface-raised) !important;
    border: 1px solid transparent !important;
}
:is(body.page-certificates, body.page-certificate-detail) [id$="_modalNewCertificateDocument_pnlModalPopup"] .modPopContent a.LinkButton:not(.Secondary):hover {
    background: #0b7f74 !important;
    background-color: #0b7f74 !important;
}

/* ==========================================================================
   Certificate Document Detail page (CertificateDocumentDetail.aspx)
   Figma node 349:5849 (Inspections & Observations file h1mdRCUTl...)
   --------------------------------------------------------------------------
   Scope: `body.page-certificate-detail` (set in Default.Master.cs when the
   request URL is CertificateDocumentDetail.aspx). No `page-grid` co-class —
   this is a form, not an ASPxGridView, so grid.css must NOT inject its grid
   chrome here.

   The page wraps a uc:ModuleTemplateV2 around a two-column layout:
     left col  = Dates table + Other Information table
     middle    = 40px spacer td
     right col = Attachments table + Comments table
   The Figma is a single-column flow (Document → Basic Info → Other → Attach →
   Comments). We flatten tblCert's outer table-row to block flow so DOM order
   stacks correctly and the spacer td is hidden.

   Inline <style> note: the .ascx ships ~100 lines of inline CSS (.sTbl rules,
   .tblCertDates widths, .qC, etc.). All overrides chain `body.page-certificate
   -detail` to reach 0,2,X+ specificity, beating the inline-block 0,1,X+
   selectors and source-order ties.
   ========================================================================== */

/* Card chrome — ModuleTemplateV2 wrapper. The default .modV2 ships a red
   header bar + flat white body; we round corners, soften the border, drop in
   a subtle shadow, and inset content with comfortable padding.

   Margin/sizing aligned with the shared `.q88-card` rule in components.css:
   fluid-fill the .q88-content area with 48 px gutters L/R, no max-width cap
   (no dead gutter on wide monitors). Border-radius 16 and padding 24x40 are
   page-specific Figma overrides retained above .q88-card's 8 radius and
   24x28 padding. ModuleTemplateV2 is a shared user control, so we can't
   attach the .q88-card class to the .modV2 div directly — the rule below
   mirrors .q88-card's shape via scoped declarations instead. */
body.page-certificate-detail .modV2 {
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.06),
        0 2px 4px -1px rgba(0, 0, 0, 0.05);
    padding: 24px 40px 24px 40px;
    margin: 24px 48px;
    /* Override `width: 100%` from .sidebar-nav .modV2 (navigation.css) so the
       48 px L/R margins actually reduce the box instead of pushing it past
       the .q88-content right edge. */
    width: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    box-sizing: border-box;
}

/* The legacy `<table.ContentPane>` chain release is shared in components.css
   (scoped to `body.sidebar-nav … :has(.q88-card)`). The ModuleTemplateV2
   panel on this page carries .q88-card via codebehind, so the shared rule
   applies — no page-specific copy needed here. */

/* Strip the legacy mod chrome (red title bar, corner gradients) */
body.page-certificate-detail .modV2 .modV2TitleBg,
body.page-certificate-detail .modV2 .modV2TitleBgLeft,
body.page-certificate-detail .modV2 .modV2TitleBgRight,
body.page-certificate-detail .modV2 .modV2TitleBg2,
body.page-certificate-detail .modV2 .modV2TitleCornerLeft,
body.page-certificate-detail .modV2 .modV2TitleCornerRight,
body.page-certificate-detail .modV2 .modV2BodyBg,
body.page-certificate-detail .modV2 .modV2FooterBg,
body.page-certificate-detail .modV2 .modV2TopLeftCorner,
body.page-certificate-detail .modV2 .modV2TopRightCorner,
body.page-certificate-detail .modV2 .modV2BottomLeftCorner,
body.page-certificate-detail .modV2 .modV2BottomRightCorner {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
}

/* Title container (vessel select left, modified date + actions right) */
body.page-certificate-detail .modV2TitleContainer {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 16px 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
body.page-certificate-detail .modV2TitleContainer > * {
    align-self: center;
}
body.page-certificate-detail .modV2Title,
body.page-certificate-detail .modV2TitleRight,
body.page-certificate-detail .modV2TRight,
body.page-certificate-detail [id$='_pnlTitleRight'] {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    font-family: inherit;
    color: inherit !important;
    height: auto !important;
}
/* Modified Date/By text sits in the same title row as the absolutely
   positioned +/kebab action cluster below (top:24/right:32, 2x24px icons
   + 4px gap = 52px wide). Reserve that width on the right so the text
   doesn't run under the icons. */
body.page-certificate-detail .modV2TitleRight,
body.page-certificate-detail .modV2TRight,
body.page-certificate-detail [id$='_pnlTitleRight'] {
    padding-right: 90px !important;
    box-sizing: border-box;
}
body.page-certificate-detail .modV2Title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

/* Vessel select (FleetVessel dropdown) — Figma renders as bold name + caret.
   Override the ascx inline-style underline. */
body.page-certificate-detail .documentDetailFleetVesselWrapper {
    display: inline-flex;
    align-items: center;
}
body.page-certificate-detail .documentDetailFleetVesselWrapper select {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
    background-size: 24px 24px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    padding: 0 30px 0 0 !important;
    margin: 0 !important;
    height: 24px !important;
    font-family: inherit;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    outline: none !important;
}

/* SubHeader row: Document selector left, Reference + plus + actions right.
   The action cluster (`<td align="right">`) is lifted to the top-right of the
   card via absolute positioning so it lines up with the vessel header — this
   matches the Figma which renders the plus + 3-dots on the title row, not the
   document row. */
body.page-certificate-detail .modV2 {
    position: relative;
}
body.page-certificate-detail .modV2SubHeader,
body.page-certificate-detail .modV2Main > div:first-child {
    background: transparent !important;
    border: 0 !important;
}
body.page-certificate-detail .modV2SubHeader > div {
    padding: 0 0 16px 0 !important;
}
body.page-certificate-detail .modV2SubHeader td[align='right'] {
    position: absolute;
    top: 24px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 !important;
}
body.page-certificate-detail .modV2SubHeader table {
    border-collapse: collapse;
}
body.page-certificate-detail .modV2SubHeader #divHeader,
body.page-certificate-detail .modV2SubHeader [id$='_divHeader'] {
    display: inline-flex;
    align-items: center;
}
body.page-certificate-detail .modV2SubHeader #divHeader table,
body.page-certificate-detail .modV2SubHeader [id$='_divHeader'] table {
    border-collapse: collapse;
}
body.page-certificate-detail .modV2SubHeader #divHeader td,
body.page-certificate-detail .modV2SubHeader [id$='_divHeader'] td {
    padding: 0 !important;
    vertical-align: middle;
}
/* Scope the whitespace-collapsing trick to ONLY the label cell (first td) —
   applying it to every td cascades font-size:0 into the dropdown widget that
   lives in the next sibling td and zeroes out its trigger/option text.
   The label cell contains `&nbsp;&nbsp;&nbsp;<b>Document:</b>&nbsp;` and the
   leading/trailing nbsp's were pushing the label 11px right of the card edge. */
body.page-certificate-detail .modV2SubHeader #divHeader td:first-child,
body.page-certificate-detail .modV2SubHeader [id$='_divHeader'] td:first-child {
    font-size: 0 !important;
}
body.page-certificate-detail .modV2SubHeader #divHeader td b,
body.page-certificate-detail .modV2SubHeader [id$='_divHeader'] td b {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    padding-right: 12px;
    text-transform: none;
}
/* Hide the underlying raw <select> — the jQuery dd widget renders next to it
   as the visible chip. The select stays in DOM for postback value handling. */
body.page-certificate-detail .modV2SubHeader select.jqddlCertificateList {
    display: none !important;
}
body.page-certificate-detail .modV2SubHeader [id$='_lnkEditCertificateName'] {
    padding: 0 0 0 12px !important;
    font-size: 12px;
    color: var(--text-link, var(--brand-primary)) !important;
    text-decoration: none;
    font-weight: 500;
}
body.page-certificate-detail .modV2SubHeader [id$='_lnkEditCertificateName']:hover {
    text-decoration: underline;
}

/* Reference label (right side) */
body.page-certificate-detail .modV2SubHeader [id$='_lblReferenceLabel'],
body.page-certificate-detail .modV2SubHeader [id$='_lblReference'] {
    font-size: 12px;
    color: var(--text-muted, #64748b) !important;
    margin-right: 8px;
}

/* Plus icon (lbAddCertificate) — Figma renders the CirclePlus as a plain
   icon (no surrounding button border, no white bg). The bordered look was
   from an earlier interpretation; bilateral inventory caught the delta. */
body.page-certificate-detail .modV2SubHeader a.Img-Std.Img-Std-Add,
body.page-certificate-detail .modV2SubHeader a.Img-Std-Add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    border-radius: 6px !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    line-height: 0 !important;
    text-decoration: none !important;
    vertical-align: middle;
}
body.page-certificate-detail .modV2SubHeader a.Img-Std.Img-Std-Add::before,
body.page-certificate-detail .modV2SubHeader a.Img-Std-Add::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    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'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>") no-repeat center / 24px;
            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'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>") no-repeat center / 24px;
}
body.page-certificate-detail .modV2SubHeader a.Img-Std.Img-Std-Add:hover,
body.page-certificate-detail .modV2SubHeader a.Img-Std-Add:hover {
    background: var(--raw-slate-100, var(--surface-muted)) !important;
}

/* Actions popup menu (3-dots) — the trigger is `a.ActionsMenu` with a single
   <img src="/cp.gif"> drawn via `background-image: url(StdIcons.png)`. We
   render it as a 32px square icon button with a vertical ellipsis mask,
   matching the plus button next to it. */
body.page-certificate-detail .modV2SubHeader a.ActionsMenu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    border-radius: 6px !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: middle;
}
body.page-certificate-detail .modV2SubHeader a.ActionsMenu img {
    display: none !important;
}
body.page-certificate-detail .modV2SubHeader a.ActionsMenu::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--icon-ellipsis-vertical) no-repeat center / 24px;
            mask: var(--icon-ellipsis-vertical) no-repeat center / 24px;
}
body.page-certificate-detail .modV2SubHeader a.ActionsMenu:hover {
    background: var(--surface-muted) !important;
}

/* (QEN-8801) Actions popup menu panel ("Copy Document" / "User's Guide").
   The menu trigger lives in the action <td>, which we force to `font-size: 0`
   to collapse the `&nbsp;&nbsp;` whitespace between the + and ⋮ buttons (see
   the rule near the bottom of this file). The AjaxToolkit PopupControlExtender
   shows the items panel (`.popupMenuV2`) IN PLACE inside that same <td>, so the
   item text inherited `font-size: 0` and rendered invisible — the menu opened
   blank. Restore typography on the panel and dress it as a refresh dropdown
   card. The panel is positioned (absolute) by the extender; we paint chrome
   only. */
body.page-certificate-detail .popupMenuV2 {
    font-size: 13px !important;
    line-height: 20px !important;
    background: var(--surface-raised) !important;
    border: 1px solid var(--border-default) !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.10) !important;
    padding: 4px !important;
    min-width: 160px;
    z-index: 100002;
}
/* Item rows. Legacy MainWhiteout.css (~L2046) forces `.popupMenuItem` to
   `height: 20px; overflow: hidden` and positions `.popupMenuItemContent`
   absolutely (`top: 50%; margin-top: -8px`) — a workaround that clips the
   label as soon as it has padding, so the options rendered "cut off". Match
   the refresh dropdown spacing used on the other pages (components.css §9.3 /
   inspection-container §22): auto-height, in-flow content, padding-driven
   margins around each option. */
body.page-certificate-detail .popupMenuV2 .popupMenuItem {
    height: auto !important;
    overflow: visible !important;
    padding: 6px 12px !important;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px !important;
    line-height: 20px !important;
}
body.page-certificate-detail .popupMenuV2 .popupMenuItem:hover {
    background: var(--surface-muted) !important;
}
/* Pull the inner content back into normal flow (undo the absolute positioning)
   so the option's padding is honoured and the text is no longer clipped. */
body.page-certificate-detail .popupMenuV2 .popupMenuItem .popupMenuItemContent {
    position: static !important;
    top: auto !important;
    margin-top: 0 !important;
}
body.page-certificate-detail .popupMenuV2 .popupMenuItem a,
body.page-certificate-detail .popupMenuV2 .popupMenuItemContent a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
/* Menu-item icons (ManageFleet / Help sprites) — neutral 16px glyphs */
body.page-certificate-detail .popupMenuV2 .popupMenuItem img {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
}

/* Document dropdown — the jQuery dd plugin renders a `<div class="dd ddcommon
   borderRadius">` next to a hidden <select>, then SWAPS `borderRadius` for
   `borderRadiusTp` (open below) or `borderRadiusBtm` (open above) on open.
   Selector drops the `.borderRadius` qualifier so the rule survives all three
   states — otherwise width/border/height all revert to dd.css defaults on
   open and the trigger appears to collapse + lose its border. */
body.page-certificate-detail .modV2SubHeader .dd.ddcommon {
    width: 320px !important;
    max-width: 320px !important;
    min-width: 0 !important;
    height: 32px !important;
    background: var(--surface-raised) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: inherit;
    margin: 0 12px 0 0;
    vertical-align: middle;
}
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .ddTitle {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 32px 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .ddTitleText {
    font-size: 14px !important;
    color: var(--text-primary) !important;
    line-height: 30px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .ddTitleText img {
    vertical-align: middle;
}
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .arrow,
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .arrowoff,
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .arrowanim {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 16px !important;
    height: 16px !important;
    background-image: 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='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
}
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .divider {
    display: none !important;
}

/* Main body */
body.page-certificate-detail .modV2Main {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    color: var(--text-primary);
}
body.page-certificate-detail .modV2Main > div {
    padding: 0 !important;
}

/* Flatten the outer 2-column tblCert into a single-column flow */
body.page-certificate-detail table.tblCert,
body.page-certificate-detail table.tblCert > tbody,
body.page-certificate-detail table.tblCert > tbody > tr {
    display: block;
    width: 100% !important;
}
body.page-certificate-detail table.tblCert > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    vertical-align: top;
}
/* The 40px spacer td between left and right blocks — useless after flattening */
body.page-certificate-detail table.tblCert > tbody > tr > td:nth-child(2) {
    display: none !important;
}

/* Shared table chrome — sTbl is used by Dates, Other Information, Attachments,
   and Comments. Drop the legacy gray bg + border kit; we layer per-table. */
body.page-certificate-detail table.sTbl {
    background: transparent !important;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 20px 0;
    border: 0 !important;
    table-layout: auto;
}
body.page-certificate-detail table.sTbl tr td,
body.page-certificate-detail table.sTbl tr th {
    border: 0 !important;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    background: transparent;
    vertical-align: middle;
}

/* Section heading injected via ::before on each table card. The labels match
   the Figma copy: Basic Information / Other Information / Attachments /
   Comments. Tables are display: table by default and render ::before as an
   anonymous block above the table box. */
body.page-certificate-detail table.tblCertDates::before,
body.page-certificate-detail table.tblCertAttrOther::before,
body.page-certificate-detail table#tblAttachments::before,
body.page-certificate-detail .modV2Main table.sTbl:has(.trHdr > td:only-child)::before {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: 0;
}
body.page-certificate-detail table.tblCertDates::before { content: "Basic Information"; display: table-caption; caption-side: top; }
body.page-certificate-detail table.tblCertAttrOther::before { content: "Other Information"; }
body.page-certificate-detail table#tblAttachments::before { content: "Attachments"; }
body.page-certificate-detail .modV2Main .sTbl:has(textarea[id$='_txtComments'])::before,
body.page-certificate-detail .modV2Main .sTbl:has(textarea#txtComments)::before {
    content: "Comments";
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--text-primary);
    margin-bottom: 12px;
}

/* Hide the empty single-cell trHdr rows on tables where the section title
   is already injected via ::before. tblCertAttrOther's trHdr is `colspan=4`
   "Other Information"; the Comments table's trHdr is the lone "Comments"
   cell. Both add nothing visually under the injected heading. */
body.page-certificate-detail table.tblCertAttrOther > tbody > tr.trHdr,
body.page-certificate-detail .modV2Main .sTbl:has(textarea[id$='_txtComments']) > tbody > tr.trHdr,
body.page-certificate-detail .modV2Main .sTbl:has(textarea#txtComments) > tbody > tr.trHdr {
    display: none !important;
}
/* Comments table — only sTbl with a single colspanless single-th trHdr.
   The Comments header td is the third sTbl on the page, with one td. */
body.page-certificate-detail .modV2Main > div > .sTbl:nth-of-type(3),
body.page-certificate-detail .modV2Main .sTbl:has(td:only-child + tr td:only-child),
body.page-certificate-detail .modV2Main .sTbl:has(> tbody > tr.trHdr > td:only-child)::before {
    /* heading content set below per-table */
}
/* trHdr (header row inside the table) — wrap as a flat band with row labels.
   Dates table has 4 trHdr cells: "Dates" / "Last (Issued)" / "Next (Due)" /
   "Window". We retitle column 1 to blank (row labels are inline). */
body.page-certificate-detail table.sTbl > tbody > tr.trHdr > td {
    /* Default trHdr chrome — overridden per-grid below. Hardcode the muted
       gray; --text-muted resolves to legacy #999 in this scope which is
       too light. */
    background: var(--surface-card) !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    text-transform: none !important;
    border: 0 !important;
    padding: 10px 12px !important;
    letter-spacing: 0.01em;
}

/* Basic Information column headers — Figma renders them as plain text on
   the white card bg (NO gray band). Dark text, regular weight. The
   default rule above applies a slate-50 band; reset that here. */
body.page-certificate-detail table.tblCertDates > tbody > tr.trHdr > td {
    background: transparent !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    /* (B4) Compact header strip — no vertical padding above text, 8px below
       so the gap to the first input row is 16px (8 here + 8 row top). */
    padding-top: 0 !important;
    padding-bottom: 8px !important;
}

/* Attachments grid header — DESIGN.md §9.7 inline-data-table convention:
   flat header (no band / no vertical separators / no rounded corners),
   Inter Medium 14/20 slate-900, a single 1px slate-200 (var(--border-default))
   bottom border. ~40px tall (10px vertical padding + 20px line). */
body.page-certificate-detail table#tblAttachments > tbody > tr.trHdr > td {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    border-radius: 0 !important;
}
/* Header alignment — every column header left-aligned (titles + content read
   left per QEN-8831 feedback). Overrides the legacy `align="center"` attrs on
   the Date / Publish header cells. */
body.page-certificate-detail table#tblAttachments > tbody > tr.trHdr > td,
body.page-certificate-detail table#tblAttachments > tbody > tr.trHdr > td:nth-child(2),
body.page-certificate-detail table#tblAttachments > tbody > tr.trHdr > td:nth-child(3) {
    text-align: left !important;
}
body.page-certificate-detail table.sTbl > tbody > tr.trHdr > td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
body.page-certificate-detail table.sTbl > tbody > tr.trHdr > td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Dates table — clean 4-col grid. The first column row labels appear under
   no header (drop the "Dates" text via font-size:0 since the row labels are
   self-explanatory on the data rows). */
body.page-certificate-detail table.tblCertDates {
    background: transparent !important;
}
body.page-certificate-detail table.tblCertDates > tbody > tr.trHdr > td:first-child {
    font-size: 0 !important;
}
body.page-certificate-detail table.tblCertDates > tbody > tr.trHdr > td {
    text-align: left !important;
}
body.page-certificate-detail table.tblCertDates > tbody > tr.trHdr > td:nth-child(n+2) {
    text-align: left !important;
}
/* Row labels (Issued, Annual, Intermediate, Expires) — Figma renders
   them as DARK text (slate-900), not muted gray. */
body.page-certificate-detail table.tblCertDates > tbody > tr:not(.trHdr) > td:first-child {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary) !important;
    width: 110px !important;
    padding: 8px 12px 8px 0 !important;
}
/* Equal-width input columns (Last / Next / Window) — Figma renders them
   all ~290px each. Set on both header and data rows so table-layout:fixed
   has consistent column widths to honor. */
body.page-certificate-detail table.tblCertDates > tbody > tr > td:nth-child(2),
body.page-certificate-detail table.tblCertDates > tbody > tr > td:nth-child(3),
body.page-certificate-detail table.tblCertDates > tbody > tr > td:nth-child(4) {
    width: calc((100% - 110px) / 3) !important;
}
body.page-certificate-detail table.tblCertDates > tbody > tr.trHdr > td:first-child {
    width: 110px !important;
}
/* Data cells — let the date wrapper fill the cell. Vertical padding gives
   48px row stride to match Figma cadence (8 + 32 input + 8). */
body.page-certificate-detail table.tblCertDates > tbody > tr:not(.trHdr) > td {
    padding: 8px 12px !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
}
/* Window column width handled above (equal with Last/Next) */

/* Drop the footer-row 1px filler used as a horizontal rule */
body.page-certificate-detail table.tblCertDates > tbody > tr:last-child > td[colspan="4"],
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:last-child > td[colspan="4"] {
    display: none !important;
}

/* qDiv wrapper inside date cells — flatten to a flex chip housing the
   text input + calendar icon button. Override the .ascx inline widths
   (`.tblCertDates .qDiv { width: 110px }` etc) by suffix scope. */
body.page-certificate-detail .tblCertDates .qDiv,
body.page-certificate-detail .tblCertAttrOther .qDiv {
    position: relative;
    display: flex !important;
    align-items: center;
    width: auto !important;
    max-width: 100%;
    height: 32px;
    background: var(--surface-raised);
    border: 1px solid var(--raw-slate-200, var(--border-default));
    border-radius: 8px;
    padding: 0 8px 0 12px;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.page-certificate-detail .tblCertDates .qDiv:focus-within,
body.page-certificate-detail .tblCertAttrOther .qDiv:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.12);
}
body.page-certificate-detail .tblCertDates .qDiv .qCal,
body.page-certificate-detail .tblCertAttrOther .qDiv .qCal {
    flex: 1 1 auto;
    width: auto !important;
    height: 30px !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    outline: none !important;
    box-shadow: none !important;
    min-width: 0;
}
body.page-certificate-detail .tblCertDates .qDiv .qCal::placeholder,
body.page-certificate-detail .tblCertAttrOther .qDiv .qCal::placeholder {
    color: var(--text-muted, var(--text-tertiary));
}

/* Calendar trigger icon + click overlay are owned GLOBALLY by datePicker.css
   (`body.sidebar-nav .qDiv:has(> input.qCal)`), which is loaded app-wide for
   the refreshed frontend and renders the canonical LEADING Lucide calendar
   icon (`::before`) plus a transparent `.jaQCal` overlay on the leading edge.
   This page previously drew its OWN trailing (`::after`) calendar icon + a
   right-edge `.jaQCal` overlay, which double-rendered the glyph (two calendar
   icons per field) and fought datePicker.css's left overlay (the AjaxToolkit
   popup's anchor target). Removed so the single canonical leading icon governs
   here too — consistent with every other refreshed date field. */

/* Window column — ddl + lb (link rendered alt). Style both like an input chip. */
body.page-certificate-detail .tblCertDates select,
body.page-certificate-detail .tblCertDates .qDdl {
    width: 100% !important;
    height: 32px !important;
    max-width: 100%;
    padding: 4px 32px 4px 12px !important;
    border: 1px solid var(--raw-slate-200, var(--border-default)) !important;
    border-radius: 8px !important;
    background-color: var(--surface-raised) !important;
    background-image: 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='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Other Information — Figma renders the two fields (Issued/Certified by,
   Port Name) side-by-side on a single row. The legacy markup is a 4-column
   table (label / status / field / comment). We:
   1. Flip the table to a 2-column grid (each tr is a grid item).
   2. Inside each tr, lay out [label] [field] as inline columns.
   3. Hide the empty status (2nd) and comment (4th) td.
   4. Drop the footer 1-td filler row. */
body.page-certificate-detail table.tblCertAttrOther {
    display: block !important;
    width: 100% !important;
}
body.page-certificate-detail table.tblCertAttrOther > tbody {
    display: grid !important;
    /* minmax(0,1fr) (not 1fr) so the tracks can shrink below their content's
       min-content — otherwise the fixed-width fields refuse to shrink and the
       section forces a horizontal scroll on narrow viewports (QEN-8831). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 12px;
}
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:not(.trHdr) {
    display: grid !important;
    /* (B8/B9) Label col 136px matches Figma's "Issued / Certified by" label
       width; field column then has room for a 340px input chip. */
    grid-template-columns: 136px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 0;
}
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:not(.trHdr) > td {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    vertical-align: middle !important;
    /* let the field cell shrink below the input's intrinsic min-content */
    min-width: 0 !important;
}
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:not(.trHdr) > td:first-child {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary) !important;
    grid-column: 1;
}
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:not(.trHdr) > td:nth-child(2),
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:not(.trHdr) > td:nth-child(4) {
    display: none !important;
}
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:not(.trHdr) > td:nth-child(3) {
    grid-column: 2;
}
/* The question td carries an inline min-width:200px (CertificateDocumentDetail
   .ascx) which overflows the 136px label track — long prompts (e.g. the CAS
   "statement of compliance" question) then run UNDER the field. Clear it so the
   question stays within its grid track. */
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:not(.trHdr) > td:first-child {
    min-width: 0 !important;
}
/* Long yes/no/N-A questions (radio fields) don't fit the 136px short-label
   column — the CAS prompt is a full sentence. Give those rows a flexible
   question column with the radios trailing at the end (instead of the fixed
   136px label), so the text wraps in its own space and never collides with the
   inputs. Kept inside the row's grid cell (no full-width span) so the 2-column
   flow of the short Issued/Certified-by + Port fields is undisturbed. */
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:not(.trHdr):has(td input[type="radio"]) {
    grid-template-columns: minmax(0, 1fr) auto;
}
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:not(.trHdr):has(td input[type="radio"]) > td:nth-child(3) {
    justify-self: end;
    white-space: nowrap;
}
/* Hide the legacy 1-td filler row (used as a horizontal rule) */
body.page-certificate-detail table.tblCertAttrOther > tbody > tr:has(> td[colspan='4']) {
    display: none !important;
}
/* Inputs in Other Information — render as a 32px chip filling the field cell */
body.page-certificate-detail table.tblCertAttrOther input[type='text'],
body.page-certificate-detail table.tblCertAttrOther input.NormalTextBox,
body.page-certificate-detail table.tblCertAttrOther select {
    width: 100% !important;
    max-width: 100% !important;
    height: 32px;
    padding: 4px 12px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    background: var(--surface-raised) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    box-sizing: border-box;
    box-shadow: none !important;
    outline: none !important;
}
body.page-certificate-detail table.tblCertAttrOther textarea {
    width: 100% !important;
    min-height: 64px;
    padding: 8px 12px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    background: var(--surface-raised) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    box-sizing: border-box;
    box-shadow: none !important;
    outline: none !important;
}
/* qDiv inside Other Information shouldn't have the inherited 254px legacy
   width — let it stretch the field cell */
body.page-certificate-detail .tblCertAttrOther .qDiv {
    width: 100% !important;
    max-width: 100%;
}
body.page-certificate-detail .tblCertAttrOther .qDiv .qTxt,
body.page-certificate-detail .tblCertAttrOther .qDiv .qDdl,
body.page-certificate-detail .tblCertAttrOther .qDiv .qTxtConvert {
    width: 100% !important;
    max-width: 100%;
}

/* Multi-line attribute (e.g. "Insurer Full address") renders a <textarea>
   (class NormalTextBox, NOT .qTxt) wrapped in a .qDiv. The chip rule above
   clamps every .qDiv to height:32px + align-items:center, but the textarea has
   min-height:64px (the tblCertAttrOther textarea rule) — so the 64px textarea
   was vertically centred in the 32px chip and its top (with the text) overflowed
   ABOVE the box. Let the chip GROW to the textarea and have the textarea fill it
   (borderless, since the qDiv is the visible box). */
body.page-certificate-detail .tblCertAttrOther .qDiv:has(textarea) {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 64px !important;
    align-items: stretch !important;
    padding: 8px 12px !important;
}
body.page-certificate-detail .tblCertAttrOther .qDiv:has(textarea) textarea {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    resize: vertical !important;
}

/* Attachments grid rows — DESIGN.md §9.7 inline data table. */
body.page-certificate-detail table#tblAttachments {
    background: transparent !important;
    margin-top: 4px;
    /* Fixed layout so the table's slack lands in the filename column instead of
       inflating the checkbox column. Under auto layout a width:100% table
       distributes leftover width across ALL columns, padding the 13px checkbox
       cell out to ~98px and blowing the checkbox→filename gap to ~80px. With
       fixed layout the colgroup widths below are authoritative: checkbox col is
       a tight 25px (12px inset + 13px box), so the 8px gap is controlled solely
       by the filename cell's left padding. */
    table-layout: fixed !important;
    width: 100% !important;
}
/* Column widths (colgroup in CertificateDocumentDetail.ascx):
   1 checkbox (tight) · 2 filename (flex, absorbs slack) · 3 Date · 4 Publish. */
body.page-certificate-detail table#tblAttachments > colgroup > col:nth-child(1) { width: 25px; }
body.page-certificate-detail table#tblAttachments > colgroup > col:nth-child(3) { width: 120px; }
body.page-certificate-detail table#tblAttachments > colgroup > col:nth-child(4) { width: 90px; }
/* Data rows — 36px density (8px vertical padding + 20px line), slate-900
   Inter Regular 14/20, 1px slate-200 row separator. The last row keeps its
   separator so the grid reads as a bounded table above the upload control. */
body.page-certificate-detail table#tblAttachments > tbody > tr:not(.trHdr) > td {
    padding: 8px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: var(--text-primary) !important;
}
/* Row hover — DESIGN.md §5.4 muted row (#f1f5f9 / var(--surface-muted)). */
body.page-certificate-detail table#tblAttachments > tbody > tr:not(.trHdr):hover > td {
    background: var(--surface-muted) !important;
}
/* Data alignment — every column left-aligned (QEN-8831 feedback: titles +
   content read left). */
body.page-certificate-detail table#tblAttachments > tbody > tr:not(.trHdr) > td {
    text-align: left !important;
}
/* Checkbox cell — checkbox sits flush at the card's left inset (12px) with no
   trailing padding (column width fixed to 25px by the colgroup rule above).
   Zero the checkbox's UA margin so the gap to the filename is controlled solely
   by the filename cell's left padding. */
body.page-certificate-detail table#tblAttachments > tbody > tr:not(.trHdr) > td:nth-child(1) {
    padding-left: 12px !important;
    padding-right: 0 !important;
}
body.page-certificate-detail table#tblAttachments > tbody > tr:not(.trHdr) > td:nth-child(1) input {
    margin: 0 !important;
    vertical-align: middle;
}
/* Filename cell — 8px gap between the checkbox and the paperclip/filename
   (checkbox cell has 0 right padding, so this left padding IS the gap). Clip
   over-long names rather than letting them overflow into the Date column
   (fixed layout doesn't auto-grow the cell). */
body.page-certificate-detail table#tblAttachments > tbody > tr:not(.trHdr) > td:nth-child(2) {
    padding-left: 8px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Empty Date cell → en-dash (DESIGN.md §5.4 empty-cell convention). */
body.page-certificate-detail table#tblAttachments > tbody > tr:not(.trHdr) > td:nth-child(3):empty::after {
    content: "\2013";
    color: var(--text-muted);
}
body.page-certificate-detail table#tblAttachments .Img-Std-Publish,
body.page-certificate-detail table#tblAttachments .Img-Std-Private,
body.page-certificate-detail .jqAccessLink img.Img-Std-Publish,
body.page-certificate-detail .jqAccessLink img.Img-Std-Private {
    background-image: none;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 16px;
            mask-size: 16px;
    width: 16px !important;
    height: 16px !important;
}
body.page-certificate-detail .jqAccessLink img.Img-Std-Publish,
body.page-certificate-detail .Img-Std-Publish {
    /* QEN-8831 / Figma 349:5846: "Attachment Published" = RED *closed* padlock.
       (Shared with the legend key so the grid Publish-column locks match it.)
       background-image:none ensures only the masked padlock shows (no StdIcons
       sprite leaking through the mask). */
    background-color: var(--red-600, #dc2626) !important;
    background-image: none !important;
    -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'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") no-repeat center / 16px !important;
            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'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") no-repeat center / 16px !important;
}
body.page-certificate-detail .jqAccessLink img.Img-Std-Private,
body.page-certificate-detail .Img-Std-Private {
    /* QEN-8831 / Figma 349:5846: "Attachment Private" = GREEN *open* padlock. */
    background-color: var(--raw-green-600, #16a34a) !important;
    background-image: none !important;
    -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'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 9.9-1'/></svg>") no-repeat center / 16px !important;
            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'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 9.9-1'/></svg>") no-repeat center / 16px !important;
}

/* (QEN-8801) File-type icons (raster .gif sprites — pdf/doc/xls/htm/png/…,
   defined in Main.css `.icon-filetype-*`). brightness(0) on the raster gif read
   as a muddy black blob, so swap it for the same Figma paperclip the cert LIST
   page uses for its attachment indicator (`/styles/icons/paperclip.svg`, also
   the inspection-note / observations paperclip). Masked in slate-900 so it
   follows the doc-type slate treatment (DESIGN.md §19.1). Each grid row is a
   single attachment, so one clean "attachment" glyph reads better than 13
   per-extension raster silhouettes. */
body.page-certificate-detail table#tblAttachments [class*="icon-filetype"] {
    background-image: none !important;
    background-color: var(--text-primary, #0f172a) !important;
    -webkit-mask: url('/styles/icons/paperclip.svg') no-repeat center / 16px !important;
            mask: url('/styles/icons/paperclip.svg') no-repeat center / 16px !important;
}

/* "No Attachments" empty-state — restyle the legacy blue centered text */
body.page-certificate-detail .modV2Main .instructions,
body.page-certificate-detail .modV2Main .instructionsWBg {
    background: var(--raw-slate-50, var(--surface-card)) !important;
    color: var(--text-muted, #64748b) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 16px !important;
    text-align: center;
    border-radius: 0 0 8px 8px;
}

/* "Attach File" upload widget (fu:Upload → Scripts/fileuploader.js). Legacy
   defects (parity with inspection-note.css §"Attach File"): the .qq-uploader is
   a fixed 35px box while its #qq-upload-container is ~70px (overflows down onto
   the content below); .qq-upload-button is display:block with a legacy <ins>
   spacer + a trailing /images/tabs/attachment.gif + an oversized hidden file
   <input> that inflates it to ~46px. Re-skin as a 36px refresh outline button
   with a leading Lucide paperclip (the shared /styles/icons/paperclip.svg, so
   it matches the attachment-grid icons). */

/* Size the widget to content so the fixed 35px height stops clipping, and give
   it a clean gap below the grid. */
body.page-certificate-detail .qq-uploader {
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    margin: 12px 0 4px 0 !important;
}
body.page-certificate-detail #qq-upload-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    height: auto !important;
    width: auto !important;
}
/* Collapse the empty file-list's phantom line. */
body.page-certificate-detail .qq-upload-list:empty {
    display: none !important;
}
/* The pills. DON'T set `display` — fileuploader.js toggles display between the
   Attach / Replace buttons; width:fit-content shrink-wraps regardless. */
body.page-certificate-detail .qq-upload-button,
body.page-certificate-detail .qq-upload-replace-button {
    position: relative !important;       /* anchor the absolute hidden file input */
    width: fit-content !important;
    max-width: none !important;
    height: 36px !important;
    padding: 0 16px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    background: var(--surface-raised) !important;
    color: var(--text-primary) !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 34px !important;        /* 36 − 2px border = vertical center */
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;      /* no 2-line "Attach / File" wrap */
    overflow: hidden !important;         /* clip the oversized hidden file input */
    box-sizing: border-box !important;
    vertical-align: middle !important;
    margin: 0 !important;
    cursor: pointer;
}
body.page-certificate-detail .qq-upload-button:hover,
body.page-certificate-detail .qq-upload-replace-button:hover {
    background: var(--surface-muted) !important;
}
/* Hide the legacy <ins> spacer + trailing attachment.gif. */
body.page-certificate-detail .qq-upload-button > ins,
body.page-certificate-detail .qq-upload-replace-button > ins,
body.page-certificate-detail .qq-upload-button > img,
body.page-certificate-detail .qq-upload-replace-button > img {
    display: none !important;
}
/* Leading Lucide paperclip — same glyph as the attachment-grid icons. */
body.page-certificate-detail .qq-upload-button::before,
body.page-certificate-detail .qq-upload-replace-button::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    background-color: var(--text-primary, #0f172a);
    -webkit-mask: url('/styles/icons/paperclip.svg') no-repeat center / 16px 16px;
            mask: url('/styles/icons/paperclip.svg') no-repeat center / 16px 16px;
    pointer-events: none;
}

/* Comments — Figma shows a heading + a single textarea card */
body.page-certificate-detail .modV2Main .sTbl:last-of-type {
    background: transparent !important;
    margin-top: 20px;
}
body.page-certificate-detail .modV2Main .sTbl:last-of-type > tbody > tr.trHdr > td {
    text-align: left !important;
    border-radius: 8px 8px 0 0;
}
body.page-certificate-detail .modV2Main .sTbl:last-of-type > tbody > tr:not(.trHdr) > td {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
body.page-certificate-detail .modV2Main textarea[id$='_txtComments'],
body.page-certificate-detail .modV2Main #txtComments {
    width: 100% !important;
    min-height: 96px;
    padding: 10px 12px !important;
    border: 1px solid var(--raw-slate-200, var(--border-default)) !important;
    border-radius: 8px !important;
    background: var(--surface-raised) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    resize: vertical;
    box-sizing: border-box;
    box-shadow: none !important;
    outline: none !important;
}
body.page-certificate-detail .modV2Main textarea[id$='_txtComments']:focus,
body.page-certificate-detail .modV2Main #txtComments:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.12) !important;
}

/* (Nested-border) The legacy ascx wraps the Comments textarea in a generic
   `<div class="qDiv">` carrying its own #adadad border + 4px radius +
   2/6px padding. That sits OUTSIDE the textarea's slate-200 border —
   creating a visible "input inside an input" double-border. The qDiv-skin
   rules earlier in this file only target `.tblCertDates .qDiv` and
   `.tblCertAttrOther .qDiv`, leaving the Comments wrapper unstyled.
   Flatten the qDiv chrome here so the textarea is the only visible chip. */
body.page-certificate-detail .modV2Main .qDiv:has(> textarea[id$='_txtComments']),
body.page-certificate-detail .modV2Main .qDiv:has(> #txtComments) {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Apply-window banner (chkApplyWindow) — only shows when window changes */
body.page-certificate-detail .attachmentsSelectedMessageBox {
    background: var(--surface-notice, #fef9c3) !important;
    border: 1px solid var(--raw-slate-200, var(--border-default));
    border-radius: 8px;
    padding: 10px 12px !important;
    font-size: 13px;
    color: var(--text-primary);
    margin: 0 0 12px 0 !important;
}

/* (QEN-8831) Status legend — lives in the page Footer (Figma 349:5846), a
   single flex row of colored bars + labels on the LEFT of the action bar.
   The lock swatches reuse the page-wide masked `.Img-Std-Publish/Private`. */
body.page-certificate-detail .certStatusLegend {
    margin: 0;
}
body.page-certificate-detail .certStatusLegend table,
body.page-certificate-detail .certStatusLegend tbody {
    display: block;
    width: 100%;
    border-collapse: collapse;
}
body.page-certificate-detail .certStatusLegend tr {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
body.page-certificate-detail .certStatusLegend td {
    display: inline-flex;
    align-items: center;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    padding: 0 !important;
    line-height: 20px;
    white-space: nowrap;
    border: 0 !important;
    background: transparent !important;
}
/* Status indicators — Figma 349:5846 renders them as thin vertical BARS
   (~3×16, slightly rounded) in red / amber / green, NOT dots. */
body.page-certificate-detail .certStatusLegend img.jqImgValid,
body.page-certificate-detail .certStatusLegend img.jqImgTentative,
body.page-certificate-detail .certStatusLegend img.jqImgExpired {
    display: inline-block;
    background-image: none !important;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    padding: 0;
    margin: 0 8px 0 16px;
    vertical-align: middle;
}
body.page-certificate-detail .certStatusLegend tr > td:first-child img {
    margin-left: 0;
}
body.page-certificate-detail .certStatusLegend img.jqImgValid { background-color: var(--raw-green-600, #16a34a); }
body.page-certificate-detail .certStatusLegend img.jqImgTentative { background-color: #f59e0b; }
body.page-certificate-detail .certStatusLegend img.jqImgExpired { background-color: var(--red-600, #dc2626); }
/* Attachment lock swatches — slate-900 masked padlocks (mask + colour come from
   the page-wide `.Img-Std-Publish/Private` rules); set size + spacing here. */
body.page-certificate-detail .certStatusLegend img.Img-Std-Publish,
body.page-certificate-detail .certStatusLegend img.Img-Std-Private {
    display: inline-block;
    width: 16px !important;
    height: 16px !important;
    margin: 0 6px 0 16px;
    vertical-align: middle;
    -webkit-mask-size: 16px !important;
            mask-size: 16px !important;
}

/* Footer (actions + legend) — Figma 349:5846 lays the footer out as a single
   bar: status legend on the LEFT, Cancel/Delete/Save on the RIGHT. */
body.page-certificate-detail .modPopFooter {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--raw-slate-100, var(--surface-muted)) !important;
    padding: 16px 0 0 0 !important;
    margin: 16px 0 0 0 !important;
}
body.page-certificate-detail .modPopFooter .certFooterBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: transparent !important;
    border: 0 !important;
}
/* Actions cluster pinned right (margin-left:auto keeps it right even if the
   legend wraps to a narrow viewport). */
body.page-certificate-detail .modPopFooter .certFooterActions {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

/* Footer buttons (Cancel / Delete / Save) — !important dropped in QEN-8801.
   ModuleTemplateV2 emits .modPopFooter with NO .modPopPnl ancestor, so §9.10
   never matched here; these rules only beat MainWhiteout's `.LinkButton`
   (gated `body:not(.sidebar-nav)` by Target B, 132bbd42) + the 308-409 base
   (0,2,1). Base rule is (0,3,2), per-button rules (0,4,2) — both win NORMAL. */
body.page-certificate-detail .modPopFooter a.LinkButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 0 0 8px;
    background-image: none;
    box-shadow: none;
    min-width: 0;
}
body.page-certificate-detail .modPopFooter a.LinkButton > ins,
body.page-certificate-detail .modPopFooter a.LinkButton img {
    display: none;
}
/* Copy Document modal (mpeSaveToAnotherVessel — CertificateDocumentDetail
   .ascx:413). The legacy markup puts the Fleet dropdown row and the
   "Select: All / None" row as two side-by-side TDs in a single <tr> (around
   :421). Re-stack them onto two rows so each owns its full line, and let
   the Fleet dropdown stretch into the remaining horizontal space (without
   overflowing the 300px modal). Scoped via #upCopyToVessel which carries
   ClientIDMode="Static" so the id stays stable across postbacks. */
body.page-certificate-detail #upCopyToVessel > table {
    width: 100%;
    table-layout: fixed;
}

body.page-certificate-detail #upCopyToVessel > table > tbody > tr {
    display: block;
}

body.page-certificate-detail #upCopyToVessel > table > tbody > tr > td {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Fleet TD: inline-flex so the "Fleet:" label sits beside its dropdown and
   the dropdown gobbles the remaining row width via flex:1. min-width:0 is
   the standard trick that lets a flex child shrink past its intrinsic
   <select> min-content size, so a long fleet name can't bust the modal. */
body.page-certificate-detail #upCopyToVessel > table > tbody > tr > td:has(> .FleetVessel),
body.page-certificate-detail #upCopyToVessel > table > tbody > tr > td:has(select[id$="_dlFleet"]) {
    display: flex;
    align-items: center;
    gap: var(--raw-space-4);
}

body.page-certificate-detail #upCopyToVessel select[id$="_dlFleet"] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* Delete — gray bordered (the only LinkButton w/o Secondary AND not Save) */
body.page-certificate-detail .modPopFooter a.LinkButton[id$='_lbDelete'] {
    background: var(--surface-raised);
    background-color: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--raw-slate-200, var(--border-default));
}
body.page-certificate-detail .modPopFooter a.LinkButton[id$='_lbDelete']:hover {
    background: var(--raw-slate-100, var(--surface-muted));
    background-color: var(--raw-slate-100, var(--surface-muted));
}
/* Save — teal primary */
body.page-certificate-detail .modPopFooter a.LinkButton[id$='_lbSave'] {
    background: var(--brand-primary);
    background-color: var(--brand-primary);
    color: var(--surface-raised);
    border: 1px solid transparent;
}
body.page-certificate-detail .modPopFooter a.LinkButton[id$='_lbSave']:hover {
    background: var(--brand-primary-hover);
    background-color: var(--brand-primary-hover);
}

/* Suppress the random <br /> the ascx ships before ModuleTemplateV2 */
body.page-certificate-detail > br:first-of-type,
body.page-certificate-detail .modV2 + br {
    display: none;
}

/* Drop the legacy `instructions` blue color override that's set on
   pnlAdditionalInformationNoFields and pnlNoAttachments via the ascx inline
   style — we already handle the empty-state above. */
body.page-certificate-detail .modV2Main .borderRight,
body.page-certificate-detail .modV2Main .borderLeft,
body.page-certificate-detail .modV2Main .borderBottom {
    border-color: var(--raw-slate-100, var(--surface-muted)) !important;
}

/* --- Figma parity fixes (May 12) ----------------------------------------- */

/* (1) Document dropdown: the dd widget's inner `.ddTitle` has an inline
   width pinned by the jQuery dd plugin (~364px) that overflows the 320px
   chip we constrain on .dd.ddcommon. The chevron is positioned at
   `right: 8px` of .ddTitle, so it renders ~42px outside the visible field.
   Clamp the title to fill the parent so the chevron lands inside. */
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .ddTitle {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
}
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .ddTitleText,
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .ddTitleText .ddlabel {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* (3) Date grid row spacing. The data tables intentionally force-show
   their qDivs (even the Window-column ones whose inline style declares
   display:none — that's a legacy save-state marker). Only kill the
   inline display:none for qDivs OUTSIDE the data tables (the document
   dropdown's hidden ddOutOfVision holder, the legacy attach-file qDivs,
   etc.) so they don't bloat row heights. */
body.page-certificate-detail .ddOutOfVision .qDiv[style*="display:none"],
body.page-certificate-detail .ddOutOfVision .qDiv[style*="display: none"],
body.page-certificate-detail .modV2SubHeader .qDiv[style*="display:none"],
body.page-certificate-detail .modV2SubHeader .qDiv[style*="display: none"] {
    display: none !important;
}

/* Tighten the date grid vertical rhythm. Cell padding from .sTbl (10px
   top/btm) is fine for label rows, but date data rows pack a 32px field
   so 8/8 keeps row stride at 48px (Figma cadence). */
body.page-certificate-detail table.tblCertDates > tbody > tr:not(.trHdr) > td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 20px;
}
body.page-certificate-detail table.tblCertDates > tbody > tr:not(.trHdr) {
    height: 48px;
}
/* Whitespace text nodes in the data cells (the ascx renders the qDiv
   with adjacent newlines + a hidden <a> + hidden <input>) form inline
   line boxes that bloat the row to ~67px even with hidden siblings.
   Zero the font-size/line-height on input cells (not the label cell)
   so whitespace can't render, and restore for the visible children. */
body.page-certificate-detail table.tblCertDates > tbody > tr:not(.trHdr) > td:not(:first-child) {
    font-size: 0;
    line-height: 0;
}
body.page-certificate-detail table.tblCertDates > tbody > tr:not(.trHdr) > td:not(:first-child) > * {
    font-size: 14px;
    line-height: 20px;
}
/* (QEN-8801) Per-row status indicator in the Next (Due) column. CreateDate-
   FieldStatusIcons() (CertificateDocumentDetail.js) injects a `jqImg{Valid|
   Tentative|Expired}` <img> before the Next-Due field based on the date vs the
   selected window (teal = valid, amber = renewal due, red = expired). An earlier
   pass hid ALL of them as "legacy decoration", which dropped the at-a-glance
   status the user needs. Restore the meaningful three as a small colored dot
   floated left of the date chip (float + the chip's flex BFC sit side-by-side;
   margin-top centers the 8px dot against the 32px chip). `jqImgClear` (blank /
   no date) stays hidden so empty rows don't show a stray marker. */
body.page-certificate-detail table.tblCertDates img.jqImgValid,
body.page-certificate-detail table.tblCertDates img.jqImgTentative,
body.page-certificate-detail table.tblCertDates img.jqImgExpired {
    display: block !important;
    float: left;
    background-image: none !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 12px 6px 0 0 !important;
}
body.page-certificate-detail table.tblCertDates img.jqImgValid {
    background-color: var(--raw-teal-600, #0d9488) !important;
}
body.page-certificate-detail table.tblCertDates img.jqImgTentative {
    background-color: #f59e0b !important;
}
body.page-certificate-detail table.tblCertDates img.jqImgExpired {
    background-color: var(--red-600, #dc2626) !important;
}
body.page-certificate-detail table.tblCertDates img.jqImgClear {
    display: none !important;
}

/* --- Figma parity pass 2 (May 12, bilateral inventory) ------------------- */

/* (#2) Card width — superseded by the shared `.q88-card` migration at L695.
   The card now fluid-fills the .q88-content area with `margin: 24px 48px`
   (matches the .q88-card rule in components.css), so we no longer cap at
   1568 + auto-center. Leaving the auto-center rule in produced a card that
   drifted far from the sidebar on wide monitors. */

/* (#6) Strip the trailing colon from the "Document:" label. The legacy
   markup ships `<b>Document:</b>` hardcoded — swap via CSS so we don't
   touch the .ascx. Match Figma's regular (not bold) label weight. */
body.page-certificate-detail .modV2SubHeader #divHeader > table b {
    font-size: 0 !important;
    font-weight: 500 !important;
}
body.page-certificate-detail .modV2SubHeader #divHeader > table b::before {
    content: "Document";
    font-size: 13px;
    font-weight: 500;
    /* Hardcode dark slate — --text-muted resolves to legacy #999 here */
    color: var(--text-muted);
    margin-right: 6px;
}

/* (#7) Document dropdown — Figma chip is ~200px wide. Real cert names
   can be long, so 240px keeps both sides happy (chevron stays in
   place, ellipsis kicks in on overflow per the rule we already added).
   Same `.borderRadius`-drop trick — keeps the rule applying after the
   plugin swaps the class on open. */
body.page-certificate-detail .modV2SubHeader .dd.ddcommon {
    width: 240px !important;
    max-width: 240px !important;
}

/* (QEN-8801) Document-name status indicator. The jQuery dd plugin lifts the
   selected <option>'s status image into the trigger as a leading
   `<img class="fnone" src="/images/status/2{Color}.png">`. The colour encodes
   the cert's status — the on-disk palette is 2Green / 2Orange / 2Yellow / 2White
   (e.g. Orange = renewal due, Green = valid, White = none). An earlier pass hid
   it ("Figma chip is text only"), but it carries the same at-a-glance status as
   the Next-Due dot, which the user needs. Show it as a small status dot left of
   the cert name (the .ddTitleText inline-flex already adds a 6px gap to the
   label). Hide only the White (no-status) variant so we don't paint an invisible
   white dot on the card. NOTE: unlike the jqImg / legend dots (CSS-painted from
   tokens), this dot's colour comes from the raster PNG — fine for the current
   light-only theme; unify if a dark theme is introduced. */
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .ddTitleText img.fnone {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0;
}
body.page-certificate-detail .modV2SubHeader .dd.ddcommon .ddTitleText img.fnone[src*="White" i] {
    display: none !important;
}

/* (#26) Tighten the vertical gap below the date grid. Two contributors:
   (a) the legacy ascx renders an empty trailing <tr> we'd already
       sized to 44px via the row-height rule above — hide it;
   (b) shared `.sTbl { margin: 0 0 20px 0 }` adds 20px after every
       table — keep it for most tables but tighten under tblCertDates. */
body.page-certificate-detail table.tblCertDates > tbody > tr:not(.trHdr):not(:has(td:not(:empty))) {
    display: none !important;
    height: 0 !important;
}
body.page-certificate-detail table.tblCertDates {
    margin-bottom: 8px !important;
}

/* (#28/#29) Other Information row — Figma groups the two label+input
   pairs on a single row at the top-left of the section, each input
   ~320px wide so two pairs fit comfortably without stretching to the
   full card width. */
body.page-certificate-detail table.tblCertAttrOther {
    width: auto !important;
    max-width: 1040px;
    margin-right: auto;
}
body.page-certificate-detail .tblCertAttrOther .qDiv {
    /* (B8/B9) Figma input chip is 340.5px on col A, 404.5px on col B — cap at
       340 (col A). width:100% (not fixed 340) keeps the field FLUID so it
       shrinks with its grid column on narrow viewports; a hard 340px here was
       the ~1000px min-content that pushed the card past .q88-content and
       caused the landing-page horizontal scroll (QEN-8831). */
    width: 100% !important;
    max-width: 340px !important;
}

/* (#35) Comments textarea — Figma shows a multi-line textarea ~96px
   tall (3 visible lines) with the placeholder. */
body.page-certificate-detail .modV2Main textarea[id$='_txtComments'],
body.page-certificate-detail .modV2Main #txtComments {
    min-height: 96px !important;
    height: 96px !important;
}

/* (Nested-border artifact) The `.qCal` date-input rule already zeros the
   inner element's border, but `.qDdl` (Window select) and `.qTxt`
   (Other Information text input) kept their own 1px border *inside* the
   qDiv wrapper's 1px border — giving every Window dropdown and every
   Other Info input a visible "input inside an input" look. Zero the
   inner border / bg so only the wrapper renders the chrome. Keep the
   chevron bg-image on `.qDdl` so the dropdown indicator stays. */
body.page-certificate-detail .tblCertDates .qDiv .qDdl,
body.page-certificate-detail .tblCertDates .qDiv select.qDdl {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 4px 28px 4px 4px !important;
}
body.page-certificate-detail .tblCertAttrOther .qDiv .qTxt,
body.page-certificate-detail .tblCertAttrOther .qDiv .qDdl,
body.page-certificate-detail .tblCertAttrOther .qDiv .qTxtConvert {
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    height: 30px !important;
}
/* Keep the chevron on the Other Info dropdowns (if any) — reapply only
   the bg-image, not the border. */
body.page-certificate-detail .tblCertAttrOther .qDiv .qDdl {
    background-image: 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='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 28px !important;
}

/* --- Figma parity pass 3 (May 12, "you missed many more") ---------------- */

/* (Doc→BI gap) The legacy ascx renders the Document row inside an inline
   `<div style="padding: 15px 0px 2px 0px;">`. Trim the inline padding. */
body.page-certificate-detail .modV2SubHeader > div[style] {
    padding: 8px 0 0 0 !important;
}
body.page-certificate-detail table.tblCertDates {
    /* Figma: 16px from Document field bottom (y=172) to Basic Info heading top
       (y=188). Previous 4px was tuned to match a hidden-banner artifact that
       has since been suppressed; bumped to 16 to match the spec. */
    margin-top: 16px !important;
}

/* The REAL culprit for the 27px Doc→BI gap: a hidden message banner table
   inside `#upDetail` has inline `style="height:23px"`. Its inner div
   (`#divMessageDataChanged`) is `display:none` so no text shows, but the
   wrapping table's fixed height still occupies space. Hide the table while
   the message is hidden; the :has() selector re-shows it if JS removes the
   display:none on the inner div. */
body.page-certificate-detail div#upDetail > table:has(#divMessageDataChanged[style*="display: none"]),
body.page-certificate-detail div#upDetail > table:has(#divMessageDataChanged[style*="display:none"]) {
    display: none !important;
    height: 0 !important;
}

/* Button gap — plus + menu are in the same TD with `&nbsp;&nbsp;` text
   nodes between them adding 16px of inline whitespace. Kill all text-node
   whitespace inside that action TD via font-size: 0; the action <a>s use
   their own explicit width/height for icons so they're unaffected. */
body.page-certificate-detail .modV2SubHeader td:has(> a[id$='_lbAddCertificate']),
body.page-certificate-detail .modV2SubHeader td:has(> a.ActionsMenu) {
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: right;
    white-space: nowrap;
}
body.page-certificate-detail .modV2SubHeader a.Img-Std.Img-Std-Add,
body.page-certificate-detail .modV2SubHeader a.Img-Std-Add {
    margin: 0 !important;
}
body.page-certificate-detail .modV2SubHeader a.ActionsMenu {
    margin: 0 0 0 4px !important;
}

/* (Top-right buttons) Border/chrome stripped at the source rules above
   (a.Img-Std-Add and a.ActionsMenu inside .modV2SubHeader) — higher
   specificity meant overrides here didn't apply. Edited in place. */

/* (Date grid column widths) Force table-layout: fixed and explicit col widths */
body.page-certificate-detail table.tblCertDates {
    table-layout: fixed !important;
}
/* Let the Window qDiv fill its (now wider) cell instead of staying 100px */
body.page-certificate-detail .tblCertDates td:nth-child(4) .qDiv {
    width: 100% !important;
    max-width: 100% !important;
}