/* ==========================================================================
   Vessel-Questionnaire Compare (QuestionnaireCompare.aspx)
   ----------------------------------------------------------------------------
   Scoped via `body.page-vessel-compare`. Shared card chrome (modV2 frame,
   title rail, primary CTA pill) comes from grid.css via the `body.page-grid`
   co-class set in Default.Master.cs.

   .ascx structure (DesktopModules/Q88/QuestionnaireCompare.ascx):
     <uc:ModuleTemplateV2 id="modSelect">      — initial selection view
       <Title>     → "Vessel-Questionnaire Compare"
       <SubHeader> → FleetVessel + QuestionnaireSelector + chkShowIgnoredQuestions
       <Main>      → chkVessels CheckBoxList (RepeatColumns="6") + validators
       <Footer>    → lnkShow LinkButton ("Continue")

     <uc:ModuleTemplateV2 id="modAnswer">      — comparison grid view
       <Title>     → "Vessel-Questionnaire Compare for {questionnaireName}"
       <SubHeader> → lnkExport (Excel, right-aligned)
       <Main>      → gvTest Q88:GridView (CssClass="sTbl", up to 10 vessel cols
                     + Other + Ignore). Inline page <style> in the ascx forces
                     navy header (.GridHeader bg #2d3663) — overridden here.
       <Footer>    → ltLegend (left) + lnkCancel + lnkSave (right)

     <table id="tblBanner">                    — dismissible info card,
                                                 shown until cookie set.

   Figma reference: pdLLyUsUxvfLP19TYN3oqw
     1:20940  — main archive layout (white card, slate border, filter row,
                table with 4 vessel cols visible + horizontal scroll)
     14:51633 — secondary archive layout variant (table only)
     3:8455   — Alert Dialog "Compare sister vessels" (Inter SemiBold 18 title,
                Inter 14 muted description, Cancel ghost + Continue teal pill).
                Used as the visual recipe for the dismissible #tblBanner.

   Tokens: Inter, base/foreground #0f172a, base/muted-foreground #475569,
   base/border #e2e8f0, base/primary #0d9488 (teal-600), primary-hover
   #0f766e (teal-700), border-radius 8px, shadow-lg (10px y + 4px y stack).

   `!important` is required throughout because:
   - MainWhiteout.css ships a global `body, input, select, td { font-family }`
     rule (Tahoma) that wins via cascade order otherwise.
   - The ascx ships an inline <style> block (.GridHeader / .GridData / .modV2*
     resets) which is page-scope-less but loads after this file in source
     order. Without !important here the inline rules win on plain element
     selectors. Same discipline createQuestionnaire.css / archive.css use.
   ========================================================================== */


/* ==========================================================================
   1. Title bar — "Vessel-Questionnaire Compare" / "...for {name}"
      Both modSelect and modAnswer render <asp:Literal>/text directly inside
      ModuleTemplateV2's <Title>, which lands in pnlTitleLeft (.modV2Title).
      grid.css already sizes this to 16px; Figma 1:20940 → text "Vessel
      Compare" is 18/24 Inter SemiBold.
   ========================================================================== */
body.page-vessel-compare [id$='_pnlTitle'] {
    flex-wrap: nowrap !important;
}

body.page-vessel-compare [id$='_modSelect_pnlTitleLeft'].modV2Title,
body.page-vessel-compare [id$='_modAnswer_pnlTitleLeft'].modV2Title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #0f172a !important;
    letter-spacing: 0;
    text-transform: none;
    padding: 0 !important;
}

/* No TitleRight strip on this page — hide the empty container so it can't
   push the title row taller. */
body.page-vessel-compare [id$='_pnlTitleRight'] {
    display: none !important;
}


/* ==========================================================================
   2. SubHeader filter row (modSelect)
      Markup:
        <div style="padding:3px;">
          <span id="spanFleet">&nbsp;<b>Fleet:</b>
            <FV:FleetVessel ShowVessel="false" />        → renders <select id=...dlFleet>
          </span>
          <span id="spanChapter">
            <uc:QuestionnaireSelector />                  → ddlQuestionnaireType <select>
                                                            + <asp:Label>Questionnaire:</asp:Label>
                                                            + cbQuestionnaire ComboBox wrapper
                                                            + ddlQuestionnaire <select>
          </span>
          &nbsp;
          <asp:CheckBox id="chkShowIgnoredQuestions" Text="Show All Questions" />
        </div>

      Goal (Figma 1:20940 Frame 3): single horizontal row, label LEFT of each
      input pair, gap 12px between pairs, 16px breathing-room from the right
      edge to the "Show all questions" checkbox. The legacy <b>Fleet:</b> /
      <b>Questionnaire:</b> bold tags stay (translated via CSS to Inter 14
      muted slate).

      The SubHeader's <asp:Label id="lblQuestionnaire"> from
      QuestionnaireSelector.ascx renders bold "Questionnaire:" — restyle.

      The ComboBox wrapper renders an outer <span> containing the autocomplete
      <input>. components.css already covers the native <select> chrome under
      body.sidebar-nav (32px height, 8px radius, slate border, teal focus).
   ========================================================================== */
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] > div {
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: #0f172a;
}

/* spanFleet / spanChapter become inline-flex pill groups carrying their
   own label + input. Strip the legacy leading &nbsp; via negative margin. */
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] #spanFleet,
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] [id$='spanFleet'],
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] #spanChapter,
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] [id$='spanChapter'] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

