/* ==========================================================================
   Vetting Analytics (VettingAnalytics.aspx → DesktopModules/Q88/VettingAnalytics.ascx)
   ----------------------------------------------------------------------------
   Scoped via `body.page-vetting-analytics`. Figma reference:
   file KvhhQJxd1OGj39ePierLuA, node 445:15069.

   .ascx structure (header area only — chart bodies left as-is):

     <div style="width:1166px">           outer wrapper (no class/id)
       <div class="modV3" ...>            left column, holds title+filters+tabs
         <table>
           <tr>
             <td>.modV3Title "Vetting Analytics"</td>
             <td>
               <div id="divCriteria">
                 <table id="tblCriteria">
                   FleetVessel ucFleet/ucVessel + ddlTechnicalManager
                   + ddlVIQVersion + ddlInspectedBy + ddlDateRange + ...
                 </table>
               </div>
             </td>
           </tr>
         </table>
         <table>
           <tr><td><div id="divMenu" class="reportMenu">
             Summary | Risk | Repeating | Fleet  (LinkButtons)
           </div></td></tr>
           <tr><td>#tblRepeatingCriteria (Group By / Filter By)</td></tr>
         </table>
       </div>
       <div id="divExportExcelMain">cog → Export to Excel popup</div>
     </div>

   Re-skin strategy (Figma 445:15074 "Card"):
     - The legacy 1166px-wide split is collapsed to a single fluid shadcn
       card. .modV3 becomes the card (rounded-xl, 1px slate-200 border,
       soft shadow, white bg, 24px padding, full width).
     - Title "Vetting Analytics" → Inter Semi Bold 18/28, slate-900,
       sits flush-left in the header row.
     - tblCriteria dropdowns flow right (margin-left:auto on the cell)
       as 36px outline pills (white bg, 1px slate-200 border, 8px radius,
       Inter Medium 14, inline-SVG chevron right).
     - .reportMenu (#divMenu) → shadcn Tabs pill (slate-50 bg, 10px
       radius, 3px padding, 36px height). Active LinkButton (.MenuSelectedClass)
       = white card + sm shadow, all others ghost. Beats MainWhiteout
       `a:link { color:#5876a7 }` via specificity-matched + !important.
     - Top-right cog (#divExportExcelMain) sits as a 16x16 button absolutely
       positioned in the card's top-right; popup unchanged.
     - Chart container divs (divCharts_Summary etc.) left untouched in
       this pass — they're inside the card visually via background but
       Highcharts/Google Charts internals are out of scope for the skin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens — reuse the raw palette registered in tokens.css.
   -------------------------------------------------------------------------- */
body.page-vetting-analytics {
    --va-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --va-fg: var(--raw-slate-900);
    --va-muted-fg: var(--raw-slate-500);
    --va-muted-bg: var(--raw-slate-50);
    --va-border: var(--raw-slate-200);
    --va-card: #ffffff;
    --va-primary: var(--primary);
    --va-focus-ring: rgba(var(--primary-tint), 0.15);
    --va-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.10),
        0 1px 2px -1px rgba(0, 0, 0, 0.10);
    --va-shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 1px 1px rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   1. Outer wrapper — the unnamed <div style="width:1166px"> that holds
      .modV3 and #divExportExcelMain side by side. Relax the fixed width
      so the card grows to fill the content pane.
   -------------------------------------------------------------------------- */
body.page-vetting-analytics div:has(> .modV3) {
    width: auto !important;
    max-width: none !important;
    position: relative;
}

/* --------------------------------------------------------------------------
   2. Card chrome — .modV3 carries the shared `.q88-card` class (attached in
      VettingAnalytics.ascx markup), so bg / border / border-radius /
      box-shadow / padding / margin / font / color come from components.css.

      This rule keeps ONLY the `!important` overrides that defeat the .ascx
      inline styles (`width:875px; float:left; height:100px`) and the
      `min-width:825px` from §17. Without these the inline styles would win
      against .q88-card's non-!important declarations.
   -------------------------------------------------------------------------- */
body.page-vetting-analytics .modV3 {
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    text-align: left !important;
    background-image: none !important;
}

