/* ==========================================================================
   Search Particulars page (Search.aspx → SearchQuestions.ascx) — refresh skin
   ----------------------------------------------------------------------------
   Re-skinned to match Q88-Specs Figma node 428:3927 (file KvhhQJxd1OGj…).
   Scoped via the unique module container id suffix (cpSearchFields_divMod) so
   shared .StdTable / .modTitle / .modMain / .modSub1 classes remain untouched
   on every other V1 ModuleTemplate page.

   Form-layout intent (matches Figma):
     1. Labels stack ABOVE inputs (table flattened to block stack).
     2. The "Vessel name" cell renders Fleet + Vessel side-by-side via grid
        (FleetVessel.ascx emits dlFleet + dlVessel as siblings).
     3. The "Search for" textbox spans the full row width; helper note sits
        directly underneath.
     4. The primary Search button is positioned absolutely at the bottom-right
        of the form region (modSub1) regardless of advanced-rows expansion.

   Loading order (per Default.master.cs):
   tokens.css → MainWhiteout.css → Q88Whiteout.css → components.css → q88search.css

   Pattern mirrors createQuestionnaire.css: scope by module-id-suffix only
   (no C# changes required to opt this page in/out).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Outer card (modContainerStd) — flatten V1 chrome into a clean card
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="cpSearchFields_divMod"].modContainerStd {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.10),
        0 1px 2px -1px rgba(0, 0, 0, 0.10);
    padding: 24px;
    margin: 24px 48px;
    /* The container renders as <table> — width:auto would shrink-wrap. Force
       a specific width matching createQuestionnaire's full-bleed treatment. */
    width: calc(100% - 96px) !important;
    max-width: none !important;
    table-layout: fixed;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0a0a0a;
}

body.sidebar-nav [id$="cpSearchFields_divMod"].modContainerStd > tbody > tr > td {
    padding: 0 !important;
    background: transparent !important;
}

/* Break DNN ContentPane width constraint so the card fills the column next
   to the sidebar. Scoped via :has() to only affect this page. */
body.sidebar-nav:has([id$="cpSearchFields_divMod"]) .ContentPane,
body.sidebar-nav:has([id$="cpSearchFields_divMod"]) .ContentPaneBody,
body.sidebar-nav:has([id$="cpSearchFields_divMod"]) #ctl00_cphMiddle,
body.sidebar-nav:has([id$="cpSearchFields_divMod"]) #cphMiddle_ctl00_divWrap {
    width: 100% !important;
    max-width: none !important;
}