/* Legacy <b>Fleet:</b> / <b>Questionnaire:</b> labels — neutralize the bold
   black weight, render as the 14/20 muted slate label from Figma. The
   QuestionnaireSelector also renders <asp:Label id="lblQuestionnaire"><b>
   Questionnaire:</b></asp:Label> which becomes <span id="..._lblQuestionnaire">
   <b>Questionnaire:</b></span> — same treatment. */
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] b,
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] [id$='_lblQuestionnaire'] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    line-height: 20px !important;
    white-space: nowrap;
}

/* The QuestionnaireSelector also emits a <asp:Label>'s inner <b>; the outer
   span gets the bold treatment above and we need to override the inner
   bold tag color too (otherwise its child <b> stays #0f172a/700). */
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] [id$='_lblQuestionnaire'] b {
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

/* "Show All Questions" checkbox — asp:CheckBox actually renders as two
   sibling flex items at the top level of the filter row: a raw <input> and
   a <label> (no wrapper span like CheckBoxList items get). Push the input
   to the right end via margin-left:auto AND tighten the gap to the label so
   the pair reads as one control.

   Specificity gotcha: the more-specific input[type=checkbox][id$=...] rule
   below sets margin/accent/size, so any `margin: 0` shorthand here would
   silently clobber the auto-margin. Set margin via explicit `margin-left:
   auto` on both selectors and use `margin-top/right/bottom: 0` longhand on
   the chrome rule. */
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] > div > input[type='checkbox'][id$='_chkShowIgnoredQuestions'] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: auto !important;
    flex-shrink: 0;
    align-self: center;
}

body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] > div > label[for$='_chkShowIgnoredQuestions'] {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-left: 6px;
    align-self: center;
}


/* ==========================================================================
   3. Main — vessel checkbox list (modSelect)
      asp:CheckBoxList with RepeatColumns="6" renders as
      <table><tr><td>checkbox+label</td>×6</tr>...</table>.
      Reset the legacy table density to a CSS grid that gives each vessel
      its own breathing room. Mirrors the "select vessels" picker pattern
      from Figma but kept as plain checkboxes (no chip surface) so the
      legacy ListItem disabled/permissionID attributes still read.

      `.warning` row carries "vessels are identical" / "read-only access"
      messages — re-skin as a muted-red alert pill, centered.
   ========================================================================== */
body.page-vessel-compare [id$='_modSelect_pnlMain'] {
    background: transparent !important;
    padding: 0 !important;
}

/* The ascx wraps the CheckBoxList in <table border="0" width="100%"
   cellpadding="3"><tr id="trVessel"><td>...</td></tr></table>. Reset that
   outer scaffold so it doesn't add its own padding/border rendering. */
body.page-vessel-compare [id$='_modSelect_pnlMain'] > table {
    border-spacing: 0;
    border: 0;
    width: 100%;
}

body.page-vessel-compare [id$='_modSelect_pnlMain'] > table > tbody > tr > td {
    padding: 0;
    border: 0;
}

/* The CheckBoxList renders as <table id="..._chkVessels"> with RepeatColumns="6".
   Each cell contains a <span p="N"> wrapper (codebehind adds the permission
   attribute via li.Attributes.Add("p", ...) which switches ASP.NET to a span
   wrapper around the input + label, instead of bare siblings). That inline
   <span> is the actual flex parent we need to control — putting gap on the
   <td> only spaces the single span child, not the input vs label. */
body.page-vessel-compare [id$='_chkVessels'] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 12px;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px 0;
}

body.page-vessel-compare [id$='_chkVessels'] > tbody,
body.page-vessel-compare [id$='_chkVessels'] > tbody > tr {
    display: contents !important;
}

body.page-vessel-compare [id$='_chkVessels'] > tbody > tr > td {
    display: block !important;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    background: transparent;
    line-height: 1;
}

/* The real card surface is the inner <span>. Some cells render the input +
   label directly (without the span wrapper) when no `p` attribute is set —
   target both shapes via a single rule using `:is`. */
body.page-vessel-compare [id$='_chkVessels'] > tbody > tr > td > span,
body.page-vessel-compare [id$='_chkVessels'] > tbody > tr > td {
    /* second selector kept as a fallback for cells without a span wrapper —
       neutralised above via display:block + padding:0 + border:0, so any
       styling here only applies when a real <span> exists */
}

body.page-vessel-compare [id$='_chkVessels'] > tbody > tr > td > span {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px;
    background-color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: #0f172a;
    line-height: 1.4;
    min-height: 44px;
    box-sizing: border-box;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

body.page-vessel-compare [id$='_chkVessels'] > tbody > tr > td > span:hover {
    border-color: #94a3b8 !important;
    background-color: #f8fafc;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

body.page-vessel-compare [id$='_chkVessels'] > tbody > tr > td > span:has(input[disabled]) {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: #f8fafc;
}

body.page-vessel-compare [id$='_chkVessels'] > tbody > tr > td > span:has(input:checked) {
    border-color: var(--primary) !important;
    background-color: #f0fdfa;
    box-shadow: 0 0 0 1px var(--primary) inset;
}

body.page-vessel-compare [id$='_chkVessels'] input[type='checkbox'] {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    margin: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
}

body.page-vessel-compare [id$='_chkVessels'] label {
    cursor: pointer;
    color: inherit;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    margin: 0;
    padding: 0;
    display: inline-block;
}


/* ----- Validators ("Select between 2 to 10 Vessels", "vessels are identical")
   The ListControlRequiredFieldValidator + FleetVessel rfvdlVessel render
   <span class="ValHighlight"> in red. Initial render state: ASP.NET emits
   inline `style="display:none;"` on the host span (Display="Dynamic"). The
   span only gets that inline style stripped once client-side validation
   runs on a submit attempt and the field is invalid.

   CRITICAL: do NOT put `!important` on the display declaration. With
   !important, inline-flex would override the framework's inline `display:none`
   on initial render → "SELECT FLEET" / "SELECT VESSEL" badges leak onto the
   fresh form even before the user clicks Continue. Same trap was hit on
   QEN-8656 Create Questionnaire (commit f55db789) and resolved the same way.
   Without !important, inline style beats stylesheet by specificity, so the
   span stays hidden until the framework strips its inline hide on invalid
   submit, then our inline-flex paints the red alert pill.

   Re-skinned as a muted red alert pill (Figma "Alert/Destructive" recipe). ----- */
body.page-vessel-compare .ValHighlight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 6px;
    color: #b91c1c !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-top: 8px;
}

body.page-vessel-compare [id$='_modSelect_pnlMain'] tr#trWarning td.warning,
body.page-vessel-compare [id$='_modSelect_pnlMain'] tr#trHasAccess td.warning {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px;
    padding: 16px !important;
    color: #b91c1c !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    margin: 16px 0;
}