/* Strip the inline-styled tables inside the card down to layout containers */
body.page-vetting-analytics .modV3 > table {
    width: 100% !important;
    padding: 0 !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

body.page-vetting-analytics .modV3 > table + table {
    margin-top: 14px !important;
}

body.page-vetting-analytics .modV3 > table > tbody > tr > td {
    height: auto !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   3. Header row — Title left, filter dropdowns right.
      The first <table> in .modV3 has two cells:
        td #1 → .modV3Title "Vetting Analytics"        (200px width)
        td #2 → div#divCriteria → table#tblCriteria    (filter dropdowns)
      Display the row as flex so the title sits left and the filter strip
      hugs the right edge.
   -------------------------------------------------------------------------- */
body.page-vetting-analytics .modV3 > table:first-of-type {
    display: block;
}

body.page-vetting-analytics .modV3 > table:first-of-type > tbody,
body.page-vetting-analytics .modV3 > table:first-of-type > tbody > tr {
    display: contents;
}

body.page-vetting-analytics .modV3 > table:first-of-type {
    display: flex;
    /* flex-start (NOT center): when "Custom" date range wraps the criteria
       cell to two rows it gets taller, and center-alignment dragged the
       "Vetting Analytics" title down to the cell's vertical middle. Top-align
       so the title stays level with the dropdown row (UX R&D feedback). */
    align-items: flex-start;
    gap: 8px;
    /* No-wrap — title + criteria-cell stay on a single row; the criteria
       cell wraps INTERNALLY (#divCriteria below) rather than dropping. */
    flex-wrap: nowrap;
    padding-bottom: 20px !important;
    border-bottom: 1px solid transparent;
}

body.page-vetting-analytics .modV3 > table:first-of-type > tbody > tr > td:first-child {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    margin-right: auto;
}

body.page-vetting-analytics .modV3 > table:first-of-type > tbody > tr > td:nth-child(2) {
    /* `flex: 0 0 auto` locked this cell to its natural intrinsic width — when
       the dropdowns + Cancel/Apply buttons summed wider than the available
       space (card width - title width - padding), the cell couldn't shrink
       and the right-most button overflowed past the card's right edge. Allow
       it to shrink + take any leftover space so the inner content wraps
       cleanly inside the card boundary. min-width:0 is required to let a
       flex item shrink below its content's intrinsic width. */
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

/* divCriteria is the ACTUAL flex parent for the dropdown TDs because
   #tblCriteria / tbody / tr all have `display:contents` (rule above at L195) —
   that hoists the inner <td>s up to divCriteria. The Cancel/Apply cell is
   pulled out of this flex flow (absolutely positioned to the card's bottom-
   right corner — see the td[width] rule below), so this row holds only the
   dropdowns + the "Custom" date-range pickers.

   `flex-wrap: nowrap` is the DEFAULT (see the conditional override below):
   flexbox wraps an item the instant it doesn't fit at its CONTENT size — it
   does NOT shrink-then-wrap. So under an unconditional `wrap`, the four main
   dropdowns broke onto a second line on narrower (laptop) viewports, opening a
   visible gap between the dropdown row and the tabs row (the "extra space
   between two lines" regression). `nowrap` instead lets the dropdown selects
   shrink (min-width:0 on the TDs + the selects) so they stay on ONE line at any
   width — the pre-refresh behaviour. */
body.page-vetting-analytics #divCriteria {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

/* Conditional wrap — ONLY when "Custom" date range is selected. Choosing
   "Custom" flips #divCustomDateRange (inside the date cell) from inline
   `display:none` to visible, injecting two stacked date pickers wrapped around
   a 240px calendar widget that CANNOT shrink. The page's content column is not
   viewport-bounded, so under `nowrap` that un-shrinkable block grows the whole
   card past the viewport (the "change the right dropdown to see" horizontal
   overflow, UX R&D feedback — also present in the legacy/HEAD nowrap). Switch
   to `wrap` in this single state so the date-picker block drops below the
   dropdowns instead of overflowing. The `:not([style*="none"])` matches the
   visible state (its inline style drops the `display:none`); :has() re-matches
   live when the user toggles the dropdown. The common cases — any width without
   Custom, and Custom at a normal width — never wrap the dropdowns. */
body.page-vetting-analytics #divCriteria:has(#divCustomDateRange:not([style*="none"])) {
    flex-wrap: wrap;
}

/* Title — Inter Semi Bold 18/28, slate-900. Beats the page's own inline
   <style> block (VettingAnalytics.ascx:30-38) which sets
   `.modV3 .modV3Title { color:#2D3663; font-size:20px;
   font-family: tahoma... !important; font-weight:300; }`. Our selector's
   higher specificity (adds `body.page-vetting-analytics`) already beats it
   on size/weight/line-height/color; font-family needs its own !important
   too since importance is compared before specificity — without it the
   ascx's !important tahoma stack won outright, leaving the title rendering
   in Tahoma instead of Inter despite the 18/600/28 metrics being correct. */
body.page-vetting-analytics .modV3 .modV3Title {
    width: auto !important;
    padding: 0 !important;
    margin: 0;
    font-family: var(--va-font) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    color: var(--va-fg) !important;
    float: none !important;
}

/* --------------------------------------------------------------------------
   4. Filter dropdown strip — #divCriteria / #tblCriteria.
      Relax the inline 700px/27px and let cells flow as inline flex items.
   -------------------------------------------------------------------------- */
body.page-vetting-analytics #divCriteria {
    width: auto !important;
    background-color: transparent !important;
}

body.page-vetting-analytics #tblCriteria {
    width: auto !important;
    height: auto !important;
    border-spacing: 0 !important;
    padding: 0 !important;
}

