/* ==========================================================================
   Vessel Search Advanced (Q88Search.aspx → Q88Search.ascx) — refresh skin
   ----------------------------------------------------------------------------
   Scoped via the UpdatePanel id suffix [id$="_upSearch"] which wraps both the
   criteria panel and the results panel. Page does NOT use ModuleTemplate, so
   there's no _divMod anchor; the UpdatePanel is the cleanest umbrella.

   Markup (top-down, simplified):
     div[id$="_upSearch"]            (asp:UpdatePanel.upSearch)
       div[id$="_pnlSearchCriteria"] (asp:Panel)
         table.modTitle              (Vessel Search header + Advanced Search link)
         table.modMain               (criteria card body)
           tr.HeadingRow             (View Saved Search dropdown bar)
           Basic criteria  -> table[width="750"] with TextBox/DropDownList rows
           Advanced criteria -> ComponentArt comboboxes + Repeater of saved rows
           Bottom action bar -> .LinkButton stack (Cancel/Edit/Save/Search ...)
       div[id$="_pnlSearchResults"]  (asp:Panel)
         table.modTitle              (Search Results header + action links)
         table                       (DX grid wrapper, inline #003366/#DDEEFF)
           dxx:ASPxGridView Grid2    (DX grid — DO NOT touch internals)
         table[id$="_tblLegend"]     (status icon legend)

   The page is V1 inline-table markup with HARDCODED inline borders (#003366) and
   per-input inline styles ("border: solid 1px #a6a7aa; height: 18px"). To beat
   inline styles we need !important, which is acceptable here because the rules
   are scoped to body.sidebar-nav [id$="_upSearch"] — the entire ruleset rolls
   back instantly when the sidebar-nav feature flag is off.

   Loading order (Default.master.cs):
   tokens.css → MainWhiteout.css → Q88Whiteout.css → components.css
     → grid.css → ... → vesselSearchAdvanced.css

   DOES NOT TOUCH: dx.light.compact.css, ComponentArt combobox internals.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Top-level reset — Inter typography + slate text inside the page
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="_upSearch"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   2. Card chrome — flatten the two .modMain / results-wrapper tables into
      modern white cards. Both tables sit at the page root inside upSearch.

      We can't target the second card by class (it has no class — only inline
      style) so we anchor it via its position: it's the table that lives
      inside [id$="_pnlSearchResults"] and contains the ASPxGridView wrapper.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="_upSearch"] table.modMain,
body.sidebar-nav [id$="_pnlSearchResults"] > table:not(.modTitle):not([id$="_tblLegend"]) {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    width: calc(100% - 96px) !important;
    min-width: 0 !important;
    margin: 0 48px 16px !important;
    border-collapse: separate !important;
    overflow: hidden;
}

/* Both criteria AND results cards: kill inline cellpadding/border-collapse
   inheritance and give cells natural padding. */
body.sidebar-nav [id$="_upSearch"] table.modMain > tbody > tr > td,
body.sidebar-nav [id$="_pnlSearchResults"] > table:not(.modTitle):not([id$="_tblLegend"]) > tbody > tr > td {
    border: 0 !important;
}


/* --------------------------------------------------------------------------
   3. Title bars (.modTitle) — there are TWO: Vessel Search + Search Results.
      Convert from teal-blue band to clean card-style header with bottom
      separator and Inter 20px bold heading.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="_upSearch"] table.modTitle {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    width: calc(100% - 96px) !important;
    min-width: 0 !important;
    margin: 24px 48px 0 !important;
    padding: 24px 24px 20px !important;
    border-collapse: separate !important;
}

/* Drop the legacy Find.png magnifier — Figma title has no icon */
body.sidebar-nav [id$="_upSearch"] table.modTitle img[src*="Find.png"] {
    display: none !important;
}

/* Pair each title bar with the body card that follows: kill the top border on
   the body card so the two appear unified. */
body.sidebar-nav [id$="_upSearch"] table.modTitle + table.modMain,
body.sidebar-nav [id$="_pnlSearchResults"] > table.modTitle + table {
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    margin-top: 0 !important;
}

/* Results wrapper: strip top radius so the wrapper sits flush against the
   rounded "Search Results" title bar above. Bottom corners keep the 12px
   radius matching the outer card profile. */
body.sidebar-nav [id$="_pnlSearchResults"] > table:not(.modTitle):not([id$="_tblLegend"]) {
    border-radius: 0 0 12px 12px !important;
}

body.sidebar-nav [id$="_upSearch"] table.modTitle > tbody > tr > td {
    background: transparent !important;
    color: #0f172a !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: middle !important;
}

/* Heading text — "Vessel Search" / "Search Results" / "Vessel Search (Advanced)" — Figma 18px semibold.
   white-space: nowrap keeps the long "Vessel Search (Advanced)" heading on one line on
   AdvancedSearch.aspx, where the title cell is constrained to ~200px by markup. */
body.sidebar-nav [id$="_upSearch"] table.modTitle [id$="_lblSearchTitle"],
body.sidebar-nav [id$="_upSearch"] table.modTitle [id$="_lblSearchResults"] {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0a0a0a !important;
    line-height: 28px !important;
    white-space: nowrap !important;
}


/* --------------------------------------------------------------------------
   4. Title-bar action links (.SiteLink, ImageManager labels) — Advanced Search,
      Edit Columns, Confidence Level, Export to Excel. Currently white-on-blue;
      make teal on white. Includes the inline-styled "Show/Edit Criteria"
      FakeLink which has style="color:#FFFFFF" hardcoded.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="_upSearch"] table.modTitle a.SiteLink,
body.sidebar-nav [id$="_upSearch"] table.modTitle a.SiteLink:link,
body.sidebar-nav [id$="_upSearch"] table.modTitle a.SiteLink:visited {
    color: var(--text-link) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body.sidebar-nav [id$="_upSearch"] table.modTitle a.SiteLink:hover {
    color: var(--link-hover) !important;
    text-decoration: underline !important;
}

/* "Show/Edit Criteria" FakeLink — inline style="color:#FFFFFF" must be beaten */
body.sidebar-nav [id$="_upSearch"] table.modTitle .FakeLink,
body.sidebar-nav [id$="_upSearch"] table.modTitle [id$="_lblShowCriteria"] {
    color: var(--text-link) !important;
    font-weight: 500 !important;
    cursor: pointer;
}

body.sidebar-nav [id$="_upSearch"] table.modTitle .FakeLink:hover {
    color: var(--link-hover) !important;
    text-decoration: underline !important;
}

/* Hide the old expand/collapse pixel separator GIFs in the results title bar */
body.sidebar-nav [id$="_upSearch"] table.modTitle img[src*="ModuleLinkSeperator"] {
    display: none !important;
}

/* Add gap between action links via the inner table cells */
body.sidebar-nav [id$="_upSearch"] table.modTitle table > tbody > tr > td {
    padding: 0 14px 0 0 !important;
    background: transparent !important;
}


/* --------------------------------------------------------------------------
   5. View Saved Search row (.HeadingRow) — sits at the top of the criteria
      card. Currently dark teal-blue band; convert to neutral light-gray.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="_upSearch"] table.modMain td.HeadingRow {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 500 !important;
    padding: 12px 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* "View" LinkButton inside HeadingRow */
body.sidebar-nav [id$="_upSearch"] td.HeadingRow a.NormalSmall:link,
body.sidebar-nav [id$="_upSearch"] td.HeadingRow a.NormalSmall:visited {
    color: var(--text-link) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    margin-left: 8px;
}


/* --------------------------------------------------------------------------
   6. Form-field reset — text inputs, selects, checkboxes inside the criteria
      panel. All have inline borders ("border: solid 1px #a6a7aa") so we MUST
      use !important to override.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="_upSearch"] input[type="text"],
body.sidebar-nav [id$="_upSearch"] input[type="number"],
body.sidebar-nav [id$="_upSearch"] input:not([type]) {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: auto !important;
    padding: 6px 10px !important;
    font-family: inherit;
    font-size: 14px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
    vertical-align: middle !important;
}

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

/* Native <select> dropdowns (basic criteria + ddlSavedSearch + ddlBasicSavedSearch).
   Replace OS chevron with a clean SVG that matches createQuestionnaire pattern. */
body.sidebar-nav [id$="_upSearch"] select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: auto !important;
    padding: 6px 32px 6px 10px !important;
    font-family: inherit;
    font-size: 14px !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 8px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box;
    vertical-align: middle !important;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.sidebar-nav [id$="_upSearch"] select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.18) !important;
    outline: none !important;
}

/* Checkbox + adjacent label spacing tweak */
body.sidebar-nav [id$="_upSearch"] input[type="checkbox"] {
    accent-color: var(--primary);
    margin-right: 6px;
    vertical-align: middle;
}


