/* =============================================================================
 * Inspection Container — Q88 inspection detail page re-skin
 * QEN-8704 frontend refresh POC.
 *
 * Scope: body.page-inspection-container (gated in Default.master.cs by
 * Config.EnableRefreshedFrontend + portal id 0/1 + InspectionContainer.aspx path).
 *
 * Figma: h1mdRCUTlNsImj4y69I5my, node 296:8768.
 * Tokens: docs/figma/inspection-container-tokens.json.
 * Tree contract: docs/figma/inspection-container-figma-tree.md.
 *
 * Section order:
 *   §1  Phase 2 ContentPane release (so .modV2 can cap width with auto-gutters)
 *   §2  Card chrome (max-width 1584, 48px gutter, radius, shadow, padding)
 *   §3  Header row (title + Inspected By dropdown + Delete/Save/kebab — buttons
 *       relocated from footer via CSS-only positioning)
 *   §4  Form grid (input/select chrome, labels, spacing)
 *   §5  Notes section
 *   §6  Observations section
 *   §7  Footer (Save/Delete hidden — relocated to header)
 *   §14 Kebab Actions trigger (anchor positioned to card top-right)
 *   §22 Kebab Actions popup body (popupMenuV2 chrome — fixes wrapped-label clipping)
 * ============================================================================= */


/* ============================================================================
 * §1 — Phase 2 ContentPane release
 * ----------------------------------------------------------------------------
 * Phase 2's .q88-card auto-releases the ContentPane chain. Legacy .modV2
 * doesn't get that release, so the chain shrink-wraps unless we replicate
 * the release per page. Without this, max-width + margin auto on .modV2 has
 * nothing to inset against and the card overflows or pins to 0,0.
 * ============================================================================ */

body.page-inspection-container .ContentPane,
body.page-inspection-container .ContentPaneBody,
body.page-inspection-container .MainTableContent,
body.page-inspection-container #q88Content {
  width: 100% !important;
  max-width: none !important;
}


/* ============================================================================
 * §2 — Card chrome
 * ----------------------------------------------------------------------------
 * Figma Card 296:8773 — 1584w × 784h, 48px gutter, radius 12, shadow/sm,
 * #ffffff bg, 24px inner padding. Cap max-width at 1584; on narrower
 * viewports shrink with 24px gutters.
 *
 * Sources (per tokens.json):
 *   base/card  #ffffff
 *   base/border  #e2e8f0
 *   rounded-xl  12   (card outer corner)
 *   shadow/sm — 0 1 3 #0000001a + 0 1 2 #0000001a -1
 *   spacing/6  24    (inner padding)
 * ============================================================================ */

body.page-inspection-container > * { font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }

body.page-inspection-container .modV2 {
  background-color: #ffffff !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10) !important;
  max-width: 1584px;
  width: calc(100% - 48px);
  margin: 24px auto !important;
  box-sizing: border-box;
  padding: 24px;
  /* Kill legacy gradient/bg from MainWhiteout that paints on .modV2 */
  background-image: none !important;
}

/* Reset legacy table layout inside the card so padding is honoured (the
 * .modV2 has an inner <table> with width:100% that overflows past our
 * padding edges otherwise). */
body.page-inspection-container .modV2 > table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}


/* ============================================================================
 * §3 — Header row (was: .modV2SubHeader)
 * ----------------------------------------------------------------------------
 * Current: a gradient/blue sub-header bar containing PageTitle + Inspected By
 *          (left) and Last QED date (right).
 * Figma:   plain header row — title left, Inspected By dropdown left,
 *          Delete/Save/kebab right (relocated from footer).
 *
 * Sources:
 *   text/lg  18/28 semibold  base/foreground  #0f172a    (title)
 *   spacing/3  12  gap between title and dropdown
 *   spacing/9  36  gap between header and form grid (root frame gap)
 * ============================================================================ */

body.page-inspection-container .modV2SubHeader {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 36px 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

body.page-inspection-container .modV2SubHeader > table,
body.page-inspection-container .modV2SubHeader > table > tbody,
body.page-inspection-container .modV2SubHeader > table > tbody > tr,
body.page-inspection-container .modV2SubHeader > table > tbody > tr > td {
  background: transparent !important;
  border: 0 !important;
}

/* Page title — Figma 296:8779 "Inspection Title": text-lg/leading-normal/semibold
 * #0f172a (18/28 semibold base/foreground).
 *
 * Cascade trap (Step 6 brownfield re-derivation, 2026-05-14): §4's rule
 * `body.page-inspection-container .modV2 > table td` has specificity (0,2,3)
 * and !important — it BEAT the prior PageTitle rules at (0,2,2). Live probe
 * showed vessel name rendering 14/500 #475569 (slate-600 muted) instead of
 * 18/600 #0f172a (slate-900 foreground).
 *
 * Fix: scope through `.modV2SubHeader` to reach (0,3,2) → wins over §4's
 * (0,2,3) on specificity-class count. Apply to both td.PageTitle and any
 * descendant text-bearing element (Literal renders as plain text — no inner
 * span — but defensively cover spans/bolds in case of future markup). */
body.page-inspection-container .modV2SubHeader .PageTitle,
body.page-inspection-container .modV2SubHeader td.PageTitle,
body.page-inspection-container .modV2SubHeader .PageTitle > span,
body.page-inspection-container .modV2SubHeader .PageTitle > b,
body.page-inspection-container .modV2SubHeader .PageTitle * {
  color: var(--text-primary) !important;
  font-family: "Inter", sans-serif;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  white-space: nowrap;
}

body.page-inspection-container .modV2SubHeader .PageTitle,
body.page-inspection-container .modV2SubHeader td.PageTitle {
  padding: 0 12px 0 0 !important;
}

/* "Inspected By:" muted label (`<b>` rendered next to ddlInspectionOrgs in
 * the subheader). Live: 14/700 #475569 (HTML <b> overrides §4's 500 weight).
 * Figma: text-sm/leading-none/normal 14/400 muted-foreground #475569.
 * Override the bold tag to match Figma's normal weight. */
body.page-inspection-container .modV2SubHeader b {
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  line-height: 20px !important;
}


/* ============================================================================
 * §4 — Form grid (4 columns × ~4 rows of fields)
 * ----------------------------------------------------------------------------
 * Current: a <table>-laid form with .modV2 inner table, mixed input + select
 *          + checkbox + search-icon InputGroup styles.
 * Figma:   80w label column + 12 gap + 218w input column per field row,
 *          12px gap between rows in a column, ~80px column gap.
 *
 * Sources:
 *   base/border  #e2e8f0  (input outline)
 *   base/input   #e2e8f0
 *   base/background #ffffff (input bg)
 *   rounded-md   8         (input radius)
 *   text/sm      14/20 normal  base/foreground #0f172a  (input value)
 *   text/sm      14/20 medium  base/muted-foreground #475569 (label)
 * ============================================================================ */

/* Common input/select chrome — scoped to the inspection container card body.
 * Heights are !important because `.NormalTextBox` carries `height: 18px` via
 * MainWhiteout, and inputs often have inline `width=NNN` attributes; we keep
 * widths intact (preserves the legacy column layout) but normalize HEIGHT and
 * chrome uniformly. */
body.page-inspection-container .modV2 input[type="text"]:not([class*="dx"]),
body.page-inspection-container .modV2 input[type="number"]:not([class*="dx"]),
body.page-inspection-container .modV2 input.NormalTextBox,
body.page-inspection-container .modV2 input.qCal,
body.page-inspection-container .modV2 select:not([class*="dx"]),
body.page-inspection-container .modV2 textarea:not([class*="dx"]) {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
  vertical-align: middle !important;
}

/* The `cbArrow` autocomplete combobox decoration (ComponentArt-ish) renders
 * a chevron via background-image. Keep the chevron room (right padding) so
 * the dropdown arrow doesn't overlap the value text. */
body.page-inspection-container .modV2 input.NormalTextBox.cbArrow,
body.page-inspection-container .modV2 input.cbArrow {
  padding-right: 28px !important;
}

body.page-inspection-container .modV2 input[type="text"]:focus,
body.page-inspection-container .modV2 select:focus,
body.page-inspection-container .modV2 textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15) !important;
}

/* Labels are typically in <span class="ColumnHeader"> or similar — first td of each row */
body.page-inspection-container .modV2 .ColumnHeader,
body.page-inspection-container .modV2 td.colHeader,
body.page-inspection-container .modV2 td.qLabel,
body.page-inspection-container .modV2 td.fldLabel {
  color: #475569 !important;
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  vertical-align: middle !important;
  text-align: left !important;
  padding: 6px 12px 6px 0 !important;
  background: transparent !important;
}

/* Tighten row spacing to Figma's 12px gap-between-fields cadence + base
 * typography for bare label TDs (form labels have no class hook).
 *
 * `:not(.pnlCalQ88 *):not(.modPopPnl *)` — this is a descendant selector (no
 * `>` between `table` and `td`), so it also reached every `<td>` inside any
 * popup nested somewhere in `.modV2 > table`: the calendar's tables (legacy
 * `.tblCal` month/day/year row AND the new `.ui-datepicker-calendar` day
 * grid) AND the global `<uc:Modal>` chrome (`.modPopPnl`, e.g. the "Add
 * Organization" dialog opened from Technical Manager/Superintendent/etc.'s
 * "[add new]" link — its `.modPopupTbl` header/content/footer cells are
 * plain `<td>`s too). Its `!important` padding beat both datePicker.css's
 * `.ui-datepicker-calendar tbody td { padding: 0 }` and components.css's
 * §9.10 `.modPopPnl` chrome padding. */
body.page-inspection-container .modV2 > table td:not(.pnlCalQ88 *):not(.modPopPnl *):not(.autoCompleteHeader *):not(.autoCompleteComboPerson *):not(.autoCompleteComboPort *):not(.autoCompleteComboOrganization *) {
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: var(--text-muted) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  vertical-align: middle !important;
}

/* ============================================================================
 * §4d — Person / Organization / Port autocomplete combo — modern popover re-skin
 * ----------------------------------------------------------------------------
 * ComboBoxInspectionPerson.ascx (Inspector, Master, Chief Engineer,
 * Superintendent), ComboBoxOrganization.ascx (Technical Manager), and
 * ComboBoxPortName.ascx (Port Name) all wire up an AjaxControlToolkit
 * AutoCompleteExtender. The completion list renders as `<ul
 * class="autoCompleteComboPerson">` / `<ul class="autoCompleteComboOrganization">`
 * / `<ul class="autoCompleteCombo autoCompleteComboPort">` with `<li
 * class="comboItem">` rows — ACT REPLACES (not adds) the class with
 * `comboItemHover` on the highlighted row, so every size property below is
 * mirrored onto both (DESIGN.md §9.6.2/§9.6.6 class-swap trap). A separate
 * absolutely-positioned `<asp:Panel>` (`pnlACHeaderPerson` /
 * `pnlACHeaderOrganization` / `pnlACHeaderPort`) renders a
 * `table.autoCompleteHeader` column-header bar (`td.darkBlueBackground`) that
 * sits flush above the list. Organization is structurally identical to
 * Person (same 1-column "Name:" + add-icon header, same 177px geometry) —
 * just its own list class name.
 *
 * Legacy paints the header strip NAVY (`darkBlueBackground` = --brand-accent)
 * with near-white text, and the list as a thin #868686-bordered box with 10px
 * (`font-size:smaller`) rows — the "old" chrome the user flagged as
 * inconsistent with the rest of this refreshed page. A prior, narrower fix
 * here just restored --text-on-brand on the navy fill (contrast-only); this
 * supersedes it with the full re-skin, porting the same recipe already used
 * for the analogous ComboBoxOfficerMatrixPerson widget in
 * officer-matrix-person.css §14: white card, slate-200 border, 8px radius, sm
 * shadow, 14/20 Inter rows, slate-100 hover, with the header strip recast as
 * a slate-50 grid-column header. The strip caps the card (top rounding +
 * top/side border) and the list supplies the bottom (no top border), so the
 * two read as one popover.
 *
 * ACT appends completion `<ul>`s outside the card's DOM subtree (confirmed
 * pattern — see memory quick-search-autocomplete-skin / officer-matrix-
 * person.css §14a), so the list/row rules below are scoped to the page body
 * only, not nested under `.modV2`. The header `<asp:Panel>` IS static ascx
 * markup (not JS-appended) and stays inside `.modV2 > table`, matching the
 * §4 exclusion above.
 * ============================================================================ */