body.page-vetting-analytics #tblCriteria,
body.page-vetting-analytics #tblCriteria > tbody,
body.page-vetting-analytics #tblCriteria > tbody > tr {
    display: contents;
}

body.page-vetting-analytics #tblCriteria > tbody > tr > td {
    display: inline-flex;
    align-items: center;
    padding: 0 0 0 8px !important;
    height: 36px;
    /* Allow shrinking below intrinsic content width so the Cancel/Apply
       cluster stays on one line. Default flex-item `min-width: auto`
       refuses to shrink past content size — which forced Apply to wrap
       to a new line once its TD was given its natural width. */
    min-width: 0;
}

body.page-vetting-analytics #tblCriteria > tbody > tr > td:first-child {
    padding-left: 0 !important;
}

/* Cancel/Apply cell — VettingAnalytics.ascx:334 emits `<td align="right"
   width="50">` holding the Cancel + Apply LinkButtons. Per UX R&D feedback the
   Apply CTA belongs in the BOTTOM-RIGHT corner of the filter card, level with
   the Summary/Risk/Repeating/Fleet tabs (`.reportMenu` row) — not inline with
   the dropdowns. Lift the cell out of the #divCriteria flex flow and pin it to
   the card's bottom-right corner (`.modV3.q88-card` is position:relative).
   right/bottom:16px == the card's 16px padding, so Apply lands flush in the
   corner at the tabs row, clear of the "Custom" date-range pickers that wrap
   above it. (Supersedes the old width/flex-shrink containment — irrelevant
   now the cell is out of flow.) */
body.page-vetting-analytics #tblCriteria > tbody > tr > td[width] {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: auto !important;
    margin: 0;
    z-index: 1;
}

/* "Custom" date-range pickers — the shared FieldUi `.qDiv` wrapper reserves a
   fixed 304px (the calendar-popup footprint). Once Apply moved out of the flex
   line, those two stacked pickers became the right-most criteria content and
   their 304px wrappers poked ~47px past the card's right edge. The popup is
   position:absolute (doesn't need the 304px reserved inline), so let the
   wrapper fit its field; min-width:0 lets it shrink under the wrap. */
body.page-vetting-analytics #divCriteria .qDiv {
    width: auto !important;
    min-width: 0;
}

/* The FleetVessel UserControl wraps its <select> in a panel — let it flow. */
body.page-vetting-analytics #tblCriteria .NormalLabelText,
body.page-vetting-analytics #tblCriteria b {
    font-family: var(--va-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--va-fg);
    margin-right: 6px;
}

/* --------------------------------------------------------------------------
   5. Native <select> as shadcn outline pill (36px, 8px radius, slate-200
      border, inline-SVG chevron). Scoped to inside the card + the chart
      criteria overlays (#divPeriodCompare / #divChapterCompare /
      #divCDIChapterRisk etc. — they all carry the .Criteria class).
   -------------------------------------------------------------------------- */