/* --------------------------------------------------------------------------
   7. Basic Criteria layout — Figma 428:4250 (collapsed) + 428:4508 (expanded).
      ----------------------------------------------------------------------------
      Markup is two separate <table> elements (pnlBasicCriteria + pnlExpandedBasic)
      with labels NEXT TO inputs. Figma asks for labels ABOVE inputs in equal-
      width grid columns.

      Trick: turn each table into CSS grid via `display: grid`, flatten <tbody>
      and <tr> with `display: contents`, and use `grid-template-rows: auto auto`
      + `grid-auto-flow: column` so each <td label> + <td input> pair stacks
      vertically inside its grid column.

      Basic table has 2 markup rows × 4 td each = 8 cells → 4 columns of
      label/input pairs. Expanded table has 6 markup rows of similar structure.

      For compound Min/Max cells (e.g. "Min: txt Max: txt yrs"), flexbox laid
      out horizontally inside the input cell keeps them tidy under one label.
   -------------------------------------------------------------------------- */

/* ---- Outer table: behave as a vertical block of grid-rows ---- */
body.sidebar-nav [id$="_pnlBasicCriteria"] > table,
body.sidebar-nav [id$="_pnlExpandedBasic"] > table {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 24px 16px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-sizing: border-box !important;
}

body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody,
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody {
    display: block !important;
}

/* BASIC table: tbody has 2 trs of 4 tds each → flatten via display: contents on
   tbody, and turn the table itself into a 4-col × 2-row grid with column flow.
   Result: 4 label/input pairs in one visual row (matches Figma 428:4250). */
body.sidebar-nav [id$="_pnlBasicCriteria"] > table {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    grid-auto-flow: column !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
}

body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody,
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr {
    display: contents !important;
}

/* EXPANDED table: each markup tr is its own 3-col grid.
   Layout per Figma 428:4508:
     - Non-compound row (Vessel Type alone, Vessel Size + dropdown w/ no compound):
         col 1: TD1 label / TD2 input
         col 2-3: TD3 label / TD4 input span both
     - Compound row (Field2 has Min/Max):
         col 1: TD1 label / TD2 input
         col 2: vsa-mm-min (Min label + Min input)
         col 3: vsa-mm-max (Max label + Max input)
       The original TD3 ("Age:") label is hidden via :has() since the Min/Max
       wrappers each carry their own label ("Age Min" / "Age Max"). */
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr {
    display: grid !important;
    /* 4-col grid matches the basic table so expanded fields line up vertically
       with the basic row above. Compound rows use cols 1-3; col 4 stays empty. */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    grid-auto-flow: column !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    margin-bottom: 12px !important;
}

/* Empty colspan="2" trailing cell on Vessel Type row — hide so the row reads
   as a single field at the left. */
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td[colspan]:empty {
    display: none !important;
}

/* Non-compound rows: TD3 label → col 2 row 1, TD4 input → col 2-3 row 2 */
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td:nth-child(3):not(.vsa-compound):not([colspan]) {
    grid-column: 2 / span 2 !important;
    grid-row: 1 !important;
}
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td:nth-child(4):not(.vsa-compound) {
    grid-column: 2 / span 2 !important;
    grid-row: 2 !important;
}

/* Compound rows: hide the original "Field:" td label (TD3) — replaced by per-
   cell labels inside .vsa-mm spans. */
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr:has(td.vsa-compound) > td:nth-child(3) {
    display: none !important;
}

/* The compound TD becomes a transparent grid passthrough — its .vsa-mm children
   become direct grid items in the row. */
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td.vsa-compound {
    display: contents !important;
}

/* Each .vsa-mm cell occupies one full grid column (rows 1-2) as a vertical
   flex stack (label above input). */
body.sidebar-nav [id$="_pnlExpandedBasic"] .vsa-mm {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
}

body.sidebar-nav [id$="_pnlExpandedBasic"] .vsa-mm.vsa-mm-min {
    grid-column: 2 !important;
}

body.sidebar-nav [id$="_pnlExpandedBasic"] .vsa-mm.vsa-mm-max {
    grid-column: 3 !important;
}

/* Per-cell label "Age Min" / "Cubic capacity Max" — Figma 14px medium */
body.sidebar-nav [id$="_pnlExpandedBasic"] .vsa-mm-l {
    font-weight: 500 !important;
    color: #0a0a0a !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding-bottom: 4px !important;
}

/* Input row inside a .vsa-mm cell: input grows, unit suffix sits to the right */
body.sidebar-nav [id$="_pnlExpandedBasic"] .vsa-mm-i {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}

body.sidebar-nav [id$="_pnlExpandedBasic"] .vsa-mm-i input[type="text"] {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
}

body.sidebar-nav [id$="_pnlExpandedBasic"] .vsa-mm-u {
    flex: 0 0 auto !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}

/* All cells render as block grid items */
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr > td,
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
    width: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #0a0a0a !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}

/* Label cells (every odd <td>) — Figma: 14px medium, slate-900, 8px gap below */
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr > td:nth-child(2n+1),
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td:nth-child(2n+1) {
    font-weight: 500 !important;
    color: #0a0a0a !important;
    align-self: end !important;
    padding-bottom: 4px !important;
}

/* Strip trailing colon from label text via ::after of empty content (no-op) — colons
   are part of the label text in markup and OK to keep visually. Figma omits them
   but parity isn't worth touching the .ascx for. */

/* Input cells (every even <td>) — flex container so compound Min/Max + suffix
   inputs/labels lay out horizontally */
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr > td:nth-child(2n),
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td:nth-child(2n):not(.vsa-compound) {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center !important;
    gap: 6px;
    min-width: 0 !important;
}

/* Make the actual <input>/<select> inside each input cell stretch to fill */
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr > td:nth-child(2n) > input[type="text"],
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr > td:nth-child(2n) > select,
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td:nth-child(2n) > input[type="text"],
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td:nth-child(2n) > select {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
}

/* Compound Min/Max cells: shrink the small numeric inputs but keep the larger
   primary inputs full-width. The "Min:" / "Max:" labels render as bare text
   nodes inside the td — they get inherited 14px, just need spacing.
   Width sized to fit 6-digit values (Cubic capacity Max 600000 et al.). */
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td:nth-child(2n) > input[id*="txtMin"],
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td:nth-child(2n) > input[id*="txtMax"] {
    flex: 0 0 auto;
    width: 80px !important;
    min-width: 80px !important;
    text-align: right;
}

/* Suffix unit text (years / cu. m / MT / m) — render as small muted label */
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr > td:nth-child(2n),
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td:nth-child(2n):not(.vsa-compound) {
    color: var(--text-muted) !important;
}

/* "Search ex-names" checkbox cell — keep checkbox + label inline tidy */
body.sidebar-nav [id$="_pnlBasicCriteria"] [id$="_chk8179"] {
    accent-color: var(--primary);
    margin-right: 6px;
}

/* ---- Ex-Name(s) → under Vessel Name (canvas: "Ex Names should go under
   Vessel Name") ----
   The basic-criteria grid (grid-auto-flow: column over 4 cols × 2 rows) lays the
   8 source-order <td>s out column-by-column, so the Ex-Name(s) pair lands in the
   far-right column 4 (label = Call-sign row's 3rd td → r1; "Search ex-names"
   checkbox = 4th td → r2). The designer wants it directly beneath the Vessel
   Name field instead.

   Re-place the Ex-Name(s) label + checkbox (Call-sign row's 3rd/4th td) into
   column 1, rows 3-4 (below the Vessel Name input). Creating rows 3-4 grows the
   implicit grid to 4 rows, and `grid-auto-flow: column` would then stack the
   still-auto-placed Call sign + its input into column 2 rows 3-4 (under IMO).
   To stop that, pin Call sign (Call-sign row's 1st/2nd td) explicitly to column
   3 rows 1-2. Net layout:
       col1: Vessel name / txt13 / Ex-Name(s) / Search ex-names
       col2: IMO number / txt48     col3: Call sign / txt4     col4: empty
   The 12px top margin separates the Ex-Name label from the inputs row above
   (row-gap is only 4px); align-self:start keeps it top-anchored in its track. */
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr:nth-child(2) > td:nth-child(1) {
    grid-column: 3 !important;
    grid-row: 1 !important;
}
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr:nth-child(2) > td:nth-child(2) {
    grid-column: 3 !important;
    grid-row: 2 !important;
}
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr:nth-child(2) > td:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: start !important;
    margin-top: 12px !important;
}
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr:nth-child(2) > td:nth-child(4) {
    grid-column: 1 !important;
    grid-row: 4 !important;
}

/* Hide colspan="2" empty trailing cells in Vessel Type row — they leave gaps */
body.sidebar-nav [id$="_pnlExpandedBasic"] > table > tbody > tr > td[colspan]:empty {
    display: none !important;
}

