/* ==========================================================================
   Manage Vessels page (vessel.aspx → VesselManagement.ascx) — full page skin.
   ----------------------------------------------------------------------------
   Scoped via `body.page-vessel-management`. Unlike the Inspections /
   Manage Users / Abbreviations skins this file does NOT layer on top of
   grid.css — VesselManagement.ascx still uses the LEGACY <uc:ModuleTemplate>
   wrapper (.modContainerLarge / .modInnerContainer / .modTLeft / .modTRight)
   and the body grid is an <asp:Repeater> rendering an HTML <table class="StdTable">,
   not the <uc:ModuleTemplateV2> + ASPxGridView combo grid.css was built for.

   So we re-implement the same visual language (white card, soft shadow,
   12px radius, 18px page title, 32px filter pills, teal #0d9488 primary CTA,
   light grid header, hover rows) directly against the legacy class names.
   Design tokens mirror grid.css so the page looks identical to Inspections
   and Manage Users at a glance.
   ========================================================================== */

body.page-vessel-management {
    --q88-grid-fg: #0a0a0a;
    --q88-grid-muted: #f5f5f5;
    --q88-grid-muted-fg: var(--text-muted);
    --q88-grid-placeholder: #737373;
    --q88-grid-border: #e5e5e5;
    --q88-grid-card: #ffffff;
    --q88-grid-primary: var(--primary);
    --q88-grid-primary-hover: var(--button-primary-hover);
    --q88-grid-primary-fg: #ffffff;
    --q88-grid-row-hover: var(--surface-card);
    --q88-grid-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   1. Module wrapper — flatten legacy ModuleTemplate chrome into a clean card.
      .modContainerLarge is a <table>, .modInnerContainer is the <div> inside.
   ========================================================================== */

body.page-vessel-management .modContainerLarge {
    background: var(--q88-grid-card);
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    box-shadow: none;      /* DESIGN.md §5.1 / §16.1 — grid cards are border-only, no shadow */
    font-family: var(--q88-grid-font);
    color: var(--q88-grid-fg);
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    min-width: 0;          /* legacy 960px floor pushes off the sidebar layout */
    margin: 16px 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

/* Inner div carries a navy 1px border in MainWhiteout — neutralise it so the
   only visible edge is the outer card's #e5e5e5 stroke. Same for the alert
   variant (we keep the red stroke off this page; alerts still render via the
   inline lblHdrAlert text). */
body.page-vessel-management .modInnerContainer,
body.page-vessel-management .modInnerContainerIsAlert {
    border: 0 !important;
    background: transparent;
    padding: 16px 20px 20px;
}

/* The above/below decorative bars (modAboveLeft/Right, modBelowLeft/Right)
   ship empty on this page — collapse them so the wrapper has no extra rows. */
body.page-vessel-management .modAboveLeft,
body.page-vessel-management .modAboveRight,
body.page-vessel-management .modBelowLeft,
body.page-vessel-management .modBelowRight {
    display: none;
}

/* ==========================================================================
   2. Title bar — "Manage Vessels" label (left) + action buttons (right).
      Legacy .modTitle uses float layout and wraps two panels (.modTLeft,
      .modTRight). Convert to flex so left/right align on a single 40px row.
   ========================================================================== */

body.page-vessel-management .modTitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    width: 100%;
    background: transparent;
    overflow: visible;     /* legacy `overflow:auto` clips the action pills */
    margin: 0 0 16px 0;
    padding: 0;
    font-size: inherit;    /* legacy 12px gets replaced by per-element sizes */
    font-weight: inherit;
}

body.page-vessel-management .modTLeft,
body.page-vessel-management .modTRight {
    float: none !important;     /* clear legacy float layout */
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: transparent;
}

body.page-vessel-management .modTLeft {
    font-family: var(--q88-grid-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--q88-grid-fg);
    line-height: 28px;
    letter-spacing: 0;
    text-transform: none;
}

body.page-vessel-management .modTRight {
    margin-left: auto;
    /* The .ascx separates the three action LinkButtons with literal
       `&nbsp;&nbsp;&nbsp;&nbsp;` text runs between them. Inside a flex
       container those whitespace runs become anonymous flex items that
       (a) render at the parent font-size, consuming ~25-30px each, and
       (b) sit BETWEEN our 8px container `gap`s — so the visible spacing
       was inconsistent and oversized.
       `font-size: 0` collapses the whitespace items to 0 width; the pill
       children re-set their own 14px font-size. We then halve the
       container gap to 4px because each anonymous 0-width item still
       creates two gap boundaries between successive pills (4px × 2 = 8px
       effective gap, matching the Inspections title bar). */
    font-size: 0;
    gap: 4px;
}

/* ==========================================================================
   3. Action buttons in the title bar.
      The .ascx ships an inline `<style>` rule `.modTRight a { color: #FFF }`
      and MainWhiteout ships `.modTitle a, .modTRight a { color: var(--text-on-brand) }`.
      We need higher specificity to repaint these as page-content links.

      btnAddVessel → primary teal pill (matches the "Create New" CTA on
                     Inspections / "New User" on Manage Users).
      lnkRequestAccess + lnkManageFleet → ghost outline pills.

      All three carry a <uc:ImageManager> icon span inside — we hide it so
      the pill is text-only, matching the new visual language. The icon is
      decorative (the label text already says what the action does).
   ========================================================================== */

body.page-vessel-management .modTRight a,
body.page-vessel-management .modTRight a:link,
body.page-vessel-management .modTRight a:visited,
body.page-vessel-management .modTRight a:hover {
    color: var(--q88-grid-fg);
    text-decoration: none;
}

/* Primary CTA — "Add New Vessel" */
body.page-vessel-management .modTRight a[id$='_btnAddVessel'] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px !important;
    border-radius: 9999px;
    background: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary-fg) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px;
    border: 1px solid var(--q88-grid-primary) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-vessel-management .modTRight a[id$='_btnAddVessel']:hover,
body.page-vessel-management .modTRight a[id$='_btnAddVessel']:focus {
    background: var(--q88-grid-primary-hover) !important;
    border-color: var(--q88-grid-primary-hover) !important;
    color: var(--q88-grid-primary-fg) !important;
}

/* Note — the .ascx wraps each label in <uc:ImageManager> but ImageManager
   renders the label as a direct text node inside the <a> with the icon
   stripped (no <span> wrapper, no <img> after page-load resolution).
   Looking inside btnAddVessel: `<a>Add New Vessel</a>`. So we DON'T inject
   a `::before` label — that would render twice. We just style the pill
   around the existing text node. */

/* Secondary outline pills — Request Access + Manage Fleet */
body.page-vessel-management .modTRight a[id$='_lnkRequestAccess'],
body.page-vessel-management .modTRight a[id$='_lnkManageFleet'] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px !important;
    border-radius: 9999px;
    background: var(--q88-grid-card) !important;
    color: var(--q88-grid-primary) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px;
    border: 1px solid var(--q88-grid-border) !important;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-vessel-management .modTRight a[id$='_lnkRequestAccess']:hover,
body.page-vessel-management .modTRight a[id$='_lnkManageFleet']:hover {
    background: rgba(var(--primary-tint), 0.06) !important;
    border-color: var(--q88-grid-primary) !important;
}