/* 4d-i. List container — all three widgets. */
body.page-inspection-container ul.autoCompleteComboPerson,
body.page-inspection-container ul.autoCompleteComboOrganization,
body.page-inspection-container ul.autoCompleteComboPort {
  border: 1px solid var(--border-default) !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
  padding: 0 !important;
  max-height: 240px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  /* Header strip is 34px tall (8px cell padding + 16px label line + 2×1px
   * border — see §4d-iii) — bump the legacy 20px/15px margin-top so the list
   * sits flush beneath it and the two read as one card. */
  margin-top: 34px !important;
}

body.page-inspection-container ul.autoCompleteComboPerson,
body.page-inspection-container ul.autoCompleteComboOrganization {
  width: 177px !important;
  min-width: 177px !important;
}

body.page-inspection-container ul.autoCompleteComboPort {
  width: 400px !important;
  min-width: 400px !important;
}

/* 4d-ii. Rows — all classes styled identically (see the class-swap note
 * above); a slate-100 hairline separates rows. */
body.page-inspection-container ul.autoCompleteComboPerson .comboItem,
body.page-inspection-container ul.autoCompleteComboPerson .comboItemHover,
body.page-inspection-container ul.autoCompleteComboOrganization .comboItem,
body.page-inspection-container ul.autoCompleteComboOrganization .comboItemHover,
body.page-inspection-container ul.autoCompleteComboPort .comboItem,
body.page-inspection-container ul.autoCompleteComboPort .comboItemHover {
  list-style: none;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--surface-muted) !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
  cursor: pointer;
}
body.page-inspection-container ul.autoCompleteComboPerson .comboItem:last-child,
body.page-inspection-container ul.autoCompleteComboPerson .comboItemHover:last-child,
body.page-inspection-container ul.autoCompleteComboOrganization .comboItem:last-child,
body.page-inspection-container ul.autoCompleteComboOrganization .comboItemHover:last-child,
body.page-inspection-container ul.autoCompleteComboPort .comboItem:last-child,
body.page-inspection-container ul.autoCompleteComboPort .comboItemHover:last-child {
  border-bottom: 0 !important;
}

/* The row's inner table + cells carry inline `font-size:smaller` (→10px)
 * from AutoComplete.js's PersonPopulated/OrganizationPopulated/PortPopulated
 * — override to 14/20 Inter and pad the cells. table-layout:fixed keeps
 * Port's two columns aligned under the header. */
body.page-inspection-container ul.autoCompleteComboPerson .comboItem > table,
body.page-inspection-container ul.autoCompleteComboPerson .comboItemHover > table,
body.page-inspection-container ul.autoCompleteComboOrganization .comboItem > table,
body.page-inspection-container ul.autoCompleteComboOrganization .comboItemHover > table,
body.page-inspection-container ul.autoCompleteComboPort .comboItem > table,
body.page-inspection-container ul.autoCompleteComboPort .comboItemHover > table {
  border-collapse: collapse;
  table-layout: fixed !important;
  width: 100% !important;
}

body.page-inspection-container ul.autoCompleteComboPerson .comboItem td,
body.page-inspection-container ul.autoCompleteComboPerson .comboItemHover td,
body.page-inspection-container ul.autoCompleteComboOrganization .comboItem td,
body.page-inspection-container ul.autoCompleteComboOrganization .comboItemHover td,
body.page-inspection-container ul.autoCompleteComboPort .comboItem td,
body.page-inspection-container ul.autoCompleteComboPort .comboItemHover td {
  box-sizing: border-box !important;
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--text-primary) !important;
  padding: 6px 8px !important;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
}

/* Port's row table carries two columns (Name / Country) — split evenly to
 * match the header's two-column layout below. */
body.page-inspection-container ul.autoCompleteComboPort .comboItem td:nth-child(1),
body.page-inspection-container ul.autoCompleteComboPort .comboItemHover td:nth-child(1),
body.page-inspection-container ul.autoCompleteComboPort .comboItem td:nth-child(2),
body.page-inspection-container ul.autoCompleteComboPort .comboItemHover td:nth-child(2) {
  width: 50% !important;
}

/* Hover / keyboard-highlight row — slate-100 fill only; sizes are already
 * mirrored above so the class-swap can't reflow/shrink the row. */
body.page-inspection-container ul.autoCompleteComboPerson .comboItemHover,
body.page-inspection-container ul.autoCompleteComboPerson .comboItem:hover,
body.page-inspection-container ul.autoCompleteComboOrganization .comboItemHover,
body.page-inspection-container ul.autoCompleteComboOrganization .comboItem:hover,
body.page-inspection-container ul.autoCompleteComboPort .comboItemHover,
body.page-inspection-container ul.autoCompleteComboPort .comboItem:hover {
  background-color: var(--surface-muted) !important;
  color: var(--text-primary) !important;
}

/* 4d-iii. Column-header strip — de-navy to a slate-50 grid header capping
 * the popover's top edge. All three widgets share the base chrome;
 * width/columns differ per widget so those are scoped by the wrapping
 * panel's id suffix. */
body.page-inspection-container table.autoCompleteHeader {
  border: 1px solid var(--border-default) !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-radius: 8px 8px 0 0 !important;
  background-color: #ffffff !important;
  height: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden;
  table-layout: fixed !important;
}

body.page-inspection-container [id$="pnlACHeaderPerson"] table.autoCompleteHeader,
body.page-inspection-container [id$="pnlACHeaderOrganization"] table.autoCompleteHeader {
  width: 177px !important;
}
body.page-inspection-container [id$="pnlACHeaderPort"] table.autoCompleteHeader {
  width: 400px !important;
}

/* Column-label cells — de-navy to transparent slate-600 grid-header text. */
body.page-inspection-container table.autoCompleteHeader td.darkBlueBackground {
  box-sizing: border-box !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-muted) !important;
  font-family: "Inter", sans-serif;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
  text-transform: none;
  padding: 8px 8px !important;
  border: 0 !important;
  text-align: left;
  vertical-align: middle;
}

/* Person's and Organization's trailing cell holds only the "add new" icon
 * (Img-Std-AddWhite, already re-skinned to a slate UserPlus outline by §8)
 * — narrow + centered. */
body.page-inspection-container [id$="pnlACHeaderPerson"] table.autoCompleteHeader td.darkBlueBackground:last-child,
body.page-inspection-container [id$="pnlACHeaderOrganization"] table.autoCompleteHeader td.darkBlueBackground:last-child {
  width: 28px !important;
  text-align: center;
}

/* Port's two columns (Name / Country) split evenly, matching the row table. */
body.page-inspection-container [id$="pnlACHeaderPort"] table.autoCompleteHeader td.darkBlueBackground {
  width: 50% !important;
}

/* Input/select VALUE text — slate-900 (not muted) override on form cells */
body.page-inspection-container .modV2 > table td input,
body.page-inspection-container .modV2 > table td select,
body.page-inspection-container .modV2 > table td textarea {
  color: var(--text-primary) !important;
}


/* ============================================================================
 * §5 / §6 — Notes + Observations sections
 * ----------------------------------------------------------------------------
 * DOM: each section uses <table class="sTbl"> with a header row
 *   <tr class="trHdr"><td>Notes</td><td>...icons...</td></tr>
 * followed by data rows. Legacy chrome:
 *   - .sTbl tr.trHdr td:  12px bold navy #003366 with 0.8px navy bottom border
 *
 * Figma section heading (Frame 35 / 36):
 *   - text/lg 18/28 semibold  base/foreground #0f172a
 *   - sits at top of section, no decorative underline
 *   - data table renders 12px below the heading (gap-3)
 *   - subtle 1px slate-200 separator beneath the heading row to visually
 *     anchor the section (matches the data-table top edge in Figma)
 * ============================================================================ */

/* Section heading cells — generously increase specificity to win over .sTbl
 * defaults from MainWhiteout / Q88Whiteout */
body.page-inspection-container .modV2 table.sTbl tr.trHdr > td,
body.page-inspection-container .modV2 table.sTbl > tbody > tr.trHdr > td {
  color: var(--text-primary) !important;
  font-family: "Inter", sans-serif;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-default) !important;
  padding: 6px 0 10px 0 !important;
  vertical-align: middle !important;
}

/* The section's outer container (`<table class="sTbl">` row that contains
 * the data table) — strip legacy chrome and give it some top breathing room
 * matching Figma's gap-9 (36px) between top-of-section and the previous
 * section (form grid → Notes → Observations). */
body.page-inspection-container .modV2 table.sTbl {
  width: 100% !important;
  margin: 24px 0 0 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

/* Data rows inside Notes/Observations — keep them roomy (42h Figma)
 * with subtle slate-100 dividers between rows. Match `.modV2 .sTbl tr:not(.trHdr) td`. */
body.page-inspection-container .modV2 table.sTbl > tbody > tr:not(.trHdr) > td {
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--text-primary) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--surface-muted) !important;
  padding: 11px 8px !important;
  vertical-align: middle !important;
}

/* Last row in each section has no bottom divider */
body.page-inspection-container .modV2 table.sTbl > tbody > tr:last-child:not(.trHdr) > td {
  border-bottom: 0 !important;
}

/* Observation rows: legacy <img src="/images/icons/alertVal.gif"> raster
 * (filled red+black triangle). Figma uses Lucide TriangleAlert (stroked
 * outline, red #dc2626).
 *
 * `filter:` on the raster didn't apply reliably (specificity / cascade
 * unclear) and is the wrong tool anyway — the raster's interior pixels
 * would bleed through any mask. Use `content: url(...)` to REPLACE the
 * image entirely with an inline Lucide SVG (Figma's `tailwind/red/600`
 * #dc2626 baked into the stroke). Works on every <img> regardless of src.
 *
 * `content` on a replaced element changes the rendered content. The
 * underlying `src` attribute is left alone (legacy click-handlers and
 * tooltips still work). */
body.page-inspection-container img[src*="alertVal" i] {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>") !important;
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
}

/* Status-Basis search affordance: legacy /images/SearchTest.png raster
 * → Lucide Search outline, slate-500 #64748b. */
body.page-inspection-container img[src*="SearchTest" i],
body.page-inspection-container img[src*="search" i][src*=".png" i] {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
}

/* Section-header right side has +Add and ⋮ kebab icons rendered as
 * <a class="LinkButton"> with image children. Keep them inline-flex right-aligned.
 *
 * IMPORTANT: target DIRECT-child <a> only (`> a`). The kebab's AjaxToolkit
 * PopupControlExtender renders its menu panel (.popupMenuV2) IN PLACE inside
 * this same <td>, so a descendant `a` selector also matched every menu-item
 * link and forced it into a 32×32 centered box — cramming/overlapping the
 * labels (the "garbled menu" the user saw). Direct-child scoping hits only the
 * +Add / kebab triggers; the nested menu items are styled by §22. */
body.page-inspection-container .modV2 table.sTbl tr.trHdr > td:last-child {
  text-align: right !important;
}
body.page-inspection-container .modV2 table.sTbl tr.trHdr > td:last-child > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  /* IMPORTANT: do NOT use `background: transparent !important` — the
   * shorthand resets background-image, which kills the Lucide SVG painted by
   * §8 (Img-Std-Add etc). Set only `background-color` so the image survives. */
  background-color: transparent !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  color: #475569 !important;
  text-decoration: none !important;
  border: 0 !important;
}
body.page-inspection-container .modV2 table.sTbl tr.trHdr > td:last-child > a:hover {
  background-color: #f1f5f9 !important;
}
body.page-inspection-container .modV2 table.sTbl tr.trHdr > td:last-child > a > ins {
  display: none !important;
}