/* IMO validator span — render as inline error text below input */
body.sidebar-nav [id$="_pnlBasicCriteria"] > table > tbody > tr > td:nth-child(2n) > [id*="imoValidator"] {
    flex: 0 0 100%;
    color: var(--red-600);
    font-size: 12px;
}

/* Hidden fields contribute nothing; ignore visually inside flex */
body.sidebar-nav [id$="_pnlBasicCriteria"] [id^="hf"],
body.sidebar-nav [id$="_pnlExpandedBasic"] [id^="hf"] {
    display: none !important;
}


/* "Show More Options" / "Show Less Options" toggle — Figma: bare teal text link */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlMoreOptions"] {
    padding: 4px 24px 4px !important;
    cursor: pointer;
    color: var(--primary) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_pnlMoreOptions"] [id$="_lblMoreOptions"] {
    color: inherit !important;
    font-weight: inherit !important;
}

/* Hide legacy "+" / "-" icon GIFs on the Show More toggle */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlMoreOptions"] img {
    display: none !important;
}


/* --------------------------------------------------------------------------
   8. Advanced criteria builder — column-header band + criteria-input row +
      saved-criteria Repeater rows. Skin to match grid.css family.
   -------------------------------------------------------------------------- */

/* "Find items that match these criteria" full-width header band */
body.sidebar-nav [id$="_upSearch"] td.GridHeader {
    background: var(--surface-muted) !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none;
    letter-spacing: .04em;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border-default) !important;
}

/* Field/Condition/Value column headers */
body.sidebar-nav [id$="_upSearch"] td.HeadingCell,
body.sidebar-nav [id$="_upSearch"] td.FirstHeadingCell {
    background: var(--surface-card) !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-default) !important;
    border-right: none !important;
    padding: 10px 12px !important;
}

body.sidebar-nav [id$="_upSearch"] .HeadingCellText {
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: .04em;
    color: var(--text-muted) !important;
}

/* Criteria-input row cells (.GridDataAlt) */
body.sidebar-nav [id$="_upSearch"] td.GridDataAlt {
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    padding: 10px 12px !important;
}

/* Inline "Save | Cancel" mini-links inside criteria builder */
body.sidebar-nav [id$="_upSearch"] td.GridDataAlt a.NormalSmall:link,
body.sidebar-nav [id$="_upSearch"] td.GridDataAlt a.NormalSmall:visited {
    color: var(--primary) !important;
    font-size: var(--font-size-sm);
    font-weight: 500 !important;
    text-decoration: none !important;
}

body.sidebar-nav [id$="_upSearch"] td.GridDataAlt a.NormalSmall:hover {
    color: var(--button-primary-hover) !important;
    text-decoration: underline !important;
}

/* Saved criteria Repeater rows (.Row / .DataCell) — grid-style hover */
body.sidebar-nav [id$="_upSearch"] tr.Row {
    background: #ffffff;
    transition: background-color .12s ease;
}

body.sidebar-nav [id$="_upSearch"] tr.Row:hover {
    background: var(--surface-card);
}

body.sidebar-nav [id$="_upSearch"] tr.Row > td.DataCell {
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    padding: 10px 12px !important;
    color: var(--text-primary) !important;
}

/* Edit/Remove mini-links on each saved criteria row */
body.sidebar-nav [id$="_upSearch"] tr.Row a.NormalSmall:link,
body.sidebar-nav [id$="_upSearch"] tr.Row a.NormalSmall:visited {
    color: var(--primary) !important;
    font-size: var(--font-size-sm);
    font-weight: 500 !important;
    text-decoration: none !important;
}

body.sidebar-nav [id$="_upSearch"] tr.Row a.NormalSmall:hover {
    color: var(--button-primary-hover) !important;
    text-decoration: underline !important;
}

/* Edit-mode warning banner ("changes are not saved...") */
body.sidebar-nav [id$="_upSearch"] td.alert {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
    border-radius: 8px;
    padding: 10px 14px !important;
    font-weight: 500;
}


/* --------------------------------------------------------------------------
   9. Bottom action bar (Cancel/Delete/Edit/Save/Update/Clear/Search) — these
      are .LinkButton anchors. Make Search the primary teal CTA, others as
      ghost/secondary outlined buttons. Bottom row of the criteria table.

      Order in markup (L1059-1066):
        lbCancelEdit, lbDeleteSearch, lbEditSearch, lbSaveSearch,
        lbUpdateSearch, lbClearCriteria, lbSearch
      Most are visble="false" by default; lbSearch is always shown.
   -------------------------------------------------------------------------- */

/* Bottom action-bar TD (Cancel / Edit / Save / Clear Criteria / Search) — pad
   it to the same 24px horizontal rhythm as the basic-criteria card above so
   the rightmost Search pill has breathing room from the card edge. Without
   this the buttons sit flush against the card border (the trailing `&nbsp;`
   in markup + `margin: 0 4px` on the LinkButtons only give ~4-6px of gap,
   which reads as the button being cut off by the card chrome). */
body.sidebar-nav [id$="_upSearch"] table.modMain > tbody > tr > td:has(> a.LinkButton[id$="_lbSearch"]) {
    padding: 8px 24px 16px !important;
}

/* Common base for all .LinkButton anchors in this scope (override
   MainWhiteout.css's broad .LinkButton !important rule with extra specificity
   on the <a> + class chain). */
body.sidebar-nav [id$="_upSearch"] a.LinkButton:link,
body.sidebar-nav [id$="_upSearch"] a.LinkButton:visited {
    display: inline-block;
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    margin: 0 4px !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: all .12s ease;
    vertical-align: middle !important;
}

body.sidebar-nav [id$="_upSearch"] a.LinkButton:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Primary Search button — solid teal */
body.sidebar-nav [id$="_upSearch"] a.LinkButton[id$="_lbSearch"]:link,
body.sidebar-nav [id$="_upSearch"] a.LinkButton[id$="_lbSearch"]:visited {
    background: var(--primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary) !important;
}

body.sidebar-nav [id$="_upSearch"] a.LinkButton[id$="_lbSearch"]:hover {
    background: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
}

/* Secondary class already on lbClearCriteria — emphasize as ghost */
body.sidebar-nav [id$="_upSearch"] a.LinkButton.Secondary:link,
body.sidebar-nav [id$="_upSearch"] a.LinkButton.Secondary:visited {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

/* Hide the legacy ImageManager <img> icons inside the action LinkButtons —
   we want clean text buttons, not the old green/red icon set. The label text
   still renders inside <span> next to the image. */
body.sidebar-nav [id$="_upSearch"] a.LinkButton img {
    display: none !important;
}


/* --------------------------------------------------------------------------
   10. Results panel — the table below the "Search Results" title bar holds
       the DevExpress ASPxGridView (Grid2). The wrapper has hardcoded inline
       border:#003366 + bg:#DDEEFF which we already neutralized in section 2.
       Here we just tighten cell padding and the "no results" notice.

       We DO NOT touch DX grid internals (.dxgvHeader, .dxgvDataRow, etc.) —
       those live in dx.light.compact.css.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="_pnlSearchResults"] > table:not(.modTitle):not([id$="_tblLegend"]) > tbody > tr > td {
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
}

/* "No vessels found" notice */
body.sidebar-nav [id$="_pnlNoResults"] {
    height: auto !important;
    padding: 32px 24px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background: #ffffff;
}

/* "Criteria changed — click to refresh" notice */
body.sidebar-nav [id$="_pnlCriteriaChanged"] {
    height: auto !important;
    padding: 16px 24px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #475569 !important;
}

body.sidebar-nav [id$="_pnlCriteriaChanged"] a:link {
    color: var(--text-link) !important;
    text-decoration: none !important;
    font-weight: 500;
}


/* --------------------------------------------------------------------------
   11. Status legend (tblLegend) — make a tidy bar at the bottom.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="_upSearch"] [id$="_tblLegend"] {
    width: calc(100% - 96px) !important;
    margin: 12px 48px 24px !important;
    padding: 10px 16px !important;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    border-collapse: separate !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_tblLegend"] td.NormalSmall {
    color: #64748b !important;
    font-size: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_tblLegend"] img.statusIcon {
    margin: 0 4px;
    vertical-align: middle;
}

/* §11b — Round the legacy colored status SQUARES into dots, both in the results
   grid's first column and the legend chips below it. The marker is a 1×1
   cp.gif/clearpixel.gif repainted into a solid colored block by the global
   `.statusIcon*` rules; the refresh renders them as dots everywhere else
   (HomeDashboard, Officer Matrix), so match that here.
   (Canvas: "for the search results, please update the squares to circles".) */
body.sidebar-nav [id$="_upSearch"] img.statusIcon {
    border-radius: 50% !important;
}


/* --------------------------------------------------------------------------
   12. ComponentArt combobox (cbCriteria / cbCriteriaCondition) — re-skin to
       match the native <select> style from §6 (slate-200 border, 8px radius,
       32px height, slate chevron) so the criteria builder's three controls
       (Field combo, Condition combo, Value input) look like one unified row.

       ComponentArt renders the widget as:
         <table class="comboBox" style="width:200px">      ← outer chrome (legacy #a6a7aa border)
           <td id="..._TextBox" width="100%">
             <input class="comboTextBox" style="width:177px"> ← or a bare <td class="comboTextBox"> for read-only flavour
           </td>
           <td>                                            ← 17px trigger cell
             <img src="images/drop.gif" id="..._DropImage"> ← keeps the click handlers
           </td>
         </table>

       Strategy: dress the WRAPPER table (border + radius + 32px height),
       strip the inner input/td of its legacy chrome (no border, no radius,
       transparent bg), hide the `drop.gif` (keep it clickable via opacity:0
       so the ComponentArt `HandleDropClick` handler still fires) and paint
       a clean SVG chevron on the parent <td>. Width is left to the wrapper's
       inline style (200px) so postbacks don't shift the layout.

       Out of scope: the open-state dropdown panel (.comboDropDown, .comboItem,
       .comboItemHover) — those are vendor-styled and used on dozens of pages.
   -------------------------------------------------------------------------- */

/* Outer wrapper — replace legacy #a6a7aa border with slate-200, round to 8px,
   constrain height. Both Field and Condition combos share `table.comboBox`.

   IMPORTANT: ComponentArt swaps the wrapper class on hover/focus —
   `comboBox` → `comboBoxHover` (via inline `onmouseover=HandleInputMouseOver()`)
   plus `comboBoxFocused` / `comboBoxActive` variants. Targeting only the
   bare `.comboBox` class makes every rule drop off the moment the user
   hovers or focuses the control. Use `[class*="comboBox"]` so all state
   classes match. The scope `body.sidebar-nav [id$="_upSearch"]` keeps this
   from leaking onto other pages that also use ComponentArt comboboxes. */
body.sidebar-nav [id$="_upSearch"] table[class*="comboBox"] {
    background: #ffffff !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    height: 32px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    vertical-align: middle;
}

/* Focus state lights up when the inner input takes focus, OR when the trigger
   td receives focus via keyboard. :focus-within covers both cases. */
body.sidebar-nav [id$="_upSearch"] table[class*="comboBox"]:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.18) !important;
}