body.page-vessel-compare [id$='_modSelect_pnlMain'] tr#trWarning td.warning hr {
    display: none;
}

/* QuestionnaireSelector validators (cvQuestionnaire + rfvQuestionnaire) live in
   the modSelect SubHeader and ship their ErrorMessage as an inline
   <img class="ValImage" src="/images/icons/alertVal.png" title="..."> — the
   legacy yellow caution triangle visible in the screenshot. Same swap
   pattern as createQuestionnaire.css §273-312: swap the bitmap for a 14px
   Lucide AlertCircle (red) via CSS `content:` on the img, and re-skin the
   host span as a flex chip so the icon sits inline with the field.
   Display="Dynamic" → inline style="display:none;" until submit fails, so
   NO !important on `display` (see the .ValHighlight rule above for the
   same trap). Scoped to the modSelect SubHeader so we don't collide with
   the FleetVessel rfvdlVessel validator already styled via .ValHighlight. */
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] span.ValRequiredField {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 0 6px;
    color: #dc2626 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: none !important;
    vertical-align: middle;
}
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] span.ValRequiredField img.ValImage {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
    width: 14px !important;
    height: 14px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
}
/* The Questionnaire field has TWO chained validators (cvQuestionnaire +
   rfvQuestionnaire) — both render with the same ValImage. Hide the
   second so we don't double-stamp the icon next to the field. */
body.page-vessel-compare [id$='_modSelect_pnlSubHeader'] span.ValRequiredField ~ span.ValRequiredField {
    display: none !important;
}


/* ==========================================================================
   4. Footer (modSelect) — primary "Continue" button.
      grid.css already paints `.LinkButton` as a teal pill on body.page-grid;
      we just need to clear modSelect's inline `padding:3px` div wrapper.
   ========================================================================== */
body.page-vessel-compare [id$='_modSelect_pnlFooter'] {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 16px 0 0 0 !important;
    display: flex;
    justify-content: flex-end;
}

body.page-vessel-compare [id$='_modSelect_pnlFooter'] > div {
    padding: 0 !important;
}


/* ==========================================================================
   5. SubHeader (modAnswer) — Excel Export button, right-aligned.
   ========================================================================== */
body.page-vessel-compare [id$='_modAnswer_pnlSubHeader'] {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
}

body.page-vessel-compare [id$='_modAnswer_pnlSubHeader'] > div {
    text-align: right;
}

body.page-vessel-compare [id$='_modAnswer_pnlSubHeader'] a.linkWHover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    /* Border same hue as background so the button reads as a flat light
       chip per Figma (no visible outline against the slate-50 surface).
       Resting `#f8fafc` = slate-50 (very light grey, almost white); hover
       bumps to `#f1f5f9` = slate-100 for a subtle interactive cue. */
    border: 1px solid #f8fafc;
    border-radius: 6px;
    background-color: #f8fafc;
    /* Pure black per Figma — the legacy `.linkWHover` ships color: #003366
       (navy) which leaks via MainWhiteout.css without !important. */
    color: #000000 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

/* Export-button icon — the .ascx mounts a <uc:ImageManager ImageIcon="Excel">
   inside the LinkButton, but the legacy ImageManager renders nothing visible
   in the modAnswer flow (rendered DOM is literally `<a class="linkWHover">
   Export</a>` — no <img>). Inject a Lucide Download glyph via `::before`
   so the button reads as "[↓] Export" matching the Figma "All Hands Concept
   Q88" pattern (small grey icon + label for secondary actions in the
   refresh-page toolbar). Slate-500 stroke (#64748b) keeps it muted vs the
   teal primary actions. 16×16 SVG sits flush in the existing flex+gap
   container, so no width/padding adjustments are needed on the link. */
body.page-vessel-compare [id$='_modAnswer_pnlSubHeader'] a.linkWHover::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-color: #64748b;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") no-repeat center / 16px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") no-repeat center / 16px;
}

body.page-vessel-compare [id$='_modAnswer_pnlSubHeader'] a.linkWHover:hover {
    background-color: #f1f5f9;
    border-color: #f1f5f9;
}
body.page-vessel-compare [id$='_modAnswer_pnlSubHeader'] a.linkWHover:hover::before {
    background-color: #475569;
}


/* ==========================================================================
   6. Comparison table (modAnswer Main / gvTest.sTbl)
      The ascx ships an inline <style> with:
        .GridDataAlt td, .GridData td { background-color:#fff; border-bottom:1px solid #f7f7f7; }
        .GridHeader { background-color:#2d3663; border: 1px solid #fff !important; ... }
      Override both: slate-50 header, slate-200 row separators, alternating
      slate-50/white data rows, 42px row height, 48px header height.
      Vessel columns inherit ItemStyle-Width="150px" from the ascx; we just
      tighten typography + sticky-header visuals so it matches Figma rows.
   ========================================================================== */