/* ==========================================================================
   4. Filter / search row — table#tblAdmin
      Houses: Company:[dropdown] Go [Admin] | Vessel:[search box] [Search] [Show deleted]
      We strip the legacy borders, neutralise .SubHeaderAdmin (which paints
      a navy band on legacy pages), and re-skin each control to match the
      32px filter-pill language used in grid.css.
   ========================================================================== */

body.page-vessel-management table[id$='tblAdmin'] {
    width: 100%;
    margin: 0 0 16px 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    table-layout: fixed;
}

body.page-vessel-management table[id$='tblAdmin'] tr.SubHeaderAdmin {
    background: transparent !important;
    background-image: none !important;
}

body.page-vessel-management table[id$='tblAdmin'] td {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 8px;
    /* font-family needs no !important: MainWhiteout's
       `body, input, select, textarea, td, form { font-family: var(--font-family) }`
       resolves to the SAME Inter stack on refresh pages (tokens.css rebinds
       --font-family to Inter under body.sidebar-nav), and --q88-grid-font is
       that same Inter stack — so whichever rule wins, the font is Inter.   */
    font-family: var(--q88-grid-font);
    /* Treat plain-text in any filter cell as a label (matches "Company:" /
       "Vessel:" / "Show deleted"). The `.SubHeaderAdmin td` rule in
       Q88Whiteout.css ships `font-weight: bold` (specificity 0,0,2,1) — our
       td rule has higher specificity (0,0,3,1+) so we MUST set font-weight
       explicitly here to keep it from cascading through and bolding every
       free-floating text node in the row.
       Form controls and .LinkButton anchors re-set their own 14px/normal-or-
       500 typography below. */
    font-size: 13px;
    font-weight: 500;
    color: var(--q88-grid-muted-fg);
    vertical-align: middle;
    /* line-height: 32px gives every inline child of the filter cell (text
       nodes "Company:" / "Vessel:" / "Show deleted", form controls, and
       LinkButton anchors) a uniform 32px line box. Without this, the line
       baseline is determined by the tallest natural-baseline element on the
       line, and shorter elements (select, checkbox, raw text) drift down by
       3-11px relative to the LinkButton anchors which are display:inline-flex.
       With line-height locked to 32 + vertical-align: middle on each child
       below, every interactive control + label sits on a single y-axis. */
    line-height: 32px;
}

/* Vertically center every interactive child in the 32px line box. Without
   this, native form controls and labels ride their text baseline while
   LinkButton anchors (display: inline-flex) ride the inline-flex baseline —
   different baselines produce visible shifts of 3-11px. `vertical-align:
   middle` aligns the midpoint of each box to the midpoint of the parent's
   line, making everything land on the same y. */
body.page-vessel-management table[id$='tblAdmin'] select,
body.page-vessel-management table[id$='tblAdmin'] input[type='text'],
body.page-vessel-management table[id$='tblAdmin'] input[type='checkbox'],
body.page-vessel-management table[id$='tblAdmin'] a.LinkButton,
body.page-vessel-management table[id$='tblAdmin'] label {
    vertical-align: middle;
}

/* Native <select> from <Q88:DropDownList> + <input type="text"> →
   identical 32px filter pill. */
body.page-vessel-management table[id$='tblAdmin'] select,
body.page-vessel-management table[id$='tblAdmin'] input[type='text'] {
    height: 32px;
    min-width: 220px;
    padding: 6px 12px;
    background-color: var(--q88-grid-card);
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    color: var(--q88-grid-fg);
    /* font-family — see the td rule above; --q88-grid-font matches what
       MainWhiteout resolves to (Inter) on refresh pages, so no !important. */
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
}

body.page-vessel-management table[id$='tblAdmin'] select {
    /* A native <select> with no explicit width sizes to its WIDEST option.
       cbxCompany's list holds long company names, so the closed control
       ballooned to ~578px — that pushed "Go" out and wrapped the "Admin"
       button onto a second line, staggering the whole filter row. Pin a
       fixed width; the closed control only ever shows the (short) selected
       company, and the option list still expands on open. */
    width: 240px;
    max-width: 100%;
    padding-right: 32px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) 50%;
    background-size: 12px 12px;
    cursor: pointer;
}

body.page-vessel-management table[id$='tblAdmin'] input[type='text'] {
    min-width: 200px;
}

body.page-vessel-management table[id$='tblAdmin'] select:focus,
body.page-vessel-management table[id$='tblAdmin'] input[type='text']:focus {
    border-color: var(--q88-grid-primary);
    outline: 2px solid var(--q88-grid-primary);
    outline-offset: -1px;
}

/* Inline LinkButtons in the filter row — Go / Admin / Search.
   These reuse MainWhiteout's `.LinkButton` which paints a brand-coloured
   solid pill with !important. We override to a clean ghost outline pill so
   the filter row stays light-touch. */
body.page-vessel-management table[id$='tblAdmin'] a.LinkButton {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    /* box-sizing: border-box collapses the 1px borders into the height budget,
       so the visible total height is exactly 32px — matching the
       <select> / <input> rule above (which already uses border-box). Without
       this, the anchor's content-box-sized 32px + 2*1px border rendered at
       34px total, leaving the buttons sticking 1px above the select and
       textbox. */
    box-sizing: border-box;
    height: 32px;
    padding: 0 14px !important;
    border-radius: 8px;
    background: var(--q88-grid-card) !important;
    color: var(--q88-grid-fg) !important;
    border: 1px solid var(--q88-grid-border) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px;
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-vessel-management table[id$='tblAdmin'] a.LinkButton:hover {
    background: var(--q88-grid-row-hover) !important;
    border-color: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary) !important;
}

/* "Show deleted" checkbox + label.
   asp:CheckBox renders as `<input type="checkbox"><label>Show deleted</label>`
   without any wrapper. Native checkbox sits on text baseline (~3px above the
   middle of a 32px control row). Using vertical-align:middle on both pulls
   them onto the same y-axis as the 32px filter pills. */
body.page-vessel-management table[id$='tblAdmin'] input[type='checkbox'] {
    vertical-align: middle;
    margin: 0 4px 0 8px;
}

body.page-vessel-management table[id$='tblAdmin'] input[type='checkbox'] + label,
body.page-vessel-management table[id$='tblAdmin'] label {
    vertical-align: middle;
    color: var(--q88-grid-muted-fg);
    font-size: 13px;
    font-weight: 500;
    margin-left: 0;
}

/* ==========================================================================
   5. Vessel list grid — <asp:Repeater> rendering <table class="StdTable">
      with rows class="GridHeaderLight" / "GridData" and header cells
      class="tableHeader". The .ascx inline <style> block forces
      `.tableHeader { background-color:#4F72A4; position:sticky; top:0 }` —
      we override here on body+table specificity (single class beats single
      class only on declaration order, but adding `body.page-vessel-management`
      gives us 0,0,2,1 > 0,0,1,0 so the navy bar yields).
   ========================================================================== */

body.page-vessel-management .modMain {
    padding: 0;
    background: transparent;
}

body.page-vessel-management .modMain table.StdTable {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    color: var(--q88-grid-fg);
}