/* Inner input flavour (Field combo `cbCriteria`) — strip border + radius,
   transparent bg, fill the cell. Beat the inline `style="width:177px"` with
   width:100% !important so the input expands to the wrapper minus the 28px
   trigger cell. */
body.sidebar-nav [id$="_upSearch"] table[class*="comboBox"] input.comboTextBox {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    height: 30px !important;
    padding: 0 var(--raw-space-5) !important;
    margin: 0 !important;
    font-family: inherit;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}

body.sidebar-nav [id$="_upSearch"] table[class*="comboBox"] input.comboTextBox:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Read-only flavour (Condition combo `cbCriteriaCondition`) renders the
   visible label as a `.comboTextBox` cell that ComponentArt may emit as
   <td>, <div>, or <span> depending on its version / TextBoxEnabled state.
   Match by class only (drop the `td.` prefix) so all variants pick up
   the same 10px left/right padding instead of inheriting the legacy
   2px padding from QuestionnaireSearch.css:113 (which leaves the
   "between" label flush against the cell's left edge). */
body.sidebar-nav [id$="_upSearch"] table[class*="comboBox"] .comboTextBox {
    border: 0 !important;
    background: transparent !important;
    padding: 0 var(--raw-space-5) !important;
    font-family: inherit;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    line-height: 30px !important;
    vertical-align: middle !important;
    cursor: pointer;
    white-space: nowrap;
}

/* The TextBox td (parent of the input) — ComponentArt inlines `width="100%"`.
   Keep that but strip any padding so the input owns the spacing. */
body.sidebar-nav [id$="_upSearch"] table[class*="comboBox"] > tbody > tr > td[id$="_TextBox"] {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    vertical-align: middle !important;
}

/* Read-only flavour (Condition combo `cbCriteriaCondition`, TextBoxEnabled=
   "false" at Q88Search.ascx:946) — ComponentArt renders the label TEXT
   directly inside `td[id$="_TextBox"]` with no inner <input> to pad. The
   blanket `padding: 0` above then leaves "between" flush against the
   cell's left edge. Re-introduce horizontal padding ONLY when the TD has
   no input child, so the input flavour (Field combo) keeps its current
   layout (input owns the spacing). */
body.sidebar-nav [id$="_upSearch"] table[class*="comboBox"] > tbody > tr > td[id$="_TextBox"]:not(:has(input[type="text"])) {
    padding: 0 var(--raw-space-5) !important;
}

/* Explicit fallback for the Condition combo (cbCriteriaCondition) — ID-
   scoped so it wins even if ComponentArt emits a hidden <input> that
   defeats the :not(:has(input[type="text"])) above. The whole control's
   ID ends in `_cbCriteriaCondition`; the visible TextBox cell ends in
   `_cbCriteriaCondition_TextBox`. */
body.sidebar-nav [id$="_upSearch"] td[id$="_cbCriteriaCondition_TextBox"] {
    padding: 0 var(--raw-space-5) !important;
}

/* Trigger cell (the <td> that wraps the drop.gif image) — render our own
   SVG chevron as the background so the cell shows a clean glyph regardless
   of whether drop.gif loads. Targeted via :has(img[id$="_DropImage"]) to
   avoid styling the unrelated _TextBox cell. */
body.sidebar-nav [id$="_upSearch"] table[class*="comboBox"] > tbody > tr > td:has(img[id$="_DropImage"]) {
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 8px !important;
    border: 0 !important;
    vertical-align: middle !important;
    cursor: pointer;
}

/* Hide the legacy drop.gif sprite but keep it clickable — the ComponentArt
   widget binds onmousedown/onmouseup to this <img>, so display:none would
   break the dropdown trigger. opacity:0 keeps the hit area + handlers.
   Catch-all: any <img> inside the combo wrapper (drop, drop_hover,
   drop_active) becomes invisible — our SVG chevron on the parent <td>
   does the visual work. */
body.sidebar-nav [id$="_upSearch"] table[class*="comboBox"] img {
    opacity: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* --------------------------------------------------------------------------
   12b. ComponentArt combobox open-state panel (`.comboDropDown` + inner
        `.headingRow` / `.comboItem`).
        ------------------------------------------------------------------
        ComponentArt appends this panel as an absolutely-positioned <div>
        (z-index ~90310) that is logically a sibling of the page tree —
        often it falls OUTSIDE our `_upSearch` scope. To keep these rules
        from leaking onto OTHER pages that use ComponentArt comboboxes
        (Q88Search basic-criteria, vetting screens, etc.) we scope via the
        dropdown's OWN id pattern. The criteria builder's two combos are
        `cbCriteria` (Field — 2-column data: Field name + Description) and
        `cbCriteriaCondition` (Condition — single column). Their floating
        panels render with IDs `*_cbCriteria_DropDown` and
        `*_cbCriteriaCondition_DropDown` respectively.

        Match the grid pattern from DESIGN.md §5 / styles/grid.css:
          header band  → slate-50 bg, slate-600 uppercase 12px Inter
          data rows    → 14px Inter slate-900, slate-100 hover, no zebra
          card chrome  → white + 1px slate-200 + 8px radius + shadow/md
   -------------------------------------------------------------------------- */

[id$="_cbCriteria_DropDown"],
[id$="_cbCriteriaCondition_DropDown"] {
    background: #ffffff !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -2px rgba(0, 0, 0, 0.10) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    margin-top: 4px;
    overflow: hidden !important;
}

/* Inner tables inside the dropdown panel — strip default chrome so the
   grid pattern reads cleanly. */
[id$="_cbCriteria_DropDown"] table,
[id$="_cbCriteriaCondition_DropDown"] table {
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

[id$="_cbCriteria_DropDown"] table > tbody > tr > td,
[id$="_cbCriteriaCondition_DropDown"] table > tbody > tr > td {
    border: 0 !important;
    background: transparent !important;
}

/* Column header band (`<tr class="headingRow">`) — matches grid.css header
   pattern: slate-50 bg, slate-600 uppercase 12px Inter, .04em tracked,
   1px slate-200 bottom border. */
[id$="_cbCriteria_DropDown"] tr.headingRow,
[id$="_cbCriteriaCondition_DropDown"] tr.headingRow {
    background: var(--surface-card) !important;
}

[id$="_cbCriteria_DropDown"] tr.headingRow > td,
[id$="_cbCriteriaCondition_DropDown"] tr.headingRow > td {
    padding: 10px 16px !important;
    font-family: inherit;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    background: var(--surface-card) !important;
    border-bottom: 1px solid var(--border-default) !important;
    text-align: left !important;
}

/* Scroll viewport inside the dropdown — ComponentArt wraps the .comboItem
   list in a fixed-height div with overflow:auto. Strip its inline border
   and let the outer panel's chrome do the work. */
[id$="_cbCriteria_DropDown"] > table > tbody > tr > td > table > tbody > tr > td,
[id$="_cbCriteriaCondition_DropDown"] > table > tbody > tr > td > table > tbody > tr > td {
    padding: 0 !important;
}

/* Condition combo (cbCriteriaCondition) over-sizes its scroll viewport.
   ComponentArt computes the _DropDownContent height from its default ~10-row
   page size and inlines `height: 210px`, regardless of how few conditions the
   selected field actually yields (a text field → only 4: contains / is exactly
   / does not contain / is empty, ~147px tall). With overflow-y:auto and content
   shorter than 210px no scrollbar appears, so the surplus ~63px renders as dead
   white space below the last item. Collapse the viewport to its content
   (height:auto) and keep a generous max-height so a longer list (numeric/date
   fields carry more conditions) still scrolls instead of running off-screen.

   Scoped to the CONDITION content ONLY — the FIELD combo (cbCriteria) holds 282
   items with DropDownPageSize=10, so its fixed scroll height is correct and must
   NOT be flattened. `!important` beats ComponentArt's non-important inline height. */
[id$="_cbCriteriaCondition_DropDownContent"] {
    height: auto !important;
    max-height: 320px !important;
}

/* Data items (`<div class="comboItem">`) — 14px Inter slate-900, 8/16
   padding, slate-50 hairline between rows. Match grid.css data-row spec. */
[id$="_cbCriteria_DropDown"] .comboItem,
[id$="_cbCriteriaCondition_DropDown"] .comboItem {
    padding: 8px 16px !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    cursor: pointer !important;
}

[id$="_cbCriteria_DropDown"] .comboItem:last-child,
[id$="_cbCriteriaCondition_DropDown"] .comboItem:last-child {
    border-bottom: 0 !important;
}

/* Hover state — ComponentArt swaps `.comboItem` → `.comboItemHover` (or
   `.comboHover`) on the hovered row. Pin slate-100 on both. */
[id$="_cbCriteria_DropDown"] .comboItemHover,
[id$="_cbCriteria_DropDown"] .comboHover,
[id$="_cbCriteriaCondition_DropDown"] .comboItemHover,
[id$="_cbCriteriaCondition_DropDown"] .comboHover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Selected state — teal-100 tint so the active option reads as picked. */
[id$="_cbCriteria_DropDown"] .comboItemSelected,
[id$="_cbCriteriaCondition_DropDown"] .comboItemSelected {
    background: #ccfbf1 !important;
    color: #0f172a !important;
    font-weight: 500 !important;
}

/* Multi-column rows: cbCriteria renders each item with an inner <table>
   that lays Field name + Description side by side. Inherit typography
   and add a gap between the two columns. */
[id$="_cbCriteria_DropDown"] .comboItem table,
[id$="_cbCriteria_DropDown"] .comboItem table > tbody > tr > td {
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
}

[id$="_cbCriteria_DropDown"] .comboItem table > tbody > tr > td + td {
    padding-left: 24px !important;
    color: #475569 !important;
}

/* Scrollbar styling — keep native but trim the legacy scroll arrow gifs
   that ComponentArt occasionally injects. */
[id$="_cbCriteria_DropDown"] img,
[id$="_cbCriteriaCondition_DropDown"] img {
    display: none !important;
}

/* Field combo (cbCriteria) refinements — canvas feedback #7.
   Scoped to the FIELD dropdown only; the single-column Condition combo
   keeps the shared 8/20 item rhythm above.

   (a) Full-width header band. ComponentArt's <DropDownHeader> ships a
       fixed `<table width="690">` that stops ~112px short of the ~800px
       panel, leaving a bare white strip on the right (the band doesn't
       reach the scrollbar). Stretch that header table to fill the panel so
       the slate-50 band runs edge-to-edge and its two columns line up with
       the data rows below. `:has()` pins the header table specifically
       (the per-item tables must stay at their native 800px). */
[id$="_cbCriteria_DropDown"] table:has(> tbody > tr.headingRow) {
    width: 100% !important;
}

/* (b) 36px rows, vertically-centred labels. Each item cell renders
       `<img clearpixel><br>label`; with the spacer img hidden (above) the
       orphaned <br> still forces a blank leading line, so rows render ~57px
       tall with the label dropped onto the 2nd line. Drop the <br>, then
       pin a 36px line-height with middle vertical-align so the label sits
       centred in a clean 36px row. */
[id$="_cbCriteria_DropDown"] .comboItem br {
    display: none !important;
}

[id$="_cbCriteria_DropDown"] .comboItem {
    padding: 0 16px !important;
    line-height: 36px !important;
}

[id$="_cbCriteria_DropDown"] .comboItem table > tbody > tr > td {
    height: 36px !important;
    line-height: 36px !important;
    vertical-align: middle !important;
}

/* When the criteria-builder row puts the comboBox inside .GridDataAlt, the
   wrapper's inline `style="width:200px"` is fine on wide viewports but
   crowds against the next column on tighter ones. Let the wrapper grow to
   fill its cell if the cell allows it. */
body.sidebar-nav [id$="_upSearch"] td.GridDataAlt table[class*="comboBox"] {
    min-width: 200px;
    max-width: 100%;
}

/* Value cell text inputs (txtCriteriaValue + txtCriteriaMaxValue) — bring
   them to the same 32px box-height as the comboboxes so the row reads
   evenly. The shared input rule from §6 already paints the border/radius;
   here we only fix the height + the BETWEEN-mode txtCriteriaMaxValue width
   which renders at the default size=2 (~22px) and breaks the row. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlCriteriaValue"] input[type="text"] {
    height: 32px !important;
    padding: 0 var(--raw-space-5) !important;
    line-height: 30px !important;
    box-sizing: border-box !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_txtCriteriaMaxValue"] {
    width: 80px !important;
    min-width: 80px !important;
}


/* --------------------------------------------------------------------------
   13. Hint popovers (.hint) — refreshed in components.css §"Validation hint
       popover" (white card + slate-200 border + Lucide X close + amber
       AlertTriangle glyph). No additional rules here.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   14. Show/Edit Criteria collapse trigger — the CollapsiblePanelExtender
       swaps `expand.png` / `collapse.png` (legacy green caret PNGs) on
       `<asp:Image ID="imgShowCriteria">` next to a `<asp:Label
       ID="lblShowCriteria" style="color:#FFFFFF">`. The white inline
       color is left over from the legacy dark navy title-band — on the
       refreshed white card it renders invisible. Hide the icon outright
       per design ("just hide the icons altogether") and force the label
       to teal so the trigger reads as a normal text link.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="_upSearch"] [id$="_imgShowCriteria"] {
    display: none !important;
}

/* Override the inline `style="color:#FFFFFF"` on the Show/Edit Criteria
   label so it stays readable on the white card. */
body.sidebar-nav [id$="_upSearch"] [id$="_lblShowCriteria"] {
    color: var(--text-link, #0d9488) !important;
    font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   15. Search results grid (ASPxGridView `Grid2`, SkinID=Version3) — the
       comprehensive ASPxGridView refresh (font, header chrome, row
       borders, hover, focused row, alternating rows, pager) lives in
       /styles/grid.css and is gated by `body.page-grid`. Q88Search.aspx
       carries `page-q88search page-grid` via Default.Master.cs:431 so
       grid.css applies here exactly as on Inspections / Inspectors /
       Observations / etc.

       The only per-page override needed is the vertical-offset variable
       that drives `.dxgvCSD` height calc. The shared 340px budget is
       tuned for simple list pages (single title bar above the grid);
       Q88Search has a tall criteria form (~520px) above the results, so
       the scroll body height needs to compensate or the grid pushes
       below the viewport.
   -------------------------------------------------------------------------- */

body.page-q88search {
    /* 340px shared budget + ~520px criteria form (Search Fields + Save/
       View Saved Search rows + Search Results title bar) = ~860px. Use
       a slightly higher value so the grid doesn't overflow on shorter
       viewports; users can still scroll the page to reach the grid
       body's internal scrollbar. */
    --grid-page-vertical-offset: 860px;
}

/* grid.css §header blanks the LAST header cell's text (color:transparent) and
   force-centers the last column, on the assumption every page-grid grid ends
   in an icon-only Edit/Action column. Grid2 (search results) has NO such
   trailing column — its columns are vesselID(hidden) + last-update icon +
   Vessel Name + the dynamic "Other columns". So the last column is always a
   REAL data column, and the shared rule painted its heading invisible (most
   visible right after adding a column from the Edit Columns picker). Restore
   the last header's text color and let each column's own alignment win.

   Both Q88Search.aspx (page-q88search) and AdvancedSearch.aspx
   (page-advancedsearch) host this same Grid2, so match either via :is().
   The extra co-class out-specifies the shared (0,4,3) blanking rule so this
   wins regardless of stylesheet load order. */
body.page-grid:is(.page-q88search, .page-advancedsearch) .dxgvHeader:last-of-type .tblColHeader td > div,
body.page-grid:is(.page-q88search, .page-advancedsearch) .dxgvHeader:last-of-type .tblColHeader td > a {
    color: var(--q88-grid-fg) !important;
}

/* …and let the last column keep its OWN alignment instead of the shared
   force-center. Re-assert per column type so a left text column reads left and
   a numeric "Other column" (columnAlign=right) still reads right, matching main.
   Data cells carry DX's dx-al/dx-ac/dx-ar classes; the header carries the inline
   align attribute / text-align style DX emits from HeaderStyle.HorizontalAlign. */
body.page-grid:is(.page-q88search, .page-advancedsearch) .dxgvDataRow > td:last-child.dx-al { text-align: left !important; }
body.page-grid:is(.page-q88search, .page-advancedsearch) .dxgvDataRow > td:last-child.dx-ac { text-align: center !important; }
body.page-grid:is(.page-q88search, .page-advancedsearch) .dxgvDataRow > td:last-child.dx-ar { text-align: right !important; }

body.page-grid:is(.page-q88search, .page-advancedsearch) td.dxgvHeader:last-of-type { text-align: left !important; }
body.page-grid:is(.page-q88search, .page-advancedsearch) td.dxgvHeader:last-of-type[align="right" i],
body.page-grid:is(.page-q88search, .page-advancedsearch) td.dxgvHeader:last-of-type[style*="text-align: right" i],
body.page-grid:is(.page-q88search, .page-advancedsearch) td.dxgvHeader:last-of-type[style*="text-align:right" i] { text-align: right !important; }
body.page-grid:is(.page-q88search, .page-advancedsearch) td.dxgvHeader:last-of-type[align="center" i],
body.page-grid:is(.page-q88search, .page-advancedsearch) td.dxgvHeader:last-of-type[style*="text-align: center" i],
body.page-grid:is(.page-q88search, .page-advancedsearch) td.dxgvHeader:last-of-type[style*="text-align:center" i] { text-align: center !important; }


/* --------------------------------------------------------------------------
   16. AdvancedSearch.aspx (Q88Search.ascx pnlAdvancedCriteria branch) —
       Figma node 430:5425 (Q88-Specs file KvhhQJxd1OGj39ePierLuA).
       Full-fidelity re-skin (QEN-8776).
       ------------------------------------------------------------------
       The .ascx was minimally restructured for this skin (static markup only,
       no runat/IDs touched → no designer regen):
         pnlAdvancedSettings now renders
           <div class="vsa-criteria-heading">Find items…</div>   ← heading OUT of the table
           <div class="vsa-table-wrap">                          ← the rounded border box
             <table> head row + #trAddCriteria input row </table>
             <table> rptSavedCriteria saved rows </table>
           </div>
       Reorder (flex on pnlAdvancedCriteria): saved-search picker, edit-name
       banner, criteria builder, then help text last (order:99). The Search
       button lives in a sibling <tr> below pnlCriteria so it always trails.

       Figma map: header → modTitle; "Find items" 16px semibold black; table
       = bordered rounded-md #e2e8f0 box; head row WHITE 14px medium #0f172a +
       16px CircleHelp; inputs 32px #e2e8f0; input-row Save(teal)/Cancel(red)
       text; saved-row Edit→pen / Remove→✕ slate-500 icons; help text TWO
       stacked full-width blocks; Search button teal h36.

       NOTE: an earlier draft targeted `_pnlAdvancedSearchCriteria` — that id
       NEVER existed in the markup (the real panel is `pnlAdvancedSettings`),
       so those rules were dead. Corrected throughout.
   -------------------------------------------------------------------------- */

body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedCriteria"] {
    display: flex !important;
    flex-direction: column !important;
}

/* Reorder: saved-search picker, edit-name warning, criteria builder, then
   the help text last. pnlAdvancedSettings keeps default order 0 so it leads
   the visible content; advIntro:99 trails it. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlSavedSearch"]      { order: 10 !important; }
body.sidebar-nav [id$="_upSearch"] [id$="_pnlEditSearchName"]   { order: 20 !important; }
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] { order: 30 !important; }
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvIntro"]         { order: 99 !important; }

/* Saved-search picker — strip the inline `padding: 3px` and lay out
   "Search: <ddl>" inline with proper spacing. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlSavedSearch"] {
    padding: 16px 24px 12px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-weight: 500;
}

body.sidebar-nav [id$="_upSearch"] [id$="_pnlSavedSearch"] select {
    min-width: 240px;
}

/* Edit-search-name banner — pad sides + space the warning + textbox row */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlEditSearchName"] {
    padding: 0 24px 8px !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_pnlEditSearchName"] > table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_pnlEditSearchName"] > table td {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* ---- 16.1 "Find items that match these criteria" heading (Figma 776:1402):
        16px semibold black, sits ABOVE the bordered table, inset 24px. ---- */
body.sidebar-nav [id$="_upSearch"] .vsa-criteria-heading {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: #000000 !important;
    padding: 4px 24px 0 !important;
    margin: 0 0 16px !important;
}

/* ---- 16.2 Bordered rounded table container (Figma Table 776:4041) ---- */
body.sidebar-nav [id$="_upSearch"] .vsa-table-wrap {
    margin: 0 24px 4px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    /* overflow stays VISIBLE so the header help-hint popovers (hint1/2/3),
       which open just below the head row, are not clipped by the rounded box
       (§16.3b). Every cell is white-on-white-on-card, so the unclipped square
       corners are invisible while the 1px rounded border still reads clean. */
    overflow: visible !important;
    background: #ffffff !important;
}

/* The two inner tables butt together seamlessly inside the rounded box. */
body.sidebar-nav [id$="_upSearch"] .vsa-table-wrap > table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

/* Bottom-most row should not paint its own hairline (the box border closes it). */
body.sidebar-nav [id$="_upSearch"] .vsa-table-wrap > table:last-child > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

/* ---- 16.3 Head row cells (Figma Table/Head: white bg, 14px medium #0f172a) ---- */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.FirstHeadingCell,
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.HeadingCell {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-default) !important;
    border-right: 0 !important;
    padding: 0 12px !important;
    height: 40px !important;
    vertical-align: middle !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.FirstHeadingCell.HeadingCellText,
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.HeadingCell.HeadingCellText,
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] .HeadingCellText {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Head help icon → 16px Lucide CircleHelp (Figma Icon/16px/CircleHelp,
   slate-500 #64748b — color-picked). Keep the <img> clickable (it fires
   ShowHint); just swap the rendered glyph via `content`. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.FirstHeadingCell img,
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.HeadingCell img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    cursor: pointer;
}

/* ---- 16.3b Header help-hint popovers (hint1 / hint2 / hint3) ----
   Legacy `.hint` (Main.css) renders ABOVE its 1x1 anchor (top:-50px). On this
   40px head row that floated the bubble up over the "Find items" heading with
   its down-pointer landing BELOW the trigger, and the §16.2 rounded box CLIPPED
   the overflowing top. Re-anchor the three header help bubbles to open just
   BELOW the row and flip the pointer to point UP at the CircleHelp trigger.
   Scoped to the head cells so the validation hints (hint4/hint5/saveNameErr,
   positioned elsewhere on the page) keep their own placement + amber styling. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.FirstHeadingCell .hint,
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.HeadingCell .hint {
    top: 34px !important;          /* drop below the 40px head row */
    right: auto !important;        /* defeat legacy right:-292px so inline left:-40px wins */
    text-align: justify !important;
}

/* Pointer flips to an UP triangle centered under the ? trigger. The icon centre
   is a constant 54px right of the bubble's left edge across all three columns
   (47px left + 7px half of the 14px-wide pointer). */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.FirstHeadingCell .hint .hint-pointer,
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.HeadingCell .hint .hint-pointer {
    top: -7px !important;
    bottom: auto !important;
    left: 47px !important;
    clip-path: polygon(0 100%, 100% 100%, 50% 0) !important;  /* triangle points up */
}

/* These are HELP bubbles, not warnings — swap the global amber AlertTriangle
   (components.css `body.sidebar-nav .hint::before`) for a slate CircleHelp that
   matches the trigger icon. Mask paints alpha; background-color supplies colour. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.FirstHeadingCell .hint::before,
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.HeadingCell .hint::before {
    background-color: #64748b !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
}

/* ---- 16.4 Input row (#trAddCriteria) cells ---- */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.GridDataAlt {
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
}

/* Combos + value text input → Figma base/input border #e2e8f0 (overrides the
   #cbd5e1 used by basic criteria in §6/§12). */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] table[class*="comboBox"] {
    border-color: #e2e8f0 !important;
}
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] [id$="_pnlCriteriaValue"] input[type="text"] {
    border-color: #e2e8f0 !important;
}