body.page-vetting-analytics .modV3 select,
body.page-vetting-analytics .Criteria select {
    height: 36px;
    min-height: 36px;
    /* Vertical padding 8->4: at height:36px with box-sizing:border-box, 8/8
       padding + 1/1 border left only 18px content for a 20px line-height,
       clipping the selected option text. 4/4 gives 26px — text clears. */
    padding: 4px 36px 4px 14px;
    box-sizing: border-box;
    border: 1px solid var(--va-border);
    border-radius: 8px;
    background-color: #ffffff;
    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='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: var(--va-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--va-fg);
    cursor: pointer;
    box-shadow: none;
    width: auto !important;
    min-width: 0 !important;
}

body.page-vetting-analytics .modV3 select:focus,
body.page-vetting-analytics .Criteria select:focus {
    outline: none;
    border-color: var(--va-primary);
    box-shadow: 0 0 0 3px var(--va-focus-ring);
}

/* --------------------------------------------------------------------------
   6. Tabs row — second <table> in .modV3 hosts #divMenu (.reportMenu)
      and below it the optional #tblRepeatingCriteria. Restyle the menu
      as shadcn Tabs (slate-50 bg pill, white-card active item).
   -------------------------------------------------------------------------- */
body.page-vetting-analytics .modV3 > table:nth-of-type(2) {
    margin-top: 4px !important;
    padding-bottom: 0 !important;
    border-spacing: 0 !important;
}

body.page-vetting-analytics .modV3 > table:nth-of-type(2) > tbody > tr > td {
    padding: 0 !important;
}

body.page-vetting-analytics .modV3 > table:nth-of-type(2) > tbody > tr + tr > td {
    padding-top: 14px !important;
}

body.page-vetting-analytics #divMenu.reportMenu {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 36px;
    margin: 0 !important;
    padding: 3px !important;
    background-color: var(--va-muted-bg);
    border-radius: 10px;
    gap: 0;
    float: none;
}

/* Each LinkButton — beat Q88Whiteout's `.reportMenu a { color:#4f72a4;
   padding:3px; font-size:9pt }` AND the global `a:link` rule (specificity 0,1,1). */
body.page-vetting-analytics #divMenu.reportMenu a,
body.page-vetting-analytics #divMenu.reportMenu a:link,
body.page-vetting-analytics #divMenu.reportMenu a:visited,
body.page-vetting-analytics #divMenu.reportMenu a:active {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 30px;
    padding: 4px 12px !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    background-image: none !important;
    font-family: var(--va-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: var(--va-fg) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
}

body.page-vetting-analytics #divMenu.reportMenu a:hover {
    color: var(--va-fg) !important;
    border-bottom-color: transparent !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
}

body.page-vetting-analytics #divMenu.reportMenu a.MenuSelectedClass,
body.page-vetting-analytics #divMenu.reportMenu a.MenuSelectedClass:link,
body.page-vetting-analytics #divMenu.reportMenu a.MenuSelectedClass:visited,
body.page-vetting-analytics #divMenu.reportMenu a.MenuSelectedClass:hover {
    background-color: #ffffff !important;
    color: var(--va-fg) !important;
    border-color: transparent !important;
    box-shadow: var(--va-shadow-xs) !important;
}

/* ASP.NET LinkButton emits <a><ins>&nbsp;</ins>label</a>. Hide the spacer
   so the label centres inside our flex-aligned tab cell. */
body.page-vetting-analytics #divMenu.reportMenu a > ins {
    display: none !important;
}

/* --------------------------------------------------------------------------
   7. #tblRepeatingCriteria — Group By / Filter By sub-row shown on the
      Repeating tab only. Match the dropdown styling so it slots in
      under the tabs without re-introducing legacy borders.
   -------------------------------------------------------------------------- */
body.page-vetting-analytics #tblRepeatingCriteria {
    border-spacing: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