/* Header row — light surface, muted-fg, 12px uppercase. Replaces the navy
   #4F72A4 inline rule. */
body.page-vessel-management .modMain table.StdTable tr.GridHeaderLight,
body.page-vessel-management .modMain table.StdTable tr.GridHeader {
    background: transparent !important;
}

body.page-vessel-management .modMain table.StdTable td.tableHeader {
    background-color: var(--q88-grid-muted);
    /* Match the canonical grid.css header (Inspections reference, DESIGN.md §5.3):
       14px / 500 / normal-case / slate-900 fg / 11px 16px pad. Was 12px/600
       uppercase muted — an outlier vs every other refreshed grid page. */
    color: var(--q88-grid-fg);
    /* font-family — see the filter-row td rule; --q88-grid-font matches the
       Inter that MainWhiteout's td rule resolves to on refresh, no !important. */
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    padding: 11px 16px;
    border: 0;
    border-bottom: 1px solid var(--q88-grid-border);
    /* `position: sticky; top: 0` from .ascx is harmless inside a non-scrolling
       container — let it ride. If the Repeater ever wraps in a scroll pane
       we get a free sticky header. */
}

/* First / last header cell — match Figma's outer-edge breathing room. */
body.page-vessel-management .modMain table.StdTable td.tableHeader:first-child {
    padding-left: 20px;
    border-top-left-radius: 8px;
}
body.page-vessel-management .modMain table.StdTable td.tableHeader:last-child {
    padding-right: 20px;
    border-top-right-radius: 8px;
    text-align: center;     /* "Edit" column header */
}

/* Data rows — soft borders, hover highlight, 14px font.
   The Repeater alternates `class="GridData"` with `class="GridDataAlt"`
   automatically (DataList AlternatingItemTemplate behaviour), so EVERY
   selector targeting data rows must list both classes — without it, alt
   rows fall through to the table's `cellpadding="3"` HTML attribute and
   render with 3px padding, shifting the visible left edge of every other
   row. We don't visually distinguish the two classes (no zebra stripe);
   the modern grid look uses uniform white rows + hover highlight.

   IMPORTANT: every row carries an inline `onmouseover="HighLight(this,'')"`
   attribute (defined in /scripts/Script.js) which sets
   `el.style.backgroundColor = '#DFDFDF'` directly on hover. Inline styles
   normally beat author CSS — but **author `!important` beats inline
   styles** in the cascade (CSS Cascading L4 §6.4.4 rule order: author
   !important > inline > author normal). So we mark our hover bg
   `!important` to keep the modern teal-tinted hover instead of the
   legacy grey #DFDFDF the script injects. */
body.page-vessel-management .modMain table.StdTable tr.GridData,
body.page-vessel-management .modMain table.StdTable tr.GridDataAlt {
    background: var(--q88-grid-card) !important;
    transition: background-color 120ms ease;
}
body.page-vessel-management .modMain table.StdTable tr.GridData:hover,
body.page-vessel-management .modMain table.StdTable tr.GridDataAlt:hover {
    background: var(--q88-grid-row-hover) !important;
}

body.page-vessel-management .modMain table.StdTable tr.GridData > td,
body.page-vessel-management .modMain table.StdTable tr.GridDataAlt > td {
    background: transparent;
    color: var(--q88-grid-fg);
    border: 0;
    border-bottom: 1px solid var(--q88-grid-border);
    /* 8px 16px matches grid.css data-cell density (~36px single-line row, the
       §5.4 target) instead of the old 14px (~48px). vertical-align:top is kept
       (not grid.css's `middle`) because this page's Fleet / Companies columns
       wrap to multiple lines — top-align keeps the vessel name level with the
       first line of a multi-line neighbour rather than floating mid-cell. */
    padding: 8px 16px;
    vertical-align: top;
    /* font-family — see filter-row td comment; resolves to the same Inter as
       MainWhiteout's td rule on refresh pages, so no !important needed. */
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
}

body.page-vessel-management .modMain table.StdTable tr.GridData > td:first-child,
body.page-vessel-management .modMain table.StdTable tr.GridDataAlt > td:first-child {
    padding-left: 20px;
}
body.page-vessel-management .modMain table.StdTable tr.GridData > td:last-child,
body.page-vessel-management .modMain table.StdTable tr.GridDataAlt > td:last-child {
    padding-right: 20px;
    text-align: center;
    width: 56px;
}

/* "Registered vessel" star icon next to the vessel name — keep it inline,
   just nudge the spacing a touch. */
body.page-vessel-management .modMain table.StdTable tr.GridData > td:first-child img[id$='_imgOwner'],
body.page-vessel-management .modMain table.StdTable tr.GridDataAlt > td:first-child img[id$='_imgOwner'] {
    margin-right: 6px;
    vertical-align: -1px;
}

/* Edit pencil cell — keep the existing .Img-Std-EditV2 sprite, just centre. */
body.page-vessel-management .modMain table.StdTable tr.GridData > td:last-child input[type='image'],
body.page-vessel-management .modMain table.StdTable tr.GridDataAlt > td:last-child input[type='image'] {
    display: inline-block;
}

/* "Companies with Access" cell renders raw HTML from the database
   (Eval("Access").Replace(",", "<br>")) which can include SVG markers like
   /images/icons/FaviconQ88White.svg whose viewBox carries no intrinsic px
   dimensions — so without an explicit size the browser falls back to the
   300×150 replaced-element default and the marker dwarfs the row. Cap to a
   small inline-icon size so it sits next to the company name. The Publish
   column is hidden on Milbros, so this column is :nth-last-child(2) on both
   portals (Edit is always last). */
body.page-vessel-management .modMain table.StdTable tr.GridData > td:nth-last-child(2) img,
body.page-vessel-management .modMain table.StdTable tr.GridDataAlt > td:nth-last-child(2) img {
    height: 16px;
    width: auto;
    vertical-align: middle;
}

/* The "Companies with Access" cell carries the legacy `nowrap` HTML attribute
   (`<td ... nowrap="nowrap">`). Its content is a comma→<br> list of company
   names; a single long name can't wrap, so the column grew to ~610px and
   forced the whole page-shell (.ContentPane) into horizontal scroll at
   viewports narrower than the 1680 design width. Let long names wrap so the
   grid — and the card — stay within the viewport. */
body.page-vessel-management .modMain table.StdTable tr.GridData > td:nth-last-child(2),
body.page-vessel-management .modMain table.StdTable tr.GridDataAlt > td:nth-last-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==========================================================================
   6. Footer legend (.modFooter2) — "Registered Vessel" key + Top link.
   ========================================================================== */

body.page-vessel-management .modFooter2 {
    background: transparent;
    border-top: 1px solid var(--q88-grid-border);
    margin-top: 8px;
    padding: 12px 4px 0;
    color: var(--q88-grid-muted-fg);
    font-family: var(--q88-grid-font);
    font-size: 13px;
}

body.page-vessel-management .modFooter2 a.LinkButton {
    /* Footer "Top" link — same ghost-outline treatment as the filter buttons. */
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px !important;
    border-radius: 8px;
    background: var(--q88-grid-card) !important;
    color: var(--q88-grid-muted-fg) !important;
    border: 1px solid var(--q88-grid-border) !important;
    font-family: var(--q88-grid-font);
    font-size: 13px;
    font-weight: 500 !important;
    text-decoration: none !important;
    background-image: none !important;
}