/* Field + Condition combos fill their column (Figma inputs are full-width).
   !important keeps the width stable across postbacks (the widget re-emits its
   inline width:200px on every callback). The Value cell is intentionally left
   to its own BETWEEN/dropdown width JS, so it is NOT forced here. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] [id$="_pnlCriteriaField"] table[class*="comboBox"],
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] [id$="_pnlCriteriaCondition"] table[class*="comboBox"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Hide the legacy unit-suffix label rendered after the between/value inputs
   (Q88Search.ascx:980 lblUnit on the input row, :1061 lblCriteriaUnit on
   each saved row). Populated server-side from `criteriaItems.First().Unit`
   (Q88Search.ascx.cs:1585) — e.g. "Metres" for Air Draft (SDWT). The unit
   is already implied by the field name ("Air Draft (SDWT)") and the
   refresh layout treats it as visual noise. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] [id$="_lblUnit"],
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] [id$="_lblCriteriaUnit"] {
    display: none !important;
}

/* Input-row text actions — Save teal, Cancel red (Figma row1 "Add"/"Cancel"). */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.GridDataAlt a[id$="_lbSaveCriteria"]:link,
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.GridDataAlt a[id$="_lbSaveCriteria"]:visited {
    color: var(--text-link) !important;
    font-weight: 500 !important;
}
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.GridDataAlt a[id$="_lbCancelCriteria"]:link,
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.GridDataAlt a[id$="_lbCancelCriteria"]:visited {
    color: #dc2626 !important;
    font-weight: 500 !important;
}
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] td.GridDataAlt a[id$="_lbCancelCriteria"]:hover {
    color: #b91c1c !important;
}