/* ============================================================================
 * §6.5 — Notes + Observations EMPTY STATE (QEN-8831)
 * ----------------------------------------------------------------------------
 * Figma "Observation Details - empty state" (node 950:8654 — sections 950:9687
 * Notes / 950:9688 Observations). Replaces the legacy big teal "Add Observation"
 * / "Import Observation" call-to-action buttons with the compact section header
 * (heading + 32×32 + / kebab icon buttons) and a muted empty-state line:
 *   Notes        → "No notes yet"
 *   Observations → "No observations recorded"
 * plus a single hairline separator at the BOTTOM of each section (not under the
 * heading). The Observations header (#divNewObservation + popMenuObservations)
 * already triggers the SAME Add (mpeAddNewObservation) + Import (kebab menu)
 * flows the removed big buttons did — so no functionality is lost.
 *
 * Empty-state injection:
 *   Notes — CSS :empty::after (GetDocumentListHTML returns "" when no notes, so
 *           #divDocumentList is genuinely :empty).
 *   Obs   — JS-injected <div class="obs-empty-state"> in PopulateObservationUI
 *           (InspectionDetail.ascx): #divObservationList carries whitespace and
 *           is JS show/hide driven, so :empty can't be relied on there.
 *
 * Sources (950:9688 design-context + tokens.json):
 *   empty text  text-sm 14/20 normal, foreground (file shows near-black; mapped
 *               to --text-primary #0f172a, the heading's bound token)
 *   icon button 32×32, rounded-md 8, transparent, 16px Lucide glyph (§8/§14)
 *   separator   1px base/border #e2e8f0 at the section bottom
 * ============================================================================ */

/* (a) Remove the legacy big "Add Observation" / "Import Observation" CTA buttons. */
body.page-inspection-container #divNewObservationBlueButton,
body.page-inspection-container #divImportObservationBlueButton {
  display: none !important;
}

/* (b) No bottom border under the section heading — the lone separator sits at
 * the section bottom (Figma 950:9685 / 950:9697). Overrides §5. */
body.page-inspection-container .modV2 table.sTbl tr.trHdr > td,
body.page-inspection-container .modV2 table.sTbl > tbody > tr.trHdr > td {
  border-bottom: 0 !important;
}

/* (c) Section-bottom hairline separator beneath the list / empty-state line.
 * `:has(> #id)` carries id-level specificity → beats §4's `.modV2 > table td`
 * padding without !important games. */
body.page-inspection-container .modV2 td:has(> #divDocumentList),
body.page-inspection-container .modV2 td:has(> #divObservationList) {
  border-bottom: 1px solid var(--border-default) !important;
  padding: 0 0 12px 0 !important;
}

/* (d) Empty-state line — 14/20 normal foreground, left-aligned, 12px below the
 * heading (Figma gap-3 + the empty block's 10px top inset). */
body.page-inspection-container #divDocumentList:empty::after {
  content: "No notes yet";
  display: block;
}
body.page-inspection-container #divDocumentList:empty::after,
body.page-inspection-container .obs-empty-state {
  color: var(--text-primary) !important;
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  padding: 12px 0 10px 0 !important;
  text-align: left !important;
}

/* (e) Both section +Add affordances → 32×32 transparent icon buttons holding a
 * 16px Lucide CirclePlus (painted by §8). Notes uses an <a.Img-Std-Add> nested
 * in a float:right <div>; Observations uses a bare <div id="divNewObservation"> —
 * §5's direct-child `> a` rule reaches neither, so style both here. */
body.page-inspection-container .modV2 table.sTbl tr.trHdr > td:last-child #divNewObservation,
body.page-inspection-container .modV2 table.sTbl tr.trHdr > td:last-child a.Img-Std-Add {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  background-size: 16px 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  cursor: pointer;
}
body.page-inspection-container .modV2 table.sTbl tr.trHdr > td:last-child #divNewObservation:hover,
body.page-inspection-container .modV2 table.sTbl tr.trHdr > td:last-child a.Img-Std-Add:hover {
  background-color: var(--surface-muted) !important;
}

/* (f) Collapse the &nbsp;/whitespace gap between the Observations + and kebab so
 * the two buttons sit adjacent (Figma gap-0). font-size:0 is safe here — the
 * cell holds only background-image icon buttons + display:none controls, no
 * visible text (the "Observations" label + count live in the sibling cell). */
body.page-inspection-container .modV2 table.sTbl tr.trHdr td:has(> #divNewObservation) {
  font-size: 0 !important;
}


/* ============================================================================
 * §7 — Action buttons (Cancel + Delete + Save) — relocated to card-header right
 * ----------------------------------------------------------------------------
 * The Inspection Container page-level buttons are rendered as:
 *   <div class="InspectionButtonsContainer">
 *     <div id="divBtnCancel" class="btnInspection LinkButton Secondary">Cancel</div>
 *     <div id="divBtnDelete" class="btnInspection LinkButton">Delete</div>
 *     <div id="divBtnSave"   class="btnInspection LinkButton">Save</div>
 *   </div>
 * (Yes — DIVs styled as buttons, not <a>/<input>. Page JS binds click handlers.)
 *
 * Current legacy position: bottom-right at the end of the card body (~y=643),
 * 54×24 each. Figma places them in the card HEADER right at 36h, with Save
 * teal and Delete/Cancel slate. Relocate via absolute positioning on the
 * container (the card is `position: relative` from §2).
 *
 * Sources:
 *   Save  bg #0d9488 (base/primary)    color #eff6ff (base/primary-foreground)
 *   Delete bg #f1f5f9 (base/secondary) color #1e293b (base/secondary-foreground)
 *   Cancel bg #f1f5f9                  color #1e293b
 *   gap-between 6 (Frame 13 gap-1-5),  height 36, padding 0 16, radius 8
 *   Inter 14/20 medium 500
 * ============================================================================ */

body.page-inspection-container .modV2 {
  position: relative;
}