body.page-vessel-management .modFooter2 a.LinkButton:hover {
    background: var(--q88-grid-row-hover) !important;
    color: var(--q88-grid-primary) !important;
    border-color: var(--q88-grid-primary) !important;
}

/* ==========================================================================
   7. Edit-Vessel / Publish / Grant-Access dialog FORM BODIES + footer mapping
   --------------------------------------------------------------------------
   VesselManagement.ascx carries FOUR legacy <uc:ModuleTemplate> blocks that
   are NOT the main list module:

     modEditVessel   (pnlEditVessel)  — Edit Vessel form  (no Footer2 of its own)
     modPublish      (pnlEditVessel)  — Publish checkboxes + the SHARED Footer2
                                        for the whole edit flow
                                        (Import HVPQ / Cancel / Delete / Save)
     modGrantAccess  (pnlEditVessel)  — "Companies with access" Repeater list
     modGrantAccessB (pnlGrantAccess) — Grant-Access-to-Company form + Footer2
                                        (Cancel / Delete / Save)

   These are NOT MPE-wrapped popups — pnlEditVessel / pnlGrantAccess render
   INLINE as full-page edit forms (server-side Visible toggle from the list).
   Because they reuse the V1 .modTitle / .modMain / .modFooter2 / .modInner-
   Container class names, sections 1–6 above (written for the list module's
   .modContainerLarge) already strip the legacy navy ribbon + inner border off
   them. BUT §1's white CARD surface (bg / border / radius / shadow) is scoped
   to `.modContainerLarge` only — these four panels use the ModuleTemplate
   DEFAULT wrapper class `modContainerStd` (table#divMod), which §1 never
   targets, so without §7.0 below they render as naked, transparent, borderless
   content floating on the page bg. §7.0 repaints the card.

   What sections 1–6 do NOT cover is the FORM BODY (DESIGN.md §16.8): the text
   inputs / textareas still carry the legacy `2px inset #767676`, `radius:0`,
   `12px`/`21px-tall` chrome; the `.Label` cells render `#0a0a0a`/`12px`/bold;
   and the four Footer2 buttons all collapse to identical ghost pills (Save and
   Delete need teal / red differentiation). The Publish "?" help affordance
   (lbHelp) renders 0×0 EMPTY (ImageManager emits no glyph on Q88 + the link
   has no LabelText) — paint a Lucide circle-help so it is visible + clickable
   (its onclick="ShowHint('hint1')" is already wired; no markup change).

   SCOPE = the four ModuleTemplate panels by id-suffix (naming-container prefix
   `ctl00_cphMiddle_ctl00_…`). ID-scope rather than the body-class `.mod*`
   scope is mandatory here: the body-class .modTitle/.modMain/.modFooter2 rules
   above are shared with the list module, so re-using them would double-apply
   to the list and risk clobbering it. The list grid is NOT ModuleTemplateV2
   (no .modV2*), so the §16.12 `.modContainerStd`-scoped recipe is also unsafe
   (it would match the list-module template too). Mirrors components.css §9.11.

   Literal hex (never var()) on every border / background / button colour: the
   ModuleTemplate is buried under MainWhiteout `!important` shorthands and a
   var() inside a shorthand+!important either drops the next declaration or
   loses the cascade (DESIGN.md §32.2 / §32.3). Longhand border-side plus
   background-color declarations only — no `border:` / `background:` shorthand
   adjacent to other declarations. Palette mirrors the §9.10 resolved tokens:
   slate-200 #e2e8f0,
   text #0f172a, labels slate-600 #475569, teal #0d9488 / #0f766e, red #dc2626
   / #b91c1c, white #ffffff.
   ========================================================================== */

/* Convenience: every rule below is scoped to one of the four panels. The
   `_modEditVessel_`, `_modPublish_`, `_modGrantAccess_`, `_modGrantAccessB_`
   id-suffix selectors are repeated per-rule so the grouping reads clearly. */

/* §7.0 — Card surface. The list module (modVesselManagement) carries
   CSSClass="modContainerLarge" and is painted into a card by §1; these four
   edit panels use the ModuleTemplate DEFAULT wrapper `modContainerStd`
   (table#divMod), which §1 never targets — so they had their navy chrome
   stripped (§1–6) but no card to replace it, rendering as naked transparent
   content. Repaint the four `_divMod` tables with the same white card chrome /
   12px radius / soft shadow as §1. UNLIKE §1's full-width list card, these are
   constrained to ~820px (the old edit-modal footprint) and CENTERED — a
   stretched full-width card wastes the space for a compact label/value form,
   and the page reads as a focused edit panel (the fleet-checkbox row wraps at
   820 just as it did in the legacy modal). max-width:calc(100% - 24px) keeps it
   from overflowing narrow viewports. Scoped by the four id-suffixes (NOT bare
   `.modContainerStd`) so no other default-wrapper template on the page is
   touched. Longhand border-side + background-color (MainWhiteout
   !important-shorthand hazard, DESIGN.md §32.2 / §32.3). */
body.page-vessel-management [id$='_modEditVessel_divMod'],
body.page-vessel-management [id$='_modPublish_divMod'],
body.page-vessel-management [id$='_modGrantAccess_divMod'],
body.page-vessel-management [id$='_modGrantAccessB_divMod'] {
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: #e5e5e5;
    border-radius: 12px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.06),
        0 1px 2px -1px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    width: 820px;
    max-width: calc(100% - 24px);
    margin: 16px auto;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

/* §7.0b — "Grant Access" title-bar action (modGrantAccess card, btnAddAccess).
   §2's `body.page-vessel-management .modTRight { font-size: 0 }` (the whitespace-
   collapse trick for the list module's title pills) is page-global, so it leaks
   onto this sub-card's .modTRight and zeroes the plain <a>Grant Access</a> text
   → the button renders 0×0 invisible (the list pills survive because each re-
   sets its own 14px in §3; this plain link never did). Restore it as a ghost
   outline pill — same language as the list's Request-Access / Manage-Fleet pills
   — so it reads as the card's add action. font-size:14 !important defeats the
   inherited 0. (ImageManager emits no glyph on Q88, so the <a> is text-only —
   no icon gap / <ins> to manage.) */
body.page-vessel-management [id$='_modGrantAccess_divMod'] .modTRight a[id$='_btnAddAccess'] {
    display: inline-flex !important;
    align-items: center;
    height: 32px;
    padding: 0 14px !important;
    border-radius: 9999px;
    background-color: #ffffff !important;
    color: var(--text-link) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #e5e5e5 !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
}
body.page-vessel-management [id$='_modGrantAccess_divMod'] .modTRight a[id$='_btnAddAccess']:hover {
    background-color: rgba(var(--primary-tint), 0.06) !important;
    border-color: var(--primary) !important;
}

/* §7.1 — Form labels (`td.Label`) → slate-600 Inter-14, medium weight. The
   legacy `.Label` is #0a0a0a / 12px / bold / right-aligned; keep the right
   alignment (the form is a 4-col label/value grid) but lift the typography to
   the refresh form-label spec. */