/* ---- 16.5 Saved-criteria rows (rptSavedCriteria tr.Row) ---- */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row > td.DataCell {
    border: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    color: #0f172a !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}

/* Edit/Remove links → slate-500 icon buttons (Figma Pen 24 + X 24). The action
   cell holds: <a Edit> | <a Remove> <label status>. Zero the cell font so the
   literal "|" text node + link labels vanish, then paint Lucide masks. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row > td.DataCell:has(a[id$="_lbEditCriteria"]) {
    font-size: 0 !important;
    white-space: nowrap !important;
}
/* Kill the literal "|" separator text node living between the two anchors. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row [id$="_pnlCriteriaLinks"] {
    font-size: 0 !important;
}
/* font-size:0 on the anchor itself (NOT just inherited) — the anchors carry
   .NormalSmall with a direct font-size that beats an inherited 0. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row a[id$="_lbEditCriteria"],
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row a[id$="_lbDeleteCriteria"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    transition: background-color .12s ease;
}
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row a[id$="_lbEditCriteria"]::before,
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row a[id$="_lbDeleteCriteria"]::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #64748b;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 20px 20px;
            mask-size: 20px 20px;
}
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row a[id$="_lbEditCriteria"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
}
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row a[id$="_lbDeleteCriteria"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row a[id$="_lbEditCriteria"]:hover { background: #f1f5f9; }
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row a[id$="_lbDeleteCriteria"]:hover { background: #fef2f2; }
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row a[id$="_lbDeleteCriteria"]:hover::before { background-color: #dc2626; }

/* Re-show the (rarely populated) status label without the zeroed font. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row [id$="_lblCriteriaStatus"] {
    font-size: 12px !important;
    color: #64748b !important;
    margin-left: 8px;
}

/* "No criteria yet" placeholder rows — keep readable after the font-size:0
   trick above (those rows have no Edit link so are unaffected, but pin sizing). */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvancedSettings"] tr.Row > td.DataCell[colspan] {
    font-size: 14px !important;
    color: #64748b !important;
    text-align: center;
    padding: 12px !important;
}