body.page-vessel-compare [id$='_modAnswer_pnlMain'] {
    background: transparent !important;
    padding: 0 !important;
    /* horizontal scroll for >6 vessels — table itself can be wider than the card. */
    overflow-x: auto;
    /* Override the legacy `fixedHeader({ height: 370 })` jQuery plugin call on
       QuestionnaireCompare.ascx:35: the plugin clamps this panel to 370px and
       forces an internal scrollbar. The .ascx already skips the call when
       body.page-vessel-compare is present (see the !document.body.classList
       check there), but we add `height: auto` and `max-height: none` here as
       belt-and-braces so any other DOM-mutation path (e.g. plugin-applied
       inline style on a wrapper div) gets neutralised. */
    height: auto !important;
    max-height: none !important;
}

/* The inline .modV2Main div { border:none!important; } rule strips the
   table border helpers; we re-emit them at the cell level below. */

body.page-vessel-compare table.sTbl {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px;
    /* No `overflow: hidden` — it breaks `position: sticky` on the thead because
       the rounded-corner clip becomes the closest scroll/clip ancestor and
       prevents the sticky thead from following the viewport scroll. We accept
       a tiny pixel-corner visual seam at the top-left/right of the header
       (acceptable for slate-50 on white). */
    overflow: visible;
    width: 100%;
    /* `table-layout: auto` (the browser default) lets long answers like
       "Registered Owner Information" or "1 Main Street Greenwich," wrap
       naturally into multi-line vessel cells without truncation. The
       per-column min-widths below ensure vessel cells stay legible even
       when many vessels are compared (1-10). */
    table-layout: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: #0f172a;
}

/* Sticky header — replaces the legacy fixedHeader jQuery plugin (was setting
   height: 370px on the Main panel and creating an internal scrollbar). With
   the plugin disabled on this page (QuestionnaireCompare.ascx:35 gates on
   `!page-vessel-compare`), the thead now scrolls with the table; sticky
   here pins it to the viewport top so users keep column context while
   scrolling long questionnaires. */
body.page-vessel-compare table.sTbl > thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Column-width allocation — the .ascx ships `ItemStyle-Width="150px"` on each
   vessel column and 80px on # / Other / Ignore. Tighten the structural columns
   so vessel columns get more room for long answer text without wrapping
   aggressively (e.g. "Registered Owner Information" on a 1.10 row). */
body.page-vessel-compare table.sTbl > tbody > tr > td:first-child,
body.page-vessel-compare table.sTbl tr.GridData > td:first-child,
body.page-vessel-compare table.sTbl tr.GridDataAlt > td:first-child,
body.page-vessel-compare table.sTbl > thead > tr > th:first-child,
body.page-vessel-compare table.sTbl > thead > tr > td:first-child {
    width: 56px !important;
    min-width: 56px;
}

/* "Question" column (2nd column, index 1): cap the width so it doesn't
   swallow all remaining table space when there are few vessels. The
   default `table-layout: auto` was expanding this column to ~583px on a
   2-vessel run — far more than typical question text needs. The .ascx
   ships `HeaderStyle Wrap="false"` (rendered as the legacy `nowrap`
   attribute) which forces single-line text and prevents the cell from
   shrinking. Override with `white-space: normal !important` so long
   questions wrap inside a sensible 320px column instead of stretching
   the entire column. `table-layout: auto` (kept) lets the column grow if
   a question is unusually long, but short ones stop dominating. */
body.page-vessel-compare table.sTbl > tbody > tr > td:nth-child(2),
body.page-vessel-compare table.sTbl tr.GridData > td:nth-child(2),
body.page-vessel-compare table.sTbl tr.GridDataAlt > td:nth-child(2),
body.page-vessel-compare table.sTbl > thead > tr > th:nth-child(2),
body.page-vessel-compare table.sTbl > thead > tr > td:nth-child(2) {
    width: 320px !important;
    min-width: 220px;
    max-width: 380px;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: break-word;
}
/* Vessel answer columns: widen min-width so multi-word answers stay on one
   line. The .ascx ItemStyle-Width="150px" is just a hint — table-layout: auto
   honours it as a lower bound but stretches when content demands. */
body.page-vessel-compare table.sTbl > tbody > tr > td[style*='width:150px'],
body.page-vessel-compare table.sTbl > tbody > tr > td[style*='width: 150px'],
body.page-vessel-compare table.sTbl tr.GridData > td[style*='width:150px'],
body.page-vessel-compare table.sTbl tr.GridDataAlt > td[style*='width:150px'] {
    min-width: 180px;
}
/* "Other" + "Ignore" columns — only need radio width + small label gap. */
body.page-vessel-compare table.sTbl > thead > tr > th:nth-last-child(-n+2),
body.page-vessel-compare table.sTbl > thead > tr > td:nth-last-child(-n+2),
body.page-vessel-compare table.sTbl > tbody > tr > td:nth-last-child(-n+2),
body.page-vessel-compare table.sTbl tr.GridData > td:nth-last-child(-n+2),
body.page-vessel-compare table.sTbl tr.GridDataAlt > td:nth-last-child(-n+2) {
    width: 72px !important;
    min-width: 72px;
}

/* Header row: slate-50 surface, slate-700 11/16 caps SemiBold, 48px tall,
   slate-200 bottom border. The inline .GridHeader navy bg gets overridden
   here via the higher-specificity body.page-vessel-compare scope. */
body.page-vessel-compare table.sTbl > thead > tr,
body.page-vessel-compare table.sTbl > thead > tr.GridHeader,
body.page-vessel-compare table.sTbl tr.GridHeader {
    background-color: var(--surface-card) !important;
    background-image: none !important;
    border: 0 !important;
    height: 48px;
}