body.page-vetting-analytics #tblRepeatingCriteria,
body.page-vetting-analytics #tblRepeatingCriteria > tbody,
body.page-vetting-analytics #tblRepeatingCriteria > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.page-vetting-analytics #tblRepeatingCriteria > tbody > tr > td {
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 36px;
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   8. Top-right cog (#divExportExcelMain) — float the legacy 200px wrapper
      down to a tidy 28x28 icon button anchored to the card's top-right.
      The popup itself (#popMenuActionsMenu) uses .PopupMenu chrome from
      MainWhiteout and stays unchanged.
   -------------------------------------------------------------------------- */
body.page-vetting-analytics #divExportExcelMain {
    /* !important throughout: the element carries inline `float:right; width:200px;
       z-index:1` and JS toggles its inline `display`. Without !important the
       inline z-index:1 wins (letting the title/criteria paint over it) and the
       non-!important position can lose, leaving the kebab invisible/mis-anchored.
       Anchored to the position:relative outer wrapper (`div:has(> .modV3)`). */
    position: absolute !important;
    top: 20px !important;
    right: 35px !important;
    z-index: 20 !important;
    float: none !important;
    width: auto !important;
    display: block !important;
}

body.page-vetting-analytics #divExportExcelMain #popMenuActions {
    margin: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px;
    /* The legacy `Img-Std-Options` sprite (cp.gif) has no refresh repaint, so the
       kebab rendered blank ("menu missing"). Paint a vertical-ellipsis (three
       dots). NOTE: the angle brackets MUST be percent-encoded (%3C/%3E) for a
       background-image data URI — raw `<svg>` is rejected by browsers (that was
       why the first attempt stayed invisible). */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23334155'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    background-color: transparent;
}

body.page-vetting-analytics #divExportExcelMain #popMenuActions:hover {
    background-color: var(--va-muted-bg);
}

/* Popup (#popMenuActionsMenu) — the legacy markup renders it in-flow with an
   inline `height:40px`, so opening it (a) grew the width:auto #divExportExcelMain
   and shoved the cog left, (b) clipped the 2nd item to 40px, and (c) spilled off
   the right edge. Pin it absolutely under the cog, right-aligned so it opens
   leftward into the card, with auto height for both items. #divExportExcelMain is
   position:absolute (§8) so it's the positioning context. */
body.page-vetting-analytics #divExportExcelMain #popMenuActionsMenu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    left: auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 220px !important;
    z-index: 30 !important;
}

/* --------------------------------------------------------------------------
   9. Chart-region overlay dropdowns ("vs: Benchmark", "Show: Risk / CDI").
      These divs (#divPeriodCompare, #divChapterCompare, #divCDIChapterRisk,
      #divCDIInspectedByRisk, #divCDIInspectionsRisk, #divAvgObservations)
      have inline `position:absolute; left:<px>` against the legacy 1166px
      ContentPane table. With the sidebar-nav layout the chart wrappers are
      narrower / shifted, so the legacy `left:640px` / `left:1220px` offsets
      land in the wrong place (Summary "vs:" for chart_div was sliding 90px
      past the right edge of its chart into the neighbouring chart pane).

      Fix: scope each chart's immediate wrapper as `position:relative` and
      flip the overlay to `right:0; top:0` so it docks at the top-right of
      its OWN chart. The inline left:NNNpx becomes inert (overridden by
      `left:auto !important`).
   -------------------------------------------------------------------------- */