/* Reset ModuleTemplate's inner panels — they carry legacy backgrounds and
   borders we want to discard now that the card itself draws the chrome. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modInnerContainer,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modTitleHeader {
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
}


/* --------------------------------------------------------------------------
   2. Module header (modTitle): "Search Particulars" + "Advanced Search" link
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="cpSearchFields_divMod"] .modTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 20px 0;
    margin: 0;
    background: transparent;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modTLeft {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    padding: 0;
    margin: 0;
    background: transparent;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modTLeft [id$="lblSearchResultHeading"] {
    font: inherit;
    color: inherit;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modTRight {
    padding: 0;
    margin: 0;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

/* "Advanced Search" link in the title-right slot — teal text link */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modTRight a,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modTRight a:link,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modTRight a:visited {
    color: var(--primary);
    text-decoration: none;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modTRight a:hover {
    color: var(--button-primary-hover);
    text-decoration: underline;
}

/* The Search icon image inside the link — subtle, vertically centered */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modTRight a img {
    vertical-align: middle;
    margin-right: 4px;
}


/* --------------------------------------------------------------------------
   3. Search form (modSub1) — flatten the legacy table layout to a stacked
      label-above-input form. Set position:relative so the Search button can
      anchor to the bottom-right of this region.
      Markup is a <table width=100% cellpadding=3> with rows for:
        - Vessel name (FleetVessel: dlFleet + dlVessel + validator)
        - Search for (txtSearch + lbSearch button — button is repositioned)
        - Note row (helper text under the search input)
        - Advanced rows (RadioButtonList, Options checkboxes, HR, HVPQChapters)
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 {
    position: relative;
    /* Reserve room at the bottom-right for the absolutely-positioned Search
       button (h:36 + 16 gap above the next region). */
    padding-bottom: 56px !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody {
    display: block !important;
    width: 100% !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr {
    display: block !important;
    width: 100%;
    margin: 0 0 16px 0;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr:last-child {
    margin-bottom: 0;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    vertical-align: top;
    background: transparent;
    border: 0;
    text-align: left !important;
    line-height: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0a0a0a;
}

/* Convert label cell (td[align="right"]) into a Field label above its input.
   Figma: Inter 14/20 medium, color #0a0a0a, 8px gap to the input below. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td[align="right"] {
    margin-bottom: 8px;
    width: 100% !important;
    padding: 0 !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td[align="right"] > b,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td[align="right"] > b > span,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td[align="right"] > b label {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: #0a0a0a !important;
}

/* Helper-note row markup is `<td></td><td style="font-size:8pt">Note:…</td>`.
   Hide the empty leading cell so the note sits flush left under its input. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td:empty {
    display: none !important;
    margin: 0 !important;
}

/* Vessel name row — lay Fleet + Vessel selects out as a 2-column grid.
   FleetVessel.ascx renders dlFleet, dlVessel and the rfvdlVessel validator
   span as direct siblings of the host <td>. CSS Grid auto-flow: Fleet → col 1,
   Vessel → col 2, validator → next free cell (col 1 row 2 if it shows). */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td:has(select[id$="_dlFleet"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: center;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td:has(select[id$="_dlFleet"]) select {
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* Vessel "required" validator — re-skin the warning state to match the refresh
   spec (mirrors createQuestionnaire.css). Legacy .ValHighlight (MainWhiteout.css)
   paints a yellow stripe + alertVal.png + uppercase red "*"; replace with a Lucide
   triangle-alert (red) + "Please select a vessel" message via ::before/::after.
   Feedback spec: message text 12px, NORMAL weight, #DC2626; invalid input border
   #FECACA. The validator's ErrorMessage is "*", hidden with font-size:0 on the host. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td:has(select[id$="_dlFleet"]) span[id$="_rfvdlVessel"] {
    grid-column: 2;
    /* No `display` override here on purpose: Display="Dynamic" emits inline
       style="display:none;" when valid (hidden) and "display:inline" on failure
       (shown). Letting that inline style win keeps the show/hide behaviour intact;
       the icon (::before) is inline-block so its box renders regardless. */
    margin: 4px 0 0 0;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: #dc2626 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0 !important;        /* hides the legacy "*" ErrorMessage text */
    font-weight: 400 !important;    /* feedback: normal weight */
    line-height: 16px !important;
    text-transform: none !important;
    white-space: normal !important;
    justify-self: start;
}

/* Icon as inline-block so its 14px box renders even though the host stays inline/
   block (ASP.NET's inline display wins over any non-!important rule, and a grid item
   blockifies anyway). margin-right gives the gap; vertical-align middle centres it
   against the label. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td:has(select[id$="_dlFleet"]) span[id$="_rfvdlVessel"]::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
    background-color: #dc2626;
    -webkit-mask: var(--icon-triangle-alert) no-repeat center / 14px;
            mask: var(--icon-triangle-alert) no-repeat center / 14px;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td:has(select[id$="_dlFleet"]) span[id$="_rfvdlVessel"]::after {
    content: "Please select a vessel";
    font-size: 12px;
    line-height: 16px;
    color: #dc2626;
    font-weight: 400;
    vertical-align: middle;
}

/* Invalid Vessel dropdown gets the #FECACA red stroke. Display="Dynamic" sets the
   validator span to style="display:inline" on failure, so [style*="inline"] flags
   the error state without any markup/JS change. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr > td:has(select[id$="_dlFleet"]):has(span[id$="_rfvdlVessel"][style*="inline"]) select[id$="_dlVessel"] {
    border-color: #FECACA !important;
}

/* Search row — make the textbox span the full row width. The lbSearch button
   shares this <td> in markup; we strip its inline flow with position:absolute
   in §5 so this row collapses to just the textbox. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 input[id$="txtSearch"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Helper-note text — Figma shows a single muted line under the search input. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 td[style*="font-size:8pt"],
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 td[style*="font-size: 8pt"] {
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-muted) !important;
    font-style: normal !important;
}

/* Tighten the gap between the search input and the helper-note row. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 > table > tbody > tr:has(input[id$="txtSearch"]) {
    margin-bottom: 6px;
}

/* Advanced rows: keep the same stacked label-above-input pattern. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 [id$="rblSearchIn"] {
    display: inline-flex;
    gap: 16px;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 [id$="rblSearchIn"] td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 [id$="trOptions"] > td:not([align="right"]) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    width: 100% !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 [id$="trHR"] td {
    padding: 0 !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 [id$="trHR"] hr {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin: 8px 0;
}

/* HVPQ Chapter row — keep dropdown + "View" button inline */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 [id$="trHVPQ"] > td:not([align="right"]) {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100% !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modSub1 [id$="trHVPQ"] select {
    flex: 1 1 auto;
    max-width: 360px;
}


/* --------------------------------------------------------------------------
   4. Inputs & form controls — match Figma "Type=Input, State=Default"
      h:32 r:8 border:#e2e8f0  Inter 14/20 #0a0a0a
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="cpSearchFields_divMod"] input[type="text"],
body.sidebar-nav [id$="cpSearchFields_divMod"] input[type="number"],
body.sidebar-nav [id$="cpSearchFields_divMod"] input[type="search"],
body.sidebar-nav [id$="cpSearchFields_divMod"] select {
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 12px !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #0a0a0a !important;
    background-color: #ffffff !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    box-sizing: border-box;
    box-shadow: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] input[type="text"]:hover,
body.sidebar-nav [id$="cpSearchFields_divMod"] input[type="number"]:hover,
body.sidebar-nav [id$="cpSearchFields_divMod"] select:hover {
    border-color: var(--border-strong) !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] input[type="text"]:focus,
body.sidebar-nav [id$="cpSearchFields_divMod"] input[type="number"]:focus,
body.sidebar-nav [id$="cpSearchFields_divMod"] select:focus {
    outline: 0 !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.15) !important;
}

/* Native <select> — strip OS appearance, replace with chevron SVG to match
   the Figma "InputGroup with ChevronDown" pattern. */
body.sidebar-nav [id$="cpSearchFields_divMod"] select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
    cursor: pointer;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] select::-ms-expand {
    display: none !important;
}

/* Checkboxes + radios — teal accent matches the rest of the refresh */
body.sidebar-nav [id$="cpSearchFields_divMod"] input[type="checkbox"],
body.sidebar-nav [id$="cpSearchFields_divMod"] input[type="radio"] {
    accent-color: var(--primary);
    margin: 0 6px 0 0;
    vertical-align: middle;
    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   5. Primary Search button (lbSearch) — teal pill anchored bottom-right
      Renders in markup as <a class="LinkButton">…ImageManager…</a>
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="lbSearch"],
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="lbSearch"]:link,
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="lbSearch"]:visited {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box !important;
    height: 36px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: #ffffff !important;
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    background-image: none !important;
    border: 1px solid var(--primary) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 150ms ease, border-color 150ms ease;
    vertical-align: middle !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="lbSearch"]:hover,
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="lbSearch"]:focus,
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="lbSearch"]:active {
    background: var(--button-primary-hover) !important;
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="lbSearch"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.25);
}