/* ---- 16.6 Help text — TWO stacked full-width blocks (Figma Frame15 776:1397).
        The markup is one <tr> with two <td> side-by-side; stack them. ---- */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvIntro"] {
    padding: 20px 24px 8px !important;
    margin-top: 4px !important;
    background: transparent !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #1e293b !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvIntro"] > table {
    width: 100% !important;
    border-collapse: collapse !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvIntro"] > table > tbody {
    display: block !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvIntro"] > table > tbody > tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvIntro"] > table > tbody > tr > td {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    width: 100% !important;
    color: #1e293b !important;
    font-size: 14px !important;
    line-height: 20px !important;
    vertical-align: top !important;
}

/* Bold lead line ("Perform an advanced search…" / "To save the search…") */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvIntro"] strong {
    font-weight: 600 !important;
    color: #1e293b !important;
}

/* <ol> decimal numbering — indent so the digit sits under the lead text. */
body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvIntro"] ol {
    margin: 4px 0 0 0 !important;
    padding-left: 21px !important;
    list-style: decimal !important;
}

body.sidebar-nav [id$="_upSearch"] [id$="_pnlAdvIntro"] ol li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 20px !important;
}

/* ---- 16.7 Search button (Figma Button 430:5451 — total h36, px16) ----
   Fixed border-box height so padding does not add on top of a min-height. */
body.sidebar-nav [id$="_upSearch"] a.LinkButton[id$="_lbSearch"]:link,
body.sidebar-nav [id$="_upSearch"] a.LinkButton[id$="_lbSearch"]:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 36px !important;
    padding: 0 16px !important;
    line-height: 20px !important;
}

/* Unify the rest of the action-bar buttons (Save Search / Clear Criteria /
   Edit / Delete …) to the same 36px height so the row reads evenly next to
   the teal Search CTA. Scoped to the action-bar <td> (the one holding
   lbSearch) so it never touches title-bar SiteLinks or grid mini-links. */
body.sidebar-nav [id$="_upSearch"] td:has(> a.LinkButton[id$="_lbSearch"]) a.LinkButton:link,
body.sidebar-nav [id$="_upSearch"] td:has(> a.LinkButton[id$="_lbSearch"]) a.LinkButton:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 36px !important;
    padding: 0 16px !important;
    line-height: 20px !important;
}

/* ---- 16.8 Results-grid title bar — flush the action links to the right ----
   The "Search Results" title bar (pnlSearchResults > table.modTitle) puts its
   four action links (Edit Columns / Confidence Level / Export to Excel /
   Hide Criteria) in an `align="right"` cell, yet two things held them off the
   right edge: (1) the Show/Hide-criteria toggle lives in a fixed Width=130 panel
   (label ~72px → ~58px trailing slack), and (2) every link cell carries 14px
   right padding for inter-link spacing, so the LAST cell's 14px left a trailing
   gap. Shrink the panel to its content and drop only the last cell's right pad;
   the links then flush to the title bar's content edge (which lines up with the
   grid's last-column content — both respect the .modTitle 24px inset, mirroring
   the "Search Results" title's matching inset on the left).
   Scoped to body.sidebar-nav (not a single page class) because the same
   Q88Search.ascx toolbar renders on BOTH basic Vessel Search (page-q88search)
   and Advanced Search (page-advancedsearch); the canvas item requested the
   flush-right alignment on the basic page too.
   (Canvas: "please right align the two buttons".) */
body.sidebar-nav [id$="_pnlShowCriteria"] {
    width: auto !important;
    display: inline-block !important;
}
body.sidebar-nav [id$="_pnlSearchResults"] table.modTitle td[align="right"] table td:last-child {
    padding-right: 0 !important;
}


/* --------------------------------------------------------------------------
   17. "Search Result Columns" modal — OUTER chrome (DESIGN.md §16.3).
       ----------------------------------------------------------------------
       Opened by the "Edit Columns" link in the results title bar via
       ajaxToolkit:ModalPopupExtender `modalPnlSearchCols` (Q88Search.ascx:1304).
       The popup is a plain <asp:Panel CssClass="PageBody"> (NOT a <uc:Modal>
       and NOT a <uc:ModuleTemplate>), so the global §9.10 chrome never reaches
       it — it renders fully legacy: a navy #003366 1px border (inline) with a
       `.ModuleTitle_new` uppercase navy ribbon header, hosting an <iframe>
       (#ifUDF → CustomSearchColumns.aspx, re-skinned separately in
       /styles/search-columns-popup.css under body.popup-search-columns).

       This block re-skins ONLY the dialog shell (card + header + close X +
       iframe reset). It is scoped to the panel's own id-suffix so the sibling
       "Confidence Interval Banding" popup (pnlConfidence / pnlHeaderConfidence
       / #ifConfidence — identical legacy mechanism) is intentionally left
       untouched. The ACT MPE keeps the panel in place in the DOM (no reparent),
       but we scope on `body.sidebar-nav [id$="_pnlSearchCols"]` rather than the
       `_upSearch` ancestor so the rules survive even if a future ACT version
       relocates it.
   -------------------------------------------------------------------------- */

