/* MR/Claude 10/20/2026: the xm-4 look for ParamQuery grid (pqGrid 8.7 with its bootstrap theme): the data explorer, xm:datagrid,
   xm:grid and every mini-module grid. Styling only; pqGrid still positions rows and columns itself (inline top/left/height), so
   nothing here changes a size it measures, only colours, borders, type and icons.

   What changes: a rounded card instead of a square box; a light header in place of the data explorer's navy one (_grid.cfm) and
   pqGrid's grey gradient (lib/pqgrid/_init_js_css.cfm); quiet row lines; a blue tint for hovered and selected rows instead of
   yellow; Font Awesome in place of glyphicons and jQuery UI image sprites (sort arrows, the column menu, group toggles, the
   pager), which xm-4 does not load; a pager of icon buttons; chips for the group-by bar; styled filter-row inputs and pop-ups.

   Specificity. Grid selectors start with :is(.pq-grid,#xm4-grid). No element has that id: it lifts these rules above the sheets
   printed later in the page that target the same elements (pqGrid's own sheets, _init_js_css.cfm's inline style, the data
   explorer's main.css and _grid.cfm's inline style). !important answers !important rules in those sheets. */

.xm4 :is(.pq-grid,#xm4-grid) {
    --xmg-head: color-mix(in srgb, var(--xm4-soft) 60%, var(--xm4-surface));
    --xmg-line: var(--xm4-line);
    --xmg-row-line: var(--xm4-line-2);
    --xmg-hover: color-mix(in srgb, var(--xm4-soft) 75%, var(--xm4-surface));
    --xmg-select: color-mix(in srgb, var(--xm4-accent) 9%, var(--xm4-surface));
    --xmg-select-hover: color-mix(in srgb, var(--xm4-accent) 14%, var(--xm4-surface));
    --xmg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    color: var(--xm4-text);
    font-family: var(--bs-body-font-family);
    font-size: 13px;
    background: var(--xm4-surface);
    border: 1px solid var(--xmg-line) !important;
    border-radius: var(--xm4-radius-sm);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    overflow: clip; /* rounds the corners; clip (not hidden) is no scroll container, so a sticky header still sticks */
}
/* a grid nested in a row's detail pane, or in a pop-up, stays square and flat */
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid {border-radius: 6px; box-shadow: none;}

/* jQuery UI sprite icons inside a grid (group-by chips, the collapse button, tree toggles): xm-4's jQuery UI theme draws them
   from a light image sprite, and dark.css inverts it. Only the names listed here are swapped for Font Awesome, so an unlisted
   icon keeps its sprite instead of going blank. The sort arrows, group toggles and pager below refine these. */