body.page-inspection-container .InspectionButtonsContainer {
  position: absolute !important;
  /* The subheader row sits at card.top + 24 (padding-top) + ~7 (table cell
   * leading) and is 45px tall (driven by the 18/28 page-title line-height).
   * The 36px-tall buttons cluster needs `top: card-padding-top + (45-36)/2
   * + cell-leading-offset` ≈ 35px to vertically center on the subheader text
   * (Last SIRE: <date>, page title, Inspected By:). Measured: with top=24px
   * buttons centerY=160 while text centerY=170 — 10px gap. */
  top: 35px;
  right: 24px;         /* card padding-right */
  z-index: 2;
  /* row-reverse: DOM order is Save, Delete, Cancel (the legacy float-right reads
   * them right-to-left). row-reverse renders them left-to-right as
   * Cancel | Delete | Save — matches Figma's secondary-left / primary-right
   * convention. */
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: 36px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide LinkButton's <ins>&nbsp;</ins> spacer (legacy ASP.NET trap from MEMORY) */
body.page-inspection-container .InspectionButtonsContainer ins {
  display: none !important;
}

/* Each button is a <div class="btnInspection LinkButton"> — `.btnInspection`
 * is the discriminator so we don't bleed into other LinkButtons on the page. */
body.page-inspection-container .InspectionButtonsContainer .btnInspection {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  min-width: 64px;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  cursor: pointer;
  background-image: none !important;
  white-space: nowrap;
  box-sizing: border-box;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Save (primary, teal) */
body.page-inspection-container .InspectionButtonsContainer #divBtnSave,
body.page-inspection-container .InspectionButtonsContainer [id$="divBtnSave"] {
  background-color: var(--primary) !important;
  color: #eff6ff !important;
}
body.page-inspection-container .InspectionButtonsContainer #divBtnSave:hover,
body.page-inspection-container .InspectionButtonsContainer [id$="divBtnSave"]:hover {
  background-color: var(--button-primary-hover) !important;
}

/* Delete + Cancel (secondary slate — Figma has only Delete+Save+kebab; we keep
 * Cancel here as a real button styled like Delete since both are non-primary) */
body.page-inspection-container .InspectionButtonsContainer #divBtnDelete,
body.page-inspection-container .InspectionButtonsContainer [id$="divBtnDelete"],
body.page-inspection-container .InspectionButtonsContainer #divBtnCancel,
body.page-inspection-container .InspectionButtonsContainer [id$="divBtnCancel"] {
  background-color: var(--surface-muted) !important;
  color: #1e293b !important;
}
body.page-inspection-container .InspectionButtonsContainer #divBtnDelete:hover,
body.page-inspection-container .InspectionButtonsContainer [id$="divBtnDelete"]:hover,
body.page-inspection-container .InspectionButtonsContainer #divBtnCancel:hover,
body.page-inspection-container .InspectionButtonsContainer [id$="divBtnCancel"]:hover {
  background-color: var(--border-default) !important;
}

/* Reserve right space in the header subheader row so the relocated cluster
 * doesn't overlap "Last SIRE" timestamp on the far right side of the header.
 * Cluster is ~220px wide (3×64 + 2×6 + 12 spacing) at button widths shown. */
body.page-inspection-container .modV2SubHeader {
  padding-right: 240px !important;
}


/* ============================================================================
 * §8 — Lucide icon swaps for legacy StdIcons.png sprite + raw .gif/.png
 * ----------------------------------------------------------------------------
 * Phase 2 components.css only swaps the EDIT pencil + CALENDAR globally.
 * Every other legacy icon class on this page (`Img-Std-Add`,
 * `Img-Std-AddWhite`, `Img-Std-Asterisk`, `Img-Std-HelpSmall`,
 * `ActionsMenu` kebab) still renders the colored sprite, which the user
 * correctly flagged as "old icons".
 *
 * Strategy: override `background-image` on the sprite-class anchors/divs
 * (they all carry `background-image: url(StdIcons.png)` from MainWhiteout)
 * with an inline Lucide SVG data URL. Color via SVG `stroke` attribute
 * (NOT `currentColor` — keeps it explicit so we don't inherit a wrong color
 * from a parent link rule).
 *
 * Sources (Figma tokens.json):
 *   slate-700 #334155   — primary icon (Add, AddWhite, ActionsMenu, HelpSmall)
 *   red-600   #dc2626   — destructive (Asterisk required-field indicator)
 *
 * NOTE: `.Img-Std` rules in MainWhiteout use !important; we match by
 * including !important on every property to guarantee cascade win. */

/* Img-Std-Add: "add new <thing>" affordance — 16×16 sprite cell.
 * Used as: section header +Add (Notes/Observations), inspection-level +New
 * inspection in subHeader right.
 * Figma: Lucide CirclePlus 16×16 in 32×32 transparent button. */
body.page-inspection-container .Img-Std.Img-Std-Add,
body.page-inspection-container .Img-Std-Add {
  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='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12h8'/><path d='M12 8v8'/></svg>") !important;
  background-position: center center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

/* Img-Std-AddWhite: "add new contact" affordance next to person/org dropdowns
 * (Technical Manager, Master, Chief Engineer, Superintendent, Inspector).
 * Legacy sprite shows a white "+" on green disc; Figma's analogous design
 * uses Lucide UserPlus outline. */
body.page-inspection-container .Img-Std.Img-Std-AddWhite,
body.page-inspection-container .Img-Std-AddWhite {
  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='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><line x1='19' x2='19' y1='8' y2='14'/><line x1='22' x2='16' y1='11' y2='11'/></svg>") !important;
  background-position: center center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

/* Img-Std-Asterisk: 9×9 sprite cell indicating "required field" next to label.
 * Figma uses a red `*` glyph; map to Lucide Asterisk in destructive red. */
body.page-inspection-container .Img-Std.Img-Std-Asterisk,
body.page-inspection-container .Img-Std-Asterisk {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6v12'/><path d='M17.196 9 6.804 15'/><path d='m6.804 9 10.392 6'/></svg>") !important;
  background-position: center center !important;
  background-size: 9px 9px !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

/* Img-Std-HelpSmall (`?` next to "P&C") is swapped globally to Lucide
 * CircleHelp in components.css (Help/info global swap). No per-page glyph
 * rule needed — the P&C help icon has no page-specific layout to preserve. */

/* ActionsMenu kebab: legacy anchor uses both a sprite background AND a child
 * <img src="/cp.gif" class="imageCP16x16"> (transparent shim).
 * Swap the parent anchor's sprite to Lucide EllipsisVertical;
 * hide the inner shim image so it doesn't stack a phantom 16×16 box. */
body.page-inspection-container a.ActionsMenu {
  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='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='1'/><circle cx='12' cy='5' r='1'/><circle cx='12' cy='19' r='1'/></svg>") !important;
  background-position: center center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}
body.page-inspection-container a.ActionsMenu img.imageCP16x16,
body.page-inspection-container a.ActionsMenu img[src="/cp.gif"] {
  visibility: hidden !important;
}


/* ============================================================================
 * §9 — Alignment fixes
 * ----------------------------------------------------------------------------
 * Measured: card.x=72, card padding-left=24 → content should start at x=96.
 * Live: subHeader.x=102, pageTitle.x=104, form-grid column-1 at x=102.
 * Diff: 6-8px extra inset.
 *
 * Root cause: the OUTER table inside .modV2 (and the inner subHeader table)
 * carries legacy cellpadding attributes (typically `cellpadding="3"` or `6`).
 * cellpadding maps to TD `padding`. Setting `padding-left: 0` on first-TD of
 * each row zeroes the unwanted inset while preserving label-input gaps
 * (right-padding on labels handled in §4).
 * ============================================================================ */

body.page-inspection-container .modV2 > table,
body.page-inspection-container .modV2 > table > tbody > tr > td > table,
body.page-inspection-container .modV2SubHeader > table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.page-inspection-container .modV2SubHeader > table > tbody > tr > td:first-child,
body.page-inspection-container .modV2 > table > tbody > tr > td:first-child {
  padding-left: 0 !important;
}

body.page-inspection-container .modV2SubHeader > table > tbody > tr > td:last-child,
body.page-inspection-container .modV2 > table > tbody > tr > td:last-child {
  padding-right: 0 !important;
}


/* ============================================================================
 * §10 — Legacy semantic colors → Figma token equivalents
 * ----------------------------------------------------------------------------
 * Two legacy elements were preserved per the chosen scope ("preserve real
 * fields, apply Figma's visual language") but rendered with raw legacy
 * red/blue hex values that clash with the Figma palette:
 *   - `.textPastDue`  — Last SIRE overdue date in #ff0000 bright red
 *   - `<a>` "2 Months" — Window value in legacy navy `#4f72a4` bold
 *
 * Map both into the Figma palette so they stop reading as "old".
 *   destructive  #dc2626  (tailwind red-600 — Figma's destructive token)
 *   slate-700    #334155  (matches input value color)
 * ============================================================================ */

body.page-inspection-container .modV2 .textPastDue,
body.page-inspection-container .modV2 a.textPastDue {
  color: #dc2626 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

/* "2 Months" Window value: rendered as `<a id="..._lbWindow">` inside
 * `<div id="divWindow">` inside the TD — NOT a direct child of TD, so the
 * generic `td > a` selector doesn't match. Pin by ASP.NET id suffix. */
body.page-inspection-container .modV2 #divWindow > a,
body.page-inspection-container .modV2 [id$="_lbWindow"] {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

/* Same treatment for any other legacy <a> inside the form-grid that uses
 * `color: <legacy-navy>` for non-button affordances. The form has inline
 * "edit" / "add" anchors that fall through to MainWhiteout's a:link rule. */
body.page-inspection-container .modV2 td > div > a:not(.LinkButton):not(.ActionsMenu):not([class*="Img-Std"]) {
  color: #334155 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}


/* ============================================================================
 * §11 — Calendar qDiv wrappers — double-border fix
 * ----------------------------------------------------------------------------
 * The per-page calendar reskin is supplied by datePicker.css broad-scope
 * rules (body.sidebar-nav .qDiv:has(> input.qCal)): the .qDiv wrapper gets
 * the visible chrome (1px slate-200 border, 8px radius, white bg, padding
 * for the calendar icon overlay). The wrapper IS the textbox.
 *
 * BUT §4 above paints chrome on `input.qCal` too — same border, same
 * radius, same white bg — so each date field rendered as a textbox inside
 * a textbox (double ring). Neutralize the inner input's chrome so only the
 * wrapper is visible. Keep height/padding from §4 so value text stays
 * vertically centered.
 * ============================================================================ */

body.page-inspection-container .modV2 .qDiv > input.qCal {
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}


/* ============================================================================
 * §12 — Inspection History slide-out tab (DOM-only widget, not in Figma)
 * ----------------------------------------------------------------------------
 * JS-injected `#inspectionHistoryWindow` wraps a vertical click tab
 * `#btnOpenInspHistoryPanel` and an off-screen list panel
 * `#inspectionHistoryListContainer`. Live probe (2026-05-14):
 *   - tab at 47,158 30×115, bg #2d3663 navy, color #fff, 12/400, radius 0
 *
 * Per chosen scope ("preserve current functionality, restyle only"): KEEP
 * the click-to-expand behavior, but the saturated navy strip intrudes into
 * the sidebar gutter and reads as legacy chrome. Restyle to a muted slate
 * affordance so it harmonizes with the Phase 3 sidebar nav while remaining
 * a discoverable click target.
 *
 * Sources (tokens.json):
 *   bg     base/secondary       #f1f5f9
 *   color  base/muted-foreground #475569
 *   border base/border          #e2e8f0
 *   radius rounded-md (8) — outer corners only (right edge — the tab sits
 *          flush against the sidebar so the left corners stay square)
 * ============================================================================ */

body.page-inspection-container #btnOpenInspHistoryPanel {
  background-color: var(--surface-muted) !important;
  background-image: none !important;
  color: var(--text-muted) !important;
  font-family: "Inter", sans-serif;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid var(--border-default) !important;
  border-left: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body.page-inspection-container #btnOpenInspHistoryPanel:hover {
  background-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* The slide-out list container itself (off-screen until clicked) — give it
 * the same card-like chrome as the inspection card when it slides into view. */
body.page-inspection-container #inspectionHistoryListContainer {
  background-color: #ffffff !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* --- Open/closed layout (QEN-8865: "history expands to the RIGHT of the tab;
 * the tab stays put") --------------------------------------------------------
 * Prior behavior (QEN-8801 widening) opened the list to the LEFT of the tab,
 * so the "Inspection History" tab migrated to the panel's right edge and the
 * list overran the form's top-left — reported as "misplaced". Per feedback the
 * tab must STAY anchored at the card's left edge (its closed-state spot) and
 * the list must expand to its RIGHT.
 *
 * This layout is deliberately STATE-INDEPENDENT (applies closed, opening, and
 * open): the tab is pinned to the window's left edge in every frame and the
 * list sits to its right; only the window WIDTH changes between closed (30px)
 * and open (432px), which the legacy panelAnimate() drives via a jQuery width
 * tween (target bumped 282 -> 432 to match this layout).
 *
 * Why not gate on the animating width: an earlier version hooked
 * `[style*="width: 282px"]`, i.e. the inline width the tween lands on only at
 * its FINAL frame. For the whole 250ms the old legacy geometry ran (the box
 * slid left, carrying the floated tab out to the RIGHT); at the terminal frame
 * this layout snapped in and the tab jumped back to the left — the "label
 * expands right, then vanishes and only the left one stays" glitch. Pinning the
 * tab from frame 1 makes the window simply grow rightward and unveil the list.
 *
 * `left:-25` and box `left:0`/`width:432` (all !important) neutralize the legacy
 * box/window left-slide animations (jQuery still sets those inline; CSS wins, so
 * nothing slides). The window WIDTH is deliberately NOT set here so the jQuery
 * width tween is free to animate 30<->432. `z-index` lifts the subtree above the
 * form's positioned controls (the qDiv / date-picker wrappers are
 * position:relative and later in the DOM, so a z-index:auto window paints
 * BENEATH them); box `overflow:visible` stops the zero-height wrapper from
 * clipping its absolute children (the window itself still clips to its rect). */
body.page-inspection-container #inspectionHistoryWindow {
  left: -25px !important;
  z-index: 30 !important;            /* above the form controls, below the sticky header (900) */
}

body.page-inspection-container #inspectionHistoryWindow #inspectionHistoryBox {
  left: 0 !important;
  right: auto !important;
  width: 432px !important;
  overflow: visible !important;      /* absolute children collapse the box to 0h — don't clip them */
}

/* Tab: pinned to the window's left edge (its closed-state spot) in every state.
 * Rotated 90deg so the 117×30 box renders as a 30px-wide × 117px-tall vertical
 * strip; origin 15,15 lands its visual left edge flush at the window's left. */
body.page-inspection-container #inspectionHistoryWindow #btnOpenInspHistoryPanel {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  margin: 0 !important;
  float: none !important;
  width: 117px !important;
  height: 30px !important;
  transform: rotate(90deg) !important;
  transform-origin: 15px 15px !important;
  z-index: 2 !important;             /* above the list within the window */
}

/* List: laid out to the RIGHT of the 30px tab, filling the box. Collapsed
 * (30px window, overflow-x:hidden) it is clipped out of view; as the window
 * grows to 432 it is unveiled left->right. (beats the .ascx <style> block's
 * `width: 250px` — no inline width is ever set on the list itself.) */
body.page-inspection-container #inspectionHistoryWindow #inspectionHistoryListContainer {
  position: absolute !important;
  left: 30px !important;
  top: 0 !important;
  right: 0 !important;
  width: auto !important;
  float: none !important;
}

/* --- Row colors (align the list CONTENT to the design system) ---------------
 * The chrome above is on-palette, but the legacy JS paints the row states with
 * colors that appear nowhere in DESIGN.md: the SELECTED row gets an inline
 * `#FFFFC0` (bright yellow) via styleRowSelected(), and the ascx <style> block
 * hovers rows to `#e5f1fd` (legacy blue). Replace both with the refresh's
 * selected/hover convention — a light `rgba(var(--primary-tint), α)` indigo
 * tint (selected ≈0.10, hover ≈0.06), matching grid.css / historyPopup.css /
 * company-info-popup.css. The selected row is the one whose radio shows
 * RadioOn, so key off that; `!important` is required to beat the JS inline bg
 * (a stylesheet !important outranks an inline non-important declaration) and
 * the ascx hover rule's own !important. */
body.page-inspection-container #inspectionHistoryListContainer .trSelect:has(img.imgSelect[src*="RadioOn"]) {
  background-color: rgba(var(--primary-tint), 0.10) !important;
}
body.page-inspection-container #inspectionHistoryListContainer .trSelect:hover {
  background-color: rgba(var(--primary-tint), 0.06) !important;
}
/* Selected + hovered: keep it distinct (a plain hover would otherwise sit
 * LIGHTER than the selected tint and read as "de-selected on hover"). */
body.page-inspection-container #inspectionHistoryListContainer .trSelect:has(img.imgSelect[src*="RadioOn"]):hover {
  background-color: rgba(var(--primary-tint), 0.14) !important;
}
/* Row text → design foreground (#0f172a) instead of the browser default pure
 * black; the date/port metadata line reads as muted. */
body.page-inspection-container #inspectionHistoryListContainer,
body.page-inspection-container #inspectionHistoryListContainer td {
  color: var(--text-primary) !important;
  font-family: "Inter", sans-serif;
}
/* Right-aligned date / port column (last cell) sits flush against the card edge
 * (table cellpadding is only 3px) — give it a gutter. td ignores margin, so
 * this is padding-right on the cell. */