body.page-vessel-compare table.sTbl > thead > tr > th,
body.page-vessel-compare table.sTbl > thead > tr > td,
body.page-vessel-compare table.sTbl tr.GridHeader > th,
body.page-vessel-compare table.sTbl tr.GridHeader > td {
    padding: 12px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    background-color: var(--surface-card) !important;
    color: var(--text-secondary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 16px;
    text-align: left !important;
    vertical-align: middle !important;
}

/* Header vessel-name radio + label — ASP.NET <asp:RadioButton> renders as
   <span><input type="radio" /><label for="...">Vessel Name</label></span>.
   We need radio + label to land flush with the LEFT edge of the data column
   below (radio at cell padding-left, label tight to it). The header <th>
   already has padding: 12px 16px; the radio inherits 0 margin from below;
   the label gets a small 6px gap. */
body.page-vessel-compare table.sTbl > thead span:has(> input[type='radio']) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    line-height: 20px;
}
body.page-vessel-compare table.sTbl > thead label[id*='_lblHeader_'] {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-primary) !important;
    margin: 0 !important;
    padding: 0;
}

body.page-vessel-compare table.sTbl input[type='radio'] {
    accent-color: var(--primary);
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

/* Vessel-cell label vertical alignment — ASP.NET `<asp:RadioButton>` renders
   `<input type="radio">` + `<label>` as two inline siblings (no wrapper).
   The radio uses `vertical-align: middle` (above), but labels default to
   `vertical-align: baseline`. With 14px radios + 14/16px label glyphs the
   label text rendered 1-2px ABOVE the radio's optical center — visible as
   a "label floating high above the radio" on every row. Force the labels
   to `middle` so the text geometric-center matches the radio center.
   Targets both header vessel-name labels (`lblHeader_N`) and data answer
   labels (`lblAnswer_N`) inside the comparison table.

   `display: inline-block` is critical: pure `inline` with vertical-align:
   middle still aligns the baseline, not the optical center. inline-block
   makes the label a self-contained box whose middle anchor is its own
   geometric center, which is what we actually want. `line-height: 1`
   removes the leading slack so the box height = glyph height. */
body.page-vessel-compare table.sTbl label[id*='_lblHeader_'],
body.page-vessel-compare table.sTbl label[id*='_lblAnswer_'],
body.page-vessel-compare table.sTbl label[id*='_lblOtherAnswer'] {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* Data row alternating colors — override the inline .GridData/.GridDataAlt
   single-white scheme so users can scan rows across 10 vessel cols. */
body.page-vessel-compare table.sTbl > tbody > tr,
body.page-vessel-compare table.sTbl tr.GridData,
body.page-vessel-compare table.sTbl tr.GridDataAlt {
    background-color: #ffffff !important;
}

body.page-vessel-compare table.sTbl > tbody > tr:nth-child(even),
body.page-vessel-compare table.sTbl tr.GridDataAlt {
    background-color: #f8fafc !important;
}

body.page-vessel-compare table.sTbl > tbody > tr:hover {
    background-color: #f1f5f9 !important;
}

body.page-vessel-compare table.sTbl > tbody > tr > td,
body.page-vessel-compare table.sTbl tr.GridData > td,
body.page-vessel-compare table.sTbl tr.GridDataAlt > td {
    padding: 12px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background-color: transparent !important;
    color: #0f172a !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    line-height: 20px !important;
    vertical-align: middle !important;
    min-height: 42px;
}

/* The # column gets a narrower density + muted slate so it reads as a row
   gutter, not data. */
body.page-vessel-compare table.sTbl > tbody > tr > td.compColNum,
body.page-vessel-compare table.sTbl tr.GridData > td.compColNum,
body.page-vessel-compare table.sTbl tr.GridDataAlt > td.compColNum {
    color: #64748b !important;
    font-variant-numeric: tabular-nums;
    font-weight: 500 !important;
    width: 64px;
}

/* The vessel answer labels (lblAnswer_N) sit next to their per-vessel radio.
   Selected-state coloring is JS-driven (SelectVesselAnswer flips inline
   color:black + font-weight:bold; unselected SelectIgnore writes color:#CCC).
   Don't fight the JS — keep it. Only restyle the AnswerViewLink which is
   the "this answer has HTML, click to view" link. */
body.page-vessel-compare table.sTbl .AnswerViewLink {
    color: var(--primary) !important;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

body.page-vessel-compare table.sTbl .AnswerViewLink:hover {
    color: var(--button-primary-hover) !important;
}

/* "Loadline" external-data-source icon — emitted as
   `<img src='/images/dwtcalc.gif' border='0' title='Data retrieved from
   Loadline Module.' align='absmiddle' />` from QuestionnaireCompare.ascx.cs:635.
   Renders in TWO spots: (1) inside the comparison table cell (next to each
   loadline-sourced vessel answer, via `ltExternalDs.Text`) and (2) the
   footer legend (`ltLegend.Text` rendering a [icon] Loadline pair).
   The legacy `dwtcalc.gif` is a small dated raster ladder/calculator symbol
   that doesn't match the Phase 2/4 Lucide-driven icon system used everywhere
   else in the refresh. Per UX-consistency feedback (QEN-8801: "Loadline icon
   differs from the Create Questionnaire page") this uses the SAME Lucide ruler
   glyph that Create Questionnaire swaps `loadline.png` to (createQuestionnaire.css
   ~L1020), so both pages render an identical loadline icon. The page's own Figma
   node 373:7977 shows a Plimsoll-mark glyph instead, but the cross-page
   consistency call (ruler everywhere) won. Same `content: url(svg)`
   swap pattern as the cp.gif and officerMatrix2.png swaps on Create
   Questionnaire (commits a28384d7 + 36e417d0): the `<img>` element is a
   replaced-element container, so `content: url(...)` overrides the rendered
   pixels without needing a new asset file or csproj <Content Include>
   entry — sidesteps the csproj-content-include-deploy-trap noted in MEMORY.
   `background: none` + `background-color: transparent` longhand defeats any
   inherited sprite/background while avoiding the
   css-shorthand-var-important-parser-trap from MEMORY. Width/height pin
   the SVG to 16px (vs the legacy ~16px raster) so adjacent text baselines
   stay stable in both the cell-inline and footer-legend contexts. */
body.page-vessel-compare img[src$="/images/dwtcalc.gif"],
body.page-vessel-compare img[src$="dwtcalc.gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/><path d='m14.5 12.5 2-2'/><path d='m11.5 9.5 2-2'/><path d='m8.5 6.5 2-2'/><path d='m17.5 15.5 2-2'/></svg>");
    width: 16px !important;
    height: 16px !important;
    background-image: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 4px 0 0;
    vertical-align: middle;
}


/* ==========================================================================
   7. Footer (modAnswer) — Legend (left) + Cancel + Save (right).
      The inner <table width="100%"> has td align="left" / "right" — restyle
      the wrapper as a flex bar so the buttons hug the right edge.
      grid.css already paints `.LinkButton` as the teal pill for the primary
      Save action; the `.Secondary` variant for Cancel needs an explicit
      ghost recipe since grid.css doesn't ship one.
   ========================================================================== */
body.page-vessel-compare [id$='_modAnswer_pnlFooter'] {
    background: transparent !important;
    border: 0 !important;
    padding: 16px 0 0 0 !important;
    margin: 0 !important;
}

body.page-vessel-compare [id$='_modAnswer_pnlFooter'] > table {
    width: 100% !important;
    border-collapse: collapse;
    border: 0;
}

body.page-vessel-compare [id$='_modAnswer_pnlFooter'] > table td {
    padding: 0 !important;
    border: 0 !important;
    vertical-align: middle;
}

body.page-vessel-compare [id$='_modAnswer_pnlFooter'] > table td[align='left'] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: #64748b;
}

body.page-vessel-compare [id$='_modAnswer_pnlFooter'] > table td[align='right'] {
    text-align: right;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

/* Primary teal pill — Continue (modSelect footer) and Save (modAnswer footer).
   Grid.css ships --q88-grid-primary but does NOT paint .LinkButton globally;
   each page emits its own pill recipe (charter-clauses lines 610-650 is the
   template). MainWhiteout.css `.LinkButton` rule wins by source order over a
   plain `.LinkButton` selector here, so we scope to body.page-vessel-compare
   AND chain `:link`/`:visited` to mirror its specificity. */
body.page-vessel-compare a.LinkButton:not(.Secondary),
body.page-vessel-compare a.LinkButton:not(.Secondary):link,
body.page-vessel-compare a.LinkButton:not(.Secondary):visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box !important;
    height: 36px !important;
    min-width: 88px;
    padding: 0 16px !important;
    margin: 0 0 0 4px;
    background-color: var(--primary) !important;
    background-image: none !important;
    border: 1px solid var(--primary) !important;
    border-radius: 8px;
    color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-vessel-compare a.LinkButton:not(.Secondary):hover {
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
}

/* asp:LinkButton renders `<ins>&nbsp;</ins>` before its content (legacy
   spacer kept invisible in block layout). In our inline-flex + gap pill that
   spacer becomes a flex item and shifts the label off-center — hide it.
   Same trap documented in MEMORY:linkbutton-ins-spacer-trap. */
body.page-vessel-compare a.LinkButton > ins {
    display: none !important;
}

/* The ImageManager inside Continue + Save emits an <img> next to the label.
   Hide for the primary pill (label-only Figma) but allow the existing
   ImageManager-rendered icon to live alongside the label by setting a small
   vertical-align tweak — kept off the primary pill since Figma shows
   label-only. */
body.page-vessel-compare a.LinkButton:not(.Secondary) img {
    display: none !important;
}

/* Cancel = ghost (outline) button. Mirrors Figma 3:8455 Cancel button.
   `min-width: 88px` + `justify-content: center` keeps the pill rectangular
   and visually balanced next to the teal "Save and Continue" primary.
   `box-sizing: border-box` + `!important` on `padding` are critical — the
   legacy `.LinkButton` rule in MainWhiteout.css ships `padding: 5px 9px
   5px 5px` which leaks through any unprefixed `padding:` here, blowing
   the rendered height from 36px to 48px (5+36+5+1+1 with content-box)
   and pushing the Cancel button 5px taller than Save. Lock the model
   with border-box + !important padding so 36px is the *total* outer
   height, matching Save's 38px (36 content + 2 border) within a 1-2px
   margin which the parent flex's `align-items: center` keeps centered. */
body.page-vessel-compare a.LinkButton.Secondary {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    text-decoration: none;
    box-sizing: border-box !important;
    height: 36px !important;
    min-width: 88px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 16px !important;
    margin: 0 !important;
    line-height: 20px !important;
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background-color 120ms ease, border-color 120ms ease;
}

/* asp:LinkButton renders `<ins>&nbsp;</ins>` before its content (legacy
   spacer kept invisible in block layout). In our inline-flex + gap pill that
   spacer becomes a flex item and shifts the label off-center — hide it
   on the Secondary variant too. Same trap as the primary pill rule above. */
body.page-vessel-compare a.LinkButton.Secondary > ins {
    display: none !important;
}

body.page-vessel-compare a.LinkButton.Secondary:hover {
    background-color: var(--surface-card) !important;
    border-color: var(--text-tertiary) !important;
    color: var(--text-primary) !important;
}


/* ==========================================================================
   8. Below-card descriptive helptext (Figma node 1:21303 / Frame 4).
      Renders below whichever ModuleTemplateV2 is visible — modSelect on
      first render, modAnswer once the user has clicked Continue. Plain
      muted slate copy, no card chrome (per Figma it's loose text below
      the data card, not a second card).

      The legacy fixed-position info banner (#tblBanner) and its
      cookie-gated JS at QuestionnaireCompare.ascx:31-99 + 490-511 still
      ships — left as-is so any non-refresh consumer keeps the original
      behaviour. On this page the legacy banner is hidden via the rule
      below, and the new .vc-helptext block carries the (slightly tighter)
      Figma wording.
   ========================================================================== */
body.page-vessel-compare #tblBanner {
    display: none !important;
}

/* Helptext now ships as a <ul> bullet list (Figma node 1:21303 read as a
   plain text frame; bullets requested by product for scan-ability).

   Alignment goal: bullets should sit at the same horizontal x as the LEFT
   edge of the vessel grid cards inside the card chrome above (so the list
   reads as "extending the grid downward", not as a separate floating block
   relative to the page sidebar).

   Layout math:
     - Parent <td> ships `text-align: -webkit-center` from the legacy master
       ContentPane — that quirk auto-centers any block child with a max-width.
     - Card uses `width: calc(100% - 24px); margin: 16px 12px` (grid.css §1)
       which makes its outer-left line up at parent.contentLeft + 12 +
       (centering slack).
     - Grid items inside the card sit at card.outerLeft + 16 (card padding)
       + ~1px gap = card-content-edge.

   To land the helptext bullets at grid-card-edge, mirror the card's
   geometry: use `width: calc(100% - 24px)` + `margin: 16px 12px` (matches
   the card exactly, picks up the same centering offset), then use
   `list-style-position: inside` so the marker sits at the ul's content
   edge, which we offset with `padding-left: 17px` (matching the card's
   internal 16px + 1px gap from the grid). Effective: bullets land exactly
   under the first column of vessel cards. */
body.page-vessel-compare ul.vc-helptext {
    /* Responsive alignment to the card's grid content edge — mirror the
       card's outer geometry EXACTLY so both the card and the ul reflow
       together when the viewport (or sidebar collapse state) changes.

       Card chrome from grid.css §1:
           body.page-grid .modV2 {
               width: calc(100% - 24px);
               max-width: calc(100% - 24px);
               margin: 16px 12px;
               padding: 16px;
               box-sizing: border-box;
           }

       The parent <td> ships `text-align: -webkit-center` from the legacy
       master ContentPane — auto-centering any block child whose computed
       width is less than the parent. Because both the card and the ul use
       the *same* width/margin formula, they pick up the *same* centering
       slack on every viewport — so they stay aligned no matter how the
       sidebar/content-pane sizes change.

       Bullet x math (with list-style-position: inside):
         ul-outer-left   = parent-left + 12  (margin-left from formula)
         ul-content-left = ul-outer-left + 16  (our padding-left)
         disc-marker x   = ul-content-left = parent-left + 28
       Card grid content-left:
         card-outer-left   = parent-left + 12  (same margin-left as ul)
         card-content-left = card-outer-left + 16  (card padding)
         first-cell x      = card-content-left = parent-left + 28
       → bullets and the first vessel cell share the same x at *every*
       viewport width. Previous fix used `margin: 16px 35px` which only
       happened to match the rendered card position at one viewport size
       — it drifted as the page resized because the centering slack
       wasn't accounted for in the static 35px. */
    display: block;
    box-sizing: border-box;
    /* The card emits an INLINE `style="width:95%"` from ModuleTemplateV2.ascx
       when WidthMode="Full" (set on the <uc:ModuleTemplateV2 id="modAnswer">
       in QuestionnaireCompare.ascx). The inline 95% beats grid.css's
       `width: calc(100% - 24px)` by source-order specificity, so the card's
       actual rendered width is `parent * 0.95` regardless of viewport.
       Mirror that exact same `width: 95%` (no margin-left/right) and let
       the parent <td>'s `text-align: -webkit-center` quirk handle the 5%
       slack the same way it does for the card — both stay symmetrically
       centered as the viewport (or sidebar collapse state) changes.
       Then `padding-left: 16px` matches the card's 16px internal padding
       so bullets sit at the same x as the first grid cell. */
    width: 95%;
    max-width: 95%;
    margin: 16px 0 24px 0 !important;
    padding: 0 16px 0 16px !important;     /* match card's 16px internal padding */
    list-style-type: disc;
    list-style-position: inside;
    /* Override the inherited `text-align: -webkit-center` quirk so the
       bullets + label text inside the ul stay left-aligned. */
    text-align: left !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: var(--text-muted);
    letter-spacing: 0;
    background: transparent;
    border: 0;
}

body.page-vessel-compare ul.vc-helptext > li {
    display: list-item;
    margin: 0 0 6px 0;
    padding: 0 0 0 6px;     /* small inset between marker and label */
    color: var(--text-muted);
    text-align: left;
    line-height: 22px;
    list-style-type: disc;
    list-style-position: inside;
}

body.page-vessel-compare ul.vc-helptext > li::marker {
    color: var(--text-tertiary);
}

body.page-vessel-compare ul.vc-helptext > li:last-child {
    margin-bottom: 0;
}

body[data-theme='dark'].page-vessel-compare ul.vc-helptext,
body[data-theme='dark'].page-vessel-compare ul.vc-helptext > li {
    color: var(--text-tertiary);
}

body[data-theme='dark'].page-vessel-compare ul.vc-helptext > li::marker {
    color: #64748b;
}


/* ==========================================================================
   9. Modal dialog (#answerContent) — jQuery UI dialog used to pop the
      full HTML answer for long values (AnswerViewLink). The dialog hides
      its titlebar via JS; restyle the body to match the Alert Dialog
      recipe so the popup reads as the rest of the page does.
   ========================================================================== */
body.page-vessel-compare #answerContent.ui-dialog-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    padding: 24px !important;
}