/* ImageManager wraps the label in <ins>&nbsp;</ins> + <img> + label —
   the Figma primary button is text-only, so hide the icon and the spacer. */
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="lbSearch"] img,
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="lbSearch"] ins {
    display: none !important;
}

/* HVPQ Chapter "View" button — teal primary, inline (sits next to its select).
   Q88Whiteout's `.LinkButton` rule paints a navy gradient; override with full
   teal pill styling at higher specificity. */
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="btnHVPQChapter"],
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="btnHVPQChapter"]:link,
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="btnHVPQChapter"]:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box !important;
    height: 32px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: #ffffff !important;
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    background-image: none !important;
    border: 1px solid var(--primary) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 150ms ease, border-color 150ms ease;
    vertical-align: middle !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="btnHVPQChapter"]:hover,
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="btnHVPQChapter"]:focus,
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="btnHVPQChapter"]:active {
    background: var(--button-primary-hover) !important;
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="btnHVPQChapter"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.25);
}

body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="btnHVPQChapter"] img,
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton[id$="btnHVPQChapter"] ins {
    display: none !important;
}

/* Other LinkButtons inside the card — secondary (kept as fallback) */
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton:not([id$="lbSearch"]):not([id$="btnHVPQChapter"]),
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton:not([id$="lbSearch"]):not([id$="btnHVPQChapter"]):link,
body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton:not([id$="lbSearch"]):not([id$="btnHVPQChapter"]):visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 32px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0a0a0a;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
    transition: border-color 150ms ease, background-color 150ms ease;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] a.LinkButton:not([id$="lbSearch"]):not([id$="btnHVPQChapter"]):hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #0a0a0a;
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   6. Search results — modMain hosts a Repeater wrapping a StdTable inside a
      scrollable <div style="height:370px;overflow:auto">. Re-skin StdTable
      to match DESIGN.md §5 (Data grid pattern) so rows feel like the
      Inspections grid:
        - Card scroll wrapper: 8px radius, slate-200 border, white bg
        - Header row: 36h (feedback), 12px Inter, slate-600 muted-fg uppercase,
          slate-50 muted bg, 1px slate-200 bottom border, 16px horizontal
          cell padding (§5.3)
        - Data row: 36h (8 top + 20 line-height + 8 bottom), 14/20 Inter
          slate-900, 16px horizontal cell padding, 1px slate-200 separator,
          NO zebra stripe (uniform white), slate-100 hover (§5.4)
        - Edit pencil column: rightmost 64w, 24×24 hit area, 16×16 Lucide
          Pencil glyph painted via CSS mask off currentColor (slate-600
          default → teal #0d9488 hover). Same recipe as grid.css §7
          / DESIGN.md §5.5.1
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain {
    margin-top: 24px;
}

/* The Repeater HeaderTemplate emits a wrapper div with hard-coded inline
   `height:370px; width:100%; overflow:auto; overflow-x:hidden;`. Inline
   style wins the cascade by default; we widen the height budget so the
   grid breathes (12 rows on a 1080p viewport, matches Inspections), wrap
   it in card chrome, and let the natural row borders do the visual work
   — drop the harder #e5e5e5 the legacy border was drawing. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain > div[style*="overflow"] {
    height: auto !important;
    max-height: 640px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable {
    width: 100% !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #0f172a;
}

/* StdTable header row — 48px tall, muted slate band + uppercase 12px label.
   The `position: sticky; top: 0` keeps the header pinned while the scroll
   wrapper's overflow:auto scrolls the body. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable th,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable thead td,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr.HeadingRow > td,
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr.ColHeader > td {
    background: var(--surface-card) !important;
    background-image: none !important;
    color: var(--text-muted) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    /* Feedback: 36px header line. 12/16 header text → (36-16)/2 = 10px vertical
       padding gives a 36px header row. NO explicit height — table cells treat
       `height` as a content-box minimum, so height:36 + 10px padding renders 56px. */
    padding: 10px 16px !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Edit column header — centered to align with the centered pencil cell. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr.ColHeader > td:nth-last-child(2) {
    text-align: center !important;
}

/* Trailing decorative 20px header TD (clearpixel.gif spacer in the
   HeaderTemplate) — collapse so the pencil column lines up flush. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr.ColHeader > td:last-child:empty {
    width: 0 !important;
    padding: 0 !important;
}

/* Body rows — 42px tall (11 top + 20 line-height + 11 bottom), 16px
   horizontal cell padding, slate-900 text on uniform white (no zebra
   per §5.4). Every row carries inline `onmouseover="HighLight(this,'')"`
   which sets el.style.backgroundColor='#DFDFDF' via Scripts/script.js —
   author `!important` beats inline styles (CSS Cascading L4 §6.4.4) so
   the slate-100 hover wins instead of the legacy grey #DFDFDF. The same
   technique is documented in vessel-management.css §5. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr:not(.HeadingRow):not(.ColHeader) {
    background: #ffffff !important;
    transition: background-color 120ms ease;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr:not(.HeadingRow):not(.ColHeader) > td {
    background: transparent;
    color: var(--text-primary) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    /* Feedback: 36px body line. 14/20 text → (36-20)/2 = 8px vertical padding. */
    padding: 8px 16px !important;
    vertical-align: top !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* No zebra — alt rows render identically to bare rows (uniform white,
   matches the inspection-grid look). Override the previous .Alt fallback. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr.Alt {
    background: #ffffff !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr:not(.HeadingRow):not(.ColHeader):hover {
    background: var(--surface-muted) !important;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr:not(.HeadingRow):not(.ColHeader):last-child > td {
    border-bottom: 0 !important;
}

/* ID-link in the first cell — the Repeater wraps QuestionID in an
   <a class="NormalBold"> which renders in legacy #4F72A4 (steel-blue)
   via MainWhiteout. Re-skin to slate so it reads as part of the row text;
   .NormalBold keeps font-weight 700 for emphasis. Teal on hover signals
   the action affordance. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr:not(.HeadingRow):not(.ColHeader) > td > a.NormalBold {
    color: var(--text-primary) !important;
    text-decoration: none;
    font-weight: 700;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr:not(.HeadingRow):not(.ColHeader) > td > a.NormalBold:hover {
    color: var(--primary) !important;
    text-decoration: underline;
}

/* `Utilities.Highlight()` wraps the search-match substring in
   <span class="NormalBold"> inside Question/Answer cells. Keep the bold
   but inherit the surrounding cell colour (slate-900) so the bold is
   the visual emphasis, not a colour swap. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr:not(.HeadingRow):not(.ColHeader) > td .NormalBold {
    color: inherit;
    font-weight: 700;
}

/* Question-code suffix span (e.g. "(1.1.11)") — render in muted slate so
   the question text itself stays primary. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr:not(.HeadingRow):not(.ColHeader) > td span[id$="_lblCode"] .NormalBold {
    color: var(--text-muted);
    font-weight: 700;
}

/* Edit pencil column (rightmost data column before the trailing 20px
   spacer). 64px fixed width, centered icon. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr:not(.HeadingRow):not(.ColHeader) > td:nth-last-child(2) {
    text-align: center !important;
    width: 64px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* The 24px pencil hit-area drives the row height. 8px (body default) padding
       → 40px rows; 6px → 24+12 = 36px so the pencil column matches the 36px text
       rows. Centre it so it stays middle-aligned if a question wraps to 2 lines. */
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    vertical-align: middle !important;
}

/* Trailing decorative 20px row TD — collapse so the pencil sits flush
   against the right edge of the scroll wrapper. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain table.StdTable tr:not(.HeadingRow):not(.ColHeader) > td:last-child {
    width: 0 !important;
    padding: 0 !important;
}

/* Edit pencil — DESIGN.md §5.5.1 Lucide recipe. The legacy markup is
   <a class="Img-Std Img-Std-EditV2"> (empty anchor); MainWhiteout's
   `.Img-Std-EditV2` background-position rule paints a tile from the
   StdIcons.png sprite. Replace with a Lucide Pencil drawn via CSS
   mask off currentColor: 24×24 hit area + 16×16 glyph, 6px corner
   radius, slate-600 default → teal #0d9488 hover. */
body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain a.Img-Std-EditV2 {
    display: inline-block;
    width: 24px;
    height: 24px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-image: none !important;
    background-color: #475569 !important;
    color: #475569;
    cursor: pointer;
    vertical-align: middle;
    opacity: 1;
    -webkit-mask: var(--icon-square-pen) no-repeat center / 16px 16px;
            mask: var(--icon-square-pen) no-repeat center / 16px 16px;
    text-decoration: none;
    transition: background-color 120ms ease;
}

body.sidebar-nav [id$="cpSearchFields_divMod"] .modMain a.Img-Std-EditV2:hover {
    background-color: var(--primary) !important;
}

/* No-results label — soft empty-state row inside the card outline so the
   page doesn't snap between "card with grid" and "bare error text"
   between submits. */
body.sidebar-nav [id$="cpSearchFields_divMod"] [id$="lblNoSearchResult"] {
    display: block;
    padding: 24px 16px;
    background: #ffffff;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    margin-top: 12px;
    color: var(--text-muted);
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 20px;
}