body.page-inspection-container #inspectionHistoryListContainer .trSelect > td:last-child {
  padding-right: 16px !important;
}


/* ============================================================================
 * §13 — ValHighlight "no match" validation warnings
 * ----------------------------------------------------------------------------
 * AutoComplete combos (Technical Manager, Master, Port, Inspector, Chief
 * Engineer, Superintendent) emit `<div class="ValHighlight">` warning bars
 * beneath the input when the typed value doesn't match the autocomplete
 * dictionary. Live probe (2026-05-14):
 *   - 5 instances visible: ~164×26 / ~103×26
 *   - bg #ffffc0 (bright yellow), border 1px #e2e8f0, radius 0
 *
 * Per scope: preserve the WARNING functionality (still signals "no match"),
 * but tone down the saturated yellow to an amber muted that fits the Figma
 * destructive/warning palette and doesn't visually compete with the form.
 *
 * Figma doesn't have an explicit "warning" token; use tailwind amber-50/200
 * mapping: bg amber-100 (#fef3c7) + border amber-200 (#fde68a) + amber-800
 * text. Rounded-sm (6) matches the form's general radius cadence.
 * ============================================================================ */

body.page-inspection-container .modV2 .ValHighlight {
  background-color: #fef3c7 !important;
  background-image: none !important;
  border: 1px solid #fde68a !important;
  border-radius: 6px !important;
  color: #92400e !important;
  font-family: "Inter", sans-serif;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  box-shadow: none !important;
  /* Slight top margin so it doesn't kiss the input above */
  margin-top: 4px !important;
}


/* ============================================================================
 * §14 — Kebab "Actions" menu pinned to card's far right
 * ----------------------------------------------------------------------------
 * User feedback: "three dot menu should be to the most right".
 *
 * Live probe (2026-05-14 viewport 1520):
 *   a.ActionsMenu (id endsWith `_lbPopupMenu`) at x=1200, y=110, 16×16
 *   InspectionButtonsContainer (Cancel/Delete/Save) at right: 24px → x=1225..1455
 *   Card.right = 1481 → Save end at 1455 → 26px space right of Save
 *
 * Strategy: absolute-position the kebab to the card's top-right corner
 * (top: 32, right: 24) and shift the buttons cluster LEFT (right: 64) to
 * reserve 32px + 8px gap for the kebab. Visual order from right:
 *   [kebab] [gap] [Save] [Delete] [Cancel]
 *
 * Note: `popMenuActions` is a ComponentArt PopupMenu — its menu items
 * absolutely-position based on click coordinates (jQuery `position()`),
 * so absolute-positioning the trigger anchor doesn't break the popup. */

/* The page has TWO a.ActionsMenu kebabs: the inspection-level one
 * (popMenuActions) in the card header, and the observations-level one
 * (popMenuObservations) in the Observations section header next to its +Add.
 * Both need the bare 32×32 icon look (strip the LinkButton pill chrome), but
 * ONLY the inspection kebab is absolutely pinned to the card top-right. The
 * old bare `a.ActionsMenu { position:absolute; top; right }` dragged BOTH to
 * the top, where they stacked — the later-in-DOM observations menu landed on
 * top (so the top kebab opened the Observations menu) and the Observations
 * section was left with no kebab at all.
 *
 * §14a — shared icon-button visual (both kebabs). */
body.page-inspection-container .modV2 a.ActionsMenu {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  background-size: 16px 16px !important;
}
body.page-inspection-container .modV2 a.ActionsMenu:hover {
  background-color: var(--surface-muted) !important;
}

/* §14b — pin ONLY the inspection kebab (popMenuActions) to the card top-right.
 * The observations kebab keeps the §14a visual but stays inline in its
 * section header. */
body.page-inspection-container .modV2 a.ActionsMenu[id*="popMenuActions"] {
  position: absolute !important;
  /* Kebab is 32h. Subheader text centers at y≈170 from card.top=117 → kebab
   * needs `top: 170 - 16 - 117 = 37px` to share that center. Without this
   * bump (default top:32) kebab centerY=166 — 4px above the text baseline. */
  top: 37px !important;
  right: 24px !important;
  z-index: 3 !important;
}

/* Shift Cancel/Delete/Save cluster LEFT to clear room for the absolute
 * kebab at right:24 + 32 width + 8 gap = ~64 */
body.page-inspection-container .InspectionButtonsContainer {
  right: 64px !important;
}


/* §15 historical note (2026-05-14): equal-column widths attempted via
 * table-layout:fixed FAILED because row 2 had 10 cells (P&C as its own
 * column-pair) while other rows had 8. Resolved structurally in
 * InspectionDetail.ascx — P&C is now inline inside the Type cell so all
 * rows are 8 cells. Equal-column rules below are re-enabled accordingly. */

/* ============================================================================
 * §16 — Inline P&C inside Type cell (row 2)
 * ----------------------------------------------------------------------------
 * Markup (InspectionDetail.ascx tblInspectionData row 2) was restructured so
 * row 2 matches the other rows' 8-cell layout. The P&C label + checkbox now
 * live as a <label class="divPC-inline"> next to ddlType inside divType.
 *
 * jQuery deps preserved: `#divPC input:checkbox` (`InspectionDetail.ascx`
 * lines 947, 1609) and `#cbPC` change handler (line 2241) still resolve.
 * ============================================================================ */

body.page-inspection-container #tblInspectionData #divType.divType-with-pc {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

body.page-inspection-container #tblInspectionData .divPC-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Inter", sans-serif;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  line-height: 20px !important;
}

body.page-inspection-container #tblInspectionData .divPC-inline #divPC {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-inspection-container #tblInspectionData .divPC-inline #cbPC {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--primary) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

body.page-inspection-container #tblInspectionData .divPC-inline .divPC-text {
  vertical-align: middle !important;
}

/* ============================================================================
 * §17 — Legacy Img-Std-Asterisk → Lucide Asterisk
 * ----------------------------------------------------------------------------
 * Phase 2 components.css globally swaps Img-Std-Edit + calendar + Help/HelpSmall
 * (per Q88Web memory: inspection-container-icon-swap-trap.md). The P&C help `?`
 * (Img-Std-HelpSmall) is now covered by that global Help/info swap, so only the
 * required-field marker remains page-specific here:
 *   - Img-Std-Asterisk: required-field marker — Lucide `Asterisk` (red)
 * Use `content: url("data:image/svg+xml;...")` so we replace rendered content
 * regardless of `src` attribute (legacy clearpixel.gif preserved for tooltips).
 * ============================================================================ */

body.page-inspection-container img.Img-Std-Asterisk,
body.page-inspection-container .Img-Std.Img-Std-Asterisk {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6v12'/><path d='M17.196 9 6.804 15'/><path d='m6.804 9 10.392 6'/></svg>") !important;
  width: 10px !important;
  height: 10px !important;
  vertical-align: middle !important;
  margin-left: 2px !important;
  background-image: none !important;
}

/* ============================================================================
 * §18 — Row alignment + equal-ish column-pairs
 * ----------------------------------------------------------------------------
 * Now that all 4 rows have 8 cells, columns naturally align across rows.
 * Apply nowrap to label cells (Cost (US$) was wrapping to 2 lines) and a
 * stable min-width on input cells so visual rhythm doesn't squeeze when one
 * cell's content is narrower than its row-mate.
 *
 * Targeted at `#tblInspectionData` only — does NOT use table-layout:fixed
 * (that broke Status*'s natural width on the previous attempt).
 * ============================================================================ */

body.page-inspection-container #tblInspectionData {
  width: 100% !important;
  table-layout: fixed !important;
}

/* Label cells (odd nth-child): per-column explicit width sized to longest
 * label in that column. table-layout:fixed propagates these to every row.
 *   col 1 (1st td): Activity / Type / Port Name / Operation        → 92px
 *   col 3 (3rd td): Status / Status Basis / Inspector / Cost (US$) → 108px
 *   col 5 (5th td): Inspected / Issued / Reminder / Window         → 90px
 *   col 7 (7th td): Technical Manager / Master / C/E / Superint.   → 150px
 * Sum 440px; remaining ~920px distributed equally among 4 input cells. */
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(odd) {
  white-space: nowrap !important;
  padding-right: 8px !important;
}
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(1) {
  width: 92px !important;
}
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(3) {
  width: 108px !important;
}
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(5) {
  width: 90px !important;
}
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(7) {
  width: 150px !important;
}

/* Input cells (even nth-child) — 4 input columns share remaining width
 * equally. With table-layout:fixed, percentage on first-row even cells
 * propagates to every row, locking columns to identical widths regardless
 * of inner control intrinsic size. */
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) {
  width: calc((100% - 440px) / 4) !important;
}

/* Stretch inputs to fill their input cell so each column shows the same
 * visual width — overrides legacy fixed `style="width:Npx"` on the controls.
 * Excludes #ddlType (kept narrow at 90px to leave room for P&C inline). */
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) input.NormalTextBox,
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) input.RoundCornerTextbox,
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) input[type="text"],
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) select:not(#ddlType):not([id$="_ddlType"]),
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) span.qDiv {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Keep ddlType compact so P&C can sit inline next to it inside divType */
body.page-inspection-container #tblInspectionData #divType select#ddlType,
body.page-inspection-container #tblInspectionData #divType select[id$="_ddlType"] {
  width: 90px !important;
  flex: 0 0 auto !important;
}

/* Wrappers that hold a single input (divActivity, divPortName, etc) need to
 * be block-level so width:100% on the inner input expands to the cell. */
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) > div:not(#divType) {
  display: block !important;
  width: 100% !important;
}

/* ============================================================================
 * §18.5 — Status Basis trailing-icon overflow fix
 * ----------------------------------------------------------------------------
 * (Calendar qDiv portion removed — see §11 note. Broad datePicker.css rule
 * now provides relative positioning + absolute icon overlay on the .qDiv.)
 *
 * With input cells expanded to 218px+ and the inner input stretched to 100%,
 * the trailing search icon (`#divLookupStatusBasis`) was pushed to a new line
 * below the input — used to sit inline because the cell was narrow enough.
 *
 * Fix: make the wrapper a relative-positioned container, anchor the icon to
 * the right edge absolutely, and pad the input right by the icon width so
 * value text doesn't overlap the icon.
 * ============================================================================ */

/* Status Basis: wrap is .StatusBasisMainContainer > div (unclassed) > [input.NormalTextBox + #divLookupStatusBasis]
 * The unclassed div is the immediate parent of the input and search icon. */
body.page-inspection-container #tblInspectionData [id$="_txtBasis"] {
  width: 100% !important;
  padding-right: 30px !important;
  box-sizing: border-box !important;
}

body.page-inspection-container #tblInspectionData #divLookupStatusBasis {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* Promote the unclassed parent div of txtBasis + #divLookupStatusBasis to a
 * positioned container so the absolute search icon resolves to its right edge. */
body.page-inspection-container #tblInspectionData [id$="_txtBasis"]:has(+ #divLookupStatusBasis),
body.page-inspection-container #tblInspectionData #divLookupStatusBasis {
  /* anchor below */
}

body.page-inspection-container #tblInspectionData .StatusBasisMainContainer > div:first-child {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

/* ============================================================================
 * §19 — Header row alignment ("Last SIRE: <date>" wrap fix)
 * ----------------------------------------------------------------------------
 * Header structure (InspectionContainer.ascx outer header `<table width="970">`):
 *   - Cell 0: Vessel title
 *   - Cell 1: Inspected By: <textbox>
 *   - Cell 2: nested table — TD1 "Last SIRE: <date>" + TD2 "+ kebab"
 * The §14 absolute kebab repositioning + the narrow inner TD1 (50% of 317px
 * = ~158px) caused "Last SIRE: Oct 16, 2025" to wrap to two lines. Fix:
 *   - white-space:nowrap on the SIRE label + date span
 *   - widen the SIRE inner TD by removing the lbNewInspection sibling's flex
 *     (kebab is absolute, +Add fits in remaining room)
 * ============================================================================ */