body.page-vessel-management [id$='_modEditVessel_divMod'] td.Label,
body.page-vessel-management [id$='_modPublish_divMod'] td.Label,
body.page-vessel-management [id$='_modGrantAccessB_divMod'] td.Label {
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: #475569 !important;
    vertical-align: middle;
}

/* §7.2 — Text inputs + textareas → §16.8 refresh field: white surface, 1px
   slate-200, 8px radius, 12px h-padding, 36px height (textareas auto-height
   block). Targets the named fields only (id-suffix) so the rule never reaches
   the list module. Longhand border-side + background-color declarations to
   dodge the shorthand var()/!important trap. */
body.page-vessel-management [id$='_modEditVessel_divMod'] input[type='text'],
body.page-vessel-management [id$='_modGrantAccessB_divMod'] input[type='text'] {
    height: 36px;
    box-sizing: border-box;
    padding: 0 12px;
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: #e2e8f0;
    border-radius: 8px;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #0f172a;
    box-shadow: none;
    outline: none;
}

body.page-vessel-management [id$='_modEditVessel_divMod'] textarea,
body.page-vessel-management [id$='_modGrantAccessB_divMod'] textarea {
    display: block;          /* release the legacy cols="20" shrink-wrap */
    box-sizing: border-box;
    min-height: 56px;
    padding: 8px 12px;
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: #e2e8f0;
    border-radius: 8px;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #0f172a;
    box-shadow: none;
    outline: none;
    resize: vertical;
}

body.page-vessel-management [id$='_modEditVessel_divMod'] input[type='text']:focus,
body.page-vessel-management [id$='_modGrantAccessB_divMod'] input[type='text']:focus,
body.page-vessel-management [id$='_modEditVessel_divMod'] textarea:focus,
body.page-vessel-management [id$='_modGrantAccessB_divMod'] textarea:focus {
    border-color: var(--primary);
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

/* §7.2b — Uniform field width + vertical centering for the Edit-Vessel form.
   Two markup quirks broke column alignment (both measured, not assumed):
   (a) `txtVessel` (Vessel name) carries an inline `style="width:200px"`; every
       other text input has no width attr and lands at 225px, so Vessel name
       rendered 25px short of its column. `width:225px !important` is the ONLY
       thing that beats the inline style — without it ALL my prior input rules
       left the 200px untouched (this is the "vessel-name fix did nothing" bug).
       Now every Edit text input shares the 225px DropDownListGrouped/<select>
       width, so left + right columns line up. Scoped to modEditVessel only
       (NOT the shared §7.2 selector) so modGrantAccessB inputs keep their size;
       the Admin Comments <textarea> is excluded (input[type='text'] only).
   (b) the input ROWS rendered 57px tall with inputs off a common center — two
       separate inflators measured in the same shared <tr>:
         - right-column inputs (VIN / ENI / Official Number) each carry a TRAILING
           `<br>` (the left column has none) → a phantom ~20px line in that cell.
           `input[type='text'] + br { display:none }` (ADJACENT-sibling — only a
           <br> immediately after a text input is hit, so structural <br>s
           elsewhere on the form are untouched) drops it.
         - the IMO cell holds an INLINE CustomValidator span ("Invalid IMO number",
           visibility:hidden but IN FLOW) whose line box rode the IMO input 8px
           high. `[id$='_cvIMO'] { position:absolute }` takes it out of flow (auto
           offsets keep its static spot at the input's right edge, so the error
           text still appears in place on failure — it just no longer reserves a
           line). Same out-of-flow trick as §7.4b's `.ValTipRequired`.
       With both gone every row collapses 57px→42px and both inputs center
       (verified: all rows left 1599/1981, width 225, paired cy equal). */
body.page-vessel-management [id$='_modEditVessel_divMod'] input[type='text'] {
    width: 225px !important;
}
body.page-vessel-management [id$='_modEditVessel_divMod'] input[type='text'] + br {
    display: none;
}
body.page-vessel-management [id$='_modEditVessel_divMod'] [id$='_cvIMO'] {
    position: absolute;
}

/* §7.3 — Native <select> (HVPQ Variant). One uniform 225px width + 36px height
   so it sits in the same grouped trio as the two DropDownListGrouped triggers
   (§7.4) and aligns with the text inputs in the same rows. !important beats the
   global select-shim's 32px height. modGrantAccessB selects keep the 36px field
   height only (no width override — its pickers are ComponentArt comboboxes,
   sized in §7.5; forcing 225px there would squash them). */
body.page-vessel-management [id$='_modEditVessel_divMod'] select:not(.Hidden) {
    width: 225px !important;
    height: 36px !important;
    box-sizing: border-box;
}
body.page-vessel-management [id$='_modGrantAccessB_divMod'] select:not(.Hidden) {
    height: 36px;
    box-sizing: border-box;
}

/* §7.4 — Grouped ship-type / classification dropdowns (DropDownListGrouped →
   hidden <select class="Hidden"> + a <dl class="dropDownCusGrp"> widget whose
   visible trigger is the `_sel` anchor). The widget's JS writes an INLINE width
   onto the <dl> + <dt> (derived from each control's Width prop: 154px / 74px),
   which beats both the global components.css §12.5.2 170px default AND any
   non-!important width here — that's why the two grouped dropdowns rendered
   ragged (149px / 69px). Force a uniform 225px on the <dl> + <dt> + trigger
   anchor so Vessel Type / Vessel Size match each other, the plain HVPQ <select>
   (§7.3) and the text inputs. The options panel (<dd>) is content-sized + NOT
   targeted here, so widening the trigger leaves it untouched.
   Two trigger details handled below: (a) keep the global 32px RIGHT padding so
   the long ship-type label truncates (ellipsis) BEFORE the chevron instead of
   overrunning it — `!important` also beats the widget's inline `padding-top:2px`;
   (b) §7.4b takes the `.ValTipRequired` validator tip out of flow. That tip
   reserves a ~16px stacked line (its inner icon span is a fixed-height
   inline-block) which inflated the row to 56px AND — inconsistently between the
   two cells — left Vessel Size 9px above its label. `position:absolute` (auto
   offsets → it keeps its static spot and still shows the error icon, but stops
   reserving a line) collapses the row to the field height so BOTH dropdowns
   center on their labels. Do NOT add `position:relative` to the cell: the Vessel
   Type value cell carries a dormant inline `style="top:100px"` that a positioned
   cell would activate, dropping it 100px. */
body.page-vessel-management [id$='_modEditVessel_divMod'] dl.dropDownCusGrp {
    width: 225px !important;
    box-sizing: border-box;
}
body.page-vessel-management [id$='_modEditVessel_divMod'] dl.dropDownCusGrp > dt {
    width: 225px !important;
    height: 36px !important;
    box-sizing: border-box;
}
body.page-vessel-management [id$='_modEditVessel_divMod'] a[id$='_sel'] {
    height: 36px;
    width: 225px !important;
    min-width: 0 !important;     /* clear the widget's inline min-width:149px */
    box-sizing: border-box;
    /* display:block (NOT the global inline-flex) is REQUIRED for the ellipsis to
       work: on an inline-flex trigger the label is a flex item that overflows
       its box and spills over the chevron (overflow:hidden clips at the padding
       box, not the content box, and text-overflow:ellipsis is a no-op on a flex
       container). As a block, the long ship-type label truncates with an
       ellipsis at the content edge, leaving the 32px chevron gutter clear. */
    display: block;
    line-height: 34px;           /* vertical-center the single line in the 34px content box (36 − 2px border) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 32px 0 12px !important;   /* 32px right = chevron gutter; !important beats the widget's inline padding-top:2px */
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-default);
    border-radius: 8px;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    color: var(--text-primary);
}

