/* ==========================================================================
   Milbros grid-page skin — Search / CommodityList / BookingCommodityList / CleaningChemicalsList
   ----------------------------------------------------------------------------
   Scoped via `body.page-milbros-grid` (set in Default.Master.cs when
   PortalId==Milbros AND request targets one of the 4 slice pages).
   Targets bare <table class="divMin"> + <dxx:ASPxGridView> chrome.

   Spec: docs/plans/2026-05-03-milbros-grid-refresh-poc-design.md
   ========================================================================== */

/* ==========================================================================
   1. Tokens (page-scoped) — resolved from Phase 0 tokens.css
   ========================================================================== */

body.page-milbros-grid {
    --q88m-fg: var(--foreground);
    --q88m-muted: #f1f5f9;        /* base/accent — header fill + pager band (Milbros Specs node 2362:9858) */
    --q88m-muted-fg: var(--text-muted);
    --q88m-placeholder: #737373;
    --q88m-border: #e2e8f0;       /* base/border — card, rows, resize handles, inputs, pager */
    --q88m-card: var(--card-raised, #ffffff);
    --q88m-primary: var(--primary);
    --q88m-primary-hover: var(--button-primary-hover);
    --q88m-primary-fg: #ffffff;
    --q88m-row-hover: var(--surface-card);
    --q88m-row-selected: var(--surface-muted);
    --q88m-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   2. Card surface — wraps title bar + grid
   ========================================================================== */

body.page-milbros-grid .q88m-card {
    background: var(--q88m-card);
    border: 1px solid var(--q88m-border);
    border-radius: 12px;          /* rounded-xl (Milbros Specs card) */
    box-shadow:                   /* shadow/sm */
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1);
    padding: 24px;                /* card slot inset 24 (meta 1582 - 1534 = 48) */
    font-family: var(--q88m-font);
    color: var(--q88m-fg);
    margin: 24px 48px;            /* match Q88 .modV2 gutter: 48px sidebar→card gap, 24px top */
    overflow: hidden;
    box-sizing: border-box;
    width: calc(100% - 96px);     /* 48px margin each side */
    max-width: calc(100% - 96px);
}

/* ==========================================================================
   3. Title bar — convert <table class="divMin q88m-titlebar"> to flex row
   ----------------------------------------------------------------------------
   display:contents on table/tbody/tr promotes the <td>s to flex children.
   Acceptable here because the title-bar table is layout-only; the data grid
   below is an unmodified <table> and stays accessible.
   ========================================================================== */

body.page-milbros-grid .q88m-titlebar,
body.page-milbros-grid .q88m-titlebar > tbody,
body.page-milbros-grid .q88m-titlebar > tbody > tr {
    display: contents;
}

body.page-milbros-grid .q88m-titlebar {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 0 0 24px 0;          /* Title Bar → Table gap = 24 (meta y64 - 40h) */
    margin: 0 !important;
    width: 100% !important;
    flex-wrap: wrap;
}

body.page-milbros-grid .q88m-titlebar > tbody > tr > td {
    padding: 0;
    vertical-align: middle;
    background: transparent !important;
    border: 0;
}

/* Right-align the actions cell (always the last <td>) */
body.page-milbros-grid .q88m-titlebar > tbody > tr > td:last-child {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;                    /* Figma Frame 7: CirclePlus x0 + EllipsisVertical x36 = 12px gap */
}

/* ==========================================================================
   4a. Title-bar action icons — 24px lucide masks (Milbros Specs node 2362:24625)
   ----------------------------------------------------------------------------
   Add (a.Img-Std-Add) → CirclePlus 24; Actions (a.ActionsMenu) → EllipsisVertical
   24. Both #0f172a (color-pick @1814,141 = rgb(15,23,42)). Sprite/StdIcons.png
   bg killed; recolour via mask + background-color. Scoped to the grid title bar
   so app-wide Img-Std-Add / ActionsMenu sprites are untouched.
   ========================================================================== */

body.page-milbros-grid .q88m-titlebar a.Img-Std-Add,
body.page-milbros-grid .q88m-titlebar a.ActionsMenu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    line-height: 0 !important;
    background-image: none !important;
    background-color: var(--q88m-fg) !important;   /* #0f172a */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

body.page-milbros-grid .q88m-titlebar a.Img-Std-Add {
    -webkit-mask-image: url("icons/circle-plus.svg");
    mask-image: url("icons/circle-plus.svg");
    -webkit-mask-size: 22px 22px;   /* 20px ring + ~2px inset → matches lucide 24px CirclePlus */
    mask-size: 22px 22px;
}

body.page-milbros-grid .q88m-titlebar a.ActionsMenu {
    -webkit-mask-image: url("icons/ellipsis-vertical.svg");
    mask-image: url("icons/ellipsis-vertical.svg");
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
}

/* The kebab anchor wraps a 16px clearpixel <img> (cp.gif) that only sets its
   box size — hide it so the masked anchor drives the 24px glyph. */
body.page-milbros-grid .q88m-titlebar a.ActionsMenu img.imageCP16x16,
body.page-milbros-grid .q88m-titlebar a.ActionsMenu > img {
    display: none !important;
}

/* Subtle hover affordance on the icon buttons (no Figma hover state shown). */
body.page-milbros-grid .q88m-titlebar a.Img-Std-Add:hover,
body.page-milbros-grid .q88m-titlebar a.ActionsMenu:hover {
    background-color: var(--q88m-primary) !important;   /* teal on hover */
}

/* ==========================================================================
   4. Page title — <td class="PageTitle">
   ========================================================================== */

body.page-milbros-grid .q88m-titlebar td.PageTitle {
    font-family: var(--q88m-font);
    font-size: 18px !important;   /* text/lg */
    line-height: 28px !important;
    font-weight: 600 !important;
    color: var(--q88m-fg) !important;
    width: auto !important;  /* override Search.ascx inline width:80px */
    white-space: nowrap;
}

/* ==========================================================================
   4a. ASPxGridView — outer wrapper, full card width
   ----------------------------------------------------------------------------
   Several Milbros grid hosts (CleaningChemicalsList, Search non-Standard
   variants, SearchAdditives) compute the grid width from the sum of DB-set
   column widths and emit it as an inline pixel value:

       if (totalWidth > 1000)
           DxxGrid.Width = new Unit((totalWidth + 55) + "px");

   The result is an inline `style="width: 2938px"` on the outer
   <table class="dxgvControl">, which leaves a right-edge gap on wide
   viewports and forces page-level horizontal scroll on narrow ones.

   The fix is global to `body.page-milbros-grid` because every page in this
   family carries the same chrome and benefits identically: hosts that
   already inline `width: 100%` (Search Standard, Library) remain unchanged
   (idempotent), and hosts with the buggy pixel width get pulled back to
   the card width. table-layout: auto lets the DB-set column widths
   redistribute proportionally so the grid fills the card cleanly instead
   of cramming under fixed layout.
   ========================================================================== */

body.page-milbros-grid table.dxgvControl {
    width: 100% !important;
    table-layout: auto !important;
}

/* ==========================================================================
   4b. DX scroll-container hygiene (Q88-style grids only)
   ----------------------------------------------------------------------------
   Some Milbros grids (currently none on the 7 mapped pages, but possible
   for future pages with DX `Settings-VerticalScrollableHeight` enabled)
   render the Q88-style scroll containers .dxgvHSDC / .dxgvBSDC / .dxgvCSD.
   When present, force them to 100% and reserve scrollbar gutter so header
   and body columns stay aligned. Inert on pages where these classes are
   absent (CleaningChemicals, Search, etc.).

   We deliberately DO NOT force `_DXMainTable` / `_DXHeaderTable` to
   width:100% + table-layout:fixed here. That would override DX's
   inline pixel widths (driven by saved layouts and live resize handles),
   silently equalize columns, and break ColumnResizeMode. Honor DX's
   widths and let §4d's overflow-x: auto wrapper handle horizontal
   overflow when the column-sum exceeds the card.
   ========================================================================== */

body.page-milbros-grid table.dxgvControl > tbody > tr > td {
    width: 100% !important;
}

body.page-milbros-grid .dxgvCSD {
    width: 100% !important;
    scrollbar-gutter: stable !important;
}

body.page-milbros-grid .dxgvHSDC,
body.page-milbros-grid .dxgvBSDC {
    width: 100% !important;
    box-sizing: border-box !important;
}

body.page-milbros-grid .dxgvHSDC > div {
    width: 100% !important;
}

/* ==========================================================================
   4c. DNN ContentPane — break the auto-layout grow chain
   ----------------------------------------------------------------------------
   The DNN content pane is rendered as a `<table class="ContentPane">` with
   default `table-layout: auto`, holding the page content inside a single
   `<td class="ContentPaneBody">` which itself wraps another auto-layout
   `<table>` (top/content/bottom rows). When the DX grid columns sum wider
   than the flex-allotted `.q88-content` (e.g. CleaningChemicals' ~3500px
   column-sum vs ~1185px content area), every auto-layout ancestor grows
   to fit the inner grid, and the page horizontally scrolls.

   Constraining `.ContentPane` AND the inner `<td.ContentPaneBody> > <table>`
   to `width: 100%; table-layout: fixed` pins both to the flex parent's
   width. With `_DXMainTable` already forced to fixed + 100%, the browser
   then proportionally scales the inner DX `<col>` widths to fit the card
   — the same redistribution Q88 Inspections lucks into when its column-sum
   happens to be smaller than the content area.
   ========================================================================== */

body.page-milbros-grid table.ContentPane,
body.page-milbros-grid td.ContentPaneBody > table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

/* ==========================================================================
   4d. Grid-section overflow — scroll the wide DX grid inside the card
   ----------------------------------------------------------------------------
   ASPxGridView emits an "armature" row (`tr.dxgvArm`) whose cells carry
   inline pixel widths driving column layout (e.g. `width: 1059px`). Those
   widths come from `DxxGrid.LoadClientLayout(GridSettingsFromDB)` — the
   per-user saved layout. DX's `ColumnResizeMode="Control"` rewrites those
   widths whenever the user drags a column divider, so a CSS override here
   would defeat resize. We honor the saved widths and provide an escape
   route instead.

   Markup: ascx pages wrap the grid in a second `<table class="divMin">`
   (titlebar is the first .divMin; data section is the non-titlebar one).
   Switch that wrapper to `display: block` so it accepts `overflow-x: auto`
   — when columns sum wider than the card, the grid gets its own horizontal
   scrollbar inside the band while the titlebar (search, action menu)
   stays anchored. Card keeps `overflow: hidden` so rounded corners
   remain clipped.

   Trade-off (vs forcing equal-width columns via CSS): user-saved column
   widths are honored and DX resize handles continue to work. The grid
   may visually exceed the card's right edge, requiring horizontal scroll
   within the band to reveal right-side columns. To make a wide grid fit
   the card AND keep resize functional, the proper fix is server-side:
   normalize column widths to percentages in CleaningChemicalsList.ascx.cs
   (and analogous files), or add a JS post-callback hook that converts
   pixel widths to percentages whenever the column-sum exceeds the card.
   ========================================================================== */

body.page-milbros-grid .q88m-card > table.divMin:not(.q88m-titlebar) {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* When .divMin becomes display: block its tbody/tr also need block-level
   sizing so the inner dxgvControl is the actual scrolling content. */
body.page-milbros-grid .q88m-card > table.divMin:not(.q88m-titlebar) > tbody {
    display: block !important;
    width: 100% !important;
}

body.page-milbros-grid .q88m-card > table.divMin:not(.q88m-titlebar) > tbody > tr {
    display: block !important;
    width: 100% !important;
}

body.page-milbros-grid .q88m-card > table.divMin:not(.q88m-titlebar) > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

/* ==========================================================================
   5. ASPxGridView — header row (mirrors body.page-grid contract in grid.css)
   ----------------------------------------------------------------------------
   Q88 Inspections (the visual reference) uses padding-based row height
   (11+20+11 ≈ 42 content, plus DX cellspacing → ~70 visible) on a muted
   #F5F5F5 background. We mirror that here so Milbros headers look the same.
   ========================================================================== */

body.page-milbros-grid table.dxgvTable td.dxgvHeader {
    background: var(--q88m-muted) !important;
    background-image: none !important;
    padding: 8px 16px !important;                          /* 8 + 20 lh = 36h (Figma header 36) */
    border-bottom: 1px solid var(--q88m-muted) !important; /* base/accent: muted fill is the only separator */
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 1px solid var(--q88m-border) !important;
    font-family: var(--q88m-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;                           /* text-sm semibold (get_design_context 2362:24630) */
    color: var(--q88m-fg) !important;
    vertical-align: middle !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.page-milbros-grid table.dxgvTable td.dxgvHeader:first-child {
    border-left: 0 !important;
}

/* DX wraps each non-anchor header cell in extra <div>/<table.tblColHeader>
   nodes; reset their backgrounds + padding so the outer <td> drives layout. */
body.page-milbros-grid table.dxgvTable .dxgvHeader td,
body.page-milbros-grid table.dxgvTable .dxgvHeader .tblColHeader td,
body.page-milbros-grid table.dxgvTable .dxgvHeader .tblColHeader td > div {
    background: transparent !important;
    color: var(--q88m-fg) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    vertical-align: middle !important;
}

/* DXR.axd sets `font: tahoma 12px` on the inner header div (non-inheriting),
   so target descendants explicitly to keep Inter 14/500. */
body.page-milbros-grid table.dxgvTable td.dxgvHeader,
body.page-milbros-grid table.dxgvTable td.dxgvHeader *,
body.page-milbros-grid table.dxgvTable td.dxgvHeader a,
body.page-milbros-grid table.dxgvTable td.dxgvHeader .tblColHeader td a,
body.page-milbros-grid table.dxgvTable td.dxgvHeader span {
    font-family: var(--q88m-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;   /* semibold header text */
    color: var(--q88m-fg) !important;
    text-decoration: none !important;
}

body.page-milbros-grid table.dxgvTable td.dxgvHeader a:hover {
    color: var(--q88m-primary) !important;
}

/* ==========================================================================
   6. ASPxGridView — data row (h:36 per Milbros Specs node 2362:9858)
   ========================================================================== */

body.page-milbros-grid table.dxgvTable tr.dxgvDataRow > td,
body.page-milbros-grid table.dxgvTable tr.dxgvDataRowAlt > td {
    height: 36px !important;       /* Figma row 36 */
    padding: 0 16px !important;
    font-family: var(--q88m-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: var(--q88m-fg) !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--q88m-border) !important;
    border-top: 0 !important;
    background: transparent !important;
}

body.page-milbros-grid table.dxgvTable tr.dxgvDataRow:hover > td,
body.page-milbros-grid table.dxgvTable tr.dxgvDataRowAlt:hover > td {
    background: var(--q88m-row-hover) !important;
}

body.page-milbros-grid table.dxgvTable tr.dxgvFocusedRow > td,
body.page-milbros-grid table.dxgvTable tr.dxgvSelectedRow > td {
    background: var(--q88m-row-selected) !important;
    color: var(--q88m-fg) !important;
}

/* ==========================================================================
   7. ASPxGridView — pager (h:48)

   Matches DESIGN.md §5.6 (Q88 Inspections pagination model). DX renders:
   First | Prev | [input] of N | Next | Last ... Show 15 25 50
   We strip First / Last / "Show NN" / extra pager-text and keep:
   < Previous | Page [N] of M | Next >

   Selectors target the stable Img-PgrPrev / Img-PgrNext class prefix (works
   across DX versions where IDs differ between Q88 `_pagerPrev_0` and
   Milbros `_pagerPrev`).
   ========================================================================== */

body.page-milbros-grid .GridPager,
body.page-milbros-grid .dxgvPagerBottomPanel {
    background-color: var(--q88m-muted) !important;
    background-image: none !important;
    border-top: 1px solid var(--q88m-border) !important;
    border-bottom: 0 !important;
    padding: 6px 16px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    font-family: var(--q88m-font);
    color: var(--q88m-fg) !important;
    font-size: 14px !important;
}

body.page-milbros-grid .GridPager > div {
    padding: 0 !important;
}

body.page-milbros-grid .GridPager table {
    border: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

body.page-milbros-grid .GridPager table td {
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: var(--q88m-font);
    vertical-align: middle !important;
    color: var(--q88m-muted-fg);
    white-space: nowrap;
}

body.page-milbros-grid .GridPager > div > table > tbody > tr > td[id$='_tdExtraPagerText_0'],
body.page-milbros-grid .GridPager > div > table > tbody > tr > td[id$='_tdExtraPagerText'] {
    width: 0 !important;
    padding: 0 !important;
}

/* Pager strip layout: split row — "Show [N ▾]" left, Prev/Next/page-input right.
   The GridPager.ascx markup emits the size cell AFTER the buttons cell, so we
   re-order via flex (`order: -1` on tdPageSizeOptions) and let `margin-right:
   auto` push the buttons cell to the far right. */
body.page-milbros-grid .GridPager > div > table > tbody > tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

body.page-milbros-grid .GridPager > div > table > tbody > tr > td[id$='_tdPagerButtons_0'],
body.page-milbros-grid .GridPager > div > table > tbody > tr > td[id$='_tdPagerButtons'] {
    width: auto !important;
    text-align: right !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.page-milbros-grid .GridPager td[id$='_tdPagerButtons_0'] > table,
body.page-milbros-grid .GridPager td[id$='_tdPagerButtons'] > table {
    display: inline-table !important;
}

body.page-milbros-grid .GridPager td[id$='_tdPagerButtons_0'] > table td,
body.page-milbros-grid .GridPager td[id$='_tdPagerButtons'] > table td {
    padding: 0 2px !important;
}

/* Base pill style for any remaining nav anchor — overridden below for Prev/Next ghost variant. */
body.page-milbros-grid .GridPager a.Img-Pgr {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 32px !important;
    min-width: 36px;
    padding: 0 10px !important;
    background-image: none !important;
    background-color: var(--q88m-card) !important;
    border: 1px solid var(--q88m-border) !important;
    border-radius: 6px !important;
    color: var(--q88m-fg) !important;
    font-family: var(--q88m-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none !important;
    box-sizing: border-box !important;
    vertical-align: middle;
    text-indent: 0 !important;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

body.page-milbros-grid .GridPager a.Img-Pgr:hover {
    background-color: var(--q88m-muted) !important;
    border-color: #cbd5e1 !important;
}

/* Hide First / Last per DESIGN.md (only Prev / Next exposed).
   Hide the wrapping <td> too via :has() so the GridPager.ascx `&nbsp;`
   inside the empty TD doesn't leave ~7px phantom whitespace on each side
   of the visible Prev/Next pills. */
body.page-milbros-grid .GridPager a[class*='Img-PgrFirst'],
body.page-milbros-grid .GridPager a[class*='Img-PgrLast'],
body.page-milbros-grid .GridPager td[id$='_tdPagerButtons_0'] > table td:has(> a[class*='Img-PgrFirst']),
body.page-milbros-grid .GridPager td[id$='_tdPagerButtons_0'] > table td:has(> a[class*='Img-PgrLast']),
body.page-milbros-grid .GridPager td[id$='_tdPagerButtons'] > table td:has(> a[class*='Img-PgrFirst']),
body.page-milbros-grid .GridPager td[id$='_tdPagerButtons'] > table td:has(> a[class*='Img-PgrLast']) {
    display: none !important;
}

/* Symbol + label via ::before/::after on Prev / Next. */
body.page-milbros-grid .GridPager a[class*='Img-PgrPrev']::before { content: '‹'; margin-right: 6px; font-size: 16px; line-height: 1; color: var(--q88m-muted-fg); }
body.page-milbros-grid .GridPager a[class*='Img-PgrPrev']::after  { content: 'Previous'; }

body.page-milbros-grid .GridPager a[class*='Img-PgrNext']::before { content: 'Next'; }
body.page-milbros-grid .GridPager a[class*='Img-PgrNext']::after  { content: '›'; margin-left: 6px; font-size: 16px; line-height: 1; color: var(--q88m-muted-fg); }

/* Prev / Next ghost-pill variant (transparent until hover). */
body.page-milbros-grid .GridPager a[class*='Img-PgrPrev'],
body.page-milbros-grid .GridPager a[class*='Img-PgrNext'] {
    border: 0 !important;
    background: transparent !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    color: var(--q88m-fg) !important;
    font-weight: 500 !important;
}

body.page-milbros-grid .GridPager a[class*='Img-PgrPrev']:hover,
body.page-milbros-grid .GridPager a[class*='Img-PgrNext']:hover {
    background: #e5e7eb !important;
    border: 0 !important;
    color: var(--q88m-fg) !important;
}

body.page-milbros-grid .GridPager a.Img-PgrFirstDis,
body.page-milbros-grid .GridPager a.Img-PgrPrevDis,
body.page-milbros-grid .GridPager a.Img-PgrNextDis,
body.page-milbros-grid .GridPager a.Img-PgrLastDis {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Page-number input — 36×36 active-page chip. */
body.page-milbros-grid .GridPager input#txtPage,
body.page-milbros-grid .GridPager input[id*='txtPage'] {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 4px;
    border: 1px solid var(--q88m-border) !important;
    border-radius: 8px !important;
    font-family: var(--q88m-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--q88m-fg) !important;
    text-align: center;
    box-sizing: border-box !important;
    background: var(--q88m-card) !important;
}

body.page-milbros-grid .GridPager input#txtPage:focus,
body.page-milbros-grid .GridPager input[id*='txtPage']:focus {
    outline: 2px solid var(--q88m-primary);
    outline-offset: -1px;
    border-color: var(--q88m-primary) !important;
}

/* Hide unused extra-pager-text / pager-text slots emitted by GridPager.ascx
   (LegendContent / pnlPagerLeft) — typically empty.
   Note: tdPageSizeOptions intentionally NOT hidden — it carries the
   "Show [N ▾] results per page" select rendered by GridPager.ascx for
   PortalId 0/1/2 (Q88, Baltic99, Milbros). See DESIGN.md §5.6.1. */
body.page-milbros-grid .GridPager td[id$='_tdExtraPagerText_0'],
body.page-milbros-grid .GridPager td[id$='_tdExtraPagerText'],
body.page-milbros-grid .GridPager td[id$='_tdPagerText_0'],
body.page-milbros-grid .GridPager td[id$='_tdPagerText'] {
    display: none !important;
}

/* tdPageSizeOptions carries the rows-per-page select — re-ordered to the
   LEFT of the strip via flex `order: -1`; `margin-right: auto` pushes the
   pagination buttons cell to the far right. */
body.page-milbros-grid .GridPager > div > table > tbody > tr > td[id$='_tdPageSizeOptions_0'],
body.page-milbros-grid .GridPager > div > table > tbody > tr > td[id$='_tdPageSizeOptions'] {
    order: -1 !important;
    margin-right: auto !important;
    width: auto !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* "Page" / "of N" muted label flanking the input. */
body.page-milbros-grid .GridPager td[id$='_tdPagerButtons_0'] > table > tbody > tr > td:nth-child(3),
body.page-milbros-grid .GridPager td[id$='_tdPagerButtons'] > table > tbody > tr > td:nth-child(3) {
    color: var(--q88m-muted-fg) !important;
    font-size: 14px !important;
    padding: 0 4px !important;
}

/* ==========================================================================
   7c. Rows-per-page selector (DESIGN.md §5.6.1)
   GridPager.ascx renders "Show <select> results per page" inside
   td[id$='_tdPageSizeOptions'] for Q88/Baltic99/Milbros portals. Skin the
   native <select> with Milbros tokens to match the canonical select look.
   ========================================================================== */

body.page-milbros-grid .GridPager td[id$='_tdPageSizeOptions'] .grdRecordsToShow,
body.page-milbros-grid .GridPager td[id$='_tdPageSizeOptions_0'] .grdRecordsToShow {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--q88m-muted-fg) !important;
    font-family: var(--q88m-font);
    font-size: 14px !important;
    line-height: 20px;
    white-space: nowrap;
}

body.page-milbros-grid .GridPager select#dlGridPageSizes,
body.page-milbros-grid .GridPager td[id$='_tdPageSizeOptions'] select,
body.page-milbros-grid .GridPager td[id$='_tdPageSizeOptions_0'] select {
    height: 32px;
    min-width: 64px;
    padding: 0 28px 0 10px !important;
    margin: 0 !important;
    border: 1px solid var(--q88m-border) !important;
    border-radius: 8px !important;
    background-color: var(--q88m-card) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--q88m-muted-fg) 50%),
        linear-gradient(-45deg, transparent 50%, var(--q88m-muted-fg) 50%) !important;
    background-position:
        right 12px center,
        right 7px center !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--q88m-fg) !important;
    font-family: var(--q88m-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

body.page-milbros-grid .GridPager select#dlGridPageSizes:hover,
body.page-milbros-grid .GridPager td[id$='_tdPageSizeOptions'] select:hover,
body.page-milbros-grid .GridPager td[id$='_tdPageSizeOptions_0'] select:hover {
    background-color: var(--q88m-muted) !important;
    border-color: var(--border-strong) !important;
}

body.page-milbros-grid .GridPager select#dlGridPageSizes:focus,
body.page-milbros-grid .GridPager td[id$='_tdPageSizeOptions'] select:focus,
body.page-milbros-grid .GridPager td[id$='_tdPageSizeOptions_0'] select:focus {
    outline: 2px solid var(--q88m-primary);
    outline-offset: -1px;
    border-color: var(--q88m-primary) !important;
}

/* ==========================================================================
   8. ASPxGridView — empty/filter/footer rows
   ========================================================================== */

body.page-milbros-grid table.dxgvTable tr.dxgvEmptyDataRow > td {
    height: 80px !important;
    color: var(--q88m-muted-fg) !important;
    font-style: normal !important;
    text-align: center !important;
    background: transparent !important;
}

body.page-milbros-grid table.dxgvTable tr.dxgvFilterRowTop > td,
body.page-milbros-grid table.dxgvTable tr.dxgvFilterRow > td {
    background: transparent !important;
    border-bottom: 1px solid var(--q88m-border) !important;
}

body.page-milbros-grid table.dxgvTable tr.dxgvFooter > td {
    background: transparent !important;
    border-top: 1px solid var(--q88m-border) !important;
}

/* ==========================================================================
   9. Search input — TextBox + LinkButton trailing button
   ----------------------------------------------------------------------------
   Targets: <asp:TextBox> rendered as <input type=text>, followed by
   <asp:LinkButton class="LinkButton"> rendered as <a class="LinkButton">.
   The pair is grouped by sitting inside the same <td> with adjacent rendering.
   Gap-separated per DESIGN.md §12.10.3.1 "Search row" — field and button are
   two independent rounded controls (NOT an abutting combined pill).
   ========================================================================== */

body.page-milbros-grid .q88m-titlebar input[type="text"] {
    height: 32px !important;
    width: 285px !important;
    background: #ffffff !important;
    border: 1px solid var(--q88m-border) !important;
    border-radius: 8px !important;
    padding: 0 12px 0 36px !important;  /* 36 = 12 padding + 16 icon + 8 gap */
    font-family: var(--q88m-font);
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--q88m-fg) !important;
    box-sizing: border-box !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
}

body.page-milbros-grid .q88m-titlebar input[type="text"]::placeholder {
    color: var(--q88m-placeholder);
}

body.page-milbros-grid .q88m-titlebar input[type="text"]:focus {
    outline: 2px solid var(--q88m-primary) !important;
    outline-offset: -1px;
    border-color: var(--q88m-primary) !important;
}

/* Watermark extender renders as a div overlay; let it inherit placeholder styling */
body.page-milbros-grid .q88m-titlebar .DisabledText {
    color: var(--q88m-placeholder) !important;
}

/* Search button — LinkButton renders <a class="LinkButton"> immediately after the input */
body.page-milbros-grid .q88m-titlebar a.LinkButton {
    height: 32px !important;
    min-width: 80px;                    /* DESIGN.md §12.10.3.1 Button min-width */
    padding: 0 12px !important;         /* §12.10.3.1 Button padding: px-3 */
    background: var(--q88m-primary) !important;
    color: var(--q88m-primary-fg) !important;
    font-family: var(--q88m-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: 1px solid var(--q88m-primary) !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    margin-left: 12px !important;       /* gap-separated per DESIGN.md §12.10.3.1 */
}

body.page-milbros-grid .q88m-titlebar a.LinkButton:hover {
    background: var(--q88m-primary-hover) !important;
    border-color: var(--q88m-primary-hover) !important;
}

/* asp:LinkButton always renders <ins>&nbsp;</ins> before its content — hide it
   so the "Search" label centers correctly inside the flex button, otherwise
   the invisible spacer shifts the visible text right-of-center (DESIGN.md §16.7). */
body.page-milbros-grid .q88m-titlebar a.LinkButton > ins {
    display: none !important;
}

/* ==========================================================================
   10. RadioButtonList → pill toggle group
   ----------------------------------------------------------------------------
   Search.ascx + CleaningChemicalsList.ascx use <asp:RadioButtonList
   RepeatLayout="Flow" RepeatDirection="Horizontal"> which renders as
   <span><input type=radio><label>...</label> ...</span>. Re-skin as pill toggles.
   ========================================================================== */

body.page-milbros-grid .q88m-titlebar .FloatLeft.StdPadding > span:not(.ValHighlight),
body.page-milbros-grid .q88m-titlebar table.dxeBase {
    display: inline-flex !important;
    background: var(--q88m-muted);
    border: 1px solid var(--q88m-border);
    border-radius: 8px;
    padding: 2px;
    height: 32px;
    box-sizing: border-box;
    align-items: center;
}

body.page-milbros-grid .q88m-titlebar input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

body.page-milbros-grid .q88m-titlebar input[type="radio"] + label {
    height: 26px;
    padding: 0 12px;
    border-radius: 6px;
    font-family: var(--q88m-font);
    font-size: 14px;
    line-height: 26px;
    color: var(--q88m-muted-fg);
    cursor: pointer;
    background: transparent;
    transition: background 120ms;
}

body.page-milbros-grid .q88m-titlebar input[type="radio"]:checked + label {
    background: var(--q88m-primary);
    color: var(--q88m-primary-fg);
    font-weight: 500;
}

/* ==========================================================================
   11. PopupMenu Actions → ellipsis (24×24)
   ----------------------------------------------------------------------------
   <uc:PopupMenu ButtonText="Actions"> renders a button styled by MainWhiteout.
   Hide the "Actions" label, replace with EllipsisVertical icon, keep the
   click handler intact (the menu items still open via JS).
   ========================================================================== */

body.page-milbros-grid .q88m-titlebar .PopupMenuButton,
body.page-milbros-grid .q88m-titlebar .PopupMenuV2Button {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 0 !important;  /* hide "Actions" label text */
    color: transparent !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

body.page-milbros-grid .q88m-titlebar .PopupMenuButton:hover,
body.page-milbros-grid .q88m-titlebar .PopupMenuV2Button:hover {
    background-color: var(--q88m-muted) !important;
}

/* Suppress any inline images/icons inside the original button */
body.page-milbros-grid .q88m-titlebar .PopupMenuButton img,
body.page-milbros-grid .q88m-titlebar .PopupMenuV2Button img,
body.page-milbros-grid .q88m-titlebar .PopupMenuButton .Img-Std,
body.page-milbros-grid .q88m-titlebar .PopupMenuV2Button .Img-Std {
    display: none !important;
}

/* ==========================================================================
   12. Secondary text link — "Browse Commodities By Letter" hyperlink
   ----------------------------------------------------------------------------
   <asp:HyperLink> wrapping <uc:ImageManager> with AddressBook icon. Hide the
   icon image; render link as plain text.
   ========================================================================== */

body.page-milbros-grid .q88m-titlebar > tbody > tr > td:last-child a[id*="lnkBrowseByLetter"] {
    font-family: var(--q88m-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--q88m-muted-fg) !important;
    text-decoration: none !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
}

body.page-milbros-grid .q88m-titlebar > tbody > tr > td:last-child a[id*="lnkBrowseByLetter"]:hover {
    background: var(--q88m-muted) !important;
    color: var(--q88m-fg) !important;
}

body.page-milbros-grid .q88m-titlebar > tbody > tr > td:last-child a[id*="lnkBrowseByLetter"] img.Img-Std {
    display: none !important;
}

/* ==========================================================================
   12. Abbreviations & Definitions (Milbros) — mirror of abbreviations.css
   ----------------------------------------------------------------------------
   /styles/abbreviations.css is added inside the PortalId 0/1 (Q88 wet/dry)
   CSS block in Default.Master.cs, so it never loads on the Milbros portal —
   but /Abbreviations.aspx (+ per-letter Abbreviations_A..Z tabs) IS served
   on Milbros (Tools → Abbreviations & Definitions) with the same
   `page-abbreviations page-grid` body classes. Without it the "New" CTA
   rendered as an EMPTY teal pill (grid.css hides the inner <img>; the
   ::before label lived only in the unloaded file) and the Edit caption /
   navy header underline / 12px wrapped title leaked through (QEN-8801).
   This file loads on every Milbros page; the rules below are inert outside
   body.page-abbreviations. Keep in sync with abbreviations.css — or move
   that file's AddCssFileToList call into the 0/1/2 block and delete this
   section. (This block never double-applies: milbros-grid.css is
   Milbros-only, abbreviations.css is Q88-only.)
   ========================================================================== */

/* CTA label for the icon-only LinkButton (lbNewAbbreviation, ToolTip="New"). */
body.page-abbreviations a[id$='_lbNewAbbreviation']::before {
    content: 'New Abbreviation';
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Edit-column header blank caption. Edit is the 3rd column and only present for
   admins — target it by position, NOT :last-child (when Edit is hidden the
   Definition column is last and would wrongly be blanked). */
body.page-abbreviations td.dxgvHeader:nth-of-type(3),
body.page-abbreviations th.dxgvHeader:nth-of-type(3),
body.page-abbreviations td.dxgvHeader:nth-of-type(3) *,
body.page-abbreviations th.dxgvHeader:nth-of-type(3) * {
    font-size: 0 !important;
    color: transparent !important;
}

/* Definition is the 2nd column (Abbreviation 1st, Edit 3rd/admin-only). grid.css's
   last-column blank+centre (:last-of-type / td:last-child) hits Definition when
   Edit is hidden (non-admin), so pin the 2nd column to a visible, left-aligned
   text column. The Edit column (3rd) keeps its blank above + grid.css's centre. */
body.page-abbreviations.page-grid td.dxgvHeader:nth-of-type(2),
body.page-abbreviations.page-grid td.dxgvHeader:nth-of-type(2) .tblColHeader td > div,
body.page-abbreviations.page-grid td.dxgvHeader:nth-of-type(2) .tblColHeader td > a {
    font-size: 14px !important;
    color: var(--q88-grid-fg, #0f172a) !important;
    text-align: left !important;
}
body.page-abbreviations.page-grid .dxgvDataRow > td:nth-of-type(2),
body.page-abbreviations.page-grid .dxgvDataRowAlt > td:nth-of-type(2) {
    text-align: left !important;
}

/* Card title — no inner td.modV2Title on this page, so grid.css's title
   spec never matches; restate it on the div (see abbreviations.css). */
body.page-abbreviations.page-grid div.modV2Title {
    font-family: var(--q88-grid-font, Inter, "Helvetica Neue", Arial, sans-serif);
    /* Figma node 666:11143 — title is text/lg (18px) semibold, not grid.css's 16px. */
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: var(--q88-grid-fg, #0f172a) !important;
    white-space: nowrap;
    /* The title row also hosts the relocated New Abbreviation CTA (§F9): make
       the title cell a full-width flex row so the button sits far-right while
       the letters strip (TitleRight, flex:0 0 100%) still wraps to its own row. */
    display: flex;
    align-items: center;
    flex: 1 1 100%;
}

/* Legacy navy #003366 header underline from the inline <style> in
   Abbreviations.ascx — drop it entirely (muted header fill separates the
   rows). Header cell + SubHeader borders killed in §F7/§F8. */
body.page-abbreviations [id$="_grdTerminology_DXHeaderTable"] {
    border-bottom: 0 !important;
}

/* Letters nav (TitleRight) — hide the legacy `&nbsp;|&nbsp;` separator
   cells (they pushed the strip past the card edge once the title stopped
   wrapping) and space the letters with padding (see abbreviations.css). */
body.page-abbreviations .modV2TRight td:not(:has(*)) {
    display: none;
}
/* Letter buttons — Figma node 666:11146.. : Inter 14px medium (500), teal
   (base/primary #0d9488), padded px16/h20, with a 1px right divider
   (base/border #e2e8f0) between letters. The pipe text-cells stay hidden
   (rule above); the divider is the button's own border-right. */
body.page-abbreviations .modV2TRight td a {
    display: inline-block;
    box-sizing: border-box;
    height: 20px;
    padding: 0 16px !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--border-default, #e2e8f0) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: var(--primary, #0d9488) !important;
}
/* Last letter (0-9) carries no trailing divider. */
body.page-abbreviations .modV2TRight td:last-child a {
    border-right: 0 !important;
}

/* ==========================================================================
   QEN-8801 — Figma re-skin (Account / Tools › Abbreviations, node 666:11134).
   Aligns this page to the supplied design: card chrome, "By Letter" on its
   own row below the title, the search row controls, and the grid header.
   Color truth from get_variable_defs: primary #0d9488, border #e2e8f0,
   muted #f1f5f9, foreground #0f172a, primary-foreground #eff6ff.
   ========================================================================== */

/* §F1 Card chrome — Figma "Card" uses rounded-xl (12px) corners and 24px
   interior padding (the global modV2 renders 8px / 16px). Scoped to this
   page to match the provided design. */
body.page-abbreviations [id$='_pnlMod'].modV2 {
    padding: 24px !important;
    border-radius: 12px !important;
}

/* §F2 "By Letter" on its own row — the ModuleTemplateV2 title bar is a flex
   row (title-left + the letters strip in TitleRight). Figma stacks them:
   title on row 1, the "By Letter" + A–Z strip on row 2, 24px below. Wrap the
   flex container and force the letters strip full-width so it drops down. */
/* !important throughout — grid.css loads AFTER this file (see title rule above)
   and sets the title bar to flex/nowrap, so plain declarations lose the tie. */
body.page-abbreviations .modV2TitleContainer {
    flex-wrap: wrap !important;
    row-gap: 24px !important;
    column-gap: 0 !important;
    align-items: center !important;
}
body.page-abbreviations .modV2TRight {
    flex: 0 0 100% !important;
    width: 100% !important;
    /* graceful degradation on narrow viewports: the letters table can't wrap
       (it is server-rendered as a single <tr>), so scroll rather than burst
       the card. At the design width (~1536px content) no scrollbar appears. */
    overflow-x: auto;
}
body.page-abbreviations .modV2TRight table {
    width: auto !important;   /* content width, left-aligned (Figma 1155px strip) */
}

/* §F3 "By Letter" label — Figma node 666:11145: Inter 14px semibold,
   foreground, no colon. The legacy render is bold "By letter:"; zero its font
   and repaint the exact label via ::before (same pattern as the CTA buttons). */
body.page-abbreviations .modV2TRight b {
    font-size: 0 !important;
    padding-right: 8px;
    white-space: nowrap;   /* keep "By Letter" on one line at narrow widths */
}
body.page-abbreviations .modV2TRight b::before {
    content: 'By Letter';
    font-size: 14px;
    font-weight: 600;
    color: var(--q88-grid-fg, #0f172a);
}

/* §F4 Search row — flatten the legacy &nbsp;-delimited inline cluster to a
   clean 12px rhythm. font-size:0 on the cell zeroes the stray &nbsp; text
   nodes (so they add no width); real controls restore 14px and own their
   12px left gap. */
body.page-abbreviations .dropDownContainer {
    font-size: 0;
    white-space: nowrap;
}
body.page-abbreviations .dropDownContainer > b,
body.page-abbreviations .dropDownContainer > select,
body.page-abbreviations .dropDownContainer > input,
body.page-abbreviations .dropDownContainer > a {
    font-size: 14px !important;
    vertical-align: middle;
}
/* Label — Figma node I685:1197;..728: 14px medium, foreground (not bold). */
body.page-abbreviations .dropDownContainer > b {
    font-weight: 500 !important;
    color: var(--q88-grid-fg, #0f172a) !important;
}
body.page-abbreviations .dropDownContainer > select,
body.page-abbreviations .dropDownContainer > input,
body.page-abbreviations .dropDownContainer > a[id$='_lbSearch'] {
    margin-left: 12px !important;
}

/* §F5 Search input — Figma node 0:34: h32, 1px border #e2e8f0, rounded-md
   (8px), 14px text, with a 16px magnifier (lucide search, muted #475569)
   inset on the left. The legacy markup pins height:18px / border #a6a7aa /
   radius 0 inline, so !important is required. */
body.page-abbreviations [id$='_txtKeyword'] {
    box-sizing: border-box !important;
    height: 32px !important;
    width: 260px !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 0 12px 0 34px !important;
    font-size: 14px;
    color: var(--q88-grid-fg, #0f172a);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 16px 16px;
    vertical-align: middle;
}
body.page-abbreviations [id$='_txtKeyword']::placeholder {
    color: var(--muted-foreground, #475569);
}

/* §F6 Search button — Figma node 685:1199: teal primary CTA. The legacy
   lbSearch LinkButton renders only a navy magnifier <img>; repaint it as the
   "Search" pill (hide the img, label via ::before). */
body.page-abbreviations a[id$='_lbSearch'] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    background: var(--primary, #0d9488) !important;
    color: var(--primary-foreground, #eff6ff) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
}
body.page-abbreviations a[id$='_lbSearch']:hover {
    background: var(--primary-hover, #0f766e);
    color: var(--primary-foreground, #eff6ff) !important;
}
body.page-abbreviations a[id$='_lbSearch'] img {
    display: none;
}
body.page-abbreviations a[id$='_lbSearch']::before {
    content: 'Search';
}

/* §F7 Grid header — Figma node 666:11169: header row h48, muted #f1f5f9 fill,
   14px semibold foreground. (grid.css renders #f5f5f5 / 500.) No bottom border
   — the muted fill is the only separator (per design feedback). */
body.page-abbreviations td.dxgvHeader {
    background-color: #f1f5f9 !important;
    font-weight: 600 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 0 !important;
}
/* Data rows — Figma rows are 42px tall (legacy ~37). Bump cell padding-y.
   The tr.dxgvDataRow descendant selector outweighs grid.css's td.dxgv rule. */
body.page-abbreviations tr.dxgvDataRow td.dxgv {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

/* §F8 Letters row → search row gap — Figma spaces the by-letter block 24px
   above the search row (grid.css leaves 16px between the title-bar row and the
   SubHeader). Add the remaining 8px above the SubHeader content. Also drop the
   legacy navy (#2d3663) underline grid.css paints below the search row. */
body.page-abbreviations .modV2SubHeader {
    margin-top: 8px !important;
    border-bottom: 0 !important;
}

/* §F9 New Abbreviation CTA — relocated from the search row (where it floated
   alone at the far right) into the card header, right-aligned with the title.
   Markup moved into <Title> (Abbreviations.ascx); push it to the row's right
   edge and keep its text at 14px (not the 18px title size). The teal pill +
   "New Abbreviation" ::before label still come from grid.css / top of file. */
body.page-abbreviations div.modV2Title > a[id$='_lbNewAbbreviation'] {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* §F10 New / Edit Abbreviation popup body — the uc:Modal chrome (card, header,
   X close, Cancel/Create footer) is painted globally by components.css §9.10;
   this section only re-skins the PopupContent form. The legacy markup
   (AbbreviationNew.ascx / AbbreviationEdit.ascx) renders raw native fields
   (2px inset border, 12px text, radius 0) inside a right-aligned label table.
   Restate the refresh field chrome to match the page search input (§F5): 1px
   #e2e8f0 border, rounded-md 8px, 14px text, teal focus ring. Scoped to
   .modPopContent under the page body so it covers BOTH the New and Edit popups
   (identical field structure) but not the text-only Delete-confirm modal. */

/* Label table — 96px right-aligned label column, top-aligned to the field's
   first text line, with 16px between the two field rows. */
body.page-abbreviations .modPopContent td {
    vertical-align: top;
    padding-bottom: 16px;
}
body.page-abbreviations .modPopContent tr:last-child td {
    padding-bottom: 0;
}
body.page-abbreviations .modPopContent td:first-child {
    width: 104px;
    text-align: left;
    padding-top: 9px;
    padding-right: 12px;
    white-space: nowrap;
}
/* Labels — Inter 14px medium slate-900 (legacy renders them 12px/700). */
body.page-abbreviations .modPopContent td b {
    font-size: 14px;
    font-weight: 500;
    color: var(--q88-grid-fg, #0f172a);
}

/* Fields — match §F5 chrome. width:100% fills the value cell; !important
   defeats the inline width / native border the ASP.NET TextBox emits. */
body.page-abbreviations .modPopContent input,
body.page-abbreviations .modPopContent textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: inherit;
    color: var(--q88-grid-fg, #0f172a) !important;
    background-color: #ffffff !important;
}
body.page-abbreviations .modPopContent input {
    height: 36px !important;
    padding: 0 12px !important;
    line-height: 34px !important;
}
body.page-abbreviations .modPopContent textarea {
    min-height: 92px !important;
    padding: 8px 12px !important;
    line-height: 20px !important;
    resize: vertical;
}
body.page-abbreviations .modPopContent input:focus,
body.page-abbreviations .modPopContent textarea:focus {
    outline: none !important;
    border-color: var(--primary, #4F46E5) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15) !important;
}
body.page-abbreviations .modPopContent input::placeholder,
body.page-abbreviations .modPopContent textarea::placeholder {
    color: var(--muted-foreground, #475569);
}

/* ==========================================================================
   8. ManageOfflineActivations — 3-pane DNN skin width fix
   --------------------------------------------------------------------------
   ManageOfflineActivations.aspx (OfflineActivationsList.ascx) renders in a
   legacy 3-pane DNN skin: the center ContentPane holding the .q88m-card is
   flanked by two EMPTY Left/Right panes in <tr id="…trContentRow">. §4c
   forces the pane table to table-layout:fixed, and because the skin's first
   content-table row is a single colspan=3 cell, fixed layout splits the row
   into equal thirds — starving the center pane to ~1/3 of the content width
   (the card rendered ~330px wide, floated center).

   Revert THIS page to auto layout so the empty panes collapse to zero, and
   make the (non-empty) center cell greedy so the card fills the content
   area. Scoped to page-milbros-offline-activations only — every other
   Milbros grid uses a single-pane skin and keeps §4c's fixed layout.
   ========================================================================== */

body.page-milbros-offline-activations td.ContentPaneBody > table {
    table-layout: auto !important;
}

body.page-milbros-offline-activations tr[id$='trContentRow'] > td:not(:empty) {
    width: 100% !important;
}

/* Vessel-search toolbar (admin only) — inline cluster in the title bar's
   right cell. NO gap between the input and Search button: §9 pairs them as a
   seamless search bar (input has border-right:0 + left-only radius; the button
   supplies the right-rounded half). Only the "Vessel:" label is offset. */
body.page-milbros-offline-activations .q88m-vessel-search {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

body.page-milbros-offline-activations .q88m-vessel-search-label {
    margin-right: 8px;
    font-size: 14px;
    color: var(--q88m-fg);
}