body.page-inspection-container #spLastSIRELabel,
body.page-inspection-container #spLastSIREInspectionDate,
body.page-inspection-container #spLastCDILabel,
body.page-inspection-container #spLastCDIInspectionDate {
  white-space: nowrap !important;
}

/* The TD containing #spLastSIRELabel — let it grow to fit the whole string */
body.page-inspection-container td:has(> #spLastSIRELabel) {
  white-space: nowrap !important;
  width: auto !important;
}


/* ============================================================================
 * §20 — Activity + Status dropdown fixes
 * ----------------------------------------------------------------------------
 * (a) ACTIVITY (and every other native <select> in the form):
 *     §4 sets `appearance: none` + `background-image: none !important` to kill
 *     MainWhiteout's legacy gradient. With both off, the native arrow is
 *     suppressed AND no replacement chevron renders → selects look like flat
 *     text inputs. Phase 2 components.css paints a Lucide ChevronDown on
 *     `body.sidebar-nav select`, but our §4 rule (loaded later) clobbers it.
 *     Restore the chevron explicitly on form selects, scoped to the inspection
 *     card so we don't touch anything else.
 *
 * (b) STATUS (uc:DropDownListGrouped → `#ddl_cus.dropDownCusGrp`):
 *     The control's createDropDown() JS reads `$(source).width()` off the
 *     hidden source <select id="ddl" class="Hidden">. With display:none and
 *     jQuery's quirky measurement chain, the returned width is ~1385 (≈ inner
 *     card width) — the JS then writes `width:1385.4px` inline on the <dl>,
 *     <dt>, and <dt a>. Widget overflows the table.
 *     CSS-only override: force the dl/dt/a/dd-ul cluster to fill its cell at
 *     100% with sane min/max, so the JS-injected inline widths are visually
 *     neutralized. Behavior preserved (open/close, kbd nav, value sync).
 *     Match the Activity select chrome (32h, radius 8, slate-200 border, Inter
 *     14/20, padded for chevron) so Status visually matches its row neighbor.
 * ============================================================================ */

/* (a) Activity + form selects + Inspected By header dropdown — restore chevron + chevron padding.
 * Includes `.modV2SubHeader select` because the Inspected By dropdown sits in the header (NOT
 * inside #tblInspectionData) and §4's `background-image: none !important` killed its native arrow. */
body.page-inspection-container #tblInspectionData select:not([class*="dx"]),
body.page-inspection-container .modV2SubHeader select:not([class*="dx"]) {
  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;
  padding-right: 32px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
body.page-inspection-container #tblInspectionData select::-ms-expand,
body.page-inspection-container .modV2SubHeader select::-ms-expand {
  display: none !important;
}

/* Inspected By dropdown width — Figma 296:8782 puts the dropdown at 333px (after a 100px
 * label gutter). The legacy markup ships inline `style="width:180px"` on `ddlInspectionOrgs`
 * which §4 doesn't touch (it normalizes height/border/radius but not width). Override here so
 * the dropdown matches Figma without editing the inline style on the markup.
 *
 * Conservative cap at 260px in the impl (not the full 333) because the header preserves
 * "Last SIRE: <date>" + "Last CDI: <date>" + Cancel/Delete/Save/kebab on the right, which
 * Figma doesn't have. 260px gives the dropdown breathing room without crowding those
 * preserved elements at ~1361px card width. */
body.page-inspection-container .modV2SubHeader #ddlInspectionOrgs,
body.page-inspection-container .modV2SubHeader [id$="_ddlInspectionOrgs"] {
  width: 260px !important;
  min-width: 260px !important;
}

/* (b) Status dl widget — neutralize JS-injected inline widths.
 * `position: relative` is critical: the <dd> popup is `position: absolute`
 * (Phase 2 components.css §12.5.2), and without a relative dl the popup's
 * containing block becomes .modV2 (§14 made the card relative) — width:100%
 * then resolves to ~1200px and the popup overflows the table by ~7×. */
body.page-inspection-container #divStatus .dropDownCusGrp,
body.page-inspection-container #tblInspectionData .dropDownCusGrp {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.page-inspection-container #divStatus .dropDownCusGrp dt,
body.page-inspection-container #tblInspectionData .dropDownCusGrp dt {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* The clickable `<dt><a>` is the visible chrome — match Activity's select */
body.page-inspection-container #divStatus .dropDownCusGrp dt a,
body.page-inspection-container #tblInspectionData .dropDownCusGrp dt a {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  padding: 6px 32px 6px 12px !important;
  margin: 0 !important;
  font-family: "Inter", sans-serif;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #0f172a !important;
  background-color: #ffffff !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;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.page-inspection-container #divStatus .dropDownCusGrp dt a:hover,
body.page-inspection-container #divStatus .dropDownCusGrp dt a:focus,
body.page-inspection-container #tblInspectionData .dropDownCusGrp dt a:hover,
body.page-inspection-container #tblInspectionData .dropDownCusGrp dt a:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15) !important;
  outline: none !important;
}

/* The hidden `<span class="value">` inside the dt a stays hidden (Main.css
 * already does this, but JS-injected inline can defeat scope rules) */
body.page-inspection-container #divStatus .dropDownCusGrp dt a span.value,
body.page-inspection-container #tblInspectionData .dropDownCusGrp dt a span.value {
  display: none !important;
}

/* Popup `<dd>`: pin to bottom-left of the relative <dl>, full trigger width.
 * The `<ul>` inside carries an inline min-width from JS (source width + 50);
 * override with min-width:0 + width:100% so popup matches trigger. */
body.page-inspection-container #divStatus .dropDownCusGrp dd,
body.page-inspection-container #tblInspectionData .dropDownCusGrp dd {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100 !important;
}

body.page-inspection-container #divStatus .dropDownCusGrp dd ul,
body.page-inspection-container #tblInspectionData .dropDownCusGrp dd ul {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 4px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}


/* ============================================================================
 * §21 — Vertical alignment fixes (Activity + Status labels vs dropdowns)
 * ----------------------------------------------------------------------------
 * Two misalignment causes spotted post-§20:
 *
 *   (a) Activity (#divActivity): wraps the <select> AND an inline
 *       <asp:RequiredFieldValidator> rendered as a span. With §18's
 *       `display: block` on the div, the SELECT anchors to the TOP of the
 *       50h-tall div while the validator (~18h) sits below — the SELECT then
 *       sits 9px above the row's label center.
 *       Fix: switch the wrapper to `display: flex; align-items: center`
 *       (still 100% wide for column propagation, but the inner controls now
 *       vertical-center regardless of validator/asterisk siblings).
 *
 *   (b) Status (#tdStatus): legacy markup carries inline
 *       `style="padding-top:0px !important; min-width:180px;"`. The forced
 *       padding-top:0 cancels §4's 6px symmetric padding, so the dl widget
 *       anchors to the top edge of the cell — 12px above the label center.
 *       Fix: override the inline padding-top to restore the 6px top padding
 *       (must out-specificity the !important inline).
 * ============================================================================ */

/* (a) Activity (and every other even-cell wrapper div EXCEPT #divType which
 * uses its own flex layout via §16) — flex-center inner controls. */
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) > div:not(#divType):not(.StatusBasisMainContainer) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-height: 32px !important;
}