body.page-vessel-compare .ui-dialog:has(#answerContent) {
    border: 1px solid var(--border-default) !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

body.page-vessel-compare #answerContent a.LinkButton {
    margin-top: 16px;
}


/* ==========================================================================
   10. Inline-style escape hatches.
       The ascx ships two inline rule sets at lines 4-30 (#tblBanner positioning
       — kept as-is, overridden above) and lines 200-233 (.GridHeader navy bg,
       .GridDataAlt, .modV2SubHeader select border, .NormalTextBox border,
       .modV2Main padding/border). The rules in this file are scoped to
       body.page-vessel-compare so they win cleanly on this page; none of the
       inline rules need to be removed for the refresh to take effect.

       In particular:
       - .modV2SubHeader select { border-bottom:1px solid #adadad } is beaten
         by components.css's body.sidebar-nav select rule (8px radius,
         slate-200 1px border, !important) — already verified across the
         Archive / Charter Clauses pages.
       - .NormalTextBox { border-bottom:1px solid #adadad } applies only to
         the FleetVessel comboboxes; same components.css rule overrides.
       - .modV2Main div { border:none!important } is benign — we re-emit
         borders at the cell level on .sTbl and the chkVessels grid.
   ========================================================================== */


/* ==========================================================================
   11. Dark-mode parity.
       tokens.css [data-theme="dark"] rebinds the legacy palette, but this
       page hardcodes hex throughout (matching the surrounding refresh-page
       conventions for Archive / Charter Clauses, which also rely on
       per-page hex). Re-bind a small set of surfaces + text for dark
       readability. The teal pill + alert pills carry through unchanged.
   ========================================================================== */