.xm4 :is(.pq-grid,#xm4-grid) :is(.ui-icon-triangle-1-n,.ui-icon-triangle-1-s,.ui-icon-triangle-1-e,.ui-icon-triangle-1-w,.ui-icon-triangle-1-ne,.ui-icon-triangle-1-se,.ui-icon-close,.ui-icon-closethick,.ui-icon-circle-triangle-n,.ui-icon-circle-triangle-s,.ui-icon-gear,.ui-icon-arrow-4-diag,.ui-icon-search,.ui-icon-plus,.ui-icon-minus,.ui-icon-check) {
    display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 14px; height: auto; min-height: 14px;
    overflow: visible; text-indent: 0; background-image: none !important; filter: none; color: var(--xm4-muted); font: 900 10px/1 "Font Awesome 6 Pro"; vertical-align: middle;
}
.xm4 :is(.pq-grid,#xm4-grid) :is(.ui-icon-triangle-1-n,.ui-icon-triangle-1-ne)::before {content: "\f0d8";}
.xm4 :is(.pq-grid,#xm4-grid) :is(.ui-icon-triangle-1-s,.ui-icon-triangle-1-se)::before {content: "\f0d7";}
.xm4 :is(.pq-grid,#xm4-grid) .ui-icon-triangle-1-e::before {content: "\f0da";}
.xm4 :is(.pq-grid,#xm4-grid) .ui-icon-triangle-1-w::before {content: "\f0d9";}
.xm4 :is(.pq-grid,#xm4-grid) :is(.ui-icon-close,.ui-icon-closethick)::before {content: "\f00d";}
.xm4 :is(.pq-grid,#xm4-grid) .ui-icon-circle-triangle-n::before {content: "\f077";}
.xm4 :is(.pq-grid,#xm4-grid) .ui-icon-circle-triangle-s::before {content: "\f078";}
.xm4 :is(.pq-grid,#xm4-grid) .ui-icon-gear::before {content: "\f013";}
.xm4 :is(.pq-grid,#xm4-grid) .ui-icon-arrow-4-diag::before {content: "\f065";}
.xm4 :is(.pq-grid,#xm4-grid) .ui-icon-search::before {content: "\f002";}
.xm4 :is(.pq-grid,#xm4-grid) .ui-icon-plus::before {content: "\2b";}
.xm4 :is(.pq-grid,#xm4-grid) .ui-icon-minus::before {content: "\f068";}
.xm4 :is(.pq-grid,#xm4-grid) .ui-icon-check::before {content: "\f00c";}
/* the collapse / full-screen buttons at the top right */
/* MR/Claude 10/20/2026: pqGrid 11 draws these (and the pager buttons below) as <button class="ui-button ui-button-icon-only"> with
   the name as visible text, and leaves hiding it to jQuery UI 1.12's CSS; xm-4 loads jQuery UI 1.10's theme, so the words showed
   over the icons. font-size 0 hides the text; the icon sets its own font. 8.7/9.x draw span.pq-ui-button. */
.xm4 :is(.pq-grid,#xm4-grid) .pq-slider-icon :is(.pq-ui-button,button.ui-button) {display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 2px; padding: 0; background: transparent; background-image: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-slider-icon :is(.pq-ui-button,button.ui-button):hover {background: var(--xm4-soft); border-color: var(--xm4-line);}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-slider-icon,.pq-pager) button.ui-button-icon-only {font-size: 0; line-height: 0; text-indent: 0; box-shadow: none;}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-slider-icon,.pq-pager) button.ui-button-icon-only > .ui-icon {position: static; top: auto; left: auto; margin: 0; transform: none;}

/* ===================== Header ===================== */
.xm4 :is(.pq-grid,#xm4-grid) .pq-header-outer,
.xm4 :is(.pq-grid,#xm4-grid) .pq-header-outer .pq-cont-inner {background: var(--xmg-head); background-image: none; border-bottom-color: var(--xmg-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table .pq-grid-col,
.xm4 :is(.pq-grid,#xm4-grid) .pq-header-outer .pq-grid-number-col,
.xm4 :is(.pq-grid,#xm4-grid) .pq-header-outer .pq-grid-number-cell {
    color: var(--xm4-muted); background: var(--xmg-head); background-image: none;
    border-color: var(--xmg-row-line); font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table .pq-grid-col:hover {background: var(--xm4-soft);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table .pq-grid-col .fa {color: inherit;}
/* sorted column: darker label and an accent arrow. pqGrid 8.7 names the arrow .pq-col-sort-icon, 9.x (the data explorer,
   lib/tag/xm/dataexplorer.cfm) .pq-icon-col-sort; bootstrap mode writes glyphicon-arrow-up/down, otherwise ui-icon triangles.
   _grid.cfm turns the arrow and the menu icon white for its old navy header (filter: brightness(0) invert(1)): filter:none. */
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table .pq-grid-col:is(.pq-col-sort-asc,.pq-col-sort-desc) {color: var(--xm4-text); background: var(--xmg-head) !important; border-color: var(--xmg-row-line);}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-col-sort-icon,.pq-icon-col-sort):is(.glyphicon,.ui-icon) {
    position: relative; top: 0; display: inline-block; width: auto; height: auto; margin: 0 0 0 6px; overflow: visible; text-indent: 0;
    background: none !important; color: var(--xm4-accent); font: 900 10px/1 "Font Awesome 6 Pro" !important; vertical-align: 1px; filter: none; opacity: 1;
}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-col-sort-icon,.pq-icon-col-sort):is(.glyphicon-arrow-up,.ui-icon-triangle-1-n)::before {content: "\f062";}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-col-sort-icon,.pq-icon-col-sort):is(.glyphicon-arrow-down,.ui-icon-triangle-1-s)::before {content: "\f063";}
.xm4 :is(.pq-grid,#xm4-grid) .pq-col-sort-count {color: var(--xm4-accent); font-size: 10px;}
/* 9.x keeps 11px of margin on the EMPTY arrow span of every unsorted column, which clipped short labels ("Record" in 90px) */
.xm4 :is(.pq-grid,#xm4-grid) .pq-icon-col-sort:not(.ui-icon):not(.glyphicon) {min-width: 0; margin: 0;}
/* the column menu (pqGrid's menu.png; .pq-menu-icon in 8.7, .pq-icon-menu in 9.x): a filter icon that shows on hover, and
   stays (in accent) once the column is filtered */
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table :is(.pq-menu-icon,.pq-icon-menu) {
    top: 50%; right: 5px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: -11px;
    color: var(--xm4-muted); background: none; border: 0; border-radius: 6px; opacity: 0; filter: none; cursor: pointer; transition: opacity .15s, background-color .15s, color .15s;
}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table :is(.pq-menu-icon,.pq-icon-menu)::before {content: "\f0b0"; font: 400 11px/1 "Font Awesome 6 Pro";}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table .pq-grid-col:is(:hover,:focus-within) :is(.pq-menu-icon,.pq-icon-menu) {opacity: 1;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table :is(.pq-menu-icon,.pq-icon-menu):hover {color: var(--xm4-text); background: var(--xm4-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table .pq-col-filtered {color: var(--xm4-accent); font-weight: 600;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table .pq-col-filtered :is(.pq-menu-icon,.pq-icon-menu) {opacity: 1; color: var(--xm4-accent); border: 0;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table .pq-col-filtered :is(.pq-menu-icon,.pq-icon-menu)::before {font-weight: 900;}
@media (hover: none) {.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-table :is(.pq-menu-icon,.pq-icon-menu) {opacity: .7;}}
/* Columns that can only be filtered from Search Filters: _grid.cfm appends an "i" (theme.css rings it for the old navy header) */
/* MR/Claude 10/20/2026: a solid circle-info in the muted ink, blue on hover (Mario: the thin ring theme.css draws around an 8px "i"
   was hard to see), and header titles end in an ellipsis inside their box: .pq-td-div is a flex box, so its own text-overflow never
   reached the title and a long title ran under the icon ("Organization/Agency"). */
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-title-row .pq-grid-col.NoColFilter > i.fa-info {width: 14px; height: 14px; margin-top: -7px; border: 0; border-radius: 0; font-size: 14px; line-height: 14px; color: var(--xm4-muted) !important;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-title-row .pq-grid-col.NoColFilter > i.fa-info::before {content: "\f05a";}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-title-row .pq-grid-col.NoColFilter:hover > i.fa-info {color: var(--xm4-accent) !important;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-title-row .pq-grid-col > .pq-td-div > .pq-title-span {min-width: 0; overflow: hidden; text-overflow: ellipsis;}
/* resize handles: a hairline on hover */
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-col-resize-handle:hover {background: linear-gradient(var(--xm4-accent), var(--xm4-accent)) no-repeat center / 2px 60%;}

/* Filter row (filterModel.header) */
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-search-row .pq-grid-col {background: var(--xm4-surface); border-color: var(--xmg-row-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-search-row :is(input,select) {
    height: 26px; min-height: 0; padding: 0 8px; font-size: 12px; color: var(--xm4-text);
    background-color: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 7px; box-shadow: none;
}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-search-row :is(input,select):focus {outline: 0; border-color: var(--xm4-accent); box-shadow: 0 0 0 3px var(--xm4-tint);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-search-row :is(.pq-filter-icon,.pq-icon-filter) {filter: none; top: 50%; right: 6px; width: 14px; height: 14px; margin-top: -7px; background: none; opacity: .6; color: var(--xm4-muted);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-header-search-row :is(.pq-filter-icon,.pq-icon-filter)::before {content: "\f0b0"; font: 400 11px/14px "Font Awesome 6 Pro";}

/* ===================== Body ===================== */
.xm4 :is(.pq-grid,#xm4-grid) .pq-body-outer {background: var(--xm4-surface); border-color: var(--xmg-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-row {background: var(--xm4-surface); color: var(--xm4-text); border-color: var(--xmg-row-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-td-border-top > .pq-grid-row > .pq-grid-cell:not(.pq-focus),
.xm4 :is(.pq-grid,#xm4-grid) .pq-cont-inner > .pq-td-border-top > .pq-grid-row {border-bottom-color: var(--xmg-row-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-td-border-right > .pq-grid-row > .pq-grid-cell:not(.pq-focus) {border-right-color: var(--xmg-row-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-row.pq-striped {background: color-mix(in srgb, var(--xm4-soft) 40%, var(--xm4-surface));}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-cont-lt,.pq-cont-tr),
.xm4 :is(.pq-grid,#xm4-grid) .pq-body-outer .pq-cont-left {border-color: var(--xmg-line);}
/* hover and selection: on the row (the number and checkbox cells are transparent, so they follow) */
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-row.pq-grid-row-hover,
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-cell.pq-grid-cell-hover {color: inherit; background: var(--xmg-hover); border-color: var(--xmg-row-line);}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-grid-row,.pq-grid-cell).pq-state-select {color: inherit; background: var(--xmg-select) !important;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-row.pq-state-select.pq-grid-row-hover {background: var(--xmg-select-hover) !important;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-row > .pq-grid-cell.pq-focus {border: 1px solid var(--xm4-accent);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-editing-row {background: color-mix(in srgb, var(--xm4-warning) 10%, var(--xm4-surface)) !important;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-body-outer .pq-grid-number-cell,
.xm4 :is(.pq-grid,#xm4-grid) .pq-summary-outer .pq-grid-number-cell {color: var(--xm4-muted); background: transparent; border-color: var(--xmg-row-line); font-size: 11.5px; font-variant-numeric: tabular-nums;} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-cell {font-variant-numeric: tabular-nums;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-cell a:not(.btn):not(.label) {color: var(--xm4-accent); text-decoration: none;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-cell a:not(.btn):not(.label):hover {text-decoration: underline;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-cell .label {border-radius: 999px; font-weight: 600; font-size: 11px; letter-spacing: .01em;}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-grid-cell,.pq-grid-col) input[type=checkbox] {width: 15px; height: 15px; accent-color: var(--xm4-accent); cursor: pointer;}
/* the check-all and row checkbox columns are ~36px: centre the box and drop the padding that pushed the header one into an ellipsis */
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-col:has(> .pq-td-div > .pq-title-span > input[type=checkbox]:only-child) > .pq-td-div,
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-cell:has(> div > input[type=checkbox]:only-child) > div {padding-left: 0; padding-right: 0; text-align: center; text-overflow: clip;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-col:has(> .pq-td-div > .pq-title-span > input[type=checkbox]:only-child) .pq-col-sort-icon,
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-col:has(> .pq-td-div > .pq-title-span > input[type=checkbox]:only-child) .pq-col-sort-count {display: none;}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-grid-cell,.pq-grid-col) input[type=checkbox]:only-child {margin: 0; top: 0;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-norows {top: 24px; color: var(--xm4-muted); font-size: 13px;}

/* Summary rows and group rows */
/* MR/Claude 10/20/2026: Mario saw a double bottom border on grids. pqGrid's summary strip has transparent top and bottom borders;
   colouring both drew two lines under the last row even with no totals (an empty strip is 2px of border), right on top of the
   grid's or the pod's own bottom border, and the last row's divider made a third. Now an empty strip takes no space, a strip with
   totals keeps only its top line, and the last row has no divider. pqGrid writes the strip's height inline when it draws, so this
   must load before the grid renders (it does: the theme head). */
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-center > .pq-summary-outer {border-color: transparent;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-center > .pq-summary-outer:not(:has(.pq-grid-row)) {border-width: 0;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-center > .pq-summary-outer:has(.pq-grid-row) {border-top-color: var(--xmg-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-body-outer .pq-table > .pq-grid-row:last-child,
.xm4 :is(.pq-grid,#xm4-grid) .pq-body-outer .pq-table > .pq-grid-row:last-child > * {border-bottom-color: transparent;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-summary-outer .pq-grid-row,
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-summary-table div {background: var(--xmg-head); color: var(--xm4-text);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-summary-outer .pq-grid-cell {font-weight: 600;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-body-outer .pq-grid-row:has(> .pq-group-title-cell) {background: color-mix(in srgb, var(--xm4-soft) 55%, var(--xm4-surface));}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-title-cell {font-weight: 600; color: var(--xm4-text);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 4px 0 0; padding: 0; overflow: visible; text-indent: 0;
    background: none !important; border: 0; border-radius: 5px; color: var(--xm4-muted); font: 900 10px/1 "Font Awesome 6 Pro" !important; vertical-align: -3px; cursor: pointer;
}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-icon:hover {color: var(--xm4-text); background: var(--xm4-line) !important;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-icon:is(.glyphicon-minus,.ui-icon-triangle-1-se)::before {content: "\f078";}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-icon:is(.glyphicon-plus,.ui-icon-triangle-1-e)::before {content: "\f054";}
/* the "drag a column here to group" bar */
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-header {padding: 6px 8px; color: var(--xm4-muted); background: var(--xm4-surface); border-color: var(--xmg-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-item {display: inline-flex; align-items: center; gap: 4px; height: 26px; margin: 0 6px 0 0; padding: 0 8px; font-size: 12px; font-weight: 500; color: var(--xm4-text); background: var(--xm4-soft); border: 1px solid var(--xm4-line); border-radius: 8px;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-item:hover {border-color: var(--xm4-faint);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-item > :is(.pq-group-toggle,.pq-group-remove) {width: 16px; min-width: 16px; height: 16px; margin: 0; border: 0; border-radius: 4px; cursor: pointer;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-item > .pq-group-remove {font-weight: 400; font-size: 11px;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-item > :is(.pq-group-toggle,.pq-group-remove):hover {color: var(--xm4-text); background: var(--xm4-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-group-placeholder {color: var(--xm4-muted);} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */

/* ===================== Top bar, pager ===================== */
.xm4 :is(.pq-grid,#xm4-grid) > .pq-grid-top {color: var(--xm4-text); background: transparent; border-color: var(--xmg-line);}
.xm4 :is(.pq-grid,#xm4-grid) div.pq-toolbar {padding: 6px 8px; border-color: var(--xmg-line);}
/* MR/Claude 10/20/2026: pqGrid 11 prints toolbar buttons (xm:grid's Download) as a bare <button>; 8.7's bootstrap mode added
   btn btn-default. The same look as the filter pop-up's buttons below. */
.xm4 :is(.pq-grid,#xm4-grid) .pq-toolbar > button:not(.btn) {height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: var(--xm4-text); background: var(--xm4-surface); background-image: none; border: 1px solid var(--xm4-line); border-radius: 8px; box-shadow: none; cursor: pointer;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-toolbar > button:not(.btn):hover {background: var(--xm4-soft);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-grid-bottom {color: var(--xm4-muted); background: var(--xm4-surface); border-top: 1px solid var(--xmg-line);}
.xm4 :is(.pq-grid,#xm4-grid) div.pq-pager {padding: 6px 10px; font-size: 12.5px; color: var(--xm4-muted); background: transparent; border: 0;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager td {padding: 0 1px; vertical-align: middle;}
/* MR/Claude 10/20/2026: :is(.pq-ui-button,button.ui-button) = 8.7/9.x spans and pqGrid 11's real buttons (disabled with the
   attribute and .ui-state-disabled instead of .disabled) */
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager :is(.pq-ui-button,button.ui-button) {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0;
    color: var(--xm4-ink-2); background: transparent; background-image: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    transition: background-color .15s, color .15s;
}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager :is(.pq-ui-button,button.ui-button):hover {color: var(--xm4-text); background: var(--xm4-soft); border-color: var(--xm4-line);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager :is(.pq-ui-button.disabled,button.ui-button:disabled,button.ui-button.ui-state-disabled) {opacity: .35; cursor: default; background: transparent; border-color: transparent;}
/* MR/Claude 10/20/2026: filter none: dark.css inverts every .pq-theme .ui-icon (for jQuery UI's light sprite), which turned these
   already-themed glyphs dark, so in dark mode the enabled buttons looked disabled (8.7, 9.x and 11) */
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager :is(.pq-ui-button,button.ui-button) > .ui-icon {display: block; width: auto; height: auto; margin: 0; overflow: visible; text-indent: 0; background: none !important; color: inherit; font: 900 11px/1 "Font Awesome 6 Pro"; filter: none;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager .ui-icon-seek-first::before {content: "\f100";}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager .ui-icon-seek-prev::before {content: "\f104";}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager .ui-icon-seek-next::before {content: "\f105";}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager .ui-icon-seek-end::before {content: "\f101";}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager .ui-icon-refresh::before {content: "\f021"; font-size: 12px;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager span.pq-separator {height: 18px; margin: 0 6px; border-left: 1px solid var(--xm4-line); border-right: 0;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager :is(input.pq-page-current,select) {
    height: 28px; min-height: 0; margin: 0 4px; padding: 0 8px; font-size: 12.5px; color: var(--xm4-text);
    background-color: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 8px; box-shadow: none; vertical-align: middle;
}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager input.pq-page-current {width: 46px; text-align: center;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager select {appearance: none; -webkit-appearance: none; padding-right: 24px; background-image: var(--xmg-chevron); background-repeat: no-repeat; background-position: right 7px center; background-size: 11px 11px; cursor: pointer;}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager :is(input,select):focus {outline: 0; border-color: var(--xm4-accent); box-shadow: 0 0 0 3px var(--xm4-tint);}
.xm4 :is(.pq-grid,#xm4-grid) .pq-pager .pq-page-display {color: var(--xm4-muted);}

/* Loading */
.xm4 :is(.pq-grid,#xm4-grid) .pq-loading-bg {background: var(--xm4-surface); opacity: .5;}
.xm4 :is(.pq-grid,#xm4-grid) div.pq-loading-mask {width: auto; padding: 0; color: var(--xm4-surface) !important; background: var(--xm4-text) !important; border: 0; border-radius: 10px; box-shadow: var(--xm4-shadow);}
.xm4 :is(.pq-grid,#xm4-grid) div.pq-loading-mask > div {padding: 8px 14px; font-size: 12.5px; background: transparent; border: 0;}

/* ===================== Pop-ups (appended to <body>) ===================== */
/* The column menu: the data explorer opens it with one tab (filter), so its tab strip is hidden; condition, value(s), Clear / Ok */
.xm4 .pq-popup {color: var(--xm4-text); background: var(--xm4-surface); border: 1px solid var(--xm4-line) !important; border-radius: 12px; box-shadow: var(--xm4-shadow); overflow: hidden;}
.xm4 .pq-popup :is(.ui-tabs,.ui-tabs-panel) {padding: 0; color: inherit; background: transparent; border: 0;}
.xm4 .pq-popup .ui-tabs-nav {margin: 0; padding: 4px 6px 0; background: var(--xm4-soft); background-image: none; border: 0; border-bottom: 1px solid var(--xm4-line); border-radius: 0;}
.xm4 .pq-popup .ui-tabs-nav:has(> li:only-child) {display: none;}
.xm4 .pq-popup .ui-tabs-nav li {background: transparent; border: 0;}
.xm4 .pq-popup .ui-tabs-nav li.ui-tabs-active {background: var(--xm4-surface); border: 1px solid var(--xm4-line); border-bottom-color: var(--xm4-surface);}
.xm4 .pq-popup .pq-filter-menu {padding: 4px 10px 10px; color: var(--xm4-text); background: transparent;}
.xm4 .pq-popup .pq-filter-menu :is(select,input[type=text],input:not([type])) {
    width: 100%; height: 32px; min-height: 0; padding: 0 10px; font-size: 13px; color: var(--xm4-text);
    background-color: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 8px; box-shadow: none;
}
.xm4 .pq-popup .pq-filter-menu select {appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 12px 12px;}
.xm4 .pq-popup .pq-filter-menu :is(select,input):focus {outline: 0; border-color: var(--xm4-accent); box-shadow: 0 0 0 3px var(--xm4-tint);}
.xm4 .pq-popup .pq-filter-menu button {height: 30px; padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--xm4-text); background: var(--xm4-surface); background-image: none; border: 1px solid var(--xm4-line); border-radius: 8px; box-shadow: none; cursor: pointer;}
.xm4 .pq-popup .pq-filter-menu button:hover {background: var(--xm4-soft);}
.xm4 .pq-popup .pq-filter-menu button[data-rel=ok] {color: var(--xm4-surface); background: var(--xm4-accent); border-color: var(--xm4-accent);}
.xm4 .pq-popup .pq-filter-menu button[data-rel=ok]:hover {background: var(--xm4-accent-dark); border-color: var(--xm4-accent-dark);}

/* ===================== "+" add column (js/grid-add-column.js) ===================== */
/* MR/Claude 10/20/2026: the button sits over the header row just after the last column; when the columns overflow it is
   pinned to the right edge over a fade, so it never hides a label without a hint. The panel is appended to <body>.
   It is a child of .pq-grid-center-o (outside role="grid", the script places it over the header), so z-index 10 keeps it
   above the sticky header (z-index 9); older copies of the script put it inside .pq-header-outer. */
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-header-outer,.pq-grid-center-o) > .xm4-gac-add {
    position: absolute; z-index: 10; top: 5px; left: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin: 0; padding: 0; font-size: 12px; color: var(--xm4-muted);
    background: var(--xm4-surface); border: 1px dashed color-mix(in srgb, var(--xm4-faint) 70%, var(--xm4-surface)); border-radius: 8px;
    box-shadow: none; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s;
}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-header-outer,.pq-grid-center-o) > .xm4-gac-add:is(:hover,.is-open) {color: var(--xm4-accent); background: var(--xm4-tint); border-style: solid; border-color: var(--xm4-accent);}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-header-outer,.pq-grid-center-o) > .xm4-gac-add:focus-visible {outline: 2px solid var(--xm4-accent); outline-offset: 2px;}
/* MR/Claude 10/20/2026: js/widget-a11y.js makes a scrolling row area with nothing focusable in it a tab stop (so the keyboard
   can scroll it); its parent clips, so the ring is drawn inside the edge */
.xm4 :is(.pq-grid,#xm4-grid) .pq-cont-inner[tabindex]:focus-visible {outline: 2px solid var(--xm4-accent); outline-offset: -2px;}
/* MR/Claude 10/20/2026: pqGrid's bootstrap theme (8.7, 9.x and 11.x) sets `.pq-theme *:focus {outline: 1px solid #aaa}`
   (about 2.3:1 on white). It ties theme.css's `.xm4 :focus-visible` on specificity and loads later, so keyboard focus on
   pager buttons, cell links and pop-up items showed that faint line. One more class gives them the xm-4 ring; inputs and
   selects keep their box-shadow ring and the row area its inset ring (both rules above are more specific) */
.xm4 .pq-theme :focus-visible {outline: 2px solid var(--xm4-accent); outline-offset: 1px;}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-header-outer,.pq-grid-center-o) > .xm4-gac-add.is-pinned {border-style: solid; border-color: var(--xm4-line); box-shadow: 0 1px 2px rgba(15,23,42,.08);}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-header-outer,.pq-grid-center-o) > .xm4-gac-add.is-pinned::before {
    /* MR/Claude 10/20/2026: exactly the title row (--xm4-gac-pad is set by the script), keeping the row's bottom border visible */
    content: ""; position: absolute; z-index: -1; top: calc(-1 * var(--xm4-gac-pad, 5px)); bottom: calc(1px - var(--xm4-gac-pad, 5px)); left: -28px; right: -7px; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--xmg-head) 26px);
}
.xm4 :is(.pq-grid,#xm4-grid) :is(.pq-header-outer,.pq-grid-center-o) > .xm4-gac-add[hidden] {display: none;}

.xm4 .xm4-gac-panel {
    position: fixed; z-index: 1065; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    color: var(--xm4-text); background: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 12px;
    box-shadow: var(--xm4-shadow-lg); font: 400 13px/1.35 var(--bs-body-font-family);
}
.xm4 .xm4-gac-search {display: flex; align-items: center; gap: 8px; flex: none; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--xm4-line); color: var(--xm4-faint); font-weight: 400;}
.xm4 .xm4-gac-search input {flex: 1 1 auto; min-width: 0; height: 24px; padding: 0; color: var(--xm4-text); background: transparent; border: 0; box-shadow: none; outline: 0; font: inherit;}
.xm4 .xm4-gac-list {flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 6px 6px; overscroll-behavior: contain;}
.xm4 .xm4-gac-group {position: sticky; top: -4px; z-index: 1; margin: 0 -6px; padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--xm4-muted); background: var(--xm4-surface);} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */
.xm4 .xm4-gac-item {
    display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; margin: 0; padding: 5px 8px;
    text-align: left; color: var(--xm4-text); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font: inherit;
}
.xm4 .xm4-gac-item:is(:hover,:focus-visible) {background: var(--xm4-soft); outline: 0;}
.xm4 .xm4-gac-item > span {flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.xm4 .xm4-gac-type {flex: none; width: 16px; text-align: center; font-size: 12px; color: var(--xm4-faint);}
.xm4 .xm4-gac-check {flex: none; font-size: 11px; color: var(--xm4-accent); visibility: hidden;}
.xm4 .xm4-gac-item.is-on .xm4-gac-check {visibility: visible;}
.xm4 .xm4-gac-item.is-on > span {font-weight: 600;}
.xm4 .xm4-gac-empty {padding: 18px 10px; text-align: center; color: var(--xm4-muted);}
.xm4 .xm4-gac-foot {display: flex; flex-direction: column; flex: none; padding: 6px; border-top: 1px solid var(--xm4-line); background: color-mix(in srgb, var(--xm4-soft) 45%, var(--xm4-surface));}
.xm4 .xm4-gac-foot button {display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; padding: 5px 8px; text-align: left; color: var(--xm4-ink-2); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 500;}
.xm4 .xm4-gac-foot button:is(:hover,:focus-visible) {color: var(--xm4-text); background: var(--xm4-soft); outline: 0;}
.xm4 .xm4-gac-foot button > i {width: 16px; text-align: center; color: var(--xm4-accent);}