body.page-vetting-analytics div:has(> #chart_div),
body.page-vetting-analytics div:has(> #chart_div_right),
body.page-vetting-analytics div:has(> #chart_div_summaryChapterCompare),
body.page-vetting-analytics div:has(> #chartFleet_FleetOverview),
body.page-vetting-analytics div:has(> #chartFleet_VIQChaptersIndustryVs),
body.page-vetting-analytics div:has(> #chartFleet_InspectedBy),
body.page-vetting-analytics div:has(> #chartFleet_Inspections) {
    position: relative !important;
}

body.page-vetting-analytics #divPeriodCompare,
body.page-vetting-analytics #divChapterCompare,
body.page-vetting-analytics #divCDIChapterRisk,
body.page-vetting-analytics #divCDIInspectedByRisk,
body.page-vetting-analytics #divCDIInspectionsRisk,
body.page-vetting-analytics #divAvgObservations {
    position: absolute !important;
    top: 0 !important;
    right: 28px !important;
    left: auto !important;
    width: auto !important;
    height: 36px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
    float: none !important;
}

/* The Fleet "Avg. Observations:" overlay ends in a 20px checkbox wrapper
   rather than a dropdown, so the shared right:28px dock left the checkbox
   overlapping the tribar cog by ~4px (reported: "checkmark too close to
   tribar"). Dock it ~14px further left for a clean ~10px gap. Same
   specificity as the shared rule above, so it must stay after it. */
body.page-vetting-analytics #divAvgObservations {
    right: 42px !important;
}

/* Vertically centre the per-chart cog icon (16x16) with the 36px-tall
   overlay dropdown sitting beside it. The cog containers live at the
   top-right of each chart and the chart-overlay dropdowns are anchored
   `top:0; right:28px` — bumping the cog down 10px lines its centre up
   with the dropdown's centre. Charts without an overlay dropdown
   (Top Repeating Questions, Risk-by-Vessel, etc.) just get a slightly
   inset cog, which still reads as breathing room. */
body.page-vetting-analytics #puMenuAvgQ,
body.page-vetting-analytics #puMenuTopRepQs,
body.page-vetting-analytics #puMenuSummaryChapterCompare,
body.page-vetting-analytics #puMenuItemRiskByVessel,
body.page-vetting-analytics #puMenuItemRiskByQuestion,
body.page-vetting-analytics #puMenuRptTopRepeatingQuestions,
body.page-vetting-analytics #puMenuFleetOverview,
body.page-vetting-analytics #puMenuViqChapterIndustry,
body.page-vetting-analytics #puMenuInspectedBy,
body.page-vetting-analytics #puMenuFleetInspections {
    margin-top: 10px !important;
}

/* Reset the inner float:left / float:right wrappers inside the "Show: Risk
   / CDI Category" radio-button overlays so the label + radios sit inline. */
body.page-vetting-analytics #divCDIChapterRisk > div,
body.page-vetting-analytics #divCDIInspectedByRisk > div,
body.page-vetting-analytics #divCDIInspectionsRisk > div {
    float: none !important;
    height: auto !important;
    padding: 0 !important;
}

body.page-vetting-analytics .Criteria b {
    font-family: var(--va-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--va-fg);
}

/* Optically centre the "Avg. Observations:" label with the checkbox + cog.
   The flex row centres the label's line-box, but the text's x-height/ink
   body sits ~2px below that centre (the line-box leading + descenders pull
   the visual mass down), so the label read as low next to the two icon
   controls. Nudge it up 2px to share their centre line. */
body.page-vetting-analytics #divAvgObservations b {
    position: relative;
    top: -2px;
}

/* --------------------------------------------------------------------------
   10. Error message — keep red but use the tokens so dark mode flips too.
   -------------------------------------------------------------------------- */
body.page-vetting-analytics #divErrorMsg.ErrorMessage {
    color: var(--raw-red-tailwind-700);
    font-family: var(--va-font);
    font-size: 14px;
}

/* Only reserve space for the error banner when it actually has text. The
   div renders empty (`<div id="divErrorMsg" class="ErrorMessage"></div>`)
   on every normal page load, and an unconditional padding-top added a
   stray 16px of dead whitespace between the header card and the charts
   even with no error to show. */
body.page-vetting-analytics #divErrorMsg.ErrorMessage:not(:empty) {
    padding-top: 16px;
}

/* --------------------------------------------------------------------------
   11. Refresh skin (body.sidebar-nav) — wrap each chart in a card.
   Same `:has(> #chart_*)` pattern as §9 so we land on the chart's direct
   parent (the legacy float-wrapper). box-sizing:border-box keeps the
   chart inside the existing inline width; HighCharts re-measures on
   render and fits the padded box.
   -------------------------------------------------------------------------- */