body[data-theme='dark'].page-vessel-compare [id$='_modSelect_pnlTitleLeft'].modV2Title,
body[data-theme='dark'].page-vessel-compare [id$='_modAnswer_pnlTitleLeft'].modV2Title {
    color: #f1f5f9 !important;
}

body[data-theme='dark'].page-vessel-compare [id$='_modSelect_pnlSubHeader'] > div {
    color: #cbd5e1;
}

body[data-theme='dark'].page-vessel-compare [id$='_modSelect_pnlSubHeader'] b,
body[data-theme='dark'].page-vessel-compare [id$='_modSelect_pnlSubHeader'] [id$='_lblQuestionnaire'],
body[data-theme='dark'].page-vessel-compare [id$='_modSelect_pnlSubHeader'] [id$='_lblQuestionnaire'] b {
    color: #94a3b8 !important;
}

body[data-theme='dark'].page-vessel-compare [id$='_chkVessels'] > tbody > tr > td {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9;
}

body[data-theme='dark'].page-vessel-compare [id$='_chkVessels'] > tbody > tr > td:hover {
    background-color: #334155;
    border-color: #475569 !important;
}

body[data-theme='dark'].page-vessel-compare [id$='_chkVessels'] > tbody > tr > td:has(input:checked) {
    background-color: #134e4a !important;
    border-color: #14b8a6 !important;
}