/* The SELECT/INPUT child should flex to fill (was width:100% via §18) and the
 * validator span sits beside it at line-height — does not push the field.
 *
 * `> div` covers uc:Person + uc:Organization controls — these render an unnamed wrapper
 * `<div>` between the outer #div<Field> (flex from §21) and the autocomplete input.
 * The wrapper carries `style="width:Npx"` from the control's `width=` attr (150 for Person,
 * 128 for Organization), capping the inner input at 225/241px on wide viewports. Adding
 * `> div` to the flex-fill list lets those intermediate wrappers expand with the column.
 *
 * `:not(.pnlCalQ88):not(.modPopPnl)` — CalendarControl.ascx's <asp:Panel pnlCal>
 * and <uc:Modal>'s <asp:Panel pnlModalPopup> (e.g. the "Add Organization" dialog
 * behind Technical Manager/Superintendent/etc.'s "[add new]" link) both render
 * as a `<div>` direct child of the same field wrapper (e.g. #divInspected,
 * #divTechnicalManager), sitting inert at display:none until opened. Without
 * this exclusion, `> div` caught them too: harmless while hidden, but once
 * shown — the calendar via Q88.DatePicker.js's position:fixed anchoring, the
 * modal via its own ModalPopupExtender positioning — `width:100% !important`
 * resolves against the viewport (the positioned element's containing block)
 * instead of the field cell, blowing both popups out to full screen width. */
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) > div:not(#divType):not(.StatusBasisMainContainer) > select,
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) > div:not(#divType):not(.StatusBasisMainContainer) > input[type="text"],
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) > div:not(#divType):not(.StatusBasisMainContainer) > span.qDiv,
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) > div:not(#divType):not(.StatusBasisMainContainer) > .dropDownCusGrp,
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) > div:not(#divType):not(.StatusBasisMainContainer) > div:not(.pnlCalQ88):not(.modPopPnl) {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* uc:Person / uc:Organization nest a SECOND wrapper div between the outer flex child and the
 * autocomplete input. Force that wrapper to 100% too so the input stretches fully.
 *
 * `:not(.modPopPnl)` — ComboBoxInspectionPerson.ascx (Master/Chief Engineer/
 * Inspector/Superintendent — anything on <uc:Person>) wraps its whole markup in
 * an extra `<div style="display:inline-block">`, one level deeper than
 * ComboBoxOrganization.ascx. That puts its "Add New Person" <uc:Modal>'s
 * `.modPopPnl` right at this THIRD level (field-wrapper > that inline-block
 * div > modPopPnl), so the flex-fill `> div > div` reached it too — same
 * dormant-until-shown full-viewport-width bug as the other two. */
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) > div:not(#divType):not(.StatusBasisMainContainer) > div > div:not(.modPopPnl) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* RequiredFieldValidator / range-validator siblings (rfvActivity, rfvDdl for
 * Status, rvCost for Cost): reserve a COMPACT trailing slot inside the column
 * so the re-skinned red triangle-alert icon (§25) sits neatly to the RIGHT of
 * the field. The field flex-shrinks ~20px (min-width:0 from the rule above lets
 * it) to make room.
 *
 * Was: `flex:0 0 0; width:0; overflow:visible` — a zero-width spill that let
 * the legacy 20px yellow "Required" box overflow onto the ADJACENT column's
 * label ("Status"/"Basis"), reading as a misplaced warning icon (QEN-8865
 * feedback). The ~20px the old trick reclaimed isn't worth the collision, and
 * the icon only paints on a failed validation anyway. */
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) > div:not(#divType):not(.StatusBasisMainContainer) > span[id*="rfv"],
body.page-inspection-container #tblInspectionData > tbody > tr > td:nth-child(even) > div:not(#divType):not(.StatusBasisMainContainer) > .ValTipRequired {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: 6px !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* (b) Status cell padding was previously set to `padding-top:0 !important`
 * inline on `#tdStatus` in InspectionDetail.ascx — likely a legacy workaround
 * for the dl widget anchoring oddly when its inner ul popup was wider than
 * the cell. With §20's width neutralization, the workaround is no longer
 * needed and the inline padding-top:0 was removed at markup level (it can't
 * be overridden from CSS — style-attribute !important beats any selector).
 * No CSS rule needed here. */


/* ============================================================================
 * §22 — Kebab Actions popup body (popupMenuV2)
 * ----------------------------------------------------------------------------
 * The kebab anchor (a.ActionsMenu, §14) opens an AjaxControlToolkit
 * PopupControlExtender whose panel has class `popupMenuV2`. Legacy
 * MainWhiteout.css §“Popup Menu - Actions, Columns, Grid Filtering”
 * (~L2046) sets every `.popupMenuItem` to `height: 20px; overflow: hidden`
 * and positions the inner `.popupMenuItemContent` absolutely with
 * `top: 50%; margin-top: -8px` — a workaround that only holds when the
 * content fits on one line.
 *
 * Inspection Container's menu items include 2-word labels that wrap inside
 * the 130px panel (e.g. “Officer Matrix Compliance” → 2 lines, content
 * computed height = 40px); the 20px overflow:hidden clips the second line
 * AND half of the first, producing the garbled “iew”/“ort” fragments the
 * user reported under the Save button.
 *
 * components.css §“9.3 popupMenuV2 — Actions / Columns popup” (L673) already
 * ships the correct refresh chrome — auto-height items, padding-driven
 * spacing, static (in-flow) content, modern card chrome — but it’s gated on
 * `.q88-refresh` / `body.page-questionnaire`. InspectionContainer's body
 * class is `BodyStyle sidebar-nav page-inspection-container` (no
 * .q88-refresh), so those refresh rules don’t apply here.
 *
 * Fix: mirror the components.css §9.3 chrome scoped to
 * body.page-inspection-container. Identical rule shape so behavior matches
 * other refreshed pages.
 * ============================================================================ */

/* Chrome mirrors the Certificates page menu (certificates.css §"popupMenuV2",
 * the reference the user pointed to): white card, soft shadow, min-width floor
 * so short menus aren't cramped. */
body.page-inspection-container .popupMenuV2 {
  border-radius: 8px;
  box-shadow: var(--raw-shadow-lg);
  border: 1px solid var(--border-subtle);
  background-image: none;
  background-color: var(--background);
  overflow: hidden;
  padding: 4px;
  min-width: 160px;
}

/* The inspection kebab (popMenuActions) is absolutely pinned to the card's far
 * top-right (§14b right:24px), so its PopupControlExtender opens the menu
 * panel RIGHTWARD — past the card/viewport edge — clipping the labels
 * ("Officer Matrix Complian…"). Re-anchor the panel's RIGHT edge under the
 * kebab so it opens leftward into the card instead. The panel's containing
 * block is .modV2 (position:relative), and the kebab is also at right:24px, so
 * matching `right:24px` aligns them. `!important` beats the extender's inline
 * left/top. Scoped to popMenuActions's panel so the observations popup (whose
 * extender positions correctly off its inline kebab) is untouched. */
body.page-inspection-container .popupMenuV2[id*="popMenuActions"] {
  left: auto !important;
  right: 24px !important;
}

body.page-inspection-container .popupMenuV2 .popupMenuItem {
  /* !important defends against MainWhiteout's `height:20px; overflow:hidden`
   * clip so the item height follows its content instead of being squashed. */
  height: auto !important;
  overflow: visible !important;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 20px;
}

body.page-inspection-container .popupMenuV2 .popupMenuItem:hover {
  background-color: var(--surface-accent-hover);
}

body.page-inspection-container .popupMenuV2 .popupMenuItem .popupMenuItemContent {
  /* Reset legacy `position: absolute; top: 50%` so content joins normal flow. */
  position: static !important;
  top: auto !important;
  margin-top: 0 !important;
}

/* Item = icon + single-line label, left aligned (matches Certificates). nowrap
 * keeps each option on one line; the panel width (control Width + min-width)
 * gives it room. font-weight 500 / 13px is the refresh menu type. */
body.page-inspection-container .popupMenuV2 .popupMenuItem a,
body.page-inspection-container .popupMenuV2 .popupMenuItem .popupMenuItemContent a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

/* Menu-item icons — neutral 16px glyphs (matches Certificates). */
body.page-inspection-container .popupMenuV2 .popupMenuItem img {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
}

/* Divider rows between menu groups (legacy `.Spacer` row contains a 1px
 * gif spacer image — replace with a hairline border). */
body.page-inspection-container .popupMenuV2 .Spacer {
  border-top: 1px solid var(--border-subtle);
  margin: 4px 0;
  height: 0;
  overflow: hidden;
}

body.page-inspection-container .popupMenuV2 .Spacer img {
  display: none;
}


/* ============================================================================
 * §23 — Delete confirm dialog (modDelete · modContainerSmall · MPE popup)
 * ----------------------------------------------------------------------------
 * <uc:ModuleTemplate ID="modDelete" CSSClass="modContainerSmall" IsPopup="true"
 *   MainNoPadding="true" Width="400px"> wrapped in an ajaxToolkit:ModalPopupExtender
 * (mpeDelete). Same markup on the two top-level inspection pages:
 *   - InspectionContainer.ascx  → body.page-inspection-container
 *   - InspectionDetail.ascx     → body.page-inspection-container
 *
 * NOTE: InspectorDetail.ascx has the SAME delete dialog, but it is NOT a top-level
 * page — it only ever renders inside the "Edit Inspector" LoadControl iframe
 * (Blank.Master), which does not load this file and has no page-* body class. That
 * dialog is re-skinned by the identical recipe in inspector-detail-popup.css under
 * body.popup-inspector-detail (registered in Blank.Master.cs). Keep the two copies
 * in sync.
 *
 * This is the "third popup mechanism" (DESIGN.md §16.12): a V1 ModuleTemplate in
 * an MPE. The global components.css §9.10 chrome only reaches <uc:Modal>
 * (.modPopPnl) / subModal popups — it does NOT touch this control, so it renders
 * fully legacy navy. We clone the scheduledreports.css §8 chrome recipe, re-scoped
 * to .modContainerSmall.
 *
 * Gotchas baked in (DESIGN.md §16.12):
 *   1. IsPopup renders the header div as `.modTitlePopup` (NOT `.modTitle`).
 *   2. MainNoPadding sets inline `padding:0px` on `.modMain` → !important override.
 *   3. Literal hex, never var() — the control sits under MainWhiteout !important
 *      shorthands where var() in a shorthand drops/loses the cascade.
 *   4. box-sizing:border-box on the three sections or their 16px padding overflows
 *      the 400px card and overflow:hidden clips it.
 *   5. No close X in these dialogs (footer Yes/No only) → the empty `.modTRight`
 *      panel is hidden; no Lucide-X paint / onclick wiring needed.
 *   6. Footer is class-mapped, NOT last-button-wins: `a.LinkButton` (the "Yes"
 *      confirm — the only non-Secondary button, and the destructive action) = RED
 *      pill; `a.LinkButton.Secondary` ("No") = neutral ghost.
 *   7. Button colours use LONGHAND `background-color` (not shorthand `background`)
 *      to match components.css's `background-color: var(--button-primary-bg)`
 *      form — a shorthand loses the shorthand-vs-longhand cascade trap even at
 *      higher specificity, leaving the destructive confirm teal instead of red.
 * ============================================================================ */

/* §23.1 — Release the transparent table/cell wrappers (the painted card is
 * .modInnerContainer). Keep the inline width:400px on the table. */
body.page-inspection-container .modContainerSmall,
body.page-inspection-container .modContainerSmall > tbody > tr > td {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* §23.2 — Outer card: white surface, slate-200 border, 12px radius, soft shadow. */
body.page-inspection-container .modContainerSmall .modInnerContainer {
  box-sizing: border-box;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden;
  padding: 0 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
}

/* The sections are legacy content-box @ width:100% — their 16px side padding then
 * overflows the card by 32px and overflow:hidden clips it. Force border-box. */
body.page-inspection-container .modContainerSmall .modTitlePopup,
body.page-inspection-container .modContainerSmall .modMain,
body.page-inspection-container .modContainerSmall .modFooter2 {
  box-sizing: border-box !important;
  width: 100% !important;
}

/* §23.3 — Header: strip the navy ribbon, flex row, 16/16/12 padding cadence. */
body.page-inspection-container .modContainerSmall .modTitlePopup {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: transparent !important;
  border: 0 !important;
  padding: 16px 16px 12px 16px !important;
  height: auto !important;
}

/* §23.4 — Title text. */
body.page-inspection-container .modContainerSmall .modTLeft {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  text-align: left;
}

/* §23.5 — No close X in these confirm dialogs: the TitleRight panel renders empty
 * (ImageManager emits nothing on Q88 portals AND no template was supplied), so hide
 * it rather than paint a Lucide X. Dismiss is via the footer No/Yes buttons. */
body.page-inspection-container .modContainerSmall .modTRight {
  display: none !important;
}

/* §23.6 — Body: drop the slate-50 fill, override MainNoPadding's inline padding:0px
 * with a 16px side gutter (header already pads 12 below). */
body.page-inspection-container .modContainerSmall .modMain {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 16px 0 16px !important;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 20px;
}

/* The message div carries inline `padding:10px 5px 5px 10px` — normalise it and let
 * the modMain gutter frame it. (#divPromptDelete is a plain id, identical on both
 * pages; safe under the scope.) */
body.page-inspection-container .modContainerSmall #divPromptDelete {
  padding: 0 !important;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 20px;
}

/* §23.7 — Footer: strip the gray band, flex-end pill cluster, 12px gap, 12px above
 * + 16px below. */
body.page-inspection-container .modContainerSmall .modFooter2 {
  background: transparent !important;
  border: 0 !important;
  padding: 12px 16px 16px 16px !important;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  text-align: right;
}

/* §23.8 — Footer buttons → dialog pills. The "Yes" confirm (a.LinkButton, the only
 * non-Secondary button) is the DESTRUCTIVE delete action → red pill (DESIGN.md
 * §16.7). "No" (a.LinkButton.Secondary) → neutral ghost. See gotcha 7 re: longhand
 * background-color; hide the <ins> spacer. */
body.page-inspection-container .modContainerSmall .modFooter2 a.LinkButton {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px;
  min-width: 64px;
  padding: 0 16px !important;
  border-radius: 8px !important;
  background-color: var(--red-600) !important;
  color: #ffffff !important;
  border: 1px solid var(--red-600) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  position: static !important;
  cursor: pointer;
}
body.page-inspection-container .modContainerSmall .modFooter2 a.LinkButton:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}
body.page-inspection-container .modContainerSmall .modFooter2 a.LinkButton.Secondary {
  background-color: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
}
body.page-inspection-container .modContainerSmall .modFooter2 a.LinkButton.Secondary:hover {
  background-color: var(--surface-muted) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}
body.page-inspection-container .modContainerSmall .modFooter2 a.LinkButton > ins {
  display: none !important;
}

/* ============================================================================
 * Inspection Note (pceNotes) outer-shell alignment — QEN-8776
 *
 * The "Inspection Note" modal (<uc:Modal id="pceNotes">) uses the global
 * components.css §9.10 chrome, but its PopupContent is an <iframe id="ifDetail">
 * (markup width="700") loading DocumentNoteEdit.ascx (body styled by
 * styles/inspection-note.css, body.popup-inspection-note). Two outer-shell
 * mismatches made the header, editor box and footer band render at three
 * different widths:
 *   1. The 700px iframe overflowed the ~692px content area (mainBG) by ~8px.
 *   2. The §9.10 header title sat at a 16px inset while the iframe body content
 *      is inset 24px, so the header didn't line up with the editor/footer.
 * Pin the iframe to the content area and bump the header inset to 24px so every
 * section shares the same left/right bounds (verified in the live 750px modal:
 * header title / editor / Attach File / note / footer buttons all align).
 * (Body content of the popup is owned by styles/inspection-note.css.)
 * ========================================================================== */