/* §7.4b — Validator tip out of flow so the dropdown row collapses to the field
   height and both dropdowns center on their labels (see §7.4 comment, detail b).
   Scoped to the two grouped-dropdown value cells — td.NoPaddingTableCells exists
   ONLY on this row, so text-input validators elsewhere are untouched. No cell
   position:relative (the top:100px trap). */
body.page-vessel-management [id$='_modEditVessel_divMod'] td.NoPaddingTableCells .ValTipRequired {
    position: absolute;
}

/* §7.5 — ComponentArt combobox (Q88:DropDownList → ddlGrantAccessTo /
   ddlAccountAdmin in modGrantAccessB). The widget swaps its wrapper class to
   `.comboBoxHover`/`.comboBoxFocused` on interaction, so target the partial
   class (`table[class*="comboBox"]`) — never bare `.comboBox` (combo-hover
   trap). Lift the input cell to the 36px refresh field look. */
body.page-vessel-management [id$='_modGrantAccessB_divMod'] table[class*='comboBox'] {
    border-collapse: separate;
}
body.page-vessel-management [id$='_modGrantAccessB_divMod'] table[class*='comboBox'] input[type='text'] {
    height: 34px;
    border-width: 0;
    background-color: transparent;
}

/* §7.6 — Transfer-Ownership / Access-level radios (RadioButtonList
   RepeatLayout="Flow" → all <input> + <label> are siblings under ONE wrapper
   span, so the checked-state selector MUST be `input:checked + label`, never
   `:has(input:checked) label`). Native accent-color is already teal globally;
   just give the labels readable Inter-14 + spacing. */
body.page-vessel-management [id$='_modGrantAccessB_divMod'] td label {
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-primary) !important;
    margin-right: 12px;
    vertical-align: middle;
}
body.page-vessel-management [id$='_modGrantAccessB_divMod'] td input[type='radio'],
body.page-vessel-management [id$='_modGrantAccessB_divMod'] td input[type='checkbox'] {
    vertical-align: middle;
    margin-right: 4px;
}
body.page-vessel-management [id$='_modGrantAccessB_divMod'] td input[type='radio']:checked + label {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

/* §7.7 — Publish "?" help affordance. lbHelp renders 0×0 EMPTY on Q88
   (ImageManager emits no glyph + the link has no LabelText). Paint a Lucide
   circle-help glyph via a currentColor mask `::before`; the anchor's
   onclick="ShowHint('hint1')" is already wired, so no markup change. Reuse the
   --icon-circle-help token (slate-500) — mask, NEVER background-image. */
body.page-vessel-management [id$='_modPublish_divMod'] .modTRight a[id$='_lbHelp'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #64748b;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}
body.page-vessel-management [id$='_modPublish_divMod'] .modTRight a[id$='_lbHelp']:hover {
    color: #0f172a;
}
body.page-vessel-management [id$='_modPublish_divMod'] .modTRight a[id$='_lbHelp']::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon-circle-help) no-repeat center / 16px 16px;
            mask: var(--icon-circle-help) no-repeat center / 16px 16px;
}

/* §7.7b — #hint1 help popover: glyph, placement, justified prose.
   The legend table inside is re-built one-row-per-item in the .ascx and the box
   sizes via the global `height:auto` once the inline height:250px is dropped.

   (1) GLYPH — the global components.css ".hint" skin leads with an amber
   AlertTriangle ::before (tuned for Q88Search VALIDATION errors). This is a
   how-to note, not an error, so swap to the slate circle-help glyph that matches
   the §7.7 "?" trigger (same precedent as customfilter.css §14 / #hint2).

   (2) PLACEMENT — the inline style (left:-510px; top:10px) opens the box DOWNWARD
   from the trigger. The Publish card is the LAST card on the page, so the box
   spilled below the fold and read as "cut off". Flip to bottom-anchored so it
   grows UP into the page and stays fully visible (top:auto + bottom beats the
   inline top); max-height + overflow-y is a safety net. The inline left:-510px
   horizontal placement is kept — it already centres the 500px box under the card.

   (3) JUSTIFY — justify the intro prose (the !important beats the inline
   text-align:left), but pin the legend cells back to left: justify on the short
   2-line descriptions would stretch their first line with ugly word gaps. */
body.page-vessel-management #hint1 {
    top: auto !important;
    bottom: 8px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    text-align: justify !important;
}
body.page-vessel-management #hint1 td {
    text-align: left;
}
body.page-vessel-management #hint1::before {
    background-color: #64748b !important;
    -webkit-mask: var(--icon-circle-help) center / 16px 16px no-repeat !important;
            mask: var(--icon-circle-help) center / 16px 16px no-repeat !important;
}

/* §7.8 — Footer2 buttons → §9.10 dialog pills, mapped by CLASS / ROLE (NOT
   last-button-wins). The shared edit-flow footer lives in modPublish
   (lnkImportHVPQ / lnkCancel / lnkEditVesselDelete / lnkEditVesselSave); the
   grant-access footer lives in modGrantAccessB (btnCancelAccess /
   btnDeleteAccess / btnSaveAccess).

   Base = teal primary; .Secondary = ghost; the destructive Delete links get
   the red override below. !important beats MainWhiteout `.LinkButton`. */
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2 a.LinkButton,
body.page-vessel-management [id$='_modGrantAccessB_divMod'] .modFooter2 a.LinkButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px;
    min-width: 64px;
    padding: 0 16px !important;
    border-radius: 8px !important;
    background-color: var(--primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--primary) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
}
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2 a.LinkButton:hover,
body.page-vessel-management [id$='_modGrantAccessB_divMod'] .modFooter2 a.LinkButton:hover {
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
}