body.sidebar-nav.page-vetting-analytics div:has(> #chart_div),
body.sidebar-nav.page-vetting-analytics div:has(> #chart_div_right),
body.sidebar-nav.page-vetting-analytics div:has(> #chart_div_summaryChapterCompare),
body.sidebar-nav.page-vetting-analytics div:has(> #chart_div_riskVessel),
body.sidebar-nav.page-vetting-analytics div:has(> #chart_div_riskQuestion),
body.sidebar-nav.page-vetting-analytics div:has(> #chart_div_rptTopRepeating),
body.sidebar-nav.page-vetting-analytics div:has(> #chartFleet_FleetOverview),
body.sidebar-nav.page-vetting-analytics div:has(> #chartFleet_VIQChaptersIndustryVs),
body.sidebar-nav.page-vetting-analytics div:has(> #chartFleet_InspectedBy),
body.sidebar-nav.page-vetting-analytics div:has(> #chartFleet_Inspections) {
    background: var(--va-card);
    border: 1px solid var(--va-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Release the fixed inline `height` on the Risk + Repeating chart-row wrappers
   so each card shrink-wraps its chart + padding. Those wrappers carry an inline
   `height` (riskVessel 500px, riskQuestion 375px, rptTopRepeating 350px) that
   equals (riskQuestion/rptTopRepeating) the Highcharts explicit render height.
   Under the §11 card box-sizing:border-box + 16px padding + 1px border the
   content box shrinks ~34px below the chart, so the chart SVG overflowed past
   the card's bottom border — the border line painted *through* the chart and
   read as an "incomplete bottom line" (QEN-8831 feedback). With height:auto the
   bottom border lands below the chart.

   Scoped to these three only — their charts are `display:inline-block` (in flow,
   so they give the auto-height card its height). The Fleet charts
   (chartFleet_*) are `float:left`; a float does NOT expand an auto-height parent,
   so height:auto would collapse those cards — they keep their fixed height. */
body.sidebar-nav.page-vetting-analytics div:has(> #chart_div_riskVessel),
body.sidebar-nav.page-vetting-analytics div:has(> #chart_div_riskQuestion),
body.sidebar-nav.page-vetting-analytics div:has(> #chart_div_rptTopRepeating) {
    height: auto !important;
    min-height: 0 !important;
}

/* Side-by-side card pairs (Summary: chart_div + chart_div_right, Fleet:
   chartFleet_VIQChaptersIndustryVs + chartFleet_InspectedBy). Convert the
   legacy float-row parent to flex so we get a real gap AND equal heights
   via `align-items: stretch` (default). flex:1 on each card overrides the
   inline `width:500px/610px/580px` so the pair shares the row equally. */
body.sidebar-nav.page-vetting-analytics div:has(> div > #chart_div),
body.sidebar-nav.page-vetting-analytics div:has(> div > #chartFleet_VIQChaptersIndustryVs) {
    display: flex !important;
    gap: 16px;
    align-items: stretch;
    width: auto !important;
}

body.sidebar-nav.page-vetting-analytics div:has(> div > #chart_div) > div,
body.sidebar-nav.page-vetting-analytics div:has(> div > #chartFleet_VIQChaptersIndustryVs) > div {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    margin-bottom: 0 !important;   /* gap on the parent already handles spacing */
}

/* --------------------------------------------------------------------------
   12. Refresh skin (body.sidebar-nav) — top box (title + dropdowns + tabs)
   .modV3 carries the shared `.q88-card` class which sets `margin: 24px 48px`
   per DESIGN.md §6.1. §2 above pins `width: 100% !important` so the card
   extends 96px beyond its content box (margin + 100% width = overflow).
   Release the width on the refresh skin so it computes as
   `parent_width − margin_left − margin_right` (the natural block default).
   -------------------------------------------------------------------------- */
body.sidebar-nav.page-vetting-analytics .modV3 {
    width: auto !important;
    position: relative;
    margin: var(--raw-space-16);
    padding: var(--raw-space-8) !important;
}

/* (Removed) The §8 cog (#divExportExcelMain) was previously hidden here on the
   assumption the Export-to-Excel popup would be relocated. It wasn't, and the
   main Actions menu must be visible — §8 above styles/positions it (top-right
   cog with the vertical-ellipsis icon). Re-hiding it here would override §8. */

/* Per-chart cog icons — drop the 10px margin-top from §9 (added to align
   with the legacy 36px overlay dropdowns). In the refresh skin the charts
   are inside cards with their own padding, so the bump pushes the cog out
   of alignment. */
body.sidebar-nav.page-vetting-analytics #puMenuAvgQ,
body.sidebar-nav.page-vetting-analytics #puMenuTopRepQs,
body.sidebar-nav.page-vetting-analytics #puMenuSummaryChapterCompare,
body.sidebar-nav.page-vetting-analytics #puMenuItemRiskByVessel,
body.sidebar-nav.page-vetting-analytics #puMenuItemRiskByQuestion,
body.sidebar-nav.page-vetting-analytics #puMenuRptTopRepeatingQuestions,
body.sidebar-nav.page-vetting-analytics #puMenuFleetOverview,
body.sidebar-nav.page-vetting-analytics #puMenuViqChapterIndustry,
body.sidebar-nav.page-vetting-analytics #puMenuInspectedBy,
body.sidebar-nav.page-vetting-analytics #puMenuFleetInspections {
    margin-top: 0 !important;
}

/* Fleet Overview is the one chart whose overlay (the "Avg. Observations:"
   label + checkbox) is permanently visible beside its cog, so the cog must
   line up with it. With margin-top:0 the 16px cog sits 6px below the
   checkbox's centre (the cog's container starts lower than the top:0/h:36
   overlay box). Pull it up 6px so label, checkbox and cog share one centre
   line. Same specificity as the reset above, so it must stay after it. */
body.sidebar-nav.page-vetting-analytics #puMenuFleetOverview {
    margin-top: -6px !important;
}

/* Hide the whole <tr> for the Repeating-tab filter strip when its inner
   #tblRepeatingCriteria is server-hidden (visible="false" on .ascx).
   The row otherwise renders empty and adds a gap below the tab strip. */
body.sidebar-nav.page-vetting-analytics tr:has(> td > #divMenu) + tr:not(:has(#tblRepeatingCriteria)) {
    display: none;
}

/* Tab bodies (Summary / Risk / Repeating / Fleet / Detail) — vertical flex
   stack with consistent gap + padding. `[id^='divCharts_']` covers all
   sibling containers so each tab pane behaves the same way. */
body.sidebar-nav.page-vetting-analytics [id^='divCharts_'] {
    display: flex;
    flex-direction: column;
    gap: var(--raw-space-8);
    padding: var(--raw-space-16);
    /* Top padding alone is cut to 4px: the header card above (.modV3) already
       carries a 32px margin-bottom (§12), and stacking this container's full
       32px top padding on top of that (plus the divErrorMsg padding fixed
       above) produced an ~80px gap under the tab strip — reported as a "huge
       gap" that should read as one 36px space (32px card margin + 4px here). */
    padding-top: var(--raw-space-2);
}

/* Direct children stretch to fill the column — overrides the inline pixel
   widths (`width:1000px / 990px / 920px / 1190px / 1200px`) set on the
   chart-row wrappers in the .ascx markup. */
body.sidebar-nav.page-vetting-analytics [id^='divCharts_'] > * {
    width: 100% !important;
}

/* Reposition the Summary "vs:" benchmark dropdown for the refresh skin. */
body.sidebar-nav.page-vetting-analytics #divPeriodCompare.Criteria,
body.sidebar-nav.page-vetting-analytics #divChapterCompare.Criteria {
    top: 12px !important;
    right: 40px !important;
}

/* Tab strip (Summary / Risk / Repeating / Fleet) — repaint with the homepage
   Dashboard/Classic toggle palette: white container + subtle border, teal
   active pill with white text, muted hover on inactive items. Matches
   HomeDashboard.css `.dashboard-page-toggle` + `.dashboard-toggle-item`. */
body.sidebar-nav.page-vetting-analytics #divMenu.reportMenu {
    background-color: var(--card-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--raw-radius-xl);
}

body.sidebar-nav.page-vetting-analytics #divMenu.reportMenu a:hover {
    background-color: var(--muted) !important;
}

body.sidebar-nav.page-vetting-analytics #divMenu.reportMenu a.MenuSelectedClass,
body.sidebar-nav.page-vetting-analytics #divMenu.reportMenu a.MenuSelectedClass:link,
body.sidebar-nav.page-vetting-analytics #divMenu.reportMenu a.MenuSelectedClass:visited,
body.sidebar-nav.page-vetting-analytics #divMenu.reportMenu a.MenuSelectedClass:hover {
    background-color: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
    border-radius: var(--raw-radius-md) !important;
    box-shadow: none !important;
}