body.page-inspection-container [id$="pceNotes_pnlModalPopup"] iframe#ifDetail {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block;
  box-sizing: border-box;
}
body.page-inspection-container [id$="pceNotes_pnlModalPopup"] td.hdrTblBar {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ============================================================================
 * Import Observations modal (mpeImportObservation) — footer buttons
 * ----------------------------------------------------------------------------
 * Cancel + Import are two LinkButtons in a narrow right-hand <td> with inline
 * `float:left` (markup). The refresh pill styling makes them taller/wider, so in
 * the cramped cell they wrap and stack vertically. Drop the floats and keep them
 * inline on a single right-aligned line; nowrap stops the cell from wrapping the
 * pair, so the NOTE text (left cell) takes the slack instead.
 * ========================================================================== */
body.page-inspection-container [id*="mpeImportObservation"] .modPopContent td[align="right" i] {
  white-space: nowrap;
  vertical-align: middle;
}
body.page-inspection-container [id*="mpeImportObservation"] .modPopContent td[align="right" i] a.LinkButton {
  float: none !important;
  display: inline-flex !important;
  vertical-align: middle;
  margin: 0 0 0 8px !important;
}
/* asp:LinkButton emits a leading <ins>&nbsp;</ins> sliding-door cap — strip it on
   the two modal buttons (Cancel = lbVIQCancel, Import = lbVIQImport) so the labels
   have no awkward leading space. Scoped to those exact controls. */
body.page-inspection-container a.LinkButton[id$="_lbVIQCancel"] > ins,
body.page-inspection-container a.LinkButton[id$="_lbVIQImport"] > ins {
  display: none !important;
}

/* ============================================================================
 * §24 — "New Inspection" modal: Inspected By required-field validator
 * ----------------------------------------------------------------------------
 * rfvApprovingAgency (CssClass="ValHighlight") still renders the legacy
 * yellow stripe + alertVal.png triangle + red "*" (Main.css/MainWhiteout.css).
 * Every other required-field validator already re-skinned on the refreshed
 * frontend (q88search.css span[id$="_rfvdlVessel"], createQuestionnaire.css
 * span[id$="_rfvdlVessel"]) uses the same recipe: hide the "*" text
 * (font-size:0), swap in a red Lucide triangle-alert via ::before, and add a
 * plain-language message via ::after. Reuse that here instead of a new look.
 * ============================================================================ */
body.page-inspection-container [id$="_rfvApprovingAgency"] {
  /* No `!important` on display — Display="Dynamic" emits inline
   * style="display:none;" until validation fails; !important here would
   * force the error visible on initial load. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  color: #dc2626 !important;
  font-family: "Inter", sans-serif;
  font-size: 0 !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
body.page-inspection-container [id$="_rfvApprovingAgency"]::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: #dc2626;
  -webkit-mask: var(--icon-triangle-alert) no-repeat center / 14px;
          mask: var(--icon-triangle-alert) no-repeat center / 14px;
}
body.page-inspection-container [id$="_rfvApprovingAgency"]::after {
  content: "Please select an organization";
  font-size: 12px;
  line-height: 20px;
  color: #dc2626;
  font-weight: 500;
}

/* Vessel required-field validator — same modal, same re-skin. ClientIDMode is
 * Static here so the rendered id is the bare "cvVesselID" (no naming-container
 * prefix), unlike rfvApprovingAgency above. */
body.page-inspection-container #cvVesselID {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  color: #dc2626 !important;
  font-family: "Inter", sans-serif;
  font-size: 0 !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
body.page-inspection-container #cvVesselID::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: #dc2626;
  -webkit-mask: var(--icon-triangle-alert) no-repeat center / 14px;
          mask: var(--icon-triangle-alert) no-repeat center / 14px;
}
body.page-inspection-container #cvVesselID::after {
  content: "Please select a vessel";
  font-size: 12px;
  line-height: 20px;
  color: #dc2626;
  font-weight: 500;
}


/* ============================================================================
 * §25 — RequiredFieldValidator / range-validator icon re-skin (yellow → red)
 * ----------------------------------------------------------------------------
 * The legacy `.ValTipRequired span` / `.ValTipInvalid span` (Main.css /
 * MainWhiteout.css) paints a 20×16 pale-YELLOW box (#ffffc0 / --status-warning)
 * carrying a ValRequired.png raster triangle + a 0.8px border. That box is a
 * CSS BACKGROUND, not an <img src="alertVal">, so icon-swaps.css's global
 * red-triangle swap never reached it — it stayed yellow while every other
 * validation affordance on the refreshed frontend went red (§24, q88search.css
 * span[id$="_rfvdlVessel"], createQuestionnaire.css). On this page the boxes
 * belong to rfvActivity (Activity), rfvDdl (Status), rvCost (Cost), and the
 * Add-Observation modal's VIQ-version validator — the user flagged the first
 * two as "misplaced warning icons".
 *
 * Convert the box to the same masked red Lucide triangle-alert used by §24:
 * drop the yellow fill / raster / border and paint a 14px #dc2626 triangle via
 * mask. Also neutralize the legacy inline positioning hack baked into the
 * Status validator's ErrorMessage span (`float:right; position:relative;
 * left:-17px; top:7px` — DropDownListGrouped.ascx L5); !important beats the
 * inline style so the glyph centers in the §21 slot instead of drifting left.
 *
 * Page-wide scope (not just #tblInspectionData) so the Add-Observation modal's
 * VIQ-version validator gets the same red glyph. `visibility` is left untouched
 * so ASP.NET's Display="Static" valid/invalid visibility toggle still governs
 * whether the glyph paints.
 * ============================================================================ */
body.page-inspection-container .ValTipRequired span,
body.page-inspection-container .ValTipInvalid span {
  float: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-image: none !important;
  background-color: #dc2626 !important;
  width: 14px !important;
  height: 14px !important;
  -webkit-mask: var(--icon-triangle-alert) no-repeat center / 14px !important;
          mask: var(--icon-triangle-alert) no-repeat center / 14px !important;
  vertical-align: middle !important;
}


/* ============================================================================
 * §26 — "Last CDI" tooltip popup  (DESIGN.md §9.10 Hover Card / Dialog)
 * ----------------------------------------------------------------------------
 * Clicking "Last CDI: <date>" (#spLastCDILabel, styled by §19) fires a WS call
 * whose result GeneralBusiness.GeneratePopupContent injects into the global
 * div#TipPopup as the legacy "corner-image-table" chrome (8th popup mechanism —
 * memory popup-chrome-mechanisms-index):
 *     div#ToolTipPopup > table.toolTipPopupContainer
 *       .tL/.tM/.tClose/.tR (title row) + .pointerTl|Tr tail
 *       .contentL / div.content / .contentR (body — holds a 4-col table
 *          with a tr.ColHeader header row) + .bL/.bM/.bR (bottom row)
 * The chrome images (navy toolTipPopup*.png) live in MainWhiteout.css §2859+;
 * the .ColHeader navy fill comes from Q88Whiteout.css §12 (--brand-accent +
 * --text-on-brand !important).  historyPopup.css §2 already flattens this exact
 * chrome but is scoped to body.page-questionnaire, so it never reached this page
 * (body.page-inspection-container). Mirror that flatten here, scoped to this
 * page, and additionally flatten the navy tr.ColHeader table header to a slate
 * underline (officer-matrix-person.css §15 pattern).
 *
 * Scoped generically to #ToolTipPopup (not the CDI variant specifically) so any
 * other tooltip popup rendered on this page inherits the same flat card chrome.
 * The .tM here carries real "Last CDI" title text (no ::after injection, unlike
 * historyPopup's "Updated By:" case), and the first content column is data
 * ("Inspected By") — so we neither inject a title nor hide the first cell.
 * ============================================================================ */

/* Outer positioned wrapper (JS sets inline max-width:550 + right/top). Lift above
 * the sticky app header/action bar so a CDI popup near the top never renders
 * behind them. */
body.page-inspection-container #ToolTipPopup {
  z-index: 1000;
}

/* Card chrome — §9.10: bg #fff, 1px slate-200, radius 8, shadow/sm, 16 padding.
 * width:auto shrink-wraps to the 4-col table (overrides the server's inline
 * width:550px), capped so a long port name can't run away. */
body.page-inspection-container #ToolTipPopup > .toolTipPopupContainer {
  width: auto !important;
  min-width: 300px;
  max-width: 550px;
  background: #ffffff;
  border: 1px solid var(--raw-slate-200, #e2e8f0);
  border-radius: 8px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.10),
    0 1px 2px -1px rgba(0, 0, 0, 0.10);
  padding: 16px;
  box-sizing: border-box;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0f172a;
  position: relative;
}

/* Hide every legacy corner-image cell + the pointer tail (any position variant) */
body.page-inspection-container #ToolTipPopup .pointerTl,
body.page-inspection-container #ToolTipPopup .pointerTr,
body.page-inspection-container #ToolTipPopup .pointerBl,
body.page-inspection-container #ToolTipPopup .pointerBr,
body.page-inspection-container #ToolTipPopup .Hidden,
body.page-inspection-container #ToolTipPopup .tL,
body.page-inspection-container #ToolTipPopup .tR,
body.page-inspection-container #ToolTipPopup .contentL,
body.page-inspection-container #ToolTipPopup .contentR,
body.page-inspection-container #ToolTipPopup .bL,
body.page-inspection-container #ToolTipPopup .bM,
body.page-inspection-container #ToolTipPopup .bR {
  display: none !important;
}

/* Title strip → SemiBold-16 heading. `background/color !important` beat
 * MainWhiteout's toolTipPopupHorizontalBlue.png fill + the near-white (#eff6ff)
 * on-navy text. `margin:0 !important` beats MainWhiteout §2914 `.tM { margin }`.
 * 24px right padding reserves room for the X. */
body.page-inspection-container #ToolTipPopup .tM {
  display: block !important;
  margin: 0 !important;
  padding: 0 24px 12px 0 !important;
  background: transparent !important;
  background-image: none !important;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #0f172a !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  text-align: left;
  white-space: nowrap;
}

/* Close cell → Lucide X, top-right of the card (absolute, out of the title row) */
body.page-inspection-container #ToolTipPopup .tClose {
  display: block !important;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 16px !important;
  height: 16px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #475569;
  cursor: pointer;
}
body.page-inspection-container #ToolTipPopup .tClose::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 16px;
}
body.page-inspection-container #ToolTipPopup .tClose:hover {
  color: #0f172a;
}

/* Body — drop the legacy inner padding (MainWhiteout §2946 gives .content a pad
 * that pushes the table right of the heading). Card padding owns the inset. */
body.page-inspection-container #ToolTipPopup .content {
  padding: 0 !important;
  color: #0f172a;
  font-size: 14px;
  line-height: 20px;
}
body.page-inspection-container #ToolTipPopup .content > table {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}
/* Neutralize the navy Q88Whiteout §12 fill on the header ROW itself (its white
 * <td>s fully cover it with border-spacing:0, but this kills any sub-pixel bleed). */
body.page-inspection-container #ToolTipPopup .content > table tr.ColHeader {
  background: transparent !important;
}

/* Header row — `background:#fff !important` kills the Q88Whiteout --brand-accent
 * navy; `color !important` beats the --text-on-brand near-white (which carries
 * !important). Slate underline replaces the navy band. `padding !important`
 * beats MainWhiteout `.toolTipPopupContainer tr td { padding:0 !important }`. */
body.page-inspection-container #ToolTipPopup .content > table tr.ColHeader td {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  vertical-align: bottom;
  border: 0;
  border-bottom: 1px solid var(--raw-slate-200, #e2e8f0);
  padding: 0 12px 8px 0 !important;
  white-space: nowrap;
}
/* Data rows */
body.page-inspection-container #ToolTipPopup .content > table tr:not(.ColHeader) td {
  background: transparent;
  color: #0f172a;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid var(--raw-slate-100, #f1f5f9);
  padding: 8px 12px 8px 0 !important;
  white-space: nowrap;
}
body.page-inspection-container #ToolTipPopup .content > table tr:not(.ColHeader):last-child td {
  border-bottom: 0;
  padding-bottom: 0 !important;
}
/* Trim the trailing right-padding on the last column so the card hugs content */
body.page-inspection-container #ToolTipPopup .content > table tr td:last-child {
  padding-right: 0 !important;
}