/* Ghost: .Secondary (Cancel) + the Import-HVPQ link (a non-primary action that
   carries plain .LinkButton — id-target it so it doesn't read as a 2nd teal
   primary next to Save). */
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2 a.LinkButton.Secondary,
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2 a.LinkButton[id$='_lnkImportHVPQ'],
body.page-vessel-management [id$='_modGrantAccessB_divMod'] .modFooter2 a.LinkButton.Secondary {
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2 a.LinkButton.Secondary:hover,
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2 a.LinkButton[id$='_lnkImportHVPQ']:hover,
body.page-vessel-management [id$='_modGrantAccessB_divMod'] .modFooter2 a.LinkButton.Secondary:hover {
    background-color: var(--surface-muted) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Destructive Delete → red pill (DESIGN.md §16.7) so it reads distinct from
   the teal primary Save. */
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2 a.LinkButton[id$='_lnkEditVesselDelete'],
body.page-vessel-management [id$='_modGrantAccessB_divMod'] .modFooter2 a.LinkButton[id$='_btnDeleteAccess'] {
    background-color: var(--red-600) !important;
    border-color: var(--red-600) !important;
    color: #ffffff !important;
}
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2 a.LinkButton[id$='_lnkEditVesselDelete']:hover,
body.page-vessel-management [id$='_modGrantAccessB_divMod'] .modFooter2 a.LinkButton[id$='_btnDeleteAccess']:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

/* Kill the LinkButton `<ins>&nbsp;</ins>` spacer — invisible in legacy block
   layout, but a flex item under inline-flex that shifts the label off-centre. */
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2 a.LinkButton > ins,
body.page-vessel-management [id$='_modGrantAccessB_divMod'] .modFooter2 a.LinkButton > ins {
    display: none !important;
}

/* §7.9 — Footer2 layout for these two form footers: strip any residual band,
   right-align the pill cluster with a 12px gap. modPublish's footer has a
   left-floated Import-HVPQ wrapper <div> — neutralise the float so the buttons
   sit in one flex row (Import on the left, Cancel/Delete/Save on the right). */
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2,
body.page-vessel-management [id$='_modGrantAccessB_divMod'] .modFooter2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    background: transparent;
    border-top: 1px solid #e5e5e5;
    margin-top: 8px;
    padding: 12px 4px 0;
}
body.page-vessel-management [id$='_modPublish_divMod'] .modFooter2 > div {
    float: none !important;
    margin-right: auto;          /* push Import HVPQ to the far left */
    width: auto !important;
}

/* §7.10 — Checkbox captions. asp:CheckBox / CheckBoxList emit <input><label>;
   the labels (cblFleet fleet names in modEditVessel + the publish toggles in
   modPublish) already inherit Inter but render at the legacy 12px / #0a0a0a —
   lift to the refresh 14px / slate-900 so they match the form body and the
   modGrantAccessB checkbox/radio labels (§7.6). A bare `label` scope is safe:
   the only <label> elements inside these two panels are checkbox captions (the
   form's field labels are <td class="Label">, not <label>). */
body.page-vessel-management [id$='_modEditVessel_divMod'] label,
body.page-vessel-management [id$='_modPublish_divMod'] label {
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--text-primary) !important;
    vertical-align: middle;
}
body.page-vessel-management [id$='_modEditVessel_divMod'] input[type='checkbox'],
body.page-vessel-management [id$='_modPublish_divMod'] input[type='checkbox'] {
    vertical-align: middle;
    margin-right: 4px;
}

/* §7.11 — Fleet checkboxes + Admin Comments span BOTH value columns. Their value
   cells already carry colspan=3 (full form width, right edge level with the card
   content edge), but the CONTENT is hard-capped at 500px in the markup: the Fleet
   CheckBoxList renders as <span id$='_cblFleet' style="display:inline-block;
   width:500px"> and the Admin Comments <textarea> ships inline width:500px. Both
   stopped ~107px short of the right column, so the checkboxes wrapped early (3
   lines) and the comments box didn't reach the right edge. width:100% !important
   beats the inline 500px so both span across both columns. Two different right
   edges on purpose:
   - Fleet CheckBoxList (`_cblFleet`): width:100% fills the colspan cell (right
     ~2227). It's a TRANSPARENT inline-block container — the checkboxes wrap at
     ≤2204 (level with the right column), so the full-cell width is invisible and
     gives the checkboxes the most room. Inline display:inline-block left alone
     (fills the cell at width:100% identically to block).
   - Admin Comments <textarea>: a VISIBLE bordered box, so its right edge must
     line up with the right-column fields (VIN / ENI / Official Number end at the
     same x). Filling the cell (width:100% → 2227) overhangs those fields by 21px
     — the colspan cell extends that far past the 225px right-column field. So
     pull it back with `calc(100% - 21px)` → right edge meets the right column
     (verified: 1599→2206, exactly level with the fields above). The 21px is the
     cell's overhang past the field edge, stable for the fixed-width (820px) card.
   Same inline-width trap as §7.2b's txtVessel. */
body.page-vessel-management [id$='_modEditVessel_divMod'] [id$='_cblFleet'] {
    width: 100% !important;
}
body.page-vessel-management [id$='_modEditVessel_divMod'] textarea {
    width: calc(100% - 21px) !important;
}

/* §7.11b — center the "Admin Comments:" label on the textarea. The value cell
   holds a hidden "Required" CustomValidator (`_cvAdminNotes`, visibility:hidden
   but IN FLOW) on its own line below the textarea, inflating the cell to 76px;
   the valign:middle label then centered on the 76px cell (cy 432) — 7px BELOW the
   textarea's center (425). Take the validator out of flow (position:absolute, auto
   offsets keep its static spot below the textarea so "Required" still shows there
   on failure) → the cell collapses to the textarea height and the label centers on
   the textarea (verified: label cy == textarea cy). Same out-of-flow trick as
   §7.2b's cvIMO / §7.4b's ValTipRequired. */
body.page-vessel-management [id$='_modEditVessel_divMod'] [id$='_cvAdminNotes'] {
    position: absolute;
}

/* ==========================================================================
   8. MPE popups — Vessel Transfer + Delete Vessel Request
   --------------------------------------------------------------------------
   Two ajaxToolkit:ModalPopupExtender popups whose PopupControlID is a hidden
   <asp:Panel class="ModuleContainer"> built from a RAW HTML <table> — NOT a
   <uc:ModuleTemplate> and NOT a <uc:Modal>. So neither the global
   components.css §9.10 .modPopPnl chrome NOR the §16.12 .modContainerStd recipe
   reaches them: they ship hardcoded legacy blue (#E5F1FD body, #C9E2FC footer,
   #DBDBDB dividers) with white-on-blue (illegible) titles.

     pnlModInput      (mpeModInput)      — "Vessel Transfer"       (≈450px)
     pnlDeleteRequest (mpeDeleteRequest) — "Delete Vessel Request" (≈550px)

   They literally carry `<td class="modTitle">` (+ Delete-Request a
   `<td class="modFooter2">`), so sections 2 + 6 above (the LIST module's
   bare-class rules) already LEAK onto them: the title inherits flex + white
   text, and the Delete-Request footer buttons collapse to ghost "Top-link"
   pills (Submit reads as non-primary). This block repaints both popups into the
   §9.10 dialog language AND corrects those leaks.

   SCOPE = the two panels by id-suffix. Literal hex (never var()) on border / bg
   / button colours — same MainWhiteout !important-shorthand hazard as §7
   (DESIGN.md §32.2 / §32.3). Close X: <uc:ImageManager ImageIcon="Close"> emits
   NO glyph on Q88 (PortalId 0/1/2) so the title <a> is 0×0 — paint a Lucide x
   via ::before; the anchor's onclick (HideModalInputPopup /
   ShowModal('mpeDeleteRequest',false)) is already wired in markup, no change.
   ========================================================================== */

/* §8.1 — Outer card. The .ModuleContainer <div> is the card surface: release
   the fixed inline height so the refreshed padding drives it, paint white
   chrome + 12px radius + shadow, clip the corners. */
body.page-vessel-management [id$='_pnlModInput'],
body.page-vessel-management [id$='_pnlDeleteRequest'] {
    height: auto !important;
    min-height: 0 !important;
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: #e2e8f0;
    border-radius: 12px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -2px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    box-sizing: border-box;
    font-family: var(--q88-grid-font);
}