body[data-theme='dark'].page-vessel-compare table.sTbl {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9;
}

body[data-theme='dark'].page-vessel-compare table.sTbl > thead > tr,
body[data-theme='dark'].page-vessel-compare table.sTbl tr.GridHeader,
body[data-theme='dark'].page-vessel-compare table.sTbl > thead > tr > th,
body[data-theme='dark'].page-vessel-compare table.sTbl > thead > tr > td,
body[data-theme='dark'].page-vessel-compare table.sTbl tr.GridHeader > th,
body[data-theme='dark'].page-vessel-compare table.sTbl tr.GridHeader > td {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}

body[data-theme='dark'].page-vessel-compare table.sTbl > tbody > tr,
body[data-theme='dark'].page-vessel-compare table.sTbl tr.GridData {
    background-color: #1e293b !important;
}

body[data-theme='dark'].page-vessel-compare table.sTbl > tbody > tr:nth-child(even),
body[data-theme='dark'].page-vessel-compare table.sTbl tr.GridDataAlt {
    background-color: #0f172a !important;
}

body[data-theme='dark'].page-vessel-compare table.sTbl > tbody > tr:hover {
    background-color: #334155 !important;
}

body[data-theme='dark'].page-vessel-compare table.sTbl > tbody > tr > td,
body[data-theme='dark'].page-vessel-compare table.sTbl tr.GridData > td,
body[data-theme='dark'].page-vessel-compare table.sTbl tr.GridDataAlt > td {
    color: #f1f5f9 !important;
    border-bottom-color: #1e293b !important;
}

body[data-theme='dark'].page-vessel-compare table.sTbl > tbody > tr > td.compColNum {
    color: #94a3b8 !important;
}

body[data-theme='dark'].page-vessel-compare a.LinkButton.Secondary {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body[data-theme='dark'].page-vessel-compare a.LinkButton.Secondary:hover {
    background-color: #334155 !important;
    border-color: #475569 !important;
}

body[data-theme='dark'].page-vessel-compare .ValHighlight {
    background-color: #450a0a !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}