/* Card shell — flat white dialog, slate-200 border (beats the inline navy
   #003366), 12px radius, soft shadow (popups keep their shadow — they are
   dialog chrome, not cards; §16.1). overflow:hidden clips the iframe's square
   corners into the rounded card. Keep the MPE's inline width:700px + the
   display toggle it drives. */
body.sidebar-nav [id$="_pnlSearchCols"].PageBody {
    /* Widen past the MPE's inline width:700px to the Figma card width (858) —
       the selected-columns tray was cramped, wrapping the drag-row labels. */
    width: 858px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -2px rgba(0, 0, 0, 0.10) !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header row — strip the navy `.ModuleTitle_new` ribbon + inline uppercase.
   Flex row: title at left, close X at right (§16.3). The inline width:702px
   (sized to overhang the legacy border) is normalised to 100% box-border. */
body.sidebar-nav [id$="_pnlHeaderCols"].ModuleTitle_new {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default, #e2e8f0) !important;
    text-transform: none !important;
    cursor: move; /* PopupDragHandleControlID — keep the drag affordance */
}

body.sidebar-nav [id$="_pnlHeaderCols"] .vsa-cols-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    color: #0f172a !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
}

/* Close X — 28×28 hit area, Lucide `x` mask painted off currentColor
   (slate-500 → slate-900 on hover). Empty anchor, so it is invisible when
   the refresh flag is off (no sidebar-nav → no glyph) and the dialog still
   closes via the iframe's Cancel/Save buttons. */
body.sidebar-nav [id$="_pnlHeaderCols"] a.vsa-cols-close {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none !important;
    background: transparent;
    transition: background-color .12s ease;
}

body.sidebar-nav [id$="_pnlHeaderCols"] a.vsa-cols-close::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #64748b;
    -webkit-mask: var(--icon-x) no-repeat center / 18px 18px;
            mask: var(--icon-x) no-repeat center / 18px 18px;
}

body.sidebar-nav [id$="_pnlHeaderCols"] a.vsa-cols-close:hover {
    background: #f1f5f9;
}

body.sidebar-nav [id$="_pnlHeaderCols"] a.vsa-cols-close:hover::before {
    background-color: #0f172a;
}

/* Iframe — drop the legacy 1px border so it sits flush inside the card; the
   card border + header bottom-rule define the edges. Fill the card width.
   QEN-8865: scoped from the former `body.sidebar-nav #ifUDF` — #ifUDF is a
   generic legacy id reused by several unrelated popups on other pages
   (CreateQuestionnaire's UDF modal, VesselManagement, CompanyIPAddress), all
   of which also carry body.sidebar-nav (the global shell class). The broad
   selector silently forced this 516px onto every one of them; narrowed to
   the two pages this popup actually lives on, matching this file's own
   :is(.page-q88search, .page-advancedsearch) convention used elsewhere. */
body:is(.page-q88search, .page-advancedsearch) #ifUDF {
    display: block !important;
    width: 100% !important;
    height: 516px !important;
    border: 0 !important;
}

/* The 4px spacer div under the iframe — collapse so the card closes cleanly. */
body.sidebar-nav [id$="_pnlSearchCols"] > div[style*="height: 4px"] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   18. "Search Result Confidence Interval Banding" modal — OUTER chrome
       (DESIGN.md §16.12, sibling of §17 above — identical legacy mechanism).
       ----------------------------------------------------------------------
       Opened by the "Confidence Level" link in the results title bar via
       ajaxToolkit:ModalPopupExtender `mpeConfidence` (Q88Search.ascx:1317).
       Same plain <asp:Panel CssClass="PageBody"> + `.ModuleTitle_new` ribbon
       + <iframe> mechanism as §17's Search Result Columns popup — global
       §9.10 chrome never reaches it.

       This block re-skins ONLY the dialog shell (card + header + close X +
       iframe reset). The iframe BODY (target-value table + footer buttons,
       ConfidenceBanding.aspx) is re-skinned separately in
       /styles/confidence-banding-popup.css under body.popup-confidence-banding.

       Figma: KvhhQJxd1OGj39ePierLuA, node 1122:6530 (card 1075×436, content
       1027 wide). Card width below (1076) = 1075 Figma content + ~1px border
       rounding, matching the border-box sizing convention used in §17.
   -------------------------------------------------------------------------- */

/* position:fixed (not ACT's default absolute) — .q88-content is
   position:relative (isolation:isolate watermark trap, see
   refresh-modal-trapped-in-qcontent-isolation memory) so it becomes the
   containing block for an absolutely-positioned descendant, shifting the
   popup right/down by .q88-content's own offset from the viewport (its
   left/top edge sits past the sidebar/header). ACT's own computed
   left/top (centered against the TRUE viewport) are correct as-is — fixed
   positioning is what makes them apply where ACT intended, matching how
   ACT's own .modalBackground backdrop already uses fixed for the same
   reason. Leaves the PopupDragHandleControlID drag feature intact since
   only `position` is overridden, not left/top. */
body.sidebar-nav [id$="_pnlConfidence"].PageBody {
    position: fixed !important;
    width: 1076px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header row — strip the navy `.ModuleTitle_new` ribbon + inline uppercase.
   Flex row: title at left, close X at right. Figma title text: 16px/600
   slate-900 (base/card-foreground); 24px card inset on every side. Bottom
   padding 24px (not 16) — Figma's Card uses `gap-6` (24px) between the title
   row and the table, no divider line. */
body.sidebar-nav [id$="_pnlHeaderConfidence"].ModuleTitle_new {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 24px 24px 24px !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    text-transform: none !important;
    cursor: move; /* PopupDragHandleControlID — keep the drag affordance */
}

body.sidebar-nav [id$="_pnlHeaderConfidence"] .vsa-confidence-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    color: #0f172a !important;
    text-transform: none !important;
    letter-spacing: 0;
}

/* Close X — 28×28 hit area, Lucide `x` mask (16px, matches Figma "Icon / 16px
   / X") painted off currentColor (slate-500 → slate-900 on hover). Empty
   anchor, invisible when the refresh flag is off; dialog also closes via the
   iframe's own "Close" button so nothing is lost either way. */
body.sidebar-nav [id$="_pnlHeaderConfidence"] a.vsa-confidence-close {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none !important;
    background: transparent;
    transition: background-color .12s ease;
}

body.sidebar-nav [id$="_pnlHeaderConfidence"] a.vsa-confidence-close::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #64748b;
    -webkit-mask: var(--icon-x) no-repeat center / 16px 16px;
            mask: var(--icon-x) no-repeat center / 16px 16px;
}

body.sidebar-nav [id$="_pnlHeaderConfidence"] a.vsa-confidence-close:hover {
    background: #f1f5f9;
}

body.sidebar-nav [id$="_pnlHeaderConfidence"] a.vsa-confidence-close:hover::before {
    background-color: #0f172a;
}

/* Iframe — drop the legacy 1px #003366 inline border so it sits flush inside
   the card; the card border + title padding define the edges. Height fits
   the table's scrollable area + sticky footer (see confidence-banding-popup.css);
   the iframe BODY scrolls internally when a search has many numeric columns. */
body.sidebar-nav [id$="_ifConfidence"] {
    display: block !important;
    width: 100% !important;
    height: 480px !important;
    border: 0 !important;
}

/* The 4px spacer div under the iframe — collapse so the card closes cleanly. */
body.sidebar-nav [id$="_pnlConfidence"] > div[style*="height: 4px"] {
    display: none !important;
}

/* STACKING fix — the `position:fixed` above centers the card on the true
   viewport, but does NOT escape `.q88-content`'s isolation:isolate stacking
   context (components.css watermark trap). The ACT panel (z100001) + backdrop
   (`mpeConfidence_backgroundElement` z10000) are DOM-nested inside
   `.q88-content`, so those z-indexes only rank WITHIN that z-0 context → the
   sidebar (z800) + sticky header (z900) paint OVER the modal's left/top edge
   (the title's "S" and the first column sat behind the sidebar), and the
   backdrop can't dim the sidebar. `.q88-content` is position:relative, so a
   numeric z-index takes effect: lift the whole content context above
   header/sidebar WHILE this modal is open, gated on the backdrop's inline
   display (ACT sets display:none on close → reverts to auto). Same mechanism
   + gate pattern as the SireAnalytics drilldown / Edit Observation modals —
   see refresh-modal-trapped-in-qcontent-isolation memory. mpeConfidence is a
   RAW ACT ModalPopupExtender (no `body.q88-modal-open`), so gate on its own
   backdrop, not the uc:Modal class. */
body.sidebar-nav:has([id$="mpeConfidence_backgroundElement"]:not([style*="display: none"]):not([style*="display:none"])) .q88-content {
    z-index: 1000;
}