/* Inner <table> carries the legacy #E5F1FD fill + a forced 100% height — drop
   both; the cells own all the padding now. */
body.page-vessel-management [id$='_pnlModInput'] > table,
body.page-vessel-management [id$='_pnlDeleteRequest'] > table {
    height: auto !important;
    width: 100%;
    background-color: transparent !important;
    border: 0;
    border-collapse: collapse;
}

/* §8.2 — Title bar (td.modTitle). Section 2 leaks flex + white text; repaint to
   a 16/16/12 dark-on-white header row. box-sizing:border-box so the 16px side
   padding stays inside the clipped card. */
body.page-vessel-management [id$='_pnlModInput'] td.modTitle,
body.page-vessel-management [id$='_pnlDeleteRequest'] td.modTitle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* gap:0 + margin-left:auto on the close wrapper (§8.3) left-aligns the title
       on BOTH popups: Transfer is a bare text node (2 flex items) while
       Delete-Request wraps its title in a float:left <div> (3 items) — plain
       space-between would shove Delete's title to the centre. */
    gap: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 16px 16px 12px;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    font-family: var(--q88-grid-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

/* §8.3 — Close X. The title <a> renders empty (ImageManager emits no glyph on
   Q88). Neutralise the legacy fixed-height float wrapper <div>, size the anchor,
   and paint a Lucide x mask — onclick is already wired in markup. */
body.page-vessel-management [id$='_pnlModInput'] td.modTitle > div,
body.page-vessel-management [id$='_pnlDeleteRequest'] td.modTitle > div {
    float: none !important;
    height: auto !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}
/* The close-X wrapper is always the last child div — push it to the far right
   so the title stays left-aligned regardless of the 2-item vs 3-item markup. */
body.page-vessel-management [id$='_pnlModInput'] td.modTitle > div:last-child,
body.page-vessel-management [id$='_pnlDeleteRequest'] td.modTitle > div:last-child {
    margin-left: auto;
}
body.page-vessel-management [id$='_pnlModInput'] td.modTitle a,
body.page-vessel-management [id$='_pnlDeleteRequest'] td.modTitle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #64748b;
    text-decoration: none;
    cursor: pointer;
}
body.page-vessel-management [id$='_pnlModInput'] td.modTitle a:hover,
body.page-vessel-management [id$='_pnlDeleteRequest'] td.modTitle a:hover {
    color: var(--text-primary);
    background-color: var(--surface-muted);
}
body.page-vessel-management [id$='_pnlModInput'] td.modTitle a::before,
body.page-vessel-management [id$='_pnlDeleteRequest'] td.modTitle a::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon-x) no-repeat center / 16px 16px;
            mask: var(--icon-x) no-repeat center / 16px 16px;
}

/* §8.4 — Body cells (everything that is NOT the title or footer cell). Even out
   padding, lift typography to Inter-14 slate-600, drop the legacy #DBDBDB
   dividers. The Vessel-Transfer footer cell carries no .modFooter2 class — it
   is the align="right" cell, excluded here and handled in §8.5. */
body.page-vessel-management [id$='_pnlModInput'] > table td:not(.modTitle):not([align="right"]),
body.page-vessel-management [id$='_pnlDeleteRequest'] > table td:not(.modTitle):not(.modFooter2) {
    box-sizing: border-box;
    padding: 4px 16px 12px;
    background-color: transparent !important;
    border-bottom: 0 !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
}
/* The transfer prompt message reads as the dialog's primary body copy. */
body.page-vessel-management [id$='_pnlModInput'] #divPromptMsg,
body.page-vessel-management [id$='_pnlModInput'] #divPromptMsg strong {
    color: #0f172a;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
}
/* Vessel-Transfer inline "Admin Comments:" label → its own slate-600 line. */
body.page-vessel-management [id$='_pnlModInput'] td strong {
    display: block;
    color: #475569;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500;
}
/* Soften the Delete-Request pure-Red instruction to the refresh destructive red
   (the inline style="color:Red" is otherwise harsh #f00 on the new white card). */
body.page-vessel-management [id$='_pnlDeleteRequest'] span[style*="color:Red"] {
    color: #dc2626 !important;
    font-weight: 500;
}

/* §8.5 — Footer cell layout: strip the legacy blue band, flex-end pill cluster.
   Vessel-Transfer footer = the align="right" cell (no class); Delete-Request
   footer = td.modFooter2 (overrides the §6 list-footer leak). */
body.page-vessel-management [id$='_pnlModInput'] > table td[align="right"],
body.page-vessel-management [id$='_pnlDeleteRequest'] td.modFooter2 {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
    padding: 12px 16px 16px;
    background-color: transparent !important;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #e5e5e5;
}
/* Delete-Request wraps its buttons in a float:right <div> — flatten to a flex
   cluster so the 12px gap applies between Cancel and Submit. */
body.page-vessel-management [id$='_pnlDeleteRequest'] td.modFooter2 > div {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* §8.6 — Footer buttons → §9.10 dialog pills, mapped by class: base = teal
   primary (Save / Submit), .Secondary = ghost (Cancel). !important beats both
   MainWhiteout .LinkButton and the §6 footer-link leak. */
body.page-vessel-management [id$='_pnlModInput'] a.LinkButton,
body.page-vessel-management [id$='_pnlDeleteRequest'] a.LinkButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px;
    min-width: 64px;
    padding: 0 16px !important;
    border-radius: 8px !important;
    background-color: var(--primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--primary) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
}
body.page-vessel-management [id$='_pnlModInput'] a.LinkButton:hover,
body.page-vessel-management [id$='_pnlDeleteRequest'] a.LinkButton:hover {
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
}
body.page-vessel-management [id$='_pnlModInput'] a.LinkButton.Secondary,
body.page-vessel-management [id$='_pnlDeleteRequest'] a.LinkButton.Secondary {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}
body.page-vessel-management [id$='_pnlModInput'] a.LinkButton.Secondary:hover,
body.page-vessel-management [id$='_pnlDeleteRequest'] a.LinkButton.Secondary:hover {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
/* Kill the LinkButton <ins>&nbsp;</ins> spacer (a flex item that shifts the
   label off-centre under inline-flex). */
body.page-vessel-management [id$='_pnlModInput'] a.LinkButton > ins,
body.page-vessel-management [id$='_pnlDeleteRequest'] a.LinkButton > ins {
    display: none !important;
}

/* §8.7 — Textareas → §16.8 field. Release the legacy 2px inset + fixed inline
   width/height; block-level, fill the cell, min-height floor (min-height beats
   the inline height attr, so the transfer textbox's height="30" still clears). */
body.page-vessel-management [id$='_pnlModInput'] textarea,
body.page-vessel-management [id$='_pnlDeleteRequest'] textarea {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    min-height: 64px;
    margin-top: 6px;
    padding: 8px 12px;
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-default);
    border-radius: 8px;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--text-primary);
    box-shadow: none;
    outline: none;
    resize: vertical;
}
body.page-vessel-management [id$='_pnlModInput'] textarea:focus,
body.page-vessel-management [id$='_pnlDeleteRequest'] textarea:focus {
    border-color: var(